Help - Search - Members - Calendar
Full Version: Создание колобка - Урок от Lazer
Kolobok's smiles forums > For Russian users > О Колобках
Lazer
Здравствуйте! В этом уроке я покажу вам создать анимированного колобка-смайлика, такого, как делаю я. Если будут вопросы по каким-то пунктам или что-то будет непонятно – не стесняйтесь, пишите. При перепечатывании статьи ссылка на автора обязательна. Пожалуйста, уважайте труд других людей!
В данном уроке я постарался учесть все свои проблемные моменты. Пожалуйста, внимательно выполняйте все, что написано в уроке, чтобы потом не обижаться, потому что у вас не получается, когда вы что-то пропустили. Вот, собственно, и он:

1.Для начала создадим новый слой с параметрами как на картинке.



Вот что у нас получится:



2.Увеличим данный слой до максимального размера в 1600%.



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



4.Создадим новый слой, назовем его «Тело». Переименуем изначальный слой Layer1 в «Фон». Чтобы переименовать слой, нужно щелкать на его название два раза левой кнопкой мыши. Вы сможете закрасить его по своему желанию, если захотите получить смайлик не на прозрачном фоне, а на каком-то собственном. Выделим слой «Тело».

5.Выберем инструмент Ellipse Tool или нажмем горячую клавишу U на клавиатуре. Помните, что при нажатии горячих клавиш должна стоять английская раскладка, иначе ничего не произойдет.



6.Выберем цвет в градациях желтого. Возьмем для данного урока цвет EBDF19.



7.Удерживая клавишу Shift на клавиатуре и левую кнопку мыши, проведем ей из правого угла документа в левый, учтем, что для красоты нужно делать небольшой отступ (удерживая клавишу Shift, мы получим круг вместо эллипса). Вот что у вас должно получиться. Нажмите Enter.



8.Растируем слой. Для этого нажмем правой кнопкой на слой «Тело» и выберем функцию «Rasterize Layer».

9.Щелкнем правой кнопкой на слой «Тело» и выберите параметр «Blending Options». Отметьте на нем параметры «Inner Shadow» и «Bevel and Emboss» с параметрами, указанными на рисунке. Ни в коем случае не включайте параметры «Drop Shadow» и «Outer Glow», потому что при дальнейшей оптимизации картинки в GIF (что будет обязательно), тень и свечение станет обычным белым пятном и получится очень некрасиво. Нажмите OK. Не забывайте иногда сохранять работу.





10.Создадим новый слой, назовем его «ГлазаЗакр». Выберем абсолютно черный цвет 000000 и инструмент карандаш (dirol.gif. Ни в коем случае не используйте кисточку, потому что при таком маленьком количестве пикселей полупрозрачный цвет будет смотреться очень некрасиво и неаккуратно.

11.Нарисуем глаза попиксельно (то есть тыкая в каждую точку, там где не прямые линии) как на картинке. Дублируем данный слой, назовем его «ГлазаОткр». Зальем внутреннюю часть глаз белым цветом (FFFFFF) инструментом заливка (G). Нарисуем квадратные черные зрачки посередине глаза.

12.Переместим оба слоя инструментом Move (V) так, чтобы они хорошо смотрелся на нашем теле. При этом слои должны совпадать, т. е. задний слой («ГлазаЗакр») не должен быть виден. Вот что у меня получилось:



13.Создадим новый слой, назовем его «Рот». Выберем черный цвет и нарисуем рот. Уже можете попытаться нарисовать что-то свое. Если у вас не получится, можете срисовать с картинки. Срисовывайте с картинки только в том случае, если у вас не получилось, потому что если вы будете все делать по урокам, то так и научитесь делать только по урокам, а сами ничего сделать так и не сможете! Переместите его так, чтобы он хорошо смотрелся на нашем смайлике. Вот какой рот у меня получился. Учтите, что делать рот нужно такой ширины, чтобы он был ровно посередине относительно глаз, он не должен быть съехавшим, если вы специально этого не хотите. Не забывайте сохранять работу.



14.Создадим новый слой, назовем его «Волосы». Выберем темно-коричневый цвет, я выбрал 592C07.



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



15.Колобок готов. Чтобы посмотреть что у нас получилось нужно в окне «Navigator» выбрать окошко с числовым индикатором увеличения (зумом) и изменить его на 100% (это тот, который мы меняли вначале в шаге 2). После того как посмотрели результат, опять нужно сделать зум на 1600%. Теперь нужно его анимировать. Сохраним наш документ. Зайдем в папку, где находится наш документ. Копируем его. Для этого нажмем на него правой кнопкой, в списке выберем «Copy» или «Копировать», нажмем правой кнопкой на пустое место в этом же окне и выберем «Paste» или «Вставить». Назовем копию документа «Анимация». Откроем его в программе Photoshop. Теперь мы работаем с ним.

16.Дублируем слои, переместим их в том же порядке наверх. То есть, у нас должно получиться два комплекта слоев. назовем слои таким-же именем, но с индексом 1. Фон дублировать не надо. Вот что должно получиться:



17.Удалим слои «ГлазаЗакр» и «ГлазаОткр 1». Для этого нажмем на слой правой кнопкой и выберем «Delete Layer». Обратим внимание на индексы удаленных слоев. Если вы удалили не те слои, в истории нажмите третий снизу пункт и удалите их по новой.

18.Убедимся, что возле всех слоев стоит «глазик». Это означает, что слой видимый. Если «глазик» не стоит, надо нажать на то место, где он должен стоят (посмотрите на предыдущие слои).

19.Выберем самый верхний слой «Волосы 1». Войдем во вкладку «Layers», найдем внизу функцию «Merge Down» (горячие клавиши - Ctrl+E, убедитесь, что включена английская раскладка клавиатуры, обычно после переименовывания люди забывают включить английский язык и не понимают, почему некоторые функции у них не работают). После нажатия на кнопку слои «Волосы 1» и «Рот 1» сольются, образуя новый слой, включающий в себя и волосы и рот под названием «Рот 1». Проделаем данную процедуру еще несколько раз до тех пор, пока весь наш комплект не сольется в один слой, который будет называться «Тело 1». Обратите внимание на индекс, весь документ сливать в один слой не нужно!

20.Выделим слой «Волосы». Проделаем с ним ту же операцию, что и со слоем «Волосы 1» до тех пор, пока полученный слой не станет называться «Тело». Итого, у нас должно получиться три слоя: «Тело 1», «Тело» и «Фон».

21.Дальнейшая информация предназначена для тех, у кого есть ImageReady. Как делается анимация в новом фотошопе CS4 со встроенной анимацией я не знаю, потому что у меня его нету. Если у вас просто нету ImageReady, попытайтесь найти его в интернете (полезный сервис для скачивания программ – торренты. Если не знаете что это такое, введите запрос в любом поисковике).

22.Итак, выберем наш документ и нажмем кнопку «Edit In ImageReady» или сочетание клавиш Shift+Ctrl+M.

23.Подождем, пока откроется ImageReady.

24.Два окна, с которыми мы будем работать в ImageReady – это основное окно, где изображен наш колобок и окно анимации. Если у вас отсутствует окно анимации, нажмите вкладку Window и выберите второе по счету окно снизу.

25.В окне анимации справа вверху найдите маленькую стрелочку и нажмите на нее. В появившемся окне выберите функцию «Make Frames From Layers». Эта функция создаст кадры анимации из существующих слоев. Соответственно, как видите, если вы все сделали правильно, то у вас должно получиться два слоя с колобком – у одного глаза открыты, у другого закрыты. Из них мы и будем делать нашу анимацию.



26.В анимации выберем первый пустой кадр (это наш фон), нажмем на значок корзины в нижней панельке справа. В маленьком окошке слева выберем режим «Forever», если он там не стоит.

27.Выберем первый кадр. Нажмем клавишу Shift и, удерживая ее нажмем на второй. Эта клавиша позволяет выбрать несколько кадров одновременно. Также будут выбраны все слои, находящиеся между этими кадрами. Если вы хотите выбрать кадры, идущие не по порядку, нажмите клавишу Ctrl и выберите нужные. Если вы хотите выбрать все кадры, нажмите маленькую стрелочку вверху справа и выберите «Select All Frames». Итак, мы выбрали два наших кадра. Нажмем на кнопку «Дублировать слои», находящуюся внизу справа окна «Animation» слева от кнопки «Корзина». Как наглядно видно, создастся копия каждого слоя после выделенных кадров (не в конце всей анимации и не каждый кадр по отдельности дублируется после себя).

28.Итого, у нас получилось 8 кадров. Чтобы запустить анимацию, нажмите кнопку «Play» внизу панели анимации. Чтобы остановить анимацию, нажмите эту же кнопку. Попробуйте просмотреть анимацию. Что у вас получилось? Кадры очень быстро мелькают и ничего не разобрать. Значит, нам нужно установить время для каждого кадра. Чтобы установить время, нажмите на надпись под рисунком кадра. Как видите, для каждого кадра там стоит 0 секунд. После нажатия в окошке вы увидите наиболее распространенные промежутки времени. Если вас эти промежутки не устраивают, нажмите кнопку «Other...» в этом же окне. Появится окошко, где вам предложат ввести вручную нужный вам промежуток времени. Учтите, что он может быть и меньше 0,1, и больше 10 секунд. Введем в поле цифру 3. Дробные промежутки времени нужно вводить через запятую, а не через точку. Аналогично, расставим время для остальных кадров по примеру. Вот что у нас должно получиться:



29.Попробуем проиграть анимацию. Не правда ли, смотреться стало намного красивее? Осталось сохранить анимацию. Вы можете подумать «Да что там сохранять? Нажал Save и все!» Но не все так просто. Сохранять анимацию нужно определенным образом. В основном окне вы можете увидеть такие вкладки, как «Original» (это ваше изображения без оптимизации), «Optimized», «2x-Up» (промежуточные результаты оптимизации) и «4-Up», показывающий результат сохранения с оптимизацией. Нажмем на вкладку 4-Up. Выберем последнее окно, показывающее результат оптимизации. При увеличении и детальном рассмотрении мы заметим некие артефакты и неаккуратность рисунка, что нам и предстоит убрать.

30.«Для чего вообще нужна эта дурацкая оптимизация?» - можете спросить вы. И совершенно логично. Оптимизация анимации нужна для того, чтобы уменьшить размер картинки. Если вы посмотрите, то под четырьмя нашими результатами, которые рассматривались в пункте 29, стоит их размер. И если вы присмотритесь, то увидите, что размер изображения без оптимизации в 10-30 раз меньше, чем после оптимизации. На вес анимации часто ставят ограничения, в связи с чем приходится оптимизировать ее так, чтобы выбирать оптимальный вариант между качеством и весом картинки. Отсюда и происходит понятие «Оптимизация».

31.Выставим все настройки, как показано на рисунке.



32.Разберемся с нужными нам пунктами настройки.
«Reduction» - параметр, определяющий качество картинки. Можете поизменять его и посмотреть что получится. Основные варианты с хорошим качеством – это Perceptual, Selective и Adaptive. Другие же варианты очень узкоспециализированные и выбирать их я вам не советую.
«Colors» - количество цветов. Как видите, в формате GIF максимально возможное количество цветов – 256. То есть, если у вас до оптимизации были какие-то плавные переходы (например, на фотографии) , то после оптимизации они точно не получатся.
«Web Snap» - параметр, «убивающий» картинку. Нужен он только чтобы показать что может случиться с картинкой, если ее разорвать, а потом склеить. smile.gif
«Dither» - сглаживание. Параметр обязательно нужный и в большинстве случаев в выпадающем окне снизу нужно выбирать «Diffusion», который наиболее приемлимый для глаза. При этом, если вам нужно сэкономить вес большой картинки, вам просто нужно поставить значение параметра Diffusion не на 100%, а на меньшее число. Изменяя параметр Diffusion вы можете наблюдать как изменяется вес картинки. В данном случае картинка маленькая, поэтому мы поставим этот параметр на 100%.
«Transparency» - прозрачность картинки. Если убрать эту галочку, то при оптимизации прозрачный цвет будет заменен на тот, который будет выбран справа. Для смайликов это не подходит, но подходит если у вас в картинке где-то попадаются прозрачные места по краям и вы хотите быстро их убрать – просто уберите эту галочку. Вы можете заметить, как в окне со смайликом фон «в клеточку» меняется на фон того цвета, который у вас выбран. Dither – это сглаживание прозрачности, этот параметр аналогичный с уже рассматриваемым, только сглаживает он не саму картинку, а карту прозрачности.
Параметр «Interlaced» нужен для интернета и позволяет загружать картинку не полностью, а постепенно, построчно, что экономит время загрузки при больших картинках (страничка уже загрузилась, а картинки еще подгружаются).

33.Итак, мы рассмотрели все параметры, осталось сохранить картинку. Нажимаем вкладку File, выбираем параметр Save Optimized As и сохраняем картинку. Все, наш смайлик готов! Вот какой получился у меня.



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

Урок ознакомительный, показыает новичкам основные функции программ Photoshop и ImaGeReady, основы рисования и создавания анимации, надеюсь, описал все достаточно подробно и он будет доступен даже начинающим фотошоперам, принесет много полезной информации как новичкам, так и любителям. Естественно, в уроке есть некоторые лишние моменты, которые, как может показаться абсолютно не нужны, но на самом деле это не так. Урок универсальный и подходит не только для создания смайлика, но и для ознакомление с фотошопом и изучения некоторых его тонкостей. Спасибо за то, что сделали мой урок! Автор урока – LazerMax. При копировании данного урока на другой сайт вы обязаны в конце урока написать автора и ссылку на сайт lazermax.ucoz.ru.
Cherna
Расписал замечательно good.gif
С группировкой слоёв удобней, но т.к. ты показываешь метод создания как ты делаешь, то тут кому как удобнее. pardon.gif
Reny
clapping.gif Thank you, Lazer, I will try to read it with an online translator.
Lazer
Sorry, I'm not so well know English language to write in English, so I can lay out only the English version of the online translators as well as you have done pardon.gif In any case, I have english version Photoshop, so the picture will be easy to understand.
Aiwan
Цитата (Lazer @ Mar 5 2010, 11:33 PM) *
Если вы создадите какого-то своего отдельного колобка, пришлите мне, пожалуйста результат, потому что все-же это колобки, созданные по моему уроку и, я думаю, каждому будет неприятно, если его работу спрячут и не будут показывать, а уж тем более выдавать за свою. При вашем желании, я смогу добавить работу в галерею на свой сайт. Права на данные смайлики принадлежат не только вам, но и мне, потому что я создатель этого урока. Пожалуйста, уважайте труд других людей!

Мне кажется это лишнее. Если ты написал бы что-то типа "При перепечатывании статьи ссылка на автора обязательна", то было бы нормально. Ты бы претендовал на интеллектуальную собственность твоих трудов в виде урока. Но претендовать на плоды труда человека который учится по ней нелепо. Боюсь желающих нарисовать будет ноль.

Хотя, порыв похвален smile.gif Но одна строка портит все впечатление от урока.
Lazer
Спасибо, уберу.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2021 Invision Power Services, Inc.