Приблизительное время выполнения: 20 минут
Шаг 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
У вас должно получиться что-то вроде этого:
И вот мы закончили наш урок.
Источник: Modern Web layout Tutorial | 
