7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. UI Design

Cómo diseñar un portafolio sencillo basado en Instagram en Photoshop

Scroll to top
Read Time: 12 mins

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

En este tutorial te guiaré a través del proceso de creación de un portafolio simple y limpio basado en Instagram. Utilizaremos imágenes llamativas, una paleta de colores limpia y tipos de letra suaves. Empezaremos creando una versión web y luego te mostraré cómo adaptarla rápidamente para la vista móvil.

Recursos del tutorial

Para poder seguirlo necesitarás los siguientes recursos (disponibles gratuitamente):

Prepara el documento

Paso 1

Comienza creando un nuevo documento de Photoshop (Archivo > Nuevo...) con la configuración que se muestra a continuación. Eres libre de utilizar un lienzo de las dimensiones que prefieras; al fin y al cabo, la web no es de ancho fijo.

Asegúrate de que la resolución está ajustada a 72 píxeles/pulgada

Paso 2

Establezcamos algunas guías para que nuestro diseño tenga suficiente espacio y parezca equilibrado. No siempre utilizo una cuadrícula, pero establecer algunas pautas garantizará la pulcritud y ayudará a definir el ancho de nuestro sitio web. Ve a Ver > Nueva Guía... y establece algunas pautas. Normalmente elijo 1000px como ancho del sitio web y añado algunas directrices de las esquinas para que tenga espacio para respirar.

Nota: Directrices utilizadas para este tutorial: vertical a 100px, 600px y 1100px.

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

Paso 3

Siguiendo la etiqueta de Photoshop, mantendremos las cosas organizadas y fáciles de navegar y editar. Vamos a crear tres grupos de capas llamados Cabecera, Fotos y Contacto. Para crear grupos ve a Capa > Nuevo > Grupo... y dale a cada uno un título como el mencionado. Para crear rápidamente un grupo basta con hacer clic en el icono.

Diseño del área de la cabecera

La zona de la cabecera o "above the fold" (dondequiera que esté eso hoy en día) desempeña un papel muy importante a la hora de atraer a los usuarios y garantizar que los visitantes permanezcan en el sitio web. Para este portafolio utilizaré una foto de unas hermosas montañas y un mensaje sencillo para retratar la aventura y el desafío.

Paso 1

Primero vamos a crear el fondo del blog. Dentro del grupo de Encabezado dibuja cualquier forma de rectángulo de color usando la Herramienta Rectángulo (U). En mi caso he dibujado un rectángulo de tamaño 1200x600px y lo he colocado en la parte superior del documento.

Ahora descarga la foto de las montañas, arrástrala al documento de Photoshop y colócala encima de la capa del rectángulo. Cambia el nombre de la capa de la imagen a algo que puedas reconocer después, en mi caso he utilizado IMG. A continuación, mantén pulsada la tecla Alt y pasa el ratón por encima de la capa de la foto hasta que veas una pequeña flecha apuntando hacia abajo, entonces suéltala. Acaba de crear una máscara de recorte.

Ahora pulsa CMD+T y cambia el tamaño de la foto para que se ajuste a tus necesidades.

Consejo: mantén pulsada la tecla Shift para transformar proporcionalmente.

Paso 2

Hagamos algunos ajustes en nuestra imagen para que parezca más viva y memorable. Crea una nueva capa, llámala Sombra y crea una Máscara de Recorte como hicimos para la imagen de las montañas. A continuación, elige la Herramienta Gradiente (G) y establece los colores del gradiente para ir desde el negro #000000 hasta el transparente, manteniendo pulsada la tecla Shift arrastra desde la parte inferior de la imagen colocada hasta alrededor del centro de la misma. Por último, reduce la Opacidad de la capa de gradiente al 60%.

Suelo utilizar esta técnica para oscurecer las imágenes brillantes y colocar el texto blanco encima.

Paso 3

Añadamos algunos colores más a nuestra cabecera para hacerla aún más impresionante. Crea una nueva capa, nómbrala Gradiente y de nuevo elige la Herramienta Gradiente (G). Después de eso, establece los colores del gradiente para ir del púrpura #37056b al rosa #ff01fc (o cualquier otro color que quieras) y arrastra desde la esquina superior izquierda de la imagen hasta la esquina inferior derecha. Finalmente, reduce la Opacidad de la capa del gradiente al 20%.

Paso 4

Es hora de colocar un logotipo para nuestra cartera. Elige la Herramienta Tipográfica Horizontal (T) e introduce el nombre de tu cartera, ya sea tu nombre o apodo. Para este tutorial he utilizado una fuente muy elegante Kaushan Script de 21px de tamaño. Coloca tu nuevo logotipo en la esquina superior izquierda de tu sitio web, junto a la primera directriz vertical. Bájalo 50px para darle suficiente espacio negativo y que se vea limpio y profesional.

Paso 5

Añadiremos algunos iconos de redes sociales para que la gente pueda seguirte a ti y a tu trabajo. Arrastra los iconos de Facebook, Twitter e Instagram desde Iconfinder a tu documento de Photoshop, cambia el nombre de las capas para que sean rápidamente reconocibles y colócalos en la parte superior derecha junto a la última directriz vertical. A continuación, haz clic con el botón derecho del ratón en una de las capas de iconos, selecciona Opciones de fusión... y aplica la opción Superposición de color con el color blanco #ffffff. Haz lo mismo con el resto de los iconos.

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

Paso 6

Acabemos con nuestra zona de cabecera. Tenemos una hermosa imagen y mucho espacio. Pongamos un sencillo mensaje de introducción para que los visitantes puedan entender de qué trata este sitio web.

Elige la Herramienta Tipográfica Horizontal (T) y utilizando la fuente Lato (Negra) de 36px introduce un par de palabras. En mi caso utilizo "¡HOLA! SOY JONATHAN". Justo después, en una nueva línea abd con una fuente más pequeña introduce algo más sobre ti o tu trabajo que los visitantes puedan encontrar interesante. Para este tutorial he utilizado el tamaño 16px de Lato (Regular)

Me encanta viajar por todo el mundo y diseñar cosas bonitas.

Asegúrate de que la altura de la línea es lo suficientemente grande para que tu texto tenga espacio para respirar. Por último, coloca tu texto en el centro del área de la cabecera.

Diseño de la zona de fotos

En esta área colocaremos fotos de Instagram para mostrar algunos ejemplos de trabajo, demostrando la habilidad y relevancia del artista o diseñador.

Paso 1

Primero vamos a cambiar el fondo de esta zona. Minimiza el grupo de Cabecera haciendo clic en la flecha pequeña junto al nombre del grupo y abre el grupo de Fotos. Después, elige la Herramienta Rectángulo (U) y dibuja un rectángulo ligeramente gris. En mi caso he utilizado #eeeeee para el color y he dibujado un rectángulo de 1200x880px.

Paso 2

Ahora vamos a añadir una línea que describa el trabajo. Puede ser simplemente "Últimos trabajos" o, en mi caso, "Últimas fotos". El texto debe ser legible, por eso he utilizado el color gris #9b9b9b y la fuente es Lato (Bold) 12px de tamaño. Por favor, observa que el espaciado de las letras es bastante considerable (270), lo que se utiliza solo para estilizar el título del área y no funcionaría para un texto normal. Una vez más, dale a tu título suficiente espacio y muévelo hacia abajo de la imagen por 80px.

Paso 3

¡Genial! Por fin estamos listos para añadir algunas fotos geniales a nuestra cartera. Crea un nuevo grupo llamado Foto. Después tienes que decidir cuántas imágenes quieres mostrar en una fila. Me he decidido por cuatro, así que tengo que hacer algunos cálculos antes de determinar los píxeles.

El ancho de nuestro sitio web es de 1000px, así que lo dividiré por 4, lo que me da 250px para cada imagen, pero también tenemos que dejar algo de espacio a los lados, digamos 20px de separación entre las imágenes. Así que el ancho final de la imagen será (1000px-60px)/4=235px.

Elige la Herramienta Rectángulo (U) y, manteniendo pulsada la tecla Shift, dibuja un rectángulo de 235x235px. Después, elige una imagen de tu feed de Instagram o coge una de unsplash.com o getrefe.tumblr.com, arrástrala a tu documento de Photoshop y colócala encima del rectángulo. A continuación, manteniendo pulsada la tecla Alt, crea una máscara de recorte y con CMD+T cambia el tamaño de la imagen y colócala como quieras.

Paso 4

Ahora tenemos que añadir el número de "me gusta" (para que sirva de prueba social) y una breve descripción. Crea una nueva capa y nómbrala Sombra, colócala encima de la imagen y asegúrate de crear también una Máscara de recorte para ella. A continuación, con la Herramienta Degradado (G) aplica un degradado que vaya de negro a transparente como el utilizado anteriormente en este tutorial. Finalmente reduce su Opacidad al 60%.

Escoge la Herramienta Tipo Horizontal (T) e introduce un número de gustos. He utilizado un tipo de letra Montserrat de 13px y he dejado un espacio de 15px a la izquierda y en la parte inferior para dar suficiente espacio para respirar pero sin abrumar la imagen.

Ahora escoge la Herramienta Rectángulo (U) y dibuja un rectángulo blanco debajo de la foto. A continuación, coge la Herramienta Tipográfica Horizontal (T) y escribe una breve descripción de la foto que utilizarías en Instagram, incluyendo los hashtags y también la fecha de publicación en una nueva línea. La fuente que he utilizado para este tutorial es Montserrat de tamaño 12px en gris #808080.

Nota: asegúrate de ser coherente con el espaciado, si has utilizado 15px en los lados para el número de gustos haz lo mismo con la descripción.

Paso 5

Hemos terminado con el artículo de la foto y ahora es el momento de añadir algunas fotos más a nuestro portafolio. Minimiza el grupo de fotos y duplícalo pulsando CMD+J o haciendo clic con el botón derecho del ratón en el nombre del grupo y seleccionando Duplicar grupo... después duplica tantas fotos como quieras tener y organízalas en una cuadrícula. En mi ejemplo tengo 20px para el espaciado y diferentes imágenes de unsplash.com y getrefe.tumblr.com.

Diseño del área de contacto

En esta zona pondremos un mensaje sencillo y una "llamada a la acción" de contacto, así como información genérica sobre los derechos de autor.

Paso 1

Minimiza el grupo de fotos haciendo clic en la flecha pequeña junto al nombre del grupo y abre el grupo de contactos. Después de eso, elige la Herramienta Tipo Horizontal (T) y utilizando un tipo bastante grande introduce un titular para la sección, en mi caso es "GET IN TOUCH". Dale mucho espacio en la parte superior y añade una breve descripción para instar a la acción del usuario. He utilizado #565d64 para el color y la fuente Lato (Black) de 36px para el titular y Lato (Regular) de 16px para la descripción.

Paso 2

Ahora necesitamos un botón de llamada a la acción en el que los usuarios hagan clic para llevar a cabo la acción deseada. Para este tutorial vamos a utilizar un simple botón de contacto. He utilizado la Herramienta Rectángulo (U), he dibujado una forma sencilla y he colocado el texto encima. Asegúrate de utilizar mucho espacio por encima del botón para que parezca equilibrado y limpio.

Paso 3

Por último, pongamos una línea genérica de copyright en la parte inferior de nuestra cartera. Antes de hacerlo, elige la Herramienta Línea (U) y dibuja una sutil línea gris #e0e0e0 horizontal de 1px a través del documento dejando unos 90px de espacio en la parte inferior. Justo después coloca tu línea de copyright. En este caso he utilizado una fuente Lato (Bold) de 12px con un espacio entre letras de 270 y gris oscuro #9b9b9b.

Has terminado... Con la versión web

Y ya está, ¡todo listo con la versión web del portafolio! Ahora te mostraré cómo puedes transformar rápidamente la versión web para el móvil para que puedas visualizar el sitio web responsivo.

Diseñar una versión móvil

Paso 1

Creemos un nuevo documento y establezcamos unas dimensiones de 320x2100px. Crear tres directrices verticales a 20px, 150px y 300px para guiarnos, dejando algo de espacio a los lados. Después de eso selecciona todos los grupos en nuestro documento de versión web, arrástralos todos a una nueva pestaña de documento hasta que aparezca el nuevo documento y libera los grupos allí.

Paso 2

Ahora abre el grupo Encabezado, encuentra nuestro logo y usando la Herramienta Mover (V) muévelo a la derecha hasta que sea visible en nuestro nuevo diseño estrecho. Déjalo al lado de la primera directriz vertical. A continuación, busca los iconos sociales y muévelos hacia la izquierda.

Paso 3

Ahora es el momento de adaptar el mensaje principal. Escoge la Herramienta Tipo Horizontal (T), rompe la línea de descripción y reduce la fuente del mensaje principal para que se ajuste entre la primera y la tercera guía vertical. Ajusta las opciones de altura de la línea y ya está.

Paso 4

Abre el grupo de Fotos y mueve hacia arriba el título "ÚLTIMAS FOTOS" ya que no necesitamos tanto espacio en la vista móvil. A continuación, busca el grupo de fotos y muévelo entre las directrices verticales. Luego abre el grupo, haz clic en la forma del rectángulo de fondo de la descripción, pulsa CMD+T y cambia su tamaño para que tenga 280px de ancho. Haz lo mismo con el rectángulo de la foto. Por último, dispón las fotos en una columna y cambia su tamaño para que encajen entre las directrices.

Paso 5

Nuestra sección de fotos se ha hecho más larga que en la versión web, por lo que es necesario hacer ajustes de fondo. Busca la capa de fondo de Fotos y pulsa CMD+T para cambiar su tamaño, hacerla más alta y dejar algo de espacio en la parte inferior de la sección.

Paso 6

Por último, tenemos que reorganizar nuestra sección de contacto para que el mensaje se ajuste a las directrices establecidas y esté bien alineado. Abre el grupo de Contactos y con la Herramienta Tipo Horizontal (T) rompe las líneas de los mensajes de los contactos para que encajen entre nuestras directrices. Asegúrate de reducir el espacio por encima y por debajo de los elementos, ya que no necesitamos tanto espacio en blanco para la vista móvil. Además, reduce la altura de las líneas del mensaje para que tenga un aspecto limpio y profesional.

Lo último es dividir la línea de copyright en dos líneas para que también quede entre las directrices.

Vista móvil completa.

¡Felicidades!

Eso es todo. Hemos terminado con las versiones web y móvil de nuestro nuevo portafolio basado en Instagram. Espero que hayas aprendido algo nuevo y que las habilidades que has adquirido te ayuden a construir cosas increíbles en el futuro.

¡Me encantaría escuchar tus comentarios y ver los resultados de este tutorial!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.