1 / 19

CSW 131 – Chapter 3 Creating Images

CSW 131 – Chapter 3 Creating Images. Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston, Wiley. Understanding Image Formats (p. 50) Legally Acquiring Stock Images (p. 51). Use J oint P hotographic E xperts G roup files for photos ( jpg or jpeg )

nicola
Télécharger la présentation

CSW 131 – Chapter 3 Creating Images

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSW 131 – Chapter 3Creating Images Prepared by Prof. B. for use withTeach Yourself Visually Web Designby Ron Huddleston, Wiley

  2. Understanding Image Formats (p. 50)Legally Acquiring Stock Images (p. 51) • Use Joint Photographic Experts Group files for photos (jpg or jpeg) • more colors (24-bit, 16.7 million colors) & works on web • reduce size carefully • Use Graphics Interchange Format files for line art, animations & transparencies (gif) • 8-bit 256 colors & works on web • Portable Network Graphics (png) “combines both” • offer 24-bit, 16.7 million colors & MAY work on web • no animation, and browser support issues may still exist • IMPORTANT! Get images rights! Don’t get sued! • Two low-cost sources for royalty free & stock photos are istockphoto.com and fotolia.com. There are many others.

  3. Understanding Image Optimization (pp. 52-53 • Optimization includes reducing the image size (and file size) to load faster, and still showing a quality image. • JPEGs: reductions removes data (lossy compression) • GIFs: removal of “unnecessary” colors • PNGs: removal of both data, colors, & other info. • GIF & PNG features • Non-use of animation & transparency minimizes file size • Choosing the Right Format • In general, saving files inappropriately increases file size • E.g., photos as GIFs, images as JPEGs increase file size, etc. • Scale and Crop Images • And you will often want to spec the size on the web page first • Resolution • High resolution is great for prints, but NOT for websites • Maximum useful size is usually 72 dots or pixels per inch

  4. Download a Stock Image from the Web(pp. 55-57)Get to Know the Photoshop Interface (p. 58)Get to Know the Photoshop Elements Interface (p. 59) • We will not create an account and download an image from istockphoto.com. Instead: • download ch03.zip into downloadssubfolder • copy & paste ch03.zip into class_work subfolder • extract (unzip) ch03.zip, which becomes subfolder ch03 into class_work subfolder • Together we will review and discuss Photoshop on the PCs in class (v3) compared to book • Photoshop Elements = “lite” version of Photoshop • IMPORTANT! Get images rights! Don’t get sued! • Two low-cost sources for royalty free & stock photos are istockphoto.com and fotolia.com. There are many others.

  5. Use Photoshop to Fix Colors (pp. 60-61) Photos taken in varying lighting (e.g., outside vs. inside) can be adjusted easily as follows • Open Adobe Photoshop, click File, click Open • Navigate to your downloaded image and double-click it • Click Image, point to Adjustments, click Color Balance • Drag the color sliders to experiment with color balance • Click OK button when finished • Note: Photoshop adds a new layer to the original photo so the original is not destroyed!

  6. Crop and Resize an Image in Photoshop (pp. 62-63) Camera photos are too large for web pages. We can easily crop an image or resize the entire image • Crop an image (on left side of screen) • With our image still open in Photoshop, click Crop tool • Click and drag on the image to define area to keep • Double-click within crop box, and image is cropped • Resize an image • Click Image, then click Image Size • Set Resolution to 72 pixels/inch • Enter a desired width (height should auto-adjust) • Click OK, and image is resized • Note: Preplan image size (before editing) for web page • See “rule of thirds” in Tips on (bottom right of) p. 63

  7. Save an Image for the Web in Photoshop (pp. 64-65) Photoshop’s native file format is PSD, so “Save for Web & Devices” easily saves as GIF, JPEG or PNG • With our image still open in Photoshop, click Save for Web & Devices • Select a format from pop-up menu at top right of screen • If selecting JPEG, select a quality preset or quality percentage noting how your choices changes the file size • Click Save • The Save Optimized As dialog box appears • Navigate to folder that contains your website’s images • Save our new optimized image as gopher.jpg • See (important testing and use) Tips on (bottom of) p. 65

  8. Change Image Opacity in Photoshop (NOT IN BOOK) Changing reducing the image opacity allows an image to be a watermark/background on a page • Open gopher.jpg in Photoshop, click Layer, point to Smart Object , then click Convert to Smart Objector • Change the Opacity % -- a scale of 0-100 • Images become more faded with lower % • Save using “Save for Web & Devices” per the previous slide (7) • A good naming format is filenamepctopacity%.jpg, e.g., gopher25.jpg for 25% opacity of the photo

  9. NOT COVERED Photoshop Elements (pp. 66-73) Get to Know the Fireworks Interface (p. 74) Get to Know the Illustrator Interface (p. 75) Photoshop Elements is a “lite” version of Photoshop. It is not loaded on our PCs (we will not cover it). Take a quick look at pp. 74 & 75 to review the interface for both • Fireworks, a web-centric image creation tool (once a competitor to Photoshop), and . . . • Illustrator, a vector-based design tool (which uses math algorithms to draw lines between points, rather than pixels or vectors) for images. • This software is a major player along with Photoshop

  10. Create a Button in Fireworks (pp. 76-79) A customized button can look great compared to the standard gray button . . . • First create a document by opening Adobe Fireworks, click File New Document, and the New Document dialog box opens. • Enter button dimensions. We’ll use 200W, 100H, 72Res. • Note we can select a canvas color including transparent. • Click OK and the new document is created. • Click the Fill Color (Paint Bucket) tool (left side of screen). • Select a color to use (book chooses #000099 blue) (bottom of screen) • Click the Rectangle tool on left of screen.(left side of screen under “Vector”) • The tool is now ready to use Continued on next screen . . .

  11. Create a Button in Fireworks (pp. 76-79 CONT.) Fireworks lets you use the pointer to draw the button on the screen. We can use rounded corners and add text to the button. • Place your mouse pointer at the top left of the rectangle, then press and hold mouse button, then drag on screen (canvas) to draw a rectangle reaching the bottom left of the rectangle (button to be). Do NOT release mouse button yet. • While still holding down mouse button, press up arrow key several times to add rounded corners. Rectangle is drawn. • Click the Text tool (left side of screen) and use the Properties panel (bottom of screen) to select a font and set a font size (try Arial, 40, Bold, White) • Click the canvas and type the label text (Home) for the button • You can then click the Pointer tool to position the text • Note: Similar buttons are often created to show as selected, e.g., “About”, “Contact”, etc.

  12. Save an Image for the Web in Fireworks (pp. 80-81 CONT.) Firework’s native file format is PNG, but a version with added information related to the program, so saving images for the web are done using Export. • Click Window, then click Optimize (Optimize panel opens) • Select the file format you wish for saving your image (use GIF) • Click File, then click Export (Export dialog box opens) • Navigate to your website’s images folder • Type a name for the image (homebutton.gif) • Make sure Export setting is Images Only • Click Save and the image is exported in the correct format • Save original file in original artwork folder as homebutton.png • Now change the rectangle color and save as homebutton_s.gif • See Tips at the bottom of p. 81.

  13. Create a Logo in Illustrator (pp. 82-85) Illustrator is a powerful tool for drawing new images (vs. editing). Like Fireworks, a new file and drawing area are created and any fonts can be used. • Open and click File, New (New Document dialog box opens) • Enter the width and height you wish. Use 300W, 300H. • Click OK and the new document is created • Click the Type tool (left side of screen), change font to 48 pt (top of screen), Bold, then click the canvas, and type a name (MeCo). • Click the Selection tool (left side of screen) and the text object is selected. • From the Control bar, click a text color and an outline color Continued on next screen . . . • Note: See Tips at the bottom of p. 83.

  14. Create a Logo in Illustrator (pp. 82-85) Illustrator’s Extrude & Bevel command allows for 3D effects (but make sure text remains). • Click Effect, click 3D, then click Extrude & Bevel • (the 3D Extrude & Bevel dialog box opens) • Click Preview (a check mark will appear in adjacent box) • Experiment with settings in dialog box for desired look • Click OK and the artwork is updated with 3D effect • Note: In 3D Extrude & Bevel Options dialog box, click More Options to see drop-down menu to change shading color or select the image and use the tool bar at the top of the screen. • To go back to original image, double click the effect in the Appearance Panel (right side of screen). • See more color change option in Tips at bottom of p. 85.

  15. Save an Illustrator Image for the Web (pp. 86-87) Illustrator’s native file format is AI. Using Save for Web & Devices works similarly to Photoshop. • Click File • Click Save for Web & Devices • (the Save for Web & Devices dialog box opens) • Select a preset (you can also modify settings manually) • Click Save • (the Save Optimized As dialog box opens) • Navigate to folder that contains your website’s images • Type a name for the image (logo.gif)and Save • Notes: • Save original AI file (for edits): logooriginal.ai in original artwork • Matching canvas and logo/image size using click Object, click Artboards, click Fit to Artwork Bounds is not a feature of CS3.

  16. Add an Image to Your Web Page (pp. 88-89) • Adding images uses the empty <img> tag, which also uses a required attribute src (a file path): • Using Notepad, open index.html and on a new blank line above </body> type <img src="images/logo.gif" /> • SAVE and view in browser. • Notes: • Only use editors to resize images in a web page – do not use XHTML width & height attributes, as they degrade image and remain too large (file size). • Multiple images can be placed on web pages, but add to load times – use with discretion.

  17. Make Your Images Accessible (pp. 90-91) • Adding images also REQUIRES the use of the alt attribute for the <img> tag, in some cases, by law: • Using Notepad, open index.html and edit the line above </body> type (as one line) <img src="images/logo.gif" alt="descriptive text" /> • SAVE and view in browser. Page should appear unchanged.

  18. Use Images as Links (pp. 92-93) • Often, logos point to the Home page of their website. This simply requires using the <a> tag with the href attribute pointing to the page: • Using Notepad, open index.html and again edit the line above </body> type (all as one line) <a href=“index.html”><img src="images/logo.gif" alt=“descriptive text” /></a> • SAVE and view in browser. Click on the image/link. • Notes: • CSS will allow us to remove the box around the image (which is caused by linking to it). • Make it obvious the images are links.

  19. To Do List • Read Chapter 3 • Revisit what we did in class • Be careful as we do not follow book • Remember, MUCH more detail about anything we cover is: • at w3.org • the Appendices of your book • Your Project – will it be about . . . • your (planned) business or organization? • another business or organization? • You will work with a “client” • your life and background?

More Related