Лаконичный дизайн сайта для портфолио

В этом уроке мы научимся рисовать лаконичный дизайн для сайта-портфолио.

Используемые ресурсы:

Прыжки Фото Dancer

Премиум набор кистей: Облака

Как всегда, это окончательное изображение, которое мы будем создавать:

Шаг 1

Создайте новый документ (1000X1000px).
Теперь создайте несколько направляющих, чтобы было проще расположить наш дизайн. Переместите вертикальные направляющие на 50px и 950px и горизонтальную направляющую на 500px.

Шаг 2

Создайте новый слой под названием " header ". Теперь выберите самую верхнюю часть 500px Вашего проекта, и залейте его линейным градиентом с цветами от #ebeaeb до #f5f5f5.

Теперь создайте новый слой под названием «dark footer». Выберите нижнюю часть холста размером 500px и залейте его цветом 1c1c1c.

Шаг 3

Теперь создайте новый слой под названием «clouds pixelated».
Ваш слой активный, Ctrl + клик на иконке слоя в палитре слоев. Это позволит выделить область «header». С вашего выделения перейдите на Filter> Render> Clouds (цвет переднего плана черный, а фон белый).

Теперь уменьшите непрозрачность вашего облачного слоя до 20%.

Теперь идите в Filter> pixelate>mosaic >. Теперь применим размер ячейки: 25. У вас должен получиться хороший эффект неровной поверхности.

Шаг 4

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

Шаг 5

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

Теперь уменьшите непрозрачность вашего слоя «clouds» до 20%:

Шаг 6

Вырежьте и вставьте фотографию танцовщицы в прыжке.

Теперь дублируйте танцовщицу, переставте дублированный слой под оригинальным.
Измените размера слоя копии, чтобы сделать его немного меньше, чем оригинал, а затем примените filter mosaic (15 square strength), чтобы достичь легкого пиксельного эффекта:

Наконец, уменьшить непрозрачность этого слоя до 35%. Это создаст тонкий эффект фона.

Шаг 7

Мы хотим, чтобы наши танцовщицы были действительно популярны, поэтому создайте слой под обеими слоями танцовщиц и назовите «highlight». Перетащите от белого к прозрачному радиальный градиент со стороны вашего танцора. Это должно помочь подтолкнуть танцора вперед.

Шаг 8

Теперь напишите какой-либо текст в верхнем левом углу холста, с помощью направляющих. Это будет вместо вашего логотипа.
Шрифт: Санкт-Atmos
Размер: 72pt
Цвет: 000000
Kerning: 0
Styling: Normal

Теперь примените пару параметров стиля к тексту, чтобы сделать его более интересным.
Inner Shadow:
Blend Mode: Multiply
Color: 000000
Opacity: 50%
Angle: 120
Distance: 1px
Choke: 0%
Size: 1px

Gradient Overlay:
Blend Mode: Normal
Opacity: 100%
Gradient: 000000 to 444444.

Вот что получилось:

Шаг 9

Теперь применить какой-то текст под вашим логотипом, это может быть текст меню, заголовок текста, и текст приветствия. Настройки текста для каждой области ниже:
Меню настроек текста:
Font Face: Georgia
Size: 18pt
Kerning: 50
Color: 000000
Настройки текста Заголовка:
Font Face: Georgia
Size: 36pt
Kerning: 50
Color: 515151
Настройки Площади текста « Добро пожаловать»:
Font Face: Georgia
Size: 18pt
Kerning: 0
Color: 505050

Шаг 10

Теперь нарисуйте кнопку с текстом «want to work with me?».
Выбираем форму прямоугольника с закругленными углами (радиус 35px), заполненной градиентом от 24a9da к 00729d.

Теперь Ctrl + клик на кнопке, в палитре вашего слоя, и с вашим выделением на месте создайте новый слой и назовите его «pixels button».
Повторите пердыдущую технику, вначале применяем фильтр облака, а затем эффект мозаики. Наконец, измените режим смешивания этого слоя на «Overlay", чтобы создать оригинальный эффект освещения для вашей кнопки:

Шаг 11

Теперь создайте новый слой под названием " arrow ". Используйте свой инструмент лассо для создания темно-серой стрелка, которая поднимается от нижнего колонтитула:

Шаг 12

Теперь примените какой-либо текст в стиле водяного знака в верхней части нижних колонтитулов.
Footer Настройки текста:
Font Face: Georgia
Size: 60pt
Kerning: 50
Color: 313131

Шаг 13

Теперь вставте некоторые примеры из ваших лучших работ:

Шаг 14

Наконец, напишите какой-то текст под каждым скриншотом, а также сведения об авторских правах.
Также используйте line tool для создания 1px линии над уведомлением об авторском праве.

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