Создание баннера для сайта WordPress

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

Мне нравится бесплатное графическое приложение Paint.Net (кому-то покажется, что это просто бесплатная программа для создания баннеров, однако, как по мне, это великолепная альтернатива тому же разрекламированному Фотошопу). К сожалению, эта программа работает только под Windows, поэтому, если у вас Mac – используйте графический редактор Gimp, который так же бесплатен, но более сложен в понимании. Ну и в дополнение к этому, могу посоветовать Вам платный софт – Photoshop elements — стоящий от 25 до 50 долларов США.

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

Таким будет выглядеть наш баннер по окончанию работы:

1. Запускаем Paint.Net. Убеждаемся, что окна Tools (Инструменты), Layers (Слои) и Colors (Цвета) видны. Если они не отображаются – исправляем эту оплошность через меню Window (Окно).

Важно! Язык программы можно изменить на русский: заходим в меню Utilities и выбираем вкладку Language.

2. Идем на любимый стоковый сайт фотографий и картинок (например, http://www.sxc.hu/), ищем графический файл, который будет составлять композицию лого вашего сайта, открываем его самое большое разрешение, затем: Щелчок правой кнопкой мыши > Копировать картинку.

3. Edit > Paste in to New Image

4. Кликаем по Rectangle Select (Прямоугольник выделения) в Окне Tools (сверху слева) и используем его для выделения необходимой части изображения для будущего баннера.

5. Далее Image > Crop to Selection (этим шагом мы обрезаем выделенную область по всем краям).

6. Выбираем высоту баннера: как по мне 150 px – приемлемый размер. Кликаем Image > Resize и вводим выбранный размер в поле Height, жмем ОК.

7. Выбор ширины баннера зависит от ширины вашего сайта (стандартно выбирается 800 или 100 px). Выбираем меню Image > Canvas Size и прописываем ширину (Width) в 800 пикселей. Галочку напротив « Maintain Aspect Ratio » ставить не нужно!

8. Теперь давайте вставим задний слой: заходим Layers > Add New Layer. Картинка останется без изменений, но заметьте в Окне Layers появился новый слой «Layer 2».

9. Первым делом, для большей понятливости, кликаем два раза на «Layer 1» в Окне Layer и переименовываем его в «Teddy». После чего проделываем аналогичную процедуру с «Layer 2», только даем ему название «Background».

Чтобы понять что такое «Слои» (Layers) снимите галочку напротив названия «Teddy» в Окне Layers. Это сделает этот «слой» невидимым. Сейчас отображаются только «пустые» пиксели – слой «Background».

В графической программе, каждый «слой» является отдельным изображением. Картинки отображаются на экране в порядке расположения в Окошке Layers. Единственная причина почему виден нижний слой – потому что верхний состоит из «пустых» пикселей. К примеру, слой «Teddy» отображается на экране только благодаря «пустому» верхнему слою.

10. Теперь давайте раскрасим слой «Background» в черный цвет. В первую очередь делаем слой «Teddy» опять видимым (ставим галочку напротив названия «Teddy»), а «Background» — невидимым. После, выбираем Color Picker в Окошке Tools   и кликаем по самому темному месту картинки «Teddy»/ Заметьте: главный цвет (Primary) в Окне Colors изменился на черный.

11. Возвращаемся в слой «Background» (кликаем по названию в Окне Layers), выбираем инструмент Paint Bucket в Окошке Tools и кликаем где угодно на изображении. 100% площади картинки станет черным.

Причина этого, как не трудно догадаться, кроется в расположении слоев: слой Background располагается выше слоя Teddy.

12. Переместите слой «Background» ниже слоя «Teddy». Выделяем название «Background» в Окне Layers и жмем на стрелочку «вниз».

13. Теперь используя инструмент Text   пишем текст баннера.

14. Если Вам хочется добавить дополнительное изображение в создаваемый баннер. Копируем эту картинку (правая кнопка мыши > Копировать картинку), и вставляем в программу Paint.net (См. Шаг №3). Далее подгоняем ее под размеры баннера (Шаг № 6), сохраняем, копируем (Edit > Copy) и вставляем в редактируемое лого (выделяем его в Image List в правом верхнем углу программы): Edit > Paste in to New Layer.

Важно! Для сглаживания разных цветов, читай плавный переход от черного к белому в моем примере (см. конечный вариант баннера в самом начале этого раздела), используем Rectangle Select (Прямоугольник выделения), которым выделяем необходимую область размытия. После этого заходим: Effects > Blurs > Gaussian blur и выбираем необходимую степень сглаживания.

15. Теперь сохраняем работу в .pdn формате, со всеми активными слоями, это необходимо для быстрого редактирования баннера. После сохраняем графический файл в формате .JPEG и загружаем лого к себе на сайт. На этом вопрос «как самому сделать баннер» можно считать закрытым :-).