Cisco Networking Academy - Fundamentals of Web Design















6.4
Navigation
Design Basics



6.4.8
Creating
navigating elements




Now that you have learned the types
of navigational elements available, you will now learn how to create
an image link.
The following is the method used to create a series of image links
that represent four major sections of a website. This example uses
Adobe Photoshop.
First ,
choose four graphics for the icons and reduce them to about 70 x 70
pixels each (1). You can do this either by using the "Free
Transform" function located under the "Layer" menu or
the "Image Size" function located under the Image menu. It
is a good idea to float the graphics onto a transparent background
before you shrink them. This helps reduce the amount of fringing
around the edges. Second, you need to create a new PhotoShop document that is large
enough to arrange all of the icons into a menu bar (2). The banner size
does not have to be the final size. It is a good idea, however, to
start with a new PhotoShop file that is 600 x 350 pixels-the smallest
common screen real estate. This way, you can judge how large your menu
bar should be relative to the rest of your page.
Even if
the graphics you choose for your icons seem self-evident in terms of
what they represent, it is a good idea to label them (3). Add text labels
for each of the four icons. After you have created each text label,
merge it with its icon. You can use Photoshop or Adobe Illustrator to
create curved text or text that wraps to the shape of each icon.
As long
as each icon with its label is in a separate layer, you can easily
create a series of navigational buttons that each feature a different
icon highlighted (4). To do this, in the "Layers" palette,
change each icon's opacity to 50% except for the one you want to
highlight. Change the opacities of each of the four icon layers again
to highlight a different icon. You can then merge them to create a
total of four new, merged layers each with a different icon
highlighted ready to be cut out.
Once
you have created a series of merged layers , each with a different icon
highlighted, create the smallest possible selection around the menu
bar (5). Make sure that you do not accidentally clip any of the icons. You
can crop the file to the size of your selection by choosing
"Crop" from the "Image" menu. Copy each of the
four merged layers into their own files so that they are ready for
final processing.





















6.4.8a Video (3.25 min)






 
In
this video, you will learn about exporting as JPG.


 
 









6.4.8b Video (12.32 min)







 
In
this video, you will learn about exporting as GIF.


 
 





6.4.8a
Lab Activity (PDF 122KB)



 

In this lab, you will create web graphics using slices and rollovers.



 
 






6.4.8b
Lab Activity

(PDF 334KB)



 


In this lab, you will learn to optimize images for the Web.