Log in

Previous Entry | Next Entry

Slideshow icons

Today, we'll be making this icon:

Look like fun?

All you need for this is the ability to use layers and animation. I'm using Photoshop Elements 2.0 for the actual graphics editing (so you don't need anything terribly advanced) and the free demo of Gif Construction Set Professional to set the time of each frame separately. This tutorial assumes you are familiar enough with your program(s) to use these functions.

First, you'll want to pick the large pictures that appear on the right side. From this point on, I'll call them the base pics. I've found that for photographs and pictures that use a lot of colors, you generally don't want more than four. Any more than that, and you'll have to sacrifice too much picture quality for it to fit the LJ icon standard. For pictures that use fewer colors like cartoons or comics, you can use more. Alternately, if you want to apply a color filter or use black and white pictures like sketches, you'll use less memory and can use more pictures that way as well. The base pics need to measure 66 by 100 pixels. The base pics I've chosen are Sora's four power-up forms from Kingdom Hearts II.

Second, we choose the teeny pictures that scroll up the left side, known as the thumbnail pics from this point on. You'll want as many of those as you have base pics. I like to choose one aspect that each picture contains but is different in each picture, which sounds weird, but I can't think of a better way to phrase it. So I'll give an example: in photos, I like to use eyes, because I like eyes, and nearly everyone has a couple of them, and even people who don't have a patch or scar or something equally cool in their place.
Note how each thumbnail serves as a sort of identifier for the base pic it represents. It shows enough of the picture to make it different from the other thumbnails without giving too much of the picture away.

Anyway, back to the task at hand. Thumbnail pics should be 30 by 30 pixels. That's another reason not to try to put too much picture in them; there's not a lot of room. Each of Sora's outfits has different pattern on the sleeve and leg, and I'll be using a sample of each of those as the thumbnail pics.

Third, we'll make the scrolling bar. Decide how many pictures you want to show at any point in time. I'm very fond of the number three because it's just a nice number. One in the middle and one on either side. I like it. Plus, I've already worked out the math for it. If you want more or fewer than three thumbnail pics showing, you'll have to figure out the dimensions and movement on your own. If you want three, you can use this handy template. ("Thank you, Lia." "Why, you're very welcome, class.")

I have my order already laid out in my head because I'm anal that way. I want blue, then red, then yellow, then white because that's the way they go in the game. You can do whatever order you want. Just remember that whatever base pic comes last is the thumbnail pic that comes first.

Then all the thumbnail pics in whatever order you want the base pics to appear, including the last one.

Then the thumbnail pics that go with the first two base pics again. That should fill up your bar.

Flatten that layer. You won't be editing it any more.

Fourth, it's time to put them together. See how we're moving right along? Open a new image that's 100 by 100 pixels. Make each of your base pics a layer. They should be sitting on the far right. Then your scrolling bar should be a layer on top of them. The top left corner of your bar should meet with the top left corner of the new image.

Now, we get to the part that's completely optional, but I think it adds a really nice touch.

Fifth, we want to desaturate the top and bottom thirds of the scrollbar. That's the nifty part where only the middle is in color. The easiest way to do this is make a new layer at the far left on top of the bar with just this:

It should look like this:

Now, change the layer visibility from "Normal" to "Saturation". It should look like this:

I don't know if this works on all programs. I figure it probably does on most. If it doesn't on yours, I'm sorry.

Sixth, we want to further set apart that middle third of the bar. I just add this as a new layer, left center:

It's effective in setting apart that middle section and simple to conserve space. So now you have this:

Back to the required part for this particular icon.

Seventh, it's time to start animating. The base pic you want is the one that goes with that middle thumbnail pic, so make all the other base pic layers invisible. Flatten the image and copy it to a new image. This will be the first frame of your icon.

Now, go back and undo the "Flatten Image". Click on the layer with the scroll bar and move it up 11 pixels. Flatten it and copy the layer to the image where you copied the previous one. This will be the second frame of your icon.

Do this twice more. You should now have a layer where a complete thumbnail pic is in the center square instead of part of one and part of another. For your next frame, instead of moving the bar up again, find the base pic that goes with the thumbnail pic that's now in the center and make it a visible layer. Flatten the image and copy it over. That should be the fifth frame of the icon.
I do it this way so that there's a tiny pause between the time that the thumbnail pic gets to the center and the time the base pic pops up. It gives it a cause-and-effect feeling -- like because the thumbnail pic is in the center, that base pic will come up. I think it makes it transitional, a little smoother.

Anyway, continue like this until you get to the end of the bar. You should have a frame that looks exactly like your first one, which is where the perfect loop comes in. You don't need any repeats. That's how you know when to stop. You should have 16 frames total.

Ninth (and finally), save it, and be sure to check "Animate" and "Loop". Adjust the number of colors used until it's less than 40kb total (or whatever the rules are for where you plan to use it). The frames should be timed like this (in 100ths of a second):
-- 150
-- 10
-- 10
-- 10
-- 150
-- 10
-- 10
-- 10
-- 150
-- 10
-- 10
-- 10
-- 150
-- 10
-- 10
-- 10

If you don't want the bar going up the side, you can have it along the top or bottom moving 11 pixels to the left instead like this:

If you only have three pics, you can move the thumbnail pic border and saturation layers and leave the bar still to get this effect:

If you only want to use one base pic, you can fit more thumbnail pics, like this:

You can also apply various effects to the the bar like a filmstrip:

Edit: I thought I'd add this example as well. If you mess with the dimensions of the pictures, you can play with transparency. In this one, the scrolling bar is the same size, but the base pics are 100 pixels by 49 pixels. You can also put an effect on the thumbnail pic border. Here I applied one of the chrome layer effects from Photoshop Elements. Keep in mind, though, that space is an issue. It's difficult to find effects that work because the border isn't that wide.

Just so everyone knows, this is my first tutorial. I did it because I posted a bunch of Harry Potter, X-Men and Narnia-related ones at my icon journal iconnaissance and people kept asking about them. I got a bunch of requests and then I got busy and thus very bad at filling them. I tried to make it easy, so I'm sorry if I failed and it's all WTF? or if I overachieved and it came off as condescending. Feedback and credit are always appreciated. Also, I'd love to see what you guys used this for if you'd like to comment with a link to what you made. Thanks!


( 48 comments — Leave a comment )
Feb. 1st, 2007 08:07 pm (UTC)
*whistles* nice! i will be using this sometime soon ^^ thanks! added to mems
Feb. 1st, 2007 08:13 pm (UTC)
What a wonderful tutorial! The icon about Fleur, Viktor, Cedric and Harry from GOF is one of my favourites (I've got it lots of time ago I didn't remember where) and now I'm so glad to know what to do something like :D Thanks
Feb. 1st, 2007 08:26 pm (UTC)
Oooooo saving to mems!! Thank u! :)
Feb. 1st, 2007 08:58 pm (UTC)
Saving to da mems! Love the idea!
Feb. 1st, 2007 09:26 pm (UTC)
I'll definitely be giving this a try - thank you very much.
Feb. 1st, 2007 09:46 pm (UTC)
Mem'ed for later usage.

Thanks for sharing! :)
Feb. 1st, 2007 10:16 pm (UTC)
Neat idea! Definitely meming it for future use, thanks!
Feb. 1st, 2007 10:25 pm (UTC)
def. adding it to my mems and trying it out later on
Feb. 1st, 2007 10:31 pm (UTC)
Wow that's a great tutorial. I'll have to try it out this weekend. :0)
Feb. 1st, 2007 10:58 pm (UTC)
Awesomeness! I'll be adding this to mems!
Feb. 1st, 2007 11:05 pm (UTC)
Anazing icons and a wonderfully written tut...adding to mems too
Feb. 2nd, 2007 02:23 am (UTC)
This is awesome! Totally meming this and trying it out in a bit. :)
Feb. 2nd, 2007 05:00 am (UTC)
Replying to myself but here's what I came up with. :D I sped it up a bit on the base pics. Don't know why, just felt like it I guess. :)
Feb. 5th, 2007 05:41 pm (UTC)
That's awesome. <3 for Disney World. Totally makes me want to go. Excellent choice of pics, too. All pretty and night-time-y.
Feb. 2nd, 2007 02:50 am (UTC)
This is AWESOME!!! I'll try it over the weekend. ♥

One question though, are the animation bits translatable to ImageReady? I'm not sure I want to be bothered to download another graphics animation editing program. v^_^0 Thanks!
Feb. 5th, 2007 05:44 pm (UTC)
I'm sorry, but I have no idea. My knowledge of ImageReady pretty much extends to the fact that it exists. I'm sure it is, though, because I use a pretty old version of Photoshop Elements, which is pretty basic as far as graphics editing programs go. Elements is like Photoshop for dummies, made for just basic stuff.
Feb. 2nd, 2007 03:13 am (UTC)
this just rocks!! going to try it later!! TOTAL love to the x-men!!
Feb. 5th, 2007 05:45 pm (UTC)
Woot! Love X-Men so much.
Feb. 2nd, 2007 05:51 am (UTC)
I've never seen this kinda icon before. It's great! Def. going to try it.
Feb. 2nd, 2007 07:30 am (UTC)
This is very complex, but great! I think i will try this. Thank you !
Feb. 2nd, 2007 01:54 pm (UTC)
Thanks for the tutorial, already started using it.
Feb. 2nd, 2007 01:54 pm (UTC)
I think I'll try this later. Will add to mems and will credit.
Feb. 2nd, 2007 07:23 pm (UTC)
gr8 tutorial i'm sorta new to makin animations and stuff and iwas wonderin how do you flatten a layer?
Feb. 5th, 2007 05:47 pm (UTC)
On the program I use, there's a "Layer" menu with the option to "Flatten Image". In your program, look for something that includes the words "Flatten" or "Merge" or something else that would imply layer combination. Check help. I love help. Also, icon love.
Feb. 7th, 2007 02:35 pm (UTC)
thanx, by the way sry to ask but do u know how to get a scrolling bar 4 the icons
Feb. 2nd, 2007 11:46 pm (UTC)
That's cool. :D
Feb. 3rd, 2007 03:32 am (UTC)
love this concept....
it's amazing.
wish i had image ready....
Feb. 3rd, 2007 09:49 am (UTC)
I can't even tell you how much I love this tutorial, and the icon I came up with =)

Photobucket - Video and Image Hosting

Could you tell me a way to put text on this? I tried to, but it would only stay on one layer ;.;
Feb. 5th, 2007 05:40 pm (UTC)

See? It is possible. You actually have to put the text on each layer in the same spot. I think the easiest way to do it would be to make a text layer, and in step 7 when you're going through and adjusting and flattening the image to make each frame of the final icon, have that text layer there on top to merge with it each time. I'm not really sure how to explain that better, so feel free to save this one and open it up in your program to see how each layer should look.
Feb. 3rd, 2007 10:47 pm (UTC)
I've given this a go and it's wonderful, I'm off now to try various options - thank you!
Feb. 4th, 2007 01:35 pm (UTC)
Photobucket - Video and Image Hosting

made this with GIMP :)
sadly, it's slightly above 40kb and right now i can't figure out how to fix it without deleting frames, but ahhh whatevs! i made it and im proud of myself.

added to memories!
Feb. 5th, 2007 05:59 pm (UTC)
Awesome. The program I have the link to above, GIF Construction Set Professional, has a compression function you might try. :)
Feb. 4th, 2007 07:38 pm (UTC)
omg that is f-ing awesome! I love you! I will be trying this one today. *added to mems* Thank you!!!!
Feb. 6th, 2007 04:28 pm (UTC)
Adding to favorites, definitely using it soon!
Feb. 10th, 2007 08:10 am (UTC)
ty =] i came up wit this:

Mar. 24th, 2007 04:45 am (UTC)
I know this was ages ago, but I forgot to comment to tell you how awesome that is.
That's awesome!
'K, I'll go now.
Mar. 24th, 2007 04:55 am (UTC)
Haha noooo, thank YOU! ^_^
Feb. 18th, 2007 12:56 am (UTC)
Can this be done with Photoshop 7 or Paint Shop Pro 8 & 10
Mar. 24th, 2007 04:46 am (UTC)
Sorry for not replying sooner, I know you asked this ages ago. I honestly don't know, but I think so because the functions I used are pretty basic.
Mar. 25th, 2007 01:22 am (UTC)
I tried and I was tryint to past the small piccs into the bar square template in photoshop and It will not work. Can you pm me or help me with this problem?
Mar. 26th, 2007 07:30 pm (UTC)
Re: Um...
OK, I've got a friend w/ PS7 who has sportingly agreed to try this tutorial. I'll let you know what we find out.
Mar. 27th, 2007 09:50 pm (UTC)
Re: Um...
Ok. Well, can you let me know when it works this week hopefully?
Mar. 26th, 2007 08:08 pm (UTC)
Rock on; this is an awesome tutorial!
Apr. 23rd, 2007 12:32 pm (UTC)
that's great. worked pretty well for me in image ready :)
Jul. 24th, 2007 08:34 pm (UTC)
I saw this and d to try it. Using PS7, it came out pretty well. Just a few things personally I need to work on.
^_^ Thank you for showing us this!
Jul. 26th, 2007 10:45 pm (UTC)
This tutorial is awesome!

Here's my attempt:
Aug. 15th, 2008 02:38 am (UTC)
Just found this tut and thought I would share what I came up with

Doctor who Doctor who

Dec. 22nd, 2008 08:08 pm (UTC)
This tut is awesome! I've always wondered how people do icons like these, now I know! Adding to my mems, thanks a ton :)
( 48 comments — Leave a comment )

Latest Month

July 2017


Powered by LiveJournal.com