SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop ImageReady Animation Christmas Tree with Blinking Lights

Christmas Tree with Blinking Lights

With Christmas coming, I thought it would be cool to create a tree that has blinking lights on it. This will be a simple Christmas tree without a lot of texturing.

Begin by creating a new document 240 X 400 pixels. Next we will create a few new layers. Select Layer/New/Layer and name it "Trunk". Repeat this process creating a "Tree" Layer and one that is called "Blue Lights". Later we will also create layers for yellow and red lights, but we will duplicate the blue layer to save time. The layer order is important. At this point your layer stack should look like this.

image 1

Making sure that the Tree layer is highlighted, select the Custom Shape Tool (Hotkey U). Then choose the triangle shape from the Custom Shape Picker. If you don't see a triangle, use the drop down menu and select "All".

image 2

image 3

Also make sure that your paths button is selected.

image 4

Now drag your mouse until you get a triangle with a Christmas tree looking shape to it. It is best to drag from the bottom left or right so that it is easier to center your tree on the document. Make sure to leave a little room on the bottom for the trunk.

image 5

On the layers window, click on the paths tab, then right click on the work path and choose Make Selection. Feather radius 0 pixels. Your triangle should now be a selection and have the dancing ants border.

image 6

Hit the Edit in Quick Mask Mode button (Hotkey Q). You now should have a pink background indicating that you are in this mode. Select Filter/Brush Strokes/Sprayed Strokes. Set the stroke length and spray radius to 10. Set stroke direction to right diagonal. Hit the Q key to exit the quick mask mode. Select a shade of Christmas tree green for your foreground color tile. I used #009933. Select Edit/Fill/Foreground Color and click OK. Hit Ctrl+D to deselect. You should now have something like this.

image 7

Highlight the Trunk layer, and grab the Rectangular Marquee Tool (Hotkey M).

image 8

Drag the mouse to create the trunk. Choose a color of brown for your foreground color tile, and fill the selection as we did with the tree. I used #663300. Hit Ctrl+D to deselect. You may need to move it a bit to center it.

image 9

Now we need to create some light balls. Making sure that the Blue Lights layer is now selected, grab the Elliptical Marquee Tool and make a small circle. Hold the shift key down while dragging the mouse to constrain the shape to a perfect circle. Select a shade of blue for the foreground color and fill the circle. Hit Ctrl+D to deselect. Remember we are trying to make lights here, so keep that in mind when you are making this ball as this will be the size of all the rest. I am going to add a little bevel and emboss to the ball to give it some depth. Select Layer/Layer Style/Blending Options to bring up the Blending Options window. Here are the settings I used for bevel and emboss.

image 10

image 11

Now select Layer/Duplicate Layer and name it Yellow Lights. Duplicate that layer and name it Red Lights. Now highlight the Yellow Lights layer, and move the ball somewhere else on the tree. Open the Blending Options window again. This time we are going to the Color Overlay area. Double click on the color tile, and choose a shade of yellow. Do the same thing for the Red Lights layer using a shade of red.

image 12

image 13

Now, going back to the blue layer, duplicate this 3 times. That will give us 4 blue lights total . Click on each layer and move the lights around the tree. Once you have them where you want them, you need to merge all these layers into one to keep things as simple as possible. Turn off all of the layers except the 4 blue light layers. Click on the little eyeball on each layer that you want to turn off. On the layers window, click on the flyout menu arrow and select Merge Visible. Now all of your blue lights should be on one layer.

image 14

Repeat this process for the yellow lights, and again for the red lights. Rename each layer back to their original names, Blue Lights etc. You may want to create all of your light layers first so you have control over the placement of the lights. Once you merge a layer, all the lights on that layer will move together. With any luck at all you will have something like this.

image 15

Now we have to make the glowing frames of each color before we can create the blinking animation. Duplicate the blue lights layer, and name it Blue Bright. Making sure you have this new layer highlighted, open the blending options window. We are going to be using the outer glow section this time. On the color tile, select a shade of blue, and use the settings shown below. Repeat this process for the yellow and red lights using yellow and red on the outer glow section.

image 16

Now that we have all or our frames we will need for the animation, we need to jump over to ImageReady. Hit the jump to ImageReady button.

image 17

Once in ImageReady, if you don't see the animation window select Window/Animation. Now go to the layers palette, and turn off the layer Blue Bright, and Yellow Bright by clicking on the little eyeball on those layers. Leave all other layers on for now. You should see your first frame, and it should have the red lights looking bright.

image 18

From the flyout menu in the animation window select New Frame.

image 19

Turn off the Red Bright layer, and turn on the Yellow Bright Layer. Now you should have a second frame showing the yellow lights looking bright. Add a new frame, turn off the Yellow Bright Layer, and turn on the Blue Bright layer. You should have 3 frames now, one with the red lights bright, one with the yellow lights bright, and one with the blue lights bright.

image 20

At this point you can hit the play button to view your animation. It will probably be a very quick crazy blinking action, which maybe you like. If you wish to slow it down, increase the time each frame stays on. At the bottom of each frame it shows a time. Mine says 0 sec as you can see in the picture above. Use the drop down menu and change the time. If you control click each frame, it will select all of them, and when you change the time on one, it will change the time for every frame. I liked mine better at .5 sec, and here is how it looks.

image 21

Now you will need to save your animation. It will need to be saved as a GIF file. Make sure your your Optimize window is open. To do this, select Window/Optimize. I set mine to GIF 128 Dithered as shown below.

Christmas Tree with Blinking Lights

Now select File/Save Optimized As. Choose your folder and a name for your file. Your new file is now ready for the internet. Remember, you can't view an animated GIF in Photoshop.

subscribe to newsletter