39

Создаем мультистраничный макет сайта портфолио

Урок web дизайна, из которого вы узнаете, как создать в Photoshop готовый к использованию мультистраничный макет сайта портфолио. К уроку прилагается исходные PSD файлы. Специальные термины и команды Photoshop в тексте приводятся на двух языках.

Источники материалов, использованных в этом уроке

• Премиум набор акварельных кистей сайта FanExtra

Шрифт Aller

Иконка логотипа портфолио

Иконка «Стрелка в кружочке»

Иконка «Шестеренка»

Иконка для контактных форм

Иконка портфолио «Галерея картинок»

Финальное изображение

Вот иллюстрация макета, который мы будем создавать:

1

Шаг 1

Создайте новый документ (1100 Х 840 px).

Добавьте новый слой с названием «background» (Фон) и залейте весь холст таким f0ebe2 цветом.

2

Шаг 2

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

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

Вертикальные:

100 px, 400 px, 700 px, 1000 px

Горизонтальные:

450 px

3

Шаг 3

Замените текущие кисти акварельным набором.

Создайте новый слой с именем «watercolor dark» (темная акварель) и, выбрав черный цвет, нанесите на холст несколько мазков различными кистями.

4

Теперь измените для этого слоя режим наложения на overlay (перекрытие) и уменьшите непрозрачность до 70% .

5

Создайте новый слой с именем «watercolor light» (светлая акварель). Повторите предыдущий шаг, но с белой кистью, а непрозрачность здесь убавьте до 50%.

6

Добавьте новый слой с именем «highlight behind logo» (подсветка логотипа) и создайте на нем радиальный градиент «от белого к прозрачному» в левом верхнем углу холста, куда позже будет помещен логотип.

Теперь убавьте непрозрачность до 50%.

7

Шаг 4

Выделите на холсте сверху полоску высотой 5 рх и создайте новый слой с названием top bar (верхняя полоска), затем залейте выделенную область таким цветом bd3608.

8

Теперь создайте скругленный прямоугольник с радиусом 5 рх, сомкнув его с верхней полоской, и залейте линейным градиентом от такого bd3608 цвета к этому 7e2100, применив стиль слоя gradient overlay (наложение градиента) с настройками по умолчанию (кроме цвета). Растрируйте этот слой и затем объедините со слоем «top bar», нажав Ctrl+E.

9

Панель меню должна бросаться в глаза, поэтому создайте новый слой с именем «menu highlight» (подсветка меню). Нажмите клавишу Ctrl и кликните по миниатюре фигуры на объединенном слое «top bar», чтобы выделить общий контур общей панели меню и полоски. Не снимая выделения, перейдите на слой «menu highlight» и создайте радиальный градиент от белого к прозрачному с центром в середине панели меню сверху.

Измените режим наложения на overlay (перекрытие) и уменьшите непрозрачность до 30%, создав таким образом тонкий эффект подсветки панели меню.

10

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

Font Face (Шрифт): Aller

Size (Размер): 14 pt

Color (Цвет): ffffff

Kerning (Кернинг): -50

11

Чтобы еще раз подчеркнуть активность страницы, создайте новый слой с названием «menu active state» (активная ссылка) и, выбрав lasso tool (лассо), добавьте фигуру маленькой стрелки под активной ссылкой меню и залейте ее таким цветом 7e2000.

12

Шаг 5

Теперь пора перейти к созданию области логотипа. Вставьте слева вверху иконку логотипа портфолио из раздела с источниками материалов для урока.

13

Теперь напишите название своего логотипа с указанными ниже параметрами шрифта.

Font Face (Шрифт): Aller

Size (Размер): 40 pt

Color (Цвет): 31302f

Kerning (Кернинг): -50

14

Шаг 6

Ниже логотипа будет область приветствия (welcome area), поэтому добавьте сюда соответствующий текст.

Параметры шрифта для заголовка приветствия:

Font Face (Шрифт): Aller

Size (Размер): 36 pt

Color (Цвет): bd3607

Kerning (Кернинг): -50

Параметры шрифта для обычного текста приветствия:

Font Face (Шрифт): Aller

Size (Размер): 18 pt

Color (Цвет): 9f9e9d

Kerning (Кернинг): -50

15

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

16

Создайте новый слой с именем «thumbnail fade up» (исчезающая миниатюра). Выделите нижнюю часть своей картинки и залейте выделение сверху вниз линейным градиентом от такого f0ebe2 цвета к прозрачному фону. В результате ваш избранный проект эффектно растворится внизу, сливаясь с главным фоном.

17

Пришло время создать привлекательную кнопку призыва к действию ниже текста приветствия.

Нарисуйте прямоугольник со скругленными углами (rounded rectangle) с радиусом 5 рх, затем примените к этому слою эффект gradient overlay (наложение градиента), выбрав линейный тип с переходом цветов от такого 7d2000 к этому c13709. Остальные настройки стиля оставьте по умолчанию.

18

Создайте новый слой с именем «button circle 1» (круг кнопки 1) и залейте на нем кнопку линейным градиентом «от белого к прозрачному», сняв затем выделение (Ctrl+D).

Выберите слой кнопки и, нажав Ctrl, кликните на миниатюре фигуры, чтобы выделить ее контур, затем зайдите в меню select (выделение) и выберите inverse (инверсия). Теперь нажмите Delete, чтобы удалить градиент за пределами кнопки.

19

Измените для градиентного слоя режим наложения на overlay (перекрытие) и уменьшите непрозрачность до 15%, создав, таким образом, изящный блик внутри кнопки. Теперь скопируйте этот слой, увеличьте непрозрачность копии до 25% и передвиньте ее вверх в палитре слоев, продублировав световой эффект:

20

Теперь на новом слое добавьте кнопке тонкую подсветку таким же образом, как вы подсветили меню на шаге 4 (слой «menu highlight»). Вставьте еще иконку стрелки в кружочке из раздела ресурсов для урока и добавьте ей следующие эффекты с указанными настройками:

Color Overlay (Наложение цвета):

Цвет (Color): ffd196

Непрозрачность (Opacity): 100%

Режим смешивания (Blend Mode): Нормальный (Normal)

Внешнее свечение (Outer Glow):

Режим смешивания (Blend Mode): Перекрытие (Overlay)

Непрозрачность (Opacity): 75%

Метод (Blend Mode): Мягкий (Softer)

Размах (Spread): 0%

Размер (Size): 30 px

Тень (Drop Shadow):

Режим наложения (Blend Mode): Умножение (Multiply)

Color (Цвет): 000000

Opacity: 25%

Angle (Угол): 90

Distance (Смещение): 2 px

Размах (Spread): 0%

Size: 3 px

21

И чтобы закончить с кнопкой призыва, добавьте ей какой-нибудь текст типа «Learn More» (Узнать больше).

Параметры шрифта для надписи «Learn More»:

Font Face (Шрифт): Aller

Size (Размер): 18 pt

Kerning (Кернинг): -50

Color (Цвет): ffffff

22

Теперь выделите в палитре слоев все слои, связанные с кнопкой призыва и сгруппируйте их (Ctrl+G), сложив в папку с названием «button» (кнопка).

Шаг 7

Создайте новый слой с именем «bottom area» (нижняя область).

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

Затем добавьте новый слой с именем «bar underneath» (полоса снизу). Сделайте горизонтальное выделение высотой 5 рх, разделив макет пополам, и залейте его таким b5aa9a цветом.

23

Шаг 8

Создайте в левом верхнем углу нижней области прямоугольник со скругленными углами (rounded rectangle) с радиусом 20 рх, привязав его к своим направляющим, и залейте фигуру любым цветом (я использовал белый):

24

А теперь добавьте прямоугольнику эффекты inner shadow (внутренняя тень) и color overlay (наложение цвета) с указанными на рисунке ниже параметрами.

25

Вот результат применения стиля слоя:

26

Введите в полученную форму какой-нибудь заголовок, например «connect with us» (свяжитесь с нами), и добавьте ниже несколько иконок социальных сетей с надписями рядом.

Параметры текста:

Font Face (Шрифт): Aller

Size (Размер): 14 pt

Kerning (Кернинг): -50

Color (Цвет): 666259

27

Шаг 9

Теперь сгруппируйте (Ctrl+G) слои текста «connect with us», иконок социальных сетей и скругленного прямоугольника и назовите эту группу (папку) «bottom area 1» (нижняя область 1). Затем сделайте две копии этой группы и распределите их справа согласно направляющим разметки, разделив, таким образом, нижнюю часть макета на три симпатичные колонки.

Затем измените содержание каждой колонки, сохранив прежние параметры шрифта.

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

28

Шаг 10

Создайте новый слой с названием «footer» (подвал). Выделите в самом низу полосу высотой 40 рх и залейте ее таким 9b9183 цветом.

29

Добавьте сюда текст об авторских правах (copyright) с такими параметрами шрифта:

Font Face (Шрифт): Aller

Size (Размер): 14 pt

Kerning (Кернинг): -50

Color (Цвет): d6c9b5

30

Шаг 11

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

Разбейте макет на разделы и объедините все слои каждого раздела в отдельную папку (группу). Вот как я это сделал:

31

Шаг 12

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

Затем уберите области макета, которые не имеют отношения к данной странице. Сделать это несложно после того, как на последнем шаге мы по каждому разделу сложили слои в отдельную папку (группу).

Лучше всегда просто спрятать группу слоев, чем удалять ее вовсе. Так при необходимости вы в любой момент можете вернуться к папке и просто включить видимость.

Спрячьте сначала группу слоев «bottom area» (нижняя область):

32

Шаг 13

Теперь нужно заменить оставшийся контент.

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

33

Теперь просто замените старый текст на новый, но используя те же параметры шрифта. Вам не нужно менять стиль текста, поскольку он уже смотрится хорошо. Замените на кнопке призыва к действию текст «learn more» (узнать больше) на фразу «contact us» (связаться с нами), так как новая кнопка должна побуждать пользователей услышать вас:

34

Вы заметите также, что я изменил активный пункт меню. Чтобы сделать это, просто передвиньте стрелку к активной ссылке, расположив слой со стрелкой в палитре слоев ниже пункта меню. Затем измените начертание текста «Home», сделав его обычным, не жирным, а текст активной ссылки сделайте жирным:

35

Шаг 14

Теперь, когда у вас есть базовый шаблон обычной страницы сайта, сделать остальные не составит особого труда.

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

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

36

Теперь нарисуйте три скругленных белых прямоугольника с радиусом 20 рх, которые будут служить формами ввода контактных данных.

Чтобы сделать эти формы более выразительными, добавьте тонкую обводку (stroke) с указанными ниже параметрами.

Size (Размер): 1px

Position (Положение): Outside (Снаружи)

Blend Mode (Режим наложения): Normal (Нормальный)

Opacity (Непрозрачность): 100%

Color (Цвет): ccc9c2

37

Ниже показана готовая контактная форма. Просто и эффектно!

38

Шаг 15

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

Добавьте сюда несколько миниатюр, иллюстрирующих примеры ваших работ:

39

И на этом все, пользуйтесь бесплатно!

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

40

Скачайте исходные .PSD файлы

Источник: http://fanextra.com/1461/members-area-tutorial-design-a-multi-page-portfolio-website/


Оставить комментарий