Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

наш канал

стать автором

17 ноября 2017

Друзья! На сайте опубликованы интервью с победителем и призёрами конкурса «Портрет героя по роману «Три мушкетёра».

Кликните по ссылке, чтобы перейти на страницу с интервью

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

02 ноября 2017 1 868 просмотров | Сложность:

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

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

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

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

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

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

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

Шаг 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).

Все, наше портфолио готово!

Автор: Sanjay

Понравилось? Поделитесь с друзьями!
Источник: sanjaykhemlani.com Переводчик: Фёдоров Владимир
Прикрепить работу или скриншот Максимально-допустимый вес для загрузки изображения (jpg): 5 MB
Размещение ссылок внутри комментария допустимо только на этот список сайтов.
Nineli2212 ноября 201711

Спасибо за урок!

Mr.Evil11 ноября 201713

Спасибо за урок!

Лариса08 ноября 201719

Владимир, спасибо за перевод!

Manush04 ноября 201713

несложно было, спасибо

спасибо

Авторизация


Регистрация

Наверх