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

3 Апр
как сделать баннер для сайта

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


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

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

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

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

баннер в gimp

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

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

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

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

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

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

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

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

как сделать баннер самому без фотошопа

 

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

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

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

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

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

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

 

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

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

 

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

баннер для сайта в gimp

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

как создать баннер в gimp

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

как сделать баннер в фотошопе

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

как нарисовать баннер

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

баннер для сайта

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

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

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

как сделать баннер без photoshop

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

баннер для сайта Photoshop

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

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

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

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

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

Пожалуйста, оцените эту статью, нажав на звездочки ниже:


Очень плохоПлохоСреднеХорошоОтлично (2 голосов, оценка: 5,00 из 5)
Loading...

P.S. Хотите получать АНОНСЫ НОВЫХ УРОКОВ к себе НА E-MAIL? Тогда подписывайтесь на обновления блога. Буду рад видеть вас среди своих читателей.


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

Тем самым вы мотивируете меня на создание новых уроков и поддерживаете мой проект в дальнейшем развитии. Спасибо Вам Большое!

Также рекомендую ознакомиться со следующей информацией, возможно, она вас заинтересует.

Видео курс азбука GIMP скачать

Комментариев к статье: 2;

  1. Гульчира

    Очень интересно, легко и просто, хорошая поддержка для начинающих. Спасибо большое!

  2. Вадим

    Спасибо, все понятно и подробно рассказано. :-)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *