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

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

В любом случае иметь в арсенале своего блога такую “плюшку” очень полезно. Итак, давайте начнем.

Создаем угловой баннер в фотошопе

Создание холста и контура

Запустим программу Adobe Photoshop и создадим новый холст. Для этого нажимаем на кнопку “Файл” и жмем создать. Также можно задействовать сочетание клавиш CTRL+N. Теперь зададим параметры нового холста. Ширину и высоту ставим 170 пикселей, разрешение ставим 72 пикселя. Цвет фона – прозрачный:

Далее рисуем контур будущего баннера.  Выбираем инструмент “прямолинейное лассо” и выделим контур примерно так, как показано на скриншоте:

Оформляем баннер

Создадим новый слой (слои – новый — слой) и зальем выделенную область нужным цветом. В нашем примере, я использовал цвет d99e0e, но вы можете использовать тот, который больше всего подходит к дизайну Вашего блога. Теперь задействуем инструмент “градиент”. Вы можете использовать уже существующий набор градиентов или создать свой. Я не стал пользоваться стандартным набором и создавал отдельный градиент, давайте рассмотрим, как это делается. Щелкните левой кнопкой мыши по градиенту на панели параметров, откроется окно редактора градиентов:

В нашем уроке я решил использовать два цвета — d99e0e, f2c25a. На одной контрольной точке я использовал цвет f2c25a, на другой — d99e0e. Вот что получилось в итоге:

После создания градиента, проведем им по выделенной области сверху вниз и снимем выделение (CTRL+D):

Теперь придадим нашему баннеру больше естественности, добавив к нему тень. Для того чтобы это сделать зайдем в слои, стиль слоя и выберем пункт “Тень”.  Настроим параметры стиля: режим наложения – умножение, непрозрачность – 75%, угол 90 гр. (глобальное освещение).  Параметры смещения ставим 5 пикселей, размах – 0 процентов и размер 5 пикселей:

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

На этом с созданием баннера мы закончили, но осталась еще одна маленькая, но существенная деталь – текст.

Создаем текст баннера

Выбираем инструмент “Текст” и пишем нужное слово. Тексту также можно придать размер, цвет и стиль. Выделите текст и добавьте к нему нужный цвет или стили по вышеуказанному способу. Для создания надписи можно использовать инструмент «Текст» со следующими настройками:

Вы опять же можете поиграться с этими параметрами, и подогнать текст под Ваш блог.

Теперь воспользуемся вращением, чтобы поместить текст на баннер. Зажимаем CTRL и левой кнопкой мыши вращаем текст так, чтобы он ровно отображался на баннере. Все с созданием баннера закончено! Сохраняем его с именем banner в формате PNG!!! В итоге мы довольно быстро получили вот такой угловой баннер:

Можете также посмотреть видеоролик, посвященный именно к этой части статьи (для высокого качества жмем на шестеренку в левом нижнем углу плеера):


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

Устанавливаем баннер на сайт

Установка данного баннера достаточно проста, и состоит всего из трех шагов.

Шаг 1. Копируем созданный баннер в папку с картинками темы Вашего блога. Обычно данная папка находится по адресу:

wp-content/themes/папка с темой/images

Шаг 2. Прописываем стили баннера в файле style.css темы Вашего блога. Обычно данный файл находится по адресу:

wp-content/themes/папка с темой/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;

И в завершающем третьем шаге, мы пропишем код вызова баннера на сайт. Откройте файл header.php вашей темы, который находится по адресу:

wp-content/themes/папка с темой/header.php

И после тега <body> вставьте этот код:

<a href=»#» target=»_blank»><div id=»topright»></div></a>

Вместо решетки, введите страницу, на которую будет ссылаться данный баннер.

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

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

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

Ваш комментарий

  1. Фотошоп — всемогущий!

  2. Я тоже скоро у себя такой сделаю. У меня новый пост.

  3. Люба:

    Кирилл, Вы умница! Для меня это всё тёмный лес. Создала сайт на WordPresse,но получилась такая фигня,а не сайт.Как на этом WordPresse всё устанавливать не знаю. Один сайт не доделала забросила и этот наверное тоже заброшу. Я каждый день учусь в интернете по установке всяких программ,плагинов,но тупик. Даже купила готовый СМС сайт 5 в одном и этот сайт не принёс мне ни копейки

    • Кирилл Тараненко:

      Не переживайте! У Вас все обязательно получится. Все когда-то с чего то начинали, и у всех не всегда все получалось. Главное не сдаваться, и всего добьетесь!

  4. Фотошоп действительно великая вещь!

  5. Угу, ещё есть не менее великий и бесплатный Gimp, просто шотофоп затмил его своей популярностью.

    Кстати, вот этот ваш угловой баннер закрывает вам кнопочку фейсбука, по ней вообще никак не попасть. Я конешно в коде страницы адрес фейсбука посмотрел, но вот как быть другим? :)

    • Кирилл Тараненко:

      Я уже привык к фотошопу :)Насчет кнопки: у меня се показываться, даже в ие.

    • Gimp имеет значительно более простой функционал. Работал в нем , когда нужно было простую работку выполнять. Но не более того.

  6. Кирилл, что — то не получается у меня вставить. Все сделал как в уроке, но лента не отображается, хотя ссылка на месте ленты работает. Что делать?

    • Кирилл Тараненко:

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

  7. Что-то у меня не получается. Сделал все по инструкции, а ленточка не появилась.

    • Кирилл Тараненко:

      Хм, не знаю, нужно будет еще раз проверить. Но все таки проверь правильно ли ты написал имя и формат загруженной картинки от здесь:
      background: url (images/banner.png) no-repeat;
      Вместо banner.png нужно написать имя и формат СВОЕЙ картинки, например, kartinka.jpg

    • Мне кажется, у тебя на сайте была статья об установке уголка. И была целая дискуссия. И откуда тогда вопрос?

      • Кирилл Тараненко:

        У него статья была про установку уголка через плагин вроде как

        • Может быть, не помню. Я, честно говоря, пробовал и манящий уголок ставить, и смотрел ленточку, но не вижу особого смысла. Только как украшение. А от основной цели посещения блога может отвлекать.

          • А с другой стороны она может не заинтересованного заинтересовать. Например, вывести туда конкурсы, акции, и предложить подписку.

      • Да, Кирилл верно сказал. Я писал через плагин, а сейчас решил её поставить без плагина.