First, open Photoshop and click File then Open. Navigate to the folder where you've saved the picture you want to use and open it. If you need to do any cropping or resizing (by clicking Image then Image Size), do it now. Otherwise, select the image by clicking Select then All, or pressing Ctrl + A. Copy the image by clicking Edit then Copy or pressing Ctrl + C.
Now we want to create a new document that's twice the height of the image and the same width. Check the image size by clicking Image then Image Size.
Next, click File then New and click the dropdown to change the Preset to Custom. Enter the values into the width (552 px for mine) and height (1000 px for mine). Again, make sure that the height is twice the size of the image.
Paste the image onto the new document by clicking Edit then Paste or pressing Ctrl + V. Use the move tool at the top of the Tools panel to move the image to the top of the document (if it isn't already). Then, create a new layer by clicking Layer then New then Layer at the top bar. You can also create a new layer by navigating to the Layers panel on the right hand side of the workspace and clicking the icon at the bottom that looks like a notepad. When the new layer dialogue box pops up, you can give it a name (as I've done) or you can leave the default.
Now paste a copy of the image on the new Reflection layer. Use the move tool to put it directly below the first image.
At this point, we need to flip the copy of the image, so click on Edit, Transform, then Flip Vertical. This will make the image a direct reflection of the first image.
Even though we have our reflection, it's not done yet. We need to give it a fading out effect, so we need to create a layer mask. To do this, click on Layer, Layer Mask, then Reveal All.
Next, we want to make a gradient that goes from black to white. Using a layer mask will cause the black area to be revealed and the white area to be invisible; using a gradient will make it gradually fade out. Select the gradient tool in the tools panel. If you don't see the gradient tool, it might be under the paint bucket tool. Click the black arrow at the corner of the paint bucket tool and choose the gradient tool. Make sure you check the Reverse checkbox at the top bar (it's next to the opacity dropdown) so it will go from foreground color to background color. Then, make sure your color swatches are set to black and white. If they aren't, click on them and use the color picker to choose the correct colors.
Drag the gradient tool from the top of the reflection to the bottom. To make it perfectly straight, hold down the Shift key while dragging down. If you can't see where one image stops and the other begins, zoom in or use the move tool to nudge the reflection down a few pixels to create a distinct white space.
At this point, you should have a nice, faded-out reflection. However, we want a distinct line between the two images to look like the first image is cut off or resting on the surface of something. One way of doing this is to use the line tool to create a line. Select the line tool from the Tools panel; if you don't see it, it may be under another shape tool, so click the black arrow at the corner to reveal more options. I've chosen to make my line weight 3 px, but you can choose a different size, depending on how big your image is and what you want the final product to look like.
Next, hold down the Shift key while dragging the line tool across the screen. Then, select the path selection tool from the Tools panel and click the green arrow at the top bar. You can use the move tool to drag or nudge the line to the place between the two images.
The line looks a little too harsh and sticks out too much, so we need to make it blend in more. To do this, we're going to add some layer styles. Navigate to the bottom of the Layers panel on the right side of the workspace and click the fx. Then go up to the top where it says Blending Options.
When the layer style dialogue box pops up, click on Gradient Overlay. Change the opacity (I've made mine 75%) and check the reverse checkbox.
If you'd like, you can play with the layer styles to see what other effects you'd like to add. In this case, I've chosen to add a drop shadow. The only thing I've changed is the distance, from 5 to 0 px to make it smaller.
It's almost done, but we need to change the opacity of the layers to make them blend in better. First, select the line shape layer and navigate to the top of the Layers panel, to the opacity dropdown. You can type in the new percentage or use the slider to choose it. For mine, I've chosen to decrease the opacity to 40%.
Finally, decrease the opacity of the Reflection layer. Select the layer and navigate to the top of the Layers panel to type in the amount of move the slider. I've decreased mine to 75%, but you can play with it and decide how much opacity you want.
Now it's time to save. Go to File then Save for Web and Devices. This will allow the image to be compressed and optimized for loading and web page display. You can save it as a JPEG or a PNG-24, but I've chosen to save mine as a PNG-24.
And that's it! Once you've done it a few times, it'll be a snap to create image reflections, and shouldn't take more than five minutes. It's an easy way of dressing up an image for your web pages and turning a simple design into something sophisticated and beautiful in no time at all.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
No comments:
Post a Comment