Как сделать анимационную картинку при помощи одного лишь фотошопа
Как я уже хвалилась, меня назначили ведущей в группе ВД-8 в сообществе Антидолгострой (или по-другому - Второе Дыхание). И вот уже восемь недель я веду нашу замечательную во всех отношениях, группу.
Посмотреть на наш последний отчет можно здесь
Мои анимашки понравились вышивальщицам, и вот я получаю просьбу от koma_, поделиться премудростью творения предмета разговора, то есть анимашек.
Таким образом и благодаря этой девушке, придавшей ускорение и вектор моей блуждающей мысли, ну и не без моего, конечно, участия, сотворился этот мастер-класс. (что-то меня сегодня несет, не обращайте внимания :)
Для начала всем советую найти, скачать и установить photoshop Cs3 или Cs4. Для остальных - вариантов не будет. Потому как у меня даже дистрибутивов других нет. Можно найти gif-creator и, разобравшись в ее устройстве, написать еще мастер-класс, как можно обойтись без фотошопа. Буду этому только рада.
Мне - лень. Потому как Photoshop вот он есть и все делаю в нем, а все остальное от лукавого. Ну опустим лирику, приступим к делу.
Все картинки кликабельны и в общей сложности весят не больше 4 МБ.
Итак, открываем photoshop Cs3 или Cs4
Более старые версии не подойдут.
Я буду показывать на Cs3, хотя разницы нет.
Открываем палитру Анимации: главное меню - window - Animation
Вот так выглядит панель анимации.
Открываем файл, из которого надо сделать анимашку.
Здесь такой момент. Я воспользовалась «искусственным» файлом - просто нарезала из картинки частей. При создании анимации для антидолгостроя потребуется открыть в photoshop как минимум два файла. При этом возникнет проблема их совмещения. Как ее преодолеть, я объясню позже. Главное - у нас есть два файла. Открываем любой из них и выделяем все: ctrl+A, копируем: ctrl+С, открываем второй файл и вставляем: ctrl+V.
Таким образом у нас получилось в одном файле два изображения: каждое в своем слое.
У слоев можно отключать видимость - нажимая на глазик слева от слоя.
Теперь, когда у нас есть такая замечательная основа - надо ее сохранить ctrl+shift+S - сохранить как .psd, чтобы все слои остались, и мы могли пользоваться этим файлом в дальнейшем, не делая одну и ту же работу много раз.
Заметьте, что на палитре анимации отобразился один кадр. В кадре вид текущего документа.
В моем файле для наглядности целых девять слоев.
Под кадром на палитре анимации графа времени показа кадра. Можно выбрать нужное количество времени.
Я выбираю other… и там ставлю 3 секунды..
Видите - под кадром теперь время 3 сек.
Теперь отключаем видимость всех слоев, кроме первого. Это будет первый кадр.
Нажимаем на кнопку «новый кадр» на панели анимации.
Появляется второй кадр, по виду от такой же как и первый. Он активен, о чем свидетельствует синяя рамка вокруг него. Включаем видимость второго слоя. Готов второй кадр. Опять создаем новый кадр. Новый будет копией активного слоя. У нас это второй. Замечательно, включаем видимость третьего слоя.
Заметьте, что у всех кадров время показа 3 сек.
Вот немного монтажа и готовы все девять кадров.
Теперь немного о том, как совместить картинки. Вообще говоря, это наверное самое сложное, если добавить сюда еще цветокоррекцию снимков.
Как будто у нас два слоя. Нужно наложить второй на первый.
Здесь слои смещены, чтобы было видно, что они отличаются.
Уменьшаем значение прозрачности слоя (opacity)
Теперь сквозь верхний слой как бы видно нижний.
Двигаем верхний слой, пытаясь как-нибудь совместить два изображения. Это часто бывает нелегко: работа может быть снята под разными углами, изображения могут быть разной величины. Можно воспользоваться инструментом трансформации (ctrl+T)
Здесь я это не показываю.
Если цвета неконтрастные - опять же будут трудности, потому что будет тяжело понять, насколько совмещены два изображения.
Здесь надо положиться на руку и двигать, пока картинка не станет максимально четкой в местах, где изображение есть на обоих слоях:
Вот видно - как это должно примерно выглядеть. Но здесь проще, здесь все изображения сделаны изначально из одной картинки, а в реальности бывает и трудно и долго. :) Надеюсь еще не сильно запугала. :)
После совмещения не забываем вернуть слою 100% непрозрачности.
Кстати, за то, что картинка будет «играть» без остановки, зацикленно, отвечает вот эта галочка возле слова Forever. По умолчанию так и есть. Но возможны и другие варианты. Нам подходит этот. Кстати, просмотреть как будет меняться картинка можно уже тут - надо нажать на кнопку play на палитре анимации и подождать указанное время показа, пока картинка не сменится. При этом будет выделяться тот кадр, который сейчас проигрывается.
Самое интересное впереди - сохраняем работу. Перед тем, как делать анимашку, не забудьте еще раз сохранить в psd - для этого просто нажмите ctrl+S.
Появляется это окно. Здесь важно указать выходной размер изображения.
Картинки, которые можно наблюдать в моих отчетах, горизонтальные, их ширина 640 пикселей.
Высота пересчитается сама. Save.
Здесь важно указать формат .gif
Все - анимационная картинка готова! Можно открыть ее через обычный просмотрщик картинок и анимашка будет работать!
Ну для тех, кто не устал, еще немного полезной информации. Теперь надо загрузить картинку в Интернет. Хостингов, которые поддерживают загрузку анимационных файлов гораздо меньше, чем обычных. Я обычно использую этот
Выбираю flash загрузку - она позволяет загрузить сразу несколько файлов, если надо, обычно это удобнее.
Выбираю файл в «обзоре». Нажимаю «загрузить»
И вот картинка загружена. На этой страничке картинка не будет «играть», так как это превью, но если кликнуть по ней - вы увидите полноценное, меняющееся изображение.
Здесь же нам важна строка кода html - на скрине она выделена синим. Копируем ее и вставляем в пост (в режиме html). Возвращаемся в режим просмотра и уже на этапе формирования записи будет видна меняющаяся анимированная картинка.
Ура!
Файл для опытов можно взять свой, а можно мой
Надеюсь, что было понятно и будет полезно.
Всем удачи в опытах, вопросы можно задавать тут, в коментариях. Постараюсь ответить. :)
Посмотреть на наш последний отчет можно здесь
Мои анимашки понравились вышивальщицам, и вот я получаю просьбу от koma_, поделиться премудростью творения предмета разговора, то есть анимашек.
Таким образом и благодаря этой девушке, придавшей ускорение и вектор моей блуждающей мысли, ну и не без моего, конечно, участия, сотворился этот мастер-класс. (что-то меня сегодня несет, не обращайте внимания :)
Для начала всем советую найти, скачать и установить photoshop Cs3 или Cs4. Для остальных - вариантов не будет. Потому как у меня даже дистрибутивов других нет. Можно найти gif-creator и, разобравшись в ее устройстве, написать еще мастер-класс, как можно обойтись без фотошопа. Буду этому только рада.
Мне - лень. Потому как Photoshop вот он есть и все делаю в нем, а все остальное от лукавого. Ну опустим лирику, приступим к делу.
Все картинки кликабельны и в общей сложности весят не больше 4 МБ.
Итак, открываем photoshop Cs3 или Cs4
Более старые версии не подойдут.
Я буду показывать на Cs3, хотя разницы нет.
Открываем палитру Анимации: главное меню - window - Animation
Вот так выглядит панель анимации.
Открываем файл, из которого надо сделать анимашку.
Здесь такой момент. Я воспользовалась «искусственным» файлом - просто нарезала из картинки частей. При создании анимации для антидолгостроя потребуется открыть в photoshop как минимум два файла. При этом возникнет проблема их совмещения. Как ее преодолеть, я объясню позже. Главное - у нас есть два файла. Открываем любой из них и выделяем все: ctrl+A, копируем: ctrl+С, открываем второй файл и вставляем: ctrl+V.
Таким образом у нас получилось в одном файле два изображения: каждое в своем слое.
У слоев можно отключать видимость - нажимая на глазик слева от слоя.
Теперь, когда у нас есть такая замечательная основа - надо ее сохранить ctrl+shift+S - сохранить как .psd, чтобы все слои остались, и мы могли пользоваться этим файлом в дальнейшем, не делая одну и ту же работу много раз.
Заметьте, что на палитре анимации отобразился один кадр. В кадре вид текущего документа.
В моем файле для наглядности целых девять слоев.
Под кадром на палитре анимации графа времени показа кадра. Можно выбрать нужное количество времени.
Я выбираю other… и там ставлю 3 секунды..
Видите - под кадром теперь время 3 сек.
Теперь отключаем видимость всех слоев, кроме первого. Это будет первый кадр.
Нажимаем на кнопку «новый кадр» на панели анимации.
Появляется второй кадр, по виду от такой же как и первый. Он активен, о чем свидетельствует синяя рамка вокруг него. Включаем видимость второго слоя. Готов второй кадр. Опять создаем новый кадр. Новый будет копией активного слоя. У нас это второй. Замечательно, включаем видимость третьего слоя.
Заметьте, что у всех кадров время показа 3 сек.
Вот немного монтажа и готовы все девять кадров.
Теперь немного о том, как совместить картинки. Вообще говоря, это наверное самое сложное, если добавить сюда еще цветокоррекцию снимков.
Как будто у нас два слоя. Нужно наложить второй на первый.
Здесь слои смещены, чтобы было видно, что они отличаются.
Уменьшаем значение прозрачности слоя (opacity)
Теперь сквозь верхний слой как бы видно нижний.
Двигаем верхний слой, пытаясь как-нибудь совместить два изображения. Это часто бывает нелегко: работа может быть снята под разными углами, изображения могут быть разной величины. Можно воспользоваться инструментом трансформации (ctrl+T)
Здесь я это не показываю.
Если цвета неконтрастные - опять же будут трудности, потому что будет тяжело понять, насколько совмещены два изображения.
Здесь надо положиться на руку и двигать, пока картинка не станет максимально четкой в местах, где изображение есть на обоих слоях:
Вот видно - как это должно примерно выглядеть. Но здесь проще, здесь все изображения сделаны изначально из одной картинки, а в реальности бывает и трудно и долго. :) Надеюсь еще не сильно запугала. :)
После совмещения не забываем вернуть слою 100% непрозрачности.
Кстати, за то, что картинка будет «играть» без остановки, зацикленно, отвечает вот эта галочка возле слова Forever. По умолчанию так и есть. Но возможны и другие варианты. Нам подходит этот. Кстати, просмотреть как будет меняться картинка можно уже тут - надо нажать на кнопку play на палитре анимации и подождать указанное время показа, пока картинка не сменится. При этом будет выделяться тот кадр, который сейчас проигрывается.
Самое интересное впереди - сохраняем работу. Перед тем, как делать анимашку, не забудьте еще раз сохранить в psd - для этого просто нажмите ctrl+S.
Появляется это окно. Здесь важно указать выходной размер изображения.
Картинки, которые можно наблюдать в моих отчетах, горизонтальные, их ширина 640 пикселей.
Высота пересчитается сама. Save.
Здесь важно указать формат .gif
Все - анимационная картинка готова! Можно открыть ее через обычный просмотрщик картинок и анимашка будет работать!
Ну для тех, кто не устал, еще немного полезной информации. Теперь надо загрузить картинку в Интернет. Хостингов, которые поддерживают загрузку анимационных файлов гораздо меньше, чем обычных. Я обычно использую этот
Выбираю flash загрузку - она позволяет загрузить сразу несколько файлов, если надо, обычно это удобнее.
Выбираю файл в «обзоре». Нажимаю «загрузить»
И вот картинка загружена. На этой страничке картинка не будет «играть», так как это превью, но если кликнуть по ней - вы увидите полноценное, меняющееся изображение.
Здесь же нам важна строка кода html - на скрине она выделена синим. Копируем ее и вставляем в пост (в режиме html). Возвращаемся в режим просмотра и уже на этапе формирования записи будет видна меняющаяся анимированная картинка.
Ура!
Файл для опытов можно взять свой, а можно мой
Надеюсь, что было понятно и будет полезно.
Всем удачи в опытах, вопросы можно задавать тут, в коментариях. Постараюсь ответить. :)