moving heart icon tutorial

[setsuntamew]

Another tutorial straight from the archives (aka, I got access to my LJ graphics journal from 2006 and I'm so glad for it). Sorry for any outdated instructions; please feel free to ask questions :D

We're going to be learning to make the icon below today. YAY! It's for Photoshop CS2, though it may transfer to other versions. I'm not sure if you can do all the text and layer effects in PSP, though. I'm sorry ^^;;



First, I start out with just a single colour. I use mine (0ab1ff) because...yeah, it's mine.



Next, I start adding brushes in white, with everyone on a new layer so I can mess with the opacities. I begin with this one (made by me), with the layer opacity set to 35%.



My icon now looks like this. Definitely needs some sparkles.



I have lots of star/sparkle/glitter brushes, so I don't remember which one is from which set. But it comes from either hybrid genesis, aragwen.net, or Celstial Star. The first one I used was this one, with the layer set to 100% opacity.

→

I wanted some more brushes, so I added this splatter brushes from aragwen.net, with the layer blend mode set to Soft Light.

→

Time for more sparkles! I added this brush next, with the blend mode also set to Soft Light.

→

I felt it needed one more layer of sparkles, so I used this brush (which I know is by hybrid genesis because I use it all the time). The layer opacity is 80%.

→

Done with sparkles. Now it's time for my favourite brush ever - a nice stripe one by pilot on LJ. I use it ALL THE TIME. Seriously ^^;; It's also in white, with the layer opacity at 100%.

→

Now comes the hard part. The heart. The brush is from peach blush (which appears to be gone...wtf.) and it's size 240? 230? I'm not sure exactly which size I used. Anyway, it goes in the middle.



Effect time! First, color overlay. Set it to the same as your background.



Next comes the outer glow. These are my settings:



That layer should be at 60% opacity. yey icon.



Right click on the heart layer, and click duplicate layer. Select 'New' from the dropdown box. Now, go to image size. Resize the image to 65 x 65. Then go to canvas size, and resize it back to 100 x 100. Then, right click on the layer and click duplicate layer. Select the name of your icon from the list (if you haven't saved it yet, it'll be Untitled-[a number]).



Make that layer invisible for now, 'cause it's time for text. I'm using the font A&S Black Swan, in 60pt with Crisp for the anti-aliasing. The text colour is the same as the background and the heart. Now, it would be boring without effects, so let's add those. We'll start with the stroke.



The text is still very plain. We'll add some more to it.



I like outer glow a lot, so we'll add that. These are my settings for it:



I still feel like it needs a little more. Not much, just a little.



Drop shadow sounds like a good idea, so I'll add that. My settings are:



I finally like the text. YAY!



Now for tagging it. I use the font Pixel, 7pt, with no anti-aliasing. It's white with a border in blue. The border is actually outer glow, with these settings:



That layer is now set to 70% opacity. Finally, for the border. Create a new layer and select all. Go to Edit -> Stroke... The settings should be 1 px width and set to Inside for the location. The colour is the same blue as everything else.



And now for animation. WHEE! Transfer your icon over to Image Ready by clicking the button on the bottom of your tools box. Set your first frame to .1 seconds, then create a new frame. Make the smaller heart visible and the bigger heart invisible. Click back on your first frame, and tween the two together. My settings are:



Then, click on the last frame. Tween it to the first frame using the same settings, just choose 'First Frame' from the drop down box. Finally, set the two original frames (frames one and five) to .2 seconds. Tada! Finished!



If anything was confusing, or you just want to show off what you've made, feel free to leave a comment :D

Comments

[thewizardofoz]

I WISH I had Photoshop CS2 to try this. :( Looks awesome.

[setsuntamew]

I know in the past Adobe offered a free download of CS2, but I think they got rid of that? I'll send you a private message with some more info though!

[thewizardofoz]

Thank you! Downloaded it, but unfortunately doesn't open up and saying 'full scratch disk'?

[setsuntamew]

omg I somehow lost track of this comment, I'm so sorry!! The 'full scratch disk' error usually means your hard drive is running low on space, or at least there isn't enough space for Photoshop to perform tasks (thus why it won't open). If that's not the case, I'm not sure why it'd be giving that error :T

[thewizardofoz]

Hey, no worries. I finally got it to dowload, had to delete my Sims games to open on my computer. Now all I need to do is get me a copy or something of ImageReady to do the animation lol. Thank you though.

[thewizardofoz]

Tried it and the tweening, could not figure out the animation or how to see if it animated. :(

[setsuntamew]

For anything with animation/tweening, I'd recommend following the instructions in my newest tutorial, since this one was written in 2006. Some of the ways Photoshop is laid out have changed + I think I did a better job explaining it this time.

However, when you're animating in Photoshop, there should be a play button on the bottom row of your timeline. If you click on it, it'll show you what you've animated :D

[thewizardofoz]

I think I kinda got it now, but I STILL can't figure out how to animate each frame, kinda wanting the text and or circle or both to do what your text is doing. But can't figure out that part.

Lol it be so easier to ask questions if DW had messenger.

[thewizardofoz]

What do you save it as, to keep the animation?

[setsuntamew]

Instructions on how to save animated gifs in Photoshop are in my most recent tutorial.