Здравствуйте уважаемые читатели блога GimpArt.Org! Сегодня затронем тему оформления своего блога и вас ждет небольшой урок, в процессе которого вы узнаете, как очень легко можно сделать простой рекламный баннер с помощью средств бесплатного графического редактора GIMP. В процессе урока будет представлен сам процесс создания баннера, а конце я покажу вам друзья, как установить созданный баннер к себе на блог или сайт.
Часть 1. Рисуем простой угловой баннер в GIMP
Шаг 1. Создание рабочего холста
Запускаем графический редактор GIMP и создаем новое изображение размером 190×190. Для этого переходим в меню «Файл – Создать» и в открывшемся диалоговом окне выбираем параметры будущего баннера.
Шаг 2. Делаем заготовку баннера
На панели инструментов выбираем «Свободное выделение» и рисуем две параллельные лини как на скриншоте.
Шаг 3. Оформляем баннер
На следующем шаге друзья, вы должны определится с внешним видом углового баннера. Его можно закрасить одним цветом, градиентом, а также любой текстурой из стандартного набора редактора, или можно использовать дополнительные текстуры, предварительно скачав и установив их.
Для нашего примера я закрашу баннер линейным градиентом. Для начала нажимаем на пиктограмму «Цвет переднего плана» и в открывшемся диалоговом окне выбираем цвет – 6fcae2.
Далее щелкаем на пиктограмму «Цвет фона» и выбираем – 209cb7.
854
Теперь выбираем «Градиент» (из основного в фоновый) и проводим градиентом, как на скриншоте.
Снимаем выделение через «Выделение — Снять»
Шаг 6. Придаем объем баннеру
Для того чтобы придать визуальный объем, необходимо нарисовать небольшую тень под баннером. Для этого создадим новый прозрачный слой и расположим его под основным слоем с баннером.
Далее выбираем инструмент «Карандаш» и проводим черным цветом линию.
Теперь воспользуемся фильтром «Фильтры – Размывание — Гауссово размывание», чтобы размыть только что созданную линию. В настройках выставляем 20px.
После этого можно отрегулировать интенсивность тени с помощью ползунка непрозрачности у слоя.
Шаг 7. Создание надпись на баннере
Вот наш баннер уже готов. Осталось только написать на нем что-то привлекающее внимание, типа «Скидка», «Тут бонус», что то такое, чем мы заинтригуем посетителей нашего сайта и они обязательно нажмут на него.
Для создания текстовой надписи воспользуемся инструментом «текст» со следующими настройками:
Далее выберем инструмент «Вращение», чтобы развернуть надпись на 45 градусов.
Шаг 8. Сохраняем баннер
Для того чтобы сохранить баннер в формате PNG делаем следующее:
GIMP 2.6 — Переходим в меню «Фаил — Сохранить как..» и вводим название banner.png. Нажимаем «Сохранить»GIMP 2.8 — Переходим в меню «Файл — Экспортировать» и также вводим название баннера и нажимаем «Экспортировать»
Как установить созданный баннер на сайт?
Как установить баннер на WordPress?
Шаг 1. Скопировать баннер в папку images вашей темы
<адрес вашего сайта>wp-contentthemes<ваша тема >images
Шаг 2. Теперь необходимо прописать стиль баннера в файл стилей установленной темы. Для этого переходим по адресу
<адрес вашего сайта>wp-contentthemes<ваша тема >
И открываем файл — style.css
Далее в самый конец файла необходимо вставить следующий код:
#topright { position: fixed; right: 0px; top: 0px; height: 200px; width: 190px; background: url(images/banner.png) no-repeat; z-index:1000;}
При использовании выше представленного кода, баннер будет всегда присутствовать на экране пользователя в верхнем правом углу. Если же вы хотите, чтобы баннер показывался только в первом экране и при прокручивании страницы вниз не маячил глаза читателям, то необходимо заменить код:
position: fixed; на position: absolute;
Шаг 3. И в завершающем шаге нужно прописать код вызова баннера в вашу тему. Для этого открываем файл header.php, расположенный по адресу
<адрес вашего сайта>wp-contentthemes<ваша тема >header.php
И сразу же после открывающегося тега <body> вставляем ниже представленный код:
<a href=»#» target=»_blank»><div id=»topright»></div></a>
Где # — нужно заменить на адрес страницы (url), на которую ссылается баннер.
Например, можно прописать код на лучшие статьи блога или вставить ссылку на карту сайта и т.п. Надеюсь, вы без проблем справитесь с этой задачей.
Как установить баннер на Joomla?
Установка баннера на CMS Joomla ни чем не отличается от выше описанных действий с cms wordpress. Вам также необходимо сделать три шага:
- Скопировать баннер в папку images вашей темы
- Прописать стили в главный файл стилей вашей установленной темы
- Прописать код вызова баннера в файл index.php (все той же темы) сразу же после открывающегося тега <body>
Таким образом, мы с вами сделали простенький угловой баннер, позволяющий очень эффективно рекламировать ту страничку, которая находится по ссылке в баннере. На сегодня это все. Не забываем подписываться на обновления и ставить «лайки»
С уважением, Антон Лапшин!
Графика и дизайн это то, в чём я практически ничего не соображаю. Всё хочу немного подучится да никак руки не доходят. Вы всё очень подробно расписываете, подпишусь на Ваш блог глядишь чему-нибудь и научусь.
Большое спасибо за ваш комментарий! Да, стараюсь расписывать, бывают ситуации когда сам по своим же урокам делаю, то кнопочку, то какой-нибудь эффект)
Эх, почему владельцы некоторых сайтов не читали этот урок, прежде, чем создать уродливую надпись в Paint. В Gimp то совсем по другому
вот что у меня
Не плохо, кролик просто прелесть )) и баннер симпатичный.