Join Justin Seeley for an in-depth discussion in this video Creating and using CSS with Photoshop, part of Photoshop CC for Web Design.
- View Offline
- Exercise Files
…At the beginning of this course we talked about…Photoshop's new role in the modern web design workflow.…And, more specifically, how it's changing and sort of diminishing.…Well, Adobe's recognizing this, as well.…And they're trying to bridge the…gap between designers and developers using Photoshop.…And they're doing that by adding…in capabilities for things like exporting CSS.…And that's what we're going to be talking about in this…movie, how to generate CSS code from your Photoshop mockups.…So, what I'm going to do is I'm first going to open up…this header group right here, and select the Hover Color element.…
And what I'm going to do now is I'm going to zoom…in, so you can see this little box right here.…And so what we're doing, basically, we are controlling this…box, just figuring out the CSS properties of that box.…And what I want to do is, I want to make some changes…to it so that we have a little more to look at.…But first, let's just see how the CSS function works.…I'm going to right click on the layer and choose copy CSS.…
- Why use Photoshop for web design?
- Decoding the mysteries behind screen size and resolution
- Giving your website a purpose with a content strategy
- Customizing a web workspace in Photoshop
- Designing responsively
- Creating wireframes on a grid
- Choosing colors and fonts
- Developing a UI kit with Photoshop
- Assembling a page mockup
- Creating image sprites
- Optimizing images
- Integrating with the rest of the Adobe Creative Cloud
Skill Level Intermediate
1. Core Concepts
Understanding the "new web"2m 39s
2. Setting Up Photoshop for Web Work
3. Designing Responsively
What is responsive design?5m 26s
4. Creating a Wireframe
5. Creating Aesthetic Elements
6. Creating a UI Kit with Photoshop
7. Assembling a Page Mockup
8. Optimizing Web Graphics
9. Creating Image Sprites
10. Using Other Apps in Your Workflow
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.