Layers - November & December 2010-TV

CREATE INTERACTIVE PORTFOLIOS WITH INDESIGN CS5 USE PSDS TO MAKE MOVIE POSTERS IN ILLUSTRATOR CS5 TIMESAVING FEATURES
TO IMPROVE YOUR PHOTOGRAPHIC WORKFLOW
Designing with Web

Basic rules all Web designers and programmers should know
Standards
DISPLAY UNTIL JANUARY 18, 2011
True PDF release: storemags & fantamag
storemags & fantamag - magazines for all
CONTENTS]
] NOVEMBER/DECEMBER 2010 ] VOL. 6, NO. 6 ] WWW.LAYERSMAGAZINE.COM
[ T U T O R I A L S ]
36 ] Digital Photography:
Improve Your Photographic Workow Chris Orwig
42 ] Adobe Photoshop CS5:

Creative Suite AdvantagesDave Cross
48 ] Adobe Illustrator CS5:

Movie PosterCorey Barker
56 ] Adobe InDesign CS5:

Creating an Interactive PortfolioTerry White
62 ] Adobe Dreamweaver CS5:

Editing a WordPress Blog with Dreamweaver CS5Janine Warner
66 ] Adobe Flash CS5 Professional:
[ F E A T U R E ]
30 ] Web Standards
18
Custom Video on CuePaul Trani
RADIM MALINIC
www.layersmagazine.com
Whether youre a Web designer, coder, or programmer, this issue weve decided to cater to you. Sue Jenkins expains where Web standards came from, why you should use them (willingly), and where you can go for more information about them. While Web standards mostly deal with the behind-the-scenes issues, they can also greatly affect a sites design and how visitors view a webpage. These standards are set in place for you to generate the most traffic imaginable. So, lets stick together and follow the rules! Sue Jenkins
04
Page 30

05
LAYERS MAGAZINE ][ NOV / DEC 2010
[ D E P A RT M E N T S ]
8 ] Letter from the Editor 12 ] Layers News 18 ] Designer Spotlight 20 ] The Digital Canvas 78 ] Tips & Tricks 90 ] The Back Page
Page 20
[ C O L U M N S ]
22 ] Design Makeover:
Monster BallJake Widman
[ O N
T H E
C O V E R ]
Radim Malinic is a talented graphic designer who creates intricate, innovative designs and illustrations. Hes the creative force behind his company, Brand Nu, and a few of his clients include Malibu, Dell, and PlayStation. Dont forget to look for his colorful art throughout this issue of Layers.
[Radim Malinic]
28 ] Artistic Expressions:
Illustrative TextBert Monroy
54 ] The Art of Type:

Stroke, Stroke, StrokeJames Felici
[ R E V I E W S ]
72 ] Boris Continuum Complete 7 AERod Harlan
73 ] HP ZR30w MonitorBruce Bicknell
73 ] HP Z600 WorkstationBruce Bicknell
74 ] Maya Entertainment Creation Suite 2010

Bruce Bicknell
76 ] Adobe Captivate 5David Creamer
Whenever you see this symbol at the end of an article, it means theres either additional material or a download for that story at www.layersmagazine.com. So be sure to visit the website and check it out.
72
] NOVEMBER/DECEMBER 2010 ] VOL. 6, NO. 6 ] WWW.LAYERSMAGAZINE.COM
[TUTORIALS]
Were always adding new tutorials to the Layers website, so be sure to visit often. And dont forget to sign up for our graphics tip of the day. Heres a small sampling of some of the tutorials that you can find at the site now:
[PHOTOSHOP]
www.layersmagazine.com/category/photoshop Photoshop and Illustrator Interaction (Video): Watch how to use Photoshop and Illustrator together to quickly de ne a graphic as a symbol. Corey even shows how to create a design using various symbol tools and why its important to paste your Illustrator graphic as a Vector Smart Object in Photoshop.Corey Barker Senior Portrait Design in Photoshop, Parts 1 and 2 (Video): In this two-part series, Jessica teaches how to create a simple multilayered senior portrait design with several layer style options, photos, and fonts. She even shows how to easily place new photos into the already made design.Jessica Maldonado
[ILLUSTRATOR]
www.layersmagazine.com/category/illustrator Everything You Wanted in Illustrator CS5 Artboards (Video): Navigate through the new Artboards panel in Illustrator CS5 with Jeff to learn more about its new features. You can even renumber your artboards now!Jeff Witchel Adobe Illustrator CS5: Stroke of Genius (Video): Interested in learning about the newly overhauled Stroke panel in Illustrator CS5? Here, Jeff talks about the new dash and arrowhead options, the new Prole settings availabe with the Width tool, and how the Flip Along option is a great timesaver.Jeff Witchel
[LAYERS
TV ]
18
RADIM MALINIC
[INDESIGN]
www.layersmagazine.com/category/indesign Placing Images in InDesign CS5 (Video): Learn a few quick tips from RC about placing images in InDesign to maximize your skills. Watch as he shows different importing options, two keyboard shortcuts, and a tip about the Auto Fit checkbox in the Control panel. Rafael RC Concepcion
Hosted by Corey Barker and Rafael RC Concepcion www.layersmagazine.com/layerstv Layers TV is a weekly video podcast that offers killer tips and tricks to fullblown tutorials, and it covers all of your favorite print, Web, and video apps from Adobe.
[ S O C I A L
N E T W O R K ]
[AFTER EFFECTS]
www.layersmagazine.com/category/aftereffects Color Control in After Effects CS5 (Video): Getting the right color can be tricky. Watch how to improve video color in After Effects CS5 through Levels, Vibrance, and the Color Finesse 3 plug-in.Franklin McMahon
http://twitter.com/LayersMagazine www.facebook.com/LayersMagazine Want to stay up to date on everything happening at Layers? Of course you do. Just follow @LayersMagazine on Twitter and be sure to join our Facebook fan page, as well.
06
FROM THE EDITOR]

C H R I S { } M A I N
standard procedure
FOLLOWING THE RULES CAN MAKE EVERYONES LIFE EASIER

I want to start out this editors note by focusing on one word: standards. What are standards and why should you care about them? You should care about standards because they make sure that most things in your life just work. How would you feel if you brought home a brand-new Blu-ray player only to nd out it doesnt work with your HDMI television because the manufacturer decided to use its own specs for HDMI? Sure, their Blu-ray players work with their televisions, but they wouldnt work with any
[You should care about
other brand. You wouldnt be very happy, would you? Well, the same idea holds true for the Internet. When a person visits a site, she just wants it to work, no matter what platform or browser shes using. And as the designer or developer you want to make sure that your users are never frustrated by things that dont work because once a user encounters a problem, chances are shell never return to your site again. So we invited Sue Jenkins to tell us about Web standards. Sue is the Creative Director of Luckychair.com and is the author of seven books, including Web Design All-in-One for Dummies by Wiley Publishing, Inc. In her article, youll learn where Web standards come from, why you should use them, and where you can go to nd out even more about them. If youre a budding Web designer or a photographer whos just trying to create a presence on the Web, youll want to read this article. Standards are important, and its critical to learn to use standards from the very beginning (and to keep up with changing standards, as well). Also in this issue, James Felici and Bert Monroy show two very different ways to take your type well beyond simple keystrokes and kerning. In The Art of Type (p. 54), James teaches how to use the Stroke panel in InDesign to really spice up your text. Bert uses Photoshop and layer styles in Artistic Expressions (p. 28) to create pillow-shaped letters that would quickly put any virtual baby to sleep. The Design Makeover is one of our most popular columns in Layers magazine. This issue, we asked three talented designers to take on a yer for a Swing Goth event. What is Swing Goth, you ask? Youll have to read the article (p. 22) to nd out, but the subject allowed the designers to run free with their artistic visions, giving us some really inviting results. If youre a regular, then you know that every issue we feature an amazing artist and designer. This issue, were proud to share the work of Radim Malinic. Under the name Brand Nu, Radim has worked with many big-time clients, such as FUZE Beverage, Coca-Cola, Malibu, Dell, and PlayStation. Radim pushes himself to new limits with every project he works on, and I think youll see the results of his determination and drive as you view his artwork throughout the publication. Read our interview with Radim in the Designer Spotlight on page 18. We also have lots of great step-by-step tutorials in this issue; for example, youll learn how to streamline your photographic workow in Photoshop and Bridge (p. 36), use Photoshop with the other Creative Suite applications (p. 42), create eye-catching movie posters in Illustrator (p. 48), build interactive portfolios in InDesign (p. 56), edit WordPress themes in Dreamweaver (p. 62), and create cue points in Flash to trigger events in video (p. 66). See, I told you there were a lot. I hope you enjoy the magazine and that when youve nished reading it that youre a little more productive and you have a few more creative ideas than you did before you turned that rst page. Until next time
standards because they make sure that most things
in your life just work.]
www.l ayer smagazine.com
.
All my best,
Chris Main Editor-at-Large
08
print
Everything for the Perfect Print.
VOL UM E 6 N UM B E R 6 P RI N T E D I N US A
w w w .l ay er s mag azi n e.c o m

EDITOR-IN-CHIEF EDITOR-AT-LARGE TRAFFIC DIRECTOR DYNAMIC MEDIA EDITOR CONTRIBUTING WRITERS
Scott Kelby Chris Main Kim Gabriel Rod Harlan Corey Barker Peter Bauer Bruce Bicknell Cyndy Cashman Rafael RC Concepcion David Creamer Dave Cross James Felici Sue Jenkins Bert Monroy Chris Orwig Paul Trani Janine Warner Terry White Jake Widman Felix Nelson Dave Damstra Taffy Clifford Dave Korman Kevin Agren 813-433-2370 Jeanne Jilleba 877-622-8632 ext. 215 Margie Rosenstein Ronni ONeil Scott Kelby David Moser Mike Mackenzie Jean Kendra Paul Parry Tommy Maloney Justin Finley Jay Fortner Karey Johnson Fred Maya Leslie Montenegro Kris Olds Aaron Westgate Kelby Media Group 333 Douglas Road East Oldsmar, FL 34677-2922 Phone: 813-433-5010 www.kelbymediagroup.com info@layersmagazine.com $29.95 (U.S.) Call (toll-free) 877-622-8632; subscribe online at www.layersmagazine.com Cover image courtesy of Radim Malinic Produced using Adobe InDesign CS5, Adobe Photoshop CS5, and Adobe Illustrator CS5. Body copy is set in Avenir. Headlines are set in Solex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse blandit dapibus suscipit. Quisque vitae sapien turpis. Vestibulum volutpat congue neque, vitae scelerisque lacus iaculis nec. Sed tempor interdum felis, id porttitor dui laoreet nec. Maecenas turpis massa, venenatis at lacinia eu, pellentesque a tortor. Morbi aliquam neque ac erat vestibulum et lobortis ipsum porta...If youre a designer or layout person, youre probably thinking we inadvertently forgot to remove some Greeked text. Well no, we didnt. We just wanted to see if: A) youd even notice, or B) you even knew what Greeked text was (you would if youre over 30 years old). If youre not a designer or layout person, then who cares? We werent talking to you. Neener, neener, neener.
CREATIVE DIRECTOR PRODUCTION MANAGER SENIOR ASSOCIATE DESIGNER PRODUCTION DESIGNER VP, SALES ADVERTISING COORDINATOR ADVERTISING DESIGNER DIRECTOR OF CIRCULATION PUBLISHER EXECUTIVE PUBLISHER ASSOCIATE PUBLISHER BUSINESS MANAGER CHIEF FINANCIAL OFFICER DIRECTOR OF WEB DEVELOPMENT AND PROGRAMMING WEB TEAM
PUBLISHED BIMONTHLY BY
SUBSCRIPTIONS
COVER DESIGN
Every day low prices + FREE Shipping*
COLOPHON
Call us Today! Located in America's Heartland
(800) 771-9665
Or Order Online 24/ 7
www.itsupplies.com
*on orders over $99
All contents COPYRIGHT 2010 Kelby Media Group, Inc. All rights reserved. Any use of the contents of this publication without the express written permission of the publisher is strictly prohibited. Layers magazine is an independent journal not affiliated with Adobe Systems, Inc. Adobe, the Adobe logo, Acrobat, Adobe Premiere, After Effects, Dreamweaver, Flash, Illustrator, InDesign, Lightroom, and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners. Some of the views expressed by contributors may not be the representative views of the Publisher. ISSN 1554-415X
[layers news]
graphics design news new products digital video news other stuff
Adobe announces
Acrobat X
On October 18, 2010, Adobe announced the latest version of their popular PDF solution software, Acrobat X (as in 10) Pro. This new version has a simplied panels interface (think Photoshop) and a new document view mode. PDF Portfolios (which were introduced in Acrobat 9) are better than ever and make it easy to combine many different le types into one handy package that can be shared with anyone. And the new guided actions feature streamlined document workows and helps users create better, stronger PDFs faster. Acrobat X supports PDF/X-4:2010 and PDF/X-5:2010 (the new version of the PDF/X-4 and X-5 standards). Youll also nd improvements in transparency attener and in printing RGB-based documents to CMYK-based printers. Adobe also announced Adobe Reader X, which benets from the new simplied panels interface, as well. In other good news, the commenting tools are now always on for Readeryou dont have to activate them on a per-document basis in Acrobat Pro. Reader also includes improved browser integration, protected mode security, and Android Mobile Reader. Acrobat X Pro will be available for $499, or $199 for the upgrade. For more information, visit www.adobe.com.
Photoshop Elements
borrows a page from CS5
Adobe recently announced the availability of Photoshop Elements 9. The latest version of their popular consumer image-editing app has adapted one of the wow technologies that was originally introduced in Photoshop CS5Content-Aware Fill. The content intelligence now available in the Spot Healing Brush will have users removing telephone poles, wires, and those bunny ears from behind your head that your best friend thinks are so funny from your photos with ease. The same content intelligence also lls in missing gaps when creating a panorama from multiple images. Another cool new feature is the Photomerge Style Match. If you have a photo in which you really like the contrast and color tone and youd like to apply that to another photo, Photomerge Style Match will automatically apply those qualities to that other photo. And with the new Guided Edit options, youll quickly be creating cool effects, such as making elements leap out of the photo in 3D, creating pop art, or retouching. Photoshop Elements 9 is available now for $99.99. For more information, visit www.adobe.com.
Adobe Illustrator
www.LAYERSMAGAZINE.COM
gets its own HTML5 pack

Following up on the Dreamweaver CS5 HTML5 Pack (which is now part of the Dreamweaver 11.0.3 updater), Adobe has announced the Illustrator CS5 HTML5 Pack. Aimed at designers creating content for mobile devices and the Web (and honestly, who doesnt design for mobile and Web these days), the HTML5 Pack allows both designers and developers to take advantage of HTML5 and CSS3 and enhances the integration between Illustrator CS5 and Dreamweaver CS5. SVG generated by Illustrator can be displayed directly in compatible browsers and Illustrator can be used to generate CSS code for styling of HTML content. According to Lea Hickman, Senior Director, Creative and Interactive Solutions at Adobe, The HTML5 Pack for Illustrator CS5 gives designers and developers the power to deliver high-quality graphic content for the Web that can look great, no matter what the screen. The HTML5 Pack for Illustrator CS5 is available for free at Adobe Labs at http://labs.adobe.com.
12
A ton of new gear

from Nikon
At Photokina 2010 in Cologne, Germany, Nikon introduced the D7000 DSLR. Sitting between the Nikon D90 and the D300S, the DX-format (APS-C) D7000 camera features a new 16.2-megapixel CMOS sensor. According to Nikon, the new EXPEED 2 image-processing engine fuels the enhanced performance of the D7000, along with a new 39-point AF system and groundbreaking 2,016-pixel RGB 3D Matrix Metering System to deliver amazing image quality in a variety of shooting conditions. Additionally, the D7000 DSLR provides full 1080p HD movie capability with full-time autofocus (AF). Using Nikons exclusive Scene Recognition System, the D7000 analyzes subject information from a database containing more than 30,000 images to optimize focus, exposure, and white balance. The camera has a native ISO range of 1006400, which can be expanded to a Hi-2 setting of 25,600, something previously found only in Nikon FX-format territory. The D7000 DSLR camera will be available throughout the United States beginning mid-October 2010 for $1,199.95 for the body only and $1,499.95 for the body and lens outt that includes the AF-S DX Zoom-NIKKOR 18105mm f/3.55.6G ED VR lens. Nikon also announced a new Speedlight and a couple of new lenses. The SB-700 Speedlight builds on the success of the popular SB-600 Speedlight and the advanced functionality of the SB-900 Speedlight and is scheduled to be available in mid-November for $329.95. The new AF-S NIKKOR 35mm f/1.4G will appear around the same time for $1,799.95, and the new AF-S NIKKOR 200mm f/2G ED VR II should be available by the time you read this for $5,999.95. Just prior to the show, Nikon had also announced their new D3100 DSLR ($699.95) and four new lenses: the AF-S NIKKOR DX 55300mm f/4.55.6 VR ($399.95), the AF-S NIKKOR 24120mm f/4G ED VR ($1,049.95), the AF-S NIKKOR 28300mm f/3.55.6G ED VR ($1,299.95), and the AF-S NIKKOR 85mm f/1.4G ($1,699.95). For more information regarding the new DSLRs, lenses, and Speedlight, please visit www .nikonusa.com.
[more cool sites for creatives]
Web Watch
www.adobemuseum.com
Adobe Museum of Digital Media: The worlds rst virtual museum dedicated to digital art and innovation
www.digitalfamily.com
Training and resources for Web design and Adobe Dreamweaver from Janine Warner
The new Nikon
COOLPIX P7000
Nikon also introduced the COOLPIX P7000 at Photokina. The 10.1-megapixel COOLPIX P7000 features a large 1/1.7" CCD sensor coupled with a 7.1x Wide Angle Optical Zoom-NIKKOR ED Glass Lens. It adopts Nikons new EXPEED C2 high-performance digital image processing engine to ensure high-quality pictures. ISO sensitivity ranges from 1006400 (expandable to ISO 12,800 in low noise Night Mode) to ensure sharp, crisp images when shooting in low
http://thephotoletariat.com
Dedicated to helping photographers with artistic advice, technical tips, and ways to build business in todays economy
light or photographing fast-moving subjects. The P7000 also features 5-Way VR Image Stabilization System to minimize the effect of camera shake. Advanced users will also enjoy the benets of shooting RAW/NRW les for creative freedom, and macro abilities as close as 0.8". The P7000 records HD video at 720p at 24 frames-per-second (fps) with optical zoom and autofocus control. A COOLPIX rst, users can now record audio with an external stereo microphone via the microphone input. An accessory microphone or Nikon Speedlight can be mounted on the P7000s hot shoe. The Nikon COOLPIX P7000 will be available for $499.95.
http://lightroomsecrets.com
Adobe Photoshop Lightroom tips, tutorials, and news, along with the occasional article on photography and the creative process
n e ws
Upcoming Events
MAXIMUM PHOTOSHOP CS5 TOUR
Washington, DC (November 8, 2010) Boston, MA (November 10, 2010) South San Francisco, CA (November 15, 2010) New York, NY (November 22, 2010) www.kelbytraininglive.com
Canon makes
headlines at Photokina
PHOTOSHOP CS5 FOR PHOTOGRAPHERS TOUR

Chicago, IL (November 9, 2010) Denver, CO (December 13, 2010) www.kelbytraininglive.com
PHOTOSHOP CS5 DOWN & DIRTY TRICKS TOUR

Livonia, MI (November 12, 2010) Sacramento, CA (December 6, 2010) www.kelbytraininglive.com
Just prior to Photokina, Canon announced the EOS 60D DSLR. The EOS 60D has an 18-megapixel Canon CMOS sensor, Canons proprietary DIGIC 4 Imaging Processor, and can capture full HD video. The vari-angle 3" Clear View LCD screen allows users to position the screen just about anywhere they need to capture overhead or low-angle shots. The 60D can process RAW les right in the camera with features that include Picture Style, White Balance, Color Space, High-ISO Noise Reduction, and more. Photographers can now generate optimized JPEG les from their RAW les for immediate sharing. The 60D will be available for an estimated price of $1,099 (body only). Canon also introduced four new L-series lenses: the Canon EF 815mm f/4L Fisheye USM ($1,400; available in January), the new EF 70300mm f/45.6L IS USM ($1,500; available in October), the EF 300mm f/2.8L IS II USM ($7,000; available in December), and the Canon EF 400mm f/2.8L IS II USM ($11,000; available in December). For more information on both the EOS 60D and L-series lenses, visit www.usa.canon.com.
SCOTT KELBYS PHOTOSHOP FOR DIGITAL PHOTOGRAPHERS TOUR

November 18, 2010 Washington State Convention & Trade Center Seattle, WA www.kelbytraininglive.com
The Canon
PowerShot G12
LOCATION LIGHTING TECHNIQUES FOR PHOTOGRAPHERS TOUR

Ft. Lauderdale, FL (December 3, 2010) Phoenix, AZ (December 7, 2010) San Diego, CA (December 9, 2010) www.kelbytraininglive.com
PHOTOSHOP CS5 CREATIVITY TOUR

Houston, TX (December 10, 2010) Portland, OR (December 15, 2010) www.kelbytraininglive.com
In more Photokina news, Canon U.S.A., Inc., announced the PowerShot G12 digital camera. The PowerShot G12 includes the Canon HS SYSTEM. Canons DIGIC 4 Image Processor combined with the PowerShot G12s 10-megapixel High Sensitivity CCD sensor, make up Canons HS SYSTEM to enhance image quality and help reduce noise at high ISO levels. The PowerShot G12 is also the rst PowerShot G-series model to record 720p HD video. It offers a full range of shooting and recording modes with new features such as High Dynamic Range (HDR) scene mode. With the use of a tripod, one push of the shutter button yields three sequential images with various exposures, and then combines them into a single optimized image. The Canon PowerShot G12 has a 2.8" vari-angle LCD and a 5x optical zoom lens with Optical Image Stabilization and wide-angle capabilities starting at 28mm. And as with previous cameras from this series, the G12 supports RAW capture. The estimated selling price of the PowerShot G12 is $499.99. For more information, visit www.usa.canon.com.
MACWORLD 2011
January 2629, 2011 Moscone Center San Francisco, CA www.macworldexpo.com
New Sigma
camera, lenses, and ashes
PHOTOSHOP WORLD CONFERENCE & EXPO

March 30April 1, 2011 Orange County Convention Center Orlando, FL www.photoshopworld.com
Sigma announced the Sigma SD1 DSLR, two new lenses, and a couple of new ash units at Photokina. The Sigma SD1 is a whopping 46 megapixels with a 24x16mm APCS-C X3 sensor. Along with the Dual TRUE (Three-layer Responsive Ultimate Engine) II image processing engines, Sigma claims the SD1 quickly processes high-resolution images with high denition and a smooth and subtle graduation of color. The two new lenses include the Sigma APO 120300mm f/2.8 EX DG OS HSM and the Sigma APO MACRO 150mm f/2.8 EX DG OS HSM. The two new ash units include the Electronic Flash EF-610 DG ST and the EF-610 DG Super. For pricing and availability, visit www .sigmaphoto.com.
[r a d i m
ma l i nic ]
DESIGNER SPOTLIGHT]
C H R I S { } M A I N
Radim Malinic
is a self-taught, award-winning art director, illustrator, and graphic designer based in London, England. Like many successful artists, Radim didnt start out as a designer. He has a degree in business management, and it wasnt until he was 24 that he turned to full-time design and illustration. His cutting-edge, innovative designs, and bold use of color has helped boost the visibility of many household brand names, such as FUZE Beverage, Coca-Cola, Malibu, Dell, and PlayStation. Under the name Brand Nu, Radim has applied his vast skill set to advertising campaigns, product branding, magazine covers, editorial illustrations, and Web solutions. He treats every project as a brand-new (i.e., brand nu) challenge, and never approaches a brief the same way twice. His passion to make each project better than the last and his attention to intricate detail shines through in his work.
Layers: You seem to enjoy your freedom as a freelance designer and illustrator. What are the advantages of working for yourself compared to working for an agency or running your own agency?
www.LAYERSMAGAZINE.com
Layers: You use agents to help promote your work and nd new clients. What are the advantages of using an agent, and at what point in a designers career should he start thinking about using an agent? Malinic: A good agent can help you reach clients that can be hard to get. Corporations often prefer to deal with an illustrator who has an agent. Its a simple rule because the ad agency has a back up of the agents talent roster; therefore, being represented sometimes makes you a better pick for the job. I started thinking about getting an agent when I was ready to take the work up a notch. I learned a lot from my previous day jobs and I knew I could successfully freelance. I didnt have a dream client list, but I had the right skill set.
Malinic: The biggest advantage is the opportunity to create interesting and innovative work. If you work for an agency, youre part of a team and the work gets diluted. Politics and extra people are involved in agencies, which can overtake the joy of each project. I opted for a freelance career for many reasonsmainly so I can choose what I do and when I do it. Obviously, its not a fairy tale scenario. Sometimes you have to work 18-hour days, but Im a lot happier to be at the forefront of the creative tasks in a project. If I need to take time off, I decide when to take it and when to work.
18
19
lAYERS MAGAZINE ][ nov / dec 2010
Layers: Weve interviewed many designers in the past who have a college degree in a subject totally unrelated to design, but theyve always found a way to use that degree to their advantage in the design industry. Has your degree in business helped you succeed as an artist? Malinic: My rst encounter with the subjects of economics and marketing was simply enchanting. Although I dabbled with graphic design before economics, I chose to study for a business degree. I always say that a freelancer is a boss during the day and a creative at night. Having a business management background is handy, but successful design practice is a combination of common sense, good manners, and hard work. Layers: Your work is more about setting trends instead of following them. Can you tell us a little about your style and how you strive to create something new and unique each time? Malinic: I admire illustrators who have one style that they do all day, every day. Its as if theyre on a diet eating just apples and never try anything different. I understand theyre comfortable that way and most are very successful. But I have the opportunity to do anything I want, any time I want. It took me a while to get to the point where I am right now, but Im enjoying it. So I work to nd new ways of applying the creative ideas, which always carry my signature style. This way my clients are open to new ideas and let me explore the unexpected. Layers: Youve self-published three limited-edition showcase books of your work. How have these books helped your career? Have they helped in ways that you never even imagined? Malinic: They have helped because I did something different than my contemporaries. Well always have nice relationship with physical objects like books and magazines. For me, each book has opened a new set of doors and helped me grow. You can change the content of your online portfolio as often as you like, but the book stays the same forever. [CONTACT] Radim Malinic www.brandnu.co.uk
All imAges BY RADim mAliNiC
gallery]
showcasing the design work of our readers
the digital canvas
Design: Louis Armstrong ] [ Client: Personal Work ] [ Designer: Wayne Rose ] [ Software: Adobe Illustrator CS ] [ http://waynerose.webs.com
Design: ARTrageous Poster ] [ Client: Whistler Arts Council ] [ Designer: Ruth Johnson ] [ Software: Adobe Photoshop CS4 and Adobe Illustrator CS4 ] [ www.ruthjohnson.bc.ca
www.l ayer smagazine.com
The staff at Layers magazine appreciates the time and effort involved in the creative process, no matter how large or small the project. With this in mind, we offer you the opportunity to display your work on The Digital Canvas. Please submit your print, Web, or packaging design (jpeg or eps format) to: letters@layersmagazine.com. Please include name of piece, client name (if applicable), applications used, and any website where our readers can view more of your work.
Design: Craigslist Casual Encounters Book Cover ] [ Client: HaHa Publishing ] [ Designer: Tara Lynn Price ] [ Cover Illustration: Anthony Walton ] [ Software: Adobe InDesign CS3 and Adobe Photoshop CS3 ] [ www.tlpricefreelance.com
20

21
l AY E R S M A G A Z I N E ][ no v / de c 2010
Design: Jungle Birds ] [ Client: Personal Work ] [ Designer: Yuval Hoshen ] [ Software: Adobe Photoshop CS4 ] [ www.wix.com/yuvalhoshen/yuvalhoshen
Design: ialmostknewyou ] [ Client: Personal Work ] [ Designer: Andre Villanueva ] [ Model: Elissa Villanueva ] [ Photographers: Amanda Childress & April Garzarek ] [ Software: Adobe Photoshop ] [ www.000-000-0000.com
Design: Spring Float ] [ Client: Personal Work ] [ Designer: Doug Gilbert ] [ Software: Adobe Photoshop CS4 ] [ www.doug-gilbert.com
DESIGN MAKEOVER]
J A K E { } W I D M A N
client:[www.swinggoth.com Swing Goth]

monster ball
wing Goth was born out of an attempt to marry partner dancing with modern music. We dream of a future where dancing with each other is once again the norm, but were unlike other partner dancing clubs in that we dance to modern music, said Brian Gardner, originator and promoter of Swing Goth. Gardner hosts biweekly dance parties and occasional live-music events in San FranciscoSwing Goths homeand the activity has spread to New York. We teach partner dancing based on upper body connection, and we focus on developing a personal style and air rather than on perfecting cookiecutter footwork, Gardner said. Some of Swing Goths events, such as this Octobers Ball of Cthulhu, feature steampunk bands. Steampunk is a visual aesthetic and literary genre that, like Swing Goth, combines old and new. I think of it as what would happen if the combustion engine and mass production were never invented, explains Gardner. Think of oating airships or computers with keyboards made out of typewriters. Aesthetically, it is said that steampunk is what happens when goths discover brown. For the ball yer, one of the participating bands came up with the tentacles-and-cemetery theme. Gardner took it from there, populating the cemetery with ghouls drawn by a friend or images from the public domain. The yer will be printed as a 4x6" postcard to be distributed in clubs, record stores, and the like; and as 8.5x11" posters to be hung in appropriate neighborhoods. Gardner likes some aspects of the flyer, such as the tentacles wrapping around the band, but he worries that it looks too wordy and doesnt like the way the text breaks down into horizontal bars that interrupt the eyes ow. Hed like a yer that covered the event details but still gave a feeling of gentle, dark seduction between elegant ladies and gentlemen. We asked three designers to create an appropriately seductivebut appropriately spookymonster mash yer.
before
Hed like a yer that covered the event details but still gave a feeling of gentle, dark seduction between elegant ladies and gentlemen.
Jake Widman is a writer and editor who lives in San Francisco. Hes been covering the intersection of computers and graphic design for about 20 years nowsince back when it was all called desktop publishing.
makeover submissions
Were looking for product packaging or labels, print advertisements, websites, and magazine covers that are currently in the marketplace for future Design Makeovers. So if you or someone you know has a design that youd like us to consider making over, or if youre a designer and youd like to be considered for a future Design Makeover, drop us a line at letters@layersmagazine.com.
22

23
after
DESIGNER: Maria Stephens www.tigerlillydesigns.co.uk
y immediate impressions of the original design were that it was busy, absent of any real focal point, and lacking impact. I wanted to give it a more professional touch that would complement the reputation of the promoter and musicians. I began by stripping the poster down to its basics and identifying what the client liked about the current design: colors, central image, and dark mysterious vibe. I then looked at what elements were necessary to the yer and reordered them in terms of size and location to create a more structured hierarchy. I considered the main focal point of this poster to be the event, theme, and date, and therefore concentrated the design on these areas. I liked the cemetery theme as it has a link with the headline act Abney Park (also a cemetery here in London), as well as being a perfectly tting theme for this monster mash. The overall colors of the poster remain dark so that the white, green, and yellow text can really pop in the ultraviolet lighting common in clubs. All the band logos have been displayed using white text in the style of their logosthis will ensure that they stand out in nightclub lighting while complementing the central image rather than detracting from it. To reinforce the event theme of Cthulhu (a ctional cosmic entity created by horror author H.P. Lovecraft), stylized ethereal tentacles were added crawling out from under a headstone. The tentacles provide a sense of horror and mystery, as well as conveniently creating the perfect frame with which to emphasize the main details of the event. The event name and date appear on the headstone, almost as though they were carved there. Overall, the nal design is a classy, stylish, elegant take on a subject matter (Halloween) that can often be clich and cheesy.
The tentacles provide a sense of horror and mystery, as well as conveniently creating the perfect frame with which to emphasize the main details of the event.
[ A B O U T
T H E
D E S I G N E R ]
Maria Stephens] [ www.tigerlillydesigns.co.uk

Originally from the beautiful valleys of South Wales, Maria Stephens has spent the last ve years honing her expertise on the streets of London, working her way up through the ranks of design teams and enjoying both agency and client side projects. With a Masters Degree in Graphic Communication, Maria realized that she could have more fun and greater creative freedom working for herself and founded Tigerlilly Designs, a boutique design agency with big ambitions, in 2008. Since its founding, Tigerlilly has worked with start-up entrepreneurs, blue-chip businesses, charities, and classy individuals on both sides of the pond. Recently, Tigerlilly nurtured a ourishing relationship with Razor Research, an award-winning research agency based in London. This partnership has led to work for well-known brands such as Green Giant, Betty Crocker, and Hagen-Dazs. Maria lives in Central London with her boyfriend and her basil plant named Fred.
APPLICATIONs USED: Adobe Photoshop CS4, Adobe Illustrator CS4, and Adobe InDesign CS4
[ des i gn make ov e r ]
after
DESIGNER: Kwasi Amankwah www.kwasi.net
his project was very interesting to me because it covered a topic that I truly knew nothing about. Swing Goth was a whole new world, and before I started any designs I spent time learning about the culture. Once I had a good understanding of the scene, I started by coming up with an element to focus the piece around. I created a drawing that depicted two people heading to the party. The illustration was a composite of all the characters I saw in my researchthe female guest, for example, was an homage to one of the band members. The gures and the background were colored in Adobe Illustrator. The blue used was sampled from the original piece, and the line drawing of a graveyard silhouette added a texture to the background.
The toughest part about this project was incorporating all of the different band logos, with each of them using a different font. I decided that a dramatic angle would allow me to incorporate the logos as party information more cohesively. The logos and information were manipulated so that they appear to t into the same 3D space as the illustrations people. Changing logo one into a spatial element allows the different fonts to act as a unit while being so different from each other. I set the ampersand in Angelic War, which I thought looked like a nice blend between the fonts used in the Swing Goth logo and the Clockwork logo. For the rest of the copy, I used Helvetica Neue Bold, Light, and Light Italic. Its a simple font, but with the complexity of all of the other fonts used I wanted to keep the other information as simple and clean as possible.
The illustration was a composite of all the characters I saw in my research
[ A B O U T
T H E
D E S I G N E R ]
Kwasi Amankwah] [ www.kwasi.net

Kwasi started as an illustrator and moved into graphic design after gaining a background in Adobe Photoshop. After getting his Bachelors Degree in Art History at the University of Illinois, he moved to Chicago to attend the Art Institute of Chicago. There he earned his BFA in graphic design, after which he attended the University of Illinois-Chicago for his MFA. His diverse background and his love and interest in all different styles of art gives him a unique approach to his design projects. While he spends most of his time working on graphic design, he also draws, paints, and belongs to a screen print studio. After school, Kwasi spent several years on an in-house graphic design team and teaching graphic design at a local college. Kwasi has now moved into the freelance world and started his own company, At Nine Design. Kwasi resides in Chicago with his wife and dog.
APPLICATIONs USED: Adobe Illustrator CS3 and Adobe InDesign CS3

continued on p. 26
24
[ des i gn make ov e r ]
after
H
DESIGNER: Matt Holley www.mattholleydesign.com

aving no knowledge of Swing Goth, steampunk, or H.P. Lovecraft, I was jumping into a completely different world blindfolded. The name Cthulhu had little meaning to me until doing the research. This creature was created as a symbol of extreme horror and evil. While the Ball of Cthulhu bears the creatures name, its an event lled with fun and fantasy. Looking at the original poster, there are several elements that are distracting. Theres so much text and so many line breaks that its virtually impossible to notice the design. From the cartoon characters to the poorly beveled tentacles, this poster doesnt reect the vibrance and quality of this event. Browns and greens gave me the fall feel I wanted, while allowing me to keep the poster bright, warm, and inviting. I drew my interpretation of Cthulhu as if he were going to a costume party (on paper, then redrawn in Adobe Illustrator). His plaid suit and paisley tie is what he grabbed from Goodwill the night before the ball. Hes positioned on the hardwood oor and is holding a mystical scepter as if hes the dancing disco ball of the party. The header text is Olivers Barney, which was the perfect thickness for me to apply the wood grain texture to. The leaves echo the warmth and fall feel of the wood. Reprise Stamp was used as the informational text because its eroded yet remains as legible as Helvetica. The header and footer text are both set in a triangular shape and give a nice sense of balance to the page. Logos were strategically placed so as not to take attention away from the overall design of the poster. Ive always loved the look of screen-printed posters, and wanted to give this poster a similar vintage look and feel.
I drew my interpretation of Cthulhu as if he were going to a costume party
[ A B O U T
T H E
D E S I G N E R ]
Matt Holley] [ www.mattholleydesign.com

Matt Holley is a passionate freelance designer out of Columbus, Ohio. With a broad range of experience ranging from corporate rebranding to creative marketing and interactive design, Matt brings a clean approach to design and focuses on getting rid of unnecessary clutter. Clean lines, balance, and symmetry are at the forefront of Matts design profile. After graduating from Marshall University with a Bachelor of Fine Arts in Visual Design, Matt moved to Columbus to pursue his design career. While he enjoys corporate design, nonprots have always had a soft spot in Matts heart, as his dad and brother are both ministers. He loves using his talents to glorify God and help local churches grow, and impact their neighborhoods. Matt also enjoys playing music and is part of the Jared Mahone band, a groove-driven soulful pop band in Columbus. He is recently engaged and looking forward to being married to his ance, Krista.
APPLICATIONs USED: Adobe Illustrator CS3 and Adobe Photoshop CS3
26
t h e d i g i t a l s t u dio
ARTISTIC EXPRESSIONS]
B E R T { } M O N R O Y
illustrative text
The written word has always been considered to possess great power. There are thousands of different fonts available that can give what youre saying an additional emotional edge. When you illustrate text, you can give it impact that tells the story without even reading the words. Take a baby announcement, for instance; would you use an Old English typeface to illustrate it? No! You want something cute. You want something that says baby and not the Knights of the Round Table. A good suggestion would be little pillows that spell out the word baby, or the babys name. Thats a great idea, but what if you dont have a font that looks like pillows? This is what Photoshop is formaking your imagination come to life.
I M A GE S: I STO C K PH OTO I LLU STR ATI O N : TA F F Y C LI F F O R D
STEP ONE: To start, you need to choose a simple font such as Helvetica Bold. In a new, 72-ppi Photoshop document, select the Type tool (T), choose Helvetica in the Options Bar, and type a message. Note: Make sure to add plenty of spacing or kerning between the letters using the Character panel (Window>Character); the outcome of the text will look best if the letters arent so close together. Click on the Commit icon (checkmark) in the Options Bar when nished. STEP TWO: Choose Edit>Transform>Scale to modify the shape of the text. Click-and-drag the middle bottom handle of the bounding box to scale the text vertically to make it taller, as shown here. Press Return (PC: Enter) when nished.
[ This is what Photoshop is formaking your imagination come to life. ]

STEP THREE: Command-click (PC: Ctrl-click) on the text layer thumbnail in the Layers panel to make it a selection. Choose Select>Save Selection to save it as an alpha channel (just click OK in the Save Selection dialog). At this point, the original text that was entered can be discarded. Click-and-drag the text layer onto the Delete Layer icon (trash can) at the bottom of the Layers panel and press Command-D (PC: Ctrl-D) to deselect. STEP FOUR: Navigate to the Channels panel (Window>Channels) and click on the Alpha 1 channel. First, choose Filter>Blur>Gaussian Blur and change the Radius to blur the channel until the text receives rounded edges (6.4 pixels in this example). This becomes the basis for the rounded, pillow-like text. Next, we need to make the text sharp again with a Levels adjustment.
28

29
ing on a surface. Play with the Distance and Size sliders until you achieve the exact drop shadow you want. Dont click OK just yet.
STEP FIVE: Choose Image>Adjustments>Levels. In the Levels dialog, the further you move the black Input Levels slider, the thinner the text will become. The opposite is true by moving the white Input Levels slider; the further the white is moved, the thicker the resulting text. Move the black Input Levels slider to 70 and the white Input Levels slider to 96. Click OK. The result is a rounded-edged typeface.
STEP TEN: Click on the words Bevel and Emboss in the Styles list to give the text the feeling of being rounded and soft. Increase the Depth to 251% to add more contrast. Adjust the Size to 16 px to give the text a full, rounded effect. Increase the Soften amount to 7 px to soften the edges of the tones. Set the Angle to 120. Change the Highlight Mode Opacity to 99%, and click on the Shadow Mode color swatch to change the default color to make the pillows seem more baby like; we chose a deep blue (R:46, G:63, B:175). Note: The
STEP SIX: Now were going to create the little pillows. Click on the RGB channel in the Channels panel to activate it and then go back into the Layers panel and click on the Create a New Layer icon to create a new layer. Then, navigate back to the Channels panel and make the Alpha 1 channel a selection by simply Command-clicking (PC: Ctrl-clicking) on it (or you can go to Select>Load Selection and select Alpha 1 from the Channel drop-down menu). STEP SEVEN: With the Alpha 1 channel selected, choose Edit>Fill to ll it with color. Select Color from the Use drop-down menu, select a powder blue color (R:122, G:207, B:246) from the Color Picker, and click OK. Click OK again. Dont deselect just yet; in the next step, well give the little pillows some character by adding trim to the edges. STEP EIGHT: Back in the Layers panel, create another new layer and click on the Foreground color swatch in the Toolbox to select a trim color. In our example, we chose a bright yellow (R:251, G:246, B:33). Choose Edit>Stroke to open the Stroke dialog, enter 10 px for Width, select Outside for Location, and click OK. Deselect. Cute, but not the pillows were trying to achieve. We need to add dimension to make the text seem like uffy pillows. Dimension comes with the use of some lighting effects achieved through layer styles.
deep blue goes with the powder blue of the letters being shown in this example; your color choices depend on what youre illustrating. Click OK to apply the two layer styles. This will make the text look like it has the rounded edging usually found on these types of pillows.
STEP ELEVEN: Double-click on Layer 2 in the Layers panel to open the

Layer Style dialog again and click on the words Bevel and Emboss to add a slight adjustment to the settings to make the stroke look more natural. Change the Highlight Mode Opacity to 100%, and click on the Shadow Mode color swatch to change the color to brown (R:100, G:58, B:21). Click OK. The end result is big, uffy letters that tell the story. A few variations along the way can add some excitement. A suggestion might be the use of a pattern showing various toys to ll the letters rather than a single color. Youre only limited by your imagination. Photoshop provides you with the tools to create whatever you can come up with. Have fun!
STEP NINE: Double-click on Layer 1 in the Layers panel to open the Layer Style dialog. Click on the words Drop Shadow in the Styles list on the left side of the dialog to make the text appear to be rest-
Bert Monroy is considered one of the pioneers of digital art. His work has been seen in many magazines and scores of books. He has served on the faculty of many well-known institutions, written many books, and appeared on hundreds of TV shows around the world.
With Web Standards
By Sue Jenkins
Web standards, simply put, are the basic rules that all Web designers, coders, and programmers should understand and follow when designing and building webpages. While these standards mostly deal with coding and other behind-the-scenes issues, they can also greatly affect a sites design and influence how visitors access the content on different sites. Above all, standards help ensure that everyone (including nonhuman Web robots and spiders) can access every webpage on the Internetregardless of their browser, device, or operating system. In this article, youll learn where Web standards came from, why you should use them, and where you can go to find out more about them.
Images: iStockphoto.com Layout Design: Taffy Clifford

31
The birth of Web standards

In the early days of the Internet (back in 1989), before there were things like search engines, e-commerce, blogs, and social networking, the World Wide Web was a bit of a free for all where each website followed the coding whims of the person who made it. For example, some HTML coders used all caps for their tags to help easily see the difference between tags and content, while other coders used camelCase for their tags, and still others used all lowercase letters. In addition, some websites were composed entirely of graphic images placed snugly inside cells of a table and others were made using a combination of graphics, text, and tables. On one hand, this do-it-yourself coding environment allowed for unlimited freedom and creativity. On the other hand, having no rules to follow frequently resulted in an anything goes policy, which often made Internet users frustrated and confused about how they should navigate through a site to nd the information they were looking for. To be fair, the Internet did start as more of an information sharing space rather than a place to sell and buy stuff, chat with friends, and express yourself. However, as more people and companies began using the Web to market and sell their products and services, and more kinds of devices (such as handhelds and screen readers for the visually impaired) were being used to access the Web, it became clear that certain coding rules and standards would need to be established to help control all the chaos. So in 1994, thats what Tim Berners-Lee did. Berners-Lee, if you dont know, is the University of Oxford-educated mastermind who created the Internet as a global information sharing initiative while working at CERN (the European Organization for Nuclear Research) in 1989. Over the next several years, his specs for HTTP, URIs (Uniform Resource Identiers), and HTML were rened and improved upon as this new technology spread quickly around the world. By the early 90s, when many middle-class families owned at least one computer and many businesses had a Web presence, BernersLee founded the World Wide Web Consortium (W3C) as an international vendor-neutral group committed to creating Web standards that allowed for device-independent Web access. The W3Cs mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth of the Web.
The W3C homepage
The World Wide Web Consortium

Since the W3Cs founding, more than 100 W3C recommendations for Web design and applications, architecture, Semantic Web, XML technology, Web services and browsers, and authoring tools have been published on the W3C website. There have also been standards proposed for accessibility, internationalization, mobile Web, developing economies, and eGovernment. In fact, in 2009 Berners-Lee launched a new organization called the World Wide Web Foundation to help support and coordinate further development of the Web to benet humanity. A few of the early, more monumental W3C Web standards included things such as making uniform HTML/XHTML coding rules, recommending the inclusion of a DOCTYPE in the head of the code, and the promotion of using cascading style sheets (CSS) to separate webpage form (presentation) from webpage content. Here are some specic examples of each early Web standard:
HTML and XHTML Coding: To improve the presentation of webpages on Internet-capable devices, standards to HTML and XHTML now follow stricter coding rules to improve the accessibility of pages across browsers (Internet Explorer [IE], Firefox, Opera, Safari, Chrome, etc.); operating systems (Mac, PC, Linux, Unix); and other devices (screen readers, handhelds, printers, etc.) that access the Internet. Use of DOCTYPEs: By adding a DOCTYPE tag at the top of the code of all HTML and XHTML pages, the browser can interpret a webpage as an application in the XML programming language and thereby present that data within the Internet-capable device as it was coded. This standard is especially important because XML lets programmers create their own proprietary markup languages through which additional information can be exchanged on the Web. Use of CSS: Separating content (HTML) from presentation (CSS) and user interaction (JavaScript, jQuery, PHP, and other programming languages) allows designers, coders, and programmers to simplify their code and consolidate their presentation markup in one place.
Other important standards focus on accessibility issues geared toward making all Web content accessible to the widest possible audience across the widest array of devices. According to the W3C, people with disabilities make up roughly 10% of the Internets population. Simple coding changes can often make the biggest impact, such as requiring image tags to include alternate text attributes, link tags to have descriptive title and target attributes, and form elements to use tab order and hot keys to assist with navigation through a site without a mouse or standard keyboard.
Uniform
In addition to laying out Web standards, the W3C website is chock full of detailed information about HTML, DHTML, XHTML, XML, CSS, JavaScript, jQuery, Ajax, Ruby on the Rails, ARIA, and more. Youll even nd details on browser compatibility, document formats, Web graphic formats, and CSS, as well as more obscure documentation on developing technologies like HTML5 and CSS3 that have yet to be fully implemented across the Web. Denitely spend some time exploring this site. The more you understand about Web standards, the better youll be at designing and building standards-compliant websites.
Working with Web standards

Web standards have really helped make the job of building websites easier. This is especially true when you learn the right way to do things from the start. For example, when building webpages, its useful to follow a particular logical workow. First, you get your content on the page and then you mark it up with proper semantic HTML (semantic means that you use the right tags to match the meaning of your content, e.g., <h1> for Heading 1s). After that, you add your CSS to style the content, and lastly, you add any JavaScript and other programming languages as needed to create page interactivity and present dynamic data. One of the earliest and most important Web standards recommended by the W3C is the use of CSS instead of the heavy HTML formatting tags that designers, coders, and programmers used before. With the old method, formatting markup had to be wrapped around every block of text, every graphic, and each object or element displayed on the page. (Imagine managing a 30-page website and having to change all the fonts from Arial to Verdana!) Back then, it would have meant opening and editing every single page, line by line. By contrast, that same change today would only mean editing a few lines in your external CSS le.
With CSS, you can quickly create site-wide styles for the tags used to mark up your content, dene custom styles to selectively style elements, and create styles that will automatically be applied to an elements ID. Not only does CSS separate your presentation markup from your content, it also centralizes all the style information into one discrete location (an external CSS le that is linked in the <head> to all the pages in your site) and drastically reduces the le size of your webpages, thereby making your pages load faster in a browser. Thankfully, nearly all the popular browsers and Web editing software manufacturers are on board with Web standards, each working hard (and competitively) to help provide Web designers, coders, programmers, and Internet users with the best experience they can. In fact, for several years now, the top HTML and WYSIWYG code editorsfor example, Dreamweaver and Expression Webhave supported Web standards by automatically writing standards-compliant code. Whats more, the newest and most popular browsers (with the exception of IE) now render properly coded webpages near identically.
D weaver and E ream xpression W eb write standards-com iant code pl

Unfortunately, this does not mean that if you use a good HTML or WYSIWYG software program that youll be immune from coding errors. The sad truth is that youll still have to deal with things like display and compatibility problems with CSS and various scripts, IE-only features, and browser-specic coding issues. The good news is youre not the only one out there doing it. In all likelihood, someone on the Internet has already gured out the solution to your very problem and is willing to share it. For CSS-related issues, check out the Adobe CSS Advisor (http://bit.ly/6MsXLN).
E ly link your webpages asi to one or m externalC files ore SS
A C A sor provides solutions to com on dobe SS dvi m C and browser-com bility issues SS pati
32

33
With Web Standards
Besides presentation consistency and device independence, another really smart reason to build standards-compliant websites is better search engine optimization (SEO), which can both help improve search engine results page rankings and make the content within the site easier to nd for Web visitors. Standards-compliant sites provide a more consistent experience to the widest audience of users across the widest variety of devices and platforms.
As for CSS3, according to the good folks over at www.sitepoint .com, all the major non-IE browsers now support many useful CSS3 properties, as long as (for now) its used with proprietary code (e.g., -moz or -webkit). One amazing thing you can do right now with CSS3 is set multiple backgrounds for a single div element.
Web standards for Flash, HTML5, and CSS3

As cool and interactive as they can be, Flash movies are single objects that are embedded into a webpage, which means that none of the content contained within them can be bookmarked, selected, copied, or saved the way you can with content in a regular webpage. They also cant contain any meta tag information like keywords or descriptionswhich means that search engines cant index any of the content to help visitors nd that content. As a workaround to building entire sites from Flash, some developers have begun shifting to including Flash modules inside of regular sites and using JavaScript, jQuery, and HTML5 to create page interactivity, both of which are easy enough to learn, standards-compliant, and search engine friendly. For an interesting read on Flash Web standards, visit www.webmonkey.com/2010/02/use_web_standards_with_ash. HTML5which is the new and smarter version of HTMLis now starting to be supported by the newest and most popular browsers. HTML5 introduces a bunch of new semantic elements like <nav> and <footer>, and adds sweet JavaScript-like interactive functionality through DOM scripting for things like geolocation, audio and video playback, and drag-and-drop. You can read about all the differences between HTML4 and HTML5 at http://dev.w3.org/ html5/html4-differences.
Code example of CSS3 used to create multiple background images
HTML5 semantic tags from www.html5rocks.com
Example of CSS3 showing four separate images within a single div tag
Whats more, new CSS3 properties are being introduced

with each browser update so that eventually CSS3 can be used without proprietary code. As for IE browsers (for now), IE8 renders CSS2 predictably, and there are whispers that IE9 might get in the game. For details and information about working with CSS3, visit www.css3.com.
HTML5 drag-and-drop demo at www.html5demos.com
With Web Standards
Where can I learn more?

There are dozens of sites on the Web to help designers, coders, and developers learn the rules of the Internet road. Each is dedicated in some form to helping create standards for structural markup, presentation, scripting, and programming languages, as well as object models and other markup languages, such as SVG. There are also plenty of books and free online tutorials such as Designing with Web Standards by Jeffrey Zeldman.
If youd like to learn more about Web and accessibility

standards, check out the following sites:
Web standards and accessibility resources

World Wide Web Consortium (W3C) World Wide Web Foundation Web Standards Project Web Standards Group Web Accessibility Initiative Equality & Human Rights Commission Section 508 Web Accessibility in Mind www.w3.org www.webfoundation.org www.webstandards.org http://webstandardsgroup.org www.w3.org/WAI www.equalityhumanrights.com www.section508.gov http://webaim.org
Tutorials, references, statistics, and forums

W3Schools JavaScript Kit The jQuery Project HTML5 HTML5 Demos HTML5 Reset CSS-Tricks (HTML5 Innershiv) Introduction to CSS3 Web Safe Font Tester DebugBar Web Style Guide 960 Grid System Another useful resource is the Max Designs Web standards checklist (www.maxdesign.com.au/articles/checklist), which can guide you toward using a valid and accessible markup style with CSS to create websites that are accessible, usable, and search engine friendly. www.w3schools.com www.javascriptkit.com www.jquery.com www.w3.org/TR/html5 www.html5demos.com www.html5reset.org http://css-tricks.com/html5-innershiv www.w3.org/TR/css3-roadmap www.fonttester.com/web_safe_fonts.html www.my-debugbar.com/wiki www.webstyleguide.com/wsg3/index.html http://960.gs
HTML/XHTML code validators

W3C Markup Validator W3C Link Checker W3C Log Validator WDG HTML Validator CSE HTML Validator http://validator.w3.org http://validator.w3.org/checklink www.w3c.org/QA/Tools?LogValidator www.htmlhelp.com/tools/validator www.htmlvalidator.com
CSS code validators

W3C CSS Validator WDG CSS Check http://jigsaw.w3.org/css-validator www.htmlhelp.com/tools/csscheck
Accessibility validators
Web Accessibility Evaluation (WAVE) Too www.wave.webaim.org/index.jsp SortSite Testing Tool www.powermapper.com/products/sortsite HiSoftware Cynthia Says Portal www.contentquality.com W3C Code & Accessibility Validators www.w3.org/WAI/ER/tools/complete.html
Browser compatibility verification

The Max Design Web standards checklist
Sue Jenkins is a professional Web and graphic designer, photographer, and creative director at Luckychair.com. She is also an award-winning Adobe software instructor appearing in six training DVDs and author of seven instructional books including Web Design All-in-One for Dummies.
Adobe BrowserLab https://browserlab.adobe.com Spoon Browser Sandbox www.spoon.net/browsers Browershots.org http://browsershots.org
Web conferences and Web design events

An Event Apart South By Southwest Mix10 www.aneventapart.com http://2007.sxsw.com/interactive http://live.visitmix.com
34
RADIM MALINIC
[DIGITAL
PHOTOGRAPHY TUTORIAL]
C H R I S { } O R W I G
improve your photographic workflow

Here were going to discuss how to improve your photographic workflow with some new timesaving features in Bridge and Photoshop CS5. Becoming a better photographer is an adventure and lifelong pursuit. Therefore, to help you reach new horizons in your own photographic workflow, read on.
[CREATE CONTACT SHEETS]

[ADD WATERMARKS]
In the current digital age, watermarks are more important than ever. A watermark gives you the ability to protect your image or to reinforce your brand. In Bridge CS5, you can add watermarks in the Output module to either create single or multiple image layouts, or Web galleries. This way, when you deliver or send your les digitally, they can be protected from unfair use. For a basic text-based copyright, select PDF, and then in the Watermark section, enable Add Watermark, Place on Each Image, and Insert Text. Enter text in the text eld and then choose a Font, Size, and Color.
One of the pitfalls of digital photography is that we tend to capture too many photos. As a result, most of them will end up being lost or buried on a hard drive. The remedy is to create contact sheets for a quick visual reminder. To create a contact sheet in Bridge, rst choose Window>Workspace>Output. (Note: The contact sheet option is in a new location in Photoshop CS5.) Customize the panel settings on the right and after making changes click the Refresh Preview button to see an updated layout. When satised, click Save.
36

37
LAYERS MAGAZINE ][ nov / dec 2010
[CUSTOM GRAPHIC WATERMARKS]

Another effective way to use a watermark is to use a graphic, logo, or brand identity element on top of the image. First create a graphic in Photoshop and save it as TIF or PNG. (Hint: Use PNG when you want to have transparency.) Then, in the Watermark section, select Add Watermark, Place on Each Image, and Insert Image. Click on the icon to the right of the Path eld, select a graphic, and use the sliders below to customize the size, opacity, and position of the watermark. This way you have precise control over how and where the watermark is displayed.
[BATCH RENAMING]
A common need for photographers is the ability to change the name of their images. The good news is that you can now batch rename les with more ease than ever while in Bridge CS5. Select one or more images, Right-click on a selected image, and choose Batch Rename. In the Batch Rename dialog, notice the two new options: Presets and Preview. While these are simple improvements, these are great timesavers. Use the Presets drop-down menu to save, store, and reuse common renaming conventions, and click on the Preview button for a quick visual of how the le names will actually appear.
[OPENING MINI BRIDGE]

If you havent used Mini Bridge, youll denitely want to start using it. Mini Bridge provides you with the ability to browse, lter, sort, preview, and open images from directly inside of Photoshop. To open Mini Bridge, click on the Launch Mini Bridge icon (circled) in the Application Bar or choose File>Browse in Mini Bridge. Yet, in order to be even more effective, youll want to set up a custom keyboard shortcut. Choose Edit>Keyboard Shortcuts, twirl open the File options, and assign Browse in Mini Bridge a shortcut. This way, you can quickly (and efciently) access and use Mini Bridge whenever you need it.
[BECOMING FAMILIAR WITH MINI BRIDGE]

The Mini Bridge panel can be relocated or resized just like any of the other panels, and the interface is relatively intuitive except for a few new icons. Use the Filter icon to choose a range of ltering options, the Sort icon to access options to change the order of les, and the Tools icon for image placing options. The View icon (located at the bottom of the panel) allows you to change the interface layout and the Preview icon has various preview options. You can press the Spacebar to enter Full Screen mode and doubleclick on a le to open an image.
[EFFECTIVE WORKSPACE CONTROL]

Photoshop is a strong program jammed-packed with features. Yet, the downside is that many features arent relevant to your own workow. The good news is that you can quickly and easily customize a workspace to suit your needs. To create a custom workspace, choose Window>Workspace>Essentials (or whatever workspace you want to use) or click on the Essentials button in the Application Bar. Note: To access more workspaces in the Application Bar, click-and-drag the handles (circled) to the left. Make changes in the workspace in regards to panel sizes, positions, or visibility and Photoshop will automatically save the changes.
Working with layers and layer style effects in CS5 has been improved. Now you can select one or more layers and then change the opacity of all of those layers at one time. Simply Command-click (PC: Ctrl-click) on multiple layers and change the Opacity in the Layers panel. In addition, the layer style effects settings (drop shadow, stroke, etc.) are capable of being saved with customized default settings. To set a default, apply a layer style effect and click on the Make Default button in the Layer Style dialog. To reset the settings, click on the Reset to Default button.
[EXPANDED LAYER FUNCTIONALITY]
One of the most signicant features in Photoshop CS5 is the ability to rene and improve selections and masks. First, make a
[MAKING SMARTER SELECTIONS]
10
[CONTENT-AWARE FILL]
Being able to delete or remove unwanted items in a frame has long been the desire of photographers. Now this process is easier than ever. First, make a selection of an object with the selection just outside the area of the objectif the selection is too close, it wont work well. To increase the selection, choose Select> Modify>Expand and use the Expand dialog. Then press Shift-F5 to open the Fill dialog and choose Content-Aware from the Use menu in the Contents section. Click OK.
selection and then click the Rene Edge button in the Options Bar, or create a mask, Right-click on the mask in the Layers panel, and select the Rene Mask option. In both situations, this action will open a Rene dialog. In the Edge Detection section, enable the Smart Radius checkbox and increase the Radius to work on a larger edge area. Then, use the Adjust Edge sliders to dial in the exact selection parameters. Click OK when nished.
38

39
11
[CONTENT-AWARE HEALING]
In the previous version of Photoshop, the Spot Healing Brush was primarily relegated to removing small blemishes in a frame. Now it can be used to content-aware ll larger areas. Its especially good at removing items that are distractions, which are on top of complex contentthink telephone wires in front of a tree. To use this tool, select the Spot Healing Brush tool (J), choose Content-Aware in the Options Bar, and then click-and-drag over the element that needs to be removed. For example, here the garment strap was removed with a single brush stroke. (Hint: Make sure the brush size is slightly larger than the blemish.)
12
[HDR TONING]
HDR and HDR type of effects have taken the photographic community by storm. More and more photographers are beginning to experiment with how they can use these effects to improve their images. HDR toning provides a set of powerful controls that can be used to quickly make subtle or dramatic HDR-like effects. To use HDR Toning, choose Image>Adjustments>HDR Toning. In the HDR Toning dialog, experiment with the various presets from the Preset drop-down menu, or simply create a custom effect by modifying the Edge Glow, Tone and Detail, and Color controls.
13
[HDR PRO]
Many argue that true HDR has nally come of age in Photoshop CS5, and I completely agree. HDR is a valid and powerful tool for both creative and corrective purposes. HDR Pro is now stronger than ever giving you controls to deal with common HDR problems (like ghosting) and more precise controls over tonal blending. To use HDR Pro, capture multiple frames of the same subject at different exposure settings. Next, select the images in Bridge and choose Tools>Photoshop>Merge to HDR Pro. In the Merge to HDR Pro dialog, use the Edge Glow, Tone and Detail, and Color/Curve sections to create the desired effect.
14
[TARGETED ADJUSTMENT TOOL]
The Targeted Adjustment Tool (TAT) allows you to make precise adjustments. You can use the TAT with Black & White, Curves, and Hue/Saturation adjustment layers. Simply create one of the aforementioned adjustment layers, select the TAT (circled) from the Adjustments panel, position the cursor over the area of the image you wish to adjust, and click-and-drag. This is one of the most powerful tools in Photoshop, and is something youll use frequently. I recommend you choose Auto-Select Targeted Adjustment Tool from the yout menu. This way, each time you open one of the supported adjustment layers, the TAT will be selected by default.
15
[LAB BLACK-AND-WHITE ACTION]
Photoshop CS5 comes preinstalled with a few features that you have to dig around in order to nd. One of those features is the incredibly helpful LAB Black & White conversion action. To access this action, open the Actions panel (Window>Actions), click on the yout menu, and choose LAB - Black & White Technique. This will load the action into the Actions panel. Next, open an image and click on the Photo Toner Technique action. Click on the Play icon and the action will run through the various steps, which will help you to create a potentially more compelling black-and-white image.
16
[HUD COLOR PICKER]
In Photoshop CS5 theres a new way to work with color. The Eyedropper tool (I) now features a color-sampling ring that acts as a visual aid to help determine the correct color. Surrounding the selected color is a 50% neutral gray ring, which visually isolates and sets apart the color being sampled. In addition, youll nd a heads-up display (HUD) color picker, which allows you to quickly choose colors while painting. To open this display, press ControlOption-Command-click (PC: Shift-Alt-Right-click). There are also two options for the HUD: the Hue Strip or Hue Wheel. Choose Preferences (PC: Edit)>General to select the HUD you like best.
17
[BRUSHES AND MASKING]
As a photographer seeking to create more powerful images, learning how to work with masking is key. In Photoshop, masking provides you with the ability to selectively paint various types of adjustments. New to CS5 is a set of brushes called bristle tips located in the Brush panel (Window>Brush), which helps create more realistic, smooth and clean masks. The bristle tips provide the ability to specify precise brush bristle characteristics, which helps create natural-looking brush strokes. These brushes in addition with the other brushes improve how you create masks.
In the Lens Correction dialog (Filter>Lens Correction), youll see a new tab titled Auto Correction. If your camera prole is available, the lter will select a prole for your camera and lens combination. Select the various types of auto corrections youd like to have applied and click OK. In the example shown here, you can see how even an image captured with a sheye lens (above) can be relatively corrected (below). Note: While typically you wont be using this lter to remove such dramatic sheye distortion, it does illustrate the power and potential of this new feature.
18
[LENS CORRECTION]
40
Chris Orwig, photographer, digital guru, and author, is on the professional photography faculty at the Brooks Institute in Santa Barbara, California. For more information and inspiration, visit www.chrisorwig.com where you can nd out information about his latest books, training, and creative projects.
ALL IMAGES BY CHRIS ORWIG UNLESS OTHERWISE NOTED
RADIM MALINIC
[P
HOTOSHOP TUTORIAL]
D A V E { } C R O S S
Creative Suite advantages

Needless to say, Photoshop is an extremely powerful tool. Add in the other Creative Suite programs and theres even more amazing possibilities. Here well look at how to combine Photoshop, Bridge, and InDesign to create easily updated contact sheets, and then show you six ways to use Photoshop and Illustrator together.
[CREATE A BACKGROUND]
In Photoshop, create a new 11x8.5" document at 300 ppi and make a background design for the contact sheet using textures,
[SWITCH TO INDESIGN]
Open InDesign and choose File>New>Document. Deselect the Facing Pages checkbox, select Landscape for the Orientation, click the chain-link icon in the Margins section to disable the default settings, and set the Right Margins eld to 2 in (this is where the contact information will go). Click OK. In the Pages panel (Window>Pages), double-click the A-Master page and choose File>Place to add the layered PSD to InDesign. To place the le, hold down the Shift key and click-and-drag to draw a box the size of the document. When you release the mouse button, the le will be placed inside.
lters, and whatever else youd like. We combined images; added a shaded area to enter contact information in InDesign (we set the blend mode to Multiply and Opacity to 50% in the Layers panel); turned the design into a vector smart object (to allow for easy edits after the document has been placed in InDesign); and added a Vibrance adjustment layer. Choose File>Save As, set the Format to Photoshop, and enable the Layers checkbox to save the document as a layered PSD. Click Save.
42

43
[ADD CONTACT INFO]

Still on the master page, choose the Type tool (T) and draw a text box in the right margin to enter your contact information. Also, place any logos or other design elements that you want behind the placed images. Double-click on Page 1 in the Pages panel and add any elements that you want to overlay on the placed images, such as an embellishment, as shown here. Tip: Even the embellishment can be a layered PSD le with a different choice on each layerchoose Object>Object Layer Options to choose a different layer to display in InDesign.
[CHOOSE IMAGES IN BRIDGE]

Open Bridge and navigate to a folder of images. Command-click (PC: Ctrl-click) 12 images you wish to use for the contact sheet. To make things easy, use labels; press Command-8 (PC: Ctrl-8) to apply labels to the chosen les. Note: Choose portrait or landscape orientationsrather than mixing them togetherfor contact sheets (for our example, we chose landscape only). After the labels are applied, click Approved in the Filter panel to show only the labeled images.
[OUTPUT IN BRIDGE TO PDF]

Choose Window>Workspace>Output. Select the PDF option in the Output panel, and in the Document section, enter the same settings as the InDesign document. In the Layout section, enter the information shown here. Dont worry about getting it right the rst time; you can click the Refresh Preview button to experiment with the settings. (Note: To remove the lename, uncheck the Filename box in the Overlays section.) Click Save at the bottom of the panel to save as a PDF, and click the Save Template icon beside the Template drop-down menu to save as a template.
[PLACE PDF IN INDESIGN]

Back in InDesign, choose File>Place to bring in the PDF you just created. To place the PDF, use the same method as Step Two to place the layered PSD, but draw a box around the margins. If necessary, nudge the PDF into position. If you added an embellishment, choose Object>Arrange>Send to Back to position the PDF behind it. Save your InDesign le. Note: The PDF is a live link now, viewable in the Links panel (Window>Links).
[NEW CONTACT SHEET IMAGES]

To create a new contact sheet with new images, go back into Bridge and select a new set of images. Repeat Step Four to isolate the new photos you selected. Use the template you previously saved to quickly apply the same settings and then click the Refresh Preview button to make sure everything looks good. Then save the PDF using a different name than the rst set of images.
Back in InDesign, go to the Links panel and highlight the previously placed PDF le. Click the Relink icon (chain-link) at the bottom of the Links panel, navigate to the new (replacement) PDF le, and click Open. The le should update with the new images, be scaled correctly, and still have the same embellishment (if one was added). Save this InDesign le using a different name. Now any time you want a new contact sheet, you can repeat this operation: Create a new PDF using the Bridge Output options and then use the Relink icon to connect to the new le in InDesign.
[UPDATE LINKED PDF]
[six ways]
ISTOCKPHOTO/DMITRY ERSLER
Illustrator doesnt come with basic shapes that you can use as the basis of your artwork, but Photoshop does. In Photoshop, select
[COPY-AND-PASTE BASIC SHAPES]
An Illustrator logo can be built in Photoshop so that its always available as a custom shape. The only catch is that the Illustrator artwork must be one color and must be made into a compound path (which means there cannot be white areas, only holes). Copyand-paste the artwork into Photoshop, choose Path in the Paste dialog, and click OK. Choose Edit>Dene Custom Shape and name the shape. Click OK. Now you can access the logo at any time from the Custom Shape Picker in the Options Bar and scale the logo to any size.
[TURN A LOGO INTO A CUSTOM SHAPE]
the Custom Shape tool (nested under the Rectangle tool [U]) and select a shape from the Custom Shape Picker in the Options Bar. Remember to enable the Paths icon (middle icon) in the Options Bar. Hold down the Shift key and click-and-drag to create a path. Press Command-C (PC: Ctrl-C) to copy the path, open Illustrator, create a new document, and press Command-V (PC: Ctrl-V) to paste the path. In the Paste Options dialog, choose Compound Shape (fully editable) and click OK.
44
continued on p. 46
Photoshop CS5 Extended has Repouss, but if you dont have that version or havent mastered it yet, try this alternative. In Illustrator, create some type and choose Effect>3D>Extrude & Bevel. Enter the desired settings and click OK. Copy-and-paste the results into a Photoshop document and choose Smart Object in the Paste dialog. If you need to tweak or change the type, double-click the Vector Smart Object thumbnail in the Layers panel to return to Illustrator and use the Appearance panel (Window>Appearance) to edit the 3D settings. Once the Illustrator le is saved, it will update automatically in Photoshop.
[3D TYPE]
When you need to use a number of specic colors in various applications, use this example. After creating artwork containing swatches in Illustrator, deselect all swatches in the Swatches panel (Window>Swatches) and choose Add Selected Colors from the panels yout menu. Choose Select All Unused from the yout menu to highlight the unused swatches, then choose Delete Swatches, and click Yes. Finally, choose Save Swatch Library as ASE (Adobe Swatch Exchange) and save the swatches. Then, in Photoshop, choose Replace Swatches from the Swatches panels yout menu to replace the default swatches with the new ones.
[SHARE SWATCHES]
This example is a bit of a cheat because you cant copy or export the perspective grid from Illustrator CS5. In Illustrator, click on the
[THE PERSPECTIVE GRID]
Illustrator contains extra sets of brushes and symbols that contain some pretty cooland completely scaleablegraphics we can use in Photoshop. For example, look under Window>Brush Libraries>Vector Packs and youll nd Grunge Brushes Vector Pack and Hand Drawn Brushes Vector Pack. These options were designed for paths in Illustrator, but you can also drag them from their panels onto the artboard where they become vector shapes that you can copy-and-paste into a Photoshop document. Here, we used several Illustrator brush shapes to create an interesting border.
[USE BRUSHES AS DESIGN ELEMENTS]
Perspective Grid tool or press Command-Shift-I (PC: Ctrl-Shift-I) to display the grid. Then use the controls to set up the grid the way you want and take a screen capture of it. For Macs, press Command-Shift-4 and click-and-drag over the grid. For PCs, hold down the Alt key and click on the Print Screen button. Locate the screen capture, open it in Photoshop, and use it as a reference for your work.
46
Dave Cross is Senior Developer, Education and Curriculum, for the National Association of Photoshop Professionals. He is the author of Photoshop Finishing Touches and The Photoshop CS2 Help Desk Book, and is featured on a series of Photoshop training DVDs and on Photoshop User TV.
ALL IMAGES BY DAVE CROSS UNLESS OTHERWISE NOTED
RADIM MALINIC
[I
LLUSTRATOR TUTORIAL]
C O R E Y { } B A R K E R
movie poster
As you may know, Im a big fan of movie posters and I realized that I always create them in Photoshop. Recently, I was asked if its possible to do them in Illustrator as well. The answer is a resounding yes, and theres a real advantage of doing something like this in Illustrator.
ISTOCKPHOTO/KKGAS
[PSD FILES FOR ILLUSTRATOR]

ISTOCKPHOTO/ICONOGENIC
[CREATE A NEW DOCUMENT]

In Illustrator, choose File>New to create a new document, click OK to use the default settings, and then choose View>Hide Artboards. Select the Rectangle tool (M) and click once where the artboard was to open the Rectangle dialog. Enter 8 in for Width and 12 in for Height, then click OK. This is a proportional size to an actual movie poster.
In this design, well incorporate two photos processed in Photoshop into our Illustrator movie poster. Select two photos where the subjects are facing opposite directions and open them in Photoshop. Next, convert the images to black and white, boost the contrast for a more dramatic effect, add black-to-transparent gradients all around to hide the backgrounds in the photos for easier placement, and save the photos as PSD les.
48

49
[PLACE FIRST IMAGE]

Choose File>Place, locate the rst image, and click Place. Choose the Selection tool (V) and position the image in the upper-left corner of the rectangle. Scale and rotate the image to better t the composition. Click to select the rectangle alone and choose Object>Arrange>Bring to Front. Shift-click to select the image and press Command-7 (PC: Ctrl-7) to clip the image into the rectangle shape. Now choose the Direct Selection tool (A), click on the path of the rectangle, click the Fill color swatch in the Toolbox, and set the color to black. This will make the image blend with the background.
[CREATE A CLIPPING SHAPE]

Select the Rectangle tool and click on the artboard again. In the Rectangle dialog, set the Width to 8 in, the Height to 3 in, and click OK. This shape is going to be another clipping shape for the second image. Before placing the second image, select the Shear tool (nested under the Scale tool [S]). Double-click on the Shear tool in the Toolbox to open the Shear dialog. Enter 20 for Shear Angle; in the Axis section, set Angle to 90; and click OK.
[PLACE SECOND IMAGE]

Choose File>Place, navigate to the second image, and click Place. Choose the Selection tool and scale and rotate the image to best t in the sheared rectangle. Select the rectangle path and repeat the same process we used in Step Three to clip the image to the rectangle shape. Remember to use the Direct Selection tool to reposition the photo inside the sheared rectangle, if necessary. Once the image is clipped inside the rectangle, place it in the poster layout as shown here.
[GRAPHIC ACCENTS]
Lets add some graphic accents to the images. Choose the Line Segment tool (\) and click on the artboard to open the Line Segment Tool Options dialog. Set the Length to 8 in, the Angle to 0, and click OK. Choose Window>Brushes to open the Brushes panel. Click on the Chalk Scribble brush to apply it to the selected path.
[ADD A STROKE]
Open the Stroke panel (Window>Stroke) and set the Weight to 0.5 pt. Shear this stroked path to the same angle that we used in Step Four using the Shear tool. Note: Were going to keep all the elements the same angle for a uniform layout. Choose Window>Color, click on the Stroke color swatch, and choose a red color (R:200, G:0, B:0). Using the Selection tool, move this path on top of the second image. Hold down the Option (PC: Alt) key and click-and-drag a duplicate stroke to the lower edge of the image. Scale the width to give these lines some variation.
Select the Type tool (T) and click on the artboard to set a text object. In the Control panel, set the Font to Impact and the Font Size to 100 pt. Type the words REVENGE-OPS, highlight the text, and set the Fill color to the same red color we used in Step Seven. Also apply the same shear angle that weve been using on the other elements.
[INSERT TEXT]
Using the Selection tool, place the text in the poster layout just below the bottom image in the approximate center. Make some
[ADD ADDITIONAL STROKES]
10
[ADD ADDITIONAL TEXT]
Next, duplicate the movie title text using the same method as duplicating the stroke in Step Seven. Because its still editable text and has already been formatted to the proper angle, its easier to duplicate and enter new text. Well use the tagline DONT GET MAD. GET EVEN. Using the Selection tool once more, scale and position the text in the upper-right corner of the layout.
more duplicates of the stroked paths and add them to the top and bottom of the text to continue the theme. Be sure to vary the position and length to add more interest to the text.
continued on p. 52
50
FOTOLIA/W14A
11
[INSERT A TEXTURED EFFECT]
With all the graphic elements in place, we can now add texture to give the text a grungy look. Choose File>Place, navigate to a textured le of your choice, and click Place. Experiment with different textures. Shift-click to select all the red elements (the stroked paths and the text), then press Command-G (PC: Ctrl-G) to group them. With the group selected, hold down the Shift key and click on the texture.
12
[MAKE OPACITY MASK]
Choose Window>Transparency, click on the panels yout menu, and choose Make Opacity Mask. Note: Youll see the text disappear but only because the texture (or mask) le is off to the side. This makes it easier to select the objects and the texture without selecting the background shape.
13
[SLIDE TEXTURE TO SEE EFFECT]
In the Transparency panel, youll see two thumbnails: one for the art and one for the mask. Click the chain link icon between the thumbnails to unlink the mask and the art, and then click on the mask thumbnail to work in mask mode. Select the texture on the artboard and click-and-drag it over the layout. When you release the mouse button, youll see the texture show through all the red elements.
14
[FINISH MOVIE POSTER LOOK]
Remember to click on the art thumbnail to get out of mask mode, indicated by the bold line around the thumbnail. Finally, add the all-too-familiar credits at the bottom of the layout to nish the movie poster look. Note: If you need to reposition any part of the design, youll need to use the Direct Selection tool (the Selection tool will select the entire group and texture as a whole).
52
Corey Barker is an Education and Curriculum Developer for the National Association of Photoshop Professionals. His expertise in Adobe Photoshop and Adobe Illustrator has earned him numerous awards in illustration, graphic design, and photography.
[ t y p o g r a phy ]
THE ART OF TYPE]

J A M E S { } F E L I C I
stroke, stroke, stroke

The InDesign Stroke panel can spice up your type in surprising ways. Veteran readers of this column know that I generally take a dim view of electronically manipulated type. When type is electronically oblique or expanded, it doesnt look as though it came from another typeface, it simply looks fakeill proportioned and just wrong. But electronically manipulated, intentionally outrageous type, now thats another story. In this issue, well take a look at how one simple trickaltering a characters strokecan create some effects that are very special indeed.
Stroke panel
The appearance of every character you typeset is a product of three
I M A GE S: I STO C K PH OTO I LLU STR ATI O N : TA F F Y C LI F F O R D
things: its outline shape (as described in its font); its ll color (usually black); and the stroke weight of its outline (usually zero). Well just focus on tampering with the last of these. In Illustrator and InDesign, you can alter the stroke of a character by simply selecting it and changing its weight in the Stroke panel and its color in the Color or Swatches panel. Adding a black stroke to a character creates a fake boldits usually not very pretty. If you add a white stroke to a character, you make it thinner, which is even less pretty, especially when carried to extremes. In InDesign though, you can also apply various types of strokes to charactersdots, dashes, hash marksand heres where the fun really starts. The key to making it work is to convert the type to outlines, which turns the text into an independent graphic object a compound pathno longer associated with any font. Most of the rest of the action takes place in the Stroke panel (Window>Stroke).
[The appearance of
every character you typeset is a product of three things ]
The three hard-to-decipher icons in the Stroke panel under the Align Stroke section dene where a stroke will set relative to the character outline path: Center, Inside, or Outside.
54

55
Various examples
Lets run through a couple of sequential manipulations for a sampler of whats possible. The rst example shows a simple word in its native condition set in 72-point Verdana. Select the text and choose Type>Create Outlines to convert it to a graphic object. Notice that the text still looks like its old self.
Finally, in the fth example, something completely different: a classic inline effect. Set the stroke Weight to 4 pt, the Type to Thin-Thin, the Stroke color to Paper, the Fill color to black, and the Gap Color to None. Note: The Paper swatch in the Swatches panel translates to see-through, so the inline rule will take on For the second example, open the Stroke panel, choose the Selection tool (V), click on the text to select it, set the Weight to 2 pt, and the stroke Type to Right Slant Hash. This creates type with razor stubble. Under the Align Stroke section, click on the Align Stroke to Center icon so the whiskers overlap the lled portions of the characters. For the third example, make sure the text is selected and change the stroke Type to Straight Hash. Now open the Swatches panel (Window>Color>Swatches), click the Stroke icon at the top-left to apply the color to the stroke, and choose yellow. Return to the Stroke panel, set Gap Color to red, and Gap Tint to 67%. (Note: The gaps are the spaces between the whiskers.) The net effect is type surrounded by an orange and yellow zipper. The nal example shows a 3 pt stroke Weight, a White Diamond stroke Type, and the Fill color set to None in the Swatches panel, which makes the type itself disappear. whatever color paper the type is printed on. These examples are just jumping-off points. Using the InDesign tools for creating your own custom stroke types (just choose Stroke Styles>New from the Stroke panels yout menu), you can conjure effects as yet undreamed of.
Kerning controls
One last and important thing: When you convert type to outlines, you lose the ability to use your normal manual kerning controls for adjusting the spaces between characters. To manually kern these outlines, rst deselect everything. Then choose the Direct Selection tool (A) and Option-click (PC: Alt-click) inside the character, which selects its entire path. Now use your Left and Right Arrow keys to nudge the selected character one way or the other. If the nudge increments are too coarse, you can adjust them. Choose InDesign (PC: Edit)>Preferences>Units & Increments. Then, in the Keyboard Increments section, reduce the Cursor Key value from its default value of 0p1 to whatever suits you. You can specify decimal values down to one thousandth of a point (0p0.001). Note that characters with countersopen spaces, as in an o or pconsist of two paths: one for the outer outline of the character and another for the counter. A two-story lowercase g (as in the Cooper Black font example) has two counters. Yet other characters, such as the exclamation point, come in two pieces. To select multiple paths, select the rst using Option-click (PC: Alt-click), and then the successive by using Shift-Option-click (PC: Shift-Alt-click).
More variations
This next set of examples follows another pattern. The rst example is good old 72-point Cooper Black. In the second example, set the Weight to 2 pt, the Stroke color to white, and Type to Japanese Dots to give the text a perforated edge. Once again, in the Align Stroke section, click the Align Stroke to Center icon. The third example has the same Stroke panel properties as the second, but change the Stroke color to green and the Fill color to None. Now follow the dots. In the fourth example, set the Weight to 4 pt, the Gap Color to red, and the Fill color to yellow. This looks like holiday type to me, but I have no idea which one.
James Felici is the author of The Complete Manual of Typography (Adobe Press), former managing editor of Publish magazine, and contributor to The Seybold Report, Macworld magazine, PDFZone.com, and Publish.com.
RADIM MALINIC
INDESIGN TUTORIAL
T E R R Y { } W H I T E
creating an interactive portfolio

Whenever I mention creating an interactive document with InDesign, the first thing most people think is, He must be talking about making a PDF. While you can certainly still make interactive PDFs from InDesign, you can do so much more using the InDesign CS5 interactive features.
[CREATE A NEW WEB DOCUMENT]

Were pretty used to creating InDesign documents for print in standard sizes such as Letter and A4. In this case, however, were going to the Web, so its best to start out with a document size that makes sense for a computer display. Choose File>New>Document to create a new document. For Intent select Web and for Page Size select 1024x768. Click OK.
[CHANGE PAPER COLOR TO BLACK]

I almost never change the paper color in InDesign because it doesnt really affect the printed page. Its more for visualizing how the printed job will look on paper. Now that we can create documents for the Web, the paper color does matter as it can be used as the background color for your interactive document. Choose Window> Color>Swatches to bring up the Swatches panel and double-click the Paper swatch. Change the Color Mode to RGB and move the Red, Green, and Blue sliders to 0 to change the swatch to Black. Click OK.
56

57
[CREATE NEW MASTER PAGE AND FRAME]

To speed up production, lets create a new master page. Choose Window>Pages to open the Pages panel and select New Master from the yout menu. Enter Landscape in the Name eld and click OK. Now were going to create a frame for the large images. Click once with the Rectangle Frame tool (F), enter 1024x615 px in the Rectangle dialog, and click OK. Position the frame at the top of the page. With the frame selected, choose Object> Fitting>Frame Fitting Options. Enable Auto-Fit, make sure the Fitting is set to Fill Frame Proportionally, and for Align From click the center box in the grid. Click OK.
[CREATE THUMBNAIL FRAMES]

Next well create 20 frames to hold our image thumbnails, and then turn them into buttons to allow the viewer to click on the image they want to see in the big frame above. First, create one 84.23x58.5 px frame, set its Fitting options to the same as Step Three, and press Shift-Option-Command-D (PC: Shift-Alt-Ctrl-D) to duplicate the frame nine times. Use the Move tool (V) to position the frames and then the Align panel (Window>Object & Layout> Align) to align themwe selected all ten frames and clicked the Distribute Left Edges icon and then the Align Bottom Edges icon.
[COPY FRAMES AND CONVERT TO BUTTONS]

With all ten frames still selected, press Command-C (PC: Ctrl-C) to copy the frames and then Command-V (PC: Ctrl-V) to paste them. Position these new frames directly above the previously placed frames (leave some space between the two sets of ten)you should now have 20 frames total. Now its time to convert these 20 frames into buttons so our viewers can click on them. Select all 20 frames and choose Object> Interactive>Covert to Button.
[PLACE 20 IMAGES]
Its time to place your 20 best images for the interactive portfolio into the 20 button frames. Hopefully, you have all 20 images in one folderas it will make placing them easierbut if not, gather together the 20 best images for your portfolio. I usually use Adobe Bridge CS5 for this task. Open Bridge, select the 20 images, and choose File>Place>In InDesign. This will take you back to InDesign with a loaded cursor. Click to place each image in the appropriate frame.
[INSERT 20 ADDITIONAL PAGES]

When we created this document, we started with one page. That one page will be our intro page. However, we now need to create 20 additional portfolio pages. Click on the Pages panel yout menu and choose Insert Pages. For Pages enter 20 and for Master select B-Landscape. Click OK.
Weve got our thumbnails and weve got 20 new pages to navigate between; its now time to place those same 20 images that we used for the thumbnails into their perspective pages in the large frames. In Bridge, select the same 20 images as before and choose File> Place>In InDesign. This will bring you back into InDesign with a loaded cursor as before. Go to page 2 (the rst of your 20 new pages) and click on the large frame to place your rst large image. Continue placing each large image on the subsequent pages.
[PLACE LARGE IMAGES]
Now we need to wire the buttons to the right pages. In the Pages panel, double-click on the B-Landscape page to go back to your
[CONNECT BUTTONS TO PAGES]
10
[SET UP ROLLOVERS FOR BUTTONS]
Optionally, you can set up rollovers for the buttons. It would have been nice to do this ahead of time, but you couldnt really do it until the images were placed. In our example, we want the buttons to be dim until someone rolls over them. With a button selected, go to the Buttons panel and click on the Rollover thumbnail in the Appearance section to activate it. Then, click on the Normal thumbnail to activate it. Open the Effects panel (Window>Effects) and lower the Opacity to 30%. Repeat this step for each button.
master page and click the rst button to select it. In the Buttons panel (Window>Interactive>Buttons), click on the plus sign icon (circled) and select Go to Page. For Zoom choose Fit in Window and enter the corresponding Page number (2). With the Event set to On Release by default, the document will navigate to the correct page when a user clicks and releases. Its probably a good idea to name your buttons, too. Repeat this step for each button.
continued on p. 60
58
11
SCOTT KELBY
[INTRO PAGE]
Weve done all the hard work now. At this point the navigation of the portfolio is ready to go. All we need to do is go back to page 1 and design the intro page the way we want. Keep in mind, this is the rst page that viewers will see when they visit your portfolio, so you probably want a description and possibly an opening photo. You may also want to consider providing a link back to your main sitejust select the frame you want to use, go to Object> Interactive>Convert to Button, select Go to URL for the action, and type in the URL.
12
[ANIMATE TEXT LOGO]
Its InDesign CS5we can animate! In our example, we want our text to y onto the page (this will work with an image, too). First place the text or your logo on the page where you want it to be at the end of the animation. Then, bring up the Animation panel (Window>Interactive>Animation) and choose a Preset for how you want the logo to animate onto the page (we chose Fly In From Top). Note: Click the Preview Spread icon (circled) at the bottom of the Animation panel to test the animation.
13
[CREATE ANOTHER BUTTON]
At this point, we have no way to get from the intro page to the rst page of the portfolio. We need another buttonthis can either be text or an image. Create an object that can be turned into a button (in our example, were using the word Portfolio, which weve already typed on the page). Once its in place on the page, go to Object>Interactive>Convert to Button. Use the Buttons panel to set the action to go to page 2 (as we did with the previous buttons). Tip: You can have this button y in using the Animation panel, as well.
14
[EXPORT TO SWF]
Use the Preview panel (Window>Interactive>Preview) to test everything at this point. Fix anything that you want to tweak and then choose File>Export. Name your le, change the Format to Flash Player (SWF), and click Save. In the Export SWF dialog, change the Page Transitions to Page Turn (this allows the user to manually turn the pages in addition to using the navigation buttons) and enable the Include Interactive Page Curl checkbox. Click OK. Once exported you can update the SWF/HTML to your website and link to it or embed the SWF on an existing page.
In his current role as Worldwide Creative Suite Design Evangelist for Adobe Systems, Inc., Terry White evangelizes the Creative Suite to customers around the world. Hes also the author of Secrets of Adobe Bridge and co-author of InDesign CS/CS2 Killer Tips and The iPhone Book, 4th edition. Check out his tech blog at http://terrywhite.com/techblog.
ALL IMAGES BY TERRY WHITE UNLESS OTHERWISE NOTED
60
RADIM MALINIC
DREAMWEAVER TUTORIAL
J A N I N E { } W A R N E R
editing a WordPress blog with Dreamweaver CS5

One of the most dramatic improvements to Dreamweaver CS5 is the ability to edit WordPress themes, but before you can get WordPress (or Joomla! or Drupal) to work, youll need to set up your computer as a Web server. Its a lot of technical steps, but once you get all this set up, youll be able to use all of the great design tools in Dreamweaver.
[WEB SERVER AND DATABASE SOFTWARE]

To run WordPress, you need a Web server, a MySQL database,
[LAUNCH MAMP]
After you download, install, and launch MAMP, a little window opens with controls to turn the Apache server and MySQL database on and off. Give them a second to get going and MAMP will launch the Firefox Web browser. If the browser doesnt open automatically, click on the Open Start Page button. Youll know that the server is working on your Mac when you see the Welcome to MAMP screen in your browser window and http://localhost/8888/ MAMP in the address bar.
and PHP installed on your local computer. Its also best to have the Firefox Web browser, so be sure to install it if you havent already. On a Mac, you can get everything you need in one nifty package at www.mamp.info. If youre on Windows, go to wampserver.com/en. Because of the limited space in this column, these steps are specic to the Mac, but the process is similar for both platforms (and youll nd special instructions for Windows users in the Dreamweaver Help Center on my site at www.DigitalFamily.com).
62

63
[SET SERVER PREFERENCES]

This is an optional step to remove the 8888 from the local URL: In the small, oating MAMP window, click Preferences, then click the Ports tab, and click the Set to Default Apache and MySQL Ports button. This changes the port from 8888 to 80. Click OK. Anytime you make a change to the server setup, or if things just dont seem to be working right, restarting the server often xes the problem. Click the Stop Servers button, wait a minute, and then click the Start Servers button to restart the server. Click the Open Start Page button to refresh the browser with the simplied URL.
[CREATE A MYSQL DATABASE]

Next, you need to create a database. Dont worry, its not as hard as you may imagine because WordPress builds all of the tables for you. With MAMP open in Firefox, click on the phpMyAdmin tab at the top. In the Create New Database Field, enter a name (dont use spaces or special characters). Make note of the name. Better yet, copy it so you can just paste it into WordPress when you get to Step Eight (youll need to enter it exactly). Click the Create button and youve created a database (WordPress takes care of the rest).
[DOWNLOAD AND INSTALL WORDPRESS]

Next, go to WordPress.org (not WordPress.com) and download WordPress (its free and its a quick download.) Unzip the WordPress folder and youll nd all of the les and subfolders for a new blog. Theres really nothing to install but youll need to copy these les into the root folder of your local Apache Web server. On a Mac, the htdocs folder inside the MAMP folder inside the Applications folder is the root folder of your local server. (More on copying these les into the htdocs folder in the next step.)
[COPY FILES INTO THE HTDOCS FOLDER]

If youre creating a single blog, simply copy all of the les in the WordPress folder you unzipped into the htdocs folder (inside the MAMP folder). If youre working on multiple blogs, or if your blog is part of an existing Dreamweaver site and you want to work on all of the les together, you can create subfolders in the htdocs folder. Then copy the entire WordPress folder into the subfolder within htdocs as well as any Dreamweaver site files. This way you can work on them together in the same root folder in Dreamweaver.
[OPEN WORDPRESS IN FIREFOX]

Now its time to open the blog in a Web browser on your computer. Make sure that the Apache server and MySQL database are still running in the background (you can always check the oating MAMP dialog). In Firefox, enter the URL: http://localhost/ followed by any subfolder names you added to the htdocs folder. Note: The http:// isnt optional, and you dont use www. Also note: If you didnt change the preferences in Step Three, youll still need the 8888, so your URL would be something like this: http://locahost/ 8888/foldername. Dont panic when WordPress returns an error.
Click the Create a Conguration File button and follow the WordPress instructions. On the screen where you have to enter the name of the database, enter the exact name you entered when you created the database in Step Four. In both the MySQL User Name eld and the Password eld enter root. Note: All MySQL databases come with the user name and password root. Unless youre worried about someone hacking your blog on your local computer, theres no reason to change them. Leave the last two elds in the WordPress setup page as they are and click Submit.
[CREATE A CONFIGURATION FILE]
Click Run the Install button and ll in the WordPress Welcome screen. I recommend you dont use admin as the Username and
[INSTALL AND SET UP WORDPRESS]
10
[SET UP YOUR BLOG IN DREAMWEAVER]
Once you have the Apache server and MySQL database working and youve installed WordPress, you can set up your blog so that you can edit it in Dreamweaver. You set up a blog much as you would set up any site in Dreamweaver. Choose Site>New Site. Give the site a name (this name is just for your reference). Click on the Browse for Folder icon at the far right of the Local Site Folder eld and browse to nd the htdocs folder in your MAMP folder in the Applications folder. If you created a subfolder for your site, select that folder. Dont click Save yet.
that you take note of your user name and password because youll need them to access your blog even on your local computer. Follow the rest of the WordPress instructions and youll soon nd yourself at the WordPress Dashboard. From here you can do all the things on your local computer that you can do on a remote server with a WordPress install, including creating and editing posts, downloading and changing themes, adding plug-ins, etc.
64

65
11
[SET UP THE TESTING SERVER]
With the Site Setup dialog still open, click the Servers category on the left. Click on the small plus sign (+) near the bottom of the servers dialog to add a new server (just as if you were setting up a remote server connection). Enter a name, such as Testing Server (again this name is just for your reference). From the Connect Using drop-down list, choose Local/Network (not FTP). With Local/Network selected, the rest of the options will change. Again, use the Browse icon (folder) to nd the site folder. If you didnt create a subfolder, it should be Applications/MAMP/htdocs.
12
[SAVE SERVER SETTINGS]
In the Web URL eld at the bottom of the Server Setup dialog, type http://localhost/ (again, adjust this name to include any subfolder names you may have added to the htdocs folder). Note: Youll need to add 8888 if you didnt change the preferences in MAMP in Step Three. Click Save. The dialog closes and the server is added to the Servers list in the Site Setup dialog. Important: Next to the server name are two checkboxes for Remote and Testing. Uncheck Remote and check Testing. Then click Save to complete the setup.
13
[OPEN THE INDEX.PHP PAGE]
Choose File>Open and select the index.php le in your WordPress blog folder (you can also open it by double-clicking on the index.php page in the Files panel). Expect a blank screenthis doesnt mean youve made a mistake (necessarily). In tiny text at the top of the workspace, look for the message: This page may have dynamically-related les that can only be discovered by the server. Click the Discover link, then click Yes. Finally, click the Live View button at the top of the workspace to make Dreamweaver act like a Web browser and display the dynamic WordPress page.
14
[EDIT YOUR BLOG IN DREAMWEAVER]
If you got through all those steps, congrats! Setting all that up is complicated, but you only have to get it right once. Dreamweaver saves your server settings and you can now take advantage of all of the wonderful CSS and PHP features in Dreamweaver to edit your blog theme. (Note: You still want to create and edit posts in the WordPress Dashboard.) When you get the theme design the way you want it, you can copy just the CSS le to your remote Web server, or use the WordPress export/import features to move the entire blog from your local server to a remote server.
Janine Warner has authored more than a dozen books about the Internet, including Dreamweaver CS5 for Dummies. Shes also the host of a growing collection of training videos on Dreamweaver and CSS at KelbyTraining.com. To learn more about Janines books, videos, and speaking engagements, visit www.DigitalFamily.com.
RADIM MALINIC
[F
LASH PROFESSIONAL TUTORIAL]

P A U L { } T R A N I
custom video on cue

In this tutorial youll see how easy it is to bring video and graphics together for a seamless, custom experience using Flash Professional CS5. Youll learn how to import video, apply a custom skin, and create your own video buttons without writing any ActionScript code. Then youll learn how to add cue points, making synchronization between video and graphics a snap. Lets take a tour of these capabilities.
[OPEN STARTER FILES]

[CONVERT VIDEO FOR USE IN FLASH]

The most common video le format used in Flash is the FLV format. To convert a video le to FLV, launch Adobe Media Encoder CS5 (found in the Applications folder on a Mac, the Program Files folder on a PC). Click the Add button on the right, locate the intro.mov le that you downloaded, and then select Open. Select FLV | F4V from the Format column, then select FLV Match Source Attributes (High Quality) from the Preset column.
Download the exercise le for this tutorial at www.layersmagazine .com and unzip it onto your desktop or another location of your choosing. Inside of the ZIP le youll nd les named video.a and intro.mov, as well as a nal folder that contains the completed les for reference. Open the video.a in Flash CS5. Notice that in the Library panel (Window>Library) there are already graphics created that will be used in this tutorial.
66
[If youd like to download the le used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All les are for personal use only.]

67
[CUSTOMIZE FLV EXPORT SETTINGS]

To customize the export settings for a video, click FLV Match Source Attributes (High Quality), which you just selected in the Preset column. Notice how you can trim the video, resize it, and even adjust the bitrate settings for both audio and video. In this case, you need to ensure that the alpha channel from the original video gets encoded into the exported video. Under the Video tab on the right, select Encode Alpha Channel, then select OK. Lastly, in the Output File column, save the le as intro.v in the same location as the original intro.mov (set by default), and then click Start Queue.
VIDEO COMPLIMENTS OF ADOBE TV
[IMPORT VIDEO INTO FLASH]

Now its time to import the intro.v into the video.a. Choose File>Import>Import Video. When youre asked where the video le is, select On Your Computer, click Browse, locate the intro.v, and click Open. Select Load External Video with Playback Component; keeping the video external will keep the SWF that loads it small in le size. Click Continue and youll then be able to select a custom skin for the video. Choose the second skin, MinimaFlatCustomColorAll.swf, and then click the Color swatch to open the Color Picker and select a red to tint the skin. Click Continue.
[FINISH IMPORTING VIDEO]

The nal import screen notes that a Flash Video component will be created on the Stage while an SWF le for the skin will be placed in the same location as the FLA le once you publish the SWF. If youre going to upload this project to a Web server, than both the intro.v and the skin SWF need to be uploaded once the project is published. Click Finish and the video with the selected skin will appear on the Stage. Test the movie (Control>Test Movie> Test) to watch the video. Close the playback window after watching the video.
[EDIT VIDEO PARAMETERS]

All of the video controls for the imported video are active on the Stage. Click the play button (or press the Spacebar) to play the video. With the video selected, open the Properties panel (Window>Properties) and notice how you can modify various video parameters. Conrm that autoPlay is selected, and note that both skinBackgroundAlpha and Volume are set to 1, which is 100% in Flash. Change the volume to 0.5 so it will be set to 50%.
[ADD specific VIDEO CONTROLS]

In the Properties panel, click the pencil icon next to the name of the Skin to modify it. Select None for the skin and click OK. In the Timeline panel (Window>Timeline) select the video controls layer. Open the Components panel (Window>Components) and expand the Video folder. Click-and-drag the PlayPauseButton and the VolumeBar to the lower-left corner of the Stage.
Double-click the Play/Pause button on the Stage to enter its symbol. Double-click it again to enter the PlayButton symbol. Notice how a Normal, Over, Down, and Disabled Play button appear. Each one of these buttons can be customized to your liking. Change the green outline to red in the Over and Down buttons. (To change the color, double-click a button twice, click the green outline to select it, and then change the Fill color to red.) Click on Scene 1 at the top-left to go back to the Stage.
[CUSTOMIZE VIDEO CONTROLS]
In order to sync up graphics with video, youll need to add cue points in the video. With the video selected, go to the Properties
[ADD A CUE POINT]
10
[ADD MULTIPLE CUE POINTS]
Next, play the video and when the presenter says agencies (about nine seconds in) add another cue point. Rename Cue Point 2 to agencies. Around 15 seconds in, when the presenter says nonprot, add another cue point. Rename this one as nonprot. Your cue points should look like the image above.
panel and near the bottom youll nd the Cue Points section. Using the Add ActionScript Cue Point icon (+, plus sign) youre able to add cue points to the video at certain times. Play the video, and when the presenter says John, add a cue point. Notice that Cue Point 1 was added at about one second. Click on the name of the cue point and rename it john. Notice you can also edit the cue point time if needed.
68
continued on p. 70
11
[ADD A CUE POINT EVENT]
Now you need to have Flash listen for these cue points that were added. But rst you need to give the video an instance name. Select the video and at the top of the Properties panel, name the video intro. Now, open the Code Snippets panel (Window>Code Snippets) and expand the Audio and Video folder. With the video still selected, double-click on the On Cue Point Event. This will add the ActionScript shown above which will basically show the names of the cue points in the Output panel. Test the video to see it in action.
12
[ADD GRAPHICS]
Next, you need to add the graphics that will be displayed based on the three cue points. Open the Library panel and notice the john, agencies, and nonprot movie clips. Select the john layer in the Timeline and then click-and-drag the john movie clip to the Stage. Use the Properties panel to set both the x and y position to 0. Next, drag the agencies and nonprot movie clips to their appropriate layers and make sure their x and y position are set to 0. Test the movie and note that all the movie clips have animation and play at the same time.
13
[SET UP GRAPHICS]
Since you dont want all the movie clips to appear at the beginning of the movie, you need to set their visibility to false using ActionScript. In order to control the movie clips with ActionScript, they rst need instance names. Select the john movie clip and in the Properties panel give it an instance name of john. Give the agencies movie clip an instance name of agencies and the nonprot movie clip an instance name of nonprot. Select the rst frame of the Actions layer and open the Actions panel (Window>Actions). Using those instance names, set the visibility of each movie clip to false as shown above.
14
[DISPLAY GRAPHICS BASED ON CUE POINTS]
Now you can modify the cue point event listener. Change the trace statement to a conditional statement that will listen for a cue point. If a cue point is heard, the appropriate movie clip will become visible and the animation will play. Type in the ActionScript shown above and test your movie.
70
Paul Trani is a Flash Platform Evangelist at Adobe as well as an award-winning interactive designer, Adobe Certied Instructor, courseware developer, and Lynda.com trainer. He also runs a Flash-related blog at www.paultrani.com and can be followed on Twitter @paultrani.
[layers reviews]
the straight scoop on all the latest graphics gear
Boris Continuum Complete 7 AE
MORE THAN 200 FILTERS FOR AFTER EFFECTS

Boris Continuum Complete 7 AE (BCC) for Adobe After Effects and Premiere Pro brings more than 200 filters to Macintosh and Windows versions of Adobes CS5, CS4, and CS3 suites. This latest version features 11 new lters, including an audio-driven keyframe generator, a new OpenGL particle engine, a 3-way color grade lter (with built-in keying and masking tools), a new video noise reduction tool, a spline-based warp lter, and still and video morph technology. More importantly, each BCC lter has been reengineered for 64-bit operating systems and OpenGL acceleration. While many reviews of software plug-ins oftentimes focus on listing a bunch of the effects found in the package (which are all found on the manufacturers website anyway), I want to focus on the underlying technology improvements found in version 7 of BCC. Graphic software manufacturers are moving away from coding their applications to run on the CPU (central processing unit) in favor of having them run on the GPU (graphics processing unit) of your video card. OpenGL is an industry standard for dening 2D and 3D images and it works well on all graphics cards from both NVIDIA and ATI. In particular, OpenGL excels in rendering a large number of polygons and supports 3D cameras, lights, textures, and bump features. So its best suited for 3D extrusions as well as composites and geometric image distortions like those found in 3D text, lens ares, and particle systems. These are the exact types of lters and effects found in BCC 7. In fact, each BCC effect found in version 7 has been reengineered for the new and faster 64-bit operating systems and includes optimization for OpenGL acceleration. It is this new underlying technology acceleration that I believe is the biggest selling point for BCC 7 for both new and existing users. The results are noticeable and very much appreciated by anyone using effects as part of their everyday workow. If youre interested in learning more about OpenGL accelerated effects and graphics in Boris FX products, you can download the white paper at www.borisfx.com/download_les/OpenGLAcceleratedEffects.pdf. There are also a lot of nice little touches throughout the plug-in set that any working motion graphics designer will really appreci-
ate. These include the ability to Generate 3D extruded shapes from imported AE spline path mask shapes, full support for the camera and lighting system in After Effects, spline-based still and video morph technology, and lters such as Smooth Tone, DV Fixer, and Pixel Fixer that help repair digital artifacts that are becoming all too common. There are also complimentary 3D particle effects (to those already found in AE), including Particle Array 3D and Pin Art 3D, and automated optical image stabilization that works without the use of point trackers. When you add in video noise reduction that uses video clip spatial and temporal information and more than 3,500 presets across all of the lters, you have quite a complete and powerful package! The complaint from some users of previous versions has been the slow rendering of effects and the overall value of the package. With rewritten code for 64-bit operating systems and optimized OpenGL acceleration, Boris has certainly improved its overall speed of the product. (You can see speed gains at www.borisfx.com/Adobe/ bccae/upgrade_reasons.php#gains.) At $995 retail for more than 200 lters youre paying less than $5 per lter in the BCC 7 package and upgrades are only $295 from any older version of BCC. While you can certainly nd more specialized packages of plug-ins that add even more advanced customization parameters (at a much higher price), I believe Boris Continuum Complete 7 AE gives you the most effects for the best value available in todays market.Rod Harlan
Company: Boris FX Web: www.borisfx.com Hot: 64-bit; OpenGL optimization
Price: $995 (Upgrade: $295) Rating:
Not: Complicated activation process
72

73
HP Z600 Workstation
SMALL, POWERFUL DESKTOP COMPUTER
There are only a few words to describe this new box from HP: The Z600 is smoking hot! HP is taking the challenge of more power in a smaller footprint to the next level with the Z600. Ive tested many larger boxes and have to say that with the Z600 loaded for review, it gave those other boxes more than they could handle in performance and function. As with previous boxes I have reviewed, I expected something more the size of a mini fridge, but I got a box that actually t under my desk without turning it sideways so it wouldnt hang out. And, surprisingly enough, the heat displacement was about half the output of my workstation because its liquid cooled (which is very impressive and annoying at the same time). The specs for the HP Z600 came through as a midlevel box that includes Windows 7 Professional 64-bit OS; Xeon 2.66 GHz QuadCore CPUs (12 MB cache/1333 MHz); the awesome NVIDIA Quadro FX3800; 12 GB of DDR3 1333 ECC RAM; a 160-GB SATA 10K with two 500-GB drives running RAID 0; a Creative X-Fi Titanium audio card; and a slot-loading DVD+/-RW drive (something that all boxes and laptops should have). Needless to say, this machine was up to every task I threw at it. I exported a 5-minute, high-quality render in record time while trying to tax the system by creating website mockups in Flash and Photoshop. The Z600 breathed a little heavy but came through with ying colors. Simply put, I obviously was much more impressed with this box than even I thought I could be. The features included didnt fail to impress and considering this is a midlevel box, the series can handle whatever your professional needs may be.Bruce Bicknell
HP ZR30w Monitor
30" DISPLAY FOR CREATIVE PROFESSIONALS

What gets a creative person (designer, animator, photographer, etc.) drooling when youre talking about hardware? A monitor with enough real estate to block the sun, and HP has just given us another reason to spend more time inside with the new 30" HP ZR30w Monitor. Not only has HP given us a sweet monitor, theyve done it at a reasonable price compared to other monitors in the market. The ZR30w incorporates the S-IPS (Super In-Plane Switching) panel that offers signicantly better color reproduction and wider viewing angles than cheaper monitors. Its capable of delivering more than 4 million pixels and 1 billion displayable colors. What can it do? Right out of the box this was pretty amazing and the difference was very noticeable in my various tests using Lightroom, Photoshop, Maya, a bit of Dead Red, and some HD trailers. The colors were vibrant and the blacks looked great. There were no lags while playing the video games, which is quite impressive in itself. I could go on and on about the great features, but I need to give a quick rundown on some of the important specs, as well. The ZR30w has 2560x1600 resolution, 16:10 aspect ratio, and a 1000:1 contrast ratio with a 7 ms response time. It has connectors for DisplayPort and DVI-D, as well as an onboard 4-port USB hub. This is one impressive monitor that I would pick over one with the fruit logo, even if they were the same price (theyre not). Its performance on the applications that I use daily was unsurpassed by any monitor that Ive tested, worked on, or owned. Any professional who wants a great monitor at a reasonable price should denitely take a long, hard look at this one. You wont be disappointed.Bruce Bicknell
Company: Hewlett-Packard Web: www.hp.com Hot: Design; price; S-IPS panel; exible stand
Price: $1,300 Rating:
Company: Hewlett-Packard Web: www.hp.com Not:
Price: $5,521 as tested Rating:
Not: No OSD; only two connectors (DVI and DisplayPort)
Hot: Form factor; video card; conguration; speed
reviews]
Maya Entertainment Creation Suite 2011

3D MODELING AND ANIMATION SOFTWARE
You have to love the way Autodesk assembled all of the essential software in your creative pipeline into one package. Maya Entertainment Creation Suite 2011 doesnt disappoint and takes another step forward in creating a more seamless workow for artists. Packed with everything you need to create amazing animation, character models, rendering, and special effects, the Creation Suite includes Maya 2011, Mudbox 2011, and MotionBuilder 2011. Theres also a version of the suite that comes with Autodesk 3ds Max in place of Maya 2011, and you can purchase 3ds Max individually to fulll all of your animation needs. With this release, Autodesk really stepped up the game with some great new features. Maya 2011 There are a ton of new features and enhancements in all of the programs. While we cant hit them all, Ill touch on a few of them. The rst thing that users will notice in this release is the new interface that includes new menus, as well as dockable windows that can be customized and moved to t your workow. The overall icon and tool placement is consistent with previous versions, so users will be familiar with them. This creates a more user-friendly workspace and is a much-needed improvement. One of my favorite additions is the HumanIK retargeting solver thats brand new to Maya 2011. This feature was previously only available in MotionBuilder and you had to jump to it in order to map or retarget animations between characters. Now you can do it in the program and increase speed and productivity. Other new features include an improved File Browser which makes navigating much easier when trying to nd les on your computer.
with the only obstacle being their imagination. What really stands out on the new version is the ability to integrate other Autodesk programs effortlessly into Mudbox. You can now import models from Softimage, 3ds Max, and Maya with their weighted skeletons that remain fully intact with complete control in Mudboxs posing system. Other features include increased speed with the posing toolset, plus a ton of new paint brushes and tools to help expand your creativity. MotionBuilder has received its fair share of enhancements as well. It has always been a strong tool to have in your arsenal for providing real-time animation, and with this release Autodesk has made it even better! This will help with those large scenes and characters that have slowed down the process in the past. Once again, theres not enough space on the page to really explore the vast new features of the Maya Creation Suite 2011. The new features are another great step forward for Autodesk and you denitely owe it to yourself to check it out as its more than worth the upgrade. Bruce Bicknell
There are some performance enhancements that are sure to get your attention as well. For you Mac users, the introduction of 64-bit support should get your attention. This will lead to a signicant bump in performance for sure! A new interactive viewpoint makes frame rates several times faster, and nParticle shows an improved speed as well. MotionBuilder and Mudbox 2011 Mudbox has to be one of my all-time favorite programs because its the ultimate sculpting tool. It allows artists to create amazing results
Company: Autodesk, Inc. Web: http://usa.autodesk.com
Price: $4,995 Rating:
Hot: Integration between apps; interface; 64-bit for Mac; new brushes/tools Not:
74
Theres one way to thaw out and get the most comprehensive Photoshop, Lightroom and photography training anywhere: Photoshop World Orlando 2011! Were taking Central Florida by storm this spring! Heres your chance to experience three days of intense training from the industrys best and brightest instructors, as well as attend an electrifying industry expo and after-hours events that will help you raise your game and advance your career!
Sign Up Early & Save
100
To register, Call 800-738-8513 or visit www.PhotoshopWorld.com

Photoshop World is the official conference of the National Association of Photoshop Professionals. For pricing and scheduling information, visit www.photoshopworld.com. Adobe, the Adobe logo, Photoshop and Lightroom are registered trademarks of Adobe Systems Incorporated.
March 30 - April 1, 2011 Orange County Convention Center Orlando, Florida Early Registration Deadline: Friday, Feb. 25, 2011
reviews]
Adobe Captivate 5
E-LEARNING SOFTWARE NOW CROSS-PLATFORM
Adobe Captivate is a program that allows the creation of online demonstrations and interactive assessments, usually of other software programs, but it can be used for presentations, too. Although Captivate has been around for a quite some time, this is the rst version available for both Macintosh and Windows. Whether youre upgrading a Windows version or purchasing the rst Macintosh version, Captivate is a powerful program that does more than just record a video of your onscreen actions. When you simply click the mouse, Captivate creates screen captures then adds mouse animations and captions; of course, it can do full motion recording (FMR) either automatically when required or be set to FMR all the time. The slides can then be customized with text captions, buttons, click boxes, rollover captions, and more. Captivate 5 sports a new Adobe interface with new panel workspaces. Once you get used to the new interface, its much more productive than in older versions. Other new features include Master Slides and Object Stylesthe former is similar to PowerPoint Master Slides and the latter is similar to InDesign Object Styles. The Master Slide feature allows the creating of masters that can be applied to individual slides as required; when the masters are updated, the individual slides update, too. The same principle applies for Object Stylesthese styles are for the individual objects on the slides and update globally. Speaking of PowerPoint, PowerPoint presentations can be imported into Captivate with almost all of the PowerPoint animation intact, plus you can link to the PowerPoint le so edits in PowerPoint can be updated back in Captivate. Other programs that allow round-tripping include Photoshop, Soundbooth, and Flash, but unfortunately, you have to have the full eLearning Suite to round-trip with these programs (all of these programs are included in the eLearning Suite). Photoshop
les can be imported with layer support, audio les can be edited with Soundbooth (or directly in Captivate), and Flash-created SWF les can be imported. My biggest complaint with version 5 is that the round-tripping doesnt work if you already own Photoshop, Soundbooth, and Flash (from the CS5 Master Collection, for example). That makes no sense to me and I hope this is addressed in a future update. (Of course, one could argue that Captivate should be part of the Master Collection.) Flash video can be imported, and to make the importing of other formats easier, Captivate now includes Adobe Media Encoder. If you dont like recording your own audio, you can turn your slide notes into spoken text with the text-to-speech converter. Creating scored quizzes has always been one of the useful features of Captivate. These quizzes can create branches in the presentation allowing the user to continue viewing the Captivate project or review a section all over again based on the quiz score. In the past, the quiz scores could be sent to a Learning Management System (LMS) or to an email address. New to version 5 is the ability to also upload the presentations to Acrobat.com and collect the data with the new Quiz Results Analyzer. This feature is very useful for small groups that dont have the need for an expensive LMS. Output is normally as a SWF le, although interactive PDF and noninteractive Flash video le formats are available, too. The SWF le can include custom skins and a table of contents (ToC), plus multiple Captivate SWFs can be combined together into a single SWF presentation with Aggregator.David Creamer
Company: Adobe Systems Incorporated Price: $799 (Upgrade: $299) Web: www.adobe.com Rating: Hot: Powerful demonstration & interactive training program Not: Round-tripping only available with eLearning Suite
76
R ADIM MALINIC
TIPS & TRICKS]
more hot tips for the coolest applications

[Adobe Photoshop CS5]
B Y P E T E R B A U E R
[Adobe Illustrator CS5]

B Y D A V I D C R E A M E R
POLYGoNAL QUICK SWITCH

To temporarily switch to the Polygonal Lasso tool while working with the Lasso tool (L), press-and-hold the Option key (PC: Alt key), release the mouse button, move the cursor, and click to add anchor points. When you want to switch back to the Lasso tool, press-and-hold down the mouse button, release the Option key (PC: Alt key), and drag. The Option (PC: Alt) key also toggles between the Polygonal Lasso and the Lasso, and between the Magnetic Lasso and the Lasso. (To switch from the Magnetic Lasso to the Polygonal Lasso on the y, press-and-hold Option [PC: Alt], release the mouse button, then click to add anchor points.)
KEEPING IT IN PERSPECTIVE
If you spend any time customizing a perspective grid, be sure to save it as a preset by using the View>Perspective Grid>Save Grid as Preset menu. These presets will be available for future use under their respective categories (One, Two, or Three Point Perspective). If you need to edit the settings, dont use the View>Perspective Grid>Dene Grid menuthat just makes a one-time change. Use the Edit>Perspective Grid Presets menu; select the desired preset and click Edit or Delete (as usual, you cant edit or delete the bracketed presets).
LAYER UPON LAYER

Ever wonder what that little circle to the right of each layer in the Layers panel was for? Its for applying effects to an entire layer rather than a single object at a time. Just click it to target the entire layer. When an object is created or moved to the layer, it will have the effect automatically applied; conversely, when an object is moved from the layer, the effect is removed.
MINI-ME FOR BRIDGE

Mini Bridge is a great way to view a folder of images without having to leave Photoshop. Keep in mind that Bridge must be running in the background for Mini Bridge to function. If you close Mini Bridge and want to reopen it, remember that you wont nd it listed with the other panels in the Window menu; its found in Window>Extensions.
www.LAYERSMAGAZINE.COM
OFF THE GRID THE OTHER MINI BRIDGE

You have an alternative to Mini Bridge, too. Open Bridge, press Command-Return (PC: Ctrl-Enter), and Bridge jumps to Compact Mode. Bridge will oat on top, enabling you to view a folders content while working in Photoshop (or any other program). With Bridge active, press CommandReturn (PC: Ctrl-Enter) to exit Compact Mode. Wish Illustrator had a Create Grid feature like InDesign? Use the Rectangle tool (M) and draw a box to the desired margin size. Use the Object>Path>Split into Grid feature to set the number of rows and columns along with the desired gutter (its a good idea to turn on Preview); click OK when satisfied. Finally, convert the grid to guides using the View>Guides>Make Guides menu. (Theres an
78

79
option to create guides in the Split into Grid dialog, but it makes larger guides than necessaryI prefer the neater Make Guides option.) You may want to lock the guides (View>Guides>Lock Guides) or put the guides on their own locked layer to prevent movement.
[Adobe InDesign CS5]

B Y D A V I D C R E A M E R
a list as you normally would but instead of selecting the List option in the Properties panel, select Menu. In the List Values dialog, set up your Item Labels to be the sections of the website you want to navigate to, and the Value to an HTTP address. Once your list is set, click on the plus sign in the Behaviors panel (Window>Behaviors) and select Jump Menu from the list. This will convert the drop-down list into a menu that will take you to a new area.
USE ADD MEDIA QUERIES

If youre working on a Web layout that will be seen on various types of screens, check out the Multiscreen Preview panel (Window>Multiscreen Preview) in Dreamweaver. Click on the Add Media Queries button in the panel, and youll be brought to a dialog that lets you assign individual CSS les to the size of the screen theyll be viewed on. This will give you a way to tailor the experience for a user based on what device theyre using.
SPLITSVILLE
Although the Span Columns feature in CS5 requires the use of a master text frame or at least a single text box set to 2 columns (Object>Text Frame Options), the Split Column feature can work on any text box. This can be useful when you need to run some text in multiple columns inside the main column and dont want to bother inserting a table (and having to cut-and-paste all the text). (Note: The Span and Split options can be found in a drop-down menu near the center of the Paragraph Formatting Control panel. Its set to None by default.)
SHARE MY SCREEN
If you get stuck with anything in Dreamweaver CS5 and you know someone that may be able to help you out, select Window>Extensions>Share My Screen. This is a new free feature in CS5 that allows you to send a connection request to someoneoffering you a virtual meeting. That user can even take control of your application and help you sort out whatever problem you may have.
WHERES WALDO
If you need to nd out where a style has been used in a document, there are a few ways to hunt it down. First, you can use the Find Format section in the Find/Change dialog (Edit>Find/Change); second, you can change the style color to a spot color, then use the Separations Preview panel (Window>Output>Separations Preview) to locate the styles (you may have to make a custom spot color and edit the style if the color is used elsewhere); nally, you can use Cross-References (Window>Types & Tables>Cross References) to show all paragraphs in a style (you should create a temporary text frame to see the actual page number).
[Adobe Flash CS5 Professional]

B Y C Y N D Y C A S H M A N , P H . D .
DONT CONFUSE FLASH WHEN LOADING EXTERNAL TEXT

Avoid using Microsoft Word when creating and saving a textonly le (.txt) for loading. It adds additional information to the le that interferes with the le correctly loading. Instead, use TextEdit (Macintosh) or Notepad (Windows) to create the le. If you make changes in a text les content, be sure to save the le before testing it in Flash. Otherwise, the changes will not be displayed.
INDENT TO NOWHERE
When creating a bulleted or numbered list, dont use the Indent to Here command (Type>Insert Special Character> Other>Indent to Here) to indent multiline lists. Instead, learn to use paragraph styles to control your indents mainly the Left and First Line Indent. Although the amounts will vary depending on many factors, including font size, try setting the Left Indent to 0.375 in and the First Line Indent to 0.25 in (thats a negative number). The tab setting will automatically resolve itself.
ROLL THE BONES

Use the Properties panel to navigate the hierarchy of an armature. The rst bone of an armature is the parent. Any bone linked to it is called the child. Select a bone in an armature then click the arrows in the Properties panel to move through the hierarchy and select a child. In addition to making it easy to select a bone, the Properties panel displays the properties of each bone or node.
[Adobe Dreamweaver CS5]

B Y R A F A E L R C C O N C E P C I O N
APPLY A FILTER IN THE MOTION EDITOR CREATE A JUMP MENU FOR NAVIGATION
There will be times when youll need a compact navigation for a specic site. The best way to accomplish this will be with a jump menu. Go into your Forms section in the Insert panel and click on the Select (List/Menu) button. Create Open the Motion Editor by clicking the Motion Editor tab to the right of the Timeline tab (or by choosing Window>Motion Editor). Click the plus sign next to Filters and select a lter from the menu (you may need to scroll down to nd Filters). The lter will be applied to the instance throughout the tween.

81
For advertising information, please contact Kevin Agren, VP, Sales at 813-433-2370 Fax: 813-433-5013 Email: kagren@kelbymediagroup.com
4 Over, Inc.. . . . . . . . . . . . . . . . . . . . . . . . . .85 www.4over.com
[F]
Fotolia . . . . . . . . . . . . . . . . . . . . . . . . . . . . BC www.fotolia.com
Nik Software, Inc.. . . . . . . . . . . . . . . . . . . . .47 www.niksoftware.com
[A]
Adorama Camera, Inc. . . . . . . . . . . . . . . . .11 www.adorama.com
[O]
onOne Software . . . . . . . . . . . . . . . . . . . . . 9 www.ononesoftware.com
[I]
iStockphoto.com . . . . . . . . . . . . . . . . . . IFC3 www.istockphoto.com
Artistic Photo Canvas . . . . . . . . . . . . . . . . .71 www.artisticphotocanvas.com
Overnight Prints. . . . . . . . . . . . . . . . . . . . . .25 www.overnightprints.com
[B]
B&H Photo. . . . . . . . . . . . . . . . . . . . . . . . . .89 www.bhphotovideo.com
I.T. Supplies . . . . . . . . . . . . . . . . . . . . . . . . .10 www.itsupplies.com
[P]
Peachpit Publishing Group . . . . . . . . . . . . .27 www.peachpit.com
[K]
Kelby Training . . . . . . . . . . . . . . . . 80, 8284 www.kelbytraining.com
Berthold Direct . . . . . . . . . . . . . . . . . . . . . .51 www.bertholdtypes.com
Photoshop World Conference & Expo. . . 75 www.photoshopworld.com
Boss Logo . . . . . . . . . . . . . . . . . . . . . . . . . .87 www.bosslogo.com
Kelby TV. . . . . . . . . . . . . . . . . . . . . . . . . . . .88 http://kelbytv.com
PrintRunner . . . . . . . . . . . . . . . . . . . . . . . . .86 www.printrunner.com
[C]
CAR-FRESHNER Corporation . . . . . . . . . . .45 www.carfreshner.com
[M]
MacMall . . . . . . . . . . . . . . . . . . . . . . . . . . . .53 www.macmall.com
[R]
Really Right Stuff . . . . . . . . . . . . . . . . . . . . .41 www.reallyrightstuff.com
Corel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61 www.corel.com
[D]
Dahle North America . . . . . . . . . . . . . . . . .88 www.dahle.com
Media Graphix. . . . . . . . . . . . . . . . . . . . . . .69 www.mediagraphix.com
[S]
Shutterstock. . . . . . . . . . . . . . . . . . . . . . . IBC www.shutterstock.com
Media Lab, Inc . . . . . . . . . . . . . . . . . . . . . . 35 www.medialab.com
[W]
Wacom. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7 www.wacom.com/americas
Digimarc. . . . . . . . . . . . . . . . . . . . . . . . . . . .59 www.digimarc.com/passion
Mpix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 www.mpix.com
[E]
Epson . . . . . . . . . . . . . . . . . . . . . . . . . . .1617 www.epson.com
[N]
National Association of Photoshop Professionals . . . . . . . . . . . . . . .77 www.photoshopuser.com
[Z]
Zoo Printing . . . . . . . . . . . . . . . . . . . . . . . . .88 www.zooprinting.com
Every attempt has been made to make this listing as complete as possible. However, its accuracy cannot be guaranteed.
The Adobe Photoshop CS5 Book for Digital Photographers
Captured: Lessons from Behind the Lens of a Legendary Wildlife Photographer

Moose Peterson
The ultimate guide to wildlife photography from the man who has devoted his entire career to capturing natures nest and most rare moments.
The iPhone Book 4th Edition
Scott Kelby
All new for CS5! Bonus: Order from Kelby Training and get Scott Kelbys Adobe Photoshop CS5 7-Point System for Camera Raw DVD absolutely FREE!
Scott Kelby and Terry White

The book that should be shipped with the iPhone is all new. The fourth edition covers both the iPhone 3GS and iPhone 4.
KT Price $43.99 NAPP Price $33.99
To Order, call 800.201.7323 or visit www.KelbyTraining.com

NAPP Member Price
The Adobe Photoshop Lightroom 3 Book for Digital Photographers

The Digital Photography Book, Volume 2

Scott Kelby
The second volume of Scotts best-selling series has been completely updated to reect the latest camera gear. Revised book, same low price!
Scott Kelby
Layers: The Complete Guide to Photoshops Most Powerful Feature

Matt Kloskowski
Matts rst ground-breaking book on Photoshops most powerful feature is now revised with new graphics and a brand new chapter.
Includes Scotts 7-Point System for Lightroom 3. Bonus: Order from Kelby Training and get Adobe Photoshop Lightroom 3 Killer Presets CD with Matt Kloskowski absolutely FREE!
All prices in U.S. dollars. NAPP Special Price applies only to members of the National Association of Photoshop Professionals. Copyright 2010 Kelby Training, Inc. all rights reserved. Content in Captured: Lessons from Behind the Lens of a Legendary Wildlife Photographer, The iPhone Book 4th Edition, The Adobe Photoshop Lightroom 3 Book for Digital Photographers, Adobe Photoshop Lightroom 3 Killer Presets, The Digital Photography Book, Volume 2, The Adobe Photoshop CS5 Book for Digital Photographers, AdobePhotoshop CS5 7-Point System for Camera Raw, and Layers: The Complete Guide to Photoshops Most Powerful Feature, is produced by Kelby Training, Inc., 333 Douglas Road East, Oldsmar, FL 34677, www.kelbytraining.com. Adobe, Photoshop, Lightroom and Camera Raw are registered trademarks of Adobe Incorporated. iPhone is a registered trademark of Apple Inc.
[THE BACK PAGE]

HERES YOUR CHANCE TO BE PUBLISHED IN THE PAGES OF LAYERS MAGAZINE!
Would you like the chance to get published in the pages of Layers magazine? You would? Then all you have to do is send us your artwork. Thats rightjust attach your favorite piece to an email and click Send. And if we think its cool too, well publish it in our Digital Canvas section. As weve mentioned before here on the back page, we love showcasing the work of our readers, and we know our readers love seeing their work in print. So whether it was work for a client, or something you did in your spare time, send it. We like illustrations, Web designs, magazine and book covers, product designs, brochures, posters, and the list goes on and on. As you know, it would be impossible for us to publish everyones work, but that shouldnt stop you from taking the chance; it only takes a few minutes to send us an email. And even though we cant publish everything, we still appreciate viewing the incredible illustrations and designs that are being created by our readers. Just send everything to letters@layersmagazine.com with a subject of Digital Canvas. For each piece you submit, let us know the title, clients name (or personal work), all the applications you used (including version numbers), and a website where readers can see more of your work. Turn to page 20 of this issue to see exactly what we need and to admire the work of other readers.
[ SUBMIT YOUR WORK TO LETTERS@LAYERSMAGAZINE.COM ]
THE DESIGN MAKEOVER

By the way, were also always on the lookout for talented designers for the Design Makeover. Every issue, we ask three designers to create a fresh new look for a design currently in the marketplace. Weve redesigned everything from logos to webpages to magazine covers to product labels. This is our most popular column, and its the rst page most of our readers turn to when they receive their latest copy of the magazine. So if you want a chance to show your skills to the world, just drop us a line at letters@layersmagazine.com with a subject of Design Makeover.
90

Layers - November & December 2010-TV

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Layers - November & December 2010-TV

Hochgeladen von

Copyright:

Verfügbare Formate

CREATE INTERACTIVE PORTFOLIOS WITH INDESIGN CS5 USE PSDS TO MAKE MOVIE POSTERS IN ILLUSTRATOR CS5 TIMESAVING FEATURES

TO IMPROVE YOUR PHOTOGRAPHIC WORKFLOW

Designing with Web

DISPLAY UNTIL JANUARY 18, 2011

True PDF release: storemags & fantamag

storemags & fantamag - magazines for all

] NOVEMBER/DECEMBER 2010 ] VOL. 6, NO. 6 ] WWW.LAYERSMAGAZINE.COM

42 ] Adobe Photoshop CS5:

48 ] Adobe Illustrator CS5:

56 ] Adobe InDesign CS5:

62 ] Adobe Dreamweaver CS5:

66 ] Adobe Flash CS5 Professional:

Custom Video on CuePaul Trani

True PDF release: storemags & fantamag

storemags & fantamag - magazines for all

54 ] The Art of Type:

73 ] HP ZR30w MonitorBruce Bicknell

73 ] HP Z600 WorkstationBruce Bicknell

74 ] Maya Entertainment Creation Suite 2010

76 ] Adobe Captivate 5David Creamer

] NOVEMBER/DECEMBER 2010 ] VOL. 6, NO. 6 ] WWW.LAYERSMAGAZINE.COM

True PDF release: storemags & fantamag

storemags & fantamag - magazines for all

FROM THE EDITOR]

FOLLOWING THE RULES CAN MAKE EVERYONES LIFE EASIER

[You should care about

standards because they make sure that most things

in your life just work.]

www.l ayer smagazine.com

Chris Main Editor-at-Large

True PDF release: storemags & fantamag

storemags & fantamag - magazines for all

w w w .l ay er s mag azi n e.c o m

Every day low prices + FREE Shipping*

Call us Today! Located in America's Heartland

True PDF release: storemags & fantamag

storemags & fantamag - magazines for all

gets its own HTML5 pack

True PDF release: storemags & fantamag

storemags & fantamag - magazines for all

A ton of new gear

[more cool sites for creatives]

The new Nikon

PHOTOSHOP CS5 FOR PHOTOGRAPHERS TOUR

PHOTOSHOP CS5 DOWN & DIRTY TRICKS TOUR

SCOTT KELBYS PHOTOSHOP FOR DIGITAL PHOTOGRAPHERS TOUR

LOCATION LIGHTING TECHNIQUES FOR PHOTOGRAPHERS TOUR

PHOTOSHOP CS5 CREATIVITY TOUR

camera, lenses, and ashes

PHOTOSHOP WORLD CONFERENCE & EXPO

True PDF release: storemags & fantamag

storemags & fantamag - magazines for all

True PDF release: storemags & fantamag

storemags & fantamag - magazines for all

True PDF release: storemags & fantamag

storemags & fantamag - magazines for all

showcasing the design work of our readers

the digital canvas

www.l ayer smagazine.com

True PDF release: storemags & fantamag

storemags & fantamag - magazines for all

client:[www.swinggoth.com Swing Goth]