Learn how to use Photoshop to create UI elements, web graphics, wireframes, and functional mockups that transition smoothly to production.
- [Emily] Hi, and welcome to Photoshop for the Web. I'm Emily Kay, and I'm excited to share my knowledge of Photoshop, and how it can benefit your web design workflow. Photoshop has added some really great web-based features into the current version, enabling you to streamline your workflow and save time. Through the use of libraries, smart objects, artboards and layer comps, you can easily create multiple versions of a design simultaneously. Optimizing images is now a snap, and it offers a ton of design flexibility.
First, we'll look at how we can best set up a document for web use, and the ins and outs of optimizing the workspace specifically for the web. I'll show you how to leverage the power of libraries to manage project assets, how to share watermarked images within your comps with clients, and easily update to high-res versions with just a click of your mouse. We'll look at responsive design holistically. We'll dive into layout challenges, and how to overcome them as a designer. I'll share with you techniques to create navigation, as well as how to create seamless backgrounds.
We'll work with smart objects, and I'll show you how these amazing elements can give you a ton of flexibility in regards to sizing, styling, and maintaining consistency across multiple files. We'll also work with Photoshop templates, and create our own. We'll create moodboards, wireframes, and a reusable user interface that will transform into a full-fledged, beautiful comp. I'm super excited to share these techniques with you, and more. I want to help you become a better web designer.
Let's dive in.
- 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