Web Design Photoshop Tutorial

How to skin a website

This Adobe Photoshop Tutorial is a very basic tutorial about how to make a web page design using Photoshop. The design i am going to do below is very basic but it gives you an idea of how it is done and you can start to make something creative.

You would probably want to do the HTML and CSS first and design the website around the frame you are going to be using, also thinking about using code to stretch to fit the users page and centralising the image etc., this tutorial is going to be about the design.

So fire up Adobe Photoshop CS5 …..

 Create a new document

 

 

Choose Gradient Tool and your selected colours

 

 

Then click from the top to the bottom to get your gradient.

 

 

And you will end up with something like below.

 

 

Now to make some buttons,

 

 

And choose the colour you want the buttons to be ..

 

 

Like below

 

 

Now we want to duplicate the buttons , right click the layer and Duplicate Layer.

 

 

In this example I duplicated it an extra 3 time to make a total of 4 buttons.

 

 

Now to label the buttons.

 

 

In this example I created, Home , About, Contact, Shop.

 

 

Make sure the text layers are above the rectangle layers,

 

And make another layer for where your main text is going to go.

 

Now we need to make the site title, so goto the Text Tool and type your name in the header, then right click on the layer and goto Blending Options.

 

Choose Drop Shadow

 

Change some of the settings to suit and your title is now done..

 

Add a logo ..

 

 

Now we need to Slice the image up ready for the website.

 

 

Using the slice tool , cut the website up into sections, e.g logo, header, menu buttons, main text section etc.

 

 

Now to save the images , goto File -> New -> Save For Web & Devices

 

 

Choose, HTML and IMAGES.

 

 

Then goto the folder you have chose to save your files to.

 

You will see a folder called images and a html file. In the images folder will be the images we sliced earlier

 

Opening the HTML file will give us the website we designed…

Now all that remains is to learn the HTML and CSS coding, and i’m not going into that in this tutorial….

 

thanks for reading, please support the site

Related Posts

• Puppet Warp in Photoshop CS5 to Tweak Images
• Using Photoshop CS6 – Tilt & Shift Effect
• How To Displace – Wrap A Texture
• How To Make A High Key B&W Portrait Tutorial
• Make your own Digital Polaroid Tutorial