Join Justin Seeley for an in-depth discussion in this video Saving UI elements as shapes, part of Photoshop CC for Web Design.
- View Offline
- Exercise Files
…Throughout this chapter we've been talking about how great icon fonts…are and how easy they are to really spruce up your designs.…And, how great they are to work with not only on the web, but also in Photoshop.…The problem is that not everybody's…going to have these fonts installed on their…computer and they may not even want to install the fonts, as well.…So as you're sharing these comps with other people, especially the…PSD files, it may become problematic for these fonts to really translate.…So, in this movie what I'm going to do is, I'm going to show you how to turn…these UI elements that you've created using Font…Awesome, into Shape layers very quickly and easily.…
So, the first thing we're going to do is we're…going to convert the arrows up here on the portfolio.…So, just twirl open the Portfolio group.…And then we're going to find the right button, right here.…And so, what I'm going to do with this Text layer selected,…is go up to the Type menu and choose Convert to Shape.…And it just converts it right over, and you can…
- 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.