Cómo crear un tema HTML CSS a partir de un archivo PSD fácilmente

Escrito por ruri ranbe | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear un tema HTML CSS a partir de un archivo PSD fácilmente
No necesitas ser un experto en HTML o CSS para crear tu propia página web. (Jupiterimages/Brand X Pictures/Getty Images)

No necesitas ser un experto en HTML o CSS para crear tu propia página web. Si has hecho un diseño en Adobe Photoshop, pero no sabes qué pasos realizar para convertir el archivo PSD en un HTML, puedes exportar la imagen a HTML desde el propio Photoshop. Pero antes de exportar el diseño, deberías usar la herramienta de corte para cortar la imagen en distintas secciones para que el diseño sea más fácil de editar cuando lo tengas convertido en HTML. Después de guardar el archivo en un documento web en Photoshop, podrás cambiar parte del HTML por CSS para limpiar el código.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Ejecuta Adobe Photoshop y pulsa "Abrir". Navega a la carpeta donde está el archivo PSD. Haz doble clic sobre él para abrir el diseño. Haz clic en la "Herramienta de corte" o pulsa "C".

  2. 2

    Selecciona una zona fuera de la imagen. Arrastra el ratón por la sección deseada, y suelta el botón del ratón para crear una caja de separación. La imagen se dividirá en dos secciones separadas.

  3. 3

    Repite el Paso 2 para seguir cortando el diseño en distintas secciones como necesites. Pasa el ratón sobre el borde de la caja de separación para cambiar su tamaño, si lo necesitas.

  4. 4

    Pulsa "Archivo" cuando hayas terminado de dividir el diseño en secciones separadas. Pulsa "Guardar para web y dispositivos" para abrir una nueva ventana.

  5. 5

    Pulsa "Guardar" y escoge "HTML e imágenes" en el menú desplegable "Formato". Pon un nombre al archivo y pulsa "Guardar" de nuevo para crear un tema HTML a partir del archivo PSD.

  6. 6

    Abre el documento HTML en un editor de texto como el Bloc de Notas, vim o Notepad++. Añade las etiquetas "<style>" y "</style>" entre las etiquetas "<head>" y "</head>" en la parte superior de la página.

  7. 7

    Inserta esto entre las etiquetas "<style>" y "</style>":

    body { }

    table { }

  8. 8

    Añade los siguientes atributos en el elemento "body" en el CSS, para que el código tenga este aspecto:

    body { background-color: #X ; margin: 0; }

    Cambia "X" por el color de fondo deseado para la página. Usa Adobe Photoshop para conseguir el código hexadecimal del color deseado.

  9. 9

    Añade estos atributos en el elemento "table" en el CSS:

    table { width: W px; height: H px; padding: 0; border: 0px; }

    Cambia "W" y "H" por los valores asociados a "width" y "height", como se muestra en la etiqueta "<table>". Usa la herramienta "Buscar", a la que puedes acceder con "Ctrl" y "F", para encontrar estos atributos, si es necesario.

  10. 10

    Elimina "bgcolor", "leftmargin", "topmargin", "marginwidth" y "marginheight" de la etiqueta "<body>". Quita "id", "width", "height", "border", "cellspacing" y "cellpadding" de la etiqueta "table".

  11. 11

    Pulsa "Ctrl" y "S" para terminar de crear el tema HTML/CSS a partir de un archivo PSD.

Consejos y advertencias

  • Para conseguir el código hexadecimal del color deseado en Adobe Photoshop, pulsa en la muestra de color en la barra de herramientas, y resalta el campo al lado de "#".
  • Aunque Adobe Photoshop tiene un método rápido y sencillo para convertir archivos PSD en HTML, puede que te parezca más sencillo usar un WYSIWYG, como Adobe Dreamweaver, Microsoft Expression o Amaya, para crear un tema HTML/CSS.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles