By Sagas aka Photoimpactor
Hello. This is what we are going to achieve in a few (well, 24) easy steps. Nice, heh?
(English is not my native language, for I am French, so please excuse any error, thank you)
1.First, open a new web page (800 by 650 pixels)
2.Using the path tool, draw a squared rectangle of 750 by 600 pixels. Set the roundness to 15 in the tool settings. Lets call this shape main Open the layer manager and rename it by double-clicking on its name. (I think this is a good idea to name every object you add before drawing a new one).
3.Our main shape needs a shadow with these settings. Nothing complicated:
4.Now draw another squared rectangle of about 720 by 130 pixels. Name it headerbase Place it at a distance of 20 pixels from the top limit of the main base.
5.Create another squared rectangle: this will be our navbar (720 x 38 pixels)
6.Draw three more squared rectangles: a left box?(163 x 194), a second one which is a copy of the first one (163 x 194), and a centerbox?(365 x 400).
7.Draw a rectangle and name it rightbox ( 172 x 460). This one is under the navbar shape. (Select navbar shape and hit ctr+alt+ up arrow). All shapes have the same shadow settings than the main shape.
8.Leave enough space between your shapes (between 5 and 10 pixels would be good) and align them as needed. (object>align)
You should have something like this:
9.Notice that our navbar is filled with a two colours vertical blue gradient. (edit>fill>gradient). I used a dark blue (#0E447B) and a clear one ( #678DE9). You can add it to the easy palette.
10.Select the "main" shape, then use the selection tool, and make a rectangular selection of the top of it (752 x 57 pixels) like this:
11.Convert your selection into an object, (hit ctr+shift+O) fill it with our famous blue gradient and make a copy of it:
12.Bring the headerbase on the front by hitting ctrl+alt+up arrow.
13.Take a small pause; this is going to be really serious now. Well I will have coffee too, thank you very much.
Part 2 : a nice shiny header with a nice assorted navbar
14. Still there ? All right, we are going to make a nice header. Select the headerbase shape, make a copy of it, move it down a little and name it glassy one Fill the headerbase shape with any photo you like. I used one of these win XP wallpaper with the green mountains.
15.Select your glassy shape, right-click and edit its path. Delete the two points on the bottom and arrange your shape until you have this:
16. Exit the toggle mode, fill your new nice shape with white (and make sure to disable its shadow), then apply a vertical fade-out and move it to the top of your header. I used the standard settings of the fade-out menu (edit>fade-out>vertical arrow, white on top, black on bottom).
This is one of my favourite effects. It works well with very contrasted or darker photos/images.
17. We will use the same effect on the navbar but this time with a slightly different method. We will make a selection out of the navbar, convert it into an object, fill it with white and apply the same vertical fade-out. You can add 20% transparency to the glassy2 reflect.
18. Now lets juggle with fonts, shall we? Using the text tool, type any words you like, the name of your site, for example. I choose to work with this font: eras bold ITC, and a size of 62, with a white border of 4 pixels. Guess what: I filled my text with our famous blue gradient. Who said that was recycling?
19. We will always use this font effect for titles and subtitles. I used it for the green slogan as well but with a small border.
Lets put a little shine on this website text. Make a copy of it, fill it with white, make an elliptical selection of the bottom of the text and hit delete.
20. Put your new object above the website text and apply fade-out. That¡¦s it, we have our title. Just insert a nice big icon or any clipart you like on the left of the text and your header is ready to go.
( well, if you look better on the final result, there is another piece of text hiding behind the main text ; well, it is a secret, I just copied the website text, removed border and shadow, filled it with white and tada !!! put the text in overlay mode in the layer manager, but don¡¦t tell anyone, okay ?)
20. Now back to work. Using the same font, I made my menu : a nice effect is to add an icon to the left (or right, or wherever you want) of each link. Once you have all your icons/clip arts added, just group one icon and the corresponding text. In my example I have five groups. This is just to align them and space them evenly in an horizontal way.
Part 3: finishing the page
2. We have done the most difficult. We just have to add subtitles in our content boxes
23. What else to be done? You might want to add an image under the Welcome to my site title. Simple: another squared rectangle filled like the header with a light blue border. Same glassy look with fade-out effect as always.
24. Just put your text and your page is finished. For this part, I don't use Photoimpact anymore but a web editor (like Dreamweaver). Sometimes a page with text generated in Photoimpact is a complete mess when seen in Firefox.
Well, that was a little long but cool, heh? I hope so.
Here is a better view of the final result you can expect:
Thank you very much for your attention.
Wes.
