2014
Lynda
Justin Seeley
3:43
English

The web design landscape is constantly changing, but Photoshop is still a classic. Designers use it to create UI elements, web graphics, wireframes, and functional mockups. Designs that transition beautifully and easily to production. Join staff author Justin Seeley as he reveals how Photoshop is used in the modern web design workflow. Together, you'll create a mockup for a creative company that contains responsive templates, a fully developed color and font theme, and a UI kit full of buttons, navigation bars, check boxes, and other ready-to-use interface elements. He also shows how to optimize web graphics, create image sprites, and integrate other apps like Illustrator and Muse in your web design workflow. Follow along, and learn how to design better web deliverables for your next project.

Introduction
Welcome
Using exercise files
How to send feedback
1. Core Concepts
Understanding the "new web"
Why use Photoshop for web design?
Decoding screen size and resolution
2. Setting Up Photoshop for Web Work
Creating a web design workspace
Creating documents for web projects
Understanding web color models
Adjusting Photoshop color settings
Creating a developer-friendly file
3. Designing Responsively
What is responsive design?
Choosing the right breakpoints for your design
Creating responsive templates in Photoshop
4. Creating a Wireframe
Reviewing client specs
Creating a sketch
Exploring grid systems
Setting up your project
Building your wireframe with shapes and text
5. Creating Aesthetic Elements
Developing a color theme
Choosing the right fonts
Setting up character and paragraph styles
Finding images for your mockup
6. Creating a UI Kit with Photoshop
Choosing a UI theme
Using icon fonts and sets
Adding UI elements to your wireframe
Saving UI elements as shapes
7. Assembling a Page Mockup
Applying your color scheme
Styling navigation
Styling input areas
Adding copy from your client
Adding images to your mockup
Adding the finishing touches to your design
8. Optimizing Web Graphics
Understanding when to use images vs. CSS
Decoding web file formats
Optimizing individual images
Using the Photoshop web asset generator
How and when to use SVGs
9. Creating Image Sprites
What is an image sprite?
Developing a sprite grid
Assembling your sprite
Optimizing sprite images
10. Using Other Apps in Your Workflow
Creating and using CSS with Photoshop
Exporting HTML from Photoshop to an integrated development environment (IDE)
Using Edge Reflow to test responsive designs
Using Photoshop files in Muse websites
Conclusion
Goodbye

http://www.lynda.com/

Download File Size:569.68 MB

---