TutsArena

Design an online store template in Photoshop

by TutsArena - Templates, Tutorials

Here is a tutorial on how to design an online store template in Photoshop. The store we are going to design is selling T-shirt designs, but obviously the template could be easily modified for any other type of an online enterprise.

Final result:

How to do it

Start with a new document, 1000x 1550px, color #22aeeb. Call it “Background”.

1. Create a new layer, use rectangular marquee tool and make a 1000 x 20 px selection on the page. Fill this layer with black color. Call it “Black header”
Use Horizontal Type Tool (font: Arial Black, 36pt, smooth, white) to write:

Open Blending Options, settings:

Use Horizontal Type Tool (font: Verdana, 48pt, smooth, # ff7e00) to write “Y”. Then open Blending Options, setting:

Use Horizontal Type Tool (font: Verdana, 12pt, smooth, # ff7e00) to write “your slogan”. Then open Blending Options, setting:

2. Create a new layer above “Background”, call it “Rectangle background”. Use Rounded Rectangle Tool (Radius: 10px) to draw the rectangle (width: 960px, height: over 1035px) and put it in the center of “Background”.

Then use Rectangular Marquee Tool to make selection on bottom of “Rectangle background” and press Delete.

3. Use Rectangular Marquee Tool to make section on top of “Rectangle background” (height: 45px) and press Ctrl + J to duplicate the top of “Rectangle background”. Rename the new layer to “Menu bar”

Open Blending Options, setting:

Press Ctrl + J to duplicate this layer, rename the new layer to “Menu light”. Delete its layer effects and fill with white color. Then use Rectangular Marquee Tool to make the selection.

Press Delete and change the Opacity: 10%

5. Use Horizontal Type Tool (font: Verdana, 12pt, none, # ff7e00) to write:

Create a new layer above the text, call it “Line”. Use Line Tool (1px) to draw a line with white color.

Change Opacity: 20%. Then duplicate this layer to a lot of new layers and move them as needed.

6. Create a new layer under “Line”, call it “Search box”. Draw the rectangle (width: 166px, height: 18px), white color.

Open Blending Options, settings:

7. Create a new layer above the “Search box”, call it “Search box button”. Draw the rectangle (width: 15px, height: 14px). Then open Blending Options, setting:

Create a new layer on top of the “Search box button”, call it “Black triangle”. Draw a triangle with black color:

8. Create a new layer over “Black triangle”, call it “Search icon”. Setting of Brush Tool: white color and 3px. While holding “Ctrl”, use Ellipse Tool to draw a circle. Then click right mouse, choose Stroke Path, select Brush (don’t check Simulate Pressure).

Use Rounded Rectangle Tool (Radius: 10px) to draw a round rectangle. Then press Ctrl + Enter to make the selection and fill white color.

Then cut the round rectangular and move it to the bottom of the circle.

Press Ctrl + T to rotate it and change opacity: 60%

Use Horizontal Type Tool (font: Verdana, 12pt, none, black color) to write:

9. Create a new layer under “Menu bar”, call it “Banner fill”. Use Rectangular Marquee Tool to make the selection (width: 960px, height: 308px) and fill it #22aeeb.

Open the background image, copy and paste on top of “Banner fill”. Press Ctrl + T to resize it. While holding “Ctrl” down click on the layer “”Banner fill” to obtain its selection. Then press Ctrl + J to duplicate this layer layer, rename new layer “Banner background” and change Opacity: 50%.

Press Ctrl + B, setting:

10. Use Rectangular Marquee Tool to make the selection

Duplicate this selection, rename call the new layer “Line banner1”. Then change Fill: 0% and open Blending Options, setting:

Press Ctrl + J to duplicate this layer, rename new layer “Line banner2”. Press Ctrl + T to resize it.

<

Then use Rectangular Marquee Tool to make the selection.

Press Ctrl + Alt + D (radius: 30) to feather selection. Then press Delete.

11. Open Shirt image, cut and put it above the “Line banner2”. Call it “Shirt”

Open Blending Options, setting:

12. Create a new layer over “Shirt”. Use Rounded Rectangle Tool (radius: 5px) to draw

Press Ctrl + Enter to make the selection and fill any color. Change Opacity: 75%. Then open the Blending Options, setting:

Use Horizontal Type Tool (font: Verdana, 14pt, bold, none, white) to write:

13. Use Horizontal Type Tool (font: Verdana, 24pt, bold, smooth, white) to write:

Open Blending Options, setting:

Use Horizontal Type Tool (font: Verdana, 14pt, bold, none, white) to write:

14. Load Brush flower to use. Choose Brush Tool, select “Load Brushes” and select brush style that you want

Create a new layer, call it “Banner brushes”. Use Brush Tool with black color to click on this layer.You need to change size of brush for the best. Then change the layer Blending Mode to “Overlay” and change Opacity 20% – 50%.

15. Create a new layer above “Rectangle background”, call it “New background”. Use Rounded Rectangle Tool (radius: 10px) to draw the rectangle (width: 603px, height: 460px). Then press Ctrl + Enter to make the selection and fill white color.

Open Blending Options, setting:

16. Use Rectangular Marquee Tool to make the selection

Press Ctrl + J to duplicate this selection, rename new layer “New bar”. Open Blending Options, setting:

Add arrow icon and use Horizontal Type Tool (font: Verdana, 18pt, smooth, white) to write “NEW IMAGES”. “NEW” black color, “IMAGES” #ff7200.

Use Horizontal Type Tool (font: Verdana, 10pt, bold, none, # 007ed7) to write “Complete list”. Then create a new layer, call it “Orange triangle” and draw the triangle.

17. Create a new layer on top of the “New background”, call it “Image bg”. Draw the rectangle (width: 125px, height: 177px), fill white color. Open Blending Options, setting:

Add any image and text that you want. Select these layers and press Ctrl + G to group them. Call new group “Image”. Then click right mouse on this group and select “Duplicate Group” to duplicate this group to a lot of new groups and move them.

18. Create a new layer over “Rectangle background”, call it “Photo background”. Use Rounded Rectangle Tool (radius: 10px) to draw the rectangle (width: 316px, height: 267px). Then press Ctrl + Enter to make the selection and fill white color.

Open Blending Options, setting:

Add image and text.

Then use Horizontal Type Tool (font: Verdana, 24pt, smooth black) to write

19. Create a new layer over “Rectagle background”, call it “Clothing background”. Use Rounded Rectangle Tool (radius: 10px) to draw the rectangle (width: 316px, height: 555px). Then press Ctrl + Enter to make the selection and fill white color. Insert the same Blending Options of “Photo background”.

Use Horizontal Type Tool (font: Verdana, 18pt, bold, smooth, black) to write “Clothing”. Change the color of “C” #0072f2.

20. Use Line Tool to draw the line (width: 316px, height: 1px) and fill #cfcfcf. Continuous, draw the small line (width: 1px, height: 20px).

Create a new layer above the lines, call it “Orange tab”. Draw the orange rectangle (width: 60px, height: 36px). Then create a new layer, draw the triangle and move it on the bottom of “Orange tab”.

Use Horizontal Type Tool (font: Verdana, 14pt, bold, none, white) to write “New”, and (font: Verdana, 14pt, bold, none, #7b7b7b) to write “Top List”

21. Add the Shirt image, write text and and some color rectangles.

22. above “Rectangle background”, use Horizontal Type Tool (font: Verdana, 14pt, none, white) to write

Final result:

Download