Скетч программа для дизайна: Sketch — популярный векторный инструмент для дизайна

Почему UI-специалисты отказываются от Photoshop и переходят на Sketch — Офтоп на vc.ru

«Для меня переход с Photoshop на Sketch был крайне болезненным, — рассказывает Артур Касимов, продуктовый дизайнер «Яндекса». — Я, что называется, человек старой закалки. Помню ещё ранние версии Photoshop». За 25 лет Photoshop стал стандартом для индустрии веб-дизайна, несмотря на «вес» (программа занимает больше 1 Гб дискового пространства), невостребованные функции в интерфейсе и чрезвычайно запутанную процедуру покупки, на которую даже жаловался создатель соцсети «ВКонтакте» Павел Дуров.

Adobe также выпускает векторный Illustrator, из-за чего разработчикам интерфейсов часто приходилось постоянно держать открытыми сразу два редактора. «Кто-то выходит из этой ситуации выбором в пользу Illustrator, но в силу сформировавшихся привычек было жалко время на это», — рассказывает UI-специалист Антон Фролов.

«Photoshop cоздавался и развивался, как софт для фотографов. Потом его напичкали всем, что только в голову пришло. От этого редактор стал похож на неповоротливого бегемота», — считает продуктовый дизайнер «Яндекса» Артур Касимов. Сложности возникали и со скоростью работы и с производительностью. Например, макеты, содержащие большое количество слоев, заметно замедляли процессы в Photoshop. Особо ощущались «тормоза» при одновременной работе над несколькими макетами.

Кроме того, для создания стандартных интерфейсных элементов — таких как кнопка Mac OS, выпадающий список в браузере или прямоугольник с закругленными краями — приходилось проделывать иногда с десяток действий. Все это отражалось на скорости работы дизайнера. «Photoshop и Illustrator не заточены под веб-дизайн. Поэтому проектирование интерфейсов и любые попытки сделать что-то внятное иначе как костылями не назовешь», — считает UI-специалист компании MacPaw Дмитрий Новиков.

Впрочем, на рынке появлялись альтернативы Photoshop: GIMP, Krita, Paint.NET и другие. Однако они не могли предоставить даже близко необходимый набор инструментов для проектирования интерфейсов, считают UI-специалисты.

Появление Sketch

Несколько лет назад разработчики компании Bohemian Coding выпустили программу для Mac OS под названием Sketch. Первое отличие, сразу бросавшееся в глаза — приложение являлось альтернативой Photoshop, однако его интерфейс был больше похож на программу из пакета iWork — нативные иконки из Cocoa, минимальное количество инструментов на панели, единственный блок настроек, подстраивающийся под действия пользователя.

В отличие от Photoshop, Sketch не использует собственных средств для отрисовки создаваемого контента — эти функции возложены на встроенные инструменты Mac OS X: QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL и ColorSync. Благодаря этому даже последняя версия программы занимает всего 42 Мб на диске.

Однако с первыми версиями оказалось не всё так гладко. Многие дизайнеры заметили новинку, но побоялись отказаться от Photoshop. Тогда еще разработчики Sketch не могли определиться, для кого они выпустили продукт — поэтому часть функций напоминала графический редактор, другая часть — приложение для создания сайтов. Sketch 2 расставил нужные акценты — программа была ориентирована на UI-специалистов. Но её бедой было большое количество багов.

«Мы пробовали переходить на Sketch еще в конце 2013. Но это была его вторая версия — очень глючная. Мы убили кучу времени и тогда пришлось вернуться обратно в Photoshop», — рассказал руководитель отдела проектирования и дизайна интерфейсов Mail.Ru Group Юрий Ветров.

Появление отлаженной третьей версии Sketch привело к началу популяризации программы среди специалистов.

Sketch

«Sketch очень оптимизирован — в одном документе могут быть отрисованы десятки экранов приложения, доступные для редактирования без лишних действий, и никакой просадки в производительности, — рассказывает Антон Фролов, — Кроме того, очень продуманный интерфейс, ощущение, что это софт от тех, кто в нем же и нуждается — быстрое отображение отступов, удобная работа с символам и стилями, параметрами элементов, интуитивные шорткаты и так далее».

Например, в Photoshop дизайнерам приходилось постоянно подстраиваться под пиксельную сетку, чтобы избавиться от размытых краев объектов. Разработчики Sketch добавили автоматическую привязку контента к сетке, благодаря чему удается избегать размытых краев и других неровностей.

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

В последней версии Sketch появилась еще более глубокая интеграция с нативными средствами Mac OS X: поддержка iCloud, Time Machine, автосохранения, нативный рендер шрифтов, трансляция макетов на мобильное устройство.

«Cамое главное, на мой взгляд — продуманный интерфейс нарезки графики, который парой кликов позволяет указать, в какие папки, с какими именами и размерами нарезать графику. По умолчанию поддерживается нарезка для iOS и Android, но можно добавить и свои форматы», — делится своим опытом Антон Фролов.

Кроме того, часть работы в Sketch можно автоматизировать при помощи плагинов. Например, Measure и InVision, которые позволяют быстро и удобно подготавливать спецификацию для разработчиков. «Со Sketch я стал больше заботиться об автоматизации работы. Многие вещи, которым раньше уделял много времени и внимания, сейчас делаю с помощью плагинов, стараюсь найти более простой и быстрый способ решения задачи», — рассказывает Артур Касимов.

Переход на Sketch

«Преимущество Sketch — низкий порог вхождения, буквально любой может научиться работать в нем за пару дней», — считает UI-специалист компании MacPaw Дмитрий Новиков. — Важно, что здесь вы занимаетесь непосредственно дизайном, а не работой в редакторе — то есть сама программа становится незаметной, и вы можете сосредоточиться на создаваемом продукте».

Переход с Photoshop на Sketch, однако, может оказаться непривычным. «Я настолько привык к Photoshop, что от одной мысли о других графических редакторах мне становилось как-то не по себе, — рассказывает Касимов. — Ситуация осложнялась тем, что мои коллеги-дизайнеры, с которыми я тогда работал, уже перешли на Sketch и всячески его хвалили. Они подкалывали меня, смеялись. Но я продолжал придумывать отмазки (в первую очередь, для самого себя). Сначала я говорил, что перейду, когда сделают «зум» колёсиком мышки, потом уверял себя, что по окончанию проекта с Photoshop будет покончено. Я и сам видел, что скорость работы в Sketch у моих коллег возросла».

Новиков рассказывает, что ему удалось быстро перейти на новый инструмент благодаря радикальному решению — он удалил всё со своего Mac и оставил только Sketch: «Всего неделя и как будто всю жизнь в нем работал».

Одна из трудностей, по мнению продуктового дизайнера «Яндекса» Артура Касимова, заключалась в непривычных «шорткатах» Photoshop — в Sketch они по умолчанию были другими: «Я не сразу догадался вручную подстроить всё под себя. Но когда сделал это, скорость работы заметно возросла».

Также пользователям Photoshop будет непривычен принцип работы с векторными объектами — в Sketch он больше похож на Illustrator: «К этому я привыкал довольно долго. Но сейчас понимаю, что этот принцип лучше. Значительно лучше», — считает Касимов.

Отказ от Photoshop

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

«Не хватает инструментов для командной работы, что очень актуально для студий и компаний с отдельными командами дизайнеров», — жалуется Фролов. Кроме того, в Sketch практически отсутствует работа с растром, что в некоторых задачах пока не позволяет полностью отказаться от продуктов Adobe.

«Я считаю, что не нужно отказываться от хорошего инструмента, — отвечает Дмитрий Новиков на вопрос об отказе от Photoshop. — Sketch не заменяет Photoshop полностью, он отлично подходит для создания сайтов и интерфейсов, но это не значит что я не могу пользоваться продуктом Adobe для подготовки фотографий или 3D-редактором для моделирования и рендера».

Однако учитывая низкую, по сравнению с Photoshop, стоимость приобретения Sketch ($99,99), Adobe может потерять большой кусок постоянных клиентов в лице UI-специалистов, считают дизайнеры.

Дизайн интерфейсов в программе Sketch

Sketch – Mac-приложение для векторной графики. Sketch создан голландской компанией Bohemian Coding, специалистом в разработке программных решений для дизайнеров. Мощный векторный редактор, из которого выбросили все лишнее и дополнили тем, что необходимо для дизайна интерфейсов, теснит Photoshop и других «китов» графического дизайна.

Если вы работаете на MAC и связаны с дизайном мобильных или десктоп-приложений, вам стоит познакомиться со Sketch поближе.

На занятиях по курсу «Дизайн интерфейсов в программе Sketch» вы узнаете:

• место Sketch в цикле web-разработки, его возможности и преимущества перед конкурентами;
• принципы работы со Sketch: разметка макета, работа с объектами, цветовым оформлением, стилями, библиотекой, символами для унификации;
• этапы создания дизайна для десктопа: планирование, построение макета, создание сетки, типовые схемы и т.д.;
• особенности дизайна для планшетов, смартфонов: принцип Mobile First, планирование макета, возможности Sketch для создания адаптивных макетов;
• тонкости работы с разрешениями dpi, ppi, dp на разных устройствах, технологии экспорта дизайна и его документирования для верстальщиков и программистов.

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

Программа частично соответствует требованиям профессионального стандарта «СПЕЦИАЛИСТ ПО ДИЗАЙНУ ГРАФИЧЕСКИХ И ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОФ» (Зарегистрировано в Минюсте России 5 октября 2015 г.№689н).

Курс рекомендован дизайнерам и разработчикам Web-интерфейсов, мобильных приложений, верстальщикам HTML/CSS.

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

Для успешного освоения материала слушатели должны:

• уверенно пользоваться Apple MAC OS и интернетом;
• иметь базовые знания английского языка и опыт работы в любом графическом редакторе;
• закончить курс «Веб-дизайн. Визуальное оформление и верста сайтов» или иметь эквивалентную подготовку.

Sketch набирает популярность с каждым днем. Сейчас только единицы владеют этим инструментом профессионально. Получите свое конкурентное преимущество на курсе «Дизайн интерфейсов в программе Sketch»!

Для прохождения курса в центре вам потребуется собственный Macbook с версией операционной системы не ниже MacOS 10.12.6 Sierra и установленным XCode 9.

Программа Sketch (векторный редактор) — itblog21.ru

На протяжении многих лет лидером среди графических программ был 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 станет приятнее и удобнее для каждого пользователя независимо от целей использования.

Программы для веб-дизайнера Основы веб-дизайна

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

Adobe Photoshop

Первая версия вышла в 1990 году

Самый популярный графический редактор. Появился очень давно и был №1. Его используют: фотографы, дизайнеры полиграфии, веб-дизайнеры, интерактивные дизайнеры, разработчики видео.  Очень мощное приложение в котором есть все. Программа используется и поддерживается везде. В любой студии, компании, полиграфии.  

Купить:  http://www.adobe.com/ru/products/photoshop.html 
Пробная версия: https://creative.adobe.com/ru/products/download/photoshop?promoid=61PM825Y&mv=other

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

Мои личное мнение:

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

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

Минусы: C развитием фотошопа, который с каждым разом пытается впихнуть в себя все, что только возможно стал очень тяжелым и неповоротливым. Программа грузиться очень долго, некоторые функции выполняет тоже довольно долго.  Приложение работает  только через подписку.  На слабых компьютерах открыть фотошоп может оказаться очень проблематичным. Есть очень много неудобных вещей.  Приходится имитировать одними стилями другие. Окно с эффектами надо каждый раз открывать и закрывать. Замороченное управление стилями и размерами текста. И все же не стоит забывать, что приложение изначально было создано для работы с растровой графикой, а не векторной. 

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

Sketch 

Первая версия вышла в 2012 году

Векторный графический редактор для Mac

Купить: https://www.sketchapp.com

После Фотошопа, появилась программа Sketch. Разработчики Sketch словно взяли мощный векторный графический редактор и выбросили из него все лишнее. Интерфейс приложения похож на классические программы от Apple. 

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

Одна из главных «фишек» Sketch — связанные стили для фигур и текста. Это позволяет объединить разные элементы, придав им одинаковый внешний вид и в несколько кликов менять внешний вид всех ваших объектов. То же самое касается текста. Так же можно создавать символы, превращая выбранный слой в удобный для повторного использования элемент.

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

Affinity Designer

Affinity Designer  — это новый графический редактор для Mac и Win. В сравнении с Photoshop он выходит победителем по нескольким параметрам: скорость работы, плавность и лёгкий интерфейс.

Купить:  http://affinity.serif.com (в отличии от  Adobe, вы покупаете один раз программу и пользуетесь ей всегда)

Affinity Designer — по истине для меня был настоящим открытием. Его разработали с нуля специально для дизайнеров учитывая все современные новые технологии и тенденции.  Affinity  невероятно быстрый, удобный, практичный и продуманный.  

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

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

Некорректная ссылка. Попробуйте другую.ОтменаВставить

Заменить видео

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

Если сегодня о нем мало кто знает, то  в недалеком будущем все дизайнеры будут его использовать.  Если вы новичок, то начните с Affinity Designer. Если вы бывалый дизайнер, то присмотритесь к этой программе. Уверен, она сильно облегчит вам жизнь.

Благодаря Affinity моя скорость работы после фотошопа увеличилась на процентов 50-60%, в этом приложении все легче делать в 10 раз, чем в фотошопе.  Работая в ней, получаешь огромное удовольствие. Эту программу я изучил просто досконально. Реальная каждая кнопочка, каждая функция нужна, важна и хороша.

Плюсы: Быстродействие программы. Дружелюбный интерфейс. Множество уникальных функций заточенных конкретно для веб-дизайна. Очень много фишек, таких как: сохранения проекта с историей, возможность ползунком просматривать историю изменений, возможность настроить интерфейс как вам удобно. Заточен как для вектора так и для работы с растровыми приложениями и многое другое.  В Affinity даже макет можно сделать адаптивный. Что тоже очень удобно, когда вам надо сделать несколько размеров экрана. Программа может экспортировать и импортировать файлы любых популярных форматов.

Минусы: Честно, я не нашел для себя. Единственное, что его отличает от Photoshopа, что для тонкой работы с фотографиями разработчики сделали второе приложение Affinity Photo, практически все тоже самое, только заточенное исключительно для фотографов. То есть для фотографий там намного больше возможностей.  Ну и это не большая проблема. Когда мне надо отретушировать фотографию, сделать тонкую цветокоррекцию или еще какие другие манипуляции, то я открываю Affinity Photo  и делаю. Программы между собой связанны и переносить файлы можно просто через копирования ctrl+c/ctrl+v или же через сохранение проекта. Форматы приложений друг друга поддерживаются и читаются. 

Affinity Photo

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

В ней есть полнофункциональный RAW-конвертер. Работа с различными цветовыми пространствами: RGB, CMYK, LAB, Grayscale, плотность 16 бит. Совместимость файлов с Adobe Photoshop PSD, поддержка TIFF, JPEG, PNG, EPS, PDF, SVG и других форматов.

Она действительно сделана на одном движке с Affinity Designer, но в корне отличается. Макеты сайтов в ней рисовать не стоит. Нету например поддержки Artboards, и многих других функций. Тут работа исключительно с фотографиями. В программе есть например возможность склеивать автоматически панорамы, делать 3d панорамы, использовать Liquify инструменты и многое другое. Если вы разрабатываете интерфейс приложения, то вам это все совершенно не нужно. 

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

Работая с дизайном, я честно скажу, я редко открываю Affinity Photo, так как Affinity Designer справляется со всеми основными задачами. Для того, чтобы вырезать фотографию например и настроить цвет и яркость, не обязательно открывать  Affinity Photo, все базовые функции работы с растровыми изображениями  есть в Affinity Designer (вырезать фон, настроить цвета, яркость и прочее.) , но если надо нечто большее (изменить перспективу, использовать Liquify инструмент, нужны тонкие настройки цвета, ретуширование лица  и др.) то да, без Affinity Photo не обойтись.  Тут все есть для работы с фотографиями.

Figma

Относительно новый продукт на рынке. Figma очень похожа по смыслу на Sketch, она заточена на UI/UX для создания приложений и сайтов, но ориентирована больше на облачную и совместную работу с командой.

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

Минус в программе в том, что у нее очень специфический «движок».  Мне не очень нравится грубая работа интерфейса в приложении. Но с этим можно вполне жить. 

Что выбрать?

Я настоятельно рекомендую сразу приобрести Affinity Designer и Affinity Photo для работы с дизайном: иконки, иллюстрация, графика.  Начать обучение с  Affinity Designer, так как нас все же интересует в первую очередь веб-дизайн и все, что с ним связанно.  

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

Affinity Designer/Photo — идеально подходит для разработки иконок, иллюстраций, баннеров, бронирования SMM, различных макетов полиграфии и всего остального.  Рекомендую!

Что касается создания дизайна приложения, то я рекомендую изучать Sketch или Figma. 

Переход на Sketch редактор с Photoshop, обзор программы Sketch app

Всем привет, я Олейник Антон — дизайнер интерфейсов, поклонник  Sketch и один из авторов тематического проекта sketchapp.me. В сегодняшнем гостевом посте детально расскажу про данный графический редактор для Mac OS.

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

Итак, несколько самых главных причин попробовать уже даже и не особо новый Sketch app

Sketch — графический редактор для Mac OS

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

Не работает с растром

Тоже все записывают в минусы. Конечно же, все совсем наоборот. Sketch — векторный и для дизайна интерфейсов. Это не программа для ретуши фотографий. Ну, а интерфейсы в растре, думаю, никто уже сто лет как не рисует.

Небольшие файлы

Документы в Sketch редакторе весят значительно меньше, чем файлы ai или psd (опять же, благодаря использованию системных программных ресурсов макинтоша).

Например, вот файл btn.sketch с одной кнопкой весит 33КБ, такой же btn.ai весит 194КБ, такой же btn.psd — 91КБ. Эти документы небольшие, но и так уже можно примерно оценить соотношение.

[Размеры файлов в Sketch]

Простой интерфейс Sketch

На первый взгляд вам покажется, что вы открыли что-то вроде Keynote. Да, такой чистый внешний вид профессиональной (!) программы немного сбивает с толку ребят, привыкших долго целиться мышкой в чекбоксы на бесчисленных панельках софта от Adobe. Тем не менее, это как раз тот случай, когда меньше = больше. Такой простой интерфейс дает вам время думать головой о своей работе, а не об инструменте.

[Общий интерфейс редактора]

Немного по интерфейсу

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

[Панель слоев Sketch app]

Наверху панель инструментов («тулбар»). Ее, как и в других программах на Маке, можно настроить по своему усмотрению. Инструментов не много, и большую часть из них вы запомните на клавиатуре.

[Настраиваемый тулбар]

Справа контекстная панель (назовем ее так). Очень похожая, только горизонтальная, была в покойном Фаерворксе. Панель меняется в зависимости от того, чем вы занимаетесь на холсте. Есть три режима — свойства группы, свойства фигуры, свойства текста.

[Слева направо: свойства папки, фигуры, текста]

Страницы и холсты

Документ в программе Sketch разделен на страницы. Страницы, в свою очередь, разделены на холсты. Это делает организацию экранов вашего приложения предельно удобной. Например, вы делаете страницу «Login», а внутри несколько холстов с разными состояниями экрана «Login».

В принципе, Фотошоп с Иллюстратором уже умеют сохранять по несколько холстов в одном документе, но им все еще не хватает дополнительного уровня (страниц т.е.)

Тотальная привязка к пикселям всего и вся

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

[Привязать к пикселям]

Стили

В Sketch app, конечно, есть и стили графики, и стили текста. Работают, опять же, поначалу немного привычно: когда вы где-то обновляете стиль у объекта (меняете обводку, цвет, шрифт), стиль обновляется автоматически везде. Нет никаких кнопок типа «Update style».

[Работа со стилями в Sketch]

Символы

Символы Sketch редактора очень похожи на символы Фотошопа и чуть-чуть на символы Иллюстратора. Символ здесь — это такая папка (только другого цвета), внутри которой может быть что угодно, но не другой символ. Работает так же, как и стили: обновили в одном месте — автоматически обновляется везде.

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

[Символы]

Удобный экспорт

Экспорт графики реализован очень просто и удобно. У каждого элемента есть действие «Make Exportable», где вы сможете выбрать нужные форматы и размеры конечных файлов. Есть и всем знакомые фрагменты (slices), чтобы вручную выделять область для экспорта.

[Фрагменты]

Очень удобный момент в экспорте — выбор сразу нескольких форматов и размеров.

[Параметры экспорта]

Сетка

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

[Настройки сетки]

Системный рендер текста

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

Sketch плагины на все случаи

Как и для всех приличных приложений, для программы Sketch тоже есть расширения. Действия — от простых (расставить выбранные объекты с шагом в 10 пикселей) до замороченных (найти все текстовые слои в документе со словом «адоби» и заменить его на «Adobe», без учета регистра). Если программа не умеет что-то очень нужное, то скорее всего «there’s plugin for that».

Чтобы поставить плагин в Sketch, скачайте (обычно с Гитхаба разрабочика) и просто нажмите дважды или переместите в папку Plugins. Открыть папку: меню Plugins->Reveal Plugins Folder…

[Показать папку плагинов в Sketch]

Потом в меню Plugins у вас появится соответствующий свежему плагину пункт

Список расширений, с которых стоит начать:

• Sketch Commands — большая пачка расширений, пригодится во многих ситуациях;
• Rename It — для удобного и быстрого именования и переименования слоев;
• Content Generator — генератор фото, текстов, имен, географических названий.

Вам может пригодиться небольшое приложение Toolbox, которое упростит установку/удаление плагинов для Sketch.

Малый период обучения

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

Послесловие

Что можно сказать в финале обзора Sketch? — конечно, он не идеален. Есть иногда тормоза, не хватает некоторых функций (нет растровых), но все же даже в таком состоянии он может сильно облегчить и ускорить вам разработку дизайна.

Скачать программу Sketch, а также узнать все о редакторе Sketch вы можете на сайте sketchapp.me.

Программа Скетч быстрый рисунок

1.  Скетч, как средство развития творческих  возможностей  художника.

•          Разнообразие видов скетча.

•          Линейный скетч.  Передача образной выразительности при помощи штриха и линии в скетче

•          Техника работы с простым карандашом.

•          10 основных правил рисования наброска

•          Роль наброска в развитии творческого мышления и художественного видения. Образность и функциональность.

•          Особенности работы с разными мягкими материалами (уголь, сангина, соус),

•          способы сохранения работ  исполненных  мягкими материалами

2.  Разнообразие графического языка художественного произведения.

•          Тональный скетч.  Использование цветного и фактурного фона в скетче. Изучение приемов техники  граттажа и фротажа.

•          Художественные приемы быстрого рисования пейзажа, натюрморта, интерьера.

•          Графические приемы стилизации. 

•          Импровизация и трансформация форм, для создания выразительного образа.       

3. Профессиональные приемы создания  быстрого рисунка.

•          Создание быстрых  эффектов техники рисования при помощи воды, техники акватипии.

•          Использование кляксы для создания авторских графических работ.

•          Техника монотипия — многообразие приемов и материалов

•          Монтаж различных техник, материалов и фактур.

4.  Скетч в дизайн-проектировании.

•          Технические средства и приемы скетча в дизайне

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

•          Создание выразительных и эффектных эскизов для заказчика. Быстрое исполнение проектной графики.

•          Знакомство с техникой имитации материалов и фактур в дизайне.

•          Изображение пространства интерьера и экстерьера.

Программы для веб-дизайна: Figma, Sketch, Abobe XD

Ваша конфиденциальность очень важна для нас. Мы хотим, чтобы Ваша работа в Интернет по возможности была максимально приятной и полезной, и Вы совершенно спокойно использовали широчайший спектр информации, инструментов и возможностей, которые предлагает Интернет. Личная информация Членов, собранная при регистрации (или в любое другое время) преимущественно используется для подготовки Продуктов или Услуг в соответствии с Вашими потребностями. Ваша информация не будет передана или продана третьим сторонам.

КАКИЕ ДАННЫЕ СОБИРАЮТСЯ НА САЙТЕ

При добровольной регистрации на получение рассылки вы отправляете свое Имя, E-mail, телефон, профиль facebook messenger через формы регистрации.

С КАКОЙ ЦЕЛЬЮ СОБИРАЮТСЯ ЭТИ ДАННЫЕ

Имя используется для обращения лично к вам, на ваш e-mail, телефон, facebook messenger для отправки писем рассылок, новостей тренинга, полезных материалов, коммерческих предложений. Ваши имя, e-mail, профиль facebook messenger и телефон не передаются третьим лицам, ни при каких условиях кроме случаев, связанных с исполнением требований законодательства. Ваше Имя, E-mail и телефон на защищенных серверах сервиса getresponse.com, facebook messenger и используются в соответствии с его политикой конфиденциальности. Вы можете отказаться от получения писем рассылки и удалить из базы данных свои контактные данные в любой момент, кликнув на ссылку для отписки, присутствующую в каждом email-письме.

КАК ЭТИ ДАННЫЕ ИСПОЛЬЗУЮТСЯ

На сайте www.groward.pro, а так же поддоменах используются куки (Cookies) и данные о посетителях сервиса Google Analytics и Яндекс Метрика. При помощи этих данных собирается информация о действиях посетителей на сайте с целью улучшения его содержания, улучшения функциональных возможностей сайта и, как следствие, создания качественного контента и сервисов для посетителей. Вы можете в любой момент изменить настройки своего браузера так, чтобы браузер блокировал все файлы cookie или оповещал об отправке этих файлов. Учтите при этом, что некоторые функции и сервисы не смогут работать должным образом.

КАК ЭТИ ДАННЫЕ ЗАЩИЩАЮТСЯ

Для защиты Вашей личной информации мы используем разнообразные административные, управленческие и технические меры безопасности. Наша Компания придерживается различных международных стандартов контроля, направленных на операции с личной информацией, которые включают определенные меры контроля по защите информации, собранной в Интернет. Наших сотрудников обучают понимать и выполнять эти меры контроля, они ознакомлены с нашим Уведомлением о конфиденциальности, нормами и инструкциями. Тем не менее, несмотря на то, что мы стремимся обезопасить Вашу личную информацию, Вы тоже должны принимать меры, чтобы защитить ее. Мы настоятельно рекомендуем Вам принимать все возможные меры предосторожности во время пребывания в Интернете. Организованные нами услуги и веб-сайты предусматривают меры по защите от утечки, несанкционированного использования и изменения информации, которую мы контролируем. Несмотря на то, что мы делаем все возможное, чтобы обеспечить целостность и безопасность своей сети и систем, мы не можем гарантировать, что наши меры безопасности предотвратят незаконный доступ к этой информации хакеров сторонних организаций. В случае изменения данной политики конфиденциальности вы сможете прочитать об этих изменениях на этой странице или, в особых случаях, получить уведомление на свой e-mail.

Все начинается здесь · Набросок

Пропустить навигацию

Меню

• Войти

• Дизайн
• Сотрудничать
• Программы

• Ресурсы

  • Получить помощь

    Прочтите нашу документацию и ответы на часто задаваемые вопросы или свяжитесь с нами.

  • Расширения

    Делайте еще больше с помощью помощников, плагинов и интеграций.

  • События и встречи

    Откройте для себя и присоединитесь к местному сообществу Sketch.

    1. 10 июня
       Эскиз 72 — Создание системы иллюстраций

  • Блог

    Получайте новости, статьи и идеи от команды.

    1. 3 июня
       Новое в Sketch: делитесь своими документами в Моих черновиках

    2. 2 июня
       Чип в: Улучшение нашей рендер-фермы с M1 Mac

    3. 11 мая
       Эскиз: в 2021 году и далее

• Ценообразование

• Войти
• Подпишитесь бесплатно

00:00 / 00:00

Sketch в 2021 году и позже Зарегистрируйтесь бесплатно

Эскиз

• Обзор
• Дизайн
• Сотрудничать
• Стоимость

Программы

• приложений
• Расширения
• Обновления

Служба поддержки

• Документация
• Получить помощь
• Статус службы
• Управление лицензией

Соединять

• Блог
• События и встречи
• Исследовательские лаборатории
• Платформа разработчика

Подписывайтесь на нас

• Твиттер

• Facebook

• Instagram

• Дриблинг

Компания

• О нас
• Карьера

  13

• Условия и политика
• Свяжитесь с нами

©
2021 г.
Эскиз Б.V.

20 лучших программ для рисования, графического дизайна и 3D (бесплатные и платные)

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

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

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

Illustrator разработан для безупречной работы с другими наборами программного обеспечения для творчества от Adobe, такими как Photoshop и InDesign.Это часть обычного рабочего процесса графического дизайнера — создать векторное изображение в Illustrator, чтобы затем экспортировать его в Photoshop, чтобы манипулировать им или применить некоторые визуальные эффекты, или передать его в InDesign для подготовки к печати. Illustrator работает как в Windows, так и в MacOS.

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

Загрузите Adobe Illustrator CC с официального сайта:

►Если вы хотите приобрести полную версию Illustrator (например, Illustrator CC), вам необходимо оформить подписку, которая может быть ежемесячной или годичной (если вы являетесь студент у вас скидка около 60% от цены). Здесь вы можете скачать бесплатную пробную версию с полным набором функций на 7 дней, после чего вам будет предложено приобрести лицензию.

Учебные пособия по Illustrator:

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

►Другое руководство по Illustrator, средний уровень, чтобы привыкнуть к работе с фигурами, текстом и изображениями.

Лучшее программное обеспечение для графического дизайна 2021 года

Графический дизайн — это все о программном обеспечении. Несомненно, талантливый дизайнер может сделать из Microsoft Paint что-нибудь красивое. Но интуитивно понятное управление и гибкость хорошей программы могут иметь решающее значение. Итак, какое программное обеспечение для графического дизайна вам подходит?

Какое программное обеспечение для дизайна вам подходит? Мы внимательно рассмотрим самые популярные варианты.Иллюстрация Владанланда

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

Итак, какое программное обеспечение для проектирования выбрать? Вы ищете гибкость и дороговизну Photoshop или ищете что-то более простое и недорогое?

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

Лучшие оплачиваемые программы графического дизайна

—

Adobe Photoshop

Изображение с Engadget

Adobe Photoshop — самая узнаваемая программа для графического дизайна. Когда дело доходит до обработки изображений, Photoshop может делать все, от базовой обрезки, которую могла бы выяснить ваша бабушка, до более сложных растровых дизайнов. Photoshop известен классическими функциями, такими как инструмент «Перо», слои и маски, но в самой последней версии добавлены некоторые интересные приемы, такие как инструмент «Рамка» для легкого маскирования и новое рабочее пространство «Заливка с учетом содержимого».С потенциально безграничным потолком навыков Photoshop — отличный навык графического дизайна, который нужно начать изучать.

Когда дело доходит до обработки изображений, Photoshop может все.

Подходит для: редактирования изображений

Стоимость: Adobe теперь предлагает услугу подписки на свои продукты с 30-дневной пробной версией. План фотографии для частных лиц (lightroom, lightroom classic, Photoshop, 20 ГБ облачного хранилища) стоит 9 долларов.99 в месяц, полная стоимость Creative Cloud 52,99 доллара США в месяц. Однако существуют разные цены для студентов и учителей, предприятий и учителей, школ и университетов.

Требуемый уровень квалификации: от начального до продвинутого

Плюсы:

• Практически безграничный потолок навыков
• Интегрированная стоковая библиотека
• Множество дизайнерских инструментов для редактирования изображений

Минусы:

• Интерфейс может быть непросто привыкнуть к
• Неидеальные обновления
• Невозможно создать настоящие векторные файлы

Эскиз

Изображение через Stack Exchange

Sketch — это векторный инструмент, доступный только на Mac. Это программа, ориентированная в основном на веб-дизайн, разработку приложений и интерфейсов.Недавно это привело к снижению конкуренции в области графического дизайна: некоторые разработчики предпочитают файлы Sketch от дизайнеров, а не многослойные файлы Photoshop. Хотя Sketch не предназначен для редактирования фотографий или печати, он отлично подходит для создания значков и интерфейсов, которые вы увидите на веб-сайтах и ​​в мобильных приложениях. Дизайнеры также могут создавать живые композиции, которые разработчики могут предварительно просмотреть, нажав или пролистывая, чтобы увидеть, как они будут выглядеть после публикации.

Sketch отлично подходит для веб-дизайна, разработки приложений и интерфейсов.

Подходит для: пользовательских интерфейсов

Стоимость: 99 долларов США в год за устройство

Требуемый уровень квалификации: новичок

Плюсы:

• Низкая кривая обучения
• Дешевле, чем другие популярные программы

Минусы:

• Только Mac
• Не подходит для печатных дизайнов или иллюстраций

Adobe Illustrator

Изображение с помощью Digital Arts

Photoshop и Illustrator имеют некоторые схожие инструменты и функции, но Adobe Illustrator ориентирован на векторный дизайн.Создавайте красивые логотипы, типографику, значки и наброски с помощью инструмента «Сетка», инструмента «Перо», образцов и цветов или инструментов «Форма» и «Обработка контуров» в Illustrator. Хотя для изучения потребуется некоторое время, почти безграничный потенциал создания векторных дизайнов стоит затраченных усилий.

В основном я использую Photoshop и Illustrator. Я полностью отказался от ручки и бумаги, я делаю все свои наброски в Photoshop, а затем рисую дизайн в Illustrator, где я также готовлю его к анимации, если это проект.

Подходит для: векторных изображений

Стоимость: Один только Illustrator будет стоить 20,99 долларов в месяц, а полная стоимость Creative Cloud — 52,99 долларов в месяц.

Требуемый уровень квалификации: Продвинутый

Плюсы:

• Полезный пользовательский интерфейс
• Широкий ассортимент инструментов
• Поддерживает точное редактирование

Минусы:

Affinity Designer

Affinity Designer

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

Affinity также недавно получила большое обновление с новыми функциями и улучшениями производительности. Это программное обеспечение — отличный вариант для тех, кто не хочет тратить деньги на предложения Adobe, но нуждается в чем-то, что работает на высоком уровне.

Affinity Designer — впечатляющая недорогая альтернатива Adobe Illustrator.

Подходит для: векторных файлов

Стоимость: 49,99 $

Требуемый уровень квалификации: от начального до продвинутого

Плюсы:

• Начать работу легко
• Быстро
• Намного дешевле, чем большие парни

Минусы:

• Некоторые инструменты, предлагаемые Illustrator, недоступны

Adobe InDesign

Изображение через Adobe

Adobe InDesign, обязательный для издательского сообщества, используется для оформления журналов и газет с 1999 года.Собирайте потрясающие журналы, информационные листы и брошюры и легко экспортируйте их в PDF или HTML. Хотя InDesign представляет собой своего рода «пони с одной уловкой», у него невысокая кривая обучения, и он отлично подходит для новичков, которые учатся сочетать текст и графику.

InDesign отлично подходит для оформления журналов, открыток, листовок и печати.

Подходит для: макетов публикации

Стоимость: Сам InDesign стоит 20,99 доллара в месяц, а полная версия Creative Cloud стоит 52 доллара.99 / мес.

Требуемый уровень квалификации: от начального до продвинутого

Плюсы:

• Бесспорный чемпион издательской индустрии
• Интуитивно понятные функции обрезки и изменения размера
• Огромный выбор шрифтов

Минусы:

• Некоторые претензии к форматированию PDF

Лучшее бесплатное программное обеспечение для графического дизайна

—

GIMP

Изображение через Capterra

Возможно, самый популярный бесплатный редактор растровой графики с открытым исходным кодом, GIMP (программа манипулирования изображениями GNU), имеет многие из тех же функций, что и платные программы.Хотя его макет не такой привлекательный, как, скажем, в Photoshop, вы по-прежнему получаете расширенные возможности ретуширования, рисования и кадрирования фотографий, которые есть в более известных программах.

Подходит для: растровых изображений

Требуемый уровень квалификации: новичок

Плюсы:

• Хорошее сообщество
• Множество инструментов для бесплатной программы

Минусы:

• Не так быстро обновляется, как другие программы
• Меньше признания
• Не настолько интуитивно понятен в использовании

Gravit Designer

Изображение предоставлено Gravit Designer

Gravit Designer — это бесплатное приложение для векторного дизайна, которое отлично подходит для создания логотипов, обработки фотографий, иллюстраций и анимации.Вы можете использовать Gravit онлайн с их облачным программным обеспечением, хотя в некоторых обзорах утверждается, что оно работает немного медленнее, чем локально установленная версия. Макет изящный и полностью настраиваемый, но Gravit Designer Pro больше не является бесплатным (49 долларов в год).

Gravit отлично подходит для создания логотипов, обработки фотографий, иллюстраций и анимации.

Подходит для: векторных изображений

Требуемый уровень квалификации: новичок

Плюсы:

• Множество функций и возможностей
• Облачная программа отличная

Минусы:

• Бесплатная версия не так эффективна, как Pro

Inkscape

Изображение с Softonic

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

Лучше всего использовать для: векторных изображений и файлов в формате SVG

Требуемый уровень квалификации: продвинутый

Плюсы:

• Набор фильтров
• Полезный сайт и сообщество

Минусы:

• Может работать медленно
• Крутая кривая обучения

Вектор

Изображение через Medium

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

Новичкам понравится низкая кривая обучения Vectr.

Подходит для: векторных изображений

Требуемый уровень квалификации: новичок

Плюсы:

• Очень дружелюбен к новичкам
• Хорошая подборка обучающих видео

Минусы:

• Немного ограничены в возможностях
• Неуклюжий процесс регистрации

Бонусные дизайнерские программы

—

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

Procreate — программа для iPad для рисования на ходу

Изображение предоставлено Digital Arts

Вдохновение пришло во время поездки в метро? Procreate позволяет дизайнерам делать быстрые наброски прямо на ходу. Имея более 130 кистей, это отличный инструмент в арсенале (и стоит всего 9,99 доллара США).

Krita — бесплатный редактор растровой графики с открытым исходным кодом

Изображение с KDE

Бесплатная программа для рисования и рисования, Krita отлично подходит для комиксов и манги и заняла первое место среди бесплатных программ для рисования по версии TechRadar в 2021 году.

Canva — онлайн-редактор с перетаскиванием.

Изображение с Canva

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

Scribus — бесплатная альтернатива InDesign

Изображение взято с Zwodnik

Scribus — это настольная издательская программа с открытым исходным кодом. Хотя он и не такой красивый и обширный, как InDesign, он может стать хорошей заменой, если вы в затруднительном положении.

Autodesk SketchBook — бесплатная программа для создания эскизов

SketchBook Via SketchBook

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

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

—

Выбрать «лучшее» программное обеспечение для графического дизайна всегда непросто, поскольку на самом деле это вопрос личного мнения и зависит от того, что именно вы хотите создать. Каждый дизайнер должен решить для себя, какое программное обеспечение лучше всего подходит для его стиля дизайна, потребностей, среды и, конечно же, клиента. Но всегда есть новое программное обеспечение для дизайна, которое стоит открыть. Будьте в курсе всех доступных вариантов и попробуйте их! Может быть, вы найдете новую любимую дизайнерскую программу, которая идеально подойдет вам и вашему искусству.

Хотите начать свою карьеру графического дизайнера? Присоединяйтесь к нашему сообществу потрясающих дизайнеров.

Нужно что-то оформленное?

Наши дизайнеры могут помочь вам создать что угодно.

Sketch против Figma, Adobe XD и других приложений для дизайна пользовательского интерфейса — Smashing Magazine

Об авторе

Ашиш — дизайнер, энтузиаст технологий и геймер. Помимо того, что он пускает слюни на совершенство гаджетов в Интернете и других местах, он возглавляет студию дизайна UX в Пуне,
Больше о
Ашиш
↬

Некоторое время Sketch был де-факто предпочтительным приложением для дизайнеров UX и UI.Но за последние год или два мы увидели много новых претендентов на корону Sketch. Двумя из них, добившимися самых больших успехов, являются Figma и Adobe XD. В этой статье я попытаюсь обобщить свои мысли о том, как эти приложения конкурируют со Sketch и в чем их уникальные особенности.

Некоторое время Sketch был предпочтительным приложением для многих дизайнеров UX и UI. Однако в последнее время мы видим много новых претендентов на позицию №1 в Sketch как универсальный инструмент для дизайна пользовательского интерфейса. Два приложения, которые, как мне кажется, выделяются в основном среди остальных (и которые добились наибольших успехов в своем развитии), — это Figma и Adobe XD.

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

Примечание : Чтобы извлечь пользу из статьи, вам не обязательно иметь опыт работы со Sketch, Figma или Adobe XD. Тем не менее, если у вас есть опыт работы хотя бы с одним из этих приложений, это, безусловно, поможет.

Содержание

Встречайте Image Optimization , новое практическое руководство Адди Османи по оптимизации и размещению высококачественных изображений в Интернете. От форматов и сжатия до доставки и обслуживания: все в одной книге на 528 страницах.

Перейти к содержанию ↬

Конкуренты эскизов (и где все началось для нас)

Некоторое время назад Adobe Fireworks была предпочтительным приложением для разработки пользовательского интерфейса для всей нашей команды.Fireworks был гибким, простым в использовании и с помощью множества бесплатных расширений идеально вписывался в наш рабочий процесс проектирования. Когда Adobe прекратила выпуск Fireworks, единственной оставшейся альтернативой был Sketch. Мы сделали переход (и он был дорогостоящим, учитывая, что нам также пришлось перейти с Windows на Mac), но прирост производительности был огромным, и мы ни разу не пожалели о сделанном выборе.

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

Хотя кажется, что не проходит и недели без запуска нового приложения для дизайна экрана, лишь некоторые из них достаточно повзрослели, чтобы занять лидирующую позицию в Sketch.Два, которые я считаю наиболее близкими, — это Figma и Adobe XD. Оба приложения имеют полнофункциональные бесплатные версии, что значительно снижает входной барьер для новых пользователей.

XD имеет версии для Mac и Windows, а Figma поддерживает Mac, Windows, Linux и Chrome OS — практически любую операционную систему, на которой можно установить и запустить современный браузер.

Сравнение Sketch, Figma и Adobe XD. (Превью в большом разрешении)

Figma

Figma — это веб-приложение; вы можете запустить его в браузере и, следовательно, практически в любой операционной системе.Это один аспект, полностью контрастирующий со Sketch, который предназначен только для Mac. Вопреки моим предположениям, Figma работает идеально плавно и даже превосходит скорость отклика Sketch в ряде областей. Вот пример:

Почему я предпочитаю @figmadesign Sketch. pic.twitter.com/sZRO97tlNO

— Housseynou Fall (@HousseynouFall) 19. Декабрь 2017 г.

Много было сказано о сравнении Figma со Sketch, но гонка только накаляется с недавними обновлениями обоих приложений.

Успех Figma заставил разработчиков Sketch пересмотреть свой собственный подход. Недавно компания собрала 20 миллионов долларов на добавление дополнительных функций, включая веб-версию приложения Sketch.

Adobe XD

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

Прочее

Figma и Adobe XD ни в коем случае не единственные претенденты на лидерство Sketch. Хотя может показаться, что каждые несколько недель к гонке присоединяется новый, некоторые явно впереди на данный момент — но, на мой взгляд, не в той же лиге, что и предыдущие.

• Framer X
  Хотя Framer начинал как инструмент на основе кода для создания прототипов, они постоянно добавляли возможности дизайна.Последней версией является Framer X, который можно назвать инструментом проектирования пользовательского интерфейса с возможностью кодирования взаимодействий и анимации для более точного управления и гибкости.
• Студия InVision
  InVision начиналась как лучший способ поделиться дизайнерскими макетами с коллегами и клиентами. Однако с годами они добавили в приложение функции, а также создали Studio как отдельное приложение для дизайна пользовательского интерфейса, прототипов и анимации. (Студия, вероятно, основана на Macaw, который InVision купила в начале 2016 года.)
• Gravit
  Это еще одно приложение для дизайна пользовательского интерфейса, которое медленно, но неуклонно улучшается в фоновом режиме.Corel купила Gravit несколько месяцев назад, а это значит, что вскоре мы, возможно, увидим, что он приобретает больше возможностей и пользуется популярностью в сообществе.

«Еще одна развивающаяся категория приложений в этой области — это приложения, которые объединяют дизайн и код для вывода реального готового к производству кода, который разработчики могут напрямую использовать в своих приложениях. Framer X на самом деле делает это до некоторой степени, но такие приложения, как Alva, Modulz и Supernova, продвигают вещи еще на один уровень. Я не буду вдаваться в подробности здесь, потому что все они находятся на очень ранних стадиях разработки, но я хотел указать на них, потому что именно в них, похоже, движется будущее инструментов дизайна пользовательского интерфейса.”

Как консультант по дизайну, мы — я и моя команда в Kritii Design — в конечном итоге адаптируемся к любому набору инструментов, который используют клиенты. Я видел постепенный переход от Photoshop к Sketch на протяжении многих лет, но примерно в последний год мы наблюдали внезапный переход от Sketch к Figma. Sketch по-прежнему является доминирующим инструментом в большинстве команд, но Figma — и даже XD в некоторых случаях — начали пользоваться популярностью у более крупных команд. Мне еще предстоит встретить группу, которая предпочла бы какой-либо другой вариант, но предполагаю, что расхождения не так уж и велики.

Сходства и различия

Я пользуюсь Sketch уже три года и считаю себя опытным пользователем. Я пробую Figma уже около года, но гораздо больше в последние пару месяцев. Adobe XD для меня новинка — около месяца с тех пор, как я начал с ним экспериментировать. Таким образом, приведенное ниже сравнение основано на моем опыте работы со всеми тремя приложениями. Я также добавлю отрывки о других приложениях, которые, кажется, делают определенные вещи лучше, но в основном это только эти три.

Пользовательские интерфейсы

Я не буду вдаваться в подробности пользовательских интерфейсов каждого приложения, потому что все три имеют почти одинаковый интерфейс: слоев, панель слева, холст находится посередине, свойств панель справа и инструменты панель инструментов вверху. Можно с уверенностью сказать, что интерфейсы Figma и XD в значительной степени вдохновлены тем, с чего начинал Sketch.

Примечание: Правая панель (которая позволяет управлять свойствами объектов на холсте) называется Inspector в приложении Sketch, Properties в Figma Design и Property Inspector в Adobe XD.Но все они делают одно и то же.

Основы: монтажные области и страницы

Когда вы создаете новый файл в Sketch или Figma, вы по умолчанию находитесь на «странице 1», и на вас смотрит простой холст. Вы можете создать монтажные области на странице или добавить дополнительные страницы. Вы можете выбрать один из множества предустановок (для телефонов iPhone / Android или для Интернета) или просто перетащить нужный размер.

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

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

Заголовок, список и панель вкладок — это фреймы, вложенные в фрейм для всего экрана в Figma.(Большой предварительный просмотр)

Когда вы создаете новый документ в Adobe XD, он явно просит вас выбрать из предустановленного списка размеров монтажной области. Вы, конечно, можете выбрать «Custom». Предустановленный выбор запечен таким образом, что XD позволяет вам предварительно просматривать дизайны. Все, что превышает заданную высоту, прокручивается по умолчанию. Когда вы увеличиваете высоту монтажной области, XD добавляет маркер, чтобы показать исходную высоту рамки устройства.

Синяя линия показывает высоту области просмотра выбранного устройства, чтобы помочь правильно расположить контент «над сгибом».(Большой превью)

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

Сводка

Sketch и Figma поддерживают страницы и монтажные области, хотя монтажные области (или фреймы) Figma более гибкие, поскольку их можно вкладывать друг в друга.Adobe XD поддерживает только артборды.

Сетки и макет

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

Figma позволяет добавлять любое количество элементов каждого типа — сетку, столбцы и строки. Еще один пример внимания к деталям в Figma — когда вы устанавливаете отступ на 0, он автоматически переключается с отображения заполненных столбцов на отображение только строк.

Сравнение параметров сетки макета в трех приложениях.

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

Все три приложения также позволяют устанавливать ограничения, определяющие, как элементы будут масштабироваться или перемещаться при изменении размера их контейнеров. Более того, все они используют почти идентичный пользовательский интерфейс для установки и управления этими ограничениями.Figma была первой из всех, кто использовал эту концепцию пользовательского интерфейса. Sketch последовал за ним и улучшил его в своем последнем выпуске, а Adobe XD представила эту функцию в сентябре 2018 года.

Изменение размера объекта и ограничение пользовательского интерфейса во всех трех приложениях. (Большой превью)

В Figma ограничения работают только с элементами внутри кадра, а не с группами (как в Sketch и Adobe XD). Это слегка раздражает, потому что вы можете устанавливать ограничения, но они просто не работают, когда вы изменяете размер группы. Но Figma активно рекомендует использовать вложенные фреймы, которые намного мощнее групп.Еще одно преимущество Figma заключается в том, что при использовании сеток макета ограничения применяются к столбцу или ячейке, внутри которой находится элемент.

В Figma ограничения макета применяются к столбцам при добавлении сетки макета.

Сводка

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

Инструменты для рисования и редактирования

Ни в одном из этих приложений нет расширенных векторных инструментов, таких как Adobe Illustrator или Affinity Designer. Вы получаете самые простые основы — инструмент прямоугольника, инструмент эллипса, инструмент многоугольника и инструмент для рисования векторной графики произвольной формы. Плюс логические возможности комбинирования и вычитания фигур. Для большинства потребностей в дизайне пользовательского интерфейса это просто отлично.

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

Примеры иллюстраций, созданных во всех трех приложениях. Слева направо: Никола Лазаревич в Sketch, Mentie Omotejowho в Figma и Матей Новак в Adobe XD (проверьте каждую ссылку, чтобы увидеть оригиналы). (Большой превью)

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

У Figma есть преимущество в этом отделе благодаря тому, что они называют «векторными сетями». Если вы когда-либо использовали Adobe Flash для рисования, это покажется вам очень знакомым. Однако вместо того, чтобы пытаться описать это, я просто покажу вам, что он делает …

векторных сетей Figma в действии. Инструменты формы

Figma также кажутся на шаг впереди Sketch. Что касается эллипсов, теперь есть возможность легко вырезать пироги и пончики — отличная функция для всех, кто пытался использовать настройки панели Sketch для создания кольцевых диаграмм.Углы прямоугольника можно перетаскивать, чтобы задать радиус угла, не беспокоясь о панели «Свойства».

Создание кольцевой диаграммы в Figma. Adobe XD

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

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

Одна из выдающихся особенностей XD — это то, что называется повторяющейся сеткой. Он позволяет вам создать один элемент и повторить его в списке или сетке, каждый со схожими свойствами, но уникальным содержанием. Figma ответила на это умным выбором. Вместо того, чтобы указывать что-то в виде списка или сетки, Figma позволяет вам выбрать группу элементов, которые уже являются списком или сеткой, а затем упорядочить их, равномерно распределив их и легко сортируя их с помощью перетаскивания.

Сравнение функции XD Repeat grid с умным выбором Figma.

Резюме

Хотя ни одно из приложений не может сравниться с возможностями Illustrator или Affinity Designer, когда дело доходит до иллюстраций, они предоставляют достаточно адекватный набор инструментов для рисования для повседневного проектирования пользовательского интерфейса. Векторные сети Figma опережают две другие с точки зрения гибкости.

Символы

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

• Sketch
  В Sketch преобразование чего-либо в символ по умолчанию отправляет его на страницу с именем «Symbols», создавая его экземпляр вместо выбранных элементов. Это четкое разделение между символом и его экземплярами сделано намеренно. Экземпляр символа можно обновить только определенными способами — размер, текст, изображения; а вложенные символы можно обновить через панель инспектора справа. Чтобы отредактировать исходный символ, вы можете дважды щелкнуть его, чтобы перейти на страницу «Символы» и внести изменения.Любые внесенные вами изменения будут применены к всем экземплярам символа.

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

Начиная с Sketch версии 53, теперь вы можете выбирать элементы внутри экземпляра символа, а затем использовать панель Overrides для изменения содержимого только этого элемента. Это улучшение по сравнению с предыдущим вариантом, когда можно было выбрать только весь экземпляр.

Редактирование экземпляра символа в Sketch.

• Figma
  В Figma символы называются компонентами. Когда вы создаете компонент, он остается на месте и обозначается как «Главный компонент». При копировании в другое место в дизайне по умолчанию создаются экземпляры. Экземпляры можно редактировать в любом месте, как и в любой другой группе, за исключением того, что размещение элементов не может быть изменено. Вы можете изменить текст, цвет, размер и даже поменять местами вложенные символы — все они встроены. Это определенно кажется более гибким, чем подход Sketch, но в то же время накладывает соответствующие ограничения, чтобы не путаться с исходным компонентом.Например, удаление главного компонента не влияет на экземпляры. Вы можете просто «восстановить» главный компонент в любое время и продолжить вносить изменения.

Редактирование экземпляра компонента в Figma.

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

Все три приложения поддерживают повторное использование символов в файлах.

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

Adobe XD использует более упрощенный подход к своим «связанным символам». Копирование символа из одного документа в другой автоматически связывает их.Изменения, внесенные в символ в любом документе, отображаются как уведомления в других документах, что дает вам возможность просматривать и применять их в других документах.

Подход Figma представляет собой централизованное хранилище компонентов, называемое «Team Library». Каждый член команды с правом доступа может добавлять компоненты в командную библиотеку. Любые изменения, внесенные в компоненты библиотеки, отображаются в виде уведомлений, что позволяет просматривать и обновлять их в открытых файлах.

Сводка

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

Стили

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

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

Стили слоя и текста в Sketch. (Большой превью)

• Figma использует совершенно другой подход, создавая каскад стилей. Это означает, что вы можете сохранять стили для текста (шрифт, размер, толщина, высота строки и т. Д.), Цвета или эффекты (тени, размытия и т. Д.), А затем смешивать и сопоставлять их с элементами. Например, свойства шрифта и цвет текстового блока можно изменять независимо друг от друга. Это позволяет использовать другой цвет для слова внутри абзаца, чего нельзя сделать в Sketch.

Стили цвета, текста и эффектов в Figma. (Большой предварительный просмотр)

• Стили в XD ограничены стилями символов для текстовых элементов. Вы можете сохранять цвета и применять их из библиотеки, но нет возможности сохранить набор характеристик (заливка, граница, тень и т. Д.) В качестве отдельного стиля.

Сводка

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

Проектирование с использованием данных

Один из моих наиболее часто используемых плагинов для Sketch — Content Generator, который позволил мне быстро заполнить мои проекты реалистичными фиктивными данными вместо обычных lorem ipsum , John Doe и им подобных. С выпуском версии 52 Sketch устранил необходимость в этом плагине, представив встроенную поддержку импорта данных. Теперь вы можете легко добавить в свой дизайн реалистичные имена, адреса, номера телефонов и даже фотографии.Пара наборов уже встроена, но при необходимости вы можете добавить больше.

Вы можете добавлять внешние наборы данных и управлять ими в настройках Sketch. (Большой превью)

Команда Adobe XD продемонстрировала некоторую незавершенную поддержку встроенных функций на конференции Adobe MAX MAX, но мы не знаем, когда это войдет в сам продукт. Единственная особенность, которая уже реализована, — это возможность перетаскивать TXT-файл на элемент в повторяющейся сетке или набор изображений на изображение в повторяющейся сетке, чтобы заполнить все элементы в сетке эти данные.Что меня больше волнует, так это экосистема плагинов, которая предлагает гораздо более мощные способы импорта реалистичных данных в реальном времени в XD. В качестве примера можно привести плагины Airtable и Google Sheets, которые позволяют подключаться к приложениям и извлекать данные из электронных таблиц в режиме реального времени.

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

Резюме

Adobe XD наконец-то выходит на первое место с гораздо более функциональным API, который позволяет извлекать данные в реальном времени, а не только статические данные, как в Sketch. У Figma есть над чем поработать на этом фронте.

Плагины и интеграции

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

Как лидер пакета, Sketch также имеет самый большой список интеграций со сторонними приложениями. Будь то прототипирование и совместное использование через InVision, передача разработчика через Zeplin, контроль версий через Abstract или Plant, большинство приложений имеют прямую интеграцию со Sketch, с возможностью импорта, синхронизации или предварительного просмотра файлов Sketch.

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

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

Плагин Airtable, о котором я упоминал выше, является примером интеграции приложений, в которой XD быстро становится очень хорошо.Также возможна интеграция с usertesting.com, Cloudapp, Dribbble и другими.

Вы можете быстро просматривать и устанавливать плагины прямо из XD. (Большой превью)

Что касается управления плагинами, XD работает намного лучше с приятным пользовательским интерфейсом, позволяющим находить, читать и устанавливать все плагины. Для Sketch вам нужно найти плагин в Интернете, загрузить его и запустить файл .sketchplugin , чтобы установить его. Вы можете отключить или удалить их на экране настроек, но не более того.

Figma отстает в плане плагинов по сравнению со Sketch и даже XD. В нем нет специального API плагина, но в начале этого года Figma открыла некоторые API для интеграции с другими приложениями. Помимо встроенной интеграции с Principle, Zeplin, Avocode и Dribbble, результатом стали в основном то, что вы можете делать со своими файлами за пределами Figma — например, этот экспортер PDF, возможность передавать ресурсы из Figma в Github с помощью Relay и т. Д. на.

В марте 2018 года Крис Расмуссен из Figma сказал следующее о планах добавления расширений:

«Мы наблюдали, как наши конкуренты добавляли модели расширений, которые предоставляли разработчикам свободу за счет качества, надежности и предсказуемости.Мы стремимся использовать невероятный коллективный потенциал сообщества Figma для улучшения нашего инструмента, но мы не собираемся вводить расширения, пока не убедимся в надежности нашей модели расширений. Пока нет приблизительной даты, но мы активно изучаем, как построить ее надежным способом ».

Резюме

Опять же, Figma нужно наверстать упущенное в области плагинов, особенно по сравнению с огромной экосистемой Sketch или мощными API-интерфейсами и маркетингом Adobe, чтобы привлечь больше разработчиков.

Создание прототипов, взаимодействие и анимационный дизайн

Sketch и Figma начинались как приложения для статического дизайна, тогда как Adobe XD был запущен со встроенной возможностью связывать экраны вместе для создания прототипов с низкой точностью. Figma добавила функцию прототипирования в середине 2017 года, а Sketch добавила прототипирование в начале 2018 года. На сегодняшний день все три приложения позволяют создавать прототипы и делиться ими с другими.

Инструменты прототипирования Sketch и Figma в основном ограничивались связыванием отдельных элементов с другими монтажными областями при нажатии / касании или наведении курсора, с ограниченным набором эффектов перехода.Figma только что продвинулась с внедрением оверлеев в декабре 2018 года. Это — в сочетании с тем фактом, что рамки Figma более гибкие, чем жесткая структура артборда Sketch — открывает возможность прототипирования меню, диалоговых окон и многого другого. Однако оба приложения поддерживают другие приложения для создания прототипов. Figma имеет интеграцию с Principle и Sketch практически со всеми инструментами для создания прототипов.

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

Сравнение прототипов элементов управления в Sketch и Figma. (Большой превью) Выпуск

Adobe XD за октябрь 2018 г. позволил ему выйти вперед в гонке, когда дело доходит до прототипирования. Теперь он делает все, что я упоминал выше, но включает в себя две более мощные функции:

• Автоанимация.
  Если дизайнерам приходилось переносить свои проекты в такие приложения, как Principle или After Effects, чтобы добавить анимационный дизайн, то теперь некоторые из них встроены в XD. Он работает, автоматически перемещая элементы с одинаковыми именами при переходе с одного экрана на другой.Это может показаться простым, но эффекты, которые вы можете создать, довольно впечатляющие.

Добавление анимации к прототипам с помощью «Автоанимации» в XD.

• Голосовые прототипы
  Теперь вы можете запускать взаимодействия в XD с помощью голосовых команд и даже включать речевые ответы на триггеры. Это огромное дополнение, которое упрощает создание прототипов диалоговых пользовательских интерфейсов в XD, что невозможно в Sketch, Figma или других ведущих приложениях для создания прототипов.

Если для вас важна анимация, обратите внимание на InVision Studio.Он имеет рабочий процесс анимации на основе временной шкалы, чем не может похвастаться ни одно из других приложений в этом списке. Или, если вам удобно работать со своим кодом, модель взаимодействия Framer на основе кода определенно стоит изучить.

Резюме

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

Совместная работа

Sketch и Adobe XD — традиционные настольные приложения, созданные для дизайнеров, которые могут работать изолированно и делиться своими проектами, когда они будут готовы. Figma, с другой стороны, была создана для совместной работы, больше похожа на Google Docs для дизайнеров.

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

Совместное проектирование в Figma в стиле Google Docs.

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

Разработчики, просматривающие файл, могут получить спецификации для элементов дизайна — а-ля Zeplin или Avocode — и экспортировать любые ресурсы изображений, которые им нужны.Ресурсы даже не нужно настраивать для экспорта, как в Sketch.

Примечание: Для дизайнов Figma существует три уровня доступа: 1) владелец, 2) может редактировать, и 3) может просматривать. Мы используем «can view», чтобы предоставить разработчикам доступ ко всем спецификациям и возможность экспортировать активы по мере необходимости.

Figma также имеет встроенную систему комментариев, которая важна при рассмотрении проектов с более широкими командами и клиентами. Сегодня я полагаюсь на комбинацию Sketch и InVision для достижения этой цели.

Sketch позволяет загружать файлы в свои облачные сервисы, а затем делиться ссылкой для просмотра другими. Однако обеспечение того, чтобы последняя версия была в облаке, зависит от вас. Это может быть большим риском, если у вас есть разработчики, работающие над устаревшим дизайном. В выпуске XD за декабрь 2018 года добавлена ​​возможность сохранять файлы в облаке, и вы можете решить, какие файлы сохранять в облаке, а какие — локально. Это решает проблему с поддержанием последних версий в облаке.

Резюме

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

Какой из них вам подходит?

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

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

Если вы работаете в Windows или если вам требуется моушн-дизайн, Adobe XD — лучший вариант. В Sketch просто нет возможностей анимации, и не похоже, что версия для Windows может появиться на горизонте в ближайшее время.Что касается анимации, вы также можете посмотреть на InVision Studio. А если вы хорошо разбираетесь в коде, Framer X обеспечивает максимальную гибкость из всех.

На мой взгляд, на данный момент Figma обеспечивает наилучший баланс между функциями, удобством использования и производительностью. Да, вам нужно быть в сети, чтобы использовать его (если у вас нет открытого файла, и в этом случае вы можете редактировать его в автономном режиме). Нет, у него нет плагинов или каких-либо возможностей анимации. Но если вашим основным требованием являются макеты дизайна пользовательского интерфейса, Figma намного лучше справляется с задачей создания, совместного использования и совместной работы с другими, чем Sketch или Adobe XD.У него очень щедрый уровень бесплатного пользования, он доступен на любой платформе, которая может работать с современным браузером, и он очень активно находится в разработке, с новыми функциями и обновлениями, которые появляются быстрее, чем я могу продолжать изучать их все.

В моей команде, например, кажется, что существует равномерный раскол между людьми, которые предпочитают Sketch или Figma. Я сам начинаю опираться на Figma, но также время от времени использую Adobe XD для экспериментов по быстрому дизайну движений.

А если вы ищете еще более короткий tl; dr summary — доверьтесь Мэн Кому:

«Мои мысли об инструментах дизайна и почему вы должны их выбрать.Figma: сотрудничество и все-в-одном
Скетч: зрелость и плагины
Framer: код и расширенное прототипирование
Студия: бесплатно и анимация
XD: скорость и платформа Adobe »

Ссылки и дополнительная литература

Sketch

Figma

• « Советы и уловки Figma », Том Джонсон, средний
• « Лучшие практики: компоненты, стили и общие библиотеки », Томас Лоури, блог Figma
• «Когда использовать группы вместо фреймов в Figma», Томас Лоури, блог Figma
• «Мы обновили пользовательский интерфейс Figma: взгляд изнутри на наш процесс», Расмус Андерссон, блог Figma

Adobe XD

InVision Studio

• “StudioAmigos (тщательно подобранная коллекция бесплатных ресурсов для Invision Studio)

(mb, yk, il)

Бесплатное программное обеспечение для создания эскизов для концептуального дизайна

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

Но у салфеток есть свои недостатки. Они рвутся, тускнеют, они не помогают рисовать кривые.

Эти недостатки особенно очевидны, если посмотреть на возможности Creo Sketch. Что такое Creo Sketch? Это бесплатное приложение для 2D-рисования, созданное для тех моментов, когда вы скорее провидец, чем технический специалист.Он стоит меньше, чем большинство салфеток, его можно БЕСПЛАТНО загрузить и использовать, он включает в себя инструменты для рисования от руки и не требует каких-либо специальных знаний САПР для использования.

В этой быстрой демонстрации Пол Сагар показывает, как

• Нарисуйте карандашом объект от руки.
• Наложение грубых кривых на плавные регулируемые кривые.
• Используйте кривые для масок, когда он наносит цвет на свой объект.
• Добавить основные моменты и стратегическое стирание.

Еще одна отличительная черта Creo Sketch: вы можете загрузить эскиз или иллюстрацию в другие приложения Creo, когда ваша идея перейдет на следующий уровень. Используйте его для запуска 2D-чертежей и 3D-моделей.

Creo Sketch, наше программное обеспечение для создания эскизов для концептуального дизайна, доступно сейчас. Загрузите копию бесплатно!

об авторе

Джефф Хеджес

Джефф Хеджес — основатель и крупный участник Creo.ptc.com, блог, посвященный САПР, с момента запуска его посетили более 1 миллиона человек.

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

Джефф имеет более чем 30-летний опыт работы в области программного обеспечения CAD, PLM и PDM; он имеет диплом с отличием в области машиностроения и в настоящее время живет в Штутгарте, Германия.

8 лучших инструментов для создания прототипов для Sketch | Энни Дай | Design + Sketch

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

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

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

Создание прототипов приложений Sketch основано на ссылках Artboard и Hotspot, позволяющих переходить между страницами, что позволяет создавать динамические интерактивные прототипы (аналогично ссылкам перетаскивания в программе интерактивного прототипирования Mockplus). Однако слишком много линий ссылок может вызвать путаницу.

Учебник по созданию прототипа эскиза https://www.sketchapp.com/docs/prototyping/

Предварительный просмотр:

1) Sketch поддерживает предварительный просмотр внутри программного обеспечения.

2) Предварительный просмотр в Sketch Mirror.(USB-соединение или предварительный просмотр в локальной сети).

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

Минусы:

• Слишком много строк ссылок может привести к негативным результатам.
• Ограниченные переходы.

При создании прототипов с высокой точностью необходимо загружать контент из Photoshop и Sketch. Процесс заполнения этих изображений в программе занимает много времени.Поэтому для решения этой задачи компания InVision разработала Craft.

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

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

Учебное пособие по созданию прототипов InVision Craft

https://www.youtube.com/watch?v=1H7Ql9hmbuM

Предварительный просмотр ：

Внутренний предварительный просмотр программного обеспечения

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

Связано: 11 функций, которые выделяют Mockplus iDoc

1) Загрузите плагин для создания прототипов Sketch: https://idoc.mockplus.com/download/sketch

2) Установите ссылки для перехода по страницам

3) Установите анимацию перехода

4) Установить как обратную ссылку

Учебное пособие по созданию прототипов Mockplus iDoc: https://doc.mockplus.com/?p=2317

Предварительный просмотр:

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

Используйте Flint для создания небольших взаимодействий и анимации для достижения полного потока многоэкранных приложений. С его Transition Designer вы можете очень быстро создавать скачки и переходы. Для новичков это простой и удобный инструмент. Его можно использовать для создания простых, но впечатляющих прототипов.

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

Учебное пособие по прототипированию Flinto

В этой быстрой демонстрации Пол Сагар показывает, как

• Нарисуйте карандашом объект от руки.
• Наложение грубых кривых на плавные регулируемые кривые.
• Используйте кривые для масок, когда он наносит цвет на свой объект.
• Добавить основные моменты и стратегическое стирание.

Еще одна отличительная черта Creo Sketch: вы можете загрузить эскиз или иллюстрацию в другие приложения Creo, когда ваша идея перейдет на следующий уровень. Используйте его для запуска 2D-чертежей и 3D-моделей.

Creo Sketch, наше программное обеспечение для создания эскизов для концептуального дизайна, доступно сейчас. Загрузите копию бесплатно!

об авторе

Джефф Хеджес

Джефф Хеджес — основатель и крупный участник Creo.ptc.com, блог, посвященный САПР, с момента запуска его посетили более 1 миллиона человек.

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

Джефф имеет более чем 30-летний опыт работы в области программного обеспечения CAD, PLM и PDM; он имеет диплом с отличием в области машиностроения и в настоящее время живет в Штутгарте, Германия.

8 лучших инструментов для создания прототипов для Sketch | Энни Дай | Design + Sketch

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

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

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

Создание прототипов приложений Sketch основано на ссылках Artboard и Hotspot, позволяющих переходить между страницами, что позволяет создавать динамические интерактивные прототипы (аналогично ссылкам перетаскивания в программе интерактивного прототипирования Mockplus). Однако слишком много линий ссылок может вызвать путаницу.

Учебник по созданию прототипа эскиза https://www.sketchapp.com/docs/prototyping/

Предварительный просмотр:

1) Sketch поддерживает предварительный просмотр внутри программного обеспечения.

2) Предварительный просмотр в Sketch Mirror.(USB-соединение или предварительный просмотр в локальной сети).

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

Минусы:

• Слишком много строк ссылок может привести к негативным результатам.
• Ограниченные переходы.

При создании прототипов с высокой точностью необходимо загружать контент из Photoshop и Sketch. Процесс заполнения этих изображений в программе занимает много времени.Поэтому для решения этой задачи компания InVision разработала Craft.

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

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

Учебное пособие по созданию прототипов InVision Craft

https://www.youtube.com/watch?v=1H7Ql9hmbuM

Предварительный просмотр ：

Внутренний предварительный просмотр программного обеспечения

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

Связано: 11 функций, которые выделяют Mockplus iDoc

1) Загрузите плагин для создания прототипов Sketch: https://idoc.mockplus.com/download/sketch

2) Установите ссылки для перехода по страницам

3) Установите анимацию перехода

4) Установить как обратную ссылку

Учебное пособие по созданию прототипов Mockplus iDoc: https://doc.mockplus.com/?p=2317

Предварительный просмотр:

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

Используйте Flint для создания небольших взаимодействий и анимации для достижения полного потока многоэкранных приложений. С его Transition Designer вы можете очень быстро создавать скачки и переходы. Для новичков это простой и удобный инструмент. Его можно использовать для создания простых, но впечатляющих прототипов.

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

Учебное пособие по прототипированию Flinto

Предварительный просмотр:

1) Нажмите внутреннюю кнопку воспроизведения программного обеспечения

2) Загрузите предварительный просмотр мобильного приложения iOS ( мобильный телефон, компьютер в одной локальной сети)

Principle и Flinto имеют много общего.Но как инструмент для создания прототипов Principle специализируется на преобразовании и взаимодействии между экранами Sketch. Некоторые дизайнеры предпочитают этот метод проектирования, в то время как другие предпочитают использовать конструктор переходов, такой как Flinto или Auto-Code во Framer.

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

1) Загрузите плагин Sketch и импортируйте свои материалы.

2) Установите переход и взаимодействия.

3) Польская анимация с задержками и кривыми.

4) Добавить прокрутку / перелистывание / перетаскивание.

Учебник по принципиальному прототипированию: http://principleformac.com/tutorial.html

Предварительный просмотр:

1) Предварительный просмотр внутреннего программного обеспечения.

2) Основное зеркало.

Минусы:

1) Рисование неудобно, поэтому рекомендуется создать дизайн в Sketch и импортировать его в Principle.

2) Невозможно анимировать на текущей странице.

3) Размер материала принципиально нельзя свободно изменять. Для регулировки ширины и высоты можно использовать только параметр масштаба на левой панели.

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

1) Установите плагин Sketch AxureRP.sketchplugin, выберите материал Sketch и щелкните в меню Plugins-AxureRP-Copy Selection.

2) Для общего взаимодействия в Axure вы можете отфильтровать настройки одну за другой через всплывающее окно и перейти на панель свойств, чтобы отфильтровать целевую страницу.

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

Учебник по прототипированию Axure: https://www.axure.com/support

Предварительный просмотр:

Внутренний предварительный просмотр.

Marvel — это бесплатное веб-приложение для создания прототипов веб-дизайна и дизайна пользовательского интерфейса для мобильных устройств. Он основан на вашем предварительно разработанном документе PSD или Sketch, что означает, что ваш визуальный черновик можно использовать без форматирования преобразования. Конечно, каркас (.jpg или .png) также может быть импортирован для последующего проектирования взаимодействия.

1) Синхронизировал артборды с Marvel через плагин Sketch.

2) Выберите элемент интерфейса и подключите целевой артборд через точку доступа (Hot Spot).

3) Установите режим перехода и жест работы со страницей. Это не так интуитивно понятно, как связывание, поэтому эта часть может сбивать с толку.

Учебник по созданию прототипов Marvel: https://marvelapp.com/features/prototyping

Предварительный просмотр:

1) Создавайте интерактивные прототипы прямо на веб-странице.

2) Создание URL-адресов для отправки по электронной почте.

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

Он поддерживает вызов системной клавиатуры, ввод реального текста, а затем использование его в качестве данных; он также поддерживает реальный контроль и мониторинг аудио и видео. Сильной стороной Framer является его безупречная поддержка HTML, CSS и Javascript. Принимая во внимание аудио и видео, можно использовать десятки атрибутов и событий.

Создание прототипов во Framer интуитивно понятно; всего несколькими щелчками мыши вы можете создать базовый уровень взаимодействия.Просто скопируйте и вставьте монтажную область из Sketch во Framer и используйте ссылку, чтобы добавить переходы, такие как нажатие и наложение, или используйте разнонаправленный жест для создания вложенного представления прокрутки.

Учебник по созданию прототипов Framer

https://www.youtube.com/watch?v=foSkKVtHkM4

Предварительный просмотр:

1) Внутренний предварительный просмотр

2) Зеркало iOS / Android

Это 8 лучших прототипов Sketch рекомендуемые инструменты. Конечно, есть много других инструментов, которые могут быть включены, например Pixate, UXPin и Origami Studio от Facebook.

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

18 программ для дизайна интерьера, которые можно загрузить в 2020 г.

Независимо от того, работаете ли вы в компании с 200 сотрудниками или только начинаете как индивидуальный предприниматель, использование лучшего программного обеспечения для дизайна интерьера будет иметь большое значение для достижения успеха.Вы уже знаете, что лучшие проекты достигаются, когда дизайнеры, клиенты и поставщики с самого начала участвуют в проекте; Теперь пришло время применить этот уровень организации и сотрудничества и к серверной части вашего бизнеса. Надежное программное обеспечение для проектирования поможет вам не только создать впечатляющую творческую работу, но и без проблем управлять своим бизнесом. Это означает управление проектами, финансовую организацию и программы повышения производительности, которые помогут вам выполнять работу вовремя и в рамках бюджета.Вот 18 лучших программ для дизайна интерьера, от инструментов САПР до приложений для управления клиентами.

Программное обеспечение для проектирования:

Autodesk AutoCAD LT

AutoCAD LT — одно из самых популярных программных приложений, используемых дизайнерами интерьеров, архитекторами, инженерами, строителями и многими другими. Это надежное программное обеспечение позволяет профессионалам создавать, составлять чертежи и документировать точные чертежи с 2D-геометрией. Исчерпывающий набор инструментов редактирования и аннотаций, а также интуитивно понятный пользовательский интерфейс — вот что делает его лучшим выбором дизайнеров.Интегрированное веб-приложение AutoCAD с упрощенным интерфейсом — без установки программного обеспечения — позволяет работать над эскизами в режиме онлайн практически с любого компьютера. С помощью мобильного приложения пользователи могут просматривать, редактировать, комментировать и создавать рисунки в любое время, даже в автономном режиме, на смартфоне или планшете. AutoCAD LT совместим как с операционными системами Mac, так и с Windows, а самая последняя версия также предлагает возможность подключения к облаку, обновленные функции измерений и более высокую производительность.

SketchUp Pro

С помощью пакета моделирования SketchUp Pro профессионалы в области дизайна найдут быстрое и простое 3D-моделирование чего угодно, от пассивных зданий до современной мебели.Создавайте подробные масштабные чертежи в 2D, а затем добавляйте собственные стили и материалы, которые отображают ваше видение на экране. SketchUp интегрируется с приложениями виртуальной реальности (включая Microsoft HoloLens, HTC Vive и Oculus), поэтому вы можете проводить клиентов по проектам с поразительной детализацией. В дополнение к классическому настольному программному обеспечению SketchUp также предлагает веб-инструмент и неограниченное облачное хранилище, так что вы можете легко хранить, совместно работать и делиться работой. Программное обеспечение также позволяет проектировщикам измерять данные о здании и анализировать ожидаемое потребление энергии, дневное освещение, тепловой комфорт жильцов и HVAC, чтобы вы могли точно определять производительность и достигать целей после заселения.На бюджет? Бесплатная версия программного обеспечения предлагает более легкий веб-вариант.

TurboCAD

Последние версии TurboCAD предлагают профессиональное программное обеспечение для опытных пользователей 2D и 3D CAD. Пакет архитектурного проектирования включает параметрические архитектурные объекты, секции и фасады с расширенными функциональными возможностями как для архитектурной, так и для механической части программы. TurboCAD, доступный для операционных систем Mac и Windows, позиционирует себя как «мощную альтернативу» AutoCAD LT, а мастера установки обещают простой переход для тех, кто переключается с одного на другой.TurboCAD гордится своим фотореалистичным моделированием поверхностей и освещением, которые позволяют создавать мощные презентации, и тем, кто проектирует с использованием листового металла или дерева, особенно понравятся эти инструменты для работы с конкретными материалами. Возможность подключения к внутренней и внешней базе данных, а также возможность совместного использования файлов (включая поддержку файлов из Autodesk, SketchUp и других) означают, что ваша команда может легко интегрироваться и сотрудничать на высоком уровне.

Autodesk 3ds Max

Готовы полностью контролировать свои визуализации? С Autodesk 3ds Max клиенты смогут оценить предлагаемую вами работу в прекрасных высокотехнологичных деталях.Программное обеспечение обеспечивает превосходную графику для 3D-анимации и моделей, а также игр и изображений. Используйте представленные здесь наборы инструментов, чтобы формировать и определять драматические среды и объекты, а также создавать захватывающие миры, потрясающие визуализации и увлекательные виртуальные впечатления. Интегрированный интерактивный рендерер Arnold позволяет пользователям просматривать точные и подробные превью во время работы. А когда дело доходит до продуктивности, автоматизированные процессы могут помочь сократить сроки и производство контента, так что вы можете уделять больше времени творчеству и меньше — управлению рабочим процессом.Это программное обеспечение совместимо только с Windows.

Autodesk Revit

Станьте участником AD PRO

Купите сейчас, чтобы получить неограниченный доступ и все преимущества, которые доступны только участникам.

Arrow

Используйте это программное обеспечение для информационного моделирования зданий (BIM) в различных областях, включая архитектуру, дизайн интерьеров, ландшафтную архитектуру, проектирование и подрядные работы. С его помощью вы можете эффективно и точно зафиксировать свой проектный замысел в 3D и создать полные модели зданий и документацию; автоматически обновлять планы этажей, фасады, разрезы и 3D-виды; и используйте 3D-визуализацию, чтобы увидеть здание до того, как оно будет построено.Помимо привлекательных компонентов моделирования и графики, ключевым компонентом Revit является сотрудничество между многопрофильными командами. Используя совместную работу BIM 360 Design, Revit объединяет команды в облаке для более качественной совместной работы с минимальным вмешательством ИТ. Члены группы могут делиться и сохранять работу, а не переключаться между электронной почтой, FTP-сайтами и множеством других платформ. Revit совместим только с Windows, но его можно запустить в Mac OS с помощью Parallels.

Archicad 23

Среди наиболее популярных программ для архитектурного рендеринга, Archicad, разработанный Graphisoft, позволяет архитекторам и дизайнерам интерьеров создавать точные детали конструкции и оценивать количество необходимых строительных материалов.Это надежное программное обеспечение, приложение BIM, также моделирует и координирует проемы (например, пустоты, выемки или ниши), которые необходимо задокументировать и поделиться с инженерами и другими консультантами. В самой последней версии Archicad 23 пользователи также могут получать обновленные визуализации в реальном времени и современные визуализации, которые можно редактировать на лету. Благодаря возможности проверки кода проекта, ввода требований клиентов и интеграции команд и документов, Archicad остается лучшим выбором в программном обеспечении для дизайна интерьеров и архитектуры.

Easyhome Homestyler

Если все, что вам нужно, это более легкий инструмент, чтобы придать форму планам, циркулирующим в вашей голове, Homestyler может быть лучшим программным обеспечением для дизайна интерьера. С помощью этого бесплатного программного обеспечения для проектирования вы можете легко строить планы этажей в 2D и 3D с точными измерениями. Затем возьмите декор из библиотеки Homestyler, состоящей из тысяч реальных товаров, включая краски, пол, мебель, искусство и многое другое. Выбранные вами предметы будут размещены в вашем дизайне в масштабе 1: 1.Homestyler также создаст фотореалистичную визуализацию для вас и ваших клиентов. Кроме того, координирующее приложение (доступное для iOS и Android) позволяет создавать дизайн на ходу. Если у вас ограниченный бюджет, вы любите экспериментировать и вам нужен оптимизированный, простой в освоении инструмент, который обеспечит точное представление вашего декора и дизайна, это приложение может быть для вас.

Infurnia

В качестве веб-платформы для проектирования Infurnia позволяет архитекторам, дизайнерам интерьеров, клиентам и поставщикам сотрудничать и взаимодействовать в процессе проектирования.Подробные планы этажей с многослойными стенами, современными полами и кровлей, подвесным потолком и настраиваемыми инструментами для лестниц помогут вам подробно изложить свои проекты. Кроме того, планы, созданные в 2D, можно мгновенно преобразовать в точные 3D-изображения, а инструменты для рисования можно использовать для рисования видов высот. Украсьте мебелью из каталога партнеров Infurnia или создайте свою собственную библиотеку материалов, обоев, оборудования, бытовой техники, предметов интерьера и т. Д. Хотя программное обеспечение Infurnia менее надежно, чем некоторые другие варианты, это программное обеспечение легко изучить, поэтому вы можете легко настроить его и поделиться им.

Live Home 3D Pro

С помощью Live Home 3D Pro вы можете эффективно создавать точные планировки и обставлять комнаты или все здание. Как только 2D-планы составлены (импортировать и отслеживать чертежи или рисовать с нуля), программа автоматически переводит ваш план в 3D. Версия для настольных ПК (для Mac или Windows) предлагает расширенные инструменты рисования, виды фасадов, библиотеку материалов с тысячами предметов мебели и техники, а также настраиваемые редакторы материалов и освещения. Параметры геопозиционирования и дневного освещения помогают принимать решения о размещении и освещении, а видео-обходы, которые можно записывать днем ​​или ночью, могут быть сгенерированы и экспортированы как файлы Ultra HD.Кроме того, планы и видео можно сохранять и делиться ими в нескольких форматах файлов. Профессионалы отрасли с ограниченным бюджетом преуспеют, если вложат деньги в это доступное программное обеспечение (и соответствующее мобильное приложение для iOS) — это отличное введение в программное обеспечение для дизайна интерьера, которое может справиться с некоторыми дополнительными сложностями.

Substance от Adobe

Пакет Adobe Substance позволяет дизайнерам создавать и добавлять точные цифровые текстуры и материалы в свои проекты. С Substance Source, высококачественной библиотекой 3D-материалов Adobe, вы можете просматривать сотни высококачественных PBR-материалов (физический рендеринг), таких как текстиль, плитка, пол, дерево, камень и многое другое.Более 1800 загружаемых материалов интегрируются с другими программными приложениями, такими как Unreal Engine, Unity, 3ds Max и Revit, поэтому вы можете создавать текстуры профессионального качества в пиксельной области. С помощью приложения Substance Alchemist дизайнеры и архитекторы могут курировать библиотеки и коллекции текстур. Комбинируйте и сопоставляйте существующие материалы или изобретайте новые, используя собственные фотографии и отсканированные изображения в высоком разрешении. Для проектов, требующих подробных справочных материалов, набор 3D-текстур, предлагаемый в Substance, не может быть лучше.

Morpholio Board

Созданные группой архитекторов, ставших разработчиками программного обеспечения, приложения Morpholio включают цифровые инструменты для создания эскизов, ведения журнала и представления творческой работы. Morpholio Board — это особый золотой самородок, который позволяет дизайнерам интерьера создавать, редактировать и выполнять повседневные задачи. Приложение, изначально доступное только для мобильных устройств iOS, но теперь и настольное приложение для Mac, помогает дизайнерам решать сложные технические задачи, с которыми они сталкиваются каждый день.Превратите доски настроения в электронные таблицы, сборники спецификаций и форматные листы, готовые для подрядчиков. Вы когда-нибудь часами пытались подобрать тот или иной предмет по цвету или настроению? Board может выполнять поиск среди тысяч товаров в секунду, чтобы найти реальные совпадения по цвету, форме, форме и стилю. (Бонус: его библиотека заполнена тысячами высококачественных продуктов от известных брендов, таких как Knoll и Hansgrohe, а также новых, таких как Eskayel.) Готовы поделиться своими идеями? Одним нажатием кнопки превратите доску настроения в презентацию для клиента или работайте над ней совместно с коллегами.

Программное обеспечение для фотографий:

Adobe Photoshop

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

Adobe Capture

Если вы одержимы цветом (а кто нет?) И используете фотографию, чтобы разбудить память или вдохновиться, Adobe Capture может открыть новый мир с вашего мобильного устройства. Это мощное приложение преобразует изображения в цветовые темы, узоры, материалы и векторные формы.Перенесите эти ресурсы в другие настольные и мобильные приложения, такие как Photoshop, Illustrator и Dimension, чтобы использовать их во множестве творческих проектов и платформ. Являясь частью пакета Adobe Creative Cloud (для его загрузки вам потребуется бесплатная или платная учетная запись), с помощью Capture вы можете редактировать цветовые темы и создавать настраиваемые палитры, создавать реалистичные материалы и текстуры PBR, создавать геометрические узоры и копировать формы и шрифты. Приложение также предлагает настраиваемые кисти, которые можно использовать в других приложениях, включая Animate, Dreamweaver и Photoshop.Capture может помочь вам найти вдохновение, связаться с клиентами и по-новому работать над проектами.

Программное обеспечение для управления проектами:

Fuigo

Если вы серьезно настроены вывести свой проектный бизнес на новый уровень, вам понадобится отличное программное обеспечение для управления проектами. Fuigo была придумана инсайдерами отрасли и братьями Мори и Микки Риадом (которые также владеют исторической текстильной компанией Fortuny) как инструмент, позволяющий дизайнерам интерьеров управлять всем, от предложений до установки, в одном месте.Помимо помощи в организации и планировании проектов, Fuigo может составлять график и отслеживать счета и платежи. Кроме того, он предлагает торговую площадку с доступом к более чем 100 ведущим брендам, таким как Pierre Frey и Established & Sons. Оптимизируйте поиск, закупку, отслеживание и выставление счетов с помощью этого универсального инструмента, который позволяет небольшим проектным компаниям получать доступ к ресурсам гораздо более крупных.

Ivy

Программа Ivy, созданная для проектных фирм любого размера, поможет вам более эффективно управлять своим бизнесом.Создавайте исходный продукт, отправляйте предложения и счета, создавайте заказы на покупку и создавайте доски объявлений с легкостью. Счетчик проектов помогает командам оставаться организованными и повышать продуктивность, а счетчик времени и расходов поможет вам отслеживать оплачиваемые часы и создавать отчеты, которыми вы можете поделиться с клиентами. Система онлайн-платежей позволяет легко получать платежи с помощью банковского перевода или кредитной карты; синхронизация с QuickBooks помогает вам оставаться на вершине бухгалтерского учета; а анализ данных позволяет создавать мгновенные настраиваемые бизнес-отчеты.Ресурсы сообщества Ivy также предлагают место для обмена идеями и передовым опытом. Если вы хотите тратить больше времени на творчество и меньше на управление бизнес-операциями, Ivy может помочь вам оптимизировать функции.

CoConstruct

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

Mydoma Studio

Созданная специально для индустрии дизайна интерьеров, Mydoma Studio тщательно продумала то, что нужно дизайнерам.Здесь вы можете упростить доску настроения, завершить поиск продуктов, создавать счета, принимать платежи и отслеживать свое время. Это программное обеспечение для дизайна интерьера также позволяет создавать список личных поставщиков, отправлять заказы на покупку одним щелчком мыши, а затем преобразовывать их в счета для отправки клиентам. Mydoma может быть встроена в ваш собственный веб-сайт с фирменным знаком вашей компании, прежде чем вы приглашаете других пользователей к сотрудничеству. Есть идея, которую можно воспроизвести? Создавайте здесь дизайнерские пакеты, чтобы продавать их в Интернете и получать постоянный доход.Mydoma также интегрируется с QuickBooks, Zapier и Facebook и может создавать настраиваемые отчеты, которые помогут вам понять свои конверсии, учет и многое другое.

ClickUp

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