Estils de Caràcter i Estils de Paràgraf en Photoshop CC

Un tutorial per ser més àgils a l’hora de dissenyar estils de text

Des de la versió CS6 de Photoshop podem trobar les opcions “Estils de Caràcter” i “Estils de Paràgraf”. Fins llavors, els dissenyadors que utilitzem Photoshop per a dissenyar webs i aplicacions no hem pogut trobar aquesta eina tan útil. Per aquest motiu, encara hi ha molts dissenyadors web que no la saben fer servir.

La finalitat d’aquest article és il·lustrar el funcionament d’aquesta opció d’edició de text i animar-nos a utilitzar-la. Ens ajudarà a ser més àgils a l’hora de dissenyar, tenir visibles els nostres estils de text i dotar-los d’uniformitat.

Desenvoluparé aquest tutorial posant com a exemple el disseny d’un site molt esquemàtic i explicant com podem aplicar aquesta eina dins del nostre literal. Avanço que aquesta metodologia ens ajudarà a tenir a mà tots els estils que anem utilitzant i podrem controlar més fàcilment el nombre d’estils, ja que sempre és recomanable tenir-ne pocs, ben combinats i amb personalitat.

Els “Estils de Caràcter” s’apliquen a una paraula o a un fragment de text seleccionat i els “Estils de Paràgraf” s’apliquen a un grup de paraules, podent-los dotar d’atributs de caràcter i de paràgraf paral·lelament.

Com aplicar estils de text al nostre disseny, pas a pas

• Pas 1

Hi ha dues maneres de crear estils. La primera consisteix a crear un nou estil des de la finestra “Estils de text” i després aplicar-lo als textos que anem creant. La segona via inverteix el procés, creant el text per a visualitzar el resultat primer i, posteriorment, anar creant els estils seleccionant els textos. D’aquesta manera, podrem utilitzar-los més endavant en altres literals que anem afegint al nostre disseny. En aquest article partirem amb la segona opció.

Com podem observar a la imatge, s’han dissenyat prèviament els copys amb les seves característiques, sense crear el llistat d’estils.

• Pas 2

Seleccionem el text del qual volem crear l’estil i cliquem el botó de “Nou Estil de Caràcter”, dins la finestra “Estil de Caràcter”.

• Pas 3

Ja tenim l’estil creat, ara només cal guardar-lo amb un nom per a poder diferenciar-lo dels altres que anem creant. Haurem de clicar dues vegades al nou estil creat i se’ns obrirà una finestra on podrem canviar el nom i els paràmetres d’aquell estil. Cal remarcar que si assignem un estil a diversos texts del nostre document i en un futur canviem els seus paràmetres, aquests s’aplicaran a tots aquells textos que hàgim assignat l’estil.

• Pas 4

Seguim el mateix procediment per a l’H2.

• Pas 5

I el mateix per al text destacat.

• Pas 6

Ara passarem a crear l’estil al paràgraf. El procediment és el mateix. Seleccionem la part de paràgraf a la qual volem copiar l’estil, guardem els paràmetres i els hi assignem un nom. En el cas d’aquest paràgraf, com que té una part de text destacat, només seleccionarem la part de text que tingui l’estil que volem copiar per a altres paràgrafs.

• Pas 7

Una vegada tinguem llistats tots els estils amb els quals volem construir el nostre disseny, passarem a afegir titulars i texts i els hi aplicarem els estils que acabem de crear.
A continuació podem veure el copy inserit sense estil.

• Pas 8

Per a aplicar l’estil al copy, simplement hem de seleccionar el text que volem canviar i seguidament clicar l’estil que hem creat dins la finestra “Estil de Text” (caràcter o paràgraf).
S’ha de tenir en compte que existeixen jerarquies entre estils. Per tant, si volem aplicar un estil concret a un paràgraf, haurem de tenir seleccionada l’opció “Ninguno” a la finestra de caràcter, així cap estil de caràcter influirà en el paràgraf. Després, si cal, es pot donar estil a parts concretes del paràgraf.

Si l’estil del text s’aplica parcialment, clicar el botó “Borrar Omisión”.

Això deu passar, segurament, en crear nous estils tenint activa alguna capa de text. Per evitar-ho, s’ha de tenir activa qualsevol capa que no sigui de text a l’hora de crear nous estils.

Utilitza estils de text a Photoshop… et facilitarà la vida a tu (i no només!)

Al principi potser sembla una mica feixuc utilitzar aquesta eina, ja que molts dissenyadors prefereixen duplicar els textos i canviar el contingut per a mantenir l’estil. Val a dir, però, que a l’hora de dissenyar webs o aplicacions resulta molt eficient i eficaç emprar aquesta eina.

Un cop dominats els estils de text, podrem agilitzar enormement la nostra feina: ja no haurem d’obrir antics arxius per a recordar o copiar el text. D’aquesta manera, podrem guardar l’estil en el nostre propi llistat i, fins i tot, podrem exportar-lo al Creative Cloud per a poder utilitzar aquests estils en altres arxius.

D’altra banda, ens ajudarà a tenir organitzats els nostres estils de text jeràrquicament, de més a menys importància (h1, h2, h3…), facilitant també la feina al maquetador web, que a simple vista podrà entendre els paràmetres de cada text i podrà implementar-los amb més rapidesa al full d’estil (CSS).

Cal subratllar que optimitzar la jerarquia dels cossos de text ajuda a posicionar la nostra web orgànicament (SEO). D’aquesta manera, tenir els textos ben ordenats i amb pocs nivells (no és recomanable més d’H3) afavoreix les possibilitats d’aparèixer a la primera plana de resultats de Google.

En definitiva, si li donem estils de text als nostres dissenys amb Photoshop, podrem reutilitzar-los d’una manera àgil, i el nostre programador o programadora ens ho agrairà!