Вы здесь: Главная » Web Design » Photoshop » studio.psdetch.com как альтернатива Photoshop для верстальщика

studio.psdetch.com как альтернатива Photoshop для верстальщика

Adobe Photoshop пока еще является очень популярной программой для создания web-макетов, хотя ему уже очень уверенно наступают на пятки Sketch для MacOS, Affinity Designer и онлайн-сервис Figma. Кроме того, набирает обороты популярности программа-конкурент Photoshop от самой компании Adobe - Adobe XD (Adobe Experience Design), которая позволяет создавать не только веб-макеты, но и векторную графику, а также небольшие активные прототипы, поэтому в ближайшем будущем возможен полный переход на XD из Photoshop для тех, кто любит и знает продукты от Adobe.

Тем не менее макетов для web-страниц, созданных в Photoshop (PSD-макеты) еще очень много. Плюсом их использования, особенно для начинающих верстальщиков, является возможность бесплатного скачивания. В этой статье, например, мы будем использовать бесплатный шаблон  Tanatos Template от Symu.co. Он не нов, но содержит ряд моментов, используемых дизайнерами, которые необходимо учитывать при верстке, вроде масок обрезки (Clipping Mask) или векторных слоев. Вы можете подобрать другие макеты для тестов, воспользовавшись ссылками в соответствующей статье.

Здесь мы не рассматриваем способы работы с этим макетом в Photoshop. Предположим, на вашей машине вообще нет этой программы, потому как лицензия на нее стоит очень приличных денег, а вам Photoshop не настолько нужен. Тем не менее есть макет, и он прислан/скачан в формате PSD. Мы загрузим этот макет на сервис studio.psdetch.com.

Версии PSDETCH

На данный момент доступны 2 версии: более старая V2, для которой есть документация,  и новая V3(Beta), которую разработчик, видимо, еще будет дорабатывать некоторое время.

Стартовый экран studio.psdetch.com

PSDETCH  V2

Остановимся пока на более старой версии, т.е. на V2. Для того, чтобы начать с ней работу, необходимо нажать на кнопку Start или на кнопку "+" рядом с логотипом PSDETCH и просто перетащить PSD-файл в окно браузера. Загрузить вы можете не только PSD-файлы, но и файлы изображений различных форматов – JPG, JPEG, PNG, а также файлы в формате PDF.

Старт с PSDETCH V2
Можно также кликнуть на большой стрелке вниз или рядом с ней и показать путь к вашему PSD-макету.
Загрузка файла на psdetch
Вы увидите свой макет, причем со всеми слоями, которые находятся слева. Правда, есть и недостатки - если у вас будет лишний рекламный слой, как в нашем шаблоне, то без редактирования шаблона в Photoshop вам не обойтись, т.к. он закрывает видимость всех остальных слоев и элементов, которые будут нужны для верстки html-страницы по этому макету. Можно, конечно, выделять слои, но это сложнее, особенно, если вы не видели макет в JPG или PNG, например.

Слой с рекламой

Можно выделять либо слои, либо какие-либо объекты и использовать PSDETCH для вывода изображений или получения информации о цветах или расстояниях между объектами. Справа в панели Extract будут доступны опции экспорта, подобные тем, что вы видели в Photoshop.

Слои и объекты в psdetch-v2

Вы можете легко скопировать текст кликом по кнопке Copy Text в палитре Extract. Рядом с ней во вкладке Info можно посмотреть информацию о слое (текстовый он, векторный или rasterized - растровая картинка).

Слева внизу вы найдете инструменты, подобные тем, что есть в Photoshop, причем часть быстрых клавиш совпадает с аналогичными в Photoshop (H –для перемещения, V – для выделения). Выбранный вами в данный момент инструмент отображается в самом низу (Current Tool).

Плюсы PSDETCH Studio как онлайн-инструмента:

  1. Это бесплатный (!!!) онлайн-сервис, т.е. вы не заплатите за любое количество файлов при его использовании, и никакой подписки оформлять не надо. Даже регистрация не нужна. Спасибо разработчику :).
  2. Быстрый доступ к элементам макета с любого компьютера с установленным в нем браузером из любой точки мира, в которой есть интернет.
  3. Настройки экспорта psdetch v2Быстрый экспорт выделенных элементов в форматы PNG, JPG, в том числе и с масштабированием под ретина-экраны, а векторных слоев – и в SVG.
    формат SVG из векторных слоев в psdetch-v2
  4. Визуальное определение размеров при использовании инструмента Measure & Extract Tool (клавиша V).Measure Tool - Инструмент выделения и измерения размеров
  5. Возможность скопировать текст кликом на кнопке Copy Text без дополнительных выделений.
  6. Возможность скопировать css-код для текстовых элементов.
  7. Простое определение цвета с копированием его значения при клике на нужном элементе.Определение цвета в psdetch-v2
  8. Экспорт изображений в заданном дизайнером размере при использовании масок обрезки для слояЭкспорт изображений о слоев с маской обрезки
    В Photoshop эти изображения в реальности больше. Маска обрезки скрывает часть изображения:
    Маска обрезки в Photoshop
  9. Возможность получить исходную фотографию, без наложенных на нее эффектов и корректирующих слоев.исходное фото без эффектов в psdetch v2
  10. Возможность настроить маску обрезки, используя разные слои. На скриншоте показано, как обрезать фото по размеру, заданному дизайнером в макете, используя настройку Crop (Mask) в панели Extract, выделяя разные слои.Маска обрезки в psdetch-v-2

Минусы использования studio.psdetch.com

  1. Нельзя сохранить векторные смарт-объекты в формате SVG, т.к. нет возможности их редактировать. Вы можете сохранить их только в формате PNG, хотя это далеко не всегда удобно.Векторные смарт-объекты
    Следует отметить, что, если в Photoshop есть иконки в векторном формате, встроенные не как смарт-объекты, а как вектора, вы сможете сохранить их в формате SVG. Однако очень маловероятно, что дизайнер именно так будет их встраивать.
  2. Нельзя использовать смарт-объекты для увеличения размера изображения для ретина-экранов, т.к. их размеры определяются только в psd-документе. Размер смарт-объектов совпадает с маской обрезки
    Реальный размер этой фотографии  в Photoshop  1920x1280px,если сделать двойной клик на смарт-объекте  в соответствующем  слое.
    Размер смарт-объекта в Photoshop
  3. Есть сложности с сохранением фоновых изображений, если они состоят из нескольких слоев, а вы хотите их объединить в один. На скриншоте показано изображение без наложенного темного полупрозрачного слоя. Такой вариант вполне может использоваться в верстке, если отдельным элементом на html-страницы создается overlay-слой с такими же размерами, как и фон, но с полупрозрачной заливкой.Фоновый слой с картинкой
    Если вы выделяете векторный полупрозрачный слой со сплошной заливкой, то видите только его:Полупрозрачный overlay
  4. Нельзя выделить сразу несколько слоев. Вместо этого нужно выделить один слой (элемент) и навести курсор мыши на другой, чтобы увидеть его размеры и расстояние до выделенного элемента.Расстояния между 2 объектами psdetch-v2
  5. Неверно определяются расстояния между элементами, если в слоях с изображениями были использованы маски. На скриншоте красным показаны области, не учтенные при указании расстояния до текста.Расстояния между объектами при использовании маски обрезки
  6. Не всегда верно определяются размеры элементов. Например, для кнопки с обводкой сервис psdetch определяет размеры на 3px больше, чем они сделаны в Photoshop. Размеры элементов в PSDETCH и в Photoshop

При всех своих минусах, это очень удобный инструмент для верстальщика при том, что он бесплатен, особенно, когда под рукой нет Adobe Photoshop и Adobe Illustrator, или их цена пока недоступна.

PSDETCH  V3

В 3-й версии PSDETCH помимо PSD-файла можно загружать не только файлы картинок, но и SVG. Этот формат удобен для тех, кто работает с дизайн-макетами из программы Sketch. Необходимо sketch-файл конвертировать в SVG-формат - и можно загружать в Studio PSDETCH.

Старт с PSDETCH V3В 3-й версии вы не увидите слоев, поэтому, если у вас в макете есть слой с рекламой, как в нашем случае, его придется удалить в Photoshop, а потом уже загружать в PSDETCH STUDIO V3.

Копирование текста при клике на нем в PSDETCH V3Как и во 2-й версии, в PSDETCH V3 удобно выделять и копировать текстовые слои. При выделении справа в палитре Layer Info вы видите свойства слоя: его ширину, высоту и отступы сверху и слева. В этой палитре удобно скопировать текст просто по клику на самом тексте. Вы увидите всплывающую подсказку "Copied" - и можете вставлять скопированный текст в свой текстовый редактор.

Свойства текстового слоя в psdetch v3

Цвет можно получить как от одного, так и от нескольких объектов:

Цвета в psdetch-v3

Хорошей новостью является то, что векторные смарт-объекты теперь можно сохранять в SVG-формате.
Векторный смарт-объект в формат svg из psdetch v3

Лучше стали определяться отступы от маски обрезки, хотя ее размер несколько отличается от того, который есть в Photoshop. Сравните с аналогичными размерами в PSDETCH V2.

маски обрезки psdetch-v3

Несколько хуже стало с фотографией, спрятанной под маской обрезки. Теперь мы не видим картинки, и соответственно, не можем экспортировать фото из-под маски, т.к. нам доступна только маска. А она, как правило, является векторным объектом одного цвета, поэтому сама по себе не слишком интересна. Поскольку в V3 нет пока слоев, поэтому выделить нужный слой с фото мы не можем.

Маска обрезки для экспорта в psdetch-v3

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

Кстати, в обеих версиях вы можете масштабировать свой макет так, как вам удобно:

Масштабирование в psdetch

Резюме

На данный момент STUDIO PSDETCH является очень хорошим инструментом для онлайн-экспорта изображений и текста из PSD-макетов, а также для определения расстояний между объектами. Им можно пользоваться и во 2-й, и в 3-й версии, выбирая те опции, которые больше всего подходят для ваших целей из каждой версии. Наверняка, разработчик планирует еще доработку 3-й версии, поэтому в скором времени она может стать основной.

2 комментария

  1. Спасибо за то что так наглядно познакомили с таким прекрасным инструментом!
    Признаюсь, знал что такое должно быть, но вот как-то не встречалось. Давно ли была альтернатива открывать PSD файлы не фотошопом?

    При гуглежке я встречал инструмент Экспорта для Дримвивер, который опять же - Адобовский.

    • Кроме PSDETCH был еще Adobe-ский инструмент для экспорта картинок и измерения расстояний, который назывался Adobe Assets. Для доступа к нему требовался только Adobe ID. Но с апреля или мая этого года его поддержка прекращена.
      Еще раньше прекратили его поддержку для текстового редактора Brackets.
      Так что PSDETCH может стать очень востребованным для открытия и работы с PSD файлами.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *