Каждый сайт требует достойного для себя лого. Ниже я расскажу и покажу на примере, как создать баннер самому.
Мне нравится бесплатное графическое приложение 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 и загружаем лого к себе на сайт. На этом вопрос «как самому сделать баннер» можно считать закрытым :-).
- Tweet
Хотелось бы примера с баннером посложнее (к примеру, на манер того, что висит у вас в шапке).
Тут такой простой баннер занял столько места, что уже браться за что-то «посложнее» совсем не хочется ))