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

Дата: 14 октября 2010
   В этом сообщении я расскажу Вам как сделать простой (не анимированный) баннер или заготовки для баннера, содержащего анимацию. Рассмотрим самый простой способ. В следующих уроках я преложу вам другие способы создания баннеров.
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

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