Aug
27
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.
One tip is to choose one color from your graphic and utilize various shades of this color for your banner for a clean, coordinating look. For the sake of naming a color for this example, we’ll go with green in a dark, medium and then light shade.
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.
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.
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.
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.
Now we need a tinted background. I’m going to use the lightest shade of blue.
Select the background layer, Layer 1, and fill it with the light blue by going Select> All, then Edit> Fill, and in the dialog box in Contents, select Use: Color and in the Color Picker I enter the number you made note of 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 is just to balance out the design, so by all means make changes and get creative with your own ideas.
We’re going to put the names of the major sections right 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.
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 tutorial will help you create something nice, and I wish your new website a thousand years of good luck!
Last articles for
- Photo Software for Your Digital Images - August 27th, 2008
- Restore Old Photos Using Photoshop - August 27th, 2008
- Batch Processing with Photoshop - August 25th, 2008
- Editing Software for Digital Photos - August 7th, 2008
- Understanding Photoshop's Color Modes - August 2nd, 2008
- Improving Photographs - July 31st, 2008
- Text Shaping in Photoshop - July 29th, 2008
- Perfect Composition with Cropping - July 29th, 2008
- Digital Imaging Editing Software - July 29th, 2008
- Stop Drinking Alcohol - One Step From Recovery - July 29th, 2008
Article Tags: Internet & Computers
Category: Internet & Computers
Author/submiter:
Do more:
Print This Post
Email This Post
Leave a Reply
You must be logged in to post a comment.