Как сделать нарезку изображений из PSD макета

Сервис автоматической верстки сайтов дополнен новым (бесплатным!) сервисом по нарезке графики из макета Photoshop. В связи с этим, расскажем, что стоит учитывать при нарезке картинок из дизайн макета Photoshop и почему эта задача не такая тривиальная, как может показаться на первый взгляд.

Что надо иметь ввиду при нарезке графики из PSD файла

  1. Для начала, требуется выбрать уровень качества экспортируемой графики. Должна иметься возможность как задать уровень качества по-умолчанию, так и переопределить его для конкретных слоев макета.
  2. Должна быть возможность выбрать, какие из изображений требуется извлечь из PSD шаблона в JPG формате. Естественно, те слои, которые не содержат в себе прозрачных пикселей, автоматически извлекаются в JPG формате. Но слои с прозрачностью по-умолчанию извлекаются в PNG формате. При желании, можно пометить любой слой тегом #jpg и он будет нарезан в формате JPEG.
  3. Графика должна быть максимально оптимизирована для WEB. В частности, должно производиться автоматическое сжатие PNG изображений, как без потери качества (lossless), так и с потерей качества (lossy) — так называемая квантизация PNG изображений в 8-битный формат. Это требуется для уменьшения размеров графики и улучшения показателей SEO. Оба вида сжатия рекомендованы сервисом Google Pagespeed.
    JPEG графика также должна быть оптимизирована.
  4. Тексты со стандартными шрифтами (в том числе, Google Fonts) и примененными стилями, для которых есть соответствующие стили в CSS3, должны быть сверстаны как текст. Остальные тексты должны быть сверстаны как изображения.
  5. Слои, которые возможно сверстать, как CSS3 код, не должны быть экспортированы. Он должны быть заменены CSS кодом.
  6. Ширина и высота изображений должна быть минимальной, т.е. у нарезанных изображений не должно остаться пустых прозрачных полей по краям.
  7. Надо учесть, что могут использоваться режимы смешения слоев, отличные от ‘normal’. В таком случае нельзя извлечь слой сам по себе, а требуется учитывать влияние слоев, находящихся под экспортируемым слоем.
  8. Эффекты слоев должны быть применены к изображениям.
  9. Эффекты, примененные к группам слоев, должны быть применены к каждому изображению внутри группы.
  10. Иногда требуется экспортировать целую группу слоев как одно изображение (например, логотип). Если пометить такую группу слоев тегом #merge, то это будет сделано сервисом автоматически.
  11. Экспорт должен работать достаточно быстро, т.е. занимать минуты, а не часы.

Автоматическая быстрая нарезка изображений из макета Photoshop

Все вышеупомянутые требования учтены в сервисе автоматической нарезки PSD макетов. Вам остается просто загрузить макет, подождать около минуты и скачать результат. Это абсолютно бесплатно.

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

Для ускорения процесса верстки сайта вы также можете воспользоваться сервисом автоматической верстки PSD макетов.

Share

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

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