Home: Technology: Workshops and Technology Resources: Workshops

Photoshop for the Web
http://www.arhu.umd.edu/technology/workshops/mmpublishing/webgraphics.html

Graphics vs. Images

File Formats

Working with Images

Photoshop Details

Photoshop vs. Imageready

Start out in Photoshop and do as much design and image creation as possible there then switch to Image Ready only after you have perfected the image.

Photoshop
Provides tools for creating and manipulating static images for use on the Web. You can divide images into slices, add links and html text, optimize the slices and save the image as a web page.
Photoshop has more color ?correcting and image-manipulation features.

Image Ready provides many of these same editing tools but also includes tools and palettes for advanced Web processing and allowing and creating dynamic Web images like animations and rollovers.
Image Ready- create rollover buttons and iamge maps, slice images export final elements to HTML.
 

Working in Photoshop

Monitor Sizes and their resolutions
14”	640x480	600 x 300 after menus
15”	800x600(supervga)	780x440 after menus
16/17”	832x624 (Mac) 1024x768(Win)	765 x 420 after menus
19”	1152x870 (Mac) 1152x864(Win)	980 x 580 after menus
21”	1280x1024
Cinema Display

Working with Existing Files

deptnav.psd

arhudeptbanner.psd

Sidebars as Backgrounds Exercise

Sidebar with text or navigational elements-
Doesn’t require frames
Can be done simply by using a pattern as background.
Using a pattern with a height of 40 to 80 pixels is less demanding
If saving as a jpeg- use a pixel dimension that is divisible by 8 because the JPEG compression algorithm works with 8x8 blocks

Finished File
How To

 

Background Images

Image Maps

Photo Gallery

 

Back to Top

Contact Information:

Contact us with questions, comments and feedback: acs-worskhosp@umail.umd.edu
Search the Arts and Humanities web site