Photoshop Web Template - Web Site Design Tutorial
Those unfamiliar with web design are many times overwhelmed by slices and Javascript rollover and cast aside their projects out of aggravation and disappointment. The goal of this tutorial is to stay frustration free by designing a web page using only 2 graphics.
We'll create a banner and place it in a table that will contain 5 rows and 1 column. The banner will be placed in the top row. The next row will contain the text for your site and any photos you may wish to include. Row 3 will hold a separator, row 4 will be for your text links and a copyright notice, and row 5 will hold a second separator.
For this example we'll name this site My Site. Now we need to find a graphic for the banner. You can find professional level images at sites such as the iStockPhoto galleries and at only $3 or so for most images they are affordable. Free stock photo sites are also available for perfectly good quality images.
Try to incorporate the colors from the graphic into the colors of the banner. You can choose multiple colors but make sure they work well together or create a variation of the same shade from just one color. Here I will create 3 different shades of blue.
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.
With this done, open another new document and in the Background Contents select White and Click OK. With this document open, create a new layer by going Layer> New> Layer. Then go Edit> Fill and select Contents, Use: Foreground Color. This will fill your document with the color you just sampled. A valuable tip is to reduce the opacity with the slider and to basically adjust it until reaching the desired color hue. Once you find one you like, flatten the image by going Layer> Flatten Image. Again use the eyedropper tool, to change the foreground color square in your toolbox only now it will be the same as your newly created color. Click on the color square and the color picker will come up, and you can make note of the numbers of the color you had just created.
I went through my fonts and settled on Onyx regular. When you find a font that works for you, try playing with the tracking, the leading, and the scale - or a combination. It makes it more personal and unique when you include some tweaks.
To select a font in Photoshop go Window> Character. In the palette you will see a list of the installed fonts. Go to Window> Paragraph to pull up the Paragraph palette you will use to create the adjustments to your fonts
If it's new fonts you're looking for, I've included a list of just a few free font resources you can use at the end of this tutorial.
Create a new document that is 600 x 300 pixels. You can change this size to suit your own design when you pick your own stock photo and plan the layout accordingly.
Now I'll create a new layer, Layer> New Layer and I'll call it Designer Girl. I'll place the illustration on this layer and shrink it to fit. You shrink your graphic by choosing 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. To move the graphic, drag inside the bounding box. Click enter when you're happy with the results.
Now we need a tinted background. I'm going to use the lightest shade of blue.
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 soft background shade and with the graphic placed on the left. It's starting to look like a web page.
Let's say we want to add a thick stroke to the background layer to liven up the design for more interest. Make sure the background layer, Layer 1, is active, and create a copy by going Layer> New> Layer Via Copy. Next double-click next to the layer name; this will bring up the Blending Options in the Layers Style dialog box.
In the Styles options on the left side, select and click on the word Stroke. I changed the settings to Size: 7px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Fill Type: Color for my site and then clicked the color swatch and entered the number of the darker green shade 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. Major Note: pick a color for your text that is darker than your background color!!! Otherwise it will either blend in or you won't be able to see it at all. Do this by going Window> Character. In the Character palette you'll find a color square that you can click on 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.
Now create a new document. The width should be 600 pixels, and the height should be about 12 pixels and fill this with your background color. Next, with the text tool and a dark color, type some periods, like this:........... and position them centered in the file. Adjust the size and the spacing until it looks perfect and 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.
If you are pressed for time, have no fear. For those with a deadline or those who just can't deal with any more Photoshop techniques, there are solutions available. You can purchase ready-made templates from sources like Template Monster that you be used as the foundation to creating Photoshop web pages.
On the front page of Template Monster you'll find a pulldown menu where you can select options and then carry out a search for a template. The templates are reasonably priced and pretty easy to manage in GoLive or Dreamweaver. In the past I've purchased a template solely for the color scheme and the images. On certain projects I found this was less expensive than buying stock photos. Visit Template Monster to see the wide variety of website templates that they offer.
I hope this tutorial will help you create something nice, and I wish your new website a thousand years of good luck!
We'll create a banner and place it in a table that will contain 5 rows and 1 column. The banner will be placed in the top row. The next row will contain the text for your site and any photos you may wish to include. Row 3 will hold a separator, row 4 will be for your text links and a copyright notice, and row 5 will hold a second separator.
For this example we'll name this site My Site. Now we need to find a graphic for the banner. You can find professional level images at sites such as the iStockPhoto galleries and at only $3 or so for most images they are affordable. Free stock photo sites are also available for perfectly good quality images.
Try to incorporate the colors from the graphic into the colors of the banner. You can choose multiple colors but make sure they work well together or create a variation of the same shade from just one color. Here I will create 3 different shades of blue.
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.
With this done, open another new document and in the Background Contents select White and Click OK. With this document open, create a new layer by going Layer> New> Layer. Then go Edit> Fill and select Contents, Use: Foreground Color. This will fill your document with the color you just sampled. A valuable tip is to reduce the opacity with the slider and to basically adjust it until reaching the desired color hue. Once you find one you like, flatten the image by going Layer> Flatten Image. Again use the eyedropper tool, to change the foreground color square in your toolbox only now it will be the same as your newly created color. Click on the color square and the color picker will come up, and you can make note of the numbers of the color you had just created.
I went through my fonts and settled on Onyx regular. When you find a font that works for you, try playing with the tracking, the leading, and the scale - or a combination. It makes it more personal and unique when you include some tweaks.
To select a font in Photoshop go Window> Character. In the palette you will see a list of the installed fonts. Go to Window> Paragraph to pull up the Paragraph palette you will use to create the adjustments to your fonts
If it's new fonts you're looking for, I've included a list of just a few free font resources you can use at the end of this tutorial.
Create a new document that is 600 x 300 pixels. You can change this size to suit your own design when you pick your own stock photo and plan the layout accordingly.
Now I'll create a new layer, Layer> New Layer and I'll call it Designer Girl. I'll place the illustration on this layer and shrink it to fit. You shrink your graphic by choosing 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. To move the graphic, drag inside the bounding box. Click enter when you're happy with the results.
Now we need a tinted background. I'm going to use the lightest shade of blue.
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 soft background shade and with the graphic placed on the left. It's starting to look like a web page.
Let's say we want to add a thick stroke to the background layer to liven up the design for more interest. Make sure the background layer, Layer 1, is active, and create a copy by going Layer> New> Layer Via Copy. Next double-click next to the layer name; this will bring up the Blending Options in the Layers Style dialog box.
In the Styles options on the left side, select and click on the word Stroke. I changed the settings to Size: 7px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Fill Type: Color for my site and then clicked the color swatch and entered the number of the darker green shade 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. Major Note: pick a color for your text that is darker than your background color!!! Otherwise it will either blend in or you won't be able to see it at all. Do this by going Window> Character. In the Character palette you'll find a color square that you can click on 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.
Now create a new document. The width should be 600 pixels, and the height should be about 12 pixels and fill this with your background color. Next, with the text tool and a dark color, type some periods, like this:........... and position them centered in the file. Adjust the size and the spacing until it looks perfect and 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.
If you are pressed for time, have no fear. For those with a deadline or those who just can't deal with any more Photoshop techniques, there are solutions available. You can purchase ready-made templates from sources like Template Monster that you be used as the foundation to creating Photoshop web pages.
On the front page of Template Monster you'll find a pulldown menu where you can select options and then carry out a search for a template. The templates are reasonably priced and pretty easy to manage in GoLive or Dreamweaver. In the past I've purchased a template solely for the color scheme and the images. On certain projects I found this was less expensive than buying stock photos. Visit Template Monster to see the wide variety of website templates that they offer.
I hope this tutorial will help you create something nice, and I wish your new website a thousand years of good luck!
About the Author:
Did you like this article? Interested in learning photoshop fast? Well now you can by getting this free Guide...what are you waiting for?
posted by Marcondes Allen at 10:25 PM
0 Comments:
Post a Comment
<< Home