Создание эффектного текстурированного веб шаблона в Photoshop

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

1 Шаг

Сначала создадим документ с размерами 1024×1050 px.

2 Шаг

Следующий шаг — залейте фон цветом #F0EEDB.

3 Шаг

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

4 Шаг

По завершению манипуляций с размерами фото понизьте Opacity этого слоя до 82%. В результате у меня получилась такая картина:

5 Шаг

Начнем оформлять шапку нашего сайта. При помощи Rectangle Marquee Tool создайте прямоугольное выделение для шапки примерно в пикселе от верха страницы и залейте его черным цветом (#000000).

6 Шаг

Далее только что созданному слою нужно задать несколько стилей, поэтому откройте меню Blending Options для этого слоя и задайте там такие параметры:

7 Шаг

Понизьте Opacity слоя до 95%, чтобы был небольшой намек на фон под ним. Теперь ваш документ должен иметь вот такой вид:

8 Шаг

Следующий шаг — добавляем логотип. В моем случае это — текст шрифтом Geneva CY. Нанесите надпись, как это сделано у меня и поместите рядом с ней аккуратный симпатичный разделитель шириной в 1px.

9 Шаг

Продолжаем. Добавьте вашей надписи и разделительной линейке несколько стилей.

10 Шаг

После этого возьмите какой-нибудь стандартный шрифт, типа Helvetica и добавьте подзаголовок, цветом #25B2F8. Результат должен выглядеть как-то так.

11 Шаг

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

12 Шаг

Сейчас задайте такие стили для этого слоя:

13 Шаг

Вот на что должен быть похож ваш результат

14 Шаг

Давайте теперь добавим текст в меню. Для активной ссылки возьмите цвет #ABAE80, для остальных — #393939. Расположите их, как показано ниже.

15 Шаг

Далее нам нужно разделить получившиеся ссылки. Возьмите Rectangular Marquee Tool и сделайте с помощью него по одной полоске толщиной в 1px между каждой парой ссылок и выполните Edit > Clear для вашего слоя с прямоугольником.

16 Шаг

Проделав все это с каждой ссылкой, вы завершили работу над шапкой и теперь результат вашей работы должен выглядеть вот так вот:

17 Шаг

Продолжаем работу и переходим к баннеру на сайте. В действительности, мы должны придумать нечто, похожее на «слайдшоу» из различных постов. Я нашел отличное фото на SXC, которое можно скачать здесь. Загрузите его, откройте в своем фотошоп и подгоните по размерам своего документа. Дальше вырежьте часть, понравившуюся вам больше всего примерно такой величины, как показано ниже.

18 Шаг

Теперь зададим нашему баннеру аккуратный обвод. Добавьте такие опции в окно стилей этого слоя:

19 Шаг

Нам нужно показать заголовок того поста, за который отвечает картинка в нашем слайдшоу. Перед тем, как нанести эту надпись, давайте подготовим для нее качественный фон. С помощью Rectangle Marquee Tool сделайте выделение в нижней части картинки, как показано далее и залейте его черным цветом #000000.

20 Шаг

Сейчас давайте понизим Opacity этого блока до 59% и посмотрим на результат:

21 Шаг

Ну а сейчас можно нанести надпись. Для названия категории я использовал белый цвет для цвета текста, но понизил его Opacity до 60%. Для самого тела заголовка я делал все то же самое, но понижал Opacity до 85%. Вот что у вас должно выйти в результате:

22 Шаг

С левой стороны я нанес меню, определяющее, какой пост сейчас прокручивается. Все, что мне нужно было сделать — проставить кружки с помощью Elliptical Marquee Tool и залить их черным цветом.

23 Шаг

Активный кружок под номером 3 я оформил с помощью следующего стиля:

24 Шаг

На этом этапе можете считать, что средняя полоса страницы полностью готова, и результат можно наблюдать вот таким:

25 Шаг

Время двигаться дальше, а именно — определяться, как должны отображаться посты на странице. С помощью Rectangle Marquee Tool создайте выделение, как показано ниже и залейте его белым цветом (#FFFFFF).

26 Шаг

Этому слою зададим такие стили:

27 Шаг

Сейчас посмотрим, как можно структурировать отображение поста. Для заголовка я использовал цвет шрифта #211213, для описания — стандартный #000000 черный. Повторите пример, показанный ниже, и двигайтесь дальше.

28 Шаг

Оформите таким же образом остальные посты. Далее перейдем к боковой панели. Первым делом давайте оформим поле заголовка. И так, с помощью Rectangle Marquee Tool создайте выделение, как на рисунке и залейте его черным (#000000).

29 Шаг

Примените к этому слою такие стили:

30 Шаг

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

31 Шаг

Теперь нанесем текст. Добавьте заголовок цветом #323232 и задайте ему такой стиль:

32 Шаг

Посмотрите, как это должно выглядеть:

33 Шаг

Здесь нарисуем поле для основного контента панели. При помощи Rectangle Marquee Tool в очередной раз создаем прямоугольник, как показано на иллюстрации и заливаем его черным цветом (#000000).

34 Шаг

Применяем к этому слою такие стили:

35 Шаг

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

36 Шаг

Почти все! Последний штрих — добавляем подвал. При помощи Rectangle Marquee Tool сделайте выделение, как показано далее в нижней части документа и залейте его черным цветом (#000000).

37 Шаг

Идем дальше, задаем слою некоторые стили:

Готово! Мои поздравления!

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

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта sixrevisions.com, автор перевода указан в начале урока.