Apr 29th

Create a Theme Store Website Layout in Photoshop

Matthew Heidenreich in Tutorials with 45 comments

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 Thoughts45 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 :)

    Reply

    • 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 :-)

    Reply

  • Ivor May 3rd, 2010 at 4:38 pm

    This looks SOO Envato Marketplaces :) but nice details, great tutorial

    Reply

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

    Reply

  • faiverson May 5th, 2010 at 12:16 pm

    great article! congrats!

    Reply

  • 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?

    Reply

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

    Reply

  • 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.:-)

    Reply

  • clippingimages June 8th, 2010 at 12:07 am

    great one!!!thanks for the post……..

    Reply

  • Rameexgfx June 29th, 2010 at 4:39 am

    Amazing & Very clean Design & Thanks for share the tutorial :D

    Reply

  • Navanath Bhosale July 2nd, 2010 at 2:31 am

    very good tutorial thank’s

    Reply

  • Rokaiya Yeasmin Munni July 30th, 2010 at 12:32 am

    Great this tutorial. Thanks for sharing this one.

    Reply

  • Boston UI Design August 4th, 2010 at 3:01 pm

    This is so helpful — really a great post.

    Reply

  • Llairenm Ilai September 1st, 2010 at 12:25 pm

    Very nice Layout, great tutorials.

    Brasil-PE

    Reply

  • Alex September 24th, 2010 at 2:33 pm

    Hi,

    I am new to this. Can you tell me which version of Adobe Photoshop you are using to create the website template. Is It Adobe Photoshop CS5?

    Reply

  • inspirationfeed September 27th, 2010 at 6:46 pm

    This is a very clean template, i love it!

    Reply

  • Teras Info October 23rd, 2010 at 9:22 am

    Very nice…thanks…

    Reply

  • Brett Widmann November 17th, 2010 at 8:37 pm

    This is a really helpful tutorial! Thanks for sharing.

    Reply

  • Steven February 7th, 2011 at 7:26 pm

    How can I transfer the psd file to Dreamweaver to edit it? Thanks!

    Reply

    • Matthew Heidenreich February 7th, 2011 at 8:35 pm

      I don’t have a tutorial for this specific tutorial, but if you around the site you will see some tutorials for similar psd to xhtml tutorials.

  • Jason October 21st, 2011 at 4:57 am

    This is really good work… Thanx a Ton…

    Reply

  • Fairy Gnome Statue Sculpture October 22nd, 2011 at 1:16 am

    Thanks for one’s marvelous posting! I certainly enjoyed reading it, you happen to be a great author.I will ensure that I bookmark your blog and definitely will come back in the foreseeable future. I want to encourage you continue your great posts, have a nice morning!

    Reply

  • google voice iphone October 28th, 2011 at 7:39 pm

    I genuinely enjoy examining on this internet website , it has got excellent posts .

    Reply

  • tardive dyskinesia lawyer October 31st, 2011 at 1:33 pm

    Thanks a ton for putting this up. It’s quite amazing doing all this in Photoshop, I usually do it all in Dreamweaver. But I can see how doing this in Photoshop can give you more of an artistic freedom when it comes to design.

    Reply

  • nate&bluetooth November 4th, 2011 at 4:42 am

    thanks for your tutorial, i like it.

    Reply

  • Sacramento Personal Injury Attorney December 16th, 2011 at 12:48 pm

    Great blog, i really like the way you write these articles! I`m really impressed, keep up the good work. Cheers!

    Reply

  • Crestor Lawyers December 30th, 2011 at 7:53 am

    Really good post, thanks for this useful article!

    Reply

  • Low cost cialis January 23rd, 2012 at 10:31 am

    nmeloefwjtfgvodujpo, Cialis, NwGEWTq, [url=http://www.cialissupport.com/]Cialis[/url], RZOqcAz, http://www.cialissupport.com/ Cialis, UXTmxja.

    Reply

  • Web Hosting February 13th, 2012 at 6:21 am

    I think the design is just right. :)

    Reply

  • Taupo Accommodation February 27th, 2012 at 8:49 pm

    Thanks for the share! simple yet neat design…

    Reply

  • Hej February 29th, 2012 at 5:46 am

    Thank you for your own hard work on this site. My daughter takes pleasure in setting aside time for investigations and it’s really simple to grasp why. Most people hear all about the compelling form you provide both useful and interesting tips on this web blog and as well strongly encourage participation from people on this area and our own simple princess is always being taught a great deal. Have fun with the remaining portion of the new year. You’re the one conducting a really good job.

    Reply

  • Building Inspections Auckland March 7th, 2012 at 8:28 pm

    Very helpful tutorial!

    Reply

  • Generic viagra online November 14th, 2012 at 12:16 am

    nynqbefwjtfgvodujpo, Female free sample viagra, XoPbYvu, [url=http://www.californiansfordemocracy.com/]Female viagra alternative[/url], OXYlQCK, http://www.californiansfordemocracy.com/ Photos viagra, zaOwtOV.

    Reply

  • Roulette game free online November 15th, 2012 at 12:31 am

    qhpuuefwjtfgvodujpo, online roulette, RUQItjL, [url=http://bodyworkbyjanis.org/]online roulette[/url], XgBwkzR, http://bodyworkbyjanis.org/ No limit roulette online 01qq, IMObqYa.

    Reply

  • Fioricet info November 15th, 2012 at 12:32 am

    esaowefwjtfgvodujpo, Fioricet 180, NTTiOIe, [url=http://www.sweet-paper.com/]Cod fioricet[/url], ZINVzBC, http://www.sweet-paper.com/ Fioricet effects, MTbQmST.

    Reply

  • Liste noire casino en ligne November 18th, 2012 at 8:18 pm

    grmbkefwjtfgvodujpo, Gagner de l’argent avec les casinos en ligne, LpQWKqy, [url=http://whatiheardtoday.com/]Casino en Ligne[/url], DoYekoT, http://whatiheardtoday.com/ Bonus casino en ligne, XEvplop.

    Reply

  • Any Option February 12th, 2013 at 12:21 am

    nrsmnefwjtfgvodujpo, Anyoption Trading, EJyinKM, [url=http://www.beginforex.co.uk/anyoption-review]Anyoption Review[/url], ezYdusJ, http://www.beginforex.co.uk/anyoption-review Anyoption Trading, CxfhagC.

    Reply

  • Harvokse February 12th, 2013 at 12:21 am

    wfgxsefwjtfgvodujpo, Har Vokse, lMhQsTO, [url=http://har-review.co.uk/]Har Vokse[/url], hTyVKua, http://har-review.co.uk/ Har Vokse, nWQyWFn.

    Reply

  • Anntina March 17th, 2013 at 10:39 pm

    Amazing tutorial!
    very helpful for me.Thank you for your work very much!
    You can download wallpapers on http://wallpaperswa.com/

    Reply

  • Baju Bayi baru Lahir May 8th, 2013 at 7:35 am

    Wow, fantastic blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is great, as well as the content!. Thanks For Your article about Create a Theme Store Website Layout in Photoshop .

    Reply

  • clipping path services May 11th, 2013 at 11:47 pm

    Excellent design. Thanks to share this post.

    Reply

  • viagra May 15th, 2013 at 7:13 am

    Lets get some shoes

    Reply

  • Kate Upton May 16th, 2013 at 5:45 am

    after see your tutorial its looks so easy to create a theme store on photoshop. thanks for your amazing work.

    Reply

Leave Your Response