Photoshop tutorial: How to design an app in Photoshop

Ruaridh Currie shows how to create an iPad Retina display-ready fashion app using Photoshop

Intro


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.

See also: 86 Best Photoshop tutorials

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.

Tools

Adobe Photoshop and Adobe Illustrator

Project Files

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.

Step 1.1

STEP 1

Creating an iPad template in Photoshop

Begin by creating a new retina display size iPad document (File > New…) using the settings:

See also: 86 Best Photoshop tutorials

  • Width: 2048px
  • Height: 1536px
  • Resolution: 72 Pixels/Inch
  • Background: White

Save the document as AppUI.psd.


Step 1.2

STEP 2

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.

See also: 86 Best Photoshop tutorials

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.

Advertisement. Article continues below

Step 1.3

STEP 3

In the grid options below the inputs hit the Make PNG button with the settings shown here.

See also: 86 Best Photoshop tutorials


Step 1.4

STEP 4

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’.

See also: 86 Best Photoshop tutorials

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.


Step 1.5

STEP 5

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.

See also: 86 Best Photoshop tutorials

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:

Advertisement. Article continues below

Step 1.6

STEP 6

At the bottom of the 1px wide document take the Pencil tool and draw a 1px red dot as shown here.

See also: 86 Best Photoshop tutorials


Step 1.7

STEP 7

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.

See also: 86 Best Photoshop tutorials

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.


Step 1.8

STEP 8

At this point your Layers panel should look like this.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 1.9

STEP 9

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.

See also: 86 Best Photoshop tutorials

After a few minutes I found the following which feels right for the look n feel of our app.


Step 2.0

STEP 10

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.

See also: 86 Best Photoshop tutorials

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


Step 2.1

STEP 11

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.

See also: 86 Best Photoshop tutorials

That takes care of the background of our header panel. Next we’ll begin placing the basic shapes for the main promotional panels.

Advertisement. Article continues below

Step 2.2

STEP 12

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.

See also: 86 Best Photoshop tutorials

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).


Step 2.3

STEP 13

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.

See also: 86 Best Photoshop tutorials


Step 2.4

STEP 14

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).

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 2.5

STEP 15

Colour the bottom row of panels as follows from left to right #aba099, #acaf9f and #898a82.

See also: 86 Best Photoshop tutorials

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.


Step 3.0

STEP 16

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.

See also: 86 Best Photoshop tutorials

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.


Step 3.1

STEP 17

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.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 3.2

STEP 18

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.

See also: 86 Best Photoshop tutorials

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.


Step 3.3

STEP 19

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.

See also: 86 Best Photoshop tutorials

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.


Step 3.4

STEP 20

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.

See also: 86 Best Photoshop tutorials

Name the menu items as follows: SKIRTS, JEANS, TOPS, SHORTS, SHOES, ON OFFER and lastly ACCESSORIES.

Advertisement. Article continues below

Step 4.0

STEP 21

Creating breadcrumb and drop-down menus

Create a new folder and name it ‘//Dropdown & breadcrumb’ above the '//Promo panels' folder in the Layers panel.

See also: 86 Best Photoshop tutorials

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.


Step 4.1

STEP 22

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'.

See also: 86 Best Photoshop tutorials


Step 4.2

STEP 23

Select the word ‘Home’ with the Type tool and change the text colour to the following from our palette #acaf9f.

See also: 86 Best Photoshop tutorials

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.

Advertisement. Article continues below

Step 4.3

STEP 24

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.

See also: 86 Best Photoshop tutorials

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.


Step 4.4

STEP 25

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).

See also: 86 Best Photoshop tutorials

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.


Step 4.5

STEP 26

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.

See also: 86 Best Photoshop tutorials

So far so good? – Aces! Lets continue on with the rest of the tutorial then.

Advertisement. Article continues below

Step 5.0

STEP 27

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’.

See also: 86 Best Photoshop tutorials

Select the Type tool and the character settings shown here, type ‘EYE ON FASHION’ in caps, with the font colour set to #FFFFFF.


Step 5.1

STEP 28

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.

See also: 86 Best Photoshop tutorials

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.


Step 5.2

STEP 29

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.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 5.3

STEP 30

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.

See also: 86 Best Photoshop tutorials

First, create a new document with the settings shown here.


Step 5.4

STEP 31

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.

See also: 86 Best Photoshop tutorials

Next rotate this shape -45°. To do this, choose the Selection tool and right click anywhere on the shape and choose Transform > Rotate).


Step 5.5

STEP 32

When the Rotate dialog box opens up simply type in -45°. Your shape should look like this.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 5.6

STEP 33

Duplicate this shape. Now we need to reflect the copy horizontally (right click > Transform > Reflect).

See also: 86 Best Photoshop tutorials

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.


Step 5.7

STEP 34

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.

See also: 86 Best Photoshop tutorials


Step 5.8

STEP 35

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.

See also: 86 Best Photoshop tutorials

Now select both shapes with the Selection tool (V), you should be looking at a similar screen to this.

Advertisement. Article continues below

Step 5.9

STEP 36

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.

See also: 86 Best Photoshop tutorials


Step 5.10

STEP 37

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.

See also: 86 Best Photoshop tutorials

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.


Step 5.11

STEP 38

The eyeball couldn’t be easier. First draw a red circle using the Ellipse tool and then draw a smaller one next to it.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 5.12

STEP 39

These two circles combined will form our eyeball.

See also: 86 Best Photoshop tutorials

To do this, take the smaller circle and place it over the top left of the larger circle.


Step 5.13

STEP 40

Make sure the Pathfinder panel is open. Select both shapes, ensure the smaller circle is on top and click on the Minus Front icon.

See also: 86 Best Photoshop tutorials


Step 5.14

STEP 41

Bring the other shapes back into view and arrange the eye so it sits with the eyebrow shape like this.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 5.15

STEP 42

You’ll then need to resize down the entire eye shape and place it in the pyramid shape to compete our logo graphic.

See also: 86 Best Photoshop tutorials


Step 5.16

STEP 43

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.

See also: 86 Best Photoshop tutorials

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.


Step 5.17

STEP 44

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.

See also: 86 Best Photoshop tutorials

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.

Advertisement. Article continues below

Step 5.18

Steps 5.19

STEP 46

Let’s finish things up with header and get the search icon and basket placed on the right side of the header.

See also: 86 Best Photoshop tutorials

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.


Step 5.20

STEP 47

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.

See also: 86 Best Photoshop tutorials

Select the ‘2 items’ part with the Type tool and colour this white (#FFFFFF).

Advertisement. Article continues below

Step 5.21

STEP 48

To delineate things a bit better, we’ll go ahead and create a couple of simple vertical dividers.

See also: 86 Best Photoshop tutorials

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.


Step 6.0

STEP 49

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.

See also: 86 Best Photoshop tutorials

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.


Step 6.1

STEP 50

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.

See also: 86 Best Photoshop tutorials

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.

Advertisement. Article continues below

Step 6.2

STEP 51

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.

See also: 86 Best Photoshop tutorials

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.


Step 6.3

STEP 52

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.

See also: 86 Best Photoshop tutorials


Step 6.4

STEP 53

Invert the photo to switch over the areas (Cmd/Ctrl + L)and have a look for any stray areas that may have been missed.

See also: 86 Best Photoshop tutorials

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.

Advertisement. Article continues below

Step 6.5

STEP 54

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.

See also: 86 Best Photoshop tutorials

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.


Step 6.6

STEP 55

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.

See also: 86 Best Photoshop tutorials

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.


Step 6.7

STEP 56

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.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 6.8

STEP 57

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).

See also: 86 Best Photoshop tutorials


Step 6.9

STEP 58

Before we drop in our button, we’ll create a small horizontal divider underneath the title copy we just created.

See also: 86 Best Photoshop tutorials

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.


Step 6.10

STEP 59

Create the panel’s button by firstly creating a new folder named ‘CTA’. Within this new folder, create a new layer named ‘Button container’.

See also: 86 Best Photoshop tutorials

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.

Advertisement. Article continues below

Step 6.11

STEP 60

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.

See also: 86 Best Photoshop tutorials


Step 6.12

STEP 61

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).

See also: 86 Best Photoshop tutorials

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.


Step 6.13

STEP 62

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.

See also: 86 Best Photoshop tutorials

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’.

Advertisement. Article continues below

Step 6.14

STEP 63

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.

See also: 86 Best Photoshop tutorials

Highlight the word ‘Watch’ and choose Bold from the Character settings.


Step 6.15

STEP 64

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.

See also: 86 Best Photoshop tutorials


Step 6.16

STEP 65

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.

See also: 86 Best Photoshop tutorials

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.

Advertisement. Article continues below

Step 6.17

STEP 66

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’.

See also: 86 Best Photoshop tutorials

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.


Step 6.18

STEP 67

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.

See also: 86 Best Photoshop tutorials


Step 6.19

STEP 68

Save and then close the Smart Object. Your panel should now look like this.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 6.20

STEP 69

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.

See also: 86 Best Photoshop tutorials

Select the Type tool, type out ‘STREET SELECTION’. Select the word ‘STREET and change the font’s weight from Bold to Black.


Step 6.21

STEP 70

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

See also: 86 Best Photoshop tutorials

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.


Step 6.22

STEP 71

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.

See also: 86 Best Photoshop tutorials

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.

Advertisement. Article continues below

Step 6.23

STEP 72

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.

See also: 86 Best Photoshop tutorials

Edit the copy in the button to say ‘VIEW RANGE’.


Step 6.24

STEP 73

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.

See also: 86 Best Photoshop tutorials

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).


Step 6.25

STEP 74

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.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 6.26

STEP 75

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.

See also: 86 Best Photoshop tutorials

Select both the ‘Container 4’ layer and the ‘Girl’ layer and create a new group from these layers and name it ‘Feature 5 Small’.


Step 6.27

STEP 76

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.

See also: 86 Best Photoshop tutorials


Step 6.28

STEP 77

She still doesn’t look quite right, so add a Levels adjustment layer on top of the previous adjustment layer with these settings.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 6.29

STEP 78

Now she looks great so go ahead and save the Smart Object, close it and return to the app PSD.

See also: 86 Best Photoshop tutorials

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.


Step 6.30

STEP 79

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.

See also: 86 Best Photoshop tutorials


Step 6.31

STEP 80

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.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 6.32

STEP 81

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.

See also: 86 Best Photoshop tutorials

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.


Step 6.33

STEP 82

Open the ‘Girl’ Smart Object and add a Brightness/Contrast adjustment layer with these settings.

See also: 86 Best Photoshop tutorials


Step 6.34

STEP 83

Save the Smart Object, close it and head back over the app layout PSD. Let’s add some text, a button and some decoration.

See also: 86 Best Photoshop tutorials

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.

Advertisement. Article continues below

Step 6.35

STEP 84

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’.

See also: 86 Best Photoshop tutorials

Hit Return and type in ‘2015 RANGE’ and apply these Character settings (Dustismo Roman, Regular, 36pt size, 36 leading and 29 tracking, #FFFFFF).


Step 6.36

STEP 85

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.

See also: 86 Best Photoshop tutorials

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.


Step 6.37

Step 6.38

STEP 87

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’.

See also: 86 Best Photoshop tutorials


Step 6.39

STEP 88

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

See also: 86 Best Photoshop tutorials


Step 6.40

STEP 89

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.

See also: 86 Best Photoshop tutorials

Advertisement. Article continues below

Step 6.41

STEP 90

Create a new layer in our ‘Badge’ folder. Select the Type tool and these Character settings: Lato regular, 21pt size, 200 tracking & #FFFFFF.

See also: 86 Best Photoshop tutorials

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.)


Step 6.42

STEP 91

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’.

See also: 86 Best Photoshop tutorials

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!