pixel icon - speedpaint

I have a prepared base for pixel icons, with a frame and for double icons, I also made a basis for myself, in which there are elements, when I turn on the desired layer, I will see only one half of the double icon, so as not to lose the integrity of each separately. at the beginning of any drawing is an idea. and sometimes I do a few sketches to figure out how to make it more interesting. I make pixel icons in SAI, and then connect all the layers in Photoshop, turning on and off the animation and motion layers in turn, if any.

I use a binary brush, it has an interesting property that it always captures only the color that is on the layer on which you are painting, but if you poke the eyedropper into an empty area, instead of painting pixels, this brush will erase them, and will have 100% transparency. therefore, when I paint with a pixel brush, I do not use an eraser, but I draw and erase only with this brush. for example, when I made a color base and make a layer with a shadow, this brush will always capture the color of the shadow, not the color of all layers, and erasing the edges, and when I can draw  the color  of the shadow  again I can to paint the shadow with the same color, not mixed. I hope the video can explain you better what I mean. ><

for simpler animation, I make moving parts on different layers. when I start to make a movement on the part, I duplicate this layer and make the first layer almost transparent, and the second layer I begin to change, completing and erasing the pixels in the right direction. I often turn the layer on and off to understand if I managed to get the feeling of the movement I need. sometimes I make a very strong movement in pixels and in this case it will be easier to draw an intermediate frame so that the movement is not so sharp. I make both the first and last frames half transparent and draw a line in the middle. it is convenient in its own way.

when all the details I have conceived have animation frames, then I switch to photoshop. I make a timeline and set the desired speed to switch between frames. and in each frame turn on and off the desired layers. I try to number the animation layers so as not to waste time finding the right layer.

First, I animate the background, because it will be looped and I will duplicate it for the entire length of the clip. then I take turns working with each character. First, I try to make an animation for one part. I'm trying to imagine in what order and how often it is necessary for the character to blink or smile, so that it does not look silly. I often play this action myself to figure out how to do better.

having animated all the characters, I turn on the entire clip to make sure that all the details suit me. when the whole animation is ready, then I save the whole sheet as a version for WEB 

File > export > save for WEB devices

this way I get a cropped icon. I paste this gif into Photoshop and get the whole animation on one layer, I crop the edges at that moment, because if I crop in the source file, then when moving up, my details will be cropped, and on the merged into one layer animation of this error will not be. 

I saved the double avatar to further increase it, so that the edges remain clear - I increase them by multiplying by clear an  number of pixels by 2 or 3. For example, 390 pixels I make 1170. and be sure to choose - clear edges from adjacent pixels. (I have the Russian version, but in the English version the PIXEL should definitely be written in the word!) Next, I save the cropped large avatar so that I can post it on the network later. 

then I go back to the first file. at the beginning I said that I have a base where I turn on the layer and it covers half of my picture, I close half of the picture in turn and save it the same way for the WEB version, then I cut off the part I need, having a hint where the avatar border is located. I also save the resulting cropped icon as the WEB version, just replacing the file. it seems finally that's all! I will attach my base if someone also wants to make a double avatar for themselves.

forgive me for my crooked translation, but I hope that with the video and pictures you will understand what I'm doing.

Thank you all for your attention and I hope that my experience was interesting and useful for you ^^ 

RUS - 

для пиксельных иконок у меня есть подготовленная база, с рамочкой и для двойных аватарок я так же сделала для себя основу, в которой есть элементы, при включении нужного слоя, я буду видеть только одну половину двойной аватарки, чтобы не потерять целостность каждой по отдельности. в начале любого рисунка идет идея . и я иногда делаю несколько набросков чтобы понять как сделать интересней. пиксельные иконки я делаю в сай, а потом соединяю все слои в фотошопе, включая и выключая по очереди слои анимации и движения, если они есть.

я использую бинакулярную кисточку, она  имеет интересное свойство, что всегда захватывает только тот цвет, который находится на слое, на котором вы рисуете, но если вы тыкните пипеткой в пустую область, то вместо того чтобы рисовать пиксели, эта кисть будет их стирать, и будет иметь 100% прозрачность. поэтому когда я рисую пиксельной кисточкой , я не использую ластик, а я рисую и стираю только этой кисточкой. например когда я сделала цветовую базу и делаю слой с тенью, то эта кисточка всегда будет захватывать цвет тени, а не цвет всех слоев, и стирая края, я могу снова навести на цвет тени и продолжить рисовать тень этим же цветом, а не смешанным.  я надеюсь что видео сможет объяснить вам лучше то что я имею ввиду.

для более простой анимации я делаю подвижные части на разных слоях.  когда я начинаю делать движение у детальки, то дублирую этот слой и первый слой делаю почти прозрачным, а второй слой начинаю изменять, дорисовывая и стирая пиксели в нужном направлении. я часто включаю и выключаю слой, чтобы понять, получилось ли у меня добиться ощущения нужного мне движения. иногда я делаю очень сильное движение в пикселях и в этом случае проще будет нарисовать промежуточный кадр, чтобы движение было не таким резким. я делаю оба первый и последний кадры прозрачными наполовину и рисую линию посередине.  это по своему удобно.

когда все задуманные мною детали имеют кадры анимации, то я перехожу в фотошоп. я делаю шкалу времени и задаю нужную скорость для переключения между кадрами. и в каждом кадре включаю и выключаю нужные слои. я стараюсь пронумеровывать слои анимации, чтобы не тратить время на поиск нужного слоя.

сначала я анимирую фон , потому что он будет зациклен и я его продублирую на всю длину клипа. затем я по очереди работаю с каждым персонажем. сначала я стараюсь сделать анимацию для одной детали. я пытаюсь представить в каком порядке и как часто нужно чтобы персонаж моргал или улыбался, чтобы это не выглядело глупым. я часто сама играю это действие чтобы понять как сделать лучше.

сделав анимацию всех персонажей , я включаю клип целиком, чтобы  убедиться что все детали устраивают меня. когда вся анимация готова, то я сохраняю весь лист целиком как версию для WEB 

таким образом у меня получается не обрезанная иконка. я вставляю этот гиф в фотошоп и получаю всю анимацию на одном слое, я обрезаю края именно в этот момент , потому что в исходном файле если я обрежу,то при движении вверх вниз мои детали окажутся обрезанными, а на слитой в один слой анимации этой ошибки не будет.

я сохранил двойную аватарку чтобы в дальнейшем увеличить ее, чтобы края оставались четкими - я увеличиваю их, умножая на ровное число пикселей на 2 или на 3. например 390 пикселей я делаю 1170. и обязательно выбираю - четкие края по соседним пикселям. (у меня русская версия, но в английской версии в слове точно должно быть написано пиксель!)  далее я сохраняю обрезанную большую аватарку чтобы потом разместить ее в сети. 

далее я возвращаюсь в первый файл. в начале я говорил что имею заготовку, где я включаю слой и он закрывает половину моего рисунка, я закрываю по очереди половины рисука и сохраняю точно так же для WEB версии, далее я отрезаю нужную мне часть, имея подсказку где находится граница аватарки. полученную обрезанную иконку я так же сохраняю как ВЕБ версию, просто заменяя файл.  кажется наконец то это все! я прикреплю мою базу, если кто-то тоже захочет сделать для себя двойную аватарку.

спасибо всем за внимание и я надеюсь что мой опыт был интересным и полезным для вас ^^