Cómo crear un entorno web sencillo con Adobe Photoshop CS5

Hace tiempo que aprendí a hacer un entorno web sencillo, minimalista quizás, utilizando únicamente el programa Adobe Photoshop. Estos trabajos son llamados “skins” así que si queréis crear alguno por vuestra cuenta y necesitáis buscar ejemplos en Google o DeviantART debéis buscar esa palabra.

Pues bien, hoy os voy a enseñar, paso a paso, cómo crear uno.

El trabajo mostrado en este tutorial ha tutorial ha sido desarrollado en el sistema operativo MacOS X 10.6.6, con el programa Adobe Photoshop CS5. No os preocupéis si no coincidís conmigo en cuanto a equipo, se puede realizar con cualquier versión de Photoshop y utilizando Windows, siempre y cuando cambiéis la tecla que yo nombro como “Cmd” (Comando) por la “Ctrl” de toda la vida.

Para empezar creamos un nuevo documento, con fondo blanco o transparente, y con las medidas de 1400 píxeles de ancho por 900 píxeles de alto en una resolución de 72 píxeles por pulgada.

A continuación creamos un degradado (Estilo de capa >> Superposición de degradado) en la capa de fondo, con los valores establecidos en la primera imagen. Luego bajamos la opacidad hasta el valor de la imagen e invertimos el degradado. Puedes hacer clic en las imágenes para ampliarlas.

Ahora vamos a establecer el cuerpo de nuestro sitio web. El cuerpo de un sitio web es donde se sitúa el contenido, para quien no lo sepa. Para establecerlo sólo tenemos que fijar dos guías verticales a 12 centímetros de los bordes verticales de nuestra imagen. Es necesario, lógicamente, que tengamos habilitadas las reglas. Si no las tienes habilitadas presiona Cmd+R.

Una vez tengamos fijadas las guías podemos crear nuestro cuerpo. Para ello trazamos un rectángulo blanco que cubra todo el espacio situado en el centro de la imagen, entre las dos guías.

Una vez trazado el rectángulo podemos eliminar guías. Para ello, vamos a Visualización >> Borrar guías.

Una vez hecho esto nos damos cuenta de que el degradado no ha quedado como esperábamos, por lo menos en mi opinión. Si nos gustaría que la parte baja de nuestra imagen fuera más blanca y así se fusionara mejor con nuestro cuerpo, sólo tenemos que seleccionar la capa de Fondo, ir a Estilo de capa y aumentar la escala del degradado.

Una vez hecho esto podemos ir fijando los parámetros del cuerpo de nuestro sitio web. Lo primero de todo es lo que lo encabeza, el menú de botones. Lo creamos simplemente con la herramienta Texto, en la fuente, color y tamaño que deseemos.

Para igualar el resto del contenido al mismo margen que el menú, fijamos una guía al principio de la palabra “Inicio”. La medida es 12,38 centímetros, por lo que estamos a 1,38 centímetros del borde de nuestro espacio para el contenido. Aplicamos la misma medida en la guía del otro extremo del rectángulo. Después de eso podemos incluso trazar una línea divisoria del menú y el resto del contenido. Yo aumenté la imagen para que me fuera más posible ajustar la línea a las guías.

A continuación lo que tenemos que hacer es fijar el “header” o cabecera. Para ello utilizamos un logotipo que ya teníamos previamente diseñado o una simple fuente. Como yo buscaba la sensación de minimalismo en este tema, decidí hacer el logotipo con una sola fuente y utilizando únicamente la herramienta Texto.

Después duplicamos la línea divisoria de arriba y la situamos abajo. Para ello nos situamos sobre la capa de la línea (en la ventana de capas, claro) y presionamos Cmd+J, después la desplazamos bajo la cabecera que hemos creado previamente. Para evitar irregularidades visuales debemos ser fieles a las guías y mantener presionada la tecla “Shift” durante el desplazamiento. Una vez hecho esto podemos empezar a escribir nuestro contenido general de la web, compuesto por un título y un contenido o entrada. Repito de nuevo, debemos ser fieles a las guías.

Para terminar nuestro sitio web sólo tenemos que añadir un pie de página. El pie de página que yo cree está compuesto por una imagen y la firma de creación. Este último paso es importante si no quieres que nadie te robe tu obra y se atribuya los méritos o simplemente para que todo el mundo sepa quién es el creador.

Para crear la imagen lo que necesitamos es crear el espacio donde ubicaremos la imagen, lo hacemos situando dos réplicas de las líneas divisorias de la cabecera. Las colocamos imaginando que entre medio de las dos líneas irá la imagen.

Ahora abrimos nuestro “stock”. Un stock es una foto o “render” que se suele utilizar en el diseño gráfico, sobre todo en composiciones, páginas web, carteles, etc. Si buscas la palabra “stock” en Google encontrarás muchas páginas interesantes. Una de ellas es DeviantART, pero ten cuidado con los derechos de autor.

Bien, una vez abierto nuestro stock en una nueva mesa de trabajo en Photoshop, lo seleccionamos entero y vamos a Edición >> Cortar (también vale Copiar, pero tengo la costumbre de Copiar… todavía no se muy bien por qué). Ahora volvemos a la mesa donde tenemos nuestro entorno web y lo pegamos.

Una vez pegado, lo redimensionamos lo suficiente y lo situamos debajo de la capa de las líneas divisorias que recientemente hemos situado para crear el pie de página. Como habrás podido observar, todavía no hemos borrado las guías ya que todavía nos son útiles.

Ahora, sin dejar de trabajar sobre la capa de nuestro stock, lo movemos hasta que la parte más destacada de la imagen se quede entre las dos líneas. En mi caso dejé sólo un trozo del tronco y una parte de las hojas, además de las nubes, más que nada por que sería una aberración dejar dentro de las líneas el tronco solamente, por ejemplo.

Después de moverlo hasta dejarlo en el espacio deseado, lo que tenemos que hacer es seleccionar la sección que hay entre las líneas y posteriormente vamos a Selección >> Invertir, y presionamos la tecla “Retroceso” (“Suprimir”, en Windows).

Después de esto ya sólo nos queda un par de pasos. Empezamos fijando una guía justo en el centro de la imagen. ¿Para qué la vamos a utilizar? pues muy sencillo: para firmar nuestra obra.

La firma es algo indispensable en un trabajo de diseño, y más si va a estar expuesto al público. La firma es aquello que muestra a la gente quién lo ha hecho y también evita que otra gente se atribuya los méritos de algo que en realidad no ha hecho.

Para realizarlo sólo tenemos que fijar la guía en el centro (como bien he dicho) y acto seguido pegar nuestro logotipo, el cual solemos utilizar a modo de firma. También puede ser, lógicamente, un simple texto o una foto.

Como en mi caso la firma es negra, añadí Superposición de colores (en el menú de Estilos de capa), y le añadí el color gris oscuro (#3b3b3b) que utilicé en el texto y las líneas divisorias. De esa manera mejoramos la sensación de minimalismo de nuestro skin y mejoramos también el lustre de nuestro trabajo. De esta manera, todos los colores quedan combinados y reducimos la paleta a tres o cuatro colores base.

Con estos dos últimos pasos podemos dar por concluido nuestro trabajo. Ahora ya sólo queda ir a Visualización >> Borrar guías y ya tendremos nuestro entorno web terminado.

En este tutorial he enseñado a crear lo que es la imagen de un sitio web, osea, lo que viene a ser el entorno. Si de verdad queremos hacer de este entorno el entorno de nuestro sitio web debemos guardar el archivo .PSD y codearlo con CSS y HTML para tener una página web convencional o abrirlo en Adobe Flash para editarlo y añadirle animaciones, bases, música y hacer así de este entorno un sitio web interactivo, moderno y más visual, pero os reconozco que se necesita mucha experiencia y habilidad con Flash y programación para hacer una página web dinámica.

Espero que el tutorial os sirva para algo y que hayáis aprendido de él. Si tenéis alguna duda o queréis preguntar algo, agradecer, criticar o simplemente comentar, el tablón de comentarios está abierto al mundo justo debajo de esta entrada.

 

2 comentarios
  1. Gerardo dijo:

    Nesecito saber si cuando yo guardo el trabajo que hice, se gusrda con la misma resolucion, o cambia algo????

    • [ESTÁS VISITANDO UNA PÁGINA ANTIGUA. POR FAVOR, VISITA http://WWW.ALVAROBERNAL.NET]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: