Рисуем ретро-шапку для блога в фотошопе

Одно направление дизайна сменяет другое. Некогда глянцевый, сверкающий дизайн — сменился плоским и эргономичным. Но что-то скоротечно и быстро меняется, а что-то вечно и остается на всегда. К вечному, как раз, и относится ретро-стиль.

Шапка для сайта в фотошопе

Сегодня я расскажу, как рисуется шапка для сайта в фотошопе в ретро-стиле. Это не займет у вас много времени, так-как она очень проста и не требует профессиональных знаний и колосальных усилий.

Разметка

Разметим рабочую область при помощи линейки (Ctrl+R). По идеи, шапка должна быть высотой около 200px. Но я буду показывать в большем масштабе и сделаю ее ~450px. Ширина должна соответствовать будущему макету — 1000px.

Откройте дополнительные материалы, загрузите тексутру bg_header и размножьте её на созданном ранее макете.

Фон для шапки

Горизонтальное меню

Теперь давайте сделаем горизонтальное меню. При помощи направляющих и линейки отмерьте снизу 80px и залейте этот прямоугольник белым цветом. Из дополнительных материалов загрузите файл bg_menu и размножьте его в пределах созданного ранее прямоугольника.

При помощи Type Tool (T), используя шрифт Georgia, напишите пункты меню, сделав их темно-серого цвета (#575757). Расстояние между пунктами должно быть не менее 60px.

Далее выберите на панели инструментов Rounded Rectangle Tool (U) и нарисуйте вокруг каждого пункта меню обводку.

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

Горизонтальное меню в фотошопе

Создание логотипа

Сейчас мы займемся разработкой логотипа. Из дополнительных материалов загрузите файл bg_logo и расположите его в центре нашей шапки — это будет основа.

В центре основы создайте круг диаметром ~240 px и задайте ему нежно-кремовый оттенок #f1e8d5.

У нас должно получиться нечто подобное:

Рисуем логотип в фотошопе

Отлично, наш логотип приобретает формы, двигаемся дальше. Теперь, при помощи Rectangle tool, нарисуйте полоску высотой ~180px, шириной ~ 370px и расположите ее в центре круга. Цвет полоски должен совпадать с цветом основы #e77817.

Логотип в фотошопе 2

Как копировать параметры слоя:

Допустим шапка для сайта в фотошопе рисуется всего на двух слоях: А — с параметрами и Б — без параметров. Кликнем в панели слоев на названии слоя А правой клавишей мыши и выбираем пункт Copy Layer Style. Затем кликнем на названии слоя Б и выбираем пункт Paste Layer Style. Так же, можно удалить все параметры слоя, выбрав пункт Clear Layer Style.

P.s. При копировании параметров от слоя А к слою Б, параметры слоя Б, если таковые имелись, полностью заменяются, а не дополняются.

Из дополнительных материалов загрузите шрифт Bazar и напишите белым цветом на ранее созданной полоске слово Blog. Любым другим шрифтом, например Georgia, сверху от полоски, напишите слово ВЕБ, а снизу ДИЗАЙНЕРА, как показано на рисунке ниже:

Логотип в фотошопе 3

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

Финальные доработки

Из дополнительных материалов загрузите текстуру tx_logo. Расположите ее над всеми слоями. Измените Opacity до 26% и режим наложения на linear Burn. Зажав Ctrl кликните левой клавишей мыши на слой bg_logo для того чтобы получить выделение. Не снимая выделение, перейдите на слой с текстурой и нажмите на кнопку создания маски (находится на панели слоев прямоугольник с кружочком внутри).

У вас должно получиться примерно следующее:

Логотип в фотошопе 4

Из дополнительных материалов загрузите файл tx_logo_2. Поместите его выше всех слоев и проделайте с ним те же манипуляции, что и с текстурой ранее (не забудьте про режим наложения и прозрачность, которая теперь составляет 60%).

Загрузите файл Okantovka и расположите его в центре логотипа под текстурами.

Логотип в фотошопе 5

При помощи кистей, например Thick Heavy Brushes, нанесите потертости на логотип кремовым цветом (#f1efdd). Поиграйтесь с размерами кистей и режимами наложения.

Из дополнительных материалов загрузите файл forlogo. Разместите его выше всех слоев. Измените режим наложения на Color Burn и Opacity до 13%. Добавьте к слою маску так же, как вы это делали несколько шагов назад.

Логотип в фотошопе 6

Все готово, остался последний штрих. Поверх всех созданных слоев создайте корректирующий слой, перейдя на панели слоев в new adjustment layer > levels. Удалите у него маску, кликнув по ней правой клавишей мыши и выбрав пункт Delete Layer Mask. Установите следующие параметры:

Логотип в фотошопе 7

Файлы для скачивания

В заключении

Шапка для сайта в фотошопе рисуется очень просто, не так ли? Теперь она готова стать частью целого макета. Кстати, уже сейчас вы можете скачать PSD макет, который выполнен в том же ретро-стиле.

Комментариев пока нет. Добавить первый
Скрыть комментарии к статье: 0

MAXCACHE: 0.32MB/0.00022 sec