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

- космический фон
- планета
- разделитель для веб-страницы
- набор иконок Social Media
- иконка с дизайном логотипа
- иконка с веб-дизайном
- иконка с дизайном приложения
- иконка SEO

Шаг 1
Начните с создания нового документа 1000X1600px.
Для облегчения создания макета вашей страницы нам понадобятся направляющие.
Разместите на холсте направляющие в следующем порядке:

Вертикальные:
50px, 100px, 300px, 500px, 550px, 700px, 900px, 950px

Горизонтальные:
175px, 225px, 450px, 750px, 900px, 1100px



Шаг 2
Создайте новый слой с названием “Фон” и залейте его 050d25.



Шаг 3
Давайте создадим фона в космическом стиле.

Для начала разместите вашу космическую текстуру в верхней части холста. Ее в коррекции не нуждаются.

Уменьшите Непрозрачность (Opacity) слоя с текстурой до 70%. Также, нужно избавиться от резкой нижней грани текстуры. Для этого создайте слой-маску (layer mask) и замаскируйте ее переход между фоном и текстурой при помощи мягкой черной кисти.



Шаг 4
Вставьте на холст планету и разместите ее в самой верхней части холста.

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



Создайте слой-маску (layer mask) и при помощи мягкой черной кисти замаскируйте грани планеты, смешивая их с фоном:



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

Создайте новый слой и назовите его “Розовый свет”.

Активируйте инструмент Кисть (paintbrush tool) и выберите большую, мягкую розовую (ee01f3). Наложите несколько розовых пятен в области “шапки” вашей страницы.



Уменьшите Непрозрачность слоя (Opacity) до 20% и измените режим наложения (blend mode) на Перекрытие (overlay). Это сделает эффект едва видимым, но все же различимым:



Создайте новый слой с названием “Пурпурный свет”. Большой, мягкой кистью наложите несколько пятен цветом 7a00f8.



На этот раз уменьшите Непрозрачность (Opacity) до 15% и оставьте Режим наложения по-умолчанию - Обычный (normal). Этот создаст более мягкий цветовой эффект.



Шаг 6
Теперь нам предстоит поработать с фоном нижней части страницы.

Для начала скопируйте текстуру с космосом и переместите копию вниз холста.

Здесь снова стал заметен переход между текстурой и основным фоном. Замаскируйте его при помощи мягкой черной кисти, предварительно создав слой-маску.



Шаг 7
Создайте копию планеты и поместите ее посередине нижней части холста.

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



Шаг 8
При помощи инструмента Прямоугольник со скругленными углами (rounded rectangle tool) обозначьте область основного контента, ориентируясь по направляющим.

Наложите белый прямоугольник со скругленными углами радиусом 10 пикселей.



Шаг 9
Настало время создать футуристическое меню!

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

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

Откройте меню стилей слоя и примените к этому слою Внутреннюю тень (inner shadow) и Наложение градиента (gradient overlay).

Установки стиля слоя Внутренняя тень (Inner Shadow Blending Option):
Режим наложения (Blend Mode): Обычный (Normal)
Цвет (Color): ffffff
Непрозрачность (Opacity): 100%
Угол (Angle): 90
Расстояние (Distance): 1px
Стягивание (Choke): 0%
Размер (Size): 0px

Установки стиля слоя Наложение градиента (Gradient Overlay Blending Option):
Режим наложения (Blend Mode): Обычный (Normal)
Непрозрачность (Opacity): 100%
Градиент (Gradient): c5c1ba к f4f4f4
Стиль (Style): Линейный (Linear)
Угол (Angle): 90




Выделите область вашего меню, кликнув по иконке соответствующего слоя при нажатой клавише Alt.

При активном выделении создайте новый слой и назовите его “Цветовой эффект меню”.

Наложите радиальный градиент (radial gradient) от белого к прозрачному (white to transparent) начиная от середины верхнего края меню. Выделенная область не даст градиенту распространиться за ее пределы.



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



Шаг 10
Нанесите какой-нибудь текст по центру меню.

Установки текста (Text Settings):
Шрифт (Font Face): Proxima Nova
Стиль (Styling): Жирный (Bold)
Интервал (Kerning): -50
Цвет (Color): 5a5752



Для того, чтобы сделать текст более выделяющимся, придать ему отчетливость, примените к его слою стиль Тень (Shadow) белого цвета.

Установки стиля Тень (Drop Shadow Blending Option):
Режим наложения (Blend Mode): Обычный (Normal)
Непрозрачность (Opacity): 80%
Цвет (Color): ffffff
Угол (Angle): 90
Расстояние (Distance): 1px
Размах (Spread): 0%
Размер (Size): 2px




Шаг 11
Чтобы создать активный пункт меню создайте новый слой и назовите его “Активная стрелка меню”.

При помощи инструмента Лассо (lasso tool) нарисуйте маленькую стрелку, указывающую вниз от меню, под ссылкой "На главную". Наложите на эту стрелку градиент цвета cac5be.



Шаг 12
Создайте серию разделителей между пунктами меню. В каждом разделителе должны чередоваться две 1-пиксельные белые и черные линии.



Теперь, уменьшите непрозрачность слоев с разделителями до 10%. Другой, более легкий способ – это объединить эти слои в группу (папку) и уменьшить непрозрачность группы.



Шаг 13
Поместите посередине верхней части области контента крупный текстуальный логотип.

Установки текста:
Шрифт (Font Face): Proxima Nova
Размер (Size): 48pt
Интервал (Kerning): -50
Цвет (Color): cac5be



Примените к слою с текстом стили слоя Тень и Обводка.

Установки стиля слоя Тень (Drop Shadow Blending Option):
Режим наложения (Blend Mode): Умножение (Multiply)
Непрозрачность (Opacity): 20%
Цвет (Color): 000000
Угол (Angle): 90
Расстояние (Distance): 2px
Размах (Spread): 0%
Размер (Size): 5px

Установки стиля слоя Обводка (Stroke Blending Option):
Размер (Size): 1px
Расположение (Position): Снаружи (Outside)
Режим наложения (Blend Mode): Обычный (Normal)
Непрозрачность (Opacity): 100%
Цвет (Color): ffffff




Шаг 14
Разместите изображение планеты так, чтобы оно накладывалось на логотип. Переместите этот слой над слоем с текстуальным логотипом:



Создайте слой-маску для слоя с планетой. Таким образом, она окажется вытравленной на изображении логотипа. В результате, получится эффект, при котором сквозь ваш логотип будет просматриваться фон, своего рода “окно в космос”:



Шаг 15
Теперь займемся зеркальной тенью нашего логотипа.
Для начала создайте копию слоя с текстом-логотипом (может случаться, что ваша слой-маска соскочит со слоя, в этом случае просто создайте ее заново). Переместите копию под оригинальный слой и пройдите в меню Редактирование > Трансформирование > Отразить вертикально (edit>transform>flip). Измените цвет текста на черный.

Теперь создайте слой-маску и растворите ваш текст в белом фоне.



Уменьшите непрозрачность слоя с тенью до 10%.



Шаг 16
Придумайте какой-нибудь текст-слоган и разместите его под логотипом. Для своего слогана и использовал красивый бесплатный шрифт Jenna Sue.

Установки текста для слогана:
Шрифт (Font Face): Jenna Sue
Размер (Size): 30pt
Интервал (Kerning): 0
Цвет (Color): 84878b



Шаг 17
Добавляем детали на “шапку” страницы.
Вставьте на шапку несколько иконок из набора circular social media icon, ссылка на которые имеется в начале урока. Позиционируйте иконки, опираясь на сетку из направляющих.

Обесцветьте (Desaturate) ваши иконки и уменьшите непрозрачность их слоя до 40%.

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



Шаг 18
Скачайте по ссылке в разделе ресурсов урока иконку дизайна.

Разместите ее под областью с логотипом, позиционируя при помощи направляющих.

Отделите иконки, вертикально разместив между ними скачанные разделители.



Шаг 19
Придумайте какую-нибудь надпись под иконками.

Установки заглавного текста:
Шрифт (Font Face): Proxima Nova
Стиль (Styling): Жирный (Bold)
Интервал (Kerning): -50
Цвет (Color): 031634

Установки текста деталей:
Шрифт (Font Face): Proxima Nova
Стиль (Styling): Нормальный (Regular)
Интервал (Kerning): -50
Цвет (Color): 7c7c7c



При помощи инструмента Прямоугольник со скругленными углами (rounded rectangle tool) радиусом скругления 10 пикселей, нарисуйте на холсте кнопку “Обратная связь” и залейте ее градиентом от 3d4cbd к 1c2a96.



Сгруппируйте ваши слои с текстом/кнопками и создайте дубликат объединенной папки. Разместите продублированные области с текстом под каждой иконкой. Измените текст в соответствии со значением иконки над ним:



Шаг 20
В левой нижней части области контента поместите скриншот сайте одного из ваших клиентов.

Я использовал дизайн страницы Blogs.FanExtra FREE 7 Day Blogging Course, с которой многие из вас уже знакомы.



Примените стили слоя Внешнее свечение (outer glow) и Обводка (stroke) к слою со скриншотом веб-страницы.

Установки стиля слоя Внешнее свечение (Outer Glow Blending Option):
Режим наложения (Blend Mode): Обычный (Normal)
Непрозрачность (Opacity): 20%
Цвет (Color): 000000
Размах (Spread): 0%
Размер (Size): 35px

Установки стиля слоя Обводка (Stroke Blending Option):
Размер (Size): 3px
Расположение (Position): Снаружи (Outside)
Режим наложения (Blend Mode): Обычный (Normal)
Непрозрачность (Opacity): 100%
Тип заливки (Fill Type): Монохромный цвет (Color)
Цвет (Color): ffffff




Шаг 21
Разместите какой-нибудь текст справа от скриншота страницы:



Шаг 22
Наконец, нанесите текст по центру нижней части макета.

Установки текста:
Шрифт (Font Face): Proxima Nova
Размет (Size): 18pt
Интервал (Kerning): -50
Цвет (Color): 98a9d3



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