- Photoshop cc 18 make move and color rectangles how to#
- Photoshop cc 18 make move and color rectangles pro#
The changes required will once again depend on the nature of your image. I use these to make to screen design appear more authentic. The beauty of using a Smart Object here is that you can also use Layers styles and smart filters at anytime and they remain editable. Step 7 - Layer styles & image adjustments Save the changes to your smart object and return to your main file to see your design applied to the screen shape. This will open up your smart object shape in a new tab.ĭrag in your desired screen design & scale/position it accordingly. Double click on the smart object icon on your layer. This allows us to easily change what will display on the screen. We now have our Smart Object screen shape inside our mask shape. Once you are happy, hit return to apply the transform. Once again, zoom in for greater accuracy. Move the corners of your rectangle to match the edges of your shape mask. You can use the Prospective Transform if you prefer but in this example, I found distort easier. Go to the top menu in Photoshop & select “Edit”, then “Transform”, then “Distort”. We now adjust our screen shape to match our mask shape. This will put your screen design inside your screen shape. Then click the hamburger icon again & select “Create Clipping Mask”. With your rectangle shape selected in the layers panel, click on the hamburger menu icon in the panel to open up the options list. So I edit the dimensions of my rectangle in the properties panel to match.
Photoshop cc 18 make move and color rectangles pro#
In my example image, I believe the screen resolution on this old Macbook Pro to be 1400 x 900. Then edit the dimensions to match your required resolution or ratio. Create a new rectangle shape with the rectangle tool (Use a different colour to your mask shape). It is important to create a shape that uses the same aspect ratio (or as close as possible) as the device in your image. This will give much tighter control for an exact match, especially on things like rounded corners. For the best results, I suggest zooming in very close to create your shape.
Select the pen tool to draw a shape over the screen area. Now, we need to create a shape that will serve as a mask for your screen design. Here I have adjusted the brightness & contrast, edited out the app icons at the bottom of the screen and removed the reflection from the black area. If you do make any changes to clean up your image I would recommend duplicating your original layer, so you always have a copy of the original to go back to. Also, any required changes will drastically vary depending on your selected image. I won’t go into too many details for this step, as you can do as much or as little as you feel necessary here. It features Neil and Sean from our marketing team working on a laptop.
In my example, I have an old image from the Evoluted archives. This could be anything from a photo of a mobile device, to a laptop, desktop computer or even a billboard. Step 1 - Choose an appropriate imageįirst, you need an image to which you can apply a design.
Photoshop cc 18 make move and color rectangles how to#
In this blog post I will show you how to apply any UI design to an image of a device in Adobe Photoshop CC.
0 kommentar(er)
