Creating a Website Template in Photoshop

photoshop-website-tutorial
Share!

Photoshop Web Template – Website Design Tutorial

A recommended tip is that you learn the Shortcut keys!Why? To save some time of course!

And remember to press CTRL+S (save) very often!

Ok! Let’s start.

checkpoint

First you need a new document CTRL+N, with the Width: 1024 pixels and the Height: 1174 pixels.

New Document

checkpoint

Now change the background-color to “#817b74″ Background Color Paint Bucket (G)

checkpoint

Select the “Rectangular Marquee Tool”. Mark Shortcut key: (M).

And hold it and drag it to make a rectangular shape, put the shape where you want to put the white. Then you copy (ctrl+c) and paste (ctrl+v) to get a new layer!

checkpoint

Why is not my layer white like yours? Well you need to go “FX” aka layer style. If you don’t see this image press “F7″ on your keyboard!

layers

Now, select Stroke, Color overlay, Outer glow and Inner shadow and do the following!

Layer Styles

Layer style

Layer Style

Layer Style

[ Download style ]

checkpoint

Select the rectagular marquee tool and drag it like this, remember to have the background layer selected!

Marking

Now copy and paste, so you get the mark into a new layer, then go to FX, layer style once again!

Copy

Then press “Color Overlay” (#9b948e)

And then Inner shadow

This is what it should looks now

checkpoint

Your probably wondering how I got the flower and the note look so real? Well we call them Stock images!

Whats the best way to cut out the object out of the image? Well to get the best quality on the cut I strongly recommend the pen tool.

Just to make sure, this is what you should have right now.

Select your stock image(s)

This tool is called “Pen tool”

when you have add the point marks around the objects select this tool.

and drag the points to a smooth and clean point.

Then right click on the object and hit “Make selection”

And hit OK. Now you should have a selection around the object.

checkpoint

Another way to cut out and object from a white background is to select this tool and select the white background and make an inverse (Shift+Ctrl+I)

checkpoint

And then copy and paste. BUT! this way makes the object loose its quality, so i strongly recommend the pen tool!

checkpoint

Now when you selected you stock image and made a cut-out of the object put it behind the white content layer. Just like i did.

Another stock image attached with a brushed shadow, over the white content layer.

You can add some sharpness to the image since it where minimized and loosed a bit of quality!

checkpoint

Select the Background layer

Select the rectangular marquee tool and mark it like this

Select this tool (G)

Then create a new blank layer

Now drag it from the bottom of the mark to the top to make it like this

Add the layer to “soft light”

Select this tool by right click on the markquee icon.

Zoom in (Z) and put it one pixel over the base line.

Now press this icon and a the top of that meny, press on the “Soild color” and select (#75706c)

checkpoint

Once again, this is what you should have something like this right now

Then you can add these small things that no one care about, just filling out the layout.

Like this, adding a shadow using the pen tool

Then right click and hit “Make selection” once again. Then press on this icon on the layer panel and hit “Brightness /Contrast”

I used the same technique to make the shadow at the bottom.

“Why did you add these shadows, it dosen’t fit to anything?” Well i call them fill-outs. Details matters, so i added small things that no one would notice but they know its there.

checkpoint

Then when it comes to adding the text.

This layout is basically based on text so i wanted to show you how it works.

Press this button on the panel, and drag it like this

You can modify the text by going the the Character panel

Then press “Character”! I used Times new roman and Tahoma in this layout!

Then you can rotate the text area to fit the note more perfect.

checkpoint

Foodhealthfitness.com logo

The menu is 12pt tahoma font

The sub navigation 11pt tahoma

Other stock-images

Then add your favorite links at the bottom

checkpoint

Now the last thing you need to add when you got you content text and images on place.

Add a new group layer and select all the layers you have and drag them into this group!

When you have done that, right click on the group you just created and hit “Dublicate group…”

And when its dublicated, click on the group and press “CTRL+E” and Press M and cut out something like this.

Then drag the point up while houlding Shift+alt

Then make it like this.

Now. Hit this “mask” on the layer panel and then

Make sure its black and transperant.

“Drag it up!”

Our Result with our content!

Result

About the Author

Iggy Ko

Facebook Twitter Google+

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

Iggy KoCreating a Website Template in Photoshop
Ask a web design question.

Comments 44

  1. Michael Dunlop

    Great Post, should help beginning Web Template Designers fast!

  2. hanan

    really good work

  3. mark

    Very nice layout, wonderful! :)

  4. shegs

    nice tutorial, I think the next step would be to turn this into a real site.
    cutting the pieces and putting it back together and making it function.

    maybe even how to turn this into a wordpress template or something.
    just an idea
    take care!

    shegs’s last blog post..Gaming and Hardware News Update

  5. flashfs

    I agree with shegs. Cool tutorial and it would be good another one teaching how to slice this template.

  6. .::[ashX]::

    The Great Tutorial!!!

  7. Pingback: New Project Announced: Webdesigndev.com

  8. Priba

    wow, thank you very much! I spent the whole day today learning Photoshop through your lesson. I feel like I had 3 month of Photoshop training. Once again thank you. God bless!
    Priba

  9. Raj

    nice tutorial. Thanx!

  10. logicAlly

    damn that was the tigh(test) tutorial ever i like the layout

  11. Asim Das

    nice tutorial. thanx!

  12. bob

    that was a great tutorial but how do you organize the slices with css instead of using tables. i would also like to know how to do this in dream weaver thanks in advance who ever has the answers to my question

  13. bellinha

    Hi, this is a very nice tutorial. The stock images of the sunflower and the note paper/peg, they are stock images, do I just copy them to my computer and remove the background. What about copyright on them how does that work? How does stock images work as far as copyright goes?

    Thanks any help would be appreciated.

    Bellinha

  14. Lancashire Website Design

    I’ve seen quite a few Photoshop tutorials about website design and they all do it in a similar way but this is nicely set out so well done and thanks… bookmarked. The real trick in what makes this good is that your images are well annotated with those little red lines… ! Nice one!

  15. Internet management

    Nice post! GA is also my biggest earning. However, it?s not a much.:)

  16. social networking software

    very nice tutorial…i liked how you put everything on one page..good for your time on site and easy for us to use.

  17. pamanahrasa

    “FUN-TASTIC!!!”

  18. Noble Sebastian

    Excellent….

  19. Muhammad Umar

    its great really fantasic

  20. saurabh agnihotri

    hi…i am an intermediate level php developer.the only thing i lack in my website is a sexy n appealing look. i now hope that i will soon be able to do that as well…..
    thank you so much for this excellent tutorial.

  21. lancashire seo

    Love the article just what I needed.

  22. murkcore@blogger blog

    is there a tutorial on how to code templates made in photoshop? Or if there is an easy way to code templates. maybe a software or a website that adds all the codes for your design..

  23. M Udaykumar

    Its great really Excellent

  24. Damodar

    Really nice tutorial … keep up the good work!

  25. Girish

    Nice one, nice tutorial….
    Thanks for that :-)

  26. ahmet

    what about to post psd file.. btw great tutorial.. thx

  27. Rick

    Nice tutorial.I learned some new tips from this tutorial.Thank you.

  28. Pampanga Directory

    Hi, im loving your site now. thanks for this wonderful tutorial!

  29. Robyn

    So once I have made the template how to I use it as my blog template??? Anyone? Thanks

  30. Charlie

    Cool tutorial!

    Respect the author. Thank you.

  31. buknoy

    nice tutorial!

  32. Erik

    Very nice quick rundown of a photoshop template. I would love to see an update using slices, 960px grid and folders to organize the psd file.

  33. jaya

    Thank you very much for this well written tutorial.

    Please , post some more tutorial.

  34. Endyst

    Really good job! Thank you for your tutorial ;) !!

  35. Srinivasa Raju Vuppalapati

    Great Tutotrial, i found it very useful

  36. Rahil

    really a gr8 one..helped me a lot..Thnx a lot..

  37. Makera

    Thanks for this wonderful tutorial. It is indeed very helpful.

  38. pragya

    how u put the flower and the note behind and above the layers, please explain me in detail.
    thanx in advance.

  39. joselito pasculado

    nice work.. pls.. write the color hex or color rgb.

  40. Vishal P. Lolge

    i got…it!

  41. vijay

    Hi,
    Am newbie to webdesign.actually i want my own template to design in Photoshop.In this tutorial u shown how to design for home page its awesome.but i want to know to design for remaining pages of website.and i want to know how to upload self designed template in joomla.

    1. makhdoom irtaza

      hey vijay i am also a newbie to web desigining
      we can work together and make and sell our webtemplets
      and also can learn if you are intrested in working with me then
      add me on skype
      my skype name is makhdoom.irtaza
      and facebook email id is
      makhdoom.irtza@yahoo.com
      regards..

  42. Mark

    Awesome tut and great layout. Definitely will be using these techniques in my next design.

  43. varsha

    grate nice i like it

Leave a Reply

Your email address will not be published. Required fields are marked *