Чем открыть psd для верстки

Обновлено: 04.07.2024

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

Если же у вас нет Photoshop или Adobe Illustrator, то возникают, чаще всего, возникают сложности, если только вы не установите эти программы. Давайте рассмотрим, какие есть аналоги для облегчения работы верстальщика.

Avocode

Один из лучших редакторов в настоящее время, так как в нее можно импортировать файлы с расширениями .psd, .ai, .sketch, .xd, а также иные разрешения (figma), что делает этот редактор универсальным.

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

Avocode настраивается под любые критерии и типы разработки (веб и мобильные приложения). Можно даже подключить библиотеки Compass или Bourbon, если выбрать стил кода Sass.

InVision

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

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

Zeplin

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

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

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

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

Figma

Приложение можно назвать, как "смотри и делай", простой и понятный дизайн.

В Figma можно настроить права: от этого будет зависеть, можете ли вы менять что-то в макете или нет. Обычно разработчик получает права "read-only", чтобы смотреть шрифт, макет, цвета, размеры, отступы.

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

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

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

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

0. Photoshop

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

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

1. Avocode

Сервис поддерживает форматы 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-макеты здесь поддерживаются в лучшем виде. Кроме того, программа распознаёт взаимосвязи между объектами и автоматически вносит правки по мере изменения проектов.

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

10. GIMP

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

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

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

Перечисленные ниже программы и сервисы не претендуют на звание полноценной замены 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

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

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

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

Ещё один всеядный просмотрщик, который читает в том числе 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

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

Нужно что-то в чем можно открыть PSD корректно и разобрать для верстки. За фотошоп 120 баксов в год платить не хочется (вообще не хочу регулярно платить), демка не вечная, ищу альтернативы. Photoshop Elements ? Какие-то более специализированные решения еще?

Сам в фотошопе не рисую, нужно на Mac для верстки веб-страниц. В идеале - из AppStore вообще, чтоб Family Share и пр, но не принципиально.

Оценить 1 комментарий

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

Недавно в Brackets (Adobe) появилась возможность открывать PSD. Безумно рады этой новой фиче в студии.
Для открытия нужно залогиниться в свой CreativeCloud и загрузить туда .psd. А дальше всё очень просто.

P.S. Это бесплатно!

Да, видел такое, но пока не разобрался как его интегрировать с FTP, чтоб работало как Coda 2.

Lici: В Brackets есть встроенный «магазин» с расширениями. Там есть куча модификаций для создания FTP-клиента внутри среды. Попробуйте.

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

Вот такая вот штука была, серьезно с ней не знаком, но базовые макеты разобрала на раз два.

Хорошо помогает в работе, но к сожалению Ph до конца не заменяет. Не всягда точно определяет показатели, слои и т.д. 120$ в год жалко . При условии сколько вы на нем бабла зарабатываете.
Скажите, а вы презервативы тоже стираете и повторно используете?
А так по теме - Brackets.

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

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

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

Вывод:
1) Вне зависимости от того что вы используете - бидон, ведро, бутылку, вы в профите с продажи простокваши.
2) В отличии от реального мира, в виртуальном на*ть производителя ведер гораздо проще.

1. Photoshop

2. Avocode

3. Zeplin

4. Marsy

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

5. Sympli

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

6. PSDETCH

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

7. InVision

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

8. Рhotopea

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

9. Adobe XD

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

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

11. GIMP

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

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

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