Анимированный аватар в PhotoShop » Дизайнерская студия Funbary | Уроки PhotoShop | Учебники | Регистрация доменов | Разработка и установка сайтов

Популярные новостиПопулярные новости

Популярные новостиПользователи On-Line

Сейчас на сайте:
Отсутствуют. angel7, Crazy Belka, g, gorilas, kirrik, Ksanko, ludaberloga, PsiHOdeliK, Shady, Димон
Роботов: 0
Отсутствуют.

Вход пользователяВход в аккаунт

Главная » Уроки Photoshop » WEB » Анимированный аватар в PhotoShop

 (голосов: 0)

Анимированный аватар в PhotoShop

автор: PsiHOdeliK | 30 апреля 2008 | Просмотров: 172 | Уроки Photoshop » WEB

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

Как вы уже догадались, рисовать мы будем анимированный аватар. Он не сложный, внимательно прочтите урок и вы во всём разберётесь. Если всё-же что-то останется не понятным — не ленитесь и не стесняйтеся, а спросите об этом.

Ну а назначение данного урока не научить вас рисовать, а научить вас создавать анимацию...

Урок про анимированный аватар в PhotoShop

1. Создаём новое изображение размером 100x100 px:

2. Разблокируем слой или создадим новый.

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




alt



3. За тем на вкладке Stroke настройте обводку:




alt



4. А на вкладке Pattern Overlay выберите текстуру ввиде горизонтальной штриховки (текстура эта не стандартная, как её создавать можно прочитать здесь ):


alt


Везде жмём Ok и получаем следующий фон:




alt


5. Создайте новый слой, непрозрачность Opacity уменьшите до 50% и какими-либо кисточками что-нибудь нарисуйте (кисточки для PhotoShop можно скачать тут):



alt


6. Снова создайте новый слой, выберите кисточку из набора Silhouette (ссылка на набор в конце урока) и нарисуйте силуэт, например такой:



alt


7. Зайдите в Layer Style и добавьте внешнее свечение (Outer Glow):



alt


Получиться должно вот так:

alt

8. Сейчас напишите какой-нибудь текст, например свой ник, шрифтом чёрного цвета:


alt


9. Буквы, расположенные над силуэтом, закрасьте белым цветом:


alt


10. С помощью Polygonal Lasso Tool выделите половину аватара (по диагонали), создайте новый слой и залейте выделение белым цветом (с помощью инструмента Paint Bucket Tool):

alt

11. Создадим блик. Для этого сразу добавьте к слою маску (нажмите на кнопку Add Layer Mask на панели слоёв):


alt


12. Выберите инструмент Gradient Tool и залейте выделение чёрно-белым градиентом:



alt


Должно получиться вот так:



alt


13. Теперь выберите Ellipse Tool, зажмите клавишу Shift и нарисуйте круг размером раза в два больше чем аватар (в моём примере это круг, вписанный в квадрат со сторонами 277x277 пикселей):


alt


14. Зайдите в Layer Style слоя с кругом и на вкладкеStroke установите примерно следующие значения (размер Size может быть другим — он зависит от размера нарисованного вами круга):

alt


15. Теперь непрозрачность заливки слоя Fill уменьшите до 0%:



alt

Получить мы должны следующую картину:

alt

16. Ну а сейчас перейдём к добавлению анимации в наш аватар. Для этого его нужно открыть в программе ImageReady, чтобы это следать зайдите в меню File и там выберите пункт Edit in ImageReady.

В ImageReady передвиньте слой с кружком в самый низ, чтобы он не был виден. Потом на панели с раскадровкой (Animation) создайте новый кадр:


alt


17. На новом кадре слой с кружком немного передвиньте вверх, чтобы он стал немного виден:


alt


18. Снова создайте новый кадр:


alt


19. Передвиньте слой с кружком ещё немного выше (примерно на 4 пикселя):


20. Продолжайте данные операции до тех пор, пока кружок не будет над головой:


alt


21. Сейчас будем расширять наш круг. Ддя этого снова создайте новый кадр, на нём зайдите в Layer Style слоя с кружком, на вкладку Stroke и там уменьшите размер Size до 116 px:


alt


Получиться вот так:


alt


22. Снова создайте кадр и уменьшите размер обводки до 112 px:


alt


Получится вот так:


alt


23. Продолжайте повторять последние действия, пока круг не исчезнет из кадра.

Всё. Осталось сохранить наш анимированный аватар (но ни кто не запрещает его ещё доработать — всё в ваших силах), для этого нажмите File —> Save Optimized As....

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


alt



Скачать Кисти для урока




Напечатать Комментарии (2)

Новости по теме

  • Неоновая кнопка круче чем WEB 2.0
  • Создаем красивый текст в стиле разлитой воды
  • Строки (Полоски) на фото
  • Эффект преломления света
  • Эффект Гранджа

  • Похожие новости


    Ссылки на новость




    Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
    #1 написал: RussianVanya (4 мая 2008 10:59)
    Спасибо за инфу, очень полезная информация и пригодиться каждому!!!
    [цитировать] ICQ: 406336533
    #2 написал: Адвокат (30 июня 2008 14:27)
    Урок Ворован с designarts.ru . Копирайт замазан, ссылки на сайт собственника нету.
    В_О_Р_Ы!!!!
    [цитировать] ICQ: --
    Добавление комментария
    Ваше Имя:
    Ваш E-Mail:
    Код: Включите эту картинку для отображения кода безопасности
    обновить код
    Введите код: