Уроки Веб и приложения Владимир Фёдоров 2 ноября 2017

Создаем аккуратный макет портфолио в Фотошоп

Сложность урока: Средний

Содержание

Если вы находитесь в поисках работы в Интернете, вам необходимо иметь, как минимум, две вещи. Первое, это ваша квалификация, так называемые "скиллы", вторая вещь, которая вам обязательно потребуется, это портфолио с вашими уже выполненными работами, которые вы могли бы показать вашим потенциальным клиентам, чтобы склонить их к положительному решению заказать работу именно у вас. Хотя, вы можете получить определенный небольшой объем работы и без портфолио, но многие из клиентов все же предпочитают заказывать работу у тех, у кого портфолио все-таки есть. С ростом спроса в веб-индустрии, то тут, то там появляются много новых веб-дизайнеров, и соответственно, конкуренция среди них становится очень жесткой.

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

Ниже вы можете увидеть конечный результат нашего урока, нам нужно, чтобы макет был аккуратный и фокусировал внимание на наших выполненных в прошлом работах:

Перед тем, как мы начнем, нам необходимо подготовиться:

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

Что касается используемых изображений, то просто кликните правой кнопкой мыши по нужному вам изображению и сохраните его. Желательно сохранять все изображения в одну папку, чтобы вы точно знали, где его потом взять.

Итак, начинаем создавать наш макет портфолио.

Шаг 1

Создайте новый документ размером 980*1302 пикселя.

Активируйте инструмент Прямоугольная область выделения (rectangular marquee tool(М)), выделите область высотой в 100 пикселей от верхнего края холста и залейте эту область цветом #db5450.

Шаг 2

Для нашего логотипа мы используем шрифт Kaushan Script (см. доп.материалы) размером 34 пункта (pt), для текста пониже используйте шрифт Orator Std размером 15 пунктов и цвет #8e201c.

В правой части нашей "шапки" сайта (хедера) мы разместим главное навигационное меню. Для него предлагаю использовать шрифт Lucida Console размером 14 пунктов и цвет #ffffff. Все слова в меню напечатайте буквами в верхнем регистре (клавиша Caps).

Шаг 3

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

Теперь применим Стиль слоя (Layer Style) к этому изображению. Для этого нужно сделать двойной щелчок левой клавиши мыши по данному слою. В открывшемся диалоговом окне выбираем пункт Обводка (Stroke).

Параметры для обводки задайте следующие:

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

Теперь, создайте дубликат этого слоя, нажав сочетание клавиш (CTRL + J). Уменьшите размер этой копии на 1 пиксель и сдвиньте ее вниз, дважды нажав на клавишу-стрелку вниз на вашей клавиатуре. Сделайте еще одну копию, таким образом, у вас должно оказаться еще два слоя под исходным слоем.

Вот, что у вас в результате должно получиться:

Шаг 4

В данном шаге мы должны будем добавить текст описания рядом с изображением приложения для айфона. Для этих целей в заголовке мы используем шрифт Arial Bold 17 пунктов и цвет #3b3a3a , и шрифт Arial Regular размером 13 пунктов для самого текста.

Шаг 5

Далее, под описанием нам нужно создать кнопку. Для этого воспользуемся инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) и установим радиус скругления размером 5 пикселей.

Теперь применим Стиль слоя (Layer Style) к кнопке. Для этого нужно сделать двойной щелчок левой клавиши мыши по данному слою. В открывшемся диалоговом окне выбираем пункт Наложение градиента (Gradient Overlay). Цвета для градиента установите от #b3ca60 к #8fa541.

Далее поставьте галочку в чекбоксе Обводка (Stroke).

Параметры для обводки задайте следующие:

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

Вот что у нас в результате получилось:

Шаг 6

Продублируйте слой кнопкой и отключите стили слоя, нажав на иконку глазка. Залейте копию белым цветом (#FFFFFF) и перетащите копию выше исходного, после чего уменьшите уровень заливки (fill) до 11%.

Добавьте какой-нибудь текст, например, View Website, для этого используйте шрифт Arial Bold размером 16 пунктов.

Для текста примените Стили слоя (Layer Style):

Тень (Drop Shadow) со следующими параметрами:

Режим наложения (Blend mode): Нормальный (Normal)
Цвет (Color): #ffffff
Непрозрачность (Opacity): 75%
Угол (Angle): 90
Поставьте галочку в чекбоксе Использовать глобальное освещение (Use Global light)
Расстояние (Distance): 1
Размах (Spread): 0
Размер (Size): 1

Внутренняя тень (Inner shadow) со следующими параметрами:

Режим наложения (Blend mode): Умножение (Multiply)
Цвет (Color): #73872e
Непрозрачность (Opacity): 75%
Угол (Angle): 90
Снимите галочку в чекбоксе Использовать глобальное освещение (Use Global light)
Расстояние (Distance): 1
Стягивание (choke): 0
Размер (Size): 1

Вот, что у нас получилось:

Шаг 7

После слоя со слайдами мы должны создать блок из трех колонок. Выберите инструмент Эллипс (Ellipse Tool (U)) и нарисуйте круг. Чтобы все было ровно, воспользуйтесь направляющими.

Разместите в этом круге иконку из набора jigosoar (доп.материалы). Для заголовка используйте шрифт Arial Bold размером 16 пунктов и цвет #3b3a3a, для текста шрифт Arial Regular размером 13. Размер иконок 24*24 пикселя.

Примечание переводчика: можете объединить в группу слои, формирующие колонку, с помощью сочетания клавиш Ctrl+G, после этого продублировать группу 2 раза, заменить иконки и заголовки соответствующим образом, и расположить данные блоки, как это показано на скриншоте ниже.

Для данной секции были использованы следующие иконки 24_gallery, 24_css, 24_structure.

Шаг 8

Далее, формируем поле для связи. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) и установите радиус скругления 5 пикселей. Нарисуйте прямоугольник, как показано на скриншоте ниже.

Опять же воспользуйтесь иконками из набора jigosoar, выберите 48*48 пикселей иконку 48_email (конвертик), темную. Для текста используйте шрифт Arial Bold размером 16 пунктов и цвет #3b3a3a. Чтобы создать кнопку, просто скопируйте ее из предыдущих шагов (CTRL + J) и поменяйте на ней текст на Contact me.

Шаг 9

Теперь создадим еще один трехколоночный блок. Для этого опять воспользуемся инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) и установим радиус скругления 15 пикселей. Рисуем прямоугольник, как на скриншоте ниже, и два раза копируем его (CTRL + J). Должно получиться вот так:

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

В результате должен получиться примерно вот такой результат. Да, и не забудьте добавить заголовок к каждому блоку с картинкой. Для этого используйте шрифт Arial Bold размером 16 пунктов и цвет #db5450.

Шаг 10

Теперь нарисуем подвал нашего сайта (футер). Для этого возьмите инструмент Прямоугольная область выделения (rectangular marquee tool(М)) и нарисуйте прямоугольник, а затем залейте его цветом #1a1a1a.

Содержание футера мы сделаем аналогичным шапке сайта (хедеру). Для этого просто продублируйте слои с логотипом в хедере и навигационным меню в хедере (CTRL + J), перетащите их вниз в ваш "подвал" и поменяйте цвет на #353535. Для подсвеченного элемента меню установите белый цвет (#ffffff).