654 Урок web дизайна, из которого вы узнаете, как создать в Photoshop готовый к использованию мультистраничный макет сайта портфолио. К уроку прилагается исходные PSD файлы. Специальные термины и команды Photoshop в тексте приводятся на двух языках.
Источники материалов, использованных в этом уроке
• Премиум сайта FanExtra
•
•
•
•
•
•
Финальное изображение
Вот иллюстрация макета, который мы будем создавать:
Шаг 1
Создайте новый документ (1100 Х 840 px).
Добавьте новый слой с названием «background» (Фон) и залейте весь холст таким f0ebe2 цветом.
Шаг 2
Теперь выставьте несколько направляющих для разметки макета главной страницы сайта. Они понадобятся и позже, когда мы перейдем к созданию других страниц.
Установите следующие направляющие:
Вертикальные:
100 px, 400 px, 700 px, 1000 px
Горизонтальные:
450 px
Шаг 3
Замените текущие кисти акварельным набором.
Создайте новый слой с именем «watercolor dark» (темная акварель) и, выбрав черный цвет, нанесите на холст несколько мазков различными кистями.
Теперь измените для этого слоя режим наложения на overlay (перекрытие) и уменьшите непрозрачность до 70% .
Создайте новый слой с именем «watercolor light» (светлая акварель). Повторите предыдущий шаг, но с белой кистью, а непрозрачность здесь убавьте до 50%.
Добавьте новый слой с именем «highlight behind logo» (подсветка логотипа) и создайте на нем радиальный градиент «от белого к прозрачному» в левом верхнем углу холста, куда позже будет помещен логотип.
Теперь убавьте непрозрачность до 50%.
Шаг 4
Выделите на холсте сверху полоску высотой 5 рх и создайте новый слой с названием top bar (верхняя полоска), затем залейте выделенную область таким цветом bd3608.
Теперь создайте скругленный прямоугольник с радиусом 5 рх, сомкнув его с верхней полоской, и залейте линейным градиентом от такого bd3608 цвета к этому 7e2100, применив стиль слоя gradient overlay (наложение градиента) с настройками по умолчанию (кроме цвета). Растрируйте этот слой и затем объедините со слоем «top bar», нажав Ctrl+E.
Панель меню должна бросаться в глаза, поэтому создайте новый слой с именем «menu highlight» (подсветка меню). Нажмите клавишу Ctrl и кликните по миниатюре фигуры на объединенном слое «top bar», чтобы выделить общий контур общей панели меню и полоски. Не снимая выделения, перейдите на слой «menu highlight» и создайте радиальный градиент от белого к прозрачному с центром в середине панели меню сверху.
Измените режим наложения на overlay (перекрытие) и уменьшите непрозрачность до 30%, создав таким образом тонкий эффект подсветки панели меню.
Теперь напишите свои названия ссылок меню с указанными ниже параметрами шрифта, применив обычное начертание к неактивным ссылкам и жирное к активному пункту.
Параметры шрифта меню:
Font Face (Шрифт): Aller
Size (Размер): 14 pt
Color (Цвет): ffffff
Kerning (Кернинг): -50
Чтобы еще раз подчеркнуть активность страницы, создайте новый слой с названием «menu active state» (активная ссылка) и, выбрав lasso tool (лассо), добавьте фигуру маленькой стрелки под активной ссылкой меню и залейте ее таким цветом 7e2000.
Шаг 5
Теперь пора перейти к созданию области логотипа. Вставьте слева вверху иконку логотипа портфолио из раздела с источниками материалов для урока.
Теперь напишите название своего логотипа с указанными ниже параметрами шрифта.
Font Face (Шрифт): Aller
Size (Размер): 40 pt
Color (Цвет): 31302f
Kerning (Кернинг): -50
Шаг 6
Ниже логотипа будет область приветствия (welcome area), поэтому добавьте сюда соответствующий текст.
Параметры шрифта для заголовка приветствия:
Font Face (Шрифт): Aller
Size (Размер): 36 pt
Color (Цвет): bd3607
Kerning (Кернинг): -50
Параметры шрифта для обычного текста приветствия:
Font Face (Шрифт): Aller
Size (Размер): 18 pt
Color (Цвет): 9f9e9d
Kerning (Кернинг): -50
Выберите один из лучших своих проектов и вставьте его миниатюру справа от области приветствия.
Создайте новый слой с именем «thumbnail fade up» (исчезающая миниатюра). Выделите нижнюю часть своей картинки и залейте выделение сверху вниз линейным градиентом от такого f0ebe2 цвета к прозрачному фону. В результате ваш избранный проект эффектно растворится внизу, сливаясь с главным фоном.
Пришло время создать привлекательную кнопку призыва к действию ниже текста приветствия.
Нарисуйте прямоугольник со скругленными углами (rounded rectangle) с радиусом 5 рх, затем примените к этому слою эффект gradient overlay (наложение градиента), выбрав линейный тип с переходом цветов от такого 7d2000 к этому c13709. Остальные настройки стиля оставьте по умолчанию.
Создайте новый слой с именем «button circle 1» (круг кнопки 1) и залейте на нем кнопку линейным градиентом «от белого к прозрачному», сняв затем выделение (Ctrl+D).
Выберите слой кнопки и, нажав Ctrl, кликните на миниатюре фигуры, чтобы выделить ее контур, затем зайдите в меню select (выделение) и выберите inverse (инверсия). Теперь нажмите Delete, чтобы удалить градиент за пределами кнопки.
Измените для градиентного слоя режим наложения на overlay (перекрытие) и уменьшите непрозрачность до 15%, создав, таким образом, изящный блик внутри кнопки. Теперь скопируйте этот слой, увеличьте непрозрачность копии до 25% и передвиньте ее вверх в палитре слоев, продублировав световой эффект:
Теперь на новом слое добавьте кнопке тонкую подсветку таким же образом, как вы подсветили меню на шаге 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
И чтобы закончить с кнопкой призыва, добавьте ей какой-нибудь текст типа «Learn More» (Узнать больше).
Параметры шрифта для надписи «Learn More»:
Font Face (Шрифт): Aller
Size (Размер): 18 pt
Kerning (Кернинг): -50
Color (Цвет): ffffff
Теперь выделите в палитре слоев все слои, связанные с кнопкой призыва и сгруппируйте их (Ctrl+G), сложив в папку с названием «button» (кнопка).
Шаг 7
Создайте новый слой с именем «bottom area» (нижняя область).
Выделите нижнюю половину макета, ограничив выделение сверху установленной горизонтальной направляющей, и залейте таким d6c9b5 цветом.
Затем добавьте новый слой с именем «bar underneath» (полоса снизу). Сделайте горизонтальное выделение высотой 5 рх, разделив макет пополам, и залейте его таким b5aa9a цветом.
Шаг 8
Создайте в левом верхнем углу нижней области прямоугольник со скругленными углами (rounded rectangle) с радиусом 20 рх, привязав его к своим направляющим, и залейте фигуру любым цветом (я использовал белый):
А теперь добавьте прямоугольнику эффекты inner shadow (внутренняя тень) и color overlay (наложение цвета) с указанными на рисунке ниже параметрами.
Вот результат применения стиля слоя:
Введите в полученную форму какой-нибудь заголовок, например «connect with us» (свяжитесь с нами), и добавьте ниже несколько иконок социальных сетей с надписями рядом.
Параметры текста:
Font Face (Шрифт): Aller
Size (Размер): 14 pt
Kerning (Кернинг): -50
Color (Цвет): 666259
Шаг 9
Теперь сгруппируйте (Ctrl+G) слои текста «connect with us», иконок социальных сетей и скругленного прямоугольника и назовите эту группу (папку) «bottom area 1» (нижняя область 1). Затем сделайте две копии этой группы и распределите их справа согласно направляющим разметки, разделив, таким образом, нижнюю часть макета на три симпатичные колонки.
Затем измените содержание каждой колонки, сохранив прежние параметры шрифта.
Во второй колонке я использовал несколько клиентских логотипов недавних клиентов сайта, о которых здесь идет речь, а в третьей колонке я добавил простой раздел отзывов.
Шаг 10
Создайте новый слой с названием «footer» (подвал). Выделите в самом низу полосу высотой 40 рх и залейте ее таким 9b9183 цветом.
Добавьте сюда текст об авторских правах (copyright) с такими параметрами шрифта:
Font Face (Шрифт): Aller
Size (Размер): 14 pt
Kerning (Кернинг): -50
Color (Цвет): d6c9b5
Шаг 11
Теперь, прежде чем перейти к другим страницам нашего проекта, очень важно правильно сгруппировать все слои, что существенно облегчит работу.
Разбейте макет на разделы и объедините все слои каждого раздела в отдельную папку (группу). Вот как я это сделал:
Шаг 12
Теперь можно перейти к созданию остальных страниц в соответствии с пунктами меню. Простейший способ сделать это заключается в использовании базового макета. Вместо того чтобы копировать кучу контента с главной страницы проекта, просто сохраните свой документ с новым именем в качестве файла новой страницы.
Затем уберите области макета, которые не имеют отношения к данной странице. Сделать это несложно после того, как на последнем шаге мы по каждому разделу сложили слои в отдельную папку (группу).
Лучше всегда просто спрятать группу слоев, чем удалять ее вовсе. Так при необходимости вы в любой момент можете вернуться к папке и просто включить видимость.
Спрячьте сначала группу слоев «bottom area» (нижняя область):
Шаг 13
Теперь нужно заменить оставшийся контент.
Начните с удаления иллюстрации своего избранного проекта и его замещения большой иконкой шестеренки, которую вы найдете в списке ресурсов для урока:
Теперь просто замените старый текст на новый, но используя те же параметры шрифта. Вам не нужно менять стиль текста, поскольку он уже смотрится хорошо. Замените на кнопке призыва к действию текст «learn more» (узнать больше) на фразу «contact us» (связаться с нами), так как новая кнопка должна побуждать пользователей услышать вас:
Вы заметите также, что я изменил активный пункт меню. Чтобы сделать это, просто передвиньте стрелку к активной ссылке, расположив слой со стрелкой в палитре слоев ниже пункта меню. Затем измените начертание текста «Home», сделав его обычным, не жирным, а текст активной ссылки сделайте жирным:
Шаг 14
Теперь, когда у вас есть базовый шаблон обычной страницы сайта, сделать остальные не составит особого труда.
Для создания новой страницы повторите снова действия шага 12. Оставаясь на этой странице, просто сохраните ее с новым именем файла, вместо того, чтобы создавать новый документ.
Замените шестеренку контактной иконкой, которую вы найдете в списке ресурсов для урока, и вставьте взамен прежнего соответствующий текст:
Теперь нарисуйте три скругленных белых прямоугольника с радиусом 20 рх, которые будут служить формами ввода контактных данных.
Чтобы сделать эти формы более выразительными, добавьте тонкую обводку (stroke) с указанными ниже параметрами.
Size (Размер): 1px
Position (Положение): Outside (Снаружи)
Blend Mode (Режим наложения): Normal (Нормальный)
Opacity (Непрозрачность): 100%
Color (Цвет): ccc9c2
Ниже показана готовая контактная форма. Просто и эффектно!
Шаг 15
Для последней страницы портфолио повторите снова прежний прием, заменив контактную иконку большой иконкой портфолио «Галерея картинок», которая есть в списке ресурсов для урока.
Добавьте сюда несколько миниатюр, иллюстрирующих примеры ваших работ:
И на этом все, пользуйтесь бесплатно!
Ниже показан финальный результат. Я надеюсь, что урок вам понравился.
Скачайте
Источник: http://fanextra.com/1461/members-area-tutorial-design-a-multi-page-portfolio-website/
