Как сделать угловой баннер и установить его на сайт
СОДЕРЖАНИЕ
Приветствую уважаемые читатели блога. Сегодня я Вам расскажу, как нарисовать угловой баннер при помощи программы фотошоп, и установить его на блог. Такой баннер пригодиться для привлечения посетителей на нужную Вам страницу, на которой могут быть размещены конкурсы, лучшие статьи блога или обучающие видео-курсы.
В любом случае иметь в арсенале своего блога такую “плюшку” очень полезно. Итак, давайте начнем.
Создаем угловой баннер в фотошопе
Создание холста и контура
Запустим программу 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. Напоминаю, что в скором времени выйдет продолжение серии статей по созданию онлайн кинотеатра, его раскрутке и монетизации. Чтобы не пропустить выход новой статьи подпишитесь на обновления блога. Пока, пока
Подпишитесь на обновления блога Life-Webmaster.ru и получайте в числе первых новые статьи про создание блога, раскрутку и заработок на нем!
Подписка по RSS
Фотошоп — всемогущий!
Всемогущий тот, кто им хорошо владеет)
Я тоже скоро у себя такой сделаю. У меня новый пост.
Я уже читал:) Спасибо за твит!
твит поставил
Кирилл, Вы умница! Для меня это всё тёмный лес. Создала сайт на WordPresse,но получилась такая фигня,а не сайт.Как на этом WordPresse всё устанавливать не знаю. Один сайт не доделала забросила и этот наверное тоже заброшу. Я каждый день учусь в интернете по установке всяких программ,плагинов,но тупик. Даже купила готовый СМС сайт 5 в одном и этот сайт не принёс мне ни копейки
Не переживайте! У Вас все обязательно получится. Все когда-то с чего то начинали, и у всех не всегда все получалось. Главное не сдаваться, и всего добьетесь!
Фотошоп действительно великая вещь!
Угу, ещё есть не менее великий и бесплатный Gimp, просто шотофоп затмил его своей популярностью.
Кстати, вот этот ваш угловой баннер закрывает вам кнопочку фейсбука, по ней вообще никак не попасть. Я конешно в коде страницы адрес фейсбука посмотрел, но вот как быть другим? :)
Я уже привык к фотошопу :)Насчет кнопки: у меня се показываться, даже в ие.
Gimp имеет значительно более простой функционал. Работал в нем , когда нужно было простую работку выполнять. Но не более того.
Кирилл, что — то не получается у меня вставить. Все сделал как в уроке, но лента не отображается, хотя ссылка на месте ленты работает. Что делать?
Проверь еще раз туда ли ты загрузил картинку и заметь, что в стилях нужно указывать название и расширение своей картинки, а не просто скопировать указанный код.
Да вроде все правильно. Мне кажется, если бы путь к картинке был указан не правильно, то я бы хоть что — то увидел. А так ничего…
У меня такая же проблема.
Что-то у меня не получается. Сделал все по инструкции, а ленточка не появилась.
Хм, не знаю, нужно будет еще раз проверить. Но все таки проверь правильно ли ты написал имя и формат загруженной картинки от здесь:
background: url (images/banner.png) no-repeat;
Вместо banner.png нужно написать имя и формат СВОЕЙ картинки, например, kartinka.jpg
Там все правильно. Я указал ссылка полную в корневую папку, куда загрузил картинку.
Все, я справился. Удалил кусочек: no-repeat; и все появилось. Наверное он мешал!
Мне кажется, у тебя на сайте была статья об установке уголка. И была целая дискуссия. И откуда тогда вопрос?
У него статья была про установку уголка через плагин вроде как
Может быть, не помню. Я, честно говоря, пробовал и манящий уголок ставить, и смотрел ленточку, но не вижу особого смысла. Только как украшение. А от основной цели посещения блога может отвлекать.
А с другой стороны она может не заинтересованного заинтересовать. Например, вывести туда конкурсы, акции, и предложить подписку.
Да, Кирилл верно сказал. Я писал через плагин, а сейчас решил её поставить без плагина.