What you'll learn

In this Photoshop tutorial we'll look at the design and development workflow for a single page product website.We'll begin with how to design a concept and subsequent wireframe document. Then we'll use the leading tool in the field, Photoshop, to design the actual layouts for the website. This will include preparing the basic design elements, separate sections and also the mobile device elements for responsive layout.Once we have the layout finished, we'll use technologies such as HTML5, CSS3, jQuery and Sass with Compass to develop the website and bring our design to life. By the end of this Photoshop training, you'll be more comfortable setting some global and helper styles, styling specific sections of the website, integrating plugins and setting media queries for different screen sizes. Software required: Illustrator CC 2014, Photoshop CC 2014, HTML5, Sublime Text 3, CodeKit 2.