-Цитатник

Подарок: фотошоп CS5 портативный, фотошоп CC 2015_32/64 портативные & видео курсы! - (0)

Подарок: фотошоп CS5 портативный, фотошоп CC 2015_32/64 портативные & видео курсы! На фле...

Сохраняем анимацию на прозрачном фоне без ореола. - (0)

Сохраняем анимацию на прозрачном фоне без ореола. Все мы знаем,что при создании анимации на прозр...

Фотошоп от А до Я! (Для начинающих и ... продолжающих). - (2)

Фотошоп от А до Я! (Для начинающих и ... продолжающих). Широко известный видеокурс по фот...

Наша дружба и прекрасна, и крепка! - (0)

Наша дружба и прекрасна, и крепка! Послушайте песню (громкость регулируется - тяните ...

Операция "иконки"для фотошоп - (1)

Операция "иконки"для фотошоп я не мастер записывать операции,так что не обессудьте. С помощью это...

 -Поиск по дневнику

Поиск сообщений в Планета_Фотошопа

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 01.02.2011
Записей:
Комментариев:
Написано: 2817


Как сделать анимированную gif - картинку

Вторник, 27 Ноября 2012 г. 15:36 + в цитатник
Магия_психологии все записи автора

Буквально на днях озадачился вопросом «как быстро и безболезненно сделать анимированный гиф?».
 Оформляя очередную новость на сайте, сделал в Photoshop -е на основе одной фотографии 2 разных картинки и подумал, что желаемый и полный эффект от содеянного был бы в виде анимированного гифа.

 Недолго покопавшись в ссылках с поисковиков, нашел несколько вариантов:

1)предлагали использовать специальные программы (таковых большое множество);  

2)кто-то оставил ссылочку на сайт, где можно просто загрузить подходящие фото (до 10 штук), выбрать желаемый размер и через некоторое время ты увидишь готовый вариант, который можешь сохранить себе на компьютер или отослать в почту. Но в этом случает нужо либо платить либо на получившемся анимированном гифе красуется их водяной знак – копирайт сайта в левом верхнем углу. Понятное дело меня это не устроило, но сам по себе вариант неплохой.

 3) Создать самому, владея минимальными навыками работы в Photoshop-e.
 Но сейчас речь пойдет о создании анимированных гифов именно средствами Photoshop–а и прилагающегося к нему Adobe ImageReady (специально его устанавливать не пришлось – он устанавливается автоматически вместе с Фотошопом). В более поздних версиях его нет, потому что его функции встроены в сам Photoshop.

Для «нашего» случая в PhotoShop`e необходимо сделать исходники – картинки: именно они и будут «мелькать» в анимированном gif – е.

А саму анимацию (смену картинок) создадим уже в ImageReady.

Итак:

Этап 1. Создание исходников в PhotoShop.

 Для описания процесса создания анимированного гифа, я уже взял готовый фотошоповский psd – файл , т.е. файл в котором его отдельные элементы уже разобраны по слоям, что нам и необходимо. Поэтому я лишь опишу основные моменты (правила) создания необходимого файла, но его самого мы тут же создавать не будем.

 1.Вес конечного анимированного гифа не должен быть большим иначе он будет очень долго грузиться. Во многих случаях – это критически, но я встречал и варианты, где целью было получить красивую анимацию со сменой большого количества картинок и никого ожидание полной загрузки файла не напрягало – результат того стоил.
2.Палитра gif-a может содержать максимум 256 цветов (т.е. вы можете использовать в своем творении до 256 цветов, но не более) и в нем применяется алгоритм сжатия без потери качества изображения.
 3.GIF допускает создание прозрачных областей (это очень важное его свойство) и анимации. Ну, поэтому мы его и выбрали. 
4.Необходимо отметить, что на самом деле при использовании gif-формата, требуется оплачивать «закрытую лицензию алгоритма сжатия, применяемого в гифах» для использования в любом программном обеспечении. Поэтому стоит обратить внимание на другие более открытые форматы (например, flash -технологии, avi и т.п.), что возможно и произойдет в ближайшем будущем.



Итак, вы уже выбрали картинку/картинки, которые вы хотите превратить в анимированный гиф и даже представляете, что должно происходить: появляться, исчезать, крутиться, двигаться и т.п.

 А вот та картинка, что я выбрал для создания анимации в этом «уроке».

4107848_12135984 (440x414, 63Kb)

Это psd – файл и, если открыть его в Photoshop, то мы увидим, что есть картинка с полянкой и палаткой, есть человечки в разных позах, есть костер с дымом, и сама эта «фотография» как бы висит на стене (ну или чём-то явно деревянном). Картинка не моя! – честно скачана из инета.

Все элементы на отдельных слоях и наша анимация и будет заключаться в последующем «появлении» объектов на изображении, ну что-то вроде того: «рисуем в фотошопе фотографию с посиделками у костра, вешаем результат на стену и пишем слова».

4107848_12135981_1_ (200x188, 3Kb)

4107848_12135982 (200x188, 7Kb)

4107848_12135983_1_ (200x188, 8Kb)

4107848_12135985 (200x188, 8Kb)

4107848_12135986_1_ (200x188, 9Kb)

4107848_12135987 (200x188, 9Kb)

То есть я опишу принцип, а уж поняв его, можно анимировать все что ни придумываете:

- создавать баннеры различной степени сложности,
- показывать последовательную отрисовку, например, картины (от наброска до окончательного результата),
- склеить последовательные фотки (думаю, многие замечали, что при последовательной прокрутке некоторых фотографий получается движение и часто это очень забавно/интересно выглядит),
- создавать анимированные аватарки,
- создавать анимированные открытки,
- создавать различные эффекты на картинках,
- рисовать микромультики и прочее.



Итак, в Photoshop-е отрисовываем желаемую картинку, внимательно следя за тем, чтобы все необходимые элементы размещались по отдельным слоям. Например, подложка – слой, фон-слой, первый «появляющийся» в гифе элемент – слой, эффект – слой и т.п. в соответствии с вашей задумкой.
Я также для удобства пользования слоями сделал для них отдельные папочки (фон, надписи, картинка),

4107848_12135988 (440x373, 41Kb)

раскрыв которые можно увидеть все созданные слои:

4107848_12135989 (200x580, 35Kb)

Если у вас по задумке есть текст, то его необходимо превратить в растр.
В меню Layer – правой кнопкой мыши жмем на слое с текстом и в выпадающем списке выбираем Rasterize Layer - и вот текст перестал быть текстом, теперь это просто графический элемент, имеющий один (!) цвет, что очень важно для веса файла.

4107848_1213598A (440x678, 54Kb)

Этап 2. Наконец, наш psd-файл со слоями готов. Двигаемся дальше. Запускаем Adobe ImageReady.

4107848_1213598B (440x589, 60Kb)

 

Открываем в нем созданный psd – файл (File-Open-…)
Видим, что вся структура разбивки на слои сохранена (ещё бы, ведь это же продукт того же Adobe). Вот именно этим (возможностью включения и выключения частей рисунка – слоев и их свойств) мы и будем пользоваться, чтоб картинка изменялась.

Теперь в меню Window выбираем Animation.

4107848_1213598C (440x483, 56Kb)

появится свиток (обычно в левом нижнем углу программы), в котором присутствует маленькое изображение той картинки, что мы видим в открытом psd-файле, это так называемый фрейм.

4107848_1213598D (440x126, 8Kb)

Начинаем делать «кадры» нашей будущей анимации:

Все слои, кроме подложки белого цвета делаем невидимыми UnVisible (для этого «лапкой» наведемся на «глазики» в меню Layer и удерживая левую кнопку мыши проведем по всем слоям сверху вниз,

4107848_1213598E (200x382, 22Kb)

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

В свитке Animation в левом верхнем углу жмем на стрелочку - появится локальное меню свитка.

4107848_1213598F (440x287, 16Kb)

Выбираем команду New Frame - создается фрейм, который является дубликатом предыдущего, т.е. с одним включенным слоем (белая подложка).

4107848_12135991 (440x131, 10Kb)

Т.е. у нас есть один кадр – белый фон, теперь делаем второй кадр – включаем (делаем видимым) в списке слоев слой с картинкой полянки с палатками.

4107848_1213598G (200x373, 21Kb)

Теперь у нас второй кадр с белой подложкой и изображением полянки с палатками.

4107848_12135992 (440x131, 10Kb)

Продолжаем в том же духе: на стрелочку в свитке Animation - New Frame – включаем видимость очередного слоя.

Таким образом, добавляя фреймы и включая слои, мы прорисовываем все нужные нам «кадры» сколько бы их не было.
В данном случае я поочередно «высаживала» на полянку людей, потом появился костер, прорисовались тени, деревянная стенка, на которую приклеена фотография, свет и тень, и был написан текст.

В результате у меня получилось 22 фрейма (кадра).

4107848_12135993 (440x71, 15Kb)

4107848_12135994 (440x91, 19Kb)

Теперь необходимо установить время сколько каждый кадр будет «задерживаться» на экране (обращаемся к свойству фрейма "delay"). В выпадающем списке устанавливаем необходимое время.

4107848_12135995 (440x242, 23Kb)

Устанавливаем время для каждого кадра. Если у нас все (или изрядная часть) кадров будет иметь одинаковую задержку, то можно выделить эти кадры с помощью клавиши shift и всем «скопом» установить нужную величину, а не поштучно. Так очень удобно сделать сразу и просмотреть результат уже походу отмечая, какой кадр сделать «подлине», а какой - «покороче», и затем уж изменять время при необходимости «выборочно».

После этого необходимо установить параметр цикличности вашей анимации: выбираем Forever — и ваша картинка будет «прокручиваться» всегда.

4107848_12135996 (440x142, 17Kb)

Далее необходимо «обратиться» к свитку Optimize, где можно настроить различные параметры. Но в этом свитке я пока особо не разбиралась, единственное, что ОБЯЗАТЕЛЬНО нужно установить это ФОРМАТ будущего файла GIF.

4107848_1213598H_2_ (200x223, 15Kb)

Запоминаем созданный gif (File-SaveOptimizedAs)

4107848_1213598I_1_ (200x378, 22Kb)

Теперь можно просмотреть наш GIF. Сделать это можно непосредственно тут же в Image Ready – в том же свитке Animation: кнопочки с управлением, как в плеере.
И при необходимости что-то сразу изменить.

4107848_12135997 (440x197, 20Kb)

Просмотреть полученный гиф можно в любом просмотрщике типа ACDSee или XnView, например.

4107848_1213599626_psd_440_02 (440x414, 570Kb)

Ну, вот и все. Это был пример, на котором я показал принцип создания анимированного гифа. Никаких «наворотов» с эффектами я не делал (и, даже я б сказал, поленился во многом – в деталях показа), но вы теперь это можете и сами сделать – придумать и воплотить. Удачи!

 

 

http://www.liveinternet.ru/community/5130823/profile

Серия сообщений "Уроки":
Часть 1 - Фотошоп для детей. Обучающий видеокурс.
Часть 2 - Делаем бесшовные фоны для схем оформления дневника.
...
Часть 7 - Основы работы в Adobe Photoshop CS5
Часть 8 - Восстановление старых фотографий
Часть 9 - Как сделать анимированную gif - картинку
Часть 10 - Коллекция уроков Adobe Photoshop часть 1-2-3 Lucky Blake 2012 RUS
Часть 11 - Обучающщий Видеокурс Corel Paint Shop Photo ProX3
...
Часть 26 - Сохраняем анимацию на прозрачном фоне без ореола.
Часть 27 - Подарок: фотошоп CS5 портативный, фотошоп CC 2015_32/64 портативные & видео курсы!
Часть 28 - Рейтинг кэшбэк-сервисов



Процитировано 5 раз
Понравилось: 4 пользователям

Inzigo   обратиться по имени Воскресенье, 19 Ноября 2017 г. 13:07 (ссылка)
Можно и без фотошопа gif анимацию сделать и на много быстрее вот примертут
Ответить С цитатой В цитатник
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку