Sketch — векторный редактор с удобным и простым интерфейсом. Чтобы нарисовать макет сайта, достаточно разобраться с базовыми инструментами. Расскажем, как освоить эти инструменты и быстро создать дизайн страницы.
Глеб Летушов
Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.
Разобраться с интерфейсом
Sketch — универсальный графический редактор для macOS, в котором легко нарисовать сайт с нуля и создать макет мобильного приложения. Чем пользоваться, чтобы рисовать:
Уроки Sketch. Разрабор интерфейса и базовых функций в 2022
Страницы и список артбордов для навигации по макету. Все инструменты, в том числе и создание нового артборда, находятся в Insert
Рабочая область с артбордами
Инспектор, который отвечает за свойства выделенного артборда или элемента: размеры, параметры наложения, тени, выравнивание и положение
Установить плагины
Функции Sketch легко расширить с помощью бесплатных плагинов, которые встраиваются в интерфейс и помогают уменьшить рутину и ускорить рабочий процесс.
На скриншоте с интерфейсом Sketch я показал плагин Craft от Invision, который помогает работать с контентом: моментально вставлять изображения в макет и делать копии элементов.
Есть специальные менеджеры, которые помогают контролировать и выбирать нужные плагины.
Где искать плагины
Создаём новый артборд
В прошлых статьях мы рисовали скетч и прототип для сайта строительной тематики. А сейчас сделаем макет этого сайта в Sketch.
Создаём новый артборд: нажимаем кнопку Insert и в раскрывшемся меню выбираем Artboard. Справа задаём нужный размер.
Для планшетов подойдёт ширина в 768 или 960px, а для компьютера лучше выбрать 1024 и 1440px. Для этого макета я выбираю предустановленный размер Desktop HD.
Задаём сетку
Весь контент на сайте строится по сетке. Сетку подбирают под каждый проект. С помощью Show Layout в View можно скрыть или показать на артборде уже настроенную сетку. Настройки новой сетки задаются так: View → Layout Settings.
В появившемся окне определяем ширину сетки, отступы и количество колонок.
Как пользоваться Sketch App? РУКОВОДСТВО ПОЛЬЗОВАНИЯ для верстальщиков
Выбираем «ОК», смотрим на результат.
Создаём шапку сайта
Чтобы ответить на вопрос, как нарисовать шапку сайта, нужно понять её типичную структуру. Обычно в шапке размещают логотип и название компании, элементы меню, телефонные номера и другие контактные данные. Импортируем PNG-файл с логотипом: для этого можно перетянуть его прямо на артборд или выбрать Insert → Image.
Элементы меню и номер телефона создаём с помощью обычного текста: Insert → Text или клавиша T на клавиатуре.
Для кнопки «Перезвоните мне» используем инструмент Text и прямоугольник: Insert → Shape → Rectangle. Рисуем контур нужного размера, а затем устанавливаем радиус углов и цвет обводки.
Рисуем макет сайта
Кажется, что дом висит в воздухе и не согласуется с окружающим миром. Чтобы вернуть его на землю и задать тон для следующего экрана сайта, нарисуем серую подложку. Для этого: Insert → Vector и создаём контур около изображения дома.
Заполняем контур серым цветом и передвигаем его за слой с домом.
Следующий экран — подробный рассказ про стеновой блок и его отличие от конкурентов. Используем изображение блока и его описание. Для каждого из преимуществ подберём иконку.
Иконку я разместил на круглой оранжевой подложке. Выровнял по центру относительно друг друга, заполнил белым иконку.
Чтобы показать дома, сделанные из блоков, используем слайдер с фотографиями. Каждая страница слайдера — это шесть квадратных фотографий домов. Все исходные изображения — разные по длине и ширине. Чтобы быстро привести их к одному размеру, будем пользоваться масками.
Для этого нарисуем прямоугольник нужного размера (Insert → Rectangle) и разместим фотографию над ним. Затем выберем слой с этим прямоугольником и нажмём кнопку Mask.
Проводим эту операцию для остальных фотографий и рисуем элементы управления слайдером.
Наводим порядок в слоях
Чтобы верстальщику было легче разобраться в проекте, необходимо организовать слои: сгруппировать и осмысленно назвать элементы.
Чтобы сгруппировать элементы, достаточно выделить их и использовать сочетание клавиш Cmd + G. Переименовать слой можно с помощью комбинации Cmd + R.
Экспортируем
Получить изображения для вёрстки можно как стандартными возможностями Sketch, так и с помощью сторонних решений — сервиса Zeplin или плагина Sketch Measure. В этом макете мало элементов и они не требуют сложной нарезки, поэтому используем обычный экспорт: выделяем нужные слои и в правом углу выбираем Export Layers.
Заключение
Sketch — удобный редактор для дизайна сайтов и приложений, возможности которого легко расширяются с помощью плагинов. Разобраться с возможностями Sketch не составит труда, даже если до этого вы не пользовались графическими редакторами. Но Sketch — всего лишь инструмент. Чтобы рисовать современные макеты сайтов, дизайнер должен разбираться также в композиции, типографике и работе с цветом. Эти знания и навыки работы в графических редакторах можно получить на курсе «Веб-дизайн с 0 до PRO» от Skillbox.
Источник: skillbox.ru
Почему я выбрал Sketch
Я работаю в Photoshop всю свою дизайнерскую жизнь и знаю его достаточно хорошо. Но, из-за своей универсальности и обилия функций, он очень тяжелый. Я не раз слышал мнения, что для интерфейсов программа не предназначена, нужно работать в Illustrator, inDesign, Fireworks… Sketch. Каждый работает как может, я же отдавал предпочтение именно Photoshop вплоть до последнего времени, когда нашел для себя более удобным инструментом Sketch
Справедливости ради я скажу, что Photoshop делает хорошие шаги вперед, но это не отменяет его тяжести. Интерфейсы проектировать в нем можно достаточно спокойно, проблемы возникают лишь при изменении больших проектов. Все функции, которые есть в Sketch, есть и в Photoshop, либо их можно практически равноценно заменить. Главный минус в нехватке мобильности.
Кроме того, для Photoshop есть огромное количество ресурсов, исходников, плагинов и тд. и это удобно. Хотя программа в этом параметре неумолимо подтягивается.
В команде Sketch всего 7 человек, но инноваций от них больше, чем от гигантской команды Photoshop. Ниже я расскажу основные плюсы и минусы приложения, и отмечу наиболее весомые его функции
Основы работы в Sketch
Символы
Символы — очень хорошая функция, которая позволяет изменять один и тот же элемент на всех экранах сразу. Этакий аналог Смарт-объектов/Связанных Смарт-объектов, но гораздо более легкий.
Например, можно задать как символ нав-бар приложения (это то место, где обычно расположен заголовок экрана). Теперь, изменяя нав-бар на одном макете, меняется нав-бар на всех объектах, где использован этот символ. Причем, изменения текста, входящего в символ, можно исключить. То есть, меняться будет только стиль блока.
Более того, сильно облегчена работа над приложениями iOS. Ребята из Teehan+Lax подготовили базовый шаблон для Sketch «iOS UI Design», открыв который, вы получаете множество встроенных символов iOS8: кнопки, разделители, клавиатуры, формы и тд.
Стили текста
В Photoshop стили текста появились не так давно, и они очень тормозят, а здесь все меняется с секундной задержкой. Изменяя стиль текста, меняются все текстовые блоки с этим стилем.
Экспорт
Очень быстрый экспорт, как слоев так и отдельных экранов. В Sketch встроен экспорт для разрешений 1х, 2х, 3х и тд. Глазом моргнуть не успеете, как в указанной папке появляются все заданные экраны. Да что там, экспортировать файлы можно, просто перетаскивая их из программы на рабочий стол!
В Photoshop есть плагины для нарезки слоев в нескольких разрешениях. Для нарезки экранов я пользовался Layer Comps to files, но экспорт из них ну очень медленный (до нескольких минут).
Легкие файлы
Скетч векторный, и его файлы весят очень немного. Обычный файл на несколько экранов занимает примерно 10-20Мб, а вот файл Photoshop от 100Мб (опять же, если пользоваться Layer Comps). Работать в Sketch легко и не нервируют тормоза.
Настройка
Вы можете настроить свое рабочее пространство, как вам угодно.
Все на виду
Используйте артборды — и все экраны/страницы сайта будут всегда на виду. В Sketch есть множество встроенных темплейтов для различных экранов (преимущественно для iOS и респонсив веб).
Сетка
В программу встроена возможность создания сетки
Стили
На один и тот же объект можно добавлять сразу несколько градиентов, обводок, и всего, чего хотите
Шейпы
Очень простая работа с шейпами. Можно скруглять углы когда угодно и какие угодно, можно добавлять анкорные точки, объединять шейпы и тд.
Умные направляющие
Работают как и в Photoshop. Если выбрать объект, зажать Alt и навести на другой объект, вы увидите расстояние между ними.
Цвета
Не смотря на то, что при первом знакомстве со Sketch мне не понравилось отсутствие панели Swatch, оказалось, что работать с цветом все же достаточно удобно. Хороший плюс — программа автоматически «коллекционирует» цвета, которые используются в текущем проекте
Шрифты
Здесь мощный плюс в том, что изначально в программу встроены некоторые Google Web Fonts — Avenir Next, Open Sans и Roboto, а также платные из TypeKit — Museo Sans и Proxima Nova.
Иконки
Как я уже писал, пока нет такого раздолья, как для Photoshop, но базовый набор все же есть. Самая большая коллекция иконок на sketchappsources
Превью макетов сразу на телефоне
Есть просто замечательное (но за $5) приложение — Sketch Mirror
Оно позволяет просматривать то, что вы делаете в Sketch сразу же на телефоне. Артборды пролистываются свайпом.
Минусы
- Sketch только для пользователей Mac
- Сейчас он дороже Photoshop ($100 за версию vs 3600р/год)
- Мало бесплатных (и платных) ресурсов
- Нет свочей
- Нет Layer Comps
- Нет трансформации через анкорные точки
- Некоторое количество багов
В следующих статьях я поделюсь хитростями работы и неочевидными функциями Sketch, которые успел выучить, а также полезными ресурсами для работы с программой.
КОММЕНТАРИИ
Давно использую Sketch для проектирования и рисования интерфейсов, очень сильный инструмент и ничего лишнего.
Мне кажется, или почти все + скетча есть у fireworks?
divone :
Последнее время замечаем, что значительная часть веб-дизайнеров пересаживается на иллюстратор. А вот со скетчем ещё не сталкивались. Посмотрим, спасибо!
Источник: naikom.ru
Программа Sketch (векторный редактор)
На протяжении многих лет лидером среди графических программ был Photoshop. Но в последнее время все больше дизайнеров переходят на использование программы Sketch, помимо того, в этой программе используют полезные плагины https://ux.pub/nezamenimye-sketch-plaginy-dlya-upravleniya-dizayn-sistemoy/. Данное приложение – в какой-то мере photoshop аналог, но он обладает рядом преимуществ по сравнению с другими подобными программами.
Поговорим о терминологии. Ведь некоторые начинающие пользователи могут не знать, что такое скетч и что такое фотошоп.
Фотошоп – графический редактор, применяемый в целях обработки и редактирования изображений. Используется в сфере веб-дизайна.
Sketch – это редактор для векторной графики. Его особенностью является заточенность на дизайн интерфейсов, а также возможность использования только на базе операционной системы MacOS. Характеризуется внушительным набором инструментов. Правда, здесь они (в отличие от Photoshop) – встроенные MacOS X: QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL, ColorSync.
Преимущества Sketch
Программа Sketch – это отличный инструмент цифрового дизайна и одна из лучших утилит для прототипирования. Плюсов у программы множество: скорость работы, возможность открывать сразу много проектов и объединять эксплуатацию нескольких приложений без замедления их работы и возникновения сбоев.
Разработчики программного элемента приложили много усилий для получения узкоспециализированного, легкого в управлении и открывающего неограниченные горизонты продукта. Скетч обладает рядом положительных свойств, основными из которых являются:
- Простой интерфейс. Обладает набором инструментов, которые в разы проще и удобнее в использовании, нежели у аналогов. В ней отсутствуют ненужные панели, а необходимые компоненты появляются непосредственно во время работы. Sketch также обладает возможностью комбинировать клавиши, что в разы ускоряет рабочий процесс.
- Многофункциональный инструмент – пипетка, которая обладает пиксельной точностью высокого уровня. Это дает пользователю возможность выбирать множество оттенков из цветовой палитры даже за пределами программы.
- Удобный графический экспорт. Эта функция в Sketch станет особенно полезной для разработчиков и создателей игр. Она самостоятельно раскладывает графику приложения в соответствующие папки.
- Программа Скетч подходит для работы с текстами. Она автоматически устанавливает хороший интерлиньяж, позволяет настроить текстовые блоки и проводить качественный рендеринг текста. Также обладает панелью специальных символов.
Одной из самых популярных тенденций в сфере графического веб-дизайна стало ориентирование на изображения и векторный дизайн. Программа Sketch включает в себя данную опцию, позволяющую получать файл компактного объема.
Также многие профессионалы знают, как много сил и времени уходит на создание макетов для экранов различных размеров. Sketch программа предоставляет целый набор инструментов, при помощи которых можно легко и быстро увеличить или уменьшить размер объектов.
Программа Sketch имеет приемлемую и доступную цену. Разработчики также регулярно обновляют ее, добавляя ряд новых опций и устраняя возникающие проблемы и баги.
Недостатки
При работе над большим проектом приложение может зависать или некорректно выполнять свои функции. Рабочий процесс может замедляться и тормозить из-за большего формата файла.
Также большинство дизайнеров отмечают, что Скетч программа обладает несовершенным набором инструментов для рисования.
Набор инструментов
В приложении Sketch встроен целый набор инструментов для редактирования и обработки изображений. Основными из них являются:
- заливка и заполнение цветом;
- функция выбора цвета на богатой цветовой палитре;
- импорт изображений;
- возможность менять цвет фотографий;
- повтор или отмена последнего действия;
- обрезка изображения;
- опции перемещения, поворота, переворота, масштабирования фотографии;
- резервное копирование данных;
- возможность синхронизировать данные на нескольких устройствах;
- закрытие или предоставление общего доступа к собственным работам;
- текстовый блок с большими выбором вида и размера шрифта;
- возможность редактировать слои изображения.
Sketch также дает возможность пользователям применять различные опции сообщества. Основные из них:
- возможность просматривать чужие работы без совершения авторизации в систему;
- удаление набросков и работ;
- наличие функции комментирования и оценки работ остальных участников;
- новостная лента, персонализированная под каждого пользователя.
Заключение
Sketch, несмотря на наличие некоторых недостатков, продолжает занимать лидирующие позиции в рейтингах лучших программ для редактирования изображений. Разработчики постоянно занимаются исправлениям багов и внесением новых наборов полезных функций.
Совершенствование не останавливается, и мы надеемся, что в скором времени выявленные недочеты будут устранены, и работа Sketch станет приятнее и удобнее для каждого пользователя независимо от целей использования.
Источник: itblog21.ru