Developing A Design
- With your prepared image opened, you will need to resize the image to your tastes. The plan is to have this image take up a large portion of the left side above our menu area like in the greyscale image above. I've resized my image to have a height of 375 pixels, that way the top of the menu will be easily seen without scrolling in an 800x600 screen resolution.
- Now it is time to increase the size of the canvas. Typically, I design table layouts so that in 800x600 resolution there will not be any horizontal scrollbars. Since a scrollbar typically takes up 16 to 20 pixels of the screen depending on user settings, you will want to make sure that the canvas is no wider than 780 pixels!
Select Image > Canvas Size to change the settings. I'm going to make my canvas 750 by 500 pixels in size. Be sure that centering options are not selected, and that both top and left values are set to 0.
- Now that you have increased your canvas size, you may need to fill the new area with white. Use the magic wand to select the area, and use the Flood Fill tool to colour it in.
- You will want to designate where your menu and content areas are now. You can use simple shapes to set boundaries. Click on the Preset Shapes icon on your side tool palette. (It looks like a blue square with a red oval on top.) We will use the Tool Options and the Colour Palette to create the perfect style.
Tool Options Settings- First, choose the Rectangle shape from the list.
- Be sure that Retain Style is not selected. This will make it so that the rectangle we make will use the foreground and background colours rather than the black and white that is shown in the shape list.
- Uncheck Antialias. Normally, Antialias will smooth edge edges of curves, but since we are using perfectly straight edges, all this does is create a fuzzy looking line. We don't need it.
- Be sure that Create As Vector is chosen! This will allow you to edit the shape later without it losing any quality.
- For line width, choose whatever you would like. I chose 1 for a really elegant look, but you can use whatever you would like!
- Choose #1 Solid as your line style. This is by far the easiest to work with because it's easy to line up backgrounds later.
- The foreground colour will be used for the stroke (aka outline) of the shape. choose a dark hue. Use a solid! No patterns, no gradients, and definitely not null! Be sure they are set to solid with the little black arrow.
- The background colour will be used for the fill of the shape.
- Don't use textures. They just make things more complicated, and for a beginner tutorial, you don't want to get involved in such an aggravating task for the backgrounds later. Seriously now. Be sure they are set to null with the little black arrow.
- Now that you've chosen your shape settings, click on the canvas and drag out a rectangular shape below your subject, making sure that you drag past the edge of the canvas so that the bottom of the rectangle is cut off.
Now isn't that lovely? I've covered the raw edge of my character so the edge looks super smooth. Create a second shape beside her for the main area. You may want to choose a different fill/background colour.
- This is simple but effective. But...the lines are so structured and well, kind of boring! Gasp! Let's add some more rectangles to give this layout some pizazz! Create a new vector layer by choosing Layers > New Vector Layer. Press okay. This is a simple, two step process to create an interesting look. Click and
drag out two new shapes overlapping your first set of shapes like in the following example:
That may be interesting enough for you, but why not go a step farther by using a layer blend mode? On the layer palette, alter some of the opacity percentages and blend modes! I've set my layer that contains my second set of shapes to 91% and Hard Light.
With these settings, was able to get this polished look!
- Now that the basic structure is done, you will probably want to add the name of your site to the top of the design. Using the Text tool, add text to the area above your main content box. You may want to have the text overlap the top of the central image. It's all personal preference, really. Have fun with your text placement!
- Now is the time that you can add your own personal touches with brushes and effects. This is really the most creative and fun part! Honestly, I can't really instruct well with this step, because there are a limitless amount of things you can do to really make your design different from every other site out there! But here's a little something to get your creativity flowing.
I've decided to dress up the design with some fun brushes. [Spiral brush from Brushes by Pange ^_~]- Create a new layer by choosing Layers > Create New Raster Layer.
- Using the layer palette, drag the layer beneath your two shape vector layers.
- Using the airbrush (with custom brushes, or those included with PSP), stamp on some fun designs in a matching colour of your choice. Be careful! You want the edges of your design to remain fading to white! If you must, run over the edges with a soft eraser brush to make sure that you do not overdo it.
Now we use layer blend modes to tone down the intensity and downright obtrusiveness of the brushes. I decided to use a 100% opacity with an Overlay blend mode, then duplicated the layer, and used a 31% opacity with a Multiply blend mode to darken it.
Can you believe it? The designing is over and done with! Now it's on to the slicing stage!
[ back ]
