Дополнения

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

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

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

207 785 чел. 399 346 работ 4 090 уроков
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Средняя

Дизайн винтажного портфолио в Фотошоп

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

А теперь, прежде чем приступим к уроку, посмотрите результат.

. Создание документа

Откройте программу Photoshop. Заметьте, что автор использует версию CS6, но вы можете выполнить этот урок с помощью более ранних версий. Теперь идите в меню Файл – Создать (File>New). Введите название документа, его ширину и высоту, а затем нажмите на кнопку ОК.

Ваш документ после этих действий автоматически откроется. Нажмите комбинацию клавиш Ctrl + R, чтобы показать линейки для направляющих. Теперь идите в меню Файл - Сохранить как (File>Save as), чтобы сохранить файл.

Создание фона

Активируйте инструмент Заливка (Paint Bucket Tool), чтобы изменить цвет переднего плана на # e3dfc6, теперь щёлкните инструментом чтобы залить фон.
Используйте инструмент Прямоугольное выделение (Rectangular Marquee Tool), чтобы создать серую полоску с цветом # 706d5c и с размером 1000 x 52 пикс.

Отступите от верного бара 117 пикселей и создайте ещё один бар размером 1000 x 5 пикс.

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

Создание меню

Создайте новую группу и назовите её -  the links. Активируйте инструмент Текст (Text tool), чтобы создать надписи для ссылок в меню. Шрифт, используйте Helvetica Neue LT Std, с цветом #706d5c и размером 20px.

Для имитации наведения активной ссылки-надписи, автор создал красный прямоугольник с цветом # d7281e, но только под одной из ссылок (кстати, вы можете применить цвет к прямоугольнику по вашему вкусу).

Используйте инструмент Прямоугольное выделение (Rectangular Marquee Tool), чтобы создать прямоугольник. Залейте его цветом фона # e3dfc6 и расположите ниже красного прямоугольника.

Логотип

Для поиска логотипа автор использовал платный ресурс Shutterstock. Вы конечно же можете использовать свой логотип. Откройте его в фотошоп и перетащите в документ с портфолио или нажмите комбинацию клавиш Ctrl + C, чтобы скопировать логотип и, перейдя в основной документ, вставьте его, используя комбинацию клавиш Ctrl + V.

Используйте инструмент Эллипс (Elipse tool ), чтобы создать круг с таким же размером как у вашего логотипа. Для круга используйте тот же цвет, который используется для фона # e3dfc6.

Расположите слой с кругом в палитре слоёв под логотипом, и нажмите комбинацию клавиш Ctrl + T, чтобы активировать Свободную трансформацию (Free Transform). В верхнем меню настроек вместо значение 100% поставьте 110% и нажмите клавишу ENTER.

Идём в меню Слои – Стиль слоя – Обводка (Layer> Layer Style> Stroke), затем увеличьте размер обводки до 5 и измените цвет на # 706d5c.

Чтобы закончить работу с логотипом, создайте новый слой и инструментом Прямоугольное выделение (Rectangular Marquee Tool) создайте выделение с высотой 117 пикселей. С помощью инструмента Заливка (Paint Bucket Tool) залейте выделение цветом фона # e3dfc6. Этот слой должен быть ниже логотипа в палитре слоёв.

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

Содержание левой части

Активируйте инструмент Текст (Text tool), чтобы создать надпись в левой части портфолио. Автор использовал два следующих цвета для текста: серый # 706d5c и красный # d7281e. Надпись будет с тем же шрифтом, как использовали для меню, но с размером 90пт.

Так же создайте текстовый блок ниже главной надписи, используя шрифты Times New Roman и Tahoma с размером 12 пт.

Содержание правой части

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

Вот результат на данный момент.

Разделитель

Теперь нужно создать бар-разделитель под контентом. Дублируйте бар с размером 1000x5 пикселей, который мы создали ранее, затем поместите его под содержанием.

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

Помните метод как разместить элемент в центр изображения.  Для этого нужно нажать комбинацию клавиш Cltr + A, появится выделение вокруг всего документа. Теперь активируйте инструмент Перемещение (Move tool) и нажмите на значок Выравнивание центров по горизонтали (Align the centres on the horizontal direction ), который находится в панели параметров в верхней части программы.
Теперь к логотипу добавьте два стиля слоя: Наложение цвета (Color Overlay), поставив цвет # e3dfc6 и Обводку (Stroke) со значением 5 пикс.

Результат на данный момент.

Создание футера

Для создания футера дублируйте первый серый бар, созданный ранее. Используйте инструмент Перемещение (Move tool), чтобы переместить копию к основанию Вашего документа. Так же дублируйте красный логотип и разместите его в нижней части портфолио. Добавьте в стилях слоя к логотипу Обводку (Stroke) со значением 5 пикселей и цветом #e3dfc6.

Используйте инструмент Текст (Text Tool), чтобы создать копирайт вашего сайта слева от логотипа.  Автор использовал серый цвет # 706d5c и красный цвет # d7281e для надписи, а так же шрифты Times и Myriad.

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

Загрузите иконки Twitter, Facebook и Dribbble. Уменьшите загруженные иконки относительно их текста. Каждой иконке в стилях слоя добавьте Наложение цвета (Color Overlay), поставив цвет # 706d5c.

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

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

Автор: Grafpedia

Комментарии 35

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

Спасибо, почему-то у меня этот урок не "шел". Несколько раз начинала делать, потом бросала. И все-таки я его добила)

Чуть-чуть по-другому, но вроде бы не плохо.

Спасибо, было интересно. Вот мой вариант.

Очень клевый урок, просто и со вкусом)

Отличный урок! Спасибо!

Интересный урок.В каждом уроке что-то новое узнаешь.Спасибо.

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

Замечательный урок, спасибо!

Я тут подумала, и решила работу исправить, это выглядит более романтично! Еще раз спасибо автору!

Спасибо большое за МК!

Спасибо большое) Это самый короткий и понятный урок)

Вполне понятный урок

Grafpedia - самый прекрасный автор уроков по вэб-дизайну! спасибо вам за перевод огромное, очень порадовали!

Отличный урок. Мой быстрый вариант)

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

Большое спасибо!

Спасибо за урок и перевод :)

Шош уж вышло так вышло

Сделала немного по-другому. Спасибо за полезный урок!

Еще 1 Комментарии
Добавить комментарий / работу

Новые работы пользователей

{{work.views}}

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска, или сбросить фильтры


Смотреть все работы

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:


Название:
{{name}}
Описание:

{{text}}

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

После добавления работы:


Запланировать публикацию

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

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

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules