#1 — Создание дизайна сайта-портфолио. Начало

Приобретать познания недостаточно еще для человека, надо уметь отдавать их в рост.
И. Гёте

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

С этого урока мы начнем рассматривать один из самых полезных инструментов веб-дизайна – Рhotoshop, в котором будем рисовать сайт-портфолио. Сегодня начнем разбираться с созданием шапки сайта, в следующем уроке закончим остальную часть, а затем быстро адаптируем проект для мобильных устройств. Важно понимать, что шапка сайта играет очень большую роль в привлечении пользователей и их желании оставаться на сайте, поэтому отнеситесь к созданию дизайна сайта в Photoshop серьезно.

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

Дизайн сайта в Photoshop начинается с создания нового файла «Portfolio.psd». Зададим ширину нашему документу 1200px, высоту 2040рх, чтобы наш сайт нормально отображался на экранах с большим разрешением.

Дизайн сайта в Photoshop: создание скелета сайта

Приступаем к созданию скелета нашего сайта. Для этого создаем сетку, вытягивая направляющие, и устанавливаем первую направляющую на 100рх, вторую на 1100рх и третью на 600рх. Это делается для того, чтобы контент не прижимался к краям и наши надписи центрировались строго посередине сайта. Для структуры сайта создаем 3 группы: Heаder, Photos и Contact.

Дизайн сайта в Photoshop: вставка изображений, надписей и кнопок социальных сетей

Для нашей шапки (группа Heаder) инструментом «Прямоугольник» задаем площадь 1200px*600px. Добавляем изображение, выравниваем и применяем эффекты для настройки контрастности изображения. На видеоуроке вы увидите, какие инструменты мы для этого применяем, в том числе и эффекты для слоев.

Затем добавляем логотип и кнопки социальных сетей размером 32рх, используя при этом горизонтальную направляющую примерно на 50рх. В конце вставляем надписи и выравниваем их посередине нашей шапки. Остальную часть создания дизайна сайта в Photoshop мы рассмотрим на следующем видеоуроке!

На этом все! Ставьте лайки и оставляйте свои комментарии под этим видео. Нам очень важно знать ваше мнение о видеокурсе.

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

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

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