Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Diseñar un Elegante Página de Portafolio en Línea de Tiempo utilizando Photoshop

by
Length:LongLanguages:
This post is part of a series called Design and Build a Responsive Timeline Portfolio Page.
Building the Responsive Timeline Portfolio Page

Spanish (Español) translation by David Castrillón (you can also view the original English article)

En este tutorial usaré Photoshop CS6 para diseñar una sencilla, limpia, página de portafolio de tres columnas con una línea de tiempo de tendencia. Durante este proceso vamos a ver la creación de cuadrículas personalizadas con guías, tipografía estilizada y jugaremos con colores y contrastes para lograr la estética que queremos. El archivo PSD finalizado estará listo para ser entregado a un desarrollador para que lo programe.


Elementos del Tutorial

Con el fin de seguir el tutorial necesitarás los siguientes activos (disponibles gratuitamente):


Alistar el Documento

Paso 1

Comienza por crear una nuevo documento (Archivo > Nuevo) utilizando las configuraciones que se muestran a continuación.

Create new document
Asegúrate de que la resolución esté a 72 ppi

Paso 2

Establezcamos algunas guías de manera que nuestro diseño tenga suficiente espacio y luzca equilibrado. Ve a Ver > Nueva Guía... y esteblece las siguientes guías: vertical en 20px, 50px, 115px, 230px, 550px, 570px, 875px y 1180px, y horizontal en 60px.

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

Add guidelines

Paso 3

Vamos a mantener nuestro documento bien organizado desde el principio, así que crearemos tres grupos de capas llamados Left Sidebar, Descriptions y Work Adhiriéndonos a esta etiqueta de Photoshop mantendremos las cosas organizadas y fáciles de navegar o editar. Para crear los grupos ve a Capas > Nuevo > Grupo... y dale a cada uno un título como lo hemos mencionado. Para la rápida creación de un grupo sólo haz clic en el icono.

Quickly create new group

Diseño del Área de la Barra Lateral Izquierda

La barra lateral a la izquierda servirá como espacio para un perfil de usuario, avatar, vínculos de redes sociales y la navegación primaria. Vamos a construirlo!

Paso 1

Selecciona la Herramienta Rectángulo (T), cambia el color de fondo a #11171c y dibuja un rectángulo de 230x1320px dentro del grupo Left Sidebar. Debe colocarse a la izquierda del documento entre el borde del documento y la cuarta guía vertical.

Draw a rectangle on the left

Paso 2

Crea un nuevo grupo sobre la forma del rectángulo creado anteriormente y asígnale el nombre Profile Pic. Después de esto, elije la Herramienta Elipse (U) y, manteniendo pulsado el botón Shift, dibuja un círculo de 100x100px y colócalo justo debajo de la primera guía horizontal. Debe estar centrado con la tercera guía vertical también.

Draw a circle

Paso 3

Ahora ve a uifaces.com y toma uno de los avatares disponibles. Alternativamente, simplemente encuentra tu propia foto y pégala sobre la forma circular recientemente creada. Después de eso, mantén pulsada la tecla Alt y el ratón sobre la miniatura de la capa de la foto hasta que veas una pequeña flecha hacia abajo. Cuando la veas, suelta el botón y esto creara una Máscara de Recorte, uniendo tu foto a una forma circular. Alínealo hasta que veas que se ajusta, utilizando la Herramienta Mover (V).

Place photo above the circle

Paso 4

Ahora minimiza el grupo Profile Pic haciendo clic en la flecha pequeña cerca al título del grupo. Después de esto, cambia el color del primer plano a #FFFFFF y elige la Herramienta Texto Horizontal (T). Seleccione la fuente Lato (Regular), establece el tamaño en 16pt y escribe el nombre del dueño del portafolio. En mi caso es el absolutamente ficticio Chris Johnson. Úbicalo 25px por debajo de la foto de perfil y asegúrate de que está centrado con la tercera guía vertical.

Write owner name

Paso 5

Ahora necesitamos una breve descripción de nuestro portafolio para que los visitantes instantáneamente tengan un sentido de lo que se trata todo. Vamos a utilizar la misma herramienta; todo lo que tenemos que hacer es disminuir el tamaño de la fuente a 14pt y escribir un breve par de líneas sobre el dueño del portafolio. Para que luzca organizado y equilibrado colócalo 20px más abajo así tendrá algo de espacio para respirar.

Write short description

Paso 6

Bien. Ahora vamos a poner algunos iconos de redes sociales lo que hará fácil conectar con el dueño del portafolio. Crea un nuevo grupo con el siguiente título: Social Media. Después de esto, dirígete a Iconfinder para descargar los iconos de Dribbble, Twitter, Facebook y Google + como PNG. Arrástralos al documento de Photoshop y colócalos dentro del grupo Social Media. Ahora haz clic derecho en el icono de Dribbble, selecciona Opciones de fusión... y aplica la opción Color Overlay. En lugar del rojo predeterminado, establece el color en blanco.

Set color overlay

Paso 7

Todos los otros íconos deben ser blancos también, así que vamos a aplicar el mismo estilo de capa con el resto de los iconos. Simplemente haz clic en la capa del icono de Dribbble y selecciona Copiar Estilo de Capa. Luego, sostén la tecla CMD y selecciona las capas de Twitter, Facebook y Google +. Otra vez haz clic derecho en uno de ellos y selecciona Pegar Estilo de Capa. Finalmente, alinea los íconos para que tengan 10px de espacio en cada lado y que el grupo esté ubicado 20px por debajo del texto de la descripción.

Paste layer style and align icons

Paso 8

Vamos a cambiar el color del primer plano a blanco #FFFFFF, luego selecciona la Herramienta Línea (U), establece su grosor en 1px y, manteniendo presionada la tecla Mayús, dibuja una línea horizontal desde el borde izquierdo del documento a la cuarta guía vertical. Muévela 50px de los iconos.

Draw 1px horizontal line

Paso 9

Para hacer nuestra línea visualmente más sutil, vamos a reducir su opacidad al 10%.

Reduce line layer opacity

Paso 10

Vamos ahora a concentrarnos en nuestra navegación, así que crea un nuevo grupo llamado Navigation y colócalo encima de la capa del rectángulo oscuro. Después de eso, elige un icono de documento de los Iconos Vectoriales Libres del conjunto de Iconos de Chapps y arrástralo hasta el documento del portafolio. Presiona CMD + T para cambiar el tamaño del icono a 13x16px. Después de eso, haz doble clic en el nombre de la capa y cámbiale el nombre a Work Icon. Con esto hecho, haz doble clic en la miniatura de la capa y cambia el color a #d35136. Coloca el icono 40px por debajo de la línea sutil y 20px desde el borde izquierdo, alineado con la primera guía vertical.

Resize the icon

Paso 11

Ahora para algunos elementos de navegación. Elige la Herramienta Texto Horizontal (T), elige la fuente Lato (Bold), establece el tamaño en 14pt y escribe lo siguiente: WORK. Ubícala al frente de la segunda guía horizontal y asegúrate de que se alinea verticalmente con el icono de trabajo.

Write work

Paso 12

Cambia el color del primer plano a #424a51 y, usando la misma herramienta de texto, escribe algunas categorías bajo la palabra Work, cada uno a partir de una nueva línea. Asegúrate de que la altura de la línea se establezca en 24pt de manera que nuestras categorías sean fácilmente legibles. Ubica la capa de categorías 20px debajo de la capa de texto creada anteriormente.

Write down categories

Paso 13

Es necesario indicar el estado activo del enlace. Para la categoría activa utiliza blanco #FFFFFF, simplemente haz clic en el texto mientras todavía esté seleccionada la Herramienta Texto Horizontal (T), destaca la primera categoría y cambia el color.

Change active link to white

Paso 14

Ahora elije un icono de usuario desde los iconos previamente utilizados y redimensionala a 16x16px usando CMD + T. Haz clic dos veces en la miniatura de la capa del icono y cambia el color a #27b599, cambia el nombre de la capa a User Icon por lo que es más fácil gestionar nuestras capas. Ubícalo 30px por debajo de la última categoría para darle algo de espacio negativo que actuará como separador.

Place user icon

Paso 15

Cambia el color de primer plano a verde #27b599 como el utilizado para User Icon y elege la Herramienta Texto Horizontal (T). Selecciona la fuente Lato (Bold), establece el tamaño a 14pt y escribe ABOUT. Coloca esta etiqueta después del icono de usuario, como lo hiciste en la sección anterior. Luego cambia el color del primer plano a #424a51 e introduce algunos enlaces para la sección "About".

Write down about link titles

Paso 16

Vamos a crear ahora la última sección de nuestra navegación: Contacto. Elige el icono de correo de los iconos vectoriales gratuitos de Chapps y redimensionalo a 16x13px, después cambia su color a #088ecc y ubícalo consistentemente como los iconos anteriores 30px por debajo de la última capa de texto de la sección About. Tras haber ingresado el texto CONTACT, cambia el color del primer plano a #424a51 y anota algunos títulos de enlace para la sección.

Designing navigation contact section

Diseño de las Áreas de Descripciones

Cambiándonos a un bloque más a la derecha, ahora comencemos con las descripciones de los artículos de nuestro portafolio.

Paso 1

Minimizaremos los grupos actualmente utilizados de Navigation y Left Sidebar haciendo clic en las flechitas al lado de los nombres de cada grupo. Expande el grupo Desccriptions, cambia el color del primer plano a #f7f7f7 y selecciona la Herramienta Rectángulo (T). Después de eso, dibuja una forma de rectángulo vertical entre el borde de la barra lateral izquierda  Left Sidebar y la quinta guía vertical. Este rectángulo debe ser de 320x1320px.

Draw a vertical rectangle

Paso 2

Ahora cambia el color del primer plano a #e7e7e8 y seleccionar la Herramienta Línea (U). Establece el peso a 1px y manteniendo pulsada la tecla Shift, traza una línea vertical de arriba a abajo en la quinta guía vertical. Esto debe crear una mejor separación visual entre el fondo de la sección del grupo Descriptions y el fondo principal. Presiona CDM+ para ocultar/ver las líneas guía. Por último, cambia el nombre de la capa a V Line así tendrá sentido más adelante.

Draw a vertical line

Paso 3

Vamos a dibujar otra línea vertical, así que cambia el grosor de la línea a 3px y traza otra línea a través del documento (manteniendo presionada la tecla Shift para mantener la verticalidad perfecta). Haz clic dos veces en el nombre de la capa para cambiar su nombre a Timeline. Luego, mueve la línea 24px desde el borde de la barra lateral izquierda Left Sidebar y 30px hacia abajo desde la parte superior del documento.

Draw another line

Paso 4

Cambia el color del primer plano a nuestro rojo #d35136 usado anteriormente y elije la Herramienta Elipse (U). Después de eso, mantén pulsada la tecla Shift y dibuja un círculo de 11x11px. Colócalo 20px a la derecha desde el borde de la zona de la barra lateral izquierda Left Sidebar y 20px hacia abajo desde la parte superior del documento. Nuestro pequeño círculo debe ubicarse bien en la parte superior de la línea creada recientemente.

Draw a red circle

Paso 5

Ahora haz clic derecho en el capa del círculo recientemente creado y selecciona Opciones de fusión.... Haz clic en Trazo. Establece el Tamaño en 3px, su Posición en Afuera y el color en #f7f7f7. Este trazo de color en el fondo va a crear el efecto de que nuestro círculo está flotando junto a una línea.

Stroke options
Circle with stroke

Paso 6

Cambia el color del primer plano a #11171c y escoge la Herramienta Trazo Horizontal (T). Como es usual, elige la fuente Lato (Bold), establece el tamaño en 14pt y escribe la fecha del trabajo, por ejemplo "07 de noviembre de 2013". Luego, utilizando la Herramienta Mover (V), mueve la capa de la fecha 20px a la derecha del círculo rojo y 20px hacia abajo desde la parte superior del documento.

Deberías, por ahora, haber notado un patrón en nuestro espacio. Es importante ser consistente y usar un espaciado rítmico para diferentes elementos para que el diseño luzca equilibrado.

Write the date of work

Paso 7

Cambiar el color del primer plano #5e5e5e para que sea ligeramente más liviano que el de la fecha. Esto crea una jerarquía visual, haciendo mucho más fácil la lectura. Utiliza la misma Herramienta Texto Horizontal (T) y la fuente Lato, pero esta vez cambiaremos el peso de la fuente a Regular y escribiremos unas pocas líneas para dar una descripción breve del trabajo. Luego, haz un salto de línea pulsando la tecla Enter dos veces y escribe el nombre del cliente y las etiquetas para el trabajo por ejemplo:

  • Cliente: Despreneur
  • Etiquetas: Web Design

Resalta "clientes" y "etiquetas" y establece el peso de la fuente en Bold, así se diferenciarán de la descripción y serán percibidos como enlaces. Por último, asegúrate de que la línea esté configurada en 18pt de manera que nuestras líneas tengan suficiente espacio para respirar.

Brief description

Paso 8

Para duplicar las características que hemos hecho, selecciona el círculo rojo, la fecha y la descripción de la capa. Luego pulsa CMD + J, o haz clic y selecciona Duplicar capas..., pulsando Ok después de eso. Mueve los contenidos duplicados un poco de cientos de pixeles bajo el original. Ajustaremos la posición de esto más adelante, ya que es dependiente de la altura de la imagen del trabajo que colocamos junto a él.

Duplicate description layers

Diseñando el Área de Trabajo

La sección vertical final de nuestro diseño es para las piezas del portafolio en sí mismo. Construyámoslo.

Paso 1

(Como siempre) empezaremos por reducir al mínimo el grupo Descriptions utilizado actualmente y abriendo el grupo Work. Elije la Herramienta Rectángulo (U) y dibuja un rectángulo con el tamaño de 610x400px entre las guías verticales sexta y octava (el color no importa esta vez, sólo asegúrate de que sean visibles). Colócalo 20px por debajo de la parte superior del documento por lo que tiene 20px de espacio en todo su alrededor.

Draw another rectangle

Paso 2

Ahora escoge una imagen de tu trabajo, vamos a usar la captura de pantalla de la Plantilla Notebook PSD que diseñé anteriormente. Arrástralo a la ventana del documento en Photoshop y asegúrate de colocarla encima de la capa de la forma rectangular creada anteriormente. Mantén presionada la tecla ALT, pasa el ratón sobre el nombre de la capa del pantallazo hasta que aparezca una pequeña flecha hacia abajo. Cuando lo veas, suelta la tecla y creará una Máscara de Recorte, de manera que tu imagen será visible sólo entre las áreas del rectángulo. Finalmente, presiona CMD+T y redimensiona la imagen como te gustaría que fuera.

Place an image
Mantén pulsada la tecla Shift cuando cambies de tamaño para mantener las proporciones.

Paso 3

Selecciona la capa de la forma rectangular, duplícala y muévela 20px por debajo de la primera imagen. Añade otra imagen de tu trabajo como lo hicimos anteriormente. Para el segundo ejemplo de trabajo he utilizado una foto de gotas de lluvia de unsplash.com. Después de eso, crea un tercer trabajo y colócalo 20px por debajo del segunda. Para la tercera imagen del trabajo he utilizado la foto NYC Skyline , de nuevo de unsplash.com.

Place some more work images

Paso 4

Ahora tenemos que volver atrás y asegurarnos de que todo está alineado correctamente. Vuelve a abrir el grupo Descriptions y encuentra las capas rojas del círculo, la fecha y la descripción. Selecciónalas presionando la tecla CMD y muévelas hasta que se alineen con la parte superior de la segunda imagen del portafolio. Duplica las capas haciendo clic en CMD + J, o clic en las capas y seleccionar Duplicar capas... Después de eso, colócalas junto a la tercera imagen del trabajo y alinéalas con la parte superior de la imagen.

Align descriptions with work images

Paso 5

Maravilloso. Estamos cerca al final. Minimiza el grupo Descriptions y abre de nuevo el grupo Work. Después de eso, elige el icono de actualizar desde el conjunto de iconos y arrástralo hasta el documento del portafolio. Pulsa CMD + T y redimensiónalo a 20x20px. Haz doble clic en la capa del icono y cambia el color a #a0a2a4. Finalmente ubícalo a 20px por debajo de la imagen del trabajo.

Resize and recolor refresh icon

Paso 6

Último paso! Vamos a crear un elemento dinámico que se mostrará cuando nuestro sitio web se desplace hacia abajo y el servidor cargue más trabajos. Escoge la Herramienta Texto Horizontal (T), elige la fuente Lato (Bold) a un tamaño de 14pt e introduce el texto Loading... Colócalo al lado del icono de actualización y muévelo 10px a la derecha. Luego de esto, selecciona ambas capas, el icono y el texto y ubícalos al centro de la línea vertical de la imagen del trabajo.

Write loading and center it

¡Ya está listo!

Ahí lo tienes. Caminamos a través de la creación de un diseño para una página web de portafolio, desde cero, de una manera organizada y eficiente. El archivo que hemos construido está listo para ser entregado a un desarrollador que pueda trabajarlo, encontrar todos los elementos necesarios y construirlo para el navegador.

Timeline portfolio preview

Espero que hayas aprendido algo nuevo siguiendo este tutorial. Si tienes alguna pregunta, o tienes dificultades no dudes en mencionarme en la sección de comentarios o a través de 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.