Освещение - 1-ый Слой.
Прежде всего, Вы должны решить, откуда падает свет - тогда Вы поймете, какие части получают много света (блики) а какие нет (тени). Я решила сделать обычное освещение (как от солнца) из левого угла - это, вероятно, самый легкий способ для новичка!

Теперь, я поступаю весьма странно в подходе к штриховке - я делаю все наоборот D: я предпочитаю делать сначала блики и затем добавлять тени, если они необходимы, но Вы можете добавить тени сначала

Освещение - 2-ой Слой.

Теперь уже видно, что апельсин начинает действительно приобретать объем, поскольку использовано уже 2 слоя света. Заметьте, блик изогнут, чтобы помочь апельсину выглядеть сферическим, а не плоским. И, также, что он больше подсвечен слева, чем справа, потому что я решила, что свет падает из верхнего левого угла. Так же детали листиков стали заметнее, в отличие от предыдущего шага, и теперь их ясно видно.

Освещение - 3-ий Слой.

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

Тени - 1-ый слой.

Первый и единственный слой теней (для меня - для Вас это могло бы быть первым слоем, если бы Вы начали с теней). Большинство областей не требует много внимания на этом слое - апельсин все равно привлекает наибольшее внимание, потому что это - самый большой объект, я однако добавила небольшие тени в волосах. Также затемнила листья, скрытые за апельсином, так что они не выделяются так сильно

Осветление контуров.

Теперь я начинаю затемнять и осветлять контуры, используя тень и блик, чтобы сочетать их с изображением. Осторожно, не осветляйте их слишком сильно, а то они исчезнут о.о Этот процесс может иногда быть немного утомительным - я переделывала контуры на апельсине 3 раза, прежде чем осталась ими довольна ;

Сглаживание.
Вы уже, наверное, заметили, что у моего апельсина есть очень выделяющийся переход >> Хорошо начать, как мы начали, таким образом Вы сможете разобраться с формами, но оставлять его в таком виде - это слишком @_@
Чтобы решить важнейшую проблему апельсина, мы можем использовать сглаживание, чтобы смягчить переходы - мы не должны использовать новые цвета, сглаживание - это лишь размещение пикселей

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

Сглаживание занял у меня много времени из-за кривых, но я думаю, что результат стоит усилий
Хотелось бы так же упомянуть, что сглаживание не обязательно. Я видела людей, которые использовали его везде, даже когда он был не нужен, и создавалось впечатление, что картинка размытая @_@ Здесь я почти нигде не применяла сглаживание, только на оранжевом, потому что там они необходимы

Последние штрихи.

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

Добавьте свою подпись к заключительной работе, и готово! о.о
Теперь давайте посмотрим магическую анимацию ^о^

Автор: Kawaii Hannah
Переводчик: AlenkaS и Elaias.

Как рисовать анимированные смайлики.

Часть 1-создание общего рисунка.

Шаг 1.
Создайте новый файл:50 на 50 px,с RGB Colour и прозрачным задним слоем. Назовите слой Outline(Внешняя обводка).
Выберите цвет #565656(Убедитесь,что у вас есть этот серый цвет).
Приблизьте картинку на 1600%. Возьмите Pencil tool(размером 1px и сделайте горизонтальную линию длиной 5px. Далее опуститесь вниз и сдвиньтесь на 1px вправо. Нарисуйте линию длиной 2px. Сделайте всё,как показано на рисунке:

Шаг 2.
Создайте новый слой.Назовите его Fill(заполнение). Сейчас мы должны приступить к окрашиванию.
Возьмите цвет #A1A1A1 и закрасьте им те точки,которые показаны на рисунке:

Далее возьмите цвет #AEAEAE и повторите тоже самое:

Потом по очереди #C2C2C2:

#D2D2D2:

#D8D8D8:

#DEDEDE:

#E7E7E7:

#F0F0F0:

Шаг 3.
Создайте новый слой и назовите его Left hand(левая рука).Это для нас она левая,потому что смотрим на спереди,а для рисунка она правая(Прим.переводчика).
Возьмите цвет #565656 и нарисуйте им горизонтальную линию размером 2px.Проделайте всё так,как показано на рисунке:

На том же самом слое закрасьте верхний левый угол цветом #E7E7E7. Затем #D2D2D2 для верхнего правого угла и нижнего левого. Цвет #AEAEAE для нижнего правого угла:

Продублируйте слой Left hand и назовите его Right hand(Правая рука). Используйте Move Tool(V) и переместите слой на правую сторону:

Объедините слои Outline и Fill. Назовите новый слой Body(Тело):

Шаг 5.
Создайте слой-папку Expressions(Выражения лица). Для нашего рисунка существует два выражения лица:открытые глаза и закрытые глаза(мигающие).
Создайте в папке слой Open eyes(Открытые глаза) и на этом фоне цветом #565656 нарисуйте глаза,как показано на рисунке(3px в высоту и 2px между глазами):

В этой же папке создайте слой Closed eyes(Закрытые глаза). Спрячьте слой Open eyes и нарисуйте цветом #565656 горизонтальную линию размером 6px:

Шаг 6.
Если вы хотите поменять цвет,то зайдите в Layer > New Adjustment Layer > Hue/Saturation (Ctrl, U). Пометьте Colorize и поменяйте Hue and Saturation. Сохраните:

Далее проделайте тоже самое с другими слоями,нажимая на кнопку Load:

Часть 2-анимация.

Шаг 7.
Переходите в Adobe Image Ready (Ctrl, Shift, M). *примечание - в версии adobe photophop cs4 анимация встроена*

Шаг 8.
Если вы хотите сделать нормальную анимацию,скажем просто движение руки,добавляйте по 1px всё время:

Тоже самое можно сделать с глазами,телом и т.д.
Если хотите быстрее,добавляйте больше,чем 1px.

Шаг 9.
Убедитесь,что вы сделали нашему смайлу мигающие глаза.Для этого нужно сначала сделать видимым слой Open eyes,а потом Closed eyes.Должно получиться что-то такое:

Шаг 10.
Чтобы заставить наш смайл двигаться,не надо делать его просто скользящим:это выглядит некрасиво.
Заставьте смайл "прыгать" вверх на 1px.Пусть в то же время он двигается вперёд на 1px.
Продолжайте до того,пока не захотите его остановить:

Шаг 11.
Вскоре вы поймёте,что сможете сделать своего смайла со своими собственными эмоциями и действиями. Например(вот что получилось у автора):

Автор: CornWheel
Перевод: Reddings

IV. Теория освещения

Теория освещения.... Это звучит очень индустриально и страшно ... и может казаться скучной темой. В действительности же это не сложно и значительно облегчит Вам работу с оттенками и тенями.
И эта теория применима не только к созданию баз, но и к куклам, и к рисунку и к живописи!

Распространенная ошибка:
Сначала я покажу Вам как НЕ надо делать.
Вот что делают некоторые люди, когда что-либо оттеняют: они обводят эскиз линией толщиной в 1 пиксель для затенения. После этого они выбирают более светлый цвет и повторяют процесс несколько раз.
Давайте применим эту методику к шару и посмотрим, как это будет выглядеть.

Теперь по-честному. Это действительно напоминает Вам шар? Не очень реалистично, не так ли?
Есть несколько явных ошибок с этим шаром:

- странный источник света
Шар никогда не будет так освещен, если, конечно, не направить крошечный прожектор прямо в центр шара. А что получится, если Вы примените такой эффект к целой кукле? Будет выглядеть так, как будто каждая деталь куклы имеет собственный маленький прожектор. Это ведь будет странно, правильно?

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

- оттенение не сглажено
В пиксель-арте у Вас будут получаться зубчатые основы. Этого нельзя избежать. Но если Вы следуете точно за контуром, создавая затенение, то передаете такую же зубчатость и всему оттенению!
Создается оптическая иллюзия, что линии проведены сквозь оттенение. Если посмотреть вблизи, то видно темные линии, формирующие перекрестную форму на этом шаре. Также, видно и более светлые линии, формирующие форму звезды на нем.

Как сделать лучше? Отвечаю: изучите теорию освещения!

Правила освещения:

Справа я нарисовала новый шар с примененной к нему теорией освещения. Выглядит лучше? Я использовала меньше цветов, чем на первом шаре, и на нем большие одноцветные области ... и, тем не менее, он выглядит более гладким и реалистичным.

Как это получилось:
- Любая поверхность, на которую попадает свет, будет освещена, если никакой другой объект этот свет не блокирует.
- Любая поверхность, которая находится вдали от света, будет в тени.
- Любая поверхность, которая освещена непосредственно, будет иметь самую яркую подсветку.
Поскольку все это звучит слишком уж технически, лучше я объясню этот момент с помощью картинки.

Можно применять эти правила к различным формам. Вот некоторые примеры, которые освещены по тому же самому принципу, что и шар в предыдущем примере.

Было бы хорошо попрактиковаться в затемнении таких форм. Возможно, это было бы легче исполнить карандашом на бумаге. Но формы не получатся красивыми, поскольку они не будут состоять из точек.
Как бы выглядели формы, если бы свет поступал с различных направлений? Если Вы не можете себе это представить, возьмите различные предметы, поместите их в темной комнате и посветите на них фонарем.

Отражение света:

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

Это - методика, которую Вы НЕ должны использовать, но она добавляет реализма ... особенно блестящим поверхностям.

Сложные объекты:

До сих пор мы оттеняли очень простые формы. Но все же очень важно знать, как оттенить эти объекты со всех сторон и при различных условиях освещения.
Вы можете подумать: " я не хочу оттенять эти скучные формы, я хочу оттенять куклы и базы! "
Однако ... даже если форма действительно сложная, мы можем разбить ее на составляющие простые формы! Поэтому, зная основы освещения, Вы можете применять их к чему захотите.
Например, вот эскиз из предыдущих глав, разложенный на основные формы. Конечно мы можем раскладывать его и дальше, но это уже будет излишним.
Если мы раскладываем тело подобно этому, оно выглядит похожим на нарисованный манекен. Поэтому, если Вы все еще испытываете затруднения с расположением бликов и теней на изображении, то используйте нарисованные манекен и прожектор, которые фактически будут очень Вам полезны.

Теперь все готово для начала преобразования Вашего карандашный эскиз в пиксельный шедевр!

V. Обводка контура

Если Вы выполнили предыдущие главы этого урока, то у Вас теперь есть карандашный эскиз, готовый превратиться в основу пиксельной куклы.
Сначала Вам необходимо загрузить эскиз в графическую программу. При помощи сканера сделать это достаточно просто. Если нет доступа к сканеру, Вы можете сделать цифровую фотографию вашего рисунка. Не волнуйтесь насчет качества. Главное, чтобы Вы могли видеть линии эскиза.
Но если нет ни сканера, ни фотоаппарата, Вы можете делать эскиз прямо на компьютере. Мышью немного сложнее управлять, нежели карандашом, но можно постараться. Кстати, некоторые мои базы были выполнены именно мышью.

1. После того, как Вы отсканируете ваш рисунок, он будет вероятно слишком большим для основы куклы. Поэтому сначала приведем размер изображения к подходящему для обработки размеру.
Здесь я привела размеры источника к моему любимому средне-большому размеру.
(Прим. переводчика: размер эскиза автора114х250 пикселей).

2. Если Вы работаете с программой, которая поддерживает уровни, создайте Новый слой для обводки. Если Вы работаете с MSPaint, то рисуете прямо поверх эскиза.
Теперь берете pencil tool размером 1 пиксель и начинаете обводить Ваш эскиз.

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

4. Не бойтесь изменять немного некоторые линии по ходу обрисовки. Эскиз в действительности всего лишь направляющие линии.
Я решила, что шея у куклы будет более длинной и тонкой. Также я сделала симметричной голову и добавила уши.

5. После того, как закончите обводку, можете избавиться от эскиза. Если Вы работали на отдельном слое, скройте слой или удалите. Если Вы работали на том же самом слое, сотрите линии эскиза вручную.

6. На заключительном шаге я заполняю основу средним тоном из моей палитры кожи.
Основа теперь готова для затенения!

VI. Оттенение тела

Прежде, чем приступить к этой части урока, Вам понадобится обведенная контуром заготовка кукольной базы. Также, Вы должны представлять себе, как работает освещение. Если Вы еще этого не знаете, пожалуйста, прочтите главу "Теория освещения".

1. Я собираюсь использовать восьмицветную палитру для оттенения основы. Первый цвет на палитре - цвет контура, а пятый - заливочный цвет.
Вы можете использовать мою палитру или можете выбрать свои восемь цветов.

2. Сначала определяем положение источника света.
Затем берем третий цвет палитры, чтобы начать рисовать тень.
Пока представим, что это - ЕДИНСТВЕННЫЙ цвет, который мы будем использовать для затенения базы. Будем пытаться затенить базу как можно лучше только этим цветом. Эта работа выполняется линией толще, чем в один пиксель (смотрите на скрин и подберите толщину линии в соответствии с размером своей базы). Области затенения должны быть обтекаемыми и хорошо сформированными.

3. Так выглядит моя база после нанесения теней.
Голову пока не трогаем, об этом будет рассказано в следующей главе "Создаем лицо".

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

5. Итак, у нас готово основное оттенение. Если основа куклы у Вас довольно маленькая, то, возможно, этого и достаточно. Но эта основа куклы большая, поэтому сгладим оттенение получше. Для этого возьмем четвертый цвет из палитры и смешаем тени.

6. Теперь сделаем подсветки базы таким же образом, как накладывали затенение. Возьмем 6-ой цвет палитры и смешаем наиболее яркие участки базы с затененными участками. По необходимости немного корректируйте теневые цвета по ходу работы.

7. Вторым (2-м) цветом палитры добавьте некоторой реалистичности темным оттенкам. Смешайте все жесткие очертания груди, ключиц и т.д.

8. По желанию Вы можете использовать самый яркий цвет палитры для добавления базе дополнительного сияния (бликов). Используйте этот цвет умеренно, только на тех частях, на которые попадает больше всего света. Автор добавил блики на вершине грудей и плечах, на бедрах и внизу живота.

9. Теперь можете добавить по желанию некоторые финальные штрихи....и тело куклы готово!
Переходим к следующей главе, в которой будем создавать лицо.

VII. Создаем лицо

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

1. Выбираем темный цвет отличный от черного. Я использую темно коричневый цвет. Посередине головы нарисуйте две маленьких изогнутых линии для верхних ресниц. Оставьте место между ними, равное ширине глаза.
Нарисуйте нижние ресницы, или только оттените, чтобы обозначить контур глаза. Затем можете заполнить глаза белым цветом.

Теперь выберите цвет для радужной оболочки. Я использую темный коричневый цвет.
Нарисуйте маленький кружок в середине глаза для радужной оболочки, но оставьте один пиксель белым для блика.
Позвольте радужной оболочке коснуться хотя бы одной из ресниц. Если Вы оставите незаполненное пространство вокруг радужки - кукла будут выглядеть слишком лупоглазой и обалдевшей

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

Теперь можно придать ресницам более изящную форму. Затем добавьте немного теней вокруг глаз для смешивания.

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

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

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

Далее, добавляем подсветку на лоб.
Не забывайте о месторасположении источника света! И не делайте подсветку симметричной.

4. Верхняя половина лица закончена.
Теперь добавим нос. Сначала нарисуйте маленькую тень в том месте, где будет заканчиваться нос.

Затем нанесите сильную подсветку на кончик носа. С обеих сторон носа нанесите затенение, причем тень должна быть более темной и объемной на теневой стороне лица! Не забывайте про источник света!

Теперь можно добавить оттенение по сторонам щек, ушей и подбородка. Не делайте сильного оттенения по линии подбородка, иначе будет казаться, что ваша кукла - с бородой.

Нанесите едва уловимые подсветки на щеки прямо ниже глаз. Вернемся к этому моменту чуть позже, после того, как нарисуем рот.

5. Выбираем подходящий цвет для губ. Я выбрала оранжево-красный.

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

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

Конечный результат:

Проработав этот долгий урок, Вы получили законченную основу пиксельной куклы!
Поздравляю!

Это автор урока - Wayuki