Sign In  |  Join Now Become a member to add links and start earning points!

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.

Final image preview

Rich user interface design

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

Rich user interface design

74 Comments

  1. Add point Subtract point

    Photoshop tutorials, from beginner to advanced. photo manipulation, icon design, text effects, interface, layout, painting, photo effects, psd tuts, maxon cinema 4d, designing.
    http://alophotoshop.co.cc

    Flag as inappropriate
  2. Add point Subtract point
    Doug Lockwood (1 Point) December 14, 2010 at 11:24 pm

    Such good advice, so many thanks, cheers.

    Flag as inappropriate
  3. Add point Subtract point

    Pretty nice tutorial thanks so much

    Flag as inappropriate
  4. Add point Subtract point
    kapil (0 Points) August 21, 2010 at 7:09 am

    HI,
    Gr8 Work!!!!
    can u pls let me know where is the css for iphone application.

    Thanks in Advance

    Flag as inappropriate
  5. Add point Subtract point
    Rob Boerman (1 Point) July 24, 2010 at 1:03 pm

    Excellent tutorial!!! keep up the good work

    Flag as inappropriate
  6. Add point Subtract point
    alice (2 Points) June 8, 2010 at 1:38 am

    thank you very much for sharing this tutorial~
    I love this tutorial !!
    I’ve learned many detail things I didn’t know.

    Flag as inappropriate
  7. Add point Subtract point
    shahid (0 Points) May 8, 2010 at 7:02 am

    Nice! Tutz
    please Share More?
    THanx……………………………………..
    …… . . … . . . …….
    …… ….. ….. ….. . . .
    …… . . . . . . . …….
    ………………………………………………..

    Flag as inappropriate
  8. Add point Subtract point
    Web Design (1 Point) April 26, 2010 at 7:32 pm

    Wow great information..Thanks!

    Flag as inappropriate
  9. Add point Subtract point
    โหลดเพลง (1 Point) March 29, 2010 at 11:39 am

    Awesome tutorial , Thank you for your share.

    Flag as inappropriate
  10. Add point Subtract point
    โหลดเพลงฟรี (0 Points) February 3, 2010 at 1:11 am

    wow Great article, thanks!164

    Flag as inappropriate
  11. Add point Subtract point
    เนื้อเพลง (1 Point) February 1, 2010 at 11:14 pm

    wow Great article, thanks!151

    Flag as inappropriate
  12. Add point Subtract point
    เพลงใหม่ล่าสุด (1 Point) February 1, 2010 at 1:18 am

    wow Great article, thanks!146

    Flag as inappropriate
  13. Add point Subtract point

    Dude! You don’t know how much money you’ve just saved me… lol

    Thanks Chris

    Flag as inappropriate
  14. Add point Subtract point
    Lyons Solutions Web Design (2 Points) November 29, 2009 at 10:24 am

    I want to shout “GEEEEEEEEEEENIIIIIIIIIIIIIIIIIUUUUUUUUUUUUUUUSSSSS”

    Flag as inappropriate
  15. Add point Subtract point
    fractalfrog (1 Point) November 8, 2009 at 8:28 am

    Sweet 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.
    If 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

    Flag as inappropriate
  16. Add point Subtract point

    Thanks alot.I used this in a Final Cut project.Good luck.

    Flag as inappropriate
  17. Add point Subtract point

    yeeeeeeee I made it !!!!!!! it was just a lack of my imagination … i should have thought i have to make a bigger marquee…
    Thanks a lot again … :) :D

    Flag as inappropriate
  18. Add point Subtract point

    @jarvo
    what 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

    Flag as inappropriate
  19. Add point Subtract point

    How can i make the elliptical marque to follow the screen edges? It’s a bit confusing…

    Flag as inappropriate
  20. Add point Subtract point

    Hotness! I dig the custom patterns

    Flag as inappropriate
  21. Add point Subtract point
    Sneh Roy (0 Points) October 27, 2009 at 6:44 pm

    awesome! full of ideas and quick tips :) Thanks Chris!

    Flag as inappropriate
  22. Add point Subtract point
    SamGore (1 Point) October 27, 2009 at 4:01 pm

    thanks for the nice tutorial

    Flag as inappropriate
  23. Add point Subtract point

    Awesome tutorial. Keep posting…
    Thanks!

    Flag as inappropriate
  24. Add point Subtract point
    Nokadota (2 Points) October 26, 2009 at 8:31 pm

    This is an nice idea, I’ll have to try it.

    Also, the email design for the BETA thingy looks sweet.

    Flag as inappropriate
  25. Add point Subtract point
    CoreyGlory (1 Point) October 26, 2009 at 5:56 pm

    Wonderful tutorial. Enjoyed it alot. Thanks!

    Flag as inappropriate
  26. Add point Subtract point

    As 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 inappropriate
  27. Add point Subtract point
    Mike Smith (1 Point) October 26, 2009 at 1:07 pm

    cool tutorial. a few things I can pick up on for web design related stuff too.

    Flag as inappropriate
  28. Add point Subtract point
    Design Informer (1 Point) October 26, 2009 at 12:24 pm

    Great job on this tutorial Chris. Looks really nice and clean!

    Flag as inappropriate
  29. Add point Subtract point
    brushess (2 Points) October 26, 2009 at 12:22 pm

    very nice details tutorial. Thanks Chris.

    Flag as inappropriate
  30. Add point Subtract point
    Tim Smith (3 Points) October 26, 2009 at 9:52 am

    Awesome tutorial Chris! Great end result :-)

    Flag as inappropriate
  31. Add point Subtract point
    Martin Leblanc (3 Points) October 26, 2009 at 9:14 am

    Convertbot FTW :-)

    Flag as inappropriate
  32. Add point Subtract point
    Jordy666sic (2 Points) October 26, 2009 at 9:14 am

    Pretty 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