Here are 18 Detailed Photoshop UI Design Tutorials to creating professional-quality graphic elements for web pages and multimedia output.

To restore all Photoshop panels back to their default workspaces, click Restore Default Workspaces. Select the UI Text settings you want to use: UI Language. Choose a default language. Choose a size for interface fonts.
One of the best ways to produce UI assets for Xcode is to design your Photoshop layouts to an underlying retina base. Set your macro grid (columns, rows, and gutters) to whichever dimensions you prefer, but make sure you work to an underlying base set in 2 pixels increments.

Unlimited Downloads : 600,000+ Print Templates & Design Assets Ad

InVisionApp chooses to approach this in many ways, but one of their most successful freebies to date has been the Free Chat UI Kit for Photoshop & Sketch. This isn’t just any other UI kit. This is a fully function instant messaging application using modern design, and modern design features.

Business Card

Print Templates

Flyer

Print Templates

Brochure

Print Templates

Portfolio

Print Templates

Lookbook

Print Templates

Magazine

Print Templates

The underlying secret to beautiful user interface design is realism: making 2D objects on your screen appear to sit in 3D space with volume, surface properties and undulations that might appear in real life. These faux 3D objects have highlights and shadows just like objects on your desk might have, and they have textures that emulate real objects from glass to sandpaper and everything in between. Designing beautiful user interfaces has more to do with the why than the how.

In this tutorial, you’ll learn how to use light and shadow to make realistic artwork – in this case, a record player app icon. Using Photoshop’s powerful layer styles, I’ll show you how to produce impressive results in a short amount of time.

In this tutorial we’re going to be designing an iPhone user interface for a forum and chat based mobile application. The app involves a handful of everyday touch interface elements, such as buttons, input fields and touch gestures. We will be covering various Photoshop tools, layer styles and of course tackling any design constraints; as well making the design pixel-perfect and beautiful enough to be worthy of a place on an iPhone screen.
The design was put together using Photoshop CS5.5, however all recent versions of Photoshop will work wonderfully.

In this tutorial we will create a clean Twitter app interface in Photoshop using layer styles and basic vector shapes.

In this tutorial you will learn simple but elegant techniques that you can apply on your designs!

In this Photoshop tutorial, you’ll learn you how to build a clean and sleek streaming video player user interface. Along the way, you’ll learn some popular effects and techniques often used in modern web design. We’ll use tools like the Rectangular Marquee Tool, Horizontal Type Tool and Rounded Rectangle Tool and we will work with layer styles, which gives us flexibility.

In this tutorial we’re going to be creating a gorgeous and modern user interface button suitable for the web or a mobile interface design.

In this tutorial we will show you how to design a Mobile Calendar App in Photoshop.

Visually exciting interfaces have progressed in leaps and bounds over the past few years. This tutorial will show you some clever interfacing techniques and how to build a sleek interface of your own.

How to create a twitter UI box for your website or desktop application.

In this tut we’ll learn to create a media player interface in bold, modern colors 🙂 Cause…you know, what’s the point in being a good interface designer if you don’t go with the times and color trends?

In this tutorial you’ll learn how to design a sleek audio player interface in Adobe Photoshop.

Photoshop Ui Design Tutorials Pdf

One of the most important aspects of playing a video game is how information is presented. How the graphics are presented makes a major difference in how the players will perceive the game during play. In today’s tutorial we will demonstrate how to design a video game interface window. During the process we will show how to manually draw certain aspects, apply layer styles, textures, and even how to incorporate Adobe Illustrator.

How to create an amplifier interface using simple shapes and layer styles.

With some simple techniques we will create a beautiful login interface. We will be using some variations of the color gray to help keep the interface as simple, elegant and minimal as possible.

How to Create a Detailed Audio player in Photoshop.

In this web design tutorial we will create a portfolio web layout using fabric textures.

How to create a one-page retro web design using Adobe Photoshop.

*Update: I've switched entirely to using Sketch for design. You should check it out.

If you’re new to Photoshop and you’re designing UI or exporting assets there are some important settings you should use to get the best results. This guide uses iPhone apps as the example settings, but the basic principles apply to all design work in Photoshop. Let’s get to it.

New File Settings

The first step is to open Photoshop and set up a few basic presets for all of your UI work.

Open Photoshop → File → New

Width: 640 pixels
Height: 1136 pixels (4 inch iPhone device)
Resolution: 72 pixels / inch (PPI)
Color Mode: RGB Color
Background Contents: White (optional)
Color Profile: Don't Color Manage This Document (more on color settings later)
Pixel Aspect Ratio: Square Pixels
Save these settings as a preset so you can re-use them for every document you create. This is especially useful when you’re designing layouts to support the different iPhone screen sizes (3.5 inch and 4 inch) or you’re also targeting iPad. Save a preset template for each device configuration and you are done.

Snap Settings

One of the most important things to get right to is make sure all of your UI assets are as sharp and crisp as possible. In Photoshop it’s very easy to end up with blurry edges if your work is not aligned to pixel boundaries. To fix this, you need to use the correct snap settings so that every pixel stays sharp.

Open your Photoshop file and enable pixel snapping for all objects:

Open Photoshop File → View → Snap → “Checked”

Open Photoshop File → View → Snap To → “All”

Snap Settings - Snap Vector Tools and Transforms to Pixel Grid

The setting ‘Snap Vector Tools and Transforms to Pixel Grid’ is a global setting that applies to vector drawing and editing, and ensures that your vector tools will snap to proper pixel boundaries when creating, editing, or transforming. Make sure this on so you are always working to the pixel grid.

Photoshop → Preferences → General → Snap Vector Tools and Transforms to Pixel Grid→ “Checked”

Snap Settings - Align Edges

The Align Edges setting forces the edge of objects to snap to the pixel boundaries. It works per vector layer, rather than as a global setting. The idea here is that the setting may help you get sharp object edges without compromising the internals of the object. In practice however, this does not appear to be the case, and Marc Edwards actually recommends against having Align Edges switched on:

“The way it works is a bit confusing — it snaps the layer’s bounding box to the grid automatically, which can push interior points out of alignment. Align Edges can be pretty frustrating if you don’t notice it’s on or understand it fully, because the vector path is shown as you’ve placed the points, but the rendering of the object is shown after the Align Edges adjustments. I have it turned off 99% of the time”.<

Ui Photoshop