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

14

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

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

— SLaks
источник

Я ценю, что вы хотите оставить вопрос общим, но пример, вероятно, будет полезен. Видимости слоя уже установлены, или вам нужно изменить их индивидуально перед экспортом?

— Пекка

@Pekka: разные порции нуждаются в разной видимости. Например, фон сайта экспортируется видимым, а фон контента экспортируется с глобальным фоном невидимым. (для прозрачной тени)

— SLaks

Понимаю. Так что это определенно требует пакетной обработки. Интересно посмотреть, что подходит! ...

— Пекка

9

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

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

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

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

Примечания :

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

— Shikiryu
источник

1

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

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

— S.gfx
источник

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

— Яри Кейнянен

Спасибо! Я изо всех сил пытаюсь понять

— отрицательное