A quick guide on how to design a webpage in photoshop.

Follow along with the steps I took to create this simple website

This tutorial goes through the steps I took in Photoshop to make this website. It requires Photoshop CS2 to be able to replicate every aspect exactly as shown.

In photoshop create a new image 776 wide and 600 height with a white background

Step 1:

Step 2:Now Lets start with the header in the below image i took a round rectangle

Step 3:

Making a header Navigation Bar…Its your wish you can take a plain rectangle bar too

Step 4:

After Creating the round rectangle we will optimize them with shadowing and stroking with the option BLEDING OPTIONS when can be found when you right click the layer as shown below.

Step 5:

While Using drop shadow and stroke effect see to it that you choose the right shadow style and stroke color by pressing on the respective options as shown below

Step 6:

After Using the stroke and shadow we will make a header text and navigation item as shown below.In the Below image i applied the Glossy Reflection Trick

Step 7:

Now in step 7 comes the Most important part using Slice Tool

Step 8:

While using the slice too you make sure that u dont miss edges of the webpage as shown in the image “01″ is the first slice “02″ is the second one so on..

Step 9:

Now comes the saving part of the webpage remember that you use the SAVE FOR WEB option.

Step 10: Remember that you dont save your images in a bigger size.Coz it take a lot of time to load when you use the website in a real time.Recomended is Jpeg High With Quality 60

Step11:

Now after selecting the quality save your webpage type as “HTML AND IMAGES”

Step 12:

Thats it now you can test “webpage.html” using your favorite browser,try using different shapes,shadows & strokes.

Share This