Navbar

Naming your files
Photoshop: Creating your logo
Photoshop: Adding your name
Photoshop: Choosing your color scheme
Photoshop: Painting the color layer for your navbar
Photoshop: Selecting your logo color
The psychology of color
Photoshop: Creating the main navigation
Photoshop: Duplicating layers to create rollovers
Photoshop: Creating the rollover effect
Photoshop: Drawing the guidelines
ImageReady: Slicing the navbar
ImageReady: Naming your slices
ImageReady: Creating JavaScript rollovers

Interface and navigation
Interface refers to how your Web pages look and how they work and interact with the viewer. Designing the interface is fun and creative. The interface design will make your site visually appealing (or ugly) and enjoyable (or irritable) to move around in.

Interface and navigation go hand in hand. When people say “The interface is great,” they generally mean your site is easy to navigate. When they say “It’s easy to navigate,” they like the interface.

Clear navigation helps on every page
• Clear, consistent icons and logos aid navigation and give your site a graphic identity
• Graphic- or text-based overviews or summaries quickly tell viewers what they’re seeing
• Easy return to your home page and other major navigation points in the site
• Quick access—viewers want to find info with the fewest possible clicks
• Bandwidth speed—most viewers don’t want to wait more than ten seconds

Simplicity and consistency
• Keep navbar, typography, and location of elements on a page simple, familiar, and logical
• Consistent design of titles, subheads, captions, links, and so forth
• Integrity—use the same high editorial and design standards as with print
• Stability—make sure all links work (and keep working)

Alt tags (alternate messages)
• For disabled viewers without graphics capabilities
• blind users use synthesized speech to hear alternate messages you supply so they don’t miss the content of your pictures and graphic navbar

Important! Every Web page needs:
1. An informative title
2. The creator’s identity (author or institution)
3. A creation or revision date
4. At least one link to home page

Bad navigation is one of the main reasons that people become frustrated with a Web site and leave. So . . . what does bad navigation mean?
• broken links
• missing pages
• too few or too many levels of information
• unlabeled icons
• too many or two few icons
• long scrolling pages without a Back to top link

Naming your files
• Use lowercase letters
• Use only letters or numbers—no funny characters except tilde (~), underscore (_), hyphen (-) or period (.)
• Never put a space in a file name
• Keep file names as short as possible

Photoshop: Creating your logo

Open Photoshop
File>New
Name: interface_1 (all lowercase; no spaces)
Width: 800 pixels
Height: 120 pixels
Resolution: 72 pixels/inch
Mode: RGB Color
Contents: White
OK

Photoshop: Adding your name

Click on the T (Type tool) in toolbox
Type in your first name
Use the Move tool (top right in toolbox) to position your name
Return to the T (Type tool) and type in your last name
Note: If you’re not planning to move your first and last name around, you can put both in one layer

If your Layers palette isn’t visible, go to Window>Layers
Your first name appears on one layer in the Layers palette
Your last name is on another layer in the Layers palette (unless you put both in same layer)
Text layers will automatically be named in the Layers palette
You can rename other types of layers by double-clicking on the name, such as Layer 3, and typing in the new name

Jump to top

Typography for your logo
Highlight your first name (or last name or both) by clicking on the T tool, highlighting your first name (or last name or both) in the Layers palette and dragging your cursor across your name on the canvas

Important: When working on the layer with your first name, make sure the layer with your first name in it is highlighted in the Layers palette

Important: If you accidentally create a new layer, you can delete it by dragging the layer to the trash can at the bottom right of the Layers palette

To activate the Character (typography) palette, click the icon at the far right of the tool bar at the top of the page or pull down Window>Character

Case
lowercase = younger
upper case = shouting
ulc = bank

Tracking (spacing between words)
w  i  d  e  r = older audience (with failing eyesight)
tighter = Wired audience

Warp text—click on box that’s second from the right in the tool bar at the top of your screen

Edit>Free Transform to stretch, scale, or distort your type
cancel = escape
OK = return or double-click inside box

Adding a special effect: a drop shadow or emboss on your text layer
Double-click on the layer itself (not the words Your First Name) in the Layers palette
or Layer>Layer Style>Drop Shadow

or

Click the f in the circle at the bottom left of the Layers palette

Important: To get all the options for the different effects, click on the bar with the name, such as Drop Shadow; don’t just check the little box

File>Save As interface_2.psd (all lowercase; no spaces)

Save your documents to Your Name’s Web Site in your Student folder
When saving as a Photoshop document, the format should be Photoshop
Experiment with fonts and sizes (but not color . . . yet)
File>Save As interface_3.psd (all lowercase; no spaces)

History palette
Lists the most recent states (edits) you made, with the bottommost state being the most recent
Clicking on a prior state restores the image to that stage of editing
You can undo up to 1,000 previous stages of a work session

Jump to top

Photoshop: Choosing your color scheme

Simplicity
As a general rule, simplicity is very powerful. A simple background can make a page more readable, legible and inviting. There are exceptions to every rule, but visitors never complain that unobtrusive, low-profile backgrounds are too simple or that a page is too easy to read.

A background works best when it’s not trying to be the foreground. Use background color, texture, or images to enhance the presentation of your page content, not as visual competition.

Contrast
A white background is more common than any other because it’s the easiest, most familiar reading environment for readers. A light pastel color will contrast dramatically with black (or very dark) type. Aim for maximum contrast between the background color and the content.

It can be very dramatic to reverse the color scheme by making the page background black (or a very dark color) and the type white (or some other light color). This technique can become very tiresome and boring, however, if you use it on every page. For maximum visual effect, use reverse text sparingly, such as on a home page, splash page or special page. Reading more than a few words of light-colored text on a midnight blue background is uncomfortable.

If a page with a dark background contains content that readers want to print, the white type won’t show up when they print the page. It’s annoying. You can either get rid of the dark background or create a separate printable page and provide visitors with a prominent link to it.

Tip: Go to www.lynda.com and webwhirlers.com/colors/index.asp or themaninblue.com/experiment/Technicolor/ for color tips.

Web-safe colors
Although most computers can display over 16 million colors (even though our eyes can only distinguish a small percentage of these anyway), there are only 256 colors that are common to the different computer platforms. Only 216 of them are called Web-safe or browser-safe colors. If you use colors outside this palette, your images might look dithered.

Not all monitors can display every color. When a monitor comes across a color it can’t display, it tries to simulate that color by combining two or more other colors in the little pixels (dots) on the screen and hopes your eyes will blend the two colors together. So instead of seeing one smooth color, you see speckles, which is dithering. The more colors a monitor can display, the less likely it will have to dither.

Web-safe colors are based on the notion that all monitors are 8 bit. That’s pretty rare now in the PC world and never with Macs. Test your site on different monitors that are fairly new. Even if your colors dither on old monitors, they’ll probably be close enough for government work.

Jump to top

Photoshop: Painting the color layer for your navbar
By making your navbar a different color, you’ll create a visual distinction between it and the content of your page.

Highlight Background layer in Layers palette

Pick a foreground color (top box) that contrasts with the color of your name

1. Edit>Fill
Use: Foreground color

OR

2. Click on paint bucket in right column of toolbox (sixth down from top)
If Gradient tool is showing, hold little black triangle in lower right corner
and select Paint Bucket tool
Click on your canvas

OR

3. Use the keyboard shortcut OPTION + DELETE (Mac)
ALT + BACKSPACE (PC)

If you’re having problems
Check to make sure the mode is RGB, not CMYK or Grayscale

If the text doesn’t show up, it could be the same color as your background!

Make sure you’ve highlighted the Background layer in Layers palette.

When you have what you want, command + D (deselect) or click on your canvas

To change the order of layers in the Layers palette: Grab and drag them

To add a special effect
Double-click on Background layer in Layers palette
When New Layer dialogue box opens, type in the following:
Name: Background
OK

OR

Layer>Layer Style>Bevel and Emboss (or whatever effect you want)

OR

Click the f in the circle at the bottom left of Layers palette>Bevel and Emboss
important: To get all the options for the different effects, click on the bar with the name, such as Drop Shadow; don’t just check the little box

Jump to top

Photoshop: Selecting your logo color
You might want to try monochromatic colors—desert browns, tans and creams, for example. For pizzazz, you could experiment with bright primary colors: red, yellow and blue. You could also try complementary colors, which are opposite each other on the color wheel (yellow and purple, blue and orange, red and green).

After you’ve picked the colors for your navbar, pick your logo color.
Selecting colors for your logo
Select T (Type tool) in toolbox
Select Your First Name in the Layers palette
Highlight your actual name on the canvas by dragging your mouse or double-click the T
in the Layers palette with Your First Name
Use the color picker on the right side of the top tool bar
Repeat the steps above to select a color for your last name if it’s on a different layer
Adding a special effect: a drop shadow on your text layer
Double-click on the layer itself (not the words Your First Name) in the Layers palette or Layer>Layer Style>Drop Shadow
Be sure to get all the options for the different ways you can manipulate the effects by clicking on the bar with the name, such as Drop Shadow, not just by checking the little box
Zoom tool (magnifying glass)
Choose the Zoom tool (magnifying glass) in the right column of the tool bar
To zoom in, click on the canvas or drag a marquee across an area to magnify that area
To zoom out, option + click on the canvas

Jump to top

The psychology of color

Color Positives Negatives
red: strength, passion, energy, heat, aggression, anger
excitement, fire, dynamism
yellow: warmth, brightness, spirituality, jealousy, disease (if dingy in hue)
sunshine, happiness, joy, hope
blue: trust, loyalty, wisdom, calm, sadness, isolation, depression
tranquility
green: nature, fertility, abundance, depression, sadness (when mixed
growth, calm, wealth, security, with blue)
stability, concentration, home
orange: warmth, energy, happiness, strength deceit,distrust (if a darker hue)
black: reliability, power, protection depression, evil, death
white: purity, chastity, peace, innocence
purple: spirituality, passion, romance, royalty, power, creativity
brown: stability, strength, reliability, tranquility
pink: love, compassion, happiness, calm, romance, friendship
gold: prestige, expensive, sun, spirituality
violet: relaxation

Jump to top

Photoshop: Creating the main navigation

Form versus function
Should you use Photoshop or HTML to create your links? Photoshop is a lot more attractive, but it’s harder to change. HTML coding is easier to change. A compromise: Use Photoshop for your primary navigation and HTML for your secondary navigation.

Building a separate layer for each word (to create rollovers)
Create a new layer by clicking on the icon to the left of the trash can in the Layers palette
Select the T (Type tool)
Click on the canvas
Type the first word word (home)
Use the Move tool to position the word in the navbar
Create a new layer (click on the icon to the left of the trash can) and repeat for each word in your navbar: resume . . . bio . . . clips . . . photos (or whatever words are in your navbar)
You can copy (apple + c) and paste (apple + v) the first word (home) into each new layer you create

Hint: Use the Move tool or the up and down arrow keys to position the word in the navbar

Even better: To align the words precisely, highlight the home layer in the Layers palette, then click in the box between the eyeball and the big T in the layer of each word in your navbar: resume . . . bio . . . clips . . . photos (or whatever words are in your navbar)
Layer>Align Linked>Bottom Edges
Layer>Distribute Linked>Horizontal Centers
File>Save As interface_5.psd (all lowercase; no spaces)Photoshop: Designing a rollover effect

Jump to top

Photoshop: Duplicating layers to create rollovers

Mouseover, rollover
The terms “mouseover” and “rollover” are often used interchangeably, although one might argue that technically there’s a difference. But it’s like the difference between font and typeface—nobody cares. A mouseover or rollover is when the user’s mouse rolls over a button or image or even a blank spot on the screen and something happens—an image appears or changes, the color of a button changes, a list pops up, etc.

We’ll make the words in our navbar change color or take on a special effect, such as a drop shadow, when viewers move their mouse there.

File>Open interface_5.psd (or your latest version)
File>Save As interface_6.psd (all lowercase; no spaces)

Duplicate each layer (home . . . resume . . . bio . . . clips . . . photos) by dragging it to the icon to the left of the trash can in the Layers palette

To avoid layer hell, double-click the layer name and rename every layer (home rollover, resume rollover, bio rollover, etc.)

Jump to top

Photoshop: Creating the rollover effect

1. Double-click the big T in the copy layer to change the color of the text

OR

2. Double-click the label in the copy layer to add an effect, like a glow or shadow

OR
3. Click the f at the bottom left of the Layers palette to see the various effects

To look at the effect, turn off the eyeball alongside the original name (Home, Resume, Bio, etc.) in the Layers palette
Turn off all rollovers by clicking on the eyeball

Tip: If you get confused, click on the eyeball alongside each name to turn each layer on and off

Ultimately you’ll have layers for
• EACH original navigational element
• EACH rollover (should be a different color or effect to distinguish it from original)

File>Save As interface_7.psd (all lowercase; no spaces)

Jump to top

Photoshop: Drawing the guidelines
First, we’ll use Photoshop guides to mark where we want ImageReady to slice the navbar and make the rollovers. The rollovers will turn on and off appropriate layers.

Open interface_7.psd (all lowercase; no spaces)
View>Ruler
Grab the guide lines from the ruler at the left side of your canvas
Place the guide lines between the logo and the words on your navbar as well as between the words of your navbar as well. These will become the zones that the end users will click on later.
Grab the guide line from the ruler at the top of your canvas
Put the guide line slightly below the navbar so the type on your soon-to-be home page doesn’t hit the navbar
In your Layers palette, make sure all the rollovers are turned off
Highlight the bottom layer (Background)

Jump to top

ImageReady: Slicing the navbar
Launch ImageReady by clicking on icon at very bottom of toolbox

Really important! Make sure you’re in ImageReady (look at the name in the upper left corner of screen)

Select the Slice tool (knife on right side of toolbox, third one down)
Use the Slice tool to draw slices that touch the blue guides perfectly. Don’t overlap slices. Slice everything.

Use the Slice Select tool (to the right of the Slice tool) to fix goofs, move slice borders and select slices

ImageReady: Naming your slices and identifying your links
In the palette at the bottom of your computer screen, click on SLICE tab
If the palette isn’t visible, go to Window>Slice
Select the Slice Select tool
Click on the HOME slice
Rename it home (all lowercase; no spaces) in the Slice palette at bottom of screen (yourname_logo)
URL = index.html
Alt tag = Welcome! (Alt tags enable the hearing impaired to hear your message)

Click on the RESUME slice
Rename it resume
URL = resume.html
Alt tag = Carol’s resume

Repeat the same steps for your remaining slices
Check your work by clicking on each and making sure the name in the Slice palette changes
File>Save (apple + s)

Jump to top

ImageReady: Creating JavaScript rollovers
ImageReady creates JavaScript rollovers with easy, convenient, clean codes and adds them to your basic HTML coded pages.

Make sure you’re in ImageReady, not Photoshop
Window>Rollovers

Click on Rollovers tab in Rollovers palette (You might want to make the window bigger)
With the Slice select tool, click on your first slice (home, for example)
In the Rollovers palette, click on the icon to the left of the trash can to make Over state
Make sure the Over state of home is highlighted in the Rollovers palette
In the Layers palette (Window>Layers), click off eyeball to turn off original home layer
Click on eyeball underneath to turn on home rollover

For each word in your navbar (resume . . . bio . . . clips . . . photos . . . whatever you have)
1. Make an Over State in Rollovers palette
2. Click off eyeball to turn off original layer in Layers palette
2. Click on eyeball underneath to turn on rollover in Layers palette

File>Save (can be opened by Photoshop and ImageReady)
File>Save Optimized As (to save graphics and HTML codes) to your thumb drive AND your project folder
Name it interface.html
It will automatically create an Images subdirectory there
Saves graphics and HTML codes

BE SURE TO SAVE THE IMAGES FOLDER AS WELL

To see what you’ve done so far, launch a browser
Run your mouse over each name in your navbar, and it should change to the rollover state
The links don’t work because we haven’t created the pages to link to yet
View the source code.

Jump to top