Sketch app: Sketch’s Mac, web & iPhone apps · The best of all worlds · Sketch


05.06.2023 Facebook Twitter LinkedIn Google+ Разное


Sketch.app — онлайн-школа bang bang Education

Купить →

Доступно по подписке

  • 30 минут ежедневных занятий
  • 11 уроков

Кому подойдет курс

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

Преподаватель рассказывает о курсе

Кто будет преподавать

Александр Катин

В БВШД Александр Катин делал много экспериментальных вещей для учебы, выставок и, в первую очередь, для себя. Параллельно занимался веб-разработкой и сотрудничал со студией Sulliwan. В 2014 году пришёл продюсером интерактивных проектов в агентство Hungry Boys, где делал клиентские проекты и продолжал изучать связку дизайна и технологий. После Hungry работал интерактивным дизайнером в продакшне Hello Computer — создавал прототипы и визуализации с помощью Node.

js, ActionScript, Processing и OpenFrameworks. Участвовал в проектах для «Гаража», «Почты России», «Политеха», ВДНХ и Правительства Москвы. В данный момент занимается дизайном интерфейсов и преподает в ScreamSchool.

Программа курса

  • Что такое sketch? Как инструмент завоевывал сердца дизайнеров.
  • Актуализация. Где искать информацию и как быть в курсе последних новостей?
  • Интерфейс приложения. Часть 1. Главное меню, шорткаты, настройки.
  • Интерфейс приложения. Часть 2. Панель инструментов. Шорткаты.
  • Интерфейс приложения. Часть 3. Как быстро работать со сложными фигурами.
  • Интерфейс приложения. Часть 4. Организация слоев. Шорткаты. Плагин runner.
  • Сетки и модульные системы. Направляющие и раскладки. Функция калькулятора.
  • Стили текста и слоев. Замыкание слоев. Скрываем лишние элементы.
  • Символы. Плагины. Как экономить время.
  • Создаем веб-проект. Выстраиваем рабочий процесс. Готовим адаптивный веб-дизайн к передаче разработчикам. Handoff.
  • Экспорт ассетов. Как посмотреть мобильный дизайн на реальных устройствах.

Необходимые материалы и инструменты

Компьютер с Mac OS и Sketch. app (подойдет триальная версия)

Что в итоге

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

Новости школы

Подпишитесь, чтобы первыми узнать о новых курсах, скидках и промокодах

Продолжив, вы даете согласие →
на обработку персональных данных →

о школе

BBE — это школа дизайна и креативных направлений. Мы закрываем пробелы в существующем дизайн-образовании в России и популяризируем дизайн, ориентированный на человека. Все наши образовательные продукты созданы ведущими экспертами индустрии.

Программы, курсы и  интенсивы

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

Дизайн-библиотека

Коллекция из 65+ онлайн-курсов для самостоятельных занятий, которая доступна по подписке на месяц или год.

Точка зрения

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

фильмы

Лепота

Взгляд на наследие русской визуальной культуры с позиции современного дизайна. От основания Руси до 2021 года.

33 слова о дизайне

Исследование современного дизайна в России теми, кто его создает.

100 лет дизайна

Дебютный киноальманах об истории дизайна, показанный в 6 странах, 40 городах и ставший хитом Beat Film Festival-2018.

6 плагинов Sketch.app для экономии времени

  • UI/UX
  • 2 мин на чтение
  • 1621

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

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

1. Dynamic Button

Современный интерфейс нельзя представить без кнопок. Но пока Sketch не очень адаптирован для быстрого их создания. Этот плагин позволит вам один раз создать параметры для кнопки и в дальнейшем использовать их для создания прочих кнопок.

2. Content Generator

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

3. Duplicator

Как понятно из названия, плагин Duplicator восполняет пробел в функции дублирования у Sketch. app — выбираете нужные элементы и задаете число копий.

4. Sketch plugins by Cemre Güngör

Целое семейство плагинов от Cemre Güngör для быстрого решения рутинных задач:
— дробный масштаб;
— двукратный масштаб;
— вставить объект и заменить;
— вставить внутрь объекта;
— сделать гайдом.

5. Sketch Measure

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

6. Sketch Squares

Аналогично плагину Content Generator позволяет добавлять фотографии в заготовленные формы парой кликов мыши.

Бонус

Список горячих клавиш для Sketch! Это не плагин, а лишь сборник всех доступных клавиш по умолчанию — если его освоите, то работать в Sketch будете еще быстрее 🙂

PS: а какими плагинами для экономии времени пользуетесь вы? Расскажите в комментариях.

Статья составлена по материалам invision.

  • #ui
  • #инструмент
  • #интерфейс
  • 1

Читайте далее

Статьи по теме

Загрузить последние обновления программного обеспечения Sketch · Sketch

Что нового
  • Аннотации В этом выпуске в приложение Mac добавлены аннотации. Теперь вы можете прикрепить комментарий к любой точке холста и завязать разговор там, где это важно. Независимо от того, работаете ли вы в веб-приложении или в приложении для Mac, все ваши комментарии и разговоры будут синхронизированы. Хотите скрыть аннотации и сосредоточиться на своих проектах? Просто нажмите N .
  • Импорт файлов Figma Мы рады представить эту долгожданную функцию: теперь вы можете открывать файлы .fig в Sketch! Эта функция доступна в бета-версии, поэтому вы можете столкнуться со странной проблемой (например, наш механизм рендеринга текста обрабатывает вещи иначе, чем Figma). Если вы это сделаете, сообщите нам, и мы все исправим — ваш отзыв поможет сделать импортер еще лучше.
  • Шаблоны рабочей области Теперь вы можете превратить любой документ в шаблон, который может использовать любой в вашей рабочей области — идеальный вариант для повторяемых проектов и сохранения согласованной структуры документов. Мы также добавили подборку красивых бесплатных шаблонов, которые помогут начать ваш следующий проект. Вы найдете их все в окне Workspace ( О ).
  • Библиотеки документов Теперь вы можете включить библиотеки для определенного документа вместо того, чтобы включать их для каждого документа, над которым вы работаете, даже если они вам не нужны. Когда вы открываете документ, мы автоматически устанавливаем все доступные для него библиотеки. Чтобы управлять библиотеками документов, перейдите в Файл > Настройки документа… > Библиотеки из любого документа.
  • Улучшения Smart Layout Мы усердно работаем над улучшением Smart Layout! В этом обновлении вы обнаружите, что направления справа налево и снизу вверх теперь ведут себя точно так же, как их обратные аналоги (слева направо и сверху вниз). Когда вы скрываете вложенные экземпляры Symbol, мы теперь сохраняем и удаляем интервалы более надежным и предсказуемым образом. Наконец, мы внесли несколько изменений, которые делают работу с Smart Layout во вложенных макетах более плавной. Ожидайте дальнейших обновлений в ближайшее время!
Что изменилось
  • Обновите Sketch Runner до последней версии (1.2.2). Версия 1.2.1 помечена как несовместимая со Sketch 95.
  • Плагин Sympli версии 1.3.24 помечен как несовместимый со Sketch 95.1
  • Чтобы обеспечить совместимость с macOS Ventura, мы переименовали окно и пункт меню «Настройки» приложения. — теперь он называется «Настройки». Вы по-прежнему можете получить доступ к настройкам, нажав , .
  • В начале 2023 года старое приложение «Зеркало» будет прекращено, но вы по-прежнему сможете использовать наше новое приложение для iPhone. Running Mirror теперь будет отображать предупреждение о поэтапном отказе, а также ссылку на более подробную информацию.
Что улучшено
  • Если поиск документа не дал результатов, вы увидите сообщение «Документы не найдены».
  • Мы улучшили производительность рендеринга в потоках прототипов.
  • Если функция Pixel Fitting отключена, всплывающие подсказки Canvas теперь всегда будут отображать два десятичных знака. Если во время настройки линий включена функция Подгонка пикселей, значение длины строки во всплывающей подсказке больше не будет колебаться, поскольку оно чередуется между целыми и десятичными числами.
  • Мы улучшили производительность рендеринга, переключив нашу архитектуру на один граф сцены для каждого документа, обновляемый для каждого кадра рендеринга.
  • В текстовых слоях поля «Ширина» и «Высота» в Инспекторе теперь отражают, является ли ваш текстовый слой «Автошириной», «Авто-высотой» или «Фиксированным размером». Их значения являются заполнителями, поэтому вы все равно можете ввести свои собственные фиксированные значения.
  • Знаете ли вы, что при использовании инструмента «Текст» ( T ) вы можете щелкать другие текстовые слои, чтобы редактировать их? Мы сделали это более заметным — теперь, когда инструмент «Текст» активен, вы увидите подчеркнутое состояние наведения при наведении курсора на другие текстовые слои.
  • Поля выбора для скрытых объектов теперь заштрихованы, чтобы их было легче отличить от видимого слоя в том же месте.
  • Теперь вы можете управлять настройками общего доступа к документам и проектам в рабочей области: приглашать других, делать документы общедоступными или изменять разрешения на загрузку, проверку и комментирование. В окне Workspace щелкните документ или проект правой кнопкой мыши и выберите Share… . Во время редактирования документа выберите File > Share… — или щелкните дополнительное меню выше Сотрудничество и выберите Поделиться документом… .
  • Мы увеличили область действия для угловых маркеров изменения размера с 6 x 6 до 12 x 12 пикселей на дисплеях с высокой плотностью, чтобы их было легче захватывать. Видимый размер ручек не изменился.
  • Мы изменили видимость маркеров на холсте, когда вы выбираете объект внутри аккуратной группы, что дает вам лучшую обратную связь о ваших действиях. При наведении указателя мыши на любой маркер Smart Distribute маркеры углового радиуса исчезают. Когда вы захватываете дескриптор Smart Distribute, все остальные дескрипторы исчезают. При наведении курсора на маркер углового радиуса все маркеры Smart Distribute исчезают.
  • Теперь вы можете определить, что должен делать Sketch каждый раз, когда вы распределяете слои, но невозможно сделать это равномерно на полных пикселях. Вместо того, чтобы спрашивать каждый раз, установите флажок Больше не спрашивать в предупреждении, которое вы можете снова изменить через Эскиз > Настройки… > Слои в настройке «При распределении». Это применимо только в том случае, если включена функция Pixel Fitting.
Что исправлено
  • Исправлена ​​ошибка, из-за которой элементы управления «Подчеркивание текста» и «Переопределение зачеркивания» не отображали одинаковое состояние между свойствами «Холст», «Инспектор» и «Стиль текста».
  • Исправлена ​​ошибка, из-за которой эмодзи с тенью могли неправильно отображаться в текстовом слое.
  • Исправлена ​​ошибка, из-за которой в некоторых случаях элемент управления «Сбросить переопределения» отображался постоянно, даже если переопределения не применялись. Сброс состояний должен решить эту проблему.
  • Устранена проблема с переопределенным текстом на холсте, из-за которой замена символа на другой размер не обновлялась должным образом. Теперь это работает, как и ожидалось, но вам может потребоваться сбросить все переопределения, которые ранее находились в неправильном состоянии.
  • Исправлена ​​ошибка, из-за которой обрезка изображения с прикрепленным цветовым профилем P3 приводила к потере профиля после обрезки.
  • Исправлена ​​ошибка, из-за которой текст внутри символа не масштабировался, если для выбора этого слоя использовалось нажатие клавиши Command или двойной щелчок.
  • Исправлена ​​ошибка, из-за которой переопределение цвета не отображалось в Инспекторе после переопределения стиля слоя.
  • Исправлена ​​ошибка в Инспекторе, из-за которой изменение цвета в переопределениях не обновлялось сразу.
  • Исправлена ​​ошибка, из-за которой текст, используемый в качестве маски, мог вызывать растекание цвета текста по краям содержимого маски.
  • Устранена проблема, из-за которой активация инструмента «Текст» и наведение курсора на текстовый слой внутри группы приводили к неправильному положению выделения при наведении.
  • Устранена проблема, из-за которой при выборе текстовых слоев внутри экземпляров символов значения ширины и/или высоты не отображались в Инспекторе.
  • Исправлена ​​ошибка, из-за которой изменение положения текста на пути могло оставить артефакты рисования на холсте.
  • Исправлена ​​ошибка, из-за которой уменьшение размера файла приводило к тому, что некоторые изображения растягивались и теряли соотношение сторон.
  • При экспорте одного слоя с альфа-маской эффект маски теперь включается в результат, а не экспортируется вообще.
  • При вводе новых значений ширины или высоты для текстового слоя с автоматической шириной ограничивающая рамка вокруг текущих размеров слоя теперь остается видимой.
  • Устранена проблема, из-за которой некоторые маркеры изменения размера в инструменте «Масштаб» выглядели темнее, чем должны быть.
  • Исправлена ​​ошибка, из-за которой клавиши со стрелками не работали, если курсор находился над кнопками выравнивания на вкладке «Дизайн» инспектора.
  • Исправлена ​​ошибка, из-за которой редактирование слоя за размытым фоном могло привести к визуальным несоответствиям на холсте.
  • Исправлена ​​ошибка, из-за которой область попадания для маркеров углового радиуса на холсте могла быть неправильной.
  • Холст больше не меняет положение, когда вы скрываете боковую панель или панель инструментов.
  • Устранена проблема, из-за которой маркировка углов X не адаптировалась к системному акцентному цвету для выбранных объектов внутри экземпляров Symbol.
  • Устранена проблема при изменении размера слоя, из-за которой всплывающая подсказка, показывающая размеры слоя, мгновенно исчезала при нажатии.
  • Мы исправили визуальный дефект в курсоре вращающейся формы.
  • Теперь приложение будет отображать ошибку при попытке экспортировать изображение WebP, размер которого превышает поддерживаемый форматом максимальный размер в пикселях (16383 x 16383).
  • Исправлена ​​ошибка, из-за которой перетаскивание слоя из списка слоев приводило к неожиданным результатам. Теперь простое перетаскивание на холсте всегда будет создавать точную копию слоя и PNG при перетаскивании в Finder или другое приложение. Использование перетаскивания с нажатой клавишей Option создаст растровое изображение при перетаскивании слоя на холст и PDF-файл при перетаскивании в Finder или другое приложение, например Keynote или Illustrator.
  • Устранена проблема, из-за которой фиксированные слои в прототипах масштабировались на экранах, отличных от Retina.
  • Устранена проблема, из-за которой при перестановке объекта с помощью функции «Умное распределение» в множественном выборе поле выбора вокруг множественного выбора подстраивалось под изменяемый объект.
  • Исправлена ​​ошибка, из-за которой Инспектор не отображал все настройки наложения после копирования и вставки монтажной области наложения.
  • Устранена проблема, из-за которой маркеры прототипирования на холсте оставались видимыми после переключения на вкладку «Дизайн» в Инспекторе.
  • Устранена проблема, из-за которой при наведении курсора на объект в режиме множественного выбора не отображалось выделение, чтобы сделать его эталонным объектом выравнивания.
  • Устранена проблема, из-за которой при выборе элемента внутри аккуратной группы центральные маркеры перестановки временно исчезали, создавая эффект мигания.
  • Устранена проблема, из-за которой маркеры углового радиуса иногда не отображались для повернутых прямоугольников.
  • Исправлена ​​ошибка, из-за которой прототип не обновлял ссылки после изменения цели взаимодействия.
  • Устранена проблема, из-за которой комбинированные фигуры, содержащие один линейный слой, не отображали поле выбора и не могли вращаться.
  • Исправлена ​​ошибка, из-за которой, если источник символов содержал символ с измененным размером, замена этого вложенного символа в экземплярах не учитывала этот размер.
  • Устранена проблема, из-за которой использование инструмента «Преобразование» для сгруппированных фигур могло неожиданно преобразовывать и перемещать фигуру при использовании угловых маркеров.
  • Устранена проблема при использовании инструмента «Монтажная область», из-за которой список шаблонов монтажной области не отображался, если Инспектор был скрыт.
  • Исправлена ​​ошибка, из-за которой пунктирные границы меняли положение при преобразовании в контуры.
  • При использовании текста по ширине выравнивание последней строки в абзаце теперь будет соответствовать направлению письма вашего языка (слева направо или справа налево). Чтобы изменить направление письма, выберите Текст > Обратное направление письма в строке меню.
  • Отображение или скрытие интерфейса частично (боковая панель, Инспектор, линейки и панель инструментов) или полностью теперь влияет только на текущее окно, а не на другие окна.
  • Исправлена ​​ошибка, из-за которой можно было редактировать шестнадцатеричное значение заливки с помощью переменной цвета.
  • Устранена проблема, из-за которой вставка символов могла не разместить их на полных пикселях, даже если была включена подгонка пикселей.
  • Исправлена ​​ошибка, из-за которой вы не могли управлять переопределениями, принадлежащими вложенному символу, если их родитель не был специально выбран. Отныне вы будете видеть каждое переопределение с самого начала в разделе «Управление переопределениями».
  • При перетаскивании слоя из списка слоев теперь всегда создается чистая и точная копия исходного слоя и игнорируются любые параметры экспорта, включая префикс/суффикс, размер или тип растрового изображения.

Дизайны, темы, шаблоны и загружаемые графические элементы Sketch App на Dribbble

  1. Посмотреть вверх.

Comments