Site Design Tutorial For Adobe Photoshop Web Templates

Many people new to web design are confused by slices and Javascript rollovers and end up abandoning their projects out of frustration. The point of this web Adobe Photoshop tutorial is to keep things simple by creating a web page that uses 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.

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.

I went through my fonts and settled on Onyx regular. When you find a font that works for you, try playing with the tracking, the leading, and the scale - or a combination. It makes it more personal and unique when you include some tweaks.

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 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 Adobe Photoshop tutorial.

Create a new document that is 600 x 300 pixels. You can change this size to suit your own design when you pick your own stock photo and plan the layout accordingly.

Now lets make a new layer by Layer- New Layer and call it Designer Pro. I’ll position the image on this layer and shrink it to fit. You shrink your graphic with 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. Drag inside the bounding box to move the graphic. Once it is to your liking, click OK.

Let’s go with a tinted background. Here we will go with a light green.

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 gentle background color and with the art placed on the left. We’re getting there.

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.

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.

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 Adobe Photoshop 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 with a width of 600 pixels, and a height of 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. 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.

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.

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 Tutorial For Adobe Photoshop will help you create something nice, and I wish your new website a thousand years of good luck!

how to use photoshop