Web Design Photoshop Tutorial

 

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…

Thank you for visit our blog.
Hope you can learn something new from this tutorial. You can share your thought & suggestion with us though comments below.

Discover the top most quality clipping path, clipping path service or low cost clipping path, image masking service  & photo editing in reasonable price with quick turnaround time from Clipping Design, one of the most popular outsourcing clipping path service provider.
Clipping Design always ready to provide 100% handmade clipping path, photoshop clipping path, clipping path service, SEO service & photoshop masking with Guaranteed client satisfaction on top quality clipping path service & masking service .

Thank you…

Reference: howtophotoshop.co.uk