Как сделать портфолио в фотошопе

Стильный дизайн портфолио

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

Здесь вы можете просмотреть макет в полноэкранном режиме.

Ресурсы для урока:

• Круглые иконки
• Серебристые иконки

Наверно, всем известно, что прежде чем создать сайт, сначала необходимо разработать макет или его ещё называют шаблон.

Откройте Photoshop и создайте новый документ с размерами ширина 1200 пикселей и высота 1750 пикселей.

На панели инструментов выберите Заливка (G) и заполните фон цветом #f7f7f7.

Создайте новый слой Layer > New > Layer (Слои – Новый — Слой), выберите инструмент Прямоугольная область и образуйте прямоугольное выделение в центре холста, для заливки используйте цвет #d4d4d4. Смотрите скриншот ниже.

К полученному прямоугольнику добавим фильтр Шум, пройдя во вкладку Filter > Noise (Фильтр — Шум).

Приступим к созданию меню. На новом слое инструментом Прямоугольник (U) в верхней части создайте прямоугольную форму по ширине всего макета.

Примените к ней стиль Наложение градиента, зайдя в меню Layer > Layer Style (Слои — Стили слоя).

В редакторе градиентов, установите такие цвета:

Выберите инструмент Линия (U) и чуть ниже меню создайте линию голубого цвета #75d0eb.

Перейдите к инструменту Текст (T) и напишите заголовки для меню.

Давайте обозначим активную категорию. Инструментом Прямоугольник со скруглёнными углами (U) создайте небольшую форму цветом #00acd9 для рубрики Home, поместите её ниже текстового слоя.

Теперь давайте приступим к созданию логотипа. Активируйте инструмент Перо (P) и в верхнем левом углу создайте форму, как показано ниже.

Кликните по созданному контуру правой кнопкой мыши и выберите команду Make Selection (Образовать выделенную область). Залейте выделение голубым оттенком #00acd9.

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

К форме логотипа так же примените стиль Тень.

Инструментом Текст (T) добавьте текст логотипа.

Переходим к созданию слайдера. Для начала на новом слое мягкой круглой кистью нарисуйте тень. Затем инструментом Прямоугольник (U) создайте прямоугольную форму белого цвета поверх нарисованной тени.

Далее поверх предыдущего прямоугольника создайте ещё один, немного поменьше размером. Примените к нему такой же стиль Наложение градиента, как и для логотипа, только на этот раз тип градиента установите Линейный.

На вновь созданном слое круглой мягкой кистью добавьте белое #ffffff пятно в правой части слайдера.

Далее зайдите в меню Filter > Blur > Gaussian Blur (Фильтр – Размытие – Размытие по Гауссу) и размойте пятно, установив значение для радиуса 55,2 пикселя.

На новом слое той же кистью цветом #074859 поверх белого размытого пятна создайте небольшую тень. Затем поверх тени добавьте любое изображение. Примените к изображению стиль Обводка.

Инструментом Текст (T) добавьте с левой стороны слайдера заголовок и описание к изображению.

Чуть ниже текста добавим кнопку «View More». При помощи инструмента Прямоугольник со скруглёнными углами (U) образуйте форму для кнопки белого цвета. Добавьте к ней стиль Наложение градиента, как и для меню, используя чёрный цвет. Далее напишите текст на кнопке и добавьте к кнопке тень при помощи мягкой круглой кисти.

Под слайдером мы разместим блоки с контентом. Для этого создайте форму прямоугольника при помощи инструмента Прямоугольник (U). Заполните её белой заливкой #ffffff и примените к ней стиль Внутреннее свечение, цвет для свечения установите #636363, остальные настройки смотрите ниже.

На эту форму добавьте заголовок и текст. При помощи Пера (P) создайте маленькую стрелочку в конце текста и заполните её синим цветом. Затем из специального набора добавьте иконку кружок с галочкой в правом верхнем углу блока.

Повторите предыдущие действия и создайте ещё три таких блока с контентом. Для заголовков используйте различные цвета и к каждому текстовому блоку добавьте иконку, описание и маленькую стрелочку.

В нижней части макета под блоками с контентом мы добавим ещё один слайдер. Создайте прямоугольник, подобно текстовым блокам, только длиннее. Примените к нему следующие стили:

Добавьте на него различные изображения. Примените к ним стиль Обводка.

Перейдите на инструмент Произвольная фигура (U), выберите форму стрелки и добавьте её в правой части слайдера. Так же стрелку создать можно при помощи Пера (P). Примените к ней стиль Наложение градиента, подобно логотипу.

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

Приступим к созданию футера. Инструментом Прямоугольник (U) создайте прямоугольную форму, используя цвет #0e0e0e. Этот слой поместите под слайдером.

Добавьте к нему немного шума, перейдя в меню Filter > Noise (Фильтр — Шум).

В самом низу макета создайте ещё один прямоугольник и залейте его цветом #333333. По верхнему краю этого прямоугольника добавьте линию цветом #686868.

При помощи инструмента Текст (T) добавьте навигацию, ссылки, авторское право, так же здесь можно добавить изображения. Просто вставьте изображения и примените к ним стиль Обводку.

Нам осталось добавить форму для поиска. Создавать её мы будем при помощи Прямоугольника со скруглёнными углами (U), цвет используйте белый #000000. Затем примените к форме тень, используя стиль слоя.

Слева в форме напишите слово search, а справа добавьте значок лупы.

Макет сайта – конечный результат.

Надеюсь вам понравился данный урок, и вы узнали что-то новенькое и интересное!

Impressive portfolio design with Portfolio and Photoshop

Having a resume isn’t enough. Create a beautiful online portfolio to show off your best work and get noticed – all in one place. And Adobe Portfolio is included with your Creative Cloud membership!

Finalize your images and designs

Use Photoshop tools like Curves to add creative final touches to your photos and designs and prepare them for how they’ll be presented in your new portfolio.

Launch Portfolio

Select either a Gallery of work or a Splash page. You can upload content directly, or seamlessly import from Behance and Lightroom.

Design your new portfolio

Choose your page layout and upload an image. Add additional information, like social profile links and a description of you and your work.

Add a new page for your work

Select Add Page, choose a layout, and start building your page. Customize the Background and Colors & Font. You can choose from among thousands of best-in-class Adobe Fonts.

Then link your new page to your Splash page button.

Preview and publish

Select Preview to see how your portfolio will look on multiple device platforms. Then select Publish Site.

The final result

All your work is now in one place, and your beautiful new portfolio is ready to share!

Создадим портфолио для-Instagram-в Photoshop.

В этом уроке я расскажу вам о создании простого портфолио для Instagram. Мы будем использовать яркие изображения, чистую цветовую палитру и гладкие шрифты. Начнём с веб-версии, а затем я покажу вам, как её адаптировать для мобильных устройств.

Ресурсы урока

Для прохождения урока вам потребуются следующие (бесплатные) ресурсы:

• Mountains фото на Unsplash
• Kaushan Script шрифт на Font Squirrel
• Lato шрифт на Font Squirrel
• Social media icons на Iconfinder
• Фотоснимки на Unsplash
• Фото на Refe

Создаём документ

Шаг 1

Создаём новый документ в Photoshop (File > New…), используя указанные настройки. Делайте холст любых размеров — в конце концов, в Сети нет ограничений.

Обратите внимание: разрешение 72 pixels/inch

Шаг 2

Установим направляющие, чтобы макет имел достаточно места и выглядел сбалансированным. Я не пользуюсь сеткой, но несколько направляющих помогут определить рамки страницы сайта. С помощью View > New Guide… установите направляющие. Я обычно выбираю ширину в 1000px и добавляю направляющие по углам для свободного пространства.

Внимание: размеры для урока: по вертикали 100px, 600px и 1100px.

Совет: для быстроты пользуйтесь плагином Photoshop GuideGuide .

Шаг 3

Придерживаясь этикета Photoshop , мы будем поддерживать порядок для навигации и редактирования. Создадим три группы слоёв: Заголовок, Фото и Контакты. Для этого перейдите по Layer > New > Group… и дайте слоям название. Для ускорения кликните по иконке.

Организация области Header

Заголовок (как бы то ни было) играет очень важную роль в привлечении внимания пользователей сайта. Для этого портфолио я буду использовать красивые снимки гор с намёком на приключение и вызов.

Шаг 1

Сначала создадим фоновое изображение. Внутри группы Header нарисуем цветной прямоугольник с помощью Rectangle Tool (U). У меня это прямоугольник размером 1200x600px, расположенный вверху документа.

Теперь загрузите Mountains photo , перетащите в документ Photoshop и поместите над слоем прямоугольника. Переименуйте слой с изображением, в моем случае я использовал IMG. Зажмите клавишу Alt и наведите курсор на слой с фотографией, пока не увидите маленькую стрелку, указывающую вниз, затем отпустите. Вы только что создали Clipping Mask.

Для изменения размера фото зажмите CMD+T.

Совет: удерживайте клавишу Shift для сохранения пропорций.

Шаг 2

Внесём некоторые изменения в нашем изображении, чтобы оно выглядело более ярким и запоминающимся. Создайте новый слой по имени Shadow с Clipping Mask, как мы сделали раньше. Затем выберите инструмент Gradient Tool (G) и установите цвета градиента от чёрного # 000000 к прозрачному, удерживая нажатой клавишу Shift от нижней части изображения до середины. Поставьте прозрачность слоя Opacity на 60%.

Обычно я использую эту технику, чтобы затемнить яркие изображения и помещать белый текст сверху.

Шаг 3

Для привлекательности добавим ещё несколько цветов в наш заголовок. Добавим слой по имени Gradient и применим Gradient Tool (G). Установите цвета градиента от фиолетового # 37056b к розовому # ff01fc (или любого другого цвета) и перетащите его из левого верхнего угла изображения в правый нижний угол. Уменьшите Opacity до 20%.

Шаг 4

Пора разместить в портфолио логотип. Выбрав Horizontal Type Tool (T), введите в название портфолио своё имя или никнейм. В этом уроке я пользуюсь стильным шрифтом Kaushan Script 21px размера. Поместите логотип в верхний левый угол вашего сайта рядом с вертикальной направляющей. Отодвиньте его на 50px, чтобы всё смотрелось чисто и профессионально.

Шаг 5

Добавим несколько иконок социальных сетей, чтобы людям было проще следовать за вами. Перетащите значки Facebook, Twitter и Instagram из Iconfinder в документ Photoshop, переименуйте слои, чтобы они были быстро узнаваемы и поместите их вверху справа возле направляющей. После этого щёлкните правой кнопкой мыши на одном из слоёв иконок, выберите Blending Options. и примените опцию Color Overlay с белым цветом #ffffff. То же самое проделайте с остальными значками.

Оставляйте достаточно места по сторонам и выравниваете значки по горизонтали с вашим логотипом.

Шаг 6

Закончим область Header. У нас есть красивое изображение и много места. Сделаем простое пояснение, чтобы посетители могли понять, что это за сайт.

С помощью инструмента Horizontal Type Tool (T) введите текст размером 36px шрифтом Lato (Black). Я написал «HELLO! I»M JONATHAN». На новой строке и с меньшим шрифтом введите ещё несколько слов о себе или своей работе, которые смогут заинтересовать посетителей. Я взял шрифт размером 16px Lato (Regular)

Убедитесь, что интервал достаточен для того, чтобы ваш текст мог дышать. Разместите текст посередине области Header.

Область Photos

В этой области мы помещаем фотографии из Instagram с примерами работ, квалифицирующих уровень художника или дизайнера.

Шаг 1

Для начала изменим фон этой области. Сверните группу заголовков, щёлкнув маленькую стрелку рядом с названием группы и откройте группу Photos. После этого выберите инструмент Rectangle Tool (U) и нарисуйте серый прямоугольник. У меня это прямоугольник цвета #eeeeee и размером 1200x880px.

Шаг 2

Теперь добавим строку описания работы. Можно просто «Latest Work» или «LATEST PHOTOS». Для читабельности текста я взял цвет #9b9b9b для шрифта Lato (Bold) 12px. Обратите внимание, что расстояние между буквами довольно значительное (270) для стилизации названия области и не подходит для обычного текста. Дайте подписи достаточно места и переместите вниз от изображения на 80 пикселей.

Шаг 3

Отлично! Наконец, мы готовы добавить интересные фотографии в портфолио. Создаём группу Photo. Решаем, сколько изображений вы хотите отобразить в строке. Я остановился на четырёх, поэтому мне нужно сделать некоторые математические вычисления.

Ширина страницы составляет 1000 пикселей, я разделил её на 4, получив 250 пикселей для каждого изображения, но ещё нужно оставить некоторое расстояние, скажем, 20px между ними. Итак, ширина снимка будет (1000px-60px)/4=235px.

Выбрав Rectangle Tool (U) с зажатой клавишей Shift рисуем 235x235px квадрат. После этого выберите изображение из Instagram или возьмите его с сайта unsplash.com или getrefe.tumblr.com , перетащите его в документ Photoshop и поместите над прямоугольником. Зажав клавишу Alt, сделайте Clipping Mask и по команде CMD+T измените размер снимка.

Шаг 4

Теперь нам нужно добавить «likes» (как доказательство привлекательности) и краткое описание. Создайте новый слой Shadow, поместите его над изображением и обязательно создайте для него Clipping Mask. После этого с помощью Gradient Tool (G) примените градиент, идущий от чёрного до прозрачного. Поставьте Opacity на 60%.

Возьмите Horizontal Type Tool (T) и введите количество лайков. Я использовал шрифт Montserrat размером 13px и оставил 15px пространство слева и внизу, чтобы дать достаточно свободного места.

Теперь выберите инструмент Rectangle Tool (U) и нарисуйте белый прямоугольник под фотографией. С помощью Horizontal Type Tool (T) дайте краткое описание фотографии для Instagram, включая хэштеги, а также дату публикации в новой строке. У меня в уроке это шрифт Montserrat размером 12px серый #808080 .

Примечание: если вы использовали пробелы 15px для количества лайков, выполните то же самое с описанием.

Шаг 5

Закончив с одной, добавим ещё несколько фотографий в наше портфолио. Сверните группу Photo и дублируйте ее, нажав CMD + J или щёлкнув правой кнопкой мыши по имени группы и выбрав Duplicate Group . после этого дублируйте столько фотографий, сколько нужно. В моем примере взято несколько разных изображений с unsplash.com и getrefe.tumblr.com с интервалом 20px.

Рисуем область Contact

Здесь мы поместим простое сообщение и «призыв к действию», а также информацию об авторских правах.

Шаг 1

Сверните группу Photos и откройте группу Contact. В окне Horizontal Type Tool (T) подберите шрифт для подзаголовка, в моем случае это текст «GET IN TOUCH». Оставив пространство наверху, добавьте краткое описание, чтобы вызвать реакцию пользователя. Я использовал # 565d64 для шрифта Lato (чёрный) и 36px для заголовка и 16px Lato (Regular) для описания.

Шаг 2

Теперь нам нужна кнопка вызова к действию, которую пользователи смогут нажать по желанию. Для этого урока возьмём простейший вариант. Я нарисовал Rectangle Tool (U) простую форму и разместил текст сверху. Оставьте вокруг кнопки побольше чистого пространства.

Шаг 3

Наконец, разместим строку авторских прав в нижней части нашего портфолио. Инструментом Line Tool (U) нарисуйте тонкую горизонтальную линию 1px цветом # e0e0e0 по всему документу, оставив около 90px пространства в самом низу. Сразу под ней разместите строку авторских прав. У меня это шрифт размером 12px Lato (Bold) с разбивкой 270 и цветом #9b9b9b .

Вы закончили . С веб-версией

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

Создаём версию Mobile

Шаг 1

Создадим новый документ размером 320x2100px. Размечаем три вертикальных направляющих в 20px, 150px и 300px с отступом по сторонам. Затем выбираем все группы в документе веб-версии, переносим их на новую вкладку документа до тех пор, пока не появится новый документ с группами.

Шаг 2

Теперь откройте группу Header, найдите наш логотип и с помощью Move Tool (V) переместите его вправо, пока он не появится в нашем новом узком макете. Оставьте его рядом с первой направляющей. Иконки соцсетей переместите влево.

Шаг 3

Адаптируем основное сообщение. Выберите инструмент Horizontal Type Tool (T) и уменьшите шрифт основного сообщения, чтобы он поместился между направляющими. Отрегулируйте высоту линии и продолжим.

Шаг 4

Откройте группу Photos и сместите заголовок «LATEST PHOTOS». Расположите группу Photo между вертикальными направляющими. Откройте группу, щёлкните по прямоугольнику с фоном описания, нажмите CMD + T и измените размер на 280px по ширине. То же самое для квадрата с фото. Наконец, поставьте фотографии в одной колонке, изменив их размер.

Шаг 5

Раздел Photos стал длиннее, чем в веб-версии, поэтому необходимы корректировки фона. Найдите фоновый слой Photos и нажмите CMD+T, чтобы изменить его размер, но оставить некоторое пространство в нижней части секции.

Шаг 6

Наконец, изменим и подравняем секцию с контактами. Откройте группу Contact и в окне Horizontal Type Tool (T) приведите размер сообщения в соответствие с направляющими. Обязательно уменьшите пространство сверху и снизу. Кроме того, уменьшите высоту строки сообщения, чтобы она выглядела чистой и профессиональной.

Самое последнее — разбить строку авторских прав на две так, чтобы она поместилась между направляющими.

Законченный mobile вид.

Поздравляю!

Это всё. Мы закончили работу с веб-и мобильными версиями нашего портфолио для Instagram. Надеюсь, вы узнали что-то новое и приобретенные навыки помогут вам в будущем.

Шаг 1

Создайте новый документ и установите для него следующие размеры: Ширина (Width) 980, Высота(Height) 1606 пикселей. Далее, полностью залейте холст цветом #F1F1F1.

Шаг 2

Возьмите Инструмент Прямоугольная область

(Rectangular marquee tool (М)) и выделите прямоугольник высотой в 50 пикселей от самого верхнего края холста, это будет ваша шапка сайта (хедер). Залейте его цветом #212121.

Шаг 3

С левой стороны мы создадим наш текстовый логотип. Для этого воспользуйтесь шрифтом Pacifico, размер 39 пунктов, цвет #ffffff.

Шаг 4

Далее, кликаем дважды по слою с логотипом и в открывшемся диалоговом окне выбираем пункт Тень(Drop shadow).

Примечание переводчика:

Характеристики для тени (Drop shadow) должны быть следующие:

• Режим наложения(Blend mode): Умножение (Multiply)
• Цвет(Color): #000000
• Непрозрачность(Opacity): 75%
• Угол(Angle): 138
• Поставьте галочку в чекбоксеГлобальное освещение(Use Global Light)
• Расстояние(Distance): 5
• Размах(Spread): 0
• Размер(Size): 5

Шаг 5

С правой стороны мы нарисуем наше навигационное меню. Для него используйте шрифт Arial Bold, размер 14 пунктов, цвет #ffffff.

Шаг 6

Далее, кликаем дважды по слою с навигацией и в открывшемся диалоговом окне выбираем пункт Тень (Drop shadow).

Примечание переводчика:

Характеристики для тени (Drop shadow) установите такие же, как и для логотипа:

• Режим наложения(Blend mode): Умножение (Multiply)
• Цвет(Color): #000000
• Непрозрачность(Opacity): 75%
• Угол(Angle): 138
• Поставьте галочку в чекбоксеГлобальное освещение(Use Global Light)
• Расстояние(Distance): 5
• Размах(Spread): 0
• Размер(Size): 5

Шаг 7

Теперь, создайте новый слой и назовите его, например, “slide-bg” (фон слайда). Залейте его цветом #F46554.

Шаг 8

Возьмите инструмент Область (горизонтальная строка)

(Single Row Marquee Tool (M)), нарисуйте линию на границе между шапкой сайта (хедером) и слоем “slide-bg” (фон слайда) и залейте созданное выделение цветом #fa9588.

Шаг 9

Теперь, добавим текст на нашу домашнюю страничку. Для основного текста используем шрифт League Gothic, размер 83 пункта, цвет #FFFFFF, для текста пониже возьмите шрифт Pacifico, размер 42 пункта, цвет #FFFFFF.

Шаг 10

Применим Стиль слоя (layer style) и ставим галочку рядом с пунктом Тень (Drop shadow).

Примечание переводчика:

Характеристики для тени (Drop shadow) должны быть следующие:

• Режим наложения(Blend mode):Умножение(Multiply)
• Цвет(Color): #cf4a3a
• Непрозрачность(Opacity): 75%
• Угол(Angle): 138
• Поставьте галочку в чекбоксеГлобальное освещение(Use Global Light)
• Расстояние(Distance): 1
• Размах(Spread): 0
• Размер(Size): 1

Шаг 11

На данном этапе мы должны разместить наши изображения (возьмем те, что были использованы в предыдущих уроках). Разместите их так, чтобы одно из них находилось над другими (см. скриншот ниже).

Шаг 12

Для изображений из портфолио применим Стиль слоя (layer style) и выберем уже привычную для нас Тень (Drop shadow).

Примечание переводчика:

Настройки для тени (Drop shadow) выставьте такие:

• Режим наложения(Blend mode):Умножение(Multiply)
• Цвет(Color): #000000
• Непрозрачность(Opacity): 75%
• Угол(Angle): 138
• Поставьте галочку в чекбоксеГлобальное освещение(Use Global Light)
• Расстояние(Distance): 11
• Размах(Spread): 0
• Размер(Size): 29

Шаг 13

Возьмите инструмент Прямоугольная область

(Rectangular marquee tool (М)) и создайте выделение размером примерно так, как это показано на скриншоте ниже.

Шаг 14

Создайте новый слой, назовите его, например, website-black и залейте его цветом #212121.

Шаг 15

Для слоя website-black примените стиль слоя (layer style) и выберите сначала Тень (drop shadow), а затем Обводку (Stroke).

Примечание переводчика:

Характеристики для тени (Drop shadow) должны быть следующие:

• Режим наложения(Blend mode):Умножение(Multiply)
• Цвет(Color): #8E8D8D
• Непрозрачность(Opacity): 75%
• Угол(Angle): -90
• Снимите галочку в чекбоксеГлобальное освещение(Use Global Light)
• Расстояние(Distance): 5
• Размах(Spread): 0
• Размер(Size): 5

Примечание переводчика:

Характеристики для Обводки (Stroke) должны быть следующие:

• Размер(Size): 3
• Расположение(Position):Внутри(Inside)
• Режим наложения(Blending Mode):Нормальный(Normal)
• Непрозрачность(Opacity): 100%
• Тип заливки(Fill type):Цвет(Color)
• Цвет(Color): #323232

Шаг 16

Далее, мы используем иконки, которые мы загрузили ранее. Для заголовков рядом с иконками используйте шрифт PT Sans, размер 20 пунктов, цвет #FFFFFF.

Шаг 17

Для слоя с текстом применим Стиль слоя (layer style).

Примечание переводчика:

Настройки для тени (Drop shadow) должны быть следующие:

• Режим наложения(Blend mode):Умножение(Multiply)
• Цвет(Color): #000000
• Непрозрачность(Opacity): 75%
• Угол(Angle): 138
• Поставьте галочку в чекбоксеГлобальное освещение(Use Global Light)
• Расстояние(Distance): 5
• Размах(Spread): 0
• Размер(Size): 5

Шаг 18

Также, нам нужно добавить какой-нибудь текст (примечание переводчика: можете воспользоваться для этого генератором текста lorem ipsum). В результате у вас должно получиться нечто похожее на скриншот внизу.

Шаг 19

После слоя website-black создайте новый слой и на нем нарисуйте прямоугольник с помощью все того же инструмента Прямоугольная область

(Rectangular marquee tool (М)) и залейте его белым цветом (#FFFFFF).

Шаг 20

Далее через Стиль слоя (layer style) добавьте обводку (stroke).

Примечание переводчика:

Параметры для Обводки (Stroke) должны быть следующие:

• Размер(Size): 1
• Расположение(Position):Внутри(Inside)
• Режим наложения(Blending Mode):Нормальный(Normal)
• Непрозрачность(Opacity): 100%
• Тип заливки(Fill type):Цвет(Color)
• Цвет(Color): #dddddd

Шаг 21

Теперь, активируйте инструмент Эллипс

(Ellipse Tool (U)) и с зажатой клавишей SHIFT нарисуйте круг, назовите этот слой avatar-holder.

Выберите изображение, которое будете использовать (например, свою фотографию) и разместите ее над слоем avatar-holder.

Шаг 22

Правой кнопкой мыши кликните по изображению и в появившемся меню выберите Создать обтравочную маску (create clipping mask) или же просто нажмите комбинацию клавиш Ctrl+Alt+G.

Шаг 23

У вас должно получиться что-то вот такое.

Шаг 24

Далее, добавьте пару строчек текста. Для него используйте шрифт PT Sans, размер 14 пунктов, цвет черный (#000000).

Шаг 25

Теперь, нам нужно создать форму для размещения постов. Возьмите инструмент Прямоугольник со скругленными углами

(Rounded Rectangle Tool (U)) и установите радиус скругления 5 пикселей. Залейте фигуру белым цветом (#FFFFFF).

Шаг 26

Возьмите изображение вот из этого урока (http://sanjaykhemlani.com/create-coming-soon-page-with-countdown-timer/) и поместите выше слоя с прямоугольником. Далее, кликните правой клавишей мыши по нему и выберите пункт Создать обтравочную маску

(create clipping mask).

Шаг 27

Теперь, с помощью Стиля слоя (layer style) примените Обводку (stroke) к нашему слою с прямоугольником.

Примечание переводчика:

Параметры для Обводки (Stroke) установите следующие:

• Размер(Size): 1
• Расположение(Position):Внутри(Inside)
• Режим наложения(Blending Mode):Нормальный(Normal)
• Непрозрачность(Opacity): 100%
• Тип заливки(Fill type):Цвет(Color)
• Цвет(Color): #ededed

Шаг 28

Объедините в группу слой с прямоугольником и слой с изображением (Ctrl+G) и продублируйте ее два раза. Затем просто поменяйте изображения и расположите группы так, как показано на скриншоте ниже. Для заголовков используйте шрифт PT Sans Bold, размер 14 пунктов, цвет черный (#000000), для категории возьмите шрифт PT Sans Italic, цвет #868686.

Шаг 29

Далее, мы нарисуем подвал сайта (футер) с помощью все того же инструмента Прямоугольная область

(rectangular marquee tool(М)) и залейте его цветом #212121. Теперь, нарисуйте нижнюю часть футера и залейте ее цветом #000000. Убедитесь, что вы сделали это на новом слое. По сути, подвал он должен быть разделен на три колонки.

Шаг 30

В первой колонке мы добавим немного текста. Для заголовка возьмите шрифт PT Sans Bold, размер 14 пунктов, цвет #FFFFFF. Для самого текста шрифт PT Sans Regular, размер 12 пунктов.

Шаг 31

Для следующей колонки мы создадим изображение пользователя. Возьмите инструмент Эллипс

(Ellipse Tool (U)), нарисуйте круг и залейте его белым цветом (#FFFFFF).

Шаг 32

Далее, добавьте фото и нажмите правой клавишей мыши по нему. В появившемся окне выберите пункт Создать обтравочную маску (create clipping mask).

Шаг 33

Теперь, с помощью Стиля слоя (layer style) применим Обводку (stroke) к нашему слою с изображением пользователя.

Примечание переводчика:

Параметры для Обводки (Stroke) установите следующие:

• Размер(Size): 3
• Расположение(Position):Внутри(Inside)
• Режим наложения(Blending Mode):Нормальный(Normal)
• Непрозрачность(Opacity): 100%
• Тип заливки(Fill type):Цвет(Color)
• Цвет(Color): #ffffff

Шаг 34

Объедините в группу слой с кругом и слой с изображением (Ctrl+G) и продублируйте ее три раза. Затем поменяйте изображения. И у вас должна получиться вот такая вторая колонка:

Шаг 35

В третьей колонке у нас будет секция с новостной рассылкой. Возьмите инструмент Прямоугольник со скругленными углами

(Rounded Rectangle Tool (U)) и установите радиус скругления 10 пикселей. Залейте фигуру черным цветом (#000000).

Шаг 36

Создайте на новом слое аналогичный прямоугольник со скругленными углами и отрежьте от него левую часть примерно на 2\3. Оставшуюся правую часть залейте цветом #F46554. Это будет наша кнопка отправки данных.

Шаг 37

С помощью Стиля слоя (layer style) добавим нашей кнопке Внутреннее свечение (Inner Glow), Наложение градиента (Gradient Overlay) и Обводку (Stroke).

Примечание переводчика:

Внутреннее свечение (Inner Glow)

• Режим наложения(Blending mode):Экран(screen)
• Непрозрачность(opacity): 75%
• Цвет(Color): #f56856
• Метод (Technique):Мягкий(Softer)
• По краям(Edge)
• Размер(Size): 4

Наложение градиента (Gradient Overlay)

• Для градиента используйте цвета от #d1220b k #ab1502

Обводка (Stroke)

• Размер(Size): 1
• Расположение(Position):Внутри(Inside)
• Режим наложения(Blending Mode):Нормальный(Normal)
• Непрозрачность(Opacity): 100%
• Тип заливки(Fill type):Цвет(Color)
• Цвет(Color): #8f1202

Шаг 38

Вот такая получилась кнопка. Также нужно добавить текст в поле для ввода. Шрифт возьмите PT Sans, размер 13 пунктов, цвет #FFFFFF.

Шаг 39

Для самой кнопки тоже надо добавить текст (например, Submit), шрифт возьмите такой же, как и в предыдущем шаге.

Шаг 40

Для текста кнопки добавим Тень (Drop shadow)

Примечание переводчика:

Настройки для тени (Drop shadow) должны быть следующие:

• Режим наложения(Blend mode):Умножение(Multiply)
• Цвет(Color): #000000
• Непрозрачность(Opacity): 75%
• Угол(Angle): 90
• Уберите галочку в чекбоксеГлобальное освещение(Use Global Light)
• Расстояние(Distance): 1
• Размах(Spread): 0
• Размер(Size): 1

Шаг 41

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