Des de l'arribada de la versió CS6, Adobe va implantar en Photoshop una opció bastant útil per a la composició i desenvolupar dissenys web. El funcionament és molt senzill i sobretot ràpid. A través de l'aplicació serem capaços de generar fulls d'estils en cascada prenent com a referència les nostres capes de formes i de text. El procediment és tan senzill com desenvolupar la nostra maqueta, copiar la versió en codi dels nostres elements i enganxar-lo en el nostre full.
És una molt bona opció sobretot perquè ens permet anar veient l'evolució del nostre disseny en termes visuals i en temps real. A continuació us deixo alguns tips per utilitzar aquesta opció i treure el màxim rendiment:
Tracta de ser precís
Per obtenir un resultat professional, és recomanable que tinguis en compte les mesures i proporcions del teu lloc. Fixa els valors de Width i Heigh de la plantilla que estàs dissenyant i aplica'ls al teu maqueta. Quan copiïs el codi CSS situarem cada element prenent com a referència la distància en píxels entre cada element i les vores de la tela. Tingues en compte també les mides i les raons jeràrquiques que vas a incloure en el teu disseny incloent l'alineació de cada element i l'espaiat entre cada un d'ells per proporcionar la màxima llegibilitat als teus usuaris.
L'ús de guies i les regles de la interfície t'ajudarà a construir una plantilla ordenada, neta i amb tots els seus elements perfectament alineats.
Configura totes les característiques de cada element
L'opció de copiar el codi CSS ens dóna la possibilitat de dissenyar el nostre lloc amb gran precisió a partir de l'ús de capes de forma i de text. El contingut de cada capa es copiarà al porta-retalls i podrem enganxar-lo ràpidament en el nostre full d'estils. De les capes de forma, captura els valors dels paràmetres següents:
- Mida
- Posició
- Color de traç
- Color de farciment (inclosos els degradats)
- ombra paral·lela
De les capes de text podrem capturar els següents valors:
- Família de fonts
- Cos de lletra
- Gruix de font
- Alt de línia
- subratllat
- ratllat
- superíndex
- subíndex
- Alineació de el text
Tingues-ho en compte i estableix cada un d'aquests valors per proporcionar l'estil que busques.
Treballa amb grups de capes
Aquesta funció tradueix el nostre treball organitzat per dos tipus de classe, una per cada grup que aglutini capes de formes o de text i una classe per a cada capa d'algun d'aquests tipus. Cada classe de grup representarà un element div principal que contindrà elements div secundaris i que es correspondran a les capes inserides en cada grup. D'aquesta manera, els valors superior i esquerre dels contenidors secundaris es van a establir prenent com a referència el contenidor principal. Has de tenir en compte que aquesta opció no està disponible amb objectes intel·ligents i tampoc serà aplicable a més d'una capa de forma simultània a menys que aquestes estiguin agrupades.
Passos per fer la conversió
Un cop hagis fet la teva maqueta, hagis personalitzat cada element i els hagis agrupat per grups no tindràs més de seguir aquests passos:
- Dirigeix-te a el panell de capes i escull alguna d'aquestes dues opcions:
- Fes clic amb el botó dret del teu ratolí sobre una capa de formes o text o en un grup de capes i triï Copia CSS en el menú de context.
- Selecciona una capa de formes o text o un grup de capes i, a continuació, tria l'opció Copia CSS al menú de el panell Capes.
-
Enganxa el codi en el document de la teva fulla d'estils i aplica'l a les teves pàgines a través d'html5.
