Chicago & Los Angeles | Photoshop Training
Fast Facts
2 days
Max 10 students
9.00am to 4.30pm
One per student
895.00
Photoshop Web Graphics
Course Description
Photoshop CS4 Web Graphics is a 2-day hands-on course where you will learn how to create graphics for the web. Topics include an introduction to Adobe Photoshop CS4, creating and modifying images, creating a website layout, slicing, assembling the site in Dreamweaver, roll over images, animated gifs, image optimization and more.
Students will learn what makes Photoshop a fun and powerful tool for image creation and manipulation. They will also learn the principals of good website design and how to work with clients to understand their online goals.
Projects include creating a cool website layout from scratch and assembling it in Adobe Dreamweaver CS4. This class is FREE when you register for Dreamweaver training.
Target Audience
Any aspiring web designer who wants to create or modify graphics using Photoshop. No prior Photoshop experience is required however website development experience with Dreamweaver or XHTML/CSS is recommended.
Learning Objectives
Upon successful completion of this Photoshop training course students will be able to:
- Understand Photoshop’s basic capabilities and tools
- Create and manage layers
- Work with layer effects
- Create images from scratch
- Manipulate existing images in a non-destructive manner
- Optimize images for the web
- Create basic animations
- Create roll over images
- Design website layouts
- Slice images
- Assemble slices in Dreamweaver
- Create a web photo gallery
Upcoming Classes
Chicago |
Feb, 2012 | Mar, 2012 | Apr, 2012 | May, 2012 |
Los Angeles |
Feb, 2012 | Mar, 2012 | Apr, 2012 | May, 2012 |
* Class almost full ! Class guaranteed to run † Class is full
Course Outline
Photoshop CS4 fundamentals
- Bitmap vs. vector graphics
Photoshop CS4 tools
- Introduction to basic painting and manipulation tools
- PROJECT: Exploring Photoshop painting tools with a photograph of Chicago’s Navy Pier
- Color management and colors for the web
- Healing and cloning tools
- PROJECT: Making a silly Alaska glacier trekking photo look dangerous
- Dodge, burn and blur tools
- Type tools
- Tool options bar
- Buried tools
Photoshop CS4 panels
- Moving panel groups
- Getting more panels
- Collapsing and expanding panels
- Organizing panels and docking
- Saving and loading workspaces
- The history panel
Creating new documents
- Units for the web
- Guides and rulers
Working with layers
- What is a layer?
- PROJECT: Show your muscles and give yourself a realistic tattoo
- What is non-destructive editing
- Organizing and managing layers
- Using layer groups
- PROJECT: Create a sale graphic for a Detroit sports website
- Painting with layers
- Transforming layers
- Layer effects
- PROJECT: Creating a collage using 4 images and editing non-destructively
- Adjustment layers
- Layer masks
- Shape layers
- PROJECT: Enjoying a blue can of Coca-Cola
Save for Web & Devices
- What’s the point?
- The interface
- When to use GIF, JPG or PNG
- Previewing as a foreground and background image in a browser
Creating background images
- PROJECT: Creating striped background images
- Striped background images
- PROJECT: Creating a custom tiling background pattern with a logo
- Tiling patterns
- Full screen background images
Working with transparency
- Creating images with transparency
- Optimizing transparent images with solid colors
- Optimizing transparent images with soft edges
- Adding transparency to non-transparent images
Creating navigation systems
- PROJECT: Creating a cool website navigation system
- Using shape tools
- Resizing and manipulating shapes
- Coloring shapes
- Aligning shapes
- Layer styles
- Creating 3D buttons
- Creating glossy buttons
- Using smart objects efficiently
- Using custom shapes for icons
Preparing photos for the web
- PROJECT: Going from a digital camera to the web
- Non-destructive editing
- Working on new layers
- Removing flaws
- Adjustment layers
- Resizing
- Sharpening
- Filter -> Convert for Smart Filters
- Filter -> Sharpen -> Smart Sharpen
- Optimizing
Creating a website mockup in Photoshop CS4
- PROJECT: Creating a cool website layout
- Determining the proper layout dimensions
- Wireframing
- Represent elements with 1-color rectangles
- General design rules
- Golden Rule of thirds
- Using grids and guides
- Inspiration
Slicing a website mockup
- Why slice an image?
- Slicing vs. the crop tool
- PROJECT: Slicing your Photoshop layout
- Basic slicing
- Slice management
- Slice options
- User slices, auto slices and layer-based slices
- Optimizing and saving slices
- Can Photoshop CS4 write HTML?
- Can Photoshop CS4 write CSS?
Constructing a Photoshop mockup in Dreamweaver CS4
- Planning
- HTML
- CSS
- Foreground vs. background images
- Assembly
- PROJECT: Building your Photoshop layout in Dreamweaver
Creating rollover images
- Photoshop’s role and Dreamweaver’s role
- PROJECT: Making your own rollover image
- Using multiple layers to create rollover images
- Using layer comps to create rollover images
- Optimizing rollover images
- Save slices twice
Creating animated graphics
- PROJECT: Animating a rocket launch
- Understanding the animation panel
- Creating a basic animation
- Basic tweening
- Tweening positioning, opacity and effects
- Controlling looping and timing
- Previewing animation in animation panel
- Optimizing an animated graphic
Automating tasks in Photoshop CS4
- Using the image processor to efficiently manage multiple images
- Creating a web gallery using Bridge CS4
- Displaying large or high resolution images on the web using Zoomify
Dreamweaver CS4 integration
- Creating a smart object
- Updating smart objects
- Photoshop/Dreamweaver copy and paste integration
Shortcuts
- How to learn them
- Some good ones to know
- How to create custom shortcuts
- A better shortcut for Save for Web & Devices?
Good resources to keep learning and improve your skills
- Websites
- Podcasts
Meet the Instructors
Gabriel
Gabriel founded a design and marketing firm in 1996 where he continues to work to this day. He is passionate about his work and delights in teaching the trade to his students.
He holds a Bachelor of Fine Arts in Multimedia Design and has won awards in both graphic and interactive web design which he jokes, "I carry with me at all times."
