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

   В этом сообщении я расскажу Вам как сделать простой (не анимированный) баннер или заготовки для баннера, содержащего анимацию. Рассмотрим самый простой способ. В следующих уроках я преложу вам другие способы создания баннеров.
1. Находим в поиске Яндекса по картинкам или в любом другом месте нужный нам фон
2. Обрезаем его согласно стандартым размерам:


Размеры баннеров
300 x 250 прямоугольник средней величины
250 x 250 всплывающий квадрат
240 x 400 вертикальный прямоугольник
336 x 280 большой прямоугольник
180 x 150 прямоугольник
468 x 60 длинный баннер
234 x 60 половина длинного баннера
88 x 31 микро полоса
120 x 90 кнопка 1
120 x 60 кнопка 2
120 x 240 вертикальный баннер
125 x 125 квадратная кнопка
728 x 90 ведущий стенд
160 x 600 широкий небоскреб
120 x 600 небоскреб
300 x 600 объявление на полстраницы

   Наиболее распространены баннеры размером 468 x 60.
Перед тем как обрезать фон, нужно «подогнать» его по размерам, т.е. в фотошопе открываем Изображение — Размер изображения. здесь указываем ширину изображения 468px. при этом обращаем внимание, на то, чтобы в настройках гадочка стояла напротив параметра «Сохранять пропорции»:

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

   Изображение — Кадрировать
3. Изображение — Размер холста. Здесь указываем высоту 60px:

Если пропорции не важны, то можно поступить иначе: Изображение — Размер изображения. здесь высота — 6оpx, убираем галочку напротив «сохранять пропорции». Получили следующее изображение:

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

Теперь загружаем изображение на фотохостинг, например, на Радикал, и вставляем в приветствие своего блога используя следующий HTML код:
<a href=»Адрес вашего блога»><img src=»прямая ссылка на изображение»></a>
Теперь вставляем этот код в окошко для кодов, чтобы другие пользователи могли добавить его в свои дневники:
<textarea rows=»2″ cols=»40″> КОД НА ВАШ БАННЕР </textarea>
P.S. Подобным образом можно сделать баннер в Jimp, этапы те же, как и для создания графической шапки. Об этом я уже писала в уроке Как сделать шапку для блога в GIMP. Подставляем только размеры баннера.

Источник: http://13stroy.ru/load

Ссылка на основную публикацию
Adblock
detector