Фотошоп для новичков, изучаем анимацию по статьям из Интернета., Фотошоп для новичков, изучаем анимацию по статьям из Интернета. Опции

[Лера]

Изучаю фотошоп и анимацию в фотошопе второй вечер. Хочу поделиться опытом.;)

[МАК]

Лера, вы уверены что по этому уроку можно анимировать глаза??? (IMG:style_emoticons/default/aha.gif) Да ещё и новичкам..

[Лера]

Лера, вы уверены что по этому уроку можно анимировать глаза??? (IMG:style_emoticons/default/aha.gif) Да ещё и новичкам..

Мак, опять где-то ошибка? Вроде моргают. (IMG:style_emoticons/default/aha2.gif)

[МАК]

Мак, опять где-то ошибка? Вроде моргают. (IMG:style_emoticons/default/aha2.gif)

Да нет, Лера, дело не в том как вы сделали, а в том как написано что и как делать.
Я вот прочитала и даже зная, как делается все это, с трудом поняла о чем вы пишите и как делаете.
Зачем вам такое большое количество слоев (IMG:style_emoticons/default/aha2.gif) и что вы рисуете САМИ глаза, опять вопрос ЗАЧЕМ?
Все делается на 2 слоях( оригинал и зарисованные глаза, которые выделяется при помощи быстрой маски и зарисовываются)
Открыла вашу аватарку.. 4 кадра, не рационально коллега, достаточно2!!! кадра, а эффект тот же самый
Вообще-то урок не сложный, но для более понятного объяснения скрины нужны, у меня нет программки такой, да и времени нет , если честно.
По себе знаю, хороший , толковый урок, по анимации найти не легко в инете, но я училась на хорошем сайте, поверте, то что тут написано не является уроком и врядли у кого-то после первой попытки появится желание повторить.. потому что НИЧЕГО не ПОНЯТНО!
Только без обид, Лера, хочется что бы на нашем форуме были хорошие и толковые темки о фотошопе, и вам, как пару дней знакомой с этой программой мой респект, однако, для написания уроков надо ещё немного опыта набраться!

[Лера]

Мак, у меня тоже нет такой программы, чтобы рисунки вынести. Но в общем-то довольно подробно всё расписала. Согласна, на каких-то примерах нужен рисунок, но здесь можно обойтись. Помните ваш урок про снег, урок лично мной выполнялся не по рисункам, а по шаговым пунктам, которые Вы описываете. Главное - понять технологию. Мак, мою собачку в теме снег помните? Там два слоя, только с 4-мя получается, то, что видите. Может дело в версии фотошопа.
А что конкретно не поняли?

[МАК]

Нашла урок, который по вашей схеме, Лера выполняется
И так урок взят с avatar.ucoz.ru

Предлагаю вам обучиться уроку – моргающие глаза. wink
Все готовы? Приступим!
1. Открываем любой файл, где реально сделать моргающие глаза. Желательно, чтобы контуры у глаз были одного цвета. Ну, примерно как у меня на картинке.


(IMG:http://img77.imageshack.us/img77/9959/av2981tz.jpg)

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

(IMG:http://s51.radikal.ru/i131/0908/42/4bc95834a255t.jpg)

Как видите, появился новый слой.

(IMG:http://s42.radikal.ru/i097/0908/80/37ab5ea960fat.jpg)




3. Теперь(мы находимся на слое 1) мы начинаем тупо закрашивать глаза. В моем случае это чёрная кисточка (для включения кисти кликнем на (IMG:http://img77.imageshack.us/img77/6011/285959345it.gif) Правой кнопкой мыши жмем по нашей картинке. Появляется окно. Выбираем кисть где-то с размером 3.

(IMG:http://img237.imageshack.us/img237/7585/336411918pu.gif)

4. Теперь у нас всё готово для работы. Приближаем картинку где-нибудь до 800 % - так нам будет легче закрашивать глаза. Теперь убеждаемся, что мы стоим на слое 1 и начинаем медленно закрашивать глаза нужным нам цветом. У меня всё произошло так.

(IMG:http://img176.imageshack.us/img176/9176/860287626ns.gif)

5. Хорошо, теперь создаем ещё один слой (делаем это так же, как и в первый раз, т.е. нажимаем по листку с завернутым краем). Появился слой 2. Переходим на него (если мы на нем не стоим). Начинаем закрашивать глаза дальше. Вот что получилось у меня.


(IMG:http://img237.imageshack.us/img237/7461/200530859fi.gif)

6. Видите, как всё легко! Теперь создаем ещё один слой, таким же способом как первый и второй. Появляется слой 3. Переходим на него (если мы на нем не стоим) и просто закрашиваем последнюю часть глаза! Как у меня.


(IMG:http://img165.imageshack.us/img165/2526/676475227fm.gif)


7. Вот и всё! Заготовка для нашей анимации готова. Теперь переходим в Image Ready. (сочетание клавиш Shift+Ctrl+M)

[МАК]

8. В программке мы видим наш файл и некоторые нужные нам таблицы. Это прежде всего окно анимации и слоев. Для начала нам нужно сделать 3 дубликата. Нажимаем на эту кнопку


(IMG:http://i026.radikal.ru/0908/ad/134b000b178bt.jpg)

9. Появляется дубликат.


(IMG:http://i073.radikal.ru/0908/33/34c446207218t.jpg)


10. Нажимаем ещё раз – появляется ещё один.

(IMG:http://s50.radikal.ru/i127/0908/0e/a66fae7f1c8at.jpg)


11. Нажимаем ещё раз – появляется 4-ый дубликат.
12. Теперь время поработать над слоями. Переходим на первый дубликат (в окне анимации он под номером два, т.е. этот )


(IMG:http://s13.radikal.ru/i186/0908/e6/a58ac952f972t.jpg)

13. Выставляем глазик в таблице слоев таким образом.

(IMG:http://s44.radikal.ru/i106/0908/c8/2d09ffa9601at.jpg)

14. Теперь переходим на второй дубликат (в окне анимации он находится под цифрой три) и выставляем глазик таким образом.


(IMG:http://i011.radikal.ru/0908/f5/ffe036ce22b2t.jpg)

15. Теперь переходим на третий дубликат(4-ый в окне анимации) и выставляем глазики таким образом.

(IMG:http://s39.radikal.ru/i086/0908/3f/5217cd3c5943t.jpg)


16. С этим мы закончили.…Осталось совсем немного! Теперь нам надо выставить время…Я думаю,0.1 сек, подойдет. Для этого жмем на маленькую стрелочку рядом с 0 сек на каждом дубликате, и так находим 0.1, таким образом.


(IMG:http://i058.radikal.ru/0908/54/3a40613569a4t.jpg)

17. Такое проделываем с каждым дубликатом. Теперь нам надо показать обратный путь моргания. Находим третий номер в таблице анимации, нажимаем дубликат слоя (IMG:http://img145.imageshack.us/img145/2326/164hx.gif) Появляется дубликат дубликата. Нажимаем на него и, УДЕРЖИВАЯ левую кнопку мыши – перетаскиваем в конец.
18. Повторим такую же операцию с 1 дубликатом, т.е. вторым в таблице анимации. Нажимаем на кнопку дубликата и перетаскиваем тот самый дубликат в конец.
19. Нажимаем на кнопочку ”Play”. Можем наслаждаться…
Вот что получилось у меня…

(IMG:http://img234.imageshack.us/img234/4649/175bl.gif)

[МАК]

Мак, у меня тоже нет такой программы, чтобы рисунки вынести. Но в общем-то довольно подробно всё расписала. Согласна, на каких-то примерах нужен рисунок, но здесь можно обойтись.

Я думаю, что урок будет ответом на ваши вопросы, Лера!

Помните ваш урок про снег, урок лично мной выполнялся не по рисункам, а по шаговым пунктам, которые Вы описываете.

Вот поэтому у вас не сразу все получилось и вопросов у вас была масса , потому что мои объяснения основаны были на КАРТИНКАХ, фотошоп я увидела впервые на немецком и если я буду английский фотошоп, переведенный на немецкий, переводить на русский, то видит бог, ни один полиглот ничего не поймет (IMG:style_emoticons/default/umora2.gif) А так показал картинку и все можно понять, даже если не знаешь название инструментов. (IMG:style_emoticons/default/aha.gif)

[Лера]

На всякий, вот так должно выглядить окно анимации перед сохранением вашего рисунка в формате gif.
(IMG:http://s59.radikal.ru/i165/0909/90/5dce0bb592d2t.jpg)

Мак, спасибо, этот способ намного проще и рисунок более плавный. (IMG:style_emoticons/default/wink2.gif)

[Лера]

Блёстки нарисованные кисточкой. Версия Photoshop CS4. Русская версия.


А) Идем в фотошоп открываем картинку, берем инструмент Кисть. Жмём на этот инструмент 1 щелчок левой кнопкой мышки (1. щ. л.к.п.). На панели инструментов, открываются параметры инструмента кисть. Ищем там надпись ”Кисть”, нажимаем на треугольник конусом вниз. Перед нами открывается следующее окно.

(IMG:http://s40.radikal.ru/i087/0909/35/92b7cd9439b7.jpg)

Б) Нажимаем на треугольник выделенный красным на рисунке 1. Левой к.п. переходим на список, выбираем Миниатюрная мазка, появляется чёрная галочка, заходим второй раз в список, идём вниз по списку и выбираем Assorted Brushes – Разные кисти.

(IMG:http://i004.radikal.ru/0909/85/d0d29ae05865.jpg)

В) Выставляем размер в основном окошке кисти.(Пункт А)

(IMG:http://s48.radikal.ru/i120/0909/4c/a4dc62d9dfc8.jpg) (IMG:http://i081.radikal.ru/0909/8d/60452ccc3388.jpg)

Г) Устанавливаем динамику кисти. Для этого нажимаем F5, открывается окно управления кистями, закрыть окно тоже F5. Ставим как на картинке.
Галочка на Динамика формы и Колебание угла ставим 60% делаем новый слой (нажав на палитре слоев квадратик внизу (IMG:http://i007.radikal.ru/0909/1a/9ffee4e63128.jpg) Назовём его слой 1.

(IMG:http://s41.radikal.ru/i091/0909/8d/30a656910c23.jpg)

Д) На этом новом слое рисуем инструментом Кистью несколько крестиков (бликов) от того, где и как будут нарисованы эти блики и, будет блестеть картинка. И жмём один раз Ctrl+J (или выделяем слой один, щелчок левой к.м, потом правая к.м. выбрать в списке Создать дубликат слоя), таким образом дублируем. Переименовываем новый слой в Слой 2 (Вариант 1. Правая к.м. – параметры слоя; вариант 2 двойной щелчок на названии слоя)

Убираем глазок со слоя 2 – активность слоя.

(IMG:http://s47.radikal.ru/i116/0909/d9/c408f5097486.jpg)

Всё готово для анимации.

[Лера]

Е) Для старых версий открываем (IMAGE READY). В новых версиях эту функцию перенесли в фотошоп. На панели инструментов где файл и т.п. Ищем надпись - окно. Нажимаем, в списке ставим галочку где слово анимация.

Ж) Открывается окошко анимации, пока там только один рисунок – кадр.

(IMG:http://s47.radikal.ru/i118/0909/fa/d57e881acf82.jpg)

З) Нажимаем на панели анимация икону «квадрата с загнутым углом»((IMG:http://i052.radikal.ru/0909/d3/548e8ec8ca79.jpg)),
делаем второй кадр и ставим глазик на Слой 2 .

(IMG:http://s55.radikal.ru/i149/0909/f1/4ae26c6ebc55.jpg)

И) Под кадрами в палитре Анимация, стоит время, по умолчанию 0 сек, нажав на значение время (под кадром в палитре Анимация) установите свое время, я выбрала 0.1 сек.

К) Сохранение. Теперь идём в Меню - Файл - Сохранить как оптимизированный. Для версии CS 3. Для CS 4 – Файл – в списке выбрать надпись Сохранить для Web и устройств. Настройки автоматические, нажимаете внизу под всеми настройками кнопочку «Готово».

Вот и всё.;))

[Лера]

Мой результат

(IMG:http://s60.radikal.ru/i168/0909/3f/e6bfecf6f284.gif)

Мак, а Вы случайно не знаете с чем связана заторможенность мигания звёздочек при совмещении двух анимаций?

(IMG:http://i036.radikal.ru/0909/0c/e4bd90f23947.gif)

[МАК]

А как вы думаете, Лера? (IMG:style_emoticons/default/dry.gif) Почему тормозят ваши звездочки при наложении двух анимаций, ГДЕ ВЫ УКАЗЫВАЕТЕ РАЗЛИЧНОЕ ВРЕМЯ СКОРОСТИ КАДРОВ! Один кадр у вас 1 сек двигается. второй 0,1 (IMG:style_emoticons/default/aha.gif)

[Лера]

Это профессиональный образец расположения на объекте звёздочек.

(IMG:http://s48.radikal.ru/i121/0909/1a/f7abf7f7cfe9.gif)

Спасибо Мак! На досуге поэкспериментирую. (IMG:style_emoticons/default/sun.gif)

[МАК]

Это профессиональный образец расположения на объекте звёздочек.



Спасибо Мак! На досуге поэкспериментирую. (IMG:style_emoticons/default/sun.gif)

Лера, в фотшопе вы такого не сделаете, это спец программа есть.. название не знаю, если уж сильно заинтересует поищите в гугле анимациооные программы их много.. и как правило одни предназначены для одного эффекта , другие для другого, нет такой что бы все могла как фотошоп ( пусть и не так качественно) (IMG:style_emoticons/default/aha.gif)

[Лера]

Мак, а я думала - это в фотошопе, красиво.;)

[Лера]

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

Создаём блёстки, версия CS4 фотошопа, русская версия.
1. Открываем файл.
Берём инструмент «Лоссо» или инструмент «Быстрое выделение» ( на панели задач где надпись «файл» и т.д. значок спичка с «+» увеличение радиуса выделения; с «-» уменьшение радиуса выделения)

(IMG:http://s53.radikal.ru/i140/0910/4f/0321a8be5de7.jpg)

2. Наводим инструмент на ту часть, которую будем выделять на картинке. Аккуратно выделяем. На рисунке ниже показана область выделения, на которой мы будем создавать блёстки.

(IMG:http://i061.radikal.ru/0910/6c/e7d5c04bf2e3.jpg)

3. Устанавливаем цвет наших будущих блесток. Нижний квадратик, верхний пока не трогаем.

(IMG:http://i061.radikal.ru/0910/31/d2c9fe663241.jpg)

4. Идем в Выделение - Цветовой диапозон. В пункте 1 мы выделяли заранее области, поэтому когда мы зайдём в цветовой диапозон, они будут уже заранее выделены, можно чётче их откорректировать. Белый цвет – это область на которой будут блёстки. Чёрный цвет – область, которая останется без изменений. В том случае, когда нет заранее выделенной под блёстки области, то выполняют следующую команду. Переставить с цветового изображения на выделенная область – это в том случае если заранее мы не выделяли область под блёстки, и пипеткой указываем, ту область, где планируются блёстки. Почему мы этого не делали. На больших фотографиях, выделяются лишние элементы, блёстки оказываются в той части, где они нам не нужны. В нашем случае инструмент пипетка позволяет выбрать второй цвет наших блёсток.

(IMG:http://i068.radikal.ru/0910/ad/58eaefa08d22.jpg)

(IMG:http://s15.radikal.ru/i188/0910/3f/4cd0a6e4a836.jpg)
(IMG:http://i063.radikal.ru/0910/87/147d1bfd4b5e.jpg)

(IMG:http://s19.radikal.ru/i192/0910/77/135f8a49aafe.jpg)

[Лера]

5. Нажимаем Ctrl+J. Получаем Слой1. Переходим на панель Слоёв. Выделяем Слой 1. Он становится синим. Идём в Фильтр- Шум- Добавить шум.
Устанавливаем следующие параметры.

(IMG:http://s40.radikal.ru/i089/0910/c6/71e4e550f5c1.jpg)

(IMG:http://s46.radikal.ru/i112/0910/fc/89253bdc0ed4.jpg)

Чем меньше проценты, тем мельче блёстки.[b]

6. Создаём копию со слоя 1. Слой 1 копия. Отключаем Слой 1. Убираем глазик. Повторяем процедуру пункта 5. Я ставлю каждый раз меньше значение на 5-10 единиц. Копируем Слой 1 Копия, получаем Слой 1 копия 2. Отключаем Слой 1 копия. Повторяем п.5.

(IMG:http://s61.radikal.ru/i174/0910/da/6d8ca744ea6f.jpg)

7. Оставляем активным только наш фон, на котором находится основное изображение, наша картинка. Не слой 1, а фон. Открываем окно Анимации. Команда: Окно-Анимация.
Дублируем изображение в окне анимации. На первом изображении - активны фон и слой 1. На втором - фон и слой 1 копия. Ещё раз копируем изображение 2 в окне анимации и делаем активными фон и слой 1 копия 2. Устанавливаем время. Сохраняем – файл – для Web устройств.

(IMG:http://i074.radikal.ru/0910/14/04e64ebc2dbat.jpg)

[Лера]

Забыла самое главное.
Когда всё готово, устанавливаем цвет. Смотреть ниже. В окне анимации для каждой картинки. Чем больше процентность, тем крупнее блеск.
(IMG:http://s49.radikal.ru/i126/0910/6d/13d3012587fa.jpg)

Результат.

На рисунке 1 мелкие блёстки и добавлены дополнительные слои, чтобы сделать ещё и крупные блёстки на колье, на рисунке 2 крупные.
Рисунок1
(IMG:http://s40.radikal.ru/i087/0910/41/87ccc40414bb.gif) (IMG:http://i024.radikal.ru/0910/8e/d0e9d3ab3a27.gif)

[Лера]

Таким же способом анимирования, можно создавать блики. Для этого открываем фотографию, выбираем команду Фильтр- Рендеринг-Блик. В слоях, копируем фото с бликом, повторяем процедуру фильтр - блик, увеличиваем частоту блика, по желанию можно создавать несколько бликов. Ещё раз копируем фото1. Повторяем команду и анимируем по вышеуказанной схеме.