Basic Web Design Week 3 Graphics

1
Basic Web DesignWeek 3 - Graphics

• UVICELL

2
Web Graphics Concepts for Week 3

• Selecting the right format for your image
• Creating a name banner for your site
• Optimizing photos for use on your web site
• Create a roll-over navigation button

3
Selecting the Right Format

• JPEG (jay-peg) format
• 24 bit, lossy (compressed) file format
• Uses include
• Photos
• Grayscale images
• Realistic artwork

4
Selecting the Right FormatPage 2

• GIF (graphics interchange format)
• 8 bit (256 color) file format
• Uses include
• Lettering
• Logos
• Line art
• Comics

5
Which Format Would You Use?
6
Image Size vs. File Size

• File size is the amount of data that must be
  transmitted from your site to the browser for the
  image to be displayed
• Image size is the width and height (in pixels) of
  the image - remember the 800 pixel rule!
• Typically smaller image sizes will create smaller
  file sizes, Example
• A photo that is 2500x1900 may be 1.3 MB or larger
• The same photo reduced to 640x480 may be 200KB

7
Settings for Photoshop Elements (PSE)

• Open Preferences
• Select Units Rulers
• In the Units section set Rulers to Pixels
• Set Type to Pixels

8
Making a New Document in PSE

• File menu gt New gt Blank File
• Name your file, My Logo
• Use Preset 640x480
• Be sure Color Mode is set to RGB Color

9
Creating a Logo in PSEStep 1 - Layers

• Navigate to the Layers Palette
• Click More to see options
• Select New Layer
• You can also click the Create a New Layer button

10
Creating a Logo in PSEStep 2 - Layers

• Name your new layer Logo
• Leave other options at default
• View Layers Palette to verify that the Logo layer
  is selected

11
Creating a Logo in PSEStep 3 - Using the Text
Tool

• Select the Horizontal Type Tool marked as T
  on the far left palette
• Select Font options from the menu along the top
  border

12
Creating a Logo in PSEStep 3a - Anti-Aliased Text

• Be sure to click the Anti-Aliased text box
  label AA - this will remove the jagged edge
  from your text

13
Creating a Logo in PSEStep 4 - Create Your Logo

• With the Text Tool selected, click anywhere on
  the page and begin typing
• Apply Styles and Effects Layer Styles to taste

14
Creating a Logo in PSEStep 5 - Cropping

• Select the Crop Tool from the left palette
• Click and drag the Crop Tool over the area you
  want to KEEP
• Adjust if necessary, then double click on the
  logo to crop

15
Creating a Logo in PSEStep 6 - Saving Your File

• Always save the original PSE file as it can be
  modified
• Select File gt Save
• Name your file My Logo Original.psd
• Be sure Layers is selected

16
Creating a Logo in PSEStep 7 - Saving For Web

• File Menu gt Save for Web
• Be sure GIF is selected
• Compare original file (on left) to the web
  version on right
• If web image looks correct click OK

17
Creating a Logo in PSEStep 7a - Saving For Web

• Name your logo My-Logo-Web.gif
• Save logo into your images directory
• Preview your logo with Internet Explorer

18
Adding Photographs

• File Menu gt Browse Folders
• Navigate to Desktop gt Week 3 gt Examples gt Photos

19
Opening and Editing a Photo

• In the Photo Browser, double click on the photo
  you want to use
• View the photo attributes
• Note size of photo (bottom middle)

20
Saving Photo for Web Use

• Select File Menu gt Save for Web
• Adjust size to fit on web page or desired space
• Adjust quality until web version looks clear and
  sharp
• Always be sure Constrain Proportions is
  selected

21
Comparing Original Photo and Web Photo
22
Saving a Web Ready Photo

• When you are happy with the quality, file size
  and image size of your photo - Click OK
• Save file to your images directory

23
Creating Navigation Buttons

• Creating a button is very similar to creating a
  logo
• File Menu gt New gt Blank File
• Name Navigation
• Width 300 pixels, Height 200 Pixels
• Color Mode RGB Color

24
Create and Position Text

• Select Text Tool and type name of first button
  in the document
• Using the Move Tool Align the text to the grid

25
Creating the Mouse-Over Effect

• On the Layers Palette click Duplicate Layer
• Name Layer Your Button Name over (for the
  mouse-over layer)
• Click OK

26
Add a Layer for Each Button State

• For each button create a layer for the standard
  view (off) and one for the mouse-over view (on)
• Hide Layers that are complete

27
Before You Go On(a.k.a. Learn from Daves
mistakes)

• Be sure to save and keep this file, as
  navigation.psd (or any name you choose as long
  as it is a .psd file)
• Any changes or additional buttons can be made
  easily from this document, but not in the
  finished button

28
Cropping Your Button

• Turn on layer visibility for all button layers
• You should have a bunch of letters on top of each
  other

29
Cropping Your ButtonPage 2

• Select the Crop Tool and click and drag until
  you cover the area around all of your buttons
• Position the crop marks around the buttons, then
  double-click in the selected area to apply the
  crop

30
Saving Each Button State

• In the Layers Palette turn off Visibility for
  all but the first button (the one that the
  bottom)
• Select - File Menu gt Save For Web

31
Location for Saving Button States

• Navigate to your images directory and create a
  new buttons directory inside
• Name the first layer, condos_off.gif (or
  your_button_name_off.gif
• Repeat this procedure for the on button states

32
Button States in Their Directory

• When all button states are saved for web your
  directory should look something like this

33
Settings For Button States

• Be sure to select GIF and note the other
  settings for future reference
• When your button looks good, click OK