different color?

Let's group a new layer to

this button layer and then we can go a little
mad.

Make a new layer above the Buttons

Shape layer. Label this Button Colors.

Hover between these layers in your Layers

palette and hold the Alt key. You will see
the little grouping icon as I have to the
right. Click. This groups your layers.

Now whatever you color on this layer will

be contained within your buttons!

Now here's where Janee gets carried off in

a wild fit of creativity!

Fill the Button Colors layer with dark

Fill this Button Colors layer with black blue. Filter > Noise > Add Noise. Filter
and then scribble on some red. > Sketch Reticulation (blue/white for
fore/background colors)
 Website Interface with
Rollovers
Part 3: Making the Rollover
States

Part 2 left us in a dither over which

lovely effect we were going to use for
the buttons. I've opted for the simple
but whimsical rainbow treatment.

Ok, now we have these beeeeautiful

buttons, but we wanna make them glow
when we mouse over them (the
"over" state) and look pressed when they
are clicked (the "down" state). How do we
do that? Let's go!

0. Simplify things a little.

This step is optional, but it explains my

Layers palette's appearance in the next
step. That group of layers which make up
the interface itself can be neatly placed
into a Layer Set to tidy things.

Link all of the interface layers. In the

dropdown to the top right on the Layers
palette, choose New Set from Linked. And
there you are.

1. Duplicate the Buttons layer.

Drag this Buttons layer to the New Layer

icon TWICE. This will make two copies of
the button layer.

Label one of these "down" and one of them

"glow."

We will do the down state using Layer

Styles, keeping our editability intact.

First, though, let's do the "over" state, the

glow!

Turn off visibility for the down and buttons

 Website Interface with
Rollovers
Part 4: Slicing the Interface

What is "slicing," and why do we want

to do it?

Slicing is Photoshop and ImageReady's

quick way to make several separate files
out of one image file. There are several
instances where you would want to do this,
and they mostly involve web or other
interactive media use.

Suppose you are making an image which is

partly a single solid color. The rest of the
image contains lots of color gradation. You The Slice Tool
may then want to save the single color part
of the image as a GIF and part as a JPG.
This can enable you to optimize the
filesize, making your web-load time faster.

You may want to put a sliced image into a

table, enabling parts which are solid color
to just fill an empty table cell. That's what
I did with my main interface design you
see below.

Here's the same image as seen in GoLive.

(The blue indicates where have made "hot
spots" which are linked. The red squares
indicate table cells or parts of cells which
are left empty. Size of these parts of the
 Website Interface with
Rollovers
Part 5: Setting up the
Rollovers in ImageReady

We left our damsel all sliced up and

saved in PSD format in Photoshop.
Now we will go into ImageReady to
make these slices into Rollovers.

1. Jump to ImageReady.

Push that button at the bottom of the

Toolbox and this will open your current file
in ImageReady, Photoshop's get-it-set-for-
the-web application.

2. Have a look around.

If you're like me, and even if you're not,

you probably don't look at ImageReady
every day, so you'll probably need to look a
bit at ImageReady to orient yourself. We
will be working with the following palettes
at this point:

• Layers: Nearly identical to the

Layers palette in PS.
 Website Interface with
Rollovers
Part 6: Saving the interface
for the web

Ok, so at this point, if you've been

following along, our fair maiden is now
sliced and we've taken her to ImageReady.

Now our rollover states are lined up in the

Web Content palette. You should be able to
see what each of your states looks like by
turning on and off the visibility eyes there
and looking at your image.

1. Optimize your slices.

ImageReady enables us to save each of our

slices in a different quality setting. This can
help us in keeping our website lean, by
minimizing the filesize of our less
important images.

For example, in this interface, we might not

care as much about the parts with the
plainer colors, whilst we may want our site
title to be clear and crisp.

Here's how to optimize a slice:

• In ImageReady, Click your first

slice with the Slice Select tool.
• Make your Optimize palette
visible, if it isn't already.
(Window > Optimize)

• Have a look at the options. I

have picked one of the buttons,
and I want a high quality for this
one.

TIP: If you're making a transparent

 Cropping Tips:
a Photoshop Tutorial
When you're making an image
with a drop-shadow or subtle
shading toward the edges, you
want to crop away as much white
as you can, but you don't want to
crop away any of your drop-
shadow. Look at the images below
and to the right. Eww!

Here's a way to be sure you don't

crop too much, but that you do
crop enough:
• Take the Magic Wand
tool and set its
Tolerance to 0 in the
Options Bar.

• Click it in the white area

outside your image.
Click on Color Table in the lower box
and see what colors you are using. In
the little box above where it says
Colors, I've chosen 32. Check the
filesize in the lower left and make that
number smaller. At the same time,
notice what fewer colors does to your
image.

In this image above, since there are a Saving the same image in JPEG, this is the
limited number of colors in use, GIF best i could do with a file size of 3.8K!
format works well and I was able to get Ewww!
a filesize of 3.4K with 8 colors.
So what happens when we try to save
an image like the wedding rings, with
lots of gradations of colors, as a gif?

Even just using 8 colors (shown

below), the file size is 15.9K, nearly as
big as the quality 61 jpeg above, but
 Saving for the Web:
Transparent GIF's

In this continuation of the Saving for

the Web tutorial, I'll discuss making
Transparent GIF's.

Transparent GIF's

Now suppose you want to place this

Supra graphic on a webpage with a
background pattern? Or maybe you are
not sure what sort of background it is
going to be on, but you just don't want
to have a white rectangular
background? This is where
Transparency comes in.
To make a transparent GIF, first, you
take away the background of the image.
If you have done the graphic on a
separate layer, then it will be a simple
matter of turning off the visibility eye
on the background layer.

Otherwise, you may have to select and

delete the background, using other
methods. For more on deleting
backgrounds, see this tutorial. At this
point, your graphic will be on the
checkerboard, as mine is. File > Save
for Web (or Shift-Alt-Ctrl-S) and you
will get the following dialog box:
 Action to Mark
the Canvas Center
Actions are one of the last things that
I've tried to learn in Photoshop. I guess
it is because I have seen them as
basically ways to accomplish the same
effect for several images quickly. But I
don't often do the same thing more than
once, and when i do, i like to do it
differently.

However, actions are good for more

than just special effects! There are
actions you can find or make which
will simplify little chores that you do
often. This is one of them. If you have
never made an action before, or never
used one, or never thought about using
one, stick with me here. You will like
this. This tutorial was written with Photoshop 7. Though it will work
with earlier versions just fine, some screenshots may be
As you work through this tutorial, different. This tutorial will not work with Photoshop Elements,
besides getting a cool and handy little because Elements doesn't have actions built in. Batteries not
action out of it, you will also walk included.
away with some knowledge:

• How to access and work

with your Preferences.
• Another way to use
guidelines
• How to record an action.

• How to use an action.

1. Getting started.

• First off, open some file.

Anything will be fine.
• Find the Actions palette.
Mine is docked in my
palette well on the top bar.
If you don't see yours, click
Window > Actions.
• Surf to the folder where you
want this action. If you need
to make a new folder for it,
click the folder icon at the
bottom of the palette.

• Once you are in the right

Windows - Mac Keyboard shortcut equivalents ...
...in myJanee.com are written for the PC modifier keys (Ctrl, Alt), but if you have a Mac,
take heart! The conversions are easy enough for you to master in short order. To help you
out, I've made this "key."

Windows Mac
Alt Option
Ctrl Command
Right-
Ctrl-click
click
If you want to print it at 200ppi, you can right-click to save it.
Then open it in your image-editor and print it from there!
Janee's Protractor

I made this protractor for you and me to use in the computer to make and
measure angles in Illustrator or Photoshop, for example. Save it (right click,
Save As), then open the file in your application. If you will be using it on an RGB
document, you'll need to convert the protractor to RGB. In Photoshop or
Elements, this is Image > Mode > RGB.

Drag it onto your new document and put your new layers on top of it. The center
of the protractor is the top of the J. :)