Как сделать портфолио в фотошопе
Обновлено: 21.11.2024
Ваше портфолио – это ваша визитная карточка. Он всегда должен соответствовать вашим последним работам, соответствовать вашему стилю и быть доступным для ваших клиентов. Возможно, один есть на вашем веб-сайте, еще один напечатан, а еще один предназначен для презентаций. Все они должны быть в курсе. Итак, как вы справляетесь с этим? Создайте шаблон портфолио, который легко обновлять и масштабировать до различных форматов.
Продолжайте читать, чтобы узнать, как создать шаблон портфолио в Photoshop.
Несмотря на то, что Photoshop — это фантастическое программное обеспечение для редактирования фотографий, в нем есть несколько инструментов, полезных и для работы с графикой. Это избавит вас от необходимости изучать другую программу, например Illustrator. Одна из лучших вещей для создания шаблона портфолио — это использование характеристик, которые может предложить каждый тип слоя. Вы можете использовать векторные слои для дизайна и логотипов, текстовые слои для всей информации и смарт-объекты для изображений.
Давайте рассмотрим это шаг за шагом.
Основы
Во-первых, что такое слой?
Когда вы открываете новый проект, будь то пустой холст или фотография, он по умолчанию открывается как слой изображения. Это база, на которой вы строите. Затем вы можете добавить столько слоев, сколько вам нужно.
Представьте, что Слои — это листы бумаги, которые вы можете складывать друг в друга. Затем каждый из них изменит, добавит или заблокирует содержимое нижеприведенных. Свойства каждого слоя зависят от его типа.
Слои — один из самых универсальных и полезных инструментов в Photoshop.
Существует много типов слоев, некоторые из них представляют собой отдельные слои, такие как изображения или векторы. Другие работают только в комбинации, как корректирующие слои.
Важно понимать, что каждый из них имеет разные характеристики, которые можно использовать для упрощения своей жизни. Здесь я расскажу о тех, которые считаю наиболее полезными для создания шаблона портфолио.
Шаблон
Разработка шаблона
Первое, что вам нужно, это нарисовать дизайн шаблона. Здесь вы можете выбрать элементы и цвета, которые хотите использовать. Поскольку это шаблон, он должен соответствовать большинству изображений и ситуаций. Так что, возможно, вы захотите сделать это проще, но это зависит от вас.
В любом случае каждый создаваемый вами элемент лучше всего рисовать с помощью инструмента «Фигура». При этом по умолчанию создается векторный слой. Чтобы убедиться в этом, убедитесь, что в меню на панели параметров установлено значение Форма.
Это важно, потому что, в отличие от изображений, векторы не зависят от разрешения. Это дает вам преимущество в изменении элементов без потери качества, как в случае с пикселями. Вот почему большинство графических программ, таких как Illustrator, работают с векторами. Фигуры и векторные слои также отлично подходят для создания логотипа.
Добавление логотипа
Если ваш логотип состоит из множества фигур, выделите их все и превратите в смарт-объект, щелкнув правой кнопкой мыши сверху и выбрав в меню Преобразовать в смарт-объект.
Это другой тип слоя, вы можете не только масштабировать его столько раз, сколько хотите, точно так же, как векторы, но вы также сохраняете исходные данные, чтобы работать без разрушения.
Поэтому каждый раз, когда вы открываете свой смарт-объект, вы по-прежнему будете находить все исходные слои-фигуры, чтобы работать с ними независимо друг от друга.
Еще одна интересная функция смарт-объектов — возможность связать одну или несколько копий.
Это означает, что каждый раз, когда вы изменяете свой логотип, он автоматически применяет изменения ко всем копиям. Это полезно, если ваш дизайн включает более одного логотипа. Для этого создайте копию слоя, перетащив ее на кнопку «Дублировать слой» в нижней части панели.
Если вы хотите, чтобы ваши копии работали независимо друг от друга, вы можете создать копию смарт-объекта, с которой он не связан. Сделайте это, используя Новый смарт-объект через копирование. Вы можете найти его в меню, которое появляется, когда вы щелкаете правой кнопкой мыши по слою.
Добавление текста
Это так просто, как кажется. Когда вы используете инструмент «Текст», он создает текстовый слой. Имейте в виду, что, поскольку это другой тип слоя, не все инструменты доступны для использования. Например, вы не можете использовать фильтры.
Если вы хотите их использовать, вам будет предложено «растрировать слой». Это превратит его в изображение (пиксельный слой). Вы не должны этого делать, если хотите иметь возможность редактировать текст в будущем. Если вы хотите растрировать свой слой, сначала сделайте его копию и отключите оригинал, щелкнув «глаз» рядом со слоем на панели «Слои».
Еще один полезный совет при разработке шаблона – ограничить пространство для текста, чтобы он не испортил дизайн, если вы позже измените или добавите контент.
Вместо того, чтобы просто нажимать и печатать, щелкните и перетащите прямоугольное текстовое поле в то место, где вы хотите разместить текст. Таким образом, все, что вы печатаете, приспосабливается к этому пространству.Я обычно помещаю один рядом с изображением, чтобы добавить всю информацию, такую как название, техника и проект. Затем я могу обновить его для каждого изображения.
Добавление изображений
Фотографии — это звезды вашего проекта, поэтому вы должны работать с ними неразрушающим образом. Лучший выбор для этого — смарт-объект.
Чтобы добавить фотографию в качестве слоя смарт-объекта, выберите Меню->Файл->Поместить. Поскольку в моем дизайне я добавил прямоугольник, который будет служить рамкой для моих изображений, теперь я могу добавить маску слоя, чтобы он поместился внутри, не теряя никакой информации.
Вы можете сделать это, поместив смарт-объект прямо поверх прямоугольника, созданного в начале. Теперь создайте обтравочную маску, нажав Cmd+Alt+g (Ctrl+Alt+g на ПК). Маска покажет изображение через рамку, не обрезая и не изменяя его.
Чтобы обновить изображения, вы можете открыть смарт-объект и поместить туда новый, чтобы не менять слои или маски шаблона.
Сохранить и закрыть
Поскольку вы использовали векторы, тексты и смарт-объекты, вы можете менять разрешение с Интернета на печать столько раз, сколько хотите, сохраняя при этом качество. Просто не забудьте сохранить каждую страницу портфолио отдельно, чтобы не перезаписать шаблон.
Заключение
Я надеюсь, что Как создать шаблон портфолио в Photoshop и извлечь выгоду из типов слоев оказался полезным для вас при создании собственных шаблонов портфолио.
Помните, что каждый шаблон необходимо сохранять в виде PSD-файла, чтобы вы могли вернуться и использовать их снова, когда захотите обновить фотографии или текст. При сохранении в виде PSD-файла сохраняются все ваши слои, чтобы вы могли легко получить к ним доступ и изменить их. Если вы сохраните его в формате JPG или другом формате с потерями, который сглаживает слои, вы больше не сможете их редактировать.
Если у вас есть другие советы по созданию шаблона портфолио, поделитесь ими с нами в комментариях ниже.
Стильное портфолио имеет решающее значение для любого дизайнера. Другие профессии могут позволить себе роскошь описать свои навыки и похвалы словами, но дизайнеры не могут просто описать свою работу; они должны показать это. Дизайнеров чаще всего сравнивают, выбирают и нанимают на основе того впечатления, которое производит их портфолио. Даже если ваши образцы работ являются звездными, само портфолио, возможно, является вашей самой важной дизайнерской работой, и оно должно быть таким же впечатляющим, как и работа в нем. Ниже мы воспользуемся несколькими простыми приемами, которые помогут вам создать стильный и профессиональный макет портфолио.
Изображения:
Теперь, когда у нас есть все, что нужно для создания этого макета, давайте взглянем на наш окончательный результат:
Шаг 1. Создайте документ Photoshop
Откройте Photoshop и создайте новый файл шириной 1100 пикселей и высотой 1500 пикселей.
Шаг 2. Залейте фон
Шаг 3. Установите навигацию
Начнем с верхней навигации. Используйте инструмент «Прямоугольная область», чтобы выделить небольшую область вверху.
Шаг 4. Затемните фон навигации
Шаг 5. Создайте область кнопки навигации
Шаг 6. Добавьте разделители
Шаг 7. Добавьте текст навигации
Теперь добавим текст для наших страниц. Просто выберите текстовый инструмент и введите нужный текст.
Шаг 8. Создайте эффект наведения
Для эффекта наведения мы создадим белую линию с помощью инструмента "Кисть" размером 3 пикселя. Затем выберите инструмент Ластик и удалите края, используя мягкую круглую кисть. Теперь уменьшите непрозрачность до 40%.
Шаг 9. Добавьте свой бренд
Добавьте свой логотип слева от меню навигации.
Шаг 10. Создайте фон
Нам нужна обводка, поэтому нажмите «Слой» > «Стиль слоя» > «Обводка».
Шаг 11. Разделите область содержимого на столбцы
Шаг 12. Добавьте кнопку "Подробнее"
Шаг 13. Добавьте избранные изображения
Теперь добавим изображение справа, а нашу избранную ленту — в правый верхний угол изображения. Я создал ленту с помощью инструмента «Перо» и добавил текст с помощью инструмента «Текст».
Шаг 14. Добавьте тень
Шаг 15. Создайте элемент «Новости»
Шаг 16. Добавьте текст «Новости»
Добавьте текст «новости» с помощью инструмента «Текст».
Шаг 17. Создайте элемент портфолио
Шаг 18. Добавьте изображения и текст портфолио
Теперь добавьте изображение и баннер сбоку. Выберите текстовый инструмент и добавьте текст под изображением.
Шаг 19. Добавьте дополнительные элементы портфолио
Повторите тот же процесс, чтобы создать еще два элемента портфолио.
Шаг 20. Создайте кнопки ниже
Шаг 21. Добавьте разделительные линии
Шаг 22. Добавьте обновления Flickr
Для обновлений Flickr выберите текстовый инструмент и добавьте заголовок. Снова создайте серую рамку с помощью инструмента «Прямоугольник» и добавьте обводку. Теперь создайте новый слой и поместите его под слой с рамкой. Затем выберите мягкую круглую кисть и используйте ее по бокам, чтобы создать эффект тени.
Теперь вставьте изображения в рамку.
Шаг 23. Создание нижнего колонтитула
Многие компании требуют, чтобы кандидаты при подаче заявки на вакансию присылали онлайн-портфолио. Отправка файлов JPEG в заархивированной папке — это 1996 год. Итак, какие у вас есть варианты?
A) Вы можете создать веб-сайт для демонстрации своих работ.
B) Вы можете создать портфолио в формате PDF
В идеале вам нужно сделать и то, и другое.
Предполагая, что у вас уже есть веб-сайт портфолио, я покажу вам, как создать собственную многостраничную книгу портфолио в формате PDF, практически не прилагая усилий с вашей стороны. Для работы вам потребуется несколько файлов PSD или JPEG, а также версия Photoshop (CS5 или выше).
Сначала запустите Photoshop и выберите «Файл» > «Автоматизировать» > «Презентация PDF…».
Вы увидите диалоговое окно ниже.
Нажмите «Обзор», чтобы добавить исходные файлы, и выберите «Многостраничный документ». По умолчанию Photoshop размещает все ваши изображения на белом фоне, но вы также можете выбрать серый или черный фон. Чтобы изменить порядок последовательности изображений, вы можете выбрать и перетащить имена файлов в разделе «Исходные файлы» диалогового окна. ПРИМЕЧАНИЕ. Выбор «Презентация» позволит вам создать презентацию в виде слайд-шоу, включающую переходы. (Для воспроизведения презентации вам понадобится Adobe Acrobat.)
Нажмите «Сохранить», и вы увидите другое диалоговое окно, в котором можно управлять сжатием, безопасностью и даже возможностью встраивания миниатюр страниц. В моем случае я оставляю настройки по умолчанию.
Нажмите «Сохранить PDF» и подождите несколько секунд, пока ваш PDF-файл будет собран. Все!
С помощью шагов, описанных выше, вы можете легко и быстро создать актуальное портфолио в формате PDF, чтобы поделиться с потенциальными компаниями и/или клиентами. Кроме того, это удобный способ собрать электронную книгу в формате PDF со всеми вашими комиксами!
Президент WebFX. Билл имеет более чем 25-летний опыт работы в индустрии интернет-маркетинга, специализируясь на SEO, UX, информационной архитектуре, автоматизации маркетинга и многом другом. Опыт Уильяма в области научных вычислений и образование в Шиппенсбурге и Массачусетском технологическом институте послужили основой для MarketingCloudFX и других ключевых проектов исследований и разработок в WebFX.
В этом уроке по веб-дизайну в Photoshop мы создадим макет чистого и современного веб-сайта. Это первая часть серии руководств, в которых показано, как создать дизайн, а затем преобразовать его в шаблон HTML/CSS.
Серия руководств по минимальному и современному макету портфолио
Предварительный просмотр
Предварительный просмотр того, что мы будем создавать вместе. Нажмите на изображение, чтобы увеличить его.
Создать новый документ Photoshop
1 Начните с нового документа (Ctrl + N) в Photoshop; сделайте документ 1200 x 1200px с прозрачным фоном.
Создание фона заголовка
2 Выберите инструмент Rectangular Marquee Tool (M) на панели инструментов, а затем создайте прямоугольное выделение, охватывающее ширину холста; высота прямоугольника должна быть около 120px. 3 С помощью инструмента "Заливка" (G) залейте выделение любым цветом. Дважды щелкните слой на панели слоев, чтобы открыть диалоговое окно «Стили слоя», затем добавьте наложение градиента, используя приведенные ниже настройки.
У вас должно получиться что-то вроде этого.
Создание фона области содержимого
5 После того, как вы настроили инструмент «Градиент» (G), перетащите его поверх созданной нами области выделения и начните перетаскивать от верхней середины выделения примерно до четверти пути вниз по холсту Photoshop.
Настройка направляющих
6 Теперь мы собираемся настроить некоторые направляющие, чтобы макет веб-сайта оставался шириной 850 пикселей на протяжении всего процесса проектирования. Чтобы создать свое первое руководство, выберите «Вид» > «Новое руководство». В диалоговом окне "Новая направляющая" введите 175 пикселей и убедитесь, что для параметра "Ориентация" задано значение Вертикальная.
Это создаст направляющую в 175 пикселях от левого края холста размером 1200 пикселей. 7 Повторите предыдущий шаг и создайте еще одну вертикальную направляющую, только на этот раз введите 1025 пикселей (175 пикселей + 850 пикселей = 1025 пикселей). Это даст нам макет шириной 850 пикселей с центром на холсте шириной 1200 пикселей.
Дизайн раздела заголовка
8 Выберите инструмент «Горизонтальный текст» (T), а затем добавьте заголовок макета и текст слогана вверху напротив левой направляющей. 9 Создайте новый слой под текстом заголовка вашего макета, а затем подготовьте Rectangular Marquee Tool (M). Сделайте выбор в области заголовка; выделение должно занимать всю ширину, но только половину высоты заголовка (около 60 пикселей в высоту).
Создание навигации
11 Выберите инструмент Horizontal Type Tool (T) с размером шрифта около 11-12 пикселей. Добавьте фиктивный навигационный текст справа от заголовка и слогана вашего макета; оставляйте поля между каждой фиктивной ссылкой. 12. Между каждой фиктивной ссылкой добавьте линию толщиной 1 пиксель с помощью инструмента «Прямоугольное выделение» (M); линия должна идти от верха заголовка/навигации к низу.
Создание области приветствия
15 Выберите инструмент «Горизонтальный текст» (T), а затем добавьте фиктивный текст приветствия; снова поместите текст напротив левой направляющей и оставьте приличное пространство между заголовком/навигацией и текстом приветствия. В нижней части приветственного текста я добавил 4 пункта для небольшого списка. Маркированные точки — это значки из набора функциональных значков (имя файла — circle_blue.jpg).
16 Теперь мы собираемся добавить приветственное изображение справа от нашего приветственного текста; Я использую скриншот Six Revisions. Обрежьте изображение и удалите все ненужные части, которые не нужны. Когда изображение будет готово, измените перспективу, выбрав «Правка» > «Трансформировать» > «Перспектива».
20 Затем перейдите в меню «Фильтр» > «Размытие» > «Размытие по Гауссу» и размойте эллипс примерно на 1–2 пикселя. 21 Дублируйте приветственное изображение и слои тени, а затем перетащите их под оригиналы. Переместите дублированное изображение и тень так, чтобы оно выглядело так, как будто оно стоит за первым.
22. Переместив его на место, выберите «Фильтр» > «Размытие» > «Размытие по Гауссу» и размойте второй снимок экрана на 1 пиксель.
Создание горизонтального 3D-разделителя
Дизайн области содержимого
30 Выберите инструмент «Горизонтальный текст» (T), а затем добавьте фиктивный заголовок и абзац с правой стороны слоя под 3D-разделителем. 31. В левой части макета рядом с фиктивным абзацем создайте прямоугольник со скругленными углами с помощью инструмента «Прямоугольник со скругленными углами» (U); убедитесь, что для параметра «Радиус» установлено значение 10 пикселей (по умолчанию радиус равен 10 пикселей). 32. После того, как вы нарисовали контур, выберите инструмент «Перо» (P), щелкните правой кнопкой мыши внутри прямоугольника и выберите Сделать выделение.
35 Теперь добавьте стили слоя «Тень», «Внутренняя тень» и «Обводка» к слою с прямоугольником со скругленными углами (дважды щелкните слой на панели «Слои», чтобы открыть диалоговое окно «Стиль слоя»). Используйте настройки, как показано на следующих рисунках. 36 Выберите инструмент "Многоугольное лассо" (L) и сделайте треугольное выделение вокруг нижнего угла прямоугольника.
37 Вырежьте и вставьте выделение на новый слой. Как только вы повторно вставите отрезанный угол в новый слой, вы потеряете его стили слоя. Поэтому, прежде чем мы двинемся дальше, повторно примените стили слоя сверху к угловому слою.
38 После повторного применения стилей слоя поверните угол на 180 градусов, выбрав «Правка» > «Трансформировать» > «Повернуть на 180»; поместите угол обратно в нижнюю часть прямоугольника. 39. Чтобы закончить поле содержимого, добавьте фиктивное содержимое.
Создание области нижнего колонтитула
40 Выберите инструмент Rounded Rectangle Tool (U) и растяните прямоугольник размером с нижний колонтитул. 41 Залейте прямоугольник любым цветом, затем добавьте наложение градиента со следующими настройками. 42 Наконец, добавьте информацию о нижнем колонтитуле в свой нижний колонтитул, и все готово!
Готово!
На этом руководство завершено. Спасибо за внимание. В следующем уроке я покажу вам, как преобразовать его в работающий шаблон портфолио.
Поделитесь своей работой на Flickr
Если вы следовали этому руководству, почему бы вам не показать его остальным участникам сообщества Six Revisions, разместив его в группе Six Revisions на Flickr?
Скачать
Если вы хотите скачать PSD-файл этого руководства, вы можете скачать его в виде ZIP-архива.
Читайте также: