Author
Released
3/17/2014- 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
Duration
Views
- [Voiceover] Hello and welcome to Photoshop CC for Web Design. My name is Justin Seeley and I'm a staff author here at lynda.com. The goal of this course is to show you how Photoshop can and is being used in modern web design workflows. I'm gonna start off by covering some core concepts of web design, including how the web is evolving with the advent of smartphones and tablet devices, why you'd want to use Photoshop for web design in the first place, and we'll also debunk some myths about screen size and resolution as well.
From there, you and I are gonna working together to create a full website mock-up for a fictional company called Two Trees Creative. I'll show you how to set up your Photoshop environment for web work, create templates for responsive web design projects, wireframe your ideas, design aesthetic elements like UI components, we'll finally assemble a finished mock-up, and then I'll show you how to deliver your final results to your client or to a developer. The landscape of the web is definitely changing, but I think Photoshop still has a place at the table.
Hopefully by the end of this course, you'll have a better idea of where Photoshop fits in the modern web workflow, and how you can use it to create better web deliverables for your next project. Okay, we've got a lot to cover, so if you're ready, let's begin our look at Photoshop CC for Web Design.
Related Courses
-
Design the Web: Layer Comps
with Chris Converse26m 5s Intermediate -
Creative Quick Tips
with Justin Seeley7h 1m Intermediate
-
Introduction
-
Welcome1m 19s
-
How to send feedback1m 9s
-
-
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
-
Reviewing client specs4m 2s
-
Creating a sketch5m 53s
-
Exploring grid systems11m 14s
-
Setting up your project6m 12s
-
-
5. Creating Aesthetic Elements
-
Developing a color theme4m 37s
-
Choosing the right fonts5m 51s
-
-
6. Creating a UI Kit with Photoshop
-
Choosing a UI theme3m 43s
-
Using icon fonts and sets5m 46s
-
Saving UI elements as shapes2m 35s
-
-
7. Assembling a Page Mockup
-
Applying your color scheme6m 26s
-
Styling navigation4m 58s
-
Adding copy from your client3m 26s
-
Adding images to your mockup13m 29s
-
-
8. Optimizing Web Graphics
-
Decoding web file formats2m 38s
-
Optimizing individual images4m 25s
-
How and when to use SVGs4m 5s
-
9. Creating Image Sprites
-
What is an image sprite?1m 32s
-
Developing a sprite grid3m 17s
-
Assembling your sprite3m 3s
-
Optimizing sprite images2m 35s
-
-
10. Using Other Apps in Your Workflow
-
Conclusion
-
Goodbye1m 33s
-
- 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.
CancelTake 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.
Share this video
Embed this video
Video: Welcome