Création de sprites CSS à partir de Photoshop

14

J'ai un PSD avec une conception web.
Chaque fois que je modifie la conception, je dois copier manuellement différentes parties de l'image, avec différentes visibilités de calque (pour la transparence) dans des sprites CSS.

Combien cela peut-il être automatisé?

adobe-photoshop export css sprite SLaks
la source
Je comprends que vous souhaitiez garder la question générique, mais un exemple serait probablement utile. Les visibilités des calques sont-elles déjà définies ou devez-vous les modifier individuellement avant d'exporter?
Pekka
@Pekka: différentes portions nécessitent des visibilités différentes. Par exemple, l'arrière-plan du site est exporté visible, mais l'arrière-plan du contenu est exporté avec l'arrière-plan global invisible. (pour une ombre transparente)
SLaks
Je vois. Cela nécessite donc un traitement par lots. Intéressé de voir ce qui se passe! ...
Pekka

Réponses:

9

J'ai utilisé un script Photoshop automatique une fois et j'ai bien fonctionné.

Le concept est:

  • Chaque portion est une image différente.
  • Chaque portion (et donc chaque image) doit se trouver dans le même dossier sans aucune autre image.
  • Exécutez le script indiquant le dossier et certains paramètres (taille, nom css, etc ...).

  • Le script fait:

    1. Fusionnez toutes les images en une seule avec la taille que vous avez indiquée.
    2. Générez le fichier CSS

Dans votre cas, si vous modifiez une image, vous régénérez l'image globale et le CSS via le script et ... c'est tout. Vous devrez peut-être copier / coller le CSS dans le vôtre si vous ne souhaitez pas utiliser celui généré.

Remarques :

Je l'ai essayé avec quelques fichiers et j'ai très bien fonctionné. Ensuite, j'ai essayé comme ~ 600 images et ensuite, vous aurez besoin d'un CPU goooood et de patience;) Dans ce cas, ne l'utilisez pas.

Shikiryu
la source
1

N'utiliserait pas des tranches + démarrer une action qui commence par sélectionner (avec accrochage aux tranches et aux limites du document) toutes vos tranches une par une, mais recadrer à la sélection à chaque fois et enregistrer au format png, ctrl alt z annuler jusqu'à ce qu'elles ne soient pas recadrées, sélection de chaque secteur, recadrage..etc, jusqu'à ce que tous les secteurs soient terminés, puis arrêt de l'action. Au milieu, vous pouvez masquer / afficher n'importe quelle couche, comme c'est toujours le même fichier, donc il ne devrait pas y avoir de conflits ... Vous devez donc charger l'action sur votre psd modifié à chaque fois. La seule chose à laquelle je peux penser est que vous devez réellement changer les bordures des tranches. Ou que ... je ne vous ai pas bien compris ...

Modifier: si vous n'avez pas besoin de découper, alors une macro (action) qui inclut uniquement le masquage ou l'affichage des couches dans l'ordre dont vous avez besoin, une fois tous les réglages effectués. Comme je l'ai dit, je ne comprends peut-être pas ...

S.gfx
la source
Bien que je vois votre premier paragraphe plutôt déroutant, il semble néanmoins ajouter plus au flux de travail que l'automatiser; Je pourrais voir où vous vous dirigez avec l'action masquer / afficher les couches, bien que j'utilise des tranches avec.
Jari Keinänen
Je vous remercie! J'essaie de comprendre le vote
négatif