Transcript Introduction to CSC110

CSW 131 – Chapter 3
Creating Images
Prepared by Prof. B. for use with
Teach Yourself Visually Web Design
by Ron Huddleston, Wiley
1
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.
2
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
3
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 downloads subfolder
 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.
4
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!
5
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
6
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
7
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
8
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
9
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 . . .
10
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.
11
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.
12
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.
13
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.
14
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.
15
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.
16
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.
17
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.
18
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?
19