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):
- Foto Raindrops de Unsplash
- Foto NYC skyline de Unsplash
- Plantilla en PSD Notebook de Dribble
- Vectores de iconos Gratuitos de Chapps
- Fuente Lato de Font Squirrel
- Avatar de User Inter Faces
- Ícono de Dribble de Iconfinder
- Ícono de Twitter de Iconfinder
- Ícono de Facebook de Iconfinder
- Ícono de Google+ de Iconfinder
Alistar el Documento
Paso 1
Comienza por crear una nuevo documento (Archivo > Nuevo) utilizando las configuraciones que se muestran a continuación.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
Paso 9
Para hacer nuestra línea visualmente más sutil, vamos a reducir su opacidad al 10%.
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.
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.
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.
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.
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.
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".
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
¡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.
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.
By
