How to make an online app store layout in Photoshop

Hi guys, today I’ve brought an online app store website’s layout tutorial for you. So, let’s note down the requirement and then we’ll start our tutorial.

Program: Photoshop CS5

Approximate Time:  25 to 30 min

Resources: Image1, Image2, Image3, Image4, Image5, Image6 Dark round social icons,

Other icons: World map, Theme, Latest apps, HD icon, Other store icon, Up-coming stuff icon

Before going ahead with the tutorial, let’s have a look at the final image:

layout tutorial

Click on the demo button to view the layout in full size.

layout tutorial

Okay, so let’s begin our tutorial:

Step1:

Start your Photoshop CS5 and open up a new document of 1000px width and 1600px height. Name it background layer.

layout tutorial

Step2:

Select the paint bucket tool and fill our background layer with color# 1d1818.

layout tutorial

Step3:

Select the rectangle tool and make a rectangle at the top of our background layer, just a few millimeters down.

layout tutorial

Step4:

I’ve used a linear gradient by right clicking on the slider layer and going to the blending options in the drop down menu and checking on the Gradient Overlay to fill up the slider rectangle, which I made myself.  You can choose the colors of your own choice or if you want to use same colors here is their numbers from left to right.

Dark Green Color# 01291b, Navy Blue Color# 041e4f, Dark Purple Color# 220349, Dark Grey Color4# 181717. Set the angle according to the image shown below.

layout tutorial

Step5:

Now check on the pattern overlay, open up the patterns presets and select woven wide pattern. Make the setting for pattern overlay according to the given image (Scale 1%, Opacity 62%).

layout tutorial

Step6:

Now we’ll give our slider a drop shadow for which you can follow the settings shown in the image given below.

layout tutorial

Step7:

Now duplicate the slider layer and placed the copied layer at the bottom of our background as footer a few millimeters up as shown below.

layout tutorial

Step8:

Now we’ll make the navigation bar by again using rectangle tool and draw a long rectangular bar across the page and fill it with color# 271e1e as shown below.

layout tutorial

Step9:

Now we’ll add a pattern, drop shadow and stroke to our navigation bar.  So, to do that right click on the layer, go to blending options and then select  Pattern Overlay, choose the Dark coarse Weave, make the scale 25% and reduced the opacity to 26%.

layout tutorial

Step10:

After the pattern, it’s time to add a drop shadow, see the image given below to follow the settings for drop shadow. After that check the box for Stroke and give our navigation-bar a stroke of light grey color # adadad, keep the size 1px and opacity to 100%.

layout tutorial

Step11:

Make another rectangular box on the navigation-bar to show the home button and then add the inner shadow. Make the settings as shown below in the given image.

layout tutorial

Step12:

Select the pen tool and make a shape as shown in the image below, fill it with light grey color # adadad. Duplicate the shape layer and place these shapes on either side of the button to show a bit of depth.

layout tutorial

Step13:

Add a small line at the top of the button on light purple color # 6e27bc, using the line tool or a hard round brush of 5px size.

layout tutorial

Step14:

Now we’ll add text to our Navigation-bar using Horizontal type tool with Georgia font of size 26pt, regular and smooth as shown below.

layout tutorial

Step15:

It’s time to make the search bar and for that I’ve used pen tool, you can also use rounded rectangle tool and simple erase the right side using a hard round brush eraser to give it the shape shown below. Fill the shape with color # 271e1e.

layout tutorial

Step16:

Add the drop shadow to our search bar and make the settings shown below.

layout tutorial

Step17:

Give it a Stroke of color # 474747 of size 1px and reduce the opacity to 61%. Keep the position outside.

layout tutorial

Step18:

Now add the round dark social icons with the search bar as shown below.

layout tutorial

Step19:

Now open up the 1st image in Photoshop, select the marque tool and copy the image. Paste the image on our slider as shown below. Adjust the size by pressing ctrl+t.

layout tutorial

Step20:

Once again select the rectangle tool and make a big rectangle in the middle of our layout as shown below, fill it up with white color# ffffff. Right click on the layer, go to blending options and check the box of Pattern overlay. Use the pattern Woven flat and make the settings shown below in the given image.

layout tutorial

Step21:

Now draw another rectangular shape a few millimeters below the slider, fill it with the color# ffffff and give it the stroke of color# 000000 of size7px and reduce the opacity to 13%.

layout tutorial

Step22:

Place the rest of the images on top of the 2nd smaller slider we just made. Use pen tool to make navigation arrows on the 2nd slider.

layout tutorial

Step23:

Select the Ellipse tool and make navigational circles for the big slider. Make 6 small circles, fill them with dark grey color and give them inner shadow. Fill one of the circles with purple color to indicate the slide on the show.

layout tutorial

Step24:

Now add stroke to these circles. Follow the image given below for adjusting the settings.

layout tutorial

Step25:

Now we’ll add text in the middle of our layout. Use Corbal font to type FEATURE, bold and of size 72pt in dark grey color. Add a very light drop shadow and a very thin inner shadow to it. Draw a thin line across the page in light grey color using line tool.

layout tutorial

Step26:

Now add text below the Features, use Corbal for titles and for the rest of the text use Arial font. For the explanatory text copy the Lorum Ipsum text and paste it as shown below. Reduce the opacity of the explanatory text to 75%, after that add the other Icons as shown below in front of the titles.

layout tutorial

Step27:

Same process will be applied to fill the footer with text. Use Corbal font for titles and arial font for the rest of text. Add a few circles using ellipse tool and reduce the opacity to 0% to make them empty of color. Give then strokes of 1px, in white color# ffffff. Add the test in the First slider too.

layout tutorial

Step28:

Now we’ll add the name of the store and for that we’ll use Arial font of size 64.01pt. Right click on the name layer and go to blending options, add a gradient to the text. Make the settings according to the image shown below.

layout tutorial

Step29:

Now give it a stroke of light purple color# 50306d and make the setting as shown below.

layout tutorial

Step30:

Now add the drop shadow, make the settings as shown in the image below.

layout tutorial

Now we are finished with the layout. Have a look.

layout tutorial

 

Hope you had fun making this layout. Do share your thoughts and suggestions by commenting below. Until next time have fun making your own layouts.

 

Wordpress Themes - Wordpress Video Themes - Wordpress Travel Themes - WordPress Restaurant Themes