Buy. Download. Create. Get Photoshop CS3 now at the Adobe Store.
Photoshop for Students. Get super savings at the Adobe Academic Store.
Vector Shape Your Way To A Picture In A Picture
"Wow!" your friends will say. "How'd you do that?" will soon follow. These are the exclamations you'll hear while showing off your new Elements chops with this slightly magical and creative photo effect.
We'll take an ordinary photo and place a Polaroid-ish color picture box on top of a grayscale version of the same image. It's a really neat way to draw the viewer's eye and accentuate the subject matter or focal point of a photo. The magical part is that the color picture box will be movable! By using two different kinds of adjustment layers to create the effect, you'll be able to move the color picture box anywhere you want, leaving the grayscale version of the photo in its wake.
Sound intriguing? Read on!
Draw a picture box
The first step is to create a picture box where the color portion of the photo will live. By using a Solid Color adjustment layer, we'll gain the ability to change the size and rotation angle of the picture box later on, in case we don't get it perfect the first time.
Step 1: Press M to select the Rectangular Marquee tool and draw a box around part of the image. Don't worry too much about its size or location because we can change it later.
TIP: Press and hold the Option key (PC: Alt) to draw the box from the center outward. Press the Spacebar as you draw the selection to move it around on the photo (just release the Spacebar and continue making the selection larger or smaller). These keyboard shortcuts also work when using the Elliptical Marquee tool.
Step 2: Create an adjustment layer by clicking the half back/half white circle at the top of the layers palette. Choose Solid Color from the pop-up menu and when the Color Picker appears, choose a nice charcoal gray. Press OK to continue.
The picture box should now be filled with gray.
TIP: It might be easier to get the right shade of gray by using the Crayon color picker. Just click the little box of crayons at the top right of the Color Picker palette, circled in red below. Pick either dark gray crayons on the top row.
Rotate, resize, and lift!
Step 3: Rotate the box by pressing Command + T to invoke Free Transform (PC: Ctrl + T). Position the cursor below the bottom left corner of the box and drag upward to rotate the box slightly. Feel free to resize it too, if you'd like. Press Return to accept the transformation once you're finished.
Step 4: A great way to add depth is to add a drop shadow. Locate the Styles and Effects palette and choose Layer Styles from the left hand pop-up menu, and Drop Shadows from the pop-up menu on the right. Click the Soft Edge shadow button once to add it to the currently selected layer.
TIP: To edit the shadow, just double-click the tiny cursive "f" next to the layer thumbnail in the layers palette.
Step 5: To make the original image viewable through the picture box, we need to change the layer Blend Mode to Overlay. Changing a layer's Blend Mode changes the way it interacts with the layers beneath it. The Overlay mode ignores the color gray, allowing anything underneath to show through any gray areas. By using dark gray as a fill color for the picture box earlier, we've created a window to the original image below.
Zap the color...
To drain the color from the image without harming it, we'll use an adjustment layer of a different type.
Step 6: Click the half black/half white circle at the top of the layers palette and choose Hue/Saturation from the pop-up menu.
Step 7: Drag the Saturation slider all the way to the left to drain all color from the image. Next, drag the Lighten slider to the right just a bit to lighten the overall image.
...and bring some back
One of the advantages of using adjustment layers is that they come with their very own layer mask. A layer mask is simply a way to hide pixels, or in this case, the effects of the adjustment layer it's attached to. By painting with black onto the hue/saturation adjustment layer mask, we'll hide the grayscale conversion of the image, thereby returning that portion to color.
Step 8: Command-click (PC: Ctrl-click) the layer mask of the Color Fill adjustment layer (circled in red) to create a selection of our picture box. Selection ants should now be marching dutifully around the box.
Step 9: Take a peek at the color chips at the bottom of the main Toolbox. Press D to set them to the default of black and white and press X until white hops on top. Click once in the layer mask of the Hue/Saturation adjustment layer (circled in red) and fill the selection with black by pressing Option + Delete (PC: Alt + Delete). That area should now be in full color. Don't deselect just yet, as we've one more use for that picture box selection.
Frame it
A picture within a picture wouldn't be complete without a frame. We'll use the selection we already have and apply a thick stroke to give to create it a Polaroid-ish look. Because we don't know exactly what size frame we want, let's put it on its own layer.
Step 11: Create a new layer for the frame by pressing the New Layer icon at the top left of the layers palette.
Step 12: With the new layer selected and marching ants surrounding the picture box area, hop up to the Edit menu and choose Stroke (Outline) Selection. In the resulting dialog, type 20 px into the width box, click the color well and choose white, and choose Inside for Location. Click OK when finished. Now a white border should appear around the picture box. Press Command + D (PC: Ctrl + D) to deselect and get rid of the marching ants.
The super cool thing about this effect is that we can move the picture box, and therefore the color area, wherever we want. Just Command-click (PC: Ctrl-click) to select the three new layers (everything except the background layer), and press V to select the Move tool. Mouse over to the document and move the picture box wherever you want. Smile with smug satisfaction as the color moves right along with it.
Until next time, may the creative force be with you all!
Read more Photoshop tutorials from Lesa Snider King.
Photoshop CS3 Upgrade Options And Bundles From The Adobe Store
Photoshop CS3 Extended is ideal for film, video, and multimedia pros and for graphic and web designers using 3D and motion. Get the full version for US $999, or upgrade for US $349. The standard version of Photoshop CS3 is available for US $649, or as an upgrade for US $199. See all upgrade options at the Adobe Store. See our CS3 Resource Center for free Photoshop CS3 tutorials.
Photoshop Extended is also available as part of Adobe Creative Suite 3 Design Premium, which combines all-new CS3 versions of Photoshop, Flash Pro, Dreamweaver, Illustrator, InDesign and Acrobat 8 Pro. Upgrade options for customers in Europe, the UK, Australia, New Zealand and Asia can be found at the Adobe International Store.
SiteGrinder Photoshop Plugin - Create Websites Instantly
There often seems to be a strict division of labor within the world of web design and development. Creative professionals tend to stick to the Photoshop domain, while those well-versed in scripting are left to the task of implementing their work. Indeed, the two realms are quite different from each other, to which any of us even vaguely familiar with either can easily attest.
Essentially, Photoshop is a no-holds-barred design studio, offering the artist a seemingly endless array of creative options. On the other hand, HTML, CSS, Java and the like follow strict rules of engagement, requiring the developer to take any number of esoteric concerns into consideration in order to ensure that designs are properly displayed on the web.
Turn Photoshop Into A Complete Web Design Tool
SiteGrinder seeks to bridge this gap between design and development. Basically, this program turns Photoshop into an easy-to-use and fully functional web design tool. With SiteGrinder, designers will now have the freedom to totally let their creativity loose and then, without skipping a beat, transfer their designs to the web. Bringing esthetic concerns together with more practical considerations, this program is an amazingly powerful tool that would make a fantastic addition to any web designer's bag of tricks.
Generate Your Web Pages Directly From Photoshop
By generating web pages directly from Photoshop, you'll be able to spend much more time on the creative end of the spectrum, since you'll know right off the bat how well particular designs will translate to the web. No more going back to the Photoshop drawing board after getting a phone call from your development team, telling you that what you had envisioned doesn't have a chance of being displayed on the web. You can immediately visually and interactively test your designs, which permits you to then make changes to either esthetics or functions while it's still relatively early on in the design process.
Pricing and Availability
Mac OS X and Windows versions of the SiteGrinder unlockable demo are available now via download. SiteGrinder can be ordered from Media Lab's online store.
Photoshop CS3 Book - CS3 Essential Skills - By Mark Galer And Philip Andrews
Brimming with beautiful pictures, Photoshop CS3 Essential Skills guides you through a project-based, progressive curriculum so that you can build all the essential skills to enhance photographs creatively and professionally with Photoshop CS3. If you are an aspiring professional, enthusiastic amateur photographer, or a student learning photography, digital imaging, art and design, or design graphics, you'll be amazed at the stunning results you can achieve. A DVD is included free.
The Essential Skills Photography Series from Focal Press uniquely offers a structured learning experience for photographers of all ages, with both the underlying theory and loads of invaluable 'how to' and real-life practice projects - all from the most talented photography practitioners/educators in the world.
Read 2 free sample chapters:
Adjusting Exposure in Adobe Camera Raw CS3
Photoshop CS3 Tutorial High Dynamic Range
Special book offer - save 24%
Photoshop CS3: Essential Skills (Amazon.com - $28.08 - save 24%)
Photoshop CS2 Book - Photoshop CS2: Essential Skills - By Mark Galer And Philip Andrews
An inspirational and user-friendly guide to creative image editing, Photoshop CS2: Essential Skills provides direction for photographers and designers alike who have ventured into the realm of the 'digital darkroom.' The book offers a progressive curriculum to guide you through Photoshop with a series of clear, step-by-step projects designed to place knowledge into a practical context.
Whether you simply want to retouch an image, create a glamour makeover or create a highly sophisticated montage - this book will give you the essential skills to complete the work to a professional standard.
Read 2 free sample chapters:
How To Sharpen An Image In Photoshop — Advanced Sharpening Techniques
Working With Shadows In Photoshop - Advanced Shadow Techniques
Special book offer - save 37%
Photoshop CS2: Essential Skills (Amazon.com - $20.76 - save 37%)
Exclusive 20% Discount On Select Total Training Products & Bundles
To redeem our exclusive discount coupon, use promotion code save20pss in your shopping cart. You could save hundreds of dollars. Use this special link to see the full offer.
Total Training for Adobe Photoshop
Learn Adobe Photoshop with 21 hours of interactive Adobe Photoshop tutorials. This is training for real-world situations and includes additional tips and techniques used by the pros.
View Sample Photoshop, Dreamweaver and Flash Pro Video Tutorials
Free Adobe Photoshop CS3 video tutorials
Free Adobe Photoshop CS2 video tutorials
Free Adobe Dreamweaver video tutorials
Free Adobe Flash Pro video tutorials
