Cyber Monday Sale Save up to 40% off unlimited courses, tutorials and creative assets. Cyber Monday Sale! Save Now
Advertisement
  1. Web Design
  2. UI Design

Diseñando un simple portafolio basado en Instagram con Photoshop

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Henry Reyes (you can also view the original English article)

Final product image
What You'll Be Creating

En este tutorial te guiaré a través del proceso de crear un portafolio simple y elegante basado en Instagram. Usaremos algunas imágenes llamativas, una paleta de colores sutil y tipografías suaves. Empezaremos creando una versión web y luego te mostraré rápidamente como adaptarlo a una versión móvil.

Elementos del Tutorial

Para seguirme necesitarás los siguientes elementos (disponibles gratuitamente):

Prepara el documento

Paso 1

Empieza por crear un documento de Photoshop nuevo (File > New…) usando las configuraciones mostradas abajo. Eres libre de usar el lienzo (canvas) de las dimensiones que prefieras - la web no tiene ancho fijo, después de todo.

Asegúrate que la resolución sea 72 pixeles/pulgada.

Paso 2

Vamos a establecer algunas guías, así nuestro diseño tendrá espacio suficiente y lucirá balanceado. No siempre uso una cuadrícula, pero establecer algunas guías asegurará orden y nos ayudará a definir el ancho de nuestro sitio web. Ve a View > New Guide… y establece algunas líneas. Yo normalmente elijo 1000 pixeles como el ancho de mi sitio web y agrego algunas líneas en las esquinas así el diseño tiene espacio para respirar.

Nota: Líneas usadas en este tutorial: vertical at 100px, 600px and 1100px.

Consejo: Tu puedes usar el plugin de Photoshop GuideGuide para hacer este proceso aún más rápido.

Paso 3

Siguiendo la etiqueta de Photoshop mantendremos las cosas organizadas, fáciles de navegar y de editar. Vamos a crear tres grupos de capas llamados Header, Photos y Contact. Para crear grupos ve a Layer > New > Group…  y dale a cada uno el título mencionado. Para la creación rápida de un grupo solo haz click en el icono.

Diseñando el área del encabezado (Header)

El encabezado o "header" (o como se llame) juega un papel importante atrayendo al usuario y asegura que permanezca en el sitio web. Para este portafolio usaré una foto genial de unas montañas y un simple mensaje que representa aventura y desafío.

Paso 1

Creemos primero el fondo del blog. Dentro del grupo Header dibuja una forma rectangular de cualquier color usando Rectangle Tool (U). En mi caso dibujé un rectángulo de 1200x600px y lo coloqué en la cima del documento.

Ahora descarga la foto de las montañas, arrástrala hasta el documento de Photoshop y colócala encima de la capa del rectángulo. Renombra la capa de la imagen por uno que puedas reconocer después, en mi caso usé IMG. Luego presionada la tecla Alt y coloca el mouse (ratón) sobre la capa de la foto hasta que veas una pequeña flecha apuntando hacia abajo, entonces suelta el mouse (ratón). Acabas de crear una Máscara de Recorte (Clipping Mask).

Ahora presiona CMD+T y cambia de tamaño la foto para que encaje a tu medida.

Consejo: Presiona la tecla Shift para transformar proporcionalmente.

Paso 2

Hagamos algunos ajustes a la imagen para que luzca más viva y memorable. Crea una nueva capa, nómbrala Shadow (o sombra) y crea una Máscara de Recorte (Clipping Mask) tal como hicimos con la foto de las montañas. Entonces selecciona la Gradient Tool (G) y establece que el degradado de color valla de negro #000000 a transparente, presionando la tecla Shift arrástra desde el fondo de la foto hasta la mitad de ella. Finalmente reduce la opacidad de la capa del degradado a 60%.

A menudo uso esta técnica de oscurecer las imágenes muy brillantes para ponerle texto encima.

Paso 3

Vamos a agregar algunos colores más a nuestro header (encabezado) para hacerlo aun más increíble. Crea una nueva capa, llámala "Gradient" y una vez más selecciona la herramienta Gradient Tool (G). Después de eso, establece que los colores del degradado vallan de morado #37056b a rosado #ff01fc (o cualquier otro color que desees) y arrasta desde la esquina superior izquierda de la imagen hasta la esquina inferior derecha. Finalmente, reduce la Opacidad del degradado a 20%.

Paso 4

Tiempo de colocar el logo a nuestro portafolio. Selecciona la Herramienta de Texto Horizontal u Horizontal Type Tool (T) e introduce el nombre de tu portafolio, ya sea tu nombre o apodo. Para este tutorial he utilizado una fuente con mucho estilo Kaushan Script con 21 pixeles de tamaño. Coloca tu logo nuevo en la esquina superior izquierda del diseño justo al lado de la primera línea vertical. Bájalo un poco, a uno 50px para darle suficiente espacio para que luzca más elegante y profesional.

Paso 5

Agregaremos algunos iconos de redes sociales así los visitantes puedan seguir tu trabajo y a ti. Arrastra iconos de Facebook, Twitter e Instagram de Iconfinder a tu documento de Photoshop, renombra las capas así podrás reconocerlas rápidamente y colócalas en la esquina superior derecha al lado de la ultima línea vertical. Luego de eso, haz click derecho en una de las capas de los iconos, selecciona Blending Options... y aplica la opción Color Overlay con el color blanco #ffffff. Haz lo mismo con el resto de los iconos.

Asegúrate de dejar suficiente espacio a los lados y alinear tus iconos horizontalmente con tu logo.

Paso 6

Terminemos nuestra área del Header (encabezado). Tenemos una bella imagen y mucho espacio. Vamos a agregar un simple mensaje de introducción para que los visitantes puedan entender de que se trata este sitio web.

Selecciona a Horizontal Type Tool (T) y usa la fuente Lato (color negro) a 36px de tamaño para agregar un par de palabras. En mi caso yo use "HELLO! I'M JONATHAN". Justo después de eso, en una nueva línea con un tamaño de fuente más pequeño, agrega más datos sobre ti mismo o tu trabajo que los visitantes puedan encontrar relevante. Para este tutorial yo he usado la fuente Lato a 16px de tamaño (Regular) 

I love to travel all around the world and design beautiful things.

Asegúrate que tu espacio entre líneas (line height) sea lo suficientemente largo para que tu texto tenga espacio para respirar. Finalmente, coloca tu texto en el medio del área del encabezado (Header).

Diseñando la área de fotos

En esta área colocaremos fotos sacadas de Instagram para mostrar algunos ejemplos de trabajo, demostrando cuan capacitado e importante el artista o diseñador es.

Paso 1

Vamos a crear nuestro primer cambio de fondo para este área. Minimiza el grupo Header al darle click a una pequeña flecha cerca del nombre del grupo y crea un grupo llamado "Photos". Luego de eso, selecciona la Rectangle Tool (U) y dibuja un rectángulo de color gris pálido. En mi caso, yo he usado #eeeeee para el color y dibuje un rectángulo de 1200x880px.

Paso 2

Ahora vamos a agregar una línea describiendo el trabajo. Esto puede ser simplemente "ultimos trabajos" o en mi caso "LATEST PHOTOS" (últimas fotos). El texto debe ser legible, por esa razón yo he usado gris #9b9b9b y la fuente es Lato (negrita) 12px de tamaño. Por favor toma en cuenta que el espacio entre palabras es muy importante (270) y lo hemos usado para estilizar el titulo del area y no funcionaria para el texto regular. Una vez más dale al título suficiente espacio y muévelo 80px debajo de la imagen.

Paso 3

Genial! Al fin estamos listos para agregar algunas fotos a nuestro portafolio. Crea un nuevo grupo llamado Photo. Luego de eso, necesitas decidir cuantas fotos tu quieres monstrar en cada fila. Me decidí por 4, así que necesito hacer calculos antes de determinar los pixeles.

El ancho de nuestro website es 1000px, así que lo dividiré por 4 resultando en 250px para cada imagen, pero también necesitamos un poco de espacio en los lados, digamos 20px de espacio entre las imágenes. Así que al final el ancho de las imágenes será (1000px-60px)/4=235px. 

Selecciona a Rectangle Tool (U) y, presionando la tecla Shift, dibuja un rectángulo de 235x235px de tamaño. Luego de eso selecciona una imagen de tu Instagram o consigue una de unsplash.com o getrefe.tumblr.com, arrástrala a tu documento de Photoshop y colócala encima del rectángulo. Entonces, presiona la tecla Alt, crea una Máscara de recorte o Clipping Mask y usando CMD+T cambiale el tamaño y colocalo como desees.

Paso 4

Ahora necesitamos agregar el número de "Me gusta" o "likes" (que actua como prueba social) y una corta descripción. Creamos una nueva capa y llámala Sombra, en este caso la llamaremos Shadow, colocalo encima de la imagen y asegúrate de crear una Máscara de Recorte o Clipping Mask para ello también. Luego de eso, usa la Herramiente de degradados o Gradient Tool (G) aplica un degradado que cambie de color negro a transparente tal como lo usamos más temprano en este tutorial. Finalmente reducimos su Opacidad a 60%.

Selecciona la Horizontal Text Tool (T) e introduce un número de "Me Gusta" o "likes". Yo he usado 13px de tamaño, fuente Montserrat, alineado a la izquierda, colocado a 15px de distancia del borde inferior izquierdo con el fin de dar espacio suficiente para que el diseño respire.

Ahora selecciona la Rectangle Tool (U) y dibuja un rectángulo blanco debajo de la foto. Entonces elige la Horizontal Text Tool (T) y escribe una pequeña descripción de foto que tu normalmente usarías en Instagram, incluye hashtags y también una fecha para la publicación en una línea nueva. La fuente que he usado para este tutorial es Montserrat 12px de tamaño en color gris #808080.

Nota: asegúrate de ser consistente con los espacios, si haz usado 15px en los números de "Me Gustas" o "Likes" entonces hazlo exactamente igual con la descripción.

Paso 5

Hemos terminado con la foto y ahora es tiempo de agregar algunas fotos más a nuestro portafolio. Minimizar el grupo Photo y duplícalo presionando CMD+J o haciendo click en el botón derecho del mouse en el nombre del grupo y seleccionando Duplicar Grupo o Duplicate Group... luego, duplica y coloca cuantas fotos desees y organízalas en una cuadrícula. En mi ejemplo tengo 20px de espaciado y diferentes imágenes sacadas de unsplash.com and getrefe.tumblr.com.

Diseñando el área de Contacto

En esta área pondremos un simple mensaje y "llamado de acción", así como información genérica de derechos de autor.

Paso 1

Minimiza el grupo Photos dando click a la fecha al lado del nombre de grupo y abre el grupo Contact. A continuación, usa la Horizontal Text Tool (T) y usando tamaño de fuente grande introduce un titular para esta sección, en mi caso utilicé "GET IN TOUCH" (Contáctame). Dale espacio en abundancia hacia arriba y agrega una corta descripción para motivar la acción del usuario. Yo he usado #565d64 como color y 36px de tamaño y Lato (negro) como fuente para el titular y 16px Lato (Regular) para la descripción.

Paso 2

Ahora necesitamos un botón de llamado de acción que los usuarios deseen dar click. Para este tutorial vamos a utilizar un simple botón de contacto. He usado la Rectangle Tool (U), dibujé una simple forma y coloqué texto encima de ella. Asegúrate de dejar abundante espacio para el botón para que se vea balanceado y sofisticado.

Paso 3

Finalmente introduzcamos una información genérica de derechos de autor en la parte inferior de nuestro portafolio. Antes de hacer eso, selecciona la Line Tool (U) y dibuja una sutil línea horizontal de color gris #e0e0e0 de 1px a lo largo del documento dejando aproximadamente 90px de espacio al final del documento. Justo después de eso coloca la información de derecho de autor (copyright). En este caso yo he usado 12px de tamaño Lato (Negrita) como fuente con espacio entre letras (letter spacing) de 270 y color gris oscuro #9b9b9b.

Hemos terminado... con la Versión Web

Todo listo con la version web de nuestro portafolio! Ahora te mostraré como puedes transformar rápidamente la versión web en una versión móvil y así puedas visualizar la adaptación del diseño en dispositivos móviles.

Desiñando una versión móvil

Paso 1

Crearemos un nuevo documento y estableceremos 320px x 2100px como las dimensiones. Crea tres líneas verticales en los 20px, 150px and 300px para guiarnos, dejando el mismo espacio a los lados. Luego de esto, selecciona todos los grupos en el documento de nuestra versión web y arrástralos todos hasta la ventana del nuevo documento y luego suéltalos encima del documento.

Paso 2

Ahora abre el grupo Header, encuentra nuestro logo y usa a Move Tool (V) muévelo a la derecha hasta que sea visible en nuestro nuevo documento. Colocale próximo a nuestra línea guía izquierda. Luego de eso, encuentra los iconos de redes sociales y muevelos hacia la izquierda.

Paso 3

Ahora es tiempo de adaptar el mensaje principal. Escoge la herramienta Horizontal Text (T), rompe la línea de la descripción y reduce el tamaño de fuente del mensaje principal para que encaje en medio de la primera y tercera línea vertical. Ajusta las opciones de espacio entre línea (line height) y esa parte quedará lista.

Paso 4

Abre el grupo Photos y mueve un poco hacia arriba el titulo "LATEST PHOTOS" ya que no necesitaremos tanto espacio en la versión móvil. Posteriormente, encuentra el grupo Photo y muévelo en medio de las líneas verticales. Entonces abre el grupo, haz click en la capa que corresponde al fondo de la forma de rectángulo, presiona CMD+T y redimensiónalo a 280px de ancho. Haz lo mismo con la foto del rectángulo. Finalmente, organiza las fotos en una columna y redimensiónalas para que queden dentro de las líneas verticales.

Paso 5

Nuestra sección Photos se ha vuelto más larga de lo que era en la versión web, así que necesitamos hacer ajustes en nuestro fondo. Encuentra la capa del fondo de photos y presiona CMD+T para redimensiónarlo, hazlo más largo y deja un poco de espacio al final de la sección.

Paso 6

Finalmente, necesitamos reorganizar nuestra sección Contact para que el mensaje encaje dentro de nuestras líneas verticales y este correctamente alineado. Abre el grupo Contact y usando la herramienta Horizontal Text (T) para lograrlo. Asegúrate de reducir el espacio de arriba y abajo de los elementos, ya que en la versión móvil no necesitaremos tanto espacio. De igual modo, reduce el espacio entre líneas (line height) del mensaje así lucirá más profesional.

Lo último es ajustar en dos líneas el texto sobre derechos de autor (copyright) para que encaje dentro de nuestras líneas verticales.

Vista completa de la version móvil.

Felicidades!

Eso es todo amigos. Hemos terminado con las versiones web y móvil de nuestro portafolio basado en Instagram. Espero que hayan aprendido algo nuevo y que las habilidades que hemos usado aquí le sirvan para crear cosas asombrosas en el futuro.

Me encantaría escuchar sus comentarios y sus resultados al hacer este tutorial!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.