Com convertir el teu disseny de Photoshop en codi CSS en menys d'un minut

CSS-Photoshop

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.

web-photoshop

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.

    CSS-Photoshop1

    CSS-Photoshop2


El contingut d'l'article s'adhereix als nostres principis de ètica editorial. Per notificar un error punxa aquí.

Sigues el primer a comentar

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà.

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

bool (true)