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 2: Layers

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

Step 3: Make a Selection

Make next selection with Rectangular Marquee Tool :

Step 4: Fill

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

Step 5: Result so far

You should have something like that :

Step 6: Make another selection

Make next selection with Rectangular Marquee Tool :

Step 7: New Layer

Make another layer :

Step 8: Fill with color

Fill the selection with the color #242424 :

Step 9: Select the foreground color

Select the foreground color #242424 :

Step 10: Select the background color

And now the background color #5f5f5f :

Step 11: Make the wood texture

Filter-> render -> fibres :

Step 12: Gradient Overlay

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

Step 13: Rectangular Marquee Tool

Make next selection with Rectangular Marquee Tool :

Step 14: Another new layer

Make a new layer :

Step 15: Select the color

Select next color #f3f3f3 :

Step 16: Stroke path

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

Step 17: Make some lines

Than make another lines like those :

Step 18: New Layer

Step 18 : Make a new layer :

Step 19: Positioning the layers

Put the layer under the Line layer :

Step 20: Make selection

Make next selection with Rectangular Marquee Tool :

Step 21: Orange color

Use next color #fd6802 :

Step 22: Fill selection

Fill the selection with the orange color :

Step 23: Effects

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

Step 24: Adjust gradient

Opacity – 31% , reverse , 90 degrees :

Step 25: Result

You should have something like this :

Step 26: Adding images

Add a little image :

Step 27: Adding left column text

Now , start to add the text :

Step 28: Add body text

Add the text in that mode :

Step 29: Adding thumbnails

Add thumbnail for every column :

Step 30: Effects

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

Step 31: Take a look

Step 31 : You should obtain something like that :

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 33: Effects

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

Step 34: Site name

Add the name of the site :

Step 35: Add Effects

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

Step 36: Review Text

You should have something like this:

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

Make same settings for the buttons :

Step 38: Slice Tool

Select Slice Tool :

Step 39: Select Home

With slice tool, select Home button:

Step 40: Edit slice options

Right click -> Edit Slice Options :

Step 41: Select

Step 41 : Select About us button :

Step 42: Slice Options

Right click -> Edit Slice Options :

Step 43: Save

File -> Save for web&devices :

Final result

Related posts:

1. Video Tutorial on How to Design a Website in Photoshop
2. Video on How to Design a Website in Photoshop – Part 2
3. Magnifying Glass with Photo Zoom Effect in Adobe Photoshop

Wendell Fernandes of Dellustrations.com shows us how to create an elegant website in Adobe Photoshop starting from the ground up. He shows us step by step how to setup a template and then explains which tools to use in Photoshop, and how to use them, in order to create an awesome looking web site. This is video 2 of 2 in this video tutorial series. If you missed video 1, you might want to watch it first by clicking HERE.

A little about Wendell:

My name is Wendell Fernandes, Creative Director of Dellustrations.com, I am a Brazilian-born user interface and icon designer , I was also one of several designers who brought the new Monster.com live. In addition to Monster.com, I’ve also worked with clients like Dell, and DivX. My focus is bringing UI creativity in the industry and innovative solutions that make sense in today’s market. You can contact me by visiting Dellustrations.com.

Related posts:

1. Video Tutorial on How to Design a Website in Photoshop
2. 3D Icon and Shape Design in Illustrator – Video Tutorial
3. How to Design a Fresh Website Template – for Beginners

Wendell Fernandes of Dellustrations.com shows us how to create an elegant website in Adobe Photoshop starting from the ground up. He shows us step by step how to setup a template and then explains which tools to use in Photoshop, and how to use them, in order to create an awesome looking web site. This is video 1 of 2 in this video tutorial series.

A little about Wendell:

My name is Wendell Fernandes, Creative Director of Dellustrations.com, I am a Brazilian-born user interface and icon designer , I was also one of several designers who brought the new Monster.com live. In addition to Monster.com, I’ve also worked with clients like Dell, and DivX. My focus is bringing UI creativity in the industry and innovative solutions that make sense in today’s market. You can contact me by visiting Dellustrations.com.

Once you’re finished, make sure you see “Video 2 on How to Design a Website in Photoshop“

Related posts:

1. Video on How to Design a Website in Photoshop – Part 2
2. 3D Icon and Shape Design in Illustrator – Video Tutorial
3. How to Design a Fresh Website Template – for Beginners