Будь вкурсе свежих уроков!
В категории: Обучение веб-дизайну
Будь вкурсе самого свежего материала. Где мы отправляем статьи, видео и много чего интересного.
Курс доступен после регистрации ← ЖМИ!

Как делать веб дизайн сайта в Photoshop

387 просмотров

Добро пожаловать в мини-курс по Веб-дизайну. Всего будет 5 уроков, где мы научимся делать прототип сайта, разрабатывать дизайн и далее будем выкладывать его на Bechance.

  • 1-3 урока мы посветим разработке прототипа и дизайну;
  • 4 урок мы будем работать с адаптивным дизайном нашего проекта;
  • 5 урок рисовать макет для портфолио на Bechance.

1 этап разработки web-дизайна сайта

На первом этапе вам необходимо прописать текстовый прототип в Word или Блокноте.
В тексте нужно описать:

  • Какие задачи решает сайт
  • Для кого этот сайт
  • Какая аудитория
  • Какие боли у вашего потребителя
  • Что вы будете говорить, последовательно
  • Какие будут блоки, расписать каждый блок и призывы к действию (заголовки)
  • Какие разделы (меню, формы, подвал)

2 этап, настройка Фотошопа

Перейдём к настройкам: заходим в Photoshop. Для Windows: Меню/Редактирование/Настройки/Единицы измерения и линейка. Для Mac OS: Menu/Photoshop CC/Preferences/Units & Rulers.

Далее меняем настройки, во всех параметрах требуется установить единицы измерения «Пиксели», так как мы будем работать с дизайном для сайта и все измерения будут происходить в пикселях.


3 этап, создание документа

Нажимаем CTRL+N или переходим в Меню/Файл/Создать. Указываем параметры - Ширина: 1920, высота: 1080px и установить галочку Монтажные области/Artboards. Разрешение 72px (Пиксели/Дюйм). Очень важно указать следующий параметр - Цветовой режим: Цвет GRB, 16BIT, для более плавного отображения градиентов. В этом же окне мы можем указать цвет заднего фона. После всех настроек можно создать документ.


4 этап, настройка сетки

Переходим в Меню/Просмотр/Новый макет направляющих. Данный инструмент позволяет настраивать сетку. Вам не нужно качать никаких исходников для Bootstrap или 980grid. Данный инструмент отлично подходит для этих целей. Чтобы создать Bootstrap-сетку вам необходимо указать следующие параметры: 12 столбиков, Ширина 70 пикселей, с отступами 30 пикселей. Либо используйте так как указано в видео: 24 column, Width 60px, Gutter 20px. Также есть возможность удалить существующие направляющие, требуется установить галочку Clear Existing Guides.



Приятного просмотра…
Вы можете поделиться или сохранить для себя этот урок в социальных сетях:

Оставьте свой отзыв, для улучшения качества. Сейчас: 0 отзывов

Информация

Посетители, находящиеся в группе Незарегистрированные, не могут оставлять отзывы к данному курсу.