Форум твоего направления

Форум твоего направления (http://pcvector.ru/forum.php)
-   Софт: Графика (http://pcvector.ru/f95)
-   -   Статья Как сделать аватар ? (http://pcvector.ru/t555)

Vector 09.11.2009 23:14

Как сделать аватар ?
 
Вот нашел статейку, как сделать анимированный аватар в Adobe Photoshop

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


http://designarts.ru/posts/25/1.png


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


http://designarts.ru/posts/25/2.png


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


http://designarts.ru/posts/25/3.png


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


http://designarts.ru/posts/25/4.png


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


http://designarts.ru/posts/25/5.png


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


http://designarts.ru/posts/25/6.png


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


http://designarts.ru/posts/25/7.png


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


http://designarts.ru/posts/25/8.png


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


http://designarts.ru/posts/25/9.png


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


http://designarts.ru/posts/25/10.png


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


http://designarts.ru/posts/25/11.png


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


http://designarts.ru/posts/25/12.png


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


http://designarts.ru/posts/25/13.png


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


http://designarts.ru/posts/25/14.png


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


http://designarts.ru/posts/25/15.png


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


http://designarts.ru/posts/25/16.png


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


http://designarts.ru/posts/25/17.png


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


http://designarts.ru/posts/25/18.png


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


http://designarts.ru/posts/25/19.png


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


http://designarts.ru/posts/25/20.png


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


http://designarts.ru/posts/25/21.png


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


http://designarts.ru/posts/25/22.png


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


http://designarts.ru/posts/25/23.png


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


http://designarts.ru/posts/25/24.png


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


http://designarts.ru/posts/25/25.png


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


http://designarts.ru/posts/25/26.png


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


http://designarts.ru/posts/25/27.png


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


http://designarts.ru/posts/25/28.png


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

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



Всё! Анимированный аватар готов:
http://designarts.ru/posts/25/preview.gif
Источник

Brunk 23.10.2010 20:10

Статья не пригодилась, так как сам так умею, но спасибо за тему, с интересом почитал...

wlad 01.04.2011 15:06

Vector, молодец, отличная и нужная тема

Y@ks 05.11.2011 10:11

Статья полезная для новичков, для тех кто хотел бы сделать себе, но не мог и посмотрев тут, он запросто всё сделает :)


Brunk, мог бы и ничего не писать :)

rahon 13.03.2015 17:57

Re: Как сделать аватар ?
 
автор обнови изображение не открываются,а то как урок этот смотреть если картинок нет


Часовой пояс GMT +3, время: 19:18.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2015, Jelsoft Enterprises Ltd. Перевод:
zCarot
Copyright © 2009 - 2014, pcvector.ru

.