Создание CSS-спрайтов из Photoshop

14

У меня есть PSD с веб-дизайном.
Каждый раз, когда я настраиваю дизайн, мне нужно вручную копировать разные части изображения с разными уровнями видимости (для прозрачности) в спрайты CSS.

Сколько это можно автоматизировать?

adobe-photoshop export css sprite SLaks
источник
Я ценю, что вы хотите оставить вопрос общим, но пример, вероятно, будет полезен. Видимости слоя уже установлены, или вам нужно изменить их индивидуально перед экспортом?
Пекка
@Pekka: разные порции нуждаются в разной видимости. Например, фон сайта экспортируется видимым, а фон контента экспортируется с глобальным фоном невидимым. (для прозрачной тени)
SLaks
Понимаю. Так что это определенно требует пакетной обработки. Интересно посмотреть, что подходит! ...
Пекка

Ответы:

9

Я однажды использовал скрипт автоматического фотошопа и работал хорошо.

Концепция заключается в следующем:

  • Каждая часть - это другое изображение.
  • Каждая часть (и, следовательно, каждое изображение) должна находиться в одной папке без каких-либо других изображений.
  • Запустите скрипт с указанием папки и некоторых параметров (размер, имя CSS и т. Д.).

  • Скрипт делает:

    1. Объедините все изображения в один с указанным вами размером.
    2. Сгенерируйте файл CSS

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

Примечания :

Я попробовал это с несколькими файлами и работал отлично. Затем я попробовал примерно 600 снимков, а затем вам понадобится процессор и хорошее терпение;) В этом случае не используйте его.

Shikiryu
источник
1

Не будет ли использование ломтиков + запуск Движения, которое начинает выделение выделения (с привязкой к ломтикам и границам документа) всех ваших ломтиков один за другим, но обрезка до выделения каждый раз и сохранение как png, ctrl alt z отменяет, пока не обрезается, выбирая каждый сектор, обрезая и т. д., пока не закончите со всеми секторами, затем остановите действие. В середине вы можете скрыть / показать любой слой, так как он всегда один и тот же файл, поэтому не должно быть конфликтов ... Таким образом, вы будете загружать действие поверх измененного psd каждый раз. Единственное, о чем я могу думать, это то, что вам действительно нужно изменить границы срезов. Или что ... я не правильно тебя понял ...

Редактировать: если нет необходимости в нарезке, то макрос (действие), который включает в себя только скрытие или отображение слоев в нужном вам порядке после всех настроек. Как я уже сказал, я не понимаю ...

S.gfx
источник
Хотя ваш первый абзац кажется довольно запутанным и, тем не менее, он, кажется, добавляет больше в рабочий процесс, чем автоматизирует его; Я мог бы видеть, куда вы направляетесь с действием скрытия / показа слоев, хотя я бы использовал срезы с ним.
Яри ​​Кейнянен
Спасибо! Я изо всех сил пытаюсь понять
отрицательное