Photoshop Tutorial – Using Clipping Masks

One of the most common techniques used in Photoshop is masking. It is used to show or hide different parts of an image, usually based on either a color or shape. Clipping masks are handy when a specific shape area needs to be revealed. We use them often when creating buttons or teaser elements that have rounded corners or special shapes that require an image as a background.

In this tutorial we will demonstrate how to create a set of teaser buttons using the clipping mask technique. We often encounter a page element that has a repetitive design or shape but requires different backgrounds to represent its unique purpose. The main benefit of this technique is that once the mask is created it may be applied to as many layers as needed to accomplish your design goal.

Our example represents a simple teaser element that has three unique categories: dining, entertainment, and fitness. Our site or application would take the user to each specific area once the element is selected. We will now demonstrate how to quickly create this example and show how it scales to as many images as needed.

Teaser Images Clipping Mask

Our first step is to create a new project with our required settings. Since we generally design for the web our image will be sized to 200 x 200 pixels at 72dpi with a transparent background.

New Photoshop Document

Once the image is created, we will create our button shape on the first layer using the “Rounded Rectangle” tool. It is located under the standard “Rectangle” tool, accessible by clicking and holding the small black corner and selecting it from the additional tools list. The radius has been set to 15px which makes for a nice and clean rounded edge. Now that our button shape has been created we will proceed to adding an image to it.

Photoshop shape layer

Although there are many ways of adding an image layer, we are going to go step-by-step. We will manually create a new layer by using the menu: Layer->New->Layer… This will add the new layer above our button shape. Then we will select the new layer and go to: File->Place… This will open up a browser window where we must hunt for our desired image to be “placed” on the new layer. Once it is placed, we will size it appropriately using the handles then we hit the “Enter” key to apply the transformation.

Image placement Photoshop

Now that our image is placed approximately where we want it, the next step is to apply the clipping mask. Our image layer should still be selected so we go to: Layer -> Create Clipping Mask. The result should be an image with perfectly rounded corners. One of the benefits to using clipping masks is that we may now move or re-size the background image as needed and the shape will stay the same! We may now repeat this technique for as many unique images as required. Keep placing new images above your shape layer and they will end up with a similar result.

Multiple layers in Photoshop

We will continue to use this technique to add the titles to each of our unique teaser elements. This is a simple design so we will add a 50px tall rectangle on the lower part of the box. We place this element above our images and our initial shape. Once positioned, we will create a clipping mask once again creating the rounded corners. Afterwards we add a text layer and our desired title to each element, save them out in the format we need and call it a day!

Completed teaser button

Manually add depth of field to an image – Photoshop Tutorial

Depth of field or DOF is a photography term that refers to the distance and focus of an object as it relates to the camera. Good use of DOF will isolate an object drawing attention or focus which naturally occurs to the human eye. For instance, if you hold up an object close to your face, your eyes will focus on it while things in the background will become “blurry”. This tutorial will show you how to apply this technique to a photo that does not have good DOF to begin with making it more “artistic”.

We will start with an image that has even focus throughout the frame. Our end result will have the OmniSpear Go-Kart in perfect focus while the track, barriers, and fans gradually lose focus and become blurry. This will replicate good DOF technique.
Image with even focus throughout the frame

Our first step is to isolate our focus object. This is achieved by cutting out a shape of the object using the pen tool. Our kart is a complex object so precision is required. If you had a picture of a peach or a soccer ball you could just use your lasso or marquee tool. Once the shape is cut out we fill it with solid white.
Isolated object masked

As we determine our focus objects for the image we will fill each of them from light to dark. Lightest will be in-focus while the darkest will become blurred or out of focus. This photo will have five distinct focus objects:  go-kart, barrier with tires, barrier with a fence, fans, and the track.
Focus map objects

Each object is created, shaded and then layered to create a blur-map which we will use to pin-point our focus. This is done by selecting all of the visible layers and copying them to a new channel which we create. This new channel is called “Alpha 1” by default in Photoshop.
Channels window

We now return to layers and de-select our blur-map items. At this point you should only see the original photo. Next is how we make the magic happen!
Lens Blur settings photoshop

Select your photo layer. Go to the top menu and select Filter -> Blur -> Lens Blur… The controls and preview should show your photo as completely blurred at this point. Look at the Depth Map source and select: “Alpha 1”. This will apply your DOF to the photo. If your blur is opposite of what you expected just click the “invert” checkbox. You may need to tweak the radius to keep the image from becoming too blurry, in this example it is set to 9. Feel free to tweak the other iris settings which may create a more desired effect for what you are attempting to achieve.
Image with depth of field manually applied

Once the blur meets your satisfaction, just click the OK to see the processed results. You should end up with a modified image that has a simulated depth of field applied to it!