Transcripciones
1. Introducción: Hey
ahi, tengo el placer de invitarte a un curso de boceto de ocho horas de duración completo. Conocimientos prácticos y diseño Secrets Off Interface Sketch ya
te ha ganado el corazón , yo y los diseñadores de UX, pesar de que casi cualquiera puede aprenderlo. De verdad. El up fue recibido por una cosa, Onley extremadamente eficiente que un diseño gráfico fuera de curso. Se puede utilizar para diferentes tareas. Pero entonces te das cuenta de que el número fuera de la interfaz diseños creados en boceto el año
pasado superó incluso lleno de tiendas. Gracias a su singular enfoque hacia arriba y diseño de sitios web, Sketch ha ganado una clara ventaja sobre las aplicaciones menos deficientes sobrecargadas de diversas funciones. Sanchez Photo Shop e ilustrador, Al
igual que un cirujano que está en su mejor momento usando una sola pareja precisa en lugar de un cuchillo de
francotirador dulce con un surtido confuso fuera de herramientas, operaciones
más rápidas, archivos
más pequeños, mejor eficiencia dedicó sus constantes y cientos de descuento útil comunidad creados plug ins hará que definitivamente caiga para el sketch. El curso ha sido diseñado para mostrarte la funcionalidad fuera del sketch para enseñarte cómo aprovechar
mejor su potencial. Empezaremos con un conjunto de pequeños ejemplos de cómo encontrar el camino alrededor del UPS, la interfaz y las herramientas. Y luego pasamos a un proyecto práctico donde las herramientas se utilizarán de forma creativa. Dividí el curso en dos partes. El 1er 1 es un compendio enormemente comprimido fuera de cientos de técnicas importantes, claves breves empinadas, intrigas y otras cosas. El otro te llevará a través de un proyecto de diseño a menudo interfaz hacia arriba fuera de un
hogar inteligente desde cero. Experimentarás todo el potencial fuera del boceto y aprenderás a trabajar con
símbolos reutilizables . Cómo usar catch para diseñar diseños, que escalan fácilmente a diversos dispositivos y resoluciones. Cómo crear herramientas de actor USV y diseñar tus propios iconos, entre otras cosas, también
discutirán la tipografía, iconos y extradiciones para ayudarte en tu trabajo. Para el final del curso, se apple pantallas para maravillarse con el fin de crear un prototipo interactivo. Agregar en animaciones y transiciones nos permite presentar nuestro up como
composición espectacular pero también clara . Este curso es esencialmente un enfoque nuevo y fresco para diseñar interfaces de usuario madre. Apenas puedo contener mi emoción por la dirección que dice todo lo que he preparado para ti. Hay decenas de fuera técnicas y materiales adicionales añadidos al curso. Y confía en mí, es divertido ir por todo eso hasta que te des cuenta que solo es el principio. Una maravillosa aventura en el mundo fuera Mamá sabía que yo y UX herramientas de diseño. A continuación, te cautivará la funcionalidad fuera de las herramientas para crear prototipos de
interacciones micro y finalmente exportar tu diseño al desarrollo. rapidez con la que puede llegar al otro lado del espejo depende enteramente de ti. ¿ Aceptarás el reto con ganas de ver en la primera lección?
2. Asignación de cursos y archivos de origen: ¡ Eh ahí! Y bienvenidos a la siguiente lección. Estoy súper emocionado de que decidieras tomar mi curso de playera de habilidad. Gracias de nuevo por eso. Y en esta lección, voy a contar sobre el proyecto del curso. Por lo que es súper importante que den pasos para recrear lo que creamos en el curso. Es realmente útil que hagas tus propios diseños en boceto y presentas el proyecto. Por lo que el proyecto y la asignación del curso está haciendo un móvil arriba. Nos vamos a estar centrando en y movil arriba que he creado aquí y se puede ver el caso Study on be hands está bastante aseado con, ah, algunas características geniales y también animaciones que puedes aprender de los otros cursos que yo tener en habilidades. Claro, pero básicamente vamos a diseñar un bonito up. Y quiero que creen esto por su cuenta también y envíen esto como el
proyecto del curso para que puedan seguir las lecciones y puedan hacer exactamente lo que yo hago. Teoh cumplir con esta tarea. Pero también te animo a dar algunos otros pasos y tal vez a retocar un poco. A lo mejor tú, algunos otros colores, tal vez uses algunas fotos diferentes. O tal vez decidas crear la versión completamente diferente de arriba. No tiene que ser el hogar inteligente arriba que yo creo, pero es realmente importante que entrenes y envíes el proyecto. Ahora. Otra cosa que quiero mencionar aquí son los archivos fuente. Por lo que los archivos fuente para este curso están en los comentarios a esta lección. Si echas un vistazo a la línea de tiempo de la lección, puedes ver un pequeño avatar aquí. Esa es mi otra mano, básicamente un comentario con el link para soltar libros que puedes usar para descargar todo fuera del dispositivo que he aceptado este curso ahora. No todas las lecciones tienen sus archivos de inicio y archivos terminados, y tampoco todos los activos que uso medios archivos en los archivos fuente, pero les animo a utilizar los enlaces que proporcioné. Algún recurso está apenas bajo algunas licencias, así que no pude cerrarlas aquí. Y para algunos ejemplos, solo
siento que es mejor que comiences desde cero y creas esos recursos junto con el curso. Por lo que les deseo todo lo mejor y ah buena suerte para crear este proyecto del curso. Como dije, esta asignación es bastante importante. Así que asegúrate de crear tu propia versión del up y que presentaste en la discusión para discurso. Muchas gracias, entonces. Nos vemos en la siguiente lección.
3. Navegación a través de documentos: esta lección se trata de navegar en los documentos de su horario. Entonces cada vez que lam sketch, ves esta pantalla de bienvenida con algún uso, y también puedes acceder a los documentos recientes así como a las plantillas que se crean para los
uses. Por ejemplo, para IOS usted diseño o diseño de materiales. También puedes crear tus propias plantillas. Se puede desactivar la pantalla de bienvenida, pero creo que es muy útil, así que la dejamos por ahora, y creamos nuestro primer documento con esquema de diseño de materiales. Por lo que cuando trabajas desde documento listo hecho, puedes ver que tienes listas todas las guías de estilo, aparearte en grupos de capas de boceto y también símbolos, y puedes reutilizarlas fácilmente. Por lo que esta es manera muy eficiente. Si estás creando algún material, diseña los sitios web o aplicaciones para Google play. Si tienes algunos otros archivos con puntos catch, puedes abrirlos haciendo doble clic. Pero lo que consigues esto en lugar de abrir esos fuegos en la misma ventana que te metes en tienda de
seguimiento o ilustrador. Tienes otra ventana fuera del boceto, y es muy útil porque ahora puedes obtener los componentes de un archivo y por ejemplo, simplemente arrastrarlos a otro archivo. O puedes venir a ver. Vamos TV solo co p y pegarlos también. Alguna otra ventana fuera de curso. Siempre se puede trabajar con las tapas también. Tienes tops que puedes aquí afuera, y rara vez puedes reorganizar las tapas. Puedes cerrar las tapas desde aquí, y puedes,
ah, ah, simplemente agarrar la parte superior de una ventana y luego simplemente hacer que se pegue a otra ventana para que
tengas que tapar en una ventana. De acuerdo, cerremos esta ventana que no necesitamos. Podemos presionar el comando W y luego hagamos más grande esta ventana. No queremos entrar a pantalla completa, así que presentamos hold health en el teclado y cambios de pantalla completa a Plus vengo para que
podamos entrar a este molde que eso asustará a nuestra ventana. Por lo que ahora se maximiza la ventana de boceto, y puedes navegar por todas las páginas fuera de nuestra aplicación móvil y tableros de arte con algunos atajos de teclado prácticos. Entonces si quieres acercar algún objeto o alguna capa o el fueraborda, simplemente haz clic en el nombre del artículo y luego presiona el primer atajo. Es comentario a cuando presionas comando a ti. Obtén la vista de pantalla completa de lo que has seleccionado recientemente. El segundo atajo es el comentario uno y comentario. Uno te permite ver todo lo que tienes en tu proyecto, por lo que asusta hasta ahora hasta 14% para manejar entrevista que tienes todo lo que
tienes en proyecto. Después puedes seleccionar algún otro elemento, y puedes presionar comando para acercar. Es otra vez. Y como ves esto no tiene por qué estar en tablero de arte. Se puede seleccionar cualquier elemento, y se acerca tanto como se puede. Por lo que el siguiente atajo es libre de comandos y común. Congelar el atajo corto que utilizó para llevar el objeto seleccionado, por ejemplo, éste al centro fuera del puerto de vista. Entonces la razón por la que lo hacemos ISS porque cuando seleccionamos algún otro elemento y solo presionamos venir, plus y mando a los mineros, no
funciona porque no está en el centro, así que tienes que presionar comando libre, y luego puedes usar la familia hay atajos de plantas comunes y millas comunes porque se acercan exactamente al centro fuera de la vista por lo que el flujo de trabajo más rápido es seleccionar un elemento, y luego presionar comando para que lo amplíe y puedes usar los signos más y menos aquí en el top. O puedes usar más común y comentario común menos. Entonces puedes presionar cero común para acercar al 100%. Y también puedes duplicar rápido en este icono de zoom para llevar al 100% de ti. Entonces esas son dos formas de lograr eso. Anochecer. De acuerdo, una cosa más que me gusta mostrarte es cuando seleccionas un elemento y tienes cierto nivel de zoom . Siempre puedes presionar y mantener presionada la barra espaciadora, lo que te permitirá cambiar la vista. Por lo que presentas hold space bar que presionas el botón izquierdo del ratón y simplemente
te drogas y puedes ver algunos otros objetos en el otro barco. Por lo que esta es una herramienta cargada de resorte. Entonces eso significa que cuando lo
presionas, tienes que sostenerlo. Tienes que sostener rebabas espaciales, y cuando lo sueltas, ya no
puedes usar esta herramienta. Por lo que vuelves a la herramienta que has estado usando y s O que tienes estas
técnicas muy comunes para navegar. Para boceto, tienes comando libre de comando, más menos común. Vamos, un comando para y vamos en cero y todo lo que tienes en esta vista dinero también. Está bien. Y hay una cosa más que me gusta mostrar en esta lección. Y esto es lo que se llama vista de presentación. No es el modo de pantalla completa, pero oculta todo el clatter de la izquierda y del lado derecho así como la barra de herramientas, y se accede al mismo presionando el punto de comando en el teclado. Entonces ahora tienes un par de parte que se siente pantalla entera, y tienes puedes trabajar en boceto. Si conoces los atajos de teclado, puedes usar todos los atajos para acceder a las herramientas y también a todos los atajos que comentamos en esta lección. Podrías hacer una presentación o, por ejemplo, si tienes una pequeña pantalla inmobiliaria, puedes trabajar de esta manera en boceto. Por lo que presionas comandante para volver al molde de boceto normal con todos los paneles, y básicamente eso es todo. Ahora es comando de prensa y para crear una nueva instancia fuera del sketch y lo que me gusta mostrarles y esta es la parte que he grabado más adelante. Después de grabar este curso después de que se diera a conocer la nueva versión de flagelo, me gustaría mostrarles las diferencias en términos fuera de la interfaz de usuario del sketch porque cambió
ligeramente porque horario refresca su interfaz en horario. Versión 52 Estaba grabando en la anterior. Pero honestamente, no
hay necesidad de volver a grabar casi nada, y encontrarás las lecciones actualizadas a lo largo del curso. Pero quiero que echen un vistazo a las nuevas características fuera del boceto y la nueva interfaz y
cómo está organizada. Entonces básicamente, esos son solo cambios menores con todo el estilo y las fronteras, y todo es ligeramente mejor y ligeramente mejor parecido que en la versión que
puedes ver en el curso. Pero lo que es realmente genial es que ahora puedes ir a las preferencias del sistema y cambiar el modo en tu sistema para que puedas aplicar la apariencia clara u oscura para dispersar. Si cambias de luz a oscuridad, inmediatamente
cambias a versión oscura off sketch y déjame mostrarte cómo puedes cambiar entre la luz y la oscuridad. Esta es una opción del sistema para que puedas seleccionar fácilmente la que más te convenga. Por otro lado, tienes un diseño diferente un poco diferente fuera de los paneles y herramientas. Básicamente, han mejorado la claridad fuera de los iconos y la claridad fuera de la interfaz general. Pero para ser honesto, encontrarás casi todas las opciones en un mismo lugar. Entonces si estás trabajando con la U. S desvío de sketch con este curso de vez en cuando, conocerás estas ligeras diferencias en los iconos que tienes en el panel y tal vez algunas esquinas
redondeadas y probablemente colocando el datos aquí. Pero rápidamente lo descubrirás, y no debería haber diferencias mayores y cómo se comportan las cosas. ¿ Y eso explicará en el curso? Si solo hay avísame y lo arreglaré, seguiré actualizando este curso con cada nueva actualización fuera del boceto que trae algo fresco y algo nuevo. Por lo tanto, ten la seguridad de que conoces todas las herramientas y técnicas modernas que puedes aplicar al
boceto . Y seguiré haciendo eso hasta que me di cuenta de que ya no tiene sentido de esta forma de
esta manera , y luego acabo de empezar de nuevo y grabamos este curso desde abajo. Entonces creo que estás en buenas manos. Veo en la siguiente lección
4. Hacer selecciones: hola y bienvenidos a esta siguiente lección en la que les voy a mostrar cómo seleccionar las cosas en boceto y este es conocimiento bastante básico. Pero si has trabajado especialmente con Father shop u otro proyecto de ley una recta antes, podrías encontrarlo bastante sorprendente porque no funciona de la misma manera. Entonces básicamente y eso será para la tienda o ilustrador. Presionas el wiki para ingresar a este dedo de selección, y si presentas a Vicky en boceto, básicamente
vas a un dedo del pie vector. Por lo que se trata de diferentes herramientas. Por lo que presionamos escape y aunque estés dibujando rectángulos o más, simplemente
presionas escape y luego estás en este dedo del pie electoral para que puedas saber pasar sobre la capa. Como se puede ver, se destaca tanto en el panel de capas como en lienzo, y se puede hacer clic en el grupo. Se puede ampliar el grupo, se
puede ir dentro, y como se ve todas las capas están siendo ah, resaltadas. Y si quieres seleccionar cualquier capa, puedes hacer click, y si haces click quieres seleccionar primero el grupo, Así que para ir dentro del grupo, tienes que hacer doble click, por lo que haces doble click en un grupo para ir dentro y ahí tienes. Ahí hay otro grupo dentro. Por lo que ahora este segundo grupo fue seleccionado y aún así así. Hijo, tengo que DoubleClick DoubleClick dentro de estos grupos y ahora estoy en este campo. Por lo que estoy he seleccionado el campo, así que tuve que hacer clic seis o siete veces para seleccionar esta capa. Y lo que básicamente puedes hacer es que puedes cambiar el comportamiento seleccionando esta rápida a través al seleccionar en el grupo para que no tengas que duplicar rápido. Simplemente haz clic una vez para ir dentro de este grupo. Entonces cuando lo hice en mi grupo principal, hago clic una vez. Ahora el segundo grupo tiene que tener este click frutal al seleccionar, habilitado también y el primer grupo. En realidad, si voy dentro del grupo para el Grupo Sun también, necesito hacer clic en él también. Y ahora, si vuelvo a este Golden Gate Bridge Group, puedo dar click en Lee una vez para seleccionar el sol. OK, por lo que puede tener esto habilitado para todos los grupos de forma predeterminada. Es muy fácil. Tienes que ir a las preferencias, así que presiona coma comentario. Y ahora, en la sección de capas, solo
tienes que hacer clic en habilitar fruta rápida para nuevos grupos. Y cada vez que creas un nuevo grupo, tienes este comportamiento por lo que no necesitas hacer doble clic. Simplemente arroja una vez y para entrar a esta capa hay una segunda vía, aunque vas a tener que habilitar esta opción en preferencias para ir dentro de cualquier grupo y para seleccionar cualquier capa con un solo clic. Lo que haces es solo presionar y mantener presionado el comando mientras lo haces. Y si presiono y mantengo el comando como ves todas las capas dentro, esos grupos están resaltados, y cuando hago clic, esta misma capa de Castell está seleccionada. Entonces así es básicamente como lo hago. Comando Haga clic para seleccionar cualquier capa, pero también puede pasar el cursor sobre algunas capas y luego haga clic derecho o contra, haga clic y luego pico capa, y tiene lo menos fuera de todas las capas que se sientan justo debajo de su ratón, y usted puede seleccionar cualquier capa como así que sí, así que así es como lo haces. Simplemente presiona comando y selecciona en cualquier lugar, aunque esté anidado dentro de un grupo. Por lo que también hay otra manera, Teoh selecciona una capa y edita. Entonces si tienes una capa vectorial, vienes y
haces clic en la capa para seleccionarla, y luego puedes hacer algunas operaciones simples. Tal escala. También puedes presionar comentario y sobre una de las esquinas para rotar. Pero si quieres entrar al modo de edición, simplemente
presiona volver. Si presionas return en el teclado, como ves, ahora
puedes ingresar y acceder a todos los puntos vectoriales y cambiar un vector puntos en consecuencia dedo del pie lo que deseas lograr. Entonces este es un modo de edición Eddie, y vas a este modo todo presionando return. Ahora presiono escape, y si presionas escape un par de veces, vuelves a ti. Siempre vuelve a esta herramienta de selección para que puedas seleccionar algunas otras capas en boceto. Entonces hagamos un resumen rápido. Se puede arrojar en los grupos para acceder a las capas. Se puede hacer doble clic en los grupos, y hacer doble clic si hay grupo anidado, y también se puede habilitar esta opción click a través en los grupos, o simplemente se puede coman click en cualquier capa para seleccionarlo. Y también hay una técnica más que me gusta mostrarte en que es seleccionar múltiples capas a la vez. Pasemos a esta siguiente imagen, y lo que voy a hacer es seleccionar esta primera capa con comando y ahora presiono comando y también botón shift para seleccionar más de una capa. Y si mando turno, haga clic en la segunda capa. Como puedes ver, ambos fuegos están seleccionados ahora, por lo que puedo seleccionar las capas con turno en el panel de capas así como ves todas las capas seleccionan en entre esas capas en las que hice clic y puedo co mes hacer clic en las capas en el panel así para seleccionar algunas capas múltiples. Además, hubo otra técnica que te permite simplemente arroyo y drogas para seleccionar cualquier grupo. Como se ve, se selecciona el grupo. Pero si presiona comando mientras lo hace, puede seleccionar cualquier capa que esté en esa selección. Por lo que simplemente puedes drogar para seleccionar el grupo o puedes comandar droga para seleccionar cada capa. Déjame copiar esta bicicleta mentirosos por ahora. Así que vamos, C, ven en TV y sólo voy a moverlo ahí y elegamos esas capas arrastrando. Y como ves todas las capas dentro de la moto se seleccionan cuando está fuera de cualquier grupo, De
esa manera puedo seleccionar todas las capas. Y si lo deseas, Teoh selecciona todas las capas. Excepto, por ejemplo, esta puedes hacer clic derecho en esta capa y vendedor y bloquearla para que también puedas mandar
cambio de mama l para buscar la capa y que mientras drogas no seleccionarás este campo 30 más tarde. Entonces eso es básicamente todo en lo que respecta a seleccionar jugadores y agrupar en bocetos preocupaciones. Entonces gracias por su atención y nos vemos en la siguiente lección.
5. Páginas y mesas de trabajo: De acuerdo, ahora
centrémonos en la estructura fuera de tus documentos de boceto, por lo que lo principal en la estructura es la página, para que puedas tener muchas páginas en tu documento y en cada página. Puedes tener, por ejemplo, una sección de tu aplicación, o puedes tener una versión móvil. Y las páginas también son buenas para la velocidad porque felicitas a muchos tableros de arte en páginas, y puedes optimizar la velocidad fuera del boceto de esa manera. Entonces como puedes ver, puedes colapsar o puedes mostrar las páginas. Al menos puedes hacer clic en este pequeño icono junto al nombre de la página para cambiar las páginas también. Y páginas contiene tableros de parte. Se pueden ver todas las demás embarcaciones presionando comando uno. Se puede cambiar de dedo la segunda página que tenemos aquí. Estos son los símbolos de página, y ahí tenemos un símbolo también. Habla de los símbolos la próxima vez. Ahora que cambian de nuevo a este DuPage y puedes tener muchos tableros de arte en una sola página. Entonces ahora estoy crujiendo por los tableros de arte y dentro de los artículos tenemos los grupos y dentro de los grupos tenemos otros grupos o las capas así que qué pasa si seleccionas el grupo o una capa y él intenta moverlo al costado del tablero de arte como ves el grupo Audible
Clips para que ya no puedas ver el contenido que está fuera del Archibald. Pero si tomas el grupo y lo pones fuera del arte, pero como ves ahora, no
está en el registro de nuestro barco. Es solo sentarse solo en este do perra para que básicamente puedas transformarlo en un perno de arte . Si selecciona cualquier grupo que esté en la página, puede presionar A y A es herramienta inaudible. Y si presionas A, puedes ir al boceto del lado derecho y básicamente puedes crear el Archibald alrededor selección. Entonces tienes esta primera opción aquí alrededor de la selección, y mientras tu grupo de marcas está seleccionado, solo
puedes hacer clic en eso. Y ahí tienes un nuevo arte. Pero ese es el tamaño de este grupo, por lo que puedes volver a este artículo. También permite presionar una de nuevo, y se puede acceder a diferentes tamaños y diferentes presets. Entonces tengo dispositivos IOS aquí, un diseño de material de diseño web responsive también Y si
accedo, estaba dispositivos Ahí tienes iPhone siete. Tienes iPods y esas cosas para que podamos crear tablero de arte iPhone siete. Al igual que todo lo que puedes simplemente dejarme volver a esto una herramienta, y simplemente puedes hacer clic en los dispositivos del Iowa para crear todo el arte. Pero de esta sección eso tienes ahora todos los iPods, tienes todos los iPhones, y puedes liderar los nuestros tableros presionando retroceso en el teclado. Entonces volvamos a esto. Encontré tablero de arte. Y si quieres duplicar el tablero de arte ahora tienes remolque selecciona este cartón y simplemente haz clic en el nombre de las tablas de arte y comando, el para duplicar. Y ahora tenemos una copia de este tablero de arte, y éste en realidad está vacío. Podemos cambiar a los Morgans. Podemos mandar la otra vez para hacer otra copia, pero también puedes duplicar tableros de tarjetas existentes con contenido para que puedas duplicar todo el contenido dentro del tablero de arte. Simplemente selecciona el arte a bordo de mercancía de prensa y ahí lo tienes. Hay un duplicado de este mismo arte dicho, pero con todo el contenido, ahora
puedes cambiar el tamaño del tablero de arte. Se pueden hacer algunas alteraciones. Por ejemplo, si quieres cambiar y comparar dos vistas diferentes de tu página, puedes hacer la copia, y puedes trabajar en esta copia fácilmente si deseas deshacerte del artículo. Pero quieres conservar el contenido, presionas shift command G y ahora en el arte a bordo de Scone y solo tienes el contenido de los grupos y las capas. Se puede seleccionar el grupo, y luego se puede volver a este artículo, herramientas arriba. Basta con presionar a y crear el arte. Pero de nuevo, al seleccionar alrededor de la opción de selección. Y ahí tienes, tienes un nuevo tablero de arte, y también podemos hacerlo cuando tengas algún contenido dentro del tablero de arte. Por ejemplo, vamos a crear aquí un rectángulo simple, y quieres hacer marcha. El audible suspira a este contenido. Solo tienes que hacer clic en la opción de redimensionar para encajar, y primero tienes que seleccionar el arte sobre. Después haces clic en recita dos pies y se re tamaños dedo del pie Cualquiera que sea el contenido que esté dentro. De acuerdo, vamos a explorar algunas otras opciones que es como el tablero de arte, y lo que puedes hacer es cambiar la propiedad de color de fondo, por lo que significa que tu tablero de arte puede tener rojizo, por ejemplo, color de fondo, y también puedes incluir este color en exportación. Por lo que significa que si quieres guardar este arte a bordo como activo gráfico, puedes seleccionarlo y solo puedes hacer exportable seleccionar el signo más, y no puedes exportar esto como gráfico. Y si d seleccionas, incluyendo exportación, se exportará con fondo transparente. Entonces intentemos exportar esta capa, y ahora mismo voy a exportar iPhone siete copia. Y como ves, puedes guardarlo como un archivo PNG, y ahora contendrá este fondo rojo. Eso es escape de prensa para salir de esta función, y te voy a mostrar cómo seleccionar tablero de arte múltiple. Entonces solo presiona turno y turno. Da click en cada una fuera de las capas fuera de los nombres de Alborz, y ahí lo tienes. Puedes seleccionarlos. Se pueden establecer múltiples colores de fondo, y también se pueden exportar varias imágenes también. este momento, puedes exportar barcos de arte gratis para que se guarden imágenes gratis imágenes PNG gratis, y también hay característica cool en el menú de archivos, y esto es exportar nuestros tableros a pdf, y en realidad puedes exportar todos de los tableros de arte a un archivo Pdf y el pedido apagado. También se pueden establecer las tablas de arte en las propiedades, lo que se puede acceder a las propiedades presionando comando coma. Y ahí lo tienes. Se puede acceder a la tina general, después ir a nuestra tabla de exportación y seleccionar cómo aparecerán las palabras son en el incendio mediático por lo que tienes de izquierda a
derecha, de derecha a izquierda de abajo. Se pueden seleccionar diferentes opciones, y también se pueden reorganizar los tableros de arte. Puedes hacer tu propio pedido simplemente crujiendo en nuestra pizarra, mismo y drogando al lugar donde deseas que aparezca. Entonces te mostré cómo exportar los tableros de arte a activos PNG a peleas de BNG, y en realidad puedes hacerlo simplemente crujiendo en los otros barcos. Nombre. Entonces eso es como, por ejemplo, esto se compran y puedes hacer de este nuestro barco exportable. Se puede desplazar click en muchos son barcos para exportarlos como archivos PNG gratuitos, diferentes. Pero si quieres mostrarle a alguien todos los tableros de arte en una imagen, puedes hacerlo simplemente creando otro tablero de arte encima de ellos. Por lo que presiono un y trato de encerrar todo este barco de arte en una pizarra extra de corazón que va en la parte superior. Y como ves, no los agrupa, pero sí puedes e ir a las opciones de exportación. Y ahí tienes una imagen con para artículos. Entonces eso era necesidad. Ese fue un lindo truco, y los veo en la siguiente lección.
6. Organización de las capas: en el lado izquierdo de la interfaz de boceto. Se cuenta con una capa espinal en la que se pueden organizar las capas. Se pueden filtrar las capas, acaba de introducir el nombre fuera de la capa o grupo, y ahí se tienen los resultados. También se puede acceder a los grupos. Se puede acceder a los tableros de arte, y también tenemos las capas se puede seleccionar grupo o seleccionar múltiples capas con tecla de desplazamiento. Y si quieres crear un grupo fuera,
selecciona las capas, selecciona las capas, presiona comando G. Así que cuando lo agrupes, puedes unagruparlo también. Se puede presionar comando shift G toe en grupo las capas, y si se hace clic en el grupo blogueado, puedo desplazar Comando Grupo Jichuan. Una vez ese turno comandante dedo en grupo todos los grupos dentro y ella está comin G toe on group aún más lejos, y ahora tienes todas las capas que simplemente se ponen en la parte superior de esta arma. Los elementos no son tableros sin ningún grupo, así que con nosotros puedes ocultar capas con este pequeño icono junto al nombre, o puedes cambiar la edad del comando para ocultarlos, o puedes desplazar comando hacia fuera para bloquear las capas para que ya no puedas editar ni seleccionar. Esta capa parecía. Y también hay un pequeño triángulo al lado del grupo así como al lado de éste de pseudo grupo. Se trata de un grupo fuera de elementos que en realidad son capas vectoriales para que puedas seleccionar capas vectoriales, y puedes poner esas capas en otra capa para crear una forma combinada. Esta es una forma vectorial combinada, y esto no es, ah, grupo
adecuado. Se trata de un grupo de vectores, que se puede, por ejemplo, utilizar Teoh. Combina estas formas con operaciones booleanas. Puedes hacer clic en este pequeño ícono y puedes hacer que las operaciones booleanas como los sindicatos resten. Se puede entrecruzar la diferencia, y les muestro las opresiones en las próximas lecciones. Pero básicamente en las capas. Es así como puedes crear un combinado con forma de vectores con nosotros que tienes aquí. Este pequeño ícono es un símbolo, ícono y símbolo. Es un gran concepto y boceto que puedes notar en sus símbolos directamente en este tablero de arte, tienes que hacer doble clic en el símbolo, y luego vas a esta página especial de símbolos y todos tus símbolos aterrizan en el símbolo. Hablar especial sobre esto más tarde, Pero básicamente, en este espacio de símbolos, se
puede editar el símbolo. Y cuando regresas a la página de Web Elements ahí tienes los cambios realizados a este símbolo . Entonces recuerda esto. Vengo en el panel de capas Siguiente característica está cambiando los nombres fuera de las capas. puede hacer doble clic en el nombre para cambiarlo, pero también se puede presionar comando son, lo cual es un buen trabajo para Dios en también se puede hacer clic derecho y seleccionar cambiar el nombre de este menú, pero siempre es mejor usar. Comando ya están. Estás en el modo de edición. Puedes cambiar el nombre de esta capa, y también presionará tabulador para ir a la siguiente capa. Y aún estás en esta edición más para que puedas editar los nombres de varias capas a la vez. Y también puedes oprimir el talón de cambio para subir el panel de capas para que puedas bajar con la parte superior. Se puede subir con turno superior. También capas. La jerarquía es bastante obvia. Si tienes mentiroso eso está arriba. Cubre todo lo que hay debajo, y si quieres cambiar la posición de las capas en el panel de capas, presionaste el comando de opción, y luego presionas flecha en el teclado para comprimir comando de opción hacia arriba para moverlo hacia arriba en el comando late respond u option y flecha abajo para mover su hacia abajo. También puedes presionar control. Por qué sostener este comentario y opción para moverlo a la parte superior o a la parte inferior del panel de
capas. Por lo que esto es lo mismo que usar esos aiglones de puntera hacia atrás y hacia adelante icono que puedes usar para mover la capa en el panel de capas. Y también puedes presionar y mantener la opción mientras lo haces para mover sus dos delanteros o para moverlos hacia atrás. Entonces a la parte superior, fuera del panel de capas o al fondo fuera de la capa espinal. Y básicamente esta pobre capa ahora está en el fondo de la lista, por lo que nadie concibió. Entonces eso es todo lo que tenía que decir Teoh sobre el panel Capas en boceto. Os veo chicos en la siguiente lección
7. Operaciones de boolean en formas de forma: Hablemos ahora de operaciones lógicas o, en otras palabras, en otras palabras,
booleanas en bosquejo. Por lo que necesitas dos o más formas que sean formas vectoriales en boceto y luego puedes usar unión , restar, intersectar o diferencia a operaciones lógicas. Tienes que seleccionar todas las capas. Por lo que selecciono tanto sobre 5/5 copia y el 1er 1 es sindicato. Entonces, como pueden ver, ahora
tengo una forma combinada y todas estas operaciones son reversibles. Por lo que siempre puedo recuperar eso. Puedo hacer click en este pequeño rectángulo y puedo cambiar esta operación booleana. Y una cosa muy importante a notar es que esta forma se fusiona para que la capa superior por lo que esta más de cinco copia hereda todos los estilos de la capa en la parte inferior. Algunos eso los más de cinco regalos trazo o el color de combustible frío a la capa en la parte superior. Si bien usaste esta unión una operación lógica. Siguiente 1,000.000.000 de operación se está restando para que puedas restar y fusionar dos capas en una, y ahora tienes una forma combinada para que la capa que está en la parte superior para que este general pueda ser libre, corta todo de las capas inferiores. Por lo que copia general a en este caso así prevalece siempre es la capa superior. Por lo que hay que recordar que esto no es una mascota. Se puede ver que aquí también hay un derrame cerebral. Entonces esta es una operación booleana. Y entonces usualmente guardo las formas más grandes en la parte inferior para que pueda cortar con las formas que están arriba. Por lo que por favor tenga en cuenta que tanto en restar como en capas de unión. El orden es muy importante porque en unión teníamos esta forma superior que hereda todas las propiedades, colores y trazos de esa forma de abajo. Ahora tenemos cruzado. Y si seleccionamos ambas formas, vamos a usar esta opción de intersección y dejar palabras comunes en esas dos capas. Y en realidad, la
diferencia es todo lo contrario porque todo lo que es en común para estas capas
se recortará . Por lo que ahí lo tienes. Unión restar, cruzan y la diferencia Operaciones lógicas. Y recuerda que siempre puedes volver atrás y realmente puedes revertir lo que hiciste con las operaciones de
lingotes. Y ahora mismo te voy a mostrar cómo crear iconos simples usando estas
operaciones de lingotes y vamos a usar formas simples así como un dedo de operaciones lógicas. Crear boceto de iconos. Entonces primero eso es crear el ícono de la nube y vamos a usar la herramienta ovalada. Entonces presiono Oh, eso con turno. Yo sostengo las proporciones fuera del sobre y ahí tengo esta primera forma, por lo que la segunda forma será la segunda más. Presento sostiene turno para mantener proporciones para que vuelva a ser círculo perfecto, y ahí tenemos esta forma superior. Ahora vamos a crear el último, y presiono sobre el turno general para obtener proporciones y también mientras creamos formas en boceto. Puedes presionar y mantener la barra espaciadora sin soltar la izquierda más inferior y mover la forma alrededor para que pueda cambiar la posición y aún así puedo dibujar la forma. Ahora puedes ver la línea roja que sugiere que está perfectamente alineada con las otras formas para que pueda terminar esta forma de nube con rectángulo por lo que presiono son en el teclado y dibujemos un rectángulo aquí para que tengamos toda la forma fuera de la nube. Por lo que esto es sólo operaciones básicas, dibujo
básico de forma. También puedes presionar opción mientras dibujas una forma, también. Lo conduje desde adentro y ahora selecciono todas las formas y puedo cambiar el borde. Puedo cambiar el campo. Eso Como puedes ver, puedo cambiar por completo las propiedades más antiguas de las formas. Si selecciono capas ahora, podemos usar la operación de lingotes para fusionar todas esas formas juntas. Entonces seleccionemos todas las formas y usemos las operaciones de lingotes de unión. Y como pueden ver, ahora
hemos combinado forma en el panel de mentirosos y podemos hacerla más grande para que zoom con plus común y vayamos al modo de edición para que los vectores refinen esta forma. Por lo que presiono return en el teclado y como pueden ver, ahora
puedo una droga alrededor de algunos puntos vectoriales. Puedo ajustar las asas para que mi icono sea perfecto. Necesito ajustar a este tipo y moverlo a la izquierda. Como puedes ver, tengo este tipo inteligente también para los puntos vectoriales así que básicamente podemos jugar alrededor. Puedes seleccionar los puntos vectoriales y moverlo con la boca. También puedes hacer clic en los puntos vectoriales y usar las flechas del teclado para ajustar la posición, puedes ajustar los mangos. Y básicamente eso casi se hace para nuestro me fui. Y lo grandioso es que esta forma combinada sigue siendo acreditable y puedes editar cada capa por separado. Ahora, una cosa más a la que me gustaría acceder son las propiedades fronterizas. Por lo que voy al lado derecho de la frontera y hago clic en este pequeño ícono y que podemos cambiar las hormigas así como articulación. Entonces déjame hacer click en esta juntas redondeadas, y ahora este ícono se ve aún mejor. Entonces ahora tienes este pequeño icono de nube lindo que se hizo en boceto usando las
operaciones booleanas . De acuerdo, bueno, los que tenemos aquí, esto tal vez sea lluvia o nieve. Sí, nieve, probablemente. Entonces hagamos nieve y usemos un sobre. Voy a mantener turno por proporciones. Voy a dibujar un segundo por dentro. Voy a sostener la barra espaciadora para ajustar la posición. Pero para ser honesto, es mucho mejor ajustar la posición con las opciones de alineación en la parte superior. Entonces los tienes en la parte superior, ¿verdad? Y alinémonos horizontal y verticalmente también. Entonces si seleccionas bengalas, es muy, muy fácil centrarlas usando las opciones de alineación. Ahora mismo, puedo usar operaciones booleanas y necesito algunas rastreadas. Y debido a que mi orden de apilamiento fuera de las capas era correcta para que el general siete, que es la capa con un círculo más pequeño, estuviera encima. Pude cortar esto a más de siete de más de seis. El estrato que estaba por debajo más de siete. Por lo que ahora necesitamos cambiar el color que selecciona a más de siete. Seleccionemos el color de tacto negro. Entonces una última cosa que necesitamos es duplicar esta capa. Y básicamente, te
dije que lo puedes hacer con comando la opción. También puedes seleccionar la forma combinada y puedes moverla al lugar correcto. Y después se puede utilizar la tecla de opción para duplicar las capas. Por lo que no estoy soltando el botón izquierdo del ratón. Estoy sosteniendo la tecla de opción, y ahora tengo el duplicado para que puedas rehacer esta acción duplicada simplemente presionando Commander D ahora mismo. Y como ves, ahora
todas las formas están en su lugar. Tengo el icono de la nube así como la nieve, y uso operaciones booleanas para crear formas combinadas y su copia. Entonces eso es todo por ahora. Os veo luego chicos
8. Trabajar con formas: en la lección anterior. Hemos creado un icono de nube y consiste en formas combinadas así como óvalos. Hay formas dentro de tantas formas ahí y si seleccionas las capas dentro combinadas la forma de nube Puedes ver que cuando voy a un modo de edición y presiono volver aquí para entrar a los puntos vectoriales. Aquí hay muchos usuarios vectores puntos y forma que no necesariamente necesito tan bien, puedes dio Puedes aplanar todas estas capas y te recomiendo que lo hagas antes exportar a, por ejemplo, archivo
SPG y puedes ir al menú ah capa y luego de los baños seleccionas opción aplanada. Ahora echa un vistazo a la estructura de forma combinada. Tenemos un rectángulo y óvalos libres ahí. Entonces si seleccionamos caminos y luego aplanamos y tratamos de acceder a los puntos vectoriales con el retorno en nuestro teclado, como puedes ver se optimizaron y ya no tenemos esos puntos vector de dinero pero también ya no
tenemos este elegible formas en el interior. Por lo que no puedo acceder a este rectángulo ni más, o no puedo cambiar las operaciones booleanas dentro de esa forma combinada. Por lo que Es mejor mantener algún tipo de copia de seguridad fuera de esta forma combinada antes de aplanarse. Y engorde es en realidad la opción que te gustaría hacer al final de tu trabajo antes exportar esos encendedores vectoriales como, por ejemplo, como archivos VG para una aplicación o sitio web porque funcionará mucho mejor si es optimizado. Pero como dije, pierdes estas opciones elegibles. Y además, si previamente has trabajado con el traidor de los Beatles, podrías estar dispuesto a aplanar todos tus vectores y todas tus formas en boceto. Pero no es tan bueno practicar boceto a diferencia de otro ilustrador cuando estás aplanando mucho, así que en boceto, básicamente, te gustaría mantener las capas auditables el mayor tiempo posible, por lo que me gustaría mantener esas formas combinadas. Y es muy fácil trabajar con estos jugadores de forma combinada. Y por otro lado, algunas formas simplemente no se aplanarán tan fácilmente. Entonces si tienes una forma como esta, si voy a capa y voy a bocanadas que aplanar, recibimos el mensaje de que no podemos planear en esas capas. ¿ Y por qué sucedió eso? Bueno, eso es sólo porque esas capas están justo dentro una de la otra por lo que no se pueden aplanar las capas cuando una capa contiene enteramente la otra capa. Por otro lado, no se
puede hacer esto si no tienen ningún puerto coincidente en absoluto también. Y una operación más me gusta mostrarte es ir a este menú de capas y ir a caminos y luego dividir la forma combinada. Entonces si quieres revertir esta operación y quieres volver a las capas originales, puedes usar esta opción y luego puedes restar de nuevo para tener esta forma. También hay un tema más que me gusta abordar en este punto cuando intentas combinar formas , sobre todo cuando intentas aplanar formas. A veces tú en lugar de este resultado pretendido obtienes algo como esto. Por lo que obtienes este tema de superposición lo hará. Esos puntos vectoriales acaban de estropearse, y a veces simplemente se obtiene este problema porque de la naturaleza de las formas vectoriales que se crean en boceto. Entonces si intentas crear una forma, por ejemplo, son rectángulo, presiono son y creo un rectángulo. Entonces presiono retornado para entrar a los puntos vectoriales en modo de edición, tienes este pequeño punto que está en la parte superior izquierda, y no es coincidencia que este punto esté seleccionado por defecto. Este es en realidad el punto de partida de tu vector, y ahora eres tarjeta gráfica eran troves vector. A partir de este punto en alguna dirección, podría ir a la izquierda, o podría ir a la derecha. Por lo que para comprobar, si va a la izquierda o a la derecha, puede presionar la tecla de tabulación en su teclado y boceto. Y como ves, va derecho al siguiente punto, luego arriba al siguiente punto y arriba al último. Y este tema solapado está conectado a la dirección fuera a donde va tu ganancia. Por lo que a veces a veces se buenas las formas, que se revierten por lo que van de izquierda a derecha o de derecha a izquierda. Y si intentas combinar esas formas, obtienes problemas superpuestos. Por lo que básicamente puedes solucionar este problema yendo de los pies y luego yendo a la
opción de orden inverso si invertimos el orden fuera de la ruta que hemos creado. Entonces vamos como esa opción, y vamos dentro de esa forma a un modo de citas con retorno. Como pueden ver, tengo este punto derecho seleccionado por defecto, y si presiono arriba en el teclado, me voy a la izquierda en lugar de ir llorado. Entonces esto es sólo un pequeño hin. Pero a veces cuando se tiene este problema superpuesto, cuando se ve que los puntos vectoriales se van a estropear. Después de combinar algunas capas, simplemente
vas a capa e inviertes el orden de los vectores. OK, entonces ahora centrémonos en este segundo ícono e intentemos recrear este ícono. Puedes presionar O en el teclado, pero también puedes ir a este menú de inserción en la parte superior. Deja y ahí tienes todas las formas fuera de boceto y todas las herramientas de boceto para que puedas seleccionar óvalos, rectángulos, líneas, rectángulos
redondeados y tesis. Recuerda también los atajos. Este rectángulo redondeado. No lo uso mucho porque siempre uso rectángulo simple. Y luego dije que los rais usan a la derecha. Entonces supongo que eso es más conveniente. Mucho tiempo Haciéndolo porque nunca pegas dedo del pie un valor alrededor de las fronteras, necesitas ajustarlo un poco, así que si deseas copiar los estilos especialmente sentir y bordea entre diferentes formas, puedes dibujar algunas otras formas y tratemos de copiar estas propiedades desde esta forma para que puedas hacer clic derecho sobre la forma y luego seleccionar copiar estilos de este menú, y luego podrás después, como ambas formas con turno y clic derecho o control. Haga clic en la selección y solo pega medias, y funciona en Lee para campos y bordes. Como se puede ver, Border Radius no se copió. También puedes usar ah, práctico atajo de teclado. Por eso. Puedes presionar comentarios de opción, ver, así que ven a ver para copia, pero también presionas opción. Y mientras pega que también presiona opciones, Así opción Comando V. Y si te encuentras usando los mismos estilos de forma una y otra vez, puedes seleccionar la forma y puedes ir al menú de edición en boceto. Y aquí tienes la opción de establecer este tiempo como predeterminado para que por defecto puntera todas las herramientas. Entonces aunque dibuje ahora mismo, tengo la misma frontera y el mismo campo que se dijo default de EU. Entonces ahora eso es hacer que esto fuera un poco más grande. Eso tiene una sensación blanca en esta forma, y vamos a crear esta pequeña forma de nave que tenemos aquí con abrasión de lingotes. Entonces vamos a dibujar otro de todos sin turno ahora mismo, Así que no sé qué tienen proporciones. Y ahora vamos a seleccionar las formas y elegir intersectar. Entonces como puedes ver, tendremos esta forma superior usando operaciones booleanas. Hagamos otra forma con Oh, y recuerda que siempre puedes presionar la barra espaciadora para posicionar la forma. ¿ Por qué? Dibujando la forma eso sin soltar el botón izquierdo del ratón. Y así posicionemos esto correctamente y movamos esto sobre cuatro bajo forma combinada. Y como puedes ver, tenemos en esta forma combinada tenemos sensación blanca para que cubra las capas de abajo y ahora podemos muesca esta forma para que podamos usar incrementos de un píxel con flechas del teclado pueden presionar hacia abajo o hacia arriba para mover la forma por un píxel. Si quieres moverte, mi 10 nos recoge, solo
tienes que pulsar turno. Así que desplaza hacia abajo o hacia arriba flecha. Y también puedes natch con una de las opciones de retención de incrementos de 10 píxeles. Por lo que opción flecha abajo flecha arriba irá 0.10 punto dos grandes arriba. De acuerdo, entonces lo que vamos a hacer ahora es que vamos a presionar L para la línea del dedo del pie y vamos a crear nuestra línea simple. Tenemos que hacer coincidir esta forma, la posicionarla correctamente y luego necesitamos seleccionar la forma y la mercancía de prensa para duplicar esta línea. Por lo que queremos usar la misma forma, pero van a dar click derecho en la forma y seleccionar la transformación que tengas. Las rotaciones huyen siendo curso total o verticalmente. Entonces volvamos esto horizontalmente. Y vamos a muesca esta forma la posición correctamente debajo de la nave espacial A. Y usemos otra línea para la última forma. De acuerdo, así que ahora ya casi está listo. Sólo necesitamos pedir prestadas algunas formas de nuestro anterior vengo. Voy a venir d esas formas y me voy a imaginar para que se pongan bajo la nave espacial y ahí lo tengas. Por lo que ahora necesitamos posicionar correctamente los elementos, y esas son básicamente todas las operaciones que necesitas recordar. En orden. Teoh crea formas en boceto también para gestionar las formas y creó operaciones booleanas. A veces es mucho más fácil y mucho más satisfactorio crear tus propios iconos en boceto. En lugar de buscar iconos ya hechos a través de Internet. O a veces solo tienes una, dijo
Nikon. Pero no tienes este ícono en particular que quieres usar para algún caso, y esa es la razón por la que puedes recrear los iconos y usar estas formas, operaciones de
lingotes y todas las cosas que te mostré en boceto. Es muy, muy fácil ahora. Una cosa más que quiero mostrarte. Puedo ir a este menú de vista y seleccionar mostrar reglas. También puedes presionar control, están en el teclado para acceder a las reglas, y tienes reglas a la izquierda y a la derecha. Puedes hacer clic en la regla a otro tipo inteligente, pero a veces es más fácil dedo del pie sobre y ver si las formas están alineadas correctamente. Entonces esto da forma dentro de nuestro OVNI. Podrás crearlos entre las lecciones. Te animo a hacerlo, y eso es todo por ahora. Gracias por ver Nos vemos en la siguiente lección.
9. Herramientas de vectores: en esta lección, te
voy a mostrar cómo usar un boceto de dedo vectorial. Es dedo del pie muy poderoso, pero necesita algo de práctica para ser dominado. Por lo que presionas V en el teclado para llegar al dedo del pie vectorial, y ahora puedes hacer clic quiere crear tu primer punto vectorial. Este vector puntos pueden ser rectos. Y, como pueden ver, cuando cree el siguiente punto, voy a dibujar una línea recta. Entonces eso es crear una línea recta aquí también. Y si quieres crear el punto de curva, haces clic y mantén pulsado el fondo izquierdo del ratón y necesitan droga a la izquierda o para conducir para crear que maneja. Y como pueden ver, tengo dos asas. Hay un mango derecho que determina la ruta que realmente se creó, pero también tengo este manejador izquierdo, y esto determina la posición de los siguientes puntos vectoriales de la ruta que serán creados por los siguientes puntos vectoriales. Entonces déjame arrojar y aguantar ahí, y voy a usar mangos segunda vez. Además, echa un
vistazo a que cuanto más mangos tengas, más de los cuidados. Si lo creas ahora mismo, voy a crear el siguiente punto y esta bocanada es correcta. Pero el siguiente buff irá directamente al fondo de la letra, y por eso necesito cambiar el comportamiento de los puntos vectoriales. Entonces ahora tengo estos mangos de espejo, y lo que significa es que están en el mismo camino y ahora son simétricos para que yacen en la misma línea. Pero también puedo seleccionar esto conectado o un simétrico y donde opresor se desconectó. Puedo mover cada mango por separado para que ahora pueda mover el mango derecho para que establezca la dirección para el siguiente camino. Y como ven ahora, puedo crear este camino suave hasta el fondo de mi letra. Por lo que traje este punto vectorial con mangos victoriosos desconectados. Necesito que este mango sea un poco más grande, y ahora puedo hacer clic y mantenerlo presionado para crear los siguientes mangos. Y el comportamiento por defecto es que los mangos están espejados y ese es básicamente el mejor , porque puedes crear formas que sean extremadamente suaves y tener estas hermosas líneas que ni siquiera
puedes decir que los puntos vectoriales están ahí . Pero a menudo no es el caso, y a veces solo necesitas desconectar los puntos o crear unos puntos simétricos. Y también otro consejo pro es que puedes mantener pulsada la tecla shift mientras arrastras esas asas. Y ahora, como puedes ver, obtienes resultados muy suaves también para que puedas arrastrar con shift toe, mantener la línea, y es por eso que generas muy pequeño Fine. Por lo que básicamente necesita algo de práctica y lo que nosotros puedes hacer. Puedes hacer doble clic en el punto vectorial Teoh cambiar estos periodos de espejo a recto, y si vas recto no tienes ningún cuidado de por lo que no tienes ningún mango, y puedes hacer doble clic de nuevo para volver a cambiar a una opción espejada. lo que ahora puedes seleccionar, por ejemplo, desconectado para que puedas modificar el ángulo fuera de un mango sin modificar el ángulo fuera del 2do 1 Y puedes cambiar la posición fuera de los mangos así que tanto sea el dirección fuera de la curva que necesitamos. Voy a crear uno puntos vectoriales más aquí, y voy a cerrar el camino ahora mismo, y pueden cerrar arriba haciendo clic en los primeros puntos vectoriales para que ahí lo tengas, y lo mejor de ello es que ahora tienes un camino en el caño de capa, y siempre se puede acceder a esta ruta presionando retorno, y se puede cambiar cualquier punto vectorial en su interior. Entonces si decides que este vector puntos es no, es perfecto y no ajustarás las asas que puedes hacer para que podamos dar click en el rector Punto y luego podrás mover las asas en consecuencia. Si mueves las asas para que estén en una línea, posiblemente obtendrás la mejor curva. Por lo que volviendo a las opciones que tienes rectas sin ningún tipo de mangos que has reflejado cuando los mangos están a la misma distancia y el mismo ángulo de los puntos vectoriales, también
has desconectado donde cada asa se mueve por separado, y tienes esta una opción simétrica cuando están en el mismo ángulo. Pero cada uno puede estar en una distancia diferente de los puntos vectoriales, y también te da resultados muy suaves. También se pueden eliminar tanto los puntos vectoriales, y se puede hacer clic en el mango incluso un mango, y se puede eliminar incluso mientras se maneja. Si presiona retroceso en los puntos vectoriales, la trayectoria sigue cerrada y el segundo vector soportado se convierte en el primero. Por lo que para abrir el buff, se hace clic en los puntos vectoriales. Seleccionas ruta abierta, y ahora puedes presionar retorno. O simplemente puedes terminar de editar para escapar sin cerrar el camino. Por lo que a veces necesitas solo una forma sin el camino de cierre, y si posteriormente decides que quieres cerrar este camino, puedes presionar retorno. Entra para acceder a esta nada, moldea cualquier concreto en el primer punto para cerrar el camino. También puedes tener los puntos vectoriales a los caminos. Entonces cuando pasas el cursor sobre este camino, tienes este punto azul y te permite hacer click en el camino a otro punto vectorial. Y también una gran profundidad es mantener el comando mientras se cierne sobre esta línea para obtener los
puntos vectoriales directamente en el medio fuera de esta línea. Por lo que está directamente centrado entre otros dos puntos vectoriales, y ahora podemos igualarlo con turno con flechas en el teclado y posicionarlo donde
quieras . También puedes mover este mangos. Como puedes ver, son un simétrico por defecto por lo que puedes moverlos y Por cierto, si quieres posicionar el vector manejado en la posición X e Y exacta, puedes hacerlo. Por lo que tienes coordenadas X e Y para cada punto vectorial, pero también para cada vector manejado. Por lo que puedes decidir que esto podría ser 830 para el mango y para el punto. Tienes una posición diferente. Puede presionar el retroceso para eliminar estos puntos vectoriales. Se pueden seleccionar ambos puntos vectoriales. ¿ Por qué casa el turno de celebración? También puedes arrastrar y soltar aquellos como muchos puntos vectoriales, o incluso usar esta pequeña herramienta de la derecha para seleccionar muchos puntos vectoriales a la vez. Entonces sigamos adelante y no un poquito. Este vector apunta usando las teclas de flecha del teclado y vamos al interior de nuestra copa
gota y creamos algunos puntos vectoriales más para crear la forma interior de la letra A. Y vamos a terminar esta forma. Voy a usar esto conectado aquí y voy a terminar esto. Pero como puedes ver, no
hay mangos, así que solo hay un mango aquí, así que tengo que hacer doble clic en esta parte vectorial, y ahora tengo dos asas. Puedo desconectar los mangos, y ahora puedo dibujar fácilmente la curva una y la segunda curva así, por cierto, hay un atajo útil para usar espejo recto, desconectado y un simétrico. Puedes presionar 123 o cuatro o en tu teclado para acceder a cualquier modo para que puedas pulsar dos para espejos. Y ahora podemos seleccionar cualquier punto. Se puede empujar con la boca, y a veces se obtiene esta guía inteligente que le permite posicionar un punto de acuerdo a otro, y a veces ayuda. A veces no lo hace. Y así cuando no lo hace, cuando lo quieres apagar temporalmente, puedes presionar y mantener pulsado el comando, y ahora puedes muesca mi un píxel. No conseguirás este Guías inteligentes que a veces solo a veces son molestos. Genial. Hagamos eso con el mango. Y como puedes ver con mango, también
tienes esta guía inteligente y Teoh deshazte de ella. Simplemente presionas y mantienes los comandos, y ahora puedes usar los taburetes puntera libremente para posicionar tu mango. Entonces como puedes ver, este vector a es extremadamente poderoso, pero también es bastante difícil por lo que hay que practicar un poco. Y recuerda, en las cintas pro y también atajos de teclado que te di, son muy importantes. Para que puedas presionar. Quieres ir directo a espejado, libre, desconectado. Y para una simétrica, es mucho más fácil. Y también cuando eliges algún modo, por ejemplo, espejado o un simétrico, y mueves uno de los mangos y decides que quieres mover este mango por separado del otro, y quieres desconectarlo. Sólo tienes que pulsar y mantener el comando para que no tengas que ir a desconectar. Va ahí automáticamente cuando presionas comando mientras mueves uno de los mangos para que
puedas experimentar y echar un vistazo al botón de cambio. No siempre funciona 45 grados, pero será útil para crear formas lisas. Y también se puede establecer la posición fuera de los puntos vectoriales así como los manejadores por separado. Como se puede ver, esas coordenadas siempre están en celdas de pico completo, pero a veces se necesita una precisión extrema, y por eso se quiere establecer esta opción para no dar vueltas a pizzas más cercanas. Normalmente me quedo con los bordes de pizza de tofu surround por defecto, y es un poco útil cuando quieres exportarlo como un mapa de bits y no tienes muy bordes. Pero si estás creando ícono muy sofisticado, por ejemplo, a
veces quieres imaginarte para que tengas esta precisión extrema y luego seleccionas esta opción. Ahora, déjame hacer una línea más gruesa en el día. También voy a seleccionar ambos fuera de la forma. Entonces voy a establecer un camino para encendido y apagado y dar clic en alguna pista Operación booleana que me puedan leer fuera de esta forma y pueda usar un campo para sentir letra entera. Vamos a usar un color verdoso y vamos a salir menos deísmo fuera. Voy a establecer antecedentes para nuestra carta. Entonces vamos a crear un rectángulo simple. Es turno de uso y opción para escalar proporcionalmente y también desde el centro. Ahora voy a vender como esta forma, centrarlo con una letra y usar sentir más fresco. Déjame cambiar a algún color tal vez rosa ish, y, uh, una cosa más voy a hacer. Voy a deshacerme de la frontera, y por cierto, sólo
puedes arrastrar la frontera fuera de este panel y soltarla para deshacerte de la frontera. Y la racha también funcionan para las sensaciones en sus sombras, gas y desenfoque y otras cosas que tienes debajo se sienten en este derecho. Llámalos. Por lo que nuestra carta está lista. Te animo a practicar y, por ejemplo, a crear la primera letra de tu nombre. Y los veo en la siguiente lección.
10. Transformación de formas: en esta lección, vamos a echar un vistazo a formas más sofisticadas y también vamos a usar la
herramienta de tijeras . Pero primero, echemos un vistazo a la barra superior fuera del boceto. Esta es una barra de herramientas. En realidad, tenemos algunas herramientas por ahí, pero podemos personalizar esta barra de herramientas y podemos acceder a sus opciones. Entonces si haces clic derecho en cualquier deporte vacío en la barra de herramientas y seleccionas este botón personalizar barra de herramientas ahora puedes seleccionar cualquier icónico jeez drogarlo en y un arrastrarlo fuera de la barra de herramientas. Entonces si te encuentras usando mucho autos, solo
puedes arrastrar estos colores en la barra de herramientas. Además, puedes mover este divisor. Este es un espacio vacío, y puedes sacar las herramientas de, Incluso si están geniales fuera,
puedes sacarlas de la barra de herramientas y deshacerte de ellas por igual. Por lo que también puedes deshacerte de los divisores. Tienes, ah, espacio
simple, y también tienes este espacio flexible que puedes usar para ajustar el espaciado entre los iconos. Y si solo quieres restablecer a un íconos y espaciado predeterminados, puedes arrastrar el conjunto predeterminado a la barra de herramientas. Y dicho por defecto, está en la parte inferior, puedes tomar el conjunto por defecto y simplemente ponerlo en la barra de herramientas para restablecerlo. Teoh qué? Fue originalmente cuando inicias boceto por primera vez, luego tienes una opción para seleccionar. Sólo puedo o solo texto, o texto e iconos que suelo usar en los iconos. Pero para este curso voy a utilizar Tengo un texto para que puedas descubrir también los nombres fuera de
las funciones. Y vamos a mover a este César todavía aquí también, porque vamos a usar las tijeras en esta lección. Entonces cambiemos a una forma de dibujo como esta, y te vas a encontrar haciéndolo muy, muy a menudo, y necesitas usar la puerta en general. Entonces eso es prensa. Ah, y mantengamos el turno. Hacer mantener proporciones. Pero a veces no vas a hacer crear una forma simétrica y un cambio. No basta con que quieras dibujar desde directamente desde el centro. En cambio, fuera comenzando desde el borde superior izquierdo fuera de la forma y manejando desde el centro. Vas a presionar opción mientras arrastras para que puedas proceder con toda la proporción. Y si quieres dibujar desde el centro, presionas opción. Y por supuesto, se
puede empezar con opción y luego mantener el turno para crear una forma que sea tanto lanzada desde el centro y que sea a la vez proporcional y sea un círculo perfecto. Ahora entró. Los gobernantes con control son que siempre puedes cambiar a los gobernantes con tú humano también. Y a veces cuando se quiere crear un círculo como este, se
necesita algunos gobernantes y hay que hacer clic en la regla para, dijo la guía. Y este tipo está exactamente en el centro, fuera de nuestra parte superior y ahora mismo tengo regla horizontal también, y puedo ir de pie sobre los pies. Puedo poner el cursor del curso directamente en el medio, y puedo presionar opción mientras arrastra para dibujar desde el centro. En ocasiones se quiere una forma simétrica como esta, y es muy fácil dibujarla con las reglas habilitadas. Entonces presiono ven. control son demasiado ocultar tanto las reglas como las guías, y si quieres deshacerte de las guías horizontales o verticales,
tienes la derecha, tienes la derecha, haz clic o controlas, haz clic en las reglas y selecciona quitar todas las guías verticales. También puedes seleccionar en la guía y conducir, asumir esta guía y seleccionar quitar guía. Entonces otra forma es simplemente arrastrarlo fuera de la regla para poder hacerlo con guía tanto horizontal
como vertical, o puedo quitar a todos los chicos que tengo en mi documento. Entonces ahora lo que voy a hacer que ha aumentado el grosor de esto más, voy a seleccionar seis. Y voy a seleccionar color verde para la frontera y que lo que necesitamos es que vamos a dio en otro círculo que será un duplicado del anterior. Por lo que presiono los comandos D y cambié el color. Entonces eso es como que coincide con el color fuera de esos overs en la parte superior. Y ahora necesito deshacerme de parte de esta frontera fuera más de cinco copias para que puedas presionar devoluciones. Esta es una forma de hacerlo. No presionarías retorno, y puedes seleccionar cualquier punto vectorial y presionar retroceso o eliminar para eliminar este
punto vectorial . Y ahora solo puedes abrir el camino para que tengas,
por ejemplo, por ejemplo, a
la mitad de esta frontera. El segundo enfoque sería crear,
por ejemplo, por ejemplo, un rectángulo o cualquier forma que sea tal vez una forma de 1/4 o 1/2 hora y luego seleccionar ambas formas y seleccionar restar. Pero hay un problema eso que tenemos esta frontera pasando en el centro. Por lo que la mejor manera de abordar este tipo de ejercicio fuera es usar las herramientas de tijera del dedo tijera que eliminas esos segmentos entre puntos vectoriales. Significa que si seleccionas el sobre y acabas con el dedo del pie de tijera sobre cualquier trayectoria, puedes eliminar la trayectoria entre cualquier punto vectorial. Entonces en esto más por defecto tienes cuatro puntos vectoriales, lo que puedes al menos cuatro segmentos y hacer uno de los trimestres de esto más. Pero también se pueden agregar puntos vectoriales y el uno cinco, tal vez, o 1/4. Ahora podemos ir a frontera, y también se puede cambiar el borde y para que estén redondeados y esta forma se vea aún mejor, es como funcionan las tijeras. Pero hay mucho más en el taburete, puedo crear formas e iconos mucho más sofisticados usando las tijeras. Entonces déjame crear algo más avanzado. Voy a usar una herramienta general para crear un simple icono de WiFi. Déjame Dragón en primera forma. Ahora voy a mandar lo duplicado y voy a hacer muchos duplicados. Voy a escalarlos usando la tecla de opción para escalar desde el centro así como la tecla de turno para escalar proporcionalmente. También se puede elegir la droga y luego usar el dedo de mercancía tener múltiples formas también. Entonces vamos a seleccionar todas las formas y puedes drogarSi no puedes arrastrar porque tienes este rectángulo libre en el fondo, simplemente
presionas el comando shift l para mirar este rectángulo. Y ahora puedes seleccionar todas las formas que centran las formas utilizan la barra espaciadora para ajustar la vista. Y lo que necesito es a más formas. Voy a usar líneas. Por lo que por favor recuerden los atajos para la línea. Es yo. así que voy a usar l para hacer eso. Pero necesito que Teoh tenga el centro exacto fuera de mi ícono. Entonces usemos a los gobernantes y digamos los guías. Voy a establecer la guía vertical y también la guía horizontal para que tenga el
centro exacto . Ahora pongamos el cursor en el centro y dibujemos la primera línea. A lo mejor así. De acuerdo, ahora eso es duplicar esta línea, así que voy a usar el Comando D. Y ahora tengo la copia fuera de la línea en el panel de capas para que pueda usar el sueño aquí para voltearlo horizontal o verticalmente. Y antes te mostré una forma más de hacerlo, acceder
a este derecho como el dinero, y dije la transformación. Pero las botellas son tanto y más eficientes. Entonces ahora movamos las capas a la parte superior. Y nuestro siguiente reto es fusionar todo fuera de esta capa. Entonces si selecciono una más y dos líneas, voy a usar una unión de 1,000.000.000 Operación Off. Y como se puede ver, eso funciona como se esperaba. Entonces tengo una buena forma. Y ahora esta prensa comando z para deshacerla y seleccionar todos los óvalos. Y ahora probemos operación sindical. Y ahora no funciona. ¿ Por qué? No funciona semana Porque, como te dije antes allá más, no
tienen ningún punto en común. Y en este caso, realidad no se puede usar la operación sindical porque se obtiene un resultado que es inaceptable para esto. Entonces lo voy a deshacer, y en cambio, fuera de unión, voy a usar diferentes operaciones booleanas que a veces solo necesitas experimentar. Usemos la operación de lingotes de diferencia. Y ahora echa un vistazo a la forma combinada. Esto es exactamente lo que lo queremos. Entonces tenemos todas las líneas y tenemos todos los caminos conectados para que podamos usar las tijeras para borrar los segmentos que aquí no necesitamos. De acuerdo, voy a Cathcart gorras y agilizar la película para que el ícono WiFi esté casi listo. Entonces, como puedes ver con grande en el ícono, usando las operaciones de lingotes en formas así como usando la punta de las tijeras y ahora podemos hacer este borde más grueso. Podemos cambiar el color y acceder a las propiedades alrededor de las hormigas fuera de la frontera. Y el ícono está listo. Entonces gracias por ver. Y te veo en la próxima película.
11. Transformaciones avanzada: en esta lección, voy a hablar de las opciones de transformación así como de alinear elementos. Entonces vamos a acercarnos a este artículo y vamos a crear nuestra primera forma será un rectángulo. Vamos a cuál hacer el lado derecho. Tenemos posición aquí ciencia, transformación y todas las etiquetas tienen los campos de entrada. Puedes ingresar los campos de entrada así como puedes presionar las flechas para cambiar la posición en consecuencia. Por lo que si hace clic en la entrada, ahora
puede usar las teclas de flecha en los teclados de la tecla de flecha arriba y abajo dedo del pie tecla de flecha , no los valores por un píxel. Si pulsas y mantienes pulsada la tecla Mayús para que tengamos una flecha de desplazamiento no puedes valores por 10 incrementos. Y también por qué la opción de retención. Se puede tener este dolt one incrementos. Entonces así es como cambias los valores en todos fuera de los campos de entrada. También puedes sobre la etiqueta fuera del campo de entrada, así que pasa el cursor sobre. Por qué etiquetar. Después arropas con el botón izquierdo del ratón y puedes drogar a la izquierda o a la derecha con la calza
inferior , y luego cambias los valores de cualquier campo de entrada en sketch. Entonces si quieres Teoh selecciona el campo capaz a la derecha, y actualmente tienes este de seleccionado. Simplemente selecciona la capa y puedes usar el atajo de teclado, que es opción tina. Y al presionar la tina de opción, seleccionaste el primer campo, que es en esta posición de caso, por lo que puedes presionar arriba nuevamente para acceder a cualquier otro campo, y puedes escribir los números. Puedes usar las flechas del teclado. También puedes presionar la pestaña de turno para salir del campo para que puedas presionar tabulador o desplazarte hasta exceso de cualquier campo sin ni siquiera crujir con tus bocas. La siguiente opción que tienes aquí es este pequeño icono de candado, y esto es entre las etiquetas de ancho y alto. Y como ves esto, mira que obtuve te permite registrar las proporciones fuera del objeto. Y si usted dijo el trigo, la altura cambiará en consecuencia. Cuando presionas return, suceden
las mismas cosas si intentas modificar el ancho o la altura de la forma usando los tiradores. Entonces si arrastras en lo que cualquiera de los mangos, verás que el trigo y la piel cambia en consecuencia. Y eso es porque tenemos este pequeño icono de candado que evita que cambies las proporciones de esta capa. Y si no lo necesitas, solo
tienes que hacer clic en el icono de look. Como ves ahora, está desbloqueado, así que eso significa que puedo cambiar el trigo y esconderme por separado para poder cambiar la proporción fuera la capa. Entonces ahora no tienes que acceder a ningún modo de transformación especial ni nada por el estilo. Acabas de griego en la capa, y tienes las asas que puedes ajustar en consecuencia, y también puedes acceder a este taburete girando desde la parte superior, y ahora, si pasas el cursor fuera de la capa, puedes ver cambia el cursor, y se puede cambiar el radio. También se puede acceder desde el dinero de la mano derecha, y aquí tienes esta opción de rotación para que podamos teclear 40 grados y gira,
y también se puede acceder al dedo del pie de rotación flotador con una clave común. Entonces cuando pasas por encima de la esquina y presionas comando para ingresar temporalmente este dedo de rotación y la cosa es cuando giras como así también puedes presionar shift para tener rotación ah con incrementos de 15 grados, y así es como lo haces. En realidad, hay una ventaja de usar un dedo de rotación en lugar de presionar el comando, porque cuando hago clic en el rotacional, se
puede acceder a este pequeño punto de rotación en el medio, y se puede cambiar la posición de puntos de rotación. Entonces si sales fuera rotación, dedo del pie y presionas comando, no
tienes este pequeño ícono. Y si vas a rotar, puedes cambiar la posición fuera del origen de la rotación, y ahora rotas en consecuencia a la posición fuera de este punto. Entonces una última cosa que tenemos en cuanto a transformaciones es la herramienta de transformación que está en la parte superior. Por lo que es básicamente bastante diferente a los manejadores de transformación estándar, y también se puede acceder a transformar con el menú de clic derecho. Y voy a dar a este pueblo opciones resentidas y verticales. Pero tienes una rotación aquí, así
como una transformación a la que podemos acceder desde ahí o desde el ícono en la parte superior. Entonces vamos al modo de transformación y a este modo. Vamos a cambiar la posición de cada uno de los puntos. Como ves, los puntos ahora están redondeados y puedes hacer algunas transformaciones pseudo Freey 2.5 la transformación para que puedas sesgar el objeto. Se puede transformar de una manera diferente, así que eso es la transformación. Ahora me gustaría mostrarte alguna otra opción para cambiar las capas trigo y atadas, y esto es usando el teclado para que puedas cambiar cualquier capa y simplemente presionas
comando de opción y luego no con las flechas para que puedas presionar flecha izquierda para hacer el trigo más pequeño por un píxel o la flecha derecha para hacer más grande por un píxel. También puedes impresionar comando shift, flecha
izquierda o derecha para tener incrementos de 10 píxeles. Y estos atajos. Viene muy a mano. Por ejemplo, cuando tienes muchos objetos y es bastante difícil seleccionar capa individual en tu artículo, puedes seleccionar la capa de las capas menos, y luego puedes usar los atajos dedo del pie. Ajusta la altura o el trigo o para ajustar la posición. Ahora este dedo de col rizada. Es una de mis herramientas favoritas en sketch porque te permite escalar cualquier objeto, aire o grupo o un conjunto de capas, y en su lugar fuera de esta escala tradicional, que no escala, por ejemplo, y borde para que puedas ver que si escalé incluso con opción y muevo toda la proporción y escala desde el centro al espesor fuera del borde sigue siendo de 15 píxeles, y en realidad, todos los efectos que tienes aquí así bordea en sus sombras. Ghassan se difumina, y también las sombras permanecerán iguales. Entonces si yo otra sombra y tú tienes algunos valores poco profundos por ahí. Entonces tengo esta Blair, por ejemplo, que son cuatro píxeles, y si trato de escalar la capa, siempre
se queda para píxel. En este comportamiento, probablemente no lo quieras, no
sé 80% de tu tiempo, porque quieres escalar tus iconos con todos los efectos. Tiene tanto miedo. Los bordes escalan las sombras. Deshacernos de la sombra. Y quizá nos enfoquemos en esta propiedad fronteriza, que es 15% lo creo. Cuando patinaron
, no cambia. Pero si accedo a la herramienta de escala y este es probablemente uno de los atajos de
teclado más importantes , ese es el comando K, por lo que ahora puedes cambiar el tamaño de la capa y puedes dar el valor adecuado en por ciento para que pueda patinar 50%. También puedo dar pieza exacta de valores para ancho y alto también, pero normalmente uso porcentaje y echo un vistazo a la frontera ahora, así que era 15 y ahora son 7.5 pizzas. Por lo que funciona también para las fronteras y esta función de pequeña escala. Lo usarás todo el tiempo. Es especialmente útil cuando,
por ejemplo,
importas por ejemplo, algunos iconos al boceto y quieres asustar los bordes proporcionalmente dedo del pie los iconos que utilicé todo el tiempo,
realmente, realmente, Así que también puedes previsualizar los valores y puedes asustar desde el centro izquierdo sobre abajo para que pueda elegir cualquier posición de escalado. Y es súper útil. Entonces la buena noticia es que eso es probablemente todo lo que tienes que saber sobre el escalado y la transformación en boceto. Entonces permítanme aceptar estos cambios y cambiar el tamaño de esta capa y pasar a la siguiente lección. Ahí los veo chicos.
12. Alineación de elementos: hola y bienvenidos en la siguiente lección en la que les voy a mostrar características muy simples pero muy poderosas fuera del boceto, que son opciones de alineación. Por lo que tenemos las opciones de diamante en la esquina superior derecha fuera de la interfaz, y puedes usarlas para alinear grupos,
capas, capas, tableros de
arte. Simplemente selecciona cualquier cosa, y como ves algo fuera de la alineación, las opciones ya están disponibles. Entonces he seleccionado este grupo planetario y hay un pequeño marco nuevas opciones de alineación, y eso significa que se alinearán de acuerdo a un mundo del arte. Entonces si tienes un elemento seleccionado y no está dentro de un grupo, puedes
alinearte de acuerdo a estos iconos del espacio espía. Copia, también, están a punto. Entonces déjame aliar en esto a la izquierda, a la derecha a la parte superior inferior, y también puedes enviar su vertical y horizontalmente en el artículo. Por lo que es muy fácil, y también se puede alinear usando esos chicos inteligentes. Como ven, si voy al centro, tengo guía vertical así como guía horizontal que me permitirá ponerlo directamente en el centro fuera del artículo, y si por casualidad, quieres posicionarlo. No lo sé, quizá conocía el centro, pero no en el centro. Y quieres saltarte un chasquido. Mantienes el comando mientras arrastras, y eso es todo. De acuerdo, cambiemos a otros tableros de arte que tengo. Por lo que ahora tengo algunos grupos. Tengo cuatro iconos, y si tienen más de un elemento sobre el arte sobre, como pueden
ver, tienen más sonrisa, chicos. Por lo que tienes guías inteligentes para el tablero de arte que aparece en el cuerpo central también tienen
guías inteligentes para los bordes fuera de cada grupo que tenemos aquí, y también podemos desactivar a los chicos inteligentes mientras arrastramos. Solo tienes que presionar y mantener presionado el comando inferior del teclado. Pero esos chicos inteligentes que pueden llegar a ser muy útiles, sobre todo cuando se quiere posicionar los grupos entre sí y cuando se quiere marchar los márgenes entre diferentes capas o diferentes grupos. Entonces, como ves, tengo las medidas ahora, y si me acerco a 91 tengo snapping y me permite posicionar su grupo correctamente para que también
puedas medir esas distancias entre diferentes capas y diferentes grupos. Pulsando la opción abajo. Por lo que el primer caso de uso es cuando se presenta la tecla de opción de retención y se pasa el cursor sobre este
grupo seleccionado . Ahora has medido las distancias entre los bordes fuera del arte abortar. Lo que puedes hacer es que también puedes pasar el cursor sobre la siguiente capa o un grupo, y ahora has medido la distancia entre este grupo y el segundo grupo. Por lo que puedes medir fácilmente diferentes distancias entre las tablas de arte o entre los
propios mentirosos o se agrupan. Entonces recuerda ese atajo de teclado y lo siguiente que me gusta mostrarte es alinear esos iconos con unas nueve opciones. Entonces vamos a seleccionar todos los artículos. Entonces elegamos a todos los grupos. Y ahora, como pueden ver, tenemos todas las opciones disponibles aquí porque tenemos múltiples objetos para que podamos distribuir también el espaciado. Entonces ahora si seleccionas alguna de las opciones de alineación, no
se está posicionando dentro del cartón. Es posicionamiento entre esos objetos, Así que si los dejé alineados como puedes ver, se alinearon al borde muy izquierdo del primer grupo, y ahora los puedo centrar en el arte. Pero así, y si quiero que Teoh distribuya dentro del arte, pero necesito tener un grupo diferente para todos esos objetos. Por lo que presiono Commander G mientras tengo esos objetos seleccionados para crear otro grupo. Y ahora sólo tengo seleccionado a este grupo. Y en el panel Alinear, tengo este pequeño borde junto a lo odioso. Entonces eso significa que trabajaré ahora con todo el grupo y lo posicionaré dentro del perno de arte . Entonces vamos a presionar desplazamiento de comando, G toe en grupo los elementos. Y ahora tengo más de un elemento seleccionado, por lo que las opciones de aerolíneas son diferentes. Entonces pasemos a esto primero nuestro tablero. Y como puedes ver, hay muchos grupos y cada grupo es un icono diferente. Entonces déjame seleccionar la primera fila fuera de iconos eso 1er 7 iconos y voy a usar alineación hace para correctamente en el alinear esos iconos. Entonces ahora usemos esta primera opción alineada verticalmente. Teoh los tienen en una línea, y luego necesito distribuir los márgenes entre el icono. Entonces voy a dar click en distribuir horizontalmente, y eso es catch es decir que básicamente no puede moverlo a sus picos completos nosotros. Y se pregunta si quiero moverlos a sub picos nos algunas fotos de posiciones en el eje X, o quiero distribuirlas uniformemente? Y para ser honesto, simplemente no
me importa distribuirlos uniformemente porque ni siquiera notarás la diferencia. Si bien tienes todos los iconos en el pleno nos recoge en los picos son geniales, lo cual es bastante importante. Por lo que hago clic en distribuir en incluso la opción. Y ahí vamos. Tenemos distribución uniforme de esos iconos, incluso márgenes entre los grupos. Entonces aunque haya negativo, puedes hacerlo así Y ahora lo que voy a hacer,
voy a seleccionar el último ícono porque quiero que Teoh distribuya el toso para que sientan todo el espacio fuera de nuestra pizarra. Entonces voy a seleccionar el último ícono. Voy a presentar turno de espera para mantener la línea. Y ahora voy a seleccionar todos los iconos mientras este ícono lista a la derecha y otra vez
voy a distribuir de manera desigual para que tenga la primera fila fuera de los iconos y ahora puedo ah agrupar este ícono. Por lo que presiono el comando G para agruparlos. Ahora presiono el control son para los gobernantes y dije la guía para que tenga las guías a la izquierda y a la derecha de mis iconos encendidos. Permítanme tomar los siguientes iconos del primero en la siguiente fila y lo dije aquí. Y también voy a posicionar este último ícono en este segundo lanzamiento. Y como ves, es mucho mejor posicionarlo ópticamente que matemáticamente. Entonces voy a Nagy con flecha derecha en el teclado. Y ahora es perfecto. Voy a seleccionar sobre los iconos y antes de agrupar necesito establecer la distribución como Así que ahora puedo agrupar esos iconos así que presiono. Vamos, G y yo podemos tomar los otros iconos y hacer lo mismo por el federal. Necesitamos a Teoh no sólo un poquito con el teclado. Voy a seleccionar todas las capas con la tecla Mayús en el teclado y distribuir el espaciado, así que posicionarlas en el eje vertical así como distribuir las marcas entre los iconos . Entonces lo que necesito hacer ahora mismo es decir la última fila fuera de iconos, voy a seleccionarlos todos y distribuir el espaciado así como la posición. Ahora puedo comandar el G, dije el siguiente grupo y este federal también necesita ser un grupo fuera de iconos. Ahora, si tengo todos esos grupos, puedo seleccionar los grupos, y ahora puedo trabajar con los grupos para distribuir el espaciado verticalmente. Entonces déjame hacer clic en este ícono voy a usar de manera desigual y tengo todos los iconos para hablar y abarcar posiciones incorrectas. Por lo que nunca hemos usado la herramienta de texto, Pero es bastante fácil. Voy a vender como el té en el teclado y sólo dibujar un simple campo de texto. Voy a decir iconos espaciales como título fuera de mi tablero de arte, y luego vamos a hablar mucho más de propiedades de texto. Ahora mismo, como pueden ver, tenemos este largo marco de texto y podemos alinear el texto dentro de este amigo de texto. Por lo que los grandes atajos de teclado son shift command plus key corchetes derecho o izquierdo para alinearlos a la izquierda o a la derecha. O puedes usar el cambio común hacia atrás Slash para alinearlo con el centro. Por lo que tienes todo el tiempo y opciones para los grupos para el texto, y también puedes acceder a las mismas opciones de alineación en el menú organizar. Puede seleccionar una opción de objetos de línea, y tiene cada icono que está en este panel marcado en el menú. Y eso es bastante importante porque ahora me gustaría mostrarte cómo crear tus propios atajos de
teclado para boceto, y puedes aplicar atajos de teclado a cualquier elemento que aparezca en el menú de boceto. Entonces si tenemos opciones de alineación que tenemos, podemos ir directamente a las preferencias del sistema y desde las preferencias. Vamos al teclado y hay un trozo de atajo. Entonces desde la parada de atajos, vas con el dedo del pie hacia arriba atajos, y ahora puedes agregar nuevos atajos. Seleccionas la aplicación, y eso es básicamente boceto. Entonces eso es presionar como en el teclado y seleccionar la programada arriba. Y ahora tenemos que reescribir el título del menú. Entonces tenemos que poner su mundo exactamente. ¿ Es ése cuál es el nombre de la función en el menú? Entonces, asegurémonos de conocer el nombre correcto. Entonces vamos a arreglar los objetos de línea, y tenemos tanto horizontal como vertical. Entonces pongamos ambos atajos. Ambas opciones. Y vamos como ambas opciones Toe dijo los atajos en las preferencias. Entonces voy a poner horizontalmente como un primer dios corto y en el atajo de teclado, acabas de tirar del atajo que quieres usar. Entonces voy a poner coma y soporte izquierdo. Yo me voy. Vamos, Soporte
izquierdo para centrar horizontalmente. Y por supuesto, puedes usar cualquier atajo que desees que puedas. Por ejemplo, utilice Vamos, cuatro para horizontal y comando cinco para alineación vertical. Y voy a poner vertical aquí, así que tiene que ser una ortografía correcta. Se necesita deletrear igual que en un boceto. Y voy a presionar comando corchete derecho. Y después de este atajo, Así que ahora puedo cerrar las preferencias y ni siquiera tengo que reiniciar la aplicación de boceto. Puedo usar fácilmente este comentario soporte izquierdo seco soporte a dicho distribución adecuada y déjame hacerlo en el otro arte a bordo y de costumbre, Un escenario es que uses dos formas cualquiera, así que voy a ritmo ahí un ícono y tengo estos dos formas y quiero centrar este icono dentro del rectángulo. Por lo que cambio selecto tanto grupo como el ICOM, y ahora puedo usar las opciones de alineación para hacer eso. Pero en lugar de las opciones de alineación, ahora
puedo usar mi atajo. Entonces vamos como ambos jugadores y presione comando corchete izquierdo y comando corchete derecho para
centrar el icono horizontal y verticalmente. Y además, si estás usando las versiones más recientes de Sketch, hay un bonito Adam a esto. Déjame pegar, tal vez gratis o para iconos alienígenas, y ahora puedes seleccionar esos objetos, ya sean capas o grupos, y lo que puedes hacer es rápido en esta pequeña batalla ordenada. Se los arreglará así, y además no se puede pasar el ratón sobre las marcas entre esos elementos, y se pueden ver pequeños iconos que indicarán que se puede hacer clic y cambiar las marcas cualquier manera como ésta. Y esto es bastante genial por lo que puedes hacer esto para la alineación vertical. Puedes hacer esto para una alineación horizontal así, y esto se está volviendo bastante inteligente si seleccionas varios elementos a la vez. Entonces te puede gustar esto, e incluso sabe que tienes que levantarte ahí. Ni siquiera tienes que tener otro grupo. Es lo suficientemente inteligente como para decirlo. Entonces eso es básicamente todo. Este es el fondo ordenado y también las alineaciones inteligentes. Además, en las versiones más recientes de Sketch, han mejorado mucho el chasquido y esas guías inteligentes que te permitirán distribuir artículos al
lado del otro solo un poquito mejor. Pero esto no necesita un escaparate. Entonces básicamente, eso es todo. En esta lección, te
veo en la siguiente.
13. Redimensionar opciones en el boceto: Hey ahi antes de que empiece esta lección. Tan sólo un descargo de responsabilidad rápido. Esta es la versión más reciente off sketch and re sizing options que voy a hablar de cambio ligeramente en el layout. Básicamente, es lo mismo. Por lo que Pinto es del mismo y de tamaño fijo. Tenías dos botellas, una para este acceso y otra para ese. Ahora es un S O. Eso es básicamente todo. No voy a volver a grabar esta lección, así que disfruta el resto de la misma en el diseño más antiguo,
pero aun así lo mismo invierte. Escucha, vamos a hablar de opciones de re dimensionamiento en boceto. Entonces básicamente todo lo que creas en sketch, ya sea grupo ensamblado o una capa a la que puedes acceder, opciones de cambio de tamaño a la derecha. Y tienes diferentes opciones de Resize Inc, que son responsables de cómo este objeto se escalará dentro de su padre y en realidad para el sobre y para el rectángulo. Su padre es este grupo para el grupo. Su padre es el tablero de arte. Pero centrémonos en el grupo ahora mismo, y centrémonos en las propiedades desactivadas, re dimensionamiento para más y rectángulo. Entonces si seleccionamos este grupo y tratamos de cambiar mis menciones fuera del grupo como
nota general , debes recordar que todo escala en porcentaje. Entonces si tratamos de escalar el grupo dulce como ves las escalas más dulces en consecuencia. Entonces si tienes 50% de descuento en el grupo dulce, tienes 50% de descuento en el óvalo. Dulce. Y si tienes un 50% de descuento en la altura del grupo, también
tienes un 50% de descuento en la supervisión. Entonces por eso esto se está deformando ahora mismo. Pero cuando intentas cambiar las opciones por defecto para volver a dimensionar, así que cuando establecemos algunas de estas son opciones de Very Size Inc, podemos ,
por ejemplo, decidir que esto termine será, no lo sé, tal vez paeans a la esquina superior derecha. Entonces intentemos moverlo primero a la esquina superior derecha. Y después voy a usar estas opciones de ejercicio por defecto, y nos vamos a centrar en este manecitas. Por lo que dentro de estos mangos, podemos establecer la alineación para peen cualquier elemento a la parte superior izquierda, derecha, o a la parte inferior. Entonces si quiero dedo del pie estar en la parte superior derecha, selecciono tanto Hola, parada y derecha. Y ahora, como ven, se está escalando
el óvalo. Por lo que cambia en consecuencia al porcentaje fuera del grupo. Pero también es alfileres dedo del pie la parte superior y frijoles a la derecha, por lo que el margen entre la parte superior y la derecha es fijo. Por lo que una parte de esto funciona. También puedo arreglar el ancho y la altura de mis objetos. Entonces voy a hacer clic, arreglar el trigo y arreglamos apretado dentro del sobre. Ahora voy a seleccionar el grupo para que su padre y voy a asustar al grupo. Y como ves, el general no es escalar. Y además, también
está anclado al borde superior y derecho para que las marcas siempre se mantengan iguales. Entonces tenemos los márgenes fijos, OK, y ahora imaginemos algunas otras situaciones. Entonces tal vez quieras poner el objeto en el centro directo fuera de su padre. Por lo que ahora el más está en el centro del grupo. Pero cuando tratamos de asustar al grupo, como puedes ver no se queda en el centro. ¿ Y por qué está sucediendo fuera de curso? Está sucediendo porque configuramos opciones de Resize Inc y tiramos de esta opción y decidimos que tiene que estar anclada a la derecha, y si ha sido a la derecha. Siempre tiene el mismo dedo Margon el borde derecho de sus padres. Entonces lo que tenemos que hacer, tenemos que liderar esos pines. Por lo que tenemos que amperarlo, sobre todo desde la derecha. Entonces ahora tenemos trigo fijo y arreglamos el hide y no ponemos ninguna opción aquí en
redimensionar No podemos realmente decir el significado izquierdo y derecho porque estiraría el objeto. Y tenemos el set de trigo fijo y escondite. Entonces es imposible. Por lo que lo dejamos vacío y seleccionamos el grupo. Intentemos cambiar el tamaño del grupo ahora mismo. Y como se puede ver, este sobre queda en el centro. Entonces básicamente, boceto cuida a este objeto estando todavía en el centro. Por qué re dimensionar para que podamos ponerlo en el centro tanto vertical como horizontalmente y probar Ahora puedes cambiar el tamaño y puedes tener este objeto en el centro exacto fuera de su padre. Si bien todavía se desactivan las opciones de cambio de tamaño y se activan los ajustes de trigo y fijar altura . Entonces así es como lo haces. De acuerdo, entonces ahora ese cambio a algún otro ejemplo y voy a dibujar nuestro rectángulo aquí suprimir nuestro voy a dibujar un rectángulo click derecho y copiar STAis de arriba al rectángulo. Recuerda, también
tienes este atajo, que es turno común Ver y Contrave. Ahora voy a esconder el sobre y voy a cambiar a mi grupo. Y traté de redimensionar departamento como se puede ver, el objeto tres tamaños y también el izquierdo y el derecho Margon todos los tamaños también. Por lo que si quieres arreglar Margon, puedes configurar la opción de recitación para que puedas fijarla a la izquierda y fijarla a la derecha . Obviamente no se puede decir el arreglo con esa opción. Pero ahora cuando intentas recitar el grupo, tienes objeto bellamente escalado con márgenes fijos desde la izquierda y desde la derecha. Entonces ahora lo que podemos hacer es estirar este objeto para que no sólo sea dolor, sino que también toque los bordes de nuestro grupo. Y ahora si intentas cambiar el tamaño de un grupo, tienes ah, muy buen comportamiento, que es como, no
sé, tal vez pie de página fijo o el menú en tu aplicación móvil Y una cosa más que podemos pide que esto sea perfecto. Competimos hasta el fondo, y también podemos decir las alturas a fijar para que la altura no cambie con la altura fuera del pirata. Y ahora tienes ah, componente
bien diseñado que puedes usar,
por ejemplo, por ejemplo, en diferentes tamaños de pantalla. Y una cosa más que me gusta mostrar es que puedes apagar la altura fija, y en realidad puedes anclar este objeto a cada esquina de este grupo así a cada lado de su padre. Y para ello, hay
que hacer click en el centro fuera de este ícono. Entonces si arropas en el centro, puedes conocer escala, y ahí la tienes. Ahí está el efecto Si tienes rectángulo que es pintura tanto a izquierda,
derecha, derecha, inferior y parada y por qué no se está comportando así. Entonces cambiemos por un segundo a este modo que tenía. Entonces vamos a jorobar en él desde la parte superior que se ha intentado cambiar de tamaño. Ahora es margen cero desde la izquierda, cero desde abajo y cero desde la derecha. Pero cuando lo publicas hasta arriba también, tienes el marcado fijo desde arriba. Entonces tenemos el marcado apagado sobre, lo sé, tal vez a 500 píxeles de la parte superior. Y por eso esta forma se comporta así. Entonces ahora todo el texto está experimentando. Por lo que una policía intenta experimentar un poco con las opciones de cambio de tamaño e intenta, por ejemplo, poner a este tipo para que sea paeans en la parte superior, la parte inferior y a la derecha. Por lo que ahora, obviamente, la altura fija no está disponible. Eso se debe a que son frijoles a la parte superior a la inferior para que se estire con el recipiente . Por lo que obviamente no puedes tener la altura fija, y tal vez puedas tener el trigo fijo y vamos a seleccionar el fix sweet por ahora. Y tratemos de escalar este grupo. Entonces, asustemos al padre. Y como ves, ahora
es 18. Pero no cambia su trigo. Y si apaga esta función, así que apaga el trigo fijo, tienes las malas hierbas variables, y el con cambiará en consecuencia al cambio porcentual de su padre. Por lo que es bastante fácil contra. Entonces lo último que me gusta mostrarles es cómo los contenidos de las tablas de arte pueden redimensionarse con las tablas de arte dentro del Ejército. Entonces, como puedes ver con el nuevo horario es y eres capaz de mis noticias para que puedas cambiar a
través del diseño de materiales, puede cambiar a Responsive y, por ejemplo, dispositivos
apple, y puedes seleccionar el nuestro barco. Entonces es bastante similar a lo que te mostré. Y ahora puedes decidir que este nuestro barco debe ser de diferente tamaño, así que debilita. Se puede acceder al arte sobre y se puede hacer clic en el nombre del iPhone Sevens, y se puede elegir el diferente tamaño de la obra. Por lo que es bastante similar, y en este momento tienes esta opción adicional aquí, que es un contenido justo en los recites. Entonces aquí está. No lo enciendamos por ahora. Y vamos a crear una forma de sombra simple dentro de este tablero de arte. Entonces voy a dibujar, y lo voy a poner en el centro fuera de nuestro barco. Y ahora, cuando traté de redimensionar el tablero de arte, Como puedes ver, el general se mantiene en su lugar para que no cambie su posición. Pero si dijera el contenido de ajuste en opción precisa y dijera, seleccione el nuestro barco y ahora trate de redimensionar este tablero de arte para que pudieran mirar esto sobre lo que va a pasar. Y ahora tenemos este comportamiento por defecto. Por lo que tenemos este comportamiento donde porcentaje fuera de las dimensiones de los objetos es igual al porcentaje fuera de los artículos. A masas ahora que sobresalen la disfunción, ajustan continente redimensionar y vamos como el óvalo. Echa un vistazo a la estructura. Entonces en el arte a bordo está el padre exacto fuera del óvalo ahora mismo. Y si dije el trigo fijo o excitar o cambiar algo en las opciones de Resize Inc, tenga en cuenta que el ajuste de contenido en opción precisa se enciende automáticamente. Entonces ahora al menos no te sorprenderás, y ahora pueden mirar este tablero de arte. Se re tamaños, pero el óvalo se mantiene igual porque tiene altura fija y fija con eso,
dijimos, dijimos, enfatizando opciones. Y también el Archbold es padre directo de esto más. Por lo que todas estas opciones de dimensionamiento re son bastante importantes, pero también su opcional. Por lo que no tienes que configurar la opción Resize Inc al principio, y puedes lidiar con ellas más tarde. Pero para ser honesto, lo mejor es tener el hábito de establecer las opciones de cambio de tamaño mientras estás creando algunos elementos, sobre todo si estás creando, por ejemplo, móvil First sitio web que vas a responsablemente un puerto a algunas otras resoluciones para una tableta y, por ejemplo, para escritorio. Por lo que si trabajas con las opciones de cambio de tamaño mientras
creas gobiernos, será mucho más fácil crear diferentes versiones responsivas fuera de tu interfaz. Entonces eso es todo por ahora. Gracias por verlo y nos vemos en el siguiente video.
14. Uso de máscaras: en esta lección, vamos a hablar de máscaras en mezquitas son técnica muy popular y muy poderosa en el boceto, por lo que podemos usar máscara para ocultar o revelar algunas partes de las imágenes. También puedes usarlos para la forma. Entonces básicamente, puedes usar must en casi cualquier cosa en boceto. Entonces capas, grupos, formas, imágenes. Pero el enfoque más común es usar la forma simple para mezquizar parte de la imagen. Entonces vamos a hacer esto en este tablero de arte, y voy a seleccionar un dedo del pie rectángulo y dibujar un rectángulo para la primera foto. Voy a tener fotos gratis. Entonces necesito un rectángulo más y este tipo lo voy a duplicar. Por lo que el comando d sostendrá turno, Teoh. Ponlo ahí, y voy a cambiar click para seleccionar ambos rectángulos y cambiar este lado. Por lo que ahora tengo tres marcador de posición y quiero usar las imágenes dentro de este place holders. Por lo que tengo Paksas dot com donde puedes encontrar fotos. También tengo algunos seguidos de píxeles en el buscador. Y si quieres usar una imagen en boceto, simplemente
seleccionas la imagen y la arrastras y la sueltas en tu perno de arte y que tengas esta foto de
píxel y ahora puedo con común seleccionar segunda capa, que es rectángulo, y este rectángulo enmascarará esta foto. Entonces voy a esta botella de mezquita en la parte superior y hago clic en mezquita. Y ahí tienes grupo. Y dentro de este grupo, tienes más con nosotros Pequeña flecha. Y esta flecha significa que esta foto en realidad está siendo enmascarada por la capa que está debajo, y básicamente el orden inicial de la capa no defiende para marcar la diferencia. Entonces si tengo este pack celdas foto bajo ángulo directo y ahora vi que van formas y forma en los bocetos fotográficos lo suficientemente inteligentes como para enmascarar la foto con el rectángulo. Por lo que ahí tienes un grupo, y dentro del grupo tienes dos capas, y puedes editar esas capas por separado. Por lo que significa que puedes ir a la mezquita e ir a la foto. Puedes ajustar los ajustes tanto de mezquita como de foto para revelar u ocultar algunas arias de esta foto. Entonces la siguiente foto que voy a usar aquí, voy a arrastrar y soltar. Y como ven, tengo la segunda capa en el mismo grupo para que pueda tener dos capas siendo mezquita con una forma. Y como ves esta flecha pequeña, eso significa que esto en realidad está siendo mezquita. Ahora. Puedo hacer click derecho y seleccionar. Ignorar la máscara subyacente para esta imagen. No a ser incluido en los procedimientos de enmascaramiento. OK, así es como se crea una mezquita. Y así es como decides si quieres usar la mezquita para este contenido grupal o no . Entonces ahora movamos algunas imágenes y voy a cerrar este grupo y voy a mover otra foto. Y esta vez voy a usar Padre de células traseras y puedes arrastrar y soltar para los directamente desde el navegador al tuyo. Atrapa ventanas. Entonces voy a arrastrar y soltar desde el navegador para bosquejar. Y como ves, tengo esta capa. Tenía especificaciones, esta foto también,
así puedo venir y hacer click para seleccionar las capas. Y ahora puedo usar mezquita, y en su lugar fuera usando esta batalla, voy a presionar el comando de control M, que es el atajo para mezquita. Y como pueden ver, ahora
tengo la mezquita. El 11 diferencia entre la botella y el atajo de teclado es que Ahora tengo que ignorar máscara
subyacente en este rectángulo para copiar, porque el atajo no crea grupo automáticamente. Entonces si haces clic en la mezquita pero en tienes un grupo, y si usas el atajo, no
tendrás grupo. Entonces vamos a encontrar algún otro padre y en píxeles, puedes encontrar mucho para fuera de grandes fotos y recurso es que puedes usar en tu proyecto. Voy a usar esta foto para la última mezquita, y voy a seleccionar tanto la foto como el rectángulo para copiar con Command en el teclado. Y ahora voy a usar comando, control em para usarlo como mezquita. Entonces de esa manera tengo máscaras gratis para mis fotos. Pero el 1er 1 fue creado con la batalla de la mezquita, y otros dos fueron creados con el atajo de teclado. Y la diferencia es que, por ejemplo, si creo cualquier otra forma en este momento, así presiono son y creo un rectángulo. Como puedes ver, tengo este rectángulo siendo mezquita por la última máscara que usé. Eso se debe a que el atajo de teclado no creó un grupo para esas capas, por lo que hay que gustarles los grupos como las capas y crear un grupo con el comando G. Así que presiono. Vamos, g. Y ahora tengo un grupo para y esas dos capas. Y ahora tenemos el grupo para todos el must gratuito que hemos creado. Ahora les voy a mostrar alguna otra técnica porque esta era una mezquita sencilla, y también podemos crear nuestras mezquitas de granja en boceto. Y usemos alguna otra foto en la que me voy a posicionar ahí mismo. Voy a dibujarme. Esta será mi foto de avatar. Entonces voy a presionar y mantener la barra espaciadora para posicionar esto. Y ahora usemos la máscara. Por lo que cambio click en las fotos para seleccionar ambas capas, y uso mezquita para crearla. Entonces es muy, muy fácil. Y recuerda que siempre se sabe destructivo, así que siempre puedo volver atrás. Puedo ajustar la foto, ajustar el tamaño de la mezquita, y también puedo revelar algunos más. Mi foto. Por lo que la mezquita es básicamente una forma sencilla con sensación amarilla. Realmente no importa, pero la opacidad es de 100. Si vas a ah, capa y molde de mezquita. Esta es una mezquita de contorno, y también puedes cambiar a una hora de nosotros. Y ahora, como se puede ver, no se
puede ver la capa, el jugador enmascarador. Pero todavía tienes este comportamiento de enmascaramiento como antes. Pero lo que puedes hacer en este momento es que puedes seleccionar la mezquita y puedes cambiar el campo. Se puede cambiar, en realidad cambiar la capacidad de combustible, que está ahí. Y si cambias la capacidad de combustible, también
cambias la opacidad del objeto. Y obviamente se puede seleccionar el grupo. O bien puedes seleccionar la foto y cambiar la opacidad de la foto. Pero tener suficiente una mezquita te permite usar, por ejemplo, INTs
Grady también, tener esta hermosa suave transición en la mezquita. Entonces voy a crear Grady int y vamos a hacer una radio, Grady, y luego voy a hablar más de resplandor. Pero ahora mismo cambiemos la posición y los cambios el tamaño de este radiante, ya que puedes ver que aquí hay un color negro. Y si cambio la opacidad de este color negro, como pueden ver, el color blanco revisa cosas y los colores negros esconden algunos de esta capa porque es alfa se ajustó. Entonces eso es trabajar sólo con Alfa Mosque. Entonces si voy a enmascarar, moldear y cambiar a fuera
como mezquita, Como puedes ver, tenemos un int Grady en esto. Grady in se está desvaneciendo lentamente porque cambio la opacidad de este color. Por lo que fuera de este color negro y sin su máscara, puedes usar la opacidad para manipular la opacidad off premios que está enmascarando esta capa. Entonces cambiemos de nuevo este molde. Voy a usar fuera de modo mezquita y ahí lo tienes. Por lo que a veces podrías estar dispuesto a usar las mezquitas Alpha para lograr este tipo de resultados . OK, así como puedes ver, mezquitas son muy poderosas. Característica fuera del sketch y te encontrarás usando una y otra vez los proyectos de Inglaterra. Pero a veces simplemente no necesitas mezquitas. Simplemente quieres sentir algo de capa, sentir algo de forma con una imagen. Y esta es otra técnica que quiero mostrar en esta lección. Entonces en lugar de tener una mezquita, voy a dibujar ah, forma
simple. Entonces cambiemos esta hazaña de tablero duro. Y ahora vamos a dibujar son rectángulo simple. Voy a presionar, son y robaré rectángulo que siente esta tarjeta y voy a usar en lugar de enmascarar, voy a usar sentimientos. Entonces voy a dar click en campo y ahí tienes este pequeño icono de imagen para que puedas sentir esta capa con una imagen. Puedes elegir la imagen de tu disco duro, pero también puedes simplemente arrastrar y soltar la imagen sobre tu forma para que puedas usar finder o un sitio web para seleccionar la imagen arrastrando y soltando por ahí sobre esta pizarra. Y ahí tienes la imagen que siente tu forma y puedes crear formas aún más sofisticadas y complicadas y sentirlas con las imágenes. Y ahora tenemos habilitada esta opción de campo. Entonces eso significa cuando escalas la forma y la imagen se escalará con la forma y no
cambiará sus proporciones, pero escalará para sentir todas las formas de algunas veces tienes partes de la foto escondidas , pero siempre sentirá toda la confección. Cuando seleccionas la opción pies, se redimensionará para que siempre veas toda la imagen. Y si la imagen no es las mismas proporciones que una forma, se tiene este mercado. La tercera opción se estira y cuando usas estiramiento, probablemente pierdas las proporciones de la foto, pero puedes ver toda la foto y siente tu forma. Por lo que la última es alicatada. Y cuando usas estilo, también
puedes cambiar estos máximos de la foto así. Y como pueden ver, estamos generando algún tipo de, ah patrón aquí y sí, así es como funciona. Entonces básicamente usarás sentir casi todo el tiempo porque se siente perfectamente a la forma que tienes, y también se escala sin problemas a diferentes resoluciones. Uno más piensa a la izquierda para mostrarte. Vamos a los sitios de píxeles, y puedes usar el navegador y directamente desde el navegador puedes arrastrar y soltar la imagen del dedo del pie este mismo campo en el menú de campo para que tengas para esta imagen sintiendo sus capas para que puedas usar el navegador que puedes usar. Encuentra ahí con tus fotos para adjuntarlas para esas, y para tenerlas enmascaradas por la forma y también sabes cómo el dedo del pie usa la función de mezquita en boceto. Entonces los veo en la próxima película
15. Exportar recursos: bienvenido. En la siguiente lección de esta lección, nos vamos a centrar en exportar activos de imagen desde boceto. Vamos a exportar gráficos vectoriales así como gráficos de big mob. Entonces como pueden ver, tenemos los grupos. Tenemos imágenes en el interior. Tenemos cosas de Victor. Tenemos nuestros tableros, por lo que todo se puede hacer exportable con este pequeño ícono en la parte inferior. Entonces si haces clic en el signo más y has seleccionado tablero de arte ahí tienes el
tablero de arte , cual se hace exportable, e incluso puedes desplazar click en las tablas de arte para verlos en el panel de exportación. Hacerlos exportables también. Y como pueden ver, vamos a exportar gratis diferentes gráficos. Se puede incluir o excluir el fondo fuera de los tableros de arte en exportación, y también se puede, a algunas opciones. Entonces primero tienes este tamaño y la X básicamente significa que exportará en el mismo tamaño la misma resolución que has esbozado. Entonces en este caso, vamos a exportar en 7 50 por 13 34 píxeles porque es una X. También
tenemos su prefijo y sufijo aquí y por defecto. El nombre fuera aquí si voy a ser el nombre fuera de la capa o lo comestible, pero se puede tener algo al principio o al final, y también tiene la forma de los valores predeterminados a PNG. Si haces clic en este pequeño ícono, puedes aplicar un preset de rebanada. Significa que puedes usar un preset, por ejemplo, para Android o para IOS. Y si seleccionas IOS, tengo escalas para IOS. Por lo que 12 y libre X y el según este escaso. Tengo el sur de Texas y vamos a exportar desafío ahora y te voy a mostrar buscador. Como se puede ver, esas imágenes se están generando, y tengo fuegos gratis para cada artículo. Entonces déjame ir a esta vista opciones y vamos a mostrar información del ítem para que puedas ver los tamaños . Por lo que una talla es esta nativa X. El 2do 1 es el doble de su tamaño y el Fred es tres veces su tamaño. Entonces, ¿por qué siquiera necesitamos tantas imágenes para IOS? Bueno, esto está conectado a la pantalla y a la densidad de píxeles en la rutina de este lugar, que es muy,
muy alta, muy alta, por lo que tienes muchos pixeles apagados en la pantalla, lo
que la hace extremadamente nítida. Pero por otro lado tienes tu dispositivo, que es realmente pequeño, por lo que es tal vez cuatro o cinco pulgadas para una pantalla en el teléfono. Entonces si sirves una imagen que esta X para usuario, sería muy, muy pequeña en este dispositivo. Por eso necesitamos imágenes de mejor resolución para diferentes dispositivos. Y si ves este material io Device metrics website, puedes ver diferentes dispositivos, por ejemplo, iPhones y en el frío a la derecha, tienes densidades, y ese es básicamente el factor de escala. Por lo que el iPhone cuatro tiene el factor de escala off al iPhone six plus tiene el factor de escala off free, y eso significa que tenemos que entregar imágenes que serán tiempos libres más grandes que la escala fuera de una X Y para android, se vuelve loco y loco porque tienes escaso después de las cuatro. Pero olvidemos de ello porque el sketch se encarga de todos los tamaños. Entonces la única decisión que tienes que tomar es decidir el tamaño inicial de tu arte, aburrido y decidido escala inicial. Si vas al tour de artículos. Tienes tallas más antiguas en una escala X, y te sugiero que trabajes siempre a una X. Eso es porque luego puedes exportar a una x dos x o libre X. Y si comienzas, por ejemplo a partir de dos huevos, tienes que exportar a no sé, 1.5, luego la mitad así no va a funcionar de esa manera. Supongo que la mejor decisión que se puede tomar es comenzar con esta escala de una X, pero también una desventaja potencial de eso podría ser que después tenga que exportar los activos
a después de libre o cuatro veces más grande. Por lo que realmente no importa si usas el horario nativo, como herramientas fiscales o efectivas, porque escalarán sin problemas. Pero si usas imágenes, recuerda importar para bosquejar activos de alta calidad, porque de lo contrario, si creas en una medida exportando 300% verás que las imágenes serán borrosas. Pero si importas para bosquejar la imagen que tiene una resolución nativa fuera, por ejemplo, no
sé para OK o cinco K, entonces la escala hacia abajo y luego exportas. Tendrá una resolución perfecta porque sketch siempre lleva esta resolución nativa, y cuando exportas, mira la resolución nativa y que exporta en su mejor calidad. Por lo que pronto descubres que pensar en todos esos diferentes factores de escala y resoluciones llega a una paliza porque en un caso fuera de vectores, siempre
tendrás la escala perfecta de un vector. Y ni siquiera tienes que exportar los archivos PNG, que son, por
supuesto, imágenes
golpeadas. Entonces ahora eso es X, esas resoluciones extra. Y centrémonos en los cuatro meses. Entonces si hago clic en el nombre anterior, tengo diferentes 54 meses entre los que puedo elegir y en la parte superior has golpeado hasta 54 meses, y en la parte inferior, tienes vector libre cuatro meses. Eso es pdf EBS y SVG. Por lo que la regla general es utilizar vectores en la medida de lo posible. Entonces si creas algo dentro del sketch y usas horarios nativos, siempre
creas vectores. Y de esta manera nunca tienes que preocuparte por la resolución, y siempre exportas activos de factor también. Pero ya sabes, las cámaras aún no toman fotos en Vector, por lo que siempre tienes mapas de beat en lo que respecta a las fotos, así que tienes que exportar el golpeado, y luego exportas PNG o Jay Peak fuego. Por lo que J. Beck es un poco mejor para exportar para dispositivos de armas porque en J atrás cuatro meses
se puede seleccionar la calidad. Entonces si selecciono Jay Pick y selecciono exportar, puedes ajustar el deslizador de calidad para que tengas un tamaño de archivo más pequeño y este archivo se
cargará más rápido. Pero si tienes transparencia en tu archivo, tienes que seleccionar P y G porque solo el formato BNG tiene este financiamiento completo para ser transparencia . Por lo que ahí tienes hasta cuatro meses. Siempre usas P y G o J pick para tus archivos siempre y cuando estés lidiando con mapas de ritmo. Entonces lo segundo son los vectores, y siempre tratas de tener como directores de Marge lo más posible en sketch. Por lo que siempre utilice esta programación nativa o importar desde illustrator u otra aplicación que exporte vectores. Entonces se utiliza PDF para dispositivos IOS porque en X frío, se
puede usar PDF como vector cuatro meses para otras aplicaciones. Y para los diseños web, siempre
se usan archivos SPG, y los últimos cuatro meses, el último formato vectorial es E. P s y se usa E. B s Onley en caso de que se quiera agregar posteriormente este cinco que se exportar desde boceto en otras aplicaciones como ilustrador Coral o tal vez tienda padre. Entonces puedes exportar GPS y es bastante universal cuatro meses que puedes abrir en cualquier aplicación. Por lo que voy a seleccionar SPG. Y como puedes ver, ya no
tenemos que lidiar con esta escala porque como B j es vector, por lo que se escalará sin problemas a cualquier resolución. Y eso es mucho más fácil tener vectores. Por lo que por favor cuide estos activos para que sean de alta calidad y exporten tantos factores como sea posible. Entonces ahora, como pueden ver, puedo exportar, por ejemplo, un grupo y sobre nuestro grupo. Y cuando vuelvo a este grupo de avatar, tengo este icono de navaja junto a la carpeta. Por lo que todos esos ajustes de exportación se recuerdan en boceto, y no tienes que hacerlo una y otra vez. Cuando vuelvas a un activo que anteriormente tenía algún ajuste de exportaciones, seguirán siendo los mismos si tienes muchos activos que están configurados para ser exportables en boceto. Se puede ir a este menú de exportación de fuego, y se puede ver todo fuera de los activos, por lo que la opción anterior que se exportan activos individuales. Si bien éste puede exportar todos los activos que están configurados para ser exportables y
tienes escalas ,también tienes los 54 meses aquí puedes seleccionar o de seleccionar el ácido que desees, , o no quieres incluir en tu exportación, y puedes hacer clic en exportar para exportar todo fuera de la imagen de esta pelea de boceto. Por lo que de esta manera se puede seleccionar un grupo de capas de exportación o tableros de arte. ¿ Y si quieres exportar algo que no sea un grupo de capas o inaudible? Vas al dedo del pie de inserción y seleccionas este estilo de vida, que es como en el teclado, y no debilitas ho sobre algunas capas. Tienes estas líneas azules que te permiten simplemente arrojar y tener la configuración y la rebanada igual que
el objeto bajo esta selección, pero básicamente también puedes tomar un dedo del pie de corte y crear una selección arrastrando. Por lo que ahora tengo una selección fuera, no necesariamente una capa o grupo, y se exportará en consecuencia. Por lo que puedo decir las opciones de exportación, patinaje y esas cosas. Y en el panel de capas tienes esto como cosa separada. Entonces esto no es un grupo ni una capa. Esta es solo una rebanada que puedes ajustar más adelante para que podamos cambiar el tamaño de esta rebanada. O puedes, por ejemplo, moverlo a otro lugar, y como que quita una captura de pantalla de lo que seleccionas para que puedas ver esta vista previa a la derecha, y puedes seleccionar muchas cosas con esta rebanada y aparece en el panel de capas. Por lo que eso significa que puedes cambiar el nombre de las diapositivas que puedas. Necesitan. El rebanado podría reorganizarlo, y es bastante útil. Pero a veces tienes muchas rebanadas en tu proyecto, y no puedes seleccionar ninguna capa que esté debajo para que te veas así de bonito. Puedes hacerlo invisible, pero también puedes usar esta pequeña función que ocultará todas las rebanadas. Por lo que tengo 47 rebanadas aquí, y al hacer clic en este ícono de cuchillo, puedo esconderlas todas. Y si estoy listo para exportar, puedo revelarlos haciendo clic nuevamente en este ícono. Por lo que ahora mismo, al presionar el comando Shift E, que es un atajo para esta ventana de exportación de sectores, también se
puede acceder a esta rebanada recién creada. Entonces ahora te voy a mostrar una proteína de bono más que puedes usar para exportar activos directamente desde sketch y ponerlos, por ejemplo,
para encontrar la ventana o, por ejemplo, a tu escritorio. Puedes seleccionar fácilmente cualquier cosa, como un grupo o una capa, y luego vas al panel de capas y simplemente lo arrastras por ahí y lo pones en buscador y ahora tu archivo se exporta. Entonces lo que hay en este grupo se está guardando como un archivo PNG. También puedes hacerlo con un tablero de arte para que puedas arrastrar y soltar fácilmente cosas. Y si rápidamente necesitas usar algunos PNG cinco de tus capas desde sketch, puedes hacerlo como para que no tengas que exportar. Y se pone aún mejor porque si usas holgura, por ejemplo, puedes seleccionar cualquier cosa de la espinal valuador, y puedes arrastrarla y soltarla en slog. Y luego tienes este activo exportado y se sube a tu cuenta de slack y, por ejemplo, se envía a tu compañero de equipo. Y espera. Porque hay más. También puedes seleccionar aquellos activos exportados para ser enviados, por ejemplo, a Facebook o directamente con un correo electrónico como archivo adjunto con este pequeño icono de compartir. Por lo que haces clic en este icono de compartir y tienes todas las aplicaciones en tu marca que apoya la capacitación, por ejemplo, masculino arriba Facebook, parpadeo o Twitter. Entonces así es como funciona. Ahora puedes exportar fácilmente activos desde boceto y guardarlos en diferentes formatos. Veo la siguiente lección.
16. Operaciones Mathmatical: aquí estamos en la siguiente lección, y como los años podemos usar operaciones matemáticas en cada campo de entrada en sketch. Y esto en realidad es enorme, porque si seleccionas cualquier capa, puedes ir con opción superior al campo capaz de primera posición. Y en cada campo de entrada se pueden utilizar operaciones como, por ejemplo, dividir o agregar o multiplicar. O también puedes restar. Entonces vamos a sumar 45 restemos y extra a las piezas. Y ahí tienes. Tienes 48 píxeles, puedes dividir por dos, y tienes 24. También puedes, ejemplo, multiplicar por el resultado fuera de la operación desactivada por menos dos, y ahí lo tienes otra vez 48 para que podamos presionar tabulador para ir al siguiente campo de entrada Oregon Presione la pestaña Mayús para ir a la entrada anterior campo, y podemos usar el teclado Teoh realizar estas operaciones matemáticas. Como podría sospechar. Va aún más allá porque en esta importación de trigo se siente, lo que podemos hacer es si tenemos estos 563 píxeles, podemos bajar eso y se puede decir, por ejemplo, 10% por favor y ahí lo tienes. Por lo que son unos 55 píxeles. Es 10% de este valor. Ahora bien, si agregamos algo restar, se
puede ver que el campo de trigo y Hyde cambia en consecuencia porque el
icono de candado pequeño está encendido. Entonces ahora si me deslice, si cambio el tamaño esta pequeña imagen va en proporciones en lo que podemos ocultar se refiere. Entonces ahora lo que voy a hacer es en realidad te voy a mostrar una manera inteligente de escalar cualquier capa desde un lado. Entonces vamos a poner 500 ahí. Y si pongo 500 quiero,
por ejemplo, por ejemplo, de este 500 hacer 600 así que hazlo así 100 pixeles más grande, realidad
puedo decirle boceto que lo escale desde un lado para poder escalar desde el lado izquierdo , y de esa manera va a poner estos 100 pixeles extra a la derecha de mi imagen. Entonces cuando presiono volver, ahí lo tienes, 100 pixeles a la derecha, y puedo volver a 500 luego poner 600 puestos son al final de este campo de entrada y justo Ahora me voy a escapar de la derecha, Así que significa que va a sumar 100 píxeles a la izquierda. Y como cabría esperar, también lo
puedes usar en altura. Entonces en altura izquierda y derecha, realidad no tiene sentido. Pero puedes usar arriba y abajo, así que voy a decir 50 gratis. Y ahora voy a expandirme 100 pixeles y voy a añadir T al final, así que T significa top. Entonces por eso voy a asustar desde arriba. Entonces estoy agregando estos 100 pixeles al fondo y al contrario. También puedo escalar hasta el fondo. Entonces empiezo desde abajo y voy a agregar 100 píxeles a la parte superior, y así es como funciona. Se puede poner a la izquierda, derecha, superior o inferior al final de los campos de entrada para escapar de cada lado. Entonces vamos a cambiar a algún otro campo de entrada se puede transformar allí. Tenemos grados, pero realmente no importa. Si pones más allá de 10 hará 10 grados de rotación, así que eso es todo. Entonces así es como puedes realizar operaciones matemáticas en campos de entrada fuera del boceto ahora mismo , te
voy a mostrar la siguiente empinada. Por lo que la última lección fue sobre exportar imágenes. Entonces vamos ahora a, por ejemplo, nuestro logotipo. Seleccionemos el logotipo y hagamos que eso sea exportable. Y como ustedes saben, aquí pueden seleccionar asustos para que pueda volver a seleccionar uno. Por ejemplo, poner 1.4 para tener una escala del 140%. Tengo ahora 160%. Pero también, puedo decir 100 píxeles, por ejemplo. Y ahora, cuando exporte este logotipo, echa un
vistazo al archivo y voy a presionar comando I para ver las propiedades y panel Info . Se puede ver que la semana libre de este logotipo es ahora de 100 píxeles y la altura se establece en consecuencia a las proporciones de esta imagen, por lo que nunca, nunca perderá proporciones. Pero puedes ponerlo a cualquier ejercicio que desees. Y ahora mismo vamos a tener 500 píxeles. Entonces cuando revisé el panel de información, vamos a tener 500 píxeles de ancho y 500 píxeles 5 48 píxeles de alto para que mantenga las proporciones. Y eso no es bueno. Porque en lugar de píxeles, puedes usar letras. Por ejemplo, se
puede poner la letra W para trigo ordenar su edad para estatura. Entonces si dije que fuera libre 100 de altura, no
será mayor a 300 píxeles. Entonces vamos a exportarlo como local, también, y se puede ver que sigue en proporciones. Tiene 300 pixeles de altura y en consecuencia, 274 nos habla. Espera, para que no tengas que igualar la necesidad de gas este segundo número. Simplemente dijiste una resolución, por ejemplo, 300 píxeles de ancho. Y démosle un nombre a la pequeña libre. Y siempre tenemos esta altura a escala proporcional en esto en esta pelea. Por lo que esto es necesario recordar esas letras, w y edad, y también recordar las letras para izquierda, derecha, superior o inferior siguiente, y lo último profundo de esta lección es establecer las radios fronterizas para tu forma para que podamos establecer aquí
las radios y seleccionemos el rectángulo y cambiemos el radio del borde. Como puedes ver esta radio fronteriza, sea cual sea el valor, cambia para todas las esquinas. Entonces, ¿y si queremos cambiar los valores por separado para cada esquina? Podemos hacerlo en este campo de entrada. Empezamos desde la esquina superior izquierda y luego vamos en el sentido de las agujas del reloj. Por lo que el primer valor es para la esquina superior izquierda. Y pongo cero que como separador, use punto y coma. Y luego pones 20 pixeles para el orgullo del dedo del pie. Cero píxeles para abajo, derecha y 20 píxeles para abajo izquierda y presiona retorno. Ahí tienes un radio diferente para cada uno fuera de las esquinas. OK, eso es todo. Por ahora, pasemos a la siguiente lección.
17. Cuadrícula de Pixel: como mencioné en una de las lecciones anteriores. Sketch es un entorno vectorial. Significa que todo lo que creas dentro del boceto con estas herramientas nativas es un vector. Entonces si seleccionas el icono y presionas los comandos K
para escalarlo a, por ejemplo, 48 alrededor de 48 comentario para acercar y tengo 1000 zoom alguna vez, puedo acercar aún más a, por ejemplo, 13,000. Y como puedes ver, todo es extremadamente nítido y claro, y esta es la belleza de los vectores. No obstante, a veces hay que exportar esos activos vectoriales como un archivo PNG o como un archivo J pic. Entonces, por ejemplo, una solicitud de desarrollador es que entregues fuegos PNG y tienes que exportar. Dale una paliza. En este caso, tendrás que pensar en algo que se vaya picos acordados, y básicamente grande. Tan grande es la propiedad fuera de tu pantalla, y como sabes, tienes una grande para que la ciudad en tu monitor así como la resolución. Entonces si tienes una pantalla Full HD, tienes 1920 píxeles blancos, y tienes 10 80 picos nosotros altos. Por lo que esto crea acordado y Cuando vas a la configuración de vista en un boceto y entras lienzo, puedes habilitar la opción de mostrar fotos de lectura, y el atajo de teclado es el control X. Así que ahora puedes ver selecciones individuales en desengrasado en mi Iconix 48 por 48. Y si echas un vistazo a las coordenadas de este rectángulo, la posición X e Y están en realidad en picos completos. Nosotros. Entonces ahora ¿qué pasará si me imagino este rectángulo y lo pongo en algunos valores decimales? Entonces tengo esta Posición X y por qué con esto más valores al final, y significa que no está en la fuerza para los picos nosotros. Ahora. Si voy a ver y mostrar células débiles, puedo emular cómo funcionaría esto y cómo se vería esto en los picos. Acordó el monitor mientras se exportaba como un golpeado. Entonces si miras de cerca, puedes ver que esos bordes están realmente borrosas ahora, y eso es porque esos bordes no están en las semanas completas de valores. Entonces para cambiar que podemos ir de nuevo propiedades de posición del dedo del pie, y podemos borrar todo después de un coma. Por lo que ahora tengo valores horizontales que son perfectos, y también necesito valores verticales perfectos también. Y como puedes buscar, esos bordes borrosos desaparecieron, y ahora el rectángulo está perfectamente alineado dentro del píxel. Acordado. Entonces como un llevar, por favor recuerda que lo mejor es mantener los picos de valores a su alrededor a picos llenos todo el tiempo para que puedas asegurarte de que el monitor los muestre correctamente. Ahora vamos a presionar comando coma otra vez y vamos a bosquejar preferencias. Y en la sección General, tienes esta opción de alimentación de píxeles, y puedes alimentar capas y puntos a límites de píxeles al cambiar el tamaño de los jugadores, y también al alinear jugadores. Por lo que te recomiendo encarecidamente que selecciones ambas opciones. Y ahora, si utilizas un dedo de opciones de línea incorrectamente, posicionas, capas así como mueves la capa alrededor, siempre
tomas dos semanas completas de valores. Entonces seleccionemos esas opciones y déjame mostrarte lo que quiero decir con esto. Voy a acercar para cambiar de nuevo la posición de este rectángulo, y voy a mantener habilitados los picos acordados, para que veas que siempre se encaja con el dedo completo, habla hacia arriba, Así que en realidad no puedo dejarlo en el medio pizza. Pero lo que puedo hacer es que puedo hacer al campo de entrada, y puedo escribir el valor decimal para que todavía lo puedas tener en medios píxeles, por ejemplo. Pero es más importante que cuando muevas las capas, siempre se
partirán unas cuatro semanas alrededor. Entonces eso es como este diamante ahora mismo. Y hablemos de tal vez una excepción a esta regla. Entonces si tienes una forma que quieres transformar con la rotación por lo que aplicas la invitación fuera, por ejemplo, 20%. Como puedes ver, automáticamente
obtienes estos valores decimales en las coordenadas X e Y, y básicamente quieres mantenerlo de esa manera. Eso es porque de lo contrario lo serás. Mueve la posición fuera de las coordenadas X
e Y, y sabrá que Logan más estará centrado dentro de este rectángulo en boceto para cada capa
individual que
seleccionaste, puedes ir al menú de capas y seleccionar alrededor de dos picks up, y así es como puedes permitirte que esta capa esté en valores de píxel completos para coordenadas de coordenadas. Por esto no pude, aunque realmente no hace a este fin, trabajo. Eso se debe a que ahora se mueve dentro de su grande así acordado y no está perfectamente alineado al centro fuera del rectángulo. Entonces eso es porque presiono el comando Z. Y si usas valores de rotación, por ejemplo, 20 grados, no
tienes que preocuparte por ser solo, por ejemplo, media semana nosotros o decimal valores fuera de las pizzas. Todavía estás bien. Entonces vamos a gustar este ícono y vamos a gustar, hacer opciones exportables. Y como les dije, no se
puede exportar de manera segura hacer A P y G o un archivo J pic, que es un golpeado archivado. Pero tienes estas coordenadas establecidas en píxeles completos para que se vea lo mejor de sí, y por qué Motivo que tengo es seleccionar una casilla de verificación segura o Web mientras exportas
paperas de carne porque era mantener perfiles de color y también algún meta más tarde para que tú tienen un archivo más pequeño que se carga más rápido, y eso es todo por ahora. Te veo en la siguiente lección
18. Trabajar con símbolos: en esta lección, te
voy a mostrar una de las mejores características fuera del sketch y la que te ahorrará
mucho tiempo. Y esta característica son símbolos. Por lo que vas a usar símbolos en tu proyecto para que tengas muchas instancias fuera de un símbolo que está definido en el espacio de símbolos. Te voy a mostrar en un segundo, y si quieres hacer un cambio a todas las instancias, puedes hacerlo a la vez por cualquier cosa. El símbolo maestro. Entonces ahora voy a recrear esto en proceso de embarque para un pago, y vamos a seleccionar las capas que no necesitamos en las profundidades. Y ahora sólo tengo un camino que podría recrear como ensamblado. Por lo tanto, para crear un símbolo a partir de un grupo o fuera de una capa, simplemente
seleccionas este grupo y haces clic en crear símbolo inferior. Ahora puedes ingresar un nombre para tu símbolo y por defecto. Es el nombre de la capa, y también puedes crear un espacio de símbolos separado Ese boceto usará para todo tu símbolo. Por lo que te recomiendo seleccionar esta opción y selecciono Ok, Ahora tengo en mis páginas estructura, símbolos, página. Y en esta página, voy a tener todos fuera de los símbolos. ¿ Por qué? En la página uno solo
tienes las instancias fuera del símbolo. Entonces ahora no. Vamos a crear aún más símbolos. Voy a usar todos los grupos con iconos para crear símbolos, así que voy a tener tic como símbolo, también alerta. Y voy a transformar los puntos en símbolos también. Entonces ahora todos estos iconos están en la página de símbolos, y puedo editar esos símbolos de monstruo ahí mismo. Y si vuelvo a la página uno y trato de copiar las instancias así que estoy seleccionando esos iconos y voy a opción moverlo a la siguiente tarjeta para que tengas dos instancias fuera de cada ensamble
individual que he creado. Ya no puedo editarlos en la página uno, pero puedo hacer doble clic en este pequeño ícono para ir a la página de símbolos. Y si hago doble clic y hago algunos ajustes aquí, puedo, por ejemplo, cambiar el color del icono del palo, y puedo seleccionar la forma y goto color y tal vez cambiada a algún color rojizo y ir volver a la instancia ya que puedes ver todas las instancias fuera de mi símbolo cambian en consecuencia. Entonces ya he leído palos, y así es como actualizas el símbolo en el espacio de símbolos para que cambie en tu diseño . Entonces imaginemos que tienes la guía de estilo con el logo y todos los activos que
puedes actualizar una vez, y cambian en todo fuera de tus diseños fuera de las páginas. Entonces, ahora seleccionemos el número de tarjeta. Cambiemos este nombre por algún nombre más genérico, por ejemplo Item. Y voy a cambiar los nombres de estos iconos también. Voy a agregar prefijo para ellos, y será icono slash. Entonces ahora voy a seleccionar este icono barra diagonal y copiarlo y enfrentarlo por todos los nombres de mi ícono. Entonces voy a tener icono,
icono, icono, otros y luego presionados, hay que ir al siguiente nombre y poner iconos tick usando esta convención de nomenclatura particular para los nombres de símbolos te permitirá organizarlos en el menú de inserción. Entonces voy a ir a un menú de inserción en boceto. Y como pueden ver, puedo insertar símbolo desde aquí, y el elemento es un símbolo independiente. Pero todos los iconos están agrupados en el grupo de iconos, así que tengo este icono. Después puse slash y saqué el nombre. Otros pensamientos antiguos. Y esta estructura está bien organizada en este menú de inserción. Entonces recuerda que puedes usar esta convención para agrupar tus símbolos y es bastante necesario para mantener sus archivos organizados porque a medida que trabajas junto con bocetos, vas a tener miles o cientos de símbolos fuera y quieres mantenerlos agradables y limpios . Entonces ahora duplicemos a esos mentirosos. Voy a opción arrastrarlo y luego vamos d a duplicar. Ahora turno, haga clic en todos los elementos y vaya a las opciones de alineación. Voy a distribuir el desplazamiento verticalmente. Por lo que ahora tengo artículos perfectamente alineados. De acuerdo, hagamos algunos cambios menores en el símbolo mismo. Entonces voy a seleccionar el símbolo del ítem y el doble griego para entrar al modo de edición en discurso del
símbolo y voy a presionar comandos sean los que me permitan hacer esa boulder de
campo de texto y lo que me gustaría hacer en este momento es cambiar el texto en consecuencia en cada apagado el instante. Entonces ahora puedes ver todo el potencial de los símbolos fuera porque en realidad puedes hacer algo que se llama anulación y tienes ajustes de anulación en el socio correcto cuando
seleccionas el símbolo y ahí tienes todo el campo de texto que puedes cambiar. Entonces tengo campo de entrada y también campo de etiqueta, Y voy a poner fecha en la etiqueta en lugar fuera del número de tarjeta en este primer símbolo, y también puedo eliminarlo para volver a la frase original que estaba ahí. Entonces en el segundo campo, voy a poner mes y año en diferido. Voy por encima tenía la etiqueta para tener este abrigo cvv, y en el 3er 1 voy a anular la etiqueta para que tenga frío postal. Como se puede ver, la convención de nomenclatura para cuatro capas también es importante porque, diciendo etiqueta en lugar de apagado, Por ejemplo, los vehículos
CV es mucho mejor para que los símbolos sean más genéricos. A veces en tus símbolos tienes mucho fuera de los campos de texto y no necesariamente necesitas esos campos de texto. Teoh aparecen en el panel de sobrescribir, por lo que los dedos excluyen de estar sobre retorno. Se puede presionar comando shift l toe, mirar la capa o simplemente mirar la capa en la capa espinal, y como se puede ver ahora no aparece en el sobreacto. Entonces, si quieres excluir el sufrimiento de anulaciones, simplemente
bloqueas la capa en el panel de capas. El segundo que tengo aquí en anulaciones por defecto es un logo de Visa, así que eso es básicamente un beat mi jugador que puedo reemplazar por algún otro golpeado para poder seleccionar el logotipo de MasterCard, por ejemplo. Y ahí lo tienes. Intercambié el local. Por lo que mi valor predeterminado en todos tus símbolos puedes anular vencer a mis jugadores así como puedes anular los campos de texto. Por lo que el segundo escenario podría ser que no quieras que esta imagen de visa o cualquier imagen aparezca en el lado derecho de tu artículo en absoluto. Por lo que básicamente quieres eliminar este logotipo de Visa, y puedes elegir una imagen bancaria, por ejemplo. Pero no es la mejor manera de hacerlo. Lo que puedes hacer es lo primero que puedes desprender esto de un símbolo. Entonces cuando lo desconectas de un símbolo, ya no
tienes esta conexión entre la página de símbolos y este número de tarjeta. Como puedes ver, esta es una carpeta separada ahora. Y se puede, por ejemplo, borrar u ocultar este logotipo de visa, por lo que ese podría ser el primer acercamiento. No obstante, no
es idea, porque si lo hiciste son algo de símbolo, ya no
se puede actualizar con el símbolo de los cambios de símbolo de la reunión. Por lo que tiene que ser una mejor manera de hacerlo. Y por supuesto que lo es. Y lo que vamos a hacer para lograr eso es que vamos a crear una
estructura aún más compleja a partir de un símbolo, lo que significa que vamos a anidar símbolos dentro del otro. Entonces voy a seleccionar ahora este logotipo de Visa, y estoy dentro del símbolo del artículo y fuera su logotipo de visa. Voy a hacer otro símbolo. Así que asegúrate de haber seleccionado la capa local de visa y ahora crea un símbolo fuera de ella. Vamos a darle un nombre de un logotipo, o tal vez algo más genérico, como una imagen, y voy a seleccionar. De acuerdo, Ahora tengo un simple dentro del otro símbolo, y así es como haces que este otro símbolo aparezca en las anulaciones. Y ahora puedes seleccionar no en las anulaciones para ocultar el símbolo en esta instancia en particular . Entonces así es como se hace un símbolos anidados que pueden tener sobrescribir. Y lo vamos a hacer también para todos los iconos, porque podemos hisopar los iconos en cada fila. Entonces voy a pasar a una página de símbolos, y voy a crear símbolos anidados fuera de estos iconos otra vez. Entonces voy a mover los iconos primero a la posición correcta en el símbolo del ítem también, y voy a asegurarme de que todos los iconos estén dentro de este símbolo del ítem. Entonces movamos la alerta también. Y esta es s hasta ahora la mejor manera de hacerlo. Y yo también me voy a mover con los perros. Por lo que no podemos destruir todos los símbolos restantes. Seleccionemos los iconos y solo presionamos el retroceso para eliminarlos. Y ahora hagamos símbolos fuera de los iconos que tenemos aquí. Entonces voy a crear un símbolo y solo asegurarme de que pongas iconos slash antes de cada nombre que esté bien organizado, y vamos a hacer esto por los demás también. Y también iconos de Putin aquí, y vamos a poner el nombre de un nuevo símbolo puntos. Y ahora podemos intercambiar esas imágenes. Eso se debe a que son símbolos invertidos dentro de nuestro artículo. Entonces no voy a poner ninguno para Dolce y otros aquí en el segundo troll. Voy a poner Nantou muelles otros y toma así dedo del pie ocultar todos los artículos. Y aquí voy a mostrar en la teca. Y en la última, sólo
voy a mostrar la otra. Entonces voy a poner a los demás a los demás. Y los adultos no lo hacen tan bien como la teca. Entonces ya casi estamos establecidos, una cosa más que voy a crear es esta pequeña línea roja que aparecerá bajo el campo que,
por ejemplo, por ejemplo, alguien mal ortografió o simplemente pongo un número de tarjeta incorrecto o algo así. Entonces por favor ten en cuenta que tienes que diseñar todos los estados fuera, por ejemplo, un formulario o una botella, que cuando manejes a los desarrolladores, sepan exactamente cómo eso establece, por ejemplo, estado vacío, estado inactivo o estado de error se vería Así que voy a tener un duplicado de esta línea y me
voy de pie, tener un nombre fuera de línea y también crear símbolo para la duda. Y pongamos iconos aquí y también tengo alerta de línea. Voy a crear un símbolo para eso, y eso primero cambió el color dedo del pie color rojo. Y vamos a cambiar el grosor para hacer y discretar un símbolo. Por cierto, la alerta de
línea es bastante buen nombre porque es más genérico que, por ejemplo, línea
roja. Y si luego decides que quieres tener una línea naranja, tendrás que cambiar los nombres en consecuencia, por lo que es mejor mantenerlos genéricos. Y ahora voy a seleccionar todos los elementos con shifty, y también se pueden realizar operaciones en múltiples artículos seleccionados. Como pueden ver, apagué la línea para cada elemento y para la última fila, sólo
voy a encender esta línea roja que he creado. Ahora, si estás usando las versiones estadounidenses de Sketch, tuviste suerte porque los símbolos consiguieron actualizaciones realmente bonitas, que te voy a mostrar ahora mismo. Y uno del gran público que hay que tomar en cuenta para las próximas lecciones también es que anteriormente tendrías que bloquear la capa para excluir esta capa de anulación. Entonces si me encanta la capa de entrada en el maestro de símbolos, entonces si voy a la página, esto será mucho de anulación, así que entrada no estaré aquí y estoy usando esto en la lección futura. Por lo tanto, tenga en cuenta que esta es la forma en que no necesariamente funciona en las
versiones más recientes de Sketch. Realmente no tienes que buscar nada. Básicamente, si miras algo, no tendrá ningún efecto, sea visible en las sobreescrituras o no. Pero simplemente puedes disipar algo de anulaciones en el símbolo mismo. Sólo tienes que ir al símbolo y seleccionar el símbolo en sí. Por lo que hago clic en este ítem, y al lado derecho, hay un dolor de sobreescritura gestionado que puedes usar para permitir, y esto permite anular tanto para todo en el símbolo o puedes seleccionar
elementos individuales . Y además, si tienes, por ejemplo,
texto, texto, puedes desactivar el valor de texto Onley para que no puedas anular este valor de número de tarjeta. Pero puedes dejar estilos de texto habilitados para que puedas cambiar el color o algo
así . Si vuelvo a la página y selecciono esto, ves que para esta etiqueta, solo
tengo estilos de texto que se pueden anular y aplicar a ella, y no tengo ese valor de entrada, por lo que no puedo cambiar este texto de número de tarjeta en aquí. Entonces así es como se puede decidir y 40 se anula a sí mismos. Ambos pueden usar los valores aquí para poder cambiarlo así. Pero para los campos de texto, también
es muy fácil seleccionar la sensación de texto que puedes venir y hacer clic en el campo individual y luego hacer doble clic. Y ahora puedes vivir añadido esta entrada sobrescribe aquí también simplemente haciendo doble clic porque también tienes todas las cosas individuales que se pueden sobreescribir bajo este símbolo . Por lo que en las versiones más recientes de Sketch, puedes hacer clic en este pequeño triángulo junto al símbolo, y te permitirá ver todos los y los símbolos dentro y todos los alimentos
e imágenes de texto y todo lo demás. Puedes seleccionarlo desde aquí, y a menos que no esté deshabilitado para sobrescribir, puedes anularlo aquí para que cada pensamiento individual tenga solo una configuración de sobrescribir. Y si seleccionas todo el símbolo este número de tarjeta, tendrás todos los disponibles sobre derechos, dependiendo si se trata de una imagen o tal vez campo de texto, tendrás diferentes cosas para elegir. Por ejemplo, esta batalla maestros cualquier medida, o puedes intercambiar una imagen. Si tienes símbolo, ese es el mismo tamaño. O puede, por ejemplo, poner texto aquí o cambiar el texto. Estilos de cosas diferentes están aquí, y también estos diminutos iconos te permitirán saltar directamente a la definición del símbolo porque si
tienes símbolos anidados como te he mostrado, por ejemplo, hay esta línea de iconos, y este es símbolo separado. Simplemente está anidado dentro de este número de tarjeta, pero si quieres saltar rápidamente a la línea de iconos, solo
puedes hacer clic en esta flecha pequeña, y esto irá directamente a la línea en lugar del símbolo de los padres, que es en este caso, el rubro. Y también puedes hacer es usar esta pequeña sobreescritura con datos cosa que te explicaré en las lecciones
posteriores. Pero si tienes datos de texto o algunas imágenes ficticias, simplemente
puedes usar datos de captura fuera, por ejemplo, ciudades de
premio
o nombres, o puedes traer diferentes datos que se rellenarán automáticamente. Pero lo haremos en una de las próximas lecciones. Si has hecho lo suficiente y quieres volver al estado inicial fuera del símbolo. Puedes restablecer todas las sobrescrisiones a la vez haciendo clic en este pequeño icono de reinicio. También, en las versiones más recientes de horarios cambiaron ligeramente. Este desplegable que te permitirá recoger otro símbolo, y esto básicamente serás tú para reemplazar símbolo entero. Entonces si selecciono un número de tarjeta, en su lugar
puedo usar el icono así, y esto mantendrá los tamaños, las diferentes propiedades que aplicaste para este elemento. Eso es básicamente todo para las futuras lecciones. Policías recuerdan dos cosas. El primero es que se puede, y es el texto anula directamente en el lienzo. Se puede duplicar, hacer clic y editar el texto. Eso es una cosa bonita, y el 2do 1 es que ya no tienes dedo del pie look cualquier capa para que no esté disponible para anular. En cambio, vas al elemento en sí al símbolo, y luego te las arreglas sobre los derechos del lado derecho. Eso es todo por símbolos, y te veo en la siguiente lección.
19. Librerías de bocetos: Hola allá y bienvenidos a la siguiente lección. Ahora hagamos este bling bling bling bling. Y esto se debe simplemente a que las bibliotecas son una de las características más esperadas fuera de boceto, y ahora puedes usarlas. Son bastante fáciles de agarrar. Significa que básicamente puedes usar otros de fuegos de boceto y los símbolos que tienes en esos fuegos de boceto dentro de cualquier proyecto en boceto que tengas
para que no necesariamente tengas que copiar y pegar todos los símbolos a la página de símbolos. Simplemente puedes usar esos incendios como bibliotecas. Entonces vamos a insertar menú. Y aquí tienes símbolos y obviamente este tipo de texto o, sabes, esos ya. Y si creas un símbolo a partir de este tipo, por ejemplo, que creó y digamos que este es nuestro por ejemplo, símbolo de
texto, puedes usar este símbolo, y esto tiene este pequeño ícono de flecha que ya lo sé. Ya está también en la página de símbolos, y puedes usar, insertar y luego ir a símbolos. Y ahí está nuestra tecnología que además de eso, puedes ir a insertar,
y aquí tenemos, por ejemplo, por ejemplo, IOS te diseñé y esos son símbolos que están dentro de fuera en esta llave de diseño IOS ey que tú tener en boceto. Y ahora puedes usarlos sin siquiera abrir este archivo y sin importar siquiera estos elementos al espacio de símbolos. Entonces ahora no lo tengo en la página de símbolos, pero no tengo aquí y ahora vamos a bosquejar preferencias. Presiono comentario, coma, Y aquí tienes esto una parada de biblioteca. Y ahora solo puedo usar Iris. Tú diseño, por cierto, puedes dar click en esta pequeña II yendo a previsualizar esta biblioteca. Pero también, puedes cerrar la vista previa y puedes añadir una nueva biblioteca. Y esto básicamente puede ser cualquier archivo de boceto que tengas. Entonces eso es, por ejemplo, importar esto. Eres clave que tengo aquí, voy a abrir esto y aquí tengo otra biblioteca, Así que esto es entrecortado. Se puede previsualizar de nuevo esta biblioteca, y hay algunos símbolos en esta biblioteca. Entonces ahora cuando voy a insertar, puedo ver Tienda E, y puedo ver todos los símbolos que hay dentro. Entonces, por ejemplo, si quieres usar algún fondo, voy a usar botella simple. Es arroyo en este artículo y pongámoslo a nuestro boceto fuego. Ahora lo que tienes aquí también se ordenan todas las anulaciones. Por lo que significa que va a esta pelea y puede determinar si quieres cambiar este color de
anulación, por ejemplo, para esta batalla. Y esto bastante cool porque puedes tener todo en un solo lugar. Por ejemplo, esta guía de llantas. Entonces esta fuente de verdad que tienes para tus archivos de diseño, por ejemplo, para el producto, y luego puedes usarlo una y otra vez dentro de los nuevos hallazgos que creas. Eso es bastante útil, y también puedes distribuir esos incendios a través de tu equipo, y luego todos pueden usar esta única fuente fuera de la verdad. Y cuando estos cambios, puedes actualizar vía libros de drogas o abstracto o de cualquier otra forma, y tienes todos los activos en el lugar correcto. Ahora lo que puedes hacer es acceder a las preferencias, o simplemente puedes hacer clic derecho en este activo en las bibliotecas, y tienes el mismo menú, y desde ahí puedes desactivar la tienda E, y significa que no lo eliminarás de esta bibliotecas. Pero simplemente lo desactivará para que no se muestre en el manual de inserción, y luego tienes show en Finder. Y eso es bastante importante. Recuerda que tienes que mantener esos archivos catch que se importan como bibliotecas en tu disco duro. Y esta es la principal diferencia entre símbolos también, porque los símbolos están anidados en esta diversa captura de fuego en la que trabajamos. Si bien esos activos que creas y que usas desde las bibliotecas no son símbolos en sí mismos, son símbolos, pero tienen este pequeño icono de enlace, y significa que están vinculados a este archivo en particular que está en algún lugar fuera del archivo de boceto en su disco duro. Significa que si eliminas esta fuente original de verdad a cabo, o simplemente la mueves a otro lugar de tu unidad, esto ya no estará disponible como activos aquí en bibliotecas. Por lo que esto es realmente importante, y también puedes abrir este fuego y bosquejar así como quitarlo. Si lo sacas de ahí, no lo
sacarás de tu disco duro. Simplemente lo quita, lo quita de las bibliotecas, y creo que eso es bastante simple, y sin embargo es una técnica muy poderosa para que puedas tener todos tus activos de diseño, por ejemplo, logo y el prompt de tipo en un archivo separado. Y luego puedes usarlo a través de todos los demás fuegos sin importancia en símbolos. Siempre fue un viaje cuando importaste y copiándolo pegaba símbolos a través de los fuegos. Entonces si cambias una fuente de la verdad en tus 15 tienes que haber bajado una en la
otra y las bibliotecas simplemente resuelven este problema. Ahora vamos a profundizar un poco más en las bibliotecas y crear una desde cero. Y lo que básicamente hará su voluntad creará algo que podría llamarse Biblioteca anidada. Por lo que presiono comando y para crear un nuevo boceto de fuego. Y ahora imagina que en este archivo de boceto, por ejemplo, tenemos dos rectángulos, así que tenemos el 1er 1 que es nuestra marca de color amarillo, y el 2do 1 será de color azul marrón. De acuerdo, Ahora puedes seleccionar esos elementos y crear símbolos fuera de ellos que ponen a Kohler y esto será amarillo. Y eso es prensa. Está bien. Y ahora para el otro, vamos a crear también un símbolo, y esto se llamará libro. De acuerdo, así que de esta manera. Tenemos un archivo con dos símbolos del orbe SAARC azul y amarillo. Ahora puedo crear otro archivo y este otro archivo tendrá algunas, tal vez formas o me consola. Vamos a seleccionar a estrella y voy a dibujar una estrella. Este será básicamente otro símbolo. Entonces vamos a crearlo. Voy a crear símbolo de estrella icono aquí y presionar OK, ahora, dentro de este símbolo, es doble clic en él en su en el espacio de símbolos. Lo que voy a hacer es que voy a llamar a esta biblioteca anterior. Entonces, vamos a presionar coma de comando. Y también necesitamos guardar primero esos archivos. Entonces vamos a guardar este horario gratuito sin título. Este será curso para nuestra marca. Vamos a guardarlo. Y también para este fuego sin título, lo
vamos a guardar como iconos. De acuerdo, ahora, vamos a la biblioteca. Voy a crear otra biblioteca. Entonces eso es en la biblioteca. Y aquí tenemos nuestros colores que están abiertos, y podemos usarlo dentro del símbolo ahora mismo. Entonces si nosotros, por ejemplo, queremos llamarlo desde aquí, vamos a los colores y usemos nuestro color azul. Voy a ponerlo sobre esta vez vengo así Y ahora vamos a hacer es simplemente seleccionar la estrella y hacer click derecho sobre ella y seleccionar mezquita para que hayamos enmascarado este color con la forma y lo que podemos hacer si regresamos a la instancia. Se puede ver que tenemos esos colores anulados, y esos son de nuestro fuego de color. Se puede seleccionar el color amarillo para cambiar el auto a amarillo o, por ejemplo, azul. OK, entonces ahora vamos a guardar este comando de fuego s y vamos a asegurarnos de que los colores también sean seguros y vayamos a nuestro primer hallazgo. Ahora, si vas a insertar y usamos iconos, podemos usar uno de nuestros iconos que tenemos aquí. Y si ponemos este ícono dentro, ya ves que también tendrá la anulación. Entonces ahora este ícono es de esto. Iconos, notas, prenden fuego. Pero el núcleo que tenemos en las anulaciones puede ser anulado, y es de colores. Eso es atrapar. Por lo que ahora puedes organizar esas bibliotecas, para que tengas por separado iconos, colores ,
logotipos ,
teléfonos, todas las cosas diferentes, y luego puedes vincularlas y fusionarlas. Y lo mejor es que tienes esta estrella ícono como activo separado. Está fuera de los símbolos porque simplemente está vinculado. Entonces ahora todos esos incendios funcionan juntos como biblioteca desde catch, y eso es bastante genial. Y por cierto, si quieres editar alguno de los activos de la biblioteca,
por ejemplo, por ejemplo, este fondo simplemente puedes hacer doble clic en él y luego tienes las opciones del dedo del pie. Abre esto en documentos originales para que modifiques su fuente fuera de la verdad. Y recuerda que cuando lo guardes, cambiará a través de todos sus archivos. Pero también puedes convertirlo en una instancia separada y simplemente desvinculada de la biblioteca. Si lo haces, en lugar de pasar por este incendio, lo
tendrás dentro de esto. Verifica que estás en los símbolos, por lo que ahora es un símbolo. Ahora puedo volver a esta instancia ya ves que ya no tengo este icono de enlace, y puedo comer en él esto directamente en este archivo en particular para que no cambie en la fuente de la verdad ni en los otros cinco que usa esa fuente de verdad. Entonces hay una cosa más que me gustaría mostrar en los lanzamientos más recientes de Sketch, puedes usar techstars en las bibliotecas. Significa que si creas un marco de texto y luego quieres guardar esos ajustes en el texto es que puedes crear uno. Ahora sigamos adelante y creemos nuevo textil. Ahora vamos a darle el nombre offs estilo uno. Y ahora quiero sumar esto hasta ahora como biblioteca. Entonces vamos al menú de archivos y tienes biblioteca de artista. Y después de haber guardado el archivo, tienes una información de que este documento ahora es una biblioteca. Entonces sigamos adelante y creemos un nuevo documento. Ahora, en esta nueva final, presti y
creemos un marco. Y si duplicas las preferencias, tienes conectada esta biblioteca de pruebas. Por lo que ahora puedes seleccionar el marco y puedes usar estilos de bibliotecas de prueba y aplicados a cualquier marco de
texto. Esto es realmente genial. Y si quieres que Teoh actualice este estilo, solo
podrías cambiar las propiedades y tienes unos pequeños trucos de culo aquí. Entonces lo que básicamente puedes hacer es que puedas en link al actualizar este texto fuera
solo para este documento , y si quieres actualizarlo en la biblioteca. Tendrás que ir a la biblioteca, por lo que tienes que abrir este tiempo de texto en la biblioteca. Ahora puedes aplicar algunos cambios, y después, si vuelves a este archivo, podrás actualizar este estilo en consecuencia. Ahora, si vuelves al archivo de la biblioteca de pruebas y creas cualquier forma y, por ejemplo, usas algo de sensación así como algún borde específico, también
puedes guardar los estilos de capa como el texto I. Así que vamos a crear y usar estilo posterior, y esto es esto podría ser un estilo ovalado. OK, ahora vamos a guardar este archivo y vamos a ir a este este nuevo archivo y vamos a crear un rectángulo tal vez, y podemos aplicar estos estilos a partir de nuestras pruebas elaboradas archivo. Entonces esto es realmente genial. Y de esta forma podrás intercambiar información entre tus bibliotecas y por favor ten en cuenta que también puedes subir esas bibliotecas a esta nube de captura. O simplemente puedes mantenerlos en libros de drogas, y luego cada miembro de tu equipo puede contribuir a este archivo. Puedes crear una guía de estilo en la que tengas diferentes estilos de texto así como
estilos de capa que puedes vincular a los documentos que están ante la misma empresa o clientes, y luego puedes usar todos esos ajustes para mantenerte consistente. Entonces todo esto se trata de la esperanza de la biblioteca. Los comprobarás y te lo preguntarás en la siguiente lección.
20. Trabajar en 1x escala: hola y bienvenidos a la siguiente lección. A lo largo de este curso, te
voy a mostrar cómo crear un diseño completo y hermoso, muchas veces aplicación dentro del sketch para que te voy a mostrar paso proceso que
tienes que seguir para lograr, acertado te Yo proyecto. Por lo que ahora está enfocado en el pupilo. Cómo y por qué. Entonces lo básico de crear nuevos incendios y configurar tu proyecto en boceto Una de tus primeras decisiones sería el tamaño del artículo. Y a menos que estés apuntando a un dispositivo específico, por ejemplo, y al iPhone ocho, que es muy raramente el caso, te
recomiendo usar s llamado enfoque agnóstico de dispositivos. Entonces básicamente, vamos a usar arte sobre tamaño para un diseño móvil que va a jugar fuera y un diseño de tableta, y vamos a intentar que este audible se genere lo más posible. Por lo que no pensamos en ello como un iPod necesariamente. Pero sí la resolución, que es más común para la mayoría de las tabletas. Y luego tratamos de mantener organizados nuestros activos de boceto, y usamos símbolos así como las opciones de cambio de tamaño que te mostraría que nos permitirán
hacer los pequeños ajustes entre las resoluciones. Entonces Si tienes una resolución de 7 68 para una tableta, puedes ajustar fácilmente a 1024 píxeles, por ejemplo. Pero aún así tienes diferentes dispositivos como artículos diferentes. Y, nena, las
mantienes organizadas en diferentes páginas en boceto también, que tengas un diseño móvil, luego escritorio y tablet por separado y tal vez incluso un layout de lavado. Y eso es porque son diferentes ratios y que hay que tener en cuenta. Entonces vamos a seleccionar. Algunas se duplican y puedes elegir entre dispositivos IOS, por ejemplo, y selector iPhone siete audible para empezar. Entonces ahora tenemos la posición y tamaño y vamos a restablecer la posición para que tenga cero coordenadas x e
y . Y esto es solo para limpiar el proyecto y pongámoslo en el centro y que a partir de ahora , tratemos este arte del iPhone a bordo como una vista móvil agnóstico de dispositivos, y vamos a crear un diseño móvil. Y por cierto, si tienes el dispositivo que tiene un cierto tamaño, por ejemplo, iPhone o algún dispositivo Samsung solo puedes ajustar el peso y la altura de tu dispositivo para que puedas previsualizar el diseño que eres creando en boceto, y te lo mostraré más adelante. Entonces ahora centrémonos en la resolución. Tenemos el ancho y la altura fuera 3 75 por 667 Bueno, en realidad, significa que estamos creando un proyecto en una escala X. Entonces, ¿qué significa que lo estamos creando en un Xscape? Echemos un vistazo al sitio web de Metrics del dispositivo de nuevo, y bajemos a ver el iPhone, y tenemos la resolución del iPhone seis y la resolución nativa es en realidad 7 50 por 13 34. Entonces tal vez te estés preguntando, ¿de
dónde viene la diferencia? Y viene de la pantalla retina, que escala el contenido para que sea perfecto para el usuario. obstante, Noobstante,no es necesario dividir este valor en píxeles nativos por el factor de escala de densidad. Entonces tenemos el factor de escala off a, y tienes que dividir 7 50 por dos para obtener gratis 75 tienes que dividir 13 34 por dos y
obtienes 667 y así es como obtienes la única escala X, que es diferente por defecto para sketch y cuál es mejor para tu proyecto. Entonces, ¿por qué es mejor para tu proyecto? ¿ Cuál es mejor para tu proyecto? Porque diseñas quieres uno o dos usuarios ve y el usuario ve esta resolución x. Por lo que hay que tener en cuenta que para cada uno picos de eso que creas, puede
haber incluso cuatro píxeles en la resolución nativa fuera del dispositivo. Pero realmente no importa porque están escalados por dos. Y para que el usuario vea esta escala de una x. Y si le echas un vistazo a algunos otros dispositivos, por ejemplo, tienes este iPhone six plus y tienes edad completa la pantalla retina. Pero el factor de escala es gratis para que obtienes por 14 por 7 36 para este iPhone. Entonces vamos a empezar con el iPhone seis o siete en nuestra pizarra, que es lo mismo. Y vamos a revisar dos veces estas opciones de exportación. 40 se aburren. Voy a poner el color de fondo a un cuello azul. Ahora vamos a seleccionar el tablero de arte, así que voy a arrojar en su nombre, y voy a dar clic en hacer opciones exportables en la parte inferior para ver los tamaños de escala. Entonces si seleccionas el preajuste de Iowa, tienes una x dos X y X. libre Y si comienzas con una x, que es el tamaño correcto ahora vamos a tener este activo escalado en consecuencia y vamos a tener escalas perfectas. No obstante, si vas a empezar con resolución nativa fuera del iPhone, así que vas a empezar con la escala de dos X. Tienes que cambiar la configuración de exportación para que coincidan con la escala. Entonces vas a ir por 0.5 por la escala uno, y luego vas a tener uno por dos. Y si quieres ir de dos a gratis, tienes que contar 1.5 y es un poco más complicado, supongo. Y también tengo una razón más para que este caso fiscal no sea perfecto. E imaginemos que tenemos esta escala de dos x y después necesitamos tener un uno X activos también. Entonces a partir de esta escala, necesitamos a Teoh. Divida los valores del trigo y escóndete por dos. Y bueno, si esos valores no pueden dividirse en cuatro picks nosotros, por ejemplo, si tienes uno a una semana de esto fuera de este rectángulo y quieres exportar dedo uno X, vas a tener 55 entonces obviamente tienes esto borde borroso en el en el borde fuera del píxel. Y esto se va de vuelta a esta lección con cerdos De acuerdo cuando les mostré que si no
tenemos células de pico llenas como altura de puerta, obtenemos bordes borrosos. Entonces esa es otra razón para no diseñar en remolque XK, sino apegarse a la única escala X. Pero también éste. escala X es el tamaño más pequeño de tu documento, por lo que significa que estamos exportando mapas de beat. Tienes que tener en cuenta que esos mapas de beat incluso serán quizás dos gratis o cuatro veces más grandes. Y mientras uses horarios nativos para diseñar elementos gráficos como rectángulos, monos y usar texto, estás completamente a salvo. Y eso se debe a que esos son vectores viejos y pueden asustar hasta 100 veces. Y el gráfico seguirá siendo perfecto. Además, si usa vectores, por ejemplo, de illustrator y los importa para bosquejar, está a salvo porque los vectores patinan sin problemas. No importa qué. No obstante, tener en cuenta que si tienes mala calidad, bate trapeadores dentro de un boceto de fuego e intentas exportarlo de tamaño uno x dos, por ejemplo, cuatro X cuatro huevos gratis. Esas mopas de beat pueden ponerse borrosas y remolcarse. Evitar esta degradación de calidad en bocetos. Tan solo tienes que asegurarte de que los mapas de beat que importas al boceto sean al menos tres veces más grandes en ejercicio nativo que el tamaño que tienes en tu diseño. Y de esa manera estás a salvo, y el boceto es lo suficientemente inteligente como para mantener esta resolución nativa. Y recuerda esta resolución nativa, aunque hagas esta imagen más pequeña en tu interfaz. Entonces echemos un vistazo a este ejemplo práctico. Vamos a tener una foto, y voy a revisar la resolución de la foto I Comando de Prensa. Termino. En esta foto hay un 3.5 1000 pixeles, por lo que es bastante buena calidad. Cuando lo arrastre al boceto, verá que la calidad es ahora 17 48. ¿ Por qué? ¿ Por qué sucedió eso? Bueno, sucede porque boceto ya comprimió esta imagen para estar a la mitad de la cuenta del dedo del pie a una retina, este lugar por lo que ahora tienes el tamaño de la imagen que se verá muy bien tanto en estándar este lugar como así como pantallas de alta resolución. Y siempre puedes tomar esa bolsa yendo imagen de capa del dedo del pie y seleccionando conjuntos del dedo del pie
tamaño original . Entonces ahora esta capa vuelve a estar libre y 1/2 K Pero lo que es lo más interesante en boceto es que recuerda el valor que tienes como resolución nativa. Entonces si incluso haces la imagen mucho más pequeña,
por ejemplo, por ejemplo, 100 píxeles de ancho y la gente, por ejemplo, escala 15 X antes de exportar, lo
que significa que es 1500 imagen más grande y destruiría cada golpeado, por lo que has pixelado. Pero al exportar este archivo, vamos a darle el nombre fuera de prueba y vamos a esta carpeta de exportación. Tienes una imagen que es 1500 por 9 45 Así que el tamaño correcto. ¿ Y viste esta foto? El cualidad del mismo es perfecto, y eso se debe a que sketch tiene esta resolución desnuda debajo de este archivo. Y hasta que hayas exportado cinco que es más grande que esta resolución nativa Off free y 1/2 K vas a tener perfecta calidad fuera de la imagen, y ahora sabes todo sobre patinaje y también sabes que la mejor K para empezar su uno X, pero también hay que tomar en consideración el uso de imágenes
golpeadas de alta calidad para que puedan escalar sin problemas mientras exportan a diferentes
factores de escala . Y eso es todo por ahora. Te veo en la próxima película.
21. Disposición de cuadrícula: Por lo que ahora sabemos enfoque agnóstico de dispositivos. También conocemos los factores de escala así como eso. Tenemos que apegarnos a esta escala X en nuestro proyecto. Y otra cosa es, si estás creando un diseño Web, siempre
debes empezar con el móvil de ti que hacer una vista de tableta y después, una vista de escritorio. Por lo que este enfoque se llama Mobile primero, y te recomiendo encarecidamente que lo respetes. En nuestro caso, estamos trabajando en nativo up para un dispositivo móvil, y ahora me gustaría mostrarles opciones de configuración de saludo y también opciones de configuración de diseño que son accesibles desde el menú de vista. Entonces, primero accedamos a la configuración de la codicia y puedes elegir el gran tamaño de bloque. Y también puedes tener las líneas gruesas cada, por ejemplo, 10 bloques, que es por defecto. Por lo que el tamaño de bloque para desengrasado suelo establecer en ocho píxeles. Estas líneas gruesas usualmente por defecto en mi proyecto a 12. Entonces voy a poner 12 aquí y ocho grandes tan grandes es en realidad bastante agradable. Si conoces pautas de diseño de materiales, a menudo
tienes estos ocho incrementos pacíficos, así que vamos a seguir con eso y para algún proyecto. Puedes tener esta declinación,
por ejemplo, por ejemplo, fijada en 100 bloques o 1000 bloques para hacerlos invisibles en tu pactado. Entonces A veces es sólo la codicia con la que queremos trabajar, y no necesitas que este descensos aparezca a continuación. Tenemos el color de nuestro grande, y tenemos dos temas, y el tema oscuro aparecerá en interfaces más claras y luz. El tema aparecerá en interfaces más oscuras, y siempre se puede cambiar el color del griego en consecuencia. Por lo que tienen los colores y también pueden hacer que esta configuración de saludo sea predeterminada. Voy a poner esto por defecto, y si quieres justificar tus elecciones sobre la codicia, te animo a leer el artículo, y tengo el enlace en los archivos fuente para ti. Y este artículo trata sobre la codicia, y explica por qué. En realidad, coincidieron
los ocho puntos. Se acordaron las ocho semanas. Es agradable tanto para mantener su diseño organizado como para mantener los estándares,
por ejemplo, para las pautas de diseño de materiales y demasiado las resoluciones de pantalla y los ajustes de especificaciones . Por ejemplo, uno de los lindos descubrimientos aquí es sobre las resoluciones de pantalla más utilizadas que se tienen en esta tabla que se pueden dividir por ocho, lo
cual es bueno y habla pactado. Entonces si tienes tiempo, solo echa un vistazo a este artículo, tu ing final en los archivos fuente. Y ahora estamos volviendo a los grandes escenarios. Yo enérgico, bien, y una cosa más grandiosa de trabajar con desengrasados como este es que si intentas crear cualquier forma, se romperá a la codicia. Por lo que es fácil crear una forma que se alinea perfectamente a desengrasada. Y también, como puedes ver, arrastrar esta forma es fácil dedo del pie. Alinearlo con la codicia. Pero si tratamos de igualarlo, así que si intentas usar shift y las flechas en el teclado,
el rectángulo se mueve en incrementos de 10 píxeles en lugar de los incrementos de ocho píxeles. Y eso es una lástima para nuestro gran. Por suerte, podemos arreglarlo, y podemos ir a ah mutch it enlace del sitio web. Encontrarás en peleas de fuente también, y podemos instalar esta pequeña aplicación gratuita que te permitirá cambiar los
valores nocturnos para sketch, y voy a hacer doble click en esto y luego tienes este pequeño Nagy, que básicamente es solo una flecha en el teclado. Y por defecto, es un pick. Entonces y lo pondremos en un píxel también. Pero puedes cambiarlo, y luego tienes esta muesca grande, que es shift plus arrow, y vamos a ponerlo en ocho píxeles. Entonces voy a poner el dedo del valor. El valor exacto S s nuestro saludo. Y ahora no podemos con los ocho incrementos de picos. Entonces todo lo que hacemos en bocetos perfectamente alineado con un píxel grande y esto es lo que usted llama un Santo Grial en la industria de la codicia. Ahora tenemos esto perfectamente configurado y pasemos de la codicia a un layout. Entonces vamos a ver y puedo habilitar el diseño configurando esta opción show layout. También puedo ir a la configuración de diseño. Y antes de hacer eso, cambiemos un poco la vista para que pueda mover el arte a bordo con barra espaciadora hacia lado para que puedas ver este diseño correctamente. Y voy a ir a la configuración de maquetación, y como ves, puedes poner peines y rosas para un layout. Entonces eso es básicamente algo más que la codicia. Voy a apagar la codicia presionando el control G para que puedas ver mejor el diseño. Y volvamos a esta capa de las opciones por como,
como, como, vista y diseño estático. Entonces como puedes ver, podemos establecer columnas así como rosa en nuestro diseño, y el primer valor que tenemos aquí es el total con off the layout. Para que como puedes ver, podemos tener lo diferente con off the layout, luego el tamaño fuera de nuestro barco. Pero por lo general te pegarás al tamaño del tablero de arte, por lo que tienes 3 75 píxeles en términos de la con fuera de nuestra lectura así como la capa. Y el siguiente ajuste que tenemos aquí es el ajuste de desplazamiento, lo que podemos compensar el diseño
por, por ejemplo, 20 píxeles, y siempre lo desplaza desde el borde izquierdo. No obstante, si quieres que este oficial se distribuya uniformemente entre el borde izquierdo y derecho, solo
tienes que hacer clic en el botón central a la derecha de la entrada de desplazamiento. Vamos a restablecer que 20 grandes vende. Siguiente. Tienes número fuera de columnas así Normalmente se pegará con cuatro columnas en Móvil, ocho columnas para tablet y 12 columnas para escritorio. El siguiente es el siguiente ajuste es Trigo de canaleta, y el cortador es básicamente el marcado entre tu columna para que puedas ajustarlo a 16 y
normalmente lo pongo a 16 o 24. Y eso determina la columna. Espera. Entonces si tienes 16 que la columna, que será 82 porque el total con off los ajustes de despido oriente 3 75 on. Si decide cambiar alguno de estos valores,
los demás valores cambiarán en consecuencia. Entonces si decides que la columna debe ser, por ejemplo, yo no tal vez 65. Voy a poner 65 aquí, y la canaleta con ahora está ajustada para que alimente a la hija con fuera del diseño. Básicamente, el valor 3 75 no puede dividirse por cuatro. Entonces por eso vas a tener este pequeño cambio en píxeles de cualquier manera. Entonces vamos por defecto toe 24 nos recoge. Creo que el 24 es gran canaleta y a veces tienes 16 también. También podemos configurar el encuentro para que esté afuera, y ahora vamos sólo a 24 otra vez. Y por cierto, esos valores del trigo de canaleta no son casuales también, porque trato de mantenerlos como multiplicador fuera de ocho. Entonces tengo las ocho semanas pactadas, y por eso guardo el dedo del canalón 8 16 24 o,
por ejemplo, 32 para la configuración de maquetación. Demasiado los ajustes de avaricia lo más cerca posible. Desafortunadamente, como un peso total apagado 3 75 no siendo Divide Herbal por ocho o cuatro siempre tendrás esta columna con eso está ligeramente desplazada de tu codicia. Y es probablemente por eso que tiendo a no usar la configuración de diseño y no usar el diseño en absoluto en diseños
móviles mientras que en diseños de tabletas así como de escritorio. Esta configuración de diseño es muy valiosa porque tienes mucho más espacio y es más fácil dedo del pie . Organiza este espacio, teniendo las ocho semanas de genial así como las estáticas de disposición. Como puedes ver, también
puedes determinar el número off rose así como reunir entre rosa y vas a seleccionar la vista de avaricia o contorno para tu diseño. Podrás conocer algunos cambios de colores así como hacer que esta configuración sea predeterminada, y por favor recuerda también los atajos de teclado. Tienes que seleccionar el arte a bordo. Después presiona el control l para el diseño y el control G para el saludo. Entonces eso es todo por ahora. Los veo en la siguiente lección.
22. Drafts y maquetas: Es agradable verte en la siguiente lección. En lecciones anteriores, has aprendido sobre boceto, herramientas
básicas, operaciones, símbolos
comunes y quiero hacer para familiarizarme con un boceto. Y ahora podemos pasar a la siguiente parte de nuestro curso, que será proyecto práctico fuera de una aplicación. Entonces lo vamos a diseñar hasta dentro de boceto. Y así te voy a mostrar un trabajo real,
sin embargo, sin embargo, y algunos incluso más en funciones rápidas. Normalmente empiezo con unos marcos de alambre y más policías, y me encanta usar bolígrafo y papel porque solo te da este tipo de libertad, y no necesariamente necesitas dibujar a Teoh bellamente. Solo hay que sacar algunos componentes aquí en solo enfocarse en el flujo del usuario. Entonces imagina alguna acción que el usuario necesita realizar en tu aplicación y luego intenta recrear esta acción para que utilices la cantidad mínima fuera de pantallas y la cantidad mínima fuera de cumplidos. Por ejemplo, si el usuario quiere cambiar la temperatura en el salón, puede dibujar tal pantalla o pantallas que le permitirían realizar esta acción. Y esto donde se crea un flujo, por lo que no necesariamente. Tengo que apuntar pantallas más antiguas de sus aplicaciones y luego las condujo. Piensas en el flujo, por lo que piensas en las acciones particulares que el usuario necesita realizar en tus aplicaciones, y luego tienes algunos bocetos y no lo harás. Teoh exporta esos bocetos a forma digital para que puedas escanearlos. Puedes hacer una foto y enviarla a tu correo electrónico, o puedes usar un dispositivo como el mío. Es chispa de bambú, y te permite conectarte a la aplicación y sincronizar esos bocetos con un solo
pensar en dentro con tu aplicación. Y ahora lo podemos enviar como PDF o en algunos otros 54 meses. Y lo bonito de Bumble Spark es que en realidad también puedes tener esos bocetos en Vector, pero no necesitas tanto, así que eso es solo una opción. Siguiente aplicación Quiero mostrarte es alguna vez ser comp. Puedes usar tu iPod o un iPhone para dibujar formas y crear algunos básicos más polis y prototipos dentro de la aplicación. Entonces si no quieres usar bolígrafo y papel, puedes usar esta aplicación para hacer bocetos, y hay bastantes aplicaciones por ahí que pueden crear formas simples simplemente dibujando. Y puedes posicionar este cambio de forma con el tamaño establecido, y es bastante bonito, tal vez nota en el teléfono, pero en la tableta, es bastante bonito, generalmente en la reunión. Por ejemplo, con tu cliente, puedes discutir algunas opciones. Puede utilizar esta estufa de gestos simple, por ejemplo, dibujar un campo de texto y cambiar el tamaño de la vista de texto. Como puedes ver, es bastante fácil. También puedes tener un estilista para tu iPod, por ejemplo, para realizar estas operaciones. Como puedes ver, también
puedes eliminar las cosas fácilmente. Y lo bonito de esta aplicación convertido es que puedes enviar fácilmente esos prototipos a, por ejemplo, ilustrador o para la tienda. No tienes la opción de enviar a boceto, aunque, pero puedes enviar a ilustrador y desde ilustrador solo viene y busca en TV para
bosquejar , y funciona bellamente y tendrás vectores como tu prototipo. Por lo que hemos aprendido sobre el enfoque de lápiz y papel, también las aplicaciones móviles, y por último, también se pueden
crear prototipos y credo esos marcos de alambre fuego con aplicaciones Web
como la visión o, por ejemplo, usted explica. Entonces no te voy a enseñar a usar todos esos abdominales, pero te voy a mostrar cómo crear proyecto simple y de qué se trata este enfoque. Entonces lo que puedes hacer es registrarte para un intento de siete días. ALOF te explico y solo úsalo libremente para esta vez. Y puedes hacer prototipos con diseños que ya has hecho con un boceto para la tienda. O tienes este Jay Peak cinco del que has importado. Por ejemplo, esto se convierte en aplicación y se pueden instalar los vagones también. Pero eso no es del todo después de que nosotros después de crear un diseño desde cero. Entonces vamos a diseñar con esto, Tú explicas, editor, y vamos a empezar con una pieza en blanco fuera de la interfaz. Tan pedazo de conversar. Y vamos a configurar esta conversa para que sea del tamaño del iPhone seis. Y ahora puedes usar los atajos con los que estás familiarizado. Por ejemplo, barra
espaciadora para cambiar la posición fuera de la vista. Y luego puedes, por ejemplo, usar este fondo predefinido o casillas de verificación, círculos, puntos
calientes, iconos para prototipos, un comportamiento sencillo en tu diseño, tú puede incluso elegir una foto Teoh ser subido en tu experiencia y nuevamente selecciona la carpeta de tu disco duro. Y ahí lo tienes, por lo que siempre podemos usar algunos cumplidos que ya has creado para tu diseño. Y esas son las mejores cosas para descubrir cualquier nuevo Experian. O imagina que tienes esas bibliotecas listas hechas de componentes y, por ejemplo, puedes buscar suficiente barra de Iowa s Iraqi. Entonces puedes seleccionar suficiente barra solo arrástrala y soltarla en tu lienzo seleccionado y solo patinada para marchar del tamaño de tu barco de arte y luego tú Ahí lo tienes para que
realmente no necesitas preocuparte mucho por estilizar sobre los colores tipográficos porque eres haciendo esta baja sensación aún más copia están haciendo este sencillo marco de alambre que todo se trata de funcionalidad, no del diseño. Por lo que no te importa la codicia. Esas cosas no necesariamente tienen que estar debidamente alineadas. Por ahora, tu principal preocupación es el usuario y las acciones que él o ella realiza en tu aplicación. Así que trataste de configurar los componentes para que esos componentes lo ayuden o le ayuden a dedo del pie realidad a lograr esas tareas en la madre más fácil de usar y la más rápida. Entonces puedes tener el texto, puedes tener algunos iconos. Y de nuevo, no
nos vamos a centrar en las próximas propiedades aquí, que va a poner la copia correcta y vamos a dejar Arial 14 o 16 nos recoge. Pero lo que vamos a, uh, buscar es el espaciado correcto y los elementos correctos, así
como cumplidos que permitirán a los usuarios ver lo que es lo más importante en esta pantalla. Por ejemplo, esta es la pantalla de bloqueo de nuestro hogar, y quiero mostrar alguna información sobre los sistemas en casa. Entonces ahora podemos distribuir esos elementos que podemos ver que es un bien organizado. Todas las informaciones necesarias están en el frente, y aquí no tenemos ningún trago. No tenemos información innecesaria. Por ejemplo, la información sobre la dirección fuera de nuestra propiedad no es necesaria aquí porque tenemos la foto del hogar. Por lo que el usuario intuitivamente sabe que está editando esta misma propiedad. Es así como se crean marcos de alambre simples usando papel banderín usando aplicaciones móviles así como aplicaciones
web como se explica o se previó, pero también se puede ser un montón más herramientas de prototipado como real, que es bastante popular, simulacro de burla plus y muchos, muchos otros. Por lo que el principal objetivo a tener en cuenta es que crees Notre diseñado en este momento para que no te enfoques en el estilo sino en la función fuera de tu aplicación. Y el mejor enfoque que conozco es enfocarme en esas tareas que el usuario tiene que cumplir. Y luego, si sabes que tiene que hacer cierta tarea, intentas crear unas pantallas que le permitan hacerlo lo más rápido posible y en madre
amigable de usuario . Entonces eso es todo por ahora, veo el siguiente video.
23. Elección de colores: bienvenidos en el siguiente paso de nuestro viaje. Entonces vamos a crear un layout en horario. Pero primero necesitamos algo de inspiración. Imaginemos que has creado todos los amigos de alambre para nuestra aplicación y también que tienes todas las ideas sobre lo que va a lograr el usuario usando tus pantallas particulares en el up. Ahora nos vamos a centrar en el estilo. Entonces por estilismo, me refiero a partir de nuestros componentes así como colores así como tipografía y esas cosas que buscas en los sitios Web como dribble. Entonces el primer sitio web que te voy a mostrar es dribble y básicamente aquí Puedes encontrar muchos componentes y partes
simples del diseño que te pueden llevar a algún tipo de ideas fuera de cómo te gustaría que luzcan tus componentes. Y por supuesto, no
lo es. No es robar. No es hacer frente al 1, pero sólo es buscar una inspiración. Por ejemplo, si dijiste para un perfil de usuario, puedes buscar un diseño diferente fuera del perfil de usuario y decidir si esta o aquella solución podría funcionar bien en tu proyecto, y después puedes ajustarla para que ponga a la perfección las necesidades del proyecto. En realidad, en este punto buena idea también es crear una cuenta de Pinterest y tener un tablero para cada proyecto donde te peen toda la inspiración en ti serán todas las imágenes. Entonces puedes volver y ver toda la inspiración para ese proyecto. Es mucho mejor que Teoh sea capaz de comparar todas esas ideas y después esto decido
cuál en realidad funcionará mejor. Por lo que Pinterest es un gran lugar para gestionar tus ideas. Y además te recomiendo que vayas a Adobe Be house que es un gran recurso fuera de fantásticos proyectos de clase de
palabras. Por lo que te recomiendo establecer
para, por ejemplo, tú yo proyectos o algunas ilustraciones aquí lo cual es absolutamente impresionante. Y la siguiente página web que me gustaría mostrarles es awards dot com. Este sitio web es en realidad uno de mis favoritos en términos de inspiración de diseño web porque puedes encontrar mucho fuera realmente crear sitios web de calidad por ahí, y también puedes buscar un color en particular o para un tipo particular de sitios web. Entonces es realmente genial ver esos sitios web que tienes en el mundo que vienen el siguiente sitio web es patrones y patrones es Ah, es un lugar donde puedes encontrar capturas de pantalla de aplicaciones ya hechas, por ejemplo, desde arriba tienda o desde Google play. Y si buscas, por
ejemplo, un diseño fuera de Airbnb o uber, puedes ir por patrones y puedes configurarlo. De acuerdo, vas a tener que instalar la aplicación. De acuerdo, entonces así es como buscas inspiraciones. O al menos así es como dije por inspiración. Y esos son los equipos que te puedo dar. Y recuerda sobre esta cuenta de Pinterest y el tablero para cada proyecto. De verdad va a ayudar. Entonces ahora vamos a la inspiración del color, y tengo algunos sitios web para ti, así que el 1er 1 es color dot adobe dot com, y la idea principal aquí es usar bien este color. Eso está en el centro, y seleccionas cualquier regla de cola que te guste, por ejemplo, monocromática o probar o complementaria. Y ahora, si tienes, por ejemplo,
probar para que haya un triángulo dentro de este círculo, puedes tomar un color y hacer coincidir los otros colores en consecuencia. La buena noticia es que, si seleccionas alguna de la regla de color. Es realmente difícil estropear los colores porque siempre coinciden entre sí. Entonces eso es genial, también, para principiantes y también para personas que por alguna razón tienen algunos problemas con la selección de autos para el proyecto. Por lo que también puedes seleccionar este pequeño ícono, también. Sube una imagen y selecciona un tema de color fuera de la imagen que te guste y los que pueden ir a un menú superior. Y ahí tienes explorar sección. Si vas a explorar sección, puedes explorar las opciones de otras personas en cuanto a colores, y también puedes navegar por esas opciones y veamos las más populares. Y ahí vamos, para que puedas seleccionar esos colores. Se puede copiar estas aguas. Podrás guardar esta agua para que puedas agregarla. Esos colores y copia hay que haber uso var o los valores hex off colores en consecuencia. Entonces así funciona. Y uno más hasta que lo recomiendo, es colores que co. Y todavía hay realmente genial para, especialmente para aquellos de ustedes que tienen alguna experiencia en teoría del color y también saben
elegir colores. Ahora puedes presionar la barra espaciadora para cambiar los colores en cada uno de ahí fuera. Cinco barras que tienes aquí. Entonces yo presidentes paga barra hasta darme cuenta de que uno del curso es, por ejemplo, bueno para mi proyecto. Por lo que ahora vuelvo sobre este color. Puedo ajustarlo un poco, por ejemplo, hacerla más oscura. Y ahora, si te gusta el color, puedes seleccionar el icono de candado para que este color esté bloqueado y los demás colores cambien consecuencia Al presionar la barra espaciadora. Por lo que presiono barra espacial Tía, veo colores que me gustan. Entonces me veo de otro color. Por ejemplo, Para este color azul, voy a la opción top, que es tonos alternativos, y voy a crear un color un poco más claro. De acuerdo, vamos a verlo. Y para este, voy a volver a los tonos y dejarme Es como un color más oscuro. Entonces sí, ahí lo tenemos. Ahora veamos este para que nos quede uno más. Y por cierto, esto no es una coincidencia que haya cinco colores y lo explicó más adelante. Ahora, cuando tengamos el palet, podemos ir a la opción más alta fuera de exportación. Se puede exportar este Pollitt en diferentes cuatro meses, por ejemplo, podemos ir con el fuego SPG. Y si seleccionamos el archivo SPG, puedo descargar el archivo. Y ahí tienes el Pollitz le dijo a SPG en sketch vamos a páginas y voy a organizar un poco
nuestro proyecto para que tenga todos los componentes para la guía de estilo fuera de nuestra aplicación en un solo lugar. Por lo que creo una nueva página, le doy el nombre de los componentes. Voy a apagar el diseño, y ahora solo puedo arrastrar y soltar al piloto. El SPG y agradable pensar en esto es cuando se accede a este grupo. Tienes rectángulos más antiguos y puedes seleccionar los rectángulos ahora mismo y puedes ir a unos cuantos. Y ahora tienes este color. que puedas fácilmente, por ejemplo, copiarlos a muestras, que te vi más tarde. Pero por ahora, si quieres crear tu propia guía de estilo, voy a crear un rectángulo y dar un tamaño apagado. 1 28 por 1 28 me deshice de todos los rectángulos que tenía y si él quiere poner en un valor
diferente para siento que puedes usar, por
ejemplo, ejemplo, sitios web como colores grasos y Caro y colores de diseño de materiales. Entonces el 1er 1 es 30 usar colores que vienen, y aquí tienes esos lindos colores planos que puedes copiar con solo hacer click en el color que te gusta. lo que solo puedes hacer clic en las nubes, por ejemplo, Y ahí tienes el valor decimal Hexi fuera de esta copia de color, y cuando vuelvas a bosquejar, puedes acceder a la propiedad de campo y luego tienes en este hex valor. En realidad, está seleccionado, así que sólo es un asunto fuera del comando V pegarlo, y ahí lo tienes. El segundo sitio web es material powers dot com, donde se pueden seleccionar dos colores. Y eso es bastante bonito, porque si seleccionas dos colores, por ejemplo, azul y amarillo, genera el paladar fuera de ocho colores, y tienes un color primario y de acento también. Esos son los colores que has elegido, pero los otros colores, por ejemplo, impuesto
primario y texto secundario e iconos y cosas también están aquí. Por lo que en base a esos dos colores, tienes un paladar fuera de ocho curso, lo cual es bastante bonito y Puedes descargar los valores de este color como sus relojes, y también puedes seleccionar esos colores para copiar sus valores decimales Hexi. También hay un consejo más que tengo. Si utilizas, por ejemplo, este piloto listo hecho, Vamos a ajustar, decide fuera de los rectángulos. Entonces voy a seleccionar todos los rectángulos. Voy a deshacerme del texto. Y ahora los matemos a todos juntos en boceto y tengamos esos rectángulos uno al lado otro. Entonces los voy a poner uno al lado del otro y allá. Me gustaría mostrarles cómo crear sus propios pilotos, usando métodos simples off, creando un rectángulo que está encima de los otros cinco. Ahora dividamos la altura por libre. Pongamos a este tipo en la parte inferior de nuestras formas y cambiemos el color a ah color blanco o un color negro si lo quieres más oscuro, así que voy a cambiar demasiado ancho. Pero voy a disminuir la capacidad presionando cuatro en el teclado, y ahora tengo 40% de capacidad. Voy a duplicar este, y voy a disminuir la opacidad en el 2do 1 a 20% impresionando a en el teclado . Y ahí tienes diferentes tonalidades fuera del mismo color fuera de este hex del pequeño valor. De acuerdo, entonces tienes escritor y el más ligero. Y como puedes ver, puedes generar diferentes tonos y diferentes pilotos, diferentes partes para tu proyecto. Una cosa más que podemos hacer es crear otro rectángulo y dividamos el trigo por libre ahora mismo. Entonces en lugar de generar diferentes tonos, vamos a generar diferentes tonalidades. Entonces vamos a usar un color por ejemplo, un amarillo brillante, y vamos a empezar como este color amarillo, y vamos a cambiar la opacidad a 20. Y también podemos acceder a esos modos de fusión. Y si seleccionamos sobre el modo de flexión de luz, como puedes ver esas capas se mezcla entre sí y ahora tienes un poco de
colores diferentes . Subiremos con la opacidad. Y como puedes ver, ahora
tienes 40 rapacidad, y estás generando tonalidades fuera de los colores. Pero también estás cambiando un poco de tonalidad. Eso se debe a que tienes este modo de mezcla, y además dijiste que el campo sea un acorde diferente al blanco o negro, por lo que podemos experimentar con esos colores así y generar mucho fuera de palets y las diferentes variantes fuera de la autos que creas para tu estilo. Guía y también te recomiendo encarecidamente echar un vistazo a los sitios web como se muestra en esta lección. Pero ahora mismo vamos a crear una guía de estilo para los colores desde cero. Para nuestra aplicación, voy a seleccionar un rectángulo que hice. Es de 1 28 por 1 28 y me voy a drogar. Es y después voy a venir en la D un par de veces para que tenga cinco rectángulos. Y eso no es coincidencia que tengamos cinco colores. Eso usualmente uso cinco o menos colores en mi proyecto. El 1er 1 será el color principal de la marca. Guía para el 2do 1 es el color de acento, y lo usarás para algunos elementos de interfaz como botellas. El 3er 1 es para excepto por lo que será especie de verde, los cuatro fondos para el error. Entonces voy a usar una especie de rojo y los pies uno es para texto, y por eso voy a acelerarlo a la mitad porque puedo tener texto claro y texto oscuro, dependiendo del fondo, así que siempre uso dos colores para texto. Voy a tener uno, que es por ahora, negro y 2do 1 que es, por ahora, blanco. ¿ Por qué por ahora? Porque atiendo para evitar esos colores blanco y negro, suelo
ir a una paucidad y decía la opacidad al 80%. Y creo que es mucho mejor que tener completamente ese color o configurarlo, ponerlo en algún color oscuro. Eso es porque cuando pones el texto sobre algún fondo, que es, por ejemplo, azul o amarillo, obtendrás parte de este color amarillo en tu texto. Entonces tienes este 20% de descuento en el color de fondo en texto, y es mucho mejor para marchar esos dos colores y aún así el contraste es aceptable . Por lo que ahí lo tienes. Así es como se crea. Es así como empiezas a crear este color parece para tu aplicación, y vamos a terminar en la siguiente lección. De acuerdo, Antes de terminar esta lección, les voy a mostrar una actualización al panel de color, que está en las versiones más recientes de Sketch. Pero esto es sólo una pequeña actualización y todo lo que está en la lección futura. Su OK pero solo en un diseño ligeramente diferente. Entonces creo que lo resolverás. Pero te voy a mostrar lo que hay de nuevo ahora mismo. Entonces, básicamente, ellos, uh, agregaron este valor hexadecimal aquí, así que esto es bastante bonito. Realmente no tienes demasiado rápido en el color para ingresar este valor hexadecimal, pero sigue ahí. Puedes hacerlo de la manera antigua y también puedes cambiar los valores fuera de los colores. Aquí dentro. Tienes documentos y núcleos globales en este menú desplegable en lugar de las secciones. Pero esto es básicamente lo mismo para los colores de los documentos. Puedes agregar colores ahí, y además, puedes optar y cambiar los nombres de los colores. Y esto es bastante guay porque más adelante, cuando lo estés, descifrar bibliotecas y compartir esos colores con otros. Por ejemplo, con tu equipo, verás que los nombres de los colores realmente tienen sentido. Además, puedes seleccionar y cambiar la posición de los colores, lo cual es bastante ordenado. Puedes cambiar cómo se muestran aquí y también cambiar de posición, y, um, eso es básicamente todo. También puedes seleccionar los colores más utilizados, por lo que los que usas con frecuencia están aquí en este pequeño icono del reloj. Si cambias el resplandor, no
hay mucho nuevo. Pero se puede cambiar el color, el color inicial y final de lo radiante así. Y puedes rotar el int Grady con este pequeño ícono. También desde los INTs Grady, se
puede acceder a la luminosidad global y documentada, lo cual es bastante bonito, y se pueden tener desde aquí. Si vas a las imágenes, también
hay algunos buenos cambios. Por ejemplo, puede seleccionar esas imágenes de uso frecuente. También puedes usar datos de boceto o caras como, por ejemplo, o puedes usar cosas como unspool Esh como un tapón, y te voy a mostrar cómo trabajar con datos y lecciones futuras. Pero solo ten en cuenta que puedes tenerlo ahí dentro. Además, se pueden almacenar imágenes en el repositorio global de imágenes o en las imágenes del documento. Por lo que cada vez que tengas una imagen, puedes agregar esto y ya no tienes que buscar esta imagen en su disco duro. Entonces esto es bastante guay. Además, tienes una imagen es si tú, por ejemplo, en otro campo que tendría sentido puedes acceder a este pequeño icono tanto en
los bordes como después imágenes que te permitirán aplicar algunos modos de fusión. Voy a explicar los modos de fusión en detalle, y esto es agradable porque puedes mezclar y emparejar esas capas y puedes cambiar sus posiciones y aplicar algún modo de fusión para que realmente no tengas que tener múltiples capas. Simplemente puedes operar en los campos, y simplemente puedes mezclarlos juntos o en múltiples colores. Y en cuanto a las fronteras, todo es igual. Cambian ligeramente el diseño de esos iconos, pero esto es simplemente fácil de agarrar. Entonces, básicamente, esa es la actualización de la que quería hablarles y ver en la siguiente lección.
24. Colores y símbolos: ahí estamos en la siguiente lección y entre las lecciones he tratado mi esquema de colores con el error de acento de fondo blanco excepto advertencia y también para acentuar colores y fue importante sobre esta estructura es que tenemos la página de componentes. Pero dentro de esta página de componentes, tenemos cada color como un símbolo separado. Entonces este último, que no es un símbolo sino un grupo voy a convertir a un símbolo Voy a poner crear símbolo y voy a poner barra de color y nombre, habiendo nombrado acento libre. Entonces ahora también es un símbolo. Puedo eliminar este color, y puedo poner los símbolos uno al lado del otro y se puede acceder a ellos en el menú de inserción. Pero también, si cambias algo en esta funesta guía en esta sección de componentes y tienes alguna instancia fuera de estos colores en tu proyecto, se
actualizarán en consecuencia y te mostrarán eso en un segundo. Por ahora, vamos a crear una forma simple por ejemplo, un rectángulo y menos acceder a las opciones de color. Entonces si haces clic en el color, tienes este cuadro de diálogo de color y tienes dos secciones en la parte inferior. Por lo que el 1er 1 es colores globales, y el segundo es los colores del documento. Entonces, como cabría esperar, puedes guardar colores para más adelante. En boceto y documento los colores serán colores accesibles sólo desde este
documento plaga en particular , mientras que los autos globales son los colores a los que se puede acceder desde cualquier documento de boceto. Entonces agreguemos nuestros colores de aplicación a la sección de color del documento y qué voy a hacer. Voy a venir y dar click en el rectángulo para que el combustible ahora sea blanco. Y si arroja en este pequeño icono plus en colores de documento, puedes fácil en los colores a esta sección para que podamos diseccionar todos los colores que he creado así excepto advertencia y también los colores de acento. Y ahora podemos acceder a esos colores desde cualquier cuadro de diálogo de color en boceto. Entonces ahora puedes tener los colores, y si quieres quitar un color, simplemente lo
arrastras fuera del cuadro de diálogo de color y boceto y muy adelante. Este color blanco desapareció ahora. La siguiente herramienta muy importante en términos de manejo del núcleo es este pequeño color Pekar, por lo que puedes seleccionar cualquier forma, y ahora puedes cambiar el color en el que estás con este color Pekar y usar puede seleccionar cualquier color desde dentro de tu proyecto. Pero también, como se puede ver, se
puede seleccionar cualquier polar de la inexistente Y. Y eso no es todo porque me puedes mi boceto. Y si tienes alguna ventana fuera del sketch, por ejemplo, un navegador o cualquier ventana desde la que quieras que te llamen, lo
conseguiste fácil. Hazlo para que puedas seleccionar un selector de color. Ve fuera de la aplicación de boceto y selecciona el color que deseas tener para tu objeto. Entonces así es como usar el selector de color y en realidad, un atajo de teclado muy importante que hay que recordar es un atajo para el
seleccionador de color y esto es control, Ver, Así que si seleccionas la forma y seleccionas el control, ver tienes automáticamente color un selector de color y luego puedes escoger cualquier color para aplicarlo como una sensación. A esta forma, también
puede usar los valores hex, un decimal o valores RGB. Y si haces clic en los valores RGB aquí, puedes ir con los colores H S B también. Esto es casi 81 última cosa que quiero mostrarte en este cuadro de diálogo de color es este cuadro colores de uso
frecuente y en tu proyecto. Si tienes muchos campos y muchos núcleos establecidos en un valor de color, también
aparecerán en este libro de colores de uso frecuente. Entonces, eliminemos estos autos y centrémonos en nuestros símbolos. Entonces ya les dije antes que es bastante inteligente tener esos colores como símbolos separados. Y eso es porque cuando cambias de opinión sobre un color en tu guía de estilo, simplemente
puedes cambiar este color. Y lo que tienes son todas las instancias fuera de este color off. Este color cambiará en consecuencia a lo largo de tu proyecto, o tienes que tener en cuenta, sin embargo, es cuando creas un símbolo, y una forma de hacerlo es simplemente crear un símbolo a partir de rectángulo simple. Y si creas un símbolo que no usas, en realidad usa este color de sensación para establecer los pocos colores en rojo o verde. Pero hay que anidar este segundo símbolo dentro, y una cosa más a agregar es que si estás creando símbolos que tienen símbolos anidados fuera este color, no
basta con sobrellevar e y pegarlo. Tampoco puedes simplemente arrastrar y soltar este color hasta otro símbolo. Entonces si llamas mar común y comanda V e intentas colocarlo como puedes ver, es todavía está fuera de la definición de este rectángulo a símbolo. Entonces en lugar de hacerlo, eso se derrumbó. Todos esos grupos y esos grupos son sólo unas definiciones fuera de un símbolo. Significa que no puedes simplemente arrastrarlos o copiarlos a otro símbolo. Y la mejor manera de tener este color dentro de este rectángulo a símbolo es ir a la
sala del concierto y seleccionar símbolo del grupo de colores. Ahora seleccionas el acento y pones el símbolo dentro del 2do 1 Y ahora, como ves, esta estructura de mensajes está funcionando muy bien. Entonces en lugar de copiar y pegar, solo intenta insertarlo desde este menú de inserción. Y ahora lo que pasa es cuando tienes esos símbolos bien organizados y tienes diferentes símbolos anidados uno dentro del otro, puedes cambiar la sensación original por un color maestro, y cambia en todas las instancias. De acuerdo, así que esto es genial dedo del pie camino. En realidad organice sus colores y para usarlos a lo largo del proyecto Así que ahora vamos a la página uno y cambiemos su nombre a home up. Y vamos a jugar con algunos fondos diferentes aquí y algunas propiedades diferentes de fondo para que puedas ver la diferencia entre símbolos y entre usar, por ejemplo, sensaciones
simples. Entonces vamos a seleccionar primero este artículo, y lo que puedes hacer es realizar aplacar los tableros de arte, por ejemplo del tiempo libre. Entonces presiono. Vamos al final, tengo la propiedad de color de fondo. Entonces una forma es seleccionar todos los tableros de arte, y ahora se puede acceder a la propiedad de color de fondo y se puede cambiar este
color de fondo . Entonces ahora vamos a deshacernos. Esos dos no son tableros, y esto es bastante bonito. Pero tú, por ejemplo, no
puedes tener múltiples fondos también. Tú como no puedes tener este símbolo aquí y por qué, cuando creas un rectángulo
así, entonces crea un rectángulo que sea 100% de peso y altura del Archibald. Y ahora seleccionemos a los pocos de nuestro color de fondo. Y para este tipo de forma, puedes seleccionar este pequeño icono más junto al campo s para que puedas crear
más de un campo en una forma. Y vamos a crear radio Grady int aquí que se divide por debajo. Yo estoy aquí y que podemos ajustar las propiedades fuera de este campo s O que tiene, por ejemplo, 60% de capacidad. Y como se puede ver con un rectángulo, ahora
tenemos que sentir que puedo encenderlos o apagarlos. Y habiendo seleccionado esta forma, puedo hacer un símbolo de ella. Y este es un gran enfoque. Y también puedo decir, este símbolo a poner a,
ah, ah, espacio de
símbolos. Y por cierto, no se
puede cambiar el nombre original de este espacio de símbolos. Entonces si quieres que todos tus componentes comiencen en una sola página en boceto, simplemente
puedes cambiar el nombre de la página de componentes para que puedas mantenerlos todos junto con tu
guía de estilo . Entonces pongamos símbolos aquí y volvamos a los puntos de venta, creemos el símbolo de este rectángulo, y tengamos un nombre apagado. De acuerdo, eso fue color y corte luego BG sentir y apagarse. Además, vamos a revisar esto enviado a Símbolos Page y ahora en símbolos Page, voy a tener unos cuantos que puedo usar en muchas pantallas diferentes de mis aplicaciones. Entonces eso te manda y tener múltiples copias fuera de este primer perno de tuerca. E imagina ahora que quieres cambiar el fondo en todas las pantallas. Se puede ir directamente a este símbolo, y luego se puede poner, por ejemplo, 30% de capacidad a este pequeño Grady. Y como puede ver, todos los símbolos se actualizaron en consecuencia. Entonces así es como simbolizas en colores y cómo los organizas en el discurso del símbolo. Los veo en el siguiente video.
25. Herramientas de tipografía: en esta lección, vamos a visitar algunos lindos lugares para la tipografía en nuestro tú yo diseño. tipografía es extremadamente importante, y vas a tomar algún tiempo para seleccionar los teléfonos adecuados así como los tamaños frontales correctos para crear algo que se llama rampa de tipo. Y voy a hablar de ello en un minuto. Entonces primero debes seleccionar el teléfono que te gustaría usar. Y usualmente uso teléfonos que google dot com porque esos son teléfonos gratuitos, teléfonos alta calidad que puedes usar ambos. Es catch así como en tu en tu aplicación final o en un sitio web. También es agradable asegurarse de que el teléfono que estás usando esté disponible en el idioma fuera de tu aplicación o de un sitio web. Y por último, tienes a Teoh seleccionar el teléfono que estás a punto de usar. Por ejemplo, para nuestro proyecto, te
recomiendo usar el teléfono o una botella, así que vamos a hacer clic en el icono más y en la parte inferior, tienes una familia telefónica seleccionada. Este es el roboto de la familia, y también puedes cambiar los estilos. Puedes ajustar el tamaño fuera de este avance, pero vamos a cetera a Balto como nuestros teléfonos principales. En realidad, voy a usar algún otro teléfono, pero puedes usar roboto para que encaje perfectamente proyecto alquitranado. Y para usar este teléfono dentro del boceto, hay que
seleccionar esta flecha pequeña y luego descargar este teléfono. Entonces necesitas extraerlo e instalarlo en tu sistema. Por cierto, también
hay un enlace que necesitas proporcionar a tu desarrollador si deseas tener este teléfono incrustado en un sitio web que has creado. Pero por ahora sólo necesitamos descargar este teléfono. Y por cierto, tengo algún otro enlace también encendido y algo para conseguir ayuda que puedes usar para descargar todos los teléfonos de Google por lo que más de 800 de familias puedes descargar como un solo archivo e instalado en tu sistema. Puedes seleccionar club o descargar aquí en obtener ayuda y seleccionar Donald Zip. Tendrás más de 500 megabytes fuera de los teléfonos que puedes instalarlo en tu sistema, y luego tienes todos los teléfonos de Google que están listos para usar dentro de sketch y otro servicio que te recomiendo encarecidamente es adobe type kit, y este está incluido en tu membresía de adobe creative cloud si pagas tu membresía . De no ser así, también
puedes acceder a los fondos del tipo kit pagando algunas cuotas. Y te pueden gustar los teléfonos aquí y, por ejemplo, dijo la clasificación. Y también revisa el soporte de idiomas. Y aquí hay teléfonos realmente bonitos que realmente no puedes encontrar en los teléfonos de Google, sus teléfonos de calidad. Y también puedes utilizarlos en tu proyecto Web así como en tu aplicación. Por lo que necesitas tener esta nube creativa arriba para cantar esos teléfonos. Pero una vez que los cantes con la nube creativa arriba, puedes usarlos en boceto también. Por lo que ambos de este sitio web son realmente un gran recurso para encontrar un bonito frente de su elección. Y además, si tienes cuenta creativa en la nube, recuerda que puedes usar el kit de tipo, y también puedes usar esos teléfonos en sketch y la siguiente página web es teléfonos Paradox Co. Y este es el sitio web que muestra diferentes configuraciones fuera de par de fondos. Por ejemplo, tienes este hijo Josefin y además tienes juego para como copia corporal, que puedas marchar esos fondos y como puedes ver, esos París se ven realmente bonitos. Y además, puedes descargar esos París directamente desde este sitio web. Entonces si eres principiante y solo quieres echar un vistazo a algunos fondos que coincidan entre
sí o simplemente quieres que Teoh busque algo de inspiración. La mayoría de esos fondos están disponibles en los teléfonos de Google, Por cierto, puedes usar este sitio web y el último es adecuado para esto en realidad es un enloquecido, que es ,
creo, donde si es dinero porque es te permite sincronizar todos los teléfonos que tienes en tu sistema y gestionarlos. Esto sólo está disponible para Mark, pero sí, no atrapar. Obviamente, eres un marcado. Por lo que cuando abres esta aplicación legítima, puedes buscar teléfonos instalados en tu sistema. No hay teléfonos extra, pero te permite administrar los teléfonos para que puedas buscar sonidos serif y todo el tipo de teléfonos. Además, tienes este pequeño adelanto y puedes tener el menor de tus teléfonos. Por ejemplo, tengo todos los teléfonos Google en uno menos y todos los auriculares tipo que uso en una lista
también , y no tengo que ir a pegar teléfonos para buscar esto. Al menos puedo tener también una conferencia yo aquí, y una de las grandes cosas del teléfono correcto es cuando se crea algo en escaso. Cuando presionas T para la herramienta de tipo y trabajas con algún texto, puedes tener este derecho,
abierto y arroyo a través de los tipos para cambiarlos directamente en horario también funciona en. Serán software en photoshop para que podamos pasar por lo menos. Y en lugar de usar estas herramientas nativas de boceto para texto, simplemente
puedes usar derecho desde el cual es en muchos casos, mucho más fácil de usar y tiene más opciones. Entonces así es como se busca la inspiración, y también así es como se elige la fuente. Y si has hecho una elección, puedes ir a un espacio de símbolos en boceto y dentro del espacio de símbolos vamos a crear algo que se llama tipo romp y type romp es básicamente el conjunto de tamaños y estilos
para los teléfonos que tú uso en todo el proyecto. Y si vas al material que debo, puedes ver las pautas de diseño de materiales para su botella. En realidad, así que si usas un reportero para tu proyecto, puedes simplemente copiar esos valores o puedes crear los tuyos propios. Realmente no importa lo que te convenga, y ahí puedes ver que pueden sacar la idea de Qué tipo de trump es en realidad. lo que tienes estilos más antiguos por ejemplo, luz regular, mediano y viejo, uh, tamaños
más antiguos en comparación con lo que se llama display one display to también's on our in our project. También títulos subtítulos, Baldick, Opie, subtítulos, botones. Por lo que tienes todos estos tiempos que serán reutilizables a lo largo de nuestra aplicación, y luego te permitirá mantenerte consistente con las fuentes. Lo estás usando que eso es muy importante para tener como mesa y diseño bien diseñado. Entonces, por ejemplo, para titulares aquí tienes 24 píxeles regulares, en realidad, y luego tienes, por ejemplo, títulos con medio 20 píxeles. Y por supuesto, también
puedes crear un tipo desde fuera del tuyo, y te recomiendo encarecidamente que lo hagas. Y si no estás tan seguro de esas relaciones y tamaños frontales, puedes visitar la página web de la red Greed Lover Adults y puedes establecer aquí el tamaño del teléfono base. Entonces esta es la copia del cuerpo, por ejemplo, 18 píxeles. Y lo segundo que determinas es la altura de la línea, que se tiene que ajustar para que esté ópticamente bien balanceada. Y después se crea algo que se llama el factor de escala. Entonces esta es la relación entre el brezo básicamente, y este factor de escala se suministra al tamaño de tu teléfono para determinar el tamaño de Heathers. O puedes cambiar el factor de escala. Por ejemplo, dos grandes de segundo o menor esfuerzo o lo que elijas. Y si eliges alguna relación, por ejemplo, vas por relación contigo. Que el cuerpo copie el tamaño de fuente fuera 18 y es fácil de venir. Ese 18 multiplicado por dos es, por ejemplo, 36 para tu brezo. Y si tú si estás contento con esta selección, puedes ir a los valores de píxel. Cualquiera puede simplemente copiar y pegar. Esos habla nuestros valores en boceto para que tengas la rampa de tipo adecuada. De acuerdo, así es como lo hacemos en teoría y que son algunas herramientas que te ayudarán a establecer la relación entre los tamaños de tu teléfono, y te voy a mostrar cómo funciona en la práctica. En la siguiente lección,
26. Crear rampa de tipo: Está bien, es agradable verte en esta siguiente lección. Entonces vamos a continuar. Y ahora centrémonos en algunos estilos de texto. Entonces reorganicemos esos símbolos que tengo en los símbolos Page. Ahora voy a alejarme, y sin embargo los símbolos estarán en realidad en el fondo de nuestra aplicación para que pueda crear un enorme rectángulo aquí en la página de símbolos y que lo voy a sentir. Voy a cambiar la posición de esta capa, y voy a sentir esta capa con el color fuera de mis atletas fuera del fondo de mi aplicación para que todo lo que aquí se sienta esté en el contexto fuera de algún fondo en mi aplicación. Entonces movámoslo ahí fuera de este ensamble. Y ahora cambiemos el color del combustible de esto a un mendigo y color. Y ahora puedo ver todo en contexto. Entonces ahora veamos esta capa Voy a mamar turno común La edad es para esconderse y
turno común l es para buscar. Espero que recuerden los atajos. Y ahora tengo esta capa lucida para que nada se seleccione. Cuando hago clic en esta capa. Ahora selecciono la herramienta de texto con té en el teclado y puedo hacer click quiere crear un campo de texto
sencillo en boceto. Como se puede ver, este campo de texto se expande a medida que estoy escribiendo. Eso se debe a que se trata de una extrusión de tamaño alto, y si cambio el dedo de la semana fijo, este texto cambia, y ahora puedo ser
seleccionado, seleccionar , y ahora puedo cambiar el tamaño del texto y el texto se alimenta a este tamaño. También puedo seleccionar la herramienta de texto y luego dibujar una forma de un campo de texto para que se corrija
automáticamente. Por lo que vamos a utilizar este campo de texto fijo así como fuera de experiencia. Por ahora, vamos a tenerlo arreglado. Y pongamos a Heather uno dentro de este primer campo de texto. Y ahora centrémonos en algunas propiedades de texto. Voy a poner Avenue como el frente de mi elección, y si no tienes avenida, no te asustes. Puedes usar Roboto. Como dije, Roberto también está agradecido. Ahora vamos a la segunda propiedad, que es el peso, y vas a usar un pesos diferentes para diferentes estilos, y puedes tener medio ligero tener tu negro. Básicamente, la regla general para todos los proyectos es que si tienes mayor tamaño fuera del impuesto,
por ejemplo, Heathers, Heathers, puedes elegir algo de peso más ligero, así que tal vez ligero o un medio. Pero si tienes texto más pequeño, te vas a pegar con medio o negro o negrita. Y eso es solo porque si tienes texto más pequeño, es más fácil leer cuando peso más. Entonces ahora voy a duplicar el brezo, y voy a tener gratis más copias. Por lo que tengo cuatro instancias en total. Ahora voy a distribuir el espaciado entre esos Heathers y voy a crear diferentes variantes fuera de este brezo en estas. Ten en cuenta que este no es un tipo diferente fuera de Heather. Simplemente voy a crear diferentes variantes entre sí, y normalmente me quedo con libre, más varianza. Eso es porque voy a poner esto para que sea un color blanco, y voy a poner en marcha un Toby algo entre 80 y 90% para que no tengas que
pegarte necesariamente al 100% porque no es tan bueno. Si lo pones en el contexto de la aplicación. A veces es mucho mejor cuando este 10 por ciento extra son este mismo color que tienes en el fondo. Por lo que tiendo a pegarme con 80 Teoh 90% valores para esta primera variante, y la segunda variante estará en el texto que sea un poco más oscuro. De acuerdo, entonces si tenemos listo este 1er 1, vamos al 2do 1 y nos vamos a apegar a este valor alfa. No vamos a cambiar el color. Entonces vamos a tener texto blanco. Pero aquí, vamos a establecer que sea, por ejemplo, alrededor del 50%. Por lo general esta segunda variante es en mis aplicaciones alrededor del 50%. Y la primera variante Además, no
voy a cambiar el valor de Koehler. Yo sólo voy a cambiar el valor alfa. Y este será el texto más oscuro, por lo que se mezclará con el color que esté debajo. Más o menos. Voy a poner un 20% de descuento en la porosidad ahora para la última. Voy a usar mi color de acento, y voy a seleccionar este brezo que presionar control, ver para llegar al seleccionador de color y voy a dar clic en los colores de acento para que ahora
sea el color del texto. Y como excepción, no
voy a cambiar la opacidad de este color porque no quiero que el color azul se mezcle con ningún otro color del fondo. Entonces ahora tienes cuatro variantes fuera de tu texto y este color de acento Heather, lo
vamos a usar, por ejemplo, para ti, Dónde más en nuestro diseño. Entonces si estás creando varianza de texto, vas a tener que crear otro rectángulo que vamos a sentir con algún color claro, y necesitas crear esa varianza tanto para fondo oscuro como blanco. Entonces por eso estoy seleccionando fuera de los Heathers. Y si presionas comando buscando en la televisión, vas a pegar en su lugar. Pero si seleccionas el rectángulo y presionas el boceto de TV jefe pegará el contenido tu teclado en la esquina superior izquierda de lo que hayas seleccionado. Entonces ahora vamos a posicionar ese texto, y vamos a seleccionar el Heather libre. Entonces necesito seleccionar todos los Heathers en lugar del color de acento encendido, y voy a ir al 2do 1 y voy a seleccionar el Alfa Value para estar alrededor de 50 aquí también. Y además, vamos a ajustar el valor del off el segundo Heather y nos vamos a quedar con 20% de capacidad. Ahora voy a controlar nuestro solo mostrar a los gobernantes. Y voy a decir el gobernante para que pueda igualar la posición de este Heather. Esto es solo una cuestión de orden en tu página de símbolos. Y lo siguiente que va a hacer, vamos a crear algo que la escuela, el textil, y podemos seleccionar cualquier campo de texto que tengamos dentro de boceto. Y no hay textil a la derecha. Podemos crear un nuevo textil a partir de este menú y podemos darle un nombre. Entonces démosle un nombre a otro. Pero vamos a hacer un prefijo, y me voy a quedar con D slash brezo. Y esto significa que se trata de una opacidad de 90 fuera de este color blanco. Por lo que significa que es el más ligero fuera de los encabezados que aparecen en el fondo oscuro. Y esta es sólo mi convención personal de nomenclatura, pero funciona muy bien. Entonces, ¿y si tiene un 80% de descuento? Bueno
, no importa. Siempre pongo 90. Está bien. Y aquí, por ejemplo, siempre
pongo 50 aunque sea 45 o incluso si es 58 siempre pongo Heather 50 y también pongo el para que sepa que aparece en el fondo oscuro y para el texto que tengo en línea fondo, voy a crear un nuevo estilo, y voy a poner l y la L es sinónimo de vida. Por lo que este brezo es de 90 en el fondo claro. Por lo que ahí lo tienes. Y si organizas tus lazos de texto de tal manera, entonces
puedes ir a insertar y puedes ir a texto en estilo remolque, y puedes ver que el D y L significa oscuro y claro. Y esos son dos grupos que van a crear creados porque uso esta barra inclinada en el nombre
y y ahora puedo acceder a cualquiera de estos estilos de texto, y puedo hacerlo de dos maneras. Puedo ir a insertar texto de estilo. Y ahí tienes esta separación entre fondos oscuros y claros y sobre
fondos claros . Puedo tener este texto brezo 90, por ejemplo. En la oscuridad, tengo dos variantes, y si resulta que creo algún campo de texto que quiero formar en este estilo en particular, lo
voy a seleccionar, y voy a poner un poco de texto dentro yendo a seleccionar el texted, y siempre puedo realmente desde esto menos también. Por lo que puedo seleccionar que este impuesto sea la variante 90 sobre fondos claros. De acuerdo, así es como haces los textiles. Ah, y también una rápida actualización a esta lección. Si tienes un campo de texto y quieres poner el texto al centro horizontal, puedes hacerlo con este pequeñito, pero él quiere ponerlo verticalmente en el centro. También puedes hacer eso. Tienes que crear el tren de texto que en realidad sea más alto que una línea de texto, por ejemplo, así y ahora puedes ponerlo en la parte superior también. Pregunta al medio vertical y al fondo. Y además, una cosa más que encontrarás nueva y los futuros lanzamientos fuera del sketch es que puedes acceder al menú del archivo y luego puedes seleccionar esto. Reemplaza los teléfonos que faltan, ellos libros viejos, y te ayuda a reemplazar todos los teléfonos en el incendio. Por ejemplo, si descargas algunos que te gusten, entonces puedes ir aquí y reemplazar los teléfonos más antiguos que faltan. Haz el teléfono que tengas instalado y puedes hacerlo para todos los teléfonos a la vez. De acuerdo, así que eso es todo. En la siguiente lección. Es decir, entre esas lecciones, voy a sentir el resto de los textiles, y vamos a proceder a nuestro siguiente paso.
27. Diseño de top: y fui, Bienvenido a la siguiente lección. En primer lugar, tengo que hacer un anuncio. Esta es una buena noticia. Eso es porque a partir de ahora,
en las próximas lecciones, vamos a usar esto todo el conocimiento que has ganado y vamos a crear una
aplicación práctica en sketch. Vamos a hacer un diseño que será una aplicación nativa para IOS o Android, y está conectada a la industria del hogar inteligente. Entonces, empecemos. Y por cierto, tengo todos mis feos duelos, todos los marcos de alambre delante de mí en el pedazo de papel. Entonces no está haciendo nada desde el espacio. Es sólo hacer esos prototipos, verdad. Y es solo organizar esos activos en boceto para que podamos tener un perfecto
moke up de alta fidelidad . Entonces comencemos con un dedo del pie rectángulo y dibujemos un rectángulo simple. Voy a establecer el tamaño de este rectángulo para que sea el ancho completo, pero también voy a cambiar la altura para alimentar desengrasado. Entonces voy a tirar al 72 por ejemplo, o 80 o 88 para que alimente nuestras ocho semanas acordadas. Yo me voy a quedar con 88 aquí. Es un buen tamaño. Entonces, tal vez cambiemos el color de este Assad. Voy a ir a sentir y menos zumo nuestro color de fondo. Y ahora voy a usar el campo de texto simple, y esto quedará fuera de extra. Por lo que hago clic una vez con la T O en mi teclado, y selecciono el estilo fuera de Heather 90. Ahora lo puedo poner directamente en el centro, fuera de mi forma y básicamente hasta el concierto de Texas, también
puedes ir por fijo. Pero ahora necesitas ampliar este campo de texto para que el texto aún más largo aparezca correctamente en este campo de texto. Y ahora está centrado el texto, y ahora puedes escribir cualquier cosa dentro de esta lluvia de texto y siempre lo tendrás en el centro. Para ser honesto, prefiero la manera más fácil del pozo. Por lo que prefiero cambiar a auto y solo asegurarme de que este texto esté centrado vertical y horizontalmente así como dentro de esta forma. Entonces voy a establecer la forma, el texto, y luego cuando usaron y me refería a opciones. Y ahora mismo, si tienes este centro de texto en el marco ahora, puedes poner el texto que quieras, y siempre está en el centro. De acuerdo, sigamos adelante. Voy a ponerlo un poco en la parte superior y voy a seleccionar un nuevo campo de texto. Voy a crear campo de texto con la dirección fuera de nuestra propiedad. Será porque la carretera 19 por ejemplo. Y ahora mi enfoque no es hacer de antemano todos los estilos de texto al tipo mameluco. Simplemente voy a usar esas cosas que están creando en el diseño, y luego las voy a mover a nuestro símbolo, España, a la rampa tipo. Entonces voy a crear un 50% de descuento en nuestro texto de 10 pixeles. Y ahora eso es estimación si este texto es incluso legible en el dispositivo móvil, Así que una forma de comprobar, que no es tan buena es cambiar el valor del zoom para que coincida con el tamaño físico fuera del del barco de arte en tu monitor. Mucho es aproximadamente el dispositivo, y como ves, es el Texas un poco demasiado pequeño. Y la segunda forma de hacerlo es previsualizar en un dispositivo el cual te mostraré más adelante y es mucho mejor
para que puedas previsualizar desde boceto en ese dispositivo real. Pero por ahora, Cambiemos el texto a 12. Voy a quedarme con 50% de capacidad y ahora voy a seleccionar ambos de esos elementos
y voy a agruparlos . Y además, voy a poner a este grupo en el centro de este rectángulo. Ahora vamos a mover el hogar, dedo del pie a la izquierda. Voy a moverlo. Ocho píxeles a la izquierda. Voy a presionar l por línea y voy a crear la línea que comandos D para duplicar la línea. Y voy a dormir en esta línea horizontalmente. Y ahora emparejemos la posición para que tengamos Ah, flecha. Elegiremos tanto los años como cambiemos al príncipe falso por uno y también vamos a cambiar el y para que lo rodeen. Además, sería mejor escalar un poco esas líneas. Primero los voy a agrupar. Por lo tanto, permítanme seleccionar ambas capas y Commander G para agrupar. Voy a poner a este grupo afuera y ahora puedo agruparme. Puedo mover este maneja en el grupo para que ambos haya cambios en consecuencia. Ahora vamos a alejarnos y ahí lo tenemos. Por lo que básicamente casi tenemos nuestro primer componente superior. Pero lo que me falta. Aquí están los iconos, y quiero que los iconos aparezcan a la izquierda y a la derecha fuera de mi componente y en términos fuera de los iconos. Me gustó que supieras esto simple después de ellos usando su llamado ícono jar, y no tienes que usarlo necesariamente, pero creo que vale la pena la sartén. Cuesta unos 15 pavos, pero te ayuda a organizar tus iconos y todos los conceptos I que tengo aquí. Tengo, supongo, más de 100 mil. Aquí puedo escuchar iconos, y me permite ver fácilmente esos iconos así como organizados en sets. Y también puedo buscar los iconos que necesito. Por ejemplo, si busco al usuario. Como puedes ver, busca en todos mis sets esta frase o palabras clave en particular porque, sobre todo si pagaste por los conjuntos de iconos, los tendrás bien organizados con las palabras clave, que es salvavidas si tienes 20 iconos de descuento y quieres buscar rápidamente los iconos, Así que si quieres poner este icono dentro de bocetos, simplemente arrastrarlo y soltarlo, y ahí lo tienes,
por lo que funciona en trabajos programados en para el ilustrador de tienda y fue el mejor es que si revisas los contenidos de este grupo que realmente tienes una forma vectorial, por lo que significa que es la mejor calidad que puedes sacar del ícono. OK, entonces voy a usar yo Condra mucho a lo largo del curso, pero no tienes que usarlo. No es necesario. Simplemente puedes arrastrar y soltar desde el buscador, o puedes instalar un trier off yo controlo y solo comprueba si esta aplicación es para ti . Por lo que voy a utilizar también esta agilización iconos dot com dicho, que también se paga. Pero creo que invertir en iconos es realmente una buena manera de convertirse en un mejor diseñador. Eso se debe a que ahorras tanto tiempo en boceto. Obviamente puedes diseñar iconos. Es muy fácil. Es muy gratificante. No obstante, también consume mucho tiempo, por lo que puedes pasar este tiempo en otra cosa y simplemente comprar un buen set off iconos. De lo contrario, puedes usar iconos gratuitos de Internet, pero asegúrate de que sean al menos iconos vectoriales para que tengas la calidad
óptima óptima. El siguiente sitio web recomiendo emisión. Me comí la red. Y en lo que respecta a los iconos libres, te
recomiendo que revises Icahn monster dot com así como yo confinado ahí que vienen y encontrarás algunos iconos vectoriales gratis aquí. Pero probablemente tengas que pasar un poco más de tiempo para encontrar los iconos que en realidad están en el mismo estilo o simplemente se adaptan a tus necesidades en lo que a tu diseño se refiere. OK, entonces ahora volvamos a la jarra de iconos y voy a buscar algunos iconos. Entonces los voy a poner en programada y mostrarles cómo. cuál es el mejor trabajo con estos iconos para que puedas buscar con dentro de todos los
iconos de sets off . Pero también puedes cambiar a configurar para buscar Onley en la selección actual. Entonces sólo en la actual racionalización dijo que voy a poner para cámara primero y déjame ver si hay algún lindo vengo con la cámara. Creo que esta cámara cc uno es bastante dorada, así que la voy a poner en boceto y ahora voy a buscar la otra palabra clave, que es si, y como pueden ver, me harían bastante si iconos en el mismo estilo de estado que la cámara porque sigue siendo el mismo conjunto de iconos. Y puedo, por ejemplo, dicho este día, salir y tirar de él dentro de boceto. Si volvemos a Aiken Jar, lo que podemos hacer es realmente podemos cambiar los lados de este ícono para que podamos verlos en una vista previa más grande o menor. Pero realmente no afecta el tamaño de los iconos que están siendo importantes en el boceto. Lo mismo vale para los colores porque puedes cambiar fácilmente los colores dentro de los iconos son. Pero esto es sólo una vista previa de droga ícono, decir, si lo arrastras y lo sueltas en el horario, todavía tienes este icono oscuro. Pero en realidad no es tan importante, porque siempre se puede seleccionar el icono asoma este icono vectorial. Se puede seleccionar este grupo, y ahora mi flujo de trabajo está básicamente desarreglado ing este diferentes grupos porque, como se puede ver, hay un montón de grupos y ahora, dentro de este último, tenemos formas vectoriales, y así suele ser como sacas iconos de mi contrato dentro de boceto. Por lo que presiono shift command G muchas veces hasta llegar al final de nuestra selección. Entonces hasta que yo un grupo todos los grupos que están ahí en el icono y ahora puedo realizar operaciones tal cambio académico o cambio de espesor y esas operaciones se aplican a múltiples capas seleccionadas. Cuando estoy abajo, presioné al Comandante G para que pueda agrupar todas las capas una vez más, y bien leí el estricto tango que necesitaba. Voy a poner este icono en el centro exacto fuera de esta forma, y también lo voy a transformar. Por lo que con razón Gannett y los judíos duermen horizontal desde menú transformado. Y ahí tenemos nuestro primer ícono. Por lo que ahora realizo las mismas operaciones el 2do 1 Así que presioné Comanche G hasta llegar a las formas ahora y cambiar el color. Y también crecí comandos de bit, g. Y ahora vamos a gustar las formas y agruparlas. Y ahora tengo que deshacerme de este rectángulo y poner a este grupo a la derecha de nuestro cumplido. Ahora vamos a asegurarnos de que esté posicionado correctamente, así que tengo que posicionarlo en el centro verticalmente y quedarme impresionado. Comando derecha corchete escolar, que es nuestra gente personalizada. Atajo por hacerlo. Y ahora mismo tengo ambos iconos. Puedo seleccionar ambos grupos, y siempre es mejor realizar operaciones como la capacidad en ambos grupos porque
siempre es más fácil acceder al grupo una capas individuales para que puedas seleccionar los grupos y presionar gratis en la tecla palabra. Y ahora usted ha dicho que la opacidad sea del 40%. Ahora seleccionemos todos los grupos y capas y hagamos un símbolo con ellos. Voy a poner el nombre de arriba con símbolo. Y ahora vamos a la página de Símbolos y por ahora, es uno aquí. Pero lo vamos a mover más tarde. Y ahora vamos a acercar este cumplido con comentario a y lo que voy a hacer. Voy a transformarlo para que tenga aún más símbolos en su interior. Por lo que este icono podría ser interruptor con simple sobre la derecha. Entonces voy a crear un símbolo fuera de él, y voy a decir cámara de icono así como este derecho Ikonomou. Es como la derecha puedo crear símbolo fuera de ella, y voy a poner icono slash hijo y esta flecha también vamos a crear símbolo fuera de ella . Esto será yo puedo estrechar. Y como pueden ver, tengo otros símbolos. Voy a duplicar todo el top. Entonces voy a presionar. Vamos. D en el símbolo superior y este símbolo de copia superior voy a sólo para que no tenga este pequeño subtítulo y también una flecha. Y ahora voy a seleccionar el hogar y ponerlo en el centro vertical y horizontalmente. Y como pueden ver ahora, tengo la versión alterna fuera de la parte superior, así que voy a renombrarla para arriba. Y ahora veamos lo que hemos logrado con los símbolos que cambian al inicio de una página. Y ahora vamos a hisopar el dedo del pie superior. Es versión alterna. Entonces voy a seleccionar top out y voy a anular casa do, por ejemplo, oficina. Y también puedes hacer un hisopo de los iconos. Realmente no tengo muchos iconos aquí, pero puedo configurarlo, por ejemplo, para saber para ocultar este icono a la izquierda. Y también, si voy de arriba a arriba otra vez, como pueden ver prevalecer esta anulación. Por lo que todavía tengo la oficina como la anulación, y eso es bastante bonito. Entonces todo eso se trata de la parte superior. Yo me veo la siguiente lección
28. Agregar a casa: Haider. Parece que estamos listos para la siguiente lección, y aquí tenemos el sitio web de Pixeles y diferentes imágenes en la página web del Espectador. Busco consulta de casa y ahí tenemos unas bonitas fotos fuera de una casa moderna que
seleccionan una imagen que tenemos aquí y vamos a asegurarnos de que estamos en la calidad completa fuera esta imagen. Ahora está cargado y podemos usarlo como una sensación fuera de nuestras capas. Entonces vamos a crear un rectángulo, y este rectángulo va a sumar la mitad fuera de mi tablero de arte verticalmente. Y ahora puedo poner el campo fuera de este rectángulo hasta que sea mi imagen. Por lo que voy a sentir y selecciono opción de imagen ahora desde el navegador. Puedo agarrar esta foto de alta calidad y simplemente tirarla y soltarla sobre esta
pizarra que tenemos en la opción de imagen. Por lo que en las opciones de imagen, también
tenemos pies, estiramiento o azulejo, y adicionalmente, en la opción de azulejo. Tienes libertad para ajustar este slider, que hará que la imagen sea cerveza o más pequeña, y en realidad queremos que la imagen sea un poco más grande, pero queríamos estar en el centro fuera de nuestro rectángulo off. Entonces básicamente la opción de sentir funciona mejor para nosotros. Pero para ser honesto, prefiero algunos otros métodos. Entonces si quieres que esta imagen sea parcialmente visible, solo
tienes que seleccionar unos pocos de un color sólido y arrastras y sueltas esta foto de píxeles para bosquejar, Luego selecciona ambos jugadores y selecciona mezquita. Y esta es la diferencia. La diferencia práctica entre la mezquita y el campo común para que ahora puedas ajustar el tamaño de la foto. Puedes ajustar la posición de la foto y puedes transformarla libremente mientras aún se sienta dentro de este rectángulo porque este rectángulo es una máscara, así que la vamos a poner en algún lugar del medio. Y ahora me gustaría ajustar la capacidad. Pero como puedes ver, si trato de ajustar capacidad en los especiales, sigue Lo que hago es en realidad revelo aparte este color amarillo para que podamos dar click en la mezquita y solo tú puedes apagar el campo y ahora puedes transformarte. Se puede cambiar la opacidad. Además, podrías usar esta opacidad en todo el grupo, y la tercera forma de hacerlo es usar una mezquita de oferta, pero realmente depende de ti. De acuerdo, entonces dijimos la opacidad al 75%. Ahora dibujemos algunas formas y voy a usar más. Entonces eso es así Terminar con el turismo común en mando menos zoom alejar, comandamos el duplicado la opción de sobreretención y cambiar para hacerlo más grande. Y ahora así, como el campo off color blanco y 20% de opacidad. Ahora es seleccionar L para línea, y voy a dibujar una línea recta con Shift y voy a dibujar otra más con Shift para que tenga círculo perfecto y simplemente moverlo en el centro. Ahora en el panel de capas, eso es comando. Da click en ambos fuera de este overs s s para que pueda decir como ambas capas y voy a seleccionar sentir . Y usemos uno de mi curso de acento, tal vez este color rosa. Y luego me va a gustar la línea también y cambiar el color de la línea a este mismo color. Puedo usarlo de la lista reciente, o simplemente puedo hacer clic ahí. De acuerdo, ahora vamos a crear una Nikon en boceto, y no voy a usar jarra de iconos porque quiero mostrarte lo fácil que es crear un boceto
icónico. Voy a dibujar un rectángulo con la frontera, levantar libre. Voy a dibujar otro encima. Y el radio fronterizo aquí será más grande. Por ejemplo, muy cinco. Eso está bien. Simplemente posiciona este rectángulo con las flechas del teclado. Ahora ese zoom y voy a usar tijeras para eliminar esos dos segmentos. No voy a eliminar éste porque puedo entrar a la forma en modo de edición vectorial. Entonces presiono volver sobre esta forma Y ahora vamos a seleccionar ambos fuera de este vector puntos con turno . Y ahora no seamos esos puntos vectoriales con teclado flecha arriba para que tengamos una
forma perfecta . Seleccionemos este ícono de look, y eso es ponerlo en el centro fuera de nuestro círculo. Ahora voy a crear otro. Yo entro será icono de teca, y presiono l por dos líneas como esta. Voy a cambiar, hacer clic en ellos y Comandante G a grupo, y luego voy a ir a transformarme, y voy a rotarlo en menos 45 grados. También duerme verticalmente. Ahí lo tienes. Ahora volvamos a estas capas otra vez. Vamos a cambiar click para seleccionarlos y vamos a opciones de frontera. Voy a segar por ahí. Ahí termina. Tienes otro ícono que es doble clic en el icono de bucle para ir a la vista del 100%. Y ahora puedes seleccionar el grupo y así el icono de candado e ir, por ejemplo, a cambiar el grosor o el color. Se pueden ajustar las opciones, y básicamente, ahora queremos posicionarlo exactamente en el medio. Entonces voy a tener un solo grupo fuera de estas capas, y voy a seleccionar por encima también. Y voy a usar nuestros atajos de teclado para centrar esto horizontal y verticalmente. También voy a hacer este segundo un poco más pequeño, y ahora pongámoslo en el centro fuera del lienzo presionando comando libre. En realidad es el mejor atajo que puedes usar para eso. Ahora voy a seleccionar y crear ritmo de feudo de texto, el texto que ya he tenido en mi portapapeles y lo que me gusta hacer. Me gustaría cambiar la altura de la línea, y se puede ajustar esta altura de línea, que es 19 por defecto. Para esto por este tipo fuera de tamaño del texto, pero podría poner por ejemplo, 40. Y ahí lo tenemos después puedo flotar sobre la etiqueta de línea, y puedo arroyo y drogarme para ajustar este espaciado en consecuencia. Y ahora, como ven, tengo algún espacio vacío entre las líneas de texto que me dice. Puse esos pequeños iconos. Entonces voy a venir a ver comandos, videos, unos pequeños puntos y pongámoslo ahí y vamos a necesitar uno más en general para que yo diga como, éste. Y voy a opción arrastrar este para que creemos otro y muesca su posición con flechas de teclado. A veces es mejor s para que esos estén correctamente alineados ópticamente no matemáticamente, como lo haces con las opciones de alineación. Y ahí lo tienes. Entonces vamos a poner esas garrapatas dentro de cada uno. Pero primero, vamos a volver a conjurar y tengo este dedo meñique puedo voy a ponerlo ahí. Entonces vamos a agruparlo. Vamos, Jefe G. Hasta que lleguemos a las formas. Ahora cambiamos el color blanco y ahora lo agrupamos de nuevo. Por lo que yo restaurante. Vamos, grupo
G dos. Este íconos y yo también elimino esto. Usa este rectángulo. Voy a poner al grupo dentro de mi arte sobre Pero ahora mismo no puedo seleccionar realmente. Entonces si tienes tal situación, sólo tienes que seleccionar este grupo que tenemos aquí y cambiar en agit para que su posición dentro fuera del tablero de arte. Y ahora podemos venir en k a escalarlo y en una escala desde el centro y utilizar la escala 200%. Y también me van a leer esta pequeña flecha a la derecha del dedo. Y en lugar de esta flecha, me gustaría tener una línea aquí. Así que vamos a seleccionar L para la herramienta de línea Y luego vamos a desplazar arrastre para una línea. Y quiero tener esta línea punteada, así que eso es todo un reto. Puedes ir a la configuración del borde tan rápido en este pequeño ícono y solo en las propiedades del borde. Tenemos dash y gap aquí para que podamos ingresar algunos números en dash, por ejemplo, píxeles
libres. Y entonces podemos tener, por ejemplo, 10 picos de Gap para que puedas ver que hay esos picos libres de Dash que 10 fotos de Garp tres picks de dash y así sucesivamente. Y si incluso quieres ir más ancho, puedes entrar en otro guión y otro hueco. Y ahí tienes este tipo de patrón diferente que puedes emular, por ejemplo, código de barras o algo así. Tenemos este guión y brechas dolores de cabeza. Entonces vamos a deshacernos de todos los campos en vez de primero y segundo 1 Así que voy a tener
un guión de un pixel y dejar y justo el hueco para que sea por ejemplo, 10. Y ahí tenemos unas pequeñas líneas. Pero si redondeamos los extremos fuera de estas líneas para que tengamos adultos en su lugar y también podemos decir la flecha así Pero
sí, en realidad no se ve bien en absoluto. Entonces vamos a deshacernos de esta flecha y vamos a crear una más tarde. Por ahora, voy a sólo el espesor fuera de la frontera para que tengamos para este pequeño puntitos y probablemente cuatro sea el valor correcto aquí, y eso ahora es cambiar la posición de la misma. También podemos ajustar ajustes fuera de esta línea como el trigo fuera de la línea, y realmente funciona bien. Ahora seamos seleccionables del grupo con este ícono así como línea. Presiono comin G para agruparlo. Ahora vamos a utilizar nuestro atajo de teclado Comando soporte izquierdo un corchete cuadrado para posicionarlo. Dirigiendo el centro. Voy a opción arrastró el texto Campo comando A para seleccionar todo el texto aquí y voy a poner diapositivas para abrir aquí. Pongámoslo debajo de nuestro ícono. Básicamente, creo que ya no necesitamos esta flecha. Este ícono se ve bien ahora mismo, así que lo voy a poner en este grupo y vamos a cambiar la opacidad de todos los grupos , como el grupo libre en el teclado. Y ahí tenemos opacidad off 30%. Ahora vamos a seleccionar este grupo para otra vez y voy a crear símbolo fuera de él. Entonces, hayamos mirado para abrir símbolo y sólo déjame echar un vistazo a esto, la estructura de las capas. Entonces vamos a tener este grupo a como símbolo separado también. Pero lo que tenemos aquí es que tenemos este pequeño ídolo tiki, así que eso es primero crear en ICANN offtake symbol. Por lo que tenemos yo puedo tomar y luego podemos seleccionar ambas capas. Ambos rectángulos hacia adelante miran anti arma que crean símbolo hacia fuera todas esas capas Y digamos que es icono. Mira, ahí lo tenemos y siempre es una buena idea. Dedo del pie. Mantén tus capas organizadas también. Por lo que de vez en cuando, por favor vaya a la espinal del cabello y renombró las capas. Elimina grupos innecesarios y solo trata de mantenerlo organizado. Y no tienes que hacerlo cada vez que creas la capa o un grupo. Pero es bueno simplemente limpiarlo. A lo mejor después de crear una sola pantalla. De acuerdo, entonces lo que vamos a hacer ahora mismo es que necesito este pequeño icono de garrapata para que aparezca en los otros puntos. Entonces voy a ir con los iconos del dedo del pie y selecciono IQ. Ahora vamos a hacer zoom y eso es ah, recita un poco con turno para que yo mantenga proporciones. Lo necesito un poco más pequeño y tener el palo también copiado y pegado una vez más. Y eso no es todo. Con turno y flechas de teclado. Inglés. Copiemos y mágicemos otra vez. Entonces ahora podemos solo para limpiarlo un poco porque nuestra primera pantalla está lista y lo
haré entre las clases mientras te veo en otro video
29. Organizar y organizar activos: Entonces al principio
pensé, voy a limpiar las capas entre las clases. Pero ahora, cuando lo pienso, solo
creo que esta clase extremadamente aburrida y será una especie de ayuda para que
te dejes organizar mejor tus activos no sólo para las capas sobre propósitos, sino también para la exportación. Y eso es bastante importante. Entonces en un segundo, vamos a saltar de nuevo al panel de capas y vamos a reorganizar el virus, crear grupos. Y lo más importante, te
voy a mostrar cuál es el mejor patrón de nomenclatura para tus capas y por qué. De acuerdo, entonces lo primero es que no tienes que cambiar el nombre de las capas todo el tiempo. Cuando creas una capa, solo tienes que seguir adelante, seguir adelante. Y cuando termines, por ejemplo, una pantalla o alguna parte más grande de la pantalla o un componente Ahora puedes establecer
los nombres propios fuera de las capas,
por lo que la primera operación que necesitas realizar es enrollar las capas y agruparlas juntos. Por lo que presionas y mantienes el comando en tu teclado, y luego seleccionas todas las capas que, en tu opinión, necesitan aterrizar en un solo grupo. Entonces así es como viene el apestoso ojo también. Y ahora puedes presionar comando g para agruparlos. Ahí lo tienes. Por lo que este es el primer grupo que presiono comando son. Y ahora, en este molde de edición, se
puede presionar start para bajar lo menos así como más adelante. Puedes presionar shift, stop para ir Abdel East, y puedes cambiar el nombre de todas las capas y grupos por lotes, así que eso es bastante conveniente. OK, entonces ahora pasemos a las convenciones de nomenclatura. Y ya conoces una convención de nomenclatura inteligente cuando tienes nombre fuera de la carpeta y luego tienes smash y luego nombre fuera de la capa, lo que te permite ir al menú de inserción y seleccionar símbolo. Y ahí tienes todas las capas agrupadas en estas carpetas que vinieron antes de la barra diagonal s que podamos ir a símbolos. Y como pueden ver, he creado aquí algunos símbolos más y más iconos. Y si echas un vistazo a las capas, como puedes ver, todas
tienen un icono de nomenclatura adecuada, candado, icono, barra diagonal y así sucesivamente. Pero eso no es todo. Si seleccionas las capas, por ejemplo, eso es un click de turno en y seleccionas algunos fuera de esos iconos así como voy a comando click para tener esta sensación de BG color y acento de color libre seleccionado también. Puedes ir a opciones de exportación y puedes hacer click en botón hacer exportable Y ahí puedes tener todos estos libros de arte realmente hechos exportables, y voy a exportarlos. Y como puedes ver, se van a guardar en esta carpeta de exportación. Pero en cambio, estos archivos individuales en esta carpeta, lo que voy a obtener después de la exportación son dos carpetas separadas. Por lo que tengo este color y puedo carpeta también. Entonces como
parece, no sólo agrupa los iconos en el menú de inserción, sino que también creó las carpetas. Por qué exportar para que tengas todos esos activos organizados en carpetas separadas y simplemente
obtienen sus nombres del nombre antes de la barra diagonal en el nombre del símbolo. Entonces eso es bastante limpio, ¿eh? Volvamos a la página principal arriba. Y como verán, incluso
podemos crear estructuras más complicadas y avanzadas fuera de una carpeta. Entonces vamos a presionar comando son ir al modo de edición ahora que soportan barra diagonal en cuatro para este componente, y vamos a hacer que este componente sea exportable. Ahora lo vamos a guardar en nuestra carpeta de exportación y dentro de casa. Tenemos esta info, por lo que debería haber un invocado el archivo PNG, y ahí está. Pero podemos ir más allá y podemos volver a cambiar el nombre de este grupo para que tengamos alguna carpeta
extra aquí, por ejemplo, eso es tener un nombre apagado para esa carpeta. Pongamos una barra aquí y volvamos a exportar. Y ahora tienes estructura anidada fuera de las carpetas. Entonces vamos a la carpeta de inicio y dentro tienes esta carpeta arriba y ahí tienes info el archivo
PNG. Entonces así es como anidaste la estructura fuera de las capas. Y en realidad, una cosa más que está estrictamente conectada a los nombres de tus grupos y capas además son algunas propiedades CSS que puedes exportar directamente desde boceto y pasarlo. Teoh, por ejemplo, desarrollador
front-end. Puedes hacer clic derecho en cualquier capa o simplemente mercancía en capa o grupo, así que vamos a brillar en este grupo y puedes copiar atributos CSS. Y ahora, si colocas el código CSS desde tu teclado. Tendrás los nombres de las capas como comentarios en capa CSS. Entonces eso es bastante importante para Así que ahora podrías estar preguntándote ¿cuál es la convención de
convención de nomenclatura perfecta para tus grupos y capas en sketch? Y en realidad, te
voy a dar una pista. Entonces, primero cambiemos el nombre de este grupo. Voy a seleccionar el grupo y ampliarlo. Como puedes ver, hay un montón de overs e iconos,
y voy a presionar comando son dedo del pie renombrar el grupo, y voy a poner a casa primero. Y eso es porque esta es mi pantalla de inicio. Por lo que la primera parte del nombre será el nombre fuera de mi pantalla. Y luego pongo slash para que crea otra carpeta y selecciono el nombre de este mismo componente. Por lo que probablemente este componente pueda tener nombre off info, y eso es todo para el nombre del grupo. Ahora presioné Tub, y puse el nombre fuera de esto tanto como primera pantalla así como el complemento al principio , fuera de cada capa o cada símbolo y ahí tenemos home in para icon, lock y ademas mucha casa en para icono teca. Y esta es en realidad una forma de evitar tener múltiples instancias fuera de cada imagen. Entonces si solo quieres querido, tienes los mismos nombres. Y si quieres diferentes incendios BNG, pones diferentes nombres, por ejemplo, de uno apagado todo a más libre y así sucesivamente, y están aquí. Vamos a tener casa en cuatro líneas así como este texto, y vamos a renombrar este texto para que coincida también con los contenidos del grupo. Entonces vamos a tener a casa adentro para un texto. De acuerdo, así que eso es todo. Vayamos a la siguiente capa. Y ahora hemos mirado los componentes abiertos del dedo del pie, y también necesitamos que esa pantalla de inicio se ponga en el principio porque necesitábamos aterrizar en la carpeta adecuada. Y entonces tenemos, por ejemplo, home hero. En el interior, tenemos esas dos capas, y no necesitamos renombrar esas. Vamos a la capa superior y pongamos a casa antes del nombre así como ponemos el nombre fuera nuestra cadena antes del nombre fuera del último símbolo y ahora tendremos todo organizado en esta carpeta de inicio mientras exportamos. Y también es agradable tener el orden correcto fuera de las capas para que tengamos
los elementos superiores en la mayoría de las capas y vamos a la parte inferior. En ocasiones no es posible porque porque si mueves héroe a la parte superior fuera del panel de información , cubrirá este pequeño ícono para que tengamos que cambiar el orden de esos dos grupos. Pero si solo puedes por favor tratar de tener, ah, orden
correcto fuera de las capas para que puedas ir de arriba a abajo así, y no sé si te acuerdas. Pero también hay atajos de teclado para mover las capas arriba o abajo de la estructura de capas , y esto es comentario. Opción flecha arriba o abajo, y también se puede presionar control. Por lo que control comentario. Opción hacia abajo o hacia arriba, para moverlo a la parte superior, más capa o hacia abajo fuera de la capa liberada y también un atajo de teclado más es un cambio
común. L. Y si presionas comando shift, L te ves esta capa para que podamos buscar esas capas y grupos que ya no quieres editar que terminaste, por ejemplo, después de terminar tu trabajo con esta pantalla. Ahora pasemos al espacio de símbolos, y otro buen consejo es mantener organizada la página de símbolos y mantener esas
capas de símbolos organizadas también. Y como ves, aquí
tenemos esos estilos de texto de campo de texto. Y como les dije antes, vamos a agregar algunos textiles extra aquí a medida que nos movemos junto con nuestro diseño. Entonces aquí tenemos los estilos para los encabezados y también diferentes variantes fuera de los encabezados. Pero si vamos al home up, como pueden ver, tengo ahora a estilos extra para el texto, y voy a seleccionar el primer estilo, que es una copia de cuerpo, y será Avenir Medium 14 y vamos copiar este texto y movámoslo a los símbolos. Ahora vamos a buscar esos encabezados. Voy a seleccionar Grupo Textiles y pegarlo aquí. Cambiemos la posición y movámosla dentro de este grupo. Voy a venir en una y cambiar el nombre dedo del pie copia del cuerpo, y este será mi segundo textil. Seleccionemos este grupo y un click selecto a través de una opción de selección. Esto me hará seleccionar a cada jugador individual con tan solo un clic, y ahora tengo tu medio apagado 40 pixels. Voy a optar dragones para tener una copia. Y luego voy a presionar nuevamente mercancía y mercancía para duplicar esta acción. Y ahora vamos a cambiar el hasta dónde a 50 y que vamos a cambiar nuestro demasiado 20 en esto para primera copia. Ahora vamos a la 4ta 1 Vamos a controlar los senos, ver, y elijamos nuestro color de acento. Entonces una cosa más que necesitamos es que vamos a seleccionar estas capas y vamos a copiarlas y crear la luz Valiant fuera del fondo. Entonces comandamos a la nave V para pegarlos en esta forma, y voy a cambiar hacia abajo son dos Majette. Ahora necesitamos seleccionar libres esos campos de texto y cambiar el color a negro. Y voy a ajustar el,
um, um, Alfa Consecuentemente. Voy a poner 50% de descuento en la segunda copia y también 20% nuestra grasa en la primera copia. Y por favor créeme que sé que puede parecer aburrido la primera vez porque sigues haciendo las mismas operaciones una y otra vez. Pero si haces que esos estilos de texto estén disponibles para cada tipo de texto, por ejemplo, tomemos este texto fert que es una leyenda en nuestro caso. Y digamos que esto será una leyenda y vamos a guardar las acciones para este
texto de subtítulo así como credo, varianza del mismo, así que ya verás que lo vamos a hacer. No sé 12 o tres veces para 1er 1 o dos pantallas, y después será mucho más fácil porque tienes toda la estructura fuera de este estilo para el texto. Y de nuevo, voy a usar la convención de nomenclatura fuera del para el fondo oscuro, y voy a decir, ese es Bolic Opie. Y al final, pongo el nombre de la varianza. Entonces, básicamente, ese es un número para la variante más ligera. Fue 90 para el 2do 1 50 para el 3er 1 será 20. El nombre fuera de estas capas dentro de capas no son
tan esenciales aquí, así que podemos dejarlas eso y verás que pronto esta estructura dará sus frutos porque
sigues usando los mismos símbolos. Sigues usando los mismos textiles del mismo lucio posee, y si los mantienes organizados, si los mantienes en los símbolos, verás que esta es realmente bonita estructura de tener, y de vez en cuando descubrirás que puedes tener aún más símbolos anidados dentro otros símbolos. Así que limpiemos el fondo fuera de la parte superior y la versión top out, y vamos a usar este color BG en su lugar. Entonces vamos a seleccionar la parte superior y vamos a insertar el color del símbolo y vamos a usar el color BG. Pongámoslo como una capa separada aquí, y voy a elegir la posición fuera del alambre de acento 00. Pongámoslo al final de nuestra estructura de capas para este símbolo en particular, y voy a venir a ver y Kamanzi a pegarlo al otro. Y probablemente ahora nos estamos empezando a dar cuenta de que toda esta convención de nomenclatura y esta carpetas inmediatamente empieza a tener sentido porque si seleccionas esta copia maestra y
cambias el color a verde, tienes este color verde en todo fuera de los símbolos así como en tu proyecto por todo el lugar. Y ahí lo tienes, otra técnica de salvavidas que será especialmente útil cuando tengas un proyecto más grande . Cuando comienzas a diseñar en otras pantallas y verás que esta convención de nomenclatura
además de tener esos grupos separados para el menú de inserción, pero así como para el código de exportación y CSS es bastante útil. Eso es todo por ahora. Los veo en la siguiente lección.
30. Diferentes pantallas de hogar: hola y bienvenidos a la siguiente lección de esta lección. Vamos a empezar creando algunas alteraciones fuera de este tablero de arte. Y esta es una técnica bastante bonita. Si quieres tener un estado diferente, por ejemplo, para tus formas, para las batallas o para algún tipo de cumplidos, no lo haces en un mismo tablero de arte, por ejemplo, con diferentes grupos que hay que ocultar y revisar. Es mucho más fácil hacerlo con las iteraciones fuera de este primero nuestro barco. Entonces vamos a duplicar el nuestro barco, y vamos a crear diferentes versiones fuera de este panel de información que tenemos aquí en el hogar en cuatro grupos. Entonces vamos a hacer clic en el tablero de arte y voy a presionar comandos necesitan duplicarse dos veces, y vamos a tener tres estados diferentes fuera de esta pantalla de inicio. La segunda pantalla. Vamos a seleccionar los óvalos y vamos a ir a pocos y vamos a seleccionar el color naranja para que esto sea algún tipo de estado de advertencia, y el 3er 1 será estados abiertos así que va a tener color verde para los más de 40 overs. Ahora volvamos a la segunda pantalla y voy a seleccionar aquellos artículos que quiero deshacerme. Entonces voy a borrar tanto los de nosotros como todos fuera de los íconos de pico. Entonces vamos a seleccionar esto con un clic común. Y también puedes hacer click derecho en cualquier capa y luego dentro del click derecho. Tienes la segunda opción off reemplazada por para que puedas reemplazar cualquier elemento por algún otro un gráfico. Pero no lo haré ahora mismo. Simplemente puedo borrarlo con retroceso. Y ahora voy a ritmo para escuchar algún texto. Y cambiemos las alturas de la línea a 20. Y ahí tienes algún tipo de advertencia de que la alarma está inactiva y necesita activación. Entonces vamos a ir a insertar símbolo. Voy a usar signo de exclamación que he creado entre las lecciones y
lo voy a poner aquí. Vamos a mover este símbolo a la parte superior del grupo para que sea visible. Ahora es natural un poco con flechas. Voy a presionar comando d a duplicado y voy a cambiar hacia abajo auto Nagy it para que aparezca en el segundo en el segundo más. Ahora puedes acceder al campo de entrada de trigo y puedes presionar la flecha hacia abajo o hacia arriba para cambiar el trigo. Y si tienes este look, yo comprimí. Tienes. Estás cambiando de peso y altura en consecuencia para que no tengas que cambiar el
hielo del dentista del ícono en el nivel máximo de zoom. También puedes hacerlo con este campo de hielo. Ahora pasemos al 3er 1 y es bastante fácil también. Voy a seleccionar todo el texto con comando A aquí. Vamos a tocar algo de info sobre la gente que está dentro de nuestra casa. Y ahora voy a acercar y Commons desplazar, seleccionar todas las capas que quiero eliminar. Presioné el retroceso para eliminarlo. Y ahora centrémonos en esto. Mira, tengo así que voy a presionar comandos a con el candado seleccionado para acercar. Y ahora necesito a Teoh. Modificar este icono. No obstante, este es un símbolo. Por lo que necesito Teoh, haga clic
derecho en el símbolo y necesito seleccionar desconectar del símbolo para que ya no tenga este símbolo. Pero tengo este grupo original y ahora puedo entrar al modo de edición para los vectores con retorno y hacer clic en este punto vectorial y simplemente retroceder o eliminarlo. De lo contrario, si hiciera modificaciones al símbolo maestro, todas las instancias fuera de este icono de look, todas mis, mi, nuestras tablas cambiarían para que tuviera que desprender esto del símbolo primero. Ahora voy a crear en general libre para que pueda mostrar los avatares fuera de la gente que se queda en mi casa y vamos Creed y otra vez con turnos para que podamos mantener proporciones. Ahora es comandos D. Ahora es turno de prensa y sólo muévelo para que tengamos la segunda copia y co Mandy y mueva la primera copia. Ahora eso es control. G toe mostró, estuvo de acuerdo, y vamos a acercar un poco. Y ahora con turno, selecciono artículos gratis ahora si intentas moverlo en el centro del arte. Pero no es tan fácil porque aquí tenemos a este tipo inteligente diferente. Pero, ¿qué haces en esta situación? Presionas Commander G dos grupo en un grupo, y ahora puedes usar las opciones de alineación para que sea muy fácil sentirlo en el centro fuera del audible. De acuerdo, esos overs, vamos a sentir con avatares. No los hagamos para que les guste precisamente en nuestra codicia. Ocho semanas estuvieron de acuerdo, y ahora es perfecto. Entonces sigamos adelante. Y esto en realidad es un bonito importante para mí mostrarte el potencial off sketch plug ins , que son extremadamente útiles, y puedes usarlos para diferentes propósitos. La mayoría de los enchufes están encendidos Levántate, y en realidad puedes usar sketch toolbox dot com, que es un hasta libre para navegar todos esos vagones en, obtener ayuda e instalarlos,
y para bosquejar. No tienes que usarlo. Simplemente puedes descargar los planetas e instalar para programar directamente. Pero esto es mucho más fácil. Por lo que si abre la caja de herramientas de boceto, puede buscar , por
ejemplo, contenido. Generador enchufe y voy a instalar este contenido generado boceto generador Blufgan Eso Vamos a dar click en el botón instalar. Y de hecho, tenía este bloqueo sobre el instalado por lo que no lo volveré a hacer. Y ni siquiera tienes que reiniciar boceto. Simplemente vas a los enchufes, y ahí tienes este generador de contenido. Enchufe en arranques, por lo que para usar generador de contenido, necesitamos seleccionar todas las formas para que el turno haga clic en las formas y necesitamos habilitar las pocas porque usará campo para sentirlo con las imágenes. Y vamos a ir de puntera tapones que generador de contenido. Y podemos usar cosas diferentes como imágenes, números, texto. En realidad, vamos a usar un personal ahora, y vamos a ir a las fotos. Como pueden ver, podemos elegir entre hembra, mi neutral, y ahí tenemos algunas fotos femeninas aleatorias. También podemos usar algunas fotos diferentes si quieres. Entonces eso es comando de prensa Z toe bajo esta acción, y lo puedes hacer por Bolsones. Y por supuesto, se
puede utilizar generador de contenido, pero también se puede seleccionar alrededor de la acción femenina de nuevo, y hay un atajo de teclado pesado también, que es el cambio de control. Nuestro vamos a dar click en él y eso es turno de control de prensa son un par de veces para que puedas ver diferentes resultados. Y si estás contento con los resultados, finalmente
puedes dejar de presionar esos botones. Te encontrarás presionando los tiempos del dinero, pero ahora ese cambio a las fronteras y voy a hacer que cuatro personas espese de la frontera y también disminuya la opacidad. Y como se puede ver la posición fuera de la frontera, su centro, se
puede cambiar y se puede establecer dentro o fuera. Entonces nos vamos a poner fuera de la frontera y esto se ve bastante bonito. Entonces vamos a alejarnos con el comentario uno. Ahora eso es como los comandos del tablero de arte para acercar ahora. Control G. Teoh Hide estuvo de acuerdo. Y volvamos a seleccionar a los de nosotros, y voy a disminuir un poco la opacidad fuera de la frontera. Entonces ahora es perfecto. Subiremos este grupo para que podamos alimentar los nombres de nuestros avatares. El 1er 1 es Ana. Seleccionemos el estilo. Como pueden ver, hice mi tarea y e hice algunos estilos bonitos para el texto aquí. Eso es jefe común click para seleccionar ambas capas. Y ahora vamos a alinear opciones y permitirles al centro horizontalmente. Ahora pongámoslo a la parte superior, y ahora puedes mover esta capa de texto y después, sin soltar hendidura más abajo, puedes presionar la tecla de opción para que tengas duplicado. Y ahora cambiemos el texto a, por ejemplo, Jenny, y lo vamos a mover de nuevo con Vamos el yo duplicado, lo muevo y arrebatemos este texto y digamos, por ejemplo, Laura. De acuerdo, entonces ahí tenemos este primer artículo. Por cierto, puedes moverte entre las tablas de arte con atajo de teclado, que es tecla de función y luego flecha izquierda o derecha en el teclado. Eso Pasemos a la segunda pantalla y voy a crear aquí un botón extra que me
permitirá activar y la alarma y deshacerme de este mensaje. Entonces vamos a presionar son para rectángulo que es crear ángulo directo con el borde adecuado, y voy a usar este color naranja para el borde. Además, tengamos algún radio de borde grande para que los bordes estén completamente redondeados. Ahora me alegro. Hacer que este tipo se pegue con centro apagado. Mis se duplican y un poco más pequeños. Ahora es Presti en el teclado y vamos a hacer clic en los para fuera del campo de texto Trigo y este texto. Sería mejor que se posicione en el centro. Entonces si el Texas A nueve pies al centro y espero que recuerden esos atajos de
teclado , así que comando shift left Bracket key está mintiendo al comando de turno izquierdo llegó. Bracket Key está tratando a la derecha y mando jefe Slash está alineando al centro para que nos aseguremos de que todas las opciones de cambio de tamaño sean ahora correctas, porque se dice que el texto está en el centro perfecto fuera de este campo de texto. Por lo que presiono comentario A para seleccionar el texto y quiero hacer este texto en mayúsculas. Entonces vayamos al tipo hombre, ya
sabes,
jugador, jugador, pero tipo yo sabía y vamos a ir a la transformación de texto y mayúsculas ahora. Como puedes ver, sigue
siendo minúscula. Pero si te escapas de ese campo de texto, por lo que si haces clic fuera, este impuesto se convertirá automáticamente en mayúsculas. Ahora, algunos atajos de teclado más geniales para el texto. Si presiona opción comando pass u option command menos, tendrá el texto cambiado el tamaño para que tenga texto más grande con el botón más y, por
supuesto, texto
más pequeño con botón menores. Además, si ha seleccionado el campo de texto, puede presionar la tecla de comando en el teclado para acceder a la tipografía, y puede comenzar inmediatamente a escribir el nombre de la tipografía que le gustaría usar para este texto. Entonces eso empieza a mecanografiar Avenida. Y ahora puedes usar flechas de teclado para bajar lo menos o para subir lo menos y ver cómo cambian, cómo cambia el teléfono en consecuencia. Y luego vamos a seleccionar también el blanco de nuestros teléfonos y vamos a apegarnos a probablemente pesado. Y también cambiemos el color demasiado duro este color naranja. Entonces ahora vamos a centrar el texto en la botella. Vamos como ambos mentirosos y vamos a presionar nuestro atajo de teclado, que es comentario corchete izquierdo y comentario. Paride soporte a siglo directamente en el medio, y me olvidé del auto fuera de las líneas. Entonces eso es común Creek en las líneas para seleccionarlos y cambiar a los prestatarios en consecuencia a naranja y verde. Ahora vamos a crear un símbolo fuera de este fondo, así que selecciona ambas capas, y voy a hacer un nuevo grupo para este mismo tipo de símbolos. Entonces voy a tener batallado estándar de slash, y este es mi primer valiente Fuera de esta botella A Z puede ver que es totalmente sensible también, para que pueda escalar Todo se queda en el centro, y además puedo anular la etiqueta de activación para que puedes tener texto diferente para las batallas. Entonces eso es todo para las tres iteraciones fuera de nuestra pantalla de inicio. Espero que hayas disfrutado de esta lección y te veo en la siguiente.
31. Variantes de botones: Hola. Es agradable verte en la siguiente lección. Entonces en la lección anterior que hemos creado en Barton y después hicimos un símbolo fuera de este fondo. Eso es genial. Pero necesitamos algunas versiones más de estas botellas, y lo vamos a hacer en el discurso del símbolo. Entonces vamos como el estándar inferior. Y como pueden ver, podemos Onley sobrescribir aquí la etiqueta. No obstante, también
nos gustaría cambiar el color del trazo, por ejemplo, y también posiblemente hacer algunos estados, por ejemplo, cuando el usuario pasa por encima de esta batalla o cuando el pero en estos activos y hacer entonces, vamos a ir de pie a este símbolo definiciones. Entonces es doble griego en este símbolo, y ahora voy a acercarme y vamos a hacer una segunda lluvia de ideas sobre cómo
se podría hacer. Entonces primero, vamos a la barra de herramientas, y voy a hacer clic derecho y personalizar la barra de herramientas para que veas que hay un símbolo y también una botella de texto de estilo. Si agregas esos botones aquí al dinero, ya no
tienes que profundizar en este menú de inserción. Tú oh, puedes acceder, por ejemplo, los colores de los símbolos. Entonces insertemos nuestro color de acento y pongámoslo en algún lugar de este símbolo, voy a patinar para que sienta todo nuestro fondo. ¿ Y es incluso posible sentir este trazo del color azul? Bueno, si es como el color y el rectángulo y tratas de enmascararlo, bueno, tienes el fondo fuera del color de tu elección. Entonces si tienes botellas con fondo sólido, esa sería una opción. No obstante, en nuestro caso, realmente no funciona tan bien. Entonces si tratamos de acceder a estas propiedades de máscara, como puedes ver, el campo y el borde es un poco genial fuera. Significa que no puedes usar la única frontera o solo sentir por una mezquita. Entonces tal vez en futura versión de boceto, no en mente, al
menos. Pero la otra opción es ir a capa y luego convertir a contornos. ¿ Y qué crea? Un camino diferente forma diferente fuera de esta forma en particular que tienes aquí y ahora
puedes seleccionar color así como la segunda capa y encender la mezquita. Y bien, ahí lo tenemos. Por lo que es posible. Bueno, en realidad, lo es pero no es el mejor enfoque. No obstante vuelves a la instancia, ahora
puedes detener los colores fuera del contorno, y funciona bastante noveno, bonito s y anular. No es el mejor enfoque, porque si intentas escalar el fondo, puedes tener los diferentes resultados, sobre todo si te escapas lo hizo sin proporciones. Y otro, supongo, mayor problema es que por ahora, al
menos en mi versión de boceto, no se
puede anular el color del texto. Entonces eso es un problema, y vamos a resolver este problema creando diferentes versiones fuera de la parte inferior. Entonces esa es opción arrastró el 1er 1 Y ahora vamos a presionar comandos sí para crear diferentes símbolos que serán los diferentes tipos de nuestras batallas, y vamos a cambiar los colores por lo que está un poco fuera de click. No obstante, creo que vale un tiempo porque lo haces solo una vez para tu aplicación. Y cambiemos los colores por errores. Ahora tenemos excepto colores, Así que los botones verdes, y también vamos a establecer el último color a un color azul. Y a pesar de que nuestra lluvia de ideas no salió tan bien, creo que esta técnica también es muy útil y por favor recuerden esto. Convertir opciones de contorno de dedo en boceto en Segunda falla Existen algunos enchufes para boceto que pueden permitirle cambiar los valores de color a lo largo de todo el documento. Entonces si revisas los valores de color para verde, por ejemplo, esto es para cuatro db cinco e puedes con un plug in. puedes intercambiar esos valores, Tambiénpuedes intercambiar esos valores, cualquier color de diferencia a lo largo de todo el documento. Y tal vez vas a usar algún tipo de este tipo de charlas de vez en cuando. Entonces, sí, eso fue solo desde lo alto de mi cabeza. Ahora derrumbemos esos grupos, esos símbolos y cambiemos sus nombres. Entonces eso es comentario de prensa son y que la primera botella es la azul. Por lo que tenemos este acento de guión estándar. El segundo es Dash estándar, excepto que el primero 1 son los rojos. Entonces tenemos un error aquí y fondo estándar con alguna información. Eso es alerta estados. Entonces pongamos advertencia aquí y OK, entonces ahí tenemos cuatro primeros estados fuera de nuestros botones. También siempre hago fondo blanco y negro para que tenga este neutro generar botones para que pueda utilizarlos más adelante en mi proyecto. Entonces Cambiemos los colores demasiado anchos. Eventualmente, no
usaría blanco puro y negro puro también. Entonces tal vez algún tipo apagado, color ish
negro, no perfectamente negro aquí, para que puedas cambiar el valor de color todo lo que puedas simplemente manipular la capacidad. Ahora ese es el comando son cambiar el nombre de esta botella, y este será W estándar Entonces, ¿por qué probablemente podrías usar una luz estándar también. Y aquí podemos en lugar de negro usar d para oscuro. Entonces vamos a tener default antes botón oscuro y l por fondo educado, ¿de acuerdo? Y que tienes seis versiones fuera de una batalla y esto es sólo una valiente fuera de esta botella. Entonces, vamos a seleccionarlos a todos. Y vamos a opción arrastrar para tener otra copia y vamos a mandarte que tengas incluso otro duplicado fuera de esos seis botones. Ahora vamos a seleccionar todos los artículos aquí en el para dro y vamos a la opacidad. Voy a hacer el estado activo fuera de los fondos y será alrededor del 20% de capacidad. Por lo que ahí tienes estado inactivo y la segunda, la segunda capa. Entonces seleccionemos solo ángulos directos que tenemos aquí. Voy a cambiar las propiedades de estos botones y en algunas sombras. Entonces tenemos efectos en boceto por ahí, y podemos en las sombras también en sus sombras. Y podemos habilitar esas chales propiedad sindler también. Entonces no voy a usar a los más jóvenes. Y además, no
voy a ir a su sombra y vamos a retocar un poco los valores. Voy a poner cero en posición y para que tengas sombra que esté igualmente distribuida a través trazo y puedas cambiar la borrosa de esta sombra. Lo vamos a dejar a las cuatro. Y bueno, eso es lo que voy a hacer. Voy a cambiar el color para que puedas tener hasta una sombra de luz aquí para que nuestros fondos tengan este pequeño efecto de resplandor, y no voy a usar color blanco puro. Pero en cambio voy a usar este tipo de color ish amarillo y tal vez dinero. Personas que manipulo el son lejos capacidad un poco tan bien como se puede incluso establecer un modo de
mezcla para días. Voy a quedarme con alrededor de 36 Alfa Value y este estado activo fuera de las botellas ahora se ve muy bien. También voy a encender el campo y usar la sensación blanca con algunos sólo un par de
capacidad por ciento , tal vez seis o 5% de capacidad. Y esta segunda fila es ahora el estado activo fuera de mis batallas. Por lo que ahora sería mejor cambiar los nombres de toda esta copia de instancias de abajo. Pero no te voy a perder el tiempo. Simplemente voy a esta sección inferior fuera símbolo, intercambio muchos anuncios Ahora puedes elegir el botón que quieras usar. Por ejemplo, esta copia variantes que son estados activos y copian a la violencia que son estos estados capaces. Entonces pasemos a otro. Y ahí lo tienes. Entonces así es como organizas la estructura de fondo en el discurso del símbolo. Por lo que gracias por su atención. Y te veo en la siguiente lección.
32. Vista de iOS: sketch tiene un gran futuro que se llama sketch Mirror. En esta breve lección, te
voy a mostrar cómo previsualizar tu diseño directamente en un dispositivo móvil como tablet o teléfono. Por lo que primero necesitas descargar, congelar, atrapar espejo hacia arriba desde la tienda APP y está disponible solo para dispositivos IOS, al
menos por ahora. Pero también, puedes probar esta fiesta francesa sí, como cristal arriba o pagado, que es vista previa a color, y debería funcionar debajo de ella también. No obstante, en un segundo te voy a mostrar un consejo sobre cómo previsualizar en Android dentro de tu red local y cambiemos el boceto. Y ahora vamos a usar este medidor de captura para arriba en mi iPhone. Y cuando abres el up, tienes ah, información
corta de que la APP está conectada al archivo de boceto en el que estás trabajando, así
como una vista previa de los primeros artículos. Para mí, siempre
es mejor conectar mi teléfono con el cable U. S B porque también está cargando. No obstante, solo
puedes usar la red WiFi y tienes que estar en la misma red WiFi tanto para tu laptop como para tu computadora así como para tu iPhone. Por lo que ahora puedes hacer clic en este ícono de espejo en la barra de herramientas y tienes dispositivos conectados. Tengo un dispositivo conectado, que es mi iPhone. Y además, tengo este pequeño ícono que permitirá a Teoh previsualizar este proyecto también en el navegador. Y este es este truco de manos para un androide. Si tienes tus dispositivos Android en la misma red, simplemente copia la dirección. Entonces tienes la dirección I P y deportar, y pegas esta dirección en el navegador Androids y esto es todo. Es así como puedes ver los cambios de vida fuera de tu boceto. Cinco dentro del navegador Android. Por lo que normalmente trato de tener mi iPhone conectado todo el tiempo. Y cuando estoy trabajando en un proyecto basado en Web y, por ejemplo, quiero compartir con mis colegas en el trabajo, a veces puedo pasar la dirección I P, y pueden previsualizar el prototipo también. Entonces ahora echemos un vistazo a la arriba. Si tocas el tablero de arte, puedes acceder al primero nuestro barco, y luego puedes cambiar un deslizar a la izquierda o a la derecha. Teoh tener una vista previa o fuera de algunas diferentes nuestras tablas, entonces puedes seleccionar cualquier cosa en el nuestro barco. Y como pueden ver, los cambios que hago en boceto son en tiempo real en mi dispositivo. Y es realmente una gran experiencia tenerla en tu dispositivo todo el tiempo porque
siempre puedes duplicar cheques. Por ejemplo, los teléfonos, tamaños de
teléfono, aparecen correctamente. Si son legibles en el dispositivo y también alturas de línea, puedes aplicar algún ritmo de diferencia para los elementos que aparecen en tu formulario. Y también puedes comprobar dos veces los colores, lo cual es bastante importante porque a veces hay un cambio menor entre los colores en tu monitor y en tu dispositivo móvil. Por lo que te animo encarecidamente a usarlo todo el tiempo para tener encendido este espejo de boceto . Y además, es agradable tener tu teléfono conectado con cable USB porque te da una
vista previa de vida suave y también con cargas tu dispositivo. Entonces eso es todo por ahora. Te veo en la próxima película
33. Pantalla de inicio: En lecciones anteriores, hemos creado una pantalla que dice, Pantalla de
inicio y tenemos tres variantes diferentes fuera de la pantalla. Entonces ahora voy a seleccionar el primer tablero de arte, y voy a opción arrastrar para duplicarlo. Y así es como estructuro realmente la pelea de bocetos. Entonces de arriba a abajo, vamos a tener diferentes secciones de nuestras aplicaciones. Entonces este es básicamente el flujo del usuario, y así es como el usuario navega por diferentes secciones de la aplicación. Y en lo que se refiere a esta horizontal de compañera va, vamos a duplicar los tableros de arte horizontalmente y a crear diferentes variantes fuera las páginas o diferentes subsecciones de cada sección fuera de nuestra aplicación. Entonces así es como funciona. Y ahora centrémonos en esta primera pantalla. Entonces, antes de ir a la pantalla de inicio, vamos a tener una pantalla de registro. Entonces vamos a la capa de fondo. Y ahí tenemos esto. Grady y yo realmente no necesitamos a este Grady para la pantalla de registro. Entonces lo voy a desprender de Símbolo, y ahora puedo acceder al rectángulo y puedo apagar los campos. Vamos a sentir y vamos a apagarlo. De acuerdo, entonces ahora podemos trabajar con esta primera pantalla y vamos a encender la imagen del héroe. Voy a hacer esta máscara un poco más grande para que cubra todo un tablero de arte. Y además, necesitamos hacer algunos ajustes a la foto para que no te guste la foto, y puedes moverla tan bien como puedas redimensionarla. Recuerda que debajo de esta foto, tenemos su resolución nativa para que aunque multiplique este tamaño por dos en cuanto su concierto, voy a tener perfecta imagen de Cory. Entonces tal vez podríamos hacer eso un poco más pequeño. Y pongámoslo en el centro y también cualquiera como se puede ver, a veces trabajar bien para mapas de beat de alta resolución en boceto es bastante lento. Entonces si tienes muchos mapas de beat y tratas de moverlos, redimensionarlos, bosquejar mi respuesta lentamente, y para que eso suceda más rápido, puedes ir al menú de edición de la imagen, o simplemente puedes pulsar volver sobre la imagen, y aquí puedes hacer una selección. Y con esta selección, puedes invertir el cultivo o, por ejemplo, sentirlo con algo. De acuerdo, incluso
puedes usar Magic one. Pero por ahora, sólo
vamos a hacer una selección que sea un poco más grande que el arte sobre el tamaño. Y cuando tengas lista esta selección, puedes ir a las opciones y seleccionar cultivo. Y ahora, si recortas, te deshaces de todos los picos innecesarios. EU y sketch responderán más rápido. Otra forma de optimizar tus imágenes es utilizar una de las posiciones en el sketch money. Y si seleccionas la imagen y vas a la capa, puedes seleccionar imagen y reducir los sitios de imagen. En ocasiones si tienes imágenes de muy alta calidad en boceto, esto podría ayudar. Pero para esta imagen, ya está optimizada. Entonces Sketch dice que ya no puede optimizar este cinco, así que básicamente utilizó esta opción sabiamente porque más adelante, es posible que no
puedas darle la vuelta atrás. Entonces ahora disminuyamos la opacidad de nuestra imagen, y me gustaría mostrarles chicos sobre sus opciones. Entonces vamos a encender el gas ahí dentro, y la opción estándar te está dando la posibilidad de cambiar. La cantidad de desenfoque en usted puede tener imagen más o menos borrosa mientras usted si accede al desenfoque de
movimiento. También puedes cambiar el ángulo. Por lo que ahora se puede ver que tenemos ángulo diferente para el desenfoque y podemos determinar una cantidad
adecuada. La siguiente opción es zoom, desenfoque, y para ensamblador, puedes hacer clic en editar para agregar el origen, y puedes cambiar la región para que puedas tener este zoom yendo a algún
lugar en particular fuera de tu imagen. Alguien que son picos de tu imagen y eso es llevar el gas ahí para esta imagen y voy a tener alrededor de siete picos de borrosa aquí y ahora vamos a colocar aquí algún texto. Y ya he copiado el texto de otro arte a bordo para que no perdamos el tiempo sólo escribiendo el texto. Y también por favor sepan que si
presionas comando v, lo pegas en el lugar directo desde donde estaba afrontando. ¿ Y si seleccionas algo por ejemplo, esta forma y presionas shift command v lo vas a pasar a la esquina superior izquierda de esta forma
seleccionada y además tienes una opción dedo del pie, clic
derecho o control, clic en cualquier lugar y usa el comando de ritmo aquí y luego boceto lo pegará en este mismo píxel que has hecho clic comenzando desde el borde superior izquierdo. Está bien, peguémoslo aquí y ahora intentemos hacer un pequeño ícono por ahí, así que voy a usar un personal y en realidad no hemos usado este tour desde el principio de nuestro curso, pero por otro lado, no es tan útil en boceto. Pero puedes ir creativo con el dedo especial y tal vez, imaginemos que podemos dibujar algo. Podemos trazar una línea como ésta. Y lo grandioso de esta línea es en realidad que se trata de un borde, por lo que podría cambiar sus propiedades. Y esto también es un camino, por lo que es vector completo. Ahora. En realidad tratemos de crear algo útil con el pase. Va y vamos a tratar de crear un pequeño icono de huella digital. Voy a dibujarlo así, y no es el cubista que conozco. No obstante, ahora se puede acceder a las propiedades apropiadas del borde, y se pueden cambiar las hormigas para que alrededor de eso se puedan cambiar las articulaciones. También puedes determinar el guión y la brecha e incluso, por ejemplo, tener cuatro y 10 e incluso ir más ancho y tener otros cuatro y dos picks, una brecha para tener diferentes efectos, y en realidad hay bastante gran probabilidad de que si lo intentas lo suficiente y cambias todos esos valores así como si ingresaste vector algo moho más adelante. Entonces si presionas return y accedes a todos esos puntos vectoriales que tienes aquí y tratando cambiar sus posiciones usando las flechas del teclado y ella pasó 10 o 15 minutos en esto, obtienes este tipo de ícono. Y otro enfoque creativo para usar una fantasía es en realidad hacer fuga para que puedas hacer algunos sencillos Haz esos, así, y sé que no es muy bonito. No obstante, si accedes a las propiedades del borde en este momento, puedes crear algo que sea una especie de gráfico ah, por ejemplo, o algunas partículas para que puedas ir con extremos redondeados y luego tener algún pequeño guión y enorme brecha. Por ejemplo, 100 y ahí tienes los puntitos Feingold alrededor, y si cambias el guión, habrás estado volando en diferente, diferente madre, y también puedes cambiar la brecha en consecuencia para que tengas diferentes partículas, y ahora puedes acceder a esta segunda sección y dicho, por ejemplo, dash off free y cap off 200 solo hacer que esos valores sean diferentes. E imaginemos que aquí tienes un diagrama de flujo o un gráfico, y menos te pueden gustar esos datos de tal manera. Entonces es bastante guay, en realidad. Ahora, eso es un remate de este ícono. Voy a dibujar un rectángulo aquí y vamos a duplicar distrito ago comandos D Ahora
imaginemos a la izquierda Voy a entrar en este cualquier molde con retorno Selecciona uno los
puntos vectoriales y ponlo 20 pixels arriba y el 2do 1 20 pixels abajo con turno y flecha abajo. Ahora vamos a crear por aquí y que seleccionen ambos rectángulos, y voy a usar operación booleana fuera de Union. Ahora, necesito una línea aquí, así que presiono l y trazo una línea que la posicione correctamente. Ahora quiero eliminar la parte fuera de la línea que está detrás de las huellas dactilares. Entonces déjame entrar en el modo de edición del primer rectángulo, y voy a sumar aquí a puntos vectoriales. Y además déjame entrar al taburete de tijera y borrar este segmento debajo de mi ícono. Entonces eso es todo. Básicamente, está casi terminado. Ahora, tal vez voy a entrar en este, um modo de edición otra vez y seleccionar con turno. Tanto esos puntos vectoriales como desplazan a la izquierda a la derecha nuestra propia magia a la derecha. Ahora lo que vamos a hacer es seleccionar el tablero de arte y cambiemos su nombre. Por lo que presiono Comando son y dije, Es pantalla de registro. Seleccionemos aquí algunas capas del ícono y vamos a crear un grupo a partir de ellas. Voy a cambiarlo a icono de slash de registro. Entonces vamos como ambos campos de texto y también hagamos algo de limpieza por ahí. Esto será registrando la preciosa información de slash. Y con nosotros, tenemos este dedo trae imagen de héroe casa. Entonces tal vez dulce hogar y poner aquí a Logan como nombre fuera de nuestra pantalla. Y también me van a leer esta,
uh, uh, cerrar la sesión de esta sección de casa y núcleo para mi campo. De acuerdo, eso es todo. Tenemos la primera parte fuera de nuestra pantalla de registro. Ahora vamos a seleccionar el segundo campo de texto con comando y vamos a opción droga. Es para que tengamos una copia aquí y debajo del ícono. Te voy a dar su opción toe logging con sus contraseñas. Entonces voy a usar símbolo fuera de una batalla y usemos este estándar sobre el que se ha mentido voy a hacer ese fondo más grande. Y además, me gustaría ponerlo en este centro fuera de mi Archibald horizontalmente. Por lo que presioné comando izquierdo corchete cuadrado. Ahora puedo hacer anulaciones al texto, pero también quiero cambiar el borde. Por lo que llegué fuga a selecciono desprendido del símbolo. Y ahora puedo cambiar el texto. Entonces pongamos aquí contraseñas de tipo. Por lo que esta botella en realidad se transformó en un campo de entrada. Vamos como el grupo. Voy a presionar cinco en el teclado para cambiar la opacidad al 50%. Y como este es un campo de impulso, también
voy a cambiar el estilo de este rectángulo. Voy a seleccionar rectángulo y así, como dash off cuatro y Gap off nueve. Y eso era imposible de hacer sin separarlo del símbolo. Por lo que ahora podemos agrupar algunas capas, por ejemplo. Eso es como esos grupos que han puesto huellas dactilares dentro del icono de registro. Y vamos a crear un símbolo fuera de este ícono voy a poner puedo escuchar y esto es el registro. Y además, voy a crear símbolo fuera de esta botella también. Entonces vamos a seleccionar las capas. Voy a crear símbolo. Pongamos entrada y voy a montar palabras de jefe, y eso es todo. Por lo que por favor recuerda mantener todo en tu columna posterior limpio y ordenado. Ahora eliminemos este grupo. Ya no es necesario. Cambiemos de nuevo un positivo al 50%. Y ahora vamos a crear este estado diferente para nuestra pantalla de inicio de sesión. Entonces vamos a dar click en el nombre fuera de este barco de arte y vamos a duplicar con comandos D y este será el campo activo estado off type password input para que subamos todo. Y también quiero resaltar este campo de contraseña tipo. Entonces vamos a gustar este campo y vamos a cambiar la opacidad del 50% al 100%. Y además vamos a anular este tipo de entradas de contraseña para que tengamos sólo línea aquí. Por lo que simboliza que el usuario puede aquí mismo. Y también tenemos que ir al archivo. Y aquí tenemos las plantillas. Voy a usar IOS. Tú diseño plantillas, y de este templado, puedes pedir prestado, por ejemplo, un teclado oscuro. Voy a venir a ver copias teclado aquí. Voy a pegarlo y moverlo al fondo de nuestra pantalla así. Y ahí lo tienes. Parece que tenemos este aspecto siendo casi listo. Y si echas un vistazo a los símbolos, esos símbolos pegados también están aquí. Por lo que tenemos un teclado y oscuro y inferior. Esa es la estructura. Esa es la convención de nomenclatura para este teclado para que puedas usarlo más adelante en tu siguiente parte. Tableros. A lo mejor también vas a cambiar esto. No realmente en ello. Texto y presione el comando A en el campo de texto y simplemente, digamos escriba contraseña aquí. Probablemente es Esto es todo. Ahora puedes volver a la página de símbolos, y puedes ajustar algunos símbolos que hemos creado en esta lección. A lo mejor vamos a crear este efecto halo para el icono de registro también. Entonces esa es una sombra aquí ya que vamos a usar alguna sombra simple. Y cambiemos el núcleo por algo brillante. A lo mejor nuestro uno de nuestros colores de acento. Cambiemos la posición Y. Voy a poner cero aquí para que la sombra esté distribuida por igual a través de nuestro icono. No y ahora se ve bastante bonito. Por lo que este es un bonito efecto halo que aparece en ambas instancias fuera de este icono, y eso sería para esta lección. Espero que se unan a mí en el siguiente
34. Pantalla de hogar: bienvenidos a la siguiente lección, y vamos primero. Habla de páginas en escaso para que puedas agregar tantas páginas como desees. Y la pregunta es, ¿realmente los necesitas? Bueno, obviamente, depende del proyecto, porque si tienes un proyecto grande y tienes diferentes secciones fuera de tu aplicación o por ejemplo, , un sitio web, tú vas a tener diferentes páginas para optimizar tu flujo de trabajo. Para mí, creo páginas, sobre todo porque fuera de la eficiencia bien, si tienes páginas diferentes, boceto tiende a funcionar más rápido. Y si tienes un montón de nuestros tableros en una página, probablemente tendría un impacto directo en el rendimiento de tu máquina. Entonces si descubriste que el boceto apenas empieza a funcionar lentamente, entonces considera tener una siguiente página para el siguiente artículo fuera de tu proyecto. A veces, sin
embargo, es agradable trabajar en la misma página. Eso se debe a que se pueden acceder a diferentes tableros de arte y, por ejemplo, copiar y pegar algunos elementos. Algunos campos de texto algunos iconos desde ahí, y no tienes que ir a, por ejemplo, insertar símbolos y cosas. Por lo que es sólo tener en cuenta. Pero por favor recuerda también que por razones de eficiencia, te gustaría tener más de una página en tu proyecto y que normalmente mantendrás diferentes secciones fuera de tu aplicación o diferentes secciones fuera de tu sitio web como una página
diferente . Entonces ahora vamos a crear una pelea diferente por una sección general fuera de nuestra aplicación, y ya lo he arreglado uno de nuestros aburridos de arte para que pudiera pasarlo aquí. Y vamos a partir de un cierto tamaño fuera del arte a bordo y tal vez, sólo tal vez, usaremos algunos activos que tenemos aquí también. Entonces reiniciemos la posición X e Y 200 Voy a eliminar casi todas las capas. No obstante, voy a tener este campo de fondo para estar dentro de este tablero de arte, y vamos a tener un símbolo fuera de la parte superior. Por lo que ahora es el momento de probar algunas habilidades de teclado. Vas a tener que presionar tina de opción, y luego aprendiste en la primera en la primera posición de alimentación de entrada. Presionas cero superior cero, y ahí tienes restablecido la posición fuera de las coordenadas X e Y. No estoy seguro si eres gamer o si juegas antes a Mortal Kombat, pero esta opción Top zero top zero secuencia suena como una fatalidad o algo así. Entonces vamos ahora a anular y vamos a anular por encima de los campos de texto. Voy a poner habitaciones y también seleccionar habitación aquí. Y lo que me gustó anular también son los iconos. Entonces tengo esos iconos a la derecha y a la izquierda y vamos a ir a un símbolo sobrescribe. Y en cambio, fuera de esto
doy mi consentimiento, voy a elegir la configuración de iconos y necesito anular esta cámara con algún tipo de
botón de inicio que me permita ir a registrar una pantalla. Y si intento Teoh, cámbialo. Como se puede ver, no
hay símbolos para anular y ¿por qué sucedió esto? Bueno, en realidad, esta es una pregunta muy buena porque house catch determina qué tipo de símbolos
mostrarte en este símbolo, ¿
verdad? Bueno, si vuelves a la página de símbolos, descubriste que tienes muchos símbolos, y el boceto en realidad elige los símbolos que pueden sobrescribirse entre sí por el tamaño del símbolo. Y déjame mostrarte lo que quiero decir. Si selecciono cámara de icono y voy a la configuración de tamaño, puedo ver que es de 24 por 22 píxeles. Seleccionemos algún otro ícono. Por ejemplo, doy mi consentimiento, y como pueden ver, este símbolo es de 24 por 24 píxeles. E incluso si tienes un icono que no está completamente encerrado por el símbolo, no
es un problema a menos que tengas el símbolo que es de tres tamaño correcto y que pueda anular eso. Si tienes 24 por 24 funciona bien. Entonces cambiemos el tamaño de esta cámara ícono para que sea de 24 por 24 píxeles. Y si lo haces así cambiemos la altura y regresas. Teoh esto, uh, pantalla
general. Y ahora intentemos anular la cámara, y todos los Akron están al menos. Y eso se debe a que todos los iconos son de 24 por 24 para que puedas cambiarlos fácilmente, y yo lo voy a cambiar por este pequeño ícono de casa con el candado y este ícono de casa. El mundo va a la pantalla de inicio de sesión. Pero por ahora, centrémonos en el siguiente punto aquí. Voy a poner una botella. A lo mejor usemos esta botella de acento estándar, y en base a esta batalla, crearé una simple notificación que aparecerá en la parte inferior. Y vamos a presionar el control G para activar, decretado así como comandos para acercar este elemento y que centran esto en el lienzo . También puedo presionar control l para ver el layout y cómo se alimenta en el layout para que puedas hacer esos pequeños ajustes. Y siempre es agradable hacer esos ajustes dio los elementos que aparecen en el único layout s para que sea más estable y se vea mejor. Ahora Vamos a separarlo del símbolo y vamos a acceder al rectángulo ahí. Voy a cambiar el color para que tenga el campo fuera un color azul que es seleccionar nuestro color
azul. Y además voy a cambiar, activar textos y vamos a escribir texto transformado, y voy a seleccionar conocido aquí. No quiero que aparezca aquí el texto en mayúsculas. Y por último, para este activo, vamos a cambiar el estilo del texto para que tal vez sea uno de los
subíndices, y voy a seleccionar la versión más ligera de la leyenda. Entonces la versión 90 ahora que ha cambiado las etiquetas que aparecerán aquí. Espero grano así que las ventanas se están cerrando y, um, pongámoslo en el centro de nuestro tablero de arte, y eso simplemente no es su apretado al fondo para que sea ópticamente correcto. Ahora cambiemos el nombre a notificación y organicemos más adelante para que podamos crear símbolo off notification también encendido. Voy a ir a entrar a este símbolo y lo que necesito aquí es un pequeño icono X para que
puedas cerrar la notificación. Por lo que un peso inteligente fuera del partido haciendo tal icono es crear un rectángulo que es la altura de la letra L A. Y cambiemos el grosor de este dedo del pie rectángulo uno, y eso lo posicione correctamente para que ahora podamos acceder a las herramientas vectoriales opresivas V y crear primera línea vectorial. Ahora tenemos que duplicar esta línea, así que presionemos comando el y volvamos horizontalmente. Ahora podemos deshacernos del rectángulo, seleccionar ambos caminos y agruparlos con el comando G. Y tal vez, sólo tal vez, parece que mejor. Si volvemos atrás y seleccionamos ambos fuera de estas líneas así como vamos a fronteras y vamos a elegir alrededor, termina. Ahora. Es perfecto. Entonces volvamos a la instancia, y creo que eso es todo en lo que a nuestra notificación se refiere. Entonces ahora eso es comando de prensa. Un dio ver todo el arte a bordo, y lo siguiente que vamos a crear es un óvalo que representará la escala de temperatura . Y sin soltar el botón más izquierdo ni el dibujo, puedo presionar barra espaciadora para posicionarme en corregir el Archibald. Pongamos temperatura aquí. Voy a poner 25 grados de centro. Genial. Entonces vamos a necesitar que Teoh busque un personaje especial fuera de las celdas. Usa la grasa y voy a presionar control Comando Barra espaciadora. Si presionas comandos de control Barra espaciadora, vas a abrir esta ventana de caracteres especiales con emojis y viejos, los personajes que puedes buscar y comencemos a escribir las celdas usan. Y ahora puedes copiar este personaje con mar común y pegado directamente a tu texto. Pocos que ha cambiado, decide tal vez algo alrededor de 70 o 60 y también vamos a cambiar el peso a lo más audaz fuera del mo para la tipografía Avenue, que es negra. Ahora seleccionemos con desplazamiento ambas capas y comentemos corchete cuadrado izquierdo y derecho para
posicionarse en el centro. No obstante, como se puede ver ahora, Moffett está perdiendo con el arte y porque este texto debe colocarse más a la derecha ya que hay una venta que firma y no está bien autobús en este momento. Entonces pongámoslo, No lo
hagamos con flechas de teclado un poco a la derecha, y también voy a cambiar el grosor de esto más, así que eso es realmente grueso. Además, me gustaría eliminar esta parte inferior del sobre, y voy a usar reglas. Entonces vamos a presionar el control son para gobernantes y vamos a acercar con comandos a ahora. Vamos a tener una guía que se sienta en algún lugar por aquí, y ahora necesitamos entrar en el modo vectorial de edición para el general. Entonces vamos a seleccionar el sobre Tha's press return, y esta pequeña guía me ayudará a posicionar los puntos vectoriales en un eje para que después puedas seleccionar la herramienta de tijeras. Vamos a tijeras y eliminemos esos dos segmentos, y ya casi estamos listos. Ahora vamos a las propiedades de los bordes y vamos a seleccionar alrededor. Termina 40 fronteras. Sé que es gracioso porque estoy bajando la voz cuando estoy enfocada, Pero por favor, ten conmigo. Casi lo dejamos listo con nuestro componente. Voy a deshacerme de los guías así como de los gobernantes. Y ahora vamos a crear uno más sobre el cual se sentirá con el color blanco. Y por cierto,
si quieres habilitar la sensación, puedes presionar F en el teclado y para hacerlo con Borders, puedes presionar be ahora se ha cambiado el color fuera del borde así como un grosor. Y una última cosa que voy a hacer a la frontera es disminuir la capacidad. Y dejemos la opacidad por alrededor de 75 eso es todo por ahora. Voy a seguir diseñando esta pantalla en la siguiente lección.
35. Pantalla principal: seguimos trabajando con la misma pantalla. Y ahora centrémonos en el resplandor. Voy a seleccionar esto por encima de lo que teníamos aquí y como campo fronterizo. También podemos elegir ingredientes, por lo que tenemos este color sólido. Pero también podemos elegir la otra opción, que es lineal Grady Int así como radio radiante y angular graduada. Y para este artículo en particular, creo que son angulares, radiantes, con los autos que tengo aquí en este pequeño rectángulos serán perfectos. Entonces como puedes ver, hay un círculo, y en este círculo tenemos dos colores. Por lo que tenemos que colorear paradas por ahora para este angular, radiante, y obviamente podemos ajustar esos colores así como tenía algunos otros colores al radiante con el ciclo de vidrio. Seleccionemos esos dos colores, que podemos hacer, que pueden seleccionar directamente desde el recolector de color. O podemos hacer click en este pequeño puntitos aquí para seleccionarlos también. Y de esta manera simplemente puedes cambiar los valores de color. Pero también puede arrojar y arrastrar por encima de la escala así como este círculo para cambiar la posición fuera de este color en lo radiante. Entonces ahora vamos a algunos colores aquí y vamos a cambiar los valores de color. Voy a empezar con este primer color y vamos a usar el selector de color aquí para seleccionar el primer auto que tengo. Y ahora voy a añadir otro color con sólo hacer clic en la báscula, y eso es ver a esta hijita. Yo lo puedo mover aquí, y eso es seleccionar diferente color. Entonces voy al color azul más claro ahora, otro acercamiento para crujir directamente en el dedo del pie del círculo. Agrega otra parada de color y presiona el control, mira para ir directamente al seleccionador de color. Y eso es lo que vamos a hacer para el próximo color. Por lo que estoy agregando colores, presionando control, ver y seleccionando colores de mi paleta de colores del Pekar. Ahora puedes mover los colores alrededor, y puedes ajustar este Grady para que quede perfectamente alineado. Y esto lo puedes decir como que tiene sentido porque tienes las temperaturas más bajas,
temperaturas en el lado izquierdo fuera de este caso para que utilicemos colores azules de lo que tienes naranja en el medio y en el lado derecho de nuestra escala. Fuera nuestro radiante. Tenemos temperaturas más altas para que utilicemos colores rojos. Ahora vamos un poco a este deslizador. Necesito cambiar la posición del trazo para estar fuera y tal vez cambiar el grosor. Ahora cambiemos el tamaño de este componente para que sea un poco más pequeño y también me
voy a mover. Voy a usar la capacidad de apagado alrededor del 90% para unos pocos. Ahora vamos a duplicar esto con un int Grady, y quiero deshacerme de esta frontera. Por lo que sólo tienes que arrástrelo fuera del panel de propiedades y tener algún otro borde con un
color sólido . panfletos se utilizó algún valor de oferta para este color azul oscuro, y vamos a tener el grosor de uno. Y también me gustaría crear otro elemento. Vamos a duplicar esto una vez más, y ahora quiero mostrarte técnica cool que te permitirá crear escala vertical. Entonces vayamos a las fronteras fuera de esto. Copia, también. Y usemos el valor dash off one y gap value off 10. Ahora desactivemos el alrededor de esto fuera de los bordes. Voy a ponerlos para que sean rectos, y si vas al grosor, la magia sucede como puedes ver, puedes crear estas líneas verticales como escala de pago. Si vuelve a acceder a las propiedades del borde y cambia el tamaño del hueco, también
puede cambiar este tamaño del caos simultáneamente. Entonces vamos a crear tal vez 24 picos de gab, y esto de aquí se va a duplicar de nuevo. Entonces es mercancía prensada, y eso es porque queremos tener esta escala externa también. Entonces cambiemos la opción de droga para crear otra y cambiemos el color fuera de la frontera . Seleccionemos algún color más claro y modifiquemos también la opacidad. Vamos a fijar unos 30. Volvamos a estas propiedades de borde, y eso ha cambiado el valor de gab para que tengamos menos líneas. Por lo que definitivamente necesitas recordar esta técnica. Y lo que es aún más increíble y fantástico es que si le echas un vistazo al panel Layers, tienes copias gratis de la misma fuera de cuatro copias de la misma encima mientras en el lienzo se ven completamente diferentes, y eso lo logramos al, ya sabes, usando la imaginación y también con habilidades fantásticas fuera del boceto. Entonces una última cosa que vamos a hacer a este cumplido de temperatura son las etiquetas de los dedos. Voy a usar algún estilo de texto bastante fino off Caption 50 y vamos a seleccionar esta Textile Creek una vez y poner la primera etiqueta fuera 10 grados. Entonces vamos como este tipo. Voy a presionar el comando B, que es atajo para el ajuste, el texto demasiado negrita. Y no es Fox
negrita, es un realmente cambiando el blanco del dedo del texto pesado y todo el tiempo tengo esta vista previa de
iPhone encendida para que pueda mirar en mi teléfono en mi dispositivo real y determinar si este texto puede ser más pequeño si puede estar fuera menos capacidad y puedo tomar decisiones si dejarlo tal como está o, por ejemplo, hacer ese eso más grande. Siempre es mejor tener esta vista previa del dispositivo, sobre todo para estos pequeños datos sensibles que tienes aquí. Y pongamos algunas otras etiquetas, tal vez por este trabajo de fuego. Voy a usar el valor off 22 y el despedido a la vanguardia en realidad será de 26 o 27 y vamos a terminar con 32 grados. Por lo que ahora son un complemento está listo así como es la primera parte fuera de esta pantalla. Entonces para la segunda parte de la pantalla, vamos a usar algunos iconos y empecemos con la herramienta de línea. Voy a presionar L en el teclado y condujo con turno. Voy a dibujar una línea recta perfecta. Ahora bien, si quieres cambiar la altura de esta línea, a
veces trato de hacerlo y, por ejemplo, y arrástrela para que pueda cambiar el trigo u ocultar de la línea. Y no es tan fácil. Tan bonito profundo aquí es presionar un retorno, y si presionas return, por lo que si entras al modo de edición vectorial, tienes este primer vector puntos seleccionados automáticamente. Ahora podemos golpear fácilmente esta línea altura o trigo con tus flechas de teclado, y puedes presionar hacia arriba nuestra o hacia abajo flecha. También podemos presionar turno por 10 pieza de incrementos, y ahí lo tienes. Entonces vamos a presionar comandos D y duplicados clic derecho en la línea. Transformar y girar menos 90 grados. Y ahí tienes otro. Seamos iguales ambos encuentra y agruparlos. Comandante Gina. Cambiemos la opacidad 10 pulsando uno en el teclado, y ahora todo lo que necesitamos aquí son los iconos e iconos. En realidad, elijo entre los iconos son de este extremo, Nikon dijo que te mostré. Y ahora sólo puedo copiar y pegar esos iconos. Como se puede ver, ya
son núcleos incorrectos. Entonces ahora sólo es cuestión de posicionarlos así como poner aquí algunas etiquetas. Algo interesante aquí es que si impresionas a un té en este momento y a los griegos, su nuevo campo de texto heredará todas estas fichas que tenías en el campo de texto anterior. Por lo que ahora, como se puede ver la Avenida Tipofaces, tenemos el peso apagado pesado y el tamaño apagado nueve. Para que esa fue la última configuración son tipo toe saber que podemos escribir acciones para la etiqueta fuera este primer ícono, y vamos a cambiar de color pronto para que coincidan con los iconos. Pero por ahora, esa es droga de opción para un duplicado, y la segunda etiqueta serán los dispositivos. Ahora podemos seleccionar los dos fuera de este texto campos y opción arrastrar de nuevo para que tengamos otro set off Laborista ahora esto para el trabajo es energía y el último es CC TV. De acuerdo, ahora cambiemos los colores en consecuencia para que las acciones de selección ahora controlen, veamos para un icono de cuentagotas e incluso para una línea tan gruesa y delgada que puedas fácilmente. Con este cuentagotas seleccionado, puedes seleccionar fácilmente el color. Y eso es porque tienes este hielo de Superman que te permitirá seleccionar píxeles individuales. De acuerdo, entonces tenemos los iconos así como los trabajos. Ahora elegamos a este grupo con líneas. Esa es la posición que los posiciona correctamente, y ahora eso es click en el turno de grupo. Haga clic en el CCTV para seleccionar todas las capas. Vamos, G para agruparlos y ponerlos en el centro de nuestra pizarra de arte que se está moviendo hacia arriba con la flecha del
teclado, y eso vamos a volver a la copia de línea para que podamos hacer esta línea un poco más ancha . A lo mejor es como ambos puntos vectoriales y hacerlos para el té. Grandes SOE. Por qué hay Cada lado. Entonces me parece que es casi el final de la pantalla mientras tengo un bono empinado para ti. Entonces si quieres reutilizar esto,
um, um, Grady, en este ángulo, un radiante que has creado a partir de los colores que tenemos aquí, puedes añadirlo a documentar InTs Grady. Como puedes ver, tenemos resplandor global así como documentar Grady ins y puedes dar click en el signo más para agregar este poco radiante y reutilizarlo más adelante en tu proyecto. Entonces eso es todo por esta pantalla, y eso es horrible. Esta lección los veo chicos en la próxima película.
36. Ajustes de la pantalla: que está procediendo con nuestra solicitud. Voy a seleccionar el tablero de arte y comando de prensa, dijo
Di Dio. El siguiente verde y es el próximo tren. Vamos a deshacernos de todas esas capas y esto en realidad serán las pantallas de ajuste. Entonces vamos a seleccionar este arte a bordo. Presionemos comando a y que vamos a ir a la pantalla de ajustes presionando en este poco que tengo en la derecha fuera de nuestra parte superior. Voy a usar stop aquí afuera, y voy a anular casa a la estática. ¿ De acuerdo? Tenemos que cambiar este ícono también a un icono de atrás y este pequeño ícono a la derecha. Nos vamos a poner a que pueda. Además, si queremos agregar algunos ajustes personalizados. Ahora centrémonos en el medio de este tablero de arte y vamos a crear una pareja genial y aquí . Entonces, empecemos por crear una línea. Voy a presionar L en el teclado. Entonces creo una línea perfectamente recta con turno presionado en mi teclado. Y vamos a apegarnos a la codicia Vamos a tenerlo 46 p fuente a la izquierda y a la derecha, y vamos a disminuir el espesor. La opción uno ahora arrastró esta línea para crear otra y también asegurarnos de que se alimente al griego para que hayamos ganado el roll off nuestros ajustes y vamos a ponerla 64 Gigs
of Space . Volvamos al 100% de vista haciendo doble clic en este icono de bucle y vamos al texto de estilo y vamos a tener este Heather 90. Pero yo creo en este Texas. Es un poco demasiado grande. Ahora vamos a tener música arriba como primer ajuste, y eso viene en un y cambiar el tamaño del texto. También puedes hacerlo con el atajo de teclado que te he mostrado. Pero aquí, voy a poner 19 por el tamaño de mi texto. Voy a dejar esto y 90% de color blanco. Ahora vamos a escondernos de acuerdo con Control G y vamos a acercar aquí. Me gustaría crear Heather para esta primera fila, así que vamos a tener un cumplido que en realidad tiene que especie de Heather, y uno será el simple separador de línea con 20% de capacidad, y los otros podrían ser los Heathers para secciones fuera de nuestra configuración. Entonces vamos a usar el texto de estilo de nuevo, y voy a la descripción Andi. A lo mejor usemos esta pequeña descripción fuera de nueve puntos y será 20% horneado. Ahora pinchemos en algún lugar del medio y dejemos poner el nombre. General, es el nombre de nuestra primera sección en la configuración. Ahora lo voy a tener centrado en el tablero de arte y necesito esconderme, entonces esta parte fuera de la línea que está bajo general un General Heather. Entonces vamos a presionar volver para entrar en modo de edición vectorial, y puedo poner a puntos vectoriales allí. Pero también puedo dividir esta mentira por igual y para hacerlo recordado gorra corta, un comando de corte corto. Entonces si mandas a Creek entre esos segmentos que eras siempre tienes la mitad de los segmentos aquí, y eso me permite conseguir tijeras ahora y deshacerme de esos dos segmentos. Y es perfectamente igual desde la izquierda y desde la derecha. Ahora vamos a crear símbolo que será este símbolo de sección de línea, y vamos a tener otro símbolo para esta línea normal. Entonces vamos a tener nueve y por defecto, y de esa manera podemos hacer algunas anulaciones y cambiar entre la sección Fattal y entre la línea normal aquí y un consejo más que ahora te puedo dar es crear un rectángulo y 10 fuera de la frontera. Pero puedes encender el campo, pero bajar la opacidad al 0%. Y ahora se puede un griego sobre este elemento, y se puede crear un símbolo fuera de esta elección, que tiene en realidad la altura y el trigo adecuados para que este rectángulo establezca esta altura y peso fuera del símbolo. Déjame crear un símbolo fuera de estos elementos, y voy a llamarle configuración una fila y vamos a la Página de símbolos. Echemos un vistazo a los símbolos recién creados ahí en la parte superior. Ah, y por cierto, si comandas a los mineros y si quieres cambiar la posición fuera de esta nueve sección como ajuste
predeterminado cuervos configurando a través, puedes cambiar la posición y mientras arrastras, no soltando el botón izquierdo del ratón, puedes mantener esta barra de ritmo, y ahora puedes cambiar la vista, y ahora puedes soltar el botón izquierdo del ratón. Entonces ahora volvamos a este lanzamiento de configuración y las empresas que tenemos aquí son la
sección de línea y también en la parte inferior. Tenemos esta línea default. Básicamente, podemos deshacernos de este defecto de línea aquí. Eso se debe a que vamos a cambiar entre línea, sección y línea default en un componentes por encima de la derecha? Entonces si llegamos, si volvemos a general y ahora si intentas cambiarlo con la anulación, desafortunadamente, ves que no hay línea general. Y probablemente si escuchas atentamente en las lecciones anteriores, sabes exactamente por qué eso se debe a este tamaño fuera de este símbolo. Si echas un vistazo al tamaño de sección de líneas, es 311 por 12 pizzas, y aquí tenemos el valor predeterminado de línea, que se recupera 11. Pero sólo tenemos un píxel de altura, por lo que necesitamos cambiar los símbolos altos a 12 píxeles para marchar el primer símbolo. Y si lo hacemos, asegurémonos de que esta línea también se diga que está en el centro del símbolo. Ahora volvamos al tiro de ajuste y ¿realmente podemos hacer? Podemos hacer otro campo de texto, y vamos a tener, por ejemplo, Spotify aquí como nuestra música predeterminada arriba en nuestro hogar inteligente. Pongamos esta comida de texto a la casi derecha de nuestra sección off set throw. Y también voy a usar símbolo. Uno de los símbolos que tenemos aquí y esto es una flecha y aquí a la derecha están seguros de que necesitamos dar cuenta de algunas opciones diferentes. Entonces, por ejemplo, necesitamos alguna flecha diferente que esté apuntando hacia la derecha. Entonces eso está duplicado. Y vamos a desprender el 2do 1 del símbolo. Ahora podemos escribirlo y transformarlo. Yo me voy a dormir. No tengo mineros girados 90 grados, y ahora tenemos el segundo son, por cierto, también
podemos dar click en esta flecha y hacer ensamblar fuera de ella. Entonces digamos que eso es barra de icono r o todo bien y con nosotros puede usar probablemente. Podemos usar algún tipo de interruptor aquí en la configuración, así que lo mejor es ir t al IOS. A ti te gusta. Entonces vamos al archivo y vamos a abrir en tu nuevo desde plantilla. Voy a decir que fui tú lo trabajas y aquí tenemos este interruptores IOS. Puedes seleccionar ambos fuera de estos interruptores, y simplemente podemos copiarlos y pegarlos en nuestro proyecto. Entonces hagámoslo. Y enfrentémoslos aquí y una cosa que vale la pena notar ahora mismo es que si pegamos esos elementos aquí, también
pegamos los símbolos. Entonces si le echas un vistazo a la parte superior derecha de nuestro espacio de símbolos, esos son los símbolos que tenemos aquí también. Entonces elegamos esos símbolos con comandos shift presionados en nuestro teclado y podemos acercar un poco y eliminar instancias innecesarias del símbolo. Ahora tomemos esta instancia, y eso es bala aquí y para tal vez puedas cambiar algo en este interruptor. Eso tanto? ¿ Esto es agotador nuestra aplicación? Entonces seleccionemos este color Greenfield y seleccionemos uno de nuestros colores verdes. A lo mejor este primer color de acento, para que ahora se vea así. Y posiblemente podamos mover todos los elementos que tenemos aquí al extremo derecho de este componente, creo que sería mejor. Entonces movamos la flecha y el 2do 1 también. Esta flecha hacia abajo. Tenemos que moverlo a la derecha a la extrema derecha de este componente. Y además, echemos un vistazo a este campo de texto de Spotify ahora mismo. Voy a moverlo un poco. ¿ De acuerdo? Parece que nuestro componente está casi listo. Vamos a apagar la visibilidad este otro más adelante para que cuando vuelva a la
página general , pueda ver cada uno fuera de estos elementos aquí y vamos a moverlos. Y tratemos de cambiar esos anulación para que tengamos, por ejemplo, el estado apagado apagado nuestro interruptor y vayamos a la línea. Podemos establecer un valor predeterminado para la línea, y también podemos volver a la sección. Si nos sentamos de nuevo a sección, podemos anular el texto que aparece como título de la sección, y todo realmente funciona bien, Así que podemos, dijo la flecha. También, podemos tener esta otra flecha aquí. Podemos poner algunos de los componentes a ninguno para que estén ocultos. También podemos anular el feed de texto de la derecha así como podemos anular el campo de texto de la izquierda, que es música arriba. Y sí, sería mejor o darle a esos impuestos sentir más generar. Los nombres pueden estar en el espacio de símbolos, pero puedes hacerlo. Mientras tanto, si bien tenemos listo este componente, les voy a mostrar una gran opción más. Vamos a la barra de herramientas y así es, Grande y seleccione Personalizar barra de herramientas. Ahora vamos a seleccionar el May Acceda y pongámoslo en nuestra barra de herramientas. Esta es en realidad una de las mejores herramientas en boceto. Simplemente seleccionas cualquier grupo de capas o símbolo, y haces clic en mi icono de avaricia. Y entonces puedes multiplicar esto, y puedes tener diferentes rosas así como las columnas. Entonces determinemos que tenemos una columna y nosotros 10 filas. No necesitamos ningún margon entre esas filas, así que pongamos cero en Margon y simplemente haga clic en La batalla de la codicia de mayo. Y luego esperas a que suceda esta magia de captura. Y ahí tienes. Tienes 11 copias. Tienes 11 rosas porque tienes 10 copias y una fila original fuera y tu segundo
símbolo de tiro . Ahora podemos ir al tablero de arte, y podemos desbloquear también el combustible, el fondo pocos también, para que podamos ver todos esos artículos. Y por cierto, si usas catch mirror para previsualizar esto en tu dispositivo móvil, si tienes en arable, eso es más alto que la pantalla de tu iPhone, puedes desplazarte fácilmente y se está arrastrando automáticamente por defecto. Entonces vamos a seleccionar algunas de esas rosas. Y si accede a todas las filas, como puede ver, puede cambiar las anulaciones para todos fuera de este asado seleccionado. Entonces, en cambio, fuera de línea de sección, vamos a tener tiempo predeterminado, por ejemplo. Y ahora podemos hacer aún más anulaciones a cada sección individual y a su rosa individual . Entonces, por ejemplo, para este segundo lanzamiento, vamos a poner el sonido de alarma y este es otro ajuste de configuración. Ve por un hogar inteligente y lo vamos a cambiar a nuevo inicio. Además, vayamos dentro de este símbolo y necesitamos cambiar el comportamiento de este texto alimento para estar alineados a la derecha. Y de esa manera se puede ver lo que está aquí, y siempre se queda a la derecha para que el texto esté siendo empujado a la izquierda para el para dro. Vamos a tener ajustes de reloj en vamos a tener reloj de 24 horas, por ejemplo. Y para la siguiente fila, vamos a tener algo de puesta en marcha, por ejemplo, mostrar profundos y si quieres tener una suite ahora mismo, así que necesitamos apagar este Spotify. Solo necesito ingresar este campo de texto y presionar y vaciar un espacio vacío como anulación. Y ahora, como pueden ver, no se está mostrando nada en esta anulación. Y tenemos que permitir que la célula sea visible. Este interruptor para ser visible. De acuerdo, para la siguiente, vamos a tener sección de línea, así que tendremos la siguiente sección fuera de nuestras preferencias y podemos llamarla modos. Se pueden seleccionar varias filas múltiples. Entonces cambiemos al griego. Y vamos a seleccionar, por ejemplo, las primeras 4 filas de esta sección. Y vamos a cambiar la flecha para que no tengamos esta flecha hacia abajo y para habilitar para todos ellos habilitar la flecha derecha para que podamos entrar dentro del ajuste y, por ejemplo, cambiar algo en la siguiente pantalla. Por lo que el primero será en buen ajuste de la mañana, y aquí podemos tener un espacio vacío para que pudiéramos entrar y editar. De acuerdo, no
quiero desperdiciar más de tu precioso tiempo. No obstante, permítanme expresar algo muy claramente al final de esta lección. Esto es simplemente increíble lo que hicimos porque sólo tenemos un símbolo, un componente que se multiplica con esta hermosa opción make avaricia. Es catch, y aquí podemos hacer todas las opciones. Podemos hacer cada anulación individual en este único símbolo en este componente para que
incluso podamos tener pantallas de ajuste muy sofisticadas. Entonces eso es todo por ahora y ver más tarde.
37. Pantalla de dispositivos: Bueno, espero que empieces a creer que todo lo que hicimos al inicio de este curso, que fue tan tedioso porque estaba creando símbolos y haciendo este tipo romp y creando todas estas cosas diferentes que no eran necesariamente necesarios para las pantallas que estábamos haciendo ahora están empezando a dar sus frutos. Y eso es porque cada pantalla siguiente que haces usando esas técnicas usando esos símbolos que tenemos, es superrápido. De acuerdo, si sales el duplicado el nuestro barco, entonces te hisopas los símbolos. Cambias algunos iconos, haces anulación para el texto. Después insertas algunos símbolos nuevos como, por ejemplo, éste como la línea aquí y ahora empieza a tener tanto sentido. Y también empieza a tener tanto sentido organizar esos componentes sabiamente y tener esos grupos y tener nombres propios para que no te pierdas en todo este trago, porque a veces es casi increíble que crees una aplicación enorme, pero aun así reutilizas los mismos componentes. Y si creas grandes símbolos al principio, es mucho más fácil. OK, entonces ahora vamos a crear otra pantalla que sea una pantalla de dispositivos y usemos un rectángulo simple. Voy a llenarlo de color blanco. Cambia la opacidad al 10% y después seleccionemos el borde y cambiemos la llamada a uno de nuestros colores de acento. Este será el primer azulejo y el primer ícono fuera de nuestros dispositivos. Podemos cambiar los dispositivos y también dijo algunas propiedades del dispositivo en esta pantalla. Permítanme seleccionar otra descripción. Voy a poner algo de texto aquí y la primera vez voy a ser consola que, seleccione el texto así como rectángulo y vamos a ponerlo en el centro con co manto
corchete derecho . Ahora usemos ícono Jar en tal para ícono de consejo sobre droga y soltemos este ícono en boceto. Y como les dije antes, ahora tenemos que hacer clic en este grupo ahora presiona comando shift G un par de veces hasta que
veas esas formas, y luego puedes seleccionar múltiples formas y cambiar el color, por ejemplo, a un color blanco. OK, y por cierto, no
sé si me pudiera parecer obvio, pero no sé si tú lo sabes. Si quieres tener un color perfectamente blanco, puedes salir del erudito Pekar mientras mantienes el botón izquierdo del ratón. Y luego tienes el color blanco exacto, y lo mismo es con el negro. Si bajas por este selector de color e incluso fuera mientras mantienes pulsado el botón izquierdo del ratón, tendrás el color negro. De acuerdo, eliminemos formas innecesarias. Agrupemos el Comandante G este ícono. Ahora podemos cambiar el tamaño y lo podemos hacer con medicamentos de turno de opción para que tengamos para este solo trozo de trazo. O podemos usar esta escala para que podamos presionar el comando K y luego podemos establecer, por ejemplo, 170%. Y como puedes ver, este cable es mucho mejor. Eso se debe a que cambia el trazo con en consecuencia para que ya no tuviéramos esta
pizza un trazo. Y tenemos. Tenemos una hermosa que puedo escuchar. Hagamos algunos retoques a la opacidad. Tengamos el 15% de nosotros. De acuerdo, ahora vamos a seleccionar todas esas capas. Entonces el grupo y también el consejo y el rectángulo y vamos a crear un símbolo fuera de él. Entonces vamos a tener nuestro primer símbolo, que es el dispositivo. Vamos dentro de los símbolos se hará doble clic en él. Necesito que Teoh cambie su posición para que pueda verlo en nuestro fondo oscuro y nos enfoquemos en las propiedades de estos elementos. Por ejemplo, necesitamos establecer la alineación fuera del texto para ser centrado s para que cualquier texto pueda ser pies aquí. Y también cambiemos el tamaño del icono a 44. Prefiero que esos valores se dividan ble por dos o por ocho. Ahora vamos a asegurarnos de que se pegue al centro y este será el estado activo fuera de mi
tarjeta de dispositivo . Entonces vamos a cambiar el texto dedo del pie algún color de acento. Y también tenemos este trazo en un color acento. Pero también necesitamos una copia de eso. Por lo que presioné te manda sobre este símbolo, y ahora tenemos Segundo Estado el cual estará en activo para que cambie el nombre. Este 1er 1 será dispositivo activo, y el 2do 1 tenemos que cambiarlo en consecuencia. Vamos, haga clic en el rectángulo y vamos a sacar los pies del borde así como vamos a cambiar el color del texto a blanco. Entonces ahora tenemos dos símbolos, que son dos estados fuera de esta tarjeta de dispositivo. En realidad, vamos a tener una copia más. Entonces vamos a prensar mercancía. Y ahora vamos a deshacernos de este ícono, y este estado en realidad será el estado vacío para que el usuario determine si quiere arrastrar y soltar cualquier dispositivo para ser su favorito. Entonces vamos a tener un Dasha fuera de cuatro y brecha de 10. Ahora disminuyamos la opacidad de la frontera. Y una última cosa que vamos a hacer aquí es poner este texto en el centro vertical y horizontalmente y cambiar el texto para arrastrar por elemento. Por lo que ahí tenemos gratis diferentes opciones de dispositivos, y las vamos a utilizar en la pantalla de nuestro dispositivo. Entonces vamos a renombrarlo y vamos a tener droga de dispositivo aquí o algo así. Y ahora podemos volver a la vista general y podemos multiplicarnos. Estos artículos iban a utilizar hacen grandes funciones. Entonces vamos a seleccionar el dispositivo. Hagamos codicia, y quiero duplicar los ítems horizontalmente, así que voy a tener sólo una fila. Pero me quedaré con cuatro columnas, y para las marcas, lo mejor es ponerlo para que se multiplique por ocho. Entonces voy a ir con 16 y así se va a sentar en mi grandioso. Ahora vamos a seleccionar todas las copias y voy a seleccionar Device Drug en lugar de este
dispositivo predeterminado . Y ahora movamos un poco a la izquierda todos los dispositivos para que veas el
último . Y es muy importante porque esos dispositivos se desplazaban horizontalmente y el usuario debería ver el último al menos parte de él, para que intuitivamente sepa que puede desplazarse tan menos. De acuerdo, pasemos a la siguiente sección y a esta siguiente sección. Vamos a empezar con Heather y vamos a tener un brezo ligeramente diferente al que tenía esta línea ahí. Vamos a seleccionar la botella, añadir vamos como, fondo de acento
estándar. Aquí vamos a acelerarlo, y desconectemos esto del símbolo. Entonces vamos a basarnos en esta forma y vamos a encender combustible Anthony fuera de la frontera y el atajo de
teclado aquí es F y B, así que tienes combustible y frontera. Y ahora vamos al color que ha cambiado el color del texto a algún color grisáceo. Y una cosa más que voy a hacer aquí es que necesito algunos iconos porque esta sección se
basará en Vamos a apagar el estilo de mayúsculas, y esta sección se basará en la ubicación actual de un usuario. Entonces, por ejemplo, en nuestra casa, si estamos en la cocina, vamos a tener dispositivos que están disponibles en la cocina, y luego esto localizará al usuario para que necesitemos un pequeño ícono a la izquierda que te
mostrará que esto se basa en tu localización, pero además vamos a tener una opción para cambiar la habitación. Entonces eso es bala ligeramente a la parte superior. Por lo que estas opciones que cambien la habitación será una pequeña flecha. Entonces vamos a Icon Arrow y pongamos la flecha aquí y cambiemos la opacidad de esta flecha a tal vez 30 o 40% de acuerdo, y el segundo ícono será algún tipo de icono adolescente que te hará saber que estás siendo localizado por esta aplicación. Y esos resultados son esta muriendo actualmente a tu ubicación. Entonces vamos de pie, conjuro. Voy a seleccionar algún mapa. Yo vengo aquí y tenemos este mes dirección aquí. Creo que está bastante bien porque es muy similar a IOS icon off localization. Entonces, eliminemos el rectángulo. Voy a venir en t g agruparlo como de costumbre porque es un ícono que se usa acento sin color para este ciclo, y vamos a asustar. Entonces usemos común K. Y escalémoslo, por ejemplo, al 20% que podemos ir dentro de este campo y presionar una flecha arriba o abajo para que esta escala sea más grande o más pequeña. Y en tan solo un segundo verás la vista previa de cómo, realidad, se mostrará en tu diseño. Así que vamos a tener este nueve por nueve Pizza Arrow aquí, y eso es todo para este Heather. Ahora concentrémonos en la sección misma. Entonces vamos, Menores. A ellos fuera y arriba, voy a tener mis dispositivos favoritos. Y en la parte inferior, hay menos fuera de todos los dispositivos disponibles, así que vamos a gustar el símbolo del dispositivo, este mismo. De acuerdo, ahora pongamos el 1er 1 y vamos a hacer acordados este único símbolo. Vamos a tirar, por ejemplo, un 10 filas y esto menos se desplazará verticalmente, no horizontalmente, así que eso tendrá columnas libres y tal vez Morgan está fuera de 16 píxeles. Para que se sienta perfectamente en el saludo. De acuerdo, ahora vamos como todos los dispositivos que hay ahí. Tienes 30 dispositivos. Ese es el Comandante JI Group it at. Ahora podemos distribuir la alineación fuera de este grupo para que se sienta directamente en el centro fuera de borda. Ahora movámoslo hacia abajo para hacer algo de espacio para que esta botella sea un poco más grande. Entonces este es un brezo, pero también un fondo, por lo que necesita ser fácilmente rematado con un dedo. Entonces vamos a escalarlo con el comando K al 120%. Y como puedes ver, escalar con opción de escala es realmente agradable, porque siempre es caso perfectamente, aunque tengas diferentes elementos dentro de un grupo. Ahora controlemos a G. Y asegurémonos de que todo se alimente de nuestra codicia. Y hagamos este arte a bordo así como el fondo más alto para que podamos revelar más de esos artículos. Y, por ejemplo, si se usa la vista previa del dispositivo si se refleja el boceto, podrás desplazarte en tu teléfono, por lo que esa es una forma de hacerlo. No obstante, también
puedes hacer clic en nuestro barco y seleccionar opción de redimensionar para encajar en este caso. No obstante, como pueden ver, tenemos a la derecha este único ítem en particular. Y es por eso que este artículo ahora es de dos blancos para que tengamos que mandar Z bajo esta acción y simplemente escalarlo con el fondo y asustar. El son sobre sí mismo. Eso es casi todo. Ahora vamos a cambiar el tamaño del barco según el, y podemos pasar a los iconos. Entonces, vamos a tener un símbolo abierto. Entonces vamos a duplicar griego en este símbolo de consola, y vamos a tener dentro de este símbolo creará Ensamblar fuera del ícono primero. Entonces tenemos este consejo ícono, y ahora pasemos al fondo y echemos un vistazo al tamaño. Y ahora vamos al cajón de iconos y seleccionemos algunos dispositivos, algunos aparatos de cocina y arrastrados directamente a bosquejar para que tengamos. Se pueden tener algunos iconos para ser reemplazados por sobrescrisiones. Ahora vamos a escalarlos de col rizada común, y necesitamos 170 supongo que sí. Ese fue este K que usamos anteriormente, y ese no es precisamente del mismo tamaño, sin embargo, lo
cambiará en el segundo. Entonces pongamos de acuerdo el primer símbolo, y le vamos a dar el nombre, off icon slash delantal y luego vamos a tener todos esos iconos para ser símbolos también. Entonces vamos a acelerar un poco. De acuerdo, ahí tenemos las pistolas I. Entonces ahora vamos a cada ícono y necesitamos desarreglarnos este ícono de común Jefe G y presiono estrategia de comando hasta llegar a las formas y necesitamos cambiar el color. Entonces creo que es ah un poco más rápido que en agruparlos primero y luego volver a crear grupo un símbolo. Pero probablemente sea lo mismo. Sí, vamos ah, pasemos al siguiente ícono Eso es pozo sin arreglar que este color cambiante. Como pueden ver, ni siquiera
tengo que crear nuevos grupos en este momento. Entonces eso se sienta en el símbolo, y no necesito un nuevo grupo para esas formas. Entonces tal vez en ese caso en particular, es un poco más rápido hacerlo de esa manera. Entonces cambiemos el color del borde aquí. Como puedes ver para algunos iconos, tienes color de sensación para algunos iconos que tienes en el color del borde del borde. Realmente no importa tanto. Eso es traje de comando de prensa G. Para ser honesto, no
puedo pensar en una forma más sencilla de hacerlo, pero se necesitan algunos arroyos y a veces, pero lo hacemos una vez y luego nos olvidamos. Entonces vamos a tener este último cambio de color de icono al color blanco. Y ahora tenemos todas esas capas diferentes y una un comandante realmente agradable y bocetos que puedes ir a ver y luego capas menos y colapsar tablas y grupos de arte para que
tengas todo colapsado en tu panel de capas. Y eso es bastante útil. No necesitas derrumbar todas esas capas, todos esos símbolos individualmente. Y ahora echemos un vistazo al tamaño de nuestros iconos. Por lo que presiono opción top y voy al tamaño y puedo cambiarlo para que coincida con el tamaño nuestras consolas. Era 44 por 44 pero como se puede ver, todos los iconos aquí son 41 por 41. Por lo que posiblemente pueda cambiarlos a todos para tener 41. Y también voy a cambiar el tamaño de esta consola, Toby 41 a 41. Y así es como puedes acceder a todas esas anulaciones ahora mismo porque todos nuestros vagones están en el mismo tamaño y lo que es más importante fuera de los símbolos son del mismo tamaño para que puedas ir a anulaciones. Y ahí tienes todos los iconos que puedo cambiar entre los iconos en en este primer símbolo. Y en lo que respecta a esos símbolos, a esos símbolos activos se refiere. Vamos al símbolo y vamos a cambiar este grupo por nuestro símbolo para que pueda ser inundado por el otro símbolo también en anulaciones. Y para hacerlo eso es un control o clic derecho en esta capa. Y usemos la opción reemplazar con para que podamos reemplazar cualquier grupo del año con, por ejemplo, ahí algún símbolo que tengamos aquí. Entonces vamos a seleccionar consola. Y ahora podemos volver a la instancia de este símbolo y podemos cambiar cualquier ícono con las anulaciones, y también podemos anular el texto. Entonces en lugar de consejo, la etiqueta, el nombre fuera de esta capa debe ser, por ejemplo, info o algo así. Pero como pueden ver, podemos anularlo fácilmente. Y por todos mis artículos aquí, puedo hacer lo mismo. Entonces esto es todo. Tenemos la siguiente pantalla de nuestra aplicación y te veo en la siguiente lección.
38. Pantalla de acciones: hola y bienvenidos a la siguiente lección de esta lección. Vamos a seguir adelante en nuestra solicitud. Por lo que cada vez que
acordamos alguna pantalla, utilizamos las mismas acciones. No obstante, trato de introducir algo interesante en cada lección. Entonces ahora vamos a hablar,
por ejemplo, por ejemplo, arranques
compartidos. Entonces vamos a crear el siguiente mundo de pantalla, que será una pantalla de acción y para las acciones voy a tener página separada. Como pueden ver, paso otra la página, y ahora puedo establecer el nombre de la página como acciones. Básicamente, también se
puede mover entre las páginas con atajos de teclado. Es control flecha arriba o flecha abajo así como control, pagar, cortar o página abajo. No lo sé, porque no tengo estas teclas en mi teclado Ahora también la puedes raquetear en la página y, por ejemplo, duplicar y dividir la página. Voy a pegar una copia y pegar una de las tablas de arte como de costumbre, para que tenga este tamaño de iPhone así como algunos componentes que usaré. Entonces, eliminemos todo lo que no necesitamos. Realmente no necesito aquí, y vamos a cambiarlo de punta a su versión alternativa. Y vamos a anular el nombre de esta pantalla. Y este verde será la pantalla de acción para que el usuario pueda cambiar entre las acciones,
por ejemplo, por ejemplo, ver televisión o jugar juegos de computadora o cualquier cosa. Por lo que ahí tenemos los iconos. Y ahora usemos el segundo ícono para la batalla de espalda y saludemos a los ensamblajes. Voy a oriente el símbolo apagado, ¡
baje! Por lo que esta litera caída abajo símbolo. Me reuní en la parte inferior que hemos creado en la lección anterior. Ahora podemos usarlo como un símbolo que lo haya puesto en el centro. Controlemos G y asegurémonos de que sus líneas correctamente al grado también. Y el siguiente ítem aquí será una tarjeta para cada acción. Entonces vamos a tener diferentes tarjetas, y el usuario estará deslizando entre esas tarjetas, también. Ver acciones teatrales. Entonces este será el 1er 1 y estoy bebiendo un rectángulo. Yo, um, haciendo el radio fronterizo y asegurémonos de que se ajuste a la codicia. Ahora Frump sobresale. Puedo usar unos pocos y cambiar a imagen. Teoh, ten esta foto de ejes directamente en boceto. Simplemente me drogo y lo dejo caer en este pequeño tablero de chat y usemos aquí el comando de combustible. Ahora vamos a apagar el borde, y también tendremos otro rectángulo que contendrá los iconos fuera de los dispositivos que
participan en esta acción. Entonces vamos a duplicar comando, Hizo este primer rectángulo y vamos a cambiar el combustible. Entonces esa es una llamada diferente o una semana va a usar color sólido fuera de nuestro fondo. Pero hagámoslo un poco más ligero. Y ahora cambiemos el tamaño de este artículo y también necesitamos tener estos bordes afilados para poder ir a radios fronterizos. Y no sé si recuerdas de una de las lecciones anteriores, pero puedes manipular las radios, pero también puedes poner punto y coma aquí y directamente puedes decir que quieres,
por ejemplo, por ejemplo, solo esta parte inferior izquierda frontera para ser tener las radios. No obstante, también
hay otra forma en boceto que puedes lograr. Esta tarea acaba de entrar en el modo vector nada. Por lo que presiona retorno y ahora selecciona los puntos vectoriales en la parte superior con turno en el teclado para que hayas multiplicado puntos vectoriales seleccionados y en la sección de esquina tienes la radio de
borde. Entonces como puedes ver, puedes modificar por separado cada esquina puntos vectoriales, radios y ahora podemos tener bordes rectos. Vayamos a los pocos otra vez. Eso ha cambiado el campo, y voy a usar la capacidad en lugar del ligero color. Entonces eso es alrededor del 50% de capacidad. Y lo último que usamos aquí son el ícono. Entonces vamos a los símbolos. Y en la sección Aiken, tenemos un afinador. Tenemos un televisor como, bueno un altavoz. Entonces empecemos con los altavoces, y después vamos a pasar por ahí así como la televisión. Entonces esos son los dispositivos que participan en esta guerra. Acción de TV, en realidad no sueño saludable. Pero lo que íbamos a cambiar en esto con una anulación en tan solo un segundo. Por ahora, vamos a tener estos iconos en línea. Entonces, vamos a seleccionarlos con turno. Y sin embargo lo que voy a hacer es distribuir este ritmo entre esos iconos así como probablemente semana sí, en la alineación a la parte superior fuera de los iconos, y se ve bastante bonito. Entonces vamos a tener un grupo fuera de los iconos, selecciónelo
y Comandante G. Y ahora podemos cambiar esta posición para estar directamente en el centro donde tenemos un grupo, podríamos centrar esto dentro de nuestro tablero de arte. Cambiemos un poco la opacidad. Tan sólo un pequeño retoques para que se vea aún mejor. Y para este grupo, volvamos la opacidad 60%. Yo quiero cambiar este sueño saludable. Teoh, mira la reacción. Entonces hagámoslo. Anular en el campo de texto info y casi nos configuramos con esta pantalla. Una última cosa que voy a tener aquí en la parte inferior es el botón de reproducción para que puedas habilitar esta acción dirigida desde esta pantalla. Entonces vamos a tener en el más y voy a hacer y más en Centros vamos a presionar barra espaciadora para cambiar la posición mientras dibujamos ahora su posición que en el centro del arte, aburrido con las herramientas online y voy a tener para este color verde para correr las acciones , Vamos a tener tipo peaje y vamos a teclear ir aquí. Lo voy a poner en el centro ópticamente. Entonces voy a salir del duplicado esto más. Voy a cambiar el color a Blanco y ahora en realidad puedes usar este atajo de
teclado bastante bonito , que es opción comando arriba o abajo para cambiar la posición fuera de las capas en el
panel de capas para que tengamos este segundo círculo en la parte inferior y otro gran atajo es el turno común. Y luego puedes presionar la flecha izquierda o derecha para cambiar este tamaño fuera del objeto puedes un comando de
prensa desplazar a la derecha, nuestra o flecha izquierda para hacer que sea más grande o más pequeño así como flecha arriba para hacer que esa flecha más pequeña o abajo para hacer que más grande también. Por lo que ni siquiera tienes que usar el ratón a lo largo de todo este proceso. Ahora puedes presionar dos para tener una escasez de descuento 20% y ahí lo tienes. Entonces este es básicamente el siguiente nivel fuera del boceto cuando no dejas el teclado para que cada operación que realizas sea extremadamente rápida. No tienes que ir a cambiar a tableta o al ratón. Simplemente presiona atajos de teclado como posicionar la capa. Después, tienes este tamaño fuera de la capa, y finalmente, puedes tener este atajo para un 20% de capacidad. Ahora, vamos a darle una sombra a este auto, y voy a crear una sombra de un borrón bastante grande que podemos tener aquí. Así que vamos a tener 12 picks allí. Y si tienes diferentes efectos, como sombras de borde, sombras internas, ensambladores y cosas, también
puedes establecer algo que se llama estilos compartidos en boceto. Por lo que a veces no quieres usar símbolos, pero él usará estos estilos compartidos, y esas llantas se aplican a todo lo que está por debajo de esta sección. Si creas una camisa nueva, empieza con este rectángulo. Salvarás el estilo, mirarás fijamente sentir fronteras, sombras y todo lo que tengas debajo. Entonces ahora si creas cualquier otra forma y vas a los estilos de camisa para aplicar este estilo, tienes aquí el estilo actual, y así lo puedes implicar. Como se puede ver, se suministra la sensación. Se aplica sombra, pero no se aplican los elementos que están por encima de este estilo de camisa. Por lo que no tienes este uso de incursiones. Vas a tener puesto aplicado o transformación. Entonces así funciona. Y ahora, en lugar de símbolos, por ejemplo, puedes tener este estilo de iglesia. En realidad es muy potente porque, por ejemplo, si vuelves a las pautas de diseño de materiales, y tal vez conozcas el concepto fuera de elevación y sombras aquí. Entonces básicamente, los objetos en diseño de materiales tienen sombras diferentes para que puedas expresarlos como estaban tendidos en la superficie. Y cada objeto puede ser más alto en los surfistas o puede quedar más bajo en la superficie. Y así es como funciona. Tienes diferentes niveles de elevación y diferentes valores para las sombras. Entonces, por ejemplo, esas cartas que, como casi en la superficie, tienen la sombra más pequeña en esta finca. Pero en el botón F A B que está aquí tienen esta elevación más grande, y es así como se puede distinguir uno entre otro. Este botón lejano es básicamente la acción más prominente en este diseño, por lo que tienes diferentes elevaciones para diálogos, para conmutadores, para menús, para sub menús, por ejemplo, tarjetas y y en la escala, la izquierda y en la escala a la izquierda, tienes picos de valores. Esos son píxeles de densidad, pero puedes establecer la misma pieza de valores si estás diseñando en un Xscape, por ejemplo, 20 o 24 por tener esta elevación, y esto es más poderoso. Si creas, por ejemplo, una forma que puedes deshacerte del campo. Los tres fuera de la frontera y sólo dijeron la sombra aquí. Entonces vamos a tener material estos y sombra a X e Y y,
por ejemplo, por ejemplo, que pensaban eran Empezar con la elevación hacia fuera por la paz de Blurred. Ahora tu opción dragón que comando las dos veces para tener múltiples copias. Vas a niveles de desenfoque y los dijiste en consecuencia al 16 24 8 Y ahí tienes diferentes elevaciones que ahora puedes guardar como un nuevo estilo de camisa. Entonces vamos a tener algunos estilos de camisa de Shadow 24 por ejemplo. También puedes organizar esas estrellas afiladas. Puedes seleccionarlos, puedes eliminarlos o reorganizarlos, renombrarlos. Y esto es bastante útil porque ahora, en proyectos de diseño de materiales, puedes. Además, siempre se
puede seleccionar grupo o capa y dijo la elevación fuera de esta misma capa con el estilo
compartido, por lo que usar los estilos de camisa para objetos así como un inicio para texto es bastante útil. Ahora he duplicado esta tarjeta y volvamos a Pakistán es cambiar la imagen. Usaré imagen de videojuego, así que vamos a salir de la imagen de PlayStation de alta resolución aquí, y voy a cambiar esta tarjeta. Déjame ir a sentir ahora. Necesito arrastrarlo y soltarlo dentro de esta sensación tardará un segundo en baja carga. Pero ahora ahí tienes nuestra otra tarjeta. Siempre podrías hacer esta tarjeta como otro tablero de arte. No obstante, a veces eres simplemente realmente no lo necesitas. Y, por ejemplo, si quieres descender algunas interacciones y animaciones de deslizamiento de cartas como las suyas en principio o en Flint O, eso es todo lo que tienes que hacer. Acabas de poner las cartas una al lado de la otra. Pueden estar fuera de tu tablero de arte o dentro de tu arte abortar. Y ahora posicionemos los iconos en consecuencia. Y ahí tenemos las acciones. Pantalla ya está lista. Tenemos este interruptor para cambiar las acciones así como tarjeta. Y también por favor asegúrate de crear algunas otras tarjetas de eso. Por ejemplo, desarrollador. Si bien de la mano del proyecto, él sabe que es una acción de deslizamiento de tarjeta. Entonces eso es todo por ahora. Gracias por su atención en esta lección. Te veo en el siguiente
39. Pantalla de detalles de acción: Sigamos adelante con nuestro diseño, voy a duplicar la pantalla para crear detalle de acción sobre, uh, generalmente menos tienes y el detalle de ti. Entonces vamos a crear la pantalla. Esto será bastante fácil. Eso ha cambiado para ver acción televisiva. Entonces cuando entramos a cada acción en particular, tenemos esta vista detallada que podemos editar. Por ejemplo, podemos cambiar los dispositivos que parten en esta acción o, por ejemplo, cambiar algunas otras propiedades. Y si entras, si accidentalmente vas dentro de cualquier objeto, puedes presionar comando escape y volver a donde estabas antes. Y es bastante útil porque a veces es simplemente muy fácil. Teoh por error, Doble griego en cualquier símbolo, y estás en el espacio de símbolos, por lo que tienes que volver rápidamente. Y este es el atajo de escape venga on. Ahora, cuando intentas cambiar el tamaño del rectángulo, como puedes ver esta imagen que es una sensación y tiene una propiedad de campo s escalas bellamente y ni siquiera
tienes que hacer nada más con eso, simplemente
seleccionas y alguna descripción. Y en esta vista detallada, vamos a tener descripciones para cada dispositivo que participe en esta acción. Por lo que estos serán en realidad oradores. Entonces tenemos que honrar y dijo Stevie también. ¿ Y qué cosa importante es eso? Yo usé las mismas capas aquí, y esto no es crucial por el momento. No obstante, si planeas hacer interacciones y prototipo interactivo, por ejemplo, usar principal up, será extremadamente útil. Al igual que en esos nombres fuera de las capas a través. Los tableros de arte pueden tener fuera la animación en principio. Entonces eso es básicamente solo una nota al margen, pero definitivamente o recordando. Ahora pongamos este botón go aquí, y voy a hacer esto más grande, también voy a seleccionar el texto y vamos a cambiar para parar. Entonces si estás si estás alrededor de la acción, puedes detenerla. Deténganlo directamente desde ahí. Cambiemos el color fuera del campo a un color rojo, y ahora podemos hacer nuestro arte, pero un poco más grande para que tenga todas las opciones para diferentes dispositivos que participan en esta acción. Así que hagamos que el alquiler de embarcaciones de arte así como que ultimamente se sienta el fondo, y voy a hacer ese corazón también. Ahora lo que vamos a usar. Aquí están los símbolos que ya tenemos. Entonces vamos a los símbolos y vamos a tener este set de tiro aquí. No sé si te acuerdas, pero lo hemos usado en los ajustes. Eso es bala en el centro de los tableros de arte, y ahora podemos cambiar muchas cosas aquí. Quiero decir altura y revelar esos elementos que son opcionales. Pero primero, vamos al dedo del pie griego y hagamos que uno los llame y digamos que queremos tener libres hace aquí Fuera de curso. Vamos a eliminar el marcado para que no tengamos ningún Margon adicional. Ahora elegamos esas dos filas y pongamos alguna anulación. Entonces, en lugar de la línea de sección, nos vamos a apegar al default. Además, apaguemos todos los elementos innecesarios aquí y dejemos a Onley el texto en la etiqueta, que no es Spotify, pero podemos anularlo más adelante. Nos vamos a apegar a la línea por defecto. Además, vamos a apagar algunas flechas y apenas en un segundo voy a publicar este video por un minuto y cambiar las etiquetas para que tengamos etiquetas correctas aquí y OK, ahora tenemos anulaciones correctas para cada etiqueta. Cambiemos el tamaño del tablero de arte. Y vamos a precisar dos pies después de cambiar el fondo para que puedas hacerlo de esta manera y es un poco más fácil. Y lo que tenemos ahora es una pantalla de acción completa. Entonces tenemos,
ah, ah, menos de acciones así como de risas de acción. Ahora mismo podemos presionar comando como para guardar, y en realidad, no
hablé de ello. En lecciones anteriores, sin embargo, podría valer la pena hablar de salvar peleas en boceto, entonces ¿por qué no hemos hablado de eso? Eso se debe a que es boceto ahorra automáticamente el desafío que tienes aquí, por lo que ni siquiera tienes que preocuparte por salvar las peleas. Sketch también mantiene un seguimiento de tus acciones, y puedes presionar Kamanzi para deshacer la acción así como puedes pulsar shift Comando Z para rehacer la acción. En ocasiones bosquejan incluso surcos esta acción para que la presiones una vez y tienes o no tal vez 10 pasos o cinco pasos que son similares y vuelves al estado anterior. Y otra cosa es revertir este archivo, por ejemplo, a cambios que podrías hace dos o tres días o tal vez hace un mes, siempre
puedes revertir ese estado si usas la máquina del tiempo en Mark y vamos al archivo. Y por cierto, tienes aquí en esta opción segura, por lo que siempre podemos ponernos seguros con un s común también. También puedes duplicar la pelea. Entonces, a veces si quieres crear una versión diferente del archivo, simplemente
duplicaste y luego tienes opciones de revertir. Entonces en lo menos, aquí nos tienen seguros y últimos documentos abiertos. Pero también puedes ir a navegar por versiones antiguas y bailar atrapar cambios a una vista de máquina del tiempo, y puedes cambiar entre las versiones fuera de tu documento y puedes subir en la historia de este documento guarda. Entonces puedes comparar esta versión con el documento actual que está a la izquierda, y si quieres restaurar alguna versión, puedes hacerlo con el botón de restauración. Además, tienes el historial off cambios y el historial off guarda a la derecha, Y si encuentras la versión que estás buscando, simplemente
puedes ir por una restauración y puedes restaurar y en realidad anular su archivo estás trabajando en. Entonces a veces es una buena idea. También, para duplicar este archivo antes de ir a este historial de incendios y reemplazarlo por alguna otra versión del historial. Entonces eso es todo por ahora. Veo en la siguiente lección.
40. Menú de abajo: hola, y es agradable verte en la siguiente lección. Por lo que ahora probablemente conozcas todas las características importantes fuera del boceto como herramientas y acciones y todo este traqueteo. Entonces ahora hola y es agradable verte en la siguiente lección. Bueno, ahora probablemente conozcas todas las características y herramientas más importantes fuera del boceto. No obstante crear un tú funcional, siempre
es un proceso y de la mejor manera estos dueños son esos diseñadores que pueden hacer que este proceso sea lo más ágil y rápido posible para que no tengas que
enfocarte necesariamente en las herramientas correctas y qué tipo de atajo usar. Pero básicamente te enfocas en el diseño fuera de tu aplicación, y para lograrlo, necesitas práctica. Necesitas trabajar,
sin embargo, sin embargo, así que es mejor que Teoh a veces cuide por encima del hombro de alguien para que puedas ver esos
atajos así como herramientas en acción. Entonces vamos a crear otra página, hemos creado una página para pantallas de una sala, y voy a tener un par de pantallas aquí. Ahora hagamos las operaciones estándar. Entonces fue copiar y pegar Can art board Ahora he borrado todas las cosas innecesarias de la pizarra
de arte muestral. Y como puedes ver, diseñar una nueva pantalla es básicamente usar los mismos estilos y los mismos símbolos una y
otra vez y solo reemplazar algunos iconos I, por ejemplo, o algunas etiquetas con sobrescrituras. Entonces es muy, muy fácil usar esta lista bloques fuera de nuestro te gusta fuera de nuestra guía de estilo y, por
ejemplo, tengo aquí una droga,
una droga abajo, una droga abajo, y eso va a cambiar para que alimente el tablero de arte como bien. Al igual que por ejemplo, desactivamos el icono de localizar, podemos anular el texto que está aquí. Entonces sí, básicamente, los símbolos son geniales ahora va a crear un activo diferente, y también será un símbolo. Y vamos a dio componente muy popular fuera de las aplicaciones nativas, que es un tanto de dinero. Entonces cambiemos la altura de este rectángulo para que sea 88 para que se ajuste correctamente al griego. Ahora apaguemos la frontera y voy a presionar f para el campo. Está cambiando de color a nuestro color de fondo, y aquí voy a tener cinco iconos diferentes que me van a dejar cambiar entre los diferentes diversos, las diferentes páginas que tenemos cuatro recámaras A veces es más fácil corregir. Haga clic en su tablero de arte y seleccione pegar aquí para que tenga estos artículos pagados basted directamente en el grande para que haya clicado. Y luego seleccionemos todos los iconos y los voy a mover dentro del tablero de arte para que
pueda ver a las guías inteligentes para posicionarse luego directamente en el centro. Y ahora lo que vamos a hacer es salir de este rectángulo y de todos los iconos que vamos a crear. Ensamblar. Entonces vamos a elegirlos en el panel de capas que se crea símbolo. Y este es nuestro menú. Por lo que el símbolo inferior del menú será símbolo con iconos con estados tanto activos como inactivos. Entonces, en realidad, esos iconos que tengo aquí están ahora en estado inactivo. Entonces hagamos un estado en el que podamos cambiar. Entonces primero, vamos a crear este estado activo para icono individual. Voy a presionar oh por todos y con turno, voy a crear un círculo perfecto. Ahora movámoslo con las flechas del teclado. Habilicemos el campo y cambiemos el color a color blanco. Pero vamos a tener una capacidad apagada alrededor de las 24 ahora, y eso es apagar la frontera. También puedes presionar estar en el teclado. También necesitamos cambiar la posición de esta capa de capas en el panel de capas. Entonces eso está por debajo de los iconos. Y cambiemos la opacidad del dedo del pie, por ejemplo, alrededor de las 11. Ahora tenemos este ícono, que es el estado activo de este ícono, por lo que es genial fuera. No obstante, queremos tener otro símbolo en el que podamos intercambiar por encima de la derecha para que pueda resaltar este ícono va a elegir algún color diferente. Por lo que cada icono es básicamente de un tamaño diferente. Este es 27 por 29. Entonces vamos a crear diferentes símbolos seleccionando el icono y vamos a tener carpeta Aiken, y esto será una temperatura. Entonces pongamos temp es el nombre de este símbolo. Ahora tenemos el 2do 1 con el bulto. Fred. Uno es clientes o usuario de Curtin en esta pantalla. Podría ser capaz de cambiar la posición de las cortinas así como este cuarto icono, que es alarma eso. Podrás poner el despertador en tu recámara y el último será censo. Entonces vamos a crear otro símbolo fuera de los sentidos. Y ahora tenemos todos los iconos en símbolos separados ahora que buscan la definición de estos símbolos y ahí los tenemos. Y para poder seleccionar esos símbolos, es mucho mejor ir a ver opciones y desde la lista de capas, seleccionar artículos y grupos de colapso. Y probablemente sea hasta el mejor Teoh. Ten tus propios atajos de teclado para esta posición de menú para que sea relativamente fácil
configurarla . Ahora. Presiono barra espaciadora mientras arrastra, también. Cambió la posición fuera de lo contrario y duplicemos esos iconos. Por lo que tenemos un duplicado de todos los símbolos, que son de tamaño correcto, y ahora podemos cambiar el color de cada icónico por separado. No obstante, siempre
puedes hacerlo por todas las formas. Entonces vamos a agrupar todos los iconos presiono comando shift G en el alcanzo de las formas. Ahora vamos a seleccionar la capa más inferior y la vamos a ir a la capa más superior. Y ahora cuando vayas al color de borde, puedes cambiar este color para todas las formas seleccionadas. Entonces vamos a seleccionar uno de nuestros colores de acento, y ahora todo lo que tenemos que hacer es conseguir este punto culminante, y voy a venir en X por un corte, y voy a cortarlo de este menú abajo. Y como pueden ver, tenemos formas adecuadas para nuestros iconos, para que los símbolos se intercambien entre. Y lo que vamos a hacer ahora vamos a pegar el óvalo a cada uno fuera del estado activo fuera de nuestros símbolos. Vamos a poner el centro más indirecto fuera de estos tableros de arte fuera de estos símbolos, y los vamos a tener para que, como se puede ver ahí, fuera fuera de los símbolos alrededor de tres docenas de madre, porque todo lo que es fuera del símbolo también será visible. Y el truco es que, si pones el sobre al final, probablemente
tendrás los diferentes tamaños de cada ícono para que no tengas tan largo sobrescribir menos, y ahora puedes obtener la pantalla del dedo del pie atrás que estás creando. Entonces volvamos a la página de la habitación. Y ahora si seleccionas algún símbolo aquí que tengas, puedo anular. Y para cada ícono, solo
debes tener dos estados. Entonces esto es como un brazo, y puedes configurar este estado para que esté activo. Bueno, en realidad, por ejemplo, si nos tienes aquí cortinas Aiken, que es del mismo tamaño que algunos otros iconos. Tienes algunas anulaciones diferentes, pero para la mayoría de los iconos, sería fácil seleccionarlas y cambiar entre este estado activo y estado inactivo. Entonces ahora duplicemos esta pantalla y en la pantalla de la recámara, voy a tener cinco pantallas en total. Entonces hagamos otra y cambiemos el estado por cada pantalla. Por lo que para el 1er 1 vamos a establecer el estado activo del estilo apagado temperatura. Voy a la segunda pantalla para la segunda pantalla. Tienes que establecer este bulto. Yo voy a estar activo. Entonces apaguemos los sentidos. Vamos a encender el bulto. A continuación, las cortinas y la cuarta pantalla facilitan nuestra pantalla de alarma. Entonces cambiemos el otro ícono demasiado activo. Y el 5 º 1 el último es SAS es. Por lo que ahí lo tienes. Un símbolo a prueba de balas que puedes usar en todo tu diseño. Y sí, tal vez pases cinco minutos en crear este símbolo. No obstante, si tienes cientos o miles de artículos que contienen este símbolo y tus clientes deciden que quiere cambiar el color, no
tienes que saltar por la ventana. Entonces esto es todo para esta lección. Lleguemos al siguiente
41. Pantalla de alarma: Es agradable verte en la siguiente lección. Ahora vamos a saltarnos las primeras pantallas libres y centrémonos en la calle de alarma. Amplía esta pantalla con comandos para mandar a los mineros que alejen el zoom. Ahora voy a usar el símbolo y vamos a usar el primer símbolo fuera de esta línea de sección. Pongámoslo ahí y voy a venir, además de acercar este símbolo. Asegurémonos de que se ajuste a nuestra codicia. Entonces eso es control G para saludar. Y ahora lo voy a poner justo por ahí. De acuerdo, vamos a seleccionar el símbolo. Y ahora vamos a las anulaciones. Voy a anular el texto ensamblado para repetir, y esas son las opciones de repetición para nuestra alarma. Entonces aquí está el lindo truco. Si quieres tener, por ejemplo, ocho iconos aquí, dibujemos un rectángulo de que es el ancho completo de este espacio
en el que quieres poner iconos . Entonces te vas a ir Teoh de su tamaño. Entonces opto top y luego top tres veces para ir al tamaño que dividí en ocho piezas . Y también necesito extracto de Teoh 12 pixels para los mercados. Entonces ahí tenemos alrededor de 27 Así que hagámoslo 28 por 28 pixels. Y aquí está nuestro primer ícono. Entonces hagámoslo un píxel. Creo que voy a apagar la radio unos ocho píxeles, y ahora tenemos que seleccionar este ítem. Pasemos a un positivo alrededor de 40 presionando para en el teclado. Ahora esa es forma multiplicada. Voy a usar make great toe, y voy a dejar uno. Robots. Necesito ocho iconos. Por lo que a dicho ocho columnas y 12 semanas fuera de Margate. Hagamos de acuerdo, y ahora tienes este poco espacio en el extremo derecho. Y eso es porque hemos redondeado este tamaño a 28. Entonces no seamos el último rectángulo que seleccione todos los rectángulos y vayamos a distribución y distribuyamos esos ítems. Eso que las marcas son incluso ahora vamos a ir a esta forma y vamos a duplicar. Por lo que la prensa común hizo una opción jefe de toehold proporciones y patinar desde el
centro que bajó apenas un poco más de cambio. Las radios fronterizas habilitaron la sensación de la F en el teclado ahora giró opacidad. Sí, sé que es rápido, pero así es como trabajas en sketch y ahí tienes el estado activo fuera de nuestro fondo de radio . Ahora vamos a la descripción, y voy a usar tal vez esta descripción de 20 opacidad para establecer la primera descripción, y el primero 1 será una vez y los otros siete serán días de peluca. Entonces pongámoslo en el medio. Ahora eso centraba la alineación fuera del campo de texto, y necesito algunos campos de texto más. Entonces hagámoslo acordado de este texto también. Voy a crear otro duplicado. Y también después de un duplicado, voy a presionar. Vamos, lo común, común se convierte en Andy, y voy a presionar siete veces para que tenga ocho copias. Ahora. No vamos a esta última copia, así que ni siquiera tienes que hacer clic ni nada. Simplemente Najid con el teclado son hace. Seleccionemos todo el texto aquí en Vamos a distribuir esto para que tengamos esos textos justo en medio. Nuestras casillas de verificación son botellas de radio, Así que tenemos lunes martes, miércoles jueves. Contesta uno. Entonces tenemos dos sábados. No te preocupes a los días del sur son bastante agradables, y luego necesitas ajustar el color fuera del texto para que podamos llamarlo casi el final de este componente. Seleccionemos la línea y tal vez no lo hagamos un poco para que se sienta mejor en lo grande. Vamos a asegurarnos de que está bien aquí y ahora vamos a seleccionar todas las capas y presionar comando g para agruparlas. Por lo que está nuestro único grupo con las opciones de repetición. Ahora vamos a poner para lo principal que es un despertador. Entonces eso se ha apoderado. Voy a crear un sobre, y sostengo la barra espaciadora para moverla mientras crea. Ahora vamos a tener un tamaño apagado para 1 76 por 1 76 Vamos a ponerlo en el centro y vamos a tener una sensación fuera de color temporal, por ejemplo, amarillo. Esto cambia la capacidad al 50% presionando cinco en el teclado. Ahora eso viene en el duplicado y vamos en K escala este duplicado. Por lo que tenemos alrededor de 140 o 130% escala. Estamos patinando desde el centro y por cierto, nota que todos esos cambios ocurren instantáneamente en la vista previa del iPhone que tengo aquí
al lado izquierdo. Por lo que siempre necesitas revisarlo en tu iPhone para que se vea mejor. Y ahora nos vamos 140%. Hagamos otro duplicado con mercancía y otro escalado con. Vamos K, y será alrededor del 130%. A lo mejor eso son 320 por 320 píxeles. Y de esta manera podemos seleccionar todos los óvalos y pueden ser escalados dentro de ellos. Esto coincidió que tenemos aquí para que se ajuste perfectamente grado. OK, ahora vamos a seleccionar la primera general, esta en el medio, la más pequeña. Y ahora vamos a moverlo a la cima. Estoy usando el teclado corto. Tienes que moverlo a través de las capas. Ahora cambiemos el color así como la capacidad a un 100. Y por cierto, normalmente se
puede presionar 02 veces para tener opacidad apagado 100. Ahora vamos a tener la tipeada también t en el teclado. Puse aquí alguna hora loca de la madrugada. Entonces vamos con el tamaño apagado, por ejemplo, tal vez 46 negro flotante fuera de este texto. Entonces pongamos esto dentro de nuestro reloj. Y ahora vamos a tener horas aquí. Entonces sólo otra gran función fuera de boceto delante de nosotros, así que Vamos a seleccionar una herramienta de línea El en el teclado. Ahora dibujemos una línea recta con turno en el teclado, y tenemos una línea. Ahora queremos duplicar esta línea y vamos a Layer Puffs, y aquí tenemos copias giradas. Esto en realidad es enorme si seleccionas rotar copias, dijiste el número de copias. Entonces, por ejemplo, si queremos tener 12 capas en total, pongamos 11 aquí tendrá 12. Digamos que está bien, y ahora tenemos 12 Koby's y podemos tomar esas copias y podemos distribuirlas. Podemos cambiar la posición. Podemos cambiar la rotación de esas capas simplemente sosteniendo este pequeño punto en el medio. Entonces ahora tenemos reloj de 12 horas aquí. Cambiemos la opacidad para que apenas sea visible tendrá alrededor tal vez 15 o 16%. Ahora vamos a seleccionar el texto. Necesitaba estar en el medio, Pero no uses estas opciones alineadas. Simplemente utiliza un enfoque sabio de diseño fuera seleccionando esto y magia con flechas de teclado, que sea ópticamente perfecto en el centro. Ahora vamos como los dos que tenemos aquí, y cambiemos su color a color oscuro también. Y para esta primera vez tenemos aquí. Voy a fijar la propiedad fronteriza. Entonces apaguemos el campo y volvamos a la frontera. Esto será bonito, profundo también. Vayamos a la posición de nuestra frontera y vayamos por opciones internas. Por lo que ahora podemos igualar la semana fuera de esta frontera para que llegue al reloj. Cambiemos el grosor y detengamos por ahí. A lo mejor un poco más. De acuerdo, ahora necesitamos cambiar de posición de nuevo porque queremos que esta posición sea central. Entonces pongamos centro. Y sobre esto más, vamos a cambiar el tamaño del de todos para que coincida. No, éste
no. Eso ha cambiado de tamaño de encima con el turno y Arche para que coincida con nuestro reloj. Y necesitamos que esa posición sea centro porque vamos a cambiar el color del arte fuera la frontera para que tengamos un hermoso radiante aquí. Vamos a ponerlo en la parte superior de nuestras capas. Volvamos la opacidad a un 100 vamos a cambiar el color, y en realidad vamos a usar este angular Grady en eso hemos usado en una de las
lecciones anteriores , y esta también sería colorida. Entonces tengo los colores en la parte superior. Entonces usemos esos colores para nuestro Grady int. Y para ello, vamos a seleccionar la primera parada de color. Después vas al control de prensa de color C para la herramienta cuentagotas, y ahí lo tienes. Ahora Creek en la línea para tener otro control de parada de auto ver adecuado en el segundo color. Después puedes hacer click directamente en esta más para la Tía Grady y Control. A ver, vamos a tener el color azul. A lo mejor eso es rápido por ahí y control. Ves, eso es algo como éste. Ahora tenemos que ser leídos este color negro para que pueda seleccionarlo y presionar el retroceso en mi teclado. Ahora vamos a hacer algunos ajustes menores al color se detiene para que el Grady y se vea lo mejor de sí. Y cambiemos. El color se detiene en consecuencia, y ahí lo tienes. Ahora lo siguiente, que es bastante gran boceto de propina, es que se puede tener esta frontera para ser sólo a las 77 horas. Por lo que queremos que esta frontera se detenga en algún lugar y no sienta todo el óvalo. Así que vamos ahora a las propiedades de los bordes y vamos a elegir las propiedades ahora para el
valor de guión . Puedes poner lo que desees ahora, por ejemplo, 10. Y también por favor asegúrate de tener esos extremos redondeados y para el hueco que pones, es muy importante y es un lindo truco aquí. Pones el valor de los lados de tu general, así que pongamos 212 y este número tiene que multiplicarse. Entonces vamos a botas un culo. Trucos aquí por el número P y P es obviamente libre coma 14 por lo que puedes redondearlo así y luego presionar retorno. Y ahora qué pasa cuando cambias el guión? El valor es que esta línea está empezando a crecer. Entonces ahora esta colorida criatura caracol que hemos hecho está empezando a moverse hacia arriba y hacia arriba es básicamente una dirección equivocada aquí. Entonces lo que tenemos que hacer es seleccionar esta forma e ir a las opciones de transformación, y si vas a transformar, puedes voltearla verticalmente. Entonces hagámoslo. Y ahora si cambiamos el tamaño dar, se
puede ver que tenemos una dirección correcta. Por lo que este clavo está bajando. Y ahora podemos poner la alarma para que coincida con las 7 de la mañana. Entonces cambiemos el valor a, por ejemplo, libre. Digamos 5 18 No, es demasiado. Tengamos 400. De acuerdo, 400 es apenas alrededor de las siete. Ahora tengo aquí un símbolo que hice. Entonces este es el símbolo del deslizador. Entonces pongámoslo ahí y ahí tenemos nuestra primera línea, vamos a saber, ajustar la posición del deslizador y no quiero que este clavo sea visible debajo de este Snyder. Entonces, probablemente separemos eso del símbolo y cambiemos la opacidad fuera del campo. Entonces vayamos adentro, y aquí tenemos opacidad de combustible. Hagámoslo 100%. Creo que ahora se ve mejor. Ahora duplicemos el óvalo. Eso es presionar y mantener presionado el turno y opción del teclado para escalarlo dentro de proporciones
así como desde el centro. Y vamos a modificar en un poco a esta Grady. Entonces ingresemos grado y propiedades y movamos la parada de color para que este radiante sea ligeramente diferente. Que el 1er 1 y creo que se ve mejor ahora y con nosotros. Tenemos que hacer ese duplicado también esta copia slider y vamos a ponerlo en los 10 minutos pasados siete y necesitamos cambiar el tamaño. Entonces vamos a Borders Properties y que dicen que Dash será de 200. Pero también necesitamos cambiar la brecha para que coincida con el tamaño fuera del círculo y lo
vamos a multiplicar por un valor P. Ahora es perfecto. Entonces tenemos nuestro componente, y tal vez vamos a seleccionar todos estos ítems y seleccionar grupo. Eso es comandante de prensa G para agruparlo. Ahora podemos escalar esas capas con comandos K. Así que, por ejemplo, pongamos el 90% aquí para que sea un poco más pequeño y ahí lo tienes. Nuestro componente está casi listo. Ahora desconectemos el fondo del símbolo para que podamos entrar a este rectángulo y cambiemos ligeramente el campo. Entonces, vamos a subir esta capacidad. Puedes hacer clic en este campo y pulsar la flecha de desplazamiento y arriba para cambiar la opacidad de este Grady en. Y tal vez eso es poner a este Grady en el centro apagado o reloj. Si le echas un vistazo a mi vista previa de teléfono. Se ve un poco mejor. Y ahora nuestra alarma Una pantalla está lista. Entonces espero que hayan disfrutado de esta lección. Te veo en el siguiente.
42. Sentidos y Blinds en la pantalla: De acuerdo, pasemos a la siguiente pantalla. Tenemos pantalla de sentidos aquí y vamos a seleccionar el desplegable. Y el sentido que estaremos usando por ahora es limón fresco para que nuestra recámara pueda oler bien. Y vamos a seleccionar dedo del pie rectángulo. Vamos a crear un marcador de posición para una imagen, y voy a Phew vamos o presione F y B en el teclado para cambiar entre borde y sentir . Ahora eso ha cambiado unos pocos al campo de imagen. Vamos dedo del pie píxeles lado y tengo esta buena calidad off limones aquí. Ahora saquemos esta canasta de limón de nuestro navegador y arrástrela y soltemos en sketch feel y esperemos un segundo. Ahí lo tenemos. OK, ahora vamos a seleccionar la opción de alimentación que vamos a establecer para sentir como de costumbre, y voy a disminuir una paucidad fuera de esta capa para que tengamos, por ejemplo, un 30%. Ahora movamos esta capa al fondo para que tengamos esta batalla arriba y con, como necesitamos aquí en la parte inferior, vamos a poner esta pequeña línea. Entonces esta sección de línea necesitaba necesito que este símbolo esté en la parte inferior de esta pantalla del censo también Vamos a los símbolos y necesito línea con sección, y esta sección en realidad será la sección para la intensidad fuera de nuestro olor. Entonces básicamente, cuanto más intenso sea el olor en la recámara a mayor capacidad obtendrá esta
imagen de fondo , y esta será la primera pista visual para el usuario. Y la segunda pista visual será un pequeño íconos que tienes aquí. Y esas serán las botellas que te permitirán decir la intensidad. Vamos ahora al menú de inserción fuera del boceto Y aquí tenemos las formas y algunas de estas formas. No las hemos usado en las lecciones anteriores, y esas son estrella, polígono y triángulo. Eso es polígono selecto. Y dibujemos una simple votación sobre. Como puedes ver ahora en las preferencias, puedes seleccionar los lados de lo político, y también puedes, por ejemplo, y el mundo de edición, y también puedes hacer algo loco con esos puntos vectoriales. Entonces básicamente, vamos a tener las flores como nuestros iconos aquí, y entre más flores tengas, más intenso será el olor. Y para las flores, vamos a usar una forma de estrella. Entonces en la forma de estrella te gustan las radios así como puedes seleccionar un número de puntos fuera , nos vamos a apegar a los 45 puntos, y vamos a entrar en este modo de edición electora presionando retorno. Y ahora vamos a acercar. Y como puedes ver, tenemos diferentes puntos vectoriales y para crear para nuestro icono. Basta con seleccionar todos los puertos vectoriales, el otro en los bordes. Por lo que me cambio. Haga clic en cada vector puntos, y ahora vamos a la adopción espejo. Y ahí tienes una flor, y si quieres tener una flor aún más hermosa, puedes seleccionar cada uno de los puntos vectoriales, y luego puedes ajustar los mangos vectoriales. Y si pulsas y mantienes pulsado los mangos de ajuste de comando, ajustarás. Ambos tienen esos en consecuencia, y así es como puedes hacer esas maravillosamente alrededor de las formas fuera de esta hora. Ahora rematemos este ícono y alejemos el zoom. Voy a duplicar griego en el supuesto en el bucle. Vengo aquí para que tenga vista al 100%. Ahora hagamos esto un poco más pequeño con turno y fuera para mantener proporciones así como para escapar del centro y tal vez empezaremos desde ahí y cambiaremos el grosor fuera de las fronteras a uno. Ahora lo vamos a poner del pie el borde izquierdo de nuestra escala de intensidad, y voy a hacer lo mismo que en nuestra audible anterior. Entonces vamos a tener una opción make saludo, y voy a hacer una columnas, ocho filas y también 16 piezas marcaciones. Y como puedes ver, ahora mismo
hay mucho fuera de marlin. ¿ Verdad? Pero vamos a poner esto una flor a la derecha y luego distribuir los mercados en consecuencia . Entonces vamos a seleccionar todas esas formas. Usemos las opciones de la isla. Y ahora tienes las flores y necesito que esas marcas sean más grandes. Y eso es porque necesito que cada flor siguiente también sea escalada. Y vamos a escalarlo y puedo usar mis palabras clave son sube y baja para hacer una báscula de cerveza. Y echemos un vistazo a esta flor. A lo mejor vamos a tener 110% para el segundo ejemplar, y voy a presionar bien? No, para el siguiente, hagamos otro 120%. Por lo que el siguiente inferior obviamente será 130 creará esta escala que nos permitirá dar usuario y otro visual insinuado que puedes hacer que esta cosa huela mucho más intensa simplemente seleccionando más flores. OK, y vamos a tener 170% para el último Ahora se ve bastante bonito. Bueno, tendrán que hacer es sólo seleccionar esas flores y alinearlas correctamente al centro, al medio, básicamente. Y ahora qué? Queremos hacer eso seleccionar algunas flores y,
por ejemplo, para nosotros
para este olor a limón fresco, tenemos alrededor del 30% de capacidad. Entonces elegamos sentir y eso es hacer unos cuantos blancos. Y ahí se puede ver la báscula fuera del olor de nuestra recámara. De acuerdo, entonces si tenemos un libre de ocho flores aquí, vamos a tener una sonrisa fuera alrededor del 30%. Entonces podemos subir con la opacidad fuera de nuestro fondo cuando el olor es más intenso y esas son pistas visuales para el usuario. Teoh comunicarse. Ese olor va hacia arriba o hacia abajo. OK, entonces esto es todo para esta pantalla censal. Ahora pasemos a alguna otra pantalla. Entonces pasemos a esta cortina cortina y en la pantalla. Mi usuario de casa inteligente gestionará cortinas así como ciegos. Por lo que tenemos dos dispositivos para administrar y que recuerdas correctamente dentro de la vista de dispositivos. Y ahora podemos usar el símbolo, que estaba, por ejemplo, dispositivo activo o el dispositivo inactivo para establecer aquí dos dispositivos. Por lo que el 1er 1 serán cortinas y el 2do 1 será dieta. Entonces si seleccionamos a esos tipos, podemos decir, centrarlos entrevista y sólo ponerlos un poco a la parte superior de este hardboard, los
voy a alinear correctamente a los grandes. Y ahora ese interruptor, el primer icono en ser cortinas. Y ese es el que anula puedo usar minúsculas aquí porque mi texto es mayúscula de todos modos, Así que el 2do 1 es ciego. Pongamos persianas aquí y ahora tenemos esos dos dispositivos, por lo que nos mantenemos consistentes Hasta donde mostramos dispositivos al usuario. Ahora, los controles de
este dispositivo también serán lo más intuitivos posible. Entonces vamos a crear un rectángulo, y voy a establecer el radio para este rectángulo, y esta será mi escala para la escala. Mentí. Algunas líneas, algunas líneas horizontales. Entonces Dibujemos una línea vertical. Esa es la altura de nuestro complemento. Y ahora vamos a apegarnos al afilado y así como voy a hacer un despegue, tal vez para sumar Gap off 16. Entonces seamos consistentes con nuestros acordados. Ahora volvamos al valor fuera de espesor. Y ahora mismo, si aumentas este valor, como puedes ver, puedes dibujar estas hermosas líneas horizontales. Entonces ahí lo tienes. Tengamos un valor de descuento alrededor, supongo, 100. Y ahora seleccionemos ambos fuera de esta capa. Entonces vamos al aprendizaje selecto y al rectángulo y vamos a hacer una máscara fuera de ellos. OK, entonces eso es básicamente 1/2 de mi cumplido. Ahora también voy a necesitar un deslizador para que el usuario pueda determinar si quiere tener una luz mucho más o menos en la recámara. Y esto también voy a tener como pista visual aquí. Entonces voy a seleccionar esta línea, y voy a cambiar ligeramente la opacidad de esta línea para que si tú estás arriba de esta nueve, hay una línea blanca y usemos a Grady. Y para eso voy a usar ingrediente simple lineal, radiante, y usemos el color blanco para ambos colores. Pero para este núcleo en la parte inferior, voy a usar una paucidad fuera casi cero. Entonces, tengamos, por ejemplo, capacidad de
cinco personas aquí y ahora. Podríamos tener la idea de que si movemos el deslizador hacia la parte superior, este componente tendrá más luz en la recámara. Y si movemos el deslizador hacia la parte inferior del componente, tenemos menos vida en la recámara. También podemos ajustar esta brecha para que tengamos más o menos líneas, y es muy fácil hacer algunos ajustes a este componente. Entonces ahora vamos a los símbolos y usemos nuestro slider de fondo. Pongamos el deslizador aquí. Pero en lugar de este slider blanco, supongo que voy a convertir los colores. Pongámoslo primero aquí y ahora. Creo que podemos seleccionar el sobre y cambiar algunos colores, y siempre y cuando seas consistente, lo que se ve la forma de este cumplido, creo que puedes cambiarlo Z periodos a través de los diferentes barcos de arte. Realmente no te tenía x tanto, así que hagamos línea aún más gruesa afuera y tenemos estas botellas como si estuvieran listas. Entonces tenemos nuestro primer componente Eso está casi listo. Cambiemos el color del borde aquí y cambiemos el Alfa para que sea casi 100%. Y ahora creo que se ve bastante bien. Entonces ahora dentro de esta forma, voy a dibujar un campo de texto y en este texto lo voy a poner un valor porcentual de lo abiertas o cerradas nuestras cortinas o persianas, por ejemplo. Entonces tal vez va a establecer la descripción, pero creo que es demasiado pequeño. Entonces vamos a seleccionar, Vamos a ponerlo en el medio fuera del marco de texto. Y también voy a cambiar el tamaño ahora mismo. Entonces vamos a añadirlo, este campo de texto y vamos a probar el tamaño fuera, por ejemplo, algo así como 14 o 14. Creo que esta talla está bien ahora. También quisiera ajustar algo de interlineado, Así que empecemos con 17 en. Bajemos de ahí. Creo que podemos ajustarlo para que sea un poco mejor. Está bien, ahora está bien. Creo que eso es todo para este componente. Este slider. Ahora vamos al panel de capas y vamos a limpiar un poco voy a poner la línea aquí y vamos a seleccionar ambos grupos. Hagamos uno más en grupo con el deslizador. Voy a venir en nuestro o doble click y sólo nombra Slider. Ahora vamos a la opción de droga para tener otra al lado de las persianas, y esta ciega Snyder tal vez la ajustará un poco para que aquí puedas tener un
valor diferente . Entonces tomemos este deslizador inferior y lo pongamos un poco hacia abajo hasta el fondo. A lo mejor aquí y cambiar el valor, también. Probablemente 25. De acuerdo, vamos a colapsar las capas. Y ahora vamos a crear otra pista visual para el usuario. Usemos un año de texto descriptivo. Pongámoslo en medio del marco de texto y voy a decir abierto y pongamos esta tabla a la parte superior de nuestro componente así como al segundo componente. Por lo tanto opción. Arrástrelo para que se lo copien a las persianas. Voy a drogarla opción segunda vez, y esta vez vamos a cambiar la descripción a cerrada. Entonces las persianas están cerradas ahora, y optemos por volverlo a drogarla. Y ahí tenemos nuestro diseño final, así que ahora solo estás probablemente quieres algunos ajustes menores que quieres control de prensa Teoh, C dos c desengrasado y tal vez una línea en lo grande un poco. Pero por ahora, también
está en esta lección. Hicimos dos pantallas. Fue censo y cortinas y nos vemos en el siguiente.
43. Pantalla de lámpara: Ahora ya sabes que los atajos de teclado en boceto son una de las cosas más importantes que puedes aprender. Entonces, básicamente, tu habilidad se basa en la frecuencia con la que necesitas Teoh Reach para el ratón o para la tableta panorámica, y usar los atajos de teclado de manera eficiente te permitirá acelerar el proceso de creación , sabio
él. Cuando desarrollas un hábito fuera usando atajos de teclado, te das cuenta de que ya no haces tanto clic en las opciones de boceto. Utilizas el teclado con más frecuencia, y luego puedes ahorrar algo de espacio en tu pantalla. Utilizando estos accesos directos, puede presionar la opción de comando uno para ocultar el panel de capas. Puede presionar la opción de comando para ocultar el panel del lado derecho. El panel de propiedades, así
como comprimir la opción de comando T para ocultar la mancha de herramienta. Y recuerda que en el panel Herramientas, también
puedes ocultar esas etiquetas para que solo tengas iconos y ahorres algo de espacio en tu monitor. Ahora, un atajo de teclado más para entrar al modo de pantalla completa es punto de comando y cada punto de
comandos de mama no hay clatter, ninguna interfaz en absoluto, y puedes usar todo el espacio fuera de tu día de este para diseñar en boceto y luego es aún más importante dedo del pie. ¿ Recuerdas esos atajos de teclado para herramientas así como para algunas técnicas comunes, como un escalado o almizcle? De acuerdo, entonces ahora vamos a la siguiente pantalla. Esta será la pantalla de grumos, y cambiemos la etiqueta para la parte inferior. Eso es un frío nocturno es un nombre bastante bonito para un preset en el dormitorio, así que vamos a copiar y pegar esos artículos. Voy a tener fuentes de luz libres lámparas que puedo ajustar y cambiar tu configuración. A veces es mucho más fácil simplemente copiar y pegar algunos símbolos de otro barco de arte que pasar por los símbolos. Batalla y busca un símbolo. Entonces vamos a copiar y pegar. Cambiemos las marcas. Y como puedes ver este marco que tenemos aquí con color de acento, en realidad
significa que este dispositivo está activo. Es decir que podemos cambiar sus propiedades de este mismo dispositivo, por lo que necesitamos cambiarlo, y también necesitamos cambiar los iconos. Pero primero ese cambio es para un dispositivo. Como puedes ver, tenemos tres tipos diferentes fuera de esas tarjetas Así que esta que esté activa tendrá este borde así como el diferente color fuera del texto. Y ahora sabemos que estamos editando esta luz principal, por ejemplo. Ahora vamos a los iconos y aquí tengo iconos para corderos. Entonces pongamos luz de lectura aquí, y el primer icono será nuestra luz lateral. Entonces pongamos el pie de foto. Y como puedes ver ahora, el que éste está activo. Y eso significa que el usuario ahora cambiará la configuración de la luz principal. Y esos ajustes serán el color apagado de la luz así como en la intensidad apagada de las luces. Entonces vamos a crear un óvalo. No presioné shift para que pueda tener este dedo del pie ovalado que se vea así. Y tomemos el Caesar's para eliminar estos segmentos inferiores. Ahora esta parte fuera de encima nos permitirá crear una escala. Y como recuerdan, tenemos que acceder a las propiedades fronterizas. Ahora ha cambiado el final para que tengamos esos bordes rectos y pongamos dos para guión y tal vez unos 20 para un hueco para inicio. Entonces cambiemos el grosor para crear esta escala, y necesitamos que esta escala sea igual para de izquierda a derecha, Así que ajustemos el tope en consecuencia. OK, ahí lo tenemos, y empieza a lucir bien. Por lo que este cable en realidad permite a los usuarios ajustar el brillo fuera de la luz, y vamos a tener un deslizador fuera de la báscula con la información apagada. ¿ Qué tan fuerte es la luz en nuestra recámara? Entonces, como de costumbre, tratamos de darle al usuario algún tipo de pistas. ¿ Qué está pasando aquí? Entonces vamos al color del borde y seleccionemos Viniar radiante. Pongamos a este Grady de izquierda a derecha, y también vamos a cambiar este color negro que es griego en este color Deténgase y
vayamos a un color blanco. No obstante, vamos a cambiar la opacidad para que sea casi invisible al lado izquierdo. Significa que tendremos una cantidad muy pequeña fuera del lado derecho e izquierdo de la báscula, y tenemos el lado de división de luz más brillante del escape. Ahora lo que voy a hacer, voy a copiar este fondo de Snyder del siguiente desde la pantalla de cortinas. Entonces eso es Common Sea y Commander V para pegarlo, y vamos a tener el mismo fondo aquí que permitirá que los usuarios cambien en la fuente de luz consecuencia. Pongamos algunos valores y esos porcentajes de campamento, porque el porcentaje es un buen valor que el usuario siempre entiende. No obstante, también
podríamos poner algún valor más preciso. Por ejemplo, podemos darle valor a las patas y cambiar el tamaño frontal de esta mano de obra para que sea, por ejemplo, alrededor de 12 o 10. Y esto es un poco agradable. Ahora vamos a crear un poco de iconos aquí, y siempre es divertido para mí crear boceto de Ikenson. No sé si compartes mi entusiasmo, sin embargo, siempre
me gusta crear. Yo las constantes atrapan en lugar de buscar icono, a
veces a veces es mucho más fácil y es mucho más rápido. Entonces vamos a crear aquí una pequeña bombilla. Voy a presionar turno y crear más, que es un círculo perfecto. Ahora vamos a crear una forma diferente, forma rectángulo, y si intentas Teoh, conecta esas formas. Entonces elegamos al primero en la segunda forma y tú vas a sindicato. Dices que no tienes este efecto que esperabas, y eso se debe a que esas formas no se superponen. Si tienes las formas que están fuera una de la otra, probablemente no tengas el efecto que quieres. Entonces lo que haces es que realmente hiciste esa forma de más grande y tres no importa
lo grande que sea ahora,
porque si nosotros es el tardío tanto formas como selecto sindicato. Como pueden ver, tenemos este efecto esperado. Entonces vamos a tener una línea aquí, y voy a tener otra. Entonces eso es un Comando C común V o simplemente mercancía para duplicar. Ahora entremos al modo de edición vectorial, y yo era como los primeros puntos vectoriales y presioné el izquierdo nuestro propio el teclado y luego el segundo vector apunta y presione la flecha derecha en el teclado para que esto sea arrebatado por uno pico. Entonces ahora vamos a crear una línea más. Esta será nuestra fuente de luz, por lo que necesitamos duplicar esta capa y ponerla todo alrededor del ícono. Vayamos a capa ahora Vamos a caminos Anti. ¿ Te acuerdas? Girar copias. Espero que dio Vamos a tener, por ejemplo, por ahora, siete capas. Vamos a ver si eso está bien, eso es a las seis. Y cambiemos la posición de esos elementos. En realidad, voy a borrar esos dos, y me voy a quedar con cinco. Ahora, Como puedes ver, nuestro icono de arriba está listo y se ve bastante bonito. Entonces vamos. Yo menos o doble rápido en el zamtel para tener una escala fuera 100. Ahora eso es un turno. Haga clic en las capas para seleccionarlas todas. Y vamos a agruparlo. Ahora tenemos al grupo que vamos,
Kate, Kate, cambia el tamaño de este bob a tal vez 40 o tal vez 45%. De acuerdo, ahora es posición ajustada con flechas de teclado. Y duplicemos este bob para que podamos tenerlo del otro lado fuera de nuestra escala. Cambiemos la droga para mantener la línea, y, uh, vamos a hacer zoom un poco. Lo que tenemos que hacer es deshacernos de esos Linus, porque aquí en el lado izquierdo, no
tenemos ninguna fuente de vuelo del Bob. Entonces hagamos otra línea que cruzará este ícono. Y ahora creo que se ve bastante guay. Entonces agrupemos esas capas. Pongamos la línea dentro de esta copia fuera del grupo, y ahora quizá cambiemos la opacidad a alrededor del 40 o 30%. Entonces vamos a presionar por en el teclado y ahí tienes nuestra báscula. Pero para ser honesto, realmente no
me gusta esta curva que tenemos en la escala. Por lo que posiblemente podamos ir a modo de edición de dedo para vectores y cambiarlo. No obstante, creo que probablemente será mejor mascota del dedo del pie esta forma y vamos a seleccionar V para Victor a. Y vamos a crear una mezquita sencilla como esta para que podamos recortar esas líneas que están a la izquierda y a la derecha. Y ese tipo de hojaldre debería estar bien. Ahora podemos seleccionar ambos. Mis años, sin embargo, necesita cambiar la posición fuera de las capas para que el camino esté debajo de la capa con on on over y ahora podemos mosket fuera. Y como puedes ver, ahora
se ve mucho mejor. Ahora podemos seleccionar ambos grupos y poner los bobs a la parte superior para que tengamos algo más de espacio para el siguiente componente que tendrá a la parte inferior. Y este siguiente componente será que permitirá a los usuarios cambiar el rumbo fuera de las luces. Entonces vamos a copiar y pegar una de nuestras secciones aquí, y vamos a cambiar el nombre de esta sección a color. Eso es todo Así que ahora dentro de esta sección de color, vamos a poner alguna forma de vector. Entonces volvamos a trabajar con factores en boceto, voy a presionar, cambiar y dibujar un óvalo para tener un círculo perfecto. Ahora eso es presionar comandos para acercar ese círculo e ir al molde de edición de bodas con retorno. Ahora eso es Command Creek entre las secciones, y eso te permitirá poner esos puntos vectoriales directamente en medio de las secciones. Voy a seleccionar con Shift esos puntos vectoriales libres y vamos a arrebatarlos a la derecha . Entonces vamos a presionar shift y probamos nuestro propio el teclado para que tengamos este tipo de forma. Quiero que estas transiciones en este hacer puntos vectoriales sean un poco más suaves. Entonces vamos a la variante desconectada fuera de las manillas o presione comando libre. Y ahora, si seleccionas los puntos vectoriales y desplazas arrastra uno de los manejadores, verás que podemos suavizar eso, y esto funciona muy bien. Entonces vamos a jalarlo ahí. Y por cierto, ahora
voy a ir a gobernantes. Entonces vamos a presionar el control son Y ahora vamos a crear una guía que esté en línea con el este vector manejado, y te muestro por qué lo estoy haciendo en tan solo un segundo. Ahora eso es injusticia. 2da 1 Hagamos también esta hermosa curva fuera de este punto vectorial y también vamos a las reglas y pongamos guía por ahí. Necesitamos el mismo tipo de forma al otro lado de nuestra encima. No obstante, antes de hacerlo,
vayamos al más y duplicemos esta capa para que podamos tener una copia de seguridad y comamos mercancía en esta capa. Lo voy a esconder por ahora. Y vamos a trabajar en esta capa de copia general en cuando una prensa regresa para ir al mundo de
edición vectorial . Y ahora vamos a tener los mismos puntos vectoriales aquí. Entonces vamos a presionar comando para dividir el segmento en partes iguales y comandar aquí
así como es ella huye en esos puntos vectoriales libres. Najid con un turno y flecha izquierda, presioné dos veces para tener 20 píxeles ahora que seleccionan ambos puntos vectoriales aquí, así que como brazos desconectados. Y ahora ves por qué los guías son nuestros mejores amigos porque ahora podemos poner esas
asas de director para que coincidan con los chicos que hemos creado y así tenemos curva muy similar a la izquierda y a la derecha. Por lo que se hace primera parte de nuestro segmento. Podemos mandar menos para alejar, y ahora queremos duplicar este segmento para que tengamos un segmento a la izquierda y uno a la derecha. Vamos a la opción a drogarla y pongamos aquí el 1er 1. Y además voy a poner el 2do 1 ahí y vamos a arrebatarlo con teclado. No es el 2do 1 para que podamos igualar o, casi mucho esta curva que tenemos puesta también, básicamente, podemos dejarla, y para sabor debe ser ideal. Entonces voltémoslo horizontalmente, y ahora se ve bastante bonito. Por lo que también necesitamos que al final esté esta forma de copia de seguridad que tenemos aquí. Entonces habilitemos esta forma y pongámosla a la izquierda de nuestras formas. Y también tenemos que haber ganado la derecha también. Entonces, duplicémoslo y cambiemos la droga para mantener la línea. Ahora es voltearlo horizontalmente y ahí lo tienes. Casi tenemos nuestra forma, para los colores tendrán algunos menores. Nagy está aquí con las flechas del teclado, y ahora estamos listos para seleccionar todo el general. Así que vamos a dar click en el de abajo y vamos a cambiar click en el de arriba en La Espina Mentirosa. Y ahora vamos a las operaciones de Buiyan. Selecciono sindicato. Y como puedes ver, tienes esta hermosa, forma
combinada y la belleza de la forma combinada en boceto es que si quieres tener algún retoque
menor más adelante, siempre
puedes volver a la forma combinada, y siempre puedes revelar los contenidos y el cambio. Entonces ahora vamos a crear Grady Int, y lo vamos a sentir con un int lineal Grady. Vamos a poner algunos valores de color diferentes para que el usuario pueda cambiar entre colores fuera de nuestras luces y tal vez volteemos para que tengamos esta línea tanto. ¿ Estos colores están en el deslizador? Por lo que tenemos blanco a la izquierda y a través y negro a la derecha, y ahora estamos listos para poner algunos hermosos colores para nuestro int Grady. Podríamos incluso estar inspirados en este tema de color que tenemos 40 despertador, así que elegamos algunos colores y probablemente al lado izquierdo de la escala. Podemos empezar con algunos colores más cálidos. Vamos a empezar a calentar y luego vamos más fríos. Tengamos aquí un amarillo brillante, y el segundo color será relleno alrededor de color naranja o rojo. Sí, eso es como uno más brillante. Ahora, como puedes ver, simplemente
puedes hacer click en el mismo lugar que necesitas colorear para aparecer en la
línea Grady Int . Y es mucho más fácil Toe agrega esos colores paran de esta manera. Entonces este será de color rosa más claro, y ahora vamos más fríos. Entonces eso es la mitad de algunos colores verde y azul. A lo mejor algún color azul noche aquí y también algún cuello azul por allá. Pero eso es como más ligero, y creo que este caso ahora se ve bastante bonito por lo que el usuario podría ser capaz de elegir entre los colores así como la intensidad de nuestras luces. Una nota al margen aquí es que aún tratamos de mantener al fondo las funciones que son más
utilizadas por el usuario. Entonces tenemos el menú, esos deslizadores aquí en la parte inferior, y si vas a la parte superior, tienes funciones de uso menos frecuente, y lo hacemos solo porque usuario, mientras sostiene su teléfono, él puede llegar fácilmente a la parte inferior del teléfono y conocer la parte superior. Por favor recuerda que la experiencia del usuario es uno de los factores más importantes para tus
decisiones de despido . Ahora nuestra sidra está lista con esta pequeña botella, y pasemos a la siguiente lección.
44. Ajustes de temperatura: Hola y bienvenidos. Es agradable verte en la siguiente lección. Entonces ahora procedamos con nuestra última pantalla para la recámara. Esta es una pantalla de temperatura, y vamos a poner aquí un componente de temperatura. Hice un símbolo fuera de este slider con temperatura para que podamos ponerlo como primer elemento en la pantalla de nuestra recámara. Ahora vamos a la otra y vamos a tener una línea de sección aquí. Pongámoslo directamente en el centro fuera de nuestro tablero de arte. Espero que recuerden nuestro propio atajo de teclado, que es comentario. Dejar corchete cuadrado. Ahora eso son comandos dedo del pie. Acerque y creemos un primer fondo. Este será un rectángulo y vamos a tener radio de borde para ángulo distrital. Para ser grande de eres tú, por ejemplo, 100 para que tengamos un cuidado perfecto de a la izquierda hacia la derecha. Ahora cambiemos el color a nuestro color de fondo principal, y aquí voy a tener dos botellas. Primera línea será un fondo menos a la izquierda, y la segunda línea la voy a duplicar será una botella de plástico. Tengamos otra copia con D común, y podemos transformarla en 90 grados. O podemos usar la punta de rotación y mantener pulsada la tecla shift en el teclado para crear este ícono perfecto. Esta será una batalla por cambiar el valor de la diversión, Así que vamos a crear un icono divertido que voy a presionar son para rectángulo. Vamos a crear un rectángulo como este, y vamos a cambiar el grosor de nuestra frontera para que sea uno. Ahora necesito ajustar las radios, pero sólo quiero tener la radio en la parte superior. Entonces eso es poner dos semanas de valor que punto y coma para asomarse y luego 00 para que tengas bordes
afilados en la parte inferior de este podría No, vamos a crear otra parte de este ícono. Esto va a ser un final, en realidad, pero voy a cambiar el dedo del pie de espesor uno y me voy a tijeras. Eso es borrar esos dos segmentos en la parte inferior. Y si presionas volver para entrar al modo de edición rector, todo lo que tienes que hacer es hacer clic en este punto vectorial o ir a las propiedades y seleccionar cerrar camino abajo. Y ahora se cierran las ganancias. Podemos acercar e ingresar al modo de edición para vectores. Puedes seleccionar este vector puntos en la parte superior y luego Naj con tus flechas de teclado. Entonces tal vez, pongámosle un píxel a la izquierda y un píxel al fondo, y luego tenemos uno fuera de los brazos para divertirnos. Entonces pongámoslo ahí, y vamos a crear las copias de este elemento. Ahora eso primero rotó un poco. Ahora vamos a capas, luego caminos y rotemos copias. Vamos a crear dos copias para que tengamos tres capas en total. Ahora movamos este punto medio, y puedes moverlo hacia arriba para tener esas alas más cerca unas de otras. Y además, movámoslo ligeramente a la izquierda. Y ahí lo tenemos. Vamos a arrebatarlo con flechas de teclado para que podamos posicionarlo correctamente, y voy a rotarlo un poco para que nuestro ícono se vea aún mejor ahora. El último que hago es seleccionar este rectángulo anuncios como la sensación para ángulo directo Vamos por nuestro color de fondo, y ahora el ícono de nuestro fondo aún está bastante terminado. Entonces organicemos las capas para que podamos tener un grupo adecuado que sea como esas capas, y el primer grupo va a ser para el ícono de la diversión. Voy a llamarlo divertido, y el segundo grupo será para nuestra batalla, y eso es porque necesitamos duplicar esta batalla. Entonces, vamos a la opción arrástrelo y vamos a crear otro icono a la derecha. Sé que es tan adictivo crear iconos en boceto, pero este es el último que estoy haciendo aquí. Entonces vamos a acercar y me gustaría crear algún icono de gotas de agua y empecemos con una novela. Sería muy,
muy sencillo, muy sencillo, Así que empiezo con un óvalo. Yo estoy haciendo espesor fuera uno. Ahora vamos a seleccionar este primer vector puntos en la parte superior. Ahora es doble clic en este vector puntos para que puedas quitar las asas e ir
al modo de edición recta. Eso es presionar turno y flecha arriba en el teclado. Y ahí lo tienes. Nuestro icono está casi listo. Vamos a crear un icono más pequeño y duplicado para que podamos tener que regar gotas, y este será más pequeño y también este más pequeño. Lo vamos a poner en la parte superior de nuestro ícono. Ahora eso es doble click en la zona tal para ir al 100% y se ve bastante bonito. Creo que tenemos que crear un poco más de detalle en este icono, sin embargo, así que vamos a acercar y vamos a cambiar este tamaño. Hagamos eso más pequeño. Y también vamos a crear aquí un pequeño detalle con el dedo del pie vector. Presiono V y creo este pequeño año trayectoria artesanal. Voy a tener el grosor de uno. Pongámoslo más al centro así como cambien las hormigas de que estén a su alrededor. Ahora se ve verde. Agradable. Ahora eso ya vamos. C Command v. Así que duplicar esto y ponerlo dentro de esta pequeña gota de agua también. Entonces si vamos al 100% ahora mismo, nuestros iconos están listos, y creo que se ve bastante bonito. Vamos a las descripciones. Vamos a crear la descripción con texto de capacidad del 90% para que podamos tener un nombre fuera de esta función así como un valor porcentual. Entonces vamos a divertirnos. 60%. Y además, pongámoslo en el centro por debajo del fondo. Seleccionemos todos estos ítems y distribuyamos la alineación para que esté directamente en el centro. Ahora esa es opción drag, y aquí vamos a tener humedad fuera de algún valor. A lo mejor cambiemos al 45% ahora. Dicho esto, la alineación, vamos a seleccionar la botella en ambos con este campo de texto y vamos a alinearla al centro horizontalmente. Seleccionaré también las capas de iconos y crearé un grupo a partir de ellas. Y este grupo también se quedó atrás al centro de abajo. Ahora realmente se ve bien y tenemos nuestra primera pantalla lista. Eso es control de prensa, G. Y veamos si encaja bien a desengrasado. Creo que sí. Y creo que ahora es hora de fiesta porque terminamos toda la sección de habitaciones. Tenemos cinco pantallas aquí, y en la siguiente lección, vamos a trabajar en alguna otra página. Llamémoslo CCTV, y, uh, voy a agarrar este y audible desde ahí y pegado por aquí. Ahora eliminemos todo el personal innecesario. Vamos a seleccionarlo así Y vamos a presionar el retroceso. Entonces creo que ahora estamos listos para la siguiente lección. Te veo ahí
45. Pantallas de cámaras: hola y bienvenidos en la siguiente lección. Es agradable verte aquí. Entonces ahora vamos a crear otro do pantallas para CCTV tendrá algunas cámaras alrededor de nuestra casa. Y, um, vamos a hacer algunas cosas interesantes. Por ejemplo, con el texto, te
voy a mostrar cómo crear un texto en una ruta. Entonces empecemos con un rectángulo aquí, y ésta será una barra de información con el estado fuera de nuestras cámaras. Ahora, un atajo práctico seguía dibujando. No tienes que soltar el botón izquierdo del ratón. Simplemente puedes presionar otro atajo off control son y luego activas la codicia para que aún
puedas dibujar. Puede presionar la barra espaciadora sin soltar el botón izquierdo del ratón. Se pueden ajustar las formas de eso. Es marcha es tu saludo apropiado. Ahora vamos a cambiar el combustible y la frontera. Y por favor recuerda los atajos si quieres habilitar la sensación desesperada F en el teclado y para el borde presiona beat en el teclado. Y así es como se puede sumar tanto frontera como un campo. Ahora pongamos el texto aquí. Ahora vamos como ambos de estos artículos. Cambiemos la fuga en el rectángulo y en las cámaras. Voy a poner el texto en el centro, así que por favor recuerden nuestros atajos. Cohetes cuadrados izquierdo y derecho comunes. Es tan rápido. Entonces puedes apagar el saludo. Entonces eso es comentario de prensa. GSR contra gee y debajo de este cuadro de información vamos a tener fotos, así que necesitamos dividirlo en cuatro vistas de cámara. Entonces vamos a crear primero rectángulo que es la semana completa de nuestro tablero de arte. Y luego cambiemos rápidamente al campo de entrada de tamaño. Entonces voy a presionar tina de opción y luego arriba tres veces. Si presionas cuatro veces, solo presiona turno, detente para ir hacia atrás y luego divide este trigo dos por dos, y voy a restar dos píxeles extra para los mercados. Ahora cambiemos la frontera y los campos. Entonces vamos a presionar B y F. Y ahora para el campo, vamos a poner una imagen. Escojamos una imagen de nuestro disco duro, y aquí tengo cinco imágenes. Voy a usar cuatro imágenes, y esta vez vamos a establecer diferentes sensaciones para una sola capa. Entonces esa es sólo otra imagen. Y ahí tenemos que sentir Y como puedes ver, esos sentimientos funcionan. Eso que esto sienta que está en la parte superior encubierta, esta que está en la parte inferior. Entonces esto es exactamente como en el trabajo posterior de la columna vertebral. Entonces ahí están nuestros pocos pellejados, y vamos a tener un combustible más para el mismo rectángulo. Y de esa manera hicimos un rectángulo que tiene cuatro sensaciones y podemos cambiar entre esos campos . Entonces duplicemos el rectángulo. Voy a hacer saludo fuera de este rectángulo. Entonces vamos a tener dos filas y dos columnas. Y también voy a poner los mercados para que sean iguales del dedo del pie para recoger a los Seres. Entonces hagámoslo pactado. Ahora mismo es seleccionar todos esos rectángulos y pongámoslos en el centro fuera del
tablero de arte . Ahora son sólo los cueros. Simplemente selecciona todos los elementos y ahora cambia la altura de este objeto. Y como puedes ver, todo escala maravillosamente. Por lo que tienes esas imágenes responsivas gracias a la propiedad de campo. Ahora vamos a seleccionar el segundo rectángulo. Vamos a apagar la primera imagen para el rectángulo alimentado. Vamos a apagar tanto de los primeros como del 2do 1 para que tengamos el 3er 1 visible . Y como cabría esperar, apagamos las primeras imágenes gratuitas. Y ahí tenemos las cuatro imágenes que se revelan como un sentimiento por la Cazadora. Ahora vamos a,
Ah, Ah, este barco, el fondo de la pantalla. Y vamos a crear aquí una escala de tiempo. Entonces, básicamente, podrás cambiar la hora y ver,
por ejemplo, por ejemplo, lo que pasó en la CCTV durante las últimas 24 horas. Entonces vamos a seleccionar la línea. Voy a tener a Dash y Gap despegar. Uno en bajó, 10. Entonces, básicamente, tienes que seleccionar este primer elemento aquí y ahora puedes ajustar el grosor para que podamos crear esta hermosa escala. Y para el último ítem de la báscula, voy a presionar L para la línea, y voy a crear línea más grande con el espesor apagado tal vez tres o cuatro y también mal cambiar el color y esta será la posición actual en el tiempo. Entonces esta será la hora actual para las cámaras y en la báscula tenemos algunas horas diferentes entre las
que puedo cambiar simplemente deslizando esta línea de tiempo, y vamos a tener algunas pistas visuales para el usuario. Y vamos a crear un subtítulo, tal vez para el té o 20% para que tengamos el nuestro aquí. A lo mejor empezamos desde la medianoche. Es media pasada la medianoche por esta parte fuera de susto. Ahora vamos a vieja droga esa es droga opción para tenerla aquí. Y vamos a mercancía para duplicar esos campos y tendremos un 5 30 aquí. Por lo que cinco horas después, probablemente
tengamos 10 35 horas después tendrá 15 40. Entonces eso es reloj de 24 horas. De acuerdo, entonces vamos a duplicarlo una vez más, y esta será la vista actual. Entonces pongamos por ejemplo, cámara aquí. De acuerdo, ahora lo que necesitamos cambiar es el color de este texto, así
como pongámoslo en el centro fuera de este pequeño bar. Y cambiemos la opacidad de color blanco y cambiémoslo a nuestro color de acento. Ahora ya casi estamos. Colonos cambiaron el nombre de este audible a CCTV, y vamos a duplicar con D común ahora tendrá una vista desde una sola cámara. Entonces, por ejemplo, tomemos la primera cámara y tenemos la cámara libre. Ahora pongámoslo en el centro y eliminemos esos rectángulos que realmente no
necesitamos aquí en. Agrandemos este. Entonces como puedes ver, esta opción de sentir para una imagen dentro de nuestro rectángulo funciona bastante bien. Y quizá tengamos una vista completa sin ninguna marca aquí, así que voy a hacerlo un poco más grande en este momento. Imaginemos para que se sienta pantalla entera de izquierda a derecha y también a esta barra
verde en la parte superior. Ahora lo que tendremos en el centro es información para el usuario que puede deslizar para cambiar la vista. Así que vamos a crear un cambio de retención feo ovalado para mantener proporciones y seamos pesados así que presiona F y B para desactivar el borde y el combustible será nuestro color de fondo. Pero bajemos la capacidad a alrededor del 70%. Y usemos algunos iconos. Voy a usar icono de mi control ahora mismo y buscar un dedo. Esperemos que tengamos algo así como gestos. Está bien, todo está apegado. Sección de gestos y vamos a seleccionar uno de los iconos. Creo que tal vez éste se alimente, así que arrastrémoslo al boceto. Ahora vamos a rotarlo. Entonces para rotarlo, necesitamos presionar y mantener el comando y ahí lo tienes. Y también puedes presionar shift mientras mantienes los comandos para tener una rotación perfecta. Ahora vamos a escalarlo. Pero con la herramienta de escala, es mucho mejor porque si presionas el comando K, escala los trazos en consecuencia. Entonces vamos a tener tal vez cientos libres y escala 50. Esto es todo. Entonces vamos a presionar OK, ahora necesitamos en grupo este grupo para llegar a las formas. Entonces eso es mando nave G hasta que tengamos las formas y cambiemos el color a un procedimiento estándar
de color blanco . Ahora vamos a dar click en cualquier lugar en blanco boquiabierto para volver del taburete. Eso es mercancía agruparla. Y ahí tenemos nuestro icono. Seleccionemos la forma y usemos nuestros atajos de teclado para que quede perfectamente en este centro para que lo que vamos a hacer sea con 1/2 alguna leyenda, y esta leyenda en realidad seguirá el camino. Entonces esta es la forma en que lo haces en boceto. Vamos rápido para un campo de texto. Ahora vamos a seleccionar el texto y vamos a poner aquí, por ejemplo, deslizar para navegar la información y vamos a un cambio seleccionado. El peso fuera este texto a tal vez ligero. De acuerdo, ahora necesitamos moverlo y también necesitamos establecer el camino que este texto y seguir. Entonces vamos a acercar y vamos a duplicar esto más tarde que tenemos para nuestros fondos. Por lo que seguirá el camino para debajo del dedo. Vamos por el duplicado esto más. Y si tengo este segundo más conmigo, transformarlo para que sea cada vez más pequeño y pueda establecer el camino para el texto. Todo lo que tienes que hacer para que este texto siga un camino es seleccionar esta capa y luego pasas a un menú tipo y aquí tienes texto en ruta. Y cuando ingresas texto en ruta, como puedes ver
, automáticamente quiere esta ruta correcta. ¿ Y cómo sucedió? tanto que sketch selecciona la ruta correcta al tomar en consideración el área común que tiene
este campo de texto con esta ruta. Y si no tiene sentido por ahora, por favor echa un vistazo a cómo se comporta cuando trato de mover el campo de texto. Entonces si me muevo, es para que toque las diferentes formas, se adapta a las formas y sigue el camino. Entonces dejémoslo aquí y ahora. Ahí hay una parte complicada porque si intentas cambiar por ejemplo la semana, la altura
del campo de texto para configurarlo para que esté perfectamente alineado, vas a fallar. En cambio, lo que tenemos que hacer es cambiar las coordenadas X e Y en consecuencia, y ahí se puede ver todo el impuesto. Y si puedes ver todo el texto, no intentes apretar para que encaje perfectamente. Simplemente seleccione este impuesto. Y por cierto, vamos a seleccionar esto y vamos a presionar F para campo para desactivar el campo. Y ahora volvamos al texto y simplemente cambiemos la rotación. Por lo que presionas comando y cambias la rotación para que el texto quede perfectamente alineado a la parte inferior, y ahora podemos moverlo incluso ligeramente hacia arriba. Y por cierto, también
puedes cambiar cualquiera fuera de las propiedades de este campo de texto. Por lo que sigue disponible. Entonces si intentas volver a seleccionar el campo de texto, puedes ir a ah, este mismo impuesto, no al texto, exactamente. Pero hay que hacer doble clic en el campo de texto, y si lo
haces, se puede ver que hay, hay. Siguiente en contra puedes editar el texto. Puedes cambiar las propiedades de este texto dentro de este campo de texto así como puedes cambiar algunas otras propiedades de texto que tengas. Si ha seleccionado esta capa, puede ir al menú de propiedades y,
por ejemplo, por ejemplo, en caso de que pueda cambiar el espaciado de caracteres. Así que ajustemos el espaciado de caracteres ahora. Como puedes ver, se ve mucho mejor. También puedes, por cierto, también puede hacer clic entre cualquier letra dentro de un campo de texto y cambiar el Kern Inc individualmente por cada personaje. Y este es el mismo campo de entrada de espaciado de caracteres. Ahora volvamos a seleccionar esta capa y vamos a presionar comandos para ajustar la rotación para
que esté perfectamente en nuestro tablero de arte. Y ahora tenemos ambas pantallas de CCTV listas. Te veo en la siguiente lección
46. Portear a diferentes pantallas: Lo siguiente que tenemos que dar cuenta son diferentes resoluciones así como diferentes
tamaños de pantalla . Y además tenemos diferentes orientaciones fuera de los dispositivos móviles como la
orientación horizontal y vertical . Entonces básicamente, a veces se tiene diferentes casos cuando se crea un nativo up o si se crea un diseño Web
responsive, tiene
que dar cuenta de dispositivos también, porque básicamente en el usuario móvil tiene una entrada diferente, que es un dedo. Y en un escritorio tienes un ratón, que es mucho más preciso. Por lo que hay que tener en cuenta todo así como esos factores. Los factores de escala de los que te hablé en una de las lecciones anteriores cuando hablamos de patinar cuatro pantallas diferentes. Entonces la pregunta básica aquí es por dónde empezar, ¿de acuerdo? Y el punto de partida para la vista móvil es duplicar la capa que ya has creado y contabilizar primero la diferente orientación de la pantalla. Entonces para abs nativos, tal vez no tengas que hacer Es necesariamente porque siempre puedes forzar,
por ejemplo, por ejemplo, configuración de pantalla
vertical vertical, y luego incluso si el usuario cambia a horizontal, aún así
lo hará tener vertical. obstante, no
creo que este enfoque sea s o mucho fácil de usar, por lo que siempre debes crear también esas pantallas horizontales. Entonces, empecemos desde ahí. Y además, si creas sitios web, esta versiones móviles y diseños responsive, también
deberías tener esta versión también. Entonces lo que hice aquí es que me escapé del artículo para que ahora tenga una versión horizontal fuera del tablero duro, y el siguiente paso es comprobar si todos nuestros símbolos escalan sin problemas a esas resoluciones
diferentes. Así que vamos a seleccionar el símbolo superior ahora mismo, e intentemos escalar la altura. Se ve bastante bonito. No obstante, si trataste de Teoh ajustar la semana, verás que esos ícono no se ven bien en todos los ajustes. El campo de texto, sin embargo, sigue en el centro, así que esa es básicamente una buena posición. No obstante, tenemos que ir por el lado del símbolo para ir a la definición de símbolos, y necesitamos cambiar la posición de los iconos para que trabajemos en esta re opciones de dimensionamiento. Espero que los recuerden de una de las primeras lecciones. Seleccionemos los iconos, y básicamente necesito orinar esos iconos a la izquierda y a la derecha, así que necesito hacerlo por separado para cada uno que asesore. Eso ha sido este 1er 1 a la izquierda. Y obviamente necesitamos arreglar el ancho y la altura de este elemento para que no tengan este patinaje diferente. Cuando tú cuando escalas el componente para que no cambien su peso y altura es lo que ahora, digamos, como el campo home text y como viste correctamente su caso, aunque no digas el cambio de tamaño opciones. Y eso es porque se sienta en el centro perfecto fuera de nuestro tablero de arte. Entonces lo mismo que tenemos que hacer para la siguiente instancia fuera de nuestra cima. Seleccionemos el segundo que pueda manejarlo. Selecciona fijar trigo y esconder también cacahuetes a la derecha. Ahora por esta diminuta flecha. Tenemos que arreglar el trigo y la altura también, y para esos elementos necesitamos Teoh. Manténgalo en el centro, manténgalos en el centro. Entonces vamos a seleccionar los tres elementos y agruparlos. Es el enfoque más fácil de tener un grupo, y ahora para el grupo, podemos decir que re opciones de dimensionamiento para que tengamos trigo fijo y escondamos y pongamos al grupo en el centro perfecto, vertical y horizontalmente, para que no necesites a Teoh. No es necesario cambiar ninguna otra opción de cambio de tamaño, y esto debería escalar perfectamente. Entonces ahora, como puedes ver,
puedes escalar el trigo y la altura y todo se sienta en su lugar. Por lo que en términos de esta disposición horizontal o versión horizontal, tenemos menos espacio hasta la constante más alta. Por eso hacemos este elemento un poco más pequeño. Y ahora vamos a seleccionar el fondo y escalar el fondo así como vamos a escalar los otros elementos. Y como puedes ver esos elementos s escalas bastante bien, ingresemos estos elementos y veamos la opción Resize Inc. Entonces como puedes ver aquí, tenemos conjuntos de redimensionamiento a todos los elementos, y es por eso que puedes transformarlos sin problemas en otras resoluciones. dice que este tipo se queda para quedar a la izquierda y al fondo alineado. No obstante, se
puede, um, cacahuete desde abajo. Y si quieres, si quieres que este elemento sea, apégate al centro, puedes ponerlo en el centro verticalmente y, um, para los siguientes elementos. Este,
por ejemplo, también
ha sido al fondo y a la derecha, se
puede ampliarlo desde abajo. Esto tiene que ser arreglado, trigo y arreglar el escondite. Entonces hagámoslo. Y para el Colegio de Abogados, este componente en realidad está aquí. Por lo que esta es la sección de línea y tiene fija con y fija altura también. Y ni siquiera tienes que decir necesariamente el significado a la izquierda y a la derecha para que
este componente se redimensione porque re tamaño es por defecto horizontalmente. Entonces este también vamos a poner también altura fija aquí. Y sí, creo que eso es todo para estos componentes en la fila de ajustes. Por lo que ahora puedes volver a la instancia y puedes volver a esta pantalla general. Y como puedes ver todo como escalas bellamente ahora y se sienta en este mismo lugar que lo
quieres. Entonces ahora vamos a revisar la codicia. Vamos a presionar el control, G. Y vamos a redimensionarlo para que esté perfectamente alineado con nuestra codicia. Y también puedes cambiar el diseño, como puedes ver por ahora para cada arte. Pero tenemos diferentes configuraciones de diseños y para este tableros de arte horizontales, puedes ir a ver y ahora habilitar nuevamente los ajustes de diseño para cambiar los ajustes de diseño. Y puedes, por ejemplo, cambiar el número de columnas en este momento a seis columnas y ajustar los martins en consecuencia. O simplemente puedes saltarte para los diseños móviles. Como te dije,
dispárate , no
es tan necesario. Entonces vamos a seleccionar otra pantalla y esta otra pantalla. Echemos un vistazo a la configuración del artículo en lugar de cambiar el ancho y la altura. También puedes hacer clic en este botón para cambiar la orientación a horizontal, y es mucho más fácil. Entonces ahora eso es tratar de cambiar la posición y el tamaño que esconden, especialmente fuera de este elemento. Y, como puedes ver esta versión normal fuera de las escalas superiores sin problemas así como dijimos esas opciones de
redimensionar Inc ahora que hacen este fondo más amplio y también lo que voy a hacer, solo
voy a cambiar esos iconos para que aparezcan a la derecha fuera de nuestra escala de temperatura. Y como puedes ver, este es un arreglo menor que te permitirá crear esta vista horizontal. Entonces como puedes ver, no
es un dolor tan enorme crear esos diseños horizontales y adaptarse a diferentes
orientaciones de pantalla . Y a veces es menos trabajo. A veces necesitas cavar más profundo, sin embargo, si creas tus símbolos para que esos símbolos reciten correctamente a diferentes resoluciones , y es a la vez fácil y agradable Now. Si quieres a Teoh,
ten un poco de práctica. Usa esta primera pantalla, y puedes, por ejemplo, hacer nueve o seis filas fuera de estos dispositivos e intentar recrear la orientación, la orientación horizontal fuera del dispositivo. Bueno, ahora me voy a centrar en la versión de tablet, y es un poco similar. Y aquí hay una cosa más que me gusta que sepas. Entonces si duplicas el orificio de arte, entonces si estás duplicando el nuestro barco ahora cambiando los valores fuera del tamaño de este nuestro barco o, por ejemplo, configurándolo para ser el valor del iPod o el valor del iPhone. Siempre tienes los mismos símbolos aquí, por lo que los símbolos no cambian. Sólo haces una segunda instancia de este símbolo en la vista de tableta, sin embargo, si presionas A para un tablero Arthur y si creas arte nacido de tal manera y luego
copias y pegas para que vengas y veas y vengas V esos elementos entre los tableros de arte si vuelves a tus símbolos. Tendrás nuevos símbolos apareciendo ahí, por lo que esto crea los nuevos símbolos. Y a veces quizá quieras que esos nuevos símbolos sean diferentes en versión de tablet y en tus versiones móviles. Por lo que esto podría ser útil. Pero a veces solo necesitas trabajar en los mismos símbolos, y normalmente prefiero trabajar con el mismo símbolo. Entonces estoy duplicando el diseño, los fueraborda, y luego cambiar el tamaño en consecuencia. Y ahora puedo seleccionar todo lo que tengo aquí. Y el primer enfoque para la tableta es tan simple porque simplemente cambias el tamaño de los artículos. Y si tienes todo dicho bien en tus opciones de dimensionamiento re, como puedes ver, todo es casi perfecto en la tableta también. A lo mejor necesitamos ajustar la alineación fuera de estos campos de texto así como los ítems para que dijeran directamente en medio de la fila. Entonces elegamos el campo de texto de música arriba, y asegurémonos de que esto esté en medio de nuestro componente. Ahora, si volvemos a la instancia como puedes ver, todo se sienta en el centro, ahora
podemos modificar la altura de los elementos y probablemente Ahora miran lo
mejor que puedes hacer. Si quieres ajustar cosas como divertidos tamaños o colores entre esos
diseños de tabletas y móviles , necesitas tener una versión diferente fuera de esos símbolos. Así que recuerda tener siempre un comando C Command V. Si quieres, por ejemplo, modificar un tamaño divertido en el símbolo entre esas versiones. Por ahora, duplicemos este tablero de arte y cambiemos el ancho y la altura así que tenemos. Los resultados son versión off. ponen las tabletas, y básicamente hay dos enfoques. Teoh crea cosas. Disposición de Tablet. Por lo general, utilizas todos los componentes del diseño móvil y los escalas. Entonces, por ejemplo, tienes los componentes de ancho completo. Pero mejor acercamiento, creo, como usar el espacio completo fuera de la tableta. Y hay mucho más. Los picos son tanto más bienes raíces fuera de tu pantalla para que puedas pensarlo a través. Y, por ejemplo, volvamos a copiar esta configuración desde nuestra vista móvil y pongámosla a la derecha a la izquierda de esta vista de tableta, y eso nos hace ver todos los artículos. Claramente, sin embargo, a la derecha. Tenemos mucho espacio para que, por ejemplo, podamos crear un rectángulo como marcador de posición para algunos elementos más. Y puedes poner más artículos aquí. O, por ejemplo, si vas a esta definición de ajustes de modo. Por ejemplo, si entras en las retenciones Good Morning World o Good Night, tienes todos los ajustes adicionales en una pantalla. Entonces así es como puedes usar haciendo uso fuera de esta pantalla extra inmobiliaria. Y en realidad, en este diseño vertical, podemos hacer lo mismo, así que hagámoslo un poco más pequeño en términos de semana fuera. Ahora cambiemos la altura también, y todo es legible porque tienes los mismos tamaños de teléfono. Tienes aún más espacio en blanco entre esos artículos. Y ahora puedes usar más viejo un lugar que tienes el lado derecho fuera este menos y hacer este rectángulo que va a jugar eso, por ejemplo, algunas opciones adicionales o algunas otras opciones de tu configuración. Ahora hagamos los cambios en consecuencia. Y como puedes ver, este es el enfoque móvil y tablet tanto en orientaciones horizontales como verticales de pantalla. Entonces no vamos a hacer todo el diseño de esa manera. Si quieres practicar, puedes hacerlo y utilizar nuestras finanzas para convertir todo en esos usos
adaptativos horizontales y verticales tan bien como puedas. Piense en la versión de escritorio, sin embargo, por favor tome en cuenta que esas versiones móviles son bastante similares en términos de
cómo los usuarios realmente se acercan a los dispositivos. Los usaron en un ambiente similar. Tienen lo mismo en botas para que puedan usar gestos así como los dedos para navegar y deslizar, y hay que tomarlo en cuenta. Entonces, por ejemplo, creas batallas para ser un poco más grande. Si bien en el escritorio se tiene, AH, ambiente
diferente y diferentes dispositivos de entrada. Tienes teclado así como ratón. Por lo tanto, ten en cuenta que no es necesario necesariamente que Theo exponga las mismas opciones en ambos dispositivos o en ambos dispositivos móviles y en el escritorio. Más bien, te gustaría pensar en Vesta como algo que es más avanzado y te da más control sobre tu hogar inteligente. Por ejemplo, mientras que en el móvil tienes todas las acciones mayores, necesarias que están conectadas,
por ejemplo,a por ejemplo, dónde un cuál es tu ubicación
en casa, en qué tipo de dispositivos y acciones quieres actuar en el mejor de los casos, la opresión será más para administrar todos esos dispositivos y
realizar, realizar todos esos ajustes, acceder a opciones más avanzadas de tu esperanza. Entonces, sí, eso es básicamente todo. que respecta a esas cintas considerando diferentes orientaciones, se trata de tamaños de
pantalla. Por favor. También recuerda mantener tus activos de una alta calidad lo que significa que necesitas cuenta del dedo del pie para mapas de beat de alta calidad si los usas, y también usa vectores tanto como sea posible. Por lo que esos horarios nativos, así
como importar vectores desde illustrator u otras aplicaciones como iconos, son This Is it por ahora. Gracias por mirar y nos vemos en la siguiente lección.
47. Introducción a Marvel: hola y bienvenidos a la siguiente lección. Y tengo buenas noticias porque nuestro diseño en bocetos casi listo. Entonces ahora vamos a crear algo que se llama prototipos rápidos. ¿ Vamos a dar un usuario y capacidad para cambiar entre nuestros barcos de arte y ver diferentes transiciones así como navegar como esta aplicación más vital vamos a usar Marvel para hacer eso. Como puedes ver, mi interfaz de boceto hay un bloqueo de maravilla instalado ya. Por lo que puedes al este de la maravilla Blufgan desde marvel hasta dot com. Y aquí también necesitas crear una cuenta. Esta cuenta es gratuita para después de dos proyectos. Por lo que esto se adapta a nuestras necesidades por ahora. Y vamos a crear un nuevo proyecto. Voy como este arroyo Proyecto fondo. Y aquí necesitamos ingresar el nombre home up para nuestro proyecto seleccionará iPhone siete como nuestro dispositivo. Y por favor sepan que esta resolución es a resolución X y tenemos nuestro proyecto en una
resolución x . Entonces lo vamos a ajustar más tarde, y ahora puedes agregar imágenes directamente para tu campamento desde tu computadora. Puedes ir a esta vista de diseño, y en Marvel, también
puedes hacer prototipos fácilmente. No obstante, la mejor opción que podemos tener en este momento es descargar el sketch Blufgan e instalarlo dentro de nuestro horario. Ahora podemos ir a bosquejar y usar este tapón para exportar el director del tablero de arte toe marvel. Entonces ni siquiera tienes a Teoh. Ni siquiera tienes que exportar. Esas están construidas. Una citación, tres incendios o algo por el estilo. Simplemente usas este blogging de maravilla, y simplemente hundes nuestros tableros seleccionados o piensas que todos nuestros tableros que están en tu página. Entonces, ahora vamos a hundirnos de la página principal. Yo me voy. Es como pensar todo y ahí. Como puedes ver que tienes esta configuración de exportación necesitas Teoh, Selecciona el Proyecto Derechos. Entonces este es nuestro hogar arriba y ahora necesitas igual que la báscula. Por lo que como mencioné, diseñamos en una escala X. No obstante, para Marvel, necesitamos adaptarnos a dos x caso. Entonces vamos a ir a huevos e incluso puedes ir gratis X Tú si tienes un iPhone siete plus o tienes algunos dispositivos android con alta densidad este lugar, puedes ir gratis. Salir tres docenas madre y Eso es porque tenemos activos de alta calidad en el interior, cómo en consecuencia beat maps así como vectores. Pero para este proyecto, vamos a poner huevos, y eso es suficiente. Ahora dijimos, Seleccione exportar y está exportando y cargando. Esos no son tableros directamente para maravillarse. Y como puedes ver, esta pequeña y hermosa animación está aquí. Y también los avances que ya hemos subido para fuera cinco artículos. Ahora está terminado, y podemos volver a Marvel y en nuestra casa, un proyecto que ya tenemos esas pantallas por ahora solo reorganicemos esas pantallas para que sean de orden incorrecto. Y como pueden ver, tenemos 7 50 por 13 34 lados. Por lo que eso es perfectamente correcto para nuestra escala de dos X. Y también hay un up que yo conduzco que podemos establecer. Entonces vamos a crear un rectángulo aquí, y voy a decir el tamaño fuera de 1 20 por 1 20 y dentro de este Congo rojo, vamos a crear una imagen
simple, sencilla para que podamos tener esta hermosa yo vengo Ahora vamos a seleccionar un para arte abort y seleccionemos un cartón alrededor de nuestra selección. Por lo que alrededor de nuestra forma y dentro de este arte. Pero vamos a poner, por ejemplo, esta foto fuera de nuestras casas inteligentes. Pongámoslo ahí y me aseguremos de que esto esté dentro de mis nuevos audibles. Hagámoslo un poco más pequeño. Necesito seleccionar esta foto dentro de la mezquita, y este pequeño ícono en realidad te vendrá bastante útil si tú, por ejemplo, enviaste esto a un cliente y cliente instalará este prototipo en su teléfono, y este pequeño icono se mostrará como el ícono para nuestra aplicación. Entonces eso es bastante bonito. Si dijeras el nombre para esto como yo podría estar exportando ONG, ahora
puedes seleccionar este ícono e importarlo directamente a Marvel. Entonces ahora tenemos casi todo. Quiero decir desde la primera página. Ahora volvamos a bosquejar, y necesitamos exportar algunas otras páginas. Entonces pasemos a General y cantemos aquí los tableros de arte. Entonces no voy a pensar en todos los tableros de arte porque aquí tengo esta versiones responsive. Entonces vamos a cambiar click en los nombres del tablero de arte que no voy a volver a exportar. Y ahora los tengo primero gratis nuestro barco seleccionado para que Select Sing seleccionado. Tengo todos los sectores correctos. Ahora vamos a subir. Eso es para maravillarse. Y mientras
subes, también se puede trabajar con dentro boceado un debilitado ir a la página siguiente y desde la
vista de acciones queremos subir Teoh. Esos son puertos también. Tenemos que hacer tablas aquí. Ahora vamos a la habitación. Y ahora hundamos todos los tableros de arte que tenemos aquí. Entonces vamos a hundir nuestros pájaros. Y por cierto, también
puedes seleccionar todos esos son tableros y ponerlos en una sola página para que sea más fácil. No tienes que hacer tanto clic que pensar, quiere y cada uno nuestro tablero. Nuestro barco está seleccionado como les dije. Siempre es mejor tener algunas páginas en tu comando de horario, sobre todo si tienes muchos tableros de arte para que tengas mejor rendimiento fuera del boceto. Y ahora cantemos. Esos no son tableros de CCTV y podemos volver a maravillarnos. Por lo que ahora están subiendo las últimas pantallas y dentro de Marvel. En un segundo, vamos a crear puntos calientes así como enlaces y transiciones entre esas pantallas. No obstante, lo
primero que tenemos que hacer es reorganizar y reubicar Esas son embarcaciones para que aparezcan en orden correcto. Entonces ahora vamos a echar un vistazo a esto. Tablas, esas son de nuestra habitación y vamos a moverlas. Por lo que este es el primer barco de arte fuera de la habitación. Éste irá allí. Esto es una alarma, y creo que todos los demás tableros de arte están en posición bastante correcta. Entonces tenemos acciones aquí, así que todo parece bastante necesario. Accedamos a la configuración del proyecto para que puedas ver que puedes cambiar el proyecto y el tipo de dispositivo. Puedes ir a este segundo top general y por ejemplo, aquí puedes habilitar comentarios así como notificaciones sobre notificaciones sobre nuevos comentarios . Entonces tienes, ah, seguridad. Puedes proteger con contraseña tu prototipo y también tienes el top de integración. Entonces si puedes encontrar este caso blogueando, ahí está. Y también puedes descargar el blogging así como conectar esto a la cuenta de slack. Y luego podrás compartir los prototipos dirigidos a tus canales de holgura y a tu equipo. Ahora se va a compartir preferencias tienes aquí a la chica que puedes copiar y pegar. Se puede enviar con correo electrónico o SMS. Lo vamos a extorsionar más tarde, y una buena opción aquí también es la prueba de usuario. En realidad puedes registrar los comportamientos de los usuarios que usan tu prototipo ahora, así que eso es básicamente comer en lo que respecta a la organización y configuración. Volvamos a bosquejar en Recuerda que siempre puedes probar y correr tu prototipo desde
dentro de boceto también. Si presionas esta pequeña batalla de juego en la fanfarronada de Marvel, puedes tener a tu hermano prototipo Diepraam directamente desde sketch. Aquí, puedes grabarlo. También puedes compartirlo, y eso lo hacemos más adelante. También hay una gran característica más fuera de las maravillas enchufando puedes hacer cualquier cambio en tu diseño de captura en este tablero de arte. Entonces, por ejemplo, vamos a seleccionar esos rectángulos y vamos a que las fotos. Entonces ahora tengo esas diferentes fotos en las cámaras y todo lo que necesitas hacer para cantar esto Nuestro barco es seleccionarlo y seleccionar fregadero seleccionado seleccionar el mismo proyecto, y ahora el barco de arte se intercambia dentro de Marvel. Entonces imagina que has creado un prototipo, y en esta pantalla ya has hecho algunos enlaces. Algunas transiciones de deporte caliente No tienes que borrar eso todo. Basta con actualizar en boceto y decir este otro barco seleccionado para que este
activo gráfico intercambie bajo el capó. Y esto es realmente bonito. Entonces tienes esta integración en vivo sin fisuras entre sketch y marvel, y eso es todo por ahora. Te veo en la siguiente lección.
48. Definir puntos de hotspots y transiciones: aquí estamos en Marvel. Tenemos pantallas de captura más antiguas importantes en maravilla, y ahora podemos seleccionar el primer arroyo y vamos al todo Mozart. Seleccionemos editar y ahora puedes crear tu prototipo rápido. Por lo que básicamente prototipado rápido se trata de crear los llamados deportes enteros que son básicamente los enlaces entre tus páginas y entre tus pantallas. También tienes opción de tener un brezo de fiesta aquí, y también puedes tener el pie de página fijo. Entonces básicamente puedes congelar alguna parte de tu gráfico para que cuando te desplazas por la otra parte, no
se mueva, y eso es todo. Entonces para nuestra primera calle, vamos a crear básicamente a puntos calientes aquí porque queremos simular que alguien usó su dedo para desbloquear la aplicación así como necesitamos simular la acción para
ir a teclear imposible. Entonces vamos a crear el primer deporte de caballos, y lo haces simplemente dibujando sobre tu lienzo. Entonces hagámoslo lo suficientemente grande para que puedas alcanzarlo con el dedo. Y ahora seleccionemos el destino hospitalario tan posible. Destino es básicamente la pantalla que aparecerá después de que el usuario realice alguna acción en
todo este deporte, y como puedes ver, aquí
tienes las tapas, y también puedes ajustar la parte superior de acción. Por lo que esto se dice para hacer clic o arriba, y esta es básicamente la opción predeterminada. No obstante, como se puede ver, se
puede seleccionar el cursor contra. Vamos por qué estar y tienes deslizando a la izquierda derecha arriba, abajo tienes cambio, y también tienes este doble top. Entonces nos vamos a quedar con este arroyo o top. Y ahora vamos a la segunda puñalada, que es transición de pantalla. Podemos establecer diferentes transiciones de pantalla para cada hot spots para que puedas haber sabido cuál es el valor predeterminado. Pero también puedes deslizarte boca abajo. Podrías dormir papa, y, como puedes ver por qué, flotando sobre esos iconos, tienes unas hermosas animaciones que te mostrarán cómo aparecerá esta otra pantalla. Y básicamente podemos sentarnos a dormir, y esta es la animación fuera de la siguiente calle. Por lo que cuando el usuario toque todo este deporte, dormirá dedo del pie una pantalla de inicio abierta. Ahora vamos a crear otro punto caliente. Por lo que tenemos el 2do 1 en esta página y vamos a ir a la pantalla de registro Ahora. Se deslizará hacia arriba la transición. Entonces esta otra S Creen fue como desde abajo y subirá ahora vamos a la acción y vamos a seleccionar la acción por defecto también. Ahora puedes jugar este prototipo. Entonces vamos a previsualizar este prototipo en otra ventana. Y vamos a griego en este primer punto caliente que tenemos aquí. Ahí vas. A partir de ahí, en realidad no
podemos volver a la primera pantalla fuera de nuestro prototipo. Entonces volvamos a la pantalla. Y básicamente, si terminamos nuestro trabajo con la pantalla, podemos presionar hacia abajo. Y ahí estamos en la lista. Fuera de las calles. Podemos seleccionar cualquier otra cadena para su edición, pero puedes quedarte dentro de esta pantalla. Y ahí tienes esas flechas a la derecha o a la izquierda. Y también puedes usar tus flechas en el teclado para cambiar a la siguiente página. Y como puedes ver, esta es la Página dos de 17 y esta es las contraseñas de pantalla de Logan. Entonces vamos a crear algún punto caliente ahí. Voy a crear hot spot a regreso, y desde este hot spot también irá a la primera pantalla fuera de nuestra app, que es la pantalla de inicio abierta. Entonces vamos a seleccionar la pantalla ahora la transición de pantalla así como las acciones, por lo que la transición de pantalla va a ser flip y la acción va a dejar los valores predeterminados. Por lo que después de hacer clic o tocar, vamos a ir a esta pantalla. Pasemos al siguiente,
que es el primer anillo de nuestra aplicación, y aquí tendrá algunos puntos calientes. Entonces vamos a seleccionar el primero y dibujar el 1er 1 Tal vez, vamos a rodar cámaras hot spot, y siempre saluda caliente ambos para que sean un poco más grandes que los iconos. Entonces, si tienes espacio en tu diseño, solo haz un punto caliente más grande para que un usuario pueda llegar fácilmente a él. Ahora dijimos la pantalla de TV CC y tal vez vamos a seleccionar la transición de Philippe s aquí también. Ahora vamos a crear otro hot spot, y ahora este hot sport serán cuatro toboganes para abrir acción. Lo vamos a hacer para que cubra casi toda la pantalla para que puedas deslizar a cualquier parte y puedes ir a la página principal fuera de nuestra aplicación, que pasa a ser el arte general a bordo. Entonces vamos como General Outborda y ahora podemos establecer la transición. Entonces si te deslizas a la derecha, vas a haber empujado a la izquierda. Probablemente. De acuerdo, empuje a la izquierda servirá. Y vayamos a las acciones. Y cambiemos de arriba para deslizar ¿verdad? Y por qué deslizar lloraba, deberíamos ir a esta página muy general y principal fuera de nuestra aplicación. A ver si funciona. Juguemos a este prototipo. Vamos a deslizar. Y ahí tenemos nuestra pantalla en la pista, y creo que eso es casi todo lo que podemos exprimir de esta rápida técnica de prototipado . Entonces vamos a la siguiente pantalla. Y esta es la pantalla de advertencia, advertencia de pantalla de
inicio y básicamente eso es en realidad lo mismo que esta cadena home open. Entonces lo que básicamente podemos hacer es duplicar esos puntos calientes. Dejemos que esto aguanta un poco más pequeño para que pueda acceder a la opción duplicada para los puntos calientes de la cámara y vamos a dar clic en Duplicar. Y ahora seleccionemos Esos son barcos, por lo que queremos duplicarlo para advertencia de pantalla de inicio así como pantalla de inicio abierta. Eso es como duplicar en gratis nuestros tableros y ahí lo tienes. Ahora podemos hacer este más grande otra vez, y tal vez, por qué ahí también, y tú quieres duplicar éste para que pudiéramos duplicar y vamos al siguiente y al siguiente y vamos a duplicar. Entonces esto es todo. Tenemos dos pantallas más. Prepara este con advertencia y esta pantalla abierta. Vayamos a la pantalla seis, que es general. Esta pantalla general probablemente tendrá algunos deportes de retención aquí para acciones. Y vamos a seleccionar la vista de acciones. Esta es la acción. Selecciona nuestra directiva y elijamos acción. Legalmente default. Esa es tu transición. Vamos a tener pelea aquí por todas esas pantallas por todos esos iconos vamos a tener un simple desvanecimiento. Entonces vamos a seleccionar los siguientes dispositivos uno, Vamos a gustar dispositivos y vamos a ir a la transición de pantalla. Elegiremos ahora al destino. No tenemos energía. En realidad, no
hicimos eso, así que elijamos CCTV, CCTV. Ahí hay cámaras que tenemos en algún lugar. Vamos a las cámaras con transición de pantalla fuera de pelea, y creo que eso es casi todo. También necesitamos crear un hospital que vaya a estas secciones de configuración. Entonces vamos a seleccionar ajustes y la transición en este caso será el sueño. Y por último, dibujemos otro último punto caliente en esta página. Este será el puntera de punto caliente la izquierda de nuestra parte superior, y vamos a usar todo este deporte para enlazar dedo del pie esta pantalla de inicio abierta. No obstante, también
puedes conducir a la pantalla de carga. Y ahí tienes algunas otras opciones, como enlazadas a última página visitada, y lo usarás para las flechas aquí más tarde, así
como puedes enlazar a tu o M, pero algo que también puedes tener esta opción para desplazarte a un encore, y esto marcará. Si tienes unapantalla larga y
vertical, pantalla larga y
vertical, puedes desplazarte a cualquier posición de esta pantalla vertical, y también puedes mantener esta posición de cuervo por lo que la usaremos más adelante. Ahora que seleccione pantalla de inicio abierta. Y eso es todo para esta pantalla. Ese cambio a la siguiente pantalla. También puedes presionar la flecha derecha en tu teclado para ir al siguiente tren, y aquí estamos en la pantalla de dispositivos. Entonces esto es bastante interesante, porque en la pantalla de los dispositivos tenemos una altura fuera que es más alta, en realidad, que la pantalla fuera de nuestro iPhone que nuestro dispositivo. Entonces vamos a usar este brezo fijo aquí. Bueno, quizá primero vayamos a la vista previa de este prototipo, y veamos cómo se ve sin el arreglo Heather, que
puedas comparar cómo se comporta. Ahora intentemos desplazar esta vista. Y como pueden ver, aquí
tenemos una barra de desplazamiento y podemos desplazar fácilmente la vista tan bien como podríamos deslizarla en el dispositivo móvil. Y ahora queremos mantener este dispositivo elementos, esta parada que tenemos eso,
que se fija en la parte superior y el resto de la pantalla se mueve bajo este elemento. Entonces ahora volvamos al prototipo y seleccionemos el fix Heather para que termine en este mismo píxel. Tenemos esta 78 semanas de edad y vamos a cortarla ahí mismo. Entonces vamos a previsualizar el prototipo, y ahora puedes ver que por donde te estás desplazando, tienes este comportamiento como se esperaba. Para que así podamos tener esta zona fija de brezo. Ahora vamos a crear el enlace al último lado visitado, y también vamos a crear vinculado a la propiedad. Entonces esto está configurando pantalla Ahora digamos la transición del destino aquí o en realidad tuvimos esta transición
flip, así que pasemos a la transición de la flota. Y ahora pasemos a la siguiente pantalla. Por lo que la octava pantalla. Tenemos ajustes aquí y necesitamos hacerlo, dijo
Feek. El festín Heather, porque la pantalla también es más alta que las cosas de iPhones por ahora vamos a crear un hospital o podemos volver a la séptima pantalla. Y ahora duplicemos todo este spot que irá a la pantalla anterior, y lo podemos hacer por todas las pantallas que tienen este back bottom aquí en la parte superior. Entonces vamos a ponerlo para todas esas pantallas y vamos a tenerlo duplicado en el seis pliegues. Selecciono esta opción, y ahora en pantalla, ya
tenemos este hot spot. Entonces pasemos al siguiente arte a bordo. Y ahí tenemos Acciones son tablero. Vamos a crear un punto caliente aquí, y puede ser bastante grande, así que lleva de pie esta acción. Seleccionar copia. Nombraríamos fuera de pantalla, pero básicamente es la vista única fuera de la acción, y ahora vamos a tener quizás transición pop. Creo que es un poco agradable, así que vamos a cerrarlo y vamos al siguiente. Tenemos 10ª Junta de Arte y aquí tenemos esta acción de stop. Entonces vamos a crear punto caliente. Eso es ser suficiente. Y esto volverá a nuestra acción. Seleccionar Archibald. De acuerdo, y vayamos a la transición de pantalla. Y vamos a seleccionar tal vez esta vez en, ya
sabes, ligera al revés pero tal vez ligera, ligera transición hacia abajo. Ahora vamos a la siguiente pantalla y esta es la pantalla de la habitación. Por lo que tenemos recámara. Ni siquiera tenemos que tener brezo fijo o comida fija,
er, er, y eso es porque esta pantalla coincide con iPhones, altura y trigo. No obstante, vamos a crear puntos calientes para el menú y hagámoslo de manera inteligente. Entonces vamos a gustar las transiciones y vamos a la pantalla de bultos. No obstante lo vamos a hacer aquí, vamos a duplicar este dedo de Hartsburg todas las demás pantallas, pero la lámpara. Entonces vamos a tener cortinas y también alarma así como censo que copié y ahí lo tenemos. Ahora vamos a crear otro punto caliente para las cortinas. Ah, y por cierto, en realidad, si nosotros si volvemos atrás y si intentamos ahora editar este hot spot que tenemos aquí, por ejemplo, tratamos de liderarlo. Tienes la opción de eliminar esto de esta imagen en particular. Todo lo puedes eliminarlo de todas las instancias. Entonces de todas las imágenes ahora vamos a crear otra. Voy a dibujar un punto caliente para unas cortinas que seleccionan cortinas y vamos a duplicar, así que tenemos que duplicarlo de nuevo. Antes de eso, aplicamos la transición fuera de la fe. Vamos a duplicar dedo del pie todas las pantallas de nuestra recámara en lugar de fuera de las cortinas. Ahora vamos por la alarma. Alarma va vinculada a esta pantalla de alarma que seleccionó. Voy a poner la pantalla adecuada aquí y vamos a la transición. Antes de duplicar, también
vamos a tener fe. Por lo que luchar contra la transición en este muchos en la parte inferior en realidad generará este efecto apagado, cambiando el resaltado de los iconos individuales. Y creo que esta transición de desvanecimiento será bastante agradable porque tenemos este
efecto de menú que así. Tengamos otra, y vamos a duplicar dedo del pie cada pantalla en lugar de las pantallas censales o las cortinas. Tenemos grumos y alarma también, y también tenemos este último hospital. Pero necesitamos tener estos puntos calientes en la otra pantalla, así que vamos a cambiar a la siguiente y vamos a crear punto caliente aquí. Esto en realidad irá a la pantalla principal fuera de la recámara. Por lo que la pantalla de temperatura con efecto Fay y vamos a duplicar a pantallas OLED sobre la pantalla de
temperatura. Entonces está fresco ahí,
ahí y allá, rápido, rápido y duplicado. De acuerdo, creo que todos estamos listos para todas estas pantallas. Entonces sí, probablemente necesitará tener algunos otros puntos calientes aquí. Pero no, no lo creo. Entonces dormitorio está básicamente hecho, y no vamos a hacer esto. Activa casillas aquí. Ni siquiera intentaremos lograr ninguno fuera de los gestos de deslizamiento. Eso se debe a que dentro del prototipado rápido que simplemente no puede
hacerlo, es mucho más fácil crear prototipos conmigo. Direcciones de crecimiento que tenemos en software como Principal Flint o O tal vez Origami, pero no ahí. Aquí siempre solo tenemos algunas transiciones básicas entre las pantallas. Entonces para esa pantalla 16 que vamos a tener una transición a ajustes y vamos a decidir sobre la transición del sueño y ahora, desde la vista de la cámara, también
tendrá la misma parte de configuración encendida. Entonces vamos a duplicar. A lo mejor vamos a seleccionar la pantalla de TV CC que estamos buscando y vamos a tan como sí nos subamos a las pantallas y que mis amigos está todo fuera de nuestro trabajo aquí. Por lo que hemos hecho con éxito todos los enlaces y todos los puntos calientes. Ahora podemos ir a la siguiente lección y previsualizar nuestro prototipo.
49. Prototipos listo: en la lección anterior con importantes las pantallas, y también hemos hecho enlaces y puntos calientes entre nuestras páginas. Ahora es el momento de probar el prototipo dentro de Marvel. Entonces vamos a seleccionar jugar. Ahora. Puedes ver tu prototipo así como una gorra mo de un dispositivo fuera de tu elección. Por lo que hemos elegido el iPhone siete, y ahí puedes ir al menú, y desde ahí puedes irte a casa. Entonces, también, la primera pantalla así como ver pantallas OLED. Entonces por favor recuerden los atajos. La edad es hogar y G es el atajo que mostrará todos fuera de los artículos que tenemos aquí , y puedes cambiar entre ellos y puedes previsualizarlos en tu prototipo. También puedes seleccionar entre flechas izquierda y derecha aquí para ir a la pantalla siguiente o anterior así
como puedes presionar las flechas del teclado izquierdo o derecho para hacerlo. Ahora volvamos a nuestro prototipo, y si decides que quieres cambiar el orden de las pantallas, puedes hacerlo y luego simplemente puedes refrescar el prototipo. Entonces ahora usemos nuestro prototipo, e intentemos escribir una contraseña Voy a dar clic en el primer hot spot. Como puedes ver, teníamos esta animación yendo desde el dedo del pie inferior en la parte superior fuera de nuestra pantalla. Y ahí podemos establecer la contraseña. Por cierto, si haces clic en cualquier lugar fuera de cualquiera de los puntos calientes, verás los puntos calientes anteriores. Por lo que verás todos los hospitales que están en esta página en particular, y puedes apagar esto pasando por las preferencias, la configuración fuera de tu tipo hermano. Y aquí en sección general, te multaron ocultar, hot spot heenes, y podrías habilitar eso para ocultar todas esas cosas que aparecen. Entonces ahora vamos a la primera página. Como puedes ver, tuvimos esta animación flip. Tenemos la animación aquí también. Podemos volver de la CCTV. Ahora podemos realizar esta operación de diapositiva para ir a la sección principal y vamos como a la derecha ahora tenemos esta pantalla yendo de derecha a izquierda, y aquí tenemos cinco puntos calientes. Y si vamos a las cámaras, por ejemplo, lo interesante aquí es que si haces clic en el mismo fondo atrás, volverás a la diferente pantalla ahora. Entonces vamos a la configuración en y qué más podemos usar aquí. A lo mejor acciones. Ahora eso es griego en la portería, o cualquiera dentro de estas acciones. Aquí tenemos un pergamino. Entonces como pueden ver, tenemos que hacer algunos ajustes a nuestros prototipos. De eso, el encabezado en realidad se fija la parte superior. Entonces volvamos a nuestro prototipo. Encontremos este reloj pantalla de TV. Esto es acción. Seleccionar Kobe. Vamos a editarlo y vamos a seleccionar arreglar Heather. Por lo que ahora nuestro brezo estará pegado a la parte superior fuera de la pantalla. Simplemente mama hecho, y también necesitamos refrescar nuestro prototipo. Entonces ahora, como pueden ver, estamos en la misma página y funciona como un encanto. Entonces seleccionemos parada para volver a la pantalla, y eso no es mirar atrás. Y también necesito un arreglo más en mi presidente, porque si selecciono las habitaciones aquí, necesito ir de pie esas pantallas pierden pantallas de recámara con ajuste. Entonces volvamos al tipo de hermano y editemos esta pantalla. De verdad lo es. Y vamos a crear aquí un hot spot para que pueda ir directamente a la primera pantalla fuera de la recámara , que es la pantalla de temperatura, y selecciono tonto o tal vez como la transición. Y por cierto, probablemente
pueda seleccionar. A lo mejor es como transición a la izquierda y tal vez, vamos a refrescarlo. Vayamos a la recámara. Y ahora, como pueden ver, puedo cambiar entre esas páginas y este destino La transición es en realidad bastante bonita
porque me permite una transición suave entre esos muchos artículos. Si tengo deslizamiento de izquierda o derecha, no
se vería tan bien. Por lo que esta transición del destino es bastante guay. Pero ahora necesito volver de las pantallas a mi pantalla de inicio otra vez. Edad de prensa. No obstante, también
puedo volver a agregar esta vista, y puedo crear punto caliente aquí que irá a una página de inicio. Básicamente, este este hot spots podría aparecer también en cualquier otra pantalla que tenga. Entonces vamos como alguna transición, tal vez empuje a la derecha e intentemos duplicar esto para que esté encendido fuera de nuestras pantallas. Voy a seleccionar todas las pantallas en lugar de la pantalla principal para que no
vuelva a sí misma, y voy a duplicar esto en las 16 pantallas de mi prototipo. Entonces ahora es como la botella duplicada y volvamos a nuestra vista previa. Obviamente, necesitamos refrescar la vista previa, pero ahora nuestro prototipo está terminado y podemos pensar en cualquier parte de la parte superior para ir a la
página principal y desde la página principal mientras hablamos en la parte superior. Tenemos esta transición de derecha a izquierda fuera de nuestra recámara. Ahora volvamos a bosquejar y de la fanfarronada de Marvel, si seleccionas jugar en horario, también ten este prototipo, y esta es una vista en vivo. Entonces si cambias algo en boceto, se actualizará en consecuencia en esta vista, por lo que siempre podemos presionar de nuevo en casa. Consulta, comprueba cómo funciona tu prototipo y todas las transiciones que hemos establecido dentro. Marvel como puedes ver todo, hay otra cosa que tienes aquí es un enlace de copia común para que puedas copiar este enlace a una junta de alegatos, y luego puedes pegarlo a holgura o a un correo electrónico a tu colega, y él o ella puede verlo dentro de un navegador para que ni siquiera tenga que tener sketch o cuenta de
Marvel. Entonces puedes grabar. Y como puedes ver, todas las acciones que tenemos aquí están siendo grabadas en un archivo de película que
también puedes enviar . Y así funciona Marvel. Por lo que nuestro prototipo está listo. Espero que se diviertan bien, y veo en la siguiente lección con algunos ajustes de exportación y empinadas, ver más adelante.
50. Uso de la nube de bocetos: Hola. Es agradable verte aquí en, desafortunadamente, la última lección de este material. No obstante, la buena noticia es que has aprendido tanto por el discurso fuera y que
te voy a mostrar algunas otras características geniales fuera de boceto en esta lección. Entonces vamos a hablar de exportación así como vamos a hablar de influencia de boceto. Si estás exportando este proyecto para Colding, siempre
debes consultarlo con un frontal y desarrollador o un desarrollador fuera de tu aplicación . No obstante, en esbozo siempre se pegará a los mismos patrones, y siempre utilizará las mismas funciones. Por lo general voy a mi espacio de símbolos donde todos mis símbolos están organizados Arditti y la mayoría de esos símbolos voy a exportar. Así que podría incluso seleccionar muchas capas a la vez y luego hielo como los ajustes de exportación. Primero hago clic en hacer fondo exportable y ahora puedo decir la configuración de exportación. Entonces ya sabes que si tienes P y G, obviamente
vas a ir por exportar diferentes tamaños por ejemplo, yo descanso Y si vas a preferencias para presionar coma de comando, siempre
puedes acceder a esta opción de presets. Y aquí puedes agregar tus propios presets. Puedes, por ejemplo, tener un preset web fuera de una X y dos X también, con algún prefijo y sufijo es y solo vas a plus añadido a tu sección de presets. Ahora lo siguiente son los cuatro meses y durante cuatro meses obviamente necesitarás esas escalas Onley en caso de que estés exportando mapas de beat y si
puedes, siempre exportas como VG si así te pegas siempre a peleas vectoriales. Y a menos que realmente sepas lo que estás haciendo, no quieres exportar SVG y Norma dos X y libre X. Siempre pegas dedo del pie un spg y en la escala fuera de una X y luego este archivo svg con escala sin problemas a diferente resolución incluso beat Factores de cueva de Biggers. Por favor recuerda que si haces alguna rebanada o si micrófono capas exportables, siempre
puedes hacer clic en este botón de exportación y exportar todo a la vez. Incluso tienes esta báscula aquí y toda la información sobre los cuatro meses. Entonces y siguiente piensa que debes recordar es que si quieres Teoh, agarra algo de spg frío de, por ejemplo este ícono puedes hacerlo haciendo clic derecho en este ícono, y ahí tendrás la opción desactivada Copiar SVG Co. Entonces, a veces, si preguntas, tu desarrollador aquí solo requirió código SPG
para pegar en, por ejemplo, código
X o para colocarlo en HTML para tenerlo en el sitio web. Ni siquiera tienes que exportar sus fuegos SPG, sino que sólo basaba el abrigo. El siguiente es co PC como atributos como bordes,
colores, colores, tamaños de
teléfono. Recuerda que está todo aquí y puedes Kobe eso y pegarlo directamente del frente de los desarrolladores, por ejemplo, y algunas otras herramientas te permitirán hacerlo aún mejor. Y a esto se le llama la entrega. Así que por favor echa un vistazo a la mano de sección fuera de los tutoriales, y luego verás algunas herramientas diferentes como un árbol, o tener un código que hará que cooperes con los desarrolladores aún más fácil y eficazmente. Ahora vamos a explorar otra característica de boceto, que es la nube boceada. Pero primero, vamos a la derecha. Da click en la barra de herramientas y recuerda que siempre puedes personalizar este Tober, y si no ves este icono de la nube de captura, puedes obtenerlo desde ahí. Y también por favor recuerda que siempre puedes cambiar este icono y texto para que sean, por ejemplo, solo
iconos o solo texto. Y creo que ya conoces todas las funciones que hay aquí para que puedas ahorrar algo espacio dentro de tu monitor. Ahora, antes de hacer clic en este pequeño ícono, vamos a bosquejar preferencias presionando co mes coma y vamos a la sección de nube . Como puedes ver, esos son ajustes de cuenta, y esta es la misma cuenta que has utilizado para registrarte. Boceto. No necesitas dedo del pie. Solicitar cualquier servicio adicional o pagar extra por este servicio. Simplemente lo tienes incluido con tu suscripción de boceto. Entonces eso es arroyo en la nube, y ahí puedes compartir este documento dentro de la nube. Ya puedes decir la contraseña para que tu documento sea seguro y luego hagas click en la batalla de
subida. Ahora el documento se está subiendo a la nube, y tomará un tiempo porque se trata de documentos bastante grandes. Entonces vayamos a la nube programada mientras tanto, y veamos cómo se ve en el boceto amor. Por lo que si tienes algún documento aquí, aparecerán en una cuenta de nube programada. Ahora nuestro layout ya está subido por lo que podemos seleccionar este link y podemos Kobe esta cosa y enviársela a cualquiera que pueda pegarlo en el navegador y pueda previsualizar tu proyecto para que él o ella ni siquiera tenga que agarrar instalado porque todo es dentro de un navegador. Y como pueden ver, aquí está nuestra aplicación y todas las pantallas que tenemos aquí. Pero también se puede cambiar Teoh diferentes páginas. Por ejemplo, vamos a la página de cámaras, y ahora puedes previsualizar una de las tablas de arte. También puedes ir al 2do 1, por lo que como puedes ver, es extremadamente fácil compartirlo. Y además, esto es genial para un mostrando tu prototipo porque no tienes que exportar todos los
archivos PNG para aburrimientos de arte. Ahora, si vas a la nube programada, tienes todos los proyectos aquí. Podrás gestionar esos proyectos. Se puede, por ejemplo, cambiar la configuración de privacidad o cambiar las contraseñas. También puedes eliminar este activo, y lo mejor es, si habilitas este documento Teoh estar sincronizado con la influencia. Una vez se hundirá todo el tiempo, por lo que guarda constantemente tus documentos. Y después empuja los cambios a la nube para que en la nube tengas la versión más reciente de tu documento. Y esos enlaces que compartes siempre son actuales también. Por lo que significa que ahora tienes una copia de este archivo en tu disco duro, y siempre puedes seleccionar archivo y el river toe y navegar por todas esas versiones con el historial dentro de tu disco duro. No obstante, la versión más actual siempre se queda en la nube también, para que sea segura y puedas utilizarla en cualquier momento. De acuerdo, eso es todo por ahora. Gracias por su atención, y los atrapo en la última lección para resumir este curso.
51. Outro: Hola ahí. Y bienvenidos a lamentablemente última lección de este curso. Pero la buena noticia es que ya tienes todos los conocimientos requeridos para trabajar eficientemente en sketch. Ya sabes, todos los consejos y trucos y todas las técnicas cool que te permitirán crear una bonita Web o nuestro play out. Entonces espero que te hayas divertido en el discurso y también que hayas aprendido mucho y te animo a que otros cursos. Ahora es un gran momento para ir a cursos desde el prototipado y para sumergirse en herramientas como Flint o director. O, por ejemplo, Framer. Espero que hayas disfrutado de este curso para mí. Esto fue realmente genial, y fue muy divertido crearlo para ti. Por lo que espero que nos encontremos en próximos cursos.