How to Create a Mobile Phone UI Header Top Bar in Photoshop
Designing apps and pages for mobile phones is becoming more and more necessary. This tutorial will start with the mobile phone UI basics – how to create the top bar in Photoshop. All you need is:
- Adobe Photoshop
01. First, lets get the dimensions right. Open a new document with a width of 320 px. This is the regular mobile phone screen width.
02. Now take the Rectangle tool and create a rectangle at the top of the screen. That will be the top bar. make it as high as you please, but stay in the user friendly zone with high enough to be able to press buttons on it and not too high so it’d not cover too much screen area. Now go to Layer > Layer Styles > Gradient Overlay and add the gradient/color of your identity. Press Ok.
04. Lets start making the Back button by selecting the Rounded rectangle tool. The back button does not have to be round though. It is all about your identity so try all sort of different shapes that suit your page best.
05. Now add some layer styles to your new back button (Layer > Layer Styles > Blending options) and first, set the Fill Opacity to 0% and then move to the Bevel and Emboss tab and add some more settings. Don’t press Ok yet.
08. You can also make the same colored footer. And your top bar is done! It doesn’t seem such an important element, but in fact, this will be the element that will always be visible throughout users visit, so be sure to make it nice and follow the style of your page.