Меню
Учебник
Партнёры

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

1. Создадим новый документ для нашего аватара, я задал размеры 110х110 пикселей, вы можете выбрать другой размер.
анимированный аватар в PhotoShop


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

3. Для начала настроим Внутреннею тень (в англ. версии Inner Shadow) настроим как на рисунке:
анимированный аватар в PhotoShop


4. Далее давайте настроим обводку (в англ. версии Stroke) настроим как на рисунке:
анимированный аватар в PhotoShop


5. Далее будем настраивать Наложение текстуры (в англ. версии Pattern Overlay) накладываем текстуру, текстура, показанная на рисунке не стандартная (как её сделать вы можете узнать здесь: http://photoshopy.net/uroki-fotoshop/dizajjnrisovanie/807-sozdajom-userbar.html (6-7 пункты)):
анимированный аватар в PhotoShop


6. Далее давайте немного украсим наш рисунок, создайте новый слой и поэкспериментируйте с кисточками, вот что получилось у меня (я поставил прозрачность слоя с кисточками в 50%)
Вот что у меня получается:
анимированный аватар в PhotoShop


7. Давайте добавим, любой текст:
Вот что у меня получилось (я добавил обводку чёрным цветом в 1 пиксели, чтобы надпись была более заметна):
анимированный аватар в PhotoShop


8. Теперь выбираем инструмент Эллипс (эту операцию делаем на новом слое), Рисуем круг в 2 раза больше нашего аватара, и затем выбираем стиль: обводка, затем заходим в настройку слоя, и выбираем обводку (внутренняя обводка) как на рисунке:
Должно получиться примерно такое:
анимированный аватар в PhotoShop

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

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


9. Теперь с помощью инструмента перемещения двигаем наш слой, чтобы создать движение видимой части, переносим наш видимый шарик в самый низ и понемногу продвигая его вперёд и в стороны делаем движение, не забывая создавать кадры, на рисунке показано как создавать новый кадр:
анимированный аватар в PhotoShop


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

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

Вот так должно получиться на панельке анимации:
анимированный аватар в PhotoShop


После" /> Сохранить для Web и устройств… (в англ. версии File —> Save Optimized As...)

Вот то, что получилось в конечном итоге у меня:
анимированный аватар в PhotoShop


В свободное время мы предлагаем вам посмотреть онлайн фильм на сайте нашего спонсора - Турецкий фмльм Удар


#1 написал: Stil Free (13 марта 2009 08:14)



Группа: Гости
Регистрация: --
лектор я бы на твоём месте в конце сделал уход в чёрный фон также круглешком ,как открытие, для перехода смотрелось бы лучше)
ICQ: {icq}
#2 написал: Lektor (13 марта 2009 14:25)



Группа: Администраторы
Регистрация: 9.01.2009
я не спорю чтор так смотрелосьбы красивее...
просто я как-то зактыл фотошоп и не сохранил исходник...:)
а так можно бы было сделать чтобы после того как картинка до конца откроется поставить задержку кадра на пару сек...
но увы исходник не сознанил what
в любом случае позолователь думаю всё сделает как надо, так как этот урок создан для того чтобы люди понимали принцип wink
ICQ: {icq}
#3 написал: Lenni (11 мая 2009 09:50)



Группа: Гости
Регистрация: --
Мне оч понравился урок!:)
ICQ: {icq}
#4 написал: Popik (11 мая 2009 19:12)



Группа: Гости
Регистрация: --
да... пригодилось, спасибо! wink
ICQ: {icq}
#5 написал: Boomer (27 мая 2009 19:05)



Группа: Гости
Регистрация: --
кульно! wink
ICQ: {icq}
#6 написал: Klinok (15 августа 2009 16:23)



Группа: Гости
Регистрация: --
кЛАССНО
ICQ: {icq}
#7 написал: kos-007 (19 октября 2009 15:43)



Группа: Гости
Регистрация: --
а чертенок ето ксить такая??
ICQ: {icq}
#8 написал: Lektor (19 октября 2009 19:12)



Группа: Администраторы
Регистрация: 9.01.2009
Цитата: kos-007
а чертенок ето ксить такая??

Да, это такая кисточка.
ICQ: {icq}
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.