owl banner no antialias boldNo antialias, bold text
owl banner 2 no antialias no boldNo antialias, standard text, no bold
owl banner 3 antialiasAntialias, standard text, no bold
owl button JPG formatButton 1 is a JPG on a white background, created with selections and an Inner Bevel effect.
Rollover on the button.
owl button  GIF formatButton 2 is a transparent GIF. It has a dithering problem.
No rollover on the button.
CrowMan button  GIF formatCrowMan is a Buttonized GIF, not real fancy.
Rollover on the button.
CrowMan button GIF format CrowMan button JPG formatThese CrowMan buttons have a Gradient and Hotwax affect. The first is a GIF and has a dithering problem. The second is a JPG.
No rollover on the buttons.
redCrowMan button JPG format redCrowMan button GIF formatThe Red CrowMan buttons have a Rectangular Gradient with a Gaussian Blur effect. The first is a JPG. The second is a GIF, whose dithering does not bother me too much.
Rollover on the buttons.
The Banner
  1. I cut the owl image out using the Selection Tool and the Magic Wand. The white on it is transparent. There is a slight drop shadow on the owl.
  2. Had to use zoom view and the eraser to clean up some pixels on the image and I added to the eyes with the paintbrush.
  3. The solid red part of the banner is 400 pixels wide and 60 pixels high.
  4. There is a very slim black border.
  5. The text tool was used to create the wording on the banner, Antialias was NOT checked, the font is Cooper Black. A light drop shadow was applied.
  6. I Buttonized the banner at height 5, width 4 and opacity at 100.
  7. The drop shadow on everything is grey set to vertical 3, horizontal 4, opacity 30 and blur 9.4.
  8. On export, no compression was done to the images because it degraded them too much.
I tried out three different techniques for the text on the banner, changing settings for Antialias, Bold and Standard Text. I am still leaning towards the no Antialias look of Banner 1 and 2 JUST because the slightly jagged look seems to match the feathered-jagged look of the owl. Then again, the Antialias smoother look of Banner 3 is nice and maybe even accents the ragged look of the owl. Anybody want to give me an opinion?


The Buttons
  1. The Owl Buttons where done by cutting out another owl image using the crop tool.
  2. The button not including all of the owl is 100 x 35 pixels.
  3. The actual button was created by following some of the technique listed for figure 4.11. I used the Selection tool to create a rounded rectangle, then subtract another rounded rectangle from inside the first. Add an Inner Bevel effect and then add the owl which was also altered with an Inner Bevel.
  4. I used the eraser and the paint brush to clean up and accentuate the owl around the eyes prior to applying the Inner Bevel.
  5. The text is done without Antialias and the font is Arial Rounded MT Bold 12pt.

  1. The bright red CrowMan button was made by creating a transparent selection of the crow and putting it on a 100 x 35 pixel red background.
  2. The font for the text, not antialias, is Arial Rounded MT Bold 12pt.
  3. Then the the image was Buttonized with the settings of height 2, width 4, opacity 58.

  1. The darker CrowMan buttons were made by taking the bright crowman button and removing the text.
  2. A rectangular selection was made behind the crow image and filled with a Gradient made up of the foreground and background (red and black) that runs from left to right.
  3. Then I applied a Hotwax effect to the Gradient selection.
  4. Finally the text was added.

  1. The Red CrowMan buttons were made starting from scratch.
  2. The button is 100 x 35 pixels flood filled with red.
  3. A rounded rectangular selection was made in the middle and filled with a Rectangular Gradient made up of the foreground (yellow) and background (red) colors.
  4. Then I applied the Gaussian Blur effect.
  5. Finally the white text was added.


Week 3 Review Questions & Answers







Valid XHTML 1.0!