Простое портфолио в Photoshop / Creativo.one

Финальный результат:

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

Материалы для урока

Для того чтобы следовать пунктам урока вам потребуются такие материалы (все они бесплатны):

1. Фото гор с Unsplash
2. Шрифт Kaushan Script с Font Squirrel
3. Шрифт Lato с Font Squirrel
4. Иконки социальных сетей с Iconfinder
5. Фотографии с Unsplash
6. Фотографии с Refe

Архив

Подготавливаем документ

Шаг 1

Начнем с создания нового документа Photoshop через меню

Файл > Создать… (File > New…) используя настройки, указанные ниже. Вы можете задать любые размеры, ведь в интернете нет фиксированной ширины.

Убедитесь, что разрешение установлено на 72 пикc/дюйм.

Шаг 2

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

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

Примечание: Направляющие для этого урока — вертикальная 100px, 600px и 1100px.

Совет: Вы также можете использовать Photoshop плагин GuideGuide, чтобы еще больше ускорить процесс.

Шаг 3

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

Заголовок, Фотографии и Контакты. Чтобы создать группу перейдите в Слой > Новый > Группа… (Layer > New > Group…) и дайте каждой группе названия, указанные выше. Для быстрого перехода к определенной группе, просто нажмите на иконку.

Работаем над заголовком

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

Шаг 1

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

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

Ctrl + T и измените размер фото под свои нужды.

Совет: удерживайте нажатой кнопку Shift, тогда трансформация будет пропорциональной.

Шаг 2

Давайте добавим несколько коррекций, чтобы сделать фотографию более живой и запоминающейся. Создайте новый слой, назовите его Тень, создайте обтравочную маску (Clipping Mask) также как в прошлом шаге с фотографией гор. После этого выберите инструмент Градиент (Gradient Tool), установите цвет градиента от черного

#000000 к прозрачному. Удерживая нажатой кнопку Shift, перетяните градиент от низа изображения к его середине. Теперь уменьшите Непрозрачность (Opacity) градиента до 60%.

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

Шаг 3

Теперь можно добавить немного больше цветов нашему заголовку, чтобы сделать его действительно классным. Создайте новый слой, назовите его Градиент, затем выберите инструмент Градиент

(Gradient Tool). После этого установите цвет от пурпурного #37056b к розовому #ff01fc (можно использовать любые цвета, которые вам нравятся) и перетяните градиент с верхней левой части изображения в нижнюю правую. В итоге, уменьшите непрозрачность (Opacity) до 20%.

Шаг 4

Пора разместить логотип нашего портфолио. Выберите инструмент Горизонтальный текст (Horizontal Type Tool) и напишите название своего сайта, это может быть ваше имя или прозвище. Для этого урока я использовал очень стильный шрифт Kaushan Script размером 21px

. Поместите свой логотип в верхней левой части документа рядом с первой вертикальной направляющей. Опустите его на 50px, чтобы придать еще большего профессионализма и чистоты.

Шаг 5

Добавим несколько социальных иконок, которые позволят посетителям сайта читать ваши аккаунты в социальных сетях. Перетяните иконки Facebook, Twitter и Instagram с Iconfinder в ваш документ, переименуйте слои, чтобы сделать их легкоузнаваемыми, затем разместите в верхнем правом углу рядом с последней вертикальной линией. После этого кликните правой кнопкой мыши по одному из слоев с иконками, выберите

Параметры наложения (Blending Options…), затем примените Наложение цвета (Color Overlay), выберите белый #ffffff. То же самое сделайте с другими иконками.

Убедитесь, что между иконками достаточно места, а сами они выровнены по горизонтали с логотипом.

Шаг 6

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

Выбрав инструмент

Горизонтальный текст (Horizontal Type Tool) со шрифтом Lato (Black) размером 36px, напишите пару слов. В этом случае я использовал текст «HELLO! I’M JONATHAN». Сразу после него, на новой строке напишите еще что-нибудь о себе или своей работе меньшим шрифтом. Для этого урока я использовал шрифт Lato (Regular) размером в 16px. Пример текста: I love to travel all around the world and design beautiful things.

Убедитесь, что высота линии достаточна, чтобы текст мог «дышать». В итоге, поместите свой текст в середине зоны заголовка.

Работаем над зоной фотографий

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

Шаг 1

Давайте поменяем фон этой зоны. Сверните папку Заголовок, кликнув на маленькую стрелку слева от имени группы, затем откройте папку Фотографии. Теперь выбрав инструмент Прямоугольник ( Rectangle Tool), нарисуйте светло-серый прямоугольник. В моем случае я использовал цвет

#eeeeee, а размер прямоугольника был 1200x880px.

Шаг 2

Теперь пора добавить текст, описывающий работу. Это может быть что-нибудь вроде «Последние работы», или «LATEST PHOTOS» как в нашем примере. Текст должен быть читаемым, поэтому я использовал цвет #9b9b9b со шрифтом Lato (Bold) размером 12px. Обратите внимание, что расстояние между буквами достаточно значительное (270). Это используется для стилизации заголовка нашей зоны, и не будет работать для обычного текста. После того, как вы задали нужное расстояние, переместите текст на

80px вниз от картинки.

Шаг 3

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

Ширина нашего сайта 1000px, поделим ее на 4 — получается 250px на каждое фото, но нам также необходимо оставить немного места по сторонам, пускай это будет 20px. Поэтому финальная ширина изображения будет (1000px-60px)/4=235px.

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

Шаг 4

Теперь можно добавить количество лайков (это сделает портфолио более социализированным) и короткое описание. Создайте новый слой, назовите его Тень, разместите над изображением, затем создайте обтравочную маску (Clipping Mask). После этого, используя инструмент Градиент  (Gradient Tool) сделайте градиент от черного к прозрачному как уже было сделано в уроке. После всего этого уменьшите Непрозрачность (Opacity) до 60%.

Выберите инструмент Горизонтальный текст (Horizontal Type Tool) со шрифтом Montserrat размером 15px. Оставьте по 15px свободного места слева и внизу, чтобы текст мог «дышать», не перекрывая при этом изображение.

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

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

Шаг 5

Мы закончили с одним блоком фотографии, теперь пора добавить больше фото в портфолио. Сверните папку Фото и дублируйте ее нажатием Ctrl + J, или кликнув правой кнопкой мыши на папке и выбрав «Дубликат группы» (Duplicate Group). После этого продублируйте нужное количество фотографий и организуйте их в сетку. В моем случае расстояние между разными блоками фотографий 20px. Фотографии были взяты с unsplash.com и getrefe.tumblr.com.

Работаем над зоной контактов

Здесь мы поместим простое сообщение и кнопку связи вместе с информацией о копирайте.

Шаг 1

Сверните папку Фото, кликнув по маленькой стрелочке возле группы, затем откройте папку Контакты. После этого выберите инструмент Горизонтальный текст (Horizontal Type Tool) и, используя крупный шрифт, введите название секции, например «GET IN TOUCH». Дайте ему достаточно места вверху, после чего добавьте короткое описание, призывающее посетителя к действию. Я использовал цвет #565d64 вместе со шрифтом Lato (Black) размером в 36px для заголовка, а шрифт Lato (Regular) 16px я взял для описания.

Шаг 2

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

Шаг 3

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

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

Работаем с мобильной версией

Шаг 1

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

Шаг 2

Теперь откройте папку Заголовок, найдите логотип, затем, используя инструмент Перемещение (Move Tool), перетяните его вправо до самого левого края. Оставьте логотип рядом с первой вертикальной направляющей. Затем, найдите социальные иконки и переместите их вправо.

Шаг 3

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

Шаг 4

Откройте группу Фото, переместите заголовок «LATEST PHOTOS» вверх, так как нам не нужно столько места в мобильном виде. Снова перейдите к группе Фото, поместите ее между двумя вертикальными направляющими. Затем откройте группу, кликните на прямоугольную фигуру-фон описания, нажмите Ctrl + D и уменьшите ее размер до 280px. То же самое сделайте с фигурами фотографий. После проделанной работы организуйте фотографии в одну колонку, не забыв выровнять их между направляющими.

Шаг 5

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

Шаг 6

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

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

Все!

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

Автор: Tomas Laurinavicius

Простое портфолио в Photoshop / Creativo.one

Финальный результат:

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

Материалы для урока

Для того чтобы следовать пунктам урока вам потребуются такие материалы (все они бесплатны):

1. Фото гор с Unsplash
2. Шрифт Kaushan Script с Font Squirrel
3. Шрифт Lato с Font Squirrel
4. Иконки социальных сетей с Iconfinder
5. Фотографии с Unsplash
6. Фотографии с Refe

Архив

Подготавливаем документ

Шаг 1

Начнем с создания нового документа Photoshop через меню Файл > Создать. .. (File > New…) используя настройки, указанные ниже. Вы можете задать любые размеры, ведь в интернете нет фиксированной ширины.

Убедитесь, что разрешение установлено на 72 пикc/дюйм.

Шаг 2

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

Примечание: Направляющие для этого урока — вертикальная 100px, 600px и 1100px.

Совет: Вы также можете использовать Photoshop плагин GuideGuide, чтобы еще больше ускорить процесс.

Шаг 3

Согласно с Этикетом Photoshop все должно быть организовано и легкодоступно для просмотра и редактирования. Давайте создадим три группы слоев с именами Заголовок, Фотографии и Контакты. Чтобы создать группу перейдите в Слой > Новый > Группа… (Layer > New > Group…) и дайте каждой группе названия, указанные выше. Для быстрого перехода к определенной группе, просто нажмите на иконку.

Работаем над заголовком

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

Шаг 1

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

Теперь скачайте фотографию гор, поместите ее в Photoshop документ и разместите над слоем с прямоугольником. Переименуйте слой во что-то понятное, например IMG. После этого, удерживая нажатой кнопку Alt, подведите указатель к низу слоя IMG, пока не появится указатель со стрелкой вниз, после чего кликните левой кнопкой мыши. Вы только что создали обтравочную маску. Теперь нажмите Ctrl + T и измените размер фото под свои нужды.

Совет: удерживайте нажатой кнопку Shift, тогда трансформация будет пропорциональной.

Шаг 2

Давайте добавим несколько коррекций, чтобы сделать фотографию более живой и запоминающейся. Создайте новый слой, назовите его Тень, создайте обтравочную маску (Clipping Mask) также как в прошлом шаге с фотографией гор. После этого выберите инструмент Градиент (Gradient Tool), установите цвет градиента от черного #000000 к прозрачному. Удерживая нажатой кнопку Shift, перетяните градиент от низа изображения к его середине. Теперь уменьшите Непрозрачность (Opacity) градиента до 60%.

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

Шаг 3

Теперь можно добавить немного больше цветов нашему заголовку, чтобы сделать его действительно классным. Создайте новый слой, назовите его Градиент, затем выберите инструмент Градиент (Gradient Tool). После этого установите цвет от пурпурного #37056b к розовому #ff01fc (можно использовать любые цвета, которые вам нравятся) и перетяните градиент с верхней левой части изображения в нижнюю правую. В итоге, уменьшите непрозрачность (Opacity) до 20%.

Шаг 4

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

Шаг 5

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

Убедитесь, что между иконками достаточно места, а сами они выровнены по горизонтали с логотипом.

Шаг 6

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

Выбрав инструмент Горизонтальный текст (Horizontal Type Tool) со шрифтом Lato (Black) размером 36px, напишите пару слов. В этом случае я использовал текст «HELLO! I’M JONATHAN». Сразу после него, на новой строке напишите еще что-нибудь о себе или своей работе меньшим шрифтом. Для этого урока я использовал шрифт Lato (Regular) размером в 16px. Пример текста: I love to travel all around the world and design beautiful things.

Убедитесь, что высота линии достаточна, чтобы текст мог «дышать». В итоге, поместите свой текст в середине зоны заголовка.

Работаем над зоной фотографий

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

Шаг 1

Давайте поменяем фон этой зоны. Сверните папку Заголовок, кликнув на маленькую стрелку слева от имени группы, затем откройте папку Фотографии. Теперь выбрав инструмент Прямоугольник ( Rectangle Tool), нарисуйте светло-серый прямоугольник. В моем случае я использовал цвет #eeeeee, а размер прямоугольника был 1200x880px.

Шаг 2

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

Шаг 3

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

Ширина нашего сайта 1000px, поделим ее на 4 — получается 250px на каждое фото, но нам также необходимо оставить немного места по сторонам, пускай это будет 20px. Поэтому финальная ширина изображения будет (1000px-60px)/4=235px.

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

Шаг 4

Теперь можно добавить количество лайков (это сделает портфолио более социализированным) и короткое описание. Создайте новый слой, назовите его Тень, разместите над изображением, затем создайте обтравочную маску (Clipping Mask). После этого, используя инструмент Градиент  (Gradient Tool) сделайте градиент от черного к прозрачному как уже было сделано в уроке. После всего этого уменьшите Непрозрачность (Opacity) до 60%.

Выберите инструмент Горизонтальный текст (Horizontal Type Tool) со шрифтом Montserrat размером 15px. Оставьте по 15px свободного места слева и внизу, чтобы текст мог «дышать», не перекрывая при этом изображение.

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

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

Шаг 5

Мы закончили с одним блоком фотографии, теперь пора добавить больше фото в портфолио. Сверните папку Фото и дублируйте ее нажатием Ctrl + J, или кликнув правой кнопкой мыши на папке и выбрав «Дубликат группы» (Duplicate Group). После этого продублируйте нужное количество фотографий и организуйте их в сетку. В моем случае расстояние между разными блоками фотографий 20px. Фотографии были взяты с unsplash.com и getrefe.tumblr.com.

Работаем над зоной контактов

Здесь мы поместим простое сообщение и кнопку связи вместе с информацией о копирайте.

Шаг 1

Сверните папку Фото, кликнув по маленькой стрелочке возле группы, затем откройте папку Контакты. После этого выберите инструмент Горизонтальный текст (Horizontal Type Tool) и, используя крупный шрифт, введите название секции, например «GET IN TOUCH». Дайте ему достаточно места вверху, после чего добавьте короткое описание, призывающее посетителя к действию. Я использовал цвет #565d64 вместе со шрифтом Lato (Black) размером в 36px для заголовка, а шрифт Lato (Regular) 16px я взял для описания.

Шаг 2

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

Шаг 3

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

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

Работаем с мобильной версией

Шаг 1

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

Шаг 2

Теперь откройте папку Заголовок, найдите логотип, затем, используя инструмент Перемещение (Move Tool), перетяните его вправо до самого левого края. Оставьте логотип рядом с первой вертикальной направляющей. Затем, найдите социальные иконки и переместите их вправо.

Шаг 3

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

Шаг 4

Откройте группу Фото, переместите заголовок «LATEST PHOTOS» вверх, так как нам не нужно столько места в мобильном виде. Снова перейдите к группе Фото, поместите ее между двумя вертикальными направляющими. Затем откройте группу, кликните на прямоугольную фигуру-фон описания, нажмите Ctrl + D и уменьшите ее размер до 280px. То же самое сделайте с фигурами фотографий. После проделанной работы организуйте фотографии в одну колонку, не забыв выровнять их между направляющими.

Шаг 5

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

Шаг 6

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

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

Все!

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

Автор: Tomas Laurinavicius

Простое портфолио в Photoshop / Creativo.one

Финальный результат:

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

Материалы для урока

Для того чтобы следовать пунктам урока вам потребуются такие материалы (все они бесплатны):

1. Фото гор с Unsplash
2. Шрифт Kaushan Script с Font Squirrel
3. Шрифт Lato с Font Squirrel
4. Иконки социальных сетей с Iconfinder
5. Фотографии с Unsplash
6. Фотографии с Refe

Архив

Подготавливаем документ

Шаг 1

Начнем с создания нового документа Photoshop через меню Файл > Создать… (File > New…) используя настройки, указанные ниже. Вы можете задать любые размеры, ведь в интернете нет фиксированной ширины.

Убедитесь, что разрешение установлено на 72 пикc/дюйм.

Шаг 2

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

Примечание: Направляющие для этого урока — вертикальная 100px, 600px и 1100px.

Совет: Вы также можете использовать Photoshop плагин GuideGuide, чтобы еще больше ускорить процесс.

Шаг 3

Согласно с Этикетом Photoshop все должно быть организовано и легкодоступно для просмотра и редактирования. Давайте создадим три группы слоев с именами Заголовок, Фотографии и Контакты. Чтобы создать группу перейдите в Слой > Новый > Группа… (Layer > New > Group…) и дайте каждой группе названия, указанные выше. Для быстрого перехода к определенной группе, просто нажмите на иконку.

Работаем над заголовком

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

Шаг 1

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

Теперь скачайте фотографию гор, поместите ее в Photoshop документ и разместите над слоем с прямоугольником. Переименуйте слой во что-то понятное, например IMG. После этого, удерживая нажатой кнопку Alt, подведите указатель к низу слоя IMG, пока не появится указатель со стрелкой вниз, после чего кликните левой кнопкой мыши. Вы только что создали обтравочную маску. Теперь нажмите Ctrl + T и измените размер фото под свои нужды.

Совет: удерживайте нажатой кнопку Shift, тогда трансформация будет пропорциональной.

Шаг 2

Давайте добавим несколько коррекций, чтобы сделать фотографию более живой и запоминающейся. Создайте новый слой, назовите его Тень, создайте обтравочную маску (Clipping Mask) также как в прошлом шаге с фотографией гор. После этого выберите инструмент Градиент (Gradient Tool), установите цвет градиента от черного #000000 к прозрачному. Удерживая нажатой кнопку Shift, перетяните градиент от низа изображения к его середине. Теперь уменьшите Непрозрачность (Opacity) градиента до 60%.

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

Шаг 3

Теперь можно добавить немного больше цветов нашему заголовку, чтобы сделать его действительно классным. Создайте новый слой, назовите его Градиент, затем выберите инструмент Градиент (Gradient Tool). После этого установите цвет от пурпурного #37056b к розовому #ff01fc (можно использовать любые цвета, которые вам нравятся) и перетяните градиент с верхней левой части изображения в нижнюю правую. В итоге, уменьшите непрозрачность (Opacity) до 20%.

Шаг 4

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

Шаг 5

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

Убедитесь, что между иконками достаточно места, а сами они выровнены по горизонтали с логотипом.

Шаг 6

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

Выбрав инструмент Горизонтальный текст (Horizontal Type Tool) со шрифтом Lato (Black) размером 36px, напишите пару слов. В этом случае я использовал текст «HELLO! I’M JONATHAN». Сразу после него, на новой строке напишите еще что-нибудь о себе или своей работе меньшим шрифтом. Для этого урока я использовал шрифт Lato (Regular) размером в 16px. Пример текста: I love to travel all around the world and design beautiful things.

Убедитесь, что высота линии достаточна, чтобы текст мог «дышать». В итоге, поместите свой текст в середине зоны заголовка.

Работаем над зоной фотографий

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

Шаг 1

Давайте поменяем фон этой зоны. Сверните папку Заголовок, кликнув на маленькую стрелку слева от имени группы, затем откройте папку Фотографии. Теперь выбрав инструмент Прямоугольник ( Rectangle Tool), нарисуйте светло-серый прямоугольник. В моем случае я использовал цвет #eeeeee, а размер прямоугольника был 1200x880px.

Шаг 2

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

Шаг 3

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

Ширина нашего сайта 1000px, поделим ее на 4 — получается 250px на каждое фото, но нам также необходимо оставить немного места по сторонам, пускай это будет 20px. Поэтому финальная ширина изображения будет (1000px-60px)/4=235px.

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

Шаг 4

Теперь можно добавить количество лайков (это сделает портфолио более социализированным) и короткое описание. Создайте новый слой, назовите его Тень, разместите над изображением, затем создайте обтравочную маску (Clipping Mask). После этого, используя инструмент Градиент  (Gradient Tool) сделайте градиент от черного к прозрачному как уже было сделано в уроке. После всего этого уменьшите Непрозрачность (Opacity) до 60%.

Выберите инструмент Горизонтальный текст (Horizontal Type Tool) со шрифтом Montserrat размером 15px. Оставьте по 15px свободного места слева и внизу, чтобы текст мог «дышать», не перекрывая при этом изображение.

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

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

Шаг 5

Мы закончили с одним блоком фотографии, теперь пора добавить больше фото в портфолио. Сверните папку Фото и дублируйте ее нажатием Ctrl + J, или кликнув правой кнопкой мыши на папке и выбрав «Дубликат группы» (Duplicate Group). После этого продублируйте нужное количество фотографий и организуйте их в сетку. В моем случае расстояние между разными блоками фотографий 20px. Фотографии были взяты с unsplash.com и getrefe.tumblr.com.

Работаем над зоной контактов

Здесь мы поместим простое сообщение и кнопку связи вместе с информацией о копирайте.

Шаг 1

Сверните папку Фото, кликнув по маленькой стрелочке возле группы, затем откройте папку Контакты. После этого выберите инструмент Горизонтальный текст (Horizontal Type Tool) и, используя крупный шрифт, введите название секции, например «GET IN TOUCH». Дайте ему достаточно места вверху, после чего добавьте короткое описание, призывающее посетителя к действию. Я использовал цвет #565d64 вместе со шрифтом Lato (Black) размером в 36px для заголовка, а шрифт Lato (Regular) 16px я взял для описания.

Шаг 2

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

Шаг 3

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

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

Работаем с мобильной версией

Шаг 1

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

Шаг 2

Теперь откройте папку Заголовок, найдите логотип, затем, используя инструмент Перемещение (Move Tool), перетяните его вправо до самого левого края. Оставьте логотип рядом с первой вертикальной направляющей. Затем, найдите социальные иконки и переместите их вправо.

Шаг 3

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

Шаг 4

Откройте группу Фото, переместите заголовок «LATEST PHOTOS» вверх, так как нам не нужно столько места в мобильном виде. Снова перейдите к группе Фото, поместите ее между двумя вертикальными направляющими. Затем откройте группу, кликните на прямоугольную фигуру-фон описания, нажмите Ctrl + D и уменьшите ее размер до 280px. То же самое сделайте с фигурами фотографий. После проделанной работы организуйте фотографии в одну колонку, не забыв выровнять их между направляющими.

Шаг 5

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

Шаг 6

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

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

Все!

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

Автор: Tomas Laurinavicius

Создаем простой и понятный макет портфолио

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

[IMG=http://www.photoshopstar.com/media/2014/10916/simple-portfolio-preview.jpg]

Программное обеспечение: Photoshop CS3 и выше.

• Бесплатный шрифт Montserrat

Давайте для начала создадим в Photoshop новый документ. Нажмите CMD/CTRL+N и установите для документа ширину 1400 пикселей, высоту 1630 пикселей:

Теперь давайте создадим направляющие, чтобы наш макет был идеально выровнен. Перейдите в Вид> Новая направляющая и задайте следующие вертикальные направляющие: 200 пикселей, 450 пикселей, 700 пикселей, 950 пикселей и 1200 пикселей:

После того, как мы установили направляющие, можно приступать к разработке макета. Создайте новую группу слоев под названием Top Nav. Для этого перейдите в Слой> Новый> Группа или просто нажмите иконку быстрого создания группы в нижней части палитры слоев:

Выберите инструмент «Горизонтальный текст» (T), используйте шрифт Montserrat, размер шрифта — 20 пикселей, цвет — голубой #075dfb и введите заголовок своего портфолио. Поместите надпись сразу за первой вертикальной направляющей, оставив небольшое свободное пространство сверху — в моем случае это 40 пикселей:
После этого продублируйте слой (CMD / CTRL + J) и переместите копию в правую часть документа. Используя тот же инструмент, введите надписи, чтобы они представляли ссылки на разделы портфолио. На рисунке ниже показано, как этот сделал я:

Сверните группу Top Nav, нажав на иконку стрелки рядом с названием группы, и создайте новую группу под названием Featured.

Перейдите в Слой> Новый> Группа или просто нажмите иконку быстрого создания группы в нижней части палитры слоев. После этого выберите инструмент «Прямоугольник» (U) и нарисуйте между первой и последней направляющей прямоугольник размером 1000 на 574 пикселей. С помощью инструмента «Перемещение» (V) переместите эту фигуру на 40 пикселей ниже ссылок навигации, чтобы между элементами было достаточно свободного пространства, и они выглядели аккуратно:

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

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

Отлично! Теперь нам нужно немного затемнить изображение, чтобы текст на нем легко читался.

Создайте новый слой под названием Shadow и добавьте маску, как мы делали чуть раньше. После этого выберите инструмент «Градиент» (G) и задайте переход градиента от черного к прозрачному. Задайте для параметров градиента значения, приведенные на рисунке ниже:

После этого, удерживая нажатой клавишу SHIFT, прочертите мышью линию от нижней части изображения к верхней, и уменьшите непрозрачность слоя до 65%:
Нам нужно создать заголовок для только что созданной области. Выберите инструмент «Горизонтальный текст» (T), снова используйте шрифт Montserrat. Установите размер шрифта 40 пикселей, цвет #FFFFFF и введите текст, который, описывает спектр предлагаемых вами услуг (3-5 слов).

Не забудьте оставить немного свободного пространства вокруг текста, чтобы он выглядел аккуратно. Чтобы следовать общим принципам разработки дизайна, слева и снизу я оставил свободное пространство шириной в 40 пикселей:

Теперь нам нужно создать кнопку призыва к действию, чтобы предложить посетителю подробнее вникнуть в суть предлагаемых услуг. Выберите инструмент «Прямоугольник» (T) и нарисуйте прямоугольник с размерами 212 на 46 пикселей.

Поместите его справа от изображения, оставив с каждой стороны прямоугольника по 40 пикселей свободного пространства (снизу у нас будет отступ 30 пикселей, так как нам нужно выровнять кнопку по горизонтали с заголовком):

Снова выберите инструмент «Горизонтальный текст» (T), установите цвет шрифта черный — #000000, размер — 14 пикселей и введите подпись для кнопки. Поместите текст внутрь белого прямоугольника и отцентрируйте его:

Теперь добавим несколько примеров работ, чтобы посетители могли получить представление о вашем стиле. Сверните группу Featured (нажав на иконку стрелки рядом с названием группы) и создайте новую группу под названием Work.

Для раздела примеров работ я использовал несколько своих фото. Перетащите снимки в Photoshop и преобразуйте их в смарт-объекты, нажав правой кнопкой мыши на изображении и выбрав пункт «Преобразовать в смарт-объект». После этого нажмите CMD/Ctrl + T, чтобы изменить размер изображений.

Задайте для снимков размер 313 на 235 пикселей и разместите их в три колонки по два снимка в каждой. Оставьте отступ 40 пикселей сверху и снизу и 30 пикселей между изображениями и по бокам:

Вот и все, что касается раздела примеров работ. Сверните группу Work и создайте новую группу под названием Footer. Выберите инструмент «Прямоугольник» (U), установите для него цвет заливки, который мы уже использовали (#075dfb) и нарисуйте прямоугольник, охватывающий большую часть нижней секции документа. Это будет фон подвала.

После этого с помощью инструмента «Перемещение» (V) переместите прямоугольник на 40 пикселей ниже примеров работ:

Теперь нам нужно добавить контент для подвала. Выберите инструмент «Горизонтальный текст» (T), установите цвет шрифта — #FFFFFF, размер — 16 пикселей и напишите заглавными буквами БЛОГ, а также введите надписи, которые будут представлять заголовки разделов блога. Задайте для них верхний отступ 70 пикселей, чтобы отделить эту область:
После этого добавьте еще немного информации, которая может понадобиться посетителям. Я включил сюда ссылки для связи в социальных сетях и свой электронный адрес. Убедитесь, что вы оставили достаточно свободного пространства по бокам, чтобы все выглядело аккуратно:
Также мы должны еще раз добавить кнопку с призывом к действию, чтобы снова указать посетителю, что делать дальше. Откройте группу Featured и найдите в ней слои, относящиеся к кнопке. Удерживая CMD/CTRL, отметьте мышью слои прямоугольника и текста, а затем нажмите Cmd/Ctrl + J, чтобы продублировать их. Переместите эти слои в группу Footer и поместите их выше фона.

Скомпонуйте ранее введенную контактную информацию и новую кнопку, внесите соответствующие изменения в текст надписи кнопки, и все готово:

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

Я надеюсь, что вам понравилась эта статья:

Данная публикация является переводом статьи «Create a Clean and Simple Portfolio Design in Photoshop» , подготовленная редакцией проекта.

Создаем простой и понятный макет портфолио

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

[IMG=http://www.photoshopstar.com/media/2014/10916/simple-portfolio-preview.jpg]

Программное обеспечение: Photoshop CS3 и выше.

• Бесплатный шрифт Montserrat

Давайте для начала создадим в Photoshop новый документ. Нажмите CMD/CTRL+N и установите для документа ширину 1400 пикселей, высоту 1630 пикселей:

Теперь давайте создадим направляющие, чтобы наш макет был идеально выровнен. Перейдите в Вид> Новая направляющая и задайте следующие вертикальные направляющие: 200 пикселей, 450 пикселей, 700 пикселей, 950 пикселей и 1200 пикселей:

После того, как мы установили направляющие, можно приступать к разработке макета. Создайте новую группу слоев под названием Top Nav. Для этого перейдите в Слой> Новый> Группа или просто нажмите иконку быстрого создания группы в нижней части палитры слоев:

Выберите инструмент «Горизонтальный текст» (T), используйте шрифт Montserrat, размер шрифта — 20 пикселей, цвет — голубой #075dfb и введите заголовок своего портфолио. Поместите надпись сразу за первой вертикальной направляющей, оставив небольшое свободное пространство сверху — в моем случае это 40 пикселей:
После этого продублируйте слой (CMD / CTRL + J) и переместите копию в правую часть документа. Используя тот же инструмент, введите надписи, чтобы они представляли ссылки на разделы портфолио. На рисунке ниже показано, как этот сделал я:

Сверните группу Top Nav, нажав на иконку стрелки рядом с названием группы, и создайте новую группу под названием Featured.

Перейдите в Слой> Новый> Группа или просто нажмите иконку быстрого создания группы в нижней части палитры слоев. После этого выберите инструмент «Прямоугольник» (U) и нарисуйте между первой и последней направляющей прямоугольник размером 1000 на 574 пикселей. С помощью инструмента «Перемещение» (V) переместите эту фигуру на 40 пикселей ниже ссылок навигации, чтобы между элементами было достаточно свободного пространства, и они выглядели аккуратно:

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

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

Отлично! Теперь нам нужно немного затемнить изображение, чтобы текст на нем легко читался.

Создайте новый слой под названием Shadow и добавьте маску, как мы делали чуть раньше. После этого выберите инструмент «Градиент» (G) и задайте переход градиента от черного к прозрачному. Задайте для параметров градиента значения, приведенные на рисунке ниже:

После этого, удерживая нажатой клавишу SHIFT, прочертите мышью линию от нижней части изображения к верхней, и уменьшите непрозрачность слоя до 65%:
Нам нужно создать заголовок для только что созданной области. Выберите инструмент «Горизонтальный текст» (T), снова используйте шрифт Montserrat. Установите размер шрифта 40 пикселей, цвет #FFFFFF и введите текст, который, описывает спектр предлагаемых вами услуг (3-5 слов).

Не забудьте оставить немного свободного пространства вокруг текста, чтобы он выглядел аккуратно. Чтобы следовать общим принципам разработки дизайна, слева и снизу я оставил свободное пространство шириной в 40 пикселей:

Теперь нам нужно создать кнопку призыва к действию, чтобы предложить посетителю подробнее вникнуть в суть предлагаемых услуг. Выберите инструмент «Прямоугольник» (T) и нарисуйте прямоугольник с размерами 212 на 46 пикселей.

Поместите его справа от изображения, оставив с каждой стороны прямоугольника по 40 пикселей свободного пространства (снизу у нас будет отступ 30 пикселей, так как нам нужно выровнять кнопку по горизонтали с заголовком):

Снова выберите инструмент «Горизонтальный текст» (T), установите цвет шрифта черный — #000000, размер — 14 пикселей и введите подпись для кнопки. Поместите текст внутрь белого прямоугольника и отцентрируйте его:

Теперь добавим несколько примеров работ, чтобы посетители могли получить представление о вашем стиле. Сверните группу Featured (нажав на иконку стрелки рядом с названием группы) и создайте новую группу под названием Work.

Для раздела примеров работ я использовал несколько своих фото. Перетащите снимки в Photoshop и преобразуйте их в смарт-объекты, нажав правой кнопкой мыши на изображении и выбрав пункт «Преобразовать в смарт-объект». После этого нажмите CMD/Ctrl + T, чтобы изменить размер изображений.

Задайте для снимков размер 313 на 235 пикселей и разместите их в три колонки по два снимка в каждой. Оставьте отступ 40 пикселей сверху и снизу и 30 пикселей между изображениями и по бокам:

Вот и все, что касается раздела примеров работ. Сверните группу Work и создайте новую группу под названием Footer. Выберите инструмент «Прямоугольник» (U), установите для него цвет заливки, который мы уже использовали (#075dfb) и нарисуйте прямоугольник, охватывающий большую часть нижней секции документа. Это будет фон подвала.

После этого с помощью инструмента «Перемещение» (V) переместите прямоугольник на 40 пикселей ниже примеров работ:

Теперь нам нужно добавить контент для подвала. Выберите инструмент «Горизонтальный текст» (T), установите цвет шрифта — #FFFFFF, размер — 16 пикселей и напишите заглавными буквами БЛОГ, а также введите надписи, которые будут представлять заголовки разделов блога. Задайте для них верхний отступ 70 пикселей, чтобы отделить эту область:
После этого добавьте еще немного информации, которая может понадобиться посетителям. Я включил сюда ссылки для связи в социальных сетях и свой электронный адрес. Убедитесь, что вы оставили достаточно свободного пространства по бокам, чтобы все выглядело аккуратно:
Также мы должны еще раз добавить кнопку с призывом к действию, чтобы снова указать посетителю, что делать дальше. Откройте группу Featured и найдите в ней слои, относящиеся к кнопке. Удерживая CMD/CTRL, отметьте мышью слои прямоугольника и текста, а затем нажмите Cmd/Ctrl + J, чтобы продублировать их. Переместите эти слои в группу Footer и поместите их выше фона.

Скомпонуйте ранее введенную контактную информацию и новую кнопку, внесите соответствующие изменения в текст надписи кнопки, и все готово:

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

Я надеюсь, что вам понравилась эта статья:

Данная публикация является переводом статьи «Create a Clean and Simple Portfolio Design in Photoshop» , подготовленная редакцией проекта.

Дизайн для портфолио в Фотошоп / Creativo.one

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

Финальное изображение

Детали урока

• Программа: Photoshop CS3 +
• Среднее время работы: 30 минут
• Уровень сложности: Новичок

 

Материалы для урока:

шрифт Montserrant

Снимок с девайсом

Архив

Шаг 1

Давайте начнем с создания нового документа в Photoshop. Нажмите Сmd/Ctrl + N и установите ширину на 1400 пикс., а высоту – на 1630 пикс.

А сейчас давайте создадим несколько вспомогательных линий, чтобы наш дизайн был идеально выровнен. Выберите Просмотр – Вспомогательные элементы (View – New Guide) и установите следующие вертикальные линии: 200px, 450px, 700px, 950px и 1200px.

Теперь, когда у нас есть вспомогательные линии, мы можем начать непосредственно работу с дизайном. Создайте новую группу под названием Top Nav, нажмите Слой – Новый – Группа (Layer – New- Group) или просто кликните по иконке группы в нижней части панели со слоями.

Выберите инструмент Горизонтальный Текст (Horizontal Type Tool) (T), выберите шрифт Montserrat, установите размер на 20px, а цвет — на синий #075dfb, и напечатайте имя вашего портфолио. Разместите его прямо возле первой вертикальной вспомогательной линии, оставив некоторое место сверху, в моем случае это 40px.

После этого скопируйте слой нажатием Cmd/Ctrl + J, и переместите его в правую часть документа. Используя тот же инструмент, измените тескт на ссылки, которые вы хотите разместить в своем портфолио. Мой пример вы видите ниже.

Шаг 3

Сверните группу Top Nav нажатием маленькой стрелочки возле имени группы, и создайте новую группу с именем Featured.

Выберите Слой – Новый – Группа (Layer – New – Group) или просто кликните по иконке группы в нижней части панели со слоями. После этого выберите инструмент Прямоугольник (Rectangle tool) (U) и между первой и последней вспомогательными линиями нарисуйте прямоугольник размером 1000x574px.

Используя инструмент Перемещение (Move tool) (V), переместите нашу фигуру на 40px вниз от навигационной строки, чтобы между ними было достаточно места и выглядело все это сбалансировано.

А сейчас, поверх прямоугольника нам нужно поместить настоящую работу. Я использовал один из моих предыдущих снимков на Dribbble: Снимок с девайсом. Выберите изображение, которое вам по душе, и перетащите его в Photoshop. Убедитесь, что изображение достаточно большое, чтобы закрыть прямоугольник без масштабирования.

После того, как вы перетащили изображение в Photoshop, расположите слой с ним поверх слоя с прямоугольником, и удерживая Alt, наведите мышь на миниатюру слоя, и вы увидите стрелочку, нажатием которой вы создадите Обтравочную Маску таким образом, что все объекты, находящиеся внутри обтравочной маски будут расположены внутри части с прямоугольником.

Отлично! Теперь нам нужно создать тень на изображении, чтобы текст, который мы расположим сверху был читабельным.

Создайте новый слой Shadow нажатием Shift + Cmd/Ctrl + N, и создайте для него обтравочную маску, как мы делали это ранее. После этого, выберите инструмент Градиент (Gradient Tool) (G), и выберите от черного к прозрачному. Настройки градиента показаны ниже.

Удерживая Shift, растяните градиент от низа изображения к верху, и уменьшите непрозрачность до 65-ти %.

Для нашей работы необходим заголовок. Выберите инструмент Горизонтальный текст (Horizontal Type Tool) (T) и используйте шрифт Montserrat еще раз, установите размер на 40px, цвет #FFFFFF и напишите то, что, на ваш взгляд, охарактеризует вашу работу в 3-5 словах. Не забудьте оставить место возле вашего текста, чтобы все выглядело сбалансировано. Для постоянства я оставил 40px слева и снизу.

Нам нужна “призывающая к действию” кнопка, чтобы посетитель смог углубиться в нашу работу. Выберите инструмент Прямоугольник (Rectangle Tool) (T) и нарисуйте прямоугольник размером 212x46px. Расположите его в правой части нашего изображения, как всегда оставляя место в 40px вокруг (30px снизу, так как нам нужно его выровнять по горизонтали с названием).

Наконец, снова выберите инструмент Горизонтальный Текст (Horizotal Type Tool) (T), установите цвет на черный #000000, а размер на 14px, и напишите то, что вы хотели бы на вашей кнопке. Расположите надпись внутри белого прямоугольника и центруйте ее горизонтально и вертикально.

Шаг 4

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

Для примеров работ я использовал некоторые свои снимки с Dribbble. После того, как вы перетащите ваши изображения в Photoshop, конвертируйте их в смарт-объекты нажатием правой кнопки мыши на изображении и выбором Преобразовать в смарт-объект (Convert to Smart Object).

После этого зажмите Сmd/Ctrl + T чтобы изменить размер изображений на 313×235 px и разместить в колонки по два. Оставьте пространство в 40px  сверху и снизу, и 30px по бокам и между изображениями.

Шаг 5

С работами мы закончили. Быстро, не правда ли? Скройте группу Work и создайте новую группу Footer. Возьмите инструмент Прямоугольник (Rectangle Tool) (U) и нарисуйте большой прямоугольник цветом #075dfb, ранее нами использованным так, чтобы он закрывал всю нижнюю часть документа. Это будет фон для нижнего колонотитула. Далее, используя инструмент Перемещение (Move Tool) (V) расположите его на 40px ниже наших снимков.

А сейчас нам нужно заполнить наш нижний колонотитул. Вновь выберите инструмент Горизонтальный Текст (Horizontal Type Tool) (T), установите размер на 16px а цвет выберите белый, заглавными буквами напишите БЛОГ (BLOG) и ниже ссылки на посты блога. Расположите эти надписи, оставив сверху расстояние в 70px, делая наш нижний колонотитул более сильным и независимым.

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

Нам снова стоит создать кнопку действия, чтобы посетитель мог это действие совершить. Откройте группу Featured и найдите слои с кнопкой, удерживая Cmd/Ctrl нажмите на слои с прямоугольником и текстом, а затем Cmd/Ctrl + J чтобы их скопировать. Переместите их в группу Footer и расположите поверх фона. Используйте ранее созданный текст, поместите его на новую кнопку и измените, и все готово.

Наконец, нам нужно добавить копирайт дабы защитить нашу работу. Просто используйте ранее созданный текст, продублируйте его, и измените копирайт на что угодно. Расположите текст на 60px ниже последнего текста, и на этом все.

Готово!

Надеюсь, вам понравился этот урок.

Автор: photoshopstar

Создаем в Фотошоп дизайн для сайта-портфолио / Creativo.one

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

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

Итак, сегодня мы будем создавать портфолио веб-дизайнера в Фотошоп.

Убедитесь, что вы установили в систему необходимые шрифты, перед тем как начать данный урок.

Давайте же приступим непосредственно к самому уроку!

Шаг 1

Создайте новый документ и установите размеры Ширины (Width) и Высоты (Height) так, как это показано на скриншоте ниже. Залейте фон белым цветом (#ffffff).

Шаг 2

С левой стороны, с помощью инструмента Текст (Type tool) нарисуйте логотип. Для этого вы должны были установить в систему предварительно иконочный шрифт Entypo Font. Выберите его, и введите цифру «3» (без кавычек) с клавиатуры, цвет для вашего логотипа установите #0BADDA, размер шрифта 95 пунктов (pt). Далее напечатайте слово Портфолио (Portfolio), для этих целей используйте шрифт MetalGear Solid Font, при этом половину слова окрасьте в цвет #0BADDA, для другой половины используйте #212121, размер шрифта установите 32 пункта (pt).

Шаг 3

С правой стороны напечатайте меню навигации. Для него используйте шрифт PT Sans, размером 20 пунктов (pt) и цветом #212121.

Шаг 4

Активируйте инструмент Прямоугольная область выделения (rectangular marquee tool (М)), создайте новый слой, нажав сочетание клавиш CTRL + SHIFT + N, и нарисуйте фигуру, аналогичную той, что изображена на скриншоте ниже. Залейте ее цветом #ffffff.

Шаг 5

Воспользуйтесь изображением 0. Далее, правой кнопкой мыши кликните по слою с этой картинкой и во всплывшем меню выберите Создать обтравочную маску (Create Clipping Mask), или же просто нажмите сочетание клавиш Ctrl+alt+G. Подберите размер изображения так, чтобы оно точно вписывалось в область с прямоугольником, созданном в шаге 4. После этого идем в Фильтр — Размытие — Размытие по гауссу (Фильтр — Размытие — Размытие по Гауссу), выставляем для него значение 7.2, также как показано на скриншоте ниже.

Шаг 6

Добавьте текст (WEB DESIGNER) с левой стороны нашего будущего слайдера. Для этих целей используйте шрифт PT Sans размером 46 пунктов (pt) и цвет #212121. Для текста пониже (creative, fast, reliable) используйте шрифт Arial Italic 26 пунктов (pt) и цвет #212121. Со слайдером мы закончили.

Шаг 7

На данном этапе нам нужно будет создать трехколоночный блок и расположить его немного ниже нашего слайдера. Создайте новый слой (CTRL + SHIFT + N) и залейте его цветом #0BADDA. Добавьте какой-нибудь текст в наш блок, размер для заголовка возьмите 18 пунктов, а для самого контента 14. Выделите все слои, задействованные в формировании данного блока, объедините их в группу, нажав сочетание клавиш CTRL + G.

Шаг 8

Теперь продублируем группу, чтобы получить не один, а три такие колонки. Щелкаем по группе правой кнопкой мыши и выбираем пункт Копировать (Duplicate). Чтобы создать иконки, первое, что вам необходимо сделать — это нарисовать окружность с помощью инструмента Эллипс (Ellipse Tool (U)). Далее, уже в этот круг поместите необходимый значок с помощью шрифтовых иконок (Entypo Text Icon), точно также как мы это делали в самом начале, когда размещали наш логотип. Залейте значок каждой иконки соответствующим цветом фона, на котором она расположена. Кстати, как вы можете видеть на скриншотах, цвет фона каждой из колонок немного отличается, поэтому предлагаю вам сделать тоже самое.

Шаг 9

Теперь пришло время заняться непосредственно разделом с портфолио. Создайте новый слой (CTRL + SHIFT + N) и выберите инструмент Прямоугольная область выделения (rectangular marquee tool(М)), выделите с помощью него квадратную область под нашим блоком с колонками, залейте ее цветом #ffffff.

Шаг 10

Перетащите изображение 1 в ваш документ. Далее кликните по слою с этим изображением правой кнопкой мышки и выберите Создать обтравочную маску (Create a Clipping Mask), либо же просто нажмите сочетание клавиш Ctrl+alt+G. Для текста заголовка используйте шрифт PT Sans размером 20 пунктов и цвет #212121, для нижней части текста возьмите размер поменьше, например, 17 пунктов. Выделите все слои, относящиеся к блоку портфолио, и объедините их в группу (CTRL + G).

Шаг 11

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

Шаг 12

После этого, создайте новый слой (CTRL + SHIFT + N), выберите инструмент Прямоугольная область выделения (rectangular marquee tool(М)) и выделите такую же область, как на скриншоте ниже. Залейте ее цветом #0BADDA.

Шаг 13

Расположите изображение символа птицы (эмблема твиттер), а рядом добавьте текст, можете использовать генератор lorem ipsum, а можете написать что-нибудь на свой вкус. Используйте для текста шрифт Georgia Italic размером 23 пункта.

Шаг 14

Для текста поменьше с правой стороны, возьмите шрифт PT Sans размером 14 пунктов.

Шаг 15

Выделите оставшееся снизу пространство с помощью инструмента Прямоугольная область выделения (rectangular marquee tool(М)) и залейте ее цветом #333333.

Шаг 16

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

Автор: Sanjay

10 лучших портфолио Photoshop Design от внештатных дизайнеров в апреле 2021 года

И Sketch, и Photoshop — отличные инструменты, которые использует почти каждый дизайнер для выполнения огромного количества задач. К фотошопу даже стал словарным глаголом. Неудивительно, что большинство клиентов ожидают от дизайнера высокого уровня знаний в области Sketch и Photoshop. Для большинства дизайнерских работ Toptal одним из основных необходимых программных продуктов является Sketch или Photoshop. Все это, вероятно, заставляет вас демонстрировать свое мастерство в Sketch и Photoshop в своем портфолио.

Прежде чем продолжить, имейте в виду, что и Sketch, и Photoshop — это просто инструменты, и хотя инструменты не делают великих дизайнеров, владение инструментом дает возможность профессионально и эффективно воплощать ваши идеи в жизнь.

Итак, как вы продемонстрируете, что являетесь экспертом по Sketch или Photoshop в своем портфолио? Это в основном зависит от того, для какой проектной работы вы в основном используете ту или иную программу.

Вы делаете визуальные эффекты, фотоманипуляции и иллюстрации

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

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

Вы эксперт по брендингу

При разработке визуальной идентичности в рамках проекта брендинга желательно использовать не Photoshop в качестве основного инструмента, а один из векторных инструментов, например Illustrator. Тем не менее, Photoshop пригодится, чтобы визуализировать, как эта айдентика (логотип, выбранная цветовая палитра и типографика) будет работать и выглядеть на бланках, вывесках, правилах визуальной идентификации, веб-сайтах, приложениях и других дополнительных рекламных материалах.

Чтобы продемонстрировать свой проект брендинга в лучшем виде, первый шаг, который вам нужно сделать, — это найти или создать несколько шаблонов 3D-макетов.Будьте осторожны, выбирая те, которые не будут мешать работе, которую вы в первую очередь демонстрируете, а выбирайте те, которые подчеркнут ее лучшие качества. Избегайте странных перспектив, слишком большого количества отвлекающих факторов в виде окружающих предметов, цветов, узоров.

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

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

Вы веб-дизайнер или дизайнер пользовательского интерфейса

Photoshop не был разработан для веб-дизайна и визуального дизайна пользовательского интерфейса, но поскольку в то время не существовало полностью соответствующего инструмента, большинство веб-дизайнеров использовали его в качестве основного инструмента. С принятием адаптивного дизайна и появлением более подходящих инструментов и рабочих процессов, разработанных специально для веб-дизайна и дизайна пользовательского интерфейса, Photoshop потерял трон инструментов веб-дизайна. Есть еще некоторые дизайнеры, особенно те, которые не работают на Mac, которые используют Photoshop, но Sketch сейчас является лидером в этой области.

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

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

Не смотря ни на что, позаботьтесь об этом

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

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

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

Как создать шаблон портфолио в Photoshop и использовать типы слоев

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

Продолжайте читать, чтобы узнать, как создать шаблон портфолио в Photoshop.

Хотя Photoshop — фантастическая программа для редактирования фотографий, в ней есть некоторые инструменты, которые также полезны для работы с графикой. Это избавит вас от необходимости изучать другую программу, например Illustrator. Одна из лучших вещей для создания шаблона портфолио — это использование характеристик, которые может предложить каждый тип слоя. Вы можете использовать векторные слои для дизайна и логотипов, текстовые слои для всей информации и смарт-объекты для изображений.

Давайте рассмотрим это шаг за шагом.

Основы

Прежде всего, что такое слой?

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

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

Layers — один из самых универсальных и полезных инструментов Photoshop.

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

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

Шаблон

Создание вашего шаблона

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

В любом случае каждый созданный вами элемент лучше всего рисовать с помощью инструмента «Фигура». По умолчанию создается векторный слой. Чтобы убедиться в этом, убедитесь, что в меню на панели параметров установлено значение «Форма».

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

Добавление логотипа

Если ваш логотип состоит из множества фигур, выберите все из них и превратите их в смарт-объект, щелкнув правой кнопкой мыши вверху и выбрав в меню «Преобразовать в смарт-объект».

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

Из-за этого каждый раз, когда вы открываете смарт-объект, вы по-прежнему найдете все исходные слои-фигуры, чтобы работать с ними независимо.

Еще одна интересная особенность смарт-объектов — это возможность связать одну или несколько копий.

Это означает, что каждый раз, когда вы изменяете свой логотип, он автоматически применяет изменения ко всем копиям. Это полезно, если ваш дизайн включает более одного логотипа. Для этого создайте копию слоя, перетащив ее на кнопку «Дублировать слой» в нижней части панели.

Если вы хотите, чтобы ваши копии работали независимо друг от друга, вы можете создать копию смарт-объекта, с которым он не связан. Сделайте это, используя Новый смарт-объект через Копирование. Вы можете найти его в меню, которое появляется, когда вы щелкаете правой кнопкой мыши по слою.

Добавление текста

Это так просто, как кажется. Когда вы используете инструмент «Текст», он создает текстовый слой. Имейте в виду, что, поскольку это слой другого типа, не все инструменты доступны для использования.Например, нельзя использовать фильтры.

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

Еще один полезный совет при разработке шаблона — ограничьте пространство для текста, чтобы он не испортил ваш дизайн, если вы измените или добавите контент позже.

Вместо того, чтобы просто нажимать и вводить текст, щелкните и перетащите прямоугольное текстовое поле в то место, где вы хотите разместить текст. Таким образом, все, что вы набираете, адаптируется к этому пространству. Я обычно кладу один рядом с изображением, чтобы добавить всю информацию, такую ​​как название, техника и проект. Затем я могу обновить его для каждого изображения.

Добавление изображений

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

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

Вы можете сделать это, поместив смарт-объект прямо поверх прямоугольника, созданного в начале. Теперь создайте обтравочную маску, нажав Cmd + Alt + g (Ctrl + Alt + g на ПК). Маска покажет изображение сквозь рамку, не обрезая и не меняя его.

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

Сохранить и закрыть

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

Заключение

Я надеюсь, что вы нашли Как создать шаблон портфолио в Photoshop и Profit from Layer Types полезным для создания собственных шаблонов портфолио.

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

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

Создайте потрясающий макет портфолио в Photoshop

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

Ресурсы изображения:

Microbot, Suharrhyme

Теперь, когда у нас есть все, что нужно для создания этого макета, давайте взглянем на наш окончательный результат:

Шаг 1. Создайте документ Photoshop

Откройте Photoshop и создайте новый файл шириной 1100 пикселей и высотой 1500 пикселей.

Шаг 2: Заливка фона

Теперь выберите инструмент «Заливка» и залейте фон цветом # f6f6f6.

Шаг 3. Установите систему навигации

Начнем с верхней навигации. Используйте инструмент «Прямоугольная область», чтобы выделить небольшую область наверху.

Шаг 4. Затемнение фона навигации

Выберите инструмент «Ведро с краской» и залейте область цветом # 191919.

Шаг 5. Создание области кнопок навигации

Щелкните инструмент выделения и выберите прямоугольную полосу в затемненной области навигации.Затем залейте его # 050505.

Шаг 6: Добавьте разделители

Мы добавим несколько линий, которые будут разделять элементы навигации. Выберите инструмент «Линия» толщиной 1 пиксель. Также убедитесь, что наш цвет переднего плана # 616161.

Шаг 7. Добавьте текст для навигации

Теперь добавим текст для наших страниц. Просто выберите инструмент «Текст» и введите желаемый текст.

Шаг 8. Создание эффекта наведения

Для эффекта наведения мы создадим белую линию с помощью инструмента «Кисть» размером 3 пикселя. Затем выберите ластик и удалите края мягкой круглой кистью. Теперь уменьшите непрозрачность до 40%.

Шаг 9: Добавьте свой бренд

Добавьте свой логотип слева от меню навигации.

Шаг 10. Создание фона

Теперь мы перейдем к нашей области избранного контента. Сначала создайте новый слой и с помощью инструмента выделения выделите область под навигацией. Залейте его цветом # a0c0c8.

Теперь выключите фоновый слой, снова выберите инструмент выделения и создайте прямоугольник. Залейте выделенную область цветом # f0f0f0.

Нам нужно немного обводки, поэтому нажмите «Слой»> «Стиль слоя»> «Обводка».

Шаг 11. Разделите область содержимого на столбцы

Создайте еще один прямоугольник и залейте его цветом # 323030. И для смежной текстовой области залейте ее # 242322.

Шаг 12. Добавьте кнопку «Подробнее»

Теперь выберите инструмент «Текст» и добавьте наш текст об изображении.Под текстом мы добавим кнопку «читать дальше». Для этого просто выберите инструмент «Прямоугольник» и создайте маленький прямоугольник цвета # 323030. Затем добавьте текст в новый прямоугольник.

Шаг 13: Добавьте избранные изображения

Теперь добавьте изображение справа и добавьте нашу избранную ленту в верхний правый угол изображения. Я создал ленту с помощью инструмента «Перо» и добавил текст с помощью инструмента «Текст».

Шаг 14: Добавьте падающую тень

Выберите инструмент «Линия» и используйте его под блоком функций с толщиной 1 пиксель и цветом #dedede.Теперь нажмите «Слой»> «Стиль слоя»> «Тень».

Шаг 15: Создайте элемент «Новости»

Теперь создадим элемент «Новости». Итак, нажмите на инструмент прямоугольник и создайте прямоугольную полосу цвета #ebebeb. Снова выберите инструмент «Прямоугольник» и нарисуйте очень маленький прямоугольник слева цветом # 000000. Выделите этот черный прямоугольник и нажмите «Слой»> «Стиль слоя»> «Наложение градиента».

Шаг 16: Добавьте текст «Новости»

Добавьте текст «новости» с помощью текстового инструмента.

Шаг 17: Создание позиции портфеля

Создайте маленький прямоугольник с помощью инструмента «Прямоугольник» цвета # f0f0f0. Затем добавьте ту же обводку, которую мы использовали с функциональной областью.

Шаг 18: Добавьте изображения и текст портфолио

Теперь добавьте изображение и добавьте баннер сбоку. Выберите инструмент «Текст» и добавьте текст под изображением.

Шаг 19: Добавьте дополнительные элементы портфеля

Повторите тот же процесс, чтобы создать еще две позиции портфеля.

Шаг 20: Создайте кнопки ниже

Выберите инструмент «Прямоугольник» и создайте две кнопки с цветами # ca0e0e и # 3c3c3c. Затем добавьте текст с помощью текстового инструмента.

Шаг 21: Добавьте разделительные линии

Теперь выберите инструмент «Линия» и создайте две линии толщиной 1 пиксель и цветом #dcdcdc. После этого добавьте изображения и текст в том же стиле, что и предыдущий пост.

Шаг 22. Добавьте обновления Flickr

Для обновлений Flickr выберите инструмент «Текст» и добавьте заголовок.Еще раз создайте серую рамку с помощью инструмента «Прямоугольник» и добавьте обводку. Теперь создайте новый слой и поместите его под слоем рамки. Затем выберите мягкую круглую кисть и используйте ее по бокам, чтобы создать эффект тени.

Теперь вставьте изображения в рамку.

Шаг 23. Создание нижнего колонтитула

Начнем с нижнего колонтитула. Сначала выберите область с помощью прямоугольного выделения и залейте ее цветом # 191919.

Шаг 24: Добавление текста нижнего колонтитула

Выберите инструмент «Текст» и добавьте требуемый текст нижнего колонтитула.

Наш потрясающий макет готов.

Как создать потрясающий макет портфолио в Photoshop

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

Сегодня мы создадим потрясающий макет портфолио в Photoshop , мы будем использовать макет из двух столбцов с разными текстурами и деталями.Мы также будем использовать некоторые тенденции дизайна, которые используются на популярных веб-сайтах.

Прежде чем мы начнем, нам нужно загрузить / настроить несколько вещей.

Вещи, которые нам нужны:

Конечный продукт

Скачать PSD здесь

Начнем!

Откройте холст и установите размер 980 пикселей в ширину и 1692 пикселей в высоту.

Заполните страницу текстурой дерева, продублируйте ее (CTRL + J), чтобы покрыть всю страницу.Убедитесь, что линии древесины идут плавно. Затем возьмите инструмент Marquee Tool (M), создайте новый макет (CTRL + SHIFT + J) и нарисуйте прямоугольник в верхнем левом углу страницы, залейте его цветом # 403E3E.

Выберите Pen Tool (P) и CTRL + R, чтобы отобразить линейку, установите эти направляющие так, чтобы вы знали ее среднюю часть. Нарисуйте стрелку на кончике слоя прямоугольника и щелкните правой кнопкой мыши> Сделать выделение. Теперь нажмите CTRL + I, это перевернет выбранную область, и нажмите DEL.

Вот вырезанная версия.

В Blending Options> Inner Shadow установите передний план на # 751a10 и -90 для угла, размера и расстояния на 3px.

В настройках цвета градиента скопируйте цвета выше и нажмите ОК.

В настройках наложения градиента установите стиль отражения и угол 0.

Обводка, измените цвет переднего плана на 7a1b11 и размер на 4 пикселя.

Используйте нашу текстуру кожи и поместите ее над слоем с логотипом, удерживайте CTRL и щелкните слой с логотипом, нажмите CTRL + I, чтобы инвертировать выделение, и нажмите DEL.

На слое с текстурой кожи мы устанавливаем наложение и непрозрачность на 10%. Вот как это должно выглядеть.

Возьмите инструмент «Эллипс» (U) и нарисуйте круг, удерживая нажатой клавишу SHIFT, чтобы создать идеальный круг.

В параметрах наложения Drop Shadow установите передний план на #fff, угол на 90 и расстояние, размер на 1 пиксель.

Для цвета переднего плана Inner Shadow # 741b11, расстояния -90 и размера 1px.

Цвет переднего плана Outer Glow — # 801f14, а остальные — по умолчанию

.

Передний план Inner Glow — # 00000, остальные

оставьте.

Вот наш логотип в виде полного круга

На логотипе шрифта мы используем Ballpark, цвет текста A #ffffff и 71pt, тень установлена ​​по умолчанию.

Затем мы создадим новую линию, возьмем инструмент Single Row Marquee Tool (M) и щелкнем чуть ниже круглого логотипа. Залейте его цветом переднего плана # 7b1d12, продублируйте слой и залейте его цветом #ffffff с непрозрачностью 50%. Снова продублируйте этот слой и перетащите его ниже.

Вот это у нас теперь есть, дальше навигация

Добавили навигацию, шрифт Georgia 22pt, цвет #ffffff.

Тень для навигации, размер переднего плана # 000000 и расстояние до 1px.

Дублируйте слой с логотипом и перейдите в Filter> Blur> Guassian Blur и установите его на 5.7px

Для публикации с контентом возьмите инструмент Rounded Rectangle Tool (U) и установите радиус 5 пикселей, передний план — # ffffff.

В «Параметры наложения»> «Тень» цвет переднего плана — #adadad, расстояние и размер — 1 пиксель.

Цвет переднего плана обводки # 9b9b9b и размер 1 пиксель.

Дублируйте слой (CTRL + J) два раза и дважды нажмите CTRL + стрелку вниз, чтобы он опустился на 2 пикселя для каждого слоя.

Далее следует взять любое изображение, которое достаточно велико, в этом случае я использую свой старый учебник. Щелкните правой кнопкой мыши слой> Растрировать изображение. Теперь удерживайте CTRL + щелкните слой сообщения с контентом, а затем нажмите DEL. Следует удалить лишнее на изображении.

Это полное изображение поста с содержанием, которое у нас есть.

Вот готовый контент поста, мы продублировали слои и изменили изображения. Аккуратный!

В нижнем колонтитуле создайте новый слой (CTRL + SHIFT + N) и возьмите инструмент Marquee Tool (M), залейте его цветом # 000000 Opacty 44%.

В левой нижней части страницы возьмите инструмент Rounded Rectangle Tool (U) и залейте его цветом # 000000, непрозрачность 20%.

Мы добавили текст, шрифт Georgia 15pt, цвет #ffffff.

Мы также добавили тень к тексту, установив передний план на расстояние # 000000 и размер 1 пиксель.

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

Для создания виджета Twitter в виде стрелки. Выберите инструмент «Перо» (P) и нарисуйте стрелку вроде, а затем щелкните правой кнопкой мыши> выделите и скопируйте прозрачность на фоновом слое.

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

Узнайте, как создать стильный макет портфолио в Photoshop

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

Подробное описание учебника

Программа: Photoshop CS5

Расчетное время завершения: 60 минут

---

Учебные материалы

При создании этого руководства использовались следующие ресурсы.

Теперь, когда у нас есть все необходимое, приступим!

Шаг 1: — Создайте новый файл с шириной 1200 пикселей и высотой 1400 пикселей.

Шаг 2: — Теперь выберите инструмент Paint bucket Tool и залейте фон цветом # ffffff.

Шаг 3: — Выберите инструмент «Прямоугольник», чтобы создать большой прямоугольник. Залейте его цветом # 000000.

.

Шаг 4: — Выберите инструмент «Перо» и создайте водоворот поверх нашего черного прямоугольника.

Шаг 5: — Щелкните правой кнопкой мыши путь и выберите «Сделать выделение». Затем нажмите Удалить. Или вы можете перейти в Edit> Clear.

Шаг 6: — Теперь снова создайте тот же путь и, когда вы нажмете «Сделать выделение», залейте его цветом # 5e2b4f.Затем повторите тот же процесс и используйте # adadad.

Шаг 7: — Теперь откройте фрактал и вставьте его в наш файл. Поместите его в верхний левый угол.

Шаг 8: — Скопируйте фрактал и снова вставьте его 2 или 3 раза в случайные места. Затем нажмите CMD / CTRL + U и измените цвет каждого фрактала.

Шаг 9: — Теперь создайте новый слой, затем выберите мягкую круглую кисть цвета # ffffff и произвольно нарисуйте точки на фракталах.

Шаг 10: — Создайте еще один слой и снова выберите мягкую круглую кисть размером 350 пикселей и цветом # feadda. Используйте его в верхнем правом и нижнем левом углах.

Теперь, если вы хотите, вы также можете добавить узор к нашему фону. Я собираюсь скрыть узор, чтобы вы могли более четко видеть детали, а затем мы сможем показать его в конце.

Шаг 11: — Теперь выберите инструмент Rounded Rectangle Tool и создайте небольшой прямоугольник посередине.

Шаг 12: — Теперь нажмите «Слой»> «Стиль слоя»> «Наложение градиента». И добавляем градиент.

Шаг 13: — Создайте еще один прямоугольник и залейте его цветом # 000000. Затем нажмите Layer> Layer style> Gradient Overlay.

Шаг 14: — Затем выберите «Слой»> «Стиль слоя»> «Тень».

Шаг 15: — Теперь нажмите Layer> Layer style> Stoke.

Шаг 16: — Теперь нажмите Пользовательские формы и выберите стрелку. Затем нажмите «Слой»> «Стиль слоя»> «Наложение градиента» и добавьте градиент к стрелке.

Шаг 17: — Создайте еще одну стрелку и залейте ее цветом # ffffff. Повторите тот же процесс и нарисуйте стрелки с другой стороны.

Шаг 18: — Теперь добавьте изображение особенности, затем добавьте к нему немного обводки.

Шаг 19: — Создайте небольшой прямоугольник на изображении объекта и залейте его цветом # 694e63. Затем уменьшите непрозрачность до 80%. И добавьте текст поверх него цветом # 585757.

Шаг 20: — Теперь выберите инструмент «Текст» и добавьте навигационный текст. Если хотите, можете добавить на него немного узора.

Шаг 21: — Создайте новый слой, затем выберите жесткую круглую кисть размером 1px и цветом # adadad.Теперь нарисуйте несколько небольших линий между навигационным текстом.

Шаг 22: — Теперь создайте еще один прямоугольник и залейте его цветом # 202020.

Шаг 23: — Теперь выберите инструмент «Текст» и добавьте текст.

Шаг 24: — Нарисуйте небольшие линии между текстом с помощью жесткой круглой кисти 1px с цветом # 7c7c7c.

Шаг 25: — Создайте новый слой, затем выберите инструмент Rectangular Marquee Tool и создайте прямоугольник посередине.Теперь выберите мягкую круглую кисть и трижды используйте ее с цветами f68e56, # ed1c24 и # 856018.

Шаг 26: — Теперь нажмите «Фильтр»> «Размытие»> «Размытие по Гауссу».

Шаг 27: — Еще раз выберите инструмент «Текст» и добавьте еще немного текста.

Шаг 28: — Вставьте несколько картинок с правой стороны. Если хотите, добавьте немного Стокса.

Шаг 29: — Теперь создайте небольшой прямоугольник и залейте его цветом # 202020.

Шаг 30: — Добавьте текст об авторских правах и логотип. Затем отобразите наложение узора на фоновом слое, и все готово.

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

---

Никакая часть этих материалов не может быть воспроизведена каким-либо образом без явного письменного согласия Entheos.Любое несанкционированное использование, совместное использование, воспроизведение или распространение этих материалов любыми средствами, электронными, механическими или иными, строго запрещено.

10 бесплатных веб-шаблонов Photoshop PSD для личного портфолио

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

Если вам нужно немного вдохновения, когда дело касается личных портфолио, или вы просто хотите ускорить процесс проектирования, вы попали в нужное место. Мы собрали лучшие шаблоны личных портфолио, которые вы можете редактировать в Adobe Photoshop, прежде чем превращать их в действующие веб-сайты.

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

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

Шаблон Pon — отличный выбор для креативных агентств и фрилансеров, которые хотят выделить свое портфолио. Шаблон включает одностраничный дизайн, который легко настроить.

Если вы предпочитаете темную цветовую схему, попробуйте шаблон Fusion Dark Portfolio. Этот шаблон обязательно выделит ваши проекты.Еще одна отличительная черта этого шаблона — современная и элегантная типографика.

Pagina — очень минималистичный, но креативный шаблон PSD. Он идеально подходит для фрилансеров, фотографов и других творческих людей. В шаблон входит более 30 файлов Photoshop, поэтому вы можете создать действительно уникальное и мощное личное портфолио.

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

Livespot HTML — идеальный выбор для творческих агентств или фрилансеров. Шаблон включает 14 файлов HTML, а также файлы Photoshop, которые можно использовать для настройки исходной концепции дизайна.

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

Этот шаблон — отличный выбор для креативного агентства или любого, кто ищет красочный дизайн портфолио. Шаблон можно использовать для любого типа личного портфолио и включает в себя много белого пространства, которое привлекает внимание к вашим проектам.

The Mark — еще один минималистичный шаблон портфолио, созданный в Photoshop. В шаблоне есть несколько файлов Photoshop, которые легко настроить и включают смелые цвета и элегантную типографику.

Шаблон Poseidon — это шаблон творческого портфолио, подходящий для агентств и фрилансеров.Шаблон включает более 40 отдельных файлов PSD, которые легко редактировать и хорошо организованы.

Шаблон Waxom — это шаблон Photoshop, в котором используется темная цветовая схема в сочетании с минималистичным дизайном. В шаблон входит более 230 файлов PSD, которые вы можете использовать в качестве отправной точки для своих дизайнов.

Этот шаблон портфолио имеет элегантный вид благодаря темному фону и элегантной типографике, которая выделяется. Шаблон включает один файл PSD, который идеально подходит для создания домашней страницы вашего веб-сайта-портфолио.

Шаблон IK можно использовать как для личного портфолио, так и для веб-сайта резюме. Вы найдете множество разделов, в которых рассказывается о вашей прошлой работе, а также отзывы клиентов, их навыки и образование.

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

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

---

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

Создайте чистый макет веб-сайта портфолио в Photoshop

Сегодня я проведу вас через творческий процесс создания красивого и чистого макета веб-сайта портфолио в Photoshop.

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

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

Настройка рабочего пространства

Хорошо… Первое, что вам нужно сделать, это настроить рабочее пространство. Это доступно для всех ваших следующих макетов. Откройте Photoshop и создайте новый файл размером 1300×1400 пикселей.

После этого перетащите направляющие на 150 пикселей и 1100 пикселей, чтобы получить центрированный макет. Макет будет иметь 960 основных пикселей, на которых мы будем его создавать.

Создание заголовка

А теперь давайте спроектируем что-нибудь здесь.Возьмите инструмент «Прямоугольник» и нарисуйте прямоугольник высотой 150 пикселей цвета #EDEDED. Здесь будет заголовок.

Затем, используя тот же инструмент Rectangle Tool, нарисуйте еще один прямоугольник поверх серого, но задайте ему высоту 80 пикселей и оставьте над ним 70 пикселей. Раскрасьте его в темный цвет. Я использовал # 303030.

Теперь нарисуйте прямоугольник 960×90 пикселей и выровняйте его так, чтобы между ним и верхом оставалось 50 пикселей. Придайте ему тот же черный цвет, что и выше.

Сейчас я покажу вам, как создать для этой кнопки панели инструментов красивую и красивую тень.Дублируйте этот последний слой и измените его высоту с 90 пикселей на 70 пикселей, затем выровняйте его по верхнему краю с исходным слоем. На изображении я изменил цвета слоев, чтобы показать вам, что вы должны получить.

Хорошо! Теперь поместите красный слой под белый слой, измените цвет белого слоя на # 303030, а для красного слоя придайте ему черный цвет.

Теперь выберите красный слой, затем перейдите к Filter-> Blur-> Gaussian Blur , установите Radius 6px и нажмите Ok. Мы только что получили красивую тень для нашего заголовка.

Для слоя с именем «белый слой» примените плавный черный градиент сверху вниз, как на изображении.

Добавьте текст в левую верхнюю область проекта (некоторые кнопки, такие как «Домой», «О программе» или что-нибудь еще). Я дал им белую тень под углом 90 градусов.

Логотип, который я создал сам, используя шрифт Calibri (размер шрифта: 60 ​​пикселей) и добавив некоторые параметры наложения.

Я добавил свой тег рядом с логотипом: «Просто наслаждайся!» , с использованием того же шрифта Calibri, но с курсивом и размером 18 пикселей.

Теперь давайте создадим кнопки. Выберите инструмент Rounded Rectangle Tool и нарисуйте прямоугольник 76x28px.

Теперь добавьте несколько вариантов наложения:

Выбор шрифта Lucida Sans и с размером шрифта 16 пикселей и типом белого цвета в слове «Home».

Теперь создайте больше кнопок, чтобы завершить панель инструментов кнопок. Вы можете добавить кнопку «Контакт», кнопку «Портфолио» или что угодно.

Давайте добавим немного деталей, но с сильным эффектом: давайте немного осветим логотип.Для этого выберите «Белый слой», как мы назвали его выше, и нажмите Ctrl + Click или Command + Click для Mac, чтобы выбрать слой. Создайте еще один слой над ним и с помощью большой мягкой круглой кисти . внутри выделения с белым цветом поверх логотипа. Вы получите красивый световой эффект для логотипа.

Мы только что закончили шапку. Теперь создадим основное содержимое макета.

Разработка основного содержимого макета

Для основного содержимого мы собираемся создать область, в которой будут представлены ваши последние разработки или некоторые особенности ваших возможных продуктов.Итак, возьмите инструмент Rectangle Tool и нарисуйте большой прямоугольник высотой 400 пикселей, затем добавьте гладкий градиент от серого к белому сверху вниз.

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

Загрузите этот значок компьютера и добавьте его в наш проект. Поместите его в правую часть проекта.Здесь будут изображения вашей работы или продукта. Немного измените размер монитора, чтобы он соответствовал и интегрировал в проект. Я уменьшил его, пока не достиг 400×335 пикселей, а затем я поместил свое собственное изображение внутрь.

Выберите инструмент Type Tool (T) и напишите немного содержимого в левой части записной книжки. Я использовал только шрифт Lucida Sans, изменяя размер шрифта в зависимости от содержимого. Также я использовал этот маленький значок Ok для « Список возможностей ».

Теперь создадим две кнопки.Эти кнопки будут основными кнопками макета. Возьмите инструмент Rounded Rectangle Tool (U) , установите радиус 7 пикселей и нарисуйте прямоугольник размером 160×35 пикселей.

Затем добавьте следующие параметры наложения:

Кнопка выглядит так:

Выберите слой кнопки и нажмите Ctrl + Click (или Command + Click) для Mac на нем, чтобы выделите кнопку на холсте. (чтобы показать ее выделение). Теперь возьмите инструмент Rectangular Marquee Tool (M) , выберите один из вариантов «Пересечение с выделением» и выберите только верхнюю половину кнопки.Теперь у вас должна быть выделена половина кнопки.

Возьмите инструмент Paint Bucket Tool (G) и залейте выделенную область белым цветом. Не забудьте создать еще один слой над кнопкой для рисования. Уменьшите непрозрачность до 8%. Напишите внутри кнопки «Загрузить». или любое слово, которое вы хотите.

Снова выберите кнопку, нажав Ctrl + Click на слое. Создайте новый слой над кнопкой, выберите Soft Round 200px Brush и закрасьте выделение кнопки белым цветом.Мы делаем это, чтобы создать средний световой эффект внутри кнопки. Тот же процесс используется для логотипа.

Дублируйте кнопку и поместите новую кнопку с правой стороны.

Теперь мы хотим создать небольшую область внизу, для «дополнительной информации». Возьмите инструмент «Прямоугольник» и нарисуйте серый прямоугольник (#EFEDEE) размером 40 пикселей. После этого нарисуйте обводку в 1 пиксель цвета #BBBBBB.

Под верхней обводкой нарисуйте белую линию, чтобы создать красивый эффект.

Давайте теперь добавим под монитор ПК пять маленьких кнопок для каждого слайдера ползунка, потому что эта область представляет собой большой ползунок, который вращает ваши продукты. Итак, возьмите Elipse Tool (U) и перетащите 5 кругов под компьютером. Удерживайте Shift Key при перетаскивании, чтобы сделать их идеально круглыми.

Для первого установите следующие параметры наложения: Внутренняя тень и Наложение цвета:

… и для следующих четырех кнопок добавьте эти параметры наложения:

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

Теперь мы хотим создать еще одну область для некоторого общего содержания, например «Кто мы» или отзывов. Для этого возьмите инструмент «Прямоугольник» и нарисуйте прямоугольник 1300×340 пикселей и задайте ему плавный градиент от серого к белому сверху вниз. Над формой добавьте белую линию размером 1 пиксель, чтобы лучше интегрироваться со всем дизайном.

Теперь разделите фигуру на 3 части и внутри первых двух частей добавьте текст о себе или о том, что вы делаете, а внутри последней части добавьте область отзывов.

Вот и все для средней части. Что мы делали до сих пор:

Проектирование нижнего колонтитула:

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

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

Теперь нарисуйте большой прямоугольник 1300×420 пикселей под этой полосой и добавьте градиент от черного к темно-серому, применив настройки со следующего изображения:

Если вы правильно следовали инструкциям, у вас должен получиться такой нижний колонтитул. one:

Теперь выберите изображение, относящееся к вашей работе или продукту, и добавьте его в макет, но измените его размер до 260×150 пикселей, затем добавьте белую внутреннюю обводку размером 3 пикселя.

Теперь продублируйте слой с фотографией и сделайте его черным, добавив параметр Color Overlay Blending. Затем перейдите в меню Edit-> Transform-> Warp и деформируйте его, пока он не будет выглядеть, как это изображение.

Теперь перейдите в Filter-Blur-> Gaussian Blur и сделайте размытие с радиусом 3px. Затем уменьшите непрозрачность слоя до 60px и поместите слой под слоем с исходным изображением.

Мы только что получили красивый эффект тени для изображения.Я хочу добавить еще одну деталь для этого эскиза. Я хочу добавить рамку. Для этого выделите вокруг эскиза инструмент Rectangular Marquee Tool . Затем возьмите инструмент Gradient Tool (G) , установите серый цвет на белый. Передний план к прозрачному Градиенту и нарисуйте градиент сверху вниз внутри выделения.

Вот что вы должны получить:

Немного уменьшите непрозрачность слоя и поместите его под слой изображения.

Получился красивый стилизованный эскиз.

Добавьте еще два эскиза к слою и примените к ним те же шаги.

Под миниатюрами создайте фигуру со скругленными углами 520×75 пикселей, используя инструмент Rounded Rectangle Tool (U) с радиусом 20 пикселей.

Затем добавьте эти параметры наложения:

Мы только что получили эффект глубины для этой формы.

Загрузите этот значок Twitter и добавьте его рядом с закругленной формой.

Теперь добавьте текст, имитирующий твиты из Twitter.

Теперь загрузите эти значки социальных сетей с WebToolKit4.me и поместите их в правой части нижнего колонтитула.

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

Вы можете просмотреть окончательный предварительный просмотр изображения ниже. Нажмите на него, чтобы увеличить предварительный просмотр.

Мы только что закончили макет нашего портфолио.Я надеюсь, что вы чему-то научитесь из этого учебника по Photoshop, и, если он вам понравится, не стесняйтесь распространять информацию! Увидимся в следующий раз для другого урока по фотошопу.

Вы можете подписаться на меня в твиттере или подписаться на мою RSS-ленту, или, если вы хотите получать больше бесплатных подарков и новостей от DeliciousThemes, просто станьте частью нашего сообщества.