Design is hard. Implementing a design can be even harder. But fear not! With a good handle on how to use Photoshop and a solid understanding of CSS, the limits on what can be accomplished can be lifted.

In this session I'll cover best practices for designing in Photoshop and implementing those designs with pixel-perfect, yet flexible CSS and HTML. I'll walk through designing key interface elements in Photoshop and then jump over to the browser to show best practices for implenting a design.

This session will dive right into advanced Photoshop techniques including:

Using layer styles alone to style interface elements
The importance of iconography in a UI and how best to incorporate icons
Blend modes and the way they help or hurt your design
Saving time with Smart Objects
Adding texture using Patterns
Creating a Style Guide to organize and maintain interface elements
Once we have a design to work with, we'll move on to implementing the design using the following CSS methods:

The crazy and awesome things you can do with box-shadow
Images, gradients, and layering backgrounds to create depth
Using pseudo elements to avoid unnecessary tags
Scalable vector icons using @font-face
Adding texture to text with mask-image
If you can design it, you can create it on the web.