11 сервисов, чтобы изучить PSD-макет для вёрстки сайта
Хороший сайт — это результат совместных усилий команды специалистов. Сначала дизайнер создаёт макет, представлен внешний вид будущей страницы. Затем разработчик переводит его в код, который будет понятен браузеру. Чтобы не вышло очередного «ожидание – реальность» и дизайнер с программистом не возненавидели друг друга, макет должен быть понятным, а информация о его элементах — легко извлекаться.
Сейчас существуют разные программы, в том числе онлайн-платформы для совместной разработки, которые помогают членам команды лучше понимать друг друга. Но многие дизайнеры-староверы продолжают работать исключительно в Photoshop (и их можно понять). Мы выяснили, что разработчики рекомендуют друг другу для работы с макетами в формате PSD, и собрали десять классных платных и неплохих бесплатных вариантов. Это не рейтинг, так что позиция значения не имеет.
1. Photoshop
Стоимость: самый дешёвый вариант подписки обойдётся чуть дороже 700 рублей в месяц, самый дорогой — почти в 2 800.
Это пункт номер ноль, потому что совсем не упомянуть Photoshop нельзя. Где ещё открывать макет, если не в программе, в которой он обычно создаётся. Можно быть уверенным, что всё отобразится корректно, именно так, как задумывал дизайнер. Правда, вы можете не хотеть платить за Photoshop и выбрать что-то или более доступное, или за эти же деньги, но с более широким набором функций под ваши задачи.
2. Avocode
Стоимость: 12 долларов в месяц, если подписаться в одиночку, по 29 долларов на человека для команды. Годовая подписка даёт скидку в 25%. Есть двухнедельный пробный период.
Сервис поддерживает форматы Photoshop, Sketch, Adobe XD и Illustrator без плагинов, частично интегрируется с Figma. Он превратит макет в спецификацию с отдельными изображениями и CSS-стилями, позволит быстро получить информацию об иконках, изображениях и других элементах дизайна. Интерфейс очень похож на Photoshop, что может быть удобно. Avocode используется для мобильных и веб-приложений.
3. Zeplin
У сервиса есть десктопная и браузерная версии. Zeplin похож на Avocode, не случайно последний на своём сайте даже объясняет, в чём их преимущества по сравнению с Zeplin. Так что стоит воспользоваться пробным периодом, чтобы сравнить их самостоятельно и выбрать, что больше подходит именно вам. Главное различие: в Zeplin открыть PSD-макет сразу не получится, нужно провести некоторые манипуляции. Инструкция для этого есть на их сайте.
4. Marsy
Стоимость: бесплатно; создателю можно задонатить в благодарность.
Marsy работает в браузере и помогает получить всю важную информацию о макете: стили, расстояния, шрифты, цвета и так далее. Поддерживается пакетное скачивание изображений.
5. Sympli
Стоимость: бесплатно для начинающих без команды и не больше 10 долларов в месяц на самом дорогом тарифе.
Это платформа для совместной работы, которая позволяет работать с макетами Photoshop. Впрочем, на бесплатном одиночном тарифе вопрос командного взаимодействия снимается сам собой. При этом у Sympli есть плагины к Android Studio и Xcode, что ускоряет перевод макета в код.
6. PSDETCH
Стоимость: бесплатно.
Неплохой и доступный инструмент для экспорта изображений и текста из PSD-макетов, для определения расстояний между элементами и других подобных манипуляций. Работает онлайн.
7. InVision
Это сервис для быстрого преобразования дизайнов в макеты, в том числе для совместной работы. Картинки для скачивания сгруппированы в одном месте. Однако интерфейс несколько перегружен, что может вызвать неудобства.
8. Рhotopea
Стоимость: бесплатно.
Онлайн-альтернатива Photoshop. В отличие от последнего, Рhotopea можно запускать на более слабом оборудовании. Сетевое подключение нужно для загрузки среды, редактирование происходит с использованием ресурсов компьютера. Позволяет сразу видеть CSS-код объекта и в целом может быть неплохим подспорьем в работе.
9. Adobe XD
Стоимость: бесплатно для ограниченного стартового плана, от 644 рублей в месяц за полноценную версию.
По названию производителя очевидно, что PSD-макеты здесь поддерживаются в лучшем виде. Кроме того, программа распознаёт взаимосвязи между объектами и автоматически вносит правки по мере изменения проектов.
10. Paint.NET
Стоимость: бесплатно.
Иногда этот сервис приводят как альтернативу штатному Paint от Microsoft. Это не совсем одно и то же. Хотя бы потому что при схожести стартового набора функций возможности Paint.NET можно расширять с помощью плагинов практически безгранично — в рамках разумного, разумеется. Это вариант из серии «почему бы и нет», а не «конечно, да!», но не упомянуть его нельзя.
11. GIMP
Стоимость: бесплатно.
Программа, которая поддерживает множество форматов, в том числе PSD. Причём пользоваться ею можно абсолютно безвозмездно. Рассмотрите как вариант, если хотите сэкономить.
О публикации
Дата публикации: 10 декабря 2020
Дата обновления: 21 декабря 2020
Автор: Наталья Копылова
Статистика: 1437 просмотров
Другие публикации по теме
Чем хороший UX-дизайн отличается от плохого
Что делает UX-дизайн эффективным, а что нет — разбираем на примерах
Дизайн 10 месяцев назад
Что такое MVP и зачем его делать
Рассказываем на примерах о minimum viable product и том, как его создают
Дизайн 8 месяцев назад
Типографика
в графическом дизайне
Фундаментальные знания, которые требуются для работы с текстом.
Дизайн 1 год назад
Комплексный интернет-маркетинг для вашего бизнеса
Телефон горячей линии
О нас
Более 10 лет опыта, проекты федерального и международного уровня, полная автоматизация компаний и решения под ключ.
Популярные услуги
Компания
Контакты
По вопросам и предложениям: info@bidus.ru
Телефон в Екатеринбурге: +7 (343) 373-10-00
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
У сервиса есть десктопная и браузерная версии. Zeplin похож на Avocode, не случайно последний на своём сайте даже объясняет, в чём их преимущества по сравнению с Zeplin. Так что стоит воспользоваться пробным периодом, чтобы сравнить их самостоятельно и выбрать, что больше подходит именно вам. Главное различие: в Zeplin открыть PSD-макет сразу не получится, нужно провести некоторые манипуляции. Инструкция для этого есть на их сайте.
3. Marsy
Стоимость: бесплатно; создателю можно задонатить в благодарность.
Marsy работает в браузере и помогает получить всю важную информацию о макете: стили, расстояния, шрифты, цвета и так далее. Поддерживается пакетное скачивание изображений.
4. Sympli
Стоимость: бесплатно для начинающих без команды и не больше 10 долларов в месяц на самом дорогом тарифе.
Это платформа для совместной работы, которая позволяет работать с макетами Photoshop. Впрочем, на бесплатном одиночном тарифе вопрос командного взаимодействия снимается сам собой. При этом у Sympli есть плагины к Android Studio и Xcode, что ускоряет перевод макета в код.
5. PSDETCH
Стоимость: бесплатно.
Неплохой и доступный инструмент для экспорта изображений и текста из PSD-макетов, для определения расстояний между элементами и других подобных манипуляций. Работает онлайн.
6. InVision
Это сервис для быстрого преобразования дизайнов в макеты, в том числе для совместной работы. Картинки для скачивания сгруппированы в одном месте. Однако интерфейс несколько перегружен, что может вызвать неудобства.
7. Рhotopea
Стоимость: бесплатно.
Онлайн-альтернатива Photoshop. В отличие от последнего, Рhotopea можно запускать на более слабом оборудовании. Сетевое подключение нужно для загрузки среды, редактирование происходит с использованием ресурсов компьютера. Позволяет сразу видеть CSS-код объекта и в целом может быть неплохим подспорьем в работе.
8. Adobe XD
Стоимость: бесплатно для ограниченного стартового плана, от 644 рублей в месяц за полноценную версию.
По названию производителя очевидно, что PSD-макеты здесь поддерживаются в лучшем виде. Кроме того, программа распознаёт взаимосвязи между объектами и автоматически вносит правки по мере изменения проектов.
9. Paint.NET
Стоимость: бесплатно.
Иногда этот сервис приводят как альтернативу штатному Paint от Microsoft. Это не совсем одно и то же. Хотя бы потому что при схожести стартового набора функций возможности Paint.NET можно расширять с помощью плагинов практически безгранично — в рамках разумного, разумеется. Это вариант из серии «почему бы и нет», а не «конечно, да!», но не упомянуть его нельзя.
10. GIMP
Стоимость: бесплатно.
Если вы работаете с PSD-макетами, поделитесь в комментариях, какие программы используете, чтобы выудить максимум информации. Хотите научиться создавать сайты? Приходите учиться на факультет веб-дизайна или веб-разработки в GeekUniversity!
Хороший сайт — это результат совместных усилий команды специалистов. Сначала дизайнер создаёт макет, представлен внешний вид будущей страницы. Затем разработчик переводит его в код, который будет понятен браузеру. Чтобы не вышло очередного «ожидание – реальность» и дизайнер с программистом не возненавидели друг друга, макет должен быть понятным, а информация о его элементах — легко извлекаться.
Сейчас существуют разные программы, в том числе онлайн-платформы для совместной разработки, которые помогают членам команды лучше понимать друг друга. Но многие дизайнеры-староверы продолжают работать исключительно в 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
У сервиса есть десктопная и браузерная версии. Zeplin похож на Avocode, не случайно последний на своём сайте даже объясняет, в чём их преимущества по сравнению с Zeplin. Так что стоит воспользоваться пробным периодом, чтобы сравнить их самостоятельно и выбрать, что больше подходит именно вам. Главное различие: в Zeplin открыть PSD-макет сразу не получится, нужно провести некоторые манипуляции. Инструкция для этого есть на их сайте.
3. Marsy
Стоимость: бесплатно; создателю можно задонатить в благодарность.
Marsy работает в браузере и помогает получить всю важную информацию о макете: стили, расстояния, шрифты, цвета и так далее. Поддерживается пакетное скачивание изображений.
4. Sympli
Стоимость: бесплатно для начинающих без команды и не больше 10 долларов в месяц на самом дорогом тарифе.
Это платформа для совместной работы, которая позволяет работать с макетами Photoshop. Впрочем, на бесплатном одиночном тарифе вопрос командного взаимодействия снимается сам собой. При этом у Sympli есть плагины к Android Studio и Xcode, что ускоряет перевод макета в код.
5. PSDETCH
Стоимость: бесплатно.
Неплохой и доступный инструмент для экспорта изображений и текста из PSD-макетов, для определения расстояний между элементами и других подобных манипуляций. Работает онлайн.
6. InVision
Это сервис для быстрого преобразования дизайнов в макеты, в том числе для совместной работы. Картинки для скачивания сгруппированы в одном месте. Однако интерфейс несколько перегружен, что может вызвать неудобства.
7. Рhotopea
Стоимость: бесплатно.
Онлайн-альтернатива Photoshop. В отличие от последнего, Рhotopea можно запускать на более слабом оборудовании. Сетевое подключение нужно для загрузки среды, редактирование происходит с использованием ресурсов компьютера. Позволяет сразу видеть CSS-код объекта и в целом может быть неплохим подспорьем в работе.
8. Adobe XD
Стоимость: бесплатно для ограниченного стартового плана, от 644 рублей в месяц за полноценную версию.
По названию производителя очевидно, что PSD-макеты здесь поддерживаются в лучшем виде. Кроме того, программа распознаёт взаимосвязи между объектами и автоматически вносит правки по мере изменения проектов.
9. Paint.NET
Стоимость: бесплатно.
Иногда этот сервис приводят как альтернативу штатному Paint от Microsoft. Это не совсем одно и то же. Хотя бы потому что при схожести стартового набора функций возможности Paint.NET можно расширять с помощью плагинов практически безгранично — в рамках разумного, разумеется. Это вариант из серии «почему бы и нет», а не «конечно, да!», но не упомянуть его нельзя.
10. GIMP
Стоимость: бесплатно.
Если вы работаете с PSD-макетами, поделитесь в комментариях, какие программы используете, чтобы выудить максимум информации. Хотите научиться создавать сайты? Приходите учиться на факультет веб-дизайна или веб-разработки в GeekUniversity!
5 сервисов для редактирования psd без Photoshop
Полноценно работать с файлами PSD можно только в Photoshop. Но есть несколько бесплатных программ, которые могут открыть PSD-файлы и даже слои.
Все программы в подборке бесплатны. С функциональностью Photoshop они, конечно, не сравнятся, но с простыми задачами справятся. Как минимум вы сможете просто открыть PSD-файл как изображение, а некоторые из этих программ открывают даже слои. Так что, как говорил Гагарин (кстати скоро день космонавтики) — ПОЕХАЛИ!
1. Paint.NET
Paint.NET лучше стандартного Microsoft Paint, но такой же максимально понятный и простой в использовании. Если не знаете, что делать с файлом в GIMP, открывайте Paint.NET.
Программа читает PSD, но только после установки соответствующего плагина. Для этого:
Paint.NET умеет читать слои в PSD-документах, но не дублирует все функции Photoshop, потому обработка изображений несколько ограничена. Но всеже некоторым будет достаточно доступных функций.
2. IrfanView
Программа IrfanView предназначена для просмотра и конвертирования графических файлов. Но IrfanView поддерживает меньше форматов. Программа открывает PSD как картинку. Редактировать слои нельзя, но обычное изображение можно. Чтобы получить больше возможностей для обработки, PSD-файл сначала нужно конвертировать в другой формат.
IrfanView быстро работает и мало весит (установочные файлы занимают чуть больше 3 МБ).
3. GIMP
Это один из самых интересных бесплатных аналогов Photoshop. GIMP читает файлы PSD без установки дополнительных плагинов, поэтому открыть файл можно так же, как и обычные изображения: File → Open.
GIMP открывает слои PSD-документа для редактирования. Но тут есть свои подводные камни: программа читает далеко не все слои, некоторые требуется растрировать. А ещё GIMP может некорректно сохранить изменения в PSD. После этого файл может не открыться в Photoshop. Последнее не должно вас беспокоить, если вы открыли файл для незначительных правок и сохранения картинки в JPEG. Но в любом случае программа достойная, так что пользуйтесь!
4. XnView
XnView — программа как и IrfanView, своеобразный графический органайзер, в котором можно открыть и упорядочить коллекции изображений на вашем ПК. В XnView есть примитивные функции редактирования: можно изменить цветовую палитру, добавить фильтр или эффект.
Программа непопулярна, а зря: она способна открыть изображения в более чем 500 форматах и пересохранить их в ещё 70. Так что установите её в качестве примитивного редактора для PSD или конвертера.
В базовой версии поддерживаются только английский, французский и немецкий языки. Вобщем юзайте кому интересно.
5. Photopea
Photopea — онлайн-сервис, интерфейс которого напоминает Photoshop или GIMP. Его преимущество — не нужно ничего устанавливать. Программа откроется в браузере на любом устройстве. Но онлайн-приложения зачастую не такие практичные, как устанавливаемые программы. Photopea не исключение, но зато позволяет работать со слоями в PSD-документе.
Online Photoshop — это онлайн сервис. Он не умеет открывать файлы PSD но… это отличная альтернатива фотошопу для редактирования ваших изображений прямо в браузере.
Не мог оставить данный сервис без внимания, так как в любом случае он полезен. Сервис бесплатный. Открываете его, загружаете изображение и редактируете его. С «полной функциональностью» Adobe Photoshop конечно не сравнить, но все же.
На этом у меня всё! Кому было полезно — поделитесь ссылкой на этот пост со своими друзьями. Спасибо что дочитали до конца.
