Нарисовать сайт: Пошаговая инструкция, как создать макет сайта самостоятельно. Онлайн или в Photoshop — Независимое театральное объединение "Зрительские симпатии"

Содержание

от знакомства с интерфейсом до экспорта / Skillbox Media

Sketch — универсальный графический редактор для macOS, в котором легко нарисовать сайт с нуля и создать макет мобильного приложения. Чем пользоваться, чтобы рисовать:

Слева	В центре	Справа
Страницы и список артбордов для навигации по макету. Все инструменты, в том числе и создание нового артборда, находятся в Insert	Рабочая область с артбордами	Инспектор, который отвечает за свойства выделенного артборда или элемента: размеры, параметры наложения, тени, выравнивание и положение

Функции Sketch легко расширить с помощью бесплатных плагинов, которые встраиваются в интерфейс и помогают уменьшить рутину и ускорить рабочий процесс.

На скриншоте с интерфейсом Sketch я показал плагин Craft от Invision, который помогает работать с контентом: моментально вставлять изображения в макет и делать копии элементов.

Есть специальные менеджеры, которые помогают контролировать и выбирать нужные плагины.

Где искать плагины

Удобные плагины в гайдлайнах СКБ Контур

Большой список плагинов на GitHub

В прошлых статьях мы рисовали скетч и прототип для сайта строительной тематики. А сейчас сделаем макет этого сайта в Sketch.

Прототип и скетч сайта для строительных блоков

Создаём новый артборд: нажимаем кнопку

Insert и в раскрывшемся меню выбираем Artboard.

Справа задаём нужный размер.

Для планшетов подойдёт ширина в 768 или 960px, а для компьютера лучше выбрать 1024 и 1440px. Для этого макета я выбираю предустановленный размер Desktop HD.

Создать артборд можно с помощью горячей клавиши А на клавиатуре

Весь контент на сайте строится по сетке. Сетку подбирают под каждый проект. С помощью

Show Layout в View можно скрыть или показать на артборде уже настроенную сетку. Настройки новой сетки задаются так: View → Layout Settings.

В появившемся окне определяем ширину сетки, отступы и количество колонок.

Выбираем «ОК», смотрим на результат.

Чтобы ответить на вопрос, как нарисовать шапку сайта, нужно понять её типичную структуру.

Обычно в шапке размещают логотип и название компании, элементы меню, телефонные номера и другие контактные данные. Импортируем PNG-файл с логотипом: для этого можно перетянуть его прямо на артборд или выбрать Insert → Image.

Элементы меню и номер телефона создаём с помощью обычного текста: Insert → Text или клавиша T на клавиатуре.

Для кнопки «Перезвоните мне» используем инструмент Text и прямоугольник: Insert → Shape → Rectangle.

Рисуем контур нужного размера, а затем устанавливаем радиус углов и цвет обводки.

Первый экран должен привлечь внимание пользователя и рассказать, о чём сайт. Заголовок и абзац текста задаём также с помощью инструмента Text, вставляем иллюстрацию.

Кажется, что дом висит в воздухе и не согласуется с окружающим миром. Чтобы вернуть его на землю и задать тон для следующего экрана сайта, нарисуем серую подложку. Для этого:

Insert → Vector и создаём контур около изображения дома.

Заполняем контур серым цветом и передвигаем его за слой с домом.

Следующий экран — подробный рассказ про стеновой блок и его отличие от конкурентов. Используем изображение блока и его описание. Для каждого из преимуществ подберём иконку.

Иконку я разместил на круглой оранжевой подложке. Выровнял по центру относительно друг друга, заполнил белым иконку.

Чтобы показать дома, сделанные из блоков, используем слайдер с фотографиями.

Каждая страница слайдера — это шесть квадратных фотографий домов. Все исходные изображения — разные по длине и ширине. Чтобы быстро привести их к одному размеру, будем пользоваться масками.

Для этого нарисуем прямоугольник нужного размера (Insert → Rectangle) и разместим фотографию над ним. Затем выберем слой с этим прямоугольником и нажмём кнопку Mask.

Проводим эту операцию для остальных фотографий и рисуем элементы управления слайдером.

Чтобы верстальщику было легче разобраться в проекте, необходимо организовать слои: сгруппировать и осмысленно назвать элементы.

Сейчас все слои перемешаны, нет иерархии

Чтобы сгруппировать элементы, достаточно выделить их и использовать сочетание клавиш Cmd + G. Переименовать слой можно с помощью комбинации

Cmd + R.

Теперь порядок

Получить изображения для вёрстки можно как стандартными возможностями Sketch, так и с помощью сторонних решений — сервиса Zeplin или плагина Sketch Measure. В этом макете мало элементов и они не требуют сложной нарезки, поэтому используем обычный экспорт: выделяем нужные слои и в правом углу выбираем Export Layers.

Sketch — удобный редактор для дизайна сайтов и приложений, возможности которого легко расширяются с помощью плагинов. Разобраться с возможностями

Sketch не составит труда, даже если до этого вы не пользовались графическими редакторами.

Но Sketch — всего лишь инструмент. Чтобы рисовать современные макеты сайтов, дизайнер должен разбираться также в композиции, типографике и работе с цветом. Эти знания и навыки работы в графических редакторах можно получить на курсе «Веб-дизайн с 0 до PRO» от Skillbox.

Онлайн Вебсайт Создатель | Renderforest

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

Начать бесплатно