In this tutorial, Ruaridh Currie from creative agency
Serps Invaders will show you how to create an iPad Retina display-ready fashion app UI using Photoshop (and a little bit of Illustrator). During this tutorial, the focus will be on establishing a good foundation by choosing the correct grid, colour palette, fonts and images in order to create a modern, sophisticated user interface.
We'll be using best practice for creating mockups - so we’re left with a tidy, neatly-put-together file that any developer would be happy to receive for development.
This tutorial assumes you have a working knowledge of Photoshop and know your way tools, styles, channels and paths.
Adobe Photoshop and Adobe Illustrator
Ruaridh has used largely free assets for this tutorial. All icons and fonts used are freely available, but the photography he's used is from royalty-free library. However, you can substitute your own fashion shots easily - or even adapt it to a different type of app.
You can download the free
Facebook icon, Twitter icon, Pinterest icon, Arrow forward icon, Magnifier icon and Anchor icon from Iconfinder.
Download these fonts:
Six Caps from Font Squirrel, the Lato font family from Latofonts, Dustismo Roman from Dafont and Garamond italic from Fontpalace.
The stock photos Ruaridh's used are from iStock:
Purse, Vintage woman, Watch, Glamorous girl, Ghetto girl and Portrait of woman.
Creating an iPad template in Photoshop
Begin by creating a new retina display size iPad document
(File > New…) using the settings:
Resolution: 72 Pixels/Inch
Save the document as
The next step is to establish the vertical and baseline grid structures we’ll be working with, to ensure we have a clean and consistently spaced user interface.
There are various options for doing so, for this tutorial I had already sketched out the basic structure and I knew required a 5-column structure. Head on over to
Gridulator and insert the parameters shown here.
In the grid options below the inputs hit the Make PNG button with the settings shown here.
Next, open up the PNG in Photoshop and copy and paste it into the middle of your newly set up PSD in a layer named ‘Vertical grid’within a new folder named ‘//Grid’.
At this point feel free to go head and drag your vertical rulers (
View > Rulers…)and align them with the sides of each column as in the screenshot below:
Tip: I like to prefix top-level document folders with // to make it easier to navigate my layers.
Before we start the design of individual elements, we have one more very important document setup procedure to complete – establish the baseline grid for the typography throughout. A solid baseline grid helps at adding or removing vertical space to create rhythm.
In this instance we’ll be using the 6px baseline grid for all the reasons mentioned in the post at
teehanlax.com. This number allows for a lot of flexibility and removes a lot of guesswork.
There are numerous ways to do this, including using Photoshop’s own grid options. A quick n easy way of creating your baseline grid is to create a new document with the following settings:
At the bottom of the 1px wide document take the Pencil tool and draw a 1px red dot as shown here.
We’ll now save it as a pattern (
Edit > Define Pattern…) to apply as our baseline grid to our app PSD. Name the pattern ‘6px Baseline’ and hit OK.
Finally we will apply the pattern to a new layer called ‘Baseline grid’ within the ‘//Grid’ folder. To do this, simply apply any colour fill to a new layer named ‘Baseline grid’ within our ‘//Grid’ folder.
Reduce the Fill slider on the Layers panel to 0 then double click the ‘Baseline grid’ layer and we will apply our baseline grid pattern to the layer as detailed in the screen.
At this point your Layers panel should look like this.
Before we start the design we’ll take a quick jump over
Adobe choose a colour palette. We’re looking for a palette that might work well for autumn or winter for our fashion app UI.
After a few minutes I found the following which feels right for the look n feel of our app.
App header and panel layout
Lets go ahead and block in the main areas of the app UI: the header area, the left navigation panel and the promotional panels.
First lets block in the nav bar. Hide the '//Grid' folder for the time being, but leave the rulers visible (
View > Rulers). Drag a new ruler down 190px from the top and then choose Snap from the top menu ( View > Snap). Now select theEyedropper tool and input the following colour from our chosen palette: #595a55
Next draw out a rectangle to fill the area from the top to our new ruler 190px down, the shape layer should also fill the full width of the document as per the zoomed out screen here.
That takes care of the background of our header panel. Next we’ll begin placing the basic shapes for the main promotional panels.
Create a new folder named ‘//Promo panels’. We’ll first create the background to the promo panels by selecting the Rectangle tool and drawing out a rectangle that is 1350px in height and 1635px in width with the colour set to #f3f3f3. Name this layer ‘Background’ and place it directly below the header layer and to the right of the document.
Now create a new layer within the ‘//Promo panels’ folder and choose the following colour from our chosen palette #9d8e7e and select the Rectangle tool again (
U) . Draw out a rectangle that fills the two columns second from the left that is 570px in height and is 140px down from our header bar (this should leave room for our breadcrumb and dropdown).
I’ve opted for two rows of promo panels, the top row featuring a two-column width large panel on the left and two single-column-width panels on the right. Go ahead and draw the two single column panels using the following two colours from our palette respectively: #aba099 & #acaf9f.
To add some variation to our layout lets take the top row of panels (
Cmd/Ctrl + clicking on all three shape layers in the Layers panel).Now duplicate these three layers and flip them horizontally ( Edit > Transform > Flip Horizontal).
Colour the bottom row of panels as follows from left to right #aba099, #acaf9f and #898a82.
Name these shape layers (starting from top row, left to right, then bottom row left to right) 'Container 1', 'Container 2', 'Container 3' and then 'Container 4', 'Container 5' and 'Container 6'.
We’ll now shift our focus to the left navigation and come back to the promo panels later.
Creating the app's left navigation panel
First up we’ll switch on our baseline grid layer in the layers panel. Create a new folder in the layers palette named ‘Left menu panel’ below the '//promo panels' folder, then within this add a new layer and select the Type Tool.
About 60px down from the header panel - ensure the type is sitting on the nearest baseline - type in ‘choose from’ all in caps using the character settings detailed below and the colour #444541.
Next we’ll create the menu items to sit beneath the menu title we just placed. Create a new folder called ‘Item 1’ within our ‘Left menu panel folder’. Select the rectangle shape tool with a white fill and with the following layer style applied, draw a 355 x 80px rectangle 60px below our ‘choose from’ menu title.
Name this layer ‘Container’ in the layers panel. Using the same font and with the character settings from the screenshot below, type in ‘Dresses’ inside the shape in caps.
Ensure the copy is exactly 30px from the inside left side of the shape & vertically cantered within the box & sitting on our ‘Baseline grid’ layer correctly.
Next we’ll create the expand icon on the right side of our nav item. Go ahead and zoom in to the document 200% and draw the vertical part of the expand icon with the rectangle tool: 2px wide & 16px in height, with a colour of #494a46.
To finish the expand icon, simply duplicate the previous shape and rotate it 90°. You can then select both horizontal and vertical shapes and convert them to a single Smart Object. Name this icon ‘expand’. Place this icon 30px from the inside right of the 'Container' layer.
We can now take the folder ‘item 1’ and duplicate it seven times, so there are eight items in total in the menu. Rename the folders so they read: item 1, item 2, item 3, item 4 etc. Ensure each menu item is 18px apart.
Name the menu items as follows: SKIRTS, JEANS, TOPS, SHORTS, SHOES, ON OFFER and lastly ACCESSORIES.
Creating breadcrumb and drop-down menus
Create a new folder and name it ‘//Dropdown & breadcrumb’ above the '//Promo panels' folder in the Layers panel.
First up, we’ll design the breadcrumb. For this we’ll use the same Character settings we used previously for the left menu title as detailed in the screen shown here. With the Type Tool selected type ‘You are here’ all in caps, in the location shown here.
Select the following Character settings: Lato Bold, 24pt, 10 horizontal tracking, Colour #444541. Type ‘Home What’s new?’. Ensure there are 5 spaces between the words 'Home' and 'What’s New'.
Select the word ‘Home’ with the Type tool and change the text colour to the following from our palette #acaf9f.
To finish off our breadcrumb open up the Arrow Forward icon we downloaded from Icon finder earlier and resize it to 16px in height and 10px in width (
Edit > Transform > Scale).
Apply the layer style from the screen shown here to it and finally place the icon in the space between the words in the breadcrumb. Place these new breadcrumb layers in a new folder ‘breadcrumb’ inside our ‘Dropdown & breadcrumb’ folder.
On the right side of our interface we’ll create the product dropdown. First create a new folder named ‘Dropdown’ within our ‘Dropdown & breadcrumb’ folder.
Next select the Rectangle Shape tool, and - with the foreground colour selected as white and with the layer style in the screen below - draw a rectangle that is 200px x 100px and align it to the right-most vertical ruler. Name this layer ‘Dropdown bg’ in the Layers panel.
Next, select the Type tool and - with the same Character settings we used for the left menu title and breadcrumb title - type ‘VIEW BY’ in caps. Place it 20px to the left of the box we just created (Feel free to switch the baseline grid layer back on in our layers panel to ensure the copy sits flush on our baseline).
Then - with the same Character settings we used for the second part of the breadcrumb - type ‘Women’s winter fashion’ and align this 20px from the inside left of the box as we have in the screen shown here.
Finally take a copy of the left arrow we used in the breadcrumb and copy and paste it 20px from the inside right of the box. Rotate it 90° clockwise and apply the following colour as a layer style: #323232.
At this point, your PSD and Layers panel should resemble the following screen. If they don’t go back to check you haven’t missed a step.
So far so good? – Aces! Lets continue on with the rest of the tutorial then.
Designing the logo & other header items
Let’s create a new sub-folder within our ‘Header’ folder and name it ‘Header items’. Within this new sub-folder, let’s go ahead and create another folder and name it ‘Fashion logo’.
Select the Type tool and the character settings shown here, type ‘EYE ON FASHION’ in caps, with the font colour set to #FFFFFF.
Next we’ll create the logo’s strapline and dotted lines at either side. Select the Type tool and create a new layer and with the following Character settings: Lato Regular, 15pt, 150 horizontal tracking, All Caps selected & colour #FFFFFF.
Type the following words ‘SINCE 2004’. Centre the words horizontally under ‘Eye on fashion’ and ensure the new copy sits flush on our baseline, five lines underneath as per the screen below.
Now we’ll create the dotted lines on either side of the supporting line of copy we just created. To do this simply choose the Type tool with the same settings as the last step, create a new layer above the previous one and type in ‘………..’. You should have 11 in total. Now place this layer to the left of ‘Since 2014’, duplicate this layer and place the duplicate to the right as shown here.
To complete our ‘Eye on fashion’ logo, we’ll need to head over to Adobe Illustrator to create the vector graphic part. You’ll require a basic working knowledge of Illustrator’s
Tools Panel & Pathfinder Panel to complete this part.
First, create a new document with the settings shown here.
First up we’ll create the pyramid shape. To do this first select the Rectangle tool (
M) and with the colour # f40b0b selected draw a rectangle with a width of 6px and a height of 145px.
Next rotate this shape -45°. To do this, choose the Selection tool and right click anywhere on the shape and choose
Transform > Rotate).
Rotate dialog box opens up simply type in - 45°. Your shape should look like this.
Duplicate this shape. Now we need to reflect the copy horizontally (
right click > Transform > Reflect).
When the Reflect dialog opens up, choose Horizontal from the settings and hit OK. Use the right arrow key to align the second shape to create the pyramid shape as shown here.
Let’s combine these two shapes using the Pathfinder panel. Simply select both shapes using the
Selection tool, open up the Pathfinder panel and hit the Unite option as shown.
We still need to flatten off the bottom edges of our pyramid shape, so select the Rectangle tool and draw a new large rectangle shape (any colour will do). Place it over the top of our new pyramid shape, so it intersects with the very bottom two edges.
Now select both shapes with the Selection tool
(V), you should be looking at a similar screen to this.
We just want to cut off the bottom two corners so our pyramid shape has a completely flat bottom-side. To do this, ensure the Pathfinder panel is open and simply click on the
Minus Front icon. Hey presto, the lower corners of our pyramid have gone.
Let’s move on to the eye in the pyramid. First up go ahead and select the
Line tool and the settings shown here. Draw a red curved line like this.
Now we’ll expand the line to make it into a solid shape (
Object > Expand). When the Expand panel opens up, ensure both Fill and Stroke are selected and hit OK. Now put this shape to one side while we create the eyeball.
The eyeball couldn’t be easier. First draw a red circle using the Ellipse tool and then draw a smaller one next to it.
These two circles combined will form our eyeball.
To do this, take the smaller circle and place it over the top left of the larger circle.
Make sure the Pathfinder panel is open. Select both shapes, ensure the smaller circle is on top and click on the Minus Front icon.
Bring the other shapes back into view and arrange the eye so it sits with the eyebrow shape like this.
You’ll then need to resize down the entire eye shape and place it in the pyramid shape to compete our logo graphic.
Select the entire logo graphic in Illustrator, choose the Fill icon from the Tools panel (
X) and colour it white #ffffff. Now copy the graphic and head on back over to Photoshop.
Paste the Illustrator file in Photoshop. When the Paste panel opens choose Smart Object and hit OK. Place the logo in our Fashion logo folder as follows and our logo is complete.
To finish things up in our header bar, we need add the menu slide icon to the left and add the basket and search icon to the right.
To create the slide-in menu icon, first create a new folder in our layers panel named ‘Menu Slide Icon’. Create a new layer and with the Rectangle shape tool and the following colour fill #acaf9f, and draw a rectangle that is 50px wide by 8px height. Duplicate this layer twice and arrange them as shown here.
If you’ve been following the tutorial closely your layout should now look like this.
Let’s finish things up with header and get the search icon and basket placed on the right side of the header.
Create a new folder within our ‘Header items’ folder & name it ‘Search’. Open the magnifier icon we downloaded earlier from Iconfinder and place it in the ‘Search’ folder. Resize the icon to 50px x 50px and apply the following colour #acaf9f. Ensure the icon is 40px from the right side of the document.
Create a new folder within our ‘Header items’ folder and name it ‘Basket’. Select the Type tool, the character settings in the screen here and the colour #acaf9f. Type ‘My basket: 2 items Checkout My Account’. Ensure there are 5 backspaces between the words ‘items’ and ‘Checkout’ and also ‘Checkout’ & ‘My’. We’ll be popping in a couple of vertical dividers in the spaces.
Select the ‘2 items’ part with the Type tool and colour this white (#FFFFFF).
To delineate things a bit better, we’ll go ahead and create a couple of simple vertical dividers.
To do this select the Rectangle tool, and with the colour #acaf9f draw out a line that is 2px wide by 30px height. Duplicate this and name them ‘vertical sep1’ and ‘vertical sep2’. Place them as follows to finish up our header area.
Promo panel content
So far we’ve put together the structure, theme and logo - so now it’s time to place in the app content.
We’ll make a start with the large promotional panel on the top-left first. To complete this content section you’ll need to either purchase the suggested iStock photography or source your own models, either way will still work just as well.
Download and open up the image ‘Portrait of a woman’ in Photoshop (or your own model photo). We’re first going to need to separate the model from the photographs background.
There are numerous effective ways to do this in Photoshop, some quick n easy, some take a little longer. Due to the models hair overlapping the background colour, using the Lasso or a Clipping path tool won’t be sufficient in this situation. Instead we’re going to use our alpha Channels.
Duplicate the photograph into a new layer.
Now open up the Channels tab, click through each channel, we’re looking for a channel with the most contrast between the model and the background colour. The blue looks like it will work best, so go ahead and right click on the layer and duplicate it.
With this new channel selected we need to adjust the Levels to increase the contrast between the light and dark areas (
Cmd/Ctrl + L). Go ahead and adjust the levels to match the screen here.
Already you can see a huge difference in the contrast between the girl and the backdrop, but if we adjust it any further you’ll notice you start to lose the detail in the hair.
We’ll therefore have to manually go in cover the remaining light areas left on the model and also lighten up the background a bit to maintain a high contrast.
Use the Dodge tool (
O) and choose a soft round brush about 200px in size. Gently go around the model and lighten the backdrop as shown here.
Once you’re happy the contrast between the background and the model, go ahead and switch over to the Brush tool using black and the same size of brush as we used for the Dodge tool. Target the areas of the model’s face and body to bring it down to black as in the screen here. This may take a few minutes and a bit of care and attention to get it perfected.
Invert the photo to switch over the areas (
Cmd/Ctrl + L)and have a look for any stray areas that may have been missed.
Cmd/Ctrl + click on the channel and switch on all the other channels. Now click over to the Layers panel and copy-and-paste the selection onto a new layer.
Switch off the other layers in the layers panel leaving just the model cut out as shown here.
Copy the cutout layer and let’s head back over to our app document. Paste it in a new layer called ‘Girl’ above the ‘Container 1’ layer in the ‘Promo panels’ folder.
Take both these layers and create a new group for them called ‘Feature 1 Wide’. Before we resize the model to fit into our panel, lets convert the layer to a Smart Object (
Right-click > Convert to Smart Object). Now resize the Smart Object so that your screen resembles the one here.
The girl doesn’t look quite right yet. We need to adjust the saturation and sharpness of the image to integrate it better into the panel background. Double-click on the new Smart Object in the Layers panel.
Add a new adjustment layer by clicking on the icon highlighted below at the bottom of the Layers panel. Then apply the adjustments detailed in the Hue/Saturation panel in this screenshot.
Let’s create the first promo panel titles. Select the Type tool and choose the following font and character settings: Dustismo Roman, Regular, 60pt size, 46 leading and 52 tracking, #FFFFFF. Type ‘WINTER’, all in caps.
Hit return and type in ‘WEAR 2015’ all in caps. Change these words’ character settings toDustismo Roman, Regular, 48pt size, 42 leading and 23 tracking, #FFFFFF).
Before we drop in our button, we’ll create a small horizontal divider underneath the title copy we just created.
Create a new layer above our title copy and name it ‘Divider’. With the Rectangle shape tool selected draw the shape with the following dimensions: 50px width, 4px height. Place the divider as shown.
Create the panel’s button by firstly creating a new folder named ‘CTA’. Within this new folder, create a new layer named ‘Button container’.
With the Rectangle tool selected, draw the button shape with the following dimensions: width 400px, height 100px. Reduce the Fill to 0 on the Layers panel and apply the following layer style to the button, and place it under the divider.
Let’s finish of the button by adding in the copy ‘SHOP NOW’ with the following font and character settings: Dustismo Roman, Regular, 48pt size, 42 leading and 23 tracking, #FFFFFF.
On a new layer, select the Type tool and the following font and character settings: Dustismo Roman, Regular, 48pt size, 42 leading and 23 tracking, #FFFFFF. Type ‘by Christina Smith’. Place this line of copy as shown here (switch on your baseline grid layer to get the copy placed correctly).
To finish our first promo panel, we’ll add a background element to give the panel a bit of depth.
Switch off the baseline grid and create a new layer below the model layer in the Layers panel. Name this layer ‘2015’. Type ‘2015’ and apply these character settings: Garamond, Italic, 1710pt size, #FFFFFF.
Now reduce the opacity of the layer down to 10% and create a Clipping Mask (hold
Alt when ‘2015’ layer is selected and click on the line between the two layers in the layers panel when the icon changes). This masks this new layer into the background.
Our first promotional panel is complete. Our App UI is beginning to take shape, so let’s crack on the design the panel to the right.
Open up the watch image downloaded from iStock. As it’s on white, we shouldn’t need to employ any alpha channels to cut this out from its background. Simply select the Magic Wand tool and a tolerance of about 5. Click anywhere in the background surrounding the watch, then hold Shift on the keyboard and click in the white area inside the strap.
Now invert the selection (
Select > Inverse). Head back over to our app psd and paste the watch cut-out in a new layer named ‘Watch’ above the ‘Container 2’ layer. Take both these layers and create a new group for them called ‘Feature 2 Small’.
Create a new layer above the ‘Watch’ layer and select the Type Tool. Type ‘NEW WATCH COLLECTION 2015’ and apply these Character settings: Lato regular, 21pt size, 30 leading, 200 tracking & #FFFFFF.
Highlight the word ‘Watch’ and choose Bold from the Character settings.
Let’s create what will be a link under the watch to finish this panel off. Create a new layer above the last one and select these Character settings: Garamond italic, 36pt size, & #FFFFFF. Type the word ‘explore’ and add the small right arrow icon we used from previous steps in white to the right of the word.
Let’s create the last panel on the top row. First open up the photo titled
Ghetto girl from iStock. We need to cut out the model from the backdrop again, but this time we’ll use a clipping path, which is more appropriate than the previous methods due to the lack of hair interacting with the background and there not quite being enough contrast between the model and the wall behind her.
Go ahead and create a new clipping path (
Paths tab menu > Clipping Path). Using the Pen Tool carefully place your points around the outside of the model.
Complete the process but selecting Make Selection from the Paths panel’s flyout menu). Now copy and paste the model cut out into a new layer named ‘Girl’ above the ‘Container 3’ layer in the layers panel. Take both these layers and create a new group for them called ‘Feature 3 Small’.
Next convert this layer to a Smart Object (
Right click layer in layers panel > Convert to Smart Object)and then resize the girl down to match the screen shown.
The resized image looks great, but perhaps the contrast is a little too high. Double click the ‘Girl’ smart object in the layers panel. With the Smart Object open, create a new Brightness/Contrast Adjustment Layer the same way we did previously and apply the settings shown here.
Save and then close the Smart Object. Your panel should now look like this.
Let’s add some copy and decoration now to finish off the panel. Create a new layer above the ‘Girl’ layer in the ‘Feature 3 Small’ folder and select the following Character settings: Lato bold, 21pt size, 30 leading & #FFFFFF.
Select the Type tool, type out ‘STREET SELECTION’. Select the word ‘STREET and change the font’s weight from Bold to Black.
Let’s add a little decoration above and below the text. Create a new folder above the text layer named ‘Lines’. In this folder create a new layer named ‘thick’. Zoom in 200% and select the Rectangle Shape tool
Draw out a line that is 175px wide and 2px in height. Duplicate this layer and rename it ‘thin’ and using reduce the height to 1px (
Edit > Transform > Scale). Now duplicate both these layers and flip them vertically. Arrange the layers above and below the text like this.
Let’s go ahead and create the design elements for the bottom left panel. First open up the photo
Purse downloaded from iStock. This should be very straightforward to remove from its background, simply select the Magic Wand Tool and a tolerance of about 10. Click on the white background and - while holding down the Shift Key - also select the white area inside the purse handle.
Invert the selection (
Select > Inverse). Copy and then paste the purse cut out above the ‘Container 4’ layer. Name this layer ‘Purse’. Select both the ‘Container 4’ layer and the ‘Purse’ layer and in the layers panel then right-click with the mouse and choose ‘Group from layers’.
Name this new group ‘Feature 4 Small’. Now convert the purse to a Smart Object and then resize the purse down.
The panel needs a button underneath the purse, so duplicate the folder named ‘CTA’ from the ‘Feature 1 Wide’ folder and drag the folder to the top of the ‘Feature 2 Small’ folder.
Edit the copy in the button to say ‘VIEW RANGE’.
To finish off this panel, create a new layer above the button we just created. Select the Type Tool and the following Character settings: Garamond italic, 30pt size, & #FFFFFF.
Type ‘Monki handbags’. Place this layer between the purse and the button (switch on the baseline grid at this point to make sure the text is sitting correctly).
Now let’s create the panel to the right. You’ll need to open up the image
Vintage woman from iStock. Using the Magic Wand Tool, with a tolerance of 10, click into the background area around the model, to isolate the background completely you’ll have to keep clicking - until you are left with this selection.
Invert the selection (
Select > Inverse) and copy and paste the cutout into a new layer named ‘Girl’, above the ‘Container 5’ layer. Convert the model cutout to a Smart Object and resize the model so she fits nicely into the lower left of the promo panel.
Select both the ‘Container 4’ layer and the ‘Girl’ layer and create a new group from these layers and name it ‘Feature 5 Small’.
We need to do a few small adjustments to the model. Double click on the ‘Girl’ Smart Object in the Layers panel to open up the isolated model. Add a Brightness/Contrast Adjustment Layer as before with these settings.
She still doesn’t look quite right, so add a Levels adjustment layer on top of the previous adjustment layer with these settings.
Now she looks great so go ahead and save the Smart Object, close it and return to the app PSD.
Let’s go ahead and add some copy and a bit of decoration to finish off the promo panel. First select the Type Tool these Character settings: Lato regular, 21pt size, 30 leading, 200 tracking & #FFFFFF.
Type out ‘THE RETRO COLLECTION 2015’ over two lines, with the Paragraph style set to right-align. Now highlight the word ‘RETRO and choose Bold from the Character settings.
Next add a row of stars underneath the copy we just created. Create a new layer and -with the same
Type settings - type in ‘*************************’ and place this as shown here.
Let’s add the same background ‘2015’ layer we used as a background pattern from ‘Feature 1 Wide’. Duplicate the layer and place it above our ‘Container 5’ layer of our ‘Feature 5 Small’ group.
We’re onto the final promo panel now; so let’s open up the image
Glamorous girl from iStock. We again first need to isolate the model from the background.
Using the same Channels-based approach as you did for the first promo panel - as the model has a few areas in her hair where using a Clipping Path wouldn’t work.
Once you are happy with the selection, go ahead and paste a copy of the girl in a new layer named ‘Girl’ above the layer ‘Container 6’ in our ‘Features’ group. As usual go ahead and convert the layer to a Smart Object and use a Clipping Mask to mask the layer into the ‘Container 6’ layer, then resize the layer as shown here.
Open the ‘Girl’ Smart Object and add a Brightness/Contrast adjustment layer with these settings.
Save the Smart Object, close it and head back over the app layout PSD. Let’s add some text, a button and some decoration.
First up, take a copy of the Shop Now button we used in the first promo panel and add it to the left of the model like this.
Let’s create the first promo panel titles. Select the Type tool and choose the following font and character settings: Dustismo Roman, Regular, 55pt size, 35 leading and 24 tracking, #FFFFFF. Type ‘WINTER’.
Hit Return and type in ‘2015 RANGE’ and apply these Character settings (Dustismo Roman, Regular, 36pt size, 36 leading and 29 tracking, #FFFFFF).
To finish off the foreground decorations we’ll create a badge to sit above the copy. Create a new folder named ‘Badge’ above the typography layer.
Create a new layer called ‘Square’. Select the Square Shape tool and - draw a 115 x 115px square. Set the layer’s Fill to 0 and then apply these Layer Style options.
Rotate the square
Let’s add some detail to the badge. Select the Rectangle Shape tool and a colour of #FFFFFF. Draw out a 50px wide, 4px high line. Rotate this shape -45° and name this layer ‘Sep’.
Let’s add a letter to either side of the separator shape. Select the
Type Tool and type the letters R and then C - using the following Character settings: Dustismo Roman, Regular, 30pt size, #FFFFFF. Place the letters as shown
Open up the
Anchor icon from Iconfinder we downloaded earlier, and colour it white. Resize it down to fit on either side of our separator layer like the screenshot here.
Create a new layer in our ‘Badge’ folder. Select the Type tool and these Character settings: Lato regular, 21pt size, 200 tracking & #FFFFFF.
Type ‘EST 2015’ and set the colour to #FFFFFF. Place this as shown. (I’ve switched on the baseline grid to ensure the text in the badge is all sitting correctly.)
Lastly to finish off not only the promo panel, but also the tutorial lets - add a gradient behind the
‘Girl’ Smart Object to give the panel a bit of depth. Create a new layer above the ‘Container 6’ layer and name this ‘Gradient’.
Set the colour to
#acaf9f and select the Radial Gradient tool. Hold down Shift and click the bottom left of the ‘Container 6’ layer. With Shift still held down, drag the gradient at a -45° angle until it reaches the top of the ‘Container’ layer.
And you’re finished!