Home: Technology: Workshops and Technology Resources: Workshops

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

Introduction Discussion
Graphics vs. Images, Monitor Sizes, etc.
	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
Exercise: Cropping and Sizing Images
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.
Exercise: Making Graphics in Photoshop: Banner
Exercise: Making Graphics in Photoshop: Buttons
	Working with Layers, grouping, locking, etc. Drawing shapes. Saving Slices.
Other Possibilities
	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