5.4. Reflecting on Reflection, and Shadowing Revisited
Reflections are a simple graphic technique with major visual impact, which explains their popularity. They also use a couple of editor functionalities I haven't covered yet in this book: the use of layer masking and transformations.
Reflections fall into two types. The first reflection type is used with simple objects, and really is nothing more than a sophisticated shadow technique. We'll look at a couple of variations of this type of "reflection."
|
A true reflection, though, is more of a mirrored look, and it works best when we're using an object that either has a three-dimensional shape or, at a minimum, has detail that's reflected so that we know we're dealing with a reflection and not a "shadowy" effect.
There's no real "right" or "wrong" way to create a reflection: it's more dependent on the effect you're trying to create and your satisfaction with the finished product. You might even want to try a variety of techniques when applying a reflection, just to see what works best.
5.4.1. Reflection As Mirror Image
The simplest reflection is one where you create a duplicate of what you're reflecting, flip it vertically, and then adjust the layer's opacity to 50% or less.
In this example, I'm going to create a reflection of text on a blue/aqua background using Photoshop (see Figure 5-22).
Figure 5-22. Finished reflection
To start, create a new image, 500 pixels wide by 340 pixels with a white background. Using the font tool, set the font color to a deep blue (000066), the font family to Cooper Std Black, and the font size to 60 pt. Using this font, type "Hello World" in the new image.
Adding the text automatically creates a new layer. Activate this layer, and then duplicate it. Flip the duplicated layer by selecting Edit Transform Flip Vertical. Using the Move tool, move the item down so that the two image "bottoms" are almost touching, as shown in Figure 5-23.
Figure 5-23. Text duplicated in a separate layer and then flipped vertically, as well as moved
Next, adjust the opacity of the reflected text as much as you wish. To match the finished example in Figure 5-22, adjust it to 10%.
Reflected text using this approach is rather plain on a solid color background because there's no visual indication of light source. It's common to use a gradient to fill in the background of a reflected image. Another approach when you're using a straight "reflection" would be to use a solid light color for the top of the image and a deeper color for the bottom part of the image.
To demonstrate, set the foreground color to an aqua shade (hex of 13f4e1), and use the rectangle selection tool to select the top part of the image almost鈥攂ut not quite鈥攖o the bottom of the first text layer. Use the Fill Bucket to fill the layer, as shown in Figure 5-24.
Next, invert the selection, set the foreground color to a lighter blue (hex value of 01b4dd), and fill the bottom. Experiment with different light and dark colors, and also try the colors in a gradient fill for comparison.
Another use for the reflection technique just described is to create a cast shadow, described next.
Figure 5-24. Filled top part of the reflected text image
5.4.2. Reflection As Cast Shadow
In earlier examples, the only shadows have been drop shadows. Another type of shadow is a cast shadow, which is a form of reflection. The difference between the two is that reflections are mirror-like because the object is resting directly on a reflective surface and ambient light impacts on both equally. The reflected object really is a reflection. Shadows differ because the reflected image is created by a light source behind the object, distorting the reflected image as it changes position.
|
There are two adjustments we need to make in order to add the cast shadow distortion, especially with a light source closer to the horizontal plane of the object. One is that the end of the reflection closest to the subject should be the same width as the subject, but the end toward us will widen out.
The second adjustment is to scale the height of the object, either making the height longer or shorter, depending on where we exist relative to the object. In addition, if we're more interested in creating a shadow than a reflection, light that's closer to the horizontal plane of the object casts a longer, more diffuse "shadow"; light higher up casts a shorter, stronger shadow.
Returning to the example just created, we're going to add both perspective and scaling to the image to create more of a three-dimensional illusion. To make the transform easier to see, we'll also reset the background to white.
After the text has been rasterized, choosing Edit Transform Perspective from the menu gives us a transform box around the reflected layer, as shown in Figure 5-25. Pulling the bottom-left corner to the left widens the "bottom" part of the reflected image, giving us a wider perspective.
Figure 5-25. Adding Transform-Perspective to the shadow text
Choosing Edit Transform Scale, scale the reflection the desired amount. Longer reflection is used for a light source closer to the horizontal plane of the object, shorter for one higher up. To match the finished image, in Figure 5-26, scale the vertical a little longer than the original. Note that you'll want to experiment with both perspective and length to get the effect you're most interested in.
After applying the transformations and adding back in the two-tone background, we can add other image changes, such as a white half-sun on the horizon behind the words and then a Gaussian Blur to the reflected text to make it more shadowy looking, similar to that shown in Figure 5-26. Really, there's no limit to the tweaks and adjustments we can make using just a few of the tools we've worked with previously.
Figure 5-26. After applying transformations and Gaussian Blur to shadow and adding the two-tone background and a half-sun
The examples to this point have been more shadow than reflection. In the next several sections, we'll focus more on the reflecting component of reflections and less on the shadows.
5.4.3. A True Reflecting Reflection
When working with reflections, it's better to use a subject that has some variation in its face, so that we're not left with any confusion about whether we're dealing with a reflection or a shadow.
For instance, if we're working with solid color text, it helps to add an element that has a different color. To demonstrate, since we've done the ocean color scheme, in the next example we'll go to the forests, as shown in the finished reflection effect in Figure 5-27. The text is green, but it's accompanied by a tan-colored plant.
Using the same font family and size as the last example, create a new image that's 600 pixels wide and 400 pixels tall, with the background set to white in the beginning, but this time the font color is a deep green (11600e).
After typing "Hello World", create a new transparent layer and change the Shape tool to Custom. We're working with a "forest" theme, so from the Custom Shape drop-down, pick one of the tall grass shapes. Setting the color to a deep beige (d6bd8d), create the object, just a little taller than the font and centered between the two words, as shown in Figure 5-28.
Figure 5-27. Finished reflection with gray gradient as background
Figure 5-28. Creating a new Hello World 鈥�with friend
Using the Layers tool window, select all the layers but the background and merge the layers so there is only one layer to use for the reflection. Duplicate this layer using Layer Duplicate Layer, flip it vertically using Edit Transform Flip Vertical, and move the new layer down to get the reflection, as shown in Figure 5-29.
Figure 5-29. Reflected text/pattern
A reflection, especially one observed at an angle or a distance, doesn't typically "show" all of the reflected image. However, the cutoff for the reflection must be gradual, or it won't look natural. One way to achieve this effect is through the use of the Layer Mask and the Gradient Fill.
Activate the reflected text layer, and then add a Layer Mask by selecting Layer Layer Mask Hide All. Photoshop creates a black-filled layer mask, hiding the layer contents, as shown in Figure 5-30.
Next, double-check that Photoshop set the foreground color to white and that the background color is black. Make sure the mask is active, and then use the Gradient Fill tool, choosing the Foreground to Background fill and linear options. Starting above the top text, draw down with the tool until about halfway through the reflected text. You should have a lighter image with the top fading away, as shown in Figure 5-31.
Figure 5-30. Adding a Hide All Layer Mask on the reflected image
To finish, add whatever background you want, such as another two-tone background, a gradient fill, or even a solid color. To match the finished result shown earlier in Figure 5-27, use a gradient to fill the background, with the foreground color set to neutral gray (cccccc) and the background to white. Fill the background from the bottom of the image to the top in a straight, linear fill. Try out alternatives. It's amazing what different choices can do to create a "feel" in the picture.
A couple of things to note about this example: first, you don't have to add another color element or three-dimensional effect. You can just use straight text and depend on the gradual fade to give more of a reflection than a shadow effect. Second, I didn't adjust either the perspective or scale of the reflected image in this example. In my opinion, these actions are for shadows, not reflections. However, you may find otherwise鈥攐ne thing about web graphics is that we're encouraged to explore our own tastes.
The last example I'm going to demonstrate uses a reflection of an object that is itself skewed, to create the effect of looking at an object indirectly.
Figure 5-31. Using a layer mask and gradient to create a fading reflection
5.4.4. Reflecting Screenshots and Pictures
Reflections become a more interesting challenge when two new components are added. The first is if there's a lot of detail in the object to be reflected, such as creating a reflection of a book, with both images and text on the original object. The second challenge is when you want to add some perspective to the object you're reflecting and the reflection has to pick up that perspective.
Figure 5-32 shows just such a challenging reflection. In it, a screenshot of the O'Reilly web page is "stood" on end, giving it a solid three-dimensional feel. To create the effect, the web page is first skewed, in order to change the perspective of the viewer looking at the page: we're not looking at the page directly; we're looking slightly turned to the side, as if it's framed in plastic and set on a shiny desk. Before it fades into the bottom of the page, the reflection also echoes this skewing. To add to the feel that this is an object standing up perpendicular to the shiny desk, a diffuse shadow is added behind the screenshot.
Figure 5-32. Stand-up screenshot, with reflection and shadow
I've seen this approach used for screenshots for web pages and applications, in addition to reflections of books, magazines, newspapers, and even photos. It's useful and can look very sharp; plus, it's an intriguing editing challenge.
To re-create Figure 5-32, first either open a photo or grab a screenshot of your favorite web page. To match the example exactly, grab a screenshot of O'Reilly's web site, though the contents will, of course, be different by the time you try this example.
Create a second new image, 1,200 pixels square鈥攚ide and tall enough to provide a good working surface鈥攚ith a white background. Resize the screenshot or photo until it's about 800 pixels wide, select around it, and copy it into the new working image.
Making sure the copied image layer is active, select Edit Transform Skew. Create a side perspective of the image by pulling down on the copied image's top-left corner, and pulling up a little on the bottom-left corner. The right side is left alone. When you're finished, apply the transformation, leaving an image that looks similar to that in Figure 5-33.
Figure 5-33. Skewed image
Paste a second copy of the original screenshot image again into the working document, flip it vertically, and move it down until the bottom-right edges of both images are just barely touching, as shown in Figure 5-34.
The original image and the reflected image have to align along the bottom, but the process isn't as straightforward as it might seem. Your first inclination might be to use the skew tool along the top edge of the reflected image, since you're trying to match up the two where they would touch. However, if you do, although the images might align where they touch, the actual reflection doesn't because the elements contained within seem to be compressed as compared to the original screenshot.
Even though the reflected image's top won't end up in the final product, you'll need to skew it, as you're also skewing the reflected image's bottom to align with the original image鈥攃hecking to see that not only are the image "bottoms" aligning, but also that the contents of both the original image and the reflected image align. The reflected image is really a "mirror" of the top, which means you want to mirror the skewing as well as the image.
Figure 5-34. Reflecting image added to working copy
It might help to turn on the image grid (via View Show Grid) to ensure that all the columns within the screenshot line up, in addition to the edges, as shown in Figure 5-35.
The next part is the easy one. Create a layer mask on the reflected image layer, and, using the Gradient Fill tool set to white foreground/black background, fill in the bottom image until only the top part of the image shows.
To match the finished image shown earlier, select the background layer, and, setting the Gradient Fill tool to a lighter blue (cbd8e2) foreground and a white background, fill in the background layer, as shown in Figure 5-36.
The next step is optional. If you wish to add a cast shadow behind the screenshot, create a dark-gray rectangle about the same size as the screenshot and then rasterize it.
Using the Transform tools, both Skew and Rotate, manipulate the rectangle until it approximates where a shadow would be. It might help if you move the shadow layer to between the reflection and the upper layer, and move the front end of the rectangle to the "front" to provide a guide for the back part of the shadow, similar to what is shown in Figure 5-37.
Figure 5-35. Original image and reflection, aligned along the bottom
Figure 5-36. Image reflected and background filled in with blue gradient
Figure 5-37. Creating a cast shadow for the stand-up screenshot
When the angle of the shadow is about right, move and scale the shadow until it's completely behind the screenshot. The shadow doesn't have to be perfect, because the next step is to apply a Gaussian Blur to it. The blur radius is quite large, because we really want only a hint of a shadow, not one that's strongly marked. Begin with a radius of 50 pixels and adjust from there.
Once the shadow is created, merge the layers and resize to the size you need or want, and you're ready with a screenshot that will impress your web page readers. This approach is also a great way of posting web design prototypes or showcasing an application, in addition to a photograph or any other "flat" material.
No comments:
Post a Comment