Дата: Четверг, 15 Сентября 2011, 15:20 | Сообщение # 1
Первая леди "Красного Лаптя"
Группа: Первая леди на деревне.
Сообщений: 63087
Статус: Вне сайта
Для того чтобы не захламлять тему с уроками их излишним количеством в отдельных одностраничных постах я решила собрать все уроки по созданию несложной анимации в одной теме. Вам остается только выбрать с какого именно начать. В этой теме - никаких комментов и вопросов! Только уроки, найденные в сети! Примечание: Тут нет и не будет распределения уроков от азов для чайников до сложных уроков. Всё выкладывается по мере нахождения в сети и по мере написания уроков теми добрыми и умными людьми, которым не лень это делать. Вас что-то не устраивает? Посетите соседние темы со ссылками на уроки - там найдете уроки и ссылки на скачивание и уроков и многих программ. Напоминаю: это симс-форум, а не форум по фотошопу. Тут все что что найдено выкладывается по мере сил, желания и времени. С любовью.
Когда мы работаем в фотошопе и что нибудь делаем в формате PNG а потом его еще и анимируем..ну, например. добавляем свечение...блестки..лучи...то при сохранении готовой работы вокруг неё мы видим досадное белое свечение...которое раздражает...так вот...это издержки сохранения работы в формате GIF ..и избавиться от этого просто...посмотрите на скрин и выставьте значения так как там они указаны...
Долго с этим билась, вот и решила рассказать. Сначала надо скачать и установить QuickTime (у меня 7.3) Поищите здесь. Открываем фотошоп. Идем сюда Открыли окно анимации. Дальше открываем картинку (по стрелочкам):
Ищем нужную папку, но фотошоп в ней ничего пока не видит... Ставим по стрелочке звездочку * и жмем load. Теперь увидел, наконец:)
Выбираем нужную картинку, вылезает табличка, в ней проставляем все, как у меня (не знаю все ли правильно, но работает...)
Cохраняем так: откроется окошко, жмем Save только gif еще надо тут поставить пишем имя анимашки и сохраняем)))
В CS2 и раньше (когда работаем в ImageReady), сохраняем так: Скрин маленький, умыкнула у кого-то через поиск картинок.. какой нашла, сорри((((
Или просто - нажимаем сочетание клавиш Alt+Shift+Ctrl+S.
Уверена, что эта тема волнует многих любителей создания анимации. На уровне своих знаний постараюсь объяснить причины искажений. Формат GIF, в котором сохраняется анимация, поддерживает всего 256 цветов. В это количество входят все оттенки и полутона изображения. Посмотрите на два изображения с анимацией:
Слева я создала картинку с однотонным фоном, на светофоре применила стиль слоя"внутреннее свечение" для огней и панели. Так как фон однотонный и на всей картинке только светофор, то логично, что я уместилась в 256 цветов и видных искажения на анимации нет.
Справа я добавила разноцветные блики на фон и к панели добавила внешнее свечение. Как видите, появились искажения цвета и на огнях и на фоне, так как я вышла за предел 256. Что касается изображений, которые вы берёте из интернета для создания анимации, то здесь следует помнить следующее:
Изображения в формате JPG сохраняются с разным уровнем сжатия. Любое сжатие добавляет к изображению артефакты и шумы, которые "вылезут" при сохранении анимации. Изображения в формате PNG, имеющие много полутонов тоже "поплывут" .
Вывод:
1. При создании анимации из своего рисунка применяйте меньше оттенков и полутонов.
2. При создании анимации из готовых фонов и клипартов учитывайте качество и цветовой спектр исходного материала. Как учитывать? Визуально и на удачу. Бывает, смотришь - чёткое изображение, полутонов мало,как гриЦа, всё при нём. А добавишь чо нить цветной кисточкой и на радостях бегом сохранять анимашку в предвкушении классной анимации, а там "абзац" - цвета стали в одном оттенке, или с жуткими искажениями.
3. Оптимизация для наилучшего сохранения цвета:
модель редукции цвета - адаптивная
определение модели дизеринга - случайное Дизеринг позволяет имитировать цвета, которые отсутствуют в системе цветного изображения компьютера. Более высокий процент дизеринга позволяет передавать больше цветов и деталей, но также приводит к увеличению размера файла. цвета - 256 дизеринг - 100%
Но помните - чем лучше качество, тем тяжелее изображение. С теплом, Ольга Бор.
1. У вас не оказалось под рукой нужного глитера ??? не страшно его можно сделать))) и так начнём...
2. Есть два варианта- можно открыть новый документ размер 50*60(60*60) или меньше( примерно знаете каких размеров может быть глиттер )цвет документа белый. 3. Затем заливаем его нужным цветом у меня это 1 глитер -чёрный ,2 -розовый ,а вот 3 -зелёный просто вырезанный кусочек из картинки... это на тот случай если цветов в палитре вам не хватило.
4. Далее рассказываю про чёрный глитер- и так у нас получился чёрный квадрат жмем ctrl+J три раза, получаем три слоя... слой под названием фон удаляем то есть кидаем в мусор.
5. Теперь создаём узоры на слоях делаем активным первый слой и рисуём на нём кисточкой у меня это звёздочки розовые ,скажем 3 звёздочки , теперь переходим на второй слой там рисуем 4 ,затем переходим на третий слой рисуем 5 ...количество звёздочек по желанию и по фантазии ,главное чтобы на каждом слое их было разное количество и чтоб они располагались в разных местах квадрата ведь они составляют наш узор не забудьте при переходе закрыть глазик на том слое откуда ушли и открыть на том на котором собираетесь рисовать.
6. Теперь переходим в имидж реди(или открываем панель анимации) и выставляем анимацию. Сохраняем полученный результат.
7. На розовом и зелёном глиттерах узор создан фильтрами ,тоесть мы выделяем наш квадратик... пипеточкой выделяем цветовой диапазон и далее фильтр-шум-добавить шум(filter-noisse-add noisse) на втором и третьем слое уменьшаем значение amout.
8.Ну...и вот картинка покрашенная этими глитерами.
Цель этого урока не научить новому приему анимации, а просто рассказать, как создается анимация в фотошопе. Так сказать, основы. Для урока Вам понадобятся 3-4 статичные картинки (jpeg или png). Ну, а теперь топаем по ссылочке в заголовке у кого есть авторизация на лире и учимся. Нету? Заводим почту. Лень? Ищем материальчики сами.
Открываем картинку с выбранным персонажем в ФШ, убираем замочек. Сразу необходимо определиться какие части куда будут двигаться. В моём случае будут двигаться 2 лапы и хвост, поэтому необходимо перенести их на отдельные слои.
Удобным способом выделяете 1 часть. ПКМ щёлкаете по изображению и в выпавшем окне выбираете "скопировать на новый слой".
Лапа перенесена на новый слой. Теперь нам необходимо удалить лапу с основного фона. Стоим на слое с лапой и с зажатой клавишей Ctrl мышкой щёлкаете по картинке в окне слоёв. Выделение снова загрузилось, но нам необходимо его немного уменьшить, чтобы не было пробелов. Включаем режим "быстрой маски".
Берём кисть и немного закрашиваем в местах соединения с туловищем. Выходим из режима "быстрой маски" и переходим на слой с основным фоном.
Идём в РЕДАКТИРОВАНИЕ-ВЫПОЛНИТЬ ЗАЛИВКУ-С УЧЁТОМ СОДЕРЖИМОГО.
Вот чего получилось. Редактируем эту область с помощью кисти, штампа или любых удобных инструментов.
Далее переходим на слой с лапой и ластиком стираем всё лишнее. С остальными частями проделываем те же самые операции.
В итоге получается вот так.
Теперь у нас есть 4 слоя. Для удобства я их переименовала.
Подготовка к анимированию закончена. Начинаем с работы с фоном. Создаём ещё 3 копии фона.
Встаём на 2 слой с фоном, идём в ФИЛЬТР-ПЛАСТИКА.
Для начала инструментом ЗАМОРОЗКА выделяем все места, которые двигаться не должны.
Теперь берём инструмент ДЕФОРМАЦИЯ ( размер кисти зависит от картинки). И немного сдвигаем. Я двигала части в таком направлении как на скрине. Жмём ОК.
Теперь в окне слоёв встаём на слой выше. У меня это фон копия2. Снова идём в ФИЛЬТР-ПЛАСТИКА . Прежде чем приступить к передвижению жмём на кнопку ЗАГРУЗИТЬ ПОСЛЕДНЮЮ СЕТКУ. И проделываем те же манипуляции, что и с предыдущим кадром. Замораживаем части и двигаем те же участки чуть дальше. Со слоем фон копия3 делаем всё то же самое.
Теперь выставляем кадры анимации. 1 кадр.
2 кадр.
3 кадр.
4 кадр.
5 кадр.
6 кадр.
Выделяем все кадры.
Жмём сначала на кнопку "промежуточных кадров", затем на "добавление кадра".
Теперь жмём на кнопку в окне анимации и в выпавшем окне выбираем "обратный порядок кадров".
Вот что должно получиться.
Анимация основного фона закончена. Переходим к анимации частей. Я начала с верхней лапы. Создаём ещё 6 слоев и группируем, чтобы не путаться.
Встаём на 2 слой (у меня "лапа верх копия). Нижний слой не выключаем, чтобы видеть куда двигаться. Идём в РЕДАКТИРОВАНИЕ-ТРАНСФОРМИРОВАНИЕ-ПОВОРОТ.
Центр переносим в нижний правый угол. И тянем верхний левый угол влево-вниз совсем немного. Жмём Enter.
Переходим на слой выше, предыдущий слой не отключаем, чтобы видеть трансформацию. Опять идём в РЕДАКТИРОВАНИЕ-ТРАНСФОРМИРОВАНИЕ-ПОВОРОТ, переносим центр и снова тянем верхний левый угол влево-вниз чуть больше чем на предыдущем слое. С остальными слоями поступаем аналогично. Выставляем кадры на анимации.
Вот так получилось.
Теперь анимируем нижнюю лапу. Снова добавляем 6 слоёв и группируем ( 7 слоёв). Встаем на второй слой ( у меня "лапа низ копия") и идём в РЕДАКТИРОВАНИЕ-МАРИОНЕТОЧНАЯ ДЕФОРМАЦИЯ. Сначала закрепим булавкой место, которое двигаться не должно( у меня соединение лапы и туловища), затем ставим булавку для движения ( у меня- середина сердечка) и тянем эту булавку немного вверх ( лучше использовать стрелки на клавиатуре, но можно и мышкой.) На остальных слоях выполняем аналогичные действия, тянем булавку чуть больше вверх. Выполняя эту операцию не выключайте предыдущий слой, чтобы видеть на сколько нужно сдвинуть часть, старайтесь сдвигать на одинаковое расстояние. Когда всё готово распределите кадры как с предыдущей лапой.
Теперь переходим к хвосту и любым из 2-х способов анимируем его. Смотрим что получилось.
При желании можно добавить ещё пару-тройку эффектов и сохранить анимацию.
Давайте в одном уроке рассмотрим разные способы анимации родным фильтром фотошопа - Рендеринг - блик. Ну, и поучимся совмещать анимацию на разных клипартах.
По просьбе моих дорогих читателей,выкладываю пример перелистывание с использованием 6 фонов.Анимация не сложная,но требует внимание и время. Подготовка слоёв к анимации можете посмотреть Здесь
Кому интересен ход работы - пройдите по ссылке-заголовку.
не страшно его можно сделать))) 
и так начнём... 
