Building Mockups in Photoshop — Instagram App

Pooja Bhaumik

Published in

xxCode

6 min readSep 17, 2017

Resources Required

Download all the resources(icons) here

Importance of Layers in Photoshop

Layers are, without a doubt, the single most important aspect of Photoshop. Nothing worth doing in Photoshop can or should be done without layers. In Photoshop, layers are used to work on individual parts of an image while not affecting other parts. They allow you to modify your image, add text, change colors, put two pictures on the same page, and more without modifying your original photo. Want to read more about the importance of layers in Photoshop? Hop here.

Divide Elements Into Groups

Go to Window menu→Layers to open the Layers windows. Since we know the design, we can divide all the elements by sections, such as — Stories section, Feed, Menu, etc.

This will make your work easier when you add or delete sections. Double click on the Group name to rename it. The sections are as follows —
— ActionBar
— Stories
— Feed
— Menu
The order of the groups does not matter right now because they will be placed vertically without any overlapping. Order matters when you are overlapping two layers/groups.

ActionBar

Click on the ActionBar group from the Layers panel. This makes sure that whatever elements you will create will be created under ActionBar group. Now go to the Toolbar on your left and find the Rectangle Tool, the little square icon somewhere at the bottom of the toolbar.
Make a Rectangle having color #fafafa at the top of the screen with height — 56px and width that covers the entire screen space.

To add the little shadow effect below the Rectangle, click the Add A Layer Style icon (that reads fx) at the bottom of the Layers panel and choose Drop Shadow. The following should be the values.

Now most things in designing are by trial and error, so you can always try what looks good and go for it. So these values are not written in stone.

Add icons and logo

Drag and drop your elements camera.png and send.png together on the screen space. To resize, press Ctrl + T and then to resize it in proportion, press Shift + Alt. Now drag and drop logo.png right in the centre of the two elements. You may need to resize this as well. Always refer the original image to check.

Your action bar is ready! Let us move onto the Menu bar at the bottom. Mostly, it’s better to cover both actionbar and bottom bar at the beginning of an app design, so that you know how much screen space is left for you to explore.

Menu (Bottom bar)

Remember to click on the Menu Group in layers panel so that all the new layers are created under Menu group.
Create another Rectangle having color #fafafa of 56 px height and width that covers the entire screen. Add a new layer style (remember the little fx at the bottom of the Layers panel? ) and add Inner Shadow.

Add elements

Elements to be added to this section —
* menu-home
* menu-search
* menu-add
* menu-likes
* menu-profile
Drag and drop the elements in the given mentioned order with equal space from both sides. Refer the original image

Recommended : It is recommended to drop the elements in another subgroup inside Menu group. That way you can modify the elements all together. Let’s move onto Stories now?

Stories

For the stories section, click on the Stories Group in Layers panel and create another rectangle having same color but of 120 px height.

Now as you notice in the reference design, we have to repeatedly create a circle element with a multi colored border and a text below. In such a scenario, it doesn’t make sense to create it repeatedly from scratch. We can just create one and duplicate it as required. So can we make a subgroup for this entire element? I guess we can. It keeps our layouts and elements neatly separated.

Create a subgroup StoryElement under Stories group and create a Ellipse with the Ellipse Tool having :
Width — 65px
Height — 66px
Fill Color — #262727
Stroke Color — No color
Add another Ellipse with the same centre as the previous ellipse for the border having :
Width & Height : 78px
Fill Color — No color

Stroke width — 3.8pt
Stroke Color — Gradient, as shown in the picture, of the following 4 colors : #a02f93, #d31938, #f9aa0e, #d40a27. Make sure the angle is -101 degrees.

Add a text right below the circle elements.
Text — Your Story
Font — Arial Regular
Font Size — 13pt
Font color — #b5b5b5

Final output should like this.

Now make a single copy of StoryElement subgroup and just edit the text from Your Story to username and change color to #262727.

Refer to the procedure here

Feed

Now the feed is further divided into 3 sections —
* Username + Location
* Photo + Feedback
* Likes + Comments
Let us make subgroups for each like the image given on your left.

Username Section

The procedure to do the username section is given right below

Photo section

Comments section

Now that I have shown you most of the steps, tricks and ways to build such a design, do you think you can complete this design on your own?

Tasks for Day 2

Complete the design given below. The dark fonts use Arial Bold and lighter fonts use Arial Regular. Other icons are provided in the Resources folder. You can always use the color picker to pick the colors from this image and use it in your design. Check this YouTube video on color pickers.