Image Masking in EverWeb

Masking has many different meanings, but is commonly used when describing something that is disguised or concealed. When used in EverWeb, masking is used to hide, or obscure, part of an image.

Masking is useful as you can display just the part of the image you want, without having to crop, or edit, the image itself. Masking keeps the original image intact so it can be used again in your Project. Having one image that you can ‘repurpose’ keeps your Project file size down as you don’t have to have multiple images of roughly the same image in your Project.

Masking and Unmasking Images
EverWeb’s Masking feature is accessed either from the Toolbar or from the Format-> Mask menu. If you have an image selected that has already been masked, the Toolbar button will be called ‘Unmask’. Additionally, the Format menu makes the ‘Unmask’ option available. If you prefer, you can use the Shift+Cmd+M keyboard shortcut to quickly unmask a selected masked object (Note that there is no equivalent shortcut key for Mask.)

Where and When Masking Can Be Applied
Masking is only available for images. You can’t mask other objects such as shapes, text, buttons etc. You can use masking in the Blog Editor Preview window if the image has been drag and dropped into the the Blog Post Preview Window. You can’t use masking if you have have drag and dropped images into the Blog Post Editor Window.

Applying the Masking
To mask an image, drag and drop the image you want on to the Editor Window if you have not done so already, either from its original source, or from the Assets List. All images in your Project should be optimized as best as possible before bringing them in to EverWeb. The image file size should be such that it doesn’t adversely slow page loading times and the file name itself should describe the image itself as this is better for your SEO.

Once the image is on the page, size and position it as desired. You can apply Shape Options to the image e.g. stroke and picture frame borders as these effects will generally be maintained when masking the image. However, it’s always advisable ti check the image once you have masked it to see if you get the effect you wanted. To apply the mask, select the image and click on the ‘Mask’ button in the Toolbar or using the Format-> Mask menu option.

The Editor Window will now have a grey semi-transparant ‘mask’ over it except for a square ‘window’ area in the center that you can see through on to part of the image underneath. This ‘unmasked’ area has a dashed line around it.

Moving and Resizing the Selected Image
When you apply the mask, the underlying image still retains its grab handles. This means that you can still manipulate the image as usual e.g. you can resize and reposition the image, apply Shape Options etc. To move the underlying image, click and hold the mouse button down whilst dragging the image to where you want it. Make sure that you don’t click inside the unmasked area itself or outside of the image’s grab handles.

Moving the Unmasked Area
To move the unmasked area over the top of the masked image, click and hold the centre of the unmasked area and drag and drop it to the desired location. When you have dropped the unmasked area in to place you will see its grab handles again so you can resize the area if you want.

Resizing The Unmasked Area
If you want to resize the unmasked area but don’t see any grab handles around it, click once inside the unmasked area. The grab handles will appear. Resize the unmasked area to reveal as much, or as little, of the image as you want.

Finishing The Masking
When you have finished positioning and sizing the mask, click on an area outside the image. The semi-transparent grey mask will disappear. The only part of the image you’ll see is the area you masked, the rest of the image will not be visible.

Masking The Same Image More Than Once
You may want to mask different parts of the same image. Once you have brought the image in to EverWeb, it is available in the Assets List so to reuse the image a second time, just drag and drop it from the Assets List on to your page. You do not need to drag and drop it again from the original source location.

Removing The Masking
Whilst there’s no visible indicator to show if an image has already been masked, you can easily find out by selecting the image and looking at the Mask button in the Toolbar. If it shows ‘Unmask’ then the selected image is currently masked. To remove the mask simply click on the ‘Unmask’ button. The whole image becomes visible again.

What Happens If The Mask Is Wrong?
If you have not masked the image how you wanted it, just reapply the mask. Additionally, it’s best not to use ‘Undo’ or ‘Redo’ commands as it may lead to unexpected results.

Masking is a handy feature, saving time, effort and Project file space! It’s worthwhile becoming familiar with how it works.

As always, if you have a question about this blog, feel free to comment in the Comments Section below!