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

Делаем второй шаг для создания дизайна сайта и сегодня мы с вами рассмотрим, как делается шапка для сайта в фотошопе. Если посмотреть на макет, который мы рисуем, то видно, что она состоит из горизонтального меню и логотипа.

Скачайте дополнительные материалы , что бы у вас были все состовляющие . Пароль на архив, как обычно, onjee.ru.

Статья обещает быть объемной, поэтому, я надеюсь, вы запаслись терпением.

Разметка

Для начала, давайте разметим рабочую область при помощи линейки (Ctrl+R).

Шапка будет высотой ~160px, поэтому, при помощи направляющих, отмерьте это расстояние сверху макета. Откройте дополнительные материалы и загрузите файл bg_header. Эта текстура будет служить основным фоном для создаваемой нами шапки. Расположите ее на размеченной области.

Из той же папки с дополнительными материалами загрузите файл bg_menu. Данная текстура будет служить подложкой под горизонтальное меню. Расположите ее в нижнем левом углу шапки и продублируйте до конца по горизонтали, как показано на рисунке ниже.

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

Теперь давайте сделаем горизонтальное меню. При помощи направляющих и линейки отмерьте от левого края макета 305px (это расстояние останется под логотип).

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

После того, как все пункты меню прописаны, выберите на панели инструментов Custom Shape Tool (U). Из списка автофигур выберите звезду и нарисуйте ее между пунктами меню размером ~10px.

Теперь нам необходимо сделать активный пункт меню, допустим, это будет Главная. Выделите его, при помощи Type Tool и измените цвет на черный (#000000). При помощи инструмента Rounded tool нарисуйте подложку белого цвета (#ffffff) для активного пункта меню. Поместите слой с подложкой ниже слоя с пунктом меню, затем перейдите в Параметры слоя (Blending Options) и активируйте вкладку Stroke. Задайте параметры, как на рисунке ниже:

У вас должно получиться что-то вроде этого:

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

Продолжаем создание шапки для сайта в фотошопе. Теперь мы займемся разработкой логотипа для нашего будущего макета. Из дополнительных материалов загрузите файл bg_logo. Расположите его в центре отрезка 305px, который мы отступили ранее и перейдя в Параметры слоя (blending options) активируйте следующие вкладки:

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

В центре получившейся подложки создайте круг диаметром ~150 px и, перейдя в Параметры слоя (blending options), активируйте следующие вкладки:

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

Отлично, наш логотип приобретает формы, двигаемся дальше. Теперь, при помощи Rectangle tool, нарисуйте белую полоску высотой ~70px, шириной ~ 200px и расположите ее в центре круга. Зажмите Ctrl и кликните левой клавишей по слою с кругом. Инвертируйте полученное выделение, нажав комбинацию клавишь Shift+ctrl+I. Не снимая выделение, кликните по слою с полоской левой клавишей мыши и нажмите Delete. Снимите выделение. У вас должно получиться примерно так:

Примените к слою с полоской параметры, которые вы применяли к слою bg_logo.

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

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

Из дополнительных материалов загрузите шрифт Bazar и напишите кремовым цветом (#fcf1eb) на ранее созданной полоске слово Blog. Примените к слою следующие параметры:

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

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

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

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

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

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

Загрузите файл Okantovka и расположите его в центре логотипа. Измените Opacity до 50%. У вас должно получиться следующее:

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

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

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

Ну, вот и все. Создание шапки для сайта в фотошопе подошло к концу.

Надеюсь, вам было интересно ее рисовать. В следующих уроках мы разберем, как сделать блок основного контента футер и сайдбар. Если у вас остались какие-то вопросы — то милости прошу в комментарии.

Постовой: Если вы веб дизайнер, то вам, просто необходимо знать, как сделать баннер в фотошопе. Простым и понятным языком, автор рассказывает все аспекты этого нелегкого дела.

Автор ТОха