Discover Classes. Earn Rewards.

Responsive Web Design with Photoshop & Illustrator CC

at Ascend Training - Near North Side

Course Details
$1,297 5 seats left
Start Date:

Thu, Oct 03, 9:30am - Oct 04, 4:00pm (2 sessions)

Near North Side, Downtown/Loop
515 N State St 14th Floor
Grand Ave & State St
Chicago, Illinois 60654
Purchase Options
No Booking Fees Book Now Save to WishList

1 person saved this class

Give as a Gift
Class Level: All levels
Age Requirements: 18 and older
Average Class Size: 10

What you'll learn in this responsive design training:

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.

Getting Started with Responsive Design:
  • 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?
Targeting Different Viewpoint: Media Queries:
  • Viewports vs Screen sizes.
  • Conceptual Media query syntax.
  • Recommended strategies for media querying and creating the first responsive design.
Fluid Layouts:
  • 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.
Dynamic Design with CSS3:
  • Shadows: Text, multiple, box.
  • Background gradients: Linear and Radial and Multiple background images.
  • Sizable icons.Modern web fonts
CSS3 Transitions, Transformation and Animation:
  • 2D and 3D Transformations.
  • Animating with CSS3.
Addressing Cross-Browser Responsive Design Issue:
  • Progressive enhancement vs graceful degradation.
  • Addressing Internet Explorer issues.
Designing for Web and Mobile:
  • 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 Element for Iphone, Android and Web:
  • 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.

Photoshop's Save for Web and Image Generation:
  • 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.
Designing Complete Web Page In Photoshop:
  • 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.
Prerequisites: Attendees must have solid computer skills.

Still have questions? Ask the community.

Refund Policy
All classes need at least 3 students to run. 


Google Map

Ascend Training

All classes at this location

Start Dates (1)
Start Date Time Teacher # Sessions Price
9:30am - 4:00pm TBD 2 $1,297
This course consists of multiple sessions, view schedule for sessions.
Fri, Oct 04 9:30am - 4:00pm TBD

Benefits of Booking Through CourseHorse

Booking is safe. When you book with us your details are protected by a secure connection.
Lowest price guaranteed. Classes on CourseHorse are never marked up.
This class will earn you 12970 points. Points give you money off your next class!
Questions about this class?
Get help now from a knowledge expert!
Questions & Answers (0)

Get quick answers from CourseHorse and past students.

Reviews of Classes at Ascend Training (2)

Similar Classes

School: Ascend Training

Ascend Training

Ascend has served the Chicago creative community offering the highest quality training programs since 1998. 

Ascend has dedicated top industry professionals to training web developers, graphic desighners, publishers and video editors.

Our philosophy is that students learn by doing, and our classes...

Read more about Ascend Training

CourseHorse Approved

This school has been carefully vetted by CourseHorse and is a verified Chicago educator.

Ready to take this class?
Taking this class for work? Get exclusive perks & discounts for free.