FMP: Realising the app design

For the last of the three blog posts focusing on outlining the key processes used to create my FMP designs, I turn my attention to the app design.

I quickly determined that the best way forward was to use Adobe Photoshop, as its flexibility makes it possible to produce realistic designs. I also used Adobe Illustrator to make all of the icons used throughout the app design, as Illustrator is easily the best program when it comes to creating vector illustrations.

Downloading a iPhone GUI template:

I quickly realised that the task of creating a base iPhone interface from scratch would be an enormous task, one that would be simply above me for this project. So I searched for a suitable iPhone 5 PSD template file that could not only house my design, but allow me to edit it to fit it. I came across an excellent free example from Teehan+Lax, which can be accessed on their website here. I’ve mentioned it before, but I’ll say it again, it’s really worth it.


Creating the vector icons:

Knowing that I needed some icons for the app design to fit in with the iOS GUI, I made them in Illustrator. Making them in a flat style allows for layer styles to be added on in Photoshop to really fit in. I started by opening a new Illustrator document and making part of the background black for the ‘tab bar’ icons.

‘Tab Bar’ icons: 

I made them using the Shape Tools and Pen Tool. The main time was taken here with making them look suitable for their intended purpose, rather than using highly complex techniques to make them. I wanted to design them against a black background as this is closer to the eventual background I knew I would be using them on.

Screen Shot 2013-05-19 at 11.17.09
Home icon
Screen Shot 2013-05-19 at 11.16.52
Exterior icons
Screen Shot 2013-05-19 at 11.16.58
Interior icons

I then copied and pasted them into Photoshop as Smart Objects, and copied and pasted the layer styles attached to the old tab bar icons.

Screen Shot 2013-05-21 at 11.35.12
Exterior icons
Screen Shot 2013-05-21 at 11.35.22
Interior icons

Rotate Tool: I did use this for the wheel icon for the ‘Interior’ tab bar as once I had created one of the spokes, I wanted to copy it to make the other four.

To do this I selected the spoke, chose the Rotate Tool, and, while pressing the alt/option key, clicked in the centre of the icon. This brings up a dialog box where I entered 360/5, as that is the positioning I wanted, before clicking Copy. Then I could press Cmd + D until the pattern was completed.

Screen Shot 2013-05-19 at 11.43.59 Screen Shot 2013-05-19 at 11.44.22

‘App function’ Icons:

The purpose of these icons is to appear mainly on the ‘Next Steps’ screen of my app design to direct users as to what they want to do.

These were made in pretty much the same way as the icons above, using a combination of Shape Tools and the Pen Tool to create shapes, which I then filled with a dark grey.

Gradient Tool: For the background I used the Rounded Rectangle Tool to make the main shape, but then selected the Gradient Fill instead of the standard Fill. From there I selected the Gradient palette, by going to Window > Gradient, and choosing the values you can see below:

Screen Shot 2013-05-19 at 11.32.36

Screen Shot 2013-05-19 at 11.16.41
Left to Right: New Configuration, Edit Configuration, Request Brochure, Save to Garage

Copying and Pasting into Illustrator: For this it was just a case of selecting what I wanted to be copied using the Selection Tool, and copying it (Cmd + C) before pasting it into the Photoshop document (Cmd + V) as a Smart Object to allow for editing to be carried out.


Creating the Exterior Swatches: To save repetition, I will not cover the whole process of making these again, as I covered making them here.

The difference from when I displayed them in the brochure, is that they are much larger and displayed in a circular style. The only thing I did was to add a Stroke for the Layer Styles menu to show whether a swatch was selected or not.

Screen Shot 2013-05-19 at 13.04.30

Creating the Wheels: I covered the main process in a previous blog post, which can be read here, as I used these for the brochure, with one difference in that I selected the Path in the Paths Palette, right-clicked it, and chose ‘Make Selection‘. I chose to set the Feather Radius to 5 pixels. I then copied that into the main Photoshop file.

Screen Shot 2013-05-21 at 08.55.38

Creating the option image for the ‘Exterior – Roof’ screen: This was a challenge as I found the perfect image I needed (high quality, good composition, with the sunroof I needed), but the colour was wrong, the background was wrong, and it did not have a black contrast roof.

So I started with this image:

Screen Shot 2013-05-21 at 08.39.59

I decided the best way would be to plug in my graphics tablet, add a new layer to the image, select the Brush Tool, choose the pale grey of the background I had been using,  and brushed it over the background. I could have used the Magic Wand tool if there was enough of a contrast, but car and background were too similar. I found setting the brush tool so it had a hardness value of 60% worked best, as it is soft enough to blend with the edge of the car, yet harsh enough to create a solid boundary. I needed to take my time with little details, like around the door handles and mirrors.

Screen Shot 2013-05-21 at 08.40.36

I then added another layer, set the blend mode (which can be found at the top of the Layers Palette) to Multiply, chose the shade of orange I needed and brushed over the bodywork. Because the car in the image was silver, it picked up the colour perfectly. This took a while, and was really fiddly work, especially with the Range Rover lettering on the bonnet, but in the end I was really pleased with the result.

Screen Shot 2013-05-21 at 08.40.55

The hardest part was to change the roof. I wanted to add a black contrast roof. I really struggled with getting this to look realistic, and it took a lot of experimentation, but I achieved it by creating a new layer, setting the brush to black, and brushing over the roof. I lowered the opacity temporarily so I could see what I was doing.

I wasn’t impressed still with the end result, as even on lower opacities it was too dark at the back to pick out the shapes that make up the roof. To fix this, I bought up the Layer Styles menu, added a Gradient Overlay, set the blending mode to Hard Light, and chose the settings you can see in the image below.

Screen Shot 2013-05-21 at 08.42.01

The final step was to go back to the Layers Palette, and instead of altering the Opacity, I reduced the Fill box to 65%. I now feel confident the end result is realistic.Screen Shot 2013-05-21 at 08.42.34

Creating the Figured Massacar icon: For this icon, I had to find an online free image of it. I was surprised to find an image of it actually, as I had never come across this type of veneer before in a car. However, I wasn’t massively impressed with the colour in the image, although the wood grain looked excellent. Here’s the starting image:

Screen Shot 2013-05-21 at 11.11.25

I determined it wasn’t saturated enough, and needed a slight hue adjustment. So I added an Adjustment Layer from the Layers Palette and after some experimentation, chose the settings you can see below, as well as the final result.

Screen Shot 2013-05-21 at 11.11.44 Screen Shot 2013-05-21 at 11.11.32

I then placed the file into the main Photoshop file and added a Stroke from the Layer Styles menu to match the other swatches throughout the app design.

Creating the Shadow Walnut icon: Again, I had to find an image for this, and edit it to match my requirements. I placed it into the Photoshop file, added a Stroke from the Layer Styles menu, as well as a Color Overlay, which I set to black, but I changed the Blend Mode to Soft Light, as this just darkened the image slightly.

Screen Shot 2013-05-21 at 11.19.22 Screen Shot 2013-05-21 at 11.19.41

Creating the Grand Black Lacquer icon: This was one icon I could make from scratch. To do so, I made a black square in the main Photoshop file, added a Stroke from the Layer Styles menu, as well as a Gradient Overlay that would be used to show the reflective nature of the veneer. I’ve shown the settings below as well as the final result:

Screen Shot 2013-05-21 at 11.23.20

Creating the Leather Headliner icons: To start with, I realised I need to find a leather texture. Thankfully there are many free examples out there on the web.

Screen Shot 2013-05-21 at 10.51.29

This done, I accessed the Layers Palette, and added an Adjustment Layer (the circular icon can be found in the middle at the base of the palette) for Hue/Saturation. I then decreased the Saturation to -100 to leave me with the desired image.

Screen Shot 2013-05-21 at 10.51.38

Placing this into the main Photoshop file allowed me to add some Layer Styles. Obviously I added a Stroke to match the other swatches and a Color Overlay, so it could match the colours required.

Screen Shot 2013-05-21 at 11.02.14

Creating the cloth headliner icons: To start with, I created squares and applied the same layer styles as I did with the leather headlining icons above. However, I added a Pattern Overlay with the settings you can see below.

Screen Shot 2013-05-21 at 11.06.47

Screen Shot 2013-05-21 at 11.03.10

Gradient Overlay: I used it throughout the app designs, but the most visible example was for the toggle switches on the ‘Settings’ page, where I wanted to add a metal texture to make it more realistic and appear more premium.

To do this I ticked the Gradient Overlay box and applied the settings you can see in the image below. The important thing was to set the Gradient to Angle.

Layer Mask: With my app design I had a lot of images to place in, and not knowing the eventual size means that I would want to try lots of different sizes.

This is where the Layer Mask tool was so useful. I could place an image into the Photoshop file, choose the Rectangular Marquee Tool, draw a box and then click the icon at the bottom of the Layers Palette, which snaps the image to the boundary box.

Creating the exterior background images: This was a really useful technique, as I was able to take the screenshots I had taken from the Land Rover online configuration, and remove the white background using a clipping path so that it fitted with my pale grey background. I was pleased to be able to keep the shadow under the car, which helped to make it look more three-dimensional when placed into the app design.

Using the technique my tutor taught me with a slight alteration, here is the process:

1] Make sure the layer with the car on is selected in the Layers Palette.

Screen Shot 2013-05-21 at 09.06.31

2] Using the Magic Wand tool, click on an area of the background and press the backspace button to delete it . I kept doing this until I had removed it all. (Below is a layer filled with light grey hence why the image background has gone to grey once removed.)

Screen Shot 2013-05-19 at 13.05.55

3] In the Layers Palette, click the Paths button to access the Paths palette. Click the drop-down icon in the top-right corner and select ‘Make Work Path’. In the dialog box, enter 0.5 for the Tolerance.

4] Double-click on the path in the Paths palette. Enter a name, and click ‘Save‘.

5] To then place this into my main Photoshop file, I right-clicked the path in the Paths palette and chose ‘Make Selection‘. This bought up a dialog box where I entered the value ‘5’ for the Feather Radius.

6] I then copied the selection into the main Photoshop document.