How to make a mirror image of a cube in Photoshop. Create a realistic reflection from complex objects in Photoshop
1 voteGood day, dear readers. Today I will tell you about a simple tool, which is sure to be useful to any web designer: to create a landing page or, if you are creating an online store, to improve the pictures in the product card.
I'll show you how to make an image mirror. First, use two buttons to simply expand the picture, and then professional way reflect an object as if it were in a mirror or on a glass table.
Shall we get started?
Two buttons for mirror effect
So, this method works no matter what version of Photoshop you use CS6, CS5 and even in online versions. I work at CC.
Once you open a photo in Photoshop, you need to unlock it for editing. Without this, you will not be able to use most functions. Click the lock to the right of the layer's thumbnail.
Now press the keyboard shortcut Ctrl+T.
Right click anywhere free space selected fragment. Will open extra menu with many functions for rotation: vertically, 180, 90 degrees. Now you select "Flip Horizontal".
Done, you have flipped the image as a mirror image. If there are any logos or mention on your photo brands and you don't want readers to see them, this is an easy way to complicate things. Many TV channels now use it.
If you don't like using the keyboard shortcut, you can top panel select "Edit", then "Transform" and "Flip Horizontal".
Well that's all, with simple method figured it out. It's time to make something beautiful. By the end of the second part of this tutorial, you will have an attractive image that can be inserted as a design element or simply as an illustration for a product card in .
Mirror effect
The first step is to prepare the background. As a rule, professionals work with light and black to see the result in different colors. To do this, you will have to learn how to work with gradients. If problems arise, read my detailed step-by-step instructions.
Create a layer, then under the Fill tool find a gradient and fill the layer radially in dark colors. Can be used depending on color #655959 before #3f3535.
Now we need to create another layer with light color. Click on the icon next to the basket. Or in the "Layer" tab top menu select "Create" new layer».
You can use the keyboard shortcut Shift+Ctrl+N. By the way, I recommend that you keep a notebook where you will write down all the hot keys. There are a lot of them in Photoshop, but they make your work much easier.
At first, you can write down the keyboard shortcuts that you use each time. Suppose you forgot - looked and wrote it down again. I managed to remember on my own - there is no need to look for honor, praise and a pen. At one time I studied this way English language. Helps. You sit until the last moment until you remember without prompting, so as not to write the same thing a hundred times.
Fill the top layer in light colors from #cdc6c6 before #948d8d.
Make the drawing a little smaller. To make it shrink proportionally, while you move the mouse, hold down shift on the keyboard. Once finished, apply the changes by pressing Enter.
Right-click on the layer thumbnail and bring up an additional menu, in which select the “Rasterize Layer” function.
In the same menu, also click on “Create a duplicate layer” or use the Ctrl+J button combination.
Now you need to press Ctrl+T, “Transform”, and right-click inside the object, as I described in previous paragraph. Select the Flip Vertical option.
Drag the new layer down, this can be done in its current state. Alternatively, press Enter to finish the transformation, select the Move Tool (overlapping arrows) and drag the new layer down.
Add . A rectangle with a circle inside. I have already described this function in detail. It is somewhat reminiscent of an eraser: it erases objects or makes them transparent.
Now you'll need a gradient again. From black to white, but this time mirrored (indicated by number 3 in the screenshot).
Draw a line somewhere from the middle of the object from the first visible layer to the end of the “reflection”, as shown in the figure.
Be careful when you apply the gradient that the white border should be on the layer mask, the one to the right of the sketch. Double-click on it and you can adjust the density and make the reflection transparent.
Now you need to blur the object a little, since there is no “pure” reflection in nature. Click on the layer's thumbnail to apply edits specifically to it. In my case with the image of an apple. Next, go to the “Filters” – “Blur” – “Gaussian Blur” tab.
Adjust the radius as you like. It all depends on the resolution of the source. In my case 5 is perfect.
You can remove the visibility of the light gradient layer by clicking on the eye next to it, and see how the photo will look on the dark one. All that remains is to choose the best option.
OK it's all over Now. If you liked this tutorial, subscribe to the newsletter and learn more about the world of Photoshop. Now you can create very beautiful pictures on one's own. Well, if you don’t have time to wait, I can recommend the course “ Photoshop lessons improving skills " In it you will find a whole collection of professional techniques and methods.
Well, if you think that your knowledge is not yet enough to increase your level, learn all about the tools in the course " Photoshop from scratch in video format " It will help you learn not just to use some techniques, but to independently figure out how to apply this or that effect of a complex program.
See you again and good luck in your endeavors.
Today we will tell you about how to make competent reflections in photoshop. 3D reflections, product reflections, and a couple other types of great reflections. We'll discuss everything from transformations to blending modes and more. It doesn't matter if you're a beginner or a pro, you can still learn a thing or two.
You'll probably think that reflections were extremely popular a couple of years ago, but today they've fallen out of favor a little, and you'd be right. However, you can see various examples on many websites on the Internet, including Apple.com. Of course, you can't go overboard with reflections in an attempt to keep up with web2.0 styling trends, but it's worth noting that sometimes reflections can give a presentable look to some boring element.
Reflection of a three-dimensional object
What if your object is complex? For example, what if our object is a box?
If we go through the steps of turning the object over, it can lead to disaster. This will give us a completely terrible reflection.
In general, flipping a box is much easier than flipping text. You don't even have to transform anything, you just need to duplicate the box layer and place the boxes on top of each other.
Next, we apply a mask and reduce the display level and thus we get a perfectly reflected box!
This trick works with many shapes. For example, the iPhone photo at the very beginning of the article can be easily reflected using this technique. Next, you only need a little processing to get the correct reflection lined up. All modification will take a few seconds.
Displaying a photo of the product
And now, I can already hear exclamations: “Not so fast!” What are the chances that you will ever have to make a reflection of an old flat box? Someday this may happen suddenly and, in addition, it is much more likely that you will need to take a reflection of a product photo or something more complex.
This is exactly the problem I encountered recently when I was designing dog food ads. See what happens if we apply this technique to the actual product photo.
As you can see, the image on the box spoils the whole effect. It should be upside down. We will have to implement this to get the correct reflection.
Keep in mind that Photoshop has many 3D utilities that can help you in this situation. Once you've created a 3D object, you can easily move it around as you please. However, you won't always have time to create 3D objects, which is why it's important to know how to effectively simulate the 3D effect.
The first thing you need to do is flip the image vertically.
Next, press CTRL and click on the layer preview to create a selection of the object. While holding down the ALT key, deselect the sides of the box so that only the front part remains selected.
With this selection active, do Free function Transform (CTRL+T) and then, while holding CTRL, grab the middle pointer in the image below and drag so that it is neatly moved to the bottom of the main box.
Now do the same with the remaining sides of the box. Here, be sure to only select the sides of the box and use the middle left indicator when selecting. This will allow you to create the perfect reflection of the box. Now you might be concerned about the bottom part of your reflection, because here we have everything mixed up.
The good thing here is that you can completely ignore this point. Don't forget that we'll have a fade effect here, so the bottom won't even be visible.
This is what the final version looks like. Not so bad considering this complex shape and the fact that it only took a couple of minutes. Once you get the hang of it, it will take you much less time.
A little about blending modes
It's definitely worth noting that when working with reflections in Photoshop, you shouldn't stick to the default blending mode. Experiment. Try it different modes and see how they will affect the reflection.
Each reflection you create may contain different colors, and therefore some specific mode mixing may work much better than standard.
If you're looking for some fun, you can even try doing two takes of the reflection with different settings mixing modes. This sometimes helps to get a more realistic image of the reflection.
Conclusion
IN last years reflections were used quite often. The purpose of this article is to help in the implementation of competent reflections, separating yourself from painful unnecessary tasks and operations. Remember that reflections in a design should not be used so often, which also applies to other effects (shadows, gradations, framing, etc.).
You must be able to determine when reflection should be used and when it will be unnecessary. You should also be able to create reflections like simple elements, and complex elements.
Mirror image in graphic editor Adobe Photoshop classified as special case arbitrary transformation. However, in several sections of the editor menu there are two separate lines with commands for mirroring the image in two planes (horizontal and vertical). There are several ways to access these commands.
You will need
- Graphic editor Adobe Photoshop
Instructions
Expand the “Image” section in the graphics editor menu if you want to mirror the entire document, including all graphic, text layers, masks, etc. In this section, go to the “Image Rotation” subsection, where you will find two mirroring commands - “Flip Canvas Horizontally” and “Flip Canvas Vertically”. Select one of them, and Photoshop will carry out the necessary transformations on all layers of the document.
Photoshop" class="lightbx" data-lightbox="article-image"> 
Click the layer you want in the layers palette if you want to mirror only its contents, and not the entire document. Then expand the “Editing” section in the menu and go to the “Transform” subsection. It contains more transformation tools than were listed in the corresponding subsection in the “Image” section, and the “Flip Horizontal” and “Flip Vertical” commands you need are placed at the very end of the list. Click the desired one and the image in the selected layer will be reflected in the corresponding plane.
Can be used Alternative option action described in the previous step. To do this, you must first select the layer that you want to mirror by clicking the mouse. Then you need to press the M button on your keyboard to turn on the Rectangular Marquee tool. This can also be done by clicking on the corresponding icon on the toolbar. Then right-click the image and in the drop-down context menu select " Free transformation" A frame with anchor points will appear around the outline of the image of this layer, but you do not need to do anything with it, but just right-click the image again. This time the drop-down menu will contain all those items that you saw in the “Transform” section on previous step, including the searched “Flip horizontally” and “Flip vertically”. Select the command with the desired mirroring direction.
Photoshop" class="lightbx" data-lightbox="article-image"> 
When working in graphical Adobe editor Photoshop often needs to flip an image. Depending on the properties of the document being processed, as well as the type of transformation required (vertical or horizontal), the actions that need to be performed to solve this problem will vary.
You will need
- - Adobe Photoshop - original image.
Instructions
Load the image you want to flip into Adobe Photoshop. Press Ctrl+O on your keyboard or click on the "Open..." item in File section main menu of the application. A dialog will be displayed. Go to the directory with the required file and select it. Click the "Open" button. You can also simply drag a file from an Explorer window, folder, or file manager during working hours Adobe area Photoshop.
Analyze the uploaded image. From the Layers panel, find out whether it consists of one or more layers. If there are several layers, view their contents. To do this, first turn off the visibility of all elements by unchecking the checkboxes in the Layers panel, and then, alternately switching between them, temporarily make them visible. Decide whether you need to flip the image in some specific layers without affecting others, or whether you need to rotate the entire image. In the first case, go to the fourth, and in the second, go to the third step.
Flip the entire image. Expand the Image section of the main application menu, select the Rotate Canvas item. Next, select Flip Canvas Horizontal if you want to flip it horizontally and Flip Canvas Vertical if you want to flip the image vertically.
Flip the image on one or more layers. In the Layers panel, set the visibility checkboxes and select the elements corresponding to the layers on which the image should be reflected. Several elements can be selected at once by clicking on them with the mouse while pressing the Ctrl key. Expand the Transform section of the Edit section of the main menu. Select Flip Horizontal or Flip Vertical to flip horizontally and vertically, respectively.
Save the reflected image. In the File section of the application's main menu, select "Save As...". You can also press the key combination Ctrl+Shift+S. In the dialog that appears, specify the required format, as well as the file name and the directory where it will be placed. Click the "Save" button.
Related article
Before we begin, let's set up how Photoshop displays the image to make it easier to work with.
By default, Photoshop displays the image in a floating document window, or tab. But in this case, since we will have to zoom in on the image, it will be more convenient to work in full mode in Photoshop. Once you have opened the image you will be working with, go to the main menu tab View --> Screen Modes --> Full screen with main menu (View --> Screen Mode --> Full Screen Mode With Menu Bar):
You can also change screen modes by pressing the F keyboard key several times. To return to normal, simply press the F key a couple of times.
Step 2: Cropping Unwanted Areas of the Photo
First, let's remove those areas of our image that are not needed to create the effect. In my case, I only want to leave the tree itself, so I'll trim the ground it's on. For these actions, I will select the Crop Tool from the Tools panel. In my example I chose for further work top part Images:
Press Enter to apply the tool's action.
This image is located on our background layer in the layers panel. Duplicate the background layer by pressing Ctrl+J. Now in the layers panel we have two layers, the background one and its copy, and we will work with the copy further.
Now let's change the width of the canvas. At the top of the program's working window, in the main menu, go to the Image --> Canvas Size tab.
This action opens a dialog box that we can use to add extra space to the right of our photo, to do this, set the width to 200% (after first changing the units of measurement from pixels to percentages) and click on the arrow in the “Location” option (Anchor):
If you had default colors set in the color palette (black - foreground, white - background), then the new space on the background layer will be filled with white (i.e., background) color.
Using the Move Tool, drag while holding Shift key, top layer to the right to the edge of the canvas:
Flip the right image horizontally using the Flip Horizontal option of the Transform tool:
Let's merge our two layers using the Ctrl+E key combination, now in the Layers Palette we again have one layer:
Duplicate the layer again using Ctrl+J:
Now we double the height of the canvas, so that the new space is under the image:
Our canvas now looks like this:
And drag the top layer down while holding down the Shift key:
Now let's flip this layer, but this time vertically:
Let's merge these two layers to form a new layer by pressing Ctrl+Shift+Alt+E:
On this moment We have the top layer active, for me it is “Layer 2”. Let's rotate it 90° clockwise. To do this, press the key combination Ctrl+T, then click right key mouse inside the dimensional frame that appears and select “Rotate 90° CW” from the context menu. This is what we get:
Press Enter to apply the transformation action.
Let's cut off the excess. Clamp Ctrl key and move the cursor over the thumbnail of the top layer in the layers panel (a dotted frame will appear around the cursor) and click on the thumbnail:
After that, a selected area will be created around the layer rotated by 90°:
Now go to the main menu tab Image --> Crop (Image --> Crop), after which the layer is cropped:
Press Ctrl+D to deselect.
Changing the blend mode
Currently, the image on the top "Layer 2" completely obscures the visibility of the layers below it. This is somewhat not what I would like. To blend the layers, change the blending mode of “Layer 2” from normal to
Designers often use reflections of objects from various surfaces in their work. Surfaces can be different - mirrors, calm water of a mountain lake or water slightly rippled, glass windows, plastic, a table made of polished wood or a marble floor. And the reflections of an object from different surfaces are also different.
Our eyes can look at an object from above or below, and the reflection of the object will be very different depending on this. The laws of mirror reflections must be known and carefully observed when creating your robots.
We vaguely remember the basic rules for constructing an image from a school physics course. Rays of light falling on matte surface, are reflected at different angles, and we do not see the reflection or see it very weakly. Reflected rays from a smooth polished surface go in one direction, and therefore we see a clear mirror image.
Rays of light are reflected from a mirror surface at angles equal to the angles of incidence of these rays. The brighter the light source, the stronger the luminous intensity of the reflected beam.
The mirror image is located at the same distance behind the mirror plane as the point giving the reflection. Reflections horizontal lines there are also horizontal reflections in the water vertical lines- vertical. The laws of perspective must also be taken into account when creating reflections.
In this article I want to look at the possibility and ways of creating different reflections in Photoshop.
But first, to everyone who has long forgotten school course physicists, I propose to look at several photographs with reflections and analyze the reflection depicted on them.
In photos 1 and 2, the camera is located almost flush with the surface from which the object is reflected. The vanishing line of the image of an object and its reflection is a straight line or a point if the object has a spherical shape (apple in photo 2). The object itself and its reflection in this case have practically same size. Is it possible to create such a reflection in Photoshop? Easily!
In photo 3 the camera is positioned slightly higher, approximately on the centerline of the subject itself. What does the reflection look like? In case of plastic card everything is very simple, the map is flat and located perpendicular to the camera’s line of sight. The distortion due to perspective is insignificant; the reflection can be reduced a little vertically, but if the surface is not mirror-like, then the blurriness or translucency of the layer with the reflection will make this distortion insignificant. We do the reflection exactly the same as in the first case. What if the card is rotated or tilted?
How will the map reflection be positioned? How to make such a reflection? For this purpose, Photoshop has the Transformation feature.
How to draw the reflection of a cubic object, a parallelepiped? Let's look at photo 5.
The image of the cube and its reflection converge along a broken line, the edges are mirrored. You can use the idea from the previous lesson and create separate reflections of each of the faces.
In photo 6 things are even more complicated. The glass is cylindrical in shape and the line of contact between the image and its reflection is a curve. Is it possible to make such a reflection in Photoshop? It’s not as easy as in the first case, but it’s possible!
What about orange? With our eyes we see a slice of an orange and part of the peel, and its outer part, the orange peel, is reflected from the surface.
Let's look at photo 7, a cup of coffee. The level of gaze is higher than the object itself. IN in this case The polished surface reflects that part of the object that is not visible at all in the image itself, namely the lower part of the cup. With a top-down perspective, the image decreases downward and so does the reflection. But the top and bottom of the image and the mirror image are different!
What to do in this case? How to make a reflection? No way! The image itself does not have what should be in the reflection. You can only draw what your imagination tells you using ordinary drawing tools.
A simple example: you are using in your work an image of a table taken by a camera located above the surface of the tabletop, and you want to make its reflection from the floor in Photoshop. It all seems simple - copy, reflect, move one leg to another and rejoice? But the polished floor should reflect the inside of the table, how under the table the legs are screwed to the tabletop! Exactly what is not in your photo at all! Unfortunately, the program is powerless here.
If you really need to do something like this, you can create a separate reflection of all the legs of the table, blurry and translucent, place them as expected, taking into account the perspective, and then draw a translucent something that imitates the reflection of the tabletop from below.
Photoshop is just a program that stores specific set pixels and does not understand which of them belong to the object and which to the reflective plane. The program does not know at what level your eyes are located when shooting or drawing the entire composition, does not know at what distance and at what angle the object is in relation to the plane reflecting it, cannot determine what algorithm to use to construct this reflection, and therefore cannot create it automatically.
Take pictures of objects with reflections, draw them, or use 3D graphics programs.
