Share
En este tutorial, veremos una extensión gratuita de Photoshop llamada Velositey. Velositey (actualmente en la versión 2) proporciona patrones de diseño comunes para crear prototipos de diseño de sitios web dentro de Photoshop.
"Pase más tiempo perfeccionando los detalles y el estilo y menos tiempo en todas esas cosas aburridas". - Velositey
Antes de obtener nuestro Velositey, examinemos primero algunos patrones de diseño comunes que se encuentran en muchos sitios web en estos días.
Si observamos tres de los temas de WordPress más populares en ThemeForest (Avada, Enfold y Salient), notará que comparten algunas características comunes..
En primer lugar, en pantallas grandes, tienen una barra de navegación con su imagen de logotipo establecida a la izquierda y la navegación a la derecha. Debajo de la barra de navegación, generalmente encontramos una imagen de héroe junto con un par de botones que se muestran a través de una presentación de diapositivas animada. Después de las sorprendentes áreas de encabezado, a menudo encontramos columnas o algún tipo de diseño basado en cuadrícula.
Dado que este tipo de diseño es tan común en la naturaleza, es posible que a menudo se encuentre construyendo algo similar. Prototipar diseños familiares una y otra vez puede por lo tanto convertirse en una tarea repetitiva.
En este tutorial, veremos las características de Velositey y aprenderemos a usarlas para automatizar tareas comunes, lo que en última instancia acelerará nuestro flujo de trabajo de creación de prototipos. Además, aprenderemos cómo hacer uso de las funciones nativas de Photoshop para personalizar y agregar algunas campanas y silbidos a nuestro prototipo.
Sin más preámbulos, comencemos.!
El requisito mínimo para ejecutar Velositey es Adobe Photoshop CC 2014 / CS6. Asegúrese también de que tiene instalado Adobe Extensions Manager. Con los presentes, descargue Velositey (deberá pagar con una publicación de Tweet o Facebook) e instálelo a través de Adobe Extension Manager.
Inicie Photoshop y navegue hasta Ventana> Extensión> Velositey para revelar el panel de Velositey.
Panel de velositeyPara empezar, crearemos un diseño simple..
Primero, necesitamos crear un nuevo documento en blanco a través del [+] Nueva plantilla botón dentro del panel Velositey.
Este documento recién generado vendrá con líneas de guía que abarcan un ancho de 1170px con un canal de 30px. Esta es una disposición conveniente si planea usar Bootstrap como base de la rejilla de su sitio web.
Una de las cosas iniciales que verás en el [+] Nueva plantilla El botón es una serie de pestañas, la primera de las cuales es para encabezados. Voy a optar por el décimo patrón de encabezado. Haga clic en él, luego Velositey generará instantáneamente el encabezado y lo colocará en el documento..
Opción de encabezado en el panel VelositeyEn nuestro caso, nos da un encabezado con el logotipo establecido a la izquierda y la navegación a la derecha. En nativo de photoshop. Capa En el panel, también encontrará que las capas están adecuadamente estructuradas y nombradas dentro del Encabezamiento grupo.
El diseño simple del encabezado y su estructura de capa en el Capas panel.Nota: si luego opta por otra opción de encabezado, Velositey reemplazará el primer ejemplo.
A pesar de las desventajas, muchas personas todavía quieren un control deslizante en su sitio web. Agregar un área de control deslizante es tan fácil como el área de encabezado; Velositey proporciona un conjunto de patrones de control deslizante listos para agregar con el clic de un botón.
Las opciones de patrón de diseño Slider..Aquí he optado por el último patrón de control deslizante que nos da un control deslizante que contiene un encabezado, contenido ficticio y dos botones.
El área del control deslizante, con las capas correspondientes .Como puedes ver arriba, encontrarás un nuevo grupo., Deslizador, añadido dentro del Capa panel donde residen todas las capas deslizantes.
Agregar el área de contenido es igualmente sencillo. Vaya a la tercera pestaña en el panel de Velositey y encontrará algunas opciones de contenido.
Patrones de diseño de contenidoOpté por el tercer estilo, que nos da el contenido distribuido en tres columnas, cada columna con un encabezado, un marcador de posición de imagen y un contenido ficticio..
El área de contenido con sus capas.UNA Módulo, En este caso, es un bloque de contenido independiente. Depende de nosotros definir el contenido y para qué se utiliza. A diferencia de las áreas Encabezado, Control deslizante y Contenido, podemos agregar varios módulos dentro de un solo documento. Aquí he añadido el segundo patrón de módulo:
Patrones de móduloEl segundo tipo de módulo nos da un marcador de posición de imagen (que se extiende a lo largo de la cuadrícula del documento), un encabezado y algunas líneas de texto ficticio.
El módulo añadido con las capas.La última sección de nuestro sitio web será predeciblemente el pie de página. Para los pies de página, una vez más, Velositey nos da una serie de patrones predefinidos para elegir:
El primer patrón de pie de página nos da el siguiente diseño de pie de página:
En esta etapa, hemos completado la adición de todas las secciones necesarias del sitio web, desde el encabezado hasta el pie de página, con solo unos pocos clics. Para organizar cada sección correctamente, es posible que desee agregar algunos espacios verticales entre ellos, como:
Ahora que tenemos el diseño básico en su lugar, es hora de que lo personalicemos. Necesitamos alterar un par de cosas para hacer que el prototipo sea presentable..
La regla de oro cuando se trata de personalizar los documentos de Photoshop es dejar las capas intactas siempre que sea posible. Cada capa debe personalizarse sin destruir su forma o propiedades iniciales. Esto nos lleva a emplear algunas funciones de Photoshop como:
Además, prefiero usar la mínima cantidad de capas posible.
En nuestro caso, Objetos inteligentes Son útiles para incluir la imagen del logo..
Para empezar, seleccione la capa llamada logo dentro de Encabezamiento grupo (actualmente una capa de forma rectangular). Luego, haga clic derecho y seleccione la Convertir a objeto inteligente opción.
los logo capa es ahora un Objeto inteligente.
Para colocar nuestro logotipo dentro de esta capa, haga clic derecho en logo capa y seleccione la Editar contenidos opción.
Esto nos llevará a un nuevo documento dentro de la ventana de Photoshop. Dentro de esta pestaña, configure la capa de Forma rectangular invisible, luego arrastre y suelte la imagen del logotipo en la pestaña, alineando el logotipo a la izquierda. Al guardar el archivo, los cambios deben reflejarse en index.psd.
El logotipo se coloca a través de un objeto inteligente.Ahora vamos a convertir el logo capa, que ahora es un Objeto inteligente, en una Objeto inteligente vinculado. Esto almacena efectivamente nuestro logo como un archivo externo. Para hacerlo, haga clic con el botón derecho en la capa y seleccione la Convertir a Vinculado ... opción.
Photoshop le pedirá que guarde el Objeto inteligente expediente, .psb. Salva el Objeto inteligente del logotipo dentro de una organización típica como lo haría al organizar las imágenes del sitio web. En este caso, lo guardaría en una carpeta llamada / imágenes.
"Mantenga las fotos / íconos en una carpeta cerca de la PSD, no en una carpeta de escritorio llamada" Miscelánea "- Etiqueta de Photoshop
Mientras trabajamos con Smart Objects ahora, reutilicemos el logotipo en nuestro pie de página. Dirígete a la Pie de página grupo y encontrar el logo capa. Haga clic derecho en la capa y seleccione Reemplazar contenido ... .
Vaya a la carpeta donde guardó el .psb archivo del logotipo, seleccione el archivo y pulse la tecla Lugar botón. Ahora deberías tener el logo dentro del pie de página..
Repita estos pasos para colocar imágenes en las otras secciones; Contenido, control deslizante y módulo. Una vez hecho esto, deberías tener un resultado similar al mío a continuación:
La adición de un efecto de capa probablemente sea familiar para cualquiera de ustedes que haya estado utilizando Photoshop por un tiempo. Los efectos de capa aplicarán uno o más efectos como color, degradado, sombra, etc. sobre la capa. En nuestro caso, lo utilizaremos para establecer un nuevo color para el logotipo y agregar un degradado..
Comenzando seleccionando la logo capa dentro de la Encabezamiento grupo. A continuación, seleccione la fx icono dentro de Capa Panel, donde residen las opciones de efecto. Seleccionar Superposición de color… , y establece el color en blanco.
Repita este paso para personalizar cada color del enlace de navegación, el color del icono en la sección de contenido y el color del botón en el control deslizante. Además, agregue un efecto de degradado a la imagen del control deslizante para dar más contraste entre el encabezado y el control deslizante, haciendo que el logotipo y la navegación sean más legibles.
Capas de ajuste nos permite personalizar el tono de una capa (como el Brillo y el Contraste) de una manera no destructiva. En nuestro caso, podemos usar una Capa de ajuste para convertir los iconos del Módulo en blanco y negro.
Primero, seleccione el envase capa dentro de la Módulo grupo. Haga clic derecho y seleccione la Contenido editado… opción. Después, haga clic en Nueva Capa de Ajuste y seleccione el En blanco y negro… opción. Y voilá!
Lo último que debe hacer es volver a redactar los encabezados y el texto dentro de los marcadores de posición de contenido. Con eso hecho, aquí está, nuestro prototipo terminado:
Bien hecho, hemos construido con éxito un prototipo de diseño para una página web. Utilizamos Velositey, lo que nos permite generar el diseño sencillo rápidamente. Además, personalizamos las capas con colores, degradados y ajustes de forma no destructiva, manteniendo intacta su forma inicial y permitiendo futuras ediciones..
¿Tienes otros consejos y trucos para usar Velositey? Háganos saber en los comentarios.!
Accentsconagua