Layer Masks & Web Design

Layer Masks & Web Design

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.

Video tutorial

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 :)

  1. 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).
  2. Use the Rectangle Marquee Tool (M) to select the area you want to keep
  3. Invert the selection and fill it with the black color.
  4. It looks good, but you’re missing something…
layers-mask1

Select a layer, and click on “Add a layer mask”

All the extra information is still here outside your canvas. If you export this layer with Adobe Generator, you’ll get an unusable image.

If you create a mask with an inverted selection, it looks good in Photoshop. But you'll export a terrible image.

If you create a mask with an inverted selection, it looks good in Photoshop. But you’ll export a terrible image.

The good way

To create a clean classic mask, that will perfectly be exported by Adobe Generator, follow these steps:

  1. Use the Marquee tool (M) and trace the area you want to keep.
  2. With your selection is still active, make sure that your layer is selected and click on the “Add a mask layer” button.
  3. 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:
Add rounded borders to your vector mask

Add rounded borders to your vector mask

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:

  1. Group all the elements you want to center in a group of layers.
  2. Select the group of layers.
  3. 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).
  4. Use the Move tool (V) and the alignment tools will appear.

layer-mask4

 

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

0 Comments

Trackbacks/Pingbacks

  1. John Nack on Adobe : Tutorial: Create clean Photoshop masks for Generator - […] Chaize offers tips for setting up one’s PSD to export assets efficiently via the new Generator […]

Submit a Comment

Your email address will not be published. Required fields are marked *