Home » Internet

Web Site Creation Tutorial with Photoshop Web Template

Jun 19, 2008
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.

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

Go Window> Character in Photoshop to choose a font. You will see a list of your installed fonts in the palette. To fine tune the settings, pull up the Paragraph palette 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.

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.

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

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

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.

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.

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.

Hopefully this tutorial will help you create something wonderful that will take your new website in the direction you aimed for. Good Luck
About the Author
Did you like this article? Curious about learning photoshop fast? Well now you can by getting this free report...what are you waiting for?
Please Rate:
(Average: Not rated)
Views: 331
Print Email Share
Article Categories