Привет всем и добро пожаловать в очередную обучающую статью, посредством которой мы научимся разрабатывать интересный шаблон веб-сайта в PSD . Сегодня мы будем работать над опрятным простеньким дизайном портфолио . Вся работа будет осуществляться в программе Photoshop. В статье также охвачены некоторые интересные техники обработки типографики, работы с цветом и отступами.
Мы будем использовать действительно светлую цветовую схему, а дизайн должен получиться в стиле настоящего минимализма.
Давайте приступим и надеемся, что по окончанию урока у вас выйдет то же самое, что и на картинке!
Кстати, через пару дней вам будет доступна статья конвертации данного шаблона из PSD в HTML, так что – будьте на связи!
Ресурсы, которые понадобятся нам в ходе разработки :
Посмотрите на результат, который должен получиться. Вы можете кликнуть по изображению, чтобы увидеть его в полном размере:
Этап 1: Разработка структуры сайта
Перед началом работы скачайте систему 960grid для упрощения расстановки линеек.
Откройте 960_download\templates\photoshop\960_grid_12_col.psd
Также нужно удостовериться в том, что наши линейки и направляющие отображены. Это можно сделать посредством нажатия клавиш:
* CTRL + R
(Отображение линеек)
* CTRL + ;
(Отображение направляющих)
CTRL + SHIFT + C поможет вам изменить размер холста.
Переименуйте папку layer1 в Header, а 1 слой в header_bg (поместите всё в отдельную папку, типа Header, Navigation, Footer – это поможет вам легко ориентироваться).
Создайте новую направляющую посредством меню View > New Guide и установите позицию на 150 пикселей в горизонтальной ориентации.
#192028
#2a3642
Создайте папку внутри папки header и назовите её logo, а далее помещайте в неё все слои, связанные с логотипом.
Создайте еще одну направляющую с позицией 50 пикселей от верхней части холста.
Теперь выберите инструмент создания текста (Text Tool – T) и внесите на холст название вашего сайта и слоган.
Название сайта: любой цвет
Слоган: #cacaca
Тень (Drop Shadow)
#c5c5c5
#d7d7d7
#ffffff
Создайте папку и назовите её Navigation, а далее помещайте в неё все слои, связанные с навигационным меню.
Создайте еще одну направляющую с позицией 5 пикселей от верхней части холста.
* Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – U)
* Создайте выделение слева направо относительно нашей направляющей 5 пикселей
* Залейте его цветом #02abc6
Выберите ручку (Pen Tool – P). Создайте фигуру в виде стрелки, и разместите её так, как показано на скриншоте.
Этап 5: Разработка области с контентом
Создайте папку и назовите её Featured_Section, а далее помещайте в неё все слои, связанные с данной областью.
Выберите инструмент создания многоугольника (Rectangular Marquee Tool – M), создайте выделение, как показано на скриншоте ниже и залейте его цветом #cccdcd .
Контур (Stroke)
Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – U) и создайте выделение, как показано на скриншоте ниже:
Протяните градацию от середины вплоть до правой стороны холста.
Выберите инструмент создания выделения в форме эллипса (Elliptical Marquee Tool – U). Создайте выделение, как показано ниже на скриншоте и залейте его цветом #000000.
Помните, что пока вы удерживаете кнопку shift , вы можете создавать сразу несколько выделений.
Создайте папку и назовите её buttons, а затем помещайте в неё все слои, связанные с кнопками.
Выберите инструмент создания прямоугольника с закругленными углами (Rounded Rectangle Tool – M), и разместите его так, как показано на скриншоте ниже.
Наложение градации (Gradient Overlay)
#dcdcdc
#ffffff
Тень (Drop Shadow)
#1d1d1d
#4e4e4e
Этап 7: Разработка характеристики
* Выберите инструмент создания прямоугольника с закругленными углами (Rounded Rectangle Tool – U)
* Установите радиус на 10 пикселей
Примените те же опции стиля, которые мы использовали в этапе с заголовком, а затем поместите многоугольник так, как показано на скриншоте ниже.
Теперь выберите инструмент создания текста (Text Tool – T) и поместите текст характеристики.
Создайте папку внутри папки testimonials и назовите её hire_btn, а затем помещайте в неё все слои, связанные с кнопкой.
Выберите инструмент создания прямоугольника с закругленными углами (Rounded Rectangle Tool – U), установите радиус на 10 пикселей, а цвет на #141a20. Затем поместите многоугольник так, как показано на скриншоте ниже.
Тень (Drop Shadow)
Создайте еще один слой и назовите его button, залейте его любым цветом.
Примените те же стили слоя и текста, как мы использовали в области с контентом.
Раздел «Чем я занимаюсь»
Создайте папку внутри папки main_area и назовите её What I Do.
Теперь откройте иконки, которые вы скачали, и возьмите оттуда 3 иконки, которые подойдут больше всего к разделам «Чем я занимаюсь», «Портфолио» и «Социальные ссылки».
Инструмент создания текста (Text Tool – T):
Создайте папку внутри папки main_area и назовите её my_portfolio, а затем помещайте в неё все слои, связанные с данным разделом.
Инструмент создания текста (Text Tool – T):
Контур (Stroke)
Создайте папку внутри папки main_area и назовите её i_socialize, а затем помещайте в неё все слои, связанные с данным разделом.
Откройте социальные иконки и нужные разместите так, как показано на скриншоте.
Инструмент создания текста (Text Tool – T):
Этап 10: Разработка подвала (быстрые ссылки, последние записи в блоге, контакты)
Повторите действие, но с положением 1158 пикселей.
Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – U) и создайте выделение, как показано на скриншоте ниже. Залейте его любым цветом.
#2a3642
#192028
Выберите параметр обратного направления (Reverse)
Контур (Stroke)
Создайте еще одну папку внутри папки footer и назовите её Quick Links.
Инструмент создания текста (Text Tool – T):
Создайте еще одну папку внутри папки footer и назовите её Latest_blog.
Инструмент создания текста (Text Tool – T):
Создайте еще одну папку внутри папки footer и назовите её Contact_me.
Откройте социальные иконки и возьмите иконки электронной почты и rss.
Инструмент создания текста (Text Tool – T):
* Заголовок: #ffffff
* Абзац: #cacaca
* Ссылки: #0cb0ca
Инструмент создания текста (Text Tool – T) и шрифт Arial 11pt
Результат
Финальный результат:
В этом уроке вы узнаете, как создать простое и минималистичное портфолио на основе Instagram. Мы будем использовать поразительные эффекты, чистую палитру цветов и мягкие шрифты. Сначала в уроке будет описано создание веб версии, а затем можно будет быстро адаптировать свое портфолио для мобильных устройств.
Материалы для урока
Для того чтобы следовать пунктам урока вам потребуются такие материалы (все они бесплатны):
Шаг 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
Теперь закончим зону заголовка. У нас есть красивая картинка и много места. Давайте поместим сюда простое приветственное сообщение, чтобы пользователи могли понять, о чем сайт.
Выбрав инструмент Горизонтальный текст 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. Надеюсь, вы узнали что-нибудь новое, и полученные навыки помогут вам создавать восхитительные дизайны в будущем.
Пошаговые советы с картинками
1. Приступая к созданию индивидуального портфолио начальной школы своими руками необходимо, чтобы оно соответствовало требованию трех сторон: классного руководителя (школы), возможностей родителей, и конечно, нравилось самому ученику.
а) Обладая достаточным уровнем пользования графическими программами Вы можете сделать портфолио сами.
плюсы: Вы можете сделать действительно очень индивидуальное портфолио, полностью подходящее для вашего ребенка
минусы: Достаточно долгое время работы (около недели). При недостаточности технических знаний и материала готовое портфолио может очень существенно отличаться от того, что было задумано в начале.
б) Поручить создание портфолио друзьям, хорошо владеющим комьютером либо профессиональным дизайнерам или фотохудожникам.
плюсы: При достаточном везении и правильном выборе можно получить очень хороший, индивидуальный результат
минусы: Работа может быть не выполнена в срок, или не выполнена вообще. Высокая стоимость выполнения портфолио школьника профессионалом - около 5 тыс. рублей. При этом вы совершенно не застрахованы от того, что он не использует уже готовые шаблоны из интернета, дополнив вашим текстом и фото.
в) Использовать готовые шаблоны портфолио (например эти) школьника, дополнив его своими данными.
плюсы: Хороший, заранее предсказуемый профессиональный результат за короткий срок (1-2 дня).
минусы: Возможное повторение оформления порфолио в школе или классе.
2. Необходимо определить план работы над портфолио, будет ли это полностью индивидуальная работа с нуля, либо шаблон -портфолио из интернета (например по этим шаблонам)
, заполненное под конкретного ребенка и дополненное фотографиями.
3. Если вы решили изготавливать портфолио с нуля, трезво оцените свои силы. Обычно портфолио изготавливают в программе "Фотошоп" или "Corel Draw" либо в другом графическом редакторе (текстовый редактор - типа Ворд, Эксель - не подходят для работы с картинками). Если Вы никогда не работали в графических программах, лучше воспользоваться готовыми шаблонами , особенно когда время ограничено.
4. Решите, где вы будете распечатывать готовое портфолио. Если Вы планируете печатать дома на струйном принтере (что обычно выходит дороже), купите фотобумагу (ярче будет на плотной глянцевой бумаге) и подумайте над фоном (чтобы не тратить много краски следует отдать предпочтение светлым тонам, или частичной заливке). Выгоднее распечатать в специализированных фото-салонах или типографиях. В Московской области на 2014 год цена одного А4 листа составляет около 30 рублей.
5. Дизайн портфолио. Фон необходимо выбрать такого цвета, чтобы на нем были видны надписи ручкой там, где это предусмотрено. Спросите ребенка, какое портфолио он хочет. Узнайте у преподавателя, какое содержание портфолио требуют в школе а так же какое требование к оформлению портфолио. Подумайте над изюминкой портфолио,например интересная подача материала, оформление фотографиями ребенка, оригинальный стиль и т.д. Если Вы используете картинки из интернета, сразу соберите их в одну папку и проверьте их качество. Часто бывает так, что картинок, необходимых для оформления выбранной темы портфолио не хватает.
ПОШАГОВЫЙ МАСТЕР-КЛАСС САМОСТОЯТЕЛЬНОГО ОФОРМЛЕНИЯ ДЕТСКОГО ПОРТФОЛИО С "НУЛЯ" В ПРОГРАММЕ ФОТОШОП.
6.Например, мы решили оформить портфолио в стиле волшебной детской сказки, используя фотографии ребенка, необычную текстовую подачу и при этом, портфолио будет соответствовать требованиям по содержанию
7. Создавать портфолио мы решили в популярной программе фотошоп (подходит любая версия). Предположим, что портфолио мы будем печатать дома, поэтому выбираем легкие, пастельные цвета заливки
8. Открываем программу фотошоп, создаем файл --- новый --- набор: международный формат бумаги A4--- разрешение 300 dpi
9. Создаем фон на белом листе бумаги А4, разрешением 300 dpi, используя либо заливку цветом (инструмент заливки выделен красным кружком. В нашем случае мы "перетащили" на заготовку готовый фон из скрап набора "детство" и немного его подредактировали. Фон нам нужен не очень яркий, тобы его можно было напечатать на домашнем струйном принтере (для лазерного/цифрового принтера данный фон очень бледный) не затрачивая много краски и чтобы текст на нём легко читался. Готовый фон, который у нас получился можно скачать
Набор подходящих фонов (в архиве rar)
10. Добавляем мелкие элементы оформления портфолио. Мы использовали готовый png скрап-набор. Если готового клипарта на прозрачном фоне не оказалось, открываем картинки в джепеге и вырезаем из с помощью инструмента "Лассо" (выделено красным) а затем перетаскиваем на фон. Пример готовых использованных деталей можно скачать
13. Переносим фотографию на подготовленный бланк.
14. Первый лист готов! Приятного творчества.
В этой статье я покажу вам, как создать простое и понятное портфолио для демонстрации своих работ. Я буду использовать основные инструменты и методы Photoshop , чтобы получить профессионально выглядящий и оптимально структурированный макет.
Программное обеспечение: Photoshop CS3 и выше.
Давайте для начала создадим в 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 и поместите их выше фона.
Финальный результат:
В этом уроке вы узнаете, как создать простое и минималистичное портфолио на основе Instagram. Мы будем использовать поразительные эффекты, чистую палитру цветов и мягкие шрифты. Сначала в уроке будет описано создание веб версии, а затем можно будет быстро адаптировать свое портфолио для мобильных устройств.
Материалы для урока
Для того чтобы следовать пунктам урока вам потребуются такие материалы (все они бесплатны):
Шаг 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
Теперь закончим зону заголовка. У нас есть красивая картинка и много места. Давайте поместим сюда простое приветственное сообщение, чтобы пользователи могли понять, о чем сайт.
Выбрав инструмент Горизонтальный текст 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. Надеюсь, вы узнали что-нибудь новое, и полученные навыки помогут вам создавать восхитительные дизайны в будущем.
