« Стильный анимированный аватар в фотошопе »
Как в фотошопе (PhotoShop) нарисовать стильный аватар с анимацией


Мне поступило много вопросов: Как сделать в фотошопе аватар как у Вас? По многочисленным просьбам я написал этот урок — он о том, как я рисовал свой аватар — в нём я использовал простенькую анимацию.


Если будут какие-либо трудности — перечитайте прошлые уроки...
Как нарисовать анимированный аватар в фотошопе


1. Создаём новое изображение размером 100x100 пикселей. Создаём новый слой и заливаем его любым цветом (с помощью инструмента Paint Bucket Tool):


уроки по фотошопу


2. Заходим в Layer Style этого слоя (на панеле слоёв Layers кликаем по слою правой клавишей и выбираем Blending Options), переходим на вкладку Inner Shadow и добавим внутреннюю тень:


уроки по фотошопу


3. Переходим на вкладку Gradient Overlay и выставим там следующие параметры (красным текстом я написал шестнадцатиричные кода цветов):


уроки по фотошопу


4. Жмём Ok и получаем такой фон:


уроки по фотошопу


5. Создаём новый слой и нарисуем на нём что-нибудь, напирмер с помощью какой-либо кисточки (кисточку, которую я использовал в уроке, можно скачать в конце урока):


уроки по фотошопу


6. Параметр Blend Mode данного слоя изменим с Normal на Overlay (данный параметр изменяется на панеле слоёв Layers в верхнем левом углу):


уроки по фотошопу


7. Создадим ещё один слой, зальём любым цветом. Непрозрачность Fill выставьте в 0%. Теперь зайдите в Layer Style на вкладку Pattern Overlay, выберите текстуру ввиде косой штриховки (как она создаётся было рассказано в уроке о создании логотипа (пункт №6) или UserBar'а (в пункте №5) ) и выставьте следующие значения:


уроки по фотошопу


Жмём Ok и видим результат:


уроки по фотошопу


8. Напишем какой-нибудь текст, например свой ник:


уроки по фотошопу


9. Заходим в Layer Styles на вкладку Stroke и выставим следующие значения:


уроки по фотошопу


10. На вкладке Gradient Overlay сделаем такой градиент:


уроки по фотошопу


11. А на вкладке Outer Glow добавим внешнее свечение:


уроки по фотошопу


12. Жмём Ok и получаем такой-вот сияющий текст:


уроки по фотошопу


13. Снова создаем новый слой и выполним следующее выделение (для этого можно использовать любой понравившийся вам инструмент для выделения, например Polygonal Lasso Tool):


уроки по фотошопу


14. Выбираем инструмент Gradient Tool, выбираем белый цвет и способ заливки с плавным переходом белого цвета в прозрачный, и заливаем им выделение сверху вниз. И в результате мы получим слегка заметный блик (у вас может получиться немного по-другому):


уроки по фотошопу


15. Создаём новый слой, заливаем его любым цветом и заходим в Layer Style на вкладку Inner Glow:


уроки по фотошопу


16. И на вкладку Stroke:


уроки по фотошопу


17. Жмём Ok и получаем такой-вто бордюрчик:


уроки по фотошопу


18. Увеличим изображение, быбираем инструмент Polygonal Lasso Tool и не спеша делаем следующее выделение:


уроки по фотошопу


19. Зальём его белым цветом:


уроки по фотошопу


20. Сейчас нужно зайти в Layer Style и добавить внутреннюю тень (Inner Shadow):


уроки по фотошопу


21. Жмём Ok. Должно получиться примерно так, как и у меня:


уроки по фотошопу


22. А сейчас создадим новый слой и нарисуем там (по желанию) кирпичики:


уроки по фотошопу


23. Напишем над полученным фоном что-нибудь, например название сайта, ваше ICQ или E-Mail:


уроки по фотошопу


24. Сейчас добавим несложную анимацию. Для этого нужно перенести изображение в программу Adobe ImageReady (чтобы это сделать в меню File выберите пункт Edit in ImageReady).


На панеле Animation добавьте несколько кадров (мне хватило 14 кадров) — для этого нажмите несколько раз кнопку Duplicates current frame на той же панеле, снизу:


уроки по фотошопу


25. Осталось изменить каждый кадр. Делается это так:


Первый кадр мы оставим как есть, сразу кликаем по второму кадру.


Затем на панеле слоёв Layers выбираем слой с ником и заходим в Layer Style, там, на вкладке Outer Glow уменьшите немного непрозрачность свечения (Opacity), жмите Ok:


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


После этого нужно так же постепенно увеличивать непрозрачность. Как это всё сделаете — нужно настроить параметры оптимизации изображения (качество):


уроки по фотошопу


Осталось только сохранить наш анимированный аватар. Для этого в главном меню жмём File —> Save Optimized As.... Вот что получилось у меня:


уроки по фотошопу


Вот и всё — анимированный аватар готов!



Дата: 28.06.2007 | Автор урока: Уроки фотошопа, уроки Photoshop на DesignArts.RU