СОДЕРЖАНИЕ
Приветствую уважаемые читатели блога. Сегодня я Вам расскажу, как нарисовать угловой баннер при помощи программы фотошоп, и установить его на блог. Такой баннер пригодиться для привлечения посетителей на нужную Вам страницу, на которой могут быть размещены конкурсы, лучшие статьи блога или обучающие видео-курсы.
В любом случае иметь в арсенале своего блога такую “плюшку” очень полезно. Итак, давайте начнем.
Создаем угловой баннер в фотошопе
Создание холста и контура
Запустим программу 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» вставьте этот код:
Вместо решетки, введите страницу, на которую будет ссылаться данный баннер.
Вот таким нехитрым способом можно создать и установить угловой баннер к себе на сайт. Заметьте что не нужно прибегать к использованию различных плагинов, и коды для установки довольно просты.
Надеюсь, что Вам понравилась данная статья, и в качестве благодарности Вы поделитесь ею в соц. сетях нажав на кнопки внизу. Если возникли вопросы, не стесняйтесь – напишите их в комментариях.
p.s. Напоминаю, что в скором времени выйдет продолжение серии статей по созданию онлайн кинотеатра, его раскрутке и монетизации. Чтобы не пропустить выход новой статьи подпишитесь на обновления блога. Пока, пока