WEB GRAPHICSTECH DEMO

2 TYPES OF WEB IMAGERY

▸ informational

▸ design

INFORMATIONAL IMAGES

▸ images with informational value that supports the main textual content of the page

▸ accessibilityNOT hidden from screen readers

▸ alt attribute (required)

▸ SEO (keywords in file name and alt attribute)

▸ Should be placed within <figure> tags

Step 1: Open image in photoshop

Step 2: File Save As…

change format to Photoshop

.psd extension

uncompressed “original”

DO NOT SAVE to your img folder(reserved for compressed images ONLY)

Step 3: Image > Image Size…

fact finding ONLY

get an idea of the DIMENSIONS

and RESOLUTION

don’t change anything (cancel)

Step 4: File > Export > Save for Web (Legacy)…

Save for Web Dialog box

optimized tab

1. change image size (bottom right)

2. change compression type (top right)

3. check file size (bottom left)

Step 5: change image size

choose exact size image will displayon web page

click on image to “activate” change

check file size

Step 6: choose best compression

GIF, JPEG, PING-8, PNG-24

check file size

for jpg move quality slider and choose “acceptable quality at the lowest file size”

Step 7: Save…

rename if necessaryall lowercase - hyphenate multiple words

save to img folder

Step 8: Code it up

informational imagery should be placed inside figure tags

alt tage REQUIRED

figcaption OPTIONAL

AKA “EYE CANDY”

DESIGN IMAGES

▸ non-informational images

▸ design purpose only

▸ accessibility hidden from screen readers

▸ placed in the background of css elements

CSS CRASH COURSE

ADD EXTERNAL STYLE SHEET

create a page use .css extension place in css folder inside web folder

add link code below title inside html page to link the css

img is set to 100%, the figure parent controls the size of this image on the page

image resizes itself to fit on page to accommodate desktop, tablet, and mobile devices

RESPONSIVE FIGURE IMAGE

example of css background image that stretches itself to fit any size desktop browser window

image should have a landscape orientation and be optimized in photoshop and resized with a width of 1024px (compromise to look good on large screens and still have a small file size on all devices

code is inside an external stylesheet so it necessary to go “up” one directory using ../then look inside img folder for the image

image uses css to center along the X and Y axis, fixed (glued) to the background, and set to NOT repeat

the image is then set to cover (stretch to fit) the screen

BACKGROUND IMAGE

example of header image using text from an installed font from dafont.com

image should be created on a transparent background and saved as png-24(for a pixel-perfect crop: select all> copy merged > file new > paste)

IMAGE TEXT REPLACEMENT

html

css