Share
Lo que vas a crearSketch es una herramienta muy versátil que puede utilizar a diario para su trabajo como diseñador web y de aplicaciones. En este tutorial, le presentaré las funciones de diseño, capa, sombra, sombra interior, texto, borde y relleno en Sketch, y le mostraré cómo usarlo para crear un icono simple y llamativo..
Si esta es la primera vez que abre Sketch 3, hay cuatro cosas que debe tener en cuenta acerca de la interfaz de Sketch:
Las mesas de trabajo son una forma fácil de organizar sus diseños por marcos delimitados. Sketch 3 le ofrece un conjunto de tamaños predeterminados de la mesa de trabajo cuando presiona Una llave (o haga clic en Insertar> Cartón). Puede ver que, de manera predeterminada, tiene tamaños de pantalla para los principales dispositivos Apple en el lado derecho de la interfaz de Sketch:
Escoger Pantallas de iPad> Paisaje. Puedes verlo ahora en el panel de capas a la izquierda. Si tiene un tamaño de pantalla pequeño, no olvide alejar la imagen para ver todo el tablero de arte presionando Comando-guión (-).
Cambie el nombre de su tablero de arte haciendo doble clic en él. Llámalo Icono de agua. Deberías tener algo como esto ahora:
Por lo tanto, tenemos una mesa de trabajo para iPad de 1024 px de ancho y 768 px de alto. Comencemos agregando el fondo. Para ello, pulse la tecla R llave (o ir a Insertar> Forma> Rectángulo), haga clic en su mesa de trabajo y arrastre el mouse / dedo para hacer un pequeño rectángulo. Puedes verlo ahora en tu panel de capas. Renombralo Fondo.
A continuación, iremos al panel derecho y estableceremos la propiedad de nuestra capa de fondo:
Vamos a añadir un poco de estilo. Ir Las fronteras y desmarcarlo. Ahora, agregue el gradiente haciendo clic en el color gris predeterminado en la propiedad de rellenos. Un menú desplegable se mostrará con cinco opciones: Color plano, Degradado lineal, Degradado radial, Degradado angular, Relleno de patrón y Relleno de ruido.
De izquierda a derecha: Color plano, Degradado lineal, Degradado radial, Degradado angular, Relleno de patrón, Relleno de ruidoHaga clic en Gradiente radial. Ahora puede ver un control deslizante, con el color blanco en el centro del degradado a la izquierda, y el color negro que es la extremidad de su color degradado a la derecha. Para cambiar sus colores, solo tienes que hacer clic en ellos en el control deslizante:
Vamos a establecer los colores. Sketch le permite cambiar entre el valor hexadecimal, RGBA y HSBA haciendo clic en el RGB o HSB etiqueta. Estoy más familiarizado con HSBA, así que para el color en el centro elijo H190, S50, B100, A100, y para el de la extremidad elijo H210, S50, B100, A100.
Ahora crearemos el icono que contiene la gota. Para hacerlo, agrega un nuevo rectángulo. prensa R, y haga clic y arrastre. Luego renombra tu nueva capa icono.
Selecciona el Anchura a 515 y Altura a 515. Colóquelo en el centro usando las herramientas en la parte superior del panel derecho:
Use las herramientas arriba de Posición para establecer la posición de su capa con respecto a su contenedorSelecciona el Radio de la frontera a 144, y al igual que con la capa Fondo, desmarque el borde y luego rellene el icono eligiendo un color blanco y plano.
Ahora vamos a añadir un poco de sombra. La funcionalidad Sombras tiene cinco opciones: el color, la posición X, la posición Y, el desenfoque y la extensión. Establece la Sombra en:
El último paso para el icono es agregar una sombra interior en la parte inferior. Las sombras internas siguen exactamente la misma funcionalidad que las sombras, excepto que se extienden a la dentro De tu forma en lugar del exterior. Podemos configurar la sombra interior para:
Y finalmente debes obtener esto:
En estos pasos finales, aprenderá a crear un icono de gota de agua con Sketch. Primero necesitamos un óvalo, así que presione O (o ir a Insertar> Forma> Oval), y definir su tamaño como Ancho: 200 y Altura: 200.
A continuación, crea un triángulo yendo a Insertar> Forma> Triángulo (no hay atajo para este). Ve al panel derecho, comprueba Equilátero, y establecer el Anchura a 200 y Altura a 200.
Ahora viene la parte difícil. Tienes que colocar tus capas así:
Seleccione las dos capas y haga clic en el Unión botón, que se encuentra en la parte superior de la interfaz de Sketch.
Ahora que tenemos nuestra forma de gota, agregaremos el toque final para que sea más fácil de usar al agregar el radio en la parte superior. Para ello, seleccione su forma y haga clic en el Editar herramienta, que se encuentra en la barra de herramientas superior.
Afortunadamente, el primer punto seleccionado es el que queremos editar. Ve al panel de la derecha y cambia la Las esquinas valor para 34.
¡Felicidades! ¡La forma de gota ahora está completa! Ahora puede aplanarlo haciendo clic en el icono en la barra de menú superior (a la derecha de Rotar). Seleccione la capa de gota en el panel de capas y cambie su nombre Gotita. Ve al panel derecho y configura Anchura a 266 y el Altura a 377. Luego céntrelo con la herramienta en la parte superior del panel derecho:
Y ahora el paso final: ¡el estilo! Primero desmarque el borde y luego complete la forma con un degradado radial. Hacer el valor del centro H190, S70, B100, A100, y el valor inferior H210, S70, B100, A100.
Luego agregaremos un Sombra interior con:
Y…
Gracias por leer el tutorial. Espero que te haya ayudado a aprender a usar algunas de las herramientas fundamentales disponibles en Sketch. No dudes en hacer preguntas en los comentarios a continuación..
Accentsconagua