


#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сылки к уроку:
Материал для данного урока
Источник вдохновения для урока
Оставь комментарий!
8 thoughts on “#1 — Создание дизайна сайта-портфолио. Начало”
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
все хорошо, но лишние шумы присутствуют.
Поправте, пожалуйста, ссылочку на материалы урока =))
И все таки, поправьте, пожалуйста, ссылку на материалы)
Материал для данного урока — ссылка не работает . 404
Восстановите, пожалуйста, ссылки на материалы данного урока.
Супер! Александр, огромное спасибо! Очень полезный материал.
Восстановите, пожалуйста, ссылки на материалы урока.
Очень полезный материал. Я буду применять ваши знания в своем проекте roll the ball. огромное спасибо, Александр!