Class Length: 2 Days
Price: $1297

Taught by an Adobe Authorized Expert/Adobe Certified Instructor with small class sizes. You may take this Adobe Authorized Photoshop class live in Chicago or online. *Not eligible for retake.

Upcoming Dates:


Attendees must have solid computer skills.

Responsive Web Design with Adobe Photoshop & Illustrator CC

Learn to design developer-ready flexible, responsive layouts for mobile, tablets and desktop. Use Photoshop to build developer-ready files. Understand how to use grid Layout Systems like BootStrap and how to incorporate HTML5 and CSS into your design.

Understand exporting options including scaling for Retina displays and different levels of compression. Learn to think responsively for better collaboration between designers and developers. Create innovative and cutting edge finished products using the latest technologies.

  • What Responsive Web Design means and why you should care.
  • Content comes first.
  • What is the responsibility of the designer in modern web design?
  • Tools of responsive design.
  • Differentiating between ‘Responsive Design’ and ‘Adaptive Design’.
  • HTML5 & CSS3: Don’t look back… or should you? Use by older browsers.
  • Bringing the web a responsive experience.
  • When is responsive design not required or preferred?
  • Viewports vs Screen sizes.
  • Conceptual Media query syntax.
  • Recommended strategies for media querying and creating the first responsive design.
  • The role of fluid layouts.
  • Converting fixed layouts to proportional layouts.
  • Typography: Using ems vs pixels.
  • Alternate images for alternate screen options.
  • CSS grid solutions.
  • Using Grid Layout Systems like BootStrap.
  • Shadows: Text, multiple, box.
  • Background gradients: Linear and Radial and Multiple background images.
  • Sizable icons.
  • Modern web fonts
  • 2D and 3D Transformations.
  • Animating with CSS3.
  • Progressive enhancement vs graceful degradation.
  • Addressing Internet Explorer issues.
  • Designing Grid Layouts for Mobile, Tablets and Desktop Computing.
  • Understanding Twitter Bootstrap and why it’s important.
  • The importance of Organizing your website mockups with named layers and group to pass off to the developer.
  • Designing Responsive Grid Layouts for Mobile, Tablets and Desktop Computing.
  • Using Grids and Guides to organize and keep items in line.
  • Best workflows and best practices professionals to designing web pages for optimal results.
  • Creating Backgrounds and understanding the Gradient tool.
  • Designing buttons and menu Bars using the Shape tool and adding Layer styles.
  • The Basics of Bézier Curves and the Shape tool.
  • Adding Layer Comps to hand off to the developer.
  • Understanding CSS elements and why it’s better to utilize these instead of a JPG.
  • Understanding file formats such as JPEG, GIF, PNG, WEBP and SVG, and which format is best for which circumstance.
  • Viewing the Original and Optimized tabs to compare and contrast results.
  • Understand GIF & PNG’s dithering to maximize tonal shifts.
  • Using TinyPNG uses smart lossy compression to reduce the size your PNG files.
  • Automatically generate image assets from Photoshop layers or layer groups.
  • Using a comma (or + sign) between the layer names in Image Generator to generate multiple files in different sizes or formats.
  • Exporting with options including scaling for Retina displays and different levels of compression.
  • The importance of Wireframing.
  • Setting up multiple layouts using artboards.
  • Building guides for grid systems like Bootstrap.
  • How designers and developers achieve better collaboration from the start of the design process with Bootstrap or another responsive Framework.
  • Creating a responsive design in Photoshop.