Как открыть psd в zeplin
Publishing designs from Photoshop
Getting Started
In order to publish designs from Photoshop to Zeplin, you will need to download the desktop app.
When you download the desktop app, Zeplin automatically installs a plugin on Photoshop. If you’re not seeing the plugin, you can install it manually by following these steps for Mac or Windows.
☝️ It is not possible to publish PSD files directly without using the plugins.
Enabling the plugin
After downloading the desktop app, you can enable the plugin from Photoshop menu up top at “Window > Extensions”.
If you do not see Zeplin under “Extensions,” you can try installing the plugin manually by following the details here:
Publishing your designs
To publish your designs from Photoshop to Zeplin:
Select any layer/artboard in your Photoshop file
Open the plugin and click “Export selected artboards”
Select your project or styleguide then click “Import” to start the export process
Seeing file location
Zeplin shows the location of the file containing the screen if you are the same user who exported that screen and using the same machine (computer) used to publish your design. You can directly open the design file in Photoshop by clicking on the file name.
Программы для просмотра макетов
Feb 9, 2019 · 5 min read
Безусловно лучший способ просмотра макетов для верстальщиков.
И удобный способ делится макетами для дизайнеров.
Так уж повелось, что большинство веб-дизайнеров работает в программе Adobe Photoshop и присылают готовые макеты с расширением `.psd`. Что нам, верстальщикам, совершенно не удобно, но многие уже привыкли.
Таким образом приходится постоянно скачивать обновлённые дизайны, удалять старые (чтобы не перепутать), следить за изменениями.
Сейчас можно намного проще!
Дизайнер (или вы сами) публикует свои макеты в специальной программе и даёт доступ к проекту. Если что-то обновилось — появляются уведомления “что” и “где”.
Помимо всегда акута л ьной версии дизайна, преимущество таких программ в том, что не надо совершать лишних действий для просмотра стилей. Нажимаешь на кнопку или текст и тебе сразу отображает свойства элмента, а при наведении на соседние элементы — отступы.
Что ещё можно сделать в этих программах?
В общем, куча полезных функций, которые намного упрощают жизнь обычному разработчику.
Если дизайнер работает в:
1) программе Sketch (.sketch)— Zeplin / InVision / Figma / Avocode
2) программе Photoshop (.psd)— Zeplin / InVision / Avocode
3) программе Adobe XD (.xd) — Zeplin / Avocode / Adobe XD
4) программе Figma (.fg) — Figma / Zeplin / Avocode
Рассмотрим подробнее самые популярные сервисы.
Zeplin — сервис для просмотра дизайн-макетов. Работает он следующим образом: берет файл с дизайном и генерирует руководство по стилю, исходники и спецификации для разработчиков.
Есть десктопное приложение, но в браузере работает стабильнее. Добавить макеты можно только из программы, в которой работал дизайнер.
Имеется множество настроек, например:
Из минусов стоит отметить, что здесь нет возможности просмотра модульной сетки, она должна быть либо отдельным файлом, либо описана в каком-то документе.
Чтобы залить макеты в Zeplin нужно скачать десктопное приложение, которое автоматически установит дополнительные плагины для программ Sketch / Photoshop / AdobeXD. В Zeplin уже должен быть создан проект. Далее:
Ещё подробнее можете прочитать в самом блоге Zeplin — они записывают видео по экспорту + скриншоты, а так же описывают, как подготовить ресуры для экпорта.
InVision — сервис для быстрого преобразования дизайнов в кликабельные прототипы и макеты для совместной работы.
В InVision, в отличии от других программ, можно просматривать анимированные прототипы. Загрузить макеты и прототипы можно по такому же принципу как в Zeplin, то есть из исходной программы.
Очень удобно, что все картинки для скачивания находятся в одном месте. Имеется множество вариантов языков для просмотра стилей.
Figma — инструмент, в котором можно делать дизайн и напрямую смотреть стили из макета.
Интерфейс больше заточен именно под дизайнеров. Так же есть десктопное приложение. По стилям пока что можно выбрать только CSS, iOS, Android + они сразу логически разбиты.
Принцип работы Figma — индивидуальная настройка прав: приглашаете разработчика в проект, назначаете ему статус «read-only». Разработчик смотрит макеты, шрифт, цвета, размеры, отступы. Но если вам дали права с полным доступом, то постарайтесь не накосячить.
Свежесть версий обеспечивается неощутимым процессом синхронизации — все макеты в руках фронтендера находятся в той стадии, в какой их последний раз оставил дизайнер.
Avocode — программа для работы с любыми макетами.
Макеты можно загрузить двумя способами:
Если дизайнер заранее не подготовил ресурсы для скачивания, то тут это не проблема — всю графику можно сохранить самостоятельно, просто выбрав нужный элемент и нажав кнопку экспорта.
Avocode настраивается под любые критерии и типы разработки (веб и мобильные приложения). Можно даже подключить библиотеки Compass или Bourbon, если выбрать стил кода Sass.
До Avocode ни в одной программе не было возможности выбрать просмотр стилей через CSS in JS. И что самое крутое — десктопная программа доступна для всех операционных систем! Так что они явно на шаг впереди всех остальных.
Следует заметить, что такие программы позволяют бесплатно делиться ограниченным числом проектов с одного аккаунта. Если вас приглашают, проектов может быть сколько угодно.
Zeplin — 1 проект. Платная версия 3 проекта и более от 17$ в месяц
Invision — 1 проект. Платная подписка от 15$ в месяц
Adobe XD — 1 проект. Стоимость платной подписки с безлимитным количество проектов от 9.99$
Figma — 3 проекта и 2 пользователя. Дальше от 12$ за каждого пользователя в месяц
Avocode —пробный период 14 дней. Сервис стоит от 10$ за пользователя в месяц
Я полюбил верстку после этого: Zeplin в бою
Иногда я спрашивал себя и Гугл: «Почему мне бывает стыдно быть верстальщиком». Ну, знаете, когда не мог на глазок определить, какой передо мной шрифт: open sans с font-weight: bold, или open sans bold с font-weight: normal — либо случайно узнавал, что «ой, забыли тебе сказать, масштаб был не 1920×1080, а 2560×1440».
Весной 2015-го, придя в uKit, я узнал о Sketch — и увидел, как шаблоны стали появляться с красивыми и одинаковыми метками размеров относительно друг друга и очень подробным описанием.
Тогда мне захотелось большего. И буквально через несколько месяцев вышел Zeplin 1.0. Это приложение изменило мое представление о верстке в целом — потому что оно по-настоящему делает жизнь верстальщика счастливой.
Что такое Zeplin и зачем он нужен
Это приложение под Mac и Windows с очень быстрой и неглючной веб-версией (альтернатива для Linux), которое сэкономит вам кучу сил, времени и нервов. Особенно при работе в команде — ведь у него есть интеграция со Slack.
В связке со Sketch вы можете окончить версионную войну файлов и удобно поддерживать макеты в живом состоянии. Когда сложные экраны не перегружены колоссальным количеством слоев и групп слоев, дизайнеру можно легко и на лету вносить мелкие правки — верстальщик увидит их сразу.
Но главное в Zeplin — он позволяет кликать по любому простому векторному объекту на холсте и смотреть всю доступную информацию о нем.
Ровно ту информацию, которую заложил дизайнер — будь то точный размер холста, точные размеры каждого элемента, точные отступы, тени, толщины линии, прозрачности или CSS-коды эффектов.
Еще одна приятность — работа с контентом. Например, можно кликнуть по тексту на макете, и Zeplin позволит скопировать текст. Также вы можете тегировать контент (холсты) внутри папки с проектом и делать в них пометки.
А еще эта штука идеально подходит для работы на трех мониторах:
Три монитора — меньше альт-табить.
Например: средний монитор всегда с кодом. Большой горизонтальный — отображает страницу и, при необходимости, еще одно окно с кодом. На третьем можно держать отладчик DOM-дерева или несколько окон консоли.
Но ведь.
Да, подобное приложение есть и у фотошопа. Но, как и у всего Ps, его юзабилити кажется чрезмерно громоздким. Плюс есть сложности с определением объектов — и если размеры некоторых элементов худо-бедно показываются, то относительные межэлементные расстояния — нет. А это фатальный недостаток.
Интерфейс того же Adobe Brackets содержит много ненужного и мешает фокусироваться на правильном переносе макета.
К великому счастью, в Zeplin есть поддержку фотошоп-макетов — специальный плагин требует минимума знаний о том, как это лучше экспортировать.
Кстати, в последней версии Ps плагин Zeplin встроен из коробки!
Для чистоты эксперимента скажу, что накладки с распознаванием фотошоп-макетов иногда встречаются и у Zeplin — например, он не всегда аккуратно распознает межстрочные интервалы в больших блоках текста.
Но такие моменты должны быть частью договора с дизайнером. Ведь разбивать большие куски на разные объекты правильнее — хотя бы потому, что так удобнее работать.
Как внедрить это в команду
Расскажу, как мы сделали у себя. У нас как: мой отдел верстальщиков — 4 человека — и равный по власти начальник дизайнеров, у которого толпа ребят в штате и на аутсорсе.
Задача облегчалась тем, что все дизайнеры уже сидели на Sketch.
N.B. Совет — предварительно убедите ваших дизайнеров делать макеты не в фотошопе. Например, наглядно показав им разницу отображения содержимого макетов при увеличении в Zeplin во время работы.
Слева — макет, сделанный в фотошопе. Справа — в скетче. В фотошопном видны следы размытия: вроде мелочь, а неприятно.
Дальше вам потребуется сделать три простых шага.
Шаг 1. Заинтересовать, сказав всем: «Пиксель-перфект — не миф и не утопия, а вполне себе реально при правильном инструментарии».
Шаг 2. Договориться с дизайнерами. Обсудить, что нужно прорисовывать и указывать в макетах, а что нет. Да, если ваш дизайнер все еще использует Photoshop, для загрузки в Zeplin достаточно преобразовать макет в смарт-объект и нажать еще 3 кнопки.
Шаг 3. Раздать верстальщикам инвайты, чтобы они вошли в проект и стали радоваться жизни — им больше не нужно помнить о масштабах и экранных линейках при проверке и разработке макета.
Как c ним работается
1. Открываем макет на одном экране. Набрасываем верстку на втором, просто смотря на макет, — продумываем, что делать, как делать, сколько делать.
При этом вы уже точно знаете, сколько потребуется div-элементов, и как это распарсить под React, JQ или просто лендинг. А значит, остается время прикинуть, что применить нового, чтобы немного вырасти на этой конкретной задаче.
Функционал, который автоматически собирает все встречающиеся цвета в переменные, очень сильно экономит время. Например, если выяснится, что «нужен черный почернее», — достаточно будет просто поменять цвет в одной общей переменной, и он сразу применится ко всем.
3. Дальше разбираемся с версткой и стилями элементов — выбираем элемент в WYSIWYG-режиме на странице, жмем и сразу видим все или почти все, что нужно знать о нем.
Остается поэлементно обрамить верстку в стили. Я обычно иду сверху-вниз — от стилизации контейнеров к внутренним элементам.
Тут Zeplin заметно экономит время. Можно писать стили, просто смотря на макет, и редко отрываясь на использование браузера, чтобы проверить более-менее крупные сущности — не ошибся ли где синтаксически.
Также из приятного — экспорт сразу в готовый CSS, LESS, SASS, SCSS или Stylus. Удобно.
Как-то у меня потерялись буквы Ё и Й
Zeplin 1.0 — это молодое приложение и, по сути, еще находится в бете. А беты без багов не бывает.
Основные проблемы при работе связаны с переносом текста: в процессе он может потерять Й и Ё. Или заменить И на Й на кнопке. Иногда — но это скорее по ошибке дизайнера — внести значок вопроса или набор букв вместо пробела в тексте.
Особая любовь у Zeplin к замене пробелов и буквы И — примеры из разных проектов.
Но даже несмотря на это — копировать тексты одним кликом из макета и вставлять их в нужное место в коде куда быстрее, чем ковырять файлик с текстами где-то в облаке.
Случаются забавные моменты при отображении размеров — но это, опять же, человеческий фактор. Как-то один фриланс-дизайнер напутал с размерностью: он считал, что 1 условная единица это — 1px, а Zeplin — что 1pt.
Но вообще, дело в том, что Zeplin обычно в точности показывает макет, который сделал дизайнер. Так что вы легко можете встретить полпикселя в информации об элементе.
Дробные значения размеров (height: 105.5px) — некий ад перфекциониста.
Есть еще одна очень обидная особенность — нельзя просто в два клика скачать любой выбранный объект. Такая же проблема может возникнуть с картинками.
Конечно, если речь про стандартные иконки, их можно взять из иконочных шрифтов или подключить текстурой из открытых библиотек. А вот если это эксклюзивная картинка, иконка или логотип — тут сначала дизайнер должен в настройках исходника в Sketch указать экспорт конкретного ассета. Да, с фотошопом так, опять же, не получится.
Вот уже второй год, как я снова полюбил верстку. Делитесь своими рецептами и инструментами для получения удовольствия от рабочего процесса.
Задавайте вопросы про Zeplin. Это мировая вещь — на мой взгляд, самое светлое, что случилось между дизайном в клиент-сайдом за последнее время.
Я полюбил верстку после этого: Zeplin в бою
Comments 51
Я как-то столкнулся, что нужно было скетч-макет загнать в зеплин. Да, без мака это сложно. Но потом меня озарило — нет смысла вообще брать у дизайнера исходники.
Когда макет одобрили, зачем нам скетч- или psd-макет в виде файла — зачем дизайнеры его шлют? Картинка просто экспортируется в среду, где вам будет удобнее работать.
Я верстальшик, мне макет руками не положено трогать —
мне его положено получить в виде картинки и превратить в сайт. У меня на машине (Win) Sketch не стоит — и думаю, не стоял бы, даже будь у него версия под винду.
Zeplin делает этот момент легче — те самые 3% рынка традиционно и делают макеты (у нас все дизайнеры на маках, и я еще не встречал иных раскладов), а я спокойно открываю их творчество на Windows.
Вы читали же выше, что в Zeplin без фри-триала в 14 дней и оплат можно смотреть и сразу делать, то что нужно. Интеграция со слаком и неограниченное количеством участников проекта тоже входит в бесплатный пакет.
Для наших целей мы отлично обходимся связкой Sketch + Zeplin.
Про avocode знаем, пробовали немного, UI нам не понравился.
с очень быстрой и неглючной веб-версией
Ну и критика должна быть обоснованной
1) Загрузка одного макета среднего размера (до первого показа хотябы чего-либо) занимает от 15 секунд
2) viewport загружен множеством элементов, которые в данный момент не показываются
3) элементы в большинстве своём сделаны картинкой, хотя прям в sidebar-е есть все CSS (треугольники, кружки и прочее)
Ещё есть куда оптимизировать — это точно
Но в целом, неплохой тул для фронтэндера
Полностью согласен, проекту есть куда расти — просто у нас разные придирки к нему.
Загрузка одного макета среднего размера (до первого показа хотябы чего-либо) занимает от 15 секунд
А в чем преимущество перед бесплатным assets от adobe? Меж элементные расстояния всегда вроде бы неплохо соблюдаются с плагином perfect pixel для хрома.
Да и в самом assets межэлементные расстояния подсвечиваются если выделять элементы с зажатым шифтом. Не понял честно говоря о каких расстояниях идет речь.
Я пробовал assets, тогда когда еще zeplin не умел подключать psd макеты.
Честно говоря, с ним дольше. Наличие плагина для PP результата уже точно обременяет вторым подходом, в котором нужно очень неудобным образом подгонять картинку под веб страницу. В Zeplin вроде как сразу все само получается.
UPD: Zeplin для верстальщика такой же бесплатный, при прочих равных.
В статье написано, что есть клиенты под Mac, Linux, Windows. Но, помоему, для Linux клиента таки нет.
Поменять домик в горах с видом на море на душный ростовский офис, лишиться радости быть рядом в любой момент жизни двухмесячного сына, снизить свой доход раза в два и приобрести до кучи начальников,? Нет, спасибо.
ps
пишу «душный» в сравнении с утренним бризом и чистейшим горным воздухом.
Но есть вариант с «ожидания vs реальность» — и тогда дизайнер должен прийти и показать, а не швыряться в тебя 300-меговым исходником. Это вопрос не приложения или «облака — не облака», а коммуникаций.
Zeplin лишь удачно заменяет хранилище и просмотрщик «бесплатно и без смс», отменить человеческий фактор он не в силах.
. Если у меня есть PSD, то как я могу подгрузить его в проекты и делать верстку?
PSD макет из фотошопа с помощью внутреннего плагина можно экспортировать в Zeplin.
Плюс нету версии для linux. Как нету?
Для Linux действительно нет приложения, но веб-версия работает здорово. Пользуюсь ей сам и на винде.
Это в то время, как все разрабатывают либо под Mac, либо Linux. Windows не в счет, под ним нельзя разрабатывать, только в игрушки играть.
Ну зачем же так сурово и категорично, многие разработчики и не только в вебе разрабатывают под Windows. Вполне успешно. Конкретно у нас в компании всех хватает, есть и под Windows, есть и под Linux и даже несколько на Mac код пишут.
И чем вам игрушки то не угодили? 🙂
PSD макет из фотошопа с помощью внутреннего плагина можно экспортировать в Zeplin.
Покажите, пожалуйста, как это сделать в веб версии.
Ну зачем же так сурово и категорично, многие разработчики и не только в вебе разрабатывают под Windows. Вполне успешно. Конкретно у нас в компании всех хватает, есть и под Windows, есть и под Linux и даже несколько на Mac код пишут.
Ну я сам раньше под Windows разработкой занимался. Смотря что разрабатывать. Верстать можно. Вообще я не указал то, что имею ввиду веб-разработку. Так как большинство разработок для веба работают на linux серверах, то и разработка должна идти на аналогичной платформе. А если разрабатывать на Java, C# и прочее, то да — Windows вполне годится.
И чем вам игрушки то не угодили? 🙂
Ну почему-же? Хорошие игры — это прекрасно. Windows тут нету равных.