Share
En el tutorial de hoy, vamos a explicarle cómo crear su propio kit de interfaz de usuario simple desde cero. Crearemos los bloques de construcción básicos que puede usar en casi cualquier proyecto web, incluidos: campos de texto, campos de enfoque, campos de selección, barras de desplazamiento, cargadores, casillas de verificación y botones de radio. Disfrutar!
Crear un kit de interfaz de usuario simple es una excelente manera de acelerar sus habilidades de diseño cuando está trabajando en un gran proyecto. Si tiene muchas páginas para imitar, tener un arsenal de elementos listos para usar específicamente para ese proyecto lo hará más rápido para elaborar esas páginas. Hoy tenemos un video y un tutorial escrito. Sigue uno o ambos.!
Para aquellos de ustedes que desean un poco más de orientación que el video, también les ofrezco un tutorial escrito paso a paso completo. Vamos a bucear en!
Crear los campos de texto es la parte más sencilla de todo el proceso, pero dado que estos elementos probablemente se usen con mayor frecuencia, es importante hacerlo bien la primera vez. En nuestro caso, he dibujado rectángulos redondeados simples de 300px x 30px con un radio de 2px. Ajuste su propio para adaptarse a sus propias necesidades. ¡Los campos grandes, jugosos y redondeados pueden ser divertidos también! Los campos de bordes duros son para la gente más seria..
De cualquier manera, cree uno que sea perfecto: agregue un trazo que coincida con su marca (# bdd9a7 para la demostración), y duplique la capa dos veces (Ctrl + J), moviéndola hacia abajo cada vez.
Estas tres capas formarán la base de nuestro kit de IU: siempre que tengamos que crear un nuevo campo o botón, es probable que queramos comenzar aquí para poder duplicar la misma altura y espacio básicos.
A continuación, agregue un poco de texto sobre cada capa. ¿Utiliza la fuente que quieras, pero es mejor mantenerla en fuentes seguras para la web? especialmente con campos de formulario donde la sustitución de fuentes no es su mejor opción. He usado Helvetica # 407a16, 12pt, pero puedes usar Arial, Georgia, Times, etc..
Ahora agreguemos un brillo externo simple a nuestro "campo de enfoque". Esto ayudará a las personas a identificarlo cuando lo estén usando. Nuestro brillo es bastante sutil, pero puedes hacerlo tan brillante como quieras. Observe que también he agregado una sombra interior MUY sutil, eso es totalmente opcional, pero le muestra cómo agregar efectos sutiles para hacer que el campo se sienta activo.
A continuación, vamos a duplicar el rectángulo redondeado que vamos a utilizar para el "menú desplegable" y enmascararlo utilizando la herramienta Marquee y aplicando una máscara de capa. Esto crea el "botón" para el menú, todo lo que tenemos que hacer es agregar un degradado sutil para que se sienta más como un botón - # d9edca a # f0f9e9.
Este paso es muy importante porque para casi todos los elementos de stock futuros (botones, casillas de verificación, etc.), copiaremos este estilo de capa y lo pegaremos sobre formas en blanco. Tómate un minuto para que el tuyo sea perfecto antes de continuar, ya que establecerá el tono de todo tu kit de UI..
Como mencioné anteriormente, crearemos nuestros botones utilizando el mismo rectángulo redondeado básico de antes, y Copiar / Pegar el estilo de capa en el menú desplegable. El texto que estamos usando debe ser una variante en negrita de la fuente utilizada en los campos de texto, solo agregue una sombra simple "clara" (Sombra, 75%, Blanco, Pantalla, Distancia 1px, Tamaño 0) para completar la presión texto.
Para crear la versión presionada del botón, simplemente invierta el degradado seleccionando "Reverse" en el menú Gradient.
La flecha hacia abajo se crea utilizando el botón "Forma personalizada" y seleccionando la flecha hacia abajo de la biblioteca de elementos que se encuentran en stock en Photoshop. También puedes crear el tuyo propio si quieres? la forma es totalmente tuya.
Simplemente cree su flecha, establezca el color de relleno en su "color de marca" (el nuestro es # 68b232) y aplique una Sombra interna simple (12% de opacidad, Distancia 2, Tamaño 3) para que se sienta un poco inserto. Por supuesto, puedes jugar con estas configuraciones: la versión azul del video te mostrará otra variación..
Finalmente, puede agregar un efecto de iluminación opcional utilizando un simple pincel de 120 píxeles (0% de opacidad) en una capa en blanco. Coloque la "marca de la mancha de pincel" cuidadosamente sobre la parte superior del botón, luego enmascare la mancha de la brocha sobre el botón (haga una selección de la forma del botón y aplique la nueva selección como máscara de capa sobre el efecto de la brocha). Establezca el modo de fusión en Luz suave o Difícil para completar el efecto.
Es posible que tenga que juguetear un poco con este último paso según los colores que esté usando. Los pasos siempre serán casi iguales:
El siguiente paso es super simple: solo cree rectángulos redondeados de 12px (cuadrados para ser exactos). ¿Por qué 12px? Porque es el tamaño de punto genérico para la mayoría de los textos en Internet. Puede ir más grande o más pequeño según su propio tamaño de fuente.
¿Recuerdas, estamos copiando / pegando los estilos de capa desde ese botón del menú desplegable? Esto hace que las cosas sean rápidas y uniformes..
El mismo proceso se aplica a los botones de radio, excepto que esta vez estamos creando círculos de 12px en lugar de rectángulos.
El "D-Pad" se crea simplemente duplicando y girando la flecha del menú desplegable 90 grados unas cuantas veces. Estas flechas direccionales son excelentes cuando necesita crear un menú de acordeón, un control deslizante de jQuery, etc..
Una barra de carga simple como esta es una excelente manera de ampliar la versatilidad de su kit de UI. Es posible que no lo use todo el tiempo, pero le ahorrará mucho tiempo para los pocos casos en que lo necesite pronto! La barra de carga se compone de unos pocos pasos..
El estilo de capa básico del fondo es el siguiente:
Puede crear la base del campo activo de diferentes maneras, pero aquí está cómo se construyó el verde.
A continuación, agregaremos las líneas diagonales que se enmascararán en la barra de carga:
El efecto de iluminación es solo un poco de bonificación si lo quieres. Lo creé usando un Pincel de 120 píxeles (0% de dureza), luego creé una nueva capa y presioné el mouse una vez, creando una sola mancha en la página. A continuación, he establecido el estilo de capa en Luz suave y lo he configurado para enmascarar sobre el botón. Puede realizar este paso final de varias maneras: en el ejemplo, soy simple al hacer una selección desde el campo activo (Mantener presionada la tecla Cntrl y Hacer clic en la forma), y luego aplicar esa forma como una máscara de capa..
Muy bien, estamos en la recta final ahora! La barra de desplazamiento es bastante simple de crear, pero permítame hacer algunos puntos:
Aquí están los disparos:
Un paso que a menudo se pasa por alto para crear un kit de IU básico es agregar alguna marca básica y otra documentación dentro de su archivo. Claro, ¿podría agregar este tipo de cosas en un documento de texto que acompaña a su archivo? Pero entonces la gente tendría que abrirlo. De esta manera, toda la información básica (nombre del cliente, diseñador, versión, tipo de archivo, etc.) se muestra dentro del archivo para que no haya lugar para la confusión.
Finalmente, ¿puedes personalizar esto al contenido de tu corazón? use sus propios colores, fuentes, estilos de capas, etc. Agregue nuevos elementos como etiquetas, menús desplegables abiertos, etc. El límite de hasta dónde puede llevar esto depende totalmente de usted, así que vaya y diviértase.!
Accentsconagua