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

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

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

Но есть маленькая проблема для вебмастеров и счастье для посетителей сайта. Баннеры стандартных размеров легко блокируются специальными программами и всевозможными дополнениями к браузеру. Надоела назойливая реклама — поставить блокировщик рекламы!

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

Какие же есть выходы? Если вы являетесь владельцем сайта и рекламируете свои услуги и товары, то реальный пример обойти блокировщик рекламы – это делать баннеры произвольных размеров. Например, есть размер стандартного баннера 468×60, как ниже:

А теперь вопрос на засыпку. Увидели ли вы мой баннер?
Что же можно изменить в баннере? Можно чуть-чуть увеличить его высоту, например, сделать его 468×62. Реально? Давайте попробуем, получится ли в итоге у нас обойти блокировщик рекламы ).

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

Шаг 1. Открываем редактор GIMP и через меню «Файл – Создать» создаем новое изображение размером 468×62.

Шаг 2. Далее нам нужно подобрать цветовую гамму для баннера. Это лучше сделать по цветовому кругу или подсмотреть уже существующие баннеры, которые можно встретить сети.

Нашли подходящий по цветовой гамме баннер? Тогда делаем скриншот экрана и загружаем его тоже в GIMP. Кстати, скриншоты я делаю с помощью программы Lightshot, о которой запишу в ближайшее время небольшой урок. Не пропустите.

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

Шаг 3. Допустим, что с цветовой гаммой мы определились. Теперь нам нужно подобрать фон для баннера. Для этого переходим на сайт subtlepatterns.com . Подбираем из представленных образцов желаемый фон и скачиваем его на свой компьютер.

 

После этого, разархивировав архив, загружаем текстуру в редактор GIMP.

854
Шаг 4. Теперь нам нужно перенести текстуру на ранее созданный документ. Для этого выделяем открытую текстуру через меню «Выделение — Выделить все» или нажав Ctrl+A. Далее копируем, нажав Ctrl+C и переходим на вкладку с ранее открытым проектом. После этого переключаемся на вкладку «Текстуры»

И теперь самый ВАЖНЫЙ момент. Кликаем в списке текстур по самому первому квадратику и зажав левую кнопку мыши переносим ее на рабочую область.

 

Должно получиться так

 

Шаг 5. Теперь, с помощью инструмента «Текст» создаем текстовую надпись. Выбираем шрифт – Pollock, устанавливаем размер — 22px и цвет — c31900. Далее зажимаем кнопку «Alt» и перетаскиваем текст ближе к левой стороне. Шрифт можете скачать тут. Как устанавливать шрифты в GIMP смотрите в этом уроке.

Шаг 6. Теперь, когда текст создан, давайте добавим к нему белую обводку. Для этого кликаем по слою с текстом правой кнопкой мыши и выбираем пункт «Альфа канал в выделение». После этого идем в главное меню и жмем пункт «Выделение – Увеличить». Задаем настройку 1px.

Сделали? Тогда кликаем на иконку создания нового слоя и далее выполняем команду «Правка-Залить цветом фона». Получится такая картина, если конечно цвет фона у вас был белый. Поэтом проверьте это заранее.

Что теперь? Опустим полученный слой в стопке слоев ниже нашего ранее созданного текстового слоя. Для этого кликнем на пиктограмму «Опустить слой» и отключаем выделение через меню «Выделение — Снять». В итоге должно получиться так:

Шаг 7. На следующем шаге мы нарисуем небольшую кнопку. Под нее создаем новый слой, далее выбираем инструмент «Прямоугольное выделение» (в настройках указав закругление углов) и рисуем область примерно следующих размеров.

Далее, закрашиваем созданное выделение красным цветом (c31900), тем самым цветом, которым мы писали текст ранее.

Шаг 7. Осталось добавить текст «призыв к действию» на кнопку. Для этого выбираем инструмент «Текст» (шрифт -Pollock ,размер -22 , цвет — белый ).

Вот и все. Осталось сохранить полученный баннер. Для этого идем в меню «Фаил – Экспорт» и в списке «Выберете тип файла» выбираем формат JPG или PNG.

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

Надеюсь вам понравился мой новый урок? Теперь вы знаете друзья, что сделать баннер для сайта можно и без фотошопа 🙂 Нужен только редактор GIMP!

Спасибо за внимание и до новых встреч на GimpArt.Org

С уважением, Антон Лапшин.