StyleWeb

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » StyleWeb » Архив SW » Урок "Делаем простой аватар или анимированный"


Урок "Делаем простой аватар или анимированный"

Сообщений 1 страница 2 из 2

1

Приветствую всех))) Этот урок предельно прост и идеально подходит для тех, кто в ФШ еще, как говорится, ни в зуб ногой ;)
Вы думали, сделать аватар сложно? Так вот, вы жестоко ошибались! На самом деле, нет проще дела, чем изготовить аватар (простой, без эффектов и надписей).
Для этого нам потребуется, в первую очередь, открыть фотошоп. В нем открываем понравившуюся нам картинку, File ---> Open... или же Ctrl+O. Открыли. Например, вот такую.
http://keep4u.ru/imgs/s/070228/d70c6550f1133698a3.jpg
*Далее, создаем новый файл требуемого размера (файл - новый. высота Х ширина У напр. 100*100, 120*120, в общем, рзмер аватара, который вам нужен)) и с помощью инструмента Move Tool (V) перетаскиваем изображение в новый файл.
*Все,большое изображение можно закрывать.
*Переходим к новму файлу. Если появившееся изображение вас удовлетворяет, сохраняйте. Если же нет, то подвигайте его немного, пока не дойдете до нужного результата. (видна будет только чсть большой картинки)
http://s.foto.radikal.ru/0706/c4/6f6558274f3e.jpg
или так
http://v.foto.radikal.ru/0706/bb/5d464fe830b9.jpg http://m.foto.radikal.ru/0706/af/2083e15edb35.jpg

Если вы хотите добавить рамку на аватар,
то поступите следующим образом:
1. Выделите аватар с помощью инструмента Rectangular Marquee Tool (M) (Прямоугольное выделение)
2. Не снимая выделения, нажмите на изображении правой кнопкой мыши и выберите Stroke (Выполнить обводку или как-то так, точно не знаю)
3. Выберите цвет и смело жмите "ОК".

В общем, все зависит от вашей фантазии :) Простой аватар готов)))
http://t.foto.radikal.ru/0706/a2/455b92395d1d.jpg

0

2

Делаем простой анимированный аватар

И так чуть выше научились вырезать из любой картинки аватар.. теперь сделаем из нескольких обычных один.. в котором будут сменять друг друга картинки..

1. И так.. сначала открываем те картинки которые хотим задействовать.. вот я выбрала такие:
http://img444.imageshack.us/img444/4655/29293409fi3.png
2. Теперь с помощью кодирования удерживая Shift нарезаем нужные нам квадраты. и потом в верхней панели выбираем
изображение-размер изображения (или Alt+Ctrl+I) вводим к примеру размер 150x150.. для каждой..

выберете свои картинки или вместе с уроком:
http://img251.imageshack.us/img251/3664/01jo5.gif http://img79.imageshack.us/img79/1656/02cf8.gif http://img255.imageshack.us/img255/2669/03yr3.gif http://img104.imageshack.us/img104/2910/04io2.gif
3. Выбираем один аватар (назовем его главный)..а на других 3х инструментом прямоугольная область.. выделяем полностью аватар
http://img76.imageshack.us/img76/2721/55488476wc7.png
4. теперь с помощью инструмента "Перемещение" перетаскиваем к главному.. и проделываем это с другими
http://img76.imageshack.us/img76/2799/44596913zl1.png
получается примерно такая картина.. см ниже.. остальные можем закрывать они нам больше не понадобятся..
http://img76.imageshack.us/img76/2606/53217391um5.png
5. теперь с помощью того же инструмента "Перемещение" выравниваем все аватары.. что бы кроме одной картинки не было видно других..
И размещаем авики в нужном нам порядке как они будут располагаться.. с низу вверх по возрастанию..
6. добавляем текст к каждой аватарке.. у нас выбрано
- Люблю всегда
- Ревную иногда
- А может мне..
- Забыть тебя?

и на этой стадии мы имеем:
http://img76.imageshack.us/img76/2204/35344054wj3.png
7. теперь переходим либо в ImageReady или остаемся в фотошопе.. переходим к панели анимация.. если его нет то выбираем.. Окно-анимация..
нажимаем на значок "Дублируем кадр" выделен красным авалом что бы у нас получилось 4 кадра.
http://img73.imageshack.us/img73/1536/45104316jo9.png
далее устанавливаем:
-для первого кадра (нажимая его он выделяется) в панели слоев оставляем видимым Слой1 и текст "Люблю всегда" на других снимаем глазик..
- для воторого кадра(нажимаем на него) видимы Слой1 и слой2 и текст "Ревную иногда"
-для третьего 2слой и 3слой и текст "А может мне.."
-для четвертого 3слой и 4слой и текст "Забыть тебя?"

8. Потом установим что бы анимация проходила всегда
http://img161.imageshack.us/img161/3443/14150108nj2.png
9. и нажимая плей мы получаем быстрые кадры в которых не то что текст не разглядеть так и всю картинку каждого кадра..
поэтому экспериментируем со временем понимая что когда сохраним кадры будут перебираться быстрее..
сейчас ставим на все кадры по 1,0 секунде
http://img73.imageshack.us/img73/64/10xk3.png
10. и теперь если вы довольны результатом то:
возвращаетесь в фотошоп или если вы были в фотошопе.. выбираете: файл - сохранить для web- выбирая GIF. ниже заказная и еще ниже случайная - нажимаем Save.. Мы получаем:
http://img73.imageshack.us/img73/844/005tc2.gif
11. Но возможно вы хотите более плавные переходы от одного кадра к другому
поэтому пропускаем 10 ход и продолжаем..

12. и так выделяем первый кадр нажимая на него и ниже нажимаем на кнопку "Tweens кадры анимации" выделено красным овалом.. появляется данное меню где устанавливаем как на рисунке.. я установила 4 промежуточных кадра.. чем их больше.. значит плавно получится.. но тем самым и будет возрастать вес аватарки...
http://img73.imageshack.us/img73/7401/11sp9.png
потом выделяем 2й кадр(который теперь стал №6)и проделываем тоже самое.. потом с 3 (теперь №11).. и у нас получается всего 16 кадров.. но если будем просматривать в анимации то у нас остается быстрый переход между первой и последней..

13. поэтому еще раз добавляем кадр (7 шаг) и он будет под номером 17...
копируем 1слой (Сtrl+J) и переносим его над 4слоем устанавливая видимость 4слоя и слой1(копия) и текс Люблю всегда:
http://img128.imageshack.us/img128/8420/12lv4.png
14. теперь выделяем 16 кадр и делаем ход ранее.. то есть раскладываем еще на 4.. и у нас получается всего 21 кар.. НО так как 21=1.. 21 мы удаляем.. (см хо 7 справа от выделенного есть корзина)..

15. Вот почти и все.. осталось дело за малым.. это проставить время.. на главных кадрах у нас их изначально было 4 делаем время больше чем на других.. так как на них будем задерживаться.. а на переходных делаем 0 или 0,1 сек.. больше не нужно так как у нас и так большое количество кадров..

я установила на главных №1,6,11,16 по 1,5 сек.. выбирая в функции время - другое- и прописывала его.. так как 1,0 довольно быстро а 2,0 уже медленно.. а на всех других -без задержки-

теперь переходим фотошоп ил если вы в нем и оставались осталось сохранить результат.. см шаг 10.

И вот наш результат  ^_^
http://img131.imageshack.us/img131/7413/93507157wd1.gif

0


Вы здесь » StyleWeb » Архив SW » Урок "Делаем простой аватар или анимированный"