Photoshop for Web Design

Introduction

• Welcome
• What you should know
• Download libraries

1. Set Up Your Project

• Document setup
• Workspaces
• Artboards
• Color modes and settings
• Libraries

2. 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

3. Process

• Mood boards
• Wireframes
• Reusable UI
• Create comps

4. Collaboration

• Style guides
• Client review comps

5. Image Considerations

• Retina displays
• Image types for the web

6. Export Assets for Development

• Legacy save for the web
• Quick Export
• Export As
• Using Generator

Conclusion

• Next steps