O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Photoshop For The Web

Video Description

In this training course for Adobe Photoshop, expert trainer Andy Anderson teaches you how to manipulate graphics and video to use on a web site. Since the release of its first version many years ago, Photoshop has added numerous tools tailored for use with graphics destined for the web. In this video tutorial you will learn how to master these tools.
This computer based Photoshop tutorial demonstrates that Photoshop is capable of more than simply optimizing an image for the web. Andy covers topics ranging from creating a web page mockup to understanding and applying the correct colour type to your images. You will learn about different image formats, which ones you should use, and when. Included are lessons covering vector versus raster imaging, preparing your images for the Internet, and working with layers. Andy even reveals tips and tricks to using Photoshop to create web-friendly videos, making basic animations, generating navigation graphics, and setting up automation and workflow to make you more efficient.
Once you have completed this computer based training course on Photoshop for Web Design, you will have a strong grasp of the fundamental tools and capabilities that Photoshop has to offer, and how to apply those tools specifically to your web design related projects. Working files are included, allowing you to follow along with the author throughout the lessons.

Table of Contents

  1. Introduction
    1. Course Intro 00:01:17
    2. What You Will Learn 00:04:15
    3. Using The Exercise Files 00:01:59
  2. The First Step
    1. First Steps Intro 00:01:00
    2. Image Resolution Versus Screen Resolution 00:03:18
    3. All About Workflow And Workspaces 00:04:19
    4. Generating A Web Page Mockup 00:02:15
    5. Working With Mobile Devices 00:02:25
    6. Creating Pages For Multiple Devices 00:02:13
  3. The Web And The World Of Colour
    1. The Web And The World Of Colour Intro 00:01:01
    2. Working With Colour Settings For The Web 00:03:34
    3. Understanding Hexadecimal Color 00:04:17
    4. Generating Web Color Palettes 00:04:57
    5. Bit-Depth And Color 00:02:02
    6. Working With Indexed Colour 00:05:33
    7. Creating A Custom Web Color Set 00:04:35
    8. Working With Bitmap And Grayscale 00:05:02
    9. Applying Color To Pixels, Shapes, And Text 00:05:51
  4. Web Image Formats
    1. Web Image Formats Intro 00:01:22
    2. Is 72ppi The Magic Number? 00:04:12
    3. GIF Versus PNG-8 00:04:06
    4. JPEG Versus PNG-24 00:04:36
    5. Compressing GIF And PNG Images 00:07:46
    6. Compressing JPG Images 00:05:15
  5. Mathematical Imagery
    1. Mathematical Imagery Intro 00:01:04
    2. Vector Versus Raster Images 00:04:50
    3. Photoshop And Vector Design 00:05:01
    4. Controlling Vector Shapes 00:05:32
    5. Using Existing Vector Art 00:03:37
    6. Working With Smart Objects 00:03:15
    7. Non-Destructive Web Image Editing 00:02:26
  6. Prepping Photos For The Internet
    1. Prepping Photos For The Internet Intro 00:01:19
    2. Going From Raw To The Web 00:04:23
    3. Resizing And Masking Images 00:05:01
    4. Optimizing A JPEG 00:10:18
    5. Optimizing A GIF 00:06:18
    6. Slicing Images 00:06:40
    7. Adding A Watermark 00:04:48
  7. Working With Layers
    1. Working With Layers Intro 00:01:23
    2. Using The Layers Panel 00:07:30
    3. Organizing The Layers Panel 00:09:13
    4. Finding What You Need And Quickly 00:05:11
    5. Using Layer Comps 00:04:13
    6. Applying Blending Modes 00:03:41
    7. Opacity Versus Fill 00:03:14
  8. Creating Web-Friendly Videos
    1. Creating Web-Friendly Videos Intro 00:01:06
    2. Importing Video Into Photoshop 00:04:32
    3. Working With The Timeline Panel 00:04:52
    4. Timeline Shortcuts 00:03:04
    5. Editing Video With Filters, Effects, And Adjustments 00:06:55
    6. Using Blending Modes With Video 00:04:12
    7. Adding Text To A Video 00:03:05
    8. Rendering Video For The Web 00:03:59
  9. Create Basic Web Animations
    1. Create Basic Web Animations Intro 00:01:12
    2. The Timeline And Layers Panels 00:04:02
    3. Generating A Basic Animation 00:04:58
    4. Creating An Animation From Multiple Documents 00:06:37
    5. Using The Unify Features 00:05:17
    6. Using Tweening To Create Motion 00:04:21
    7. Generating A Slide Show 00:05:25
  10. Generating Navigation
    1. Generating Navigation Intro 00:01:32
    2. Creating A Text Navigation Button 00:06:18
    3. Generating Buttons With Layer Styles 00:07:29
    4. Using Smart Objects With Buttons 00:06:00
    5. Making Glassine Buttons 00:08:19
    6. Creating Rollover Buttons 00:06:24
    7. Saving Out For The Web 00:04:17
  11. Designing Web Backgrounds
    1. Designing Web Backgrounds Intro 00:01:25
    2. Backgrounds 101 00:05:52
    3. Managing Background Compression 00:07:36
    4. Designing Backgrounds Using Offset 00:05:00
    5. Creating Unique Patterned Backgrounds 00:07:54
    6. Using Gradients With Backgrounds 00:04:09
  12. Generating A Web Site Mockup
    1. Generating A Web Site Mockup Intro 00:01:04
    2. Creating A Wireframe Site Model 00:09:42
    3. Designing Site Structure 00:07:50
    4. Adding Navigation 00:03:39
    5. Adding Images 00:07:03
    6. Adding Text 00:06:46
    7. Adding Touch-Friendly Buttons 00:05:17
    8. Adding Form Fields 00:07:11
    9. Using Layer Comps To Display The Site 00:03:45
  13. Automation And Workflow
    1. Automation And Workflow Intro 00:01:44
    2. Creating A Basic Action 00:05:52
    3. Performing Batch Processing 00:05:09
    4. Generating A Droplet 00:04:31
    5. Moving From Photoshop To Dreamweaver 00:03:55
  14. Conclusion
    1. Final Thoughts 00:02:00