Урок № 1. Аватар "Искушение" (анимация - автор Айс)
Я пользовалась Abode Photoshop CS3 (версия 10.0), русифицированный. Сразу же скажу, 3 и 2 отличаются анимацией. В 3 фотошопе анимация уже встроена в фотошоп, во 2 она представлена отдельно программой Image Ready. Вот и все различие, по-крайней мере для нашего сегодняшнего урока. Так же для тех, у кого фотошоп на английском, я сделала скрины. Надеюсь, они Вам помогут. Итак, начали.
1. Выбираем картинку. Я взяла эту:
http://i079.radikal.ru/0904/85/f8aeb16d5cb7.jpg
2. Как видите, она немного маленькая. Наш форум поддерживает авки размером 150*150. Данная картинка 100*100, поэтому изменяем размер картинки. Заходим в меню:
Изображение=>Размер изображения:
http://i036.radikal.ru/0904/1c/029e4d00814c.jpg
Открывается окно, в котором мы ставим размер 150. Проверьте, стоит ли у Вас галочка «Сохранять пропорции». Если ее нет, обязательно поставьте. Итак, устанавливаем 150 пикселей и жмем ОК:
http://s54.radikal.ru/i144/0904/66/ee454f61daef.jpg
Картинка немного увеличилась. Теперь Вы видите какие-то символы внизу картинки. Они нам не нужны, поэтому будем избавляться от них.
3. Для начала выберем черный цвет – основным. Для этого щелкаем левой кнопкой мыши на верхнем квадратике цвета:
http://s60.radikal.ru/i170/0904/5b/d128dd82f307.jpg
Получаем вот такое вот окно, в котором выбираем черный цвет и щелкаем ДА:
http://s45.radikal.ru/i110/0904/99/a270f6485123.jpg
Затем выбираем инструмент кисть, с диаметром 13:
http://s57.radikal.ru/i158/0904/44/edd380d9cd7c.jpg http://s39.radikal.ru/i085/0904/73/a85104b3235d.jpg
И аккуратненько закрашиваем слова. Если Вы после этого пройдетесь вдоль контуров девушки, тоже аккуратненько, и по всей остальной черной поверхности, будет тоже хорошо. Вот что Вы получите в результате этой нехитрой операции:
http://i044.radikal.ru/0904/13/c11f714c6123.jpg
4. Идем далее. Так как мы будем делать слово так, чтобы оно появлялась якобы из дыма, то мы должны расположить каждую букву на отдельном слое. Для начала берем инструмент текста:
http://s54.radikal.ru/i145/0904/cf/ad6dd50212a3.jpg
И пишем внизу картинки первую букву, это заглавная буква «И». Параметры текста я взяла следующие: размер=30, цвет – белый, шрифт – Vivaldi:
http://i045.radikal.ru/0904/c2/b47434806287.jpg
http://s55.radikal.ru/i150/0904/09/74a032f4726b.jpg
http://s58.radikal.ru/i162/0904/9d/79f0316b63eb.jpg
5. Теперь надо бы сделать эффекты буковки. Для этого идем в меню:
Слой=>Стиль слоя=>Параметры наложения
http://s56.radikal.ru/i154/0904/0d/df7ef23f6fe1.jpg
В появившемся окне задаем следующие настройки:
http://s48.radikal.ru/i122/0904/c0/bc5d21ae423f.jpg
http://s46.radikal.ru/i113/0904/af/40d3c1f0ca12.jpg
http://s51.radikal.ru/i132/0904/d2/8a7e027f9e38.jpg
6. Далее, чтобы не потерять настройки текста и все остальное, мы дублируем слой «И» аж 9 раз, то бишь по числу букв и точек в нашем слое. И размещаем наши буквы и точки как полагается. Делаем это следующим образом.
Нажимаем правой кнопкой мыши на слое «И», и в выпавшем контекстном меню выбираем команду «Создать дубликат слоя»:
http://s52.radikal.ru/i136/0904/bc/310e6e9e5d87.jpg
Затем берем инструмент Перемещение:
http://s56.radikal.ru/i151/0904/a1/aae78629536a.jpg
И тащим наш слой туда, где будет буква "с":
http://s52.radikal.ru/i137/0904/bd/9c8038aa09ea.jpg
И с помощью инструмента Текст, убираем букву «И» и пишем букву «с»:
http://i010.radikal.ru/0904/ab/420110ef11a6.jpg
Если Вы обратите внимание, то новый слой переименовался и стал слоем «с».
Эти действия повторяем пока не получим на нашей аве полное слово:
http://s47.radikal.ru/i116/0904/d3/b04bd505d67c.jpg
7. Теперь, когда слово полностью написано, мы применяем фильтр, чтобы оно расплывалось. Для этого делаем следующее. Сначала отключаем видимость всех буквенных слоев, кроме первого, с буквой «И», для этого нажимаем на глазик около каждого слоя, пропадает он и очередная буква/слой:
http://s53.radikal.ru/i141/0904/56/010a7b09bcff.jpg
http://s40.radikal.ru/i087/0904/52/637ee91f5a7a.jpg
http://s48.radikal.ru/i120/0904/80/71134fb299f4.jpg
8. Теперь начинаем работу с фильтрами. Покажу пример, как обычно, на первом слое. Для того, чтобы начать работу с фильтром нам нужно несколько раз сделать дубль того слоя, к которому будем применять нужный нам фильтр. Итак, делаем дубль слоя «И». Я делаю 6 дублей. Как делать дубли, я Вам уже рассказала. После дубликации палитра слоев будет выглядеть следующим образом:
http://s44.radikal.ru/i105/0904/7e/0ccd083c36a1.jpg
Делаем видимым первую копию слоя «И1», и применяем к нему фильтр. Идем в меню:
Фильтр=>Искажение=>Рябь..
http://s41.radikal.ru/i092/0904/06/b19ca5e6872c.jpg
После этого выскочит окошко, в котором нужно нажать ДА:
http://s53.radikal.ru/i141/0904/78/1738725e1224.jpg
Далее выйдет окно самого фильтра, в котором устанавливаем параметры:
http://i076.radikal.ru/0904/45/ca714b8749aa.jpg
Идем далее и применяем к последующим копиям слоя «И» тот же самый фильтр, только увеличивает один параметр – проценты. То есть – 200, 300, 400, 500, 600. После применения последнего фильтра слой будет выглядеть вот так:
http://i073.radikal.ru/0904/ed/d4e3b9310f63.jpg
С остальными слоями делаем тоже самое. То бишь, дублируем и применяем фильтр, увеличивая изображение. Работа эта хлопотная, так что заготовьтесь терпением.
9. Теперь, после всего дублирования и применения фильтров, у Вас куча слоев. А еще я решила сделать небольшую рамочку. Вы можете не делать ее, просто пропустив данные пункты и перейдя к заключительной стадии – анимации. Если же нет, то следуем за мной.
Делаем несколько дубликатов основного слоя. Я сделала пять. А потом оставляем глазик на первой копии основного слоя и идем в меню:
Слой=>Стиль слоя=>Параметры наложения
В появившемся окне задаем следующие настройки:
http://s42.radikal.ru/i098/0904/d7/9bf6dc04db35.jpg
Переходим в окне и повторяем действие с Настройками, только чуть их изменяем:
http://s48.radikal.ru/i121/0904/13/910e1d9ab430.jpg
10. Теперь, когда у нас все готово, мы приступаем к последнему этапу – анимация. Если у Вас CS3, то анимация у Вас уже встроена. Если же у Вас CS2, то Вам стоит сохранить свою работу как *.psd (стандартный формат) и закрыть ее. Далее открываем Image Ready и открываем свою работу. В любом случае, если окно анимации у Вас не открыто, то идем в меню:
http://s47.radikal.ru/i118/0904/62/988b04607a88.jpg
И получаем внизу окошко анимации:
http://s58.radikal.ru/i160/0904/51/3dff66412908.jpg
На картинке показано окно анимации, а красным обведена иконка «Создать новый кадр». Ей мы будет пользоваться очень часто.
Итак, начинаем анимировать нашу картинку. Вся фишка в том, что на кадре отображаются только те слои, где стоит «глазик». Не понял?? Чечас объясню, постараюсь точно.
Итак, первый кадр у нас уже есть. Он одной картинкой, то есть с одним фоном. Делаем второй кадр, нажимая на кнопку, обведенную выше красным:
http://s52.radikal.ru/i136/0904/55/1201aeee53ca.jpg
И на нем отмечаем видимым самый первый слой, с самой первой буквой, вот так:
http://i074.radikal.ru/0904/6d/bebe6a29c5e2.jpg
Затем делаем еще один новый кадр, снимаем видимость со слоя «И6» и ставим видимость на слой «И5», и так далее, пока не будет полное слово.
http://s61.radikal.ru/i171/0904/c0/d10a90cc1c08.jpg
http://i012.radikal.ru/0904/18/6c947a66158c.jpg
http://s41.radikal.ru/i092/0904/82/b7e9d0a6f2e7.jpg
http://s52.radikal.ru/i137/0904/eb/a10579d6041b.jpg
http://s49.radikal.ru/i126/0904/88/0fd91d308d26.jpg
http://s48.radikal.ru/i120/0904/59/5c3634612660.jpg
Итак, у меня получился 71 кадр!!!! Теперь я хочу сохранить этот результат, для этого:
В Image Ready: иду в меню: File=> Save optimized as и выбрать формат *.gif. Теперь идем и смотрим на конечный результат. Скрины приложить не могу, у родителей только CS3.
А вот если Вы в нем, то тут процесс сохранения немного другой. Идем в меню: Файл=>Сохранить для Web и устройств…
http://s58.radikal.ru/i161/0904/f3/1f0cd29dce77.jpg
Вы получите вот такое вот окошко:
http://s54.radikal.ru/i145/0904/c0/f7947f159764.jpg
И все, что Вам надо, это нажать Сохранить и усе.
Вот, что выйдет в результате.