Apr 29th

Create a Theme Store Website Layout in Photoshop

Create a Theme Store Website Layout in Photoshop

In this tutorial you will learn how to create a simple and beautiful theme store layout in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Full Color Business Cards Digital Printing at PsPrint.com

Final Result

Tutorial Resources

Lets Get Started

1. The first thing we need to do is create a new document with the dimensions of 1020×1200.

2. Using your Paint Bucket Tool (G) fill your background layer to the color #D7D7D7.

3. We will then begin with the container that will house our login information at the top of our page. Using your Rectangle Marquee Tool (M) make a selection similar to the following and fill it with #000000.

4. Next we want to add some blending options to our newly created layer. To do so right click your layer in the layers palette and choose Blending Options from the drop down menu.

5. Our login field is next. Make sure your foreground is set to #313131, and then sing your Rounded Rectangle Tool (U) with a radius of 3px create a rectangle similar to the following. This will serve as your input box for your login form. The input text color is #FBFCDD. You will use the same method for a password field.

6. For the sign in button we want to use our Rounded Rectangle Tool (U) again with a 3px radius and make a rectangle that looks similar to the following:

7. Add the following blending options to your layer:

8. Add some text to your layer, in this case “sign in” and it will look something like the following. You can then duplicate the styles for a register button as well.

9. Using your Rectangle Marquee Tool (M) again, we want to make the background for our header. Create a selection similar to the following and fill it with #000000.

10. Add the following blending options to your layer:

11. Go to the tutorial resources at the top of this page and find open up the Halftone Brush pack for this next step. On a new layer above your headers background layer with a white brush do something that looks similar to the following:

12. Next set your layers blend mode to Overlay, and lower the opacity to about 6%. Then add the following blending options to your Halftone layer:

13. We need to arrange where all the text links will be displayed within our header, and where our text logo will be placed. The font used in the logo is Calibri with #FFFFFF as its color. The icon is from the Milk Icon Set provided in the tutorial resources. For our links I used the font Helvetica Bold with #F7F6F6 as my font color.

14. To represent our active link, we want to use our Rounded Rectangle Tool (U) again and make a shape similar to the following:

15. Add the following blending options to your newly created rounded rectangle layer:

16. That is is for our header, and now it’s time to move onto our search box. These layers will need to be above the header layers we just created. Using your Rectangle Marquee Tool (M) again, make a selection similar to the following and fill it with #000000.

17. Add the following blending options to its layer:

18. Next using your Rectangle Marquee Tool (M), make a rectangle that is similar to the following and fill it with #FFFFFF. Then lower the fill of its layer to 30%.

19. Add the following blending options to its layer:

20. For our search input we want to use our Rounded Rectangle Tool (U) with a radius of 10px to create something that looks like this:

21. Add the following blending options to your inputs layer:

22. All that is left is to add a search icon (i used the default magnifying glass), and some search text and your nearly complete header will look like this.

23. The last thing we need to add to this section is the category drop down menu. To do this use your Rectangle Marquee Tool (M) to make a selection similar to the following.

24. Add the following blending options to its layer:

25. Using your Polygonal Lasso Tool (L) make a triangle similar to the following and fill it with #000000. Then add your “categories” text with the color #323232.

26. For our “introduction” box, I wanted to create a similar style that themeforest uses. To do this use your Rectangle Marquee Tool (M) yet again.

27. Add the following blending options to your layer:

28. Next I added my background image. To do this I just created a black box inside our container. I then proceded to arrange some thumbnails of themes together in a rotation. Once that was complete I think merged these layers and lowered the opacity to 20%. Then all that is left is to add some text. The first and second line of text is #FFFFFF, while the third line is #FBFCDD, and the blue is #67C0ED.

29. For our featured themes box, add a heart icon from the Mono Icon Pack, and then add your heading text with the color #212121. Add the following blending options to your text layer:

30. Use the settings you used in step 26 for your introduction box, and you’ll have something that looks like this:

31. Do the same thing for a recent theme section, and then its time to move onto our footer.

32. The footer will takes after the header. So go back to step 9 until you get to this point:

33. For the headings use the color #FFFFFF, and for the description and links use the color #CADEF2.

34. The last thing we need to do is create divs between each text area. Using your Rectangle Marquee Tool (M) make a 1px wide selection and fill it with #030508.

35. Add the following blending options to your layer:

36. When it’s all said and done your template will look something like the following:

Our testking 642-383 tutorials and testking HP0-S26 live demos will help you to learn web designing in detail. Become expert with testking NS0-153 web designing course

Related Articles

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts63 Comments

Leave Your Response