Diseña y publica tus sitios rápidamente

Transfiere tu sitio a Breezi de una manera eficaz

Te damos la bienvenida a otro de nuestros tutoriales. Este será un poco diferente porque, en vez de recrear un sitio ajeno desde cero, te presentaremos una guía para que puedas importar tu sitio (ya sea desde Photoshop u otro software) a Breezi de manera óptima.

Con esta guía podrás terminar tu sitio en unas cuantas horas porque te enseñaremos a seguir un proceso lógico una vez que tengas lista tu imagen o la plantilla que quieres usar para tu sitio.

Por dónde empezar

Muchas veces los diseñadores se guían por las imágenes que quieren agregar a su sitio. Sin embargo, estas no siempre son muy funcionales por lo que tenemos que empezar por planear nuestro layout y las apps que utilizaremos.

Establecer un layout es una de las partes más importantes del proceso porque te ayuda a planear cómo organizarás tu información, cuántos bloques crearás y cuántas apps utilizarás. Usaremos el prototipo de un sitio para trasladar sus componentes a Breezi. Entonces, primero va el layout.

En esta siguiente imagen podrás ver lo que agregaremos en Breezi. Haz clic en la imagen para ver una versión más grande.

Prototipo

¡Haz clic en la imagen para ver una versión más grande!

El Layout

Ya que tienes una idea de lo que harás, es momento de empezar a construir un layout. En la siguiente imagen verás que hemos agregado el sitio en 4 bloques diferentes (encabezado o header, intro, body o cuerpo y footer o pie de página). De estos bloques dependerá su color de fondo, las apps que utilicemos en ellos y la jerarquía. Puedes agregar contenido importante enel bloque de body o escribir un texto introductorio para que vaya en el bloque de intro. Utiliza el encabezado para agregar el logo y el menú de navegación y el pie de página para agregar información extra (por ejemplo, de los derechos reservados).

Bloques

Aquí puedes ver cómo dividiremos el layout de nuestro sitio

Las Apps

Ya que tengas definidos tus bloques, deberás definir tus secciones y columnas. Las columnas están contenidas en las secciones, las que, a su vez, están contenidas dentro de los bloques. Entonces, lo que sigue es ver cuantas secciones necesitaremos y cuantas columnas deben de ir dentro de cada sección. Esto dependerá de lo que quieras agregarle a tu sitio y las apps que quieras usar. Si quieres un llamado a la acción, utiliza la app de Button; si necesitas un Banner, utiliza la app de Super Banner. Si quieres saber que otras opciones tienes, revisa nuestros tutoriales sobre apps.

En la siguiente imagen podrás ver cómo traducir estos elementos de tu archivo PSD en apps con Breezi.

Apps

En esta imagen podrás ver qué apps utilizar para lograr un efecto similar al de la imagen de la izquierda. También podrás ver que ya dividimos el layout en secciones y columnas.

Mientras tanto, en Breezi…

Lo que sigue es comenzar el proceso de construcción en Breezi. En la siguiente imagen podrás ver que ya agregamos las apps que vamos a necesitar a nuestro layout con el mismo acomodo que en nuestro archivo PSD. Sin embargo, todavía no hemos incorporado el contenido.

Las apps en su estado predeterminado

Las apps en su estado predeterminado

Ahora sí, empezaremos a añadir el contenido; es decir, reemplazaremos los textos, imágenes y configuración predeterminados en cada una de las apps. Si aun no sabes qué contenido incluirás, puedes agregar una muestra de texto, como lorem ipsum, por mientras.

Lo primero que reemplazaremos serán las imágenes, porque es lo más fácil. Haz doble clic en las imágenes predeterminadas y utiliza el editor para reemplazarlas por un archivo de PSD o algún otra imagen de tu computadora. Puedes hacer doble clic para reemplazar el texto si es que ya lo tienes listo.

Así se ve el layout ya que agregamos el contenido. Lo que sigue es agregarle un poco de estilo.

El sitio con el contenido pertinente

El sitio con el contenido pertinente

Ahora viene lo bueno: empezaremos a editar los estilos. Como sabes, puedes experimentar o probar con diferentes combinaciones para que el sitio se vea como tú quieres.

Tenemos que definir nuestros encabezados y etiquetarlos: cuáles serán tus H1s y de ahí en adelante. Haz doble clic y seleciona el texto y, con la barra de herramientas, asígnale una etiqueta.

Estas son las opciones que tienes para tus etiquetas H

Estas son las opciones que tienes para tus etiquetas H

Cuando termines de establecer las etiquetas y tus textos, podrás estilizarlas con el Bulk Style Editor. Ahí podrás buscar alguna tipografía que se parezca a la que utilizaste en tu archivo. También puedes recurrir a nuestras skins parciales. Para hacerlo, haz clic en el botón de “Skins” en la barra inferior.

En esta imagen podrás ver que los textos ya tienen estilos. Haz clic en la imagen para ver el sitio completo.

Así quedaron estos textos después de etiquetarlos y darles un formato

Así quedaron estos textos después de etiquetarlos y darles un formato

Cuando termines de estilizar el texto, deberás modificar los márgenes y el espaciado para que haya un orden entre tus elementos. Puedes llevarlo a cabo con el Bulk Style Editor o con el uso de un skin parcial.

También editaremos el color de fondo de los bloques de Intro y Footer (pie de página). Pasa el cursor sobre la esquina superior izquierda de ambos bloques y haz clic en el dot de estilo que aparecerá. Ahí podrás seleccionar un color.

Dot de estilo del fondo

Usa esta herramienta para seleccionar un color de fondo

Estilo y configuración

Ya que terminamos de modificar el fondo, necesitamos agregar bordes. Haz clic en un dot de estilo y desplázate hasta la sección de “Borders”.

"Borders"

Aquí solamente agregaremos el borde inferior.

Haz esto mismo para incorporar un sombreado.

Otro paso importante es editar la configuración de las apps, lo cual modificará su funcionamiento. Para hacerlo, pasa el cursor sobre alguna de ellas y haz clic en el botón de “Edit Settings” en la barra de herramientas de la app. Haz esto para cada app cuya configuración quieras editar. También explora las otras opciones de sus dots de estilo para cambiar su apariencia.

Por ejemplo, a continuación, editaremos el estilo de la app de navegación. Haz clic en su dot de estilo y luego, en el panel, selecciona la opción de separadores o “Separators”.

Dot de estilo para la app de Navigation

También tienes la opción de elegir un color para tus separadores

Lo que sigue es cambiar el estilo de la app de Social Icons. Sigue el mismo proceso: pasa tu cursor sobre la app y haz clic en el ícono de la herramienta.

Opciones para la app de Social icons

¡Elige un estilo para los íconos de la app!

Modifica los estilos y la configuración de tus apps y de la página hasta que estés satisfecho con el resultado.
Y este es el resultado final. Le cambiamos algunos elementos que estaban presentes en el archivo de PSD pero de esta manera el sitio se ve más profesional. Además, ahorraste tiempo y no tuviste que codificar nada en tu sitio.

¡Así quedó el sitio!

¡Así quedó el sitio!

Y eso es todo para este tutorial. Si tienes dudas o algo que decir al respecto, háznoslo saber en la sección de comentarios.