Share
Lo que vas a crearSketch, realizado por gente agradable en Bohemian Coding, es un excelente programa para el diseño de interfaces. Este tutorial para principiantes lo introducirá en el diseño con Sketch. No necesitará ninguna experiencia previa con el programa, solo tiempo libre para aprender algo nuevo..
Le mostraré cómo configurar una mesa de trabajo simple, cómo crear formas utilizando herramientas básicas, operaciones booleanas, el panel Inspector y la lista de capas. Veremos cómo cambiar las propiedades, organizar capas, importar imágenes y otros aspectos útiles del flujo de trabajo de un diseñador de Sketch.
Empecemos creando un nuevo documento. ¿Ya has abierto Sketch 3? Ok, eso es todo lo que necesitas hacer! Dejame explicar; Por defecto, Sketch te ofrece un lienzo infinito en el que trabajar. Puedes empezar a crear elementos sin miedo a quedarte sin espacio..
Vamos un paso más allá y creamos una mesa de trabajo. Las tablas de diseño le permiten crear marcos fijos en el lienzo infinito de Sketch.
Para crear una nueva mesa de trabajo vaya a Insertar> Cartón (UNA) Desde la barra de herramientas o el menú principal..Haz clic y arrastra dentro del lienzo de Sketch. Notará cómo Sketch muestra los valores de ancho y alto a medida que lo hace. Crear un 600 x 800 px mesa de trabajo.
Propina: Podemos crear tantas mesas de trabajo como sea necesario. También podemos cambiar el nombre de la mesa de trabajo en la Lista de capas a la izquierda de la pantalla, o cambie su posición y dimensiones utilizando el Inspector Panel a la derecha. Elimina los tableros haciendo clic en el Supr o Borrar tecla cuando se selecciona la mesa de trabajo.
Por ejemplo, usemos el Inspector para cambiar la posición de la mesa de trabajo para X = 0 Y = 0. Alternativamente, puede simplemente arrastrar la mesa de trabajo a esa posición.
Propina: Ir Ver> Mostrar cuadrícula para activar la cuadrícula por defecto que viene con Sketch. Te ayudará a posicionar los objetos exactamente como los quieres..
Ahora vamos a cambiar el color de la mesa de trabajo. Hacerlo ayudará con los siguientes pasos. Seleccione su mesa de trabajo y eche un vistazo a la Inspector panel. Comprobar el Color de fondo Opción y haga clic en la muestra de color a la derecha. Aparecerá un selector de color que muestra diferentes opciones y propiedades de color. Elige el color que quieras. No importa el color que seleccione, pero en este caso optaremos por un gris cálido..
Tu mesa de trabajo está lista y estás listo para comenzar con el diseño básico!
Ir Insertar> Forma> Rectángulo (R). Crear un 360 x 500 px rectángulo en tu mesa de trabajo. Al igual que con la creación de mesas de trabajo, puede dibujar un rectángulo aleatorio y ajustar sus propiedades a través de Inspector panel. Muestra la cuadrícula para facilitar las cosas.!
Una vez seleccionado el rectángulo, eche un vistazo a la Inspector panel. Quita el borde de la forma desmarcándola. Haga clic en el Llenar muestra y configúralo a blanco. Podemos establecer esquinas redondeadas en el Inspector panel también mueve el Radio deslizador a la derecha o tipo 10 en el campo de entrada.
Crear un 40 x 40px círculo usando Insertar> Forma> Oval. Recuerda, puedes dibujar un círculo al azar y usar el Inspector para cambiar sus propiedades. Ahora, muévelo a la parte media superior de su rectángulo. Utilizar el Herramienta de zoom sobre el Barra de herramientas si necesita hacer zoom.
Crea otro círculo, esta vez. 20 x 20 px. Alinéalo dentro del primer círculo, en el medio. Cuando lo muevas, verás algunas guías inteligentes que te ayudarán a alinear objetos.
De hecho, para asegurarse de que su contenido esté alineado correctamente, mantenga presionada la tecla opción (⌥) Tecla en el teclado. Sketch te ayudará a obtener medidas exactas de píxeles que muestran distancias entre objetos. Por ejemplo:
¡Esto es una gran ayuda! Gracias bosquejo!
Ahora vamos a convertir nuestros dos objetos circulares en un solo "anillo". Seleccione ambos círculos directamente, oa través de Lista de capas. Ve a la Barra de herramientas y haga clic en Restar.
Ahora tenemos una nueva forma compleja:
Seleccione este nuevo objeto y también seleccione su rectángulo. Ahora haga clic Unión para obtener la forma final.
¿Qué hicimos aquí? Cuando necesitamos una forma no estándar, tenemos que crearla nosotros mismos. Podríamos dibujarlo con la herramienta de lápiz, pero a menudo una forma compleja es fácil de dividir en formas más estándar. Nosotros podemos usar operaciones booleanas para eso. Sketch viene con Unión, sustraer, intersecarse y diferencia Operaciones booleanas para obtener diferentes formas complejas hechas por subpaths..
Estas opciones son no destructivo operaciones para que podamos cambiar las propiedades de subpaths (formas básicas) fácilmente seleccionándolas en el Lista de capas. Cuando tenga una forma con múltiples subpaths en su lienzo, eche un vistazo a la lista de capas. Verá una flecha de revelación a la izquierda y si la expande verá una lista de rutas secundarias para su forma. En el lado derecho, puede elegir una operación booleana para cada ruta secundaria individualmente si desea cambiarla.
¡Nuestra forma básica está casi terminada! Asegúrese de que su forma permanece seleccionada, mire a la Inspector panel, seleccione Oscuridad y establecer sus propiedades de la siguiente manera: Color> R = 38 G = 30 B = 10 Alfa = 50, X = 0, Y = 20, Desenfoque = 20 y Spread = 0. Al final, su forma debe verse así:
Un formulario de inicio de sesión no sería nada sin los campos de entrada y los botones, así que hagamos algunos!
Propina: Puede bloquear su forma principal para evitar errores y movimientos inesperados. Selecciónelo y vaya a Organizar> Capa de bloqueo. Un pequeño candado en la Lista de capas le informa qué objetos están bloqueados.
Utilizando la Herramienta Rectangular (R), crear un 280 x 50 px forma, quite el borde, establezca el color de relleno a R = 239 G = 87 B = 46, Radio = 2 y colóquelo como se muestra en la siguiente imagen..
Crea otro 280 x 70 px forma, rellenarlo con blanco, radio = 2, conjunto grosor del borde a 1 y color del borde a R = 234 G = 234 B = 234. Muévalo a la parte superior del rectángulo naranja, arrastrándolo 10px hacia arriba. Duplica esta forma (Control-D), selecciona la copia y arrastra otra 80px arriba.
Ahora crea un poco 20 x 20px usando cuadrados Herramienta de rectángulo (R). Rellénalo con blanco y ponlo. Radio = 2 , grosor del borde=1 y color del borde a R = 234 G = 234 B = 234. Muévelo 10px debajo del rectángulo naranja. Tu mesa de trabajo debería verse así:
Bien, ahora vamos a condimentar el formulario de inicio de sesión con algunos elementos de texto para etiquetas y marcadores de posición. Selecciona el Herramienta de texto (T) y luego puede hacer clic en cualquier parte del lienzo para insertar su capa de texto. Verá que se agrega y selecciona texto para que pueda comenzar a escribir de inmediato. Notará que el Inspector ha cambiado para mostrarle todas las propiedades que se aplican al texto..
Propina: También puede hacer clic y arrastrar para crear un cuadro de texto de un tamaño fijo. Cuando el texto se vuelve demasiado grande para caber dentro del cuadro, se redimensionará hacia abajo, a diferencia de un cuadro de texto normal que aumenta su ancho para adaptarse al contenido.
Agregue el texto "NOMBRE DE USUARIO" y vaya a Inspector Panel para establecer sus propiedades. Utilizar el Montserrat fuente, Peso = Regular, Tamaño = 11, Espaciado = 1, Color> R = 204 G = 204 B = 204.
Volver a seleccionar el Tipo de herramienta (T) y agrega el texto de entrada "Armando" (o lo que quieras). Esta vez usa estos valores para establecer sus propiedades: Montserrat fuente, Peso = Regular, Tamaño = 24, Espaciado = 0, Color> R = 113 G = 87 B = 44. Seleccione ambas piezas de texto y colóquelas como se muestra a continuación:
Eso ordena nuestro marcador de posición y el texto de entrada para el primer campo. Para el segundo, duplique las capas de texto y muévalas sobre el segundo rectángulo 80px abajo. Cambie el contenido del texto a "CONTRASEÑA" y "*******".
Agregue algunas capas de texto nuevas y use los atributos como se muestra a continuación. Necesitará Open Sans fuente.
Notará que el enlace "Olvidó su contraseña" está subrayado. Para lograr este efecto haga clic en el Botón de opciones de texto Para revelar los efectos de decoración. Elija la segunda, mientras que la capa de texto está seleccionada.
Ahora, el resultado:
En este momento deberíamos echar un vistazo a la lista de capas. Podría ser una buena idea comenzar a organizar y cambiar el nombre de aquellos rectángulo Formas o simplemente agrupando elementos. Cambie el nombre de los objetos haciendo doble clic en ellos o haciendo clic con el botón derecho y seleccionando Rebautizar opción. Para crear un grupo de capas, simplemente elija una o más capas, luego haga clic en Grupo icono en el Barra de herramientas. También puede arrastrar objetos entre grupos en la lista de capas como cabría esperar..
El objetivo principal es cambiar una lista de capas desordenadas en algo más elegante y organizado. Tómelo en consideración, no solo al seguir este tutorial sino en cada proyecto en el que esté involucrado.
Ya hemos creado los elementos que necesitamos en nuestro cuadro de inicio de sesión. Es hora de añadir un logotipo..
Abre el logo_icon.svg He proporcionado como un archivo adjunto a este tutorial. Ahora enfócate en el panel de lista de capas. Verá cómo el icono se creó utilizando diferentes rutas que podemos editar fácilmente..
Utilizando la Herramienta Rectangular (R), crear un 30 x 60px Forma y colócalo como se muestra en la siguiente imagen. No es necesario colocarlo perfectamente al 100% en este momento. Recuerda, puedes usar la cuadrícula y la opción (⌥) Tecla en el teclado al moverse. De esta forma, Sketch te mostrará las distancias precisas..
Ahora en el Lista de capas, arrastre la capa de ruta en el grupo "Forma". Ponlo en la parte superior. Obtendrá una nueva forma compuesta haciendo esto. Ese es el poder de las operaciones booleanas y las formas vectoriales en Sketch!
¿Recuerdas cuando hablamos de esos pequeños iconos al lado derecho de tus subpaths? Podemos escoger diferentes operaciones booleanas para cada subpista individualmente. Así que vamos a cambiar el primero a Restar y el segundo para Diferencia.
Paso facil Asegúrese de que su nueva forma compuesta todavía esté seleccionada. Ir a layer> Caminos> Aplanar. Al hacerlo, habrá perdido sus rutas secundarias y sus capacidades de edición, pero el siguiente paso será más fácil ahora.
Mantenga su forma seleccionada. Ve a la Barra de herramientas y haga clic en el Editar icono. Notarás algunos cambios en el Inspector Panel y la forma en sí. Seleccione todos los puntos del vector arrastrando en el lienzo..
Centrarse en el Inspector panel y conjunto Las esquinas a 5. Hacer clic Llenar to Revela la ventana de opciones y selecciona el segundo tipo de relleno., Gradiente lineal. Verá dos puntos conectados por una línea que superpone su capa. Cada punto en la línea representa una parada de color a lo largo del degradado.
Para cambiar el color de una de las paradas, haga clic en él en el lienzo. Verá que el selector de color en el inspector se actualiza al color de esa parada. Elija un nuevo valor en este selector de color y verá el resultado. Sabiendo eso, podemos ajustar el primer color a R = 245 G = 166 B = 35 y el segundo para R = 239 G = 87 B = 46. También puede cambiar los colores directamente en el selector de color..
Esta es nuestra forma final:
Copia la forma y pégala en tu formulario de inicio de sesión.
Su logotipo está casi terminado, así que ahora agregue un texto genérico. Escriba lo que quiera, pero para este tutorial he usado "myapp" y la siguiente posición y propiedades:
Nuestro formulario de inicio de sesión está terminado.!
Sketch nos permite trabajar con imágenes de mapa de bits y con objetos vectoriales. Para el fondo voy a seleccionar una imagen de Unsplash. Impresionante fotografía allí! Voy a elegir este hecho por Nick West.
Ahora vuelve a tu documento. Seleccione su mesa de trabajo en el Lista de capas panel e ir a Insertar> Imagen para seleccionar la imagen. Advertencia: esta imagen es enorme! Vamos a reducirlo un poco al ir a la Inspector Panel y cambiando sus dimensiones a algo más manejable como 1280 x 876px. Posición es a X = 0 Y = 0 y asegúrate de que seaen la parte inferior de su lista de capas.
Propina: Si importa imágenes mientras mantiene una mesa de trabajo seleccionada, su imagen se enmascarará automáticamente utilizando las dimensiones de la mesa de trabajo. Mueva la capa fuera del grupo de la mesa de trabajo para desenmascararla. Aprende más sobre enmascarar objetos en la documentación oficial..
En Sketch podemos ajustar los colores de una imagen existente usando el Ajuste de color panel ubicado en el Inspector. Podemos cambiar la saturación, el brillo y el contraste. Conjunto Saturación a 0 y Contraste a 1,9.
Ahora crea un 600 x 800 px rectángulo usando Insertar> Forma> Rectángulo (R). Colócalo en X= 0 Y = 0. Sobre el Lista de capas mueva la capa de forma justo sobre la capa de la imagen. Duplíquelo y configure las propiedades de los rectángulos de la siguiente manera: para el primer conjunto de rectángulos Opacidad = 100%, Fusión = Multiplicar, Color> R = 173 G = 166 B = 152. Para el segundo set (justo encima del primero) Opacidad = 50%, Fusión = Normal, Color> R = 173 G = 166 B = 152.
Aquí es cómo debe verse.
Espero que hayas disfrutado este tutorial ...
Ya que está creando un elemento de UI, agregar algunos detalles adicionales a su formulario de inicio de sesión podría ser realmente útil, ¿no cree? Las interfaces de formulario tienen muchos aspectos; Diferentes estados y feedback. Todas las técnicas que he cubierto durante este tutorial te proporcionarán las habilidades para crear algunos elementos adicionales, como los siguientes:
¿Crees que puedes hacerlo? Si te quedas atascado o necesitas preguntarme algo, solo deja un comentario o encuéntrame en Twitter. Espero ver cómo te llevas!
Accentsconagua