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 > New > 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 > 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 > 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 > Browse Folders • Navigate to Desktop > Week 3 > Examples > 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 > 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 > New > 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 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

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