Список ресурсов, используемых в этом уроке
Набор иконок социальных сетей
Набор кистей фракталов
Фотография девушки
Иконка календаря
Иконка человека
Финальный результат
Вот предварительный просмотр изображения, которое мы будем создавать:
Шаг 1
Создайте новый документ (1000X1000px). Заполните холст цветом ebe4ce.
Шаг 2
Затем создайте новый слой под названием "top highlight".
Заполните верхнюю (в 100px) часть холста линейным градиентом от белого к прозрачному. Чтобы сделать эффект более тонким, уменьшите непрозрачность этого слоя до 80%.
Шаг 3
Теперь пришло время для создания классного заголовка!
Создайте новый слой под названием "highlight behind logo". Перетащите радиальный градиент (от белого к прозрачному) в верхнем левом углу холста.
Затем уменьшите непрозрачность этого слоя до 40% и измените его режим смешивания на «Overlay».
Теперь вставьте ваш логотип.
Возьмите часть иконки вашего логотипа, затем копируйте/вставьте её позади вашего фактического логотипа. Перейдите в Image> Adjustments> Desaturate. Затем увеличьте и измените режим наложения слоя на «Overlay».
Шаг 4
Теперь вставьте иконки социальных сетей из ресурсов урока в верхний правый угол холста.
Шаг 5
Теперь напечатайте какой-нибудь текст рядом с иконками, который будет выступать в качестве ссылок на ваш профиль в социальных сетях.
Настройки шрифта:
Шрифт: DejaWeb
Размер шрифта: 14pt
Насыщенность: Жирный
Кернинг: -50
Цвет: 323332
Шаг 6
Создайте новый слой под названием "pattern area".
С помощью инструмента Marquee selection tool создайте выделение под заголовком,а с помощью paintbucket заполните эту область любым нужным вам цветом.
Затем перейдите в Layer> Layer Mask> Reveal All. Используйте большую мягкую черную кисть с низкой непрозрачностью, чтобы скрыть края этой области.
Шаг 7
Теперь примените Pattern Overlay для слоя "pattern area".
Настройки Pattern Overlay:
Blend Mode: Normal
Opacity: 100%
Pattern: (выбрать любой подходящий шаблон с SquidFingers.com)
Затем уменьшите непрозрачность этого слоя до 15%.
Шаг 8
Скачайте кисти фракталов из списка ресурсов для этого урока.
Примените некоторые кисти из набора (с помощью белой кисти) на вашей области с паттернами.
Затем перейдите в Layer> Layer Mask> Reveal All и создайте маску, чтобы сделать края отпечатков ваших кистей менее резкими:
Шаг 9
Вставьте свою фотографию женщины, сидящей у компьютера (или другую соответствующую фотографию по вашему выбору).
Расположите маску от края этой фотографии так, чтобы у вас получилось гладкое смешивание с узорным фоном.
Шаг 10
Теперь расположим какой-нибудь текст справа от фото девушки.
Параметры шрифта для заголовков:
Шрифт: DejaWeb
Насыщенность: Жирный
Размер шрифта: 42pt
Кернинг: -50
Цвет: 383838
Параметры шрифта для текста под заголовком:
Шрифт: DejaWeb
Насыщенность: Обычная
Размер шрифта: 14pt
Кернинг: -50
Цвет: 585858
Параметры шрифта для ссылок "Смотрите наши работы" и "Читать далее"
Шрифт: DejaWeb
Насыщенность: Жирный
Размер шрифта: 18 пунктов
Кернинг: -50
Цвет: FFFFFF
Шаг 11
Теперь создайте прямоугольники с закругленными углами позади ссылок 'Смотрите наши работы' и "Читать дальше...'. Убедитесь, что каждый прямоугольник имеет радиус закругления углов 10px.
Затем примените Gradient Overlay для каждого прямоугольника.
Параметры Gradient Overlay для первого прямоугольника с закругленными углами:
Градиент начиная с: e95a74 к d63451
Параметры Gradient Overlay для второго прямоугольника с закругленными углами:
Градиент начиная с: 3dafde к 1b91c1
Шаг 12
Используя направляющие и Rounded Rectangle Tool, создайте прямоугольную область с радиусом 10px посередине.
Примените drop shadow, inner shadow and gradient overlay.
Drop Shadow, настройки:
Blend Mode: Normal
Color: ffffff
Opacity: 100%
Угол: 90 градусов
Distance: 1px
Spread: 0%
Size: 0px
Inner Shadow, настройки:
Blend Mode: Multiply
Color: 000000
Opacity: 10%
Угол: 90 градусов
Distance: 3px
Choke: 0%
Size: 0px
Gradient Overlay, настройки:
Blend Mode: Normal
Opacity: 100%
Gradient: От 01658e до 014764
Угол: 90 градусов
Шаг 13
Теперь дублируйте ваш слой с меню. Отрежьте левую часть меню в 650px, оставив только часть от меню. Сохраните все параметры наложения же, но сделайте ваш Gradient Overlay темнее. Это позволит создать область поиска для вашего меню.
Шаг 14
Теперь в вашей темной области поиска создайте два меньших прямоугольника со скругленными углами.
Осталось заполнить левый прямоугольник цветом d0e9f3 и правый градиентом от 1c90c0 к 06729f.
Шаг 15
Теперь добавьте какой-то текст для меню. Используйте снова шрифт DejaWeb.
Шаг 16
Теперь создадим разделители между вашими пунктами меню. Каждый разделитель должнен состоять из однопиксельной линии, заполненной градиентом от белого к прозрачному, и еще одной однопиксельной линии рядом справа от первой, с градиентом от черного к прозрачному. Чтобы сделать эффект более тонким, снизьте непрозрачность слоя с разделителем до 20%.
Шаг 17
Теперь с помощью ваших направляющих создайте область посередине под своей средний областью.
Создайте белый прямоугольник (10px радиус). Затем примените стиль stroke, чтобы еще больше выделить эту область:
Настройки stroke:
Size: 1px
Opacity: 100%
Color: cec6ae
Шаг 18
Теперь добавьте какой-нибудь контент в эту область.
Настройки для вашего шрифта в точности как те, что мы использовали ранее в других местах дизайн-макета. Для создания кнопки "Читать дальше..." просто продублируйте кнопку "Смотрите наши работы", созданную нами ранее. Использовавшиеся иконки доступны в списке ресурсов для этого урока:
Шаг 19
Теперь добавьте немного содержимого для футера, продублируйте ссылки вашего меню и уведомление об авторских правах:
И мы закончили!
Я надеюсь, что вам понравился этот урок, хотелось бы услышать ваше мнение о используемых методах и результатах.
Источник
Перевод: PS-Studio.Info
Набор иконок социальных сетей
Набор кистей фракталов
Фотография девушки
Иконка календаря
Иконка человека
Финальный результат
Вот предварительный просмотр изображения, которое мы будем создавать:
Шаг 1
Создайте новый документ (1000X1000px). Заполните холст цветом ebe4ce.
Шаг 2
Затем создайте новый слой под названием "top highlight".
Заполните верхнюю (в 100px) часть холста линейным градиентом от белого к прозрачному. Чтобы сделать эффект более тонким, уменьшите непрозрачность этого слоя до 80%.
Шаг 3
Теперь пришло время для создания классного заголовка!
Создайте новый слой под названием "highlight behind logo". Перетащите радиальный градиент (от белого к прозрачному) в верхнем левом углу холста.
Затем уменьшите непрозрачность этого слоя до 40% и измените его режим смешивания на «Overlay».
Теперь вставьте ваш логотип.
Возьмите часть иконки вашего логотипа, затем копируйте/вставьте её позади вашего фактического логотипа. Перейдите в Image> Adjustments> Desaturate. Затем увеличьте и измените режим наложения слоя на «Overlay».
Шаг 4
Теперь вставьте иконки социальных сетей из ресурсов урока в верхний правый угол холста.
Шаг 5
Теперь напечатайте какой-нибудь текст рядом с иконками, который будет выступать в качестве ссылок на ваш профиль в социальных сетях.
Настройки шрифта:
Шрифт: DejaWeb
Размер шрифта: 14pt
Насыщенность: Жирный
Кернинг: -50
Цвет: 323332
Шаг 6
Создайте новый слой под названием "pattern area".
С помощью инструмента Marquee selection tool создайте выделение под заголовком,а с помощью paintbucket заполните эту область любым нужным вам цветом.
Затем перейдите в Layer> Layer Mask> Reveal All. Используйте большую мягкую черную кисть с низкой непрозрачностью, чтобы скрыть края этой области.
Шаг 7
Теперь примените Pattern Overlay для слоя "pattern area".
Настройки Pattern Overlay:
Blend Mode: Normal
Opacity: 100%
Pattern: (выбрать любой подходящий шаблон с SquidFingers.com)
Затем уменьшите непрозрачность этого слоя до 15%.
Шаг 8
Скачайте кисти фракталов из списка ресурсов для этого урока.
Примените некоторые кисти из набора (с помощью белой кисти) на вашей области с паттернами.
Затем перейдите в Layer> Layer Mask> Reveal All и создайте маску, чтобы сделать края отпечатков ваших кистей менее резкими:
Шаг 9
Вставьте свою фотографию женщины, сидящей у компьютера (или другую соответствующую фотографию по вашему выбору).
Расположите маску от края этой фотографии так, чтобы у вас получилось гладкое смешивание с узорным фоном.
Шаг 10
Теперь расположим какой-нибудь текст справа от фото девушки.
Параметры шрифта для заголовков:
Шрифт: DejaWeb
Насыщенность: Жирный
Размер шрифта: 42pt
Кернинг: -50
Цвет: 383838
Параметры шрифта для текста под заголовком:
Шрифт: DejaWeb
Насыщенность: Обычная
Размер шрифта: 14pt
Кернинг: -50
Цвет: 585858
Параметры шрифта для ссылок "Смотрите наши работы" и "Читать далее"
Шрифт: DejaWeb
Насыщенность: Жирный
Размер шрифта: 18 пунктов
Кернинг: -50
Цвет: FFFFFF
Шаг 11
Теперь создайте прямоугольники с закругленными углами позади ссылок 'Смотрите наши работы' и "Читать дальше...'. Убедитесь, что каждый прямоугольник имеет радиус закругления углов 10px.
Затем примените Gradient Overlay для каждого прямоугольника.
Параметры Gradient Overlay для первого прямоугольника с закругленными углами:
Градиент начиная с: e95a74 к d63451
Параметры Gradient Overlay для второго прямоугольника с закругленными углами:
Градиент начиная с: 3dafde к 1b91c1
Шаг 12
Используя направляющие и Rounded Rectangle Tool, создайте прямоугольную область с радиусом 10px посередине.
Примените drop shadow, inner shadow and gradient overlay.
Drop Shadow, настройки:
Blend Mode: Normal
Color: ffffff
Opacity: 100%
Угол: 90 градусов
Distance: 1px
Spread: 0%
Size: 0px
Inner Shadow, настройки:
Blend Mode: Multiply
Color: 000000
Opacity: 10%
Угол: 90 градусов
Distance: 3px
Choke: 0%
Size: 0px
Gradient Overlay, настройки:
Blend Mode: Normal
Opacity: 100%
Gradient: От 01658e до 014764
Угол: 90 градусов
Шаг 13
Теперь дублируйте ваш слой с меню. Отрежьте левую часть меню в 650px, оставив только часть от меню. Сохраните все параметры наложения же, но сделайте ваш Gradient Overlay темнее. Это позволит создать область поиска для вашего меню.
Шаг 14
Теперь в вашей темной области поиска создайте два меньших прямоугольника со скругленными углами.
Осталось заполнить левый прямоугольник цветом d0e9f3 и правый градиентом от 1c90c0 к 06729f.
Шаг 15
Теперь добавьте какой-то текст для меню. Используйте снова шрифт DejaWeb.
Шаг 16
Теперь создадим разделители между вашими пунктами меню. Каждый разделитель должнен состоять из однопиксельной линии, заполненной градиентом от белого к прозрачному, и еще одной однопиксельной линии рядом справа от первой, с градиентом от черного к прозрачному. Чтобы сделать эффект более тонким, снизьте непрозрачность слоя с разделителем до 20%.
Шаг 17
Теперь с помощью ваших направляющих создайте область посередине под своей средний областью.
Создайте белый прямоугольник (10px радиус). Затем примените стиль stroke, чтобы еще больше выделить эту область:
Настройки stroke:
Size: 1px
Opacity: 100%
Color: cec6ae
Шаг 18
Теперь добавьте какой-нибудь контент в эту область.
Настройки для вашего шрифта в точности как те, что мы использовали ранее в других местах дизайн-макета. Для создания кнопки "Читать дальше..." просто продублируйте кнопку "Смотрите наши работы", созданную нами ранее. Использовавшиеся иконки доступны в списке ресурсов для этого урока:
Шаг 19
Теперь добавьте немного содержимого для футера, продублируйте ссылки вашего меню и уведомление об авторских правах:
И мы закончили!
Я надеюсь, что вам понравился этот урок, хотелось бы услышать ваше мнение о используемых методах и результатах.
Источник
Перевод: PS-Studio.Info
Всего комментариев: 0
Оставь комментарий первым!
