Share
Photoshop CS6 incluye nuevas características que lo ayudarán a crear mejores diseños de interfaz. En este tutorial utilizaremos las nuevas funciones de edición de vectores y trazo de Photoshop para crear una interfaz de panel de administrador. También aprovecharemos la nueva función Snap to Pixel grid de Photoshop para ayudar a crear gráficos web nítidos y limpios. Empecemos!
Los siguientes recursos fueron utilizados durante la producción de este tutorial..
Vamos a utilizar 960 grid con un diseño de 12 columnas de 960.gs como marco para nuestro diseño. Descargue la plantilla en formato zip y luego abra 12 Columnas de cuadrícula. Haga clic en el icono del ojo en la parte frontal de la capa 12 Col Grid para ocultarlo.
Haga clic en el ícono del círculo en blanco y negro para agregar una nueva capa de ajuste. Seleccione Color sólido y elija blanco en el siguiente cuadro de diálogo.
Hacer nueva capa. Haga clic en Editar> Rellenar y seleccione Usar: Patrón. Utilice el patrón de línea diagonal de PSDfreemium. Debido a que este es CS6, intentemos usar su nueva característica. Activar patrones de secuencias de comandos y seleccionar Relleno de simetría.
Reducir la opacidad de la capa al 4%..
Queremos asegurarnos de que todas las capas del área estén organizadas cuidadosamente. Entonces, empecemos agrupándolos en un orden lógico. Seleccione ambas capas (fondo y patrón) y luego presione Comando / Ctrl + G para colocarlas en la capa de grupo.
No necesitamos la capa de fondo, así que elimínela arrastrándola al icono de eliminar.
Seleccione la capa de grupo. Pulsa F2 y luego cambia su nombre. Presione la tecla Tab para editar automáticamente la siguiente capa. Cambia su nombre y luego repite esto en la siguiente capa.
Activar la herramienta Rectángulo redondeado. Dibuje una forma de rectángulo redondeado con un radio de 10 px y un ancho de 2 columnas. Colóquelo en la parte superior derecha del lienzo. En la barra de opciones, configure Color de relleno en # f16424 y Trazo a Ninguno.
Haga doble clic en la forma de la capa en el cuadro de diálogo Panel de capas para abrir estilo de capa. Activar patrón de superposición. Seleccione el patrón de píxeles de PSDfreemium. Reduzca su escala y opacidad para darle una apariencia de textura de tela natural.
Hacer nueva capa por encima de la forma. Activar pincel suave y pintar sombra en su lado superior..
Alt: haz clic entre la base del logotipo y su sombra. Esto convertirá la capa en una máscara de recorte y colocará la sombra dentro del logotipo.
Repita el proceso unas cuantas veces. Puede agregar más capas si es necesario. Pintar resaltado en su lado inferior..
Hacer nueva capa bajo el logo. Comando / Ctrl: haga clic en la forma para hacer una nueva selección basada en su forma. Rellenar selección con negro.
Aplicar el filtro de desenfoque gaussiano. Haga clic en Filtro> Desenfoque> Desenfoque gaussiano.
Pulsa Comando / Ctrl + T para realizar la transformación. Haz clic derecho y elige Warp. El cuadro delimitador de transformación se divide en 3 x 3 cuadros. Arrastre el cuadro inferior hacia abajo. Pulsa Intro para aceptar el resultado de la transformación..
Dibuja forma de rectángulo redondeado más pequeño. Desde la barra de opciones, establezca su Relleno en ninguno y Trazo en blanco con tamaño 1 pt.
Abra las Opciones de trazo y luego seleccione el ajuste preestablecido de guiones. Haga clic en Más opciones para editar la configuración de línea discontinua.
En el panel Capas, haga doble clic en su capa para abrir el cuadro de diálogo Estilo de capa. Active la Sombra, establezca su Ángulo en 90 °, active Usar luz global, establezca su tamaño en 0 px y la distancia 1 px.
Active la herramienta Rectángulo y haga clic una vez en el lienzo. En el cuadro de diálogo, establezca su tamaño en 6 x 30 px. Haga clic en OK para comenzar a hacer la forma..
Haga clic en su cuadro de relleno en la barra de opciones. Seleccione Gradiente y configure su color de #dfdfdf a #ffffff.
Dibuja otro camino rectangular dentro del logo. Haga doble clic en su capa en el panel Capas y luego active Sombra.
Añadir sombra paralela a la forma de la capa.
A continuación se muestra el resultado a mayor aumento. Como se puede ver, hasta ahora nuestra forma vectorial siempre es nítida. No hay medio pixel! Esto es gracias a la función de ajuste de vectores en Photoshop CS6. Puede desactivar esta función si lo desea desde el cuadro de diálogo Preferencias. Aún no tengo idea de por qué alguien lo haría..
Añadir texto dentro del logo. Podemos agregar contraste al texto simplemente cambiando algunos de los caracteres a negrita.
Agrega otra Sombra al texto.
Active la herramienta Rectángulo y luego dibuje un rectángulo como fondo de contenido principal. Establece su ancho en 800 px, Relleno: #eeeeee, y Trazo: #cccccc, Tamaño: 1 pt.
Agregue brillo externo con las siguientes configuraciones.
Añade una forma de triángulo y un rectángulo redondeado. Establecer su modo de ruta para combinar formas.
Agrega texto en la pestaña para agregar su título. Añadir pequeño icono de estadística hecha de algunos rectángulos pequeños.
Dibuja una forma de rectángulo blanco como base para nuestro gráfico principal. Establece su ancho en 8 columnas. Asegúrese de establecer su Trazo a Ninguno. Añadir estilo de capa exterior resplandor.
Pulsa Comando / Ctrl + J para duplicar la forma. Agregue una forma de rectángulo grande en su parte inferior y establezca su modo en Restar frontal. Añadir superposición de degradado.
Dibuja un rectángulo redondeado. Establecer relleno en blanco sin trazo. Use el mismo brillo externo y colóquelo detrás de la forma anterior.
Crea una nueva capa entre esas dos formas. Haz una selección elíptica y luego rellénala con negro. Deseleccione (Comando / Ctrl + D) y luego suavícelo agregando Gaussian Blur.
Activar la herramienta Tipo. Añadir título de sección.
Active la herramienta de línea y luego dibuje una línea de 1 px. Establecer su color de trazo a # e4e4ee4.
Aquí está la diferencia antes y después de agregar la línea..
Dibuja un rectángulo. Establezca el Relleno en Ninguno y el Trazo en #cccccc.
Seleccione el tipo de trazo discontinuo en la barra de opciones. Haga clic en Más opciones y configure Dash y Gap en 4 y 2.
Dibuja una línea horizontal de 1 px con Trazo #cccccc. Seleccione trazo discontinuo.
Active la herramienta Selección de ruta y seleccione la ruta de línea que acabamos de hacer anteriormente. Pulsa Comando / Ctrl + Alt + T para duplicarlo y transformarlo. Pulse Mayús + Flecha derecha dos veces para moverlo 20 px a la derecha. Repita el proceso de transformación y duplicación presionando Comando / Ctrl + Shift + Alt + T.
Sigue repitiendo el proceso hasta que el rectángulo esté lleno de columnas..
Reducir la opacidad de la capa al 30%..
Repite los pasos anteriores pero esta vez con lineas horizontales..
A continuación se muestra el resultado. Ahora, tenemos una cuadrícula sutil en el fondo estadístico.
Agrega valores en ambos ejes, x y y.
Active la herramienta de línea y dibuje una línea de 1 px en la cuadrícula. Establecer su color de trazo a # f16424.
Shift - arrastre para agregar más línea. Sigue agregando más líneas hasta que tengamos un gráfico de líneas completo.
Dibuja una forma de círculo pequeño y colócala en el gráfico de líneas. Establece su relleno en blanco y el mismo trazo al color de relleno de la línea.
Haga doble clic en la capa de forma de círculo y active Trazo de estilo de capa. Ajusta su color a Blanco y Posición a Exterior..
Seleccione la ruta del círculo con la herramienta Dirección de ruta y luego presione la tecla Alt: arrástrela para duplicarla.
Usa los mismos pasos para dibujar otra gráfica de líneas. Esta vez usa un color diferente y establece sus opciones de trazo en discontinuo.
Como en el gráfico de líneas anterior, agregue círculos en cada segmento de línea.
En la parte superior del gráfico, agregue la leyenda del gráfico. Simplemente agregue una línea corta utilizando las mismas propiedades que el gráfico de líneas y agregue una breve descripción.
Dibuja un rectángulo redondeado. Establezca su Relleno en #eeeeee y Trazo a #cbcbcb.
Añadir estilo de capa Sombra interna y Superposición de degradado.
Dibuje una forma de rectángulo en el centro de la forma de rectángulo redondeado. Puedes usar cualquier color para su relleno. Establezca su Trazo a Ninguno. Reducir su relleno al 0%. Añadir superposición de degradado de estilo de capa.
Dibuja una línea de 1 px con el color #cbcbcb en su lado izquierdo y derecho.
Añadir selección de rango de tiempo. Puedes ver que el texto con diferente fondo ahora está en condición activa.
Usemos los estilos de caracteres para definir nuestro carácter predeterminado. Esta función es una versión simplificada de Estilo de carácter en Adobe InDesign. Si usa InDesign con frecuencia lo reconocerá al instante..
Abra el panel Estilos de caracteres y luego haga clic en el nuevo icono. En el cuadro de diálogo, establezca su Tipo de fuente en Arial Regular, Tamaño en 12 pt y Color en # 767676. Vamos a utilizar este estilo de carácter en la mayoría del texto. Es por eso que también lo nombraremos como Estilo de carácter predeterminado.
Apliquemos este estilo de personaje al texto. Active la herramienta Tipo, seleccione el texto y luego haga clic en el Estilo de carácter para aplicarlo.
¿Qué pasa si queremos guardar las propiedades del texto existente como estilos de caracteres? Hagamos esto a los valores en el eje del gráfico. Crea nuevos estilos de personajes. Selecciona el texto y haz clic en el icono Redefinir..
Haga doble clic en el estilo de carácter para editar sus opciones. Cambia su nombre. Aplica este estilo de personaje a todos los valores en ambos ejes..
Lo bueno del estilo de carácter (y el estilo de párrafo también) es que simplemente puede editarlo para editar cada texto que use ese estilo. Aquí hay un ejemplo. Vamos a editar el eje del gráfico: un estilo de carácter que hicimos antes para cada valor en ambos ejes. Haz doble clic en él y cambia su tipo y tamaño de fuente.
Activar la herramienta Rectángulo redondeado. Dibuja un rectángulo redondeado y agrega un pequeño triángulo en su lado izquierdo. Establezca su Relleno: # f1f2f2 y Trazo: Ninguno.
Haga doble clic en la capa en el panel Capas y agregue Trazo negro. Tal vez esté preguntando, ¿por qué no usamos la opción Stroke directamente desde su propiedad? La respuesta es que en Layer Style Stroke puedes cambiar la opacidad de Stroke. Eso es algo que todavía no puedes hacer en Photoshop CS6. Además, agregue brillo externo y superposición de degradado.
Duplique la forma y cambie su color de relleno a # f16424. Eliminar su estilo de capa. Agregue una ruta rectangular en su parte inferior y establezca su modo en Restar forma frontal.
Añadir estilo de capa y superposición de degradado a la forma.
Dibuja una línea vertical de 1 px. Establecer su color de relleno a negro. Añadir trazo de estilos de capa. Reducir la opacidad de las capas al 8%..
Añadir pequeño título en la forma. Guarda la propiedad del personaje como Estilos de carácter. Añadir Layer Style Drop Shadow.
Agrega otro título en el otro lado. Usa los mismos estilos de personaje y la misma sombra paralela..
Agrega algún porcentaje dentro de él. Siempre es una buena idea guardarlo como Estilos de carácter. De esta manera, puede editar fácilmente su apariencia desde el panel Estilos de caracteres.
Active la herramienta de polígono y establezca su lado en 3 en la barra de opciones. Dibuja un pequeño triángulo apuntando hacia arriba. Establezca su Relleno: # c1c1c1 y Trazo: Ninguno.
Añadir Layer Style Inner Shadow.
Agrega un círculo pequeño y otra forma de triángulo, apuntando hacia abajo esta vez. Usa el mismo color y estilo de capa.
Añadir número de porcentaje. Como de costumbre, asegúrese de guardar su estilo de carácter.
Los datos son positivos. Entonces, enfaticémoslo activando la flecha hacia arriba. Cambia su forma Color de relleno a # 4ff25d.
Duplica el número para otro dato..
Dibuja una sección similar para una gráfica más pequeña. Puede utilizar las mismas técnicas explicadas anteriormente. Asegúrate de usar un tamaño de texto más pequeño en el título.
Dibuja una línea azul de 1 px dentro de la cuadrícula. Establece sus opciones de trazo en discontinua.
Como en el gráfico principal, agrega un círculo en cada punto..
Activar la herramienta Pluma. Dibuja una nueva forma que cubra la línea que lo conecta con el eje x. Usa el mismo color que la línea. Coloca la forma detrás de los círculos..
Añade un patrón de píxeles gratuito desde PSDfreemium.
Reducir la opacidad al 50%..
Añadir porcentaje en su lado. En este gráfico más pequeño, también queremos un porcentaje de texto más pequeño..
Añadir otra grafica.
Actualmente, estamos trabajando en la pestaña Estadística. Agreguemos otra pestaña y pongámoslas en estado inactivo. El fondo de la pestaña Estadística duplicada que hicimos en el Paso 25 - 27. Será útil si oculta la pestaña Estadística posteriormente. Cambie su color de Relleno y Trazo a # c1c1c1. Eliminar pequeño rectángulo en su lado izquierdo. Mueve el rectángulo redondeado hacia la derecha.
Agregue un ícono simple hecho de un círculo sin Relleno y Trazo: # 646464 con una i en su interior.
Vuelve la pestaña de estadísticas. Dibuja otra pestaña inactiva si es necesario.
Active la herramienta Rectángulo y dibuje un rectángulo detrás de la pestaña principal. Establezca su Relleno en #eeeeee y Trazo a #cbcbcb.
Dibuja un rectángulo redondeado. Establezca su relleno en un gradiente de # d6d6d6d a # f3f3f3 y Stroke # c1c1c1. Esto va a ser fondo para un menú inactivo..
Duplica el rectángulo redondeado. Cambie su color para rellenar el degradado de # ef6526 a fa834d y Trazo: # f16424. Este se usa para el menú activo. Asegúrate de colocarlo debajo del triángulo pequeño de la pestaña Estadísticas.
Duplique el primer rectángulo redondeado para obtener más fondo para los menús inactivos.
Añadir texto en el botón. Haga doble clic en su capa para agregar Layer Style Drop Shadow. Para el menú inactivo, use texto oscuro y sombra clara..
Para el menú activo, use texto blanco y sombra oscura..
Dibuja un rectángulo redondeado. No hay que preocuparse por su Relleno o Trazo.
Para su Relleno, usemos el mismo gradiente del menú de la barra lateral anterior. Active la selección de ruta también y seleccione la forma. Haga clic derecho y elija Copiar relleno.
Regrese a la nueva forma, haga clic derecho y elija Pegar relleno.
Abra la opción de relleno de la barra de opciones y haga clic en el icono debajo de la vista previa del degradado para cambiar su dirección del degradado.
Repita el mismo proceso para copiar la configuración de trazo.
Agrega Inner Shadow con las siguientes configuraciones.
Activar la herramienta Tipo y la etiqueta del botón blanco. Añadir Layer Style Drop Shadow.
Agrega un pequeño triángulo apuntando hacia abajo. Rellene: #eeeeee and Stroke: Ninguno. Agrega la misma sombra paralela que la etiqueta del botón.
Agregue una línea de 1 px separando la etiqueta y la flecha. Establezca su color en # b04312 y luego agregue una sombra ligera con un ángulo de 180 °.
Vamos a agregar un icono de mini lupa en el botón. Comience por dibujar un camino circular con un tamaño de 10 x 10 px. Establezca su Trazo en Blanco, con Tamaño: 2 pt, y Relleno en Ninguno.
Agregue una línea de 2 puntos al lado del círculo con un ángulo de 45 °.
De nuevo, agregue la misma Sombra al icono de la lupa.
Dibuja un rectángulo redondeado al lado del botón. Use el degradado de relleno de #ededed a blanco y 1 pt Stroke # c1c1c1.
Añadir texto pequeño dentro de la forma. Queremos que sea sutil. Entonces, usamos un gris muy claro (# b0b0b0).
Añadamos otro mini icon
Accentsconagua