Рисуем баннер для сайта

Освоение программы Photoshop требует старания, так как тот функционал, который она в себе содержит, настолько разнообразен, что, владея этим арсеналом знаний, любой дизайн будет вам по плечу. В этом вам помогут наши уроки Photoshop.

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

Баннер — это верхняя часть веб-страницы, ее заголовок, где обычно указывается название, представлен логотип и, возможно, навигация по странице или полезные ссылки. Он является ключевым элементом дизайна, так как это первое, что бросается в глаза при первом посещении той или иной веб-страницы, и именно баннер несет в себе тот информативный минимум, благодаря которому можно составить первое представление о содержании сайта или блога. Самое простое решение, которое можно предложить для изготовления баннера, это фотография или иллюстрация, оформленная надлежащим образом. Лучше использовать те изображения, которые принадлежат вам.

Мы в нашем примере используем фотографию цветных карандашей, из которой вырежем сами карандаши, «подложим» под них бумагу, на которой напишем адрес нашего сайта — in4art.ru. Итак, рисуем дизайн для сайта.

Шаг 1: Обработка фотографии

Перед началом работы вы должны определить размеры баннера, который должен четко вписаться в html-шаблон веб-страницы. Размеры зависят от параметров, указанных в html. В нашем случае это 800×160 пикселей. Благодаря многослойной структуре файлов программы Photoshop данные параметры легко подогнать под html-шаблон.

Используя инструмент «Перо» (P) в режиме «Контуры», обведите карандаши, чтобы потом их вырезать. Закройте контур. Правой кнопкой мыши откройте меню и выберите «Образовать выделенную область» с радиусом растушевки 0. После чего комбинацией Ctrl-Shift-I инвертируйте выделенную область и нажмите Delete. Ctrl-D снимает выделение.

Два крайних карандаша на нашей фотографии немного «не в фокусе», поэтому можно, используя инструмент «Размытие» (R), немного размыть их четкие границы.

Шаг 2: Основа для баннера

Как уже было сказано, основной идеей нашего баннера является изображение бумаги для рисования, на которой лежат карандаши. Текстуру бумаги или фотографию листа бумаги также можно легко разыскать в интернете.

Создайте новый документ размерами 800×160 пикселей.

Откройте в Photoshop файл с текстурой бумаги. В списке слоев левой кнопкой мыши выберите «Создать дубликат слоя». В графе «Назначение → Документ» выберите наш файл Баннер.psd. Этот слой появится над нашим документом. Затем уменьшите размеры изображения карандашей так, чтобы его высота равнялась высоте баннера — 160 пикселей (Изображение → Размер изображения). Этот слой, методом, описанным выше, скопируйте в файл Баннер.psd.

Шаг 3: Тень

Свет на карандаши падает справа. Для большей реалистичности мы можем добавить тень, что придаст нашему изображению объем. Под слоем с карандашами создайте новый слой (Ctrl-Shift-N). Зажимая Ctrl на клавиатуре, подведите курсор мыши к иконке слоя с карандашами и нажмите левую кнопку. Так мы обозначили контуры изображения. Используя инструмент «Заливка» (G), залейте этот контур черным цветом.

Далее используем фильтр размытие, чтобы тень выглядела более реалистично (Фильтр → Размытие → Размытие по Гауссу). Поскольку карандаши мы уже уменьшили, то параметр размытия следует установить невысокий — 1,0–1,5 пикселей. Используя инструмент «Перемещение» (V), сместите тень в направлении падения света, то есть справа налево и на несколько пикселей вниз.

Два раза щелкните мышкой на слое с тенью и установите режим непрозрачности на свое усмотрение.

Шаг 4: Надпись

Учитывая общую задумку данной работы, надпись следует наносить рукописным шрифтом, коих в сети много. Загляните хотя бы в директорию Google Web Fonts. Если шрифт найден и установлен, то сделаем надпись, используя инструмент «Горизонтальный текст» (T). Шрифт в данном примере, называется Cabin Sketch. В качестве цветов применим цвета двух карандашей на нашем изображении. Инструментом «Перемещение» (V) получившуюся надпись можно легко двигать по картинке. С помощью меню «Свободное трансформирование» (Ctrl-T) текст можно вращать и искривлять. Чтобы буквы выглядели так, будто они нарисованы карандашом на шероховатой бумаге, можно использовать ластик из грубой кисти, которому установлен параметр непрозрачности приблизительно 40–50 %. Для этого предварительно сделайте копию слоя с надписью и растрируйте один из этих слоев (Меню слоя → Растрировать текст). Вообще всегда в процессе работы с программой Photoshop те слои, которые вы планируете подвергнуть значительным изменениям, лучше дублировать, потому что история ваших действий ограничена и не всегда есть возможность вернуться к первоначальному варианту.

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

Наш баннер практически готов. Сохраните получившийся файл в одном из возможных веб-форматов (JPG, PNG). Бумагу в шаге 2 можно не использовать, а сделать ее общим фоном для сайта. Тогда наш баннер можно создать в формате PNG, сохранив его полупрозрачность, и если вы захотите изменить фон, вам не придется менять баннер.

И теперь ещё раз посмотрим на наш результат:

Также следует упомянуть, что современный HTML5 дает целый спектр возможностей. К примеру, того, что было проделано нами в последнем шаге, легко добиться средствами html. Однако пока еще не все браузеры умеют корректно работать с HTML5. Но помните, что Продвижение неизбежно.