Making A Graphic Web Set


You see them all over the net, those web pages with shiny ribbon like backgrounds. Click HERE to see what we will be making. This set can be made in PI5 but without the stamps. You can use any sparkle ufo though.
For the added glitz, John Fletter(Gandalf) has graciously, granted me permission to use his wonderful glint stamps. Download HERE to get these beauties. Thanks John!
1. First we'll make the shine strip. Open a new image, 70 x 250. Choose a color to your liking to fill. I used #F8CC65, use the bucket fill tool to fill the image. Click on Effects/Creative/Painting. Click on tile 41 and use these settings.

Then go to Format/ Dimensions, uncheck keep aspect ratio, then manually bring the strip size down to 40 width and 200 length. Click ok.
2. Next we'll add the shine. Now go to effects, Magic, Magic Lights. Using these settings.

3.Now for the center tile. Open a new image, 100 x 100. Fill with a shade either darker or lighter than the shine strip. I used #A17203. Go to Effects/Creative/Painting. Use same settings as for the shine strip. Now go to format, dimensions. Reduce the 100 x 100 image to 40 x 40. It looks much better smaller. Using this image as our fill for the header, bar and buttons.
4. The header. Open a new image, 450 x 150. Touch the blue bar on your fill image, go to edit/ copy. Touch the blue bar on the header image, go to edit/ fill. Click on the image tab and click clipboard, then ok.

5. Click on the text tool. On attribute bar, find Isabella or the font of your choosing. I have a dark brown color, #422803, size 90 and 3-d. Slide the border down to about 2 or 3. Type in your header image what you want. While it is activated, right click and duplicate. Still using the text tool, click on the first text you made. Go to the attributes bar, click on the material box. Click on the Border/Depth tab. Use these settings, border-2, depth-30 and type of border-out. Click ok. Now touch the duplicate, on attributes, 2-d. Pick any color other than brown for now. Center the duplicate over the first one.

6. While the duplicate is active, open Easy Palette, click on the galleries tab. Scroll to Type Gallery. Click on Gradient-Light, then right click over Gradient Light 3. Click on Modify Properties and apply. When the option box opens, use these settings.

This will be the same settings we will use for the bar and buttons.

7. While the text is active, right click and select all objects. Right click again and group. Now you can move your text any place in the center. Click on the background to deactivate text. For some added glitz, click on the stamp tool. On attributes bar, click on the down arrow for stamp menu. If you haven't added the glint stamp yet, click on add stamp. When your hard drive opens, find the folder you saved your stamp in and click on it. Using the glint stamp at 100%, place some glints here and there. Making some smaller for special effects. Take a close look and don't over-do. Using the crop tool, make your selection around all the text and glints. Then click crop on attributes bar. Click on Web/ Image Optimizer, save as jpg in a folder you made for the graphics. Since we haven't merged the header graphic, go to file and save as a ufo in the same folder. Always save ufo's in same folder as the graphic set your making. It keeps your text and color information for later editing or just to make extra buttons. Now is a good time to save your shine strip and filler graphic too.

8. Now we'll create the bar. Open a new image, 400 x 100. Touch top of fill texture and go to edit/copy. Touch blue bar of new image, go to edit/ fill. Fill as before. Pick the path tool/outline drawing tool. On attributes, shape/ellipse. color and mode don't matter. Width, 3 or 4 and solid line. Draw a nice ellipse. If you made it to big or small, use the transform tool to resize.. Go to Type Gallery in easy palette as before. Right click over gradient light 3 to modify. Apply same settings as for header. Add the glints and crop off excess, then save.

9.Basically, the button will be very similar. Open a new image, 160 x 120. Fill with the texture and using the Outline drawing tool again, make a nice ellipse in the center. Apply the Type Gallery effect again, same settings as above. Add some stamp glints around the sides of button. Click on text tool, using same dark color brown, only size 30, 2-d. Add some text to the button. Using the crop tool, crop off excess. With the pick tool, click on background to deactivate text. Save this button. With the pick tool, click on the text, right click and click on edit text. When box opens, change text to another button, like Links or what ever. Click ok. Deactivate text and save this button. Repeat editing text till you have all the buttons you'll need. For 2 lines, make text smaller and use text tool twice. You can space text better that way. Now save this button as a ufo under file.

10. How about a bullet. Open a new image size 100 x 100. Fill with texture, using the path drawing tool, shape diamond, color and mode don't matter, draw a small diamond in center of 100 x 100 image. Use the Type Gallery, Gradient Light 3 again and the same settings as above. If it needs to be cropped, do that now. Save your bullet.


Now all your components are made for the web page. You can check my source for the layout to make your own html page. I can't wait to see all the pretty sparkle pages. Now that wasn't too bad, was it?
Have fun creating....

E-Mail

[ Home ] [ Graphic Index ]

This site is maintained and copyrighted by:
Dawn Reber 2001