Open Source
 opensource-title.gif
  1. Create a new image in Fireworks. (400x150) (File 1.1)
  2. Set the background color to #EFEFAF.
  3. Set the background color to #000000.
  4. Place text on image (text: Open Source, face: Century Gothic, size: 70). (Figure 1.1)
  5. Gaussian blur of 1.5 px.
  6. Set palette to exact.
  7. Trim canvas.
  8. Export as GIF. (Figure 1.2)
nav-bottom-*.gif
  1. Create a new image in Fireworks. (459x60) (File 2.1)
  2. Create a new image in Photoshop. (75x40)
  3. Set the background color to #EFEFAF.
  4. Set the foreground color to #990000.
  5. Select entire image minus five pixel border on all sides.
  6. Apply Eye Candy drop shadow on selected area. (Figure 2.1)
  7. Copy resulting image into Fireworks image.
  8. Duplicate selected area five more times across image. (Figure 2.2)
  9. Create text for each button (face: Verdana, size: 15, color: #EFEFAF). (Figure 2.3)
  10. Save image as the base for the toolbar.
  11. Remove button back, make text black, and save as the toolbar for that section. (Figure 2.4)
  12. Repeat for all sections.
  13. Create hot-spots for all buttons and edit the HREF of the link.
  14. Export HTML, polish it up, and insert into pages.
nav-left-*.gif
  1. Create a new image (150x301) in Photoshop.
  2. Set the background color to #EFEFAF.
  3. Apply Eye Candy innver bevel on entire image.
  4. Fill center with #990000. (Figure 3.1)
  5. Open graphic in Fireworks. (File 3.1)
  6. Create button.
    1. Create ellipse (28x140).
    2. Up color set to #EFEFAF.
    3. Over color set to #FFCCCC.
    4. Down color set to #CCCC00.
  7. Paste button ten times on image.
  8. Create labels for buttons (face: Century Gothic, size: 20).
  9. Center labels and buttons. (Figure 3.2)
  10. Set URLs for hotspots on buttons.
  11. Export GIF & HTML. (Figure 3.3)
  12. Put javascript in a seperate file and include from each HTML page.
  13. Paste HTML into each page and tweak for which page it's on.
perensraymond.jpg
  1. Open raymond.jpg in Photoshop. (Figure 4.1)
  2. Crop head.
  3. Use magic wand to select everything except head.
  4. Find tune selection with magic wand and magnifying glass.
  5. Clear selected areas. (Figure 4.2)
  6. Repeat with perens.jpg. (Figure 4.3) (Figure 4.4)
  7. Create new image (300x300) in Photoshop. (File 4.1)
  8. Set background color to #EFEFAF.
  9. Paste both heads onto new image and position.
  10. Create text below heads (face: Century Gothic, size: 18).
  11. Trim image.
  12. Save as JPG with compression of 7. (Figure 4.5)
collage.gif
  1. Open sendmail.tif in Photoshop. (File 5.1)
  2. Open mysql.tif in Photoshop. (File 5.2)
  3. Open mandrake.tif in Photoshop. (File 5.3)
  4. Open apache.gif in Photoshop. (File 5.4)
  5. Use magic wand to give each a transparent background.
  6. Create new image (300x300) in Photoshop. (File 5.5)
  7. Set background color to #EFEFAF.
  8. Select each of the four images and paste into the new image.
  9. Position images on canvas.
  10. Set layering to give appearance of one on top of another.
  11. Export as GIF with adaptive palette. (Figure 5.1)
Navbar Bottom