Gadgetpedia.net

Don’t let what you might not be overly familiar with such as slices and Javascript rollovers keep you away from creating a web site that will not only support all of your needs, but that you will be proud of at the same time. The following is a Photoshop web tutorial that will help you on your way to this goal by starting out with a simple 2 graphic web page design. Let’s Begin

First, lets make a banner and place it in a table containing 5 rows and 1 column. We will place the banner in the top row. The text for your site and any photos you might like to include will be in the next row. Row 3 will contain a separator, row 4 will be set 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.

The colors of the banner and the website will be taken from the various pinks used in the image. There are 3 pinks I want to use - a dark pink, a middle pink, and a lighter pink that I made myself from a shade of the darker pink.

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.

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.

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

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.

Next we want a tinted background. I’m going to go with the light pink.

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

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 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. Major Note: pick a color for your text that is darker than your background color!!! Otherwise it will either blend in or you won’t be able to see it at all. Do this by going Window> Character. In the Character palette you’ll find a color square that you can click on 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.

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

Last 5 posts by David Peters

• Which Should You Choose Photoshop CS4 Or Photoshop CS64? - November 20th, 2008
• How You Can Use Photoshop to Make Your Photos Look Great - November 14th, 2008
• How to Use Photoshop to Restore Old Photos - November 7th, 2008
• Turning Your Photographs into a Work of Art - November 7th, 2008
• Share your Photos - November 6th, 2008

Related posts

• Free Photoshop Tutorials - Understanding photoshop
• Photoshop Software…Get More Done with Photoshop
• Working With Photoshop Blending Modes
• Basic Photoshop Tutorial
• Easy step by step processes for Photoshop