Сразу, прежде чем приступить к уроку, почитайте интересную информацию о аватарах - что это такое, как они возникли, где используются и др.

Что такое аватар?

Аватар — это маленькая картинка, наиболее полно отражающая Вашу сущность, внешность, характер. Это маленький кусок графики, который воплощает и улавливает самую сущность Вас, эдакая электронная душа человека...

История возникновения аватаров

История возникновения аватаров покрыта сплошной тайной. Так что точно и неизвестно кто первый начал использовать аватар, и как пришла ему данная идея. Можно отметить, что само название аватар несет в себе божественное создание, Аватар — это с санскрита — означает физическое воплощение Бога на земле...

Откуда произошло слово аватар?

Слово Avatar (в русском написании принято — «аватара») было известно задолго до широкого распространения компьютеров и Интернета. Происходит из индуизма, где означает воплощение индуистского божества в какое-либо существо. Например, бог Индра-громовержец в одной из своих аватар был червём. Небезызвестный Кришна из Махабхараты был, говорят, аватарой бога Вишну. У последнего вообще много аватаров было. И черепахой он побыл и ещё кем-то. Даже Будда в индуизме считается его аватарой. При этом аватары вели вполне самостоятельное существование, но где-то в них была божественная сущность, которая как-то проявлялась. И у одного бога могло быть несколько аватар одновременно.

Так что употребление слова «аватара» (всё-таки в русском принято с окончанием «а», не надо бы калькировать английское произношение) для обозначения «виртуальных личностей», в которые воплощается их «реальный» хозяин — очень точное и уместное.

И всё же что такое аватар?

Аватар — это «виртуальный персонаж», alter ego любителя поиграть в киберпространственные игры. Некто, скрывающийся за вымышленным именем, и ведущий от этого имени виртуальную деятельность. Иногда злокозненную.

Слово это было выдумано авторами научно-фантастических романов и начало активно использоваться в так называемых MUD'ах (Multi User Domains — домены многих пользователей). С развитием технологий «аватар» может предстать перед вами в трёх измерениях, уже движущимся, а не просто статичной картинкой или фотографией.

Где используется аватар?

Аватар является неотъемлемой частью любого человека, кто общается на форумах. Аватар сопровождает все Ваши ответы на том или ином форуме. Без аватара Вы просто безлики, один из тысячи, один из миллиона. Так что об важности аватара не стоит и говорить, здесь и так всё понятно.

Рисуем аватар

Мы узнали что такое аватар, узнали его историю происхождения. Но где нам взять аватар? Да, есть сайты, где можно скачать себе аватары, но ведь он должен быть индивидуальным, должен показать вас — а для этого лучше нарисовать его самим. Ну готовы? Тогда приступим...

1. Создаём новое изображение размером 100x100 пикселей:



2. Свойства фонового слоя изменить нельзя (рядом с названием слоя вы можете увидеть замочек), чтобы это сделать, кликнем два раза по этому замочку и в появившемся окне нажмём OK. Теперь слой Background автоматически переименовался в Layer 0 и стал полностью доступен для редактирования. Кликаем правой кнопкой на этом слое, заходим в Blending Options, открываем вкладку Gradient Overlay и выставляем следующие значения:



Чтобы изменить градиент, кликаем по полоске справа от надписи Gradient. Откроется такое окошко:



Кликаем по квадратикам снизу и выбираем цвета как на те, что на примере, жмём OK и снова OK.

3. Затем переходим на вкладку Inner Shadow и выставляем такие значения параметров:



4. Создаём новый слой. Он автоматически назовётся как Layer 1. Зальём этот слой любым цветом с помощью Paint Bucket Tool, значение прозрачности Fill этого слоя выставим в 0%. Затем заходим в Blending Options этого слоя, выбираем вкладку Pattern Overlay и в качестве текстуры выбираем штриховку (Эта текстура там просто так не появится, но я рассказывал как её сделать в уроке по созданию UserBar’ов и жмём OK:



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



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



6. Теперь выбираем инструмент Horizontal Type Tool, выбираем цвет и понравившийся нам шрифт и пишем любой текст (Так как мы делаем именную аватарку, то напишем на ней свой ник. Я написал свой ник — Serg оранжевым цветом, шрифтом Segoe UI (ссылка на шрифт в конце урока), жирным, размером 30pt):



7. Сейчас заходим в Blending Options слоя с надписью, выбираем вкладку Outer Glow и выставляем всё как показано ниже:



Переходим на вкладку Drop Shadow и там делаем так:



Теперь жмём OK и переходим к следующему пункту...
8. Сейчас нам нужно создать копию слоя с надписью. Для этого жмём на слое правой кнопкой, выбираем Duplicate Layer и в открывшемся окне кликаем кнопку OK. Так же можно это сделать быстрее — просто перетащить слой на иконку создания нового слоя:



9. На только что созданной копии слоя кликаем правой клавишей, выбираем Group into New Smart Object, выставляем прозрачность Opacity данного слоя в 46% (по вкусу, конечно же). Ну а сейчас перевернём этот слой — идём на вкладку Edit —> Transform —> Flip Vertical и сдвигаем слой немного ниже:



10. Сейчас добавим к этому слою маску (жмём кнопку Add layer mask), рядом с изображением слоя появится ещё один квадрат белого цвета — кликаем на него, затем на панели инструментов выбираем градиентную заливку Gradient Tool и заливаем ей копию нашего слоя с текстом так, чтобы квадратик с маской выглядел как показано ниже:



11. Не мешало бы разделить верхнюю и нижнюю часть изображения белой полосой (с помощью инструмента Line Tool):



12. Сейчас добавляем к этому слою (к слою с полосой) маску и эту маску по бокам заливаем градиентом:



Результат будет выглядеть вот так:



13. Теперь выделяем слой с надписью (для этого зажимаем клавишу Ctrl и кликаем по слою), потом выбираем инструмент Rectangular Marquee Tool, зажимаем Alt и выделяем следующим образом:



14. Создаём новый слой Layer 3 и заливаем выделение белым цветом:



15. Добавляем к этому слою маску и заливаем градиентом снизу вверх:



16. Создадим новый слой Layer 4 и нарисуем на нём кисточкой свечение:



17. Создаём новый слой, выделяем его нижнюю часть виде прямоугольника и заливаем чёрным цветом, прозрачность слоя Fil Opacuty выставим равной 30%:



18. Добавим к этому слою тень:



19. Добавим бордюр:



Вот что мы сейчас получили:



20. Напишем в полученном прямоугольнике какой-нибудь текст белым шрифтом (можно написать название сайта, e-mail, icq или ещё что-нибудь):



21. Добавим к данному тексту бордюр:



Вот что мы имеем в результате:



22. Создадим новый слой, с помощью инструмента Elliptical Marquee Tool выделим примерно половину картинки, инвертируем выделение (Select —> Inverse). Получим следующее выделение:



23. Зальём выделение белым цветом:



24. Добавим к этому слою маску (Add vector mask) и зальём её градиентом начиная с правого нижнего угла:



25. Создадим ещё один слой, зальём его любым цветом, выставим прозрачность Fill Opacity в 0%, добавим бордюр:



Вот мы и сделали свою именную аватарку:



26. Можно её ещё как-нибудь приукрасить. Для этого я создал новый слой и кисточкой серого цвета (ссылка на неё в конце урока) нарисовал следующий рисунок:



Поздравляю! Ваш именной аватар готов!

Ну а если подключить свою фантазию и попробовать что-нибудь изменить, то у вас может получится совершенно другая аватарка, ещё красивее, чем та, которую я сделал для примера.
А вот ещё несколько аватарок, сделанных мною по такому же принципу:



.: Дополнительно :.
Скачать шрифт « Segoe UI » | ZIP, 276 КБ
Скачать кисточку №1 (пункт 5 этого урока) | ZIP, 885 КБ
Скачать кисточку №2 (пункт 26 этого урока) | ZIP, 416 КБ
автор урока: Gyljay S.V. aka Serg