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.
Apr 29th
Create a Theme Store Website Layout in Photoshop
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:
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.
Leave Your Response
Subscribe
Get the latest updates via our RSS, Email, or twitter feed.
Share Your Thoughts16 Comments
Hosam Adel April 29th, 2010 at 12:59 am
I don’t like the SEARCH area
But overall it’s a great design, Thanks Matthew
Matthew Heidenreich April 29th, 2010 at 10:21 am
Thanks for your feedback. I actually thought the search area turned out nice
but it’s nice to hear feedback from what the community thinks. Thanks!
Tirath April 30th, 2010 at 10:44 pm
Awesome Tutorial with Grate web layouts
Thanks so much for your kind effort for posting
keep up good work
God bless you
Ivor May 3rd, 2010 at 4:38 pm
This looks SOO Envato Marketplaces
but nice details, great tutorial
Matthew Heidenreich May 3rd, 2010 at 4:53 pm
ha yeah, i even mention that in the tutorial
I added a area similar to theirs for the “3,874″ templates spot.
Web Design Maidstone May 4th, 2010 at 2:15 pm
I am a big fan of Footers. I’m not sure why… Always look at a website’s footer. Love the way you have dont this one, with the embossed look dividers.
faiverson May 5th, 2010 at 12:16 pm
great article! congrats!
John May 26th, 2010 at 9:43 am
I don’t know, maybe am the only one with a problem at some part of this tutorial. I really don’t understand how you applied your halftone brush on the header. is there something I failed to do?
John May 26th, 2010 at 9:44 am
I don’t know, maybe am the only one with a problem at some part of this tutorial. I really don’t understand how you applied your halftone brush on the header. is there something I failed to do? good job though.
John May 26th, 2010 at 10:06 am
I gat it! I gat it!! I rotated the brush in the Brushes Panel (brush tip shape). Im on course now thank u.:-)
clippingimages June 8th, 2010 at 12:07 am
great one!!!thanks for the post……..
Rameexgfx June 29th, 2010 at 4:39 am
Amazing & Very clean Design & Thanks for share the tutorial
Navanath Bhosale July 2nd, 2010 at 2:31 am
very good tutorial thank’s
Rokaiya Yeasmin Munni July 30th, 2010 at 12:32 am
Great this tutorial. Thanks for sharing this one.
Boston UI Design August 4th, 2010 at 3:01 pm
This is so helpful — really a great post.
Llairenm Ilai September 1st, 2010 at 12:25 pm
Very nice Layout, great tutorials.
Brasil-PE