Photoshop Web Template - Web Site Design Tutorial | Internet

By DavidPeters
Total views: 79
Word Count: 1363

Don't let what you might not be overly familiar with such as slices and Javascript rollovers keep you away from creating a web site that will not only support all of your needs, but that you will be proud of at the same time. The following is a Photoshop web tutorial that will help you on your way to this goal by starting out with a simple 2 graphic web page design. Let's Begin

First, lets make a banner and place it in a table containing 5 rows and 1 column. We will place the banner in the top row. The text for your site and any photos you might like to include will be in the next row. Row 3 will contain a separator, row 4 will be set for your text links and a copyright notice, and row 5 will hold a second separator.

I'm going to name this site My Stuff. The next step is to find a graphic for the banner. You might find a good image at one of the free stock photo sites, but I was looking for something a little more professional, so I tried the iStockPhoto galleries and found an illustration by Vinaya Prashanth that cost only $3. Sweet. That's a reduced version of it on the right.

The colors of the banner and the website will be taken from the various pinks used in the image. There are 3 pinks I want to use - a dark pink, a middle pink, and a lighter pink that I made myself from a shade of the darker pink.

I find that by using the opacity slider on a sampled color you can create a nice variation. Open a new document and copy and paste the main graphic you've chosen into it. Now from the toolbox select the eyedropper tool and sample a color by clicking on it in your graphic. This will change the foreground color square in your toolbox.

Now open another new document and in the Background Contents choose White and click OK. Create a new layer by going Layer> New> Layer with this document open. Next go to Edit> Fill and select Contents, Use: Foreground Color. This process will fill your document with the color you just sampled. The trick here is to reduce the opacity using the slider and adjust it until you find an appealing shade. After selecting your shade, flatten the image by going Layer> Flatten Image. Use the eyedropper tool again, only now to change the foreground color square in your toolbox to match your newly created color. Click on the color square and the color picker will appear, and you can make note of the numbers of your new color.

Scroll through your fonts to find one that appeals to you. Once you come across the one that you feel is right, play around with it a little. Adjust the tracking, the leading and the scale, or even a combination of these. Small adjustments can go a long way in making it much more personal and ensuring your site will stand out among others.

To select a font in Photoshop go Window> Character. In the palette you'll see a list of your installed fonts. To tweak the settings you'll need to bring up the Paragraph palette. You can do this by going Window> Paragraph.

Looking for new fonts? At the end of this tutorial you'll find a list to some free font resources.

Now we'll create a new document that is 600 x 300 pixels. You of course can change this size to fit your own design when you choose your own stock photo and plan your layout.

Now lets make a new layer by Layer> New Layer and call it Designer Pro. I'll position the image on this layer and shrink it to fit. You shrink your graphic with Edit> Transform> Scale. The bounding box will have handles. Use the Shift Key to constrain proportions, and shrink your image by selecting the top left handle and pulling towards the bottom right. Drag inside the bounding box to move the graphic. Once it is to your liking, click OK.

Next we want a tinted background. I'm going to go with the light pink.

Choosing the background layer, Layer 1, fill it with the light green by steps Select> All, then Edit> Fill. In the dialog box in Contents, select Use: Color and in the Color Picker enter the numbers you noted earlier.

The result is a 600 x 300 banner with a gentle background color and with the art placed on the left. We're getting there.

I've chosen to apply a thick stroke to the background layer to make for a more bold design. First make sure the Layer 1 background layer is active, and make a copy with steps Layer> New> Layer Via Copy. Next double-click next to the layer name. Blending Options in the Layers Style dialog box will appear.

Select and then click on the word Stroke in the Styles options on the left side. I changed the settings to Size: 7px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Fill Type: Color, and I clicked the color swatch and entered D04E8C in the color picker. Click OK.

The border serves to balance out the design, so you have the option to be as creative as you would like with your own ideas.

We're going to put the names of the main sections directly on the banner. These will be the links. Since it will be just one single graphic we will be using image maps.

Create a new layer for your words. Use the type tool to create the section names and then use the move tool to position them exactly to where you want on the banner. Remember to pick a color for your text that is darker than your background color to avoid finding yourself screaming obscenities and suffering major hair loss! Do this by going Window> Character. In the Character palette you'll find a color square. Click on it to change colors.

You'll need an HTML editor like GoLive or Dreamweaver to automate this process. This is really very easy. You create little "maps" over each word and enter the link destination. You'll need to do a Google search on image maps to find a tutorial if you don't have an HTML editor, or invest in a book like Elizabeth Castro's HTML Quickstart Guide for help.

Create a new document. The width should be 600 pixels, and the height should be about 12 pixels. Fill this with your background color. Then, using the text tool and a dark color, type some periods, like this:........... and place them in the file, centering them. Change the size and the spacing until it looks perfect. Now save this as a GIF file.

In your HTML editor of choice make a simple table containing 5 rows and 1 column. If you're planning to use text link navigation below the banner instead of image maps on the banner, make an extra row ending with 6 rows in your table. Now put your elements into the individual rows of the table and you're done.

This is a lot of information to go over and sometimes can get to be a little overwhelming. If this is the case, or you are simply on a time budget, there is a shortcut you can take. You can purchase ready-made templates from sites such as Template Monster that you can use as a foundation to create web pages in Photoshop.

On Template Monster you will find a pulldown menu on the front page where you can pick options or features and then carry out a search for a template. The templates are reasonably priced and fairly simple to handle in GoLive or Dreamweaver. There have been times that I have acquired a template just for the images and color scheme. This has proven to be less costly than using stock photos with a fee. Take a look at Template Monster to explore the huge variety of web templates they have available.

I hope this has helped you in your web design needs. Whatever your goal, having the right web page can help you reach it!

About the Author

Did you enjoy this article? Curious about learning photoshop fast? Well now you can by getting this free report...what are you waiting for?

You are here Articles > Internet