Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

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

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

Final product image
What You'll Be Creating

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

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

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

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

Шаг 1

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

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

Шаг 2

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

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

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

Шаг 3

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

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

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

Шаг 1

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

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

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

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

Шаг 2

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

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

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

Шаг 6

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

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

I love to travel all around the world and design beautiful things.

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

Область Photos 

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

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

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

Шаг 4

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

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

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

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

Шаг 5

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

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

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

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

Шаг 6

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

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

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

Поздравляю!

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

Я бы хотел услышать ваши отзывы и посмотреть результаты этого урока!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.