First Love


Scrap:, retired)
Mask: I used 517, 536, and 547 from package 11.

Please do not use any of the licensed supplies without purchasing them first.

First off, unzip all supplies.

Open the mask you would like to use.  You don’t have to use the ones I have chosen. (repeat this for all masks you are using. I always use more than one)

Select > All
Edit > Copy
Select > Edit in Quick Mask Mode
Edit > Paste
Select > Edit in Quick Mask Mode (uncheck)
Layer > Layer Mask > Reveal Selection
Layer > Layer Mask > Apply
Layer > Matting > Remove Black Matte
Right click the layer thumbnail in the layers panel
Select Pixels
Layer > Layer Mask > Reveal Selection
Layer > Layer Mask > Apply
Save this as a .psd on your desktop (or wherever you want)

Open a new canvas.  I always use 800×800 pixels.  Be sure your resolution is 72 Pixels/Inch. This keeps your tag at web viewing standards.

I usually add a color fill layer to the tag so it is easily changed should I use it on a different color website.  Layer > New Fill Layer > Solid Color…
White usually works with most websites.

You can drag and drop items straight from your file browser into the canvas. This makes it faster to place items.

Browse to the mask that you just saved in your computer’s file browser.  Drag it onto your tag. Don’t forget to set the Transformation by double clicking the layer on the canvas, or clicking the checkbox at the top of the window. Or you can just hit enter. wink

Next, choose the paper you would like to use on your mask. Drag the paper onto the canvas above the mask, just like before.

Now you have two layers in your layers panel. (because I totally needed to tell you that)

In your layers panel, right click on the paper layer and choose Create Clipping Mask.

That’s it! How easy is that?

Repeat this for your other masks.

Now, time for the elements! This is where the real magic begins.

Instead of telling you exactly where to put what and what size to use, I am just going to show you a animated image of what I did. This way, you can create your own version of the tag without doing exactly what I have done.

When placing your elements, you can transform them again by going to Edit > Free Transform. Just be sure you hold the shift key to constrain the proportions.

As you can see, it is pretty random.  I just place the items where I think they might work.

Now, back to the frame element layer. You have a frame, right? If not, you can skip this part.  We need to add a fill layer to the picture frame.

Highlight the layer UNDER the frame in your layers panel.  Now drop the paper you would like to use onto the canvas.

Grab your selection wand from the tools panel.  If you can’t find it, check out the basics page for a better understanding of the tools layout.

The Selection Wand options should look like this at the top of your window:

Click on the center portion of the frame.
In the upper menu of Photoshop, click on Selection > Modify > Expand…
Expand your selection by 2px.
Now highlight your paper layer. 

Go to Layer > Layer Mask > Reveal Selection.

Now you have a fill to your frame. Easy Peasy!

We definitely want to add some shadows to our elements.  Without shadowing, the tag will just look flat. The secret to a good tag, is a good shadow effect.

Right click (or ctrl+click) a layer and choose “Blending Options.”
I add a drop shadow and an outer glow.  The glow enhances the effect a bit.

Now after you have hit OK, right click the layer again and choose “Copy Layer Style.”
Highlight all of your element layers (click the top one, then shift + click the bottom one) and right click again.  This time, choose “Paste Layer Style.”

You may need to move your elements around a little to keep all of the shadows inside the tag. It looks much better without the shadows cut off at the edges.

It makes a HUGE difference to add shadows:

Now that we have all of that done, time to add the next details.  Tube and text.  Fun!

Choose where you want your main tube to be placed. I have placed mine inside the frame. Highlight the paper layer that is “inside” the frame.

Now drag and drop your tube onto the canvas. Resize and adjust it to your liking. Always make sure you constrain your proportions while resizing.  Hold the Shift key while you drag the corners.

Right click the tube layer and “Create Clipping Mask.”

Add the same drop shadow you did before. 

Don’t forget your copyright text!

Oops! We have a problem. The ribbon goes right over the tube. Not to worry! We can fix that.

Highlight the ribbon layer in the layers panel.

Edit > Puppet Warp…

At the top, make sure it looks something like this:

Now we need to add some anchor points.

First, click where the you DON’T want the element to be moved. This will keep that in place while you drag the rest of it around. The anchor will look like a small dot. You can see it below in the heart of the ribbon.

Now, click in the very bottom of one side of the dangling part of the ribbon and drag it up towards the top. It will take the rest of the bow with it, but don’t worry.

Now click and drag the bottom part of the other ribbon down towards the right side of the frame.

Perfect! now the bow is out of the way. However, we need to sharpen it back up again.

Filter > Sharpen > Smart Sharpen…

Now let’s get some animation up in this bia***.

I kinda want the dangly part of the moon to sway a bit. That seems like a simple enough animation to not take away from the beauty that is this kit!

Highlight the moon layer and make sure it is in a smart object. You can tell if it is a smart object by the little icon on the thumbnail:

If it is not a smart object, then to to Layer > Smart Object > Convert to Smart Object. This is IMPORTANT.

Let’s Puppet Warp this guy, too.

Change the expansion to 30px.

Sometimes I get a little carried away with the anchor points, but I want to make damned sure that things don’t move where they shouldn’t.

You see at the very bottom, where the heart is dangling, I have dragged it a significant portion to the left. This is where I want my “swing” to begin.

Hit the commit button at the top of the screen (the check mark).

Duplicate the moon layer.

If you have your moon in a smart object, go to Edit > Puppet Warp… again.

You will see that the puppet warp anchors are exactly the same as the last one. You absolutely want this.

Now drag the bottom anchor (in the heart) over to the right a bit.

Repeat this 3 more times for a total of 5 moon layers.

Hide all but the original moon layer (click the eye icon next to the thumbnail in the layers panel). We will create the animation after completing the rest of the tag.

Highlight the top layer of the layers panel.

Grab your text tool and add the name you would like.  Position it just where you want it and add a layer style.  This is mine:

That leave us with the non-animated version of the tag!  If you wold like to keep the JPG version, you can save here.  Simply File > Save As…  and choose the jpg option from the drop down box at the bottom of the dialog.

Here’s where it starts getting complicated. We want to add animation!

Make sure your Animation Panel is open.  Window > Timeline (or Animation, if you are on earlier versios)

You will need to click the “Create Frame Animation” button. If you do not see this button, please refer to THIS page for more information about the timeline.

The first frame should already be there. Your first moon layer should be visible while all of the copies are hidden.

Duplicate the frame by clicking the duplicate button at the bottom of the animation panel.

Hide the original moon layer and unhide the first copy.

Duplicate the frame again. Hide the copy and unhide the copy 2.

Duplicate again. Hide the copy 2 and unhide the copy 3.

Duplicate again. Hide the copy 3 and unhide the copy 4.

You should now have 5 frames in your animation panel.

But we need more!

Duplicate the frame again and hide the last moon, and unhide the copy 3.

Duplicate again. Hide the copy 3 and unhide the copy 2.

Duplicate again. Hide the copy 2 and unhide the 1st copy.

Now you should have 8 frames in your animation.

You can click play at the bottom of the animation panel to check out your creation!

Oh, right!  Don’t forget to set your frame delay.

Highlight all of your frames in the animation panel. Highlight the first frame and then hold shift. Click on the last frame. Now all frames are highlighted.

Click on the little arrow beside the time of the last frame. This will bring up a popup for more “delay” options.

Now you will need to save your animation as a gif file.

In your animation dialog, use these settings: