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

Июл 05

Освоение программы 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. Но помните, что Продвижение неизбежно.

 

Нравится как я пишу? Давайте вместе формировать интересные материалы на моем блоге. Вы можете сделать ретвит данной статьи или подписаться на мою ленту в системе микроблогов Твиттер. Читайте меня в Твиттере и будьте в курсе последних моих действий. А так же подписывайтесь на мою RSS ленту.

2leep.com
  • Pingback: Воскресный обзор блогов №4 - Уроки дизайна на In4Art.ru (http://in4art.ru) | Перспективный блог

  • http://vispesaro.com Seodjo

    прикольный баннер, к нему бы еще анимацию сделать было бы вообще четко

    • http://blog-lihtin.ru Лихтин Роман

      Ну данный урок писали на заказ, поэтому исправлять я не стал…. Будут ещё уроки и на тему как сделать анимированный баннер, только чуть позже…

  • Ilua

    Баннер это скорее рекламный материал, а то, про что ты рассказал — это скорее шапка сайта!

    • admin

      Согласен, хотя шапки сайтов — своего рода реклама, тем не менее описанную методику можно применить как для создания баннера, так и для создания шапки сайта.

  • http://www.mirimama.ru Katerina

    А есть ли другие программы кроме фотошопа????

    • admin

      Конечно, есть и другие программы попроще и посложнее. Фотошоп — наиболее популярная программа, используемая дизайнерами и художниками.