|
 Download
The KROW's 'Ready, Set, PAINT' Lessons 1-4 in PDF format here
(470k)
Ready,
Set PAINT! - Lesson 4 (week 4)
Having
heard you're moving right along with your graphics, Mr. Bigexec
is anxiously awaiting to see everything put together for his
web site. (He's proven this by calling you 9 times a day,
asking when his stuff will be done. Of which a good response
might be "The more I'm on the phone, the less I am working."
But you're probably better off just asking him if he's added
anything to his dog's bandana collection.)
For
Once It's Great To Push Someone's Buttons!
For the first time in history, it's good business practice
to "push someone's buttons"! But, before you go badgering
the boss, let's clarify exactly what buttons we're talking
about! That is, buttons for a web site! Buttons are simply
links or graphical representations of a "connector" of some
sort (ie: a "Submit" button).
Buttons
are not a "requirement" on a web site. You could simply place
text-links on a site for your navigation and it would work
just as well. But, for many, a web site just doesn't seem
complete without that added "touch" (no pun intended....well
ok....maybe it was).
We
all know buttons come in every shape, size and color. With
so many choices, what type buttons would be best for Mr. Bigexec's
web site? Buttons which ENHANCE rather than inhibit the rest
of the site, right? RIGHT! So, with that in mind, let's get
to creating our buttons!
Rodents
Make A Change!
Most
every web site now has some type link or button which "changes"
when you put your mouse (cursor) over it. For instance, the
buttons here at the top of the coolmaps page. You move your
mouse over the buttons and they change! Too cool! Here's a
simple example:
Move
your mouse back and forth over the circle and watch it change!
(Who ever said mice weren't good for anything?)
The
trick? That one button is actually more than one image. Each
time a button changes from it's original state, it requires
another graphic of some sort. (Also, thanks NetObjects Fusion
Site Styles, the "special" coding required for this is done
for us! Whew!). Knowing this, we can now get in and make 4
different buttons for Mr. Bigexec. These 4 buttons will be:
- Regular
- Highlighted
- Regular
Rollover
- Highlighted
Rollover
Open
your PSP and create a new image 200x200 pixels. RIGHT
click the "Background" layer and click "Promote To Layer".
 Next,
get your selection tool and set it to:
- Rounded
Rectangle
- No
Feather
- No
Antialias
Now
draw a rectangle on the page which is 100 wide and 25 pixels
high.
 Flood
Fill the new selection with white. From the menu choose "Image",
then "Effects", and then "Texture". Your "Texture" should
still be set the same as you used for the logo. If not, get
the configs here. (Your selection
should be about 4 "tiles" high).
Next,
create a new layer. Then, from the menu, choose "Selections"
then "Select None".
 Choose
"light blue" from your color chart and then get the "Preset
Shapes" tool set to:
- Shape
Type: Rounded Rectangle
- Style:
Stroked
- Line
Width: 6
- Antialiased:
checked
- Vector:
none
Starting
just outside the top left corner of the "tiles" draw a rectangle
around the tiles, like this:
[
to previous lesson ][ next
step ]
[
to top of page ]
|
