Creating Graphics with Transparency in Photoshop

Photoshop allows us to create graphics that incorporate transparency, which can result in some visually interesting effects for our web graphics. Hannah has asked if we could take a photograph of a dog and make it into the shape of a heart, with a transparent area around the heart. We can do this easily in Photoshop, by making use of masks.

We'll need to create a new document to house our image.

NOTE: If you would like a walk-through of the steps below, watch this videoabout Creating Graphics with Transparency in Photoshop.

Step1. To create a new image, from the Menu bar,

Click File, Click New...

The New Document window opens:

Here we can change our document settings so our graphic will be web-ready right from the start. The first thing we'll do is change the document type.

Step2. To change the type of document we're creating, in the bar across the top of the New Document window,

Click Web

The window contents change, and show us options for creating a web graphic. If you look at the panel on the right, you'll notice that Photoshop has already set the resolution for our new file to 72 ppi. We'll set the size of our new document here, as well as indicate that we want a transparent background.

One thing to note about creating web graphics in Photoshop is that web graphics can now be created on artboards. An artboard in Photoshop is a region in our document that contains artwork that we can then export to a web-ready file format. We can have a number of artboards in Photoshop, each with their own layers and artwork; however, for this exercise, we'll only be using one artboard.

Let's start by deciding on the size of our artboard. Photoshop suggests a number of different sizes for web graphics, but we'll want something a little smaller than what's presented here, as we have a limited amount of space for this graphic in our web document. Let's change our artboard size to 300 pixels square.

Step3. To change the size of our artboard, in the Width field on the right side of the New Document window,

Press & Drag the current value, type: 300 Tab key 300

Next, we'll change the background color of our document. In Photoshop, we can indicate if we want to set a specific color for our background before we start working. By default, the background color is set to white — however, we'd like to have a transparent background.  We can change our background color in the Background Contents drop-down.

Step5. To indicate that we want a transparent background color, in the Background Contents section of the New Document window,

Click, Click Transparent

NOTE: In Photoshop CC 2017 and older, to view the Background Contents drop-down, towards the bottom of the New Document window, Click .

One last thing we'll want to check is the color mode of our document. We can see this just above the Background Contents drop-down. As part of the Web profile, this is set to RGB, as web graphics are typically viewed on a screen. Computer screens of all types use the RGB color mode, combining red, green, and blue light to display colors on our screens. It's a good idea to double-check this setting when we're working with web graphics to make sure that we're using the right color mode for our work.

Step6. To ensure we're working in the RGB color mode, if necessary, in the Color Mode drop-down,

Click, Click RGB

Now that we've made sure all our settings are correct, we're ready to finish creating our new document.

Step7. To finish creating our new document,

Click

A new document opens. Let's start adding the images we're going to work with to our document.

Using the Place Command

To add images to our Photoshop document, we'll be using Photoshop's Place command to import the images. In Photoshop CC, we're given two options for placing images: Place Embedded and Place Linked. Each of these options functions differently:

• Place Embedded allows us to place the entire document into our Photoshop document, and it is treated as a Smart Object. It functions like the Place command did in previous versions of Photoshop.
• Place Linked lets us place a link to an existing file into our Photoshop document, and makes it easier for us to update an image that is included across a range of documents. Place Linked behaves similarly to the how the Place command works in InDesign.

For today, we'll be using Place Embedded, as we won't be modifying the images outside of this document.

Step1. To import the first image, in the Menu bar,

Click File, Click Place Embedded...

Step2. To open the file we want,

Double-Click white_dog.jpg

Our first image appears as a new layer in the Layers panel. Before we place the second image, let's resize and reposition this image so we have the dog centered on our artboard. We can do this easily since we haven't completed placing our image yet.

Step3. To position our cursor where we need it to be,

Point to the upper right corner of the image

Step4. To resize the image,

Press & Drag up and to the right until the dog appears larger

NOTE: In Photoshop CC 2018 and older, to keep the image proportional while resizing it, Press & Hold the Shift key, then Press & Drag up and to the right until the image is larger.

Step5. To move the image so the dog is centered on the artboard,

Point to the image, Press & Drag the image until the dog is showing in the center of the artboard

Step6. Repeat steps 4 and 5, if necessary, to make the dog large enough to take up most of the artboard and to position it in the center.

At this stage, our artboard should look like this:

Now we can complete the act of placing our image.

Step7. To finish placing our image, on the keyboard, press:

Enter

Let's place the second image.

Step8. Repeat steps 1 and 2 to place the file heart.png.

The heart image appears. It's already the perfect size, so we'll finish placing the image without resizing it.

Step9. To finish placing the image, on the keyboard, press:

Enter

Our image should look like the following at this point:

Now we're ready to use the heart to create a mask for our dog image.

Turning Artwork Into a Layer Mask

We'll be using the Layers panel to turn the heart shape into a frame for our image - this process is also called creating a layer mask. Layer masks are transparency adjustments that we apply to layers, which essentially hide pixels from view without deleting them. This means we can return to redefine transparent areas later, because we haven't deleted any pixels.

First, we'll need to prepare the heart graphic for the layer masking process. We'll need to rasterize the heart layer to turn our placed image into a bitmap graphic, instead of treating it as a Smart Object.

Step1. To prepare the heart layer for masking, in the Layers panel,

Right-Click the blank area next to the layer name, Click Rasterize Layer

Our layers are now ready to start the masking process. Let's make sure the heart layer is the active layer before we go on.

Step2. Ensure the heart layer is the active layer in the Layers panel.

Step3. To begin making the mask, in the Menu bar,

Click Layer, Point Layer Mask, Click From Transparency

We now have a mask created from the transparent area around the heart, and the heart layer in the Layers panel looks like the following image:

However, our new layer mask needs to be on a different layer. We'll need to press and drag the layer mask to the white_dog layer. Let's do this now.

Step4. To apply the layer mask to the correct layer, in the Layers panel,

Press & Drag the layer mask to the white_dog layer

NOTE: Make sure that your cursor is pointing at the layer mask before you press and drag the mask to the white_dog layer; otherwise, the entire heart layer will be moved below the white_dog layer.

Our mask is now on the correct layer, and the layer should look similar to the following image:

Let's hide the heart layer so we can see our completed image.

Step5. To hide the heart shape, in the Layers panel,

Click

Our completed image should look similar to the following:

The transparent areas of this image will also be transparent when placed into a website.

Step6. Save the file as dog.psd.

We've completed work on the heart-shaped image - now let's switch gears and create some web graphics in Illustrator.