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 Photoshop web tutorial is to keep things simple by creating a web page that uses only 2 graphics.
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 example we'll name this site My Site. Now we need to find a graphic for the banner. You can find professional level images at sites such as the iStockPhoto galleries and at only $3 or so for most images they are affordable. Free stock photo sites are also available for perfectly good quality images.
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 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 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.
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.
Looking for new fonts? At the end of this tutorial you'll find a list to some free font resources.
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 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.
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'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.
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. 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 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.
With 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. Place your elements into the individual rows of the table and that's it!
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 Template Monster you will find a pulldown menu on the front page where you can pick options or features and then carry out a search for a template. The templates are reasonably priced and fairly simple to handle in GoLive or Dreamweaver. There have been times that I have acquired a template just for the images and color scheme. This has proven to be less costly than using stock photos with a fee. Take a look at Template Monster to explore the huge variety of web templates they have available.
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:
Interested in getting professionally made Learn Photoshop Tips Read this FREE 179 page How To Photoshop Tutorial.
No comments:
Post a Comment