Почему UI-специалисты отказываются от Photoshop и переходят на Sketch. Переход с Photoshop на Sketch (редактор для Mac)

Которая все больше привлекала к себе внимание.

Я думал, что, как и многие прочие новинки со стоимостью около $99 наApp Store ,Sketch 3 окажется илисреднячком , или вообще пустой тратой денежных средств.

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

Именно поэтомуSketch 3 так стремительно стал моим лучшим другом.

Пусть странички подарят вам свободу

Вначале давайте предположим, что вы перешли хотя бы сPhotoshop наIllutrator ; и если нет, я настоятельно советую изучить все преимущества дизайна в векторном формате, какие огромные плюсы в этом для современного адаптивноговеб-дизайна .

Это просто изменит вашу жизнь. В случае если вы уже используетеIllustrator , то вы в курсе пользы возможности создавать дизайн одновременно на несколькихартбордах в одном файле.

А также вы знаете, как сильно может раздражать такое:

Нет никакого способа организацииартбордов , кроме их визуального группирования.
Ограниченный размерканваса говорит о том, что всеартборды могут и не поместиться.
Лимит в одну сотнюартбордов не подходит для крупных проектов.
Крупные файлы работают довольно медленно и могут даже завалить систему.

ОткройтеPages в программеSketch 3. Странички по сути являются эквивалентом наличия целого множестваканвасов (причем неограниченных в размере) вIllustrator .

Вот почему это так отлично:

Группироватьартборды вместе также легко, как группировать слои.
Артбордов можно делать так много, сколько вам необходимо.Артборды и страницы не ограничены в числе, и их число не влияет на работоспособность приложенияSketch 3. Программа не тормозит по мере роста вашего проекта.
Интеллектуальное выравнивание (каксмарт-гайды в программеIllustrator ) вам помогает соблюдать равные отступы междуартбордами . В случае если вы одержимы порядком, тоSketch 3 относится к этому с большим пониманием.

Как я использую странички

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

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

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

Адаптивная сетка, встроенная

Sketch 3 хорошо понимает, что на дворе уже 2016 год, и адаптивный веб-дизайн - уже стандарт, который значительно влияет на метод создания графики и разработкивеб-приложений и сайтов. Вот почему в нем есть специальная встроенная сетка, которая просчитывает для вас размеры, чтобы вы могли настроить сетку по-своему без сложных вычислений и рисования направляющих линий вручную.

ПриложениеSketch 3 называет это все такжеLayout (Макет), и вы можете включить, либо отключить сетку при потребности, на каждомартборде .

Layout Settings (то есть Настройки макета) дают возможность делать настройку переменных размеров сетки, правда я, как правило, указываю лишь два параметра, и даюSketch 3 возможность рассчитать все прочее уже самостоятельно. Эти два параметра - этоGutter Width (то есть Ширина канавки) иTotal Width (то есть Общая ширина).

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

Рекомендация : Применяйте настройки сетки сразу к несколькимартбордам , либо всемартбордам на страничке сразу, выделяя их перед выбором менюLayout Settings .

Разумеется, есть шаблоныIllustrator иPhotoshop , которые можно легко скачать с уже готовыми сетками, однако:
1) Вам могут потребоваться другие размеры борозд, либо более широкие строки.
2) Они обычно выполнены для одного размера дисплея (десктоп ) и не включают меньшие версии для мобильного или планшета.
3) Вам все-таки надо будет копировать и вставлять их в каждыйартборд . А это отнимет достаточно много времени. А что если вы решите сменить их во время работы? Если необходимо высчитать параметры ячеек для какой-то нестандартной сетки под различные ширины дисплея, как же увлекательно заниматься этой математикой… За это все вы можете захотеть воспользоватьсяонлайн-инструментом для сеток, однако здесь опять столкнетесь с проблемой № 3.

Вот как выглядит моя страница для адаптивных размеровартборда с активированным сеточным макетом:

Артборды с включенной функциейShow Layout

Ускоряйте процесс со стилями текста и слоя

Вы уже знакомы с текстовыми стилями. Вы знаете, что задаются конкретные стили для основного текста, заголовков. В InDesign иIllustrator такое есть. Даже в текстовых редакторах есть предустановленные стили.

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

К примеру, базовый перечень может выглядеть приблизительно таким образом:

Navigation Link
Body copy
Body copy link
Button text dark
Button text light

Sketch 3 также стилизует перечень, применяя выбранный тип шрифта, размер и цвет, таким образом визуализируется каждый стиль. Но вот где это в особенности полезно: допустим, вы уже создали несколькоскринов с навигацией, и поняли, что размер, цвет, тип шрифта или высота строки совсем не та. Вы можете изменить все части текста этого стиля сразу. Просто необходимо изменить один фрагмент, и это изменения сразу подтянется на все прочие автоматически.

Это доступно и в программеIllustrator , однако реализация достаточно громоздкая и не очень интуитивная. ВерсияSketch 3 намного проще для понимания и использования, в перечне стилей сразу виден их внешний вид, а это сильно экономит время.

Нет, я совсем не забыл о стилях слоя . Они просто невероятны, если не сказать больше! По сути, это то же, что и стили текста, однако в стилях слоя задается контур, заливка, непрозрачность, режимблендинга , тени.

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

Я также считаю стили слоя очень полезными для макетирования, когда необходимо создать новые заглушки в одинаковом визуальном стиле с теми, которые я использовал раньше.

Изобилие плагинов

Начиная с интерактивногопрототипирования и завершая документацией, в программеSketch 3 предусмотрены прекрасные возможности интеграции со сторонними сервисами и приложениями, которые могут быть весьма полезными. Есть множество превосходных плагинов, улучшающих продуктивность и существенно упрощающих множество разных задач.

Вот перечень моих фаворитов:

Framer JS (десктопная программа) - мощное средство для прототипирования, позволяющий использовать код (CoffeeScript) для настройки микровзаимодействий и тестировать новые интерактивные концепты без потребности предварительно верстать дизайн CSS и HTML. Это качественное прототипирование в наилучшем его виде. Применяйте его для прототипов под компьютеры, смартфоны и что угодно другое с установленным браузером. В случае если вы не знакомы с CoffeeScript, Framer предоставляет специальную документацию, уроки, а также встроенный текстовый редактор вам в помощь. Применяя Framer, я впервые ознакомился с CoffeeScript, и это знакомство прошло весьма безболезненно.

UXPin (веб-приложения) - средство для и безболезненного прототипирования. В UXPin предлагается прекрасный интуитивный веб-интерфейс с полной поддержкой синхронизации вашего проекта с файлами Sketch 3. Добавление переходов, реалистичных взаимодействий здесь реализовано очень просто. Знакомые практически любому дизайнеру выпадающие меню и кнопки, помогут за пару секунд создать высокоточные прототипы.

Zeplin (десктопное, веб-приложение) - когда дизайн полностью готов для разработчиков, то вам остается лишь экспортировать арборды в Zeplin, а он уже позаботится обо всем. Zeplin показывает разработчикам, какие шрифты и цвета вы используете по всему проекту, отображает расстояния между всеми объектами, которые можно узнать, наведя для этого курсором на объекты. Также делает Sketch 3, в случае если при этом удерживать клавишу Option Alt.

Исходники каждой картинки можно легко экспортировать изZeplin без потребности заранее экспортировать их из программыSketch 3. Разработчику вообще не потребуется использовать приложениеSketch 3. Это главное средство, которое сэкономит ваше время, и при этом предоставит разработчикам все нужное для интеграции дизайна в код продукта.

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

Мастерски экспортируйте исходники

Простой и быстрый экспорт исходников - это одна из особенностейSketch 3. Надо ли вам экспортировать всего одинзначек или все сразу, необходима ли версия @1x PNG или же сразу несколько в @1x @2x и @3x плюсSVG-версия , экспорт будет быстрым и легким. Кликните на слой, потом кликните на кнопку“ Export +”, установите настройки для размера, формата и префикса. Вы можете даже перетащить мышкой объект с окна приложения на рабочий стол, а исходник сохранится на рабочем столе.

Также вы можете перетащить его в поле загрузки ввеб-браузере (попробуйте для того, чтобы увидеть, что именно я имею в виду). Поддержка экспорта сразу в несколько форматов одновременно (JPEG, TIFF, PNG, PDF, EPS, SVG), а также несколько размеров (1x, 2x, 3x, 0.5x,custom x , либоmax height /width ) - тоже удивительно просто!

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

Настройки экспорта при выделенном слое

Документация? И это вы можете

При помощи фантастического расширенияSketch Notebook вы сможете добавить аннотации для каждого изартбордов . Он также позволяет вам с легкостью включать, либо отключать их или дажеперестилизовать внешний вид аннотаций, что позволяет их использовать вбрендированном виде для различных презентаций. Я не могу даже выразить словами, как круто это экономит время.

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

Это крайне полезное средство. Испробуйте его сами, оно реально помогает!

Добавление аннотаций при помощи

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

Для этого следует ввести первую порцию данных. Полностью автоматически создастся новаястраничка сартбордом , используемым как шаблон для всех аннотаций. Редактирование макета, удаление или добавление элементов на данномартборде будет автоматически менять всесайдбары с аннотациями.

Вам надо будет удалять ранее созданные и повторно их

Google SketchUp является простым в использовании приложением, которое поможет вам научиться создавать 3D-модели жилых зданий, ангаров, гаражей, крыш, различных пристроек к домам и даже космических кораблей.

С помощью SketchUp можно легко добавлять детали, менять текстуры, размеры ваших моделей, промышленных объектов с огромной точностью, а также размещать готовые модели на сервисе Google Earth, делиться ими с другими людьми, разместив на сайте 3D Warehouse или распечатав копии. Google SketchUp это отличный способ узнать, нравится ли вам 3D-моделирование.

SketchUp включает следующие инструменты:

рисование и геометрическое моделирование: Polygon (Многоугольник), FollowMe (инструмент для создания простых и сложных форм – кругов, овалов, квадратов, Offset (инструмент для построения пропорциональных уменьшенных копий объекта) и Intersect with Model;
конструирование: Dimension (Размеры), Tape Measure (Активизация измерительной рулетки), Protractor (Включение транспортира), Section Slice (Выбор частями), Layers (Слои), Area & Length Calculation (Расчет площади и длины).

Программа SketchUp позволяет:

рисовать, редактировать, измерять, вращать и масштабировать геометрические фигуры;
делить 3D-модель на секции для просмотра и отделки внутренних деталей;
применять к модели готовые текстуры или создавать новые;
добавлять к своей модели готовые компоненты, такие как деревья, автомобили, окна, двери, людей или создавать новые;
ретушировать, смягчать черты лица;
моделировать тени от объектов в реальном времени для любой точки земного шара;
имитировать размещение видеокамер;
совершать веб-экскурсии;
создавать экскурсии – презентации;
экспортировать двухмерные графические файлы (. JPG,. PNG,. TIF. TGA. BMP) в 3D-моделей (0,3 DS. Дем. DDF. DWG. DXF. СКП);
экспортировать двухмерные изображения своих моделей (. JPG,. BMP,. PNG,. TIF);
распечатывать изображения моделей;
заниматься разработкой дополнительных приложений для программы с помощью языка Ruby.

SketchUp - инструмент 3D-моделирования для профессиональных дизайнеров: профессиональная версия SketchUp дает профессиональным дизайнерам возможности разработки и анализа сложнейших дизайнерских объектов.

SketchUp-пользователи могут:

экспортировать модели в форматах 3DS, DWG, DXF, OBJ, XSI, VRML и FBX;
экспортировать анимацию и пошаговые руководства в файлах MOV и AVI;
использовать моделирование органических объектов (Sandbox) и инструменты Film & Stage;
импортировать и экспортировать GIS-данные;
распечатывать и экспортировать растровые изображения с разрешением выше, чем на дисплее;
получать бесплатную техническую поддержку в течение двух лет после приобретения программы;
использовать программное обеспечение в коммерческих целях (бесплатная версия – только для личного использования).

Моделируйте все, что только можете представить: ремонт в вашей гостиной, придумывайте новые предметы мебели, создавайте объемные модели городов для сервиса Google Earth. Возможности SketchUp безграничны.

SketchUp превращает 3D-моделирование в удовольствие: мощное, высококачественное программное обеспечение тоже может приносить удовольствие в использовании – секрет в том, что инструменты и возможности SketchUp интуитивно понятны, они работают так, как вы ожидаете. С этим согласятся миллионы наших пользователей.

Получайте модели онлайн абсолютно бесплатно: вы можете строить модели с нуля или скачать готовым то, что вам нужно. Люди со всего мира делятся своими моделями на сайте Google 3D Warehouse.

Начните прямо сейчас: десятки видео уроков, обширный справочный материал, пользователи по всему миру. Если вы хотите создавать трехмерные модели с SketchUp – просто сделайте это!

ПРИМЕЧАНИЕ: Google SketchUp является бесплатным ПО только для личного использования.

Ключевые особенности и функции

Edges и Faces (Ребра и Грани): Каждая модель SketchUp состоит только из двух вещей: ребер и граней. Ребра представляют собой прямые линии, грани – простые двухмерные формы, которые получаются от пересечения линий. Например, прямоугольная грань имеет четыре ребра, которые соединены между собой под прямым углом. Для построения моделей в SketchUp имеются несколько простейших инструментов, с которыми вы познакомитесь за короткое время;
Push / Pull: быстро перейти из 2D в 3D: При помощи инструмента Push / Pull можно быстро перенести любую плоскую поверхность в трехмерный образ. Это опция для создания объемных фигур и регулировки толщины объекта. Просто нажмите кнопку, наведите курсор мыши и нажмите кнопку для остановки. Таким образом можно, нарисовав всего лишь контур лестницы, перенести ее в 3D. Точно так же появится окно в стене. Push / Pull – причина того, что SketchUp считается программой, простой в использовании;
точность измерений: Поскольку вы работаете на компьютере, то все, что вы создаете в SketchUp можно точно измерить. Для этого существуют инструменты конструирования. Кроме того, масштабные модели можно распечатывать на бумаге или экспортировать их в другие программы, например, AutoCAD и 3ds MAX;
Follow Me: При помощи инструмента Follow Me 3D-формы создаются путем вытягивания 2D поверхности вдоль заданного пути. Можно создать трехмерное изображение бутылки по половине ее конструкции, можно округлять края на таких макетах, как поручни, мебель и электронные гаджеты;
Paint Bucket: Создавая свои модели, вы можете использовать необходимые цвета для заливки отдельных деталей или всего макета, рисовать модели при помощи необходимых цветов и текстур;
Groups и Components (Группы и Компоненты): Для того чтобы уточнять вид отдельных частей объемных объектов, при помощи инструмента Groups можно создавать суб-объекты, которые легче перемещать, копировать и прятать. Components (Компоненты) во многом похожи на Groups, но с одной особенностью: скопированные элементы связаны между собой, поэтому изменения, которые вы вносите в один компонент, отображаются на всех остальных. Окна, двери, стулья и миллионы других компонентов вашей модели можно изменять, изменяя всего один;
Shadow (Тени): Рисование теней в SketchUp можно стало простым и точным: теперь ваши объекты будут отбрасывать правильные тени в режиме реального времени в любой точке земного шара при помощи Shadow Engine;
Sections (Секции): Инструмент Sections (Секции) позволяет временно «отрезать» части вашего проекта и «заглядывать» внутрь. Данную функцию можно использовать для создания чертежей, экспортирования форм в CAD-программы, использующие SketchUp Pro или для более полного представления о вашей модели в процессе работы над ней. Функция Section Planes дает возможность перемещать, вращать и даже анимировать созданные проекты;
Scenes (Эпизоды): Мы создали Scenes (Эпизоды) для того, чтобы вы могли легко сохранить точный вид вашей модели, позволяющий вернуться к ней позже. Есть неоходимость в создании анимации? Просто создайте несколько таких эпизодов и нажмите на кнопку;
Look Around и Walk: В SketchUp имеется набор простых инструментов навигации, призванный дать вам вид от первого лица. Кликните положение камеры, чтобы «стать» в любое место вашей модели. Использование инструмента Look Around позволяет вам «вертеть головой». Функция Walk дает возможность изучить ваше творение во время «пешей прогулки», даже спускаясь и поднимаясь по лестницам, пандусам и прочим элементам архитектуры также, как в видеоиграх;
Dimensions и Labels (Размеры и Пометки): Вы можете использовать интуитивно понятные инструменты для добавления размеров, аннотаций и различных пометок на вашей модели;
Instructor (Инструктор): Instructor – это диалоговое окно, в котором вы можете получить помощь в контексте вашей работы;
Layers и Outliner: При строительстве большой и сложной модели можно легко запутаться. SketchUp предоставляет два простых способа сохранить контроль над ходом работ – Слои и Вкладыши;
Google Earth: SketchUp и Google Earth являются частями одного и того же семейства продуктов, что позволяет обмениваться между ними информацией. Необходима строительная площадка для вашего проекта? Импортируйте масштабируемую аэрофотосъемку, в том числе и топографию непосредственно из Google Earth в SketchUp, нажав всего одну кнопку. Хотите увидеть свои SketchUp модели в контексте в Google Earth? Просто нажмите другую кнопку. Каждый может использовать SketchUp для создания моделей, которые затем все увидят в Google Earth;
инструменты Sandbox: Инструменты Sandbox позволяют создавать, оптимизировать и изменить 3D местность. Вы можете создавать гладкие пейзажи из множества контурных линий, добавлять насыпи, долины, создавать площадки для зданий и дорог;
сайт 3D Warehouse: Сайт 3D Warehouse – это огромное онлайн хранилище 3D-моделей. Зачем строить что-то, когда вы можете скачать его бесплатно;
импорт 3DS: Вы можете импортировать файлы 3DS непосредственно в модели SketchUp. Если есть образец в 3DS формате, который вы хотели бы использовать, то нужно просто импортировать его, а затем сохранить;
импорт изображений: Со SketchUp можно импортировать файлы изображений в форматах JPG, TIFF, PNG и PDF. Вы можете использовать их сами по себе или наложить их на поверхность для создания фотореалистичных моделей зданий, конструкций упаковок и многого другого;
экспорт TIFF, JPEG и PNG: SketchUp позволяет экспортировать растровые изображения до 10000 квадратных пикселей, генерировать изображения для отправки по электронной почте, публиковать в документах и других проектах.

Неважно, полный ли вы новичок, дизайнер на обучении, опытный профи, который переключается на новый продукт, – это статья для вас.

Во-первых , мы немного познакомимся со Sketch – что это такое, чем он завоевал свою популярность, как получить бесплатную триал-версию и установить приложение на Mac. Во-вторых , изучим интерфейс Sketch, я поясню основы и покажу некоторые фишки и приемы. В-третьих , мы коснемся более продвинутых функций приложения (кривые Безье, блендинг особенно впечатляют).

И, наконец , я поделюсь качественными ресурсами по Sketch, включая бесплатную шпаргалку на 99 пунктов, с которой очень удобно учиться работе в приложении. Звучит неплохо?

1. Почему Sketch?

Некоторое время после релиза в 2010 году Sketch расценивался как легковесный инструмент для редактирования графики, с помощью которого дизайнеры UI и UX могли быстренько прототипировать дизайн приложений.

Но за последние годы Sketch значительно развился – и его возможности сейчас выходят далеко за рамки создания макетов экранов. Как молодой продукт, созданный специально под нужды сегодняшнего дня, в нем нет всего этого ненужного мусора, как в наборе продуктов Adobe Creative Cloud.

Ресайз фигур с помощью горячих клавиш
Дублирование элементов
Смарт-выделение
Группировка и разгруппировка элементов
Прямое выделение в группах
Настройка 100% масштаба
Показать все артборды
Перенос объектов на передний или задний план
Переименование

Измерение расстояния между элементами
Настройка непрозрачности с помощью числовой клавиатуры
Изменение радиуса каждого угла отдельно
Настройка нестандартных горячих клавиш
Использование математических операций внутри полей ввода
Составные фигуры
Команда для поворотного копирования
Слайсы
Экспортируемые элементы и артборды
Экспорт исходников для экранов retina

Позиционирование объектов “за гранью”
Комбинирование света и тени для задания глубины
Имитация складчатой поверхности
Создание резких теней
Расстояние между объектом и его тенью
Множественные источники света
Линия горизонта
Наложение объектов

И, наконец… проработайте эти уроки по Sketch. Они на русском языке

Серия уроков от Marc Andrew

Создание мобильных приложений в Sketch от Marc Andrew

Если вам нужны еще уроки и советы по началу работы в Sketch, вы найдете их в разделе “Дополнительные ресурсы” в конце этого поста.

3. Более продвинутые приемы работы в Sketch

Как только вы справитесь с основами, настанет время перейти к более продвинутым возможностям, доступным Sketch-пользователям!

Освоение кривых Безье

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

Создание символов

Sketch позволяет создавать собственные “символы”. Это означает, что вы можете сохранить слой или группу слоев как символ, и затем вставлять его в документ, как если бы это была простая фигура.

Особенными символы делает то, что вы можете кликнуть дважды на “сущности” символа, отредактировать “главный” символ, и все сущности этого символа в документе будут автоматически обновлены. На этой GIF-ке я создаю символ в форме листочка, вставляю еще две его сущности, и затем меняю непрозрачность родительского символа. Посмотрите, как остальные меняются:

Продвинутые опции ресайза

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

Вот возможные опции:

Stretch (растянуть): объект будет отресайзен пропорционально общим размерам группы. Это метод по умолчанию, обычно именно такого эффекта вы и ждете от ресайза.
Pin to corner (прикрепить к углу): размер объекта будет изменен, но его положение не изменится (по отношению к ближайшему углу)
Resize object (ресайз объекта): размер объекта будет изменен на то же пиксельное значение, на которое ресайзится группа. Если группа становится на 50px шире, то и объект станет на 50px шире.
Float in place : объект не будет отресайзен при ресайзе группы, но он изменит свое положение пропорционально общим габаритам группы.

Разработка современных приложений немыслима без работы дизайнера, а дизайнеру для работы необходимо соответствующее программное обеспечение. В основном для разработки дизайна используются Adobe Illustrator, Photoshop и другие профессиональные графические редакторы, но есть и специализированные решения. Недавно вышла третья версия векторного редактора Sketch, ориентированного в первую очередь на создание графики для программ. Чем же отличается этот специализированный векторный редактор?

Разработчики Sketch как будто взяли мощный векторный графический редактор и выбросили из него все лишнее. Потом подумали, и дополнили его всем тем, что необходимо для создания графики в ходе разработки программ. Именно это множество удобных «фишек» и отличают программу от других редакторов. Стоит отметить, что одной только графикой для ПО Sketch не ограничивается, его можно использовать, например, для web-дизайна (функции типа «скопировать стиль как CSS» в этом помогают), но все-таки это назначение - основное.

Благодаря тому, что Sketch - родное OS X приложение, вы всегда можете воспользоваться iCloud и локальными версиями документов. Программа очень легкая, быстрая и отзывчивая.

Кстати, Sketch настолько хороша, что даже разработчики Adobe используют ее 🙂

Название: Sketch 3
Издатель/разработчик: Bohemian Coding
Цена: 2690 руб.
Встроенные покупки: Нет
Скачать:

Кому подходит Sketch?

Вам стоит работать в Sketch, если вы:

работаете на Mac (версии под PC пока не предвидится),
занимаетесь в основном интерфейсами (не иллюстрациями, графическим дизайном, фотоманипуляциями и т. п.)
понимаете, как программисты будут работать с вашими исходными файлами (формат «.sketch»), либо вы сами будете экспортировать всю графику для верстальщиков или программистов.

Плюсы Sketch

1. Узкопрофессиональный инструмент для дизайна интерфейсов

Sketch строго заточен под дизайн интерфейсов. Здесь нет, как в Photoshop, инструментов для создания трехмерной графики, редактирования фотографических изображений, покадровой анимации и прочего, чем нагружен сложный и тяжелый продукт от Adobe. Это позволяет разработчикам Sketch быстрее и чаще исправлять баги и добавлять новый функционал.

Sketch можно сравнить с хирургическим скальпелем, противопоставив его швейцарскому ножу под названием Photoshop.

2. Экспорт графики

В Sketch особенно удобно реализован экспорт графики. Создаете дизайн приложения, например, под retina-дисплей, а затем настраиваете для каждого из элементов экспорт в нескольких разрешениях. Программа разложит всю графику в соответствующих размерах по папкам. Очень удобный и для разработчика инструмент. Я настоятельно рекомендую разработчикам мобильных приложений овладеть Sketch, так как программа становится все более актуальной в этой отрасли.

Мой знакомый дизайнер-иконщик долго сопротивлялся переходу на Sketch, не поддавался на уговоры. Однако, когда возникла необходимость генерировать одну и ту же иконку во множестве разных разрешений, он пришел в восторг от возможностей программы. Теперь для наших проектов от рисует иконки в Sketch.

Помимо экспорта отдельных элементов очень удобна функция экспорта артбордов (при необходимости сохранить каждый экран в виде отдельного файла) и слайсов (если нужно создать превью из нескольких экранов, или любого отдельного фрагмента приложения).

3. Простота интерфейса

По сравнению с усложненным интерфейсом Photoshop, инструментарий Sketch проще, удобнее и интуитивно понятнее. В нем нет множества лишних панелей, расставленных вокруг рабочей области. Все, что нужно, показывается в процессе работы.

Например, инструменты редактирования векторных форм появляются только тогда, когда вы начинаете редактирование векторного объекта. Второй пример: пока вы не придали определенное свойство объекту, описание этого свойства находится в свернутом состоянии.

3. Несовершенные векторные инструменты

Инструменты для рисования в Sketch оставляют желать лучшего, они пока несовершенны и у многих дизайнеров вызывают раздражение. В этом плане Illustrator по-прежнему остается непревзойденным. Кстати, векторные формы, созданные в Illustrator хорошо копируются непосредственно в Sketch (⌘+C → ⌘+V).

Плагины

На сегодняшний момент самым полезным плагином, на мой взгляд, является Sketch Measure . Он позволяет быстро создавать обмеры для макетов: показывать размеры элементов, расстояния между ними, указывать их цвет, параметры текста и т. п. Все обмеры создаются в виде отдельных слоев в документе. Эта информация пригодится программистам при работе над макетами, а также при создании гайдлайнов.

Плагин Sketch Measure

Полезные ссылки

подборка советов по Sketch
список плагинов для Sketch
видео со Sketch Meetup Russia 2014

Примечания

1. Дизайнер Олег Андрианов советует минимизировать общение с разработчиками и отдавать им дизайн, его описание и упакованные по папкам файлы (подробнее см. видео со Sketch Meetup Russia 2014 с 3:22:00).

2. Во время написания этой заметки вышла бета-версия Sketсh 3.2, которая, по заверениям разработчиков, лучше справляется с большими файлами.