Designing Custom iOS App Interface Elements using Photoshop

Monday, September 15, 2014

Free iPhone GUI PSD kits include a lot of the primary elements needed for app design. But sometimes it’s necessary to build your own custom interface elements. I always preferred the older iOS 5-6 UI above the more flat-looking iOS7. Specifically I fell in love with this Microsoft Word app for iPhone created by the very talented Victor Erixon.

In this tutorial I want to demonstrate how to recreate a couple of these same MS Word interface elements from scratch. Building with shapes and paths will allow for an easier process of scaling the graphics to larger sizes. You don’t even need to know a whole lot about Photoshop to follow along with this tutorial. Plus you can download a copy of my PSD file to check out the final result.

dark photoshop ios buttons and select menu preview

Download PSD

Segmented Button Groups

First we’ll design a group of 3 toolbar buttons which behave as font modifiers. Create a new document at 800×600 and fill the background using a dark shade of blue(I’ve used #2f3c50). It may help to also create a new group for the UISegmentedControl buttons and split them up into sub-groups.

The two end buttons have rounded corners while any buttons placed in-between will be straight squares. This boils down to only 2 raw shapes and it’s easiest to start with the outer rounded buttons. Select the rounded rectangle tool with a border radius of 10px. Make sure the “snap to pixels” option is checked from the dropdown settings panel.

For dimensions I’m using 124×108 as a retina graphic which should be 62×54 @1x size. If you want to use a fixed width from the settings panel be sure to add an extra 10px to the width(either 134px or 72px respectively). The shape will lose 10px in width because we need to delete a couple anchor points in order to get the flattened border on one side.

rounded rectangle button shape layer

Place the shape and then grab the Direct Selection Tool and drag a selection box over the shape. You’ll notice a series of anchor points along each curve. The 2 outermost points on the right should be deleted – to do this just click each one individually and hit ‘delete’. Then you’ll have a flat rectangle on the right-hand side with rounded corners on the left.

With this setup let’s add styles onto the button. I’m using a gradient overlay for the background, a stroke for the border, plus an inner shadow for the glossy shine at the top. Copy over the styles I’ve used below:

regular button inner shadow layer effect

regular button gradient layer effect

regular button stroke layer effect

These styles can be duplicated onto other buttons by holding alt+clicking and dragging onto another layer. This would be the easiest method to create the right-most corner button. Simply duplicate the original button layer and hit ctrl+T for free transform. Then right-click on the button and choose “Flip Horizontal”. You should now have 2 opposing buttons with similar styles.

rounded rectangle flipped buttons

The center button will look very similar but should appear pressed down into the UI. Start by choosing the rectangle tool with the same dimensions. Draw the shape and try to align this in-between the other two buttons. I’m using these layer effects which you can copy below:

pushed button drop shadow effect

pushed button inner shadow effect

pushed button gradient overlay effect

pushed button stroke outline effect

Each button has an icon symbol denoting what type of text effect will be applied. The symbols are made with Times New Roman font each displaying a certain effect. Left is bold, center is italics, and right is underline. Each letter uses the same layer effect to create a catchy embossed gradient.

button text drop shadow layer effect

button text gradient overlay layer effect

Use guides and rulers to help you align the buttons if necessary. Also remember than you can duplicate layer effects by alt+clicking and dragging onto a new layer. So you can duplicate these text effects for other similar button icons or even recreate the button styles without rebuilding new shapes.

ios ui segmented control dark buttons psd

Dropdown Select Menu

The 2nd GUI piece is a restyled dropdown menu typically associated with UIPickerView screens. When the user taps on a dropdown they see a new sliding picker with options to change the font size, font family, and other similar settings.

These menus only have 1 state and they can easily be recreated by duplication. The first step is to create a new layer and draw out another rounded rectangle shape. For the dimensions I have 380×88 retina or 190×44 standard. This shape uses a myriad of layer effects to achieve the final result.

select menu drop shadow effect

select menu inner shadow effect

select menu gradient overlay effect

select menu stroke border effect

Now with the graphic in place we just need some text. This text represents the default value, in this case a font family. Create a new text layer using Arial or another sans-serif font. I’m using bold 40px font with a color of #5a6b78. Type the font name ‘Helvetica’ and fit this into the menu.

Also try adding a slight drop shadow onto the font to create that embossed effect. I’m using solid white for the shadow color with a reduced opacity.

select menu text font drop shadow layer effect

At this point you should have something that looks just like a select menu. I drew a small triangle using the pen tool to indicate a dropdown effect. You could also use the custom shape tool to draw out an arrow, then delete half of it to just keep the triangle. The pen tool is more precise but also much more confusing.

3 button group and select menu ios elements

And that should wrap it all up. From here you can build alternate buttons and select menus at varying sizes by duplicating the layer effects.

You can also download my free PSD and customize these elements for your own interface. I’ve released the PSD at retina size but everything is easily resizable.