Treballar amb fitxersOn va i en quin format · 9 min de lectura

Quina extensió per a què

La taula que resol el 95% de les decisions.

Si tens… Fes servir Per què
Una foto .jpg Comprimeix molt bé les fotos i ningú no nota la pèrdua. Un .png de la mateixa foto pesa diverses vegades més sense veure's millor.
Una captura de pantalla .png Aquí sí que importa: el .jpg embruta les vores de les lletres i la captura queda amb brossa al voltant del text.
Un logotip, una icona, un dibuix pla .svg Escala a qualsevol mida, pesa poquíssim, i és text — o sigui, editable.
Alguna cosa que necessita fons transparent .png El .jpg no sap desar transparència: te l'omple de blanc.
Alguna cosa per a impremta .pdf Desa vectors i text sense degradar. Si a dins hi ha fotos, que estiguin a 300 dpi a la mida final.
Alguna cosa per pujar a un web .webp Pesa força menys que el .jpg amb la mateixa qualitat. Si el lloc no l'accepta, .jpg.
Alguna cosa que voldràs editar d'aquí a un mes el font Desa sempre el fitxer amb què l'has construït —l'.html, l'.svg— a més de l'exportat. Sense això, editar és refer.
Verd, text. Magenta, binari.

Píxels i dpi, en dos paràgrafs. Per quan el de la impremta et diu «envia-m'ho en alta».

Píxels és quantes caselles té la imatge en total: 1748 × 2480, per exemple. És un número fix, desat al fitxer. Dpi (punts per polzada) no és una propietat de la imatge sinó de com la mostraràs: quantes d'aquestes caselles ficaràs a cada polzada de paper.

La mateixa imatge a més dpi surt més petita i més nítida; a menys dpi, més gran i més borrosa.

La regla pràctica: per a pantalla n'hi ha prou amb qualsevol cosa raonable; per a impremta vols 300 dpi a la mida final. Un fullet A5 imprès necessita uns 1748 × 2480 píxels.

L'error clàssic, però amb diners pel mig: el logotip baixat del web viu a 200 píxels perquè és tot el que cal a la pantalla, i en un cartell de dos metres es nota.

Demana sempre l'original vectorial del logotip — un .svg, un .pdf o un .ai. Amb això la mida deixa de ser un problema per sempre, i és la raó per la qual les agències te'l fan arribar així.

Com es fa un fullet, doncs. La temptació és obrir el Canva o el Photoshop i començar a dibuixar. El problema apareix al canvi número set, quan el client demana moure el preu, canviar el verd i treure una línia al text: sobre una imatge, cada canvi es fa a mà una altra vegada, i el set costa igual que l'u.

El camí que aprofita tot l'anterior: construir el fullet en text —un .html amb el seu .css— i exportar-lo a imatge només al final.

Iterar sobre el text no costa res. Exportar es fa una sola vegada. L'original és l'.html, no el .png: si perds el PNG el tornes a exportar en deu segons; si perds l'.html, has perdut el fullet.

  1. Per exportar a PDF Obres l'.html al navegador, Ctrl+P, i tries «Desa com a PDF». Res més.
  2. Per a mides d'impremta Demana a la IA que hi posi la mida exacta en mil·límetres i marges de sagnat. És una línia de CSS.
  3. Per a xarxes Demana-li les mides del format que necessitis i exportes una imatge per a cadascun — del mateix fitxer de text.
Exportar és l'últim pas, i no necessita res estrany.

Faràs un fullet que el client corregirà diverses vegades. Per on comences?

Desa sempre el fitxer amb què has construït la cosa, no només la cosa exportada.

snack 6 de 6

Powered by KlugerByte