Technical Slop

Pixel Shuffle

Yet another Tech-Slop first. This is a simple animation tutorial using ImageReady (IR).

Considerations -

I've been thinking about affiliating. I probably won't anytime soon (or be able to find anybody that wants to affiliate with me), but I have been thinking about it. So I decided on using 88x31 for dimensions.

I really like to keep things as simple as possible. There have been times when I've gotten a bit crazy, I do enjoy simplicity when it comes to number of colours used, size, and things. Those that know some of my sigs know what I mean. So, black and white (or perhaps transparent) pixels that turn on and off to eventually reveal something new.

So, what is the best route for shuffling pixels while keeping number of colours down? Difference mode!

Here, check it out to the left.

We have the text "Tech", then a bunch of dots done with Pencil tool set to 3, then the dots set to Difference above the text.

Isn't that that just plain cool? Black in Difference mode does nothing, while White inverts. And it can be layered up with the same dynamics. And the whole time, only two colours will be used. Man, now that's cool.

Quick Note: In the above example, I did a Edit > Fill using Mode: Behind and Black. In my working PSD, there are only white dots and transparency for the random dot layers. I did the Fill in the example to better illustrate the layer. When a layer is set to Difference, black and transparent have the same effect: nothing!

There you have it. Size is set, number of colours, and a complete plan of attack. Woohoo!

Finish setting it up -

For this, I want the text "Tech" and the text "Slop" on seperate layers because those are the elements that I want to shuffle between. I also want a horizontal line across the top and bottom. I also decided on 3 layers of random dots.

7) Random Dots 3 mode: Difference
6) Random Dots 2 mode: Difference
5) Random Dots 1 mode: Difference
4) Text "Slop" mode: Difference
3) Text "Tech" mode: Normal
2) Horizontal lines - white lines across top and bottom
1) Background - pure black.

That's what the layers look like. Everything was done with pure white -- the text, the horizontal lines, and the random dots.

Okay, the random dot layers were done with the Pencil tool with a square brush set to 3. With the layer turned on and set to Difference, I just layed down a bunch of dots at my discretion.

Notice that "Tech" is Normal and "Slop" is Difference. That's because "Slop" is above "Tech" and I want them to shuffle together. Does that make sense?

Animating -

Save the PSD and get busy in ImageReady.

Frame 1: All layer off except for 1, 2, and 3. All that should be visible are the horizontal lines and "Tech".
Copy for a new frame.
Frame 2: Turn on Random Dots 1.
Copy for a new frame.
Frame 3: Turn on Random Dots 2.
Copy for a new frame.
Frame 4: Turn on Random Dots 3.
(Are you starting to see where this is going? I hope so.)
Copy for a new frame.
Frame 5: Turn on "Slop".
Copy (getting too lazy to type it all out)
Frame 6: Turn off "Tech".
Copy
Frame 7: Turn off Random Dots 2 (I turned them off out of order).
Copy
Frame 8: Turn off Random Dots 1.
Copy
Frame 9: Turn off Random Dots 3.

On the last frame, all that should be visible is the horizontal lines and "Slop". Now it's time to do it backwards so it loops.

Copy
Frame 10: Turn on Random Dots 3 (got random on layer on/off again).
Copy
Frame 11: Turn on Random Dots 1
Copy

...and do it all over again until the last frame has "Tech" and one Random Dots layer visible. You don't really need for the last frame to have just "Tech" on it, because the animation will loop back around to the first frame, which is just "Tech" (and horizontal lines).

For mine, I ended up with a total of 16 frames. Talk about tedious, but it's worth it.

Then I set the delay on "Tech" and "Slop" frames to 2 seconds for a dramatic pause. Save the PSD and export an animated GIF. When I exported the GIF, I used 4 colours and transparency, and Matte was set to None. Even though the GIF at this point doesn't have any transparency, I wanted it in the colour table for later use.

(Image Ready is real freaky with me when it comes to later adding transparency to a GIF. If I don't add it now, I might have problems later. I don't know about you, but that's how it works with me sometimes. So I've learned to toss it in as soon as possible.)

Now I have a bitchin' animated GIF in black and white that's ready for tweaking for different uses:

Transparency -

Load up the b&w animated GIF -- not the PSD! For mine, 16 layers and 16 frames, all nice and tidy.

The first thing to do is set the Disposal. Select all frames, right click, and select Automatic. With out doing this, funky things will happen. Try it for yourself if you don't believe me.

Time to get tedious again.

Frame 1, Layer 1
Select all of the black and hit Delete. I used the Magic Wand with out Continuous to do this this. Also, no Anti-Alias and Tolerence set to 0.
Deselect.
Frame 2, Layer 2
Select all of the black and hit Delete.

Et cetera for all Frames/Layers.

When done, save it out as another GIF. Matte set to None and Transparency turned on. There are now three versions: original PSD, b&w, and white with transparency.

Custom colour tweaks -

Load up the white one with transparency. Go to the colour table and changed white to a nice shade of blue. Save it out as yet another GIF.

Load up the white one with transparency. Go to the colour table and changed white to a nice shade of orange. Save it out as yet another GIF.

Tada. Pretty slick all around if you ask me. Sure, no dithering, but that's not exactly a bad thing all the time. With the files I have saved, I can very easily load one up and easily tweak for a variety of applications.

play.fiddle.learn