Людям, которым поручили изучить Photoshop, впадают в характерное состояние напряжения: будет тяжело, долго и нудно. Со Sketch для начинающих все просто. Я познакомил с этим приложением массу инженеров, дизайнеров и проект-менеджеров, и получил единогласный отзыв: программа интуитивно понятна и проста. Когда у вас есть простая цель, и есть инструмент, который прямо позволяет ее выполнить, обучение перестает быть мучительным.

Sketch для начинающих

Sketch — легковесное приложение, которое еле дотягивает до 24Мб дискового пространства. Для сравнения, Photoshop занимает 1Гб. Как только вы открываете Sketch, вы видите бесконечный холст. Никаких окон, спрашивающих, какого размера должен быть лист или какие элементы открыть. Вам не нужно изучать, какие бывают единицы измерения, размеры листа, что такое DPI и все прочие странные термины, которые приобретают смысл уже после того, как вы завершили работу над своим первым дизайном. Вам не нужно изучать панель инструментов, где половина опций была создана для обработки цифровых фотографий и рисунков. В них нет ничего неправильного, но фокусирование исключительно на дизайне интерфейса позволит вам вырасти гораздо выше. Все, чему вы обучитесь в Sketch, тут же пригодится в вашем деле. Sketch для начинающих очень легко освоить, к концу статьи вы узнаете основы и сможете в нем работать.

Sketch для начинающих дизайнеров интерфейсов

Настраивайте ваш интерфейс

В соответствии с языком дизайна Mac OS X, панель инструментов можно настроить под себя. Вы можете сделать свои любимые опции доступными в один клик. Все слои находятся слева, а параметры — справа. Вам почти никогда не придется использовать меню OS X, потому что все, что вам нужно, уже находится под рукой.

Артборды

Артборды — это скриншоты вашего приложения. Они созданы для хранения истории ваших действий, а также работы над несколькими частями проекта одновременно. Вы можете легко переставить местами, дублировать или экспортировать артборды. Начните с артборда iPhone Portrait, затем, используя инструмент Make Grid, можете продублировать главный артборд и создать дизайн для другого разрешения экрана.

Использование Smart Guides

Смартгайды являются неотъемлемым атрибутом в работе со Sketch. Как только вы начнете изменять слой, на экране появятся красные линии, чтобы указать, хорошо ли выровнено и отцентрировано изображение. Удерживая клавишу Alt, вы увидите расстояние между выбранным элементом и близлежащим к нему.

Дублированию с помощью инструмента Make Grid

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

Субпиксельное сглаживание

Субпиксельное сглаживание (Sub-pixel Antialias) стало популярно из-за разницы в оформлении Веб и рабочего стола. Шрифты должны были выглядеть толще, чем создавались первоначально для улучшения читабельности. Еще десять лет назад начертания шрифтов были крошечными. Сегодня субпиксельное сглаживание скорее будет мешать. На iPhone оно не будет смотреться хорошо. Шрифты должны соответствовать своему оригинальному дизайну. В то время, как в Photoshop есть 5 различных опций рендеринга: None, Sharp, Crisp, Strong и Smooth, в Sketch есть всего две: с или без субпиксельного сглаживания. Как по мне, есть только один верный вариант.

Субпиксельное сглаживание

Удобная работа с цветами

В Sketch для начинающих действительно легко работать с цветами. Инструмент “слеза” (eye drop) позволяет выбирать цвета по всему окну. Можно легко переключаться между RGB и HSBA, предложен более интуитивный способ управления цветами. Как только вы освоите предложенный принцип, все, что вам нужно сделать, — сохранить выбранные цвета в Sketch. Вот некоторые из моих любимых цветов для начала, неважно, что за проект у вас на уме. В Sketch 3 цвета автоматически определяются для текущего интерфейса. Невероятно полезная опция.

Работа с цветами в Sketch 3

Начните с парочки хороших шрифтов

Если вы новичок в типографии, я советую перейти в раздел Типографии и скачать несколько современных шрифтов, которые универсально хороши для различных видов проектов. вы найдете отличные шрифты в стандартной поставке OS X и среди бесплатных шрифтов Google Webfonts: Avenir Next, Open Sans и Roboto. Из тех, что доступны на Typekit от Adobe CC, я бы рекомендовал Museo Sans и Proxima Nova. Как и в случае с цветами, шрифты, используемые в вашем проекте, будут автоматически определены.

работа со шрифтами Sketch 3

Библиотека иконок Sketch для начинающих

Последнее, но не менее важное дополнение: для начала вам понадобится хорошая библиотека векторных иконок. Для iOS хорошо подойдут библиотеки от

PixelLove и Streamline. Sketch работает с векторной графикой, поэтому возможность изменять размер и всячески редактировать SVG иконки будет очень полезной. Если вы хотите скачать иконки бесплатно, и непротив небольшого поиска, я предлагаю Pixeden Tab Bar Icons, Simple Line Icons и Chaps Vector Icons. Вот также отличный список иконок.

 

icons

Превью на iPhone

Хороший дизайн невозможен без постоянного тестирования. То, что выглядит сногсшибательно на экране ноутбука, может быть совсем непригодным для работы на iPhone. Благодаря Sketch Mirror вы можете просматривать дизайны на iPhone просто через WiFi-соединение. Можно просматривать разные артборды на телефоне. Mirror также поддерживает скрол во время предпросмотра, так что вы можете рассмотреть дизайн в мельчайших деталях.

ios mirror sketch