Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Photoshop CC for Responsive Web Design
Introduciton
Intro – What is responsive design? (2:53)
Concepts You Need To Understand
Exploring a responsive site (9:01)
Planning a responsive site (3:05)
Where you and Photoshop fit into the design process (3:33)
Screen size vs. resolution (3:34)
Customizing our Photoshop setup
Arranging the workspace (5:17)
Understanding color (4:27)
Color Handout
Adjusting Photoshop's color settings (3:55)
Organization (2:28)
Designing for Multiple Devices
Determining breakpoints (1:03)
Grid handout
Bootstrap Grid (4:33)
Opening a new document (3:17)
Creating our large grid (10:16)
Creating our medium grid (8:02)
Creating our small grid (7:01)
The Backbone of Photoshop – Layers
Using the layers panel (5:53)
Color
Creating custom color swatches (3:56)
Working with Adobe Color (2:38)
Working with Basic Shapes
Vector vs. Rasterized graphics (2:55)
Three ways to use the shape tools (3:59)
Converting shapes to paths (1:45)
Drawing rectangles and ellipse's polygons and stars (3:38)
Drawing lines (2:08)
Building the large grid graphic elements (6:34)
Building the x-small grid graphical elements (9:40)
Building the main content sections (7:04)
Building the sidebar (6:18)
The pen tool (7:40)
Finishing The Graphical Elements (8:06)
Working with Text
Web safe fonts (1:52)
Google fonts (2:35)
Point and paragraph text (1:41)
Styling Text (5:57)
Setting up paragraph styles (2:45)
Setting up character styles (3:32)
Text for Mobile Devices (3:24)
Icon fonts (4:30)
Importing Artwork
Layer Masks (5:27)
Importing our logo and imagery (4:58)
Adding Effects
Adjustment Layers (2:40)
Understanding layer styles (3:05)
Saving layer styles (2:06)
Blend Modes (3:45)
Gathering our Assets
Understanding web file formats (5:02)
Exploring the save for web dialogue box (1:32)
Adobe Generator (4:20)
Final Thoughts
Goodbye (0:55)
Exploring a responsive site
Complete and Continue