Mobile UI: Redesign the Spendometer iPhone App (Part 2)

This is the second of a two-part tutorial series on reskinning an iPhone application with Photoshop. Need to catch up? Read part one on PSDTuts+! We will be covering the rest of the application's UI design in this tutorial, paying close attention to the small and delicate details, such as typography, button design, and text-entry fields, that will make the overall design pop.

Where we left off...

We finished off the previous tutorial with our applications launch page completed, as well as the main background for our screens and the header / navigation bar for each screen.

Step 1

Once you have opened up your document in Photoshop, we're going to head straight to work on our icons. In the previous tutorial, we already set up the background, toolbar area and the text background (where we are going to place our text, buttons and everything else). We want four different icons, all of which will be representing the same thing in the original application. The four icons are:

"Going Out": An icon to take the user to the going out screen, allowing them to set a budget for their trip out.

"Spendometer": An icon for the spendometer screen, allowing users to track their expenditure.

"Reports": An icon for the reports screen, allowing users to view their reports.

"Settings": An icon to the settings screen, allowing users to modify their preferences.

To create our icons, we're going to use a few ruler guides to make sure they're all the same size. Go to View > Rulers if they're not already on your screen. Drag out a couple of guides from the rulers and set them next to our white background.

Select the Rectangular Marquee Tool and create a fixed size selection of 100x75px. Click somewhere on your canvas, and place the selection next to your left guide in the toolbar area.

Drag out another guide from the ruler, and make it end directly at the end of your selection (it should automatically snap).

Repeat the step, dragging a guide to the top and bottom of the selection.

Keep repeating this step until we have four different rectangles made up from guides.

These shapes will be used to place our icons in. The reason they are wider than than they are tall is because we will also be placing the icons title beneath it. We will center each individual icon and text element within our grid.

Using the same technique we just used, add some more guides so we know where to place our icons and text, as seen below:

Although it looks confusing, once we begin designing out icons and inserting our text, things will look a whole lot simpler.

Step 2

Now we have set up our guides, we can actually begin designing our icons and text. I'm going to start off with the text. Grab the Text Tool and select a clean, easy-to-read font. The text is going to be very small, so it needs to be clean! I'm going to use Helvetica for all of my body font. Fill in the gaps you have created for your text making sure you place your text boxes into your toolbar folder.

I recommend aligning your text manually by using the cursor-keys as Photoshops built-in (text) alignment options can sometimes be a little off, and it is important that these short titles are centered well. Once you have placed your text in, we need to add some styles to it. Open up your Layer Styles (Blending Options) window, and make sure the preview icon is checked.

The first style we're going to apply is a simple Color Overlay. I'm using the color #955425, a medium brown shade which I took from the applications header title.

The next style to add is a simple 1 pixel stroke using the #E5C39B color. Make sure the stroke is applied to the outside of your text and not the inside.

To make the text easier to read and fit in with our wooden style more, we're going to apply an inner shadow style. Set the opacity of your style to 65%, and your distance and size to 2px. I have angled my Inner Shadow at 45 degrees.

After applying the styles but clicking the OK button, we need to apply the same styles to our other icon titles. To do so, select your "Going Out" text layer and then go to Right-Click > Copy Layer Style. Select your other text layers all at the same time by holding down the shift-key, and then go to Right-Click > Paste Layer Style to apply the same style to your other titles.

Step 3

With the icon titles now all finished up, it's time to create some simple icons. To create our icons we're going to use the various Marquee Tools. The first icon we're going to produce is the reports icon, as this is going to be the easiest! Create a new layer, and call it "Reports Icon."

We want the icon to sit nicely within our square guide that we created for it. Select the Rectangular Marquee Tool and make a small selection within your square, as seen below:

Fill the selection with black, and then nudge the selection down a few pixels and repeat the process. Keep on doing this until you have a nice row of black shapes.

Make a new selection, this time going horizontally instead of vertically.

Hit the delete-key to remove the unneeded areas of the rows we just created. This will create an icon that will easily represent a list or report type document. Paste your layer style that we just created onto the icon.

Before moving on to any other icons, drag out a new guide from the ruler and place it directly beneath our new icon, as seen below:

For our settings icon, we're going to create a simple spanner icon. Create a new layer and call it "Settings Icon". Select the Polygonal Lasso Tool and whilst holding the shift-key, create half a spanner shape as seen below:

Using the cursor-keys, nudge your spanner shape together, and then merge the two spanner layers together.

Move, rotate and scale your spanner until it looks good, and then apply your copied layer style(s) to it.

Using similar techniques, create your own "spendometer" and "going out" icons. You can remove your guides afterwards by going to View > Clear Guides.

Individually select each one of your four icons and lower the opacity of them down to around 80%. This will allow some of the wood grain to show through, and give the overall navigation toolbar a little more depth.

Select every single one of your icons and icon titles, and duplicate them. Merge them all together by going to Layer > Merge Down. Open up the Layer Style Options (Blending Options) for your new merged layer, and remove all of them apart from Color Overlay. Change the color of the overlay to white, and click OK.

Place your new layer white layer beneath all of your other icon and icon title layers, and then, using the cursor-keys, nudge your layer down one pixel. Lower the opacity of the layer to around 20%. This is a very subtle change, but all adds to the quality of the apps final look.

Step 3

With the navigation icons done and dusted, it's time to move on to the main content area. As mentioned in the first part of the tutorial, a lot of the screens are fairly similar (just different titles), so we're going to concentrate on just a few of the screens:

The Spendometer Screen: an entry form to enter how much you have spent, and information such as the users current spend rate, allowed spend rate and the amount they have left to spend in the current week or month.

The Reports Screen: a simple reports screen allowing the user to set-up the report that want to view; weekly and monthly reports, and dates.

The Report Screen: the actual report screen - a list of outgoings over the last week or month.

The Settings Screen: some simple options including an edit categories button, toggle between weekly/monthly budgets, and a clear data option.

We're going to start with the Spendometer screen. Select your Text Tool and using the same typeface you used for your icon titles, type "Spending cash again? How much this time?" at the top of your white box. My font size was set to 4pt. Make sure you create this new text box in your spendometer layers folder.

Open up the Layer Style window (Blending Options window) for your next text layer. Apply a Color Overlay style, using the color #613111 (a dark brown). Also add a Drop Shadow using the standard settings with a 15% opacity.

The next task is to create our text entry box and our button. Select the Rectangular Marquee Tool and create a fixed size of 550x100 pixels. Click on the canvas, and center your selection. Create a new layer and call it "Money Entry." Go to Select > Modify > Smooth and enter a radius of 5px and click OK.

Select your "Money Entry" layer and open up the Blending Options window. Apply a Color Overlay using the color #E4DCD5. We're also going to add a very subtle Inner Shadow, using the options seen below:

Lower the opacity of the layer we've just been working on to around 50%. Open up the Blending Options window for your layer called "Money Entry Field". Apply a pure white Color Overlay to the text field and a 1px stroke using the color #C0B8B0.

Duplicate the two shapes we just made, and nudge them down. Rename them to "Spent Background" and "Spent Button." Open up the Blending Options window for your layer called "Spent Button." Remove all the current options, and apply a Gradient Overlay. I'm going to use green colours going from #50911B to #A0D327. Once you're happy with your gradient overlay, hit the OK button.

We're going to add a few more touches to our button, but as we're going to be very precise with them and pay attention to all the small details we're going to do it manually. Select the contents of your button layer.

Create a new layer above your button, and call it "Button Outer Stroke". Go to Edit > Stroke and apply a 1px stroke using any color to the outside of your selection.

Open up the stroke layers Blending Options window and apply a default gradient with colors going from #30580F to #86BD23.

Repeat the last couple of steps again, but this time using a 1px stroke on the inside of your selection, and using a gradient ranging from #53941B to #E2E8D4.

Step 4

Select the Text Tool and drag out a text box over you button. Type "SPEND IT" into your text box. I used Helvetica Bold set at 8 points (size). Align your text to the center of your button.

Apply a Gradient Overlay to your text, going from a very light gray (I used #EBEBEB) to white (#FFFFFF). We also want to apply an Inner Shadow using the settings seen below:

Make a selection of your original button shape and then create a new layer above all of your other button layers. Call it "Button Noise". Fill your selection with white, and then go to Filter > Noise > Add Noise. Add about 25% noise, and then click OK.

Change the layers blending mode to Soft Light and lower the opacity of the layer to around 50%. This adds a nice subtle bit of texture to our button. Now we've done that, we're all done with our button design! One quick, simple and effective way to make the button look like it has been pressed is by simple flipping the button around by 180 degrees, so that the darker green is at the top rather than the bottom.

Step 5

In the original application design there were separate screens for the spendometer stats (the page that displays how much you have spent and how much you have left to spend) and the page that we have just designed. I feel it is unnecessary to have two screens however, so am going to reduce it to just the one and put all that other information on the same screen as the one we have just designed.

The information we need to display underneath our button is as follows:

Current Spend Rate: $XX per day - an average figure of how much the user is spending per day.

Allowed Spend Rate: $XX per day - an average figure of how much the user is allowed to spend per day.

Amount Left To Spend: $XX - how much the user has left to spend in the given period (weekly or monthly).

After increasing the size of my "Spending cash again? How much this time?" text, I'm going to move on to the "stats" beneath the button. Drag out a few guides onto your canvas as seen below:

Grab the Text Tool and drag out a text box in your remaining space on your screen. Type your first title ("Current Spend Rate") and then apply the same style we used for the "Spending cash again?" text to your new type.

Repeat the step twice again using the other stat titles.

Lower the three type layers opacity to around 90% to make them just a little lighter than our other text. This doesn't make a huge difference but does differentiate them slightly. Duplicate your "Current Spend Rate" type layer and nudge it over into your right column. Change the text to "$XX.XX per day". Increase the size of your font a little, and align it to the center of the column using your cursor-keys.

Repeat the step again so you end up with something similar to the screenshot below:

Step 6

To finish these stats off we're going to add a nice and subtle 2px stroked border. Create a new layer and call it "Stroked Border White". Select your Single Row Marquee Tool and make a selection between your "Spend It" button and "Current Spend Rate" title. Fill the selection with a color slightly darker than the background - I'm using #E1D9D3.

Duplicate the layer and rename it "Stroked Border Black", and nudge it down one pixel so that the new line is directly beneath your old one. Select the layers contents, and fill it with a color slightly darker than the one we just used - I used #A59C93.

As you can see from the screenshot above, our border/separator is overlapping areas we don't want it to. Select the "Stroked Border Black" layer and hit the Cmd+E combination to merge it down to the white stroke layer. Rename the layer to "Separator". Select the Rectangular Marquee Tool and make a selection on the left side of your screen.

Hit the Delete-Key to remove the unneeded separator. Move your selection over to the right-hand side and repeat the process.

Using the cursor-keys, nudge your separator up/down to make sure it is centered between the bottom of the button and the top of your text - mine is exactly 30px beneath my button and 30px above my text. Lower the opacity of your separators layer to around 50%. I then decided to flip it so that the lighter color on the bottom as I felt this looked better.

Repeat the process several more times until there is a separator beneath each line of text - a quick way to do this is by just duplicating each previous layer, and then nudging it down the correct amount. I've also nudged the whole stats folder down so that it sits in the center between the button and the bottom of our white background area.

Add some finishing touches, such as changing the colors of our figures that are left to spend. I also realigned my figures to the right.

After adding some dummy text to our money text field we have finished our first screens design! The button here is clearly the eye-catcher, with it's bold green gradient and attention to small details such as the white and black strokes.

Step 7

The rest of our pages (as listed above) will use a combination of the techniques we have already used over the previous steps in this tutorial and in part one. Put the techniques you have learned to use to produce the rest of the application design by yourself.

The Final Design

Below are the screenshots of the original design next to me redesigned application user interface that you have been learning to create yourself.

Launch Screen

Spendometer Screen

Reports Screen

Report Screen

Settings Screen

Conclusion

So, there we have it, our final outcome of this reasonably long two-part tutorial turned our fairly well! Post links to your outcome in the comments section below - we'd love to see them!