50 FAST PHOTOSHOP" CS TECHNIQUES- P13 potx

Chapter 9 Creating an Online Photo Gnllery rollover image into Microsoft Internet Explorer, as shown in 3. HTML code needed to properly display the rollover image. - You can now copy the HTML code from the As you move you1 mouse over the image, the Internet Explorer window and paste it into the source " before " image should appear; move your mouse off code for the Web page where you intend to display the image and it will once again display the " after " the rollover image. Or, you can select Pile * Save image. Below the image you will find some informa - tion on the image, and below that you will find all the Optimized As to get the Save Optimized As dialog box shown in Figure 49.10. Tse the filename you want in the Pile name box. Click in the Save as type . - box and select HTML and Images. Clidc Save to save the images plus a Web page. You can now view the rollover image by clicking the HTML file found in the folder where yon saved it. CREATING ANIMATIONS - 50 USING DIGITAL PHOTOS BOUT THE IMAGE ! Seeing Through the Fall Colors Canon EOS 030 digital camera mounted on a tripad 1 Wmm fl2.8 macro with dr- cular polarizer, IS0 100, Fine image setting, 118 @ fR.8, images have been edited and resized to be 214 x 320 pixel .jpg images (41 K and 49K) T he two photos shown in Figure 50.1 were taken with a Canon EOS D30 digital camera and a circular polarizer on a lOOmm lens. The photo on the left shows the results of rotating the circular polarizer so that all reflections were removed from the surface of the water. Without the surface reflections, it was possible to see all the way to the bottom of the stream. The second photo shows the results of rotating the circular polarizer so that the reflec - tions were maximized. The goal of this technique is to create an animation for a Web page that shows what it looks lie when the circular polarizer is rotated. To accom - plish this seemingly difficult objective, the images will be combined into one image as separate layers; then Opacity will he varied on the top layer and the animation will be created by using the 'heen feature in Adobe ImageReady CS. Chapter 9 Creating an Online Photo Gallery STEP 1: OPEN PILES AND COMBINE THEM INTO ONE PILE Completing this technique is possible with just Adobe ImageReady CS, the Adobe Photoshop CS companion " Web image tool."However, its tight inte- gration with Adobe Photoshop CS offers so many benefits to those with computers that have sufficient resources to run both applications simultaneously that we will use both applications. If your computer struggles to load and run both applications, dose Adobe Photoshop CS and just run and use Adobe ImageReady CS. Adobe ImageReady CS uses for the most part, the same menu commands and shortcuts as Adobe Photoshop CS. Using Adobe Photoshop CS, choose File * Open (Ctrl+O PC, Cmd+O Mac) to display the Open dialog box, Double-didc the \50 folder to open it. Press Ctrl on a PC or Cmd on the Mac while clicking the waterl-before.jpg and water2-before& files to select them both; click Open to open both files in Adobe Photoshop CS. w To create a layer containing the watefl-before. jpg image in the water2-before.jpg image, click the waterl-before.jpg image to make it the aaive image. Click the Move tool (V) in the Tdbox. Press Shift on a PC or Cmd on a Mac while click - ing in the weterl-before image and drag the cur - sor onto the water2-before.jpg image. When you release the mouse button, the water2-beforejpg image now has a second layer, as you can see in the Layers palette shown in Figure 50.3. Alternatively, you can click the water-beforel.jpg image to make it the active image and then press Shift (Cmd on a Mac) while clicking the image's thumbnail in the Layers palette and draging it onto the wate~before2.jpg image. In both cases, pressing Shift on a PC (Cmd on a Mac) forces the new image to be perfectly aligned to the image where it is dragged. You can now dose the waterl-before.jpg image as it is no longer needed. STEP 2: SEND IMAGE TO ADOBE IMAGEREADY CS w The image is now ready to be edited with Adobe ImageReady CS. To open Adobe ImageReady CS (if it is not already open) while sending the two - layered version of the water2-before.jpg image, dick the Edit inImageReady button (SM+Ctrl+ M PC, SM+Cmd+M Mac), whkh :* -++h- bot - tom of the Toolbox, as shown in Creating Animations Using Digital Photos rn You should now see the water2-before.jpg image in the Adobe ImageReady CS workspace. As you will need quite a few palettes I suggest that you arrange the palettes in one of the default positions by choosing Window * Workspace * Interactivity Palette Locatiom. The Adobe ImageReady CS workspace should now look similar to the one shown in Figure 50.5. STEP 3: CREATE ANIMATION To create an animation, you now need to carefully define the first and last image and apply the lkeen command to automatically create all the transitional states in between. That's it - it is that simple! Because we want the beginning of the image to look as if no polarizer was used (the image with the rich fall col - ors), we set it as the first image. Then we create a sec - ond image in the Animation palette and carefully set it to look like the image where the circular polarizer's full capability of removing reflective light has been used (the image showing the bottom of the shallow stream). rn Click the menu button in the upper - right corner of the Animation palette to get a pop - up menu; &&New Frame to create a second framc Chapter9 Creatingan Online Photo Gallery in the Animation palette, which should now look like the one shown in Figure 50.6. The second animation cell is now highlighted indicating that it is the active cell. The Layers palette now reflects the settings for the active cell, as does the water2-before.jpg image. rn Click the Layer Visibility icon to the left of the Layer 1 layer in the Layers palette to hide that layer. The Layers palette should now look like the one shown in Figure 50.7. This now changes the look of the second cell in the Animation palette to look lie the image where the bottom of the stream may be seen. rn Press Shift and click cell 1 in the Animation palette to select both cells. Click the bottom of either cell to get a pop - up menu giving you options for setting the amount of time each cell is displayed; click0.2 to set each cell to display two - tenths of a second. rn With both cells still highlighted, click the menu button in the upper - right comer of the Animation palette to get the pop - up menu shown in Figure 50.8. Click 'Rveen to get the 'Ifveen dialog box shown in Figure 50.9. This dialog box allows you to set the characteristics of the tween effect - the way the images are made " between " each cell. 8 Click in the Frames to Add box and type 18, which results in a total of 20 cells - the starting and ending cells, plus 18 " tweened " cells. All Layers should be selected in the Layers area. In the Parameters area, only Opacity should be selected. Click OK to begin the tweening process. rn The Animation palette should now look like the one shown in Figure 50.10. To see the entire animation, you have to use the scroll bar at the bottom of the Animation palette. rn At the bottom - left corner of the Animation palette, there is a Looping Option setting box; dick it to get a pop - up menu. Then, click Once New Frame Delete Frames Delete Animation Copy Frames Pasts &am ,.* ~ - , ~bet{th- ~~ ~-~~~ - , Optimize Animation . I Make Frames From Layers Flatten Frames Into Layers I I Create Layer for Each New Frame I I New Lavers Wsible in All StatssRrames I I ~dette options . I Creating Animations Using Digital Photos to have the animation play a single time without looping. rn To view the Animation, click the PlayslStops Animation button in the Animation palette- the button with a single triangle on it. You now see the 20 - cell animation play in the wata2-befomjpg image window. Pretty cool, don't you think? rn It is way beyond the scope of this book to cover the many intricate details of Web images, but you should be aware that Adobe ImageReady CS is doing some pretty sophisticated manipulation of the images based upon defaults or your chosen settings. Take a quick look at the Optimize palette. If it isn't showing, select Window * Optimize. Click the Quality, Transparency, and Options icons to view the many options that are available. Because animations must be GIF files and because we want the best quality of animation for our stream image animation while making it an easy download, select GIF 1% Dithered in the Preset box The Optimize palette should now look simi - lar to the one shown in Figure 50.1 1. rn To find out how large the image has become, click on the Optimized Tab in the water2-before. jpg document window. If you dick the down arrow at the bottom of the document window you get a pop - up menu; choose Origin& Optimized Pie Si, which will show the entire 20 - cell GIF image file is 556.3K. While that is small for what is essentially a file containing 20 different images, the file is a bit large to download from a Web page and just fine to use as a CD- ROM - based image. To make it smaller, you can change GIF settings, make the image smaller, or tween with fewer than 20 cells. Chaprer9 Creatingan Online Photo Gallery STEP 4: SAVE AND VIEW ANIMATION FILE rn To optimize and save the newly created animation, choose Fie * Save Optimized As (Ctrl+Shift+Alt+S PC, Option+Shift+Cmd+S Mac) to get the he Optimized As dialog box After selecting a folder where you want to store the image, click Save to save the file. rn To view the animation, open up a Web browser; then using Windows Explorer (Finder for Mac users), find and then dick and drag the water2-before@ file onto the open Web browser, as shown in Figure 50.12. As soon as it displays, the animation begins to play. As we set the looping option to play once, it plays once. To view it again, click the Web browser's Refresh or Reload button. STEP 5: RETURN TO PHOTOSHOP CS rn You can now dose Adobe ImageReady CS, or you can click the Jump button at the bottom of Adobe ImageReady CSs Toolbox to return to Adobe Photoshop CS. Admittedly, this animation is very simple and we avoided looking at the many other features that allow you to further control how the animation displays. But, this example gives you a good idea of what can be done with animations. Well - thought-out anima - tions can enhance Web pages, but they also can repeat too often, be distracting, and ultimately lower user experienceif you have not used them appropriately. You may now want to wnsider other ways that you can use animations. How about having a moon float up toward the top and off of a late evening photo as if it were Gig in the sky? Or, you can create an animation where the sky gets darker and darker until it is almost totally black as it does each evening when the sun sets. You can take ideas such as these and turn them into interesblg features on a Web page in just a few minutes using Adobe ImageReady CS. For example, the sunset - in-the-forestgif image that can be found in the W) folder was easily created by using the image as the first d. Reducing Lightness with HudSaturation created the second cell. 28 new cells were then tweened to cre - ate the final GIE To view the results, drag it onto an open Web browser. The image loops three times. What animation do you want to create? You have now reached the end of the last technique and the end of the book I hope you have enjoyed the techniques and the digital photos that you used to complete the techniques. If you have any questions about these techniques, ideas for new techniques, comments about how one or more of them may be improved, or you have some work you would like to share on the companion Web page, please send me an e-mail-I would enjoy hearing from you. I can be reached at ggeorgesOreallyusefulpage. corn. See you out there shooting! APPENDIX A WHAT'S ON THE CD - ROM This appendix provides you with information on the contents of the CD that accompanies this book For the latest and greatest information, please refer to the ReadMe 6le located at the root of the CD. Here is what you will hd: rn System Requirements rn CD-ROM Installation Instructions rn What's on the CD rn Troubleshooting SYSTEM REQUIREMENTS Make sure that your computer meets the minimum system requirements listed in this section. If your computer doesn't match up to most of these requirements, you may have a problem using the contents of the CD. FOR WINDOWS 9X, WINDOWS 2000, WINDOWS NT4 (WITH SP 4 OR LATER), WINDOWS ME, OR WINDOWS XP: rn PC with a Pentium processor running at 120 Mhz or faster rn At least 32 MB of total RAM installed on your computer; for best performance, we recommend at least 64 MB rn Ethernet network interface card (NIC) or modem with a speed of at least 28,800 bps rn A CD-ROM drive FOR MACINTOSH: Mac OS computer with a 68040 or faster processor running OS 7.6 or later rn At least 32 MB of total RAM installed on your computer; for best performance, we recommend at least 64 MB CD - ROM INSTALLATION INSTRUCTIONS To install a particular piece of software, open its folder with My Computer or Internet Explorer. What you do next depends on what you find in the software's folder: 1. Fist, look for a ReadMe.txt 6le or a .doc or .htm document If this is present, it should contain installation instructions and other useful information. 2. If the folder contains an executable (.exe) 6le, this is usually an installation program. Often it will be called Setup.exe or Install.exe, but in some cases the filename retlects an abbreviated version of the software's name and version number. Run the .exe tile to start the installation process. 339 SO Fastphotoshop CS Techniques WHAT'S ON THE CD The following sections provide a summary of the software and other materials you'll find on the CD. IMAGES FOR THE 50 TECHNIQUES All of the images for the techniques are on the CD in the folder named " Techniques " . There is a sub - folder for each technique. For example, you can find the images for Technique 12 in the folder \techniques\ll-20\12. 50 sets of original " before " photos for completing each of the fifty step - by - step techniques and 50 " after n images showing the final results. Most of the'before " images are digital photos created with professional digital SLR cameras and quality lenses including the Canon EOS IDS, ID, D60, and D30 cameras; and, the Fuji FinePix S2 Pro. Internet browser - based slide show featuring " before " and"aftern images. To run the show, use Windows Explorer or Mac Finder to locate the folderlshow. Double-didc indahtm to run the slide show in your Internet browser.Youcan also view thisslide showonlineatwww. reallyusefulpage. com/5Opscs/show. TROUBLESHOOTING If you have difficulty installing or using any of the materials on the companion CD, try the following solutions: - lbm off any anti-vim software that you may have running Installers sometimes mimic vims activity and can make your computer incorrectly believe that it is being infected by a virus. (Be sure to turn the anti - virus software back on later.) rn Qose all &programs. The more programs you're running, the less memory is available to other pro - grams. Installers also typically update files and programs; ifyou keep other programs running, installation may not work properly. Reference the ReadMe. Please refer to the ReadMe file located at the root of the CD-ROM for the latest product information at the time of publication. Image files. When working with image files from the CD - ROM if you receive a message that you are working with aURead-Only" file, read the Introduction to learn more about how to change file attributes. If you still have trouble with the CD - ROM, please call the Wiley Product Technical Support phone number: (800) 762 - 2974. Outside the United States, call (317) 572 - 3994. You can also contact Wdey Product Technical Support at www.wiley.com/techsupport. Wiley Publishing will provide technical support only for installation and other general quality control items; for technical support on the applications themselves, consult the program's vendor or author. To place additional orders or to request information about other Wdey products, please call (800) 225 - 5945. APPENDIX B COMPANION WEB SITE A companion Web sitehasbeencreated especially forthisbookatwww. reallyusefulpage. com/5Opscs. WHAT IS ON THE SITE? rn Updates and corrections to this book rn 50 Techniques Readers' Image Gallery: =ewthe work of other readers and share your best work, too! If you have created an outstanding image that you would like to share with others, please e - mail a .jpg lile version to curator@reallyusefulpage . corn. Make surethat the images fitwithin a 640~640pixelsquare and that they are under 75K Puture editions of this book may contain images submitted to this gallery. Permission will be requested and credit willbe given to those who submit images. rn A really useful list of online photography and image editing resources including Photoshop plug - ins rn PAQ (Frequentlyksked Questions) section for getling answers to common questions rn Recommended book reading list to further your skills rn List of online galleries that you might like to visit JOIN AN ONLINE PORUM The author of this book has created and hosts an online forum at Yahoo! Groups for readers of his books, as well as anyone else that has an interest in digital photo editing. To join, visit http : //groups. yahoo. corn/group/ digital - photo - editing.Alternatively,visit this book's companion Web site (www . reallyusefulpage. corn/ 5 Op sc s) and click on Join an E - mail Group. Subscribe to the e - mail service to participate. You can post images and share tips and techniques with other readers of this book There will even be an occasional onIine chat session, which you will be invited to. CONTACT THE AUTHOR Gregory Georges welcomes comments from readers. He may be contacted by e - mail at ggeorgese reallyusefulpage. com, or occasionally on AOL IM under the Buddy Name, DigitalGregory. His Web site is www. reallyusefulpage. corn. While he reads all e - mail, the heavy volume makes it ditlicult to respond to all messages immediately, so please have patience. [...]... digital cameras in late 1999,Gregory became the founding author for the "50 Fast" book series for Wiley Publishing Inc.with 50 Fast Photoshop 7 Techniques His second book, 50 Fast Digital Photo Techniques quickly became an Amazon "Top M*bestseller, and his books have been translated into more than ten languages Gregory has also written 50 Fast Digital Camera Techniques, Digital Photography:Top 100 Simplified... (J) Histogram palette bidin&plnyin& 78 e-mail addresses ndEdgcs6ltn,line drawings,21W7.0 dialogbox, resizingan image, 56 viming e i i g steps, 138 dtn vims, 78 histograms, image analyzing 71 Hinory Brush tool (Y) painting line drawings with wlor, 226-228 u= s, 7 History Log donunentingimage edit steps 104-105 msbling/d*ablin&7 SO FastPhotoskop CS Techniques Histofypdette history states,4 ,42 0 image snapshorn,4446,209... O WAlan, Epson printer FAQs 289 workspces applintion windmusizin53233 customiimg, 1 M 4 d Ct O"n window sizing,3334 i m w room~tagmtag~a 34-35 modngimages on, 35 mubk views of ssmc image, 36 - 50FastPhotoshop CS Techniques z moms cache levels, 1&11 percentages,3&35 window resize preference settings, 7 Zoom tool (2 Ctrl+Spacebar/ or Cmd+Spacebar), selection methods, 35 ABOUT THE AUTHOR "regory Georges... batch p & 5456 crmr/~rht imwe action, 179 tIiiShadow frame Action, 53 loadinam Action xt, 62 m Action, 63 preddined actions, 50 &ording custom Actions, 50- 54 saving an Action ss a Droplet, M 5 7 saving custom Actions, 54 s&xgAc!ion as active, 62 stopping Actions 54-55 undoing, 50 viewing action steps,62 Add Nokt dialog box, 43 Adjustment byen burning and dcdging black and white photos, 1IM21 contrast... l g h w channel dispb, 11 1 loadmg cham& ap a a e l d r m , 130 s h q e n q hghmess c h d in lab W o r mode, 95 Clipboard, qmrt preference senings, 7 Clone Stamp tool (S) mkiInerepairs. 150 rmssmgpomait part=, 149- 150 CMYK colorspreference senings, 28 whge m r , a k creating from photo objects, 195-197 d+Yq*.e grids,9 image adjustments, 6C65.80 line drawings, 22C227 partrait adjustments, 155 Color Sampler,point... display resalution rcquimmts, 5 erpasm adjustments,72 image analping,71 Image settings, 70 B , Paer,polamid photo-iaqe transfer& 1% wivbing tovbingPh~hoP CS, 38 Mohe RGB (1998) ~ 1 0 1wbr % management, 2630 algorithms Bicubic Smoother,283 Photoshap CS mpporkdclpsclps 281-282 AltKtrl+Shiff kev comb'mtion rrrtolina wmdows Pd to default settin@,6 Animatim cahte frames creation, 335-358 animptidirdtsl oham... Extract tool, 186-187 with Package, making differmt-siu prints, 298 P x l Genius,LLC, PhotoKit Sharpam, ie 267-271 plug-ins MQbe Camera RAW, 69-74 bnZ2.h 2.4263-266 Covhue One DSLR 253-257 Pi MFast Photoshop CS Techniques Plug-Ins &Scratch Disks dialog box, preferenceseningJ.9-10 portraits batchprwf pmdudion, 177181 c o l o ~ g b i a c k white photos, 161and 165 digital texhm s a n s , 17P175 facialline... 191-193 MFastPhotoshop C Techniques S borders, image white apace, 52-53 boundinghox, mizing a layer, 237 bradrded photos, image combining, 199-204 brightnegs Adobe Gamma utility adjustments, 20 BrushpaIette, brush size selection, I49 brushes restoring default rettings 11 sidng, 47 Brush heset Picker brush siaing, 47 digital pdn-ting, 24l-W History Brush twl selebiona,22&227 Small list vkw admtagcs, 226... h o t ~162-165 dr , Calypso, Inr, Lightjel5000 printer, 30?-307 canvas slEinp 5253 31%314 Web image jump prt~ention, Canvas S z dial% box, canvas sizing, 52 ie Capture One DSLRdw-in, R W f m t A so chambers, ~ichael, FTP account setup, 307 Channel Morer, color photo to black and w i e convemon, 110-114 ht Channelspame applynagfilter e&a to a single channel, 250 channdncwing,112 L l g h w channel dispb,... display preparation, 311-316 mam percentages,3435 Image Size dialog box,52, 124,283 1ma&g ~actory~Convea BIW Pm, to 260-262 -"- Info palette, Color Sampler points 7880 installation CD-ROM, 340 Photosbop CS opdatc6,5 interpolation dehed, 281 prekmce sEttin&r,6 imisibfewatennark, image addition, 315 Johnson,Harald (MastningDqitd Rinhng Photognrpher's and A n i d s Guide to Digital Gurput),289 layer Masks . the founding author for the " 50 Fast " book series for Wiley Publishing Inc. with 50 Fast Photoshop 7 Techniques. His second book, 50 Fast Digital Photo Techniques quickly. Photoshop CS and just run and use Adobe ImageReady CS. Adobe ImageReady CS uses for the most part, the same menu commands and shortcuts as Adobe Photoshop CS. Using Adobe Photoshop CS, choose. TO PHOTOSHOP CS rn You can now dose Adobe ImageReady CS, or you can click the Jump button at the bottom of Adobe ImageReady CSs Toolbox to return to Adobe Photoshop CS. Admittedly,