Сайт ищет новых владельцев. Пишите на e2network@yandex.ru с темой "Покупка psd.by"

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

Категория: Создание шаблонов сайтов|Уроки Photoshop

10 мая 2010

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

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

 

clip_image002

Внимание! Урок достаточно большой по объему. Весит порядка 30 Мб, поэтому запасайтесь терпением и трафиком.

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

clip_image003

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

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

clip_image005

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

clip_image006

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

clip_image007

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

clip_image008

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

clip_image009

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

clip_image011

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

clip_image013

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

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

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

clip_image014

clip_image015

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

clip_image016

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

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

clip_image017

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

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

clip_image018

clip_image019

clip_image020

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

clip_image021

clip_image022

clip_image023

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

clip_image024

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

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

clip_image026

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

clip_image027

clip_image028

clip_image029

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

clip_image031

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

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

clip_image032

clip_image033

clip_image034

clip_image035

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

clip_image036

clip_image037

clip_image038

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

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

clip_image039

clip_image040

clip_image042

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

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

clip_image043

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

clip_image045

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

clip_image047

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

clip_image048

clip_image049

clip_image050

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

clip_image052

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

clip_image054

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

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

clip_image056

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

clip_image006[1]

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

clip_image008[1]

clip_image009[1]

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

clip_image057

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

clip_image059

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

clip_image061

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

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

clip_image063

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

clip_image065

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

clip_image067

clip_image069

clip_image071

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

clip_image072

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

clip_image073

clip_image074

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

clip_image075

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

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

clip_image077

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

clip_image079

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

clip_image081

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

clip_image083

clip_image085

clip_image087

clip_image089

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

clip_image091

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

clip_image093

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

clip_image002[1]

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

2 комментария

Avatar

Василий

10 мая 2013 в 6:50

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

Avatar

Сергей

24 марта 2014 в 14:49

Спасибо, урок помог сделать уникальный шаблон.

Написать комментарий

О PSD.by

PSD.by - это сайт, полностью посвященный работе с Adobe Photoshop. Не важно кто вы - матерый волк Фотошопа или начинающий дизайнер, который только делает свои первый шаги. На нашем сайте вы найдете для себе много полезного - от простых до сложных уроков, большой каталог дополений для Photoshop.
Если Фотошоп для вас - это не просто название софта, то вы попали по адресу!

  • Pavel: Добрый день! Прошу прислать Бесплатный макет футболок [...]
  • Андрей: Добрый день! Прошу прислать Бесплатный макет футболок [...]
  • Лидия: Добрый день! Прошу прислать Бесплатный макет футболок [...]
  • andrey: Добрый день! Прошу прислать Бесплатный макет футболок [...]
  • Ваграм: Просто офигенно :) [...]
Creative Suite 5 Patterns для фотошопа Примеры работ дизайнеров Работа с фотографиями Рисование в Photoshop Создание обоев для рабочего стола Уроки Photoshop гламурные кисти для фотошопа дизайн сайтов дизайн сайтоы кисти для Photoshop новогодние стили для фотошопа обработка фото в фотошопе отделение объекта от фона в фотошопе паттерны для фотошопа пример креативных дизайнов работа с текстов в фотошоп работа с текстом работа с текстом в photoshop работа с текстурами работа с эффектами в фотошоп рамки для фото в psd релиз Photoshop скачать дополнения для photoshop скачать иконки в psd скачать иконки для фотошопа скачать кисти для фотошопа скачать паттерны для Photoshop скачать стили для Photoshop скачать тени для фотошопа скачать шаблон фото скачать шрифты для фотошопа создание баннеров в фотошопе создание коллажей в фотошопе создание макетов рекламы создание макетов сайта в фотошопе создание сайтов в фотошопе стили для фотошопа стили фотошоп тени для фотошопа травяная текстура уроки фотошоп шаблоны для коллажей шаблоны фото для фотошоп шаблоны фото для фотошопа

Это интересно!