PDA

Просмотр полной версии : Инструкция: как сделать аватар?


Bizzare
26.04.2006, 19:18
В данном уроке я расскажу, как сделать аватар собственными руками. Для этого нам понадобится графический редактор photoshop (версия не имеет значение, в уроке использовалась 8-ая версия).

1. Для начала нам нужно подобрать картинку, которая нам нравится и которую мы хотим использовать в качестве нашей аватары. Картинку можно найти где угодно. Я например использовал поисковую систему picsearch.ru.


http://img138.imageshack.us/img138/5595/snap21mq.th.jpg (http://img138.imageshack.us/my.php?image=snap21mq.jpg)
2. Я решил взять фотографию Анджелины Джоли. Итак вбиваем в строку поиска «Джоли» (или то, что вы ищите: автомобили, животные, спорт и т. д.) и нажимаем «искать!»

http://img266.imageshack.us/img266/2392/snap39jo.th.jpg (http://img266.imageshack.us/my.php?image=snap39jo.jpg)
3.Выбираем понравившееся изображение и кликаем по нему левой кнопкой мыши.
http://img138.imageshack.us/img138/2504/snap40nn.th.jpg (http://img138.imageshack.us/my.php?image=snap40nn.jpg)

4.Мы увидим вверху открывшейся странички две ссылки – непосредственно на изображение и на сайт, на котором оно было найдено. Кликаем по первой ссылке.

http://img138.imageshack.us/img138/6844/snap50ex.th.jpg (http://img138.imageshack.us/my.php?image=snap50ex.jpg)
5.Вот у нас открылось изображение! Кликаем по нему правой кнопкой мыши и выбираем «сохранить рисунок как».
http://img266.imageshack.us/img266/7828/snap61kg.th.jpg (http://img266.imageshack.us/my.php?image=snap61kg.jpg)
6.Указываем место, куда будем сохранять (его желательно запомнить, чтоб потом долго не искать!), а также имя файла, если присвоенное автоматически имя нас не устраивает. Также обратите внимание на тип файла – там должно стоять JPEG! Если это не так – измините тип файла на JPEG!



http://img266.imageshack.us/img266/3046/snap77mt.th.jpg (http://img266.imageshack.us/my.php?image=snap77mt.jpg)
7.Далее открываем Photosop. Надеюсь с этим проблем не возникнет! На всякий случай – это можно сделать через меню «пуск» -> все программы(см. скрин).
http://img138.imageshack.us/img138/7480/snap87fy.th.jpg (http://img138.imageshack.us/my.php?image=snap87fy.jpg)
8.Вот мы наконец-то открыли редактор:
http://img138.imageshack.us/img138/4369/snap98qv.th.jpg (http://img138.imageshack.us/my.php?image=snap98qv.jpg)
9.В меню File в верхнем левом углу выбираем open (открыть)
http://img138.imageshack.us/img138/7523/snap105xl.th.jpg (http://img138.imageshack.us/my.php?image=snap105xl.jpg)
10.Находим нашу картинку и нажимаем «открыть».
http://img262.imageshack.us/img262/9701/snap111sn.th.jpg (http://img262.imageshack.us/my.php?image=snap111sn.jpg)
11.Вот теперь мы наблюдаем нашу несравненную Джоли! Выбираем слева инструмент crop tool
http://img262.imageshack.us/img262/8805/snap133mp.th.jpg (http://img262.imageshack.us/my.php?image=snap133mp.jpg)
12.Теперь вверху в полях width и height ставим значение 100.
http://img262.imageshack.us/img262/9218/snap143cr.th.jpg (http://img262.imageshack.us/my.php?image=snap143cr.jpg)
13.Теперь мы должны определится, какую часть изображения мы хотим оставить? Я решил оставить изображение Джоли по пояс. Итак наводим мышкой на левый верхний край фотографии, зажимаем левую кнопку мыши и не отпуская(!) ее ведем в нижний правый край. Отпускаем кнопку! Должна получится рамочка. Часть изображения, которую мы впоследствии вырежем останется затемненной.

http://img133.imageshack.us/img133/6781/snap164mg.th.jpg (http://img133.imageshack.us/my.php?image=snap164mg.jpg)
14.Кстати получившуюся рамочку можно двигать! Достаточно навести мышку на светлый участок изображения – указатель примет форму черной стрелочки – зажать левую кнопку мыши и можно двигать рамку! В примере я подвинул рамку чуть выше.
http://img133.imageshack.us/img133/7357/snap175rr.th.jpg (http://img133.imageshack.us/my.php?image=snap175rr.jpg)
15.Нажимаем галочку вверху справа!
http://img133.imageshack.us/img133/5296/snap182ty.th.jpg (http://img133.imageshack.us/my.php?image=snap182ty.jpg)
16.Осталась та часть, которую мы и выделили. Теперь выбираем меню Image -> Image Size
http://img264.imageshack.us/img264/5236/snap196gm.th.jpg (http://img264.imageshack.us/my.php?image=snap196gm.jpg)
17.Откроется окошко с параметрами нашего изображения. Теперь мы должны уменьшить рисунок. На нашем форуме разрешены аватары 100*100 пикселей! Поэтому в поля width и height вносим соответствующие изменения. Убедитесь, что напротив этих полей у вас выбрана единица измерения pixels! Если по какой-то причине не удается выставить в обоих полях значение 100, попробуйте убрать галочку перед параметром Constrain Proportions.

http://img133.imageshack.us/img133/286/snap213fx.th.jpg (http://img133.imageshack.us/my.php?image=snap213fx.jpg)

18.Вот наше изображение уменьшилось до нужных размеров.
http://img133.imageshack.us/img133/9066/snap222so.th.jpg (http://img133.imageshack.us/my.php?image=snap222so.jpg)
19. Теперь нам нужно сохранить аватар. Выбираем меню File-> Save as…



http://img133.imageshack.us/img133/483/snap234yh.th.jpg (http://img133.imageshack.us/my.php?image=snap234yh.jpg)
20. Как и в шаге 6-ом – указываем путь сохранения имя файла, под которым мы хотим сохранить картинку. Затем в поле Format выбираем уже полюбившийся нам JPEG! И нажимаем «Сохранить»!
http://img264.imageshack.us/img264/1475/snap285ls.th.jpg (http://img264.imageshack.us/my.php?image=snap285ls.jpg)
21. Появится окошко JPEG Option. В поле Quality ставим значение 5 (этого вполне достаточно). Внизу окошка указан вес изображения в килобайтах. На форуме разрешены изображения не более 29,3 Кбайт. У меня получилось 9,46! Если у вас получилось больше разрешенного – попробуйте уменьшить значение Quality. Жмем «ОК».
http://img264.imageshack.us/img264/3913/snap294zi.th.jpg (http://img264.imageshack.us/my.php?image=snap294zi.jpg)
22. Все! Наш аватар готов! Его смело можно загружать на форум! НО! Ведь можно сделать его более индивидуальным! Давайте напишем на аватаре наш ник, например!

Для начала немного увеличим рабочую область. Чтоб было удобнее работать с маленьким изображением. Подведите указатель мышки к правому нижнему краю окошка с изображением – указатель должен принять форму двойной стрелочки. Зажимаем левую кнопку мыши и тянем правй край окошка вниз и вправо, отпускаем кнопку!

http://img262.imageshack.us/img262/3139/snap303te.th.jpg (http://img262.imageshack.us/my.php?image=snap303te.jpg)
23. Теперь выбираем инструмент Zoom Tool (лупа)
http://img182.imageshack.us/img182/6950/snap327xc.th.jpg (http://img182.imageshack.us/my.php?image=snap327xc.jpg)
24. Нажимаем на изображение левой кнопкой мыши несколько раз, пока изображение не увеличится до удобного размера.
http://img182.imageshack.us/img182/238/snap346ld.th.jpg (http://img182.imageshack.us/my.php?image=snap346ld.jpg)
25. Теперь выбираем инструмент Horizontal Type Tool (буква Т на панели инструментов слева).



http://img182.imageshack.us/img182/8624/snap512ri.th.jpg (http://img182.imageshack.us/my.php?image=snap512ri.jpg)
26. Теперь кликаем на изображение в том месте, где мы хотим сделать надпись (ее потом можно будет свободно перемещать, поэтому можно кликнуть в любом месте на изображении). Появится мерцающий курсор. Теперь настроим параметры текста. Выберем размер шрифта.
http://img182.imageshack.us/img182/7448/snap538rm.th.jpg (http://img182.imageshack.us/my.php?image=snap538rm.jpg)
Тип шрифта:
http://img262.imageshack.us/img262/9049/snap549js.th.jpg (http://img262.imageshack.us/my.php?image=snap549js.jpg)
Цвет шрифта (двойной клик левой кнопкой мыши):
http://img182.imageshack.us/img182/9299/snap555hh.th.jpg (http://img182.imageshack.us/my.php?image=snap555hh.jpg)
http://img262.imageshack.us/img262/4520/snap582bk.th.jpg (http://img262.imageshack.us/my.php?image=snap582bk.jpg)
26. Я выбрал шрифт Arial, размер 60pt, цвет черный. Впоследствии все это можно будет опять же изменить. Теперь набираем на клавиатуре наш ник, я набрал Jolie.
http://img262.imageshack.us/img262/3411/snap595sn.th.jpg (http://img262.imageshack.us/my.php?image=snap595sn.jpg)
27. Еще можно разместить текст вертикально. Это может быть например ваш номер icq! Я просто еще раз напишу Jolie? Но уже другим шрифтом и цветом. Итак нажимаем правой кнопкой мыши на Horizontal Type Tool и выбираемVertical Type Tool.

http://img136.imageshack.us/img136/9996/snap609jr.th.jpg (http://img136.imageshack.us/my.php?image=snap609jr.jpg)
28. Повторяем шаги 25, 26 – настраиваем цвет, размер, тип шрифта. Набираем текст. Если поместить указатель рядом с текстом – он примет форму черной стрелочки, как в случае, когда мы передвигали рамку вырезания, и теперь мы можем подвинуть текст в удобное для нас место. Нажимаем галочку в верхнем правом углу! Сохраняем изменения. Наша аватара готова! Спасибо за внимание!
http://img262.imageshack.us/img262/9335/snap624qz.th.jpg (http://img262.imageshack.us/my.php?image=snap624qz.jpg)

http://img256.imageshack.us/img256/201/16vs1.jpg

Аньенс
27.04.2006, 01:15
Прикольно!!!не думала что столько шагов...когда все это делаю уже не задумываюсь...
Хотя эта аватара у меня сделанна в CorelDRAW 11...(правда она простенькая ,но как известно просто но со вкусом...))))))))
Bizzare,пиши ищё,как раз для тех кто ентого не знает описанно очень подробно!!!!!

Kesha-mipt
27.04.2006, 11:38
Bizzare, а ты можешь описать как с помощью того же фотошопа сделать анимированную аватарку? А то вот именно с фотошопом мне когда-то и не хватило времени разобраться, делал в других редакторах, но там меньше функций

Bizzare
27.04.2006, 12:15
Bizzare, а ты можешь описать как с помощью того же фотошопа сделать анимированную аватарку? А то вот именно с фотошопом мне когда-то и не хватило времени разобраться, делал в других редакторах, но там меньше функций

Kesha-mipt, я вообще-то далеко не профи в этом деле! В фотошопе, насколько я знаю, анимацию делать нельзя. Можно в Image Ready, но я с ним тоже неочнь знаком, но что-то примитивное сделать могу. Если интересно, то надосуге состряпаю урок.

tp
27.04.2006, 14:15
Image Ready в имече реадаре тока кадравые анимации можно днлать )) и все достаточно просто ))
1) Врубаем прогу)
2) Сварачиваем ее)
3)Создаем папку )
4)туда впиховаем подготочленные картинки)
5)Разварачиваем Image Ready
6)ТЫкаем File>Import>Folder as Frames и выбираем папку где лежат подготовленные картинки))
7) Откроется линейка из наших ресунков))
8) Если что то не устраивает можно поменять:
а)Картинки местами (просто нажмите на нужнвую картинку и удерживайте кнопку и перетаскиваете картинку на нужное место)
б)Можно настраивать интеревал перехода на следующий рисунок)) (под каждым рисунком в стандарте должно быть таписано следующее:0 sec. и значек ......кликаете сюди и выбираете онтервал)))
когда вы все настроили необходимо правельно сохранить))
1)тыкаете File>Seve Optimized As .... и сохраняете свой прект так как показано на рисунке ())) :best: :lang: :lang:

Grafinya
27.04.2006, 14:44
А если у меня при сохранении дает только тип файла *.jpg *.html?
А *.gif нет :cry:
Помогите!!!!!!

Bizzare
27.04.2006, 15:21
А если у меня при сохранении дает только тип файла *.jpg *.html?
А *.gif нет :cry:
Помогите!!!!!!

Вообще странно, если нажимать save optimized as... там должно быть gif!

Попробуй тогда file-> Prewiew in-> iexplore (или какой у тебя браузер) - должна открыться картинка в браузере и тогда ее можно сохранить правой кнопкой - сохранить рисунок как.

Grafinya
27.04.2006, 18:13
Bizzare, спасибо!!! :lol3: У меня все получилось.

Yago De Malina
27.04.2006, 18:25
Grafinya, а где результат? :)

Grafinya
27.04.2006, 18:44
Yago De Malina, если админы поменяют, то скоро будет :lol3:

tp
27.04.2006, 23:57
одним словом спасибо tp)))) :lol: :lol: :cry: :aaa: :aaa:

Kesha-mipt
28.04.2006, 00:22
на сколько я знаю Image Ready - это приложение к Фотошопу
спасибо за урок
будем пробовать

Small
09.05.2006, 18:55
это канечно все позновательно :mad:
но как быть с качеством?!
если сначала рисуеш с разрешением 1024х768 (т.к. с таким разрешением удобнее рисовать) а патом меняеш размеры до нужных (100х100 или 80х80 и т.п.) то качество заметно ухучшается =(
ЗЫ относится ко всем форматам файлов
ЗЗЫ к примеру у кулера качество навысоте при маленьких размерах файла =(

ТАК КАК БЫТЬ ?! :lol3:

STLG
09.05.2006, 19:53
помоему все дело в разрешении....
*дальнейшие объяснения могут быть не совсем верными но я старался объяснить так как это понимал я :lang:
вот смотри ты создаешь файл с разрешением 72 пикселя на дюйм(надеюсь с единицами не промахнулся) а потом его уменьшаешь и мне кажется что разрешение тож уменьшается......ну представь что взял картинку за край и стал ее уменьшать....она становится меньше в размерах, но на 1 дюйм уже приходится не 72 пикселя а довольно меньшее их число......

Small
09.05.2006, 20:53
помоему все дело в разрешении....
*дальнейшие объяснения могут быть не совсем верными но я старался объяснить так как это понимал я :lang:
вот смотри ты создаешь файл с разрешением 72 пикселя на дюйм(надеюсь с единицами не промахнулся) а потом его уменьшаешь и мне кажется что разрешение тож уменьшается......ну представь что взял картинку за край и стал ее уменьшать....она становится меньше в размерах, но на 1 дюйм уже приходится не 72 пикселя а довольно меньшее их число......
я примерно понял о чем ты говориш :lol3:
но мне всетаки важен ответ на вопрос как добиться хорошего качества :mad: как у кулера и стигмата:redsmile:

Crazy Macho
19.05.2006, 16:22
Три статьи написанные мною.

Создание аватары с помощью Photoshop & ImageReady
Создание аватар с помощью Jasc Animation Shop
Создание аватары с помощью Ulead Gif Animator

Посмотреть статьи (http://design.payk.org/modules.php?name=News&topic_id=13)

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

neonka
10.04.2007, 20:19
У меня всё получилось, но чаще всего беру готовые аватары

STLG
10.04.2007, 21:52
хз как у других, но для меня самое сложное в создании это придумать эффект анимации....
чес слово- его никто не описывает, а просто бросают фразу "динамический".
а когда мысли на исходе даже не знаешь как оживить авку....