How to Design a Fresh Website Template – for Beginners

March 1, 2010 in Featured, Photoshop, Web Design by admin

Fresh website template for beginners (Adobe Photoshop CS3)

In this tutorial I`ll be using Adobe Photoshop CS3 but you can use any version of Adobe Photoshop. This website tutorial can be followed by anyone, but was meant to be extremely basic for beginners wanting to learn the basics of design while learning how to design a website. There is an image for every step that will be very helpful. In this tutorial, use your imagination and let creativity take over. Have fun!

Author: Pintilei Adrian-Dumitru

Pintilei Adrian-Dumitru is a graphic designer in Romania. He learned how to use graphic design software by practicing virtual-tuning projects for several years. He lives with his parents in a little village called Vorniceni but he studies at the National College A.T. Laurian in Botosani, Romania. His dream is to be an important computer-programmer in his country.

 

Tutorial Details

  • Program: Adobe Photoshop
  • Version: CS3
  • Difficulty: Beginner

Step 1: Make new document

Start by making a new document with the following dimensions :

Step 1 – Design a Website

Step 2: Layers

Make a new layer ( Ctrl+Shift+n) :

 

Step 2 – Design a Website

Step 3: Make a Selection

Make next selection with Rectangular Marquee Tool :

Step 3 – Design a Website in Photoshop - InstaTuts

Step 4: Fill

Fill the selection with white color , right-click on the layer-> blending options -> gradient overlay :

Step 4 – Design a Website

Step 5: Result so far

You should have something like that :

Step 5 – Design a Website

Step 6: Make another selection

Make next selection with Rectangular Marquee Tool :

Step 6 – Design a Website

Step 7: New Layer

Make another layer :

Step 7 – Design a Website

Step 8: Fill with color

Fill the selection with the color #242424 :

Step 8 – Design a Website

Step 9: Select the foreground color

Select the foreground color #242424 :

Step 9 – Design a Website

Step 10: Select the background color

And now the background color #5f5f5f :

Step 10 – Design a Website

Step 11: Make the wood texture

Filter-> render -> fibres :

Step 11 – Design a Website

Step 12: Gradient Overlay

Right click on the layer with the fibres , make next settings :

Step 12 – Design a Website

Step 13: Rectangular Marquee Tool

Make next selection with Rectangular Marquee Tool :

Step 13 – Design a Website

Step 14: Another new layer

Make a new layer :

Step 14 – Design a Website

Step 15: Select the color

Select next color #f3f3f3 :

Step 15 – Design a Website

Step 16: Stroke path

Step 16 : Right click on the selection – > Stroke path ( 4x brush size )

Step 16 – Design a Website

Step 17: Make some lines

Than make another lines like those :

Step 17 – Design a Website

Step 18: New Layer

Step 18 : Make a new layer :

Step 18 – Design a Website

Step 19: Positioning the layers

Put the layer under the Line layer :

Step 19 – Design a Website

Step 20: Make selection

Make next selection with Rectangular Marquee Tool :

Step 20 – Design a Website

Step 21: Orange color

Use next color #fd6802 :

Step 21 – Design a Website

Step 22: Fill selection

Fill the selection with the orange color :

Step 22 – Design a Website

Step 23: Effects

Right click on the layer -> Gradient overlay -> Make next settings :

Step 23 – Design a Website

Step 24: Adjust gradient

Opacity – 31% , reverse , 90 degrees :

Step 24 – Design a Website

Step 25: Result

You should have something like this :

Step 25 – Design a Website

Step 26: Adding images

Add a little image :

Step 26 – Design a Website

Step 27: Adding left column text

Now , start to add the text :

Step 27 – Design a Website

Step 28: Add body text

Add the text in that mode :

Step 28 – Design a Website

Step 29: Adding thumbnails

Add thumbnail for every column :

Step 29 – Design a Website

Step 30: Effects

Right click on a thumbnail layer -> stroke , make next settings :

Step 30 – Design a Website

Step 31: Take a look

Step 31 : You should obtain something like that :

Step 31 – Design a Website

Step 32: Adding the buttons

Add the buttons (I added some simple text buttons), You can change the color for the home button (put it on italic , underline it), otherwise, you can change the color of the home button by using CSS:

Step 32 – Design a Website

Step 33: Effects

Right click on the layer with the buttons , Blending options -> Outer glow , make next settngs : :

Step 33 – Design a Website

Step 34: Site name

Add the name of the site :

Step 34 – Design a Website

Step 35: Add Effects

Right click on the layer-Blending options – Drop Shadow , make next settings:

Step 35 – Design a Website

Step 36: Review Text

You should have something like this:

Step 36 – Design a Website

Step 37: Add effects to buttons as well. If you want to

Make same settings for the buttons :

Step 37 – Design a Website

Step 38: Slice Tool

Select Slice Tool :

Step 38 – Design a Website

Step 39: Select Home

With slice tool, select Home button:

Step 39 – Design a Website

Step 40: Edit slice options

Right click -> Edit Slice Options :

Step 40 – Design a Website

Step 41: Select

Step 41 : Select About us button :

Step 41 – Design a Website

Step 42: Slice Options

Right click -> Edit Slice Options :

Step 42 – Design a Website

Step 43: Save

File -> Save for web&devices :

Step 43 – Design a Website

Final result

Design a Website in Photoshop - InstaTuts