:Adobe Photoshop, how to build a website, how to create a site, how to do a website, tutorial, web design, web design program, web page design software
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 ..
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