Файл эскиза, чем открыть

Обновлено: 01.07.2024

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

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

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

Мы столкнулись с этой проблемой в нашем стартапе Flawless App. У нас обычно есть отдельный файл Sketch для каждого продукта. Под «продуктом» я подразумеваю наше основное приложение с панелью меню, веб-сайт, социальные материалы, пресс-кит, иллюстрации к статьям в нашем блоге на Medium и так далее. Эти файлы со временем сильно разрастались из-за постоянных итераций и тестирования различных дизайнерских решений. В результате Sketch становилось все труднее и труднее управлять ими с должной производительностью.

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

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

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

Первый прототип

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

У нас уже была внутренняя структура для приложений строки меню с множеством реализованных пользовательских функций. Чтобы дать вам некоторую информацию: наш основной продукт, Flawless App, представляет собой приложение строки меню, которое сравнивает ожидаемый дизайн с реализацией разработчика в режиме реального времени. Эта внутренняя структура была создана для нашего основного продукта.
Вы можете использовать приложение строки меню, даже если Sketch не открыт.
Разработка нативного приложения для macOS оказалась для нас намного быстрее, чем плагин Sketch с CocoaScript (благодаря нашему предыдущему опыту).

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

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

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

Цветовая палитра и типографика

Обсуждая с командой, мы не обнаружили каких-либо критических проблем с UX в каркасах. Я начал с создания цветовой палитры и выбора схемы шрифта.

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

Первая строка предназначена для цветов текста (плюс светлый фон в начале). Второй ряд предназначен для акцентных цветов. Все цвета были получены из одного основного акцентного цвета путем применения простых правил цветовой системы HSB (H означает оттенок, S – насыщенность, B – яркость).

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

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

Статья Эрика Кеннеди "Цвет в дизайне пользовательского интерфейса: (практическая) структура" – настоящая находка. Я прочитал ее около восьми месяцев назад и с тех пор использую в Sketch гораздо больше цветовой системы HSB, чем RGB.

Что касается типографики, в большинстве случаев лучше всего использовать шрифт по умолчанию для нативного приложения macOS, если только вы не создаете что-то супернестандартное. Время рендеринга меньше, и его проще реализовать во время разработки. Но я был так взволнован возможностью попробовать Монтсеррат в родном приложении для macOS, что не смог устоять.

Существует множество отличных ресурсов для изучения шрифтов. Тем не менее, я использую старомодные Google Fonts, чтобы получить представление о том или ином шрифте.

Первая итерация дизайна

Я начал с того, что нарисовал в начальном каркасе. Вот общий поток пользователей в приложении:

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

Если вы никогда раньше не проектировали что-либо для macOS, обязательно ознакомьтесь с Facebook Desktop Design Kit. Там вы найдете все общие элементы пользовательского интерфейса macOS. И это даст вам представление о размерах и смещениях элементов пользовательского интерфейса. Для приложения строки меню macOS размер шрифта от 12 до 14 пунктов является абсолютно нормальным.

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

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

Прежде чем отправить дизайн разработчикам, убедитесь, что вы ничего не забыли. Убедитесь, что вы указали все состояния, чтобы разработчики не спрашивали вас позже: «Как это должно выглядеть в [каких-то особых условиях]?» Хороший способ найти такие пропущенные состояния — использовать инструмент прототипирования. На данный момент плагин Craft для Sketch (созданный Invision) с его функцией прототипирования является самым быстрым способом проведения такого тестирования.

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

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

Новое окно списка оптимизации с элементами по умолчанию для macOS. (Большой предварительный просмотр) Новое окно обработки файлов с элементами по умолчанию для macOS. (Большой предварительный просмотр)

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

iOS: ресурсы Apple по дизайну пользовательского интерфейса, доступные для Sketch, Photoshop и Adobe XD.
Android: набор материалов для дизайна
macOS: Facebook Desktop Kit

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

Мы используем Slack как основное место для общения. Send to Slack — это небольшой плагин, который передает артборд из Sketch напрямую в канал Slack. Это было очень удобно для сеансов обратной связи с командой. Делитесь чаще, делитесь чаще.

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

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

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

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

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

Подготовка дизайна к разработке

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

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

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

Логотип и название

И последнее, но не менее важное: название для нашего приложения появилось довольно быстро. Мне на ум пришли два слова: «уменьшить» и «уменьшить». Я проверил Product Hunt и увидел, что слово «уменьшить» уже используется, поэтому мы выбрали «уменьшить».

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

Поскольку значок строки меню должен быть размером 16 × 16 пикселей, лучше не использовать какие-либо крошечные элементы. Значок должен быть различимым и в то же время разборчивым.

После нескольких дней борьбы с простыми формами я сдался и открыл раздел «Избранные» в Google Fonts. Я искал красивый изогнутый шрифт, который бы хорошо подходил для логотипа (а также для значка строки меню). В конце концов появился шрифт Pacifico, и он идеально подходил для наших целей.

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

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

Заключение

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

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

Подводя итог тому, чему мы научились при создании приложения Reduce:

Подумайте о целях и вариантах использования продукта, прежде чем делать каркасы или прототипы.
Используйте такие инструменты, как Adobe Color и Khroma, чтобы быстрее выбирать правильную цветовую палитру. Полезным будет также базовое понимание цветовой системы HSB.
Не бойтесь экспериментировать с пользовательскими шрифтами.
Каждая платформа имеет собственный набор стандартов. Изучите их, прежде чем создавать дизайн.
Используйте инструмент для создания прототипов, чтобы понять весь процесс.
Не перегружайте свой дизайн пользовательскими элементами. Иногда лучше придерживаться элементов управления по умолчанию для данной платформы.
Получите отзыв о своем дизайне как можно раньше.
Привлеките разработчиков как можно раньше. Вы можете получить ценную информацию о функциональных элементах и о том, сколько времени уйдет на реализацию этой «маленькой градиентной кнопки со спиральной анимацией».
Используйте сетку, стандартную для платформы, чтобы выровнять все элементы. Разработчики поблагодарят вас за это позже.
Протестируйте свой дизайн для различных вариантов использования (например, для светлой и темной строки меню), прежде чем завершить работу над пользовательским интерфейсом.

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

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

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

Для дизайнеров

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

Для менеджеров

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

Для разработчиков

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

Что такое открытый формат?

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

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

В случае со Sketch вы можете использовать наши инструменты форматирования файлов для работы с файлами .sketch, вообще не используя приложение для Mac. Это отсутствие зависимостей распространяется и на операционную систему. Вы можете читать и писать документы .sketch в macOS, Windows и Linux, открывая целый мир возможностей, когда речь идет о непрерывной интеграции в рабочие процессы проектирования и разработки.

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

Весь мир — ваша устрица

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

Обновляйте маркеры дизайна

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

Программное изменение файлов Sketch

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

Автоматизировать создание/обновление библиотеки

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

Все это можно сделать с помощью других инструментов

В качестве бонуса вам не нужно использовать Sketch для запуска этих автоматизированных инструментов. Вместо этого вы можете использовать службы CI/CD, в том числе GitHub Actions, для автоматического создания библиотеки всякий раз, когда изменяется источник достоверности. Мы покажем вам, как это сделать, в пятой и последней статье серии, Открытый формат: использование GitHub Actions для работы с документами Sketch.

И многое другое…

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

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

Знакомьтесь, понедельник, студия

Чтобы дать контекст этим статьям, мы будем следить за вымышленной компанией Monday Studio.

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

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

Monday Studio разрабатывает многоязычное веб-приложение React, используя Sketch для дизайна UX и пользовательского интерфейса и Storybook для управления своей библиотекой компонентов. Они обновляют общую библиотеку Sketch, добавляя изменения из компонентов Storybook, используя ручной процесс.

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

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

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

Вперед

Теперь мы готовы приступить к работе с практическим примером из следующей статьи серии, Открытый формат: как читать файлы Sketch и преобразовывать их в JSON.

Итак… Вот вопрос: как открыть файл .sketch в Windows? Вскоре попробуйте наш бесплатный векторный редактор Icons8 Lunacy!

Скетч-приложение

Sketch — это приложение для Mac. Но у вас нет Mac. У тебя только Windows, а этот проклятый Sketch-файл тебе кто-то прислал. И у этого кого-то был Mac. Но у вас нет Mac.

Что ты собираешься делать? Купить Мак? Слишком дорогой. Спросите, что кто-то использует Photoshop? Не может быть, чтобы этот кто-то был одержим Sketch. Вы в безнадежном тупике. Или вы так думали…

Скетч для Windows

Вам нужна альтернатива Sketch для Windows. Скетча для Windows нет.
К счастью, мы здесь, чтобы спасти положение и предложить несколько альтернатив Sketch для Windows:

Скетч для ПК

Там будет только один. Ниже представлено собственное приложение для Windows под названием Icons8 Lunacy.

Icons8 Безумие

Lunacy — это отдельная программа для просмотра файлов Sketch в Windows. Он был разработан с нуля путем взлома формата файла эскиза.
Цена: бесплатно

Совет: давайте откроем, отредактируем и сохраним файлы Sketch в Windows.

Набросок онлайн

Их довольно много.

Авокод

Avocode предназначен для кодировщиков HTML. Кто-то должен будет загрузить файл эскиза в облако, используя свой плагин для Sketch. Первоначальная настройка заняла у нас 40 минут, из-за чего Sketch потреблял 90 % ресурсов ЦП.

Зеплин

Zeplin является прямым конкурентом Avocode. У него есть загружаемые приложения для Mac и Windows, но не дайте себя обмануть. Это не родные приложения. Они просто обертывают свой веб-сайт.

Цена: бесплатно для одного проекта, 19 долларов США за 3 проекта в месяц.

Фигма

Это новый инструмент. В отличие от Avocode и Zeplin, это полнофункциональный векторный онлайн-редактор и инструмент для совместной работы. Пока это бесплатно.
Обновление: теперь у них есть цены.

Цена: бесплатно для двух проектов, для более крупных проектов начальная цена составляет 12 долларов США за участника.

Подсказка. Кто-то должен будет загрузить файл эскиза в облако. Итак, заведите достаточно друзей среди пользователей Mac, чтобы у вас было хотя бы по одному в каждом часовом поясе. Не живите в Маниле: вам нужен быстрый интернет.

Социальная инженерия

Насилие

Совет: ориентируйтесь на хипстеров. Они слабы и слабы.

Совет: понизьте свои стандарты. Таргетинг на некрасивых богатых людей.

Терпение

Совет: если вы достаточно долго сидите в Starbucks, кто-нибудь обязательно попросит вас присмотреть за его Mac. Ориентируйтесь на стариков, они мочатся дольше.

Много терпения

Совет: попросите Bohemian поддержать Sketch для Windows.

Интернет-знакомства

Совет: игнорировать лица на фотографиях. Ищите компьютеры Mac.

Хакинтош

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

Безработица

Совет. прежде чем воровать у своего работодателя, убедитесь, что вы живете в стране всеобщего благосостояния. Норвегия работает.

Деньги

Совет. Если вам не хватает денег на новейший Mac Pro, продайте часть своих бриллиантов, слитков золота или шедевров Пикассо.

Шутки в сторону, мы взломали формат Sketch и разработали средство просмотра. Он открывает любой файл Sketch в Windows. Это альтернатива Sketch для Windows. Это бесплатно.

Привет, меня зовут Иван, я разработчик фоторедактора Photopea, который работает в браузере и отлично поддерживает формат PSD.

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

Вместо того, чтобы подробно описывать, как все работает, взгляните на несколько примеров. Кроме того, не стесняйтесь попробовать свои собственные файлы Sketch :)

Как вы думаете, это может быть полезно для вас? Если да, то какие еще функции вы хотели бы иметь? :)

P.S. подписывайтесь на Photopea в Facebook или Twitter.

Войдите, чтобы комментировать

Чтобы оставить комментарий, вам необходимо войти в систему.

Зарегистрируйтесь сегодня

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

29 комментариев

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

Это довольно интересно, и я действительно впечатлен. :)

Раньше я пробовал некоторые онлайн-инструменты для преобразования файлов .sketch в .psd, но все они ужасно не работали даже с простыми файлами (несколько слоев, ничего необычного).

Похоже, ваша конверсия "надежная".

В последнее время Figma проделала огромную работу, перенеся профессиональный дизайн пользовательского интерфейса в браузер, и есть Affinity и Gravit. Если вы когда-нибудь брали в руки какой-либо из этих инструментов, вы поймете, почему я никогда не рассматривал photopea как инструмент для профессионалов в это время и дату :( Пользовательский интерфейс выглядит довольно устаревшим, и просто пытаясь переместить некоторые слои или выбрать элементы, он Такое ощущение, что вы используете Photoshop десятилетней давности. Пожалуйста, не принимайте это на свой счет, Иван. Я прочитал ваш первоначальный пост в блоге и до сих пор впечатлен тем, как далеко вы ушли от своей первоначальной идеи в 2012 году. Для меня это больше похоже на "онлайн-просмотрщик и конвертер эскизов и psd"

Ценность, которую я вижу в современном мире дизайна:

Я видел, что вы предоставляете API, спасибо :)

Спасибо :) При создании Photopea моей первоначальной целью было создание растрового, а не векторного редактора. Пользовательский интерфейс никак не похож на Sketch. Но если вы знаете Photoshop или Gimp, Photopea должна быть вам знакома. У меня уже есть несколько тысяч пользователей, которые используют его как замену Photoshop в Chrome OS и Linux.

Что вы подразумеваете под «Фотошопом десятилетней давности», помимо серого цвета пользовательского интерфейса (который можно изменить в разделе «Дополнительно — Темы»)? Если вам не хватает каких-то возможностей из фотошопа (или другого растрового редактора), буду очень рад их добавить :)

Инструмент для просмотра файла эскиза.

Спасибо за Photopea:)

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

Спасибо! Он также сохраняет текстовые слои с правильным форматом (шрифт, размер, цвет и т.д.) и конвертирует их в слои PSD :) Если у вас есть размытие на фигуре, оно преобразуется в размытие векторной маски :) Размытие растровых слоев преобразуются в смарт-фильтры размытия на смарт-объектах :)

Да, Sketch to PSD тоже было бы неплохо :) Честно говоря, я думаю, что эти компании должны сотрудничать в разработке одного общего формата. Помните времена, когда для каждого телефона требовалось отдельное зарядное устройство? Вот что мы имеем сейчас в области форматов изображений :D

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

Читайте также: