Дата: Четверг, 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). Ну, а теперь топаем по ссылочке в заголовке у кого есть авторизация на лире и учимся. Нету? Заводим почту. Лень? Ищем материальчики сами.
Мы сегодня поговорим о том как сделать реальный снег на любой картинке, не прилагая много усилий))).Если вы обратили внимание-то мои уроки не учат вас рисовать и создавать все самим в фотошопе, , а именно использовать подручные средства, чтобы облегчить нашу работу...Зачем придумывать колесо, когда его уже до нас придумали?? Зачем тратить лишнее время и создавать анимацию снега. когда можно взять готовый анимированный шаблон,который я, чтобы облегчить вам работу уже сделала ??))))То-то же....Мы просто рационально будем пользоваться тем, что вокруг нас есть и будем учиться применять это для своих нужд...Готовы? Итак...поехали..
вот вам анимация снега и та картинка, на которую мы будем её , точнее его...снег накладывать
сохраняйте их на комп ,чтобы потом открыть в фотошопе
открываем их в фотошопе и помещаем каждую отдельно на экране фотошопа..как я уже учила вас раньше...то есть мышкой цепляем название файла и перетаскиваем на середину поля...
Для начала из анимации снега сделаем паттерны, то есть заливку для каждого слоя..Открываем нашу анимацию снежную...и видим что в неё 9 слоев...начинаем работать
идем дльше и строго сверяемся с картинками-скринами в том где должны стоять глазки и какие слои активны(затенены)
теперь выключаем все глазки на панели слоев, кроме 1 слоя а на панели анимация становимся на 1 кадр
далее ВНИМАТЕЛЬНО и ПО-ПОРЯДКУ
Идем в окно РЕДАКТИРОВАТЬ на верхней панели фотошопа и выбираем ВЫПОЛНИТЬ ЗАЛИВКУ..открыввется окошко , на котором установите как тут
и нажав в этом окошке стрелочку начинаем по очереди выбирать с 1 кадра снега
первый кадр анимации готов...Идем дальше
второй кадр готов....Дальше
третий готов...дальше
просто помните....НОМЕР КАДРА и НОМЕР СЛОЯ и НОМЕР СНЕГА всегда одинаковы...то есть 4 кадр 4 слой 4 по счету снег-паттерн
<
когда все кадры в панели анимации потемнели нажмем на слова
вот и готова наша анимация снежная ..Жмем на ПЛЕЙ и смотрим что получилось а если нравится...идем сохранять
вот собственно и весь урок....Я очень подробно его проиллюстрировала...так что вам остается только внимательно и неспеша проследовать по каждому пункту, сверяясь с картинками урока
Наверняка такие «живые» фото вы встречали не раз. Это не простые GIF-ки. Новый стиль фотографии называется синемаграфия.
Фотограф Фернандо Джей Баез описывает технику как "больше, чем фото, но не совсем видео". Цель синемагрфаии - обратить внимание на некоторые аспекты образа с помощью локальной анимации - например, ветер колышет волосы субъекта, а остальная часть статична. Это отнюдь не новое явление, но техника немного сложнее, чем создание обычного GIF. Для создания синемаграфии вам понадобится Photoshop – это программное обеспечение от Adobe на самом деле позволяет редактировать не только изображения - есть поддержка некоторых форматов видео, что вам и придется использовать для создания конечного изображения.
Вам понадобится найти видео, с каким-либо объектом, который можно изолировать от остальной части кадра. Для этого вы можете снять как свое видео, так и скачать с любого видеохостинга Импортируйте видео в Photoshop - File > Import > Video Frames to Layers – выберите нужный файл. Таким образом каждый кадр импортируется как новый слой. Определите какая именно область подходит для анимации. Первый слой будет служить своеобразным «якорем», то есть вся статичная часть будет равняться по нему. Выберите первый слой и убедитесь, что включена видимость выравнивания слоев. Это гарантирует то, что область, которая должна остаться статичной, не будет двигаться.
Таким образом кадр не будет сдвигаться, а анимированной станет та часть, которую вы выберете с помощью специальной маски.
Выберите второй слой. Используйте выделяющую рамку или любой другой подходящий инструмент для создания маски на слое, чтобы выделить ту область, которую вы хотите сделать анимированной. Повторите процесс для каждого слоя в области движения. Это самая длительная по времени часть. Вы можете просматривать результат в любое время с помощью шкалы движения. Если все пойдет хорошо, вы должны увидеть статическое изображение, и только в области анимации будет движение.
В зависимости от частоты кадров исходного материала, анимированная часть может двигаться не так плавно. Это можно исправить, выбрав каждый кадр на таймлайне, щелкнув правой кнопкой мыши и выбрав новый период времени. Попробуйте поэкспериментировать с различными настройками, чтобы понять, что работает лучше. Когда это будет сделано, выберите File > Save for Web & Devices. Убедитесь, что выбранным форматом является GIF. Вы сможете просмотреть предварительно, что же получится у вас в конце. Используйте фильтр тона, который ограничивает количество цветов в изображении, чтобы избежать недостатков формата GIF. Когда результат вас устроит, нажмите Save.
Адаптация для фотошопа Mademoiselle Viv Материал_christmascard.zip Кроме того, вам потребуется фильтр Penta com - Jeans По ссылочке, авторизация на лире.
1. создайте новое изображение. 2. вставьте картинку, отражение которой вы собираетесь сделать но учтите, что если вы берёте картинку размером 350x75, то документ должен быть размером 350x150
сохраните 3. откройте Sqirtz Water Reflections, которую вы скачали 4. File > Open > Your image 5. выделите белую часть изображения
6. нажмите water-button
выбираете настройки исходя из изображения 7.создайте новую папку 8. сохраните изображение в созданную папку Animate -> File Sequence -> Save
30 Frames 80% .jpg 9. откройте Image Ready File -> Import -> Folder as Frames -> созданная папка 10. все слои кроме первого делаете невидимыми дублируйте этот слой 11. дублируйте каждый слой 12. File -> Save Optimized As... результат автора
Добрый вечер , мои хорошие! Для начала посмотрите на эту картинку..
Вы видите как фигурка вращается..А сделать это очень легко, используя специальный прием в фотошопе... Не пугайтесь...это быстро и несложно, только внимательно следите за скринами моего урока... Сегодня я вам покажу именно вращение фигурки...и даже пусть будет это не предмет а текст, все равно получится так же интересно))) Итак....поехали....
теперь на панели инструментов должны стоять на прямоугольном выделении а раскладка клавиатуры должна быть английская и
клавиши на клавиатуре легче нажимать так...левая рука ...безымянный палец на CTRL ...средний на SHIFT ...указательный на ALT и одновременно жмем все три а потом добавляем щелчок правой рукой на букве T (не забываем что при АНГЛИЙСКОЙ РАСКЛАДКЕ клавиатуры)
Теперь переходим на панель слоев...
время выставляем, нажав на первом кадре на слово *0сек * тогда откроется окошко в котором вы выбираете из предложенных временных интервалов то что нужно вам... окно анимации принимает вот такой вид
в котором жмем на стрелочку ПЛЕЙ и любуемся нами сотворенным))))а потом сохраняем для WEB в формате GIF в ту папку,которую сами и назначим... Вот и весь урок Удачи Вам.. Ваша Zomka
Мы поговорим о том как не утруждаясь сделать пульсирующую анимацию ,как например вот это сердечко Вам всем!!
а разбирать будем на примере заголовка к нашему уроку Итак...поехали...
выбираем стиль текста на ваш вкус..
теперь уходим в панели инструментов на ПРЯМОУГОЛЬНОЕ ВЫДЕЛЕНИЕ и нажимаем вкладку ИЗОБРАЖЕНИЕ на панели фотошопа
Жмем ОК и получаем уменьшенное поле вокруг текста Теперь жмем сочетание клавиш CTRL+ALT+T раскладка клавиатуры помним английская и получаем
переходим на верхнюю панель фотошопа и устанавливаем точно по картинке
то есть уменьшаем размер ширины и высоты на примерно 30 единиц И как только уменьшим получаем вот такую картинку
жмем ENTER чтобы снять маркеры
а теперь наше волшебное сочетание клавиш при помощи двух рук...левая рука CTRL+Shift+ALT а правой добавляем щелчок на букве Т (английская раскладка клавиатуры) и будем получать при каждом щелчке все меньшее и меньшее изображение текста
теперь надо сделать кадры обратные тому что мы уже сделали.То есть наш текст уменьшился а теперь надо сделать его увеличение..Для этого мы просто дублируем те слои что у нас есть и получившиеся раасставляем в обратном порядке..Как?? а вот так.
нажав правой кнопкой мышки на выделенном поле выбираем
и вот что получится...теперь снимаем общее выделение щелкнув по любому слою и далее
то есть если смотреть снизу на панели слоев то снизу вверх идут до 7 слоя 1-2-3-4-5-6-7 а потом далее идут на убывание 7-6-5-4-3-2 вот так как на картинке
открываем панель Анимация и жмем в углу панели на треугольник открывается меню в котором выбираем
когда откроются кадры анимации еще раз жмем на стрелку в углу панели и выбираем
Затем
это мы выставляем время всем кадрам
я еще первому кадру поставлю большее время чтобы текст немного на нем "замирал" вот так
ну вот получим
и это уже можно сохранять для WEB в формате GIF в ту папку , которую вы выбрали))))
вот и весь урок...а вся сложность в нем ТОЛЬКО!!! во внимательной расстановке слоев по возрастанию и убыванию...чтобы анимация плавно переходила из размера в размер)))
Этап 1. Откройте изображение венка. Назовите его «venok».
Этап 2. Продублируйте слой. Нажмите Ctrl+U или откройте hue/saturation.
Примените установочные параметры как показано на рисунке:
Этап 3. Измените режим слоя на Overlay.
Этап 4. Создайте новый слой (назовите его «svet») и залейте его черным цветом.
Выберите Filter > Render > Lens Flare.
Примените установочные параметры как показано на рисунке:
Этап 5. Нажмите Ctrl+U или откройте hue/saturation. Примените установочные параметры как показано:
Этап 6. Измените режим слоя на Linear Dodge.
Выберите и перемещайте слой, чтобы устанавливать свет соответственно.
Дублируйте слой «venok» нажав Ctrl+J. Переместите слой «svet» в окне слоев над дублированным слоем венка. Объедините их, нажав Ctrl+Е.
Этап 7. Повторите шаг 4 создайте тоже освещение с другими размерами и цветами. И повторите шаг 6.
Этап 8. У вас должно быть несколько слоев и на каждом слое - свой огонек. Нажмите Shift+Ctrl+M,
чтобы открыть ImageReady.
Нажимаем Window > animation. На появившемся окошке анимации кликаем на треугольник, чтобы зайти в опции, и выбираем Make frames from layers(Создать кадры из слоев). Выбираем время задержки для каждого кадра.
, выставляю размеры 800*800. Фон преобразовываю в слой
1.
Затем создаем новый слой и инструментом «прямоугольное выделение» делаем на нем выделение размером 200*800.Это нужно, чтобы сделать одинаковые 4 полосочки, можно и другое количество, но нам хватит четырех. Полосочки должны быть идеально одинаковыми. Для этого в настройках инструмента «прямоугольное выделение» выбираем стиль «заданный размер» и устанавливаем ширина 200пикс и высота 800 пикс.
После этого выделение образуется одним щелчком, только поставить «крестик» инструмента нужно точно в левую верхнюю точку.Заливаем черным ( или любым другим) цветом.Снова создаем новый слой , выделяем следующую полосочку на этом слое, вплотную к предыдущей и заливаем белым цветом.
Теперь нам нужно: 1 полностью покрыть полосками все видимое поле,2.создать расширенное по ширине в два раза поле из полосочек, чтобы они двигались без остановки.3.создать «негативный» слой.4.выделить изображение в виде маски.5.анимировать полосочки.
Начали
1.Дублируем белую и черную полоски, сдвигаем их поочередно вправо с помощью стрелочек, так чтобы закрыть все поле, и объединяем в один слой.
Для этого выделяем все четыре слоя с полосками, нажав shift и затем команду «объединить слои».
Назовем этот слой «полосы» 2.Дублируем слой «полосы» и сдвигаем один из слоев влево , а другой вправо, чтобы они ровно состыковались, объединяем их в один слой и с помощью стрелочек ставим на начало
3.Дублируем получившийся удлиненный слой, переходим в режим трансформации и нажимаем «отразить по горизонтали».У нас получается слой , где белая полоса расположена над черной, а черная над белой.
4.Теперь мы идем в слой с картинкой, отключаем видимость со слоев с полосками. Нам нужно получить выделение рисунка. Для этого переходим на вкладку «выделение» Цветовой диапазон, щелкаем по белому цвету, у нас он выделится и не снимая выделения переходим на верхний слой с полосками.
Внимание. Нажимаем на квадратик с кружком и создаем маску. Посмотрите, что получилось.
5.Теперь нам нужно ,чтобы полосочки двигались поверх маски, т.е. чтобы изображении НЕ двигалось, а полоски двигались вместе. Мы выделяем оба слоя и связываем их, для этого нажимаем на значок «цепочка». А на верхнем слое нажимаем на значок звено цепи, и сам рисунок не будет двигаться вместе с полосками.
Идем в панель анимации Создаем первый кадр, выставляем время (у меня 0,15) режим навсегда. Создаем второй кадр, нажимая на конвертик и выделив ОБА слоя с помощью стрелочек на клавиатуре начинаем сдвигать полосочки вправо до конца. Затем нажмем на значок цепочки на панели анимации, и создадим промежуточные кадры ( у меня 15).
Включаем анимацию. Замечаем, что в одном месте она как бы останавливается, это потому, что первый и последний кадр дублируют друг друга, последний кадр удаляем. Для этого выделяем его и нажимаем на значок «корзина».