Basic Web Design Week 3 - Graphics UVICELL

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 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

Selecting the Right Format JPEG (jay-peg) format –24 bit, “lossy” (compressed) file format Uses include: Photos Grayscale images Realistic artwork JPEG (jay-peg) format –24 bit, “lossy” (compressed) file format Uses include: Photos Grayscale images Realistic artwork

Selecting the Right Format Page 2 GIF (graphics interchange format) –8 bit (256 color) file format Uses include: Lettering Logos Line art Comics GIF (graphics interchange format) –8 bit (256 color) file format Uses include: Lettering Logos Line art Comics

Which Format Would You Use?

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 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

Settings for Photoshop Elements (PSE) Open “Preferences” Select “Units & Rulers” In the “Units” section set “Rulers” to “Pixels” Set “Type” to “Pixels” Open “Preferences” Select “Units & Rulers” In the “Units” section set “Rulers” to “Pixels” Set “Type” to “Pixels”

Making a New Document in PSE File menu > New > Blank File Name your file, “My Logo” Use Preset “640x480” Be sure “Color Mode” is set to “RGB Color” File menu > New > Blank File Name your file, “My Logo” Use Preset “640x480” Be sure “Color Mode” is set to “RGB Color”

Creating a Logo in PSE Step 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 Navigate to the “Layers Palette” Click “More” to see options Select “New Layer” You can also click the “Create a New Layer” button

Creating a Logo in PSE Step 2 - Layers Name your new layer “Logo” Leave other options at default View Layers Palette to verify that the Logo layer is selected Name your new layer “Logo” Leave other options at default View Layers Palette to verify that the Logo layer is selected

Creating a Logo in PSE Step 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 Select the “Horizontal Type Tool” marked as “T” on the far left palette Select Font options from the menu along the top border

Creating a Logo in PSE Step 3a - Anti-Aliased Text Be sure to click the “Anti-Aliased” text box label “AA” - this will remove the jagged edge from your text

Creating a Logo in PSE Step 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 With the “Text Tool” selected, click anywhere on the page and begin typing Apply “Styles and Effects” “Layer Styles” to taste

Creating a Logo in PSE Step 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 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

Creating a Logo in PSE Step 6 - Saving Your File Always save the original PSE file as it can be modified Select File > Save Name your file “My Logo Original.psd” Be sure “Layers” is selected Always save the original PSE file as it can be modified Select File > Save Name your file “My Logo Original.psd” Be sure “Layers” is selected

Creating a Logo in PSE Step 7 - Saving For Web File Menu > 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” File Menu > 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”

Creating a Logo in PSE Step 7a - Saving For Web Name your logo “My-Logo- Web.gif” Save logo into your images directory Preview your logo with Internet Explorer Name your logo “My-Logo- Web.gif” Save logo into your images directory Preview your logo with Internet Explorer

Adding Photographs File Menu > Browse Folders Navigate to Desktop > Week 3 > Examples > Photos File Menu > Browse Folders Navigate to Desktop > Week 3 > Examples > Photos

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) In the Photo Browser, double click on the photo you want to use View the photo attributes Note size of photo (bottom middle)

Saving Photo for Web Use Select File Menu > 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 Select File Menu > 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

Comparing Original Photo and Web Photo

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 When you are happy with the quality, file size and image size of your photo - Click “OK” Save file to your “images” directory

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

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 Select “Text Tool” and type name of first button in the document Using the “Move Tool” Align the text to the grid

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” On the “Layers Palette” click “Duplicate Layer” Name Layer “[Your Button Name] over” (for the mouse-over layer) Click “OK”

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 For each button create a layer for the standard view (off) and one for the mouse-over view (on) Hide Layers that are complete

Before You Go On… (a.k.a. Learn from Dave’s 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 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

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

Cropping Your Button Page 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 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

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 > Save For Web In the “Layers Palette” turn off “Visibility” for all but the first button (the one that the bottom) Select - File Menu > Save For Web

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 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

Button States in Their Directory When all button states are saved for web your directory should look something like this

Settings For Button States Be sure to select “GIF” and note the other settings for future reference When your button looks good, click “OK” Be sure to select “GIF” and note the other settings for future reference When your button looks good, click “OK”