Join Justin Seeley for an in-depth discussion in this video Decoding screen size and resolution, part of Photoshop CC for Web Design.
- View Offline
- Exercise Files
…Before we start learning how to create web graphics, we first need to understand…the difference between something called resolution and…something called pixel dimension or screen size.…For many years, it's been assumed that we should always design our…web graphics in a 72 pixel per inch or dots per inch resolution.…And in many ways, that's considered to be…the standard practice for creating graphics floor screens.…However, in today's day and age we have…to deal with many device types and screen resolutions.…For instance, Apple has a series of retina devices that…go into its iPad, iPhone and even now, Macbook Pros.…
Google devices like the Nexus 5 are also now at a high resolution screen as well.…These resolutions exceed even 300 pixels per inch.…There are also many other devices and screens that go even…higher than 72, like 150 or 240, and even higher than that.…The key thing to remember here is that no matter what the…resolution, the pixel dimension is what counts in what stays the same.…The pixel dimension refers to the actual amount of space an…
- 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.