Как в marsy измерить расстояние между блоками

5

Как в marsy измерить расстояние между блоками

11 сервисов, чтобы изучить PSD-макет для вёрстки сайта

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

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

0. Photoshop

Стоимость: самый дешёвый вариант подписки обойдётся чуть дороже 700 рублей в месяц, самый дорогой — почти в 2 800.

Это пункт номер ноль, потому что совсем не упомянуть Photoshop нельзя. Где ещё открывать макет, если не в программе, в которой он обычно создаётся. Можно быть уверенным, что всё отобразится корректно, именно так, как задумывал дизайнер. Правда, вы можете не хотеть платить за Photoshop и выбрать что-то или более доступное, или за эти же деньги, но с более широким набором функций под ваши задачи.

1. Avocode

Стоимость: 12 долларов в месяц, если подписаться в одиночку, по 29 долларов на человека для команды. Годовая подписка даёт скидку в 25%. Есть двухнедельный пробный период.

Сервис поддерживает форматы Photoshop, Sketch, Adobe XD и Illustrator без плагинов, частично интегрируется с Figma. Он превратит макет в спецификацию с отдельными изображениями и CSS-стилями, позволит быстро получить информацию об иконках, изображениях и других элементах дизайна. Интерфейс очень похож на Photoshop, что может быть удобно. Avocode используется для мобильных и веб-приложений.

2. Zeplin

Стоимость: цена привязана к количеству проектов. Попробовать программу можно бесплатно, самый дешёвый тариф обойдётся в $19/месяц или $17 при подписке на год.

У сервиса есть десктопная и браузерная версии. Zeplin похож на Avocode, не случайно последний на своём сайте даже объясняет, в чём их преимущества по сравнению с Zeplin. Так что стоит воспользоваться пробным периодом, чтобы сравнить их самостоятельно и выбрать, что больше подходит именно вам. Главное различие: в Zeplin открыть PSD-макет сразу не получится, нужно провести некоторые манипуляции. Инструкция для этого есть на их сайте.

3. Marsy

Стоимость: бесплатно; создателю можно задонатить в благодарность.

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

4. Sympli

Стоимость: бесплатно для начинающих без команды и не больше 10 долларов в месяц на самом дорогом тарифе.

Это платформа для совместной работы, которая позволяет работать с макетами Photoshop. Впрочем, на бесплатном одиночном тарифе вопрос командного взаимодействия снимается сам собой. При этом у Sympli есть плагины к Android Studio и Xcode, что ускоряет перевод макета в код.

5. PSDETCH

Стоимость: бесплатно.

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

6. InVision

Стоимость: бесплатно для одиночек и маленьких команд, $9,95 в месяц для больших.

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

7. Рhotopea

Стоимость: бесплатно.

Онлайн-альтернатива Photoshop. В отличие от последнего, Рhotopea можно запускать на более слабом оборудовании. Сетевое подключение нужно для загрузки среды, редактирование происходит с использованием ресурсов компьютера. Позволяет сразу видеть CSS-код объекта и в целом может быть неплохим подспорьем в работе.

8. Adobe XD

Стоимость: бесплатно для ограниченного стартового плана, от 644 рублей в месяц за полноценную версию.

По названию производителя очевидно, что PSD-макеты здесь поддерживаются в лучшем виде. Кроме того, программа распознаёт взаимосвязи между объектами и автоматически вносит правки по мере изменения проектов.

9. Paint.NET

Стоимость: бесплатно.

Иногда этот сервис приводят как альтернативу штатному Paint от Microsoft. Это не совсем одно и то же. Хотя бы потому что при схожести стартового набора функций возможности Paint.NET можно расширять с помощью плагинов практически безгранично — в рамках разумного, разумеется. Это вариант из серии «почему бы и нет», а не «конечно, да!», но не упомянуть его нельзя.

10. GIMP

Стоимость: бесплатно.

Программа, которая поддерживает множество форматов, в том числе .PSD. Причём пользоваться ею можно абсолютно безвозмездно. Рассмотрите как вариант, если хотите сэкономить.

Если вы работаете с PSD-макетами, поделитесь в комментариях, какие программы используете, чтобы выудить максимум информации. Хотите научиться создавать сайты? Приходите учиться на факультет веб-дизайна или веб-разработки в GeekUniversity!

Обзор сервиса Marsy

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

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

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

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

А значит пришло время взять инициативу в свои руки. И вот уже довольно долгое время, а именно с 2017 года я занимаюсь развитием своего сервиса. Далее я расскажу о нем более подробно.

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

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

Создание проекта и загрузка макетов

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

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

Форма создания проекта, здесь можно задать его название и описание

После создания проекта кликаем по элементу в списке и переходим в сам проект, хранилище макетов.

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

Добавить макет для загрузки можно несколькими способами: перетащить макет на область формы или нажать кнопку «Добавить файл» и выбрать макет в инспекторе. Одновременно можно загружать несколько макетов.

Также в этой форме можно изменить название макета и добавить описание к нему.

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

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

Теперь можем перейти к самому «вкусному», к редактору.

Работа с редактором Marsy

Основная информация и контекстное меню

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

• Копировать текст — копирует текст выделенных тестовых слоев
• Копировать стили — копирует стили выделенных слоев
• Скачать — открывает диалог для скачивания выделенных слоев
• Открыть смарт — открывает smart object связанный со слоем

Панель инструментов

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

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

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

Список слоев

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

Около группы слоев есть кнопка, при нажатии на которую будут выделены все дочерние слои.

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

Экспорт изображений

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

Окно экспорта изображений

Основной элемент здесь это список изображений для экспорта.

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

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

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

Первым идет редактор названия, позволяет называть однотипные элементы с нумерацией, например, если в нем написать «item_ «, то слои будут названы item_1, item_2, item_3 и т.д. Для того чтобы изменить стартовое число, нужно написать «item_ » или «item_ «, и нумерация будет начинаться с 2 или с 8, соответственно.

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

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

На самом верху есть кнопка «Сохранить в один файл», переключив ее можно скачать слои, объединив их в один файл, расположены они будут относительно друг друга как и на макете.

Настройки

Большое внимание я уделяю кастомизации редактора под нужды пользователей. И в этой вкладке как раз собраны все эти настройки.

• Язык приложения
• Формат стилей css или sass — отличаются наличием «;» в конце строки стиля
• Показывать дубли для стилей текста — используется в текстовых слоях, у которых есть текст с разными стилями. Попробуйте изменить значение и поймете в чем суть, на словах это сложно рассказать.
• Плавающее окно стилей — скрывает окно со стилями, которое появляется при клике по слою
• Всегда показывать расстояние — выше я рассказывал о линейках, показывающих расстояние до другого слоя, так вот, при включении этой настройки не нужно зажимать ctrl, они всегда будут отображаться
• Показывать размеры блока — настраивает, когда показывать размеры слоя в его верхнем левом углу. По умолчанию при наведении и выделении слоя
• Настроить расположение вкладок — тут можно изменить порядок инструментов в панели, перенести их на правую сторону или вовсе скрыть неиспользуемые
• Настроить горячие клавиши — для многих действий (копирование стилей, текстов, скачивание изображений) я добавил горячие клавиши, в этом разделе вы можете перенастроить их.

Информация о слое

Тут расположена полная информация о слое полный текст, стили, изображения, svg и base64 представления при наличии.

Информация о макете

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

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

Панель масштабирования

Масштабировать макет можно как кнопками на панели, так и колесом мыши при зажатом ctrl и клавишами «+» и «-» на клавиатуре.

К чему приводит лень или как докатиться до написания парсера psd и что из этого может получиться

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

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

И в какой-то момент пришло понимание, что работа с макетом отнимает непростительно много времени, немного поискав, нашел плагин для Photoshop’a, который генерировал готовые стили на основе слоя. Это было для меня как новый виток в развитии, казалось, что до этого я не верстал вовсе, а баловался.

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

Попробовав его, я понял, что мне нужно, но было несколько факторов:

1. Мне нравится программировать
2. Я не хотел, да и честно говоря, не мог себе позволить, столько платить за их продукт
3. Пункт про лень и желание все оптимизировать

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

Это был десктопный клиент, написанный на node-webkit. Как инструмент для себя он был неплох, моя продуктивность подросла, стало появляться свободное время, и я его пускал на доработку Marsy, там не было экспорта изображений, но были возможности, которые мне помогали: быстрое копирование стилей и текстов слоя, но самым полезным был режим сравнения нескольких макетов. В нем было видно какие слои изменились, и чем они отличаются — это помогало очень быстро делать адаптивный дизайн, имея макеты разных разрешений.

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

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

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

Смена языка очень сильно сказалась на производительности, парсинг начал просто летать, но памяти все еще требовалось немногим больше, чем потреблял Photoshop.

С тех времен остался один скриншот:

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

Парсер переписан под веб архитектуру, заказан VPS, поднят tomcat, БД, написана клиентская часть, и начинается закрытое тестирование по приглашениям.

Так выглядел сервис на тот момент:

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

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

Перевел на него клиентскую часть Marsy, оптимизировал многое на сервере.

Стек технологий и инструментов на сегодня: java, Spring framework, React, Redux.

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

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

1. поддержка смарт объектов и возможность открыть их
2. возможность создания прямых ссылок на макет, по которой можно открыть его без необходимости авторизовываться вроде этой
3. пакетное скачивание изображений с настройкой качества
4. использование переменных

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

Как попробовать

Приложение доступно бесплатно по ссылке Marsy.
Так же можете посмотреть видео с полным описание его возможностей, правда с тех пор некоторые вещи изменились.

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

Как в marsy измерить расстояние между блоками

Евгений, Планов много на самом деле. Некоторые даже на грани фантастики).

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

Есть мысли сделать замену стилей по маске, например менять название шрифта с "UbuntuTrail" на "Ubuntu Trail", такому инструменту можно найти много применений например заменять стили на переменный для less.

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

Также мне интересно попробовать научить программу раздавать классы bootstrap сетки (.col-9.col-md-6) на основе нескольких макетов, но это пока все мечты))

Marsy Service Overview

Everyone who has been involved in the layout of html pages knows that working with the layout design takes a rather long time, and the more complex the layout, the more.

Some time ago, when there was neither avocode nor zeplin, all the necessary receive information about layers and the layout itself from programs that do not provide for easy the conversion of data into the presentation necessary for the layout designer, in this case — this Photoshop.

Later, the above products entered the arena and the life of developers began to improve, but there was such a problem as a monopoly in this segment (see the cost of avocode and you’ll understand what I mean), but not even that prompted me to create a service Marsy .

At some point, I realized that I lacked the opportunities that the existing ones tools, I wanted to optimize here, add features there, but it’s impossible, usually these companies have a clear plan that they follow.

And that means it’s time to take the initiative. And for quite a long time, and Since 2017, I have been developing my service. Next I will talk about him more in detail.

Marsy service is absolutely free, but if you like it, you can always help me financially on this page.

I also want to report that everyone can offer an improvement, and with a high probability it will appear in Marsy.

Creating a project and loading layouts

After a simple registration, we get to a page with a list of projects, they can be any number. Project can perceived as the folder in which the layouts are stored.

On this page you can create a new project or delete an existing one, it is important note that when you delete a project, all layouts from it will be deleted, and restore them already not allowed.

Form for creating a project, here you can set its name and description

After creating the project, click on the item in the list and go to the project itself, the repository layouts.

In order to download a new layout, click on the «Add Layout» button after This will open the layout download form.

There are several ways to add a layout for loading: drag the layout onto shape area or click the «Add File» button and select a layout in the inspector. At the same time can upload multiple layouts.

Also in this form you can change the name of the layout and add a description to it.

Some actions are available for each layout:

• Download the layout — by clicking on this button you can download the layout on your a computer
• Put in archive — allows you to remove the layout in the archive, while processed information on it will be deleted, and the layout itself will disappear from this page. View layouts in archive you can click on the button «Show archive», the number on it indicates the number layouts in the archive. The layout from the archive can be removed, but after that it again have to send for processing by clicking on the appropriate button.
• Refresh — when you click on it, the layout will be sent to parsing again, used when the release of a new update, in which there is a change in working with files.
• Delete — deletes the layout, it is impossible to restore it after removal.

Now we can move on to the most delicious, to the editor.

Working with the Marsy editor

Basic information and context menu

The first thing you can do here is to click on the screen with the mouse, and if you get to layer then he will become active. Near it, the dimensions will be displayed and a floating will appear. window with styles of this layer. If now you hold down the left ctrl and move it to another layer, then we see the distance between them. If instead, right-click, then the context menu of the layer appears, in which, depending on its type, the following points:

• Copy text — copies the text of selected test layers
• Copy Styles — copies the styles of selected layers
• Download — opens a dialog for downloading selected layers
• Open smart — opens the smart object associated with the layer

Toolbar

On the left is a toolbar, I will combine simple tools into one section, and about I’ll tell you more complicated ones.

• Outlining — allows you to select layers by capturing them with a border, so same its dimensions are written on its sides, which can be used for measurements.
• Eyedropper — with its help you can copy the color of any element, clicking on it.
• Back — the tab where the buttons for returning to projects are located
• Guides — turns on / off the display of guides from Photoshop
• Support — the team tab that contains links to reference materials and donation page

We’ll end with simple tools and move on to more complex ones. Next I will arrange them in the same order as on the site.

List of layers

Layers and layer groups can hide and most importantly, the layers that were hidden in Photoshop initially will be available, just switch their visibility.

Near the group of layers there is a button, when clicked, all will be selected subsidiary layers.

When clicking on a layer in this list, the editor is centered on the image of this layer, what allows you to quickly determine its location.

Export Images

By going to the image download tab you will see two buttons, both of them will open window export images. The difference is that when you click on one of them will be suggested — download images of selected layers, while the second will offer to download Images of all non-text layers, which is sometimes useful.

Image Export Window

The main element here is a list of images for export.

On the left is a thumbnail of the image, then comes the text box, in it can change the name with which the image will be saved. After the name go selection fields image format (png, jpg and svg if available) and quality settings, available only for jpg format. The last element is the checkbox, which indicates what you need whether export a specific item.

I want to note that for layers in which the pattern is used, there will be a separate sentence line — download it.

There are elements for group editing above the list of images. Impact they will only be on those items for which the checkmark for export is active.

The first is the name editor, allows you to name elements of the same type with numbering for example, if you write «item_ » in it, then the layers will be named item_1, item_2, item_3 and etc. In order to change the starting number, you need to write «item_ » or «item_ «, and the numbering will start at 2 or 8, respectively.

Next, quality settings, image format and switch buttons activity layers.

At the bottom is the download button, if the image is one, then the file will be downloaded immediately, if their several, the archive with all the images from the list will be downloaded.

At the very top there is a button «Save to one file», switching it you can download layers combining them into one file, they will be located relative to each other as on mock up.

Settings

I pay much attention to customizing the editor for the needs of users. And in this the tab contains all these settings.

• Application Language
• Css or sass style format — differ by the presence of «;» at the end of the line style
• Show duplicates for text styles — used in text layers, which There is a text with different styles. Try to change the value and understand what the essence in words it is difficult to tell.
• Floating Styles Window — hides the styles window that appears on click by layer
• Always show distance — above I talked about rulers, showing distance to another layer, and so, when you turn on this setting, you don’t need to pinch ctrl they will always be displayed
• Show block sizes — sets when to show layer sizes in his top left corner. By default when hovering and selecting a layer
• Set tab layout — here you can change the order tools in panels move them to the right side or completely hide unused
• Customize keyboard shortcuts — for many actions (copy styles, texts downloading images) I added hotkeys, in this section you can reconfigure them.

Layer Information

Here is the full information about the layer full text, styles, images, svg and base64 views if available.

Layout information

This tab contains the data for the entire layout: a list of colors, used in it and all layout fonts.

There is also a block for setting variables, with their help you can replace words or lines to others. Variables operate throughout the project, with deleting a layout will remain available inside other layouts.

Zoom bar

You can scale the layout with both the buttons on the panel and the mouse wheel while holding down ctrl and keys «+» and «-» on the keyboard.

К чему приводит лень или как докатиться до написания парсера psd и что из этого может получиться

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

Итак, приступим!

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

И в какой-то момент пришло понимание, что работа с макетом отнимает непростительно много времени, немного поискав, нашел плагин для Photoshop’a, который генерировал готовые стили на основе слоя. Это было для меня как новый виток в развитии, казалось, что до этого я не верстал вовсе, а баловался.

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

Попробовав его, я понял, что мне нужно, но было несколько факторов:

1. Мне нравится программировать
2. Я не хотел, да и честно говоря, не мог себе позволить, столько платить за их продукт
3. Пункт про лень и желание все оптимизировать

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

Это был десктопный клиент, написанный на node-webkit. Как инструмент для себя он был неплох, моя продуктивность подросла, стало появляться свободное время, и я его пускал на доработку Marsy, там не было экспорта изображений, но были возможности, которые мне помогали: быстрое копирование стилей и текстов слоя, но самым полезным был режим сравнения нескольких макетов. В нем было видно какие слои изменились, и чем они отличаются — это помогало очень быстро делать адаптивный дизайн, имея макеты разных разрешений.

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

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

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

Смена языка очень сильно сказалась на производительности, парсинг начал просто летать, но памяти все еще требовалось немногим больше, чем потреблял Photoshop.

С тех времен остался один скриншот:

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

Парсер переписан под веб архитектуру, заказан VPS, поднят tomcat, БД, написана клиентская часть, и начинается закрытое тестирование по приглашениям.

Так выглядел сервис на тот момент:

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

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

Перевел на него клиентскую часть Marsy, оптимизировал многое на сервере.

Стек технологий и инструментов на сегодня: java, Spring framework, React, Redux.

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

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

1. поддержка смарт объектов и возможность открыть их
2. возможность создания прямых ссылок на макет, по которой можно открыть его без необходимости авторизовываться вроде этой
3. пакетное скачивание изображений с настройкой качества
4. использование переменных

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

Как попробовать

Приложение доступно бесплатно по ссылке Marsy.
Так же можете посмотреть видео с полным описание его возможностей, правда с тех пор некоторые вещи изменились.

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

Все для верстки прямо в браузере

Онлайн инспектор файлов PSD – делает разработку быстрее.

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

Вся информация о дизайне находится в пару кликов

Размеры & расстояния

Выберите несколько слоев и измерьте все в px, pct

Код & переменные

Сохраните стили и переменные в пару кликов

Выбор цвета

Выберите и экспортируйте цвета в HEX, RGBa, HSL

функции

Широкие возможности для верстальщика

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

функции

Копирование текстов и стилей

Marsy – позволяет мгновенно копировать тексты и стили, причем можно копировать текст нескольких элементов, и в режиме мультикурсора вставлять его в разные места за один подход.

функции

Экспорт изображений

Пакетный экспорт изображений сэкономит ваше время кратно. Для изображений возможно выбрать формат сохранения в jpg или png . Для векторных слоев можно получить svg файл или BASE64

функции

Работа со слоями

Вкладка “Слои” открывает всю структуру макета – папки, слои. Пользователь может видеть иерархию, управлять видимостью слоя, осуществлять навигацию между элементами, выделяя их.

Тарифы

Тарифные планы, разработанные с учетом ваших потребностей.
Начните бесплатно. Измените или отмените свой план в любое время.

Тариф для ознакомления с сервисом

• Один активный проект
• Один активный макет
• Авто удаление через 60 дней*

Basic

Тариф для профессионального использование

• Лимит макетов 300 Мб
• Неограниченное количество макетов
• Неограниченное количество проектов
• Авто удаление через 150 дней*
• Список шрифтов
• Список цветов
• Размер блоков
• Пакетное редактирование при скачивании
• SVG
• Смарт объекты

Полнофункциональный тариф без ограничений

• Лимит макетов до 5 Гб
• Макеты не удаляются
• Список шрифтов
• Список цветов
• Размер блоков
• Пакетное редактирование при скачивании
• SVG
• Смарт объекты
• Переменные
• Настройка вкладок
• Горячие клавиши
• css/sass
• Скачать макет

Полнофункциональный тариф без ограничений

• Улучшение качества изображений
• Удаление фона изображений
• Конвертация в WEBP
• Лимит макетов до 5 Гб
• Макеты не удаляются
• Список шрифтов
• Список цветов
• Размер блоков
• Пакетное редактирование при скачивании
• SVG
• Смарт объекты
• Переменные
• Настройка вкладок
• Горячие клавиши
• css/sass
• Скачать макет

Ответы на вопросы

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

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

Тарифный план VIP отличается максимальным функционалом, и приоритетной поддержкой.

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

Если вы хотите использовать другой способ оплаты, например, банковский перевод, или PayPal, напишите нам по адресу sales@markupeasy.com . Обратите внимание, что мы принимаем эти способы оплаты только для годовой подписки.

Вы можете изменить свой тарифный план или расчетный период в любое время. Откройте настройки выставления счетов в Marsy и нажмите кнопку «Изменить план».

Вы можете отменить план подписки в любое время. Откройте настройки оплаты в Marsy и нажмите кнопку отмены подписки. Вы получите подтверждение по электронной почте после отмены. Списание средств за следующий месяц использования будет остановлен.

В данный момент поддерживается только один формат: PSD (формат Photoshop). Мы работаем над тем, чтобы в ближайшем будущем, сервис поддерживал Sketch, Adobe XD, AI.

На странице “История обновлений” вы найдет информацию обо всех обновлениях сервиса.