Новичок
4 урока
(47 минут)
Курс
Дизайн сайта портфолио в Photoshop
Курс научит вас рисовать дизайн сайта в Photoshop.

#2 — Создание дизайна сайта-портфолио. Продолжение

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


Дизайн сайта-портфолио в Photoshop: область для демонстрации фотографий

Создаем область для демонстрации наших фотографий на сайте-портфолио. Выбираем инструмент Rectangle Tool (U) и рисуем серый прямоугольник размером 1200px*880px. Затем добавляем строку «Последние фотографии». Помните, текст должен быть читаемым и приятным, поэтому мы окрасили надпись в серый цвет, выбрали шрифт Lato (жирный шрифт) размером 12px. Обратите внимание, что расстояние между буквами довольно значительное — 270. Напоследок, выставляем горизонтальную направляющую от заголовка 80рх.

Дизайн сайта-портфолио в Photoshop: добавление фотографий

Приступаем к добавлению фото на сайт-портфолио. Для этого создаем новую группу слоев для первого фото и инструментом «Прямоугольник» (Rectangle Tool (U)) задаем площадь 235х235 px, куда поместим фото. После размещения настроим контрастность изображения и добавим в нижней части фото счетчика лайков.

Выставляя направляющие по 15рх, кнопкой «Надпись» наносим количество лайков на фото. Теперь выбираем Rectangle Tool (U) и рисуем белый прямоугольник ниже фото. Используя инструмент Horizontal Type Tool (T), напишем краткое описание фото: название, в том числе хэштеги, а также дату публикации фото.

Для остальных фото — продублируйте нашу группу слоев и замените фото с описанием.

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

Дизайн сайта-портфолио в Photoshop: рисуем footer (подвал)

Отделяем линией, толщиной в 1рх, наш подвал. Не забудьте создать отдельный слой под названием footer. Затем добавляем надписи и выравниваем их посередине. Отключаем наши направляющие с помощью горячих клавиш Ctrl+H. И вуаля, шаблон готов!

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog.

Cсылки к уроку:

Материал для данного урока
Источник вдохновения для урока

Материалы к уроку:
Делись:

Оставь комментарий!

2 thoughts on “#2 — Создание дизайна сайта-портфолио. Продолжение

  1. Marina_L:

    Замечательный урок! Очень понравилось!:) Спасибо, Александр!

Добавить комментарий

Рекомендуемые курсы