Easy Image Masking with EverWeb

Masking images in EverWeb can be a great time and effort saver for you. If you’re wanting to use only part of an image in your site, masking could be the best option for you. The advantage of masking an object is that you only need to use one image. The alternative to masking would be to crop the image instead. This would result in you creating more image files as you would need a separate file for each ‘crop’ that you want to make. Additional image files will, of course, take more space in your project file and more time in preparing your each crop.

Masking, on the other hand, only uses the single source image and is also a non-destructive way of working image files. If you don’t like the mask that you have created, you can just mask the image then start again. Easy.

However, masking may not always be the right solution for you.

When To Use Image Masking and When Not To…
The Masking tool sits in EverWeb’s Toolbar and has the following advantages:

1. You can use masking on any image on the page
2. You only need to use one image, there’s no need use multiple cropped images in your project file
3. Masking is non-destructive to the original image
4. You can use masking in fixed width page layouts, i.e. center or left aligned page layouts.

However, there are some disadvantages…

1. You can’t use masking if you are using a responsive page layout
2. You can’t mask shapes or other objects
3. You can’t mask images within widgets such as the Image Gallery or FlexBox widget.

Now that we know the ground rules and when and when we can’t use masking, let’s see how masking works in practice…

Masking an Image in EverWeb
Start by drag and dropping the image that you want to mask on to the page if you have not done so already. With the object selected, simply click on the Mask button in the Toolbar. Alternatively, you can use the Format-> Mask menu option. When you have selected the option, the Editor window becomes semi transparent with a clear box appearing against a grey background.

The clear box acts as a window on to your image. You can move this to where you want just clicking and dragging the box around the Editor Window. Use the box’s grab handles to stretch the box to cover the part of the image that you want to mask. Once you have marked out the area that you want to mask, simply click in the grey area to finish.

You mask is now complete. You can now move the masked image around the page and use the masked image’s grab handles to resize it as you want. You can also apply other features to your masked image, such as shape options, as you desire.

If you want to mask another part of the image, simply go to the Assets List and drag and drop the original image on to the page, then mask it again, this time select a different area to that which you chose in the first masked image. This is a great way to reuse an image file that’s already in your site’s project file.

To remove the image mask, re-select the masked image. You will see that the Mask button in the Toolbar is now titled ‘Unmask’. Click on the button and you will see the original image appear in the Editor Window. Alternatively, you can use the Format-> Unmask option.

Conclusions
Masking images in EverWeb is simple using the Mask tool, but is only a tool that benefits those who use a fixed width page layout. If you’re using a Responsive page layout, however, you’ll have to duplicate the oringal image and use crop it instead.