{"id":1330,"date":"2026-10-11T02:40:49","date_gmt":"2026-10-11T02:40:49","guid":{"rendered":"https:\/\/lucumaagency.com\/como-pasar-un-diseno-en-jpg-a-una-web-pixel-perfect-en-wordpress\/"},"modified":"2026-10-13T13:16:12","modified_gmt":"2026-10-13T13:16:12","slug":"como-pasar-un-diseno-en-jpg-a-una-web-pixel-perfect-en-wordpress","status":"publish","type":"post","link":"https:\/\/lucumaagency.com\/en\/como-pasar-un-diseno-en-jpg-a-una-web-pixel-perfect-en-wordpress\/","title":{"rendered":"C\u00f3mo pasar un dise\u00f1o en JPG a una web pixel perfect en WordPress"},"content":{"rendered":"<p>La mayor\u00eda de los tutoriales de \u00abdise\u00f1o a WordPress\u00bb asumen que el dise\u00f1ador te entrega un archivo de Figma con capas, medidas y tipograf\u00edas. En la pr\u00e1ctica, muchas veces lo que llega es una imagen. <a href=\"https:\/\/colorizabarrioseguro.com\/\">Coloriza Barrio Seguro<\/a>, un programa de arte urbano para j\u00f3venes de Lima Norte, nos entreg\u00f3 su web as\u00ed: un JPG largo con todo el dise\u00f1o, y la expectativa razonable de que la web se viera igual. Este es el proceso que seguimos para que as\u00ed fuera, con los problemas reales que aparecieron y las reglas que nos quedaron para la pr\u00f3xima.<\/p>\n<h2>Primero entender qu\u00e9 hay en la imagen<\/h2>\n<p>Un JPG no tiene medidas, ni colores exactos, ni nombres de fuente. Lo primero fue leerlo como lo leer\u00eda un desarrollador: secciones, jerarqu\u00eda de t\u00edtulos, qu\u00e9 elementos se repiten y cu\u00e1les son \u00fanicos. En el dise\u00f1o de Coloriza hab\u00eda cinco bloques: un hero con collage de fotos y cifras, el ciclo de valor del programa en tres tarjetas, la convocatoria con fecha de cierre, los planes para apadrinar talento y una secci\u00f3n de preguntas frecuentes.<\/p>\n<p>De la imagen salieron tres cosas que luego fueron decisiones:<\/p>\n<ul>\n<li><strong>La paleta<\/strong>: amarillo que degrada a naranja sobre negro, extra\u00edda del propio archivo con una herramienta de muestreo, no \u00abm\u00e1s o menos amarillo\u00bb.<\/li>\n<li><strong>Las tipograf\u00edas<\/strong>: tres familias distintas seg\u00fan el rol, titulares redondeados, t\u00edtulos de secci\u00f3n en negrita pesada y cuerpo legible. Hubo que identificarlas y confirmar que estuvieran disponibles como fuentes web.<\/li>\n<li><strong>Los recursos<\/strong>: logos, collage, mural y 10 logos de aliados que no exist\u00edan como archivos sueltos. Se recortaron del JPG uno por uno, con un script, a su tama\u00f1o real.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/lucumaagency.com\/wp-content\/uploads\/2026\/10\/jpg-a-web-el-proceso.png\"\n     alt=\"Proceso de un dise\u00f1o en JPG a una web en WordPress: leer la imagen y extraer paleta, tipograf\u00edas y recursos; construir una versi\u00f3n en HTML y CSS id\u00e9ntica a la imagen; convertirla a la estructura de Bricks con un generador; subir im\u00e1genes, cargar fuentes y pegar; y verificar en el navegador contra el JPG original\"><\/p>\n<h2>Segundo: una versi\u00f3n en HTML antes de tocar WordPress<\/h2>\n<p>Puede sonar a doble trabajo y es lo contrario. Construir primero una p\u00e1gina est\u00e1tica en HTML y CSS, compar\u00e1ndola lado a lado con el JPG hasta que coincidan, separa dos problemas: el de reproducir el dise\u00f1o y el de hacerlo funcionar en WordPress. Si los mezclas, cada vez que algo no se ve igual no sabes si es el dise\u00f1o o el constructor.<\/p>\n<p>En esa versi\u00f3n se resolvieron las decisiones finas: m\u00e1rgenes reales, c\u00f3mo se comportan las tarjetas en celular, qu\u00e9 textos son t\u00edtulos y cu\u00e1les son etiquetas, y los degradados radiales de las tarjetas, que son f\u00e1ciles en CSS y no existen en la interfaz de Bricks.<\/p>\n<h2>Tercero: convertir el HTML a la estructura de Bricks, con un generador<\/h2>\n<p>Construimos en WordPress con Bricks, y Bricks permite pegar secciones enteras desde un archivo de texto con una estructura definida. En lugar de rehacer el dise\u00f1o a mano arrastrando elementos, escribimos un peque\u00f1o programa que lee el HTML y genera esa estructura: la p\u00e1gina completa con sus cinco secciones y 200 elementos, m\u00e1s la cabecera y el pie como plantillas globales.<\/p>\n<p>Esto tiene dos ventajas que un cliente no ve pero paga: la conversi\u00f3n es exacta porque sale del mismo HTML que ya coincid\u00eda con el JPG, y si el cliente pide un cambio de base, se corrige en el generador y se vuelve a producir todo en segundos. Explicamos por qu\u00e9 usamos este constructor en <a href=\"https:\/\/lucumaagency.com\/en\/bricks-vs-elementor-vs-gutenberg-con-que-construimos-y-por-que\/\">Bricks vs Elementor vs Gutenberg<\/a>.<\/p>\n<h2>Lo que se rompi\u00f3, y la regla que dej\u00f3<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/lucumaagency.com\/wp-content\/uploads\/2026\/10\/jpg-a-web-lo-que-se-rompio.png\"\n     alt=\"Cinco cosas que se rompieron al pasar el dise\u00f1o a Bricks y la regla que dej\u00f3 cada una: degradados radiales que la interfaz no tiene, degradados de texto, fuentes que no cargaban por no estar instaladas, im\u00e1genes con ruta provisional e identificadores escritos a mano\"><\/p>\n<ul>\n<li><strong>Los degradados radiales de las tarjetas no existen en Bricks.<\/strong> Regla: lo que el constructor no ofrece va a una clase de CSS global, con un color s\u00f3lido de respaldo en el elemento. Si alguien olvida pegar el CSS, la web se ve correcta, solo sin el brillo.<\/li>\n<li><strong>Los degradados en el texto tampoco.<\/strong> Palabras como \u00abtalento\u00bb o \u00abfrecuentes\u00bb llevaban un degradado. Se resolvieron con un color de acento en el texto, y el degradado real qued\u00f3 como opci\u00f3n por clase.<\/li>\n<li><strong>Las fuentes no cargaban.<\/strong> Nombrar una fuente en el estilo no la instala. Regla: las tipograf\u00edas se cargan en los ajustes del constructor antes de pegar nada, o todo cae a la fuente por defecto y el parecido se pierde.<\/li>\n<li><strong>Las im\u00e1genes apuntaban a una ruta provisional.<\/strong> Regla: primero se suben las 16 im\u00e1genes a la biblioteca de medios de WordPress, despu\u00e9s se reemplaza la ruta base y reci\u00e9n entonces se pega.<\/li>\n<\/ul>\n<p>Una regla m\u00e1s, aprendida en otro proyecto de este mismo tipo: los identificadores internos de cada elemento tienen que generarse autom\u00e1ticamente, nunca escribirse a mano, porque el constructor los regenera al pegar y con identificadores mal formados descarta elementos anidados en silencio.<\/p>\n<h2>Cuarto: el sistema de dise\u00f1o, para que el cliente no lo rompa<\/h2>\n<p>Una web pixel perfect dura hasta que alguien edita un t\u00edtulo con otro tama\u00f1o. Para evitarlo, adem\u00e1s de la p\u00e1gina se entreg\u00f3 el estilo del tema: la escala tipogr\u00e1fica completa de H1 a H6 con sus tama\u00f1os, la paleta como colores globales y las clases de CSS documentadas. As\u00ed, cuando el cliente crea una p\u00e1gina nueva, hereda el dise\u00f1o sin tener que recordar que el H2 mide 40 p\u00edxeles.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/lucumaagency.com\/wp-content\/uploads\/2026\/10\/jpg-a-web-checklist-entrega.png\"\n     alt=\"Checklist de entrega de una web pixel perfect: im\u00e1genes subidas y rutas reales, fuentes cargadas, estilo del tema con escala tipogr\u00e1fica, paleta global, CSS de clases pegado, cabecera y pie como plantillas, comparaci\u00f3n final contra el JPG en escritorio y celular, y medici\u00f3n instalada\"><\/p>\n<h2>Qu\u00e9 cambia para ti si vas a encargar una web desde un dise\u00f1o<\/h2>\n<ul>\n<li>Entregar un JPG no es un problema, pero a\u00f1ade trabajo de interpretaci\u00f3n. Si puedes, pasa tambi\u00e9n los colores exactos, los nombres de las fuentes y los logos sueltos: ahorras horas y evitas aproximaciones.<\/li>\n<li>Pide ver la versi\u00f3n en HTML o una comparaci\u00f3n lado a lado antes de que la web est\u00e9 en WordPress. Es el momento barato de corregir.<\/li>\n<li>Pregunta si la web lleva estilo de tema y paleta global. Es lo que hace que la segunda p\u00e1gina se vea como la primera.<\/li>\n<li>Pixel perfect no significa id\u00e9ntico en todos los celulares. Significa fiel al dise\u00f1o y adaptado con criterio donde la pantalla obliga a cambiar. Pide ver la versi\u00f3n m\u00f3vil, no solo la de escritorio.<\/li>\n<\/ul>\n<p>Si est\u00e1s decidiendo con qui\u00e9n hacerla, <a href=\"https:\/\/lucumaagency.com\/en\/que-pedir-en-la-cotizacion-de-una-web-para-que-no-te-vendan-humo\/\">qu\u00e9 pedir en la cotizaci\u00f3n de una web<\/a> te da la lista completa.<\/p>\n<h2>Preguntas frecuentes<\/h2>\n<h3>\u00bfSe puede hacer una web pixel perfect desde un JPG?<\/h3>\n<p>S\u00ed, con un paso intermedio de interpretaci\u00f3n: extraer paleta, fuentes y recursos de la imagen, y construir primero una versi\u00f3n est\u00e1tica que se compare con el dise\u00f1o antes de llevarla a WordPress.<\/p>\n<h3>\u00bfEs mejor entregar el dise\u00f1o en Figma?<\/h3>\n<p>S\u00ed, porque trae medidas, colores y tipograf\u00edas exactos y los recursos exportables. Pero un JPG bien hecho se puede convertir igual; cuesta m\u00e1s horas de interpretaci\u00f3n.<\/p>\n<h3>\u00bfQu\u00e9 significa pixel perfect en una web?<\/h3>\n<p>Que la web reproduce el dise\u00f1o con fidelidad en la pantalla para la que se dise\u00f1\u00f3, y que en otras pantallas se adapta siguiendo el mismo criterio visual. No significa que cada p\u00edxel coincida en todos los dispositivos, que es imposible.<\/p>\n<h3>\u00bfPor qu\u00e9 construir primero en HTML si al final va a ser WordPress?<\/h3>\n<p>Para separar dos problemas: reproducir el dise\u00f1o y hacerlo funcionar en el constructor. As\u00ed, cuando algo no se ve igual, sabes de inmediato de cu\u00e1l de los dos viene.<\/p>\n<h3>\u00bfCu\u00e1nto tarda convertir un dise\u00f1o a WordPress?<\/h3>\n<p>Una landing de cinco secciones como esta, entre una y dos semanas incluyendo la interpretaci\u00f3n del JPG, la versi\u00f3n HTML, la conversi\u00f3n y las pruebas en celular. Con un dise\u00f1o en Figma y recursos sueltos, menos.<\/p>\n<h2>Conclusi\u00f3n<\/h2>\n<p>Convertir un dise\u00f1o en JPG a una web pixel perfect en WordPress es un proceso de cuatro pasos: leer la imagen y extraer lo que no trae, construir una versi\u00f3n HTML que coincida, convertirla al constructor con un generador en vez de a mano, y entregar un sistema de dise\u00f1o para que la fidelidad sobreviva a la primera edici\u00f3n del cliente. En Coloriza funcion\u00f3 as\u00ed, y las reglas que dejaron los tropiezos son las que ahora aplicamos desde el primer d\u00eda.<\/p>\n<p>Pasar del dise\u00f1o al c\u00f3digo es solo una parte del trabajo de una web: el resto est\u00e1 en nuestros <a href=\"https:\/\/lucumaagency.com\/en\/servicios\/\">servicios de marketing digital<\/a>. La plataforma sobre la que montamos cada dise\u00f1o la explicamos en <a href=\"https:\/\/lucumaagency.com\/en\/por-que-hacer-tu-web-en-wordpress-ventajas-mitos-y-cuando-conviene\/\">por qu\u00e9 hacemos las webs en WordPress<\/a>.<\/p>\n<p>En Lucuma Agency hacemos <a href=\"https:\/\/lucumaagency.com\/en\/desarrollo-web\/\">desarrollo web en WordPress<\/a> a partir de tu dise\u00f1o, venga en Figma, en PDF o en una imagen. <a href=\"https:\/\/lucumaagency.com\/en\/agendar-meet\/\">Agenda una consultor\u00eda gratis<\/a> y te decimos qu\u00e9 falta en tu archivo para que la web salga igual.<\/p>","protected":false},"excerpt":{"rendered":"<p>La mayor\u00eda de los tutoriales de \u00abdise\u00f1o a WordPress\u00bb asumen que el dise\u00f1ador te entrega un archivo de Figma con capas, medidas y tipograf\u00edas. En la pr\u00e1ctica, muchas veces lo que llega es una imagen. Coloriza Barrio Seguro, un programa de arte urbano para j\u00f3venes de Lima Norte, nos entreg\u00f3 su web as\u00ed: un JPG [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1329,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17],"tags":[],"class_list":["post-1330","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-desarrollo-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/lucumaagency.com\/en\/wp-json\/wp\/v2\/posts\/1330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lucumaagency.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lucumaagency.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lucumaagency.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lucumaagency.com\/en\/wp-json\/wp\/v2\/comments?post=1330"}],"version-history":[{"count":1,"href":"https:\/\/lucumaagency.com\/en\/wp-json\/wp\/v2\/posts\/1330\/revisions"}],"predecessor-version":[{"id":1352,"href":"https:\/\/lucumaagency.com\/en\/wp-json\/wp\/v2\/posts\/1330\/revisions\/1352"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lucumaagency.com\/en\/wp-json\/wp\/v2\/media\/1329"}],"wp:attachment":[{"href":"https:\/\/lucumaagency.com\/en\/wp-json\/wp\/v2\/media?parent=1330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lucumaagency.com\/en\/wp-json\/wp\/v2\/categories?post=1330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lucumaagency.com\/en\/wp-json\/wp\/v2\/tags?post=1330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}