РиÑ�уем краÑ�ивый шаблон длÑ� Ñ�айта в коричневых тонах – урок Photoshop

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

Вот такой результат у ва� получит�� в конце (по клику откроет�� большое изображение):

Создайте в Photoshop новый документ размером 1020х1150 px. Цвет заднего фона у�тановите на #784a24.

�айдите в интернете какую-нибудь картинку природы в коричневых тонах или �ами, при помощи фильтров �делайте картинку такого оттенка. По�ле �того добавьте ее в �озданный документ. Е�ли размер картинки не подходит, то подгоните его под размер, и�пользую и�пользу� ин�трумент Free Transform (Ctrl+T).

Вот так получило�ь у автора урока:

Изображение на фото �лишком резкое, по�тому мы его �м�гчим и�пользу� не�колько нехитрых приемов. Дл� начала примените �ледующие на�тройки к �лою Layer>Layer Mask>Hide All.

Когда вы кликните Hide All, изображение и�чезнет, а на �лое � изображением по�вит�� ма�ка. Кликайте левой кнопкой мышки по ма�ке.

Затем выбирайте Gradient Tool.

Обратите внимание на то, что у ва� должен �то�ть Черный и Белый цвет перед тем, как вы выберите Gradient Tool (G).

Теперь �оздайте градиент так, как показано на ри�унке ниже.

По�ле �того измените на�тройки Opacity дл� �ло�. Вы�тавьте значение 30%. Вот результат работы:

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

По�ле того, как мы �оздали задний фон нашего �айта перейдем к �озданию логотипа.

И�пользу� ин�трумент Rectangle tool �оздайте вертикальную тень (цвет возьмите # d07931) и примените к ней �ледующие на�тройки �тилей:

Вот что у ва� должно получить��:

�апишите тек�т, как показано на ри�унке ниже:

Внимание! Пишите тек�т «PSD», «For Coder.com» и «slogan goes here» на разных �ло�х

По�ле �того необходимо применить к напи�анному тек�ту различные �ффекты.

Дл� тек�т PSD примените �ледующие на�тройки:

Дл� тек�та For Coder.com и slogan goes here примените �ледующие на�тройки:

В результате вы должны получить такой тек�т:

Создаем навигацию

И�пользуем Rectangle tool и �оздаем тень размера 947х60 px, цветом #d07931).

Дл� того, чтобы пр�моугольник �тал таким необходимо к нему применить �ледующие �ффекты:

Добавим тек�т на меню навигации при помощи Type tool (T).

Дл� того, чтобы тек�т приобрел такой вид вам необходимо добавить к нему не�колько разных �ффектов:

Дл� «Home» примените �ледующие фильтры:

Дл� о�тальных надпи�ей и�пользуйте �ледующие �тили:

Создаем обла�ть � о�новным тек�том

При помощи ин�трумента Rectangle tool �оздайте пр�моугольную тень размером 947х347 px, цветом # d07931 и примените к ней �ледующие на�тройки:

Следующим шагом возьмите бумажную тек�туру. Скачать можно зде�ь (http://babybird-stock.deviantart.com/art/White-crumbled-paper-texture-48496295) и разме�тите ее в о�новную обла�ть. Е�ли размер не �овпадает, то и�пользуйте Free transform tool (Ctrl + T) дл� того, чтобы подогнать тек�туру под размер о�новной обла�ти.

Также примените к �лою � тек�турой �ледующие на�тройки:

Вот что у ва� получит�� в итоге:

Следующим шагом добавьте тек�т на о�новную обла�ть.

Дл� того, чтобы тек�т выгл�дел как на ри�унке примените �ледующие на�тройки:

Добавим тек�т опи�ани� дл� о�новной обла�ти.

Следующим шагом добавим в правую ча�ть о�новной обла�ти фотографию.

Как вы видите, картинка не очень хорошо �мотрит�� в нашей о�новной обла�ти. Мы не будем и�пользовать ин�трумент Free transform tool (Ctrl +T) в �тот раз, а �делаем небольшой хинт.

Убедите�ь, что �лой � фото ра�положен выше �ло� � бумажной тек�турой. �ажмите Ctrl +Alt + G дл� того, чтобы �оздать ма�ку.

�а �том шаге мы добавим немного дыма на нашу фотографию, дл� того, чтобы обла�ть �мотрела�ь �ффектнее. Дл� �того выделите изображение � лошадьми и добавьте ма�ку Layer>Layer Mask>Hide All.

По�ле �того, и�пользу� ин�трумент Gradient Tool (G) � заливкой от черного к белому.

Внимание: Убедите�ь, что у ва� выделена ма�ка �ло�.

Проведите градиент так, как показано на ри�унке.

Вот такой результат мы получим в конце выполнени� �тих шагов:

Создаем обла�ть �одержимого

При помощи ин�трумента Rectangle tool �оздайте пр�моугольник размером 947х607 пик�елей и цветом # e0d5aa.

Снова и�пользуем Rectangle tool и ри�уем еще пр�моугольник как на ри�унке ниже.

Примените к �озданному пр�моугольнику �ледующие �тили:

По�ле �того нари�уйте � левой �тороны �ллип� черного цвета.

Примените к нему фильтр Gaussian Blur (Filter>Blur>Gaussian Blur) �о значением радиу�а в 10px.

Следующим шагом, при помощи ин�трумента Rectangular Marquee Tool �оздайте выделение, как на ри�унке ниже.

�ажмите Delete дл� того, чтобы удалить выделенную обла�ть. По�ле �того нажмите Ctrl + D дл� �н�ти� выделени�.

По�ле �того добавьте фотографию и тек�т под пр�моугольником. У автора урока получил�� вот такой результат:

И�пользу� такие же �по�обы �оздайте еще две колонки � �одержимым.

При помощи ин�трумента Rectangle tool �оздайте две кнопки.

Дл� каждой кнопки примените �ледующие �тили:

Теперь мы добавим тень в футере �траницы. Дл� �того мы нари�уем черный �ллип� при помощи Ellipse tool.

По�ле �того к �ллип�у примените Gaussian Blur � радиу�ом 25px. Вот что получило�ь в результате:

По�ле выполнени� в�ех шагов вы получите вот такой макет �айта:

И�точник: Learn how to create a nice – brown layout in Photoshop | Перевод и творче�ка� обработка PSD.by