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:

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

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.

Step2:

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

Step3:

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

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.

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

Step6:

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

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.

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.

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

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

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.

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.

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.

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.

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.

Step16:

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

Step17:

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

Step18:

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

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.

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.

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

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.

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.

Step24:

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

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.

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.

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.

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.

Step29:

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

Step30:

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

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

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.

About the author: Shaina

Shaina is the co-founder and Chief Editor of Websoulz. She is a full-time writer/designer. And has been writing articles and tutorials for the designer community. If you want to connect with her, simply follow her on twitter @websoulz

Related posts

• 

  10 Free Amazing UI kits To Help You speed-Up Your Projects

   
• 

  10 Hand-Picked Useful resources to Make your life a lot Easier

   
• 

  10 Custom Die Cut Printing Products for Business

   
• 

  10 Very Creative And Fresh Free Fonts For Your Designing Projects