Получить бесплатную консультацию
Оставьте свои контакты, и с Вами
свяжутся наши специалисты
Заявка успешно отправлена!
С вами свяжется наш консультант :)
Произошла какая-то ошибка, пожалуйста, обновите страницу и попробуйте снова.
Новичок
4 урока
(47 минут)
Курс
Дизайн сайта портфолио в Photoshop
Курс научит вас рисовать дизайн сайта в Photoshop.

#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 — Создание дизайна сайта-портфолио. Начало

  1. Дмитрий:

    все хорошо, но лишние шумы присутствуют.

  2. Роман Лойко:

    Поправте, пожалуйста, ссылочку на материалы урока =))

  3. lele4ka.11@mail.ru:

    И все таки, поправьте, пожалуйста, ссылку на материалы)

  4. doktor081:

    Материал для данного урока — ссылка не работает . 404

  5. Adadjio:

    Восстановите, пожалуйста, ссылки на материалы данного урока.

  6. Marina_L:

    Супер! Александр, огромное спасибо! Очень полезный материал.

  7. Артём:

    Восстановите, пожалуйста, ссылки на материалы урока.

  8. Tompitt123:

    Очень полезный материал. Я буду применять ваши знания в своем проекте roll the ball. огромное спасибо,  Александр!

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

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