Zeppelin как открыть psd

Программы для просмотра макетов

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

Так уж повелось, что большинство веб-дизайнеров работает в программе Adobe Photoshop и присылают готовые макеты с расширением `.psd`. Что нам, верстальщикам, совершенно не удобно, но многие уже привыкли.

Таким образом приходится постоянно скачивать обновлённые дизайны, удалять старые (чтобы не перепутать), следить за изменениями.

Сейчас можно намного проще!

Дизайнер (или вы сами) публикует свои макеты в специальной программе и даёт доступ к проекту. Если что-то обновилось — появляются уведомления “что” и “где”.

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

Что ещё можно сделать в этих программах?

• Выбрать язык отображения стилей: CSS/Sass/Less/Stylus, Swift, Objective-C и др.
• Скопировать текст или набор свойств.
• Оставить комментарий в нужном месте на макете, если нет связи с дизайнером.
• Скачать исходники с иконками или картинками, что устраняет процесс подготовки графических элементов вручную. Сначала дизайнер должен в настройках исходника указать экспорт конкретного ассета.

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

Если дизайнер работает в:

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 — сервис для просмотра дизайн-макетов. Работает он следующим образом: берет файл с дизайном и генерирует руководство по стилю, исходники и спецификации для разработчиков.

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

Имеется множество настроек, например:

• отключить отображение базовых стилей
• задать формат отображения цвета (HEX, RGB, HSL)
• добавить в Style Guide цвета и параметры шрифта, чтобы проще ориентироваться и быстрее задавать такие же стили к другим элементам

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

Чтобы залить макеты в Zeplin нужно скачать десктопное приложение, которое автоматически установит дополнительные плагины для программ Sketch / Photoshop / AdobeXD. В Zeplin уже должен быть создан проект. Далее:

• Photoshop выбираете инструмент “монтажная область”, выделяете макеты и отправляете в Zeplin (Window > Extensions > Zeplin)
• Sketch выдеялите все артборды, которые нужно передать разработчику, нажимаете Cmd + E (⌘E) или Plugins > Zeplin > Export Selected Artboards. Выбираете нужный проект и нажимаете Import
• AdobeXD выбираете артборды, нажимаете Cmd + Option + E (⌥⌘E) macOS / Ctrl + Alt + E Windows, либо меню >Export > Zeplin. Выбираете проект и нажимаете Import
• Figmaуже имеет встроенный функционал для работы с сервисом Zeplin. Чтобы включить экспорт открываете меню >Integrations > Zeplin. Потом выбираете артборды, нажимаете Option + E (⌥E) / Alt + E либо нажимаете кнопку экспорта (в правом верхнем углу) и выбираете Export to Zeplin и нужный проект

Ещё подробнее можете прочитать в самом блоге Zeplin — они записывают видео по экспорту + скриншоты, а так же описывают, как подготовить ресуры для экпорта.

InVision — сервис для быстрого преобразования дизайнов в кликабельные прототипы и макеты для совместной работы.

В InVision, в отличии от других программ, можно просматривать анимированные прототипы. Загрузить макеты и прототипы можно по такому же принципу как в Zeplin, то есть из исходной программы.

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

• слишком нагруженный интерфейс (показываются слои и их нельзя скрыть, переключатели режима и многое другое, что не зачастую не нужно простому разработчику)
• неудобная навигация по макетам
• нельзя растянуть панель стилей
• нет формата HSL(HSB) для цветов, зато есть UIColor для apple разработчиков

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

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

Принцип работы Figma — индивидуальная настройка прав: приглашаете разработчика в проект, назначаете ему статус «read-only». Разработчик смотрит макеты, шрифт, цвета, размеры, отступы. Но если вам дали права с полным доступом, то постарайтесь не накосячить.

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

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

Avocode — программа для работы с любыми макетами.

Макеты можно загрузить двумя способами:

1. Подключив учетную запись Dropbox и выбрав оттуда необходимый файл
2. Загрузка дизайна непосредственно с компьютера

Поддерживаемые разрешения: .sketch, .psd, .xd, .ai. Файлы из программы Figma можно загрузить через десктопное приложение.

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

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$ за пользователя в месяц

nikolai-shabalin / htmlcss-1__section-3.md

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

2. Порекомендуйте сайты, на которых есть окно для кода HTLM/CSS/JS

3. Расскажите про формат WebP

Формат WebP сейчас поддерживается в 80% браузеров по миру и выигрывает у многих форматов по степени сжатия и сумме возможностей. Удобнее всего его экспортировать в инструменте Squoosh. Однако из-за неполной поддержки в браузерах, его чаще используют как дополнительный формат для контентных изображений. То есть к странице подключают картинку в JPG, PNG или подобных и, дополнительно, с помощью элемента <picture> , подключают версию в WebP. В стилях удобно использовать WebP, к сожалению, сложнее. Подобнее об этом мы рассказываем на втором уровне вёрстки.

4. Как завести линтеры?

В данной статье http://codeguide.academy/html-css.html есть такие пункты: 1 Для проверки HTML-кода используйте файл конфигурации .htmlhintrc для настройки валидатора HTMLHint. 2 Для проверки CSS-кода используйте конфигурацию для настройки валидатора stylelint. 3 Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb. Как это сделать? Например, по 2му пункту: я открыл конфигурацию https://github.com/htmlacademy/stylelint-config-htmlacademy а что дальше?

Приходите на второй уровень вёрстки, мы вам расскажем.

5. Почему не Figma?

Можно ли обойтись без фотошопа? Почему в академии игнорируют FIGMA? Ведь гораздо удобней. Да и дизайнеры переходят на нее. Обучался в школе Солдаткина, так была проблема найти верстальщика, который может работать с фигмой, всем psd подавай.

Здравствуйте, просьба подробнее рассмотреть графический онлайн-редактор Figma.

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

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

6. Обязательно ли готовить ретину?

Обязательно ли готовить варианты графики для ретины, или это зависит от ТЗ проекта?

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

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

7. Как работать в Zeppelin и Figma с макетами в формате PSD?

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

8. Как создавать многоугольники в SVG?

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

В интерактивных курсах «Знакомство с SVG» есть отдельная часть, посвящённая многоугольникам — рекомендуем пройти все три главы. Также мы можем рекомендовать «Карманное руководство по написанию SVG» и руководство по SVG на MDN.

9. Как рисовать фонами?

Проходя курс ФОНЫ ч. 1, когда нужно было расположить картинки либо начертить координатами линии либо фигуры (математически знаки и испытание CAT ACADEMY), подбирал значения вручную. Правильно ли я делал, либо есть более мудрые способы управлять расположением фонового изображения.

Самый удобный способ рисовать фонами — это писать код в инспекторе редактора, прямо в панели со стилями. Откройте DevTools в вашем браузере, найдите нужный элемент в инспекторе и напишите для него стили. Числовые значения фона удобно менять стрелками, удерживайте Shift, чтобы менять значения десятками и Alt, чтобы менять дробными частями.

10. Какие основные требования к граф. редактору?

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

11. Какие размеры должны быть у контентных картинок

В psd для Техномарта все изображения товаров <img> разных размеров (на несколько десятков пикселей). Нужно их нарезать одинаковыми, или для каждого <img> прописывать в html уникальную длину и ширину? Важно ли в реальных проектах чтобы картинки к карточкам товаров были одинакового размера в пикселях?

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

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

12. Как рассчитывать координаты во viewBox ?

Здравствуйте! Не совсем ясен принцип расчета координат во viewBox в svg

Об этом есть отдельная глава в курсе «Знакомство с SVG», пройдите её.

13. Как сжать много картинок сразу

Расскажите плз есть ли какое-то пакетное сжатие файлов? Когда нужно сжать например 100 джипегов. Или это все решается с помощью tinyjpg.com?

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

14. Может ли Figma полноценно заменить Photoshop на курсе?

Здравствуйте! Подскажите, может ли Figma полноценно заменить Photoshop на курсе?

Если вы откроете макет в формате Sketch в Figma (это работает) и у вас получится измерить и экспортировать всё, что вам нужно — да, значит у вас получится полноценно заменить Photoshop на Figma. Что касается нашего курса, то возможно мы начнём рассказывать про Figma на следующих потоках.

15. Можно ли копировать стили из Photoshop?

Умеет ли Photoshop формировать CSS код? Если да, то для каких элементов и насколько он применим для реальных проектов?

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

16. Как отделить объект от белого фона на растровой картинке?

Есть картинка ПНГ-формата с объектом на белом фоне. С помощью какого редактора, кроме Фотошопа можно разместив эту картинку сделать так, чтобы с помощью CSS сделать белый фон прозрачным, но объект при этом должен быть виден чётко?

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

17. Как собрать растровый спрайт?

В каком редакторе можно собрать картинки в одну чтобы использовать их как спрайт?

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

18. Как в фотошопе скопировать текст и вставить в HTML?

Для этого есть инструмент «Text», вызывается клавишей T — нажмите им текст и скопируйте. В лекции мы рассмотрим это подробнее.

19. Каким графическим редактором можно пользоваться для ОС Linux?

Для простого экспорта графики, самый лучший вариант для вас — воспользоваться либо Avocode, либо Zeplin. Если вам нужен редактор, то откройте в браузере Figma и импортируйте туда макет в формате Sketch.

20. Будут ли в курсе в каком нибудь видео показано как создавать логотипы самим?

Нет, у нас пока нет курсов для дизайнеров.

21. Насколько необходимо верстальщикам знать Adobe Illustrator или его аналоги?

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

Для большинства задач вам должно хватить возможностей Sketch или Figma.

22. В чём задавать отступы?

Как легко и правильно подбирать размеры\отступы элементов? В каких случаях лучше использовать px, а в каких %?

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

23. Photoshop говорит, что нет шрифтов

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

Об этом мы расскажем на лекции.

24. Как получить Avocode или Photoshop бесплатно?

есть ли вариант получить бесплатно фотошоп, а лучше авокод на время обучения?

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

25. Хватит ли Photoshop CS5 или нужен CC?

Достаточно ли сейчас для работы с графикой фотошопа cs5? Или обязательно стоит установить хотя бы пробную сс?

Мы рекомендуем использовать последние версии Photoshop для работы с макетами, с CS5 там появилось много возможностей для работы и экспорта графики, которые вам полезно будет попробовать и разобраться. Если установить пробную версию по какой-то причине не получится, используйте CS5 или попробуйте открыть макет в формате Sketch в Figma.

26. Участвует ли верстальщик в дизайне?

При разработке дизайна сайта, участвует ли в этом процессе верстальщик или frontend-разработчик на работе? Или он отвечает только за верстку макета?

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

Export PSD inside Zeplin or Extract

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

• Existing user? Sign In
• Sign Up

Browse

Activity

Affinity

• Create New.

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we’ll assume you’re okay to continue.

Как открыть PSD-файл без Photoshop: 11 программ и сервисов

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

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

1. GIMP

• Тип: редактор, конвертер.
• Платформы: Windows, macOS, Linux.

GIMP предназначен для обработки фотографий, дизайна и рисования. Хотя этот редактор уступает по количеству функций Photoshop, это тоже программа профессионального класса. Она позволяет работать со слоями и конвертировать PSD во множество популярных форматов, включая JPEG, PNG, GIF, PDF, WEBP и BMP.

2. Autodesk SketchBook

• Тип: редактор, конвертер.
• Платформы: Windows, macOS, Android, iOS.

Это кросс‑платформенное приложение заточено под рисование эскизов, но также сгодится для простого редактирования изображений. С помощью программы вы можете подкорректировать размер, стереть лишние элементы или нанести пометки. Autodesk SketchBook поддерживает слои. Открытый файл можно конвертировать в такие форматы, как JPEG, PNG и BMP. Приложение бесплатное, но только для некоммерческого использования.

3. Artweaver

• Тип: редактор, конвертер.
• Платформа: Windows.

Мощная программа для рисования, которую используют как любители, так и профи. Artweaver отображает слои, позволяет вырезать фрагменты, накладывать фильтры и рисовать поверх изображений кистями. Открытый PSD‑файл можно сохранять в BMP, JPEG, GIF, PNG и других форматах. Всё перечисленное доступно в бесплатной версии программы. Платная стоит 34 евро и предлагает больше возможностей для рисования.

4. Paint.NET

• Тип: редактор, конвертер.
• Платформа: Windows.

Относительно простой фоторедактор, который позволяет накладывать различные эффекты, корректировать цвета, вырезать фрагменты, менять размер и рисовать поверх изображений. По умолчанию Paint.NET не читает PSD. Но вы можете установить бесплатный плагин, который добавит в программу поддержку формата. После этого вы сможете редактировать PSD‑файлы и сохранять результат в JPEG, PNG, GIF, WEBP, BMP и не только.

Чтобы установить PSD‑плагин, действуйте так:

• Скачайте и инсталлируйте Paint.NET.
• Скачайте плагин и разархивируйте его.
• Закройте Paint.NET, если он запущен.
• Перейдите в папку, в которую вы установили программу, и откройте в ней каталог FileTypes.
• Скопируйте сюда содержимое архива.

5. Photopea

• Тип: редактор, конвертер.
• Платформа: веб.

Главное преимущество этого инструмента в том, что вам ничего не надо устанавливать. Просто заходите на сайт Photopea, загружаете PSD‑файл и можете работать. Интерфейс очень похож на Photoshop и предлагает массу инструментов для ретуши, дизайна и рисования. Открытый файл можно конвертировать во множество популярных форматов — от JPEG до PDF.

Сервис бесплатный, но отображает рекламу. За 9 долларов в месяц можно отключить объявления и расширить лимит истории изменений с 30 до 60 действий.

6. XnView MP

• Тип: просмотрщик, редактор, конвертер.
• Платформы: Windows, macOS, Linux.

Мощный кросс‑платформенный просмотрщик, который читает больше 500 форматов изображений, среди которых есть и PSD. Программа также поддерживает некоторые функции редактора: вы можете корректировать цвета, накладывать эффекты, вырезать участки и менять размер снимков. И наконец, XnView MP позволяет конвертировать PSD во все популярные форматы изображений. А вот слои программа не распознаёт.

7. FastStone Image Viewer

• Тип: просмотрщик, редактор, конвертер.
• Платформа: Windows.

FSIV позволяет просматривать PSD и выполнять базовые операции во встроенном редакторе — от цветокоррекции до изменения размера. Но только над всем изображением в целом, а не отдельными слоями. Документы можно конвертировать в 20 различных форматов, включая JPG, PNG и GIF.

8. IrfanView

• Тип: просмотрщик, конвертер
• Платформа: Windows.

Ещё один всеядный просмотрщик, который читает в том числе PSD. Редактировать слои в IrfanView нельзя, зато программа позволяет конвертировать PSD‑файлы в JPEG, PNG, GIF, WEBP, BMP и прочие форматы. Другой плюс IrfanView — высокая скорость работы даже на слабых ПК.

9. PSD Viewer

• Тип: просмотрщик, конвертер.
• Платформы: веб, Windows.

PSD Viewer — это простой сервис для просмотра и конвертации PSD онлайн. Открытый документ можно преобразовать в JPEG, PNG, GIF, BMP и TIFF прямо в браузере. Кроме того, у PSD Viewer есть приложение для Windows, но программа работает только как просмотрщик.

10. «Фото» от Apple

• Тип: просмотрщик, редактор, конвертер.
• Платформа: iOS.

Стандартное iOS‑приложение «Фото» позволяет открывать PSD без дополнительных программ. С его помощью также можно корректировать цвета, накладывать фильтры и конвертировать документ в формат JPG.

11. Google Drive

• Тип: просмотрщик.
• Платформы: веб, Android, iOS.

В качестве простого просмотрщика PSD‑файлов можно использовать Google Drive. Загрузите документ в облако — и сможете просмотреть его на сайте или в приложениях сервиса.