Как оживлять фотографии? Легко и просто!

Для чего предназначена программа ArtWaver?


Много ли у Вас фотографий? Сколько из них фотографий природы? И они все лежат без дела в запыленных уголках Вашего жесткого диска? С новой мультимедийной программой ArtWaver, Вы будете перебирать все фотографии, одну за одной, оживлять и складывать их в свое портфолио.
Вы сможете показать своим друзьям и знакомым не просто фотографии проведенного отпуска, а живые, анимированные изображения. Причем, технологии анимации, использованные в данной программе, позволяют получить анимированную фотографию в виде конечного файла, размером часто не больше двойного размера исходной фотографии. Полученный файл будет полностью автономен (обычный «.exe» файл). Благодаря этому, вы сможете отправлять, созданные анимации по почте и выкладывать на форумах.


Основные достоинства программы ArtWaver - простота использования и оригинальность реализации графических эффектов. Простота - то к чему стремились авторы-разработчики «Simitex lab» при разработке всего интерфейса программы. В результате созданный программный продукт настолько прост, при своей достаточной функциональности и гибкости, что воспользоваться им может без каких-либо затруднений любой конечный пользователь ПК, не обладающий опытом работы с графическим ПО. Вам достаточно загрузить нужную фотографию в программу, добавить слой (фильтр эффекта) и зарисовать кистью область изображения, к которой должен примениться эффект. И это все! Вы уже получите готовую анимацию. Согласитесь, все достаточно быстро и просто.

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

Сегодня мы представляем вашему вниманию урок "Ожившая фотография", который в марте прошлого года (2012) подготовила sunny_alison . Итак, урок по синематографии.

Сегодня мы с вами будем учиться делать так называемую "живую" фотографию. "Живая" фотография - это изображение в формате gif, где часть снимка, словно живая - движется, тогда как остальной снимок статичен. Эти снимки сочетают в себе видео и фотографию, отсюда и их название - синематографии. Сделать такую синематографию не очень сложно, главное - понять принцип и грамотно подобрать объект для анимации.

Теоретический урок

Итак, что же такое синематография?

По сути это набор кадров, сменяющих друг друга. Например, на первом кадре человек с закрытыми глазами, на втором - начинает их открывать, на третьем - ещё больше, на четвертом - глаза совсем открыты, а дальше - в обратном порядке. Чтобы на вашем снимке двигались только глаза (а не случайно дёрнувшаяся рука, уголок губ, или упавшая прядь волос), анимацию оставляют только на нужном участке снимка. Как это сделать? Двумя способами.

Способ 1: Из каждого кадра вырезать область, которая должна двигаться на фото, а остальное удалить, оставив лишь один кадр невредимым. Он и станет фоном для всей анимации. Допустим, вы анимируете то же моргание человека. У вас, скажем, 10 кадров на которых человек моргает. В 9-ти из 10-ти кадров вы удалите всё, кроме глаз. 10-й кадр будет фоном, его мы расположим под остальными. Фон будет видно всегда, а вот кадры с морганием будут попеременно сменять друг друга.

Способ 2: Все кадры оставляем невредимыми, кроме одного - в нём вырезаем "дырку" в том месте, где хотим видеть движение, и располагаем его выше других. Допустим, в том же примере с морганием, мы берем один из 10 кадров и удаляем на изображении глазницы (жутковато!). Перед нами картинка, у которой нет глаз - это фон. Зато через эту "дырку" можно видеть кадры, расположенные под фоном. Фон остается на месте всё время, а кадры сменяют друг друга.

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

Откуда взять эти самые кадры для анимации?

Откуда же взять эти самые кадры, из которых нужно что-то вырезать? Опять же есть два варианта: можно использовать для создания синематографии видео (снятое самостоятельно, или готовое, взятое из сети), а можно - ряд фотографий. В первом случае вам нужно будет снять или найти подходящее видео, а потом придётся пользоваться специальной программой (или ставить дополнительные кодеки для ФШ) для того, чтобы сохранить часть из этого видео как набор скриншотов, кадров, которые мы в последствии сможем использовать.

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

Что именно фотографировать/снимать на видео?

Сложность синематографий в их оптимизации, ведь формат gif, поддерживающий анимацию, может содержать в себе не больше 256 цветов (считаются все оттенки!). Отсюда первое правило создания "живого" снимка:

Правило №1. Не выбирайте объектом вашей анимации предметы ярких насыщенных цветов. При их оптимизации на вашем снимке проявится немало неприятных артефактов (проще
говоря, фотография запестрит пикселями). Берите спокойные тона, желательно, чтобы на всей вашей будущей синематографии этих цветов оказалось немного. Избегайте градиентов, радуги, и других пестрых текстур.

Правило №2. Выбирайте объект, который совершает цикличное движение! Проще говоря, не фотографируйте рыбок, хаотично плавающих в аквариуме, ведь вы никогда не сможете
"закольцевать" такую съёмку. Ваш предмет должен совершать движение и возвращаться на тоже место, на котором был в начале! Человек открыл глаза - человек закрыл глаза. Листик на ветке качнулся и вернулся обратно. Или же ваш объект должен изначально отсутствовать в кадре, потом появляться, а потом снова исчезать. Например, таракан, пробегающий по столу раз за разом. Или капля воды, падающая из крана вниз. Если в качестве вашей модели выступает живой человек, просите модель как можно меньше шевелиться, не совершать лишних движений.

Правило №3. Берите маленький движущийся объект (небольшую область анимации). С большим сложнее работать - легче допустить ошибку при съёмке. К тому же анимация большого объекта будет немало "весить". А какой смысл живой фотографии, если её нельзя никому показать?

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

Практический урок

Этап 1. Фотографируем

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

Дальше разбираемся с настройками вашего фотоаппарата. Вам необходимо найти режим скоростной съемки, чтобы быстро и без проблем отснять движение лопастей вентилятора. Этот режим означает, что, нажав кнопку, вы сделаете не один кадр, а сразу много - фотоаппарат будет снимать, пока вы не отпустите кнопку (или пока не закончится флешка). Скорость съёмки напрямую зависит от того, какая именно у вас камера.

Ну а дальше всё просто: ставите свой фотоаппарат на штатив (или на ровную устойчивую поверхность), чтобы все кадры были сняты с одинаковой точки, и наша анимация не прыгала. Это очень важный момент! Если камера будет сдвигаться хоть на миллимитр во время серийной съемки, то всё пропало.

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

Этап 2. Работаем с получившимся материалом

Я работаю в ФШ версии Cs2 и Cs5 (оба - на английском языке), урок буду писать, пользуясь 5-й версией. В принципе в новой версии не появилось ничего уникального, связанного с анимацией, но некоторые команды изменили свое расположение. Поэтому спрашивайте, если что.

1. Отсмотрите все кадры, которые вы отсняли. Найдите начало и конец движения, в нашем случае это когда вентилятор сделал полный круг. Лишние кадры после этого можно удалить.

2. Если ваш объект совершает небольшое движение, а дублей вышло слишком много, удалите лишние кадры через один Как правило, после двух этих действий у вас останется немного кадров (10-30 кадров).

3. Откройте все снимки в ФШ. Перетащите все снимки в один файл - один слой над другим, в том порядке, в котором вы их снимали. Нижним слоем получится начало движения, наверху - конец.

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

После этого возьмите инструмент "Brush tool" (кисть) и закрасьте с его помощью ту область, где нужно сделать дырку. Лучше пользоваться кистью с жесткими краями, чтобы видеть чёткие границы области, которую вы выделяете:

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

Теперь превратим выделенную область в векторную маску. Для этого щелкнем по кнопке "Add vector mask" на панели "Layers" (Слои):

И вы увидите, что около вашего слоя появилась маска с черной областью - это и есть дырка, через которую мы будем видеть слои, расположенные под нашим "фоном":

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

5. Теперь создаем анимацию. Для этого откроем панель "Animation" (Анимация) с помощью команды "Window - Animation" (для тех, кто пользуется более поздними версиями Adobe Photoshop, например, CS6, окно "Animation" называется "Timeline"). Панель выглядит вот так:

Сейчас перед вами только один кадр. Это значит анимации нет. Прежде всего нам нужно создать другие кадры. Кадров должно быть столько же, сколько у вас слоев (за исключением фона с маской). У меня 8 слоев, поэтому я должна создать еще 7 кадров. Это делается с помощью кнопки "Duplicate selected frames" (дублировать выделенные кадры):

Я нажала 7 раз на эту кнопку, и вот все мои 8 кадров:

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

Выставляя видимость слоев, вы сразу же будете видеть результат,а именно то, как происходит анимация от кадра к кадру. Когда вы закончите, подберите скорость перехода от кадра к кадру. Выделите все кадры с помощью кнопок Shift или Ctrl на клавиатуре и из выпадающего списа выберите нужное значение:

Я выбрала 0,1 секунды. "No delay" значит без остановки. Вот и всё! Анимация готова.

6. Доводим картинку до ума. Т.е. занимаемся украшательствами. Этот шаг необязательный в создании синематографии, но совсем без обработки не делается практически ни одно фото. На моей картинке явно не хватает света. И еще хотелось бы подправить цвета.

Я создаю два корректирующих слоя (убедитесь, что при этом вы находитесь на первой кадре анимации, а действия, сделанные на первом кадре анимации, будут распространяться и на все остальные кадры) - "Selective color" (редактирование цветов) и "Curves" (кривые) с помощью кнопки "Create new fill or adjustments layer" (создать новую заливку или корректирующий слой), которая находится внизу на панели "Layers" (Слои):

Получаем вполне красивый результат.

С помощью команды "Image - Image Size" (Изображение - размер изображения) уменьшаем нашу синематографию до нужный размеров. Я выбрала размер 700 по большой стороне (но помните, что для публикации в ужно делать от 800 до 1000 по большей стороне).

7. Сохраняем нашу синематографию. Для этого пользуемся командой "File - Save for Web & Devises" (Файл - Сохранить для Веб и устройств). В появившемся окне нам предлагают выбрать настройки оптимизации формата gif. Как я и говорила ранее, в формате gif лишь 256 цветов, поэтому качество изображения непременно пострадает, это неизбежно. В каких-то случаях это видно не сильно, в каких-то - довольно заметно. Именно поэтому я давала советы по выбору исходника по цветам.

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

После этого жмёте "Save", даёте имя, и ваша "живая" фотография готова!

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

Важно: Мы создали синематографию с помощью серийной съемки. Но не у всех фотоаппаратов есть возможность делать быструю серийную съемку. Да и не всегда этот способ удобен. Помните, что вы можете также снимать видео! При съёмке видео обязательно ставьте видеокамеру/фотоаппарат на штатив. И не делайте длинных роликов (не больше 10-20 секунд), иначе замучаетесь удалять ненужные кадры. Получившийся ролик необходимо разобрать на кадры, которые потом вы сможете, словно серийную съемку, с которой мы работали, превратить в анимацию. В последних версиях фотошопа есть возможность разложения видео на кадры-слои, это очень удобно. Команда звучит как "File - Import - Video Frames to Layers" (Файл - импорт - Видео кадры как слои). Тем, кто пользуется ФШ старых версий, придётся воспользоваться Adobe Image Ready или сторонней программой для сохранения скриншотов из фильмов. Если кому-то будет интересен данный способ создания синематографий, напишите, я расскажу.

Материал подготовлен sunny_alison специально для

UPD: для тех, кто пользуется Adobe Photoshop CS6: окно Animation в этой версии программы называется Timeline

Первое преимущество конструктора баннеров в том, что он доступен онлайн и не требует установки дополнительного программного обеспечения. Как видно на скрине, сам сервис небольшой и не перегружен ссылками меню, кнопками управления и различных настроек. На главной странице их всего 4. Нам потребуется раздел Мои проекты и Вдохновение (Inspiration). После авторизации через Фейсбук или обычной регистрации (емейл + пароль) мы можем приступить к созданию баннера, постера или пригласительного.

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

В сервисе есть все необходимые инструменты чтобы сделать баннер быстро и качественно и скачать в нужном нам формате. Доступны несколько форматов изображений готовых баннеров:JPG, PNG и PDF.

Чтобы сделать баннер, достаточно просто начать. Перейдите на сайт конструктора.

1. Мы можем выбрать готовый дизайн из предложенной библиотеки готовых варантов. По сути, если нас устраивает картинка и оформление, мы можем только заменить текст на свой;
2. Либо, можно начать создавать с чистого листа, задав нужный размер или выбрав из предложенных форматов (для Фейсбук, Инстаграмм, Постер и др) и загрузив в сервис свою картинку.

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

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

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

Для работы с конструктором лучше использовать браузер Хром, так как я заметил, что Мозиле при сохранении, не вписывается расширение.png — это решается простым переименовываением файла и добавлением нужного (в котором скачивали) точка и название (png или jpg). Вроде все.

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

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

Баннер (англ. banner – знамя) – графическое изображение рекламного характера. В сфере Интернет баннер является особым форматом рекламы, содержащим гиперссылку на рекламируемый сайт.

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

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

1.1 Форматы баннеров

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

Чаще всего в интернете используются следующие стандартные размеры баннеров (сетка взята из рекламной кампании Google Adsense):

Примечание: размеры (горизонтальный Х вертикальный) указаны в пикселях (px).

Посмотреть, как выглядят баннеры данных форматов, можно .

1.2 Виды баннеров

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

• Статичный баннер – самый простой вариант. В этом случае баннер представляет собой одну статическую картинку (неменяющееся изображение). Преимущества – простота реализации, небольшой вес файла. Недостаток – минимум выразительности; такие баннеры, как правило, менее эффективные, нежели их другие виды.
• Анимированный баннер представляет собой несколько изображений, поочередно меняющихся во времени. Формат подобного файла – «.gif». Преимущества – высокая эффективность, неплохая выразительность. Недостаток – довольно большой вес баннера по сравнению с предыдущим вариантом.
• Флеш-баннер (Java-баннер) – самый сложный по степени реализации вариант. Создается по технологии Adobe Flash. Благодаря своим особенностям (использование векторной графики вместо растовой) значительно уменьшается объем файла, но появляются дополнительные возможности (звуковые эффекты, плавное изменение кадров и т.д.). Некоторые баннеры дают возможность совершать интерактивные действия (нажимать кнопки на баннере, играть в мини-игры и т.д.). А рекламная внутри и не видна пользователю. По сути, данный баннер представляет собой программу. Преимущества – высочайшая эффективность, отличная выразительность, небольшой размер файла. Недостаток – дополнительные требования к сайтам (необходима поддержка Java) и браузерам (может не работать на старых версиях браузеров, не поддерживающих Flash-анимацию).

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

Одним из способов сделать анимированный баннер онлайн является сервис bannerfans.com. Его преимущество состоит в том, что функционал создания баннера превосходит аналогичные ресурсы. Есть возможность смены языка (русский поддерживается).

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

Несколько красивых шаблонов баннеров можно взять . А для работы в фотошопе можно воспользоваться этими .

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

Теперь о том, как создать баннер для сайта с помощью Bannerfans . Делается это за 5 шагов.

2.1 Шаг первый: создание макета

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

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

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

В четвертой области выбирается начальный цвет градиента и конечный.

В пятой области выбирается тип (режим) градиента.

2.2 Шаг второй: создание надписи

На этом этапе можно создавать до 6 различных надписей. Но сначала нужно перейти на вкладку «Текст ». На скрине ниже область разделена на семь частей.

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

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

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

Четвертая область – размер шрифта.

Пятая область – цвет надписи. Доступен довольно большой выбор.

Шестая область – наклон надписи (относительно горизонтали).

Седьмая область – кнопка «изменить баннер». Используется для отображения внесенных изменений.

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

Тень – выбор положения тени (справа, слева, сверху, снизу и т.д.)

Расстояние – удаленность тени от основной надписи.

Цвет – выбор цвета тени (по умолчанию выбран серый).

Яркость – выбор яркости тени.

Текст плана – выбор толщины рамки надписи (при создании, текст обводится дополнительным цветом, что делает надпись объемной).

Наброски цветов – выбор цвета рамки.

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

На скрине ниже показаны варианты рамки (отсутсвует, сплошная, пунктирная, двойная сплошная и двойная пунктирная).

Под рамками находятся другие настройки – цвет, размер, удаленность от границ фона и яркость линии.

2.5 Шаг пятый: сохранение баннера

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

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

. GIF – самый «легкий» формат. Невысокое качество, но и малый размер файла.

. JPG – что-то среднее между двумя предыдущими вариантами.

3. Программы для создания баннера

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

3.1 Easy GIF Animator

Очень удобной программой для создания баннеров является Easy GIF Animator, которую можно скачать бесплатно по этой ссылке (около 4 Мб). Хотя сама программа платная (стоимость около 30$), все же первые 20 запусков бесплатны (ознакомительные). Программа создает незамысловатые анимированные GIF-баннеры для сайта.

Установив программу и запустив ее, выберите пункт «Создать анимированный баннер ».

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

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

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

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

3.2 Другие программы для создания баннеров

1. Banner Maker Pro – еще одна небольшая программа (около 6 Мб), которая дает возможность создавать анимированные несложные баннеры, мини-логотипы или кнопки. Очень проста и удобна в использовании, но ее возможности ограничены.