Web Design Tutorials

.

Web Design Tutorials

Coming Tuesday March 25th 2008 Part II

DESIGNING A WEB PAGE LAYOUT IN PHOTO SHOP

Please check back bookmark this page Press Ctrl + D

When I first started designing web pages I would find several tutorials that would show you how to create a layout for a web page. Some were good and some were difficult to understand. Others would leave out critical steps for completing the process. This is where I hope to begin by writing a complete tutorial that will help a complete beginner design any type of website template that you would want create with your imagination being your only limit.

Making a web site layout in Photo Shop CS3
By Phoenix W.
In this tutorial we will be making a contemporary style web page one that looks modern. So, let’s start by opening up Photoshop and creating a new project. Click on file –new- and custom. Use 850 width and 750 height for the resolution use 72 pixels. The color can be left at RGB mode and the background set to transparent.

Now you should end up with something like in the figure below.

The first layer we will add to our web design is the background layer. Press control N to create a new a new layer. Name the layer background and click ok. Select the rectangle from the tool bar and set its color to white. Now place your cursor at the top left corner of the canvas you set up on the screen for your web design and double click while pulling down the rectangle until it cover the entire canvas. You should now have a white background that is similar to what is shown below. If for some reason you were not able to cover to entire canvas with the white rectangle right click over the white canvas select free transform and adjust the size by moving the handles. After your finished press enter accept the change.

Now we will begin to add the first layer of the header or masthead of the page. Select the rectangle tool place your cursor over the top left corner as before and pull it down about 1 inch and across to the right side of the page. Make sure that you extent the rectangle all the way to the end of the canvas. Accept the change and press enter. Now go to the color box and change the color from white to red use this RGB setting R 233 G24 B24 and select ok.
Now you should have a white page with a red header like above. Before we go any further let’s add a gradient to the red rectangle we just added we will do this by selecting the header rectangle from the
layers window on the right hand side. right click and select blending options. Check gradient and click on the field gradient to bring up the gradient blending options. Once you get there set all of the fields to the setting shown below. (later you can experiment to come up with different looks for your web design)for blend mode select luminosity ,Opacity should be set to 28%,leave gradient as it shown, style should be set to linear, angle 90%, and Scale set to 100%click ok to save your settings. The final result is shown below.

Now we will be adding a navigation system. Let’s go back to the rectangle tool. This time we will be using the rounded rectangle tool. Double click just inside the white border of the page and stretch the rounded rectangle tool until you end up with the result that I have below.( if the rectangle that you have made isn’t quite the same just click on the rectangle and then free transform to reshape as you desire. When you have the result that you want press enter to save.
Adding Text
Next we will be adding text to the navigation bar. Start by clicking on the text tool from the tool bar. We will be adding six items to the nav bar. A simplified way to add text to your nav bar and maintain the correct spacing is by adding the first text you will be using in this case it will be home for the home button. So place your cursor over the place where you want your home button to be and type in home. To speed things up we will add a shadow to our text to help it stand out against the background. Click on the text that you just entered from the layers pallet. Open the blending options menu and select drop shadow. Make all of the settings the same as in the illustration shown below.


Now with your first button complete, we will simply duplicate the layer, click on the text for your home button from the layers pallet just once and from the dropdown menu select duplicate layer. You will be prompted to enter a name for this layer. Enter the name of the button you want it to be. In this example we will be using about us. now select the move tool and while holding down the shift key move your new button its correct position. From this point all you need to do is double click on the text in the layout panel and which will allow you to edit the text. Type in the name of your new button.
Follow this procedure for the rest of the button names listed below. I’ve shown the completed result in the image below. About us, services, investments, opportunities, register, loans, contact us.
.
Check back in a couple of days for the continuation of this tutorial.

©2007 | pointlinewebdesign.com