Tutorial: Cómo maquetar una página web con Adobe Photoshop

MAQUETAR-PHOTOSHOP

Existe una enorme variedad de herramientas para maquetar páginas web y trabajar de una forma totalmente sencilla y funcional sin entrar o tocar código. Son innumerables, propuestas por aplicaciones (Adobe Dreamweaver es un ejemplo) o directamente por plataformas online como Wix. Sin embargo, para un diseñador web, conocer los procedimientos manuales es fundamental. HTML5 y CSS son los pilares fundamentales para la maquetación de webs y landing pages.

Sin embargo, más a menudo de lo que quizá podrías esperar, tendrás que recurrir a aplicaciones como Indesign o Adobe Photoshop para complementar tus labores de maquetación y darles un acabado perfecto. Hoy veremos en este tutorial extenso, cómo podemos maquetar una página web utilizando Adobe Photoshop. En esta primera parte nos quedaremos en el trabajo a desarrollar desde Photoshop, aunque en próximas entregas pasaremos a ver cómo podemos aplicar este trabajo ya directamente en código HTML para hacerlo funcional.

Empezando por el diseño de nuestro wireframe

Para comenzar con la maquetación y el diseño de una página web es tremendamente importante que empecemos definiendo cuáles serán los elementos básicos, esto es el esqueleto. Esta estructura servirá como soporte para sostener todos los contenidos (ya sean textuales o multimedia). Al definir cada una de la secciones que componen a nuestra página podremos trabajar sobre ellas con total exactitud y proporcionar un diseño visual lo más acertado posible.

Es muy importante que tengamos en cuenta las dimensiones que tendrá nuestra web, si tendrá un formato boxed o Full-width. Una página web de tipo boxed estará dentro de un pequeño contenedor y por lo tanto aparecerá un espacio alrededor de la misma. Por el contrario, una web full witdth ocupará la totalidad de la pantalla del dispositivo que reproduzca la página. Escoger entre una modalidad u otra responde a cuestiones meramente estilísticas y dependerá también de las necesidades que tenga el proyecto sobre el que estemos trabajando. Nosotros trabajaremos en este ejemplo con la modalidad boxed por lo que no ocupará la totalidad del espacio que proporcione el navegador.

 

Wireframe-1

Para crear nuestro wireframe lo primero que debemos hacer es entrar en la aplicación de Adobe Photoshop e incluir las dimensiones que queremos que tenga nuestra página. En este ejemplo nuestra página tendrá una anchura de 1280 píxeles. No obstante, el tema del tamaño puede variar dependiendo de cuál sea el destino final o el dispositivo en el que queremos reproducir nuestra página. No cabe ninguna duda de que para que un diseño web sea funcional y eficiente, debe ser responsive y debe adaptarse a todos los dispositivos que hay en el mercado. Sin embargo, en este caso vamos a trabajar para crear un prototipo que vamos a reproducir en un ordenador de escritorio. Aún así, el tema del responsive lo trataremos más adelante, de momento a continuación os dejo jerarquía de dimensiones de pantalla para trabajar en este ejemplo. Ten en cuenta que en este caso haremos una maquetación de la landing page en Adobe Photoshop para a continuación migrarlo a HTML5 Y CSS3. El objetivo de esta pequeña práctica, es convertir un diseño creado en Photoshop, en un diseño web usable e interactivo que responda a los movimientos del usuario.

Medidas para teléfonos móviles

iPhone 4 y 4S: 320 x 480

iPhone 5 y 5S: 320 x 568

iPhone 6: 375 x 667

iPhone 6+: 414 x 736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360 x 640

HTC One: 360 x 640

Medidas pra tabletas

iPad todos los modelos, así como iPad Mini: 1024 x 768

Galaxy Tab 2 y 3 (7.0 pulgadas): 600 x 1024

Galaxy Tab 2 y 3 (10.1 pulgadas): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Medidas para ordenadores de escritorio

Pantallas pequeñas (usadas por ejemplo en netbooks): 1024 x 600

Pantallas medianas: 1280 x 720 / 1280 x 800

Pantallas grandes: ancho superior a 1400 píxeles, ejemplo 1400 x 900 o 1600 x 1200.

 

wireframe-guias

Para empezar a distribuir los elementos y asignar secciones dentro de nuestra maqueta web, es muy importante que tengamos en cuenta las proporciones para asegurar una acabado legible y melódico. Será imprescindibles que utilices las opciones de reglas y guías que podrás encontrar en el menú superior Vista. Para trabajar de forma proporcional y exacta lo mejor es que trabajemos a partir de porcentajes. Pulsaremos sobre el menú vista y a continuación sobre la opción “Nueva guía” para escoger la modalidad de la división. En este caso haremos cuatro divisiones verticales al 25% y las tomaremos de referencia para situar nuestras imágenes del footer y la imagen de nuestro logotipo en el header.

Wireframe-1a

Existe un código para designar cada una de las áreas que ocuparán nuestra maqueta y la función que tendrá cada una de ellas. Por ejemplo para indicar el área que ocupará una imagen, crearemos rectángulos con una especie de cruz. Para indicar que queremos incluir vídeos en una zona determinada incluiremos dentro de nuestro contenedor el símbolo de play. En este primer ejemplo únicamente vamos a trabajar con imágenes, en la captura superior puedes ver el área que ocupará el logotipo de nuestro sitio web.

Wireframe-final

Este sería el resultado final de nuestro wireframe. Como podemos ver, esta dividido en un header compuesto por la imagen en la que se encontrará el logotipo y que servirá como enlace a la página de inicio acompañado de dos pestañas, un buscador y cuatro botones sobre el cajón de búsqueda. Además, ya dentro del body, hemos incluido una barra lateral compuesta por una barra divisoria y una serie de categorías que recogen de forma categorizada el tipo de contenidos que habrá en nuestra web. Otra sección con una numeración que incluye las entradas que existirán en nuestro site, y por último un listado con las meta tags o etiquetas más representativas en nuestro site.

En el área de contenidos, que estará definido por una sección que incluirá contenido autogestionable, encontraremos el contenido de nuestros artículos. En este caso, breadcrumbs o la miga de pan (que indica la estructura orgánica de nuestra web, el titular del artículo, los metadatos, un párrafo como cuerpo de texto, dentro del cual se incluye una imagen.

A modo de pie de página o footer hemos incluido cuatro imágenes que servirán como enlace a otras áreas de nuestra página. Aquí podremos incluir logotipos u otras secciones interesantes. Aunque en realidad, esta zona actuará más bien como prefooter, ya que el footer propiamente dicho irá un poco más abajo con la política de uso, el aviso legal y el copyright.

Una vez que hemos definido la estructura básica o el esqueleto de nuestra página, nos tocará pasar al siguiente nivel. Este consistirá en el diseño propiamente dicho de cada una de las áreas de nuestra web. Es decir, comenzaremos a “rellenar” cada una de esas áreas con el contenido que estará finalmente inserto en nuestra página web. Es recomendable que no nos pongamos a diseñar estos elementos antes de trabajar en el wireframe porque es muy probable que si lo hacemos en este orden, más tarde necesitemos modificar sus proporciones. Corremos el riesgo de deformar nuestras imágenes y tener que rehacer el diseño de cada uno de los elementos, lo cual se convertirá o en una pérdida de tiempo o en un resultado de menor calidad.

En este caso el diseño de nuestra página web será tremendamente sencillo. Utilizaremos los preceptos del material design, ya que vamos a utilizar para ejemplificar esta práctica el logotipo de Google. Debo aclarar que la finalidad de este tutorial es ilustrar en los conocimientos técnicos, por lo que el resultado estético en este caso es irrelevante. Como podéis ver, poco a poco hemos ido llenando el espacio de todas las áreas que hemos determinado previamente en nuestro esquema. Sin embargo, hemos introducido una pequeña modificación en el último momento. Como podrás haberte dado cuenta, hemos reducido bastante el tamaño de nuestro logotipo y hemos incluido en el área inferior header una línea divisoria que entronca perfectamente con el menú superior. En este caso hemos utilizado botones y materiales de un banco de recursos. Como diseñadores podemos diseñarlos nosotros mismos, (sobre todo esta opción es recomendable si queremos que presente una tónica muy similar a la que presenta la imagen de marca o el logotipo).

Web

Es importante que tengamos en cuenta que para maquetar este ejemplo vamos a trabajar en dos niveles diferentes. Por un lado, trabajaremos los objetos y por otro lado la apariencia del sitio web. Es decir por un lado en el esqueleto de nuestra web y por otro lado en todos los elementos flotantes que soportará este esqueleto. Os daréis cuenta que hay áreas que no serán flotantes en absoluto, como por ejemplo el área que ocupara nuestra barra lateral, el preefooter o la barra divisoria que divide el header del body.

web2

Las estructuras 1, 2, 3 y 4 formarán parte del background de nuestra página web, por lo que en realidad no nos será necesario exportar como tal desde Adobe Photoshop, aunque podemos hacerlo, no es necesario. Al tratarse de colores planos (uno de los ragos esenciales de flat design y el material design, pueden aplicarse perfectamente a través de código mediante una hoja de estilos CSS). Sin embargo, el resto de elementos sí que deben ser guardados para la posterior inserción en nuestro código HTML. En este pequeño esquema hemos reproducido también las áreas que pertenecen al background de la página para que tengamos una idea clara de cuál va a ser la apariencia final de nuestro sitio.

Como te podrás ir dando cuenta, el sentido de crear este esquema en Adobe Photoshop es obtener la dimensión real de cada elemento, y clarificar la disposición y estructura de cada elemento. Por supuesto, el contenido textual, no tiene cabida en esta fase del proceso ya que deberá ser suministrado desde nuestro editor de código. También debemos puntualizar que en esta práctica, vamos a trabajar con botones y elementos estáticos, aunque generalmente estos suelen aplicarse a partir de frameworks como Bootstrap o directamente a partir de Jquery.

Una vez que hemos creado cada uno de los elementos que integrarán nuestra página web, es el momento de empezar a exportarlos y guardarlos en la carpeta de imágenes situada dentro de la carpeta de proyecto HTML. Es importante que te acostumbres a exportar desde tu wireframe, porque es muy probable que necesites modificar alguno de los elementos originales en base a la configuración del esqueleto. (Por ejemplo en este caso, hemos cambiado el tamaño de los botones originales, el logotipo y la mayoría de elementos que forman parte de la composición, incluyendo las imágenes del área inferior).

Es importante que aprendamos a guardar cualquier elemento de forma independiente para guardarlos con las dimensiones que tiene y de una forma precisa. Cualquier error por mínimo que sea puede influir en todos los elementos que formen parte de tu página web. Ten en cuenta que estarán relacionados unos con otros y deben tener unas dimensiones perfectas para que puedan ser introducidos a partir de HTML en la web final. En este caso, necesitaremos recortar y guardar de forma independiente los siguientes elementos:

  • Nuestro logotipo.
  • Todos los botones (los que forman parte del menú principal y el resto).
  • Todas las imágenes.

Podemos hacerlo de muchas formas y quizá, tú encuentres una alternativa que te resulte más eficaz. Pero si es la primera vez que vas a realizar este tipo de maquetaciones, te recomiendo que sigas los siguientes consejos.

  • En primer lugar, deberás dirigirte a la carpeta donde se encuentre el archivo en formato PSD que contiene nuestro wireframe y duplicarlo tantas veces como elementos vayas a exportar. En este caso hemos creado 12 copias a partir del original y las hemos guardado en una misma carpeta. A continuación, renombrarás cada una de las copias y le asignaras a cada una de ellas el nombre del elemento que contenga. Nuestras 12 copias pasarán a llamarse: Logotipo, botón menú 1, botón menú 2, barra buscador, boton superior 1, botón superior 2, botón superior 3 y botón superior 4. Los cuatro restantes serán renombrados como: Imagen 1, Imagen 2, Imagen 3 e Imagen 4.
  • Una vez hecho esto abriremos el archivo con nombre logotipo.
  • Nos iremos a nuestra paleta de capas y localizaremos la capa que contiene nuestro logotipo. A continuación pulsaremos Ctrl/ Cmd al tiempo que hacemos click sobre la miniatura de dicha capa. De esta forma se nos habrá seleccionado de forma automática el logotipo.
  • El siguiente paso será indicar a Photoshop que queremos que haga un recorte de ese logotipo de una forma precisa. Para ello no tendremos mas que hacer una llamada a la herramienta de recorte a partir de la tecla o el comando C.
  • Una vez que hayamos hecho esto pulsaremos sobre nuestro botón de Intro para confirmar el recorte.
  • Ahora nos iremos hasta el menú superior Archivo para hacer click en guardar cómo. Seleccionaremos el nombre, que en este caso será “Logotipo” y le asignaremos un formato PNG, por ser el archivo que mayor calidad nos ofrece en web.
  • Repetiremos el proceso con todas los copias y los elementos. Cuando hayas realizado el recorte, asegúrate de que el resto de capas de nuestra paleta están invisibles o eliminadas. De este modo podremos guardar cada elemento con fondo transparente.

Boton1

En este caso estamos seleccionando nuestro botón menú 2 desde la paleta de capas. Puedes ver en la captura cómo automaticamente se han seleccionado los límites de nuestro botón.

boton2

Una vez que seleccionamos la herramienta de recorte a partir de la tecla C nuestro lienzo pasa a reducirse únicamente a las dimensiones de nuestro botón.

guardar-boton

Ahora es el momento de ir guardando uno a uno todos los elementos que forman parte de nuestra página web e ir incluyéndolos en la carpeta de imágenes y que posteriormente iremos utilizando. Haremos llamadas desde nuestro código y continuaremos con nuestro maquetado pero a partir de ahora desde nuestro editor de código.

Aunque hay muchas herramientas y alternativas para maquetar una página web y que convierten el proceso en algo totalmente intuitivo, es muy importante que aprendamos a hacerlo de forma manual. De este modo aprenderemos cuales son los fundamentos que hay detrás del diseño de una página web.

Resumen:

  1. Diseña la estructura de la página web prestando especial atención a los contenidos que deseas transmitir y a las secciones que debes crear en tu página web.
  2. Trabaja en tu esqueleto o wireframe a partir de Adobe Photoshop indicando en qué áreas aparecerán los contenidos y el formato de los mismos.
  3. Apoyándote en las medidas y marcas que has desarrollado anteriormente, comienza a diseñar la superficie de la web. Incluye todos los elementos (tanto flotantes como fijos). No te olvides de incluir los botones, el logotipo y las imágenes que correspondan.
  4. Recorta uno a uno todos los elementos que forman parte del proyecto. Asegúrate de que tienen las medidas oportunas y de que no te causarán problemas más adelante.
  5. Guarda todos los elementos en formato PNG en la carpeta de imágenes dentro de la carpeta de proyecto HTML.
  6. Ten en cuenta que este proyecto tendrá una salida a la ventana web por lo que es muy importante que tengas en cuenta el modo de color y apliques RGB.
  7. Inspírate en otras páginas web que admires antes de ponerte a trabajar y no olvides discutir sobre este tema con los miembros del equipo. En caso de que sea un proyecto para un cliente, procura atenerte al briefing en la medida de lo que te sea posible.

 

¿Necesitas contratar un hosting para tu web?
En SiteGround tienes disponible una amplia oferta de hostings para todo tipo de bolsillos y necesidades. Encuentra el hosting que estás buscando al mejor precio, con las últimas tecnologías en velocidad y seguridad web y soporte en español 24h:
HostingHosting WordPress

3 comentarios

  1. jajajajajajaja y al final de todo esto, te vas al boton de inicio, apagar equipo, y te vas a un puto profesional que te haga una web que no sea una puta mierda ;)

    1.    Álvaro Coslada dijo

      Esto no es una págia web. Dijo muy claro que son los fundamentos de la maquetacion en photoshop. A mi m sirvió, espero el proximo!!! Creativos Online :)

  2.   ronny dijo

    el tutotial me praece bien, pero talvez en la proxima lo haces mas detallado, aun estoy comenzando en esto del diseño, y cuando veo las imagenes con el resultado final hay algunos pasos que no sé como hacerlos. gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *