Как сделать угловой баннер и установить его на блог?

29 Июн
Как сделать угловой баннер

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

Часть 1. Рисуем простой угловой баннер в GIMP

Шаг 1. Создание рабочего холста

Запускаем графический редактор GIMP и создаем новое изображение размером 190×190. Для этого переходим в меню «Файл – Создать» и в открывшемся диалоговом окне выбираем параметры будущего баннера.

01_risuem-yglovoi-baner

Шаг 2. Делаем заготовку баннера

На панели инструментов выбираем «Свободное выделение» и рисуем две параллельные лини как на скриншоте.

Совет: Для того чтобы нарисовать линию строго под углом 45 градусов вы должны зажать на клавиатуре клавишу «Ctrl».

02_risuem-yglovoi-baner

Шаг 3. Оформляем баннер

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

Для нашего примера я закрашу баннер линейным градиентом. Для начала нажимаем на пиктограмму «Цвет переднего плана» и в открывшемся диалоговом окне выбираем цвет – 6fcae2.

03_risuem-yglovoi-baner

Далее щелкаем на пиктограмму «Цвет фона» и выбираем – 209cb7.

04_risuem-yglovoi-baner

Теперь выбираем «Градиент» (из основного в фоновый) и проводим градиентом, как на скриншоте.

05_risuem-yglovoi-baner

Снимаем выделение через «Выделение — Снять»

Шаг 6. Придаем объем баннеру

Для того чтобы придать визуальный объем, необходимо нарисовать небольшую тень под баннером. Для этого создадим новый прозрачный слой и расположим его под основным слоем с баннером.

06_risuem-yglovoi-baner

Далее выбираем инструмент «Карандаш» и проводим черным цветом линию.

07_risuem-yglovoi-baner

Теперь воспользуемся фильтром «Фильтры – Размывание — Гауссово размывание», чтобы размыть только что созданную линию. В настройках выставляем 20px.

razmuvanie

После этого можно отрегулировать интенсивность тени с помощью ползунка непрозрачности у слоя.

09_risuem-yglovoi-baner

Шаг 7. Создание надпись на баннере

Вот наш баннер уже готов. Осталось только написать на нем что-то привлекающее внимание, типа «Скидка», «Тут бонус», что то такое, чем мы заинтригуем посетителей нашего сайта и они обязательно нажмут на него.

Для создания текстовой надписи воспользуемся инструментом «текст» со следующими настройками:

10_risuem-yglovoi-baner

Далее выберем инструмент «Вращение», чтобы развернуть надпись на 45 градусов.

11_risuem-yglovoi-baner

12_risuem-yglovoi-baner

Шаг 8. Сохраняем баннер

Для того чтобы сохранить баннер в формате PNG делаем следующее:

GIMP 2.6 — Переходим в меню «Фаил — Сохранить как..» и вводим название banner.png. Нажимаем «Сохранить»GIMP 2.8 — Переходим в меню «Файл — Экспортировать» и также вводим название баннера и нажимаем «Экспортировать»

 

Как установить созданный баннер на сайт?

Как установить баннер на WordPress?

как установить баннер на 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?

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

Установка баннера на CMS Joomla не чем не отличается от выше описанных действий с вордпресс. Вам также необходимо сделать три шага:

  1. Скопировать баннер в папку images вашей темы
  2. Прописать стили в главный файл стилей вашей установленной темы
  3. Прописать код вызова баннера в файл index.php (все той же темы) сразу же после открывающегося тега <body>

Таким образом, мы с вами сделали простенький угловой баннер, позволяющий очень эффективно рекламировать ту страничку, которая находится по ссылке в баннере. На сегодня это все. Не забываем подписываться на обновления и ставить «лайки»

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

Идея: bloomwebdesign.net

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


Очень плохоПлохоСреднеХорошоОтлично (Проголосуй первым!)
Loading...

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


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

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

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

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

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

  1. seoгрот

    Графика и дизайн это то, в чём я практически ничего не соображаю. Всё хочу немного подучится да никак руки не доходят. Вы всё очень подробно расписываете, подпишусь на Ваш блог глядишь чему-нибудь и научусь.

  2. Антон Лапшин

    Большое спасибо за ваш комментарий! Да, стараюсь расписывать, бывают ситуации когда сам по своим же урокам делаю, то кнопочку, то какой-нибудь эффект)

  3. Konstantin

    Эх, почему владельцы некоторых сайтов не читали этот урок, прежде, чем создать уродливую надпись в Paint. В Gimp то совсем по другому

  4. ксения еремина

    вот что у меня

  5. Антон Лапшин

    Не плохо, кролик просто прелесть )) и баннер симпатичный.

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

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