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. Мы загрузим этот макет на сервис psdetch.com.

Версии PSDETCH

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

PSDETCH  V2

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

Можно также кликнуть на большой стрелке вниз или рядом с ней и показать путь к вашему PSD-макету.

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

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

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

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

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

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

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

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

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

PSDETCH  V3

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

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

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

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

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

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

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

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

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

Резюме

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