ArticleZones.com » Internet » Photoshop Web Template - Web Site Design Tutorial
View PDF | Print View
Article By: DavidPeters
Total views: 4
Word Count: 1341
Photoshop Web Template - Web Site Design Tutorial
Start off by creating a banner and place it in the top row of a table that will contain 5rows and 1 column. The next row of the table will hold the text for your site along with photos you would like to incorporate into your site. Row 3 will hold a separator, row 4 will contain text links plus a copyright notice, ending with row 5 being 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.
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 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 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
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.
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.
I select the background layer, Layer 1, and I fill it with the light pink by going Select> All, then Edit> Fill, and in the dialog box in Contents, I select Use: Color and in the Color Picker I enter FBE0EC.
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.
I decided to apply a thick stroke to the background layer to make the design more interesting. First 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.
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 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 the text. Use the type tool to make the section names and use the move tool to place them right where you want them on the banner. Choose a color for your text that is darker than your background color. 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.
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 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.
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.
The first page of Template Monster will have a pulldown menu where you can select features and then perform a search for a template. The templates are not only affordable, but pretty simple to manage in GoLive or Dreamweaver. In the past I've bought a template just for the color scheme and the images. With certain projects this has proven to be less expensive than buying stock photos. Check out Template Monster to see the large variety of website templates that they have.
I hope this has helped you in your web design needs. Whatever your goal, having the right web page can help you reach it!
Article Source: ArticleZones.com
About the Author
Did you enjoy this article? Curious about learning photoshop fast? Well now you can by getting this free Guide...what are you waiting for?
Comments
No comments posted.Add Comment
You do not have permission to comment. If you log in, you will be able to comment.More articles in this Category
1. Article Marketing - Establish your own Home Based Business.2. 7 Killer Internet Marketing Tools
3. Ways To Cancel An Ebay Auction Early
4. How to Use List Building Software
5. Auction- Closer to the Perfect Bidding!