Here is a quick trick on how to make Gifs! Since Christmas is around the corner I am doing a Christmas card gif as an example. My esteemed colleague Renee Alarid created a Christmas card and we wanted to add some sparkles to it so here is what I did:

First, bring the image into Photoshop.



You’ll also want to download some star brushes.

Deviantart.com has some good resources, but there are many free brush downloads out there.

Create some layers.

1. Create a layer called “stars 1”.
2. Add stars all over the image.
3. Create a second layer named “stars 2”.
4. Place another layer of stars all over the same image but in different areas.
5. Do the same again and add a 3^rd layer called “stars 3.”

On the bottom left hand corner of your screen you will see an area called animation frames, to create a new frame click on the layer looking icon.

Before you select the first frame, use the eye ball to select how you want the animation to look.

For example, in frame one, if you only want to see the stars from layer “stars 1” turn off the layers two and three and for frame 2 turn on only layer “stars 2” and create a new frame for that image.

Make sure to set the seconds at 0.2 on each frame (or the length you prefer) and “forever” so it is on a continuous loop.

Do a “save for Web and Devices” and save it as a Gif.

Finally, to test your Gif, drag the file into your Internet browser.

Check your animation. There you can copy and paste the image code if you plan to use the image in motion.

Enjoy & Happy Holidays Everyone!

You May Also Enjoy Reading:

• Color theory for a visual design: the meaning of color
• Creating Custom Icon Stencils in OmniGraffle – Tutorial
• Modules, widgets, boxes oh my! What do you call a box?
• CSS Sprites – Nettuts Tutorial
• Animation with RaphaëlJS

Omnigraffle was specifically designed to handle a variety of tasks.  It is a user-friendly program that provides shape, lines, arrow, and text tools to click and drag right onto the screen. It provides you with a library of stencil downloads available at Graffletopia which gives you commonly used web elements and icons.

I recently was using Omnigraffle and realized that I wanted to use my own custom icons for a client that was specifically related to fishing. I had already created the custom icons for the client in Illustrator. So I had to figure out how to create my own stencil in OmniGraffle so I would have access to my icons. It was surprisingly easy. If you find yourself in a similar situation here is how to do it and hopefully this is of some help to you!

When you are in OmniGraffle and you have the stencils open click on the little gear icon and a dropdown appears and click new stencil.

A new Template page will appear. I had my Illustrator page open w/ my vector icons I selected one of the icons command c and then command v into the blank template and you just created your first stencil!

Once you have completed this with all of your separate icons or images then go to file, save as and a box will appear where you can name your stencil.

Now to test out your icons, open a new blank diagram, and drag and drop any of the icons onto the page. Have fun resizing and using them in a diagram, work flow info graphic or wire frame. Now you will have that template saved in OmniGraffle so you can use them whenever necessary. Hopefully this simple exercise will be of some use to you I found it helpful even though it is really easy to do.

Related Visual Design Articles:

• CSS Sprites – Nettuts Tutorial
• Modules, widgets, boxes oh my! What do you call a box?
• Color theory for a visual design: the meaning of color
• How To Create an Animated GIF with Sparkle for the Holidays
• Are our websites getting too crowded with social media apps?
• Error Pages and 404 Redirects Can Be Fun!