Graphical Production for the Web

Get fresh ideas, techniques, and sound advice - this class covers the creation of Web graphics using professional digital imaging tools and responsive design principles. Photoshop is the primary focus of the class, but other programs, such as Adobe Edge Reflow and Illustrator, will be explored. Through lecture, lab based instruction, and step-by-step projects, students will learn the workflow for creating graphic components—from page layouts at different viewport sizes, to navigation and animations - along with efficient production strategies that will save time and effort. Beginning to intermediate Web designers and developers, and those already familiar with Photoshop who would like to apply their skills to the Web, will benefit from this course.


Topics include:



  • Know when to use GIF, JPEG and PNG compression

  • Work with color; understand color spaces and color profiles and their implications for web design

  • Understand screen pixel density and its implications for designing comps and producing graphics

  • Understand accessibility issues related to visual design

  • Understand graphical production as it relates to the Web project life cycle

  • Know how to use web-based fonts in layered comps, and how to specify type for web pages

  • Create web backgrounds

  • Create web page prototypes and wireframes

  • Work with Layers, Layer Groups, Layer Styles, & Layer Comps for interaction design

  • Know best practices for structuring a Photoshop comp

  • Design navigation elements

  • Extract assets (images and code) from the Photoshop comp

  • Create images for CSS sprites

  • Apply graphic design to a wireframe

  • Create Actions for repetitive graphical production tasks

  • Create web galleries and slideshows using Adobe Bridge

  • Understand the difference between designing for static web pages vs. content management systems

  • Understand responsive design principles and how they relate to graphical production for the web

  • Understand naming conventions for image resouces

  • Use Adobe Device Previw to create visual designs for multiple viewport widths.





Skills Needed: Familiarity with HTML and hands-on working knowledge of the Mac and/or Windows environment are required. This advanced class assumes that the student has mastered foundation skills as noted on the Photoshop Skills List
. Competency in these skills will be essential to completing assignments and keeping up with the pace of the class.

Suggested Prerequisites :


Offering code Offering title
UXWD.X402 Adobe Photoshop, Introduction