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
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 tutorial, let's call our site just that "Our Site." Now to find a graphic for the banner we're creating. There are plenty of good images to be found at several of the free stock photo sites and for only a small fee, you can find top quality, professional images on some of the online galleries. Try the iStockPhoto gallery for beautiful illustrations or photos that at only a few dollars can add quite an upgrade to the presentation of your site design.
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.
By using the opacity slider on a sampled color you can create a nice variation. To sample a color, let's copy and paste the main graphic you have chosen into a new document. Select the eyedropper tool from the toolbox and sample a color by clicking on the one you might like in your graphic. Doing this will change the foreground color in the 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.
Scroll through your fonts and decide on one. For this tutorial we'll use Onyx regular. Once you pick a font that suits your needs, play around with the tracking, the leading, and the scale, or a combination. This makes it more unique when some personality is added.
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.
If you are looking for new fonts, you have many options. Free font resources are available to you online.
For our example, create a new document that is 600 x 300 pixels. You can adjust this size according to your own design when you choose your own stock photo and plan the layout.
Next create a new layer, Layer> New Layer. We'll call ours "Web Artist" here. I will place the illustration on this layer and shrink it to fit. 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. Once you have it to your liking, click Enter.
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. It's finally starting to look like a real web page now.
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.
Pick and click on the word Stroke in the Styles options on the left side. I changed my settings to Size: 7px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Fill Type: Color, and I clicked the color swatch and entered my color number into the color picker and clicked OK.
The border is just to balance out the design. Feel free to make changes and get creative with your own ideas.
Let's place the names of the major sections directly on the banner. These will be the website links. We will be using image maps since it will be only one graphic.
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. It's really very simple. You make little "maps" over each word and then enter the link destination. If you don't have an HTML editor you'll need to do a Google search on image maps to find a tutorial, or buy a book like Elizabeth Castro's HTML Quickstart Guide to help you out.
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 build a simple table that contains 5 rows and 1 column. If you're going to use text link navigation below the banner instead of image maps on the banner, create an extra row so you end up with 6 rows in your table. Now place your elements into the individual rows of the table and you're done.
If you are on deadline and can't cope with learning any more Photoshop techniques or HTML, here's another solution. You can buy a ready-made template from Template Monster that you can use as a base 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!
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 tutorial, let's call our site just that "Our Site." Now to find a graphic for the banner we're creating. There are plenty of good images to be found at several of the free stock photo sites and for only a small fee, you can find top quality, professional images on some of the online galleries. Try the iStockPhoto gallery for beautiful illustrations or photos that at only a few dollars can add quite an upgrade to the presentation of your site design.
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.
By using the opacity slider on a sampled color you can create a nice variation. To sample a color, let's copy and paste the main graphic you have chosen into a new document. Select the eyedropper tool from the toolbox and sample a color by clicking on the one you might like in your graphic. Doing this will change the foreground color in the 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.
Scroll through your fonts and decide on one. For this tutorial we'll use Onyx regular. Once you pick a font that suits your needs, play around with the tracking, the leading, and the scale, or a combination. This makes it more unique when some personality is added.
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.
If you are looking for new fonts, you have many options. Free font resources are available to you online.
For our example, create a new document that is 600 x 300 pixels. You can adjust this size according to your own design when you choose your own stock photo and plan the layout.
Next create a new layer, Layer> New Layer. We'll call ours "Web Artist" here. I will place the illustration on this layer and shrink it to fit. 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. Once you have it to your liking, click Enter.
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. It's finally starting to look like a real web page now.
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.
Pick and click on the word Stroke in the Styles options on the left side. I changed my settings to Size: 7px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Fill Type: Color, and I clicked the color swatch and entered my color number into the color picker and clicked OK.
The border is just to balance out the design. Feel free to make changes and get creative with your own ideas.
Let's place the names of the major sections directly on the banner. These will be the website links. We will be using image maps since it will be only one graphic.
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. It's really very simple. You make little "maps" over each word and then enter the link destination. If you don't have an HTML editor you'll need to do a Google search on image maps to find a tutorial, or buy a book like Elizabeth Castro's HTML Quickstart Guide to help you out.
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 build a simple table that contains 5 rows and 1 column. If you're going to use text link navigation below the banner instead of image maps on the banner, create an extra row so you end up with 6 rows in your table. Now place your elements into the individual rows of the table and you're done.
If you are on deadline and can't cope with learning any more Photoshop techniques or HTML, here's another solution. You can buy a ready-made template from Template Monster that you can use as a base 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 reading this free Guide...what are you waiting for?
