Adobe has just introduced Adobe Generator for Photoshop CC, a great technology to automatically generate visual assets from Photoshop layers. The big majority of web designers use Photoshop to design web pages. In this post, I explain how to master masks on layers, and make sure that you’ll get a clean export with Adobe Generator. Special thanks to Stéphane Baril for helping me on this topic.
In this video, I show how to create a classic bitmap mask and a vector mask and I explain how to center elements in your page (this tip has nothing to do with masks but it can be useful).
Create a classic mask layer
The wrong way
If you follow these steps, you’ll produce an ugly mask
- Select your layer and click on the “Add layer mask” icon (at the bottom of the Layers panel). It will create a blank mask (white).
- Use the Rectangle Marquee Tool (M) to select the area you want to keep
- Invert the selection and fill it with the black color.
- It looks good, but you’re missing something…
All the extra information is still here outside your canvas. If you export this layer with Adobe Generator, you’ll get an unusable image.
The good way
To create a clean classic mask, that will perfectly be exported by Adobe Generator, follow these steps:
- Use the Marquee tool (M) and trace the area you want to keep.
- With your selection is still active, make sure that your layer is selected and click on the “Add a mask layer” button.
- It will create a clean mask. The mask will automatically hide the information outside the canvas.
Best mask on Earth: the vector mask
My advice is to use Vector Masks as much as possible. They have so many advantages:
- You can edit the shape of your mask with the pen tool
- Add points, remove points, adjust the shape with Bézier curves.
- You can also transform the vector shape without any impact on the quality of your mask.
To create a vector mask:
- Select a layer
- Hit “cmd” (on a MAC) and click on the “add a layer mask” icon (it becomes “add a vector mask” if you hit cmd)
- Then use the Rectangle tool (U) to add a path (make sure that “Path” and not “Shape” is selected in the parameters of the Rectangle tool.
- Then use the Path Selection tool (A) to transform your mask.
- If it’s a Rectangle path, you can add rounded corners. To do so, open the Properties panel of your shape:
Tip of the day – Center elements in Photoshop
To center elements in a page, or in a certain area of your page, follow these steps:
- Group all the elements you want to center in a group of layers.
- Select the group of layers.
- Use the Marquee tool (M) to select the area where you want the elements to be centred. If you want to center the elements in your page, select all (cmd + A).
- Use the Move tool (V) and the alignment tools will appear.