# Культурный раздел > Графика >  Создание баннеров

## Asteriks

*Всё, что найдёте или знаете о создании баннеров, помещайте в этой теме.*

----------


## Asteriks

*Как сделать баннер. Статья для тех, кто только начал изучать основы создания баннера
*
Баннер - просто и сложно одновременно. Ведь каждый предпочитает видеть его по своему, кто-то в виде "навороченных" телесериалов на пол страницы - это наши знаменитые баннеры выполненные по технологии Flash и их более простые собратья, созданные на милой и удобной программке Swich. Кто-то считает, что подмигивающие, обесцвеченные 100 раз блондинки, пестрящие пикселями 3 размера, на едко розовом фоне - лучшее, что создал мир. Кто-то ценит остроту идеи, баннеры типа "у нас лучше!" уже приелись.
Нравиться неожиданное, часто недосказанное и будоражущее воображение. Вопрос в том рискнете ли вы сделать такой баннер?

*Шаг за шагом. Пример №1*



> 1. Выбор программ, с помощью которых вы будете создавать свое творение. Допустим, что для создания анимированного баннера вы выбрали *Ulead Gif Animator 4* (уже есть 5), желательно русифицированный. Из графических программ наиболее удобными и результативными, для меня являются *Ulead PhotoImpact 6* (уже есть 7), *Microsoft PhotoDraw,* хотя мало кто видел эти программы в полном объёме и позволил себе их установку, программки то не маленькие. Adobe Photoshope - я не рассматриваю, так как про него и так много написано и он побил все рекорды в номинации "Самый неудобный интерфейс", чтобы сделать мелочь нужно просто потеть над этим редактором, уж простите меня стойкие сторонники и любители сего продукта.
> 
> Допустим вы работаете в тех же редакторах, что и я, это упрощает процесс понимания, так как следующая часть статьи и примеры основаны на применение вышеназванных программ.
> 
> *2. Выбор размера.* Решаем какой собственно мы будем делать баннер. Размеры различны, как и сфера их применения. Допустим вам заказали один 100х100 пикселей и два 120х240 пикселей.
> 
> Наиболее распространенные размеры (в пикселях):
>   1. 468х60 - наиболее распространенный размер для расположения как вверху, так и внизу страницы, часто им "разбивают" текст в середине страницы (говорят эффективная отдача).
>   2. 120х60, 150х60, 140х 60 - это вариации баннера 468х60, разница в том, что их можно разместить несколько вместо одного на 468. Их часто используют серверы новостей и газет.
> ...

----------


## Asteriks

*Как сделать баннер. Статья для тех, кто только начал изучать основы создания баннера*
Страница 2.

Г). Есть правда свои тонкости. Баннер готов, но его размер просто ужасен, в нашем примере он уже весит 25Кб. Необходимо оптимизировать готовый баннер. Для этого настроим оптимизатор и выполним пошаговую инструкцию. Gif Animator - весьма удобен и прост в понимании.




> Оптимизатор "Optimize" находиться во вкладке вместе с функциями "Составление-Compose", "Редактирование-Edit", "Просмотр-Preview". Его можно найти в меню "Файл" под именем "Optimization Wizard". Оставляем выделенными пункты по рекомендации самого оптимизатора, можете перевести, если хотите. Выбираем количество цветов необходимое вам (желательно убавлять в последовательности 8, 16, 32, 64, 128, 256), а за тем, при повторном уменьшении баннера, убавлять по нескольким цветам, проверяя результат. После выполнения всех вышеперечисленных манипуляций баннер стал весить 11Кб, что нам и было нужно. Мы добились этого лишь уменьшением количества цветов.
> 
> *Пример №2*
> Второй баннер создаем в той же последовательности с разницей только в использовании графического редактора, на этот раз это будет Microsoft PhotoDraw. Баннер №2. состоит всего их 2 кадров, размер 120х240, конечный вес 14,8Кб. Всегда есть выбор между фотореалистичностью и "навороченностью" анимационными эффектами. Как вы уже поняли множество эффектов и фотореализм не совместимы, приходиться основываться на хорошей идее или симпатичной девчонке на фото.
> 
> 1. Создаем каждый кадр отдельно "File" (Файл), "New" (Новый), в "Picture Sutap" (Параметры страницы) устанавливаем необходимый размер в пикселях. Цвет фона (он же рисованный прямоугольник залитый необходимым цветом) выбираем белым (или другим по необходимости). Строго выдерживаем расположение всех одинаковых элементов на каждом кадре (позиция видна в нижнем правом углу (изменение позиции производиться с помощью "стрелок" на клавиатуре. Позицию и размер легко изменить также в Microsoft PhotoDraw по щелчку правой кнопкой мыши на объекте, где выбрав подменю "Resize" ("Переразмер"), можно поменять размер картинки, фона и объекта, и там же на месте поменять и расположение объекта. Сохраняем каждый кадр в формате программы в которой работаем (в нашем случае - это mix). Мы получили кадр: 1, 2.mix.
> 
> 
> Важные моменты:
> ...

----------


## Asteriks

*Рисуем баннеры* 

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

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

При создании сайта необходимо учитывать наличие баннеров и соответственно выстраивать дизайн.





> На просторах Рунета популярны несколько типоразмеров баннеров, самые распространенные из которых - это 468x60, 100x100 и 88x31 (обычно называемые кнопками). Баннеры остальных размеров применяются гораздо реже и обычно только для локальных баннерных сетей (125x125, ушки на Lenta.Ru и т.п.)
> 
> Кроме отличия в размерах, баннеры могут быть разного типа:
> графические 
> html-баннеры 
> flash-баннеры 
> 
> Два последних типа достаточно сложные и специфические. Мы будем разбираться с классическим графическим баннером размером 468x60 пикселей.
> 
> ...

----------


## Patron

Всё своими руками

----------

