Photoshop for Web Design

Course details

Working in web design involves creating UI (user interface) elements—icons, graphics, wireframes, and mockups. Adobe Photoshop provides the capabilities needed to make these design elements transition smoothly and easily to production. In this course, learn how to use Photoshop for modern web design workflows. Join Emily Kay as she takes you through a responsive web design project, including setup, using templates, making comps, and exporting for the web. Emily shows how to work with artboards, libraries, and smart objects. She demonstrates the process for creating several deliverables—wireframes, mockups, mood boards, style guides, navigation elements, and more.

Learning objectives
Setting up workspaces and artboards
Using libraries
Responsive design tips and tricks
Setting breakpoints
Creating navigation elements
Creating textures and backgrounds
Embedding or linking smart objects
Making custom templates
Creating reusable UI elements
Saving and exporting for the web
Using Generator

Concepts

0. Introduction

01 - Welcome
02 - What you should know
03 - Download libraries

1. Set Up Your Project

04 - Document setup
05 - Workspaces
06 - Artboards
07 - Color modes and settings
08 - Libraries

2. Design Responsively

09 - What is responsive design
10 - Set breakpoints
11 - Design tips and tricks
12 - Layer comps
13 - Creating navigation elements
14 - Seamless textures and backgrounds
15 - Smart objects - Embedded
16 - Smart objects - Linked
17 - Convert Smart Objects
18 - Preset templates
19 - Custom templates
20 - Styles panel

3. Process

21 - Mood boards
22 - Wireframes
23 - Reusable UI
24 - Create comps

4. Collaboration

25 - Style guides
26 - Client review comps

5. Image Considerations

27 - Retina displays
28 - Image types for the web

6. Export Assets for Development

29 - Legacy save for the web
30 - Quick Export
31 - Export As
32 - Using Generator

Conclusion

33 - Next steps

Photoshop for Web Design

Authors

Emily Kay