Home Sign Up!

Browse Community Submit

All Art Craft Food Games Green Home Kids Life Music Offbeat Outdoors Pets Photo Ride Science Tech

Animated LED Sign in Photoshop

by lookatmygrlyfont on June 22, 2007 Table of Contents Animated LED Sign in Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Intro: Animated LED Sign in Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 1: What you need. (Don't Skip this step.) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . File Downloads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 2: Plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 3: Start making your message. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 4: Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 5: Pre-Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 6: Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 7: Saving . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Related Instructables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 2 2 2 2 3 4 4 5 5 6

http://www.instructables.com/id/Animated-LED-Sign-in-Photoshop/

Intro: Animated LED Sign in Photoshop

In this instructable you will learn how to make an animated LED sign in Photoshop. Dont worry ill give you the a PSD of the template in multiple colors. Oh Yeah I made this one for my girlfriend.

Image Notes 1. my sign

Step 1: What you need. (Don't Skip this step.)

You will need the following: -Mac/PC -Photoshop -The template pack below (red, blue, and green) -Patience... lots of it.

File Downloads

ledsign.zip (205 KB) [NOTE: When saving, if you see .tmp as the file ext, rename it to 'ledsign.zip']

Step 2: Plan
You really don't want to make our message very long or you could be working for quite a while. My I love you thing took ~45 min but i had to make the templates and stuff. So plan on at least a half hour.

Image Notes 1. my sign

Step 3: Start making your message.

To make your message you will be using mostly the paint bucket tool. First open up the template color of your choice and the dot color. Then load the lighter of the two colors with the eye dropper tool. Then you can start making your first letter. My first letter was an "I" so I put two dots on the top and bottom. Then save it as number 1.jpg or something like that. MOVE YOUR LETTERS TWO DOTS TO THE LEFT FOR EVERY IMAGE.

Image Notes 1. two files of the same color

Image Notes 1. loaded in with the eyedropper

http://www.instructables.com/id/Animated-LED-Sign-in-Photoshop/

Image Notes 1. first two

Step 4: Next
Everyone you make save it as a different number. You will have to turn the lighter colored "LEDs" back to dark so load the darker color. To do that load the darker color in with the eyedropper and use the paint bucket to return them to the original state.

Image Notes 1. darker selected with eye dropper tool

Image Notes 1. returned to dark

http://www.instructables.com/id/Animated-LED-Sign-in-Photoshop/

Step 5: Pre-Animation
You should have 20+ images. Open them all in Photoshop. Then close and reopen the the template image. After its open go to the layer menu > merge visible. Find the image called 1.jpg (or whatever you named it) and press command(mac)/control(windows) + A to select all then command(mac)/control(windows) + C to copy it. Then go back to the template image and press command(mac)/control(windows) + V to paste it as a new layer. Continue this for every image until you have all of the images in one side the template document.

Image Notes 1. on top of each other

Image Notes 1. lots of images

Step 6: Animation
So now go to Windows > Animation. Then go to the drop down arrow and click make frames for layers. After that change the time to .2 seconds. Hit play and see if its how you like.

Image Notes 1. that one

Image Notes 1. time

http://www.instructables.com/id/Animated-LED-Sign-in-Photoshop/

Step 7: Saving
To save to to file > save for web. Then just hit save and it pick your location to save it. After its saved you may have to open it in a browser such as firefox to see the animation, so right click on the file and go to open with and chose your browser.

Image Notes 1. my sign

Image Notes 1. save

Related Instructables

Make GIF animations in photoshop (video) by amakerguy

make an Turn the Pope animated GIF on into Palpatine adobe by codykage photoshop by The nerdling

Making animated GIF's in photoshop by killerjackalope

How to Remove Animated/custom Wires from your emoticons by Claymation ti112 (video) by rfsclaymations

http://www.instructables.com/id/Animated-LED-Sign-in-Photoshop/

Comments
50 comments Add Comment

robot+more says:
great 'ible i used gimp and unfreeze to make mine

Jun 29, 2010. 7:06 PM REPLY

amjadur says:
>>>Ac1D<<<

Jul 6, 2009. 1:32 PM REPLY

amjadur says:
>>>Ac1D<<<

Jul 6, 2009. 1:31 PM REPLY

ander says:

Oct 20, 2008. 1:36 PM REPLY This is like drawing a screensaver frame-by-frame. It'd be immensely more practical just to write a program that lets you type in whatever text you want, then converts it to an animated GIF for you in any format you want. Are there no programmers on this topic? Only graphic artists? Just curious. Sep 12, 2008. 5:55 AM REPLY I aggree with the people that say that MS GIF animator, or any other for that matter will work just as good. After all you aren't using any special effects for the frames. And of course that will be much more easier, I mean it is quite easier to work with such stuff in ms paint and put them up in a freeware animator. I'll show you something: http://i33.photobucket.com/albums/d71/RockingGroudon/blink001.gif It has been some time since I made this animation, and of course I made this in ms paint. nothing fancy, but to make this in photoshop will be so difficult. I mean, yes photoshop is so powerful, but for effects that are so simple, there is no use using a complicated software compared to a normal software. Yes I could have done that in PS, but then the effect would have been totally different. Much more close to reality.

DrCoolSanta says:

sardines454 says:
anyone know how to do the animation part w/gimp?

Jun 22, 2007. 6:53 PM REPLY

DrCoolSanta says:
Do the same thing. And I mean the same thing. Make the frames in layers and export it to gif.

Sep 12, 2008. 5:46 AM REPLY

zachninme says:
Why can't this done using Photoshop in Wine in Linux? It works! Or in GIMP....

Jun 22, 2007. 6:40 PM REPLY

theburn7 says:
It works in gimp, try it out!

Jun 16, 2008. 2:17 PM REPLY

zachninme says:
I don't think you understood what I meant ;-)

Jun 17, 2008. 2:43 AM REPLY

theburn7 says:
oh i did, i am just saying gimp will work, spread the word, yo

Jun 18, 2008. 4:03 PM REPLY

lookatmygrlyfont says:
not sure if it works in GIMP cause i dont use it. I also dont use linux w/ wine so idk. If it works let me know though...

Jun 22, 2007. 6:45 PM REPLY

http://www.instructables.com/id/Animated-LED-Sign-in-Photoshop/

daftpunkelectroma says:
how do u put in the template in GIMP?

Nov 30, 2007. 9:29 PM REPLY

derfman24 says:
you select open with gimp

May 11, 2008. 7:20 AM REPLY

jdisco says:
Probably change the extension to .xcf

Dec 21, 2007. 5:41 PM REPLY

egreen767 says:
So awesome! I made one in photoshop elements.... took me like an hour

Mar 28, 2008. 6:00 PM REPLY

egreen767 says:
You have to click on it and make it larger for it to work apparently...

Mar 28, 2008. 6:01 PM REPLY

twitching_fingers says:
very nice :)

Apr 14, 2008. 8:25 PM REPLY

killas says:
whats drop down arrow? im using photo shop 7.0

Dec 29, 2007. 3:20 AM REPLY

led235 says:
IT'S NOT FREE. you can BUY it for $29.95 or more.

Nov 5, 2007. 2:17 PM REPLY

munchman says:
You can do this with this free software

Oct 15, 2007. 2:32 AM REPLY

ac1D says:
photoshop work with wine. if you want to do this, dont use photoshop. use microsoft with a free .gif images animator. lol!

Jun 22, 2007. 9:00 PM REPLY

lookatmygrlyfont says:
hmm you barley speak english. um no photoshop is 100 times better than anything youll get from M$.

Jun 22, 2007. 9:27 PM REPLY

peter marshall says:

Barley, noun: a cereal grass

Sep 22, 2007. 8:41 AM REPLY

ac1D says:

Jun 23, 2007. 1:30 PM REPLY i agree with you, i totally agree. But, i dont want to be rude, but look.. your led are just little circle, no effect, nothing. This Really look like you used ms.paint. everyone could reproduce it in paint!

lookatmygrlyfont says:

Jun 23, 2007. 2:59 PM REPLY LEDs are circle. Well most of them. when you do better please tell me. Yes sure it needs work. I guess i should just delete this damn thing since everyone is hating on it.

ac1D says:

Jun 23, 2007. 4:40 PM REPLY i know they are circle. take a led and a battery. look at the led when its lighten, look directly at it. its not a flat blue color.

http://www.instructables.com/id/Animated-LED-Sign-in-Photoshop/

lookatmygrlyfont says:
hmm i could add an effect to it to make it look glowing true true..

Jun 23, 2007. 5:27 PM REPLY

amywho says:

May 1, 2008. 4:37 PM REPLY just duplicate each layer. gausian blur. then blend the layers. ac1d... i'm assuming you did something similar?

sardines454 says:
what photoshop ru using?

Jun 22, 2007. 6:55 PM REPLY

lookatmygrlyfont says:
CS3 for Mac.

Jun 22, 2007. 7:20 PM REPLY

sardines454 says:
how much did u pay for cs3? isn't it like 600 dollars?

Jun 23, 2007. 7:12 AM REPLY

ac1D says:

Jun 23, 2007. 4:41 PM REPLY for this led sign , u can use paint, but if your new to graphic, dont get photoshop, try yourself with the g!mp and if it look serious, get photoshop. its what I did, and its what I guess monstly everyone do.

sardines454 says:
Almost =(

Jun 23, 2007. 4:51 PM REPLY i am not new to graphic design i just dont feel like paying $600 when i can gimp for free and it does almost everything the same!

lookatmygrlyfont says:
Photoshop is better than GIMP. I dont think you can do Animations with the GIMP

Jun 23, 2007. 4:53 PM REPLY

Fenwick says:

Jun 23, 2007. 10:37 PM REPLY You can definitely do animations with the GIMP. You just have to do each frame as a layer and save as an animated GIF. Photoshop is definitely better than the GIMP, but the GIMP is free. You can do most of the same effects, it just takes more time. I'd support a download of the GIMP over pirating CS3.

lookatmygrlyfont says:
my cs3 is not pirated.

Jun 23, 2007. 11:00 PM REPLY

Fenwick says:

Jun 24, 2007. 12:25 AM REPLY I'm not saying that you pirated it, I'm just saying that there are a lot of people who are new to graphic design pirate CS3, where it would be a better moral choice to get the GIMP. I wasn't trying to be critical, I was trying to convince others that piracy isn't necessary.

lookatmygrlyfont says:
very true though. you do have a point.

Jun 24, 2007. 7:31 AM REPLY

Ora says:
Did you get the web design suite?

Jun 22, 2007. 11:42 PM REPLY

http://www.instructables.com/id/Animated-LED-Sign-in-Photoshop/

lookatmygrlyfont says:
yes. thats what i mostly do.

Jun 22, 2007. 11:39 PM REPLY

Ora says:
Have you gotten into Action Script 3.0 in the new flash?

Jun 23, 2007. 1:29 AM REPLY

theburn7 says:
The new flash 9 pro that comes with it has actionscript 3.0

Jun 16, 2008. 2:15 PM REPLY

lookatmygrlyfont says:
nope. havent used much flash yet. mostly dreamweaver and photoshop

Jun 23, 2007. 1:39 AM REPLY

Weissensteinburg says:
You could have done that much more easily...

Jun 22, 2007. 7:24 PM REPLY

lookatmygrlyfont says:
so what i worked hard on it for my girlfriend so yeah.

Jun 22, 2007. 6:52 PM REPLY

Weissensteinburg says:
Your way works too, I was just letting you know, that there is an easier way..geesh

Jun 22, 2007. 7:30 PM REPLY

lookatmygrlyfont says:
sorry for being rude :)

Jun 22, 2007. 7:19 PM REPLY

Weissensteinburg says:
eh..maybe I shouldn't have said it so..abruptly?

Jun 22, 2007. 7:58 PM REPLY

lookatmygrlyfont says:
naw its cool. yeah im sure thre are easier ways but haha. its cool dont worry.

Jun 22, 2007. 7:42 PM REPLY

http://www.instructables.com/id/Animated-LED-Sign-in-Photoshop/