Web Site Creation Tutorial with Photoshop Web Template

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 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.

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.

By using the opacity slider on a sampled hue you can create a nice variation. Open a new document and copy and paste the main graphic you've selected into it. From the toolbox select the eyedropper tool and sample a color by clicking on it in your graphic. Doing this will change the foreground color square in your toolbox.

Now open another new document and in the Background Contents select White. 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. The trick here is to lower the opacity using the slider and to keep playing around with it until you find a nice shade. When you settle on one, flatten the image by going Layer> Flatten Image. Use the eyedropper tool again, this time to change the foreground color square in your toolbox so it is the same as your newly created color. Now click on the color square and the color picker will come up, and you can write down the numbers of your new color.

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 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 you are looking for new fonts, you have many options. Free font resources are available to you online.

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.

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.

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. 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 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.

To automate this process you will need an HTML editor like GoLive or Dreamweaver. This is a simple thing to do. You create little "maps" over each word and then enter the link destination. You can do am image map search on Google to find a tutorial if you don't have an HTML editor, or check out your local bookstore for help like Castro's HTML Quickstart Guide.

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 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!

Article Source: http://www.indexed-articles.com

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

Please Rate this Article

5 out of 54 out of 53 out of 52 out of 51 out of 5 

Not yet Rated