Home: Technology: Workshops and Technology Resources: Workshops

Creating Web Graphics with Photoshop, Session 2
http://www.arhu.umd.edu/technology/workshops/photoshopfortheweb/webgraphics-s2.html

Introduction Discussion
	Graphics vs. Images File Formats Monitor Sizes and their resolutions 14 inch 640x480  600 x 300 after menus 15 inch  800x600(supervga) 780x440 after menus 16/17 inch 832x624 (Mac) 1024x768(Win)  765 x 420 after menus 19 inch 1152x870 (Mac) 1152x864(Win)  980 x 580 after menus 21 inch  1280x1024 Cinema Display
Two Ways to use Photoshop for Web Graphics Creation
	1. Make the Graphics in Photoshop and save for use in your Web Editor. 2. Use Photoshop as a Layout Tool- position graphics, put in text place holders, apply html coding, and then save graphics and html documents.
Exercice: Making Graphic in Photoshop: Banner
Exercise: Working with Photoshop as a Layout Tool
	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
Other Possibilities
	Background Images Image Maps Photo Gallery
Notes
	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.

 

 

Back to Top

Contact Information:

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