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

Introduction

welcome
what you should know
download libraries

Set Up Your Project

document setup
workspaces
artboards
color modes and settings
libraries

Design Responsively

what is responsive design
set breakpoints
design tips and tricks
layer comps
creating navigation elements
seamless textures and backgrounds
smart objects - embedded
smart objects - linked
convert smart objects
preset templates
custom templates
styles panel

Process

mood boards
wireframes
reusable ui
create comps

Collaboration

style guides
client review comps

Image Considerations

retina displays
image types for the web

Export Assets for Development

legacy save for the web
quick export
export as
using generator

Conclusion

next steps