Урок Photoshop по созданию яркого шаблона для портфолио

Шаг 1

Сначала создайте новый документ размером 770×480 и с темно-серым (242424) фоном. Выберите rounded rectangle tool (a, i) и установите радиус на 15 пикселей (a, ii). Поставьте цвет переднего плана черный и создайте сверху закругленный прямоугольник (b)

Шаг 2

Установите цвет переднего плана на ярко-синий bright blue (4BC5E2) и создайте второй прямоугольник с закругленными углами, слегка поменьше.

Шаг 3

Установите цвет переднего плана на темно-синий (46A7B6) и выберите ellipse tool (a, i). Создайте большой эллипс (b)

Шаг 4

Создайте ещё два эллипса и в панели слоев соедините 3 фигуры. Объедините все три фигуры в один слой (layer > merge linked)

Шаг 5

Выделите область, используя ярко-синий закругленный прямоугольник (a), и используйте выделение, чтобы обрезать слой с кругом. Удалите слой с кругом с частью снаружи закругленного прямоугольника (b)

Шаг 6

Это вторая часть урока, в которой мы создадим прикольный макет с ярко-синей шапкой. Далее выберите ellipse tool, чтобы нарисовать светло-синий (68DAF7) эллипс в новой папке со слоями, назовите её “пятнышки”. Создайте нескольок эллипсов (b) различного цвета и размера внутри этой папки.

Шаг 7

Когда вы создадите все пятнышки, кликните на папке со слоями в панели слоев и объедините слои в один слой (Layer > Merge Layer set).

Шаг 8

Создайте выделение используя синий прямоугольник с закругленными углами (select > load selection) и используйте выделенную область для того,чтобы врезать её в слой с пятнышками. Далее продублируйте слой с пятнышками.

Шаг 9

Примените gaussian blur к оригинальному слою с пятнышками так, как показано на рисунке.

Шаг 10

Создайте белый прямоугоольник с закругленными углами (a). Выберите gradient tool (b, i), выберите далее линейный градиент (b, ii) и затем отредактируйте градиент (b, iii)

Шаг 11

Выберите прозрачный цвет переднего плана в редакторе градиентов. Создайте выделение используя белый прямоугольник, удалите прямоугольник и создайте новый слой. Потянте за верхнюю часть слоя для создания градиента (b).

Шаг 12

Это третья часть урока, в которой мы создадим прикольный шаблон с синей шапкой. Теперь мы должны создать меню. Используя rounded rectangle tool, создайте прямоугольник внизу и справа от шапки. Создайте прямоугольник поменьше и серого цвета (272F32) на черном прямоугольнике. Кликните на фигуру правой кнопкой в палитре слоев и выберите “Rasterize Layer“. Теперь в этом слое создайте выделение.

Шаг 13

Выберите gradient tool и в редакторе градиентов установите его на foreground to background. Примените градиент сверху донизу выделенной области (b).

Шаг 14

Продублируйте слой и поместите его вниз (a). Создайте ещё одну копию слоя и поместите его над нижней и, используя rectangular marquee tool, сотрите нижнюю округлую часть (b).

Шаг 15

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

Шаг 16

Для текста в шапке я использовал шрифт tabun. Настройки, которые я использовал, можно увидеть здесь (a). Вы можете использовать любой другой жирный шрифт, например, Arial Black, если хотите. Добавив текст, создайте выделение с использованием созданного текста (b), а ниже создайте новый слой.

Шаг 17

У вас должно получиться что-то вроде этого:

И вот мы закончили наш урок.