HOME | DD
Fiveonthe —
Animated pixel icon tutorial.1
Published: 2011-03-01 13:43:50 +0000 UTC; Views: 124693; Favourites: 5793; Downloads: 1968
Redirect to original
Description
TUMBLR | FACEBOOK | Commissions
/Edit: OMG WHAT THE HECK ;;;;; THANK YOU SO MUCH GUYS!! I got a DD?!!!
This was so unexpected!! Thank yoou for your support guys ;____; And of course thank you for and for featuring it!
Hi guys ^___^
I've re-done my pixel icon tutorial.. there are two parts to this, because it's like, super huge. Haha sorry!!
Part 1 of 2.
Part two is here: fiveonthe.deviantart.com/art/A…
The pixel palette can be found here: www.kawaiihannah.com/pixelart/…
The DA user is:
I've found new methods, ways, tips and tricks that will help you out better than the last tutorial. 
If you think it's hard, give it a try first. I used a tutorial before that was sort of hard to understand, but once I read through it again and again, look where it's brought me 
If you have any questions, anything at all, let me know! <3
FAQ
A note:
PHOTOSHOP: To resize with anti-alias, press CTRL+K (Options/Preferences) and change the option from Bicubic (Smoother) to Nearest Neighbour ^^
-Photoshop CS4: How to change the eraser mode to pencil?
In the tool bar at the top right next to the Brush options is the Mode button with the Pencil, Block and Brush choices for the type of erasing tool.
Photoshop Elements: Where is the pencil tool?
The pencil tool is nested with the brush tool, you can press 'N' to find it. Picture: forums.adobe.com/servlet/JiveS…
Thanks for reading ! <3
Examples
You can see more of my icon collection in my gallery .
Art © Fiveonthe
the old version can be seen here: fiveonthe.deviantart.com/art/H…
Related content
Comments: 1006
xDDDDD Awww, it's hard at first if you don't understand it, but with more practice you will get the hang of it. Is there something I can do to help or ??
👍: 0 ⏩: 0
OMG fiveonthe, this is amazing. But it says that Adobe imageready is discontinued. Which version of photoshop supports animation? Please tell me. I want to create animations too!
👍: 0 ⏩: 1
CS3+ I'm pretty sure.
👍: 0 ⏩: 2
Btw, um on the adobe website it says there is no more CS3+, can you do it on anything else? Please reply
👍: 0 ⏩: 2
Cs3+ means
Cs3 Cs4 Cs5 Cs6 Cs7... etc~ there are plenty
👍: 0 ⏩: 1
Hm, really? Try here, [link]
👍: 0 ⏩: 1
Thanks so much!
👍: 0 ⏩: 0
UGH! All I have is stupid MS Paint. Can't do most of the instructions. U think u can make a basic tutorial for MS Paint??? IK I'm asking a lot, but PLEASE I have so many ideas!
👍: 0 ⏩: 1
You can download Photoshop from Adobe's website for a trial on 30 days.
👍: 0 ⏩: 0
I just made my first icon using this wonderful tutorial. Thank you so much! You described all of the steps so well! And your pixel art is so beautiful!!
👍: 0 ⏩: 1
;;;; Owahh thank you so much, that's wonderful! I love it
👍: 0 ⏩: 0
Awesome Tutorial Thanks~ I just made my first Icon using it and she blinks! (I never thought i could do that haha) woohoo!
👍: 0 ⏩: 1
And I just noticed Aqua lolol xD
👍: 0 ⏩: 0
Thank you very much for this lovely and very useful tutorial!
I just made my first pixel avy thanks to your step-by-step.
Great work!
👍: 0 ⏩: 1
Hehe used it with my icon!
It was my first pixel ever~
Thanks so much
I really adore your art, and especially the fact that you love BIGBANG
👍: 0 ⏩: 1
Wahhh that's awesome!! Lovely pose hehehe~
👍: 0 ⏩: 1
Thank youuus!
That means a lot
You are one of my idols, hehe
👍: 0 ⏩: 0
This is super useful! I have just started with animation and my current icon (piplup winking) is the first of the fruits of my labour. Hopefully using this will make me better
👍: 0 ⏩: 1
Here it is
👍: 0 ⏩: 1
That's awesome!!! I love her hat esp.
👍: 0 ⏩: 1
This was really helpful! I downloaded sai (full and free) and did this =3= I followed your instructions and used one of the poses for reference and I got the icon I'm using right now! 'Twas a great tutorial. I just need to animate, but I'm lazy... :/
👍: 0 ⏩: 1
Glad it helps! >3< That's awesome !! ^^ It's alright, I think it looks awesome for your first icon
Maybe you can make her hand wave or something ??
👍: 0 ⏩: 1
I wasn't really focusing on the amount of colors and stuff, so I guess that's something I could improve on.. and thanks! I made the layers for the animation, I just need to get imageready which i cant find a free download for! the animation is a butterfly flying over onto her hand, then flying off.
👍: 0 ⏩: 1
Which version of photoshop did you get ?
👍: 0 ⏩: 1
With my tablet? Well since I restored my cpu to factory settings, I am yet to have any photoshop right now because Im too lazy to reinstall my tablet at the moment... and its sorta broken... but before I had pse7 which I know how to animate with already(:
👍: 0 ⏩: 1
With Photoshop CS3+ imageready doesn't come with it so it has it's own animation window ^^
👍: 0 ⏩: 0
Hi~ I'm onto the manual animation part. I'm making a group icon though, but it's still animated. Can you explain more on how to make the eyes blink?
👍: 0 ⏩: 1
Aw, awesome 
It depends on how you draw them - if you duplicated the normal eyes and change how it looks, then you make only one layer of eyes visible at a time. To make it simple, just draw the eyes on 3 different layers ^^
~
Set the first frame to 3 seconds. (anything is fine though, depending on how long you want them to keep their eyes open). The NORMAL eyes should be visible here and the other two are hidden.
Make a new frame and set the time to 0.12 seconds. (and again, anything is okay). The HALF eyes should be visible and the others hidden.
Make a new frame and the time should still be 0.12 seconds. The CLOSED eyes should be visible and the others hidden.
Make a new frame and the time should still be 0.12 seconds. The HALF eyes should be visible and the others hidden.
Make a new frame and the time should still be 0.12 seconds. The NORMAL eyes should be visible and the others hidden. ^^ That is basically the blinking animation ^^
So you'll have 5 frames and the first and last will both have open eyes. ^^ Hope that helps
👍: 0 ⏩: 1
It's not even animated yet and dA said that the file's too big...it's 100x50...
👍: 0 ⏩: 1
Has to be under 30kb :C
👍: 0 ⏩: 1
I know...I don't know how to lessen the size...
👍: 0 ⏩: 1
It's a really small amount QAQ It's really hard as well.. try by optimizing by GIF DITHER or less colours, instead of 128 colours, try 32. Or 16. Less animation frames help
👍: 0 ⏩: 1
This helped me so much! I can actually make decent icons now, lol XDD Thanks so much for the helpful tutorial!~
👍: 0 ⏩: 1
Thoose must be the best eyes to use for icons!
👍: 0 ⏩: 1
<= Prev | | Next =>