Build a Slick Rich User Interface 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.
Typical examples of rich user interfaces can be found on a variety of iPhone apps, where designers have created detailed skins based around a theme, often paying close attention to the smallest detail to develop a stunning interface. The interfaces of ConvertBot and WeightBot from the app manufacturer Tabots are a couple of my personal favourites, and it’s clear that their designs have been a great source of inspiration for this tutorial. Let’s take a look at designing an rich graphical user interface of our own, using Photoshop trickery to create a modern device comprising of unique user controls and a realistic LED screen with subtle textures and details.
Quick Nav:
Final image preview
Step 1
Open up Photoshop and create a new document with a black background. Set the dimensions to 320x460px. Grab the Rounded Rectangle shape tool and set the corner radius to 10px. Draw a white box filling the canvas.
Step 2
Add some depth and detail to the rectangle by adding a Layer Style. First, add a Gradient Overlay ranging from #d8d8d8 to #ffffff.
Step 3
Next, add a 1px Stroke aligned to the inside of the rectangle with the colour swatch #ebebeb.
Step 4
Back with the Rounded Rectangle tool, draw a black shape to represent the LED screen. Drag guides onto the canvas and align the screen centrally.
Step 5
Add some Layer Styles to the screen, starting with a Gradient Overlay spanning vertically from #000000 to #535353.
Step 6
Next, add an Outer Glow using the colour swatch of #d8d8d8. Adjust the spread and size to create the impression of a bevelled edge around the screen to give the sense of depth.
Step 7
Finally, add a tiny Inner Shadow using a light grey colour (#848484). Adjust the settings so that the shadow is just 1px in size to leave a thin highlight scross the top rim of the screen.
Step 8
Draw a triangle using the Polygonal Lasso Tool and align it with the center of the canvas. Add a layer mask to the screen layer to knock out this triangular shape from the screen area.
Step 9
Use the Type Tool to mock up some stats and figures. Use a range of type sizes and weight to provide focus to the important elements.
Step 10
Double click the layer of the large number to add some Layer Style options. Start by adding a Color Overlay of a bright green (#00ffcc).
Step 11
Next, add an Outer Glow using the same fill colour. Adjust the size of the glow to give an illuminated appearance.
Step 12
Open up a new document at 4px by 4px. Zoom right into the document and use the Pencil tool to draw two horizontal lines across the canvas. Go to Edit > Define Pattern and give it a name of LED lines.
Step 13
Press CMD (or CTRL) key while clicking the screen layer’s thumnail in the layer palette to load the selection. Create a new layer then fill the area using the Paint Bucket Tool. Remember to select Pattern from the options dropdown, then select the LED lines pattern we’ve just created.
Step 14
Change the Blending Mode of the LED lines layer to Multiply to render the white areas transparent, then drop the Opacity right down to around 30% to tone down the effect.
Step 15
Draw an Elliptical Marquee across the screen area, then trim it down to size by clicking the screen layer’s thumbnail while holding the SHIFT, ALT and CMD keys. Drag a white gradient across the mask to create a highlight, then drop the opacity to around 7%.
Step 16
Draw a large circle in the main body of the interface and fill with a linear gradient of #ffffff to #d8d8d8. Align the circle centrally according to the guides.
Step 17
Duplicate the circle and scale it down while holding the ALT key. Fill this circle with a #b1b1b1 to #000000 radial gradient.
Step 18
Now let’s create another repeating pattern swatch. This time create a new document of 10px by 10px and draw some marks with the pencil tool to replicate the following image. Define this image as a pattern.
Step 19
Load the selection of the inner cirle layer. Then create a fresh layer and fill with the newest pattern swatch.
Step 20
Change the blending mode to Multiply, then drop the opacity to 30% to tone down the effect.
Step 21
Create another circle using the grey to white gradient and scale into position to sit centrally. Add a soft Drop Shadow and a fine white stroke to add little touches of depth.
Step 22
Duplicate the circle and scale it down slightly. Edit the Layer Styles to include a vibrant green Gradient Overlay (#186f00 to #4df871).
Step 23
Next add a fine stroke using a darker green tone of #8ebc8b. Set this to 2px in size and aligned to the outside to give a subtle bevelled edge appearance.
Step 24
Finish off the button with a soft Inner Glow. Use the oftens of a white glow set to Screen, with large 13px size and opacity toned back to around 27%.
Step 25
Add a little command to the button, such as the word ‘GO’. Scale and position the word centrally on the button.
Step 26
Head into the Layer Style options and add a green Gradient Overlay ranging from #208512 to #228b17.
Step 27
Next add an Inner Shadow using the default black swatch, but drop the opacity right down to around 4% and adjust the sizing and distance right back to 5px.
Step 28
Add a tiny highlight to the bottom of the button text using a Drop Shadow, but go in and edit the settings to use a white colour set to Normal. Also adjust the distance to 0, size to 1px and drop the opacity to around 50%.
Step 29
Create a new layer below the central button, then use the marquee tool to draw a 2px selection. Fill the selection with black, then nudge it 2px to the right and fill with grey.
Step 30
Duplicate the layer, then press CMD+T to transform the shape. Use the rotate option while holding Shift to create multiple instances of the lines facing in various directions. Drop the opacity to 28% to give the impression of a collection of individual buttons in the central control area.
Step 31
Use the Type tool once more to position a range of symbols onto the buttons. Don’t forget to rotate each one to face in the correct direction depending on the orientation of each button.
Step 32
On a new layer, use the Single Row Marquee tool to draw a 1px line across the document. Fill this with white, then nudge the selection 1px and fill with grey. This simple trick gives the impression of a chiselled joint line.
Step 33
Draw a small circle using the Elliptical Marquee tool, then right click and select Stroke. Enter 2px in the options to create a mini donut shape.
Step 34
Head into the Layer Style options and add a grey Gradient Overlay. Select swatches of #d6d6d6 to #dedede.
Step 35
Next, add an Inner Shadow. Use settings of 5px and adjust the opacity right down to 25% to tone down the effect.
Step 36
Create the bottom highlight effect using the Drop Shadow. Remember to change the colour to white and select the Normal blending mode.
Step 37
Duplicate the tiny circular shapes and position them around the control dial.
Step 38
Zoom out to 100% to check out the interface. Add any tiny details or make adjustments to the positioning of the elements.
Final result
74 Comments
Photoshop tutorials, from beginner to advanced. photo manipulation, icon design, text effects, interface, layout, painting, photo effects, psd tuts, maxon cinema 4d, designing.
Flag as inappropriatehttp://alophotoshop.co.cc
Such good advice, so many thanks, cheers.
Flag as inappropriatePretty nice tutorial thanks so much
Flag as inappropriateHI,
Gr8 Work!!!!
can u pls let me know where is the css for iphone application.
Thanks in Advance
Flag as inappropriateExcellent tutorial!!! keep up the good work
Flag as inappropriatethank you very much for sharing this tutorial~
Flag as inappropriateI love this tutorial !!
I’ve learned many detail things I didn’t know.
nice .
Flag as inappropriateyoure so hansome
Flag as inappropriateNice! Tutz
Flag as inappropriateplease Share More?
THanx……………………………………..
…… . . … . . . …….
…… ….. ….. ….. . . .
…… . . . . . . . …….
………………………………………………..
Wow great information..Thanks!
Flag as inappropriateThank you ！！！
Flag as inappropriatenice! thanks for sharing
Flag as inappropriateAwesome tutorial , Thank you for your share.
Flag as inappropriatewow Great article, thanks!164
Flag as inappropriatewow Great article, thanks!151
Flag as inappropriatewow Great article, thanks!146
Flag as inappropriateDude! You don’t know how much money you’ve just saved me… lol
Thanks Chris
Flag as inappropriateI want to shout “GEEEEEEEEEEENIIIIIIIIIIIIIIIIIUUUUUUUUUUUUUUUSSSSS”
Flag as inappropriateTAPBOTS STYLE!
Flag as inappropriateGreat work.
Flag as inappropriateSweet result from combining many useful techniques.
I found one thing a bit odd though and that is a couple of the lines from step 30.
Flag as inappropriateIf the the lighter lines are supposed to represent highlights and the darker one shadows (a sort of bevel effect) then the line at 10:30 and 4:30 have their lines reversed since the global light is set to 90 degrees.
Small detail I know but noticeable nonetheless. I guess I’ve just worked too long as an Art Director ;-P
Thanks alot.I used this in a Final Cut project.Good luck.
Flag as inappropriateyeeeeeeee I made it !!!!!!! it was just a lack of my imagination … i should have thought i have to make a bigger marquee…
Flag as inappropriateThanks a lot again … :) :D
@jarvo
Flag as inappropriatewhat it doesn’t work at me is the ELLIPTICAL MARQUEe… at me is just a flatten circle (shorcut is M i bet) when i hold the mouse and move it…so how should i draw it?
Or maybe my Photoshop CS3 it’s not the proper version…
Thank’s a lot for response,
Lavinia
This site is the best
Flag as inappropriate<3 Thanks Gervet. Chris deserves the applause on this one, be sure to check out Blog.Spoongraphics! The guy has a huge collection of useful resources.
Flag as inappropriateHow can i make the elliptical marque to follow the screen edges? It’s a bit confusing…
Flag as inappropriate@lavi try this
1) make a new layer right above the screen layer
2) draw the elliptical shape out
3) hold SHIFT, ALT and CMD keys and then click on the screen layer thumbnail.
Hope this helps.
Flag as inappropriateHotness! I dig the custom patterns
Flag as inappropriateReally great
Flag as inappropriateawesome! full of ideas and quick tips :) Thanks Chris!
Flag as inappropriatethanks for the nice tutorial
Flag as inappropriatethanks =)
Flag as inappropriateAwesome tutorial. Keep posting…
Flag as inappropriateThanks!
This is an nice idea, I’ll have to try it.
Also, the email design for the BETA thingy looks sweet.
Flag as inappropriateWonderful tutorial. Enjoyed it alot. Thanks!
Flag as inappropriategreat tutorial.
Flag as inappropriateAs Martin posted already this immediately reminded me of the iPhone application ConvertBot or WeightBot. They both have gorgeous designs and ConvertBot looks exactly like this ;)
Must’ve been the inspiration or even same designer?
Flag as inappropriatecool tutorial. a few things I can pick up on for web design related stuff too.
Flag as inappropriateGreat job on this tutorial Chris. Looks really nice and clean!
Flag as inappropriatevery nice details tutorial. Thanks Chris.
Flag as inappropriateWow, !
Flag as inappropriateAwesome tutorial Chris! Great end result :-)
Flag as inappropriateConvertbot FTW :-)
Flag as inappropriatePretty cool! Those self-made patterns are new for me, got to try that one out myself. Although I didn’t really felt the idea with the little sharp thing in the display. It doesn’t look as smooth as the whole media-player kind of device.
Flag as inappropriate