PS for Web Production

Photoshop for Web Production Lou Fuiano | Instructor Temple University Center City Fall 2013
CLASS POINTS | Wireframe Review Curriculum and Resources File Management The Diagram Intro Exercise Layer and Folders Creating Wireframe Elements Building the Wireframe

CLASS POINTS | Design Comps Building a page design Guides and pixel precision Page layout Designing in sections Forms Buttons Interactive Display Panel styling Type for production

Project images: Home Page Design Rocket Football Player Pilot Ball Background Logo Art

CLASS POINTS | Page Build From PSD to HTML Setting up styles to display as images Crafting the CSS Final site


ONLINE RESOURCES W3Schools Full tutorials for building all aspects of web media.

A List Apart | Design An online publication that details the practices of content creators and how to best use the web an it’s available resources. Peachpit Press authors explore layer exercises and PS tutorials.

Dribble See what others are working on.

Nav Bar Code


TOOLS GoMockingbird Wireframes on the fly. Work directly in the browser. Tilable textured patterns, free to use.

960 Grid The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

XScope A great tool for getting and controlling all visual elements on the screen.

CSS Edit Dynamic Style Sheet authoring software that speeds up the process of how we work with and preview CSS.

Coda FTP and code editor with built in CSS editing

SlickMaps Diagraming tools for a live sitemap

Typetester An online tool that shows how type displays in various sizes, spacing and color.