Author
Justin Seeley
Updated
10/4/2013Released
7/17/2012- Customizing a web workspace
- Decoding the mysteries behind screen size and resolution
- Coloring web graphics
- Using layers and layer comps effectively
- Working with transparency
- Creating wireframes on a grid
- Styling text
- Creating image sprites
- Optimizing images as JPEG, GIF, or PNG files
- Integrating with the rest of the Adobe Creative Suite
Skill Level Appropriate for all
Duration
Views
- [Voiceover] Hello and welcome to Photoshop for Web Design. My name is Justin Seeley. In this course, I'll be walking you through how to use Photoshop as a web design and mock-up tool. We'll start off slow by covering the basics like setting up a new document, using grid systems and working with color on the web. Then we'll take a look at more complex topics like layer management, creating wireframes for websites and applications, simulating user interface elements and exporting graphics in a variety of different formats. By the end of this course, you'll have gone through my entire workflow for creating a website mock-up that you can then take into Dreamweaver and code yourself or hand off to a developer to complete the project for you.
If you're ready, let's get started with Photoshop for Web Design.
-
Introduction
-
Welcome44s
-
-
1. Core Concepts
-
Designing for screens1m 8s
-
-
2. Working with Color
-
Adjusting color settings4m 13s
-
Creating a color palette4m 56s
-
Creating custom swatches3m 34s
-
-
3. Working with Layers
-
Renaming and grouping layers7m 19s
-
4. Working with Shapes and Objects
-
Creating vector shapes5m 2s
-
Working with Smart Objects7m 47s
-
Importing images3m 57s
-
5. Creating Wireframes
-
Planning your project3m 13s
-
Using guides and rulers6m 40s
-
Using a grid system8m 28s
-
-
6. Working with Text
-
Understanding web-safe fonts2m 41s
-
Creating editable 3D text2m 51s
-
7. Using Layer Styles
-
Creating better bevels6m 9s
-
8. Creating a Web Site Mockup
-
Organizing page structure2m 29s
-
Adding master elements5m 37s
-
Creating navigation4m 36s
-
Working with text8m 31s
-
Creating media placeholders7m 22s
-
Creating buttons7m 15s
-
Creating form fields7m 54s
-
9. Optimizing Web Graphics
-
Understanding slicing2m 4s
-
Slicing up a mockup4m 15s
-
Optimizing photographs4m 17s
-
-
10. Creating Image Sprites
-
Understanding image sprites1m 25s
-
Creating a sprite grid2m 54s
-
Assembling a sprite4m 51s
-
-
11. Automating Your Web Workflow
-
Creating a basic action5m 28s
-
Exploring batch processing2m 55s
-
Creating droplets3m 20s
-
Using the Image Processor2m 18s
-
-
12. Working with Other Apps
-
Conclusion
-
Goodbye50s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press 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