Friendly Fire


Supplies:

Tube: Enamorte 13-3
Scrap: Love’s Flame
Font: Amazon
Mask: 254, 293, and 267 from Package 6
Water Frames
Exposure Software – EyeCandy 7

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 one I have chosen.

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. 😉

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?

I used 3 masks and 3 papers. This is what my layers panel looks like:

You can merge all of these layers if you like. (except the white fill layer, though…)


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.

It looks busy at the moment, but let’s see how this turns out with a few tweaks.


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.”

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.

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.

Add the same drop shadow you did before. 

Don’t forget your copyright text!


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:

To make a second shadow, click that “+” sign beside the option on the left column.

Now let’s add some fire!


Be sure you have Eye Candy 7 installed.

Highlight the paper layer that is inside your frame.

Right click on the LAYER MASK of the paper layer and choose “Add Mask to Selection.”

Now you will have the “marching ants” around the inside of the frame.

Filter > Exposure Software > Eye Candy 7…

Now click OK.

As you can see, this put the flames on another layer, so you can delete our original “Flames” layer that we created. This layer was simply a placeholder for the filter to do it’s magic.

Select > Deselect


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.

First, let’s start by putting the flame in a group of it’s own.

Highlight the layer. Layer > Group Layers. This will seem clunky at the moment, but it works wonders for keeping your tag organized for later.

Double click on the name of the fire layer. Rename it to just “Fire” so we can keep up with the copies better.

There are 25 of the “Water Frames” that you downloaded at the beginning of the tutorial, so we will need 25 of the “Fire” layers. So duplicate your “Fire” layer 24 times.

That is a whole lot of layers…

Highlight the bottom “Fire” layer. (this should be the original “Fire” layer)

Filter > Distort > Displace…
(this is a default PS filter, so no need to download anything)

When you click the OK button, navigate to where you saved the Water Frames folder. Choose the Water-1.psd

You won’t see much happening, yet.

Highlight the “Fire Copy” layer in the layers panel.

Filter > Distort > Displace…

This time choose the Water-2.psd

Repeat this in order for all of the Fire copies. The MUST be in order.


Now that your fire is done…

On the right side of your animation pallet, click the 4 horizontal lines.  Choose the option that says “Make Frames from Layers.”

Now, this made a mess of things, didn’t it?? LOL!  But no, not really.  You will see that it created a frame for every layer in your tag.  And that’s ok!

Click on the first frame in the animation pallet.  At the bottom of the window, there is a trashcan icon.  That deletes the frame.  Delete all of the frames that aren’t part of the animation.  You should be left with 25 frames.

You will see that your tag only has one animation layer visible.  You want this!

You can collapse the group again now, so you don’t mistakenly unhide layers in there. Click the little arrow icon beside the group folder in the layers panel.

In the animations pallet, click on the first frame.  You MUST BE ON THE FIRST FRAME to do any kind of editing from here on out.  ALWAYS make sure you are on the first frame.  ALWAYS!  I can’t stress that enough.

Are you on the first frame of the animation yet?  Good.  Now we can continue.

In the Layers pallet, unhide the background layer.

Unfortunately, most of the time, that only unhides the last layer for the first animation frame.  Just hide it again, and then unhide once more.  Photoshop has a strange sense of background layers.  It doesn’t play nice.  Thankfully, the bottom-most layer is the only one you have to click 3 times.  (I sure hope you got all of that.  It is hard to explain…)

Now, one by one, unhide all of the layers to your tag.  DON’T touch the animation layers, though!  Those are already spaced out the way they should be.  Leave those alone.


All the layers unhidden? Great!

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:


I hope you have enjoyed this tutorial! If you would like to have another tutorial with something specific, them please let me know by using the contact form of this site.

+1
2
+1
1
+1
0
+1
0
+1
0
+1
0
+1
0

Leave a Reply

Your email address will not be published. Required fields are marked *