Среда, 24 Октябрь 2012 00:00

Профессиональный макет современного сайта

Этот урок покажет вам, как создать современный макет сайта-портфолио.

Данное пособие будет интересно, как опытным дизайнерам, так и начинающим веб-мастерам. Подробности ниже.


Создайте новый документ с размерами 800х700 px и разрешением 72 dpi, перейдя в меню File > New (Файл > Создать). Затем, выбрав Paint Bucket Tool (Заливка), залейте холст таким #131313 цветом.
Документ 
Включив инструмент Ellipse Tool (Эллипс), (U), нарисуйте линзообразную фигуру элемента будущей шапки сайта и залейте ее белым цветом.
2 
Откройте вкладку Blending Options (Параметры наложения) и выберите стиль Outer Glow (Внешнее свечение) с указанными ниже настройками.
3.jpg
4.jpg 
Используя прежний инструмент, создайте еще один уплощенный эллипс для следующего элемента шапки, откорректировав его форму с помощью инструмента Convert Point Tool (Угол) из группы Pen Tool (Перо).
5.jpg 
Откройте вкладку Blending Options (Параметры наложения) и добавьте стили слоя с указанными ниже настройками:
Inner Glow (Внутреннее Свечение)
6.jpg 
Gradient Overlay (Наложение градиента)
7.jpg 
Параметры градиента:
8.jpg 
9.jpg 
Скопируйте вновь созданный слой и, выбрав опцию Free Transform (Свободное трансформирование), постарайтесь немного сузить и растянуть дубликат так, как показано на рисунке ниже. 
10.jpg 
Теперь добавьте Gradient Overlay (Наложение градиента). 
11.jpg
Параметры градиента:
12.jpg 
13.jpg 
Создайте новый документ размером 20х20 px, разрешением 72 dpi и прозрачным фоном. Затем возьмите Rectangle Tool (Прямоугольник) и нарисуйте своего рода узор из трех белых полос, трансформировав исходную форму с помощью команды Free Transform (Свободное трансформирование).
14.jpg 
15.jpg 
Сохраните узор, перейдя в Edit > Define Pattern (Редактирование > Определить узор) и присвоив ему любое имя.
16.jpg 
Создайте новый слой и, выбрав Rectangle Tool (Прямоугольник), растяните в середине холста широкую полосу, которая будет частью фона сайта.
17.jpg
Открыв Blending Options (Параметры наложения) добавьте следующие стили слоя:
Gradient Overlay (Наложение градиента)
18.jpg 
Параметры градиента:
19.jpg 
Pattern Overlay (Наложение узора)
Выберите свой узор, нажав на маленький треугольник в окошке Pattern (Узор).
20.jpg 
21.jpg 
Скопируйте вновь созданный слой и, выбрав Free Transform (Свободное трансформирование), переместите дубликат вправо и немного приподнимите его, как показано на рисунке.
22.jpg 
23.jpg 
Включив Rounded Rectangle Tool (Прямоугольник со скругленными углами), нарисуйте фигуру панели кнопочного меню, расположив ее в самом низу композиции шапки и залив таким #01010 цветом. 
24.jpg
Открыв Blending Options (Параметры наложения), выберите Outer Glow (Внешнее свечение).
25.jpg 
26.jpg 
Скопируйте слой панели и, выбрав Free Transform (Свободное трансформирование), немного уменьшите дубликат, как на рисунке. 
27.jpg 
Затем добавьте Gradient Overlay (Наложение градиента).
28.jpg
Параметры градиента:
29.jpg
30.jpg 
Включите Ellipse Tool (Эллипс) и с правой стороны панели меню в шапке сайта нарисуйте ореол подсветки.
31.jpg
Установите в палитре слоев Fill (Заливка) на 0% и, открыв Blending Options (Параметры наложения), выберите Gradient Overlay (Наложение градиента).
32.jpg
Параметры градиента:
33.jpg 
34.jpg 
Нажмите клавишу Alt и кликните на линии между слоями блика и панели меню, чтобы создать Clipping Mask (Обтравочную маску) и, таким образом, ограничить ореол подсветки контуром кнопочной панели.
35.jpg
36.jpg 
Скопируйте слой с бликом и, выбрав команду Free Transform (Свободное трансформирование), переместите дубликат на левую сторону панели, расположив его симметрично.
37.jpg
Выберите Rectangle Tool (Прямоугольник) и растяните фигуру для оформления фона в нижней части макета, затем залейте ее таким #1A1A1A цветом.
38.jpg
Откройте Blending Options (Параметры наложения) и добавьте следующие стили слоя:
Outer Glow (Внешнее свечение)
39.jpg 
Bevel and Emboss (Тиснение)
40.jpg 
41.jpg 
Выберите Rounded Rectangle Tool (Прямоугольник со скругленными углами) и создайте обширную область для размещения контента сайта.
42.jpg 
43.jpg 
Теперь добавьте следующие стили слоя:
Drop Shadow (Тень)
44.jpg 
Gradient Overlay (Наложение градиента)
45.jpg 
Параметры градиента:
46.jpg 
47.jpg 
Скопируйте текущий слой и, вызвав команду Free Transform (Свободное трансформирование), уменьшите дубликат, как показано на рисунке ниже.
48.jpg 
Установите в палитре слоев Fill (Заливка) на 0% и добавьте стиль
Stroke (Обводка).
49.jpg 
50.jpg 
Далее нам потребуется два инструмента, чтобы создать еще один элемент, предусмотренный в шапке сайта. Сначала выберите Rectangle Tool (Прямоугольник) и добавьте фигуру исходной формы элемента, затем включите Ellipse Tool (Эллипс) и, нажав клавишу Alt, нарисуйте два овала подряд, вырезав, таким образом, ненужные фрагменты, как на рисунке.
51.jpg


52.jpg 
Теперь добавьте Gradient Overlay (Наложение градиента)
53.jpg 
Параметры градиента:
54.jpg 
55.jpg 
Сейчас нам предстоит, выбрав Rectangle Tool (Прямоугольник), дополнить композицию шапки сайта еще одним элементом прямоугольной формы, расположив его выше предыдущего.
56.jpg
57.jpg
Добавьте новому слою Gradient Overlay (Наложение градиента)
58.jpg
Параметры градиента:
59.jpg
60.jpg 
Выберите Line Tool (Линия) и проведите вертикальные линии такого #8D8D8D цвета с обеих сторон созданного на предыдущем шаге прямоугольника. 
61.jpg 
62.jpg 
Возьмите Pencil Tool (Карандаш) и проведите двойную, вертикальную линию выше слоя панели меню посредине подсвеченной области слева.
63.jpg 
Измените Blending mode (Режим смешивания) на Soft Light (Мягкий свет).
64.jpg 
Скопируйте созданный разделитель и, вызвав команду Free Transform (Свободное трансформирование), переместите дубликат в область подсветки с правой стороны панели меню.
65.jpg
А сейчас, выбрав Ellipse Tool (Эллипс), нарисуйте в центре шапки круглую, базовую фигуру для логотипа сайта.
66.jpg 
Откройте Blending Options (Параметры наложения) и добавьте следующие стили слоя:
Outer Glow (Внешнее свечение)
65.jpg 
Gradient Overlay (Наложение градиента)
68.jpg 
Параметры градиента:
69.jpg 
70.jpg 
Используя прежний инструмент, внутри предыдущей формы создайте следующую фигуру, как на рисунке ниже.
71.jpg
Установите в палитре слоев Fill (Заливка) на 0% и добавьте Gradient Overlay (Наложение градиента). 
72.jpg
Параметры градиента:
73.jpg
74.jpg 
Теперь добавьте очередной кружок в рисунок логотипа, расположив его, как показано на рисунке, и залив таким #0A0F12 цветом. 
75.jpg
Примените к этому слою эффект Stroke (Обводка). 
76.jpg
77.jpg 
Теперь все тем же инструментом Ellipse Tool нарисуйте ореол подсветки в верхней части логотипа.
78.jpg 
Выставьте Fill (Заливка) на 0% и добавьте Gradient Overlay (Наложение градиента).
79.jpg
Параметры градиента:
80.jpg 
81.jpg 
Нажмите клавишу Alt и кликните на линии между слоями, чтобы ограничить ореол блика контуром фигуры нижнего слоя.
82.jpg
83.jpg
И снова включите Ellipse Tool (Эллипс) и добавьте еще один кружок в рисунок логотипа.
84.jpg
Установите Fill (Заливка) в палитре слоев на 0% и, выбрав Blending Options (Параметры наложения), добавьте следующие стили слоя:
Outer Glow (Внешнее свечение)
85.jpg 
Inner Glow (Внутреннее свечение)
86.jpg 
Stroke (Обводка)
87.jpg 
88.jpg 
Следующий шаг заключается в создании и оформлении специальной секции для левого раздела области контента сайта. Выберите Rectangle Tool (Прямоугольник) и растяните фигуру, как на рисунке ниже.
89.jpg
Установите Fill (Заливка) в палитре слоев на 0% и, выбрав Blending Options (Параметры наложения), добавьте Gradient Overlay (Наложение градиента).
90.jpg
Параметры градиента:
91.jpg 
92.jpg 
Скопируйте вновь созданный слой и, выбрав функцию Free Transform (Свободное трансформирование), отразите дубликат по горизонтали и поместите с правой стороны, как показано на рисунке ниже.
93.jpg 
Включив инструмент Type Tool (Текст), попытайтесь подчеркнуть границы разделов контента тремя точечными, пунктирными линиями сверху и снизу, используя указанные ниже параметры шрифта.
94.jpg
95.jpg
Добавьте всем линиям Drop Shadow (Тень).
96.jpg
97.jpg 
98.jpg
Теперь добавьте названия кнопок меню на панели навигации сайта, используя параметры шрифта, как на рисунке ниже.
99.jpg 
100.jpg 
Напишите также название логотипа сайта с указанными параметрами шрифта.
101.jpg
102.jpg 
Добавьте тексту Gradient Overlay (Наложение градиента)
103.jpg 
Параметры градиента:
104.jpg 
105.jpg 
Озаглавьте разделы контента, используя следующие настройки параметров шрифта:
106.jpg 
107.jpg 
108.jpg 
Добавьте текст содержания раздела "about me" (обо мне), списав параметры шрифта с картинки ниже:
109.jpg 
110.jpg
111.jpg 
В следующий раздел "portfolio" вставьте скриншоты своих проектов и для всех шести картинок добавьте Stroke (Обводка) с указанными ниже настройками.
112.jpg
113.jpg 
И в заключение добавьте в подвал информацию об авторских правах (copyright) с такими параметрами шрифта:
114.jpg 
115.jpg 

Готово!
Полный размер смотрите здесь.

Прочитано 2203 раз

Комментарии   

0 # Профессиональны й макет современного сайтаtwitter.com 04.01.2015 05:45
Thanks very interesting blog!
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору

Добавить комментарий


Защитный код
Обновить

up