against the clock books for sale
TRANSCRIPT
Adobe Photoshop Flash & Dreamweaver CS6
Web Design Portfolio2nd Edition
The fonts utilized in these training materials are the property of Against The Clock, Inc., and are supplied to the legitimate buyers of the Against The Clock training materials solely for use with the exercises and projects provided in the body of the materials. They may not be used for any other purpose, and under no circumstances may they be transferred to another individual, nor copied or distributed by any means whatsoever.
A portion of the images supplied in this book are copyright © PhotoDisc, Inc., 201 Fourth Ave., Seattle, WA 98121, or copyright ©PhotoSpin, 4030 Palos Verdes Dr. N., Suite 200, Rollings Hills Estates, CA. These images are the sole property of PhotoDisc or PhotoSpin and are used by Against The Clock with the permission of the owners. They may not be distributed, copied, transferred, or reproduced by any means whatsoever, other than for the completion of the exercises and projects contained in this Against The Clock training material.
Against The Clock and the Against The Clock logo are trademarks of Against The Clock, Inc., registered in the United States and elsewhere. References to and instructional materials provided for any particular application program, operating system, hardware platform, or other commercially available product or products do not represent an endorsement of such product or products by Against The Clock, Inc.
Photoshop, Acrobat, Illustrator, InDesign, PageMaker, Flash, Dreamweaver, Premiere, and PostScript are trademarks of Adobe Systems Incorporated. Macintosh is a trademark of Apple Computer, Inc. QuarkXPress is a registered trademark of Quark, Inc. Word, Excel, Office, Microsoft, and Windows are either registered trademarks or trademarks of Microsoft Corporation.
Other product and company names mentioned herein may be the trademarks of their respective owners.
4710 28th Street North, Saint Petersburg, FL 33714800-256-4ATC • www.againsttheclock.com
10 9 8 7 6 5 4 3 2 1 Print book: 978-1-936201-39-6
Ebook book: 978-1-936201-40-2
Managing Editor: Ellenn BehoriamCover & Interior Design: Erika KendraCopy Editor: Angelina Kendra
Copyright © 2014 Against The Clock, Inc. All rights reserved. Printed in the United States of America. This publication is protected by copyright, and permission should be obtained in writing from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise.
iii
• Steve Bird, Adobe Certified Expert
• Colleen Bredahl, United Tribes Technical College
• John Craft, Appalachian State University
• Debbie Davidson, Against The Clock, Inc
• Charlie Essers, photographer, Lancaster, Calif.
• Chris Hadfield, Doane College
• Jennifer Hair, Shawnee Mission East High School
• Kelly McCormack, Adobe Certified Instructor
• Pam Harris, University of North Texas at Dallas
• Brian McDaniel, Central Georgia Technical College
• Samantha Schmitz, Double D Cupcakes, Lancaster, Calif.
• Richard Schrand, International Academy of Design & Technology, Nashville, TN
• Jay Tarby, John Carroll University
• Michael Watkins, Baker College of Flint
Finally, thanks also to Angelina Kendra, editor, for making sure that we all said what we meant to say.
AcknowledgementsAbout AgAinst the CloCk
Against The Clock, long recognized as one of the nation’s leaders in courseware development, has been publishing high-quality educational materials for the graphic and computer arts industries since 1990. The company has developed a solid and widely-respected approach to teaching people how to effectively utilize graphics applications, while maintaining a disciplined approach to real-world problems.
Having developed the Against The Clock and the Essentials for Design series with Prentice Hall/Pearson Education, ATC drew from years of professional experience and instructor feedback to develop The Professional Portfolio Series, focusing on the Adobe Creative Suite. These books feature step-by-step explanations, detailed foundational information, and advice and tips from industry professionals that offer practical solutions to technical issues.
Against The Clock works closely with all major software developers to create learning solutions that fulfill both the requirements of instructors and the needs of students. Thousands of graphic arts profes-sionals — designers, illustrators, imaging specialists, prepress experts, and production managers — began their educations with Against The Clock training books. These professionals studied at Baker College, Nossi College of Art, Virginia Tech, Appalachian State University, Keiser College, University of South Carolina, Gress Graphic Arts Institute, Hagerstown Community College, Kean University, Southern Polytechnic State University, Brenau University, and many other educational institutions.
About the Author
Erika Kendra holds a BA in History and a BA in English from the University of Pittsburgh. She began her career in the graphic communications industry as an editor at Graphic Arts Technical Foundation before moving to Los Angeles in 2000. Erika is the author or co-author of more than twenty books about Adobe graphic design software. She has also written several books about graphic design concepts such as color reproduction and preflighting, and dozens of articles for online and print journals in the graphics industry. Working with Against The Clock for more than ten years, Erika was a key partner in developing The Professional Portfolio Series of software training books.
Contributing Authors, Artists, And editors
A big thank you to the people whose artwork, comments, and expertise contributed to the success of these books:
iv
Walk-Through
4444projectAnimated Internet Ads
Your client wants to create a series
of ads to place on Web sites that
are used by existing and potential
customers. � ey have asked you
to create a short animation rather
than just a static image, in hopes of
attracting more attention when the
ad appears in a browser with other
content.
� is project incorporates the following skills:
� Creating shape tweens to animate changes in shape and color
� Creating classic tweens to animate changes in position and opacity
� Adding text to a Flash movie
� Adapting � le content to match di� erent � le dimensions
� Using a Flash project to manage assets for multiple � les
� Publishing a � le to SWF for distribution
clie
nt c
om
men
ts
art
dire
cto
r co
mm
ents
pro
ject
ob
ject
ives
Project Meeting� e Chateau is a unique destination restaurant that consistently wins awards from local and national food and wine reviewers. � e restaurant was � rst opened in 1952 by Paul and Gina Roseman as a rest stop and diner for travelers along the Sierra Highway. While the restaurant remains in the family, it has evolved from home-style comfort food to more exotic fare such as wild game with a French twist.
� e history of the restaurant is important to us. We have a Roseman family portrait — my great-grandparents — that we’d like to include on the back of the menu. � e picture is a bit grainy and has some damage, though, and we’d like you to clean it up as much as possible. We also want to include a picture of the current executive chef, who is Paul and Gina’s great-grandniece, in the same section. � e only picture we have of her is very dark though, and we’re hoping you can make it look better.
In addition, we’ve taken several pictures of di� erent meals that Suzanne created. We want you to make sure they will look as good as possible when printed. You’re the expert, so we trust that you know what needs to be done.
Digital images come from a wide variety of sources: scanned photographs and digital cameras are the two most common, as is the case for the client’s images for this project. Some images can be used as is, or at least with only minor correction. Realistically, most professional photographers reshoot an image until they have one that doesn’t need your help.
Unfortunately, however, not every project involves a professional photographer. Consumer-level cameras have come down in price and gone up in quality to the point where many non-professionals shoot their own photos without proper skill or knowledge. � at means many of those images require a bit of help — and some require a lot.
Even when a professional photographer is involved, not every image comes from a perfectly lit studio. Location shots — where a subject is photographed in a “real-world” setting — can’t always be captured perfectly. � ose images usually need work as well. Fortunately, Photoshop provides a powerful toolset for solving most image problems, or at least improving the worst of them.
To complete this project, you will:
� Remove grain with blur and sharpen techniques
� Heal severe scratches
� Clone out major damage
� Correct minor problems with the Brightness/Contrast adjustment
� Correct tonal range with the Levels adjustment
� Correct lighting problems with the Exposure adjustment
� Correct overall color problems with the Color Balance adjustment
� Correct precise color values with the Curves adjustment
� Combine multiple exposures with the Merge to HDR Pro utility
469Project 9: Yosemite CSS Layout
Stage 3 Using CSS to Control Content
The first stage of this project focused on building a layout structure with div tags and ID selectors; in
the second stage, you created a template file to more easily apply the defined layout to multiple pages.
Although defining structure is a significant part of designing pages, it is only half the story —
professional Web design also requires controlling the content in pages.
When you create a complex project such as a complete Web site, it’s a good idea to have a solid
plan for completing all required work. Consider what you know from the initial project analysis:
• Thebackgroundimageshouldextendtheentireheightof
thebrowserwindow.
• Alltextinthesiteshoulduseasans-ser
iffont.
• Paragraphsofcopyinthemaintextneedtobe
smallanddarkgray,withlargespacing
between lines in a single paragraph.
• Heading1inthemaintextareaneedstobelarge,bold,an
dcoloreddarkorange.
• Heading2shouldbeslightlysmaller,italic,andsho
uldusethesamecolorasmaintext.
• Textlinksshouldappearinorangetext
inallbutthesidebarnavigationlist.Th
elinktext
should not be underlined.
• Footertextshouldbelightgrayandce
ntered.
• Thesidebarlinksshouldbecentered,and
usethesamecolorasthepagebackground.
• Textlinksshouldswitchtoadifferentc
olorwhenthemouserollsoverthem.
The first three items on this list were accomplished when you defined properties for the <body>
tag. You now need to complete the remaining items.
Define HTML Tag SeLecTorS
In addition to the <body> tag that encloses the page content, properly structured
pagesuseHTMLtagstoidentifydifferenttypesofcon
tent.CSSusestagselectorsto
formatHTMLtagssuchasparagraphs (<p>), headings (<h1>, <h2>, etc.), unordered
lists ( <ul>), and so on.
1. Open index.html from the Yosemite site root folder.
2. Click the New CSS Rule button at the bottom of the CSS Styles panel.
3. Choose Tag in the Selector Type menu, type h1 in the Selector Name field,
and make sure master.css is selected in the Rule Definition menu. Click OK
to define the new rule.
107Project 2: Menu Image Correction
CorreCt Gray BalanCe with Curves
The Curves adjustment is the most powerful color-correction tool in Photoshop. If you understand the ideas behind curves, you can use this tool to remove color cast, enhance overall contrast, and even modify color values in individual channels.
The diagram in the Curves dialog box is the heart of the Curves adjustment. When you open the Curves dialog box, a straight diagonal line in the graph represents the existing color in the image.
Draw to modify the curve
Edit points to modify the curve
Black Point eyedropper
Review the entire image or individual channel curves
Gray Point eyedropper
White Point eyedropper
The horizontal axis represents the input color value, and the vertical axis represents the output color value. The upper-right point is the maximum value for that color mode (255 for RGB images and 100 for CMYK images). The bottom-left corner of the curves grid is the zero point.
The color mode of the image determines the direction of the input and output scales. In both CMYK and RGB, 0 means “none of that color.” However, remember the difference between the two different color modes:
• TheadditiveRGBcolormodelstartsatblackandaddsvaluesofeachchanneltoproducedifferentcolors,so0,0,0inRGBequalsblack.
• ThesubtractiveCMYKmodelstartswithwhite(paper)andaddspercentagesofeachink(channel)toproducedifferentcolors,so0,0,0,0inCMYKequalswhite.
In CMYK images, the zero point represents the white point or image highlights.
In RGB, the zero point represents the black point
or image shadows.
Everycurveisautomaticallyanchoredbyablackpointandawhitepoint.(ForRGB,theblackpointisatthebottomleftandthewhitepointisatthetopright.)Youcanaddpointsalongthecurvebysimplyclickingthecurve.Youcanalsomoveanypointonthecurvebyclickinganddragging.
Remember, the additive colors (RGB) at full strength combine to create pure white, while the subtractive colors (CMYK) at full strength combine to create pure black.
Note:
Project GoalsEach project begins with a clear description of the overall concepts that are explained in the project; these goals closely match the different “stages” of the project workflow.
The Project MeetingEach project includes the client’s initial comments, which provide valuable information about the job. The Project Art Director, a vital part of any design workflow, also provides fundamental advice and production requirements.
Project ObjectivesEach Project Meeting includes a summary of the specific skills required to complete the project.
Step-By-Step ExercisesEvery stage of the workflow is broken into multiple hands-on, step-by-step exercises.
Visual ExplanationsWherever possible, screen shots are annotated so you can quickly identify important information.
Real-World Workflow Projects are broken into logical lessons or “stages” of the workflow. Brief introductions at the beginning of each stage provide vital foun-dational material required to complete the task.
v
425
fi ll i
n th
e b
lank
sho
rt a
nsw
er
Project 8: Photographer's Web Site
Project Review
1. Briefl y describe three image fi le formats that might be used on the Web, including advantages and
disadvantages of each.
2. Briefl y explain the importance of resampling, relative to resizing images in Dreamweaver.
3. Briefl y explain the advantages to using CSS to defi ne background colors and images.
1. The _______________ attribute of the <img>
tag is required to make images accessible for all
Web users.
2. The _______________ attribute defi nes the
specifi c fi le that will appear in the <img> tag
location.
3. The _______________ property of CSS can
be used to tile a single background image
horizontally, vertically, or both throughout the
entire document window.
4. _______________ is the process of cutting out/
off portions of an image.
5. The _______________ format supports
continuous-tone color but not transparency;
it is best used for photographs.
6. The _______________ format supports
transparency but not a large gamut of color; it
is best used for graphics and artwork.
7. A(n) _______________ replaces one image with
another when the mouse cursor enters the
image area.
8. The _______________ extension identifi es
an animation fi le that was exported from
Adobe Flash.
9. The _______________ extension identifi es
a Flash video fi le.
10. A _______________ is a graphic that appears
to the left of the site URL in the browser’s
navigation bar.
226
art
dire
cto
r co
mm
ents
clie
nt c
om
men
tsp
roje
ct ju
stifi
catio
n
Use what you learned in this project to complete the following freeform exercise. Carefully read the art director and client comments, then create your own design to meet the needs of the project.Use the space below to sketch ideas; when fi nished, write a brief explanation of your reasoning behind your fi nal design.
Portfolio Builder Project
We would like you to create a series of videos over the next year (as the grant funds become available). � e � rst one we want is an illustration of gravity. We’re not entirely sure how it should look or function. We kind of like the legend of Isaac Newton sitting under an apple tree, when an apple fell on his head. If you could � gure out how to make that work, great. If not, we’re happy to consider other solutions.
As more funds become available, we’re also going to want movies to illustrate other scienti� c principles. Our current list includes tectonic plate movement, tidal patterns, volcanic eruptions, and friction.
It will be easier to secure the secondary grants for later projects if we can include a speci� c plan for the di� erent programs. Once you � nish the gravity illustration (which we already have the money for), can you sketch out plans for at least two others?
Our agency has been hired to create a series of animated videos explaining scienti� c principles for children.
To complete this project, you should:
� Research the topics you are going to model and determine what (if any) data will be required to create a scienti� cally accurate illustration.
� Create or locate images or graphics that will result in a “kid-friendly” learning experience.
� Develop the animations so they can be placed into an existing Web site, using a 600 � 800 � le size.
Project Summary
121Project 2: Menu Image Correction
As with many other skills, it takes time and practice to master image correction techniques.
Understanding the relationship between brightness and contrast, and how these two values a� ect
the quality of reproduction in digital images, is the � rst and possibly most critical factor in creating
a high-quality image. An image that has too much contrast (a “sharp” image) or not enough contrast
(a “� at” image) translates to an unsatisfactory print. A basic understanding of color theory (speci� cally complementary color) is the foundation
of accurate color correction. E� ective color correction relies on the numbers, rather than what you
think you see on your monitor. As you gain experience in correcting images, you will be better able
to predict the corrections required to achieve the best possible output.
Remove photographic grain with blur and sharpen techniquesUse the Healing Brush and Spot Healing Brush tools to correct scratches
Use the Clone Stamp tool to remove major damage
Correct contrast and tonal range using the Levels adjustment
Correct lighting problems with the Exposure adjustment
Use Merge to HDR Pro to find detail in multiple exposures
Correct contrast with the Curves adjustment
Correct gray balance using the Curves adjustment
Correct overall color cast using the Color Balance adjustment
Correct minor color problems using the Brightness/Contrast adjustment
400 Project 8: Photographer's Web Site
A. Edit opens the image file in its native application.
GIF and JPG files open in Photoshop; PNG files open in
Fireworks (assuming you have those applications).
B. Edit Image Settings opens a dialog box where you
can change a variety of options for the selected file
format. You can also use the Format menu to change the
format of the selected image; if you change the format,
you will be asked where you want to save the new file.
C. Update From Original can be used to make sure an
inserted Photoshop image in the HTML file is the most
recently saved version of the image.
If you insert a native Photoshop (PSD) file into a page,
Dreamweaver converts it to a file that is appropriate
for Web browsers. The original link to the PSD file is
maintained; if the PSD file is changed, Dreamweaver
notifies you that the image must be updated to the most
recent version.
When you place a native
Photoshop file, Dreamweaver
stores a link to the original file.
The actual image in the
page is converted to a
Web-friendly format.
This indicator shows that
the image in the HTML file
is the most recent version.
The red indicator arrow tells
you the Photoshop file has
been modified since you
placed it into the HTML file.
Although Dreamweaver is not an image-editing application,
you can use it to perform some basic image-editing
functions. These tools can’t replace Adobe Photoshop, but
they are well suited for making quick adjustments to an
image from directly within the Dreamweaver application.
D. The Crop tool can be used to remove unwanted areas
of an image. When you click the Crop tool, the lighter
area shows the area that will be included in the cropped
image; you can drag any of the eight handles around
the edge of the crop area to change the area. Pressing
Return/Enter finalizes the crop; pressing ESC cancels the
crop and restores the original image.
The lighter area
shows what will
remain after the crop
has been applied.
Drag any of the
handles to change
the area that will
be included in the
cropped version.
E. The Resample tool changes the number of pixels in an
image to exactly match the size of the selected instance
in the page. This has the same effect as clicking the
Commit Image Size button after resizing an image in the
Design pane.
F. Brightness and Contrast can be used to change
those properties in a selected image.
G. The Sharpen option can be useful for restoring some
detail after resizing/resampling (especially upsizing).
Keep in mind, however, that oversharpening can often
produce worse results than what you start with.
Remember: All of the Dreamweaver image-editing tools permanently modify the
edited file. If you use any of the image-editing buttons, you see a warning that the
changes permanently affect the file (unless someone has checked the Don’t Show ...
option in the dialog box). Always keep a backup image so if you over-edit, you can
replace the backup image and start over.
DREA
MW
EAV
ER F
OUN
DATIO
NS
The Image Properties Panel in Depth
A B C D E F G
When an image is selected in the document
window, the Properties panel not only
displays properties (attributes) of the image,
but also provides access to a number of
image-related functions.
104 Project 2: Menu Image Correction
Although the RGB and CMYK models handle color in different ways, these two color models are definitely linked. RGB colors are directly inverse (opposite) to CMY colors, referring to the position of each color on a color wheel. The relationship between primary colors is the basis for all color correction.
Referencing a basic color wheel can help you understand how RGB colors relate to CMY colors. If you center an equilateral triangle over the color wheel, the points of the triangle touch either the RGB primaries or the CMY primaries. Adding together two points of the triangle results in the color between the two points. Red and blue combine to form magenta, yellow and cyan combine to form green, and so on.
Opposite colors on the color wheel are called color complements. Using subtractive color theory, a color’s complement absorbs or subtracts that color from visible white light. For example, cyan is opposite red on the color wheel; cyan absorbs red light and reflects green and blue. If you know green and blue light combine to create cyan, you can begin to understand how the two theories are related.
How does all this apply to color correction? If you want to add a specific color to an image, you have three options: add the
color, add equal parts of its constituent colors, or remove some of its complement color. For example, to add red to an image, you can add red, add yellow and magenta, or remove cyan. Conversely, this means that to remove a color from an image, you can remove the color itself, remove equal parts of its constituents, or add its complement. To remove cyan from an image, for example, you can remove cyan, remove blue and green, or add red.
Make sure you understand the relationships between complementary colors:
• Toaddred,addyellowandmagentaorremovecyan.
• Toaddblue,addcyanandmagentaorremoveyellow.
• Toaddgreen,addcyanandyelloworremovemagenta.
• Toremovecyan,removeblueandgreenoraddred.
• Toremoveyellow,removegreenandredoraddblue.
• Toremovemagenta,removeblueandredoraddgreen.
Understanding Gray BalanceUnderstanding the concept of neutral gray is also fundamental to effective color correction. Once you correct the contrast (tonal range) of an image, many of the remaining problems can be at least partially (if not entirely) corrected by correcting the gray balance, or the component elements of neutral grays within an image.
In the RGB color model, equal parts of red, green, and blue light combine to create a shade of gray that is equal to the percentage of each component — R=0 G=0 B=0 creates pure black, while R=255 G=255 B=255 creates pure white. To correct an image in RGB mode, you should evaluate and correct the neutral grays so they contain equal percentages of the three primary colors.
Using the CMYK color model, equal percentages of cyan, magenta, and yellow theoretically combine to produce an equal shade of gray — C=0 M=0 Y=0 creates pure white, while C=100 M=100 Y=100 theoretically creates pure black. In practice,
It might seem easiest to simply add or subtract the color in question, but a better result might be achieved by adding one color and subtracting another. For example, if an image needs less blue, simply removing cyan can cause reds to appear pink or cyan to appear green. Adding magenta and yellow to balance the existing cyan creates a better result than simply removing cyan.
Note:
Because white is a combination of all colors of light, white paper should theoretically reflect equal percentages of all light wavelengths. However, different papers absorb or reflect varying percentages of some wavelengths, thus defining the paper’s apparent color. The paper’s color affects the appearance of inks printed on that paper.
Note:
An important point to remember is that any color correction requires compromise. If you add or remove a color to correct a certain area, you also affect other areas of the image.
Note:
Web Design FoundationsAdditional functionality, related tools, and underlying graphic design concepts are included throughout the book.
Advice and WarningsWhere appropriate, sidebars provide shortcuts, warnings, or tips about the topic at hand.
Visual SummaryUsing an annotated version of the
finished project, you can quickly identify the skills used to complete
different aspects of the job.
Project ReviewAfter completing each project, you can complete these fill-in-the-blank and short-answer questions to test your under-standing of the concepts in the project.
Portfolio Builder ProjectsEach step-by-step project is accompanied by a freeform project, allowing you to practice skills and creativity, resulting in an extensive and diverse portfolio of work.
the
portfolio series
pro
ject
5 Ocean Animation
o Importing Bitmaps and Symbols
o Animating Symbols
o Programming Basic Timeline Control
pro
ject
4 Animated Internet Ads
o Animating Symbols
o Working with Text
o Working with a Flash Project
pro
ject
3 Talking Kiosk Interface
o Working with Symbols
o Working with Sound
o Creating Frame Animations
pro
ject
2 Menu Image Correction
o Retouching Damaged Images
o Correcting Lighting Problems
o Correcting Color Problems
o Working with HDR Images
pro
ject
1 Composite Movie Ad
o Compositing Images and Artwork
o Managing Layers
o Creating Complex Selections
o Saving Photoshop Files
Projects at a Glance
vii
pro
ject
9 Yosemite CSS Layout
o Creating Layouts with Style Sheets
o Working with a Template
o Using CSS to Control Content
pro
ject
8 Photographer’s Web Site
o Working with Static Images
o Controlling Backgrounds with CSS
o Working with Other Image Types
pro
ject
7 Digital Book Chapter
o Preparing the Workspace
o Working with Semantic Markup
o Working with Special Characters
o Creating Lists
o Attaching an External CSS File
pro
ject
6 Bistro Site Organization
o Exploring Site Structure
o Organizing the Site Navigation
o Naming and Titling Documents
o Making Files Public
The Against The Clock Portfolio Series teaches graphic design software tools and techniques entirely within the framework of real-world projects; we introduce and explain skills where they would naturally fall into a real project workflow.
The project-based approach in The Professional Portfolio Series allows you to get in depth with the software beginning in Project 1 — you don’t have to read several chapters of introductory material before you can start creating finished artwork.
Our approach also prevents “topic tedium” — in other words, we don’t require you to read pages and pages of information about text (for example); instead, we explain text tools and options as part of a larger project (in this case, as part of a book cover).
Clear, easy-to-read, step-by-step instructions walk you through every phase of each job, from creating a new file to saving the finished piece. Wherever logical, we also offer practical advice and tips about underlying concepts and graphic design practices that will benefit students as they enter the job market.
The projects in this book reflect a range of different types of Web design jobs, from correcting menu images to building a complete Web page with CSS. When you finish the projects in this book (and the accompanying Portfolio Builder exercises), you will have a substantial body of work that should impress any potential employer.
The nine CS6 projects are described briefly here; more detail is provided in the full table of contents (beginning on Page viii).
viii
ACknowledgements iii
wAlk-through iv
ProjeCts At A glAnCe vi
the PhotoshoP Cs6 user interfACe 1Understanding the Application Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Explore the Arrangement of Photoshop Panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Accessing Photoshop Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Create a Saved Workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Customizing Keyboard Shortcuts and Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Explore the Photoshop Document Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11Explore the Arrangement of Multiple Documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Summing Up the Photoshop View Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Navigating the History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Project1 ComPosite movie Ad 23 Stage 1 Compositing Images and Artwork . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Open a File from Adobe Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Understanding File Saving Preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29Resize the Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30More on Resolution and Resampling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Crop the Canvas and Place Ruler Guides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33The Crop Tools in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Drag a File to Composite Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Open Files with Mini Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Place a File from Mini Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Rasterize a Vector File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Place Multiple EPS Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Stage 2 Managing Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50Name Layers and Layer Groups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50Move and Transform Smart Object Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53Transform a Regular Layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Transform the Background Layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Stage 3 Creating Complex Selections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60Make a Feathered Selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60The Lasso Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61Select a Color Range and Create a Layer Mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62More on Selecting a Color Range . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65Make and Refine a Quick Selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Arrange Layer Position and Stacking Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Filtering Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73Common File Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Contents
ix
Stage 4 Saving Photoshop Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Save a Layered TIFF File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Save a Flattened TIFF File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Project2 menu imAge CorreCtion 81 Stage 1 Retouching Damaged Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Remove Grain with Blur and Sharpen Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83The Noise Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84The Blur Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85The Smart Sharpen Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86Heal Severe Scratches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87Aligning the Healing Source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88Clone out Major Damage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89The Clone Source Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Stage 2 Correcting Lighting Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Correct Problems with Brightness/Contrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Correct Contrast and Tonal Range with Levels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Histogram Statistics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Identifying Shadows and Highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97The Gradient Map Adjustment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99Correct Lighting Problems with the Exposure Adjustment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Stage 3 Correcting Color Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102Understanding Color Terms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103Correct Color Cast with the Color Balance Adjustment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105Correct Gray Balance with Curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Adjusting Curves On-Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110Correct Contrast with Curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110Curve Display Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Stage 4 Working with HDR Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114Use Merge to HDR Pro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Contents
x
the flAsh Cs6 user interfACe 123Explore the Flash Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123Identifying and Accessing Tools in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125Explore the Flash Document Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126Customizing Flash Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Understanding Auto-Recovery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130Understanding the Flash View Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Project3 tAlking kiosk interfACe 133 Stage 1 Working with Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
The Library Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135Import Adobe Illustrator Artwork . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136Illustrator File Import Preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140Import Files to the Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141Convert Objects to Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142Create a Button Symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145Define a Hit Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147Using Different Symbol-Editing Modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149Edit Symbol Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150Explore the Symbol Registration Point . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151Organize Your Library with Folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Stage 2 Working with Sound . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155Import Sound Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155Viewing Large Documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156Add Event Sound . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Edit a Sound Envelope to Control Volume . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159Editing Sound Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160Use the Start and Stop Sync Methods for Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Stage 3 Creating Frame Animations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163Add Streaming Sound . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163Prepare for Lip Syncing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166Create Lip Sync Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167Define Sound Compression Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Project4 AnimAted internet Ads 177 Stage 1 Animating Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Create an Ad File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180Create a Shape Tween . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183Understanding Transformation Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187Tween an Object’s Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188Creating and Controlling Shape Tweens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190Extending the Length of the Timeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192Create a Classic Tween . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192Tween an Object’s Opacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196Controlling Frame and Tween Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198Stop the Animation Timeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
xi
Stage 2 Working with Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203Create a New Text Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203Controlling Text Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206Define Font Embedding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207Control Object Stacking Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Stage 3 Working with a Flash Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212Create a Flash Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212Scale Content to Document Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214Manually Adjust Content to Document Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215Edit a Shared Symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219Publish the Ad Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220Understanding SWF Publish Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Project5 oCeAn AnimAtion 229 Stage 1 Importing Bitmaps and Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Import Adobe Photoshop Artwork . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231Photoshop File Import Preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232Copy Assets from External Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234Align Objects on the Stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236Transform Symbols and Instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237Work with Layers in an Imported Movie Clip Symbol. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240Use the Spray Brush . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241Organize Your Library with Folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Stage 2 Animating Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244Create a Basic Frame Animation in a Movie Clip Symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244Create a Motion Tween . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247Using Onion Skins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250Edit the Shape of the Motion Path . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251Controlling Animation Speed with Easing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252Motion Tween Properties and Presets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254Copy and Paste Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255Use the Motion Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257The Motion Editor Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259Graphics vs. Movie Clips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261Animate Effects and Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262Animate in 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265Work with the Bone Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267Animate the Bone Armature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Stage 3 Programming Basic Timeline Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272Convert a Motion Tween to a Movie Clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272Prepare Symbol Instances for ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276Add Movie Clip Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277Add Event Handlers to Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280Combine Multiple Event Handlers in a Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Contents
xii
the dreAmweAver Cs6 user interfACe 289Explore the Dreamweaver Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289Customizing Dreamweaver Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290Preview Files in Dreamweaver Live View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296Preview a File in a Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299Remove a Site from Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Project6 bistro site orgAnizAtion 303 Stage 1 Exploring Site Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Create a New Site Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305Examine the Site Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307Plan Folder Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309The Files Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310Sort and Move Image Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311Changing the Update Preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Stage 2 Organizing the Site Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314Create Hyperlinks within the Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315The Common Insert Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316Copy and Paste Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321Adjust Relative Link Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323Accessing Page Content in the Menu Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325Create an Email Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Stage 3 Naming and Titling Documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327Rename Pages for Search Engine Optimization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327Understanding Web File Naming Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328Create Document Titles for Individual Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Stage 4 Making Files Public . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332Hide Files from the Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332Define Remote Connection Info for the Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334Upload Files to a Remote Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336Export and Remove the Site Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Project7 digitAl book ChAPter 343 Stage 1 Preparing the Workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Define the ATC Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345Create a New HTML Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Stage 2 Working with Semantic Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348Paste Text Content in Design View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348Element Names, Tags, and Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350Format Headings in Design View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352Formatting Text with the Properties Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354Format a Block Quote and Citation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354Mark up Abbreviations in Code View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357Controlling Code Hints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357Understanding Code View Formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360Format with Strong and Em Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
xiii
Stage 3 Working with Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362Insert Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362Create a Table of Quote Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365Working with HTML Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367Use the Insert Other Character Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368Insert Special Characters in Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
Stage 4 Creating Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372Create an Ordered List of Web Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372Create an Unordered List of Navigation Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Stage 5 Attaching an External CSS File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375Add div Tags and Element IDs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375Attach the CSS File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378Identify the List as a Navigation Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
Project8 PhotogrAPher’s web site 385 Stage 1 Working with Static Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Define the Crowe Photography Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387Insert an Image onto a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387Resize and Resample an Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391Insert an Image from the Files Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395The Image Properties Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396Insert an Image from the Assets Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397Creating an Image Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Stage 2 Controlling Backgrounds with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400Define a Page Background Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400Hexadecimal Color Codes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404Define a Background Image for the Outer Div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405Define Background Images for Navigation Link States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407Creating a Rollover Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
Stage 3 Working with Other Image Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411Insert a Flash Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411Insert and Configure a Flash Slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414Insert a Flash Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417Add a Page Favicon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Contents
xiv
Project9 Yosemite Css lAYout 425 Stage 1 Creating Layouts with Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
Define a Tracing Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427Create an External CSS File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431The CSS Styles Panel in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433Create ID Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434The CSS Rule Definition Dialog Box in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439Create a Layout with Div Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441Understanding the CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443Use the Float Property to Control Nested Divs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445Comparing the <span> and <div> Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448Define Properties for the <body> Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449Edit CSS Rules to Adjust the Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
Stage 2 Working with a Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454Create a Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454The Insert>Template Submenu in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456Apply the Template to Existing Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458The Modify>Templates Submenu in Depth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459Creating a New Page from a Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461Edit the Design Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462Understanding Named Anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464
Stage 3 Using CSS to Control Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465Define HTML Tag Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465CSS Mode of the Properties Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467Create Descendant Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469Create Pseudo-Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Project Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475 Portfolio Builder Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476
Getting Started
xv
Prerequisites
The Professional Portfolio Series is based on the assumption that you have a basic understanding of how to use your computer. You should know how to use your mouse to point and click, as well as how to drag items around the screen. You should be able to resize and arrange win-dows on your desktop to maximize your available space. You should know how to access drop-down menus, and understand how check boxes and radio buttons work. It also doesn’t hurt to have a good understanding of how your operating system organizes files and folders, and how to navigate your way around them. If you’re familiar with these fundamental skills, then you know all that’s necessary to use the Portfolio Series.
resource Files
All of the files you need to complete the projects in this book — except, of course, the Adobe application files — are on the Student Files Web page at againsttheclock.com. See the inside back cover of this book for access information.
Each archive (ZIP) file is named according to the related project (e.g., Menu_RF_WC6-2e.zip for the files in Project 2, in which a company has hired you to retouch images for its menu). At the beginning of each project, you must download the archive file for that project and expand that archive to access the resource files that you need to complete the exercises. Detailed instructions for this pro-cess are included in the Interface chapter.
Files required for the related Portfolio Builder exercises at the end of each project are also available on the Student Files page; these archives are also named by project (e.g., Robot_PB_WC6-2e.zip).
system requirements
The Professional Portfolio Series was designed to work on both Macintosh or Windows computers; where differences exist from one platform to another, we include specific instructions relative to each platform. One issue that remains different from Macintosh to Windows is the use of different modifier keys (Control, Shift, etc.) to accomplish a task. When we present key commands, we always follow the same Macintosh/Windows format — Macintosh keys are listed first, then a slash, followed by the Windows keys.
Web Hosting
To make Web files accessible to the browsing public, you need to have access to some type of server. On the inside back cover of this book, you have a code that you need to gain access to the required resource files. The same code also provides access to a six-month, free trial Web hosting account at Pair Networks (www.pair.com).
If you don’t already have access to an online server, go to www.pair.com/atc/ to sign up for your hosting account. You must enter your contact information, and the code from the inside back cover of your book. You should then define a user name in the last field; this will become part of the server name for your hosting account.
After clicking Continue in this screen, the resulting mes-sage warns that the setup process can take up to one busi-ness day (although it is usually about an hour). When the setup process is complete, you will receive an acknowledge-ment that your request is being processed. You will receive a confirmation email (sent to the email you defined in the Signup Form) with your username and password informa-tion. Once you receive the confirmation email, you are ready to complete the final stage of this project.
soFtWare Versions
This book was written and tested using the versions of Adobe CS6 software that were available January 2014:
• Adobe Photoshop v13.0.6
• Adobe Flash v12.0.2
• Adobe Dreamweaver v12.2
(You can find the specific version number of your applica-tions in the Splash Screen that appears while an application is launching.)
Because Adobe has announced periodic upgrades rather than releasing new full versions, some features and func-tionality might have changed since publication. Please check the Updates & Errata section of the Against The Clock Web site for any significant issues that might have arisen from these periodic upgrades.