Transcripciones
1. Introducción a Curso de Adobe XD: bienvenido a mi curso al respecto. Más de 60 y en las escuelas vas a aprender todas las cosas básicas y todas esas cosas ofrecidas más de 60 vamos a diseñar, vamos a crear prototipos,
íbamos air de pie, ir de pie, aprenderás todo sobre prototipos de papel y toda la diferentes prototipos interactivos, prototipos
en vivo. Y vamos a colaborar con tus desarrolladores. Entonces, lo que significa la colaboración es que vamos de la mano de nuestro diseño a los desarrolladores sobre el uso Zeppelin y Advil cold. Entonces no te preocupes si no sabes de esto esta materia avanzada porque vas a aprender que en este curso voy a cubrir todos los conceptos básicos. Atajos? ¿ Cuáles son las diferentes herramientas que puedes usar para construir tu diseño? Y luego vamos a pasar a la fase de prototipado donde vamos a ir generar la gripe off app y diferentes pieles. Vamos a conectar las diferentes pantallas entre sí. Y luego al final, vamos a usar nuestro diseño para colaborar con otros desarrolladores. Vamos a diseñar,
vamos de punta, vamos de punta, darles especificaciones de diseño y diferentes las distancias entre los diferentes elementos y las guías de estilo citadas, que tus desarrolladores pueden usar al instante ahí nos diseño de aplicaciones o Diseño de aplicaciones para iPhone. Ahora vamos a cubrir mucho sobre tipeo fronterizo. Me verás creando diferentes papeles Prototipos iban a cubrir la parte de bocetos o el diseño a nivel de bloque, que es la primera cara de cualquier diseño. lo que este curso es una mezcla de técnicas de experiencia de usuario, pocas fuera de ellas. He discutido en mucho TD como prototipos y también sobre Adobe X T. Cómo puedes usar y crear prototipos instantáneos originar prototipos instantáneos usando Adobe X'd . Ahora mucho fuera de los diseñadores, he visto que nunca hablan de directrices de diseño,
yo las directrices de diseño de Estados Unidos o las directrices. Todo diseñador y desarrollador debe saber que la barra de navegación o que están pero fuera la
aplicación U. S. S.debe ser de 49 puntos o la carga debe ser de 44 puntos. Todas estas especificaciones voy a cubrir en este curso. Y, uh, si tienes algún problema o te enfrentas a algún problema, puedes contactarme fácilmente. ¿ Por qué son respuestas de preguntas y también me pueden preguntar directamente por mensajes. Haremos muchas cosas fuera juntos, así que nos vemos pronto en ese curso, y seré tu instructor
2. ¿Qué es Adobe Xd?: Hola a todos. hoy nos vamos a conocer la nueva herramienta fuera de Adobe, que es un trabajo x d y estuve leyendo durante mucho tiempo por pocas características la introducida justo ahora en X t. Y ahora te voy a mostrar algunas de las grandes características de él. Y son ah, equipo
Robur. Están trabajando un mes en estos y lanzando cada función mensualmente sobre la base de premiar de diferentes tú A diseñadores y diseñadores de experiencia de usuario de todo el mundo. De acuerdo, así que esto es a más de 60. Ahora mismo estoy en Windows. Solo hay pocas diferencias menores dentro de la versión macro y la versión de Windows, pero son casi similares. OK, ahora te voy a mostrar algunas off las grandes y cool características off X'd y por qué deberías usarlo como, ah diseño vía frame y prototype tool en tu experiencia de usuario,
diseño, diseño, flujo de trabajo o tu te un trabajo de diseño. De acuerdo, ahora por qué estas tres herramientas para boceto de tienda y hace respaldos D Son geniales para tu diseño o diseño de experiencia de
usuario porque apple son versión lideres U S, están produciendo sus gráficos en estos tres para Max Ok, por lo que en este momento están deportivos para el sketch de la tienda y aeróbicos T. Y si miras los tamaños de archivo el archivo adobe X t tamiza el más pequeño de los ochenta, 18.9 MB para que puedas ver está muy cerca del tamaño del archivo de boceto, por lo que es de cinco tamaño es muy pequeño. De acuerdo, entonces este es un punto plus muy grande porque puedes crear,
como, como, cientos de diferentes tableros de arte en él. De acuerdo, Así que diferentes pantallas, tal vez cientos sean 20 o 30 pantallas diferentes, y el tamaño de tu archivo seguirá siendo pequeño. De acuerdo, así que es más fácil compartir una de las características fuera de la grilla fuera de un trabajo X t es. Se repite. Bien. ¿ Saber qué? Repetir avaricia es que creas tu elemento de diseño una vez, y lo vas a repetir haciendo un gran Reino Unido Puedes ver en este ejemplo de diseño que vamos a crear un final de las partituras. Se puede ver que esta es nuestra repetición crea. Entonces si intento dedos cortos cortos en él, se puede ver que está quitando todas las demás,
uh, estas, um, um, plantillas de
contenido por aquí. De acuerdo, entonces se está moviendo estos. De acuerdo, Así que puedes extender tu cuadrícula en destrucción y en dirección vertical, tanto fuera de estas direcciones como se va a multiplicar tu contenido único y puedes cambiarlo. Se puede. Yo lo hice. Y puedes hacer lo que quieras para hacerlo. Y ah, significará un grupo. De acuerdo, entonces esta es muy buena característica para crear origen. Leer contenido al instante. Está bien. Por lo que no necesitas generar todo una y otra vez. Se puede ver por aquí. Estos son duplicados. Está bien. Mi protección infantil. Producción infantil, capacitación en protección
infantil. Entonces tenemos otra característica que se llama prototipado. Puedes enlazar toda la pantalla que puedas ver o escuchar. Aquí tienes un prototipo de sección, y puedes ver el prototipo en tu escritorio. Puedes ver tu cabello. Aquí hay un prototipo. Esta es una gran característica porque en el diseño de la experiencia del usuario, necesitas probar tus prototipos con tus usuarios. Necesitas ver cómo los usuarios van a usar realmente esto. Si este botón es suficiente para su Tom o si falta ahí, Tom. OK, entonces todo tipo de estas cosas, si el espaciado entre estos dos elementos es lo suficientemente bueno como para que el usuario no esté tocando este y abriendo éste. De acuerdo, así que estas son algunas características geniales de Adobe X'd, y ah, vamos a cubrir un montón de cosas en él. ¿ De acuerdo? Además, puedes moverte. Voy a previsualizar tus, uh, estos prototipos. Podrás verlas directamente en tu móvil. móvil de tu usuario. Además, puedes compartir las especificaciones de diseño. De acuerdo, déjame mostrarte las especificaciones de diseño. Aquí tenemos las especificaciones de diseño fuera del mismo proyecto, y se puede ver si voy a alguno de estos. Me está mostrando que este verde está ligado a éste. Entonces si voy a este,
Ok, Ok, entonces está mostrando todos los colores utilizados en este tablero de arte junto con todos los estilos er correctos . Entonces si hago clic en algún off thes item, se
va a mostrar los detalles fuera de eso ¿Cuál es el pueblo en altura fuera de este artículo? ¿ Cuál es la distancia entre estos dos ítems de eso? 16 puntos. Entonces todas estas cosas colores, redondez. Esta es la redondez de este botón. De acuerdo, Esquinas
redondeadas. Y está mostrando también otros hechos, como la sombra y este material. De acuerdo, así que esto es muy útil. Es en este momento en amargas especificaciones de diseño, Peter. Están tratando de mejorarlo para el y espero que vaya a ser una gran característica en futuro
próximo. Está bien. Está bien. Ahora el dedo del pie atrás, Adobe X'd algunas características más, que realmente me encanta es esta biblioteca de símbolos. Se pueden ver activos. Puedo agregar todos los colores que he usado todos los diferentes textiles,
y, uh, uh, estilos que he usado en los símbolos es en realidad el elemento reutilizable. Puedes crear un símbolo y puedes multiplicarlo o usarlo en cualquier pantalla. Y si hice algo fuera de los símbolos, se
puede ver la sobrecarga. Sé que estamos en prototipo más. Entonces aquí tenemos un símbolo. De acuerdo, entonces esto es un símbolo. Y si trato de cambiar el color del símbolo se puede ver que ha cambiado por todas partes. Diferentes aburrimientos de arte en todo el diseño. Dondequiera que haya usado este símbolo, se va a cambiar. Por lo que esta es una gran característica. Puedes cambiar instantáneamente cualquier cosa en tu tablero de arte. Si es un símbolo, se
va a actualizar en todos los tableros de arte. Por lo que este lado está básicamente en las guías de estilo que solíamos crear normalmente en otro Softwares o cualquier cosa en Zeppelin. O si has lavado mis otros cursos, ¿
sabes qué son las guías de estilo? Básicamente son las guías de estilo, coloración y tipografía para usar diferentes cuatro tamaños, diferentes colores y cómo se van a utilizar en nuestro diseño. De acuerdo, así que estas son todas las grandes características off X t, y te voy a mostrar mucho de acuerdo y cómo podemos generar rápidamente estos diseños en X T. en el mundo real, situaciones creando diseños con mucha velocidad es realmente necesario. Quieres mostrar tu prototipo o estás trabajando ab demo. Haz tu cliente o tu usuario y querías hacerlo instantáneamente dentro de dos horas o dos yardas o tal vez cuatro horas. Creo que este tipo de diseños con estas muchas pantallas, como una puerta nueve pantallas. Creo que se puede hacer en sólo a la nuestra. Y también puedes compartir tus prototipos. Se puede ver su cabello publicar prototipo. De acuerdo, puedes compartir tu prototipo link toe cualquiera fuera de tu cliente o cliente en el instante, y ellos pueden hacerlo en sus dispositivos. De acuerdo, Ahora, en la siguiente lección, te
voy a mostrar cómo descargarlo y cómo comprar este software si realmente
quieres comprarlo. Pero ahora mismo, si estás aprendiendo, solo
necesitas descargar la versión de prueba. De acuerdo, entonces pasemos a la siguiente lección.
3. Descarga e instalación de Adobe Xd: Está bien, ahora adelante. Vamos a descargar en Obey X'd versión de prueba. Entonces vas a ir a esta joya adobe dot com productos slash x escritura artista TML o
voy a compartir este mundo contigo. De acuerdo, entonces esta es la prueba gratuita. Puedes descargar el trial por un mes, y también puedes comprarlo. Entonces si haces clic en esto por ahora, es muy barato en este momento, y está disponible por departamento de $10. De acuerdo, así que esto es apenas recientemente, creo que hay otros APS ahí por $20 al mes, pero en realidad está disponible por departamento de $10. De acuerdo, si de verdad quieres comprarlo. Está bien. Ahora llegando a los requisitos del sistema. Está bien. Por lo que antes de instalarlo en tu PC son Mac, esto es muy genial cosa genial de esta app que está disponible para ambos
sistemas operativos . De acuerdo, Entonces si tu usuario o tu cliente están trabajando en un PC o un Mac, pueden ver su diseño, y pueden jugar con él. De acuerdo, entonces aquí tenemos los requisitos del sistema para Mac OS, que es Mac os 10.11 y posteriores. De acuerdo, estos son los recuerdos para G B, 1.4 gigahercios conocidos. ¿ Listo? No mostrar. Retina recomendada. Está bien. Y luego tenemos Windows 10. ¿ Alguien? Tres actualización. OK, así que si tienes ventanas simples, entonces y norte y la misericordia actualización o nada por debajo de esta versión 16 07 se va dedo del pie. Te da problema. No se puede instalar mucho fuera de los estudiantes. Me preguntaron eso cómo instalarlo en Windows 10. Asegúrate de tener alguna actualización de misericordia o la última versión fuera de Windows 10. Está bien. Y estos son los requisitos CPU, memoria de
dos gigahercios para G B A, G B, fuera del espacio de instalación y pantalla. Y desciende ahí. Está bien. De verdad prefiero que tengas una buena tarjeta gráfica en Leeds. Al menos tener Koji bi o un GB off ram en tu tarjeta gráfica. ¿ De acuerdo? Porque es necesario que la mayoría de ellos diseñen aplicaciones intensivas. De acuerdo, ahora, estos son los requisitos, así que asegúrate de seguir adelante. Si aún no has instalado en absoluto Baxter. Intenta instalar la versión de prueba gratuita y descárgala e instálala, y te veo en la siguiente lección.
4. Por qué Adobe Xd es tan impresionante: tres y te voy a presentar. Wired se extinguirá es tan popular entre los diseñadores de interfaz de usuario. Eres diseñadores y diseñadores de experiencia de usuario. Hay varias cosas o se puede decir, características que deben estar presentes en cualquier tipo off herramienta de diseño para que sea perfecta para la
experiencia del usuario . Los diseñadores disfrutan de los diseñadores. Ahora. El primer rasgo es que debe generar prototipo ¿Eres tú? Diseño o pantalla fuera de cualquier aplicación rápidamente para que podamos construir rápidamente en ella. Podemos diseñar. Ciertamente. No debe tomar como todo el día para crear cinco o seis cosas, a menudo app. De acuerdo, así que esto es una cosa. En segundo lugar, es que podemos compartirlo fácilmente y podemos es un fantástico con los usuarios, es
decir también puedes construir un prototipo rápido dammit, Prototype off your product X Pruébalo con tus usuarios rápidamente. Entonces si estás probando con el usuario y mostrándole o corazón tu primera idea fuera de tu app y hey no le gusta algo o él dice que esto es no es lo que quiero. Puedes cambiarlo instantáneamente en adobe X T y generar otro prototipo paseo lejos y demostró que realmente quieres este. De acuerdo, entonces esta es otra característica. Tercera características, que realmente introdujeron en este momento, es para desarrolladores. Lo que necesitan los desarrolladores es que realmente necesitan especificaciones, colores los cordones fuera de los colores en valores accesibles o valores RGB o a veces algún otro valor rgl para el valor. De acuerdo, entonces están más interesados en las especificaciones que qué colores necesitamos usar en nuestro este equipo fuera de esta app o sitio web. ¿ Y con qué son las diferentes especificaciones que se alargaron? De acuerdo, así que estos se introdujeron recientemente en Adobe, En realidad, que es que puedes extraer tus generar
tus elementos, tus especificaciones de diseño, que este elemento está tan lejos de este botón. De acuerdo, se
puede generar en ella dentro elemento inspect, que es, creo que son característica de Adobe en la división B en este momento. Además, recientemente
han introducido que puedes exportar tus diseños extra de adobe en Tow Zeppelin , que es otra herramienta para crear en especificaciones de diseño y grabar cualquier mención tu diseño. Y luego también han introducido que puedes exportar tus capas a siempre cool. Está bien. Y también hay uno más. Creo que proto por crear cualquier misión fuera de tu prototipo. Más detalle y emisiones son micro animaciones. De acuerdo, entonces todo esto se trata de esta lección. Espero que hayan disfrutado de mi presente operativo de introducción txt y qué se puede hacer con él y por qué se está volviendo popular entre otras herramientas. Porque hay una razón más por la que su tamaño de archivo es realmente pequeño. Creo que es aún más pequeño que el boceto. Si conoces un mapa de boceto, es más pequeño que bosquejo. Por lo que se está desarrollando a un ritmo rápido y de paz y se agregan muchas características cada mes en él. Así que realmente aconsejo que si te gusta el diseñador están en alguna sensación de diseño UX
realmente debes aprender a, ya
sabes, mezclarte con esta mano de distancia exceso de oferta. Está bien. Es realmente genial. Ligero, y espero que te guste. De acuerdo, nos vemos pronto. En otro menor
5. Actualiza la pantalla de bienvenida: Espero que hasta ahora, ya
hayas instalado Adobe XD en tu máquina. Ahora vamos a ver lo que esta pantalla de bienvenida aquí. Entonces cada vez que ejecutes Adobe X D, esta es la primera pantalla que vas a ver. Por lo que por aquí en la parte inferior puedes ver estos son mis archivos recientes. Por lo que estos son mis proyectos o archivos recientes que he abierto. Puedo reabrirlos haciendo click en cualquiera de estos. A la izquierda, tenemos diferentes áreas como home learn. Aprende es si quieres ver algunos de los videos
de la empresa de Adobe sobre cómo usar este Adobe XD. Después tenemos documentos en la nube. Adobe XD ha sido desplazado recientemente a la nube. Por lo que siempre que abras o guardas cualquier archivo, también
se guarda en la nube. Por lo que te trae los cambios y el historial modificado de tu documento. Entonces lo que sea que diseñes, por ejemplo, como una hora para ir a nuestra hace, si lo has guardado, reflejará todos los cambios que hiciste con el tiempo. Por lo que se va a auto actualizarlo en la nube. Por lo que estos son documentos en la nube. Si hago click aquí puedes ver estos son todos los documentos que he subido a mi nube. Se puede ver por aquí, estos son pocos documentos. Si quieres eliminarlos, puedes dar click aquí. Puedes eliminarlos así. Además, puedes ordenarlos. Estas son opciones diferentes. Y entonces tenemos dab compartido con ustedes. Entonces estos son los archivos si alguien más ha compartido sus proyectos conmigo y estoy trabajando con ellos en los documentos de la nube. Esto va a ser por aquí. Estos son todos los archivos borrados. Por lo que hace poco lo borra, levanté este expediente. Entonces todo esto está aquí. Ahora, si haces click en Administrar enlaces, se
va a ir a tu nube por aquí puedes ver este Macleod y una vez que hagas clic en la gerencia, pero entonces estos son los prototipos o especificaciones de diseño o proyectos todos publicados I han compartido con esos. Por lo que puedes ver si miras de cerca aquí en la parte inferior dice prototipo, prototipo, especificaciones de diseño prototipo, especificaciones de diseño prototipo. Por lo que estos son diferentes archivos que he compartido con otros. Se puede ver por aquí, esto es enlaces publicados, así que estos son todos los que he compartido con los demás. Puedes manejarlos por aquí. Puedes hacer click aquí, puedes copiar ese enlace y compartirlo con otros. Puedes eliminar permanentemente estos enlaces compartidos o publicados. Ahora, volvamos a nuestra pantalla de Adobe XD y puedes ver si volvemos a casa, eso es todo lo que tenemos estamos aquí, nuestros documentos en la nube compartidos conmigo, archivos borrados, LINCS
gestionados, enlaces gestionados para los archivos que he compartido con otros. Entonces todo eso se trata de esta pantalla de bienvenida. Espero que hayan disfrutado de esta lección. Vamos más allá y discutamos la interfaz en la siguiente lección.
6. Introducción a la interfaz de adobe XD NEW 2020: Ahora vamos a abrir un nuevo expediente para eso. Tenemos diferentes plantillas por aquí. Aquí tenemos iPhone, diferentes pocos quieren diseñar una aplicación para iPhone o Google App o Android, te vas a ir y aquí, si quieres ir por diseño web, estarás usando algunas de las plantillas por aquí. Si quieres diseñar algo para redes sociales, publicaciones de
Instagram, publicaciones de Twitter, encabezado de
Twitter se desvanecen, publicaciones de Facebook, dispara tu video. Te vas a ir por aquí. Ahora mismo. Voy a seleccionar algo de aquí. Al igual, vamos a seleccionar este Google Pixel para, para Excel. Ahora, este es nuestro tablero de arte por aquí. Entonces, maximicemos este. Y se puede ver en la parte superior dice sin título y aquí está un pequeño login en la nube y me está mostrando el tiempo por aquí. Así que pinchemos por aquí y cambiemos el nombre a nuestro, digamos primera visita a XD guardar. Entonces ahora puedes ver ya tengo algunos plug-ins y star, así que me está mostrando que un plug-in necesita actualización que tenemos momento voy a cerrar este. Y esta es nuestra sencilla interfaz o Adobe X a
la derecha puedes ver que tenemos pocas opciones por aquí como este es el nivel de zoom. Podemos acercar al 100%. Este es un 100% de este diseño. Esta es nuestra vista previa de escritorio para el prototipo. Esta es nuestra Vista previa móvil. Si tenemos instalada la app móvil y queremos ver esta pantalla en nuestro móvil. Esto va a ser o aquí. Si quiero invitar a alguien más, alguien más, a algún otro diseñador, puedo hacer click aquí. Esto sigue en la beta, por lo que puedo habilitar la edición. Para que otro diseñador pueda editar mi diseño dos. la izquierda aquí, tenemos tres pestañas,
diseño, prototipo y cizallamiento. El diseño es donde estaremos diseñando presume de nuestras pantallas, estaremos poniendo diferentes. Pero como vamos a estar haciendo cosas diferentes por aquí. Por ejemplo, este botón por aquí. Y en la sección de prototipos, estaremos vinculando dos o tres pantallas. Por ejemplo, si tengo otra pantalla donde aprendemos cada atajo y todo, solo
estoy tratando de explicar. Por lo que ahora puedes ver tenemos dos pantallas. Uno es este 11 es este segundo. Yo los puedo vincular así. Y esto va a ser en nuestro prototipo. Por lo que nuestros prototipos interactivos serán generales. Nuestros archivos de diseños serán de sobrecarga. Compartir será cuando queramos compartir nuestros diseños con alguien. Para que puedas ver tenemos diferentes opciones donde revisión de
diseño para obtener retroalimentación sobre tu diseño o prototipo. Entonces tenemos desarrollo donde estaremos compartiendo nuestro documento con los desarrolladores para mostrarles el código que tenemos para todos esos elementos por aquí. Entonces para presentación, tal vez queremos mostrárselo a nuestros clientes. Y luego para las pruebas de usuario y luego para la configuración personalizada personalizada. Por lo que estos son diferentes ajustes para compartir tu documento. No, voy a volver a casa. Y si hago clic en Inicio, se puede ver que podemos volver a esta pantalla de inicio donde podemos abrir cualquier otro documento reciente. Nuevamente, tenemos algo de menú por aquí, se
puede ver a la izquierda en Adobe XD es versión para Mac, tenemos el mismo menú en la parte superior de MAC por aquí. Por lo que puedo dar click aquí, puedes ver tenemos nuevo documento abierto. Entonces tenemos diferentes puertas de UI. Entonces tenemos documento reciente, renombrar este documento, guardar como guardar como documento local. Por lo que también puedes guardar este como tu documento local. Ahora el problema será que si intentas guardarlo como tu documento local, tus cambios son historial no se guardará por aquí. Por lo que pueden ver estos son los dos cambios que he realizado a las 302 PM y a las 03:04 PM. Tres nuestras 3pm y cuarto minuto, en realidad agregué esta segunda pantalla. Por lo que en realidad está guardando todos mis cambios en la nube. Entonces, siempre que quiera acceder a ella, puedo volver, por ejemplo, a ésta. Puedo revertir. Se puede ver abierto en una nueva ventana. Entonces si trato de abrir esto en una nueva ventana, se
puede ver que tendrá sólo una pantalla. Para que veas que tenemos este prestatario tiempo aquí. Y es la primera pantalla con la que creo que empecé. Esta es la diversión. Empezamos con pantalla vacía. Por lo que va a salvar toda la historia de todos los cambios que vas a hacer o tal vez ahorrar después de cuatro o cinco minutos. No estoy seguro de todos modos. Entonces a la izquierda tenemos todas las herramientas. Estas son las herramientas que vamos a utilizar en las próximas lecciones. Voy a explicar cada uno de ellos. Entonces en la parte inferior por aquí tenemos activos, tenemos panel Capas, tenemos nuestros plug-ins por aquí. Entonces, sean cuales sean los plugins que vas a instalar, estos son plugins gratuitos. A algunos de ellos se les paga. Puedes instalarlos por aquí y puedes usarlos así. Por lo que si haces click aquí, puedes ver que dice un error. Escala de colores demasiado amplia. Vamos a crear, puedes ver esto es una escala de colores por aquí. Por lo que estos son los plug-ins que van a automatizar y mejorar tus capacidades de Adobe XD. Entonces estas son las herramientas. Estos son los tres que mayormente veremos este tablero de arte por aquí a bordo de Arbor, Pelham. Estos son tableros de arte, en realidad, estos se llaman tableros de arte. Y eso se trata de la interfaz de Adobe XD. Tenemos tres pestañas principales por aquí, diseño, prototipo, y compartir. Y este es el nivel de zoom. Lo estaremos usando mucho. Este es el botón de reproducción para previsualizar nuestro tiempo perfecto lejos. Se puede ver en esta ventana, esto también se va a utilizar mucho. Entonces esa es toda la introducción sobre la interfaz. Cavaremos más en los mensajes de texto de Adobe en la siguiente lección. Saltemos a la siguiente S Y ahora.
7. Interface de Adoe Xd: Entonces si vuelvo a ir a este diseño, se
puede ver aquí tenemos otro panel, que es nuestro panel de propiedades. De acuerdo, entonces si hago clic en esta pizarra de arte Así que esta pizarra de arte está seleccionada de selección, y esta línea azul muestra que esta pizarra de arte está activa, voy a mostrar un ver todas las opciones alegadas. Hacer esta tabla de arte, como con en la posición de esta tabla de arte altura fuera de estribor. Cuál es será la altura del tablero de desplazamiento y vista. Cuánta altura es visible, entonces tenemos apariencia, el color de relleno. También puedo cambiar el color si quiero. Ah, y quiero decir, tengo que hacer clic en esto. De acuerdo, así que también puedo crear rejillas y Leo está en ello. Nos vamos a hablar de los diseños de Gretchen más adelante. Solo te estoy mostrando que este es el panel de propiedades. De acuerdo, Entonces si hago click en este rectángulo redondeado, vale, entonces si hago click en este ángulo de rechazo redondo, puedes ver todas las opciones más adelante a esto, como alineación. Un grado de repetición. Este ajuste y estos enojadores relacionan Todo Vale, Así que todo esto está aquí. Está bien. En la barra superior estarán alineaciones. de lo que tenemos. El repetido creó nuestra unión. ¿ Son estas opciones? No quiero explicarme ahora mismo. Simplemente necesitas saber que esta área es para controlar tus objetos de diseño. De acuerdo, entonces si tienes un tablero de arte, puedes controlar su altura y otras características. Si tienes ah, rectángulos, puedes crear diferentes efectos y diferentes tamaños y diferente redondez y diferente capacidad como usar los paneles de propiedades del mismo. De acuerdo, entonces todo, la
mayoría de las cosas sobre cualquier objeto estarán de este lado. Se puede ver qué aquí. Ahora, he seleccionado este texto y el texto. Um, las opciones están por aquí. Se puede ver. Y si seleccionas el arte abordado, las propiedades relacionadas con el tablero de arte estarán por aquí. Entonces así es como usamos un trabajo. A x t. OK, Ahora, hay dos iconos más a la izquierda. En la parte inferior, se pueden ver u escuchar capas y activos. De acuerdo, Ahora, estos activos están ahí van a haber todos los colores. Los estilos de carácter son símbolos que voy a utilizar a lo largo de mi diseño o todos los tableros de arte. De acuerdo, Entonces si trato de agregar esto como el estilo de la tía Corrector, se
puede ver, se ha agregado un estilo R tractor en este área de activos. OK, así que no confundas este diseño y prototipo con estos dos. ¿ De acuerdo? Estas te van a mostrar todas las capas y esto te va a mostrar todos los activos que
has utilizado en tu diseño. De acuerdo, entonces esta es la introducción a la interfaz fuera de Adobe X'd. Espero que hayan disfrutado de esta lección. Pasemos al siguiente ejercicio.
8. Adobe Xd Mac y en las diferencias de ganar: De acuerdo, ahora en esta escucha, vamos a ver cuáles son las diferencias entre la versión Max off. No, B, x d y versión de B. C apagado, así que sé extra. De acuerdo, Entonces lo primero que vas a notar es esta barra de stop, que es barra de acceso directo por aquí, que no está presente en ventanas. Y aunque los atajos son muy fáciles de recordar, pero aún así va a ayudar mucho. De acuerdo, Entonces puedes ver que sabes lo que puedes hacer con estos objetos. Puedes agregarlas. Se puede. Hay opciones de texto de lo que tenemos un rango y todo lo demás capa on. Entonces tenemos esto una fecha y archivo. De acuerdo, entonces esta es la primera diferencia importante. Entonces tenemos algunas diferencias más. Al igual que puedes ver el reciente adobe X t. Tienen al menos algunos, um, enchufes que son compatibles, o las herramientas de terceros que son compatibles con Adobe X'd on. Y si voy a esta exportación, se
puede ver por aquí está Zeppelin. Ahora, Zeppelin es una herramienta, y alguna vez se llama otra herramienta y dos, o ver estos tipos de herramientas fuera que se utilizan para generar cable y generar especificaciones
y especificaciones de documentos. Si no sabes de Zeppelin, debes quitarme mi flujo de trabajo más que representar curso donde generamos todas las
guías de estilo , colores, equipos, todo dentro de Zeppelins usando para la tienda. Está bien. No, estamos todos arreglados. Tengo uno creado, un párrafo uno encabezado en un botón, y lo vamos a exportar. Dedo del pie Zeppelin. Veamos qué va a pasar por aquí. De acuerdo, entonces vamos a seleccionar este tablero de arte, y vamos a exportarlo a Siplin. De acuerdo, entonces eso es importante. Entonces lo creé en una X. Así que lo voy a importar a una siguiente,
y está subiendo el diseño en este momento. De acuerdo, entonces todo está hecho. Veamos esto. De acuerdo, así que eso es muy guay. De verdad me gusta. De acuerdo, Entonces este es nuestro rumbo, y este es todos los tamaños son que puedes ver en los puntos que son para el desarrollo móvil. Se puede ver por aquí. Entonces tenemos esto también, el color también viene en RGB. Creo que es para nosotros. Entonces puedes ver por aquí cómo podemos exportarlo a ah Zeppelin. De acuerdo, entonces veremos esto más adelante. Nos vamos del dedo del pie. Vea esto en detalle más adelante. En las últimas lecciones en este momento, solo quería mostrarles que se pueden hacer muchas cosas con Adobe XY. Entonces, lo que hace Adobe Extra es que normalmente lanzan sus nuevas funciones primero para mi pregunta, y después de uno o dos meses, se va a incluir en remolque. El cuestionamiento de las ventanas. OK, así que no te preocupes si tienes ventanas que te faltan atrás. De acuerdo, entonces esa no es una diferencia muy grande. De acuerdo, entonces hay una diferencia más que olvidé decirte si creas un prototipo por aquí, Así que voy a duplicar esto reprimiendo mi tecla de opción de arte. Y me voy de pie. Simplemente crea un prototipo sencillo. Vincularía estas dos pantallas, aparecería tan disuelta, y solo cambiaría el color de este botón. Entonces sabemos que estamos dentro. Otro fue por aquí. De acuerdo, así que todo hecho. Ahora vamos a jugar esto y se puede ver por aquí. Uh, entonces lo que se puede ver por aquí es un pequeño botón, que es registro. Está bien. Para que pueda presionar esto y puedo grabar un video fuera de mi vista previa. ¿ De acuerdo? Y entonces puedo exportarlo así. Va a ser un video. Se va a guardar una renovación de video, tipo
brutal. Y puedes compartir este video con cualquiera. De
acuerdo, En este momento, este funcionario no está disponible en Windows. Espero que venga pronto en ellos. Las próximas actualizaciones, tal vez el próximo mes o tal vez de marzo o Apple. No lo sé. Esta es también una característica ordenada que sólo está presente en la versión de Adobe X'd Mex. Y espero que hayan disfrutado de esta lección para los usuarios de Mac. Creo que esto es un creador, Will y tú puedes hacer muchas cosas con él. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme a menos que pases a la siguiente lección.
9. Actuaciones y funciones Xd: una de las mejores cosas de los aeróbicos T es que se actualiza regularmente. Por lo que adobe una empresa y están trabajando en ella un día a día y noche por noche y el casi te dan una actualización cada mes. De acuerdo, para que puedas ver la última actualización. WAAS 11 de diciembre de 2017 y la última es generalmente el 22 de 2018. OK, así que tienen mejor rendimiento de zona. Vista previa de Dropbox para cambiar de archivo extra entre color morse tres morse de colores diferentes que están ofreciendo en este momento y nuevos INT codiciosos. Realmente Ingredientes mejoran las especificaciones de diseño mental pantalla están bordeadas 100% y nueva característica, que se llama exportación por lotes. También, están iniciando trabajos de terceros a través de integraciones como Zeppelin. Nunca canjear. Simplemente ponga un pastel y una guía compuesta. De acuerdo, entonces ah, puedes ver aquí han demostrado que disponible para Mac en Lee. Por lo que son pocas las características que les voy a mostrar en la siguiente lección. A algunas de las diferencias que van a ver en mi pregunta. La versión para Mac es como, uh, 10%. O tal vez pueda decir 5% cabeza fuera visión de ventanas. De acuerdo, entonces tienen más características en Mac. Primero los lanzaron en Mac primero, y luego se lanzan en windows. De acuerdo, entonces esto se trata de las actualizaciones. Déjame mostrarte una cosa más que están trabajando en muchas solicitudes de funciones. De acuerdo, así que este es adobe Formulario de solicitud de característica extra, y puedes ver aquí la gente está votando por diferentes características nuevas, como texto para apareamiento. Y entonces tenemos el objeto fijo estático entre tradiciones. Entonces puedes ver esta es la revisión a partir de un debate? Están diciendo característica en revisión. De acuerdo, entonces están revisando esta característica de la que tienen característica necesita más información de la que
han destacado en el atraso. De acuerdo, entonces son pocas las características que ya tienen funcionando, iniciaron, comenzaron a trabajar, como se puede ver u escuchar sobre refugiados características deportivas iniciadas, así que ojalá lo van a perder en al mes siguiente, O tal vez dos meses después de esto. Empieza a trabajar en ello. Por lo que se puede decir que esto es muy cool Característica. Podrás estar actualizado con lo que viene a continuación en una puerta. X'd. De acuerdo, pasemos a la siguiente lección donde vamos a ver cómo empezar a usar X d. Ok, entonces en realidad vamos a empezar a usarlo
10. Ejercicio de primer proyecto: No. Vamos a conseguir algunas cosas prácticas con Adobe Extra. De acuerdo, Ya
hemos hablado mucho al respecto, y ahora te voy a mostrar cómo puedes crear algunas cosas sencillas en ella. OK, entonces vamos a hacer esta primera asignación. Esta va a ser tu tarea. Voy a crear una pantalla sencilla. Déjame mostrarte. Por lo que he abierto este tablero de arte, que es el iPhone 678 y voy dedo del pie presionando control cero comando cero, zoom. O también puedes ir por aquí y acercar 200%. Está bien. Ahora, lo que quiero que hagas es solo dar click en este taburete de elipse y sólo tienes que arrastrar y mantener presionada tu
tecla de turno para que puedas hacer una circular proporcional. Estamos aquí, y ahora nos vamos de dedo presionando esto, seleccionamos y vamos a hacerlo en el medio. De acuerdo, así que una vez que está en el medio, se
puede ver que hay ah, línea
rosa o guía inteligente, que nos está mostrando que está en el medio. Entonces vamos a ir por aquí en esta zona y este es nuestro tamaño de frontera. Podemos aumentar el tamaño de la frontera a cuatro así. Y voy a agarrar mi imagen Jewel por delante, y voy a arrastrarla y dejarla caer dentro de este círculo así. De acuerdo, así que quiero que hagas algo como esto. Puedes usar tu propia imagen. También puedes cambiar el color del borde. Haga clic aquí y puedo cambiar el dedo del pie del asesino fronterizo a 7 a 7. Algo así. Y luego quiero que escribas algo de texto por aquí. Por ejemplo, este es mi título. Um, como Mohammed s y CES. Algo así. Y quiero que escribas tu ah cancha favorita por aquí. Vale, entonces tal vez Ok, así que si tu texto es un poco más largo así que me voy de dedo este es tamaño de ataque por aquí. No te preocupes por que soy esto. Voy a ir con mucho detalle en la siguiente sección, así que no muy en este momento. Apenas viendo el tamaño del texto a algo así como 16, puedes ver No, cuando trato de moverme, me
está mostrando las distancias entre diferentes elementos. Además, puedo seleccionar este y puedo ir de aquí dedo del pie algo tablero, ¿de acuerdo? Y también puedo alinearlos en el medio así. Esto ya está en medio. ¿ De acuerdo? Y luego te quiero dedo del pie. Ten ah botón por aquí. Entonces vamos a crear un botón con herramienta de ángulo distrital. Haga clic en el ángulo de secta. Este es un ejercicio muy sencillo. No te preocupes que eres No. Te vas a meter en el problema. Quitar la frontera y para el campo. Yo quiero el color. Y voy a usar mi herramienta fiscal para crear algo sobre ella. Al igual que contratarme. De acuerdo, entonces tengo escape de senos o V dos seleccionados. Y luego voy a seleccionar en otro lugar. Sí. Muévete en el medio así. Y voy a cambiar su sentir. El color está por ahí a la derecha. Voy a dejarlo vacío. ¿ De acuerdo? También puedes seleccionar a ambos como esta holgura de dragón, y puedes alinearlos en el medio así. Pero normalmente eso me gusta. Debería moverlo de ello hacia arriba. Y he seleccionado comprarlos otra vez así y moverlos arriba así. Es muy simple Herramientas, diseño de
puntera y trabajo por aquí. K Además, si quieres, también
puedes escribir algo por aquí como esto. Entonces si quiero un párrafo fuera de texto son mucho texto, voy a dar clic y arrastrar así y bla bla, bla, bla,
bla , bla, bla, bla, bla, bla, bla, bla, bla, bla. De acuerdo, esa es una buena poesía. Y voy a cambiar el color del relleno. De acuerdo, entonces primero necesito seleccionar este texto y ver el color de la película a algo como esto. De acuerdo, así que no quiero que escribas bla, bla. Oye, así que me voy a ir con regular y me voy de pie. ¿ Conseguirlo? 18 salidas fuera de tamaño. De acuerdo, entonces vamos a escribir algo por aquí. Voy a saltarme. De acuerdo, así que escribí algo sobre mí. OK, así que voy a quitar este, y voy a usar esto aquí de esta manera. Y puedes usar eso en el medio. ¿ Algo así? Sí, porque es una muy tendida en el medio, y puedo usar algo como esto. Y ahora puedes ver aquí tenemos Vamos a cambiar el color de relleno dedo del pie color más oscuro como este. De acuerdo, así que esta va a ser tu primera asignación. Sólo tu nombre, lo que amas y lo que haces y lo que te gusta Y lo que has visto en tan solo dos líneas y Abberton. De acuerdo, entonces si quieres cambiar el radio de la carga quieres dedo del pie, haz las esquinas redondeadas puedes hacerlo por aquí como yo quería ser. Ocho píxeles redondeados. Puedes ver tu cabello Si quiero agregar algo de sombra, puedes hacer clic en esta sombra no cambies nada, No hagas jugar mucho con estos valores iban a cubrir Ah, mucho en el detalle. Entonces esta va a ser tu primera tarea que quieras crear algo parecido a esto. Simplemente crea una elipse. Arrastra tu imagen dentro de ella tu nombre, lo que te guste. También puedes cambiarlo dedo del pie un poco de color de gracia. Entonces hay un contraste entre estos dos y una bonita carga y alguna sombra a su alrededor. También puedes redondear las esquinas si quieres, y también puedes usar algo que te asuste. Entonces voy a usar cuatro para las esquinas redondeadas. Hagamos capacidad al 100%. Está bien. Para que puedas hacer algo como esto. Déjame cambiar este color a algo así. Entonces esto es más profesional. De acuerdo, así que quiero que creéis algo como esto y ah, publicado en la siguiente asignación. Y los veré pronto en el siguiente apartado.
11. Tableros de trabajo y cuadrícula de XD: Ahora bien, de lo primero de lo que voy a hablar son los tableros de arte, porque esto es lo primero que vas a encontrar en Adobe X'd. De acuerdo, entonces estoy por este ejemplo. Voy a dedo del pie seleccionar esta web, y voy a seleccionar este tablero de 12 80 yardas y vamos a acercar comando o control plus o simplemente presionar comando o control cero dedos. Umit dedo del pie el ajuste y dentro de este lienzo. Entonces aquí tenemos sobre nuestra mesa directiva. Este es el nombre del tablero de arte. Si quieres hacerlo puedes hacer doble clic, y puedes editar como diseño de sitios web o algo así. Vale, Ahora, siempre que quieras seleccionar un tablero de arte, debes hacer click en su nombre, así que haz clic una vez y se va a seleccionar y podrás ver diferentes opciones y más tarde dedo del pie esta pizarra de arte sobre aquí. Este es el ancho y la altura. Si quieres medallón, puedes si quieres. Mira, bloqueará la relación de aspecto. Y una vez que aumente esto, también se va a aumentar el segundo valor, que normalmente no queremos. De acuerdo, Entonces tenemos este retrato y paisaje más, que no es uh, tiene
sentido en el diseño Web, pero en la aplicación móvil, por lo que tiene sentido. De acuerdo, entonces tenemos este desplazamiento. Vale, Así que el desplazamiento es que cuando creas un prototipo fuera de este diseño, si quieres una barra de desplazamiento por aquí para desplazar su diseño y bien, entonces algo como esto. Por lo que Vieux Port Height va a decidir dónde está el cuerpo de pergamino. Entonces si tengo esto,
uh, uh, Vieux Port Heights dijo a 600 se puede ver aquí es mi pedacito escolar. De acuerdo, así que este es mi se puede decir página completa gesso en diseño web. pliegue del tiempo es el área que va dedo del pie visible en la primera vez, y alguien visita. De acuerdo, entonces hasta esta zona, el sitio web será visible a continuación, batiremos rollerball. De acuerdo, Ahora pasando a esta aparición. La apariencia es básicamente el color de fondo fuera de todo tu diseño. Puedes ajustarlo a lo que quieras, pero creo que mantenerlo con el dedo blanco es la mejor opción. O aquí. De acuerdo, volvamos a hacer clic. De acuerdo, ahora tenemos las rejillas. Se trata de conceptos muy importantes, y esto se utiliza principalmente en el diseño web. Mucho. De acuerdo, Entonces, incluso en el diseño gráfico, hay dos tipos de diseños fuera de la cuadrícula. Uno es este diseño, que está basado en columnas, y el 2do 1 es cuadrado mejor. De acuerdo, así que el tamaño cuadrado normalmente está destinado para abdominales móviles. No es bueno para creo que el diseño web, pero puede colocar objetos rápidamente si quieres. Ah, así. De acuerdo, así que esto es muy, ya
sabes, va a chasquear el dedo del pie cada caja. De acuerdo, entonces es más fácil dedo del pie tuyo así. Vale, Pero tiene más sentido en el diseño móvil vino y estás diseñando para laboratorios móviles. Tiene más sentido. Vamos a borrarlo de nuevo. Ve a la plaza y este es el tamaño de la baldosa. Quieres si quieres, como 24 cerdos, analfabetos, susto duro, tamaño
cuadrado. Puedes ajustarlo a 24. Se puede ajustar a 64. Todo depende de tu propia elección. Entonces nos vamos de pie. Discuta este otro diseño, que está basado en columnas. Normalmente utilizamos en diseño Web. Un diseño de 12 columnas y el bien de ello depende de tu propia elección. Pero normalmente, si usas la configuración de bootstrap va a ser de 30 píxeles. Después vamos a estos márgenes. Los márgenes son básicamente este todo el espacio a la derecha, este espacio en blanco o y a la izquierda. Entonces lo voy a ajustar a 30 algo así. De acuerdo, entonces me está mostrando eso. ¿ Quieres márgenes diferentes en cada lado o mismos márgenes? Entonces si hago clic en el mismo margen se va a establecer 31 pixeles, por lo que un pixel no importa mucho, así que viviré con eso. De acuerdo, Así que esta es nuestra avaricia estilo casi bootstrap. Y si quieres congee en el dedo del pie talla 12 bajo 11 70 algo como esto. Está bien. Y si quieres márgenes diferentes en cada lado, esta es la opción que vas a usar Stop, zancada inferior e izquierdo. Está bien. También puedes convertirla en la columna predeterminada más adelante Configuración. De acuerdo, así, y se va a establecer por defecto. Por lo que siempre que empieces a usar algunas columnas, se dirá a esta configuración de Defar. Entonces esto es lo básico. Propiedades básicas fuera de cualquier tablero de arte. Ahora bien, si quieres otro tablero de arte, quizá yo quiera otro tablero de dardos. Entonces da click en esta herramienta de tablero de arte y voy a dar click a una. Entonces, ¿qué? ¿ Aquí? Y ahora va a generar otro arte. La segunda opción es que si quiero dedo del pie, basta con dar click en V. D. Seleccionado primero y volver a hacer clic en el tablero de arte y podrás ver diferentes opciones de bota de arte . Entonces si quiero y el iPhone seis suene una plantilla por aquí, puedo hacer click en eso, y será paralelo a mi diseño Web. De acuerdo, entonces si te vi, hice clic una vez más. Entonces volvamos a mover el dedo del pie esto otra vez, movido todo y voy a alejar un poco para que podamos ver comprados los aburridos del arte. Y ahora si quiero moverlo, solo lo
seleccioné y luego puedo moverlo, vale. Entonces puedo colocarlo por aquí, o puedo colocarlo por aquí cuando quiera. OK, así es como se crean diferentes vistas fuera del mismo sitio web Norgay y voy a dar clic afuera y seleccionar la herramienta de tablero de arte presionando a y también puedo hacer clic en
tablet android . De acuerdo, entonces, no, tengo tres vistas. Uno es un sitio web o escritorio que que tenemos plantilla, vista, y luego tenemos vista de iPhone. Si hago clic aquí, puedo cambiar su diseño dedo del pie cuatro columnas, que normalmente usamos en Mobile APS y se superó. Va a ser 16 y quiero que los márgenes a derecha e izquierda sean 24 s. así que voy dedo del pie seleccionar 24 o aquí. Está bien. Entonces Ok, entonces lo está rodeando a 25 lo cual es bueno. De acuerdo, así que aquí está mi configuración para Web versión fuera del mismo sitio web un juego. Entonces voy a usar cuatro columnas por aquí, y luego voy a usar ocho columnas por aquí, así se puede ver que está bastante lejos en ocho columnas, lo cual es muy creado. Realmente me encanta este software. Tienen muy buenos valores por defecto, así que vamos a ponerlo en 32. De acuerdo, así que esto se ve genial. Entonces así es como configuraré mis aburridos de arte si estoy diseñando diferentes vistas fuera de mi página web . Está bien. Tan vista móvil, vista tableta
Andhra y vista de escritorio. Está bien. Entonces no voy a entrar en detalles y crear un diseño de sitio web en esto, pero así es como vas a configurar tus crudes. Ahora bien, si quieres eliminar un tablero de arte, puedes seleccionar y presionar borrar, y se va a eliminar este tablero de arte. De acuerdo, entonces es así de sencillo. Además, puedes seleccionar desde aquí y eliminar. Y también puedes duplicar copia y diferentes comandos que puedes ver por aquí. De acuerdo, Entonces así es como usas estos libros de arte. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección y nos vemos pronto.
12. 8 herramientas de XD: en esta lección. Vamos a aprender de esa barra de herramientas que tenemos en Adobe X'd. Entonces voy a pasar rápidamente por todos estos objetos y el taburete bar. OK, entonces vamos a empezar con este iPhone 678 Vamos a acercar. Comando cero en control cero. Y aquí tenemos nuestro hardball. OK, entonces esta es V herramienta de selección más rica, que es, uh, esta se puede seleccionar cualquier cosa con ella. De acuerdo, entonces tenemos la herramienta de ángulo de secta, que es nuestra r y puedes crear pero termina con ella. Basta con presionar son, y aquí tenemos sólo arrastrarlo y soltarlo en el medio. Y esto es frontera. Estas son propiedades diferentes fuera de ella. Vamos a venir a esta zona más adelante. OK, entonces estos son alineaciones. Repite las alturas de grado con apariencia y diferente este radio de esquina de radio sentir borde. Vamos a ver estos en otra lección ahora mismo. Yo sólo voy a presentarles todas las herramientas por aquí disponibles por aquí. OK? Tenemos herramientas muy limitadas y esto es lo callejero de este adobe extra. De acuerdo, entonces tenemos este eclipse y puedes compartir sostén shift toe, ya
sabes, tenerlo en una proporción proporcional y puedes presionar arte con él son opción key toe make y creerlo en destrucción. De acuerdo, entonces va a crecer desde el centro así. Entonces depende de ti. Voy a colocarlo en el medio. De acuerdo, entonces tenemos esta herramienta de línea. Puedes usar esta herramienta de línea en cualquier lugar que quieras. De acuerdo, entonces aquí tenemos esta línea. Después tenemos el combustible gastado y estos atajos son muy fáciles. Y ah, lo que llamamos en experiencia de usuario. Diseño, mapeo, mapeo Es más fácil de recordar. De acuerdo, entonces ps pentti es texto nuestras fronteras a Exumas e Así que estas son auto explicativas. No es necesario que los recuerdes. De acuerdo, entonces tenemos esta herramienta de texto de lo que tenemos esta herramienta de pluma Con mental, puedes crear diferentes formas como esa. Basta con seguir moviendo. Y luego también podemos hacer clic y arrastrar. Haga clic y simplemente déjelo así. Después haga clic y arrastre para que podamos crear muchas formas diferentes. Es casi similar a para una tienda. De acuerdo, nos acercaremos más adelante en profundidad. De acuerdo, Entonces esto es textil. Simplemente puedes seleccionar el 30 o y puedes escribir algo por aquí como algo. ¿ Qué tienen fuga de prensa y eso es todo. Presiona V, y puedes seleccionarlo y moverlo. Ahora, las opciones de alineación. O se puede decir que la alineación inteligente es muy sofisticada para el nuevo próximo. Tu software de diseño es como sketch, y será extra Reino Unido. Una vez que mueves algo, se va a mostrar la distancia fuera con todos los elementos diferentes por aquí en relación con ellos. OK, entonces me está diciendo que ahora está alineado a éste. Y la distancia entre estos dos es de 15 píxeles. De acuerdo, entonces tenemos estas herramientas de tablero de arte. Creo que ya hemos discutido esto. Acabas de seleccionar y crear otro tablero de arte. Este es el tablero de arte para iPhone X. Y entonces esta es la herramienta de zoom que puedes hacer zoom en cualquier elemento. ¿ Eso es algo de vuelta? Presioné control cero comando cero, y puedes acercar todo el puerto de arte así. De acuerdo, así que esto es muy sencillo. También puedes establecer el nivel de zona a partir de aquí en adelante. Alejar el zoom. Estos son se pueden ver diferentes teclas de método abreviado. Control un control de puntera más plus y control más menor. Zoom hacia fuera y ah, zoom a selección, Control o comando tres. Entonces si estaba usando Mac, va a ser reemplazado por comando. De acuerdo, tan muy sencillo. Muy fácil. método abreviado. Yo voy con el dedo del pie. Crea una lección separada para todas las teclas de método abreviado utilizables. De acuerdo, así podemos usar rápidamente y empezar a usar Adobe X'd. Entonces estas son todas las herramientas. 3456 y ocho herramientas que tienes sobre él. Y la mayoría son justicia. 123456 Así que seis herramientas una es tablero de arte y una zoom, que es especie fuera de una utilidad para usar en. Acerque y aleje sus tableros de arte. Eso se trata de la barra de herramientas. Por aquí tenemos. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección.
13. Herramienta de rectángulo para crear botones: en la distancia. Y voy a hablar de esta herramienta de rectángulo y cómo podemos usarla y cómo hay diferentes propiedades. Deja que espere y cómo podemos crear un bonito botón de aspecto con directing. De acuerdo, así que voy a seleccionar nuestra prensa son y vamos a arrastrar por aquí y crear un rectángulo como este. Y se puede ver en el lado derecho tenemos el ancho y la altura. Vamos a ponernos a 75 en la altura de 60. Picks está aquí. Por lo que lo hemos fijado en 60 y el hiatus en 75. Ahora puedes ver aquí tenemos el primer control, que es esta opacidad, que es como están de vuelta. Será. Y voy a dejarlo 200%. Entonces el siguiente es radio de esquina. Entonces si quería estar por ahí, me voy de pie. Usa algún radio de esquina como seis por aquí. Ya puedes ver ahora son 100. Entonces si d seleccionado para conceder Ok, si quieres diferente por diferentes razones para cada esquina, vas a seleccionar esta. De acuerdo, entonces si presiono cero aquí y también cero para este. De acuerdo, así que ya puedes ver ahora tenemos dos esquinas carga ni truncada. De acuerdo, así es como puedes hacerlo. Entonces si quiero 32 por aquí, puedo tener algo como esto. De acuerdo, así que voy a presionar con el dedo del pie este. Entonces si quieres una forma de píldora, puedes aumentarla a, como, 39 o algo así. Soy este 1 39 y puedes conseguir este sido enviado. Pero entonces tenemos estas dos propiedades, Que es una es Phil, que es el color. Entonces lo voy a llenar con un bonito color azul. A lo mejor esta tienda Buchler por aquí así. De acuerdo, entonces tenemos esta frontera. Creo que lo vamos a quitar ahora mismo. Y si miras las propiedades del borde, puedes ver aquí es cuánto quieres que el borde alrededor de él y llene el borde será
Debe ser de un trazo. El Bader debe estar dentro. Estos están fuera de nuestro en el centro. De acuerdo, s. así que voy a usar afuera y vamos a cambiar el tamaño del dedo del pie 10 píxeles. De acuerdo, así que ahora puedes ver aquí Tenemos la selección y la frontera está fuera de esto. De acuerdo, entonces voy a usar algún borde fuera de este color como este solo por mostrarte lo que podemos hacer con él. De acuerdo, entonces tenemos esta sombra y sangre de fondo. No voy a hablar de la sangre de fondo. Vamos a hablar de ello en la siguiente lección ahora mismo, vamos a añadir algo de dedo del pie sombra este botón, y se puede ver que tenemos esta posición vie y esta sangre. Entonces este es básicamente el radio de sangre. Hasta dónde va a desenfocar la sangre del radio. Esta sombra. De acuerdo, entonces si lo pongo a 20 se puede ver ahora la sombra está más borrosa en esta zona. Si miras de cerca, acuerdo, ¿por qué la posición es estos dos hacha? ¿ Y por qué la posición está fuera de tu sombra? De acuerdo, entonces si quiero dedo del pie, hazlo un poco más por debajo de mi forma, voy a añadir más de yo y puedes ver No, es en esta zona. Lo es. No lo sé. De acuerdo, Así también, puedo moverlo horizontalmente en la dirección. Entonces si añado 50 se puede ver ahora está del lado derecho. Por lo que X es el momento en la destrucción. También puedes poner valores negativos por aquí menos 10 y va a ser en esta zona por lo que también
puedes usar menos nueve. Si quieres, se
va a mover en la parte superior. Entonces, ¿así es como vas a poner tu sombra? No. Si quieres el color fuera de tu sombra, puedes hacer click en esta zona y puedes establecer el color fuera de tu sombra. A lo mejor quiero algo de sombra en la gama brew de color azul. Y ah, esta es la opacidad de tu sombra. Yo quería a Toby como 20% de descuento en pick, 30% transparente. Entonces puedes ver ahora la sombra es así. Entonces así es como vas a usar las sombras y cosas diferentes con tu forma, rectángulo y ah, todo
esto se trata de este rectángulo. También puedes alinearlos alineación. Voy a hablar de alineación en otra lección. Y también se puede llegar a ella. Pero normalmente no necesitamos repetirlo así. Pero si quieres, puedes hacerlo. De acuerdo, así que voy a volver. Vamos. Consulta tu control, Z Y estas son todas las propiedades. Si tienes alguna pregunta sobre hacerme y tratar de crear a alguien así, me voy de pie. Ponle un poco de texto sobre él. Hola, querida. De acuerdo, algo así. Y voy a presionar V y la exportarla en el medio y cambiar su color de relleno dedo del pie blanco. De acuerdo, así que vamos a moverlo un poco hacia abajo. De acuerdo, Así que 16 cerdos están en la parte superior y 17 picos en la parte inferior. Entonces si puedes despejar algo como esto, me encantaría verlo y probar el dedo del pie. Muéstrame los botones que puedes crear en él. Y me encantaría revisarlos y ver qué se le puede ocurrir. Vale, Entonces todo esto se trata de cómo puedes crear diferentes tipos de botones
redondeados, redondeados , cuadrados de
esquina o Bill guardado, pero ansf usando x d Pasemos a la siguiente lección.
14. Fondo y desenfoque: Hablemos de objeto. Desenfoque de sangre y fondo. Hecho en Adobe X'd. Estos dos efectos son muy geniales. Uno de ellos. Yo uso mucha sangre de fondo. De acuerdo, entonces les voy a mostrar ejemplos apagado, ambos fuera de ellos cómo usarlos correctamente. De acuerdo, así que empecemos por usar sangre objeto o esto de nuevo en sangre. Necesitamos algo de imagen. De acuerdo, Así que voy a arrastrar y soltar la imagen en este tablero de arte,
que es el iPad, que es el iPad, y voy a alinearlo del dedo del pie en el medio y presionando turno. Y aunque voy a hacerlo un poco más pequeño gracias. Entonces algo así. De acuerdo, entonces tenemos esta imagen ahora. Yo quiero una sangre de fondo para eso. Necesito cualquier forma. A lo mejor voy a usar este rectángulo y voy a usar el todo arrancado este lienzo prensa nosotros y no, este rectángulo está seleccionado. La imagen está detrás. Entonces no, voy a usar mis antecedentes. Por lo que una vez que haga clic en esta sangre de Bagram, se
puede ver todo el fondo está borroso. Ocultemos esta frontera y puedes cambiar la cantidad del sangriento deseo. Entonces tal vez quiero tanta sangre. ¿ Quieres que sea brillante en el lado vital? O querías ser un oscuro en el lado más oscuro. Se puede ver que el efecto es diferente y también la opacidad. Yo no uso tanto. Se va a cambiar la opacidad de este efecto, así que manténgalo del pie 0%. De acuerdo, entonces tal vez algo como esto y algo así y lo voy a extender fuera de esta zona. ¿ De acuerdo? Está bien. Entonces así es como usamos la sangre de fondo. Entonces aunque quieras usarlo en el medio así Así que tal vez solo quiero que esta zona se borre. Puedo usar eso de igual manera así. OK, entonces esta forma es básicamente nuestra principal área de sangre de fondo. Por lo que esta forma va a definir qué área va a ser borrosa. Entonces tenemos esto. Si vas a este desplegable, tenemos este plan de objetos el cual se va sangre del dedo del pie. Este Onley este objeto. Entonces si hago clic en objeto que se puede ver ahora nuestro rectángulo es básicamente sangre ni el fondo. Entonces si te cambio el dedo del pie esculler negro o algo así Ok. Por lo que puedes ver ahora esta forma en realidad se está mezclando en el fondo ni en el fondo. De acuerdo, así que esta es la diferencia entre el desenfoque de objetos y una sangre de fondo que he usado en mi aplicación
móvil Vas a diseñar al final de este curso, así que mantente atentos, y este es un efecto muy cool. Se puede utilizar este desenfoque de fondo en muchas ubicaciones y se va del dedo del pie. Haz visible tu texto y tus botones si el fondo está muy ocupado. Entonces esto se trata de la niña Bagram y la sangre del objeto. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección.
15. Herramienta de Ellipse: hoy, voy a hablar del taburete de labios y ah, su propósito principal. Por qué lo usamos. Y es de dedo muy rápido, ya
sabes, recorta más de mis imágenes de avatar. OK, así que vamos a hacer click y arrastrar así, y estoy sosteniendo turno para hacerlo en proporción. Y si quería estar creciendo desde el centro, voy a presionar la tecla de opción de arte junto con mi tecla de turno. De acuerdo, entonces estoy sosteniendo turno y arte y opción clave ahora mismo para hacerlo así. De acuerdo, ahora lo voy a colocar en el medio así. Voy a ocultar su borde, y voy a cambiar su color de relleno para que puedas verlo fácilmente. Ahora voy a arrastrar y soltar cualquier imagen sobre ella para crear un avatar. Rápidamente. OK, ahora puedes arrastrar y soltar cualquier imagen sobre esta elipse que puedas ver u escuchar para crear un avatar rápidamente. Entonces lo que básicamente hace es recortado dentro de este círculo. De acuerdo, el problema con ello es que no se puede cambiar ni mover esta imagen. De acuerdo, entonces lo que puedes hacer es solo que puedes aumentar el tamaño de este círculo. Se va dedo del pie. Aumenta la imagen. Y también puedes cambiar la forma que puedes ver por aquí. De acuerdo, Ahora es una forma de huevo, y la imagen es que se puede ver ajustando con esta nave. Por lo que en su mayoría utilizamos herramienta Ellipse para este propósito. Las otras opciones que tenemos para un taburete labial son casi las mismas. Tenemos frontera, relleno, opacidad, sombra y sangre de fondo. No hay mucho en ello. Por lo que la mayoría de las veces lo usamos para este propósito. Simplemente arrastramos y soltamos cualquier imagen en esto para crear un radar. Nuestros iconos así. Entonces eso es todo sobre el paseo de deslizamiento. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección
Muhammad Ahsan Pervaiz, UI UX Visual Designer 15+ Years
