Софт

как создать анимированную картинку

Рейтинг: 4.9/5.0 (257 проголосовавших)

Категория: Windows

Описание

Как сделать анимацию в фотошопе

Как сделать анимацию в фотошопе

Графический редактор PhotoShop (PS), помимо широчайших возможностей по обработке изображений, предоставляет приятный бонус: позволяет создавать анимированные сюжеты, которые можно сохранять в универсальном для всех приложений Adobe формате PSD, а также популярном GIF либо как фильм QuickTime. Конечно, возможности PS в создании анимированных изображений не сравнить с потенциалом специализированных программ, но для относительно быстрой и простой вёрстки несложных «оживших картинок» фоторедактор отлично приспособлен. Итак, расскажем, как сделать анимацию в фотошопе: простенький анимированный текст в несколько шагов.

Изображение — основа
  • Выбрав цветовой режим RGB и произвольный цвет букв, напишем название нашего сайта:

Создаём последовательность кадров

Чтобы осуществить создание анимации в фотошопе, нам необходимо создать последовательный ряд изображений (кадров), из которых можно смонтировать ролик. Фон мы оставим как есть, а все изменения будем производить с текстом.

  • Для того, чтобы иметь возможность сделать необходимое количество кадров, создадим копии слоя с ранее растрированным текстом, по одной на каждый кадр:

Можно заранее сделать необходимое их количество либо «штамповать» слои в ходе работ. Мы пойдём во второму пути.
  • Делаем первый кадр. С помощью инструмента «Заливка» закрасим букву F любимым красным цветом:
  • Нам захотелось сделать так, чтобы надпись «мигнула» ярким светом. Для этого мы создадим ряд последовательных картинок, где применим команду «Слой» > «Стиль слоя» > «Внутреннее свечение». Настройки видны на скрине, для первого кадра мы выбрали параметр «непрозрачность», равный 25%.
  • Повторяем операцию, каждый раз увеличивая непрозрачность на 25%. Копии создаём из слоя, где буквы ещё не светятся, перемещаем вверх списка инструментом «Рука». Итоговое изображение со 100%-й непрозрачностью:
  • «Мигнём» буквами ещё раз, но теперь выберем в «Стилях слоя» параметр «Внешнее свечение». В этот раз непрозрачность выставим на 100%, а постепенно увеличивать будем размер (удаление света от букв). Новый слой и первое изображение с внешним свечением букв:

  • Делаем раскадровку и анимируем

    Необходимое количество изображений в слоях мы сделали, теперь — о том, как создать анимацию в фотошопе из них.

    • Приступаем к формированию раскадровки. Выполняем команду «Окно» > «Анимация». В появившуюся палитру анимации будем вставлять один за другим созданные нами изображения, от первого кадра до последнего. Для этого отключим видимость всех слоёв, кроме первых двух. Чтобы зафиксировать первый кадр, кликаем на квадратик-пиктограму «Duplicate Current Frame»:
  • Сглаживаем переход между кадрами, для этого в палитре «Анимация» нажимаем на значок слева от квадратика. Просмотреть анимацию можно, нажав на значок Play в палитре.
  • Записать и заодно оптимизировать анимацию для Web можно из меню «Файл» > «Сохранить для Web».
  • Но наша задача — gif анимация в фотошопе. К сожалению, сохранить файл формата GIF в нужном нам виде из самого фоторедактора не получится. Придётся делать это с помощью приложения Adobe Image Ready. Снова заходим в «Сохранить для Web», кликаем на Edit in Image Ready в правом нижнем углу: Особенности создания анимации в различных версиях PhotoShop

    Не стоит браться за создание анимированных роликов в версиях более ранних, чем PS CS2. Возможности в программе есть, но ограничены и реализованы неудобно. Начиная с CS5 в фотошопе появилась панель «Шкала времени», расширяющая возможности монтажа, но немного усложняющая работу. Анимация в фотошопе cs6 аналогична пятой версии.

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

    Похожие записи:
  • как создать анимированную картинку:

  • Ссылка 1
  • Альтернативный сервер
  • Другие статьи, обзоры программ, новости

    Как создать анимированную галерею изображений

    «Сделай сам» с Wix: анимированная галерея изображений

    Хотите сделать главную страницу вашего сайта привлекательной? Вам сюда >>

    Пару дней назад мы наткнулись на потрясающий сайт, созданный при помощи Wix для Лос-Анджелесского цирка-театра Le Tigre Tent. Нас особенно впечатлило использование анимированной галереи на главной странице — оригинальная демонстрация изображений оживляет весь сайт, привлекая внимание посетителей буквально с первой секунды.


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

    В качестве примера мы используем шаблон Close Up HTML. но вы можете сделать то же самое на основе любого шаблона Wix.

    • Выберите место, куда вы хотите поместить галерею и очистите его от лишних элементов.
    • Добавьте бокс, чтобы задать границы вашей галереи. Нажмите Добавить > Формы и линии > Бокс .

    • Растяните бокс так, чтобы он закрыл область, выделенную под галерею.
    • Кликните на бокс, а затем на Изменить стиль. чтобы редактировать его – поменять цвета, добавить тени и т.д.

    • Растяните галерею, чтобы закрыть область бокса.
    • Чтобы изменить вид галереи, нажмите на нее и выберите Настройки .
    • Измените число колонок и рядов по желанию.
    • Назначьте ширину полей от 0 до 10, чтобы добавить пространства между изображениями.
    • В Переходах выберите По вертикали .

    • Измените длительность по вашему желанию (минимальное значение – 5).
    • Мы советуем использовать функции Показать кнопку Autoplay и Показать кнопки навигации .
    • Под надписью Нажав на изображение выберите желаемое действие (мы советуем опцию Войти в увеличенный режим ).

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

    • Теперь вернитесь в галерею, кликните по ней и выберите Организовать фото .

    • Нажмите Добавить Фото и выберите фотографии из вашего архива, бесплатной коллекции фотографий Wix или с вашего компьютера.

    • Вы можете добавить название и описание к своим фотографиям; стрелки слева позволят изменить порядок фотографий в галерее. Сколько фотографий стоит добавить в галерею будет зависеть от количества колонок и строк. Если у вас галерея 3х3, вам нужно добавить как минимум 27 снимков, чтобы разнообразить ее.
    • Теперь, когда все фотографии готовы, нажмите Сохранить и Предпросмотр. чтобы убедиться, что все выглядит именно так, как вы хотите. Вы можете изменить скорость смены изображений, расширить границы и поменять порядок фотографий.

    Вот, что мы получили в результате :

    Вот и всё, вы успешно добавили анимированную галерею изображений на ваш сайт.

    Еще по теме:

    Как превратить шаблон Wix в свой уникальный сайт

    Как создать логотип бесплатно

    «Сделай сам» c Wix: вертикальное навигационное меню

    Как сделать gif анимацию в фотошопе

    Как создать анимацию в фотошопе

    В данном уроке будет рассмотрен пример создания анимированного персонажа в программе Photoshop. Анимировать мы будем лягушенка, данную картинку можете скачать отсюда.

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

    Классическая анимация делается покадрово, т.е. она состоит из огромного количества кадров, где каждый кадр отвечает (несет в себе) малейшее движение персонажа (объекта). Современная мультипликация конечно шагнула достаточно далеко и сейчас уже все чаще мы видим 3-х мерную анимацию, но раньше, когда мультфильмы рисовались вручную все это делалось именно так (кадрами). 3D анимация делается тоже кадрами, но это уже другая тема.

    Для создании анимации какого-либо объекта (персонажа или предмета) в программе Photoshop мы будем использовать функцию «Марионеточной деформации». Это очень удобный инструмент, он позволяет легко и просто «оживить картинку». Для работы с объектом, для начала, нужно данный объект вырезать из основного фона, другими словами, нам нужен объект без фона.

    Далее необходимо преобразовать слой с персонажем в «Смарт объект» и приступать к «Марионеточной деформации».

    СОВЕТ: для получения более качественной анимации (плавности движений) необходимо делать больше кадров, а именно уменьшать расстояние между движущимися перемещаемыми частями объекта.

    Видео урок:

    Как создать анимированную GIF картинку

    Анимированный GIF файл – это простая форма анимации. Вы можете создать анимированный GIF файл при помощи онлайн-инструментов, если у вас есть набор картинок или короткое видео. Если вы хотите редактировать изображения и контролировать скорость анимации, скачайте бесплатный графический редактор GIMP и пользуйтесь его функционалом для создания GIF анимаций.

    Ваши действия Способ 1 из 2: Создание анимированных GIF файлов при помощи онлайн-инструментов

    Выберите набор изображений или видео. Создайте папку на компьютере, содержащую изображения, которые вы хотите анимировать. Каждое изображение будет отдельным кадром анимации. Кроме того, вы можете конвертировать короткое видео в анимированный GIF файл.
  • Откройте онлайн-генератор анимированных GIF файлов. Есть много бесплатных онлайн-генераторов анимированных GIF файлов, в том числе. и. Они не имеют такого богатого функционала, как у GIMP или другого графического редактора, но ими легко пользоваться (и не надо скачивать).
  • Вырежьте видеофрагмент (если хотите). Если вы хотите сделать анимированный GIF файл из видеофайла, вырежьте из него фрагмент (а не загружайте видеофайл целиком). Это можно сделать бесплатно при помощи. Скачайте эту программу и выполните следующие действия:
    • Запустите VLC и нажмите «Файл» — «Открыть», чтобы открыть видеофайл.
    • Найдите начало нужного видеофрагмента.
    • Нажмите «Воспроизведение» — «Запись».
    • Воспроизведите видеофайл и остановите воспроизведение, когда достигнут конец видеофрагмента. Нажмите «Запись» еще раз, чтобы остановить запись. Новый видеофайл будет сохранен в той же папке, в которой хранится исходный видеофайл.
  • Загрузите изображения или видео. Для этого нажмите «Загрузить изображения». Если вы хотите конвертировать видеофайл, нажмите «Загрузить видео».
    • Загрузка видеофайла может занять много времени, если у вас медленный интернет или если видеофайл большой. Рекомендуется загружать видеофрагменты длительностью не более нескольких секунд.
  • Онлайн-инструменты, как правило, позволяют менять порядок изображений (в случае, если вы загрузили их в неправильном порядке). Вы также можете добавить текст, изменить размер изображений и задать скорость анимации.
  • Для создания анимированного GIF файла нажмите «Создать GIF», «Создать сейчас» или аналогичную кнопку. После создания отобразится список опций, в том числе ссылки для отправки анимации на форумы, для ее скачивания или вставки на веб-страницу.

  • Способ 2 из 2: Создание анимированных GIF файлов в GIMP

    Скачайте . Это бесплатный графический редактор. Используя GIMP, вы можете редактировать каждый кадр вашей GIF анимации, настроить скорость воспроизведения анимации и сохранить ее в оптимизированном формате (который будет быстрее загружаться).
  • Your ads will be inserted here by

    Easy Plugin for AdSense .

    Please go to the plugin admin page to
    Paste your ad code OR
    Suppress this ad slot .

    Откройте изображение, которое вы хотели анимировать. Для этого нажмите «Файл» – «Открыть» и выберите изображение, сохраненное на компьютере. Если вы хотите создать GIF анимацию с нуля, нажмите «Файл» – «Создать».
    • Если вы используете изображение с несколькими слоями, нажмите «Изображение» — «Выровнять рисунок», чтобы объединить все слои в один слой.
  • Добавление дополнительных изображений. Если у вас уже есть серия изображений для их превращения в GIF анимацию (например, серия скриншотов), откройте их, нажав «Файл» — «Открыть как слои». Если у вас есть только одно изображение, в окне «Слои» (справа) воспользуйтесь опцией «Дублировать слой». Для этого щелкните правой кнопкой мыши по значку изображения и нажмите «Дублировать слой», или выделите значок изображения и нажмите на кнопку в виде двух сложенных фотографий.
    • Каждый слой будет одним кадром GIF анимации. Изображение в конце списка будет отображаться первым (и так далее вверх по списку). Для изменения порядка отображения изображений поменяйте их местами в списке изображений.
    • Все изображения должны быть одного размера; большие изображения будут обрезаны при сохранении GIF анимации.
  • Скройте слои, чтобы редактировать нижние слои (если хотите). Если вы планируете редактировать изображения или добавлять к ним текст, в списке скройте все слои, расположенные над слоем, который вы редактируете. Есть два способа сделать это (в окне «Слои»):
    • Нажмите на значок в виде глаза рядом со слоем, чтобы скрыть его. Нажмите на тот же значок, чтобы отобразить слой.
    • Или выделите слой и задайте уровень непрозрачности (в верхней части окна «Слои»). Низкое значение непрозрачности сделает слой более прозрачным. Это полезно, если вы хотите добавить текст или другие дополнения в несколько кадров.
  • Редактирование изображений (по желанию). или просто выполните следующие действия. Выберите изображение, которое вы хотите отредактировать, в окне «Слои» (справа), а затем используйте следующие инструменты:
    • В окне «Панель инструментов» (слева) выберите инструмент «Масштаб», чтобы изменить размер изображения. Сделайте все слои одинакового размера.
    • В окне «Панель инструментов» (слева) выберите инструмент «Текст», чтобы добавить текст. Введите текст и используйте всплывающую панель инструментов, чтобы задать размер, тип и цвет шрифта. По окончании нажмите «Слой» — «Объединить», чтобы объединить слой с текстом со слоем, расположенным под ним.
  • Просмотрите анимацию. После того, как вы завершили редактирование, нажмите «Фильтры» — «Анимация» — «Воспроизвести». Нажмите на значок воспроизведения в открывшемся окне для просмотра анимации.
  • Задайте скорость анимации. Откройте окно «Слои» и щелкните правой кнопкой мыши (или Control+ правая кнопка мыши на некоторых компьютерах Mac) по слою. Выберите «Редактировать атрибуты слоя». После имени введите (XXXXms), заменив ХХХХ на число миллисекунд, в течение которых данный слой должен отображаться. Сделайте это с каждым слоем. Воспроизведите анимацию еще раз, чтобы просмотреть ее с внесенными изменениями.
    • Скорость большинства GIF анимаций на основе видеофрагментов равна около 10 кадров в секунду (100 мс на кадр).
    • Вы можете пропустить этот шаг и задать скорость по умолчанию позже (во время экспорта файла).
  • Оптимизируйте анимацию для ускорения ее загрузки. Нажмите «Фильтр» — «Анимация» — «Оптимизировать (для GIF)». Это приведет к созданию копии исходного файла гораздо меньшего размера. В следующих шагах работайте с уменьшенной копией исходного файла.
    • До оптимизации каждый кадр анимации загружается полностью. После оптимизации загружаются только меняющиеся участки изображений.
    • Вы можете пропустить этот шаг и оптимизировать анимацию при ее экспорте.
  • Экспортируйте анимацию в формат GIF. Для этого нажмите «Файл» — «Экспортировать как». В нижней части открывшегося окна нажмите «Выберите тип файла» — «GIF». Затем нажмите «Экспортировать».
  • В новом окне «Экспорт изображения в виде GIF» установите флажок у «В виде анимации». Затем нажмите «Экспортировать» или внесите следующие изменения:
    • Уберите флажок у «Зациклить», если вы хотите воспроизвести анимацию только один раз.
    • Если вы не задали скорость анимации, сделайте это сейчас. По умолчанию скорость анимации установлена на 100 мс, или 10 кадров в секунду. Уменьшите это значение, чтобы ускорить анимацию (и наоборот).
    • Если вы не оптимизировали анимацию, найдите опцию «Удаление кадров» и выберите «Общие слои (комбинировать)».
  • Рекомендации
    • Старые версии Adobe Photoshop включали в себя программу Adobe ImageReady. Если она у вас есть, сделайте каждый кадр по отдельности в Photoshop, а затем воспользуйтесь Adobe ImageReady, чтобы создать анимацию так, как описано выше (аналогичным способом).
    • GIMP имеет несколько анимационных эффектов в меню «Фильтры» и «Анимация». Эти эффекты вставляются между кадрами, например, рябь.
    • Для получения доступа к дополнительным эффектам плагин Gimp Animation Plugin (GAP) и. GAP не работает в 64-разрядных версиях GIMP 2.8, поэтому вам, возможно, потребуется .
    Предостережения
    • Размер анимированного GIF файла может быть таким большим, что он будет медленно загружаться (например, на веб-странице). Используйте меньшее количество цветов и не вставляйте размытые изображения, чтобы уменьшить размер анимации.
    Похожие публикации
    • Как отделить изображение в программе GIMP
    • Как создать GIF анимацию в GIMP
    • Как сохранять изображения в формате PNG
    • Как уменьшить размер файла Powerpoint
    • Как конвертировать изображение в PDF
    • Как выбрать себе другой скин в игре Minecraft

    Как создать анимированную gif картинку, используя Adobe Photoshop

    Как создать анимированную gif картинку, используя Adobe Photoshop

    Хотите уникальную аватарку для дневника/форума? Нигде не найти именно то, что нужно? Желаете поразить посетителей анимированными элементами дизайна на вашем веб-сайте? Создайте свою собственную анимированную gif картинку (или даже серию), используя продукты из линейки Adobe Photoshop. Поверьте, это действительно легко, справится даже начинающий.

    Вам понадобится:
    - Adobe Photoshop по идее любой версии, от 5.5;
    - Adobe ImageReady (идет в комплекте с Photoshop).


    Создаем несколько картинок, чтобы собрать из них анимированный gif:

    1. Откройте Photoshop и создайте новый пустой файл подходящего размера: как правило, в сервисах соцсетей и на форумах допускаются аватары размером 80х80, 100х100, 200х200 и в редких случаях 250х250. Выберите один из этих размеров, установите цветовой режим RGB. Если вы намерены создать движущуюся картинку, фоном для которой послужит фон сайта/форума, отметьте здесь так же прозрачный (transparent) фон. Но помните, что только некоторые фигурки получается вырезать из картинок настолько аккуратно, чтобы убрать белесые (и другого цвета) очертания, так что подумайте, все-таки задав фиксированный фон будущей аватаре или баннеру вы значительно облегчите себе жизнь.


    2. Выберите в меню пункт «Window» (Показать - инструменты/панели) и в раскрывшемся списке отметьте галочкой пункт «Layers» (Показать панель «слои»). Чаще всего галочка уже стоит, то есть показ панели задан по умолчанию.


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

    Как вариант, можно нарезать необходимых объектов из найденных в Интернете картинок, используя лассо и все его аналоги из списка (Lasso Tool),


    выделение квадратом и кругом (все варианты из списка Marquee Tool),


    волшебную палочку (Magic Wand Tool),


    функцию копирования и вставки выделенного (после выделения, в меню выбирайте: Edit->Copy, затем в созданном вами новом файле Edit->Paste) и ластик, чтобы убрать лишнее. Уменьшайте или увеличивайте, наклоняйте, отображайте или поворачивайте скопированную картинку по своему желанию при помощи Edit->Free Transform и Edit->Transform.

    Либо можно сделать надпись на нужном фоне при помощи Type Tool, и затем, используя фильтры, вносить изменения на новых слоях для получения движущейся картинки в конечном итоге; или сделать так, чтобы на каждом новом слое появлялось по 1 новой букве или новому слову.

    4. Нажатием правой кнопки мыши на выделенном исходном слое выберите в панели инструментов «Слои» пункт «Дублировать слой» (Duplicate Layer). Выделите новый созданный слой, если этого не произошло автоматически. И затем, после работы, каждый раз копируйте последний слой с внесенными изменениями (либо первый, если по задумке вам нужен именно он).


    5. Внесите на новом слое какие-то изменения в картинку: что-то добавьте (например, новый объект или буквы), что-то уберите (ластиком), уменьшите/увеличьте общий размер, поменяйте цвет какой-то детали, осветлите/затемните картинку в целом (в меню Image->Adjustments->Brightness/Contrast; таким образом, вы сможете добиться того, что ваша картинка будет мигать при смене в gif файле светлой и темной картинок), и т. д.

    Помните, что в gif картинке слои будут СМЕНЯТЬ по порядку друг друга, а не накладывать дополнения на первый слой. За счет дополнений и изменений в новых слоях gif картинка создаст имитацию движения. Поэтому, если вы через копирование будете добавлять новые элементы в картинку (а они пойдут опять новыми, отдельными слоями), не забывайте выделять слой с последним дополнением и далее через меню Layer->Merge Dowm (Слои->Объединить с одним нижним; нажать 1 раз или в зависимости от количества скопированных дополнений) объединять новую(ые) деталь(и)-дополнение(я) с дубликатом последнего слоя.


    6. Когда все слои будут готовы, проследите чтобы именно ваш файл со слоями был активным в этот момент, и выберите в меню: File->Jump To-> Adobe ImageReady. Созданный вами файл со слоями будет перенесен в приложение ImageReady.

    Создаем анимированную картинку в Adobe ImageReady:

    1. В меню выберите и отметьте галочкой: Window->Show Animation (как правило уже установлено по умолчанию). Таким образом, вы активируете панель Анимации. В панели анимации перенесенный файл будет выглядеть, как 1 единственный кадр. Если при переносе произошел сбой и ImageReady сама автоматически сделала раскадровку, смотрите сразу п. 3.а ниже.


    2. В правом верхнем углу панели Анимации нажмите на стрелочку, откроется подменю, в нем выберите пункт Make Frames From Layers (Сделать кадры из слоев). Программа сделает вам раскадровку по слоям.

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


    2.а. В панели Анимации под каждым кадром указано время в секундах – его нужно поменять, если вы хотите, что кадры сменялись с задержкой, а не моментально, т. е. чтобы каждый кард задерживался перед смотрящим на указанное вами количество секунд. Просто нажмите на надпись и установите при желании нужное время.

    3. В меню выберите: File->Save Optimized As (Сохранить оптимизированный файл как…) и далее выберите папку и имя для сохранения анимированного gif файла.
    3.а. После любого изменения файла в Photoshop(е) обязательно заново повторяйте переброску файла File->Jump To-> Adobe ImageReady, иначе все настройки в ImageReady собьются в нечто непонятное.
    Бывает, что настройки и синхронизация между Photoshop и ImageReady не срабатывают верно, тогда вам придется, выделяя каждый кадр в панели Анимации, переходить на панель слоев справа (аналогичную панели слоев в Фотошопе) и подключать или отключать (нажимая на изображение глаза слева от каждого слоя) для конкретного кадра нужные слои. В общем-то тоже ничего сложного.

    - В принципе, рисовать можно и в ImageReady, т. к. панели инструментов у них с Photoshop похожи;

    - На панели Анимации, внизу, под кадрами, есть стандартные кнопки управления видео – нажав на стрелку, можно запустить превью, и посмотреть, как будет выглядеть ваша gif картинка;

    - Чем больше кадров, тем тяжелее будущая gif картинка, имейте это в виду.

    Как создать анимацию в фотошопе? Анимированный баннер

    Как создать анимацию в фотошопе? Анимированный баннер

    Привет друзья! Сегодня мне пришла мысль рассказать о том, как создать анимацию или анимированный баннер в фотошопе. Для чего это вам нужно? Если вы зарабатываете на своем блоге с помощью партнерких программ. то обычно это происходит с помощью баннеров.

    Большинство инфо-бизнесменов предоставляют своим партнерам уже готовые баннеры, как анимированные, так и в виде простой картинки с вашей партнерской ссылкой. Остается только скопировать код и установить его на своем блоге.

    А что делать, если вы решили не ставить картинку предоставленную хозяином партнерской программы, в котором вы участвуете, а сделать свою? Или этот человечек не предоставил вам ничего кроме партнерской ссылки. Да, и так бывает.

    Думаю, многие согласятся со мной, что внимание посетителей блога лучше привлекают именно анимированные картинки, чем обычная ссылка. Тем самым увеличивая конверсию переходов и продаж.

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

    И так, запускаем программу фотошоп. Надеюсь, что она у вас установлена.

    У меня установлен русифицированная версия фотошопа (CS6), поэтому я буду делать свою анимацию, и рассказывать, как это делается именно в ней.

    В меню выбираем "Файл - Создать". для того, чтобы создать новый документ.

    В открывшемся окне устанавливаем наши настройки будущего анимированного баннера. Рекомендую, размеры (высота, ширина) устанавливать не наугад, а выбрать стандартные. Я, для примера, выберу один из стандартных размеров баннера, это 468 на 60 пикселей. Нажимаем "ОК".

    У нас создается чистый документ, в котором мы уже будем делать анимацию.

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

    И так, в меню с инструментами фотошоп, я выбираю инструмент "Текст". Пишу нужный мне текст на созданном нами документе, и нажимаем галочку вверху окошка. Наш текст создается на новом слое. Как выбирать и настраивать шрифт, цвет шрифта, я надеюсь, вы знаете.

    Теперь отключаем слой с первым текстом, нажав на глазик рядом с нужным слоем, и опять выбрав инструмент "Текст", пишем следующую строку. Новый текст опять появится на новом слое.

    Теперь у нас три слоя. Первый слой это фон, который вы можете залить любым цветом, и два слоя с текстом.

    Наши слои для создания анимации (анимированного баннера) готовы. Теперь перейдем к созданию сомой анимации, и оживим наш баннер.

    В меню заходим по вкладке "Окно" и ставим галочку рядом с пунктом "Шкала времени".

    В нижней части окна фотошоп должна появиться дополнительное окно инструмента "Шкала времени". На нем уже имеется первый кадр нашей анимации. Так как моя анимация будет состоять всего из двух кадров, то я создаю еще один кадр. Для этого надо нажать на иконку "Созданий копий выделенных кадров" (смотрите рисунок).

    Теперь у нас два кадра с одинаковым содержимым. Нам же нужно, что бы содержимое кадров были разные, чтобы при показе каждого кадра менялся текст или картинка нашего анимированного баннера.

    Сделайте клик на первом кадре, тем самым мы его выделяем. Теперь открываем окно с нашими слоями, и оставляем иконки глазика только рядом с теми, которые должны быть на кадре. В моем случае это надпись "Делаем анимированный баннер" и слой с фоном.

    Далее выделяем второй кадр, кликнув по нему. Опять переходим в слои, и включаем те слои, которые должны быть на втором кадре. Лишние выключаем. В моем случае это опять фоновый слой и вторая надпись "В программе фотошоп". Слой "Делаем анимированный баннер" я отключаю, так как на втором кадре его недолжно быть.

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

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

    Теперь снова запускаем нашу анимацию, и смотрим результат. Если вас все устраивает, тогда можете переходить к сохранению нашего анимированного баннера.

    Идем в меню "Файл" - "Сохранить для WEB. ". Обязательно сохраняем нашу анимацию в формате GIF. только в этом формате ваша анимация будет работать.

    Вот что получилось у меня по ходу этого урока.

    Для более лучшего понимания как создать анимацию в фотошоп, я записал урок в видео формате. Смотрите и оставляйте свои комментарий ??

    В следующий раз мы рассмотрим, как прикрепить к нашему баннеру ссылку. чтобы при клике по нему можно было переходить на другие сайты.

    На этом все! До новых встреч.

    Как создать баннер для сайта

    Как создать баннер для сайта

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

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

    Что включает в себя веб-баннер:

    1. Графическое изображение;
    2. Рекламный текст;
    3. Гиперссылку на рекламируемую страницу.

    Главное, баннер должен создаваться с таким расчетом, чтобы пользователь был привлечен его красивым изображением, прочитал сопроводительный рекламный текст и был воодушевлен кликнуть по его поверхности, чтобы узнать подробности. От привлекательности изображения мини плаката и от содержащейся интриги в сопроводительном тексте, зависит число переходов по баннеру и соответственно процент продаж рекламируемого продукта.

    Распространенные типы баннеров 1. Статический плакат

    Чтобы создать простой статический баннер для сайта, достаточно любого графического редактора с опцией добавления текста. Затем остается только разместить картинку на веб-странице и добавить к ней гиперссылку.

    2. Слайдер

    Представляет собой последовательность автоматически переключающихся картинок. Посетитель может самостоятельно перелистывать картинки, нажимая на кнопки вперед и назад. Пример такого слайдера в сайдбаре WordPress-book.ru.

    Для создания слайдера любого размера на сайте WordPress рекомендую использовать плагин Content Slide .

    3. GIF-анимация

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

    4. Flash-анимация

    Следующий этап приближения к мультипликации. Анимация на основе Flash-технологии, разработанной компанией Adobe.

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

    Как создать баннер для сайта 1. Онлайн-сервисы

    Специализирующиеся по созданию баннеров онлайн сервисы предлагают услуги по полуавтоматическому созданию таких мини-плакатов практически любого формата. В зависимости от качества услуг такие сервисы могут быть как абсолютно, так и условно бесплатными.

    Представлю два бесплатных, понравившихся мне сервиса.

    Banner FANS

    Bannerfans.com - сервис для создания статических баннеров, переведен на русский язык, что приятно и облегчает работу. Вы можете создать баннер с нуля или переделать под свои нужды из предложенных шаблонов.

    На каждой вкладке множество опций, разобраться в которых не составит труда.

    Для текстового объявления доступен богатый набор шрифтов, но кириллицу поддерживают только из семейства Stock.

    Удобный сервис, позволяющий быстро создать простой и без излишеств баннер для своего сайта.

    Гифовина

    Gifovina.ru - этот сервис тоже предельно прост в работе, и, в отличие от предыдущего, может создавать анимационные баннер, аватарку или слайдшоу со сменой картинок. Просто добавьте картинки в очередь нажав на кнопку " Добавить кадр ".

    Недостаток сервиса в том, что исходные картинки для анимации должны быть приготовлены заранее.

    2. Специальный софт

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

    В таких программах можно использовать пошаговый мастер, обширные базы готовых шаблонов, разнообразные инструменты для кустомайзинга и так далее.

    Предлагаю вашему вниманию две программы, которыми время от времени пользуюсь сам.

    Ulead Gif Animator

    Эта программа по праву пользуется всемирной популярностью. Разобравшись в ее несложном интерфейсе, вы без труда создадите красивый анимированный баннер для своего сайта или даже небольшую презентацию своего продукта.

    Работа со слоями (как в фотошопе), многочисленные инструменты и эффекты вполне позволяют это осуществить.

    Я заменил текст бегущей строки шаблонного баннера программы, и вот что у меня получилось:

    Easy GIF Animator Pro

    Этот софт проще, чем предыдущий.

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

    Вот мой баннер, созданный в Easy GIF Animator Pro менее чем за минуту:

    Баннеры в обеих программах оптимизируются автоматически без потери качества, что, несомненно, большой плюс в их пользу.

    3. Заказать дизайнерской студии или фрилансеру

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

    Результирующий продукт определяется полетом фантазии дизайнера и суммой, которую готов заплатить заказчик.

    Хорошего исполнителя заказа вы быстро найдете на биржах фриланса, например таких как frilans.ru.

    4. Вручную в графическом редакторе

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

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

    Фотошоп

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

    Microsoft Power Point

    Программа, входящая в установочный пакет Microsoft Office. Высока вероятность того, что она у вас уже установлена вместе с Microsoft Office Word.

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

    Paint.net

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

    Как сделать баннер ссылкой

    Довольно простая задача, но у многих начинающих веб-мастеров возникает затруднение при ее решении.

    Баннер делается ссылкой как любое другое графическое изображение. Для этого загрузите его на любую страницу своего сайта.

    После загрузки в настройках отображения файла в поле « С сылка » выберите « Произвольный URL » и в поле ниже вставьте свою ссылку.

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

    Обратите внимание, чтобы рекламируемая страница открывалась в новом окне, к ее ссылке добавьте атрибут target="_blank". как на картинке.

    Тем, кому я помог создать баннер для своего сайта, предлагаю поделиться здесь своим творением. Просто скопируйте его HTML код в форму комментария. Дополнительная реклама вашему сайту не помешает :-).

    С уважением, Роман Ваховский.

    Это тоже интересно:
    • Эффективная дешевая раскрутка и…
    • Как наложить водяной знак на…
    • Как заработать на партнерских…
    • Как создать электронную книгу
    • Проверка уникальности контента:…
    • Как сделать поддомен на сайте
    • Качественная индексация…
    • Информационный канал Subscribe в…