Diseño web en Photoshop CS6

En el ciberespacio existen miles de millones de páginas web o mejor dicho sitios web. Lo primero que llama la atención al ingresar al sitio es el diseño, aunque muchos no lo toman en cuenta el subconsciente capta esa parte y eso es lo que hace que les agrade el sitio o no y pues el resultado negativo es no volver a tener a ese usuario como visitante. Claro que el diseño web no siempre es importante sino también el contenido, pero yo diría que en un 50%.

En este artículo no vamos a hablar del contenido de la web ni de lo hay que publicar en cada artículo, este sitio se trata del diseño, por lo que en este tutorial vamos a ver cómo realizar un sencillo diseño web, un mockup (maqueta), que, al presentar a un programador web, este creará el sitio web recortando las imágenes del diseño y utilizando lenguaje de programación como HTML y CSS para dividirlo y presentarlo.

Este diseño lo realizaré en Photoshop CS6, si ustedes tienen otras versiones no va haber problema en realizarlo.

Paso 1: Bien, comenzamos este diseño creando un nuevo documento de “1000 x 800” píxeles. Este es un tamaño muestra, podemos aumentar el tamaño si es que el contenido de la página web es mucho más extenso.

Paso 2: Cambiamos los colores por blanco, “#FFFFFF”, como frontal y “#C8C8C8” como color de fondo.

Paso 3: Hemos cambiado los colores para pintar el fondo en degradado, con el obtendremos un diseño elegante.
Seleccionamos la herramienta degradado modo radial y pintamos desde el centro hacia el lateral.

Paso 4: Creamos una nueva capa. En esta capa vamos crear una imagen para la parte superior en donde va a ir el logo del sitio web y el menú. Seleccionamos la herramienta lazo poligonal y hacemos una selección como el de la imagen:

Paso 5: Para que la selección sea recta creamos la selección manteniendo presionado la tecla “SHIFT”. Seguidamente lo pintamos con la herramienta bote de pintura, en este caso el color será “#ed6714” que es un tanto anaranjado.

Paso 6: Ahora vamos a agregarle algunos efectos como sombra y degradado para que el diseño web sea llamativo. Vamos al menú “Capa → Estilo de capa → Sombra paralela”. Colocamos lo siguiente y luego nos vamos a “Superposición de degradado”.

Hasta ahora lo siguiente

Coloqué un texto que indica el logo.

Paso 7: Lo siguiente que vamos a realizar es el texto del menú en donde va los enlaces principales como el enlace de “Servicios”, “Contáctenos” u otros. Así que, con la herramienta texto horizontal, creamos los texto con la fuente “Arial Rounded” a un tamaño de “20pt” color blanco. La fuente es opcional, si no tienen esa escojan uno que a ustedes les parezca bien.

Paso 8: Los alineamos perfectamente, para eso vamos a colocar en donde va a ir el texto inicial, que en este caso sería “Portada”; así mismo colocamos al final “Contáctenos”. Luego seleccionamos todas las capas de texto del menú y presionamos en la parte superior lo siguiente:

Siempre cuando vamos a trabajar en varias capas hay que ordenarlo por grupos, así que vamos a crear un grupo y colocar todas las capas del menú.

También hay que colocarle nombre a cada capa y grupo, para eso vamos a hacerle doble clic al nombre de la capa o grupo y colocamos nombres que lo identifiquen.

Paso 9: Bien, ahora vamos a crear, en una nueva capa, una línea que divida cada texto del menú. Seleccionamos la herramienta línea a un tamaño de 1px color blanco. Creamos la línea manteniendo presionado la tecla “SHIFT” para que sea recta. Seguidamente bajamos la opacidad.
Cuando trabajamos en partes muy pequeñas es recomendable aumentar el zoom, para eso seleccionamos la herramienta zoom y hacemos clic para acercarnos.

Duplicamos esta capa yendo al menú “Capa → Duplicar capa → Ok”. Movemos la capa una vez a la izquierda y seguidamente vamos al menú “Imagen→ Ajustes → Tono/Saturación”. Allí bajamos la luminosidad a “-100”.
Así mismo combinamos ambas capas seleccionándolos y yendo al menú “Capa → Combinar capas”.

Esa línea tenemos que duplicarlo para separar los demás textos. Una manera más rápida de realizar este proceso es mantener presionado primero la tecla “ALT”, hacemos clic en la línea y arrastramos, luego presionamos la tecla “SHIFT”. Si presionamos las dos teclas al mismo tiempo nos va a salir una alerta de error.

Paso 10: Alineamos tanto las líneas y el texto, para esto vamos a seleccionar las líneas y el grupo (texto del menú), seguidamente hacemos clic en la parte superior (ver la siguiente imagen).

Nuestro diseño web ya va teniendo algo de forma.

Paso 11: Ahora creamos un espacio para poder colocar el texto de introducción y una imagen. Así que seleccionamos la herramienta rectángulo y, en una nueva capa, creamos un rectángulo de color blanco a un tamaño como la siguiente adecuado como en la siguiente imagen:

Paso 12: Creamos una máscara de recorte y la pintamos con la herramienta degradado modo lineal desde la parte superior hasta abajo de la imagen.

Paso 13: Colocamos alguna imagen. Podemos utilizar imágenes gratuitas de lorempixel. Este sitio web nos brinda miles de imágenes que la mayoría de diseñadores web lo usan para sus diseños web y publican así sus maquetas en wordpress, por ejemplo.
Ingresamos a la siguiente dirección. Si no les gusta la foto podemos actualizar (F5) hasta que aparezca uno que les agrade.
Bueno, copiamos la imagen y la pegamos en una nueva capa. Colocamos la imagen hacia la parte izquierda como en la siguiente captura de pantalla:

Cabe señalar que si, por ejemplo, hicimos el cuadrado pequeño podemos agrandarlo yendo al menú “Edición → Transformación libre”.

Paso 14: Ahora debemos colocar textos, y para no estar pensando en qué texto puede ir también podemos usar texto de la web lipsum.
Con la herramienta texto horizontal vamos a crear un espacio rectangular y colocar el texto extraído de Lipsum.

El color que utilicé para el texto es “#494949”. Así mismo cada línea del texto está más separado entre sí, para ello seleccionamos todo el texto y hacemos clic en la imagen de Conmuntar paneles Carácter y Párrafo. Editamos lo siguiente:

También coloqué algunas palabras en negrita del mismo color del menú.

Creamos guías, esto lo debimos hacer al comienzo ya que las guías en Photoshop nos ayuda a poder alinear y separar los texto e imágenes.

Paso 15: Ahora, creamos una nueva capa y con la herramienta texto horizontal creamos un espacio de 280px de ancho. Colocamos un texto de la página que les mostré hace un momento (lipsum).

Paso 16: Ahora, como hicimos en la parte de las líneas del menú, vamos a duplicar el texto unas dos veces. Luego los seleccionamos y, haciendo clic en el icono de la parte superior lo alineamos.

Paso 17: Como hicimos con las líneas del menú, aquí, igualmente, creamos una línea, con la herramienta línea, de “1px” como grosor y de color blanco. Seguidamente duplicamos la capa (“Capa → Duplicar capa → Ok”), la movemos una vez hacia la derecho y luego vamos al menú “Imagen → Ajustes → Tono/Saturación”. Allí bajamos la luminosidad a “-30”.

Combinamos las capas y la duplicamos.

Seleccionamos las capas de las líneas y los textos para alinear. Si deseamos creamos un grupo para tener un mayor orden en las capas.

Paso 18: Creamos el footer, para eso seleccionamos la herramienta rectángulo y, en una nueva capa, creamos un rectángulo de color “#ed6714”. Seguidamente, con la herramienta texto horizontal, colocamos lo que usualmente se pone en las páginas web “© 2012 Derechos Reservados.” o cualquier otra cosa.

Finalizamos seleccionando ambas capas y alineándolo en el icono de la parte superior.

Y así hemos finalizado este sencillo diseño web. Con la práctica se hace el maestro por lo que uno debe practicar muchas veces y así mejorar la técnica de diseño aprendiendo más efectos y maquetarlo en muchas formas. Les servirá a ustedes quizás cuando estén pensando en hacer su propio sitio web o para alguna empresa.