Domine o Adobe XD Auto-Animate: crie aplicativos de UI suaves com animação de máquina de lavar com efeito de som

1. Vídeo de introdução: Olá, bem-vindo ao design de interface móvel suave ou novo morfismo no Adobe XD. Meu nome está apenas na terra e você e eu vamos criar este belo aplicativo doméstico inteligente do zero no Adobe XD com esse tipo de som. Neste curso, você aprenderá como criar a interface do usuário suave diferente para aplicativos de modo leve com todos os tipos de sombras, dicas e truques para o melhor design de interface do usuário suave para o modo escuro. Você pode acreditar que, com a ajuda de apenas essas pequenas formas, vamos criar todo o aplicativo. Comece projetando a página de login. Então aprendemos a melhor maneira de animar seu design. Você vai para projetar a página inicial. E começo a animar os ícones. Você aprenderá a criar componentes para animação, como adicionar efeitos sonoros e muitas dicas e truques legais. Finalmente, começamos a projetar nossa página da máquina de lavar roupa, criando água e bolhas para uma animação crível. Adicionando temporizador, prototipagem final e adicionando os botões de login e inscrição no final. Mesmo que você seja um iniciante total, você ainda pode acompanhar. Porque b, comece do básico para garantir que realmente entenda o design e o processo. Eu também forneci um projeto para vocês. Portanto, certifique-se de terminar seu projeto e me enviou de volta para obter mais comentários. A propósito, se você não tem ideia de onde começar ou qual é o caminho para se tornar um designer profissional de experiência do usuário, assista minhas horas de teste usando as primeiras capas de design, o D para iniciantes. Estou tão animado para mostrar a vocês como criar este belo design de aplicativo para smartphone e animação Diamond do Porter do zero ou nos escrever, começar. 2. O que é IU OU Neumorphism no Adobe XD Design: Então, o que é suave você é ou novo morfismo. Então, basicamente, é usar realces e sombras ou sombras claras e sombras escuras do outro lado. Esta é sombra interna escura, sombra interna brilhante ou branca. Então, isso é basicamente duas camadas uma sobre a outra. Então, o mais legal é que quando criamos para a sombra interna e a sombra superior, podemos usar apenas esses dois para criar todo o aplicativo e o site. Como vou mostrar a você. 3. Como criar Ui suave em backgroung brilhante no adobe xD: Agora vamos para o Adobe XD. Vá para o arquivo, crie um novo arquivo e salve-o como UI suave ou novo morfismo. O que fazemos aqui, vamos para a Prancheta e clique em algo como 3752812. Isso é basicamente bom para iPhone e Android ao mesmo tempo. Este clique na tecla de seta, basta chamar este software que eu escrevo vai ser suave UI dark. Então, basicamente, é assim que funciona. Selecione Prancheta, vá para preencher e arraste isso para a direita dela. Não importa qual cor é essa. Apenas o fundo deve ser leve de qualquer cor. A cor mais brilhante de azul ou roxo ou o que você quiser. Então, vou escolher algo assim ou tenho aqui, vou fazer isso. Portanto, também não importa em F5, não importa. Deve ser uma cor brilhante de algo, não apenas branco. Não deveria ser assim. Deve ser brilhante. Isso é bom, muito macio, você está escuro. Clique nele e vou pegar uma arma. Esse olhar, não está aqui. Está aqui, certo? Então é um pouco mais brilhante porque quando adicionamos alguma sombra escura a ele, algo assim, deve ser óbvio. Então, vou clicar nisso. Isso é 292837. Isso realmente não importa. Você pode fazer o que quiser. Traga aqui, aqui como você está feliz ou você pode alterá-lo para edição que queremos. Então eu vou manter isso para que você tenha que colorir brilhante e escuro. Vamos começar com brilhante. Vamos para o retângulo. Mantenha pressionada Shift e arraste um quadrado. Coloque-o em 60. 60, certo? Não precisamos ter Bohr lá. Agora, vamos colocar o raio em 10, por exemplo, podemos alterá-lo a qualquer momento. Agora, clique em um dos quatro campos superiores e clique aqui. Isso significa que não vemos nada. Certo? Agora. É assim que funciona. Vamos para Drop Shadow, clique e solte sombra. Certifique-se de que isso esteja no 10. Temos um embaçamento. Precisamos do embaçamento. Coloque-o, hum, seis e coloque-o em seis. É assim que começamos o tempo todo, certo? Então, esta será a sombra escura. Agora vamos chamar essa sombra negra. Pressione Command ou Control D para duplicá-lo, isso chama essa sombra branca. Como podemos torná-lo branco? Basta dar uma olhada. Vamos vir aqui. Vá para soltar sombra. Faça isso totalmente branco. Então você totalmente branco. Você não vê agora, porque x e y, está aqui. Coloque isso em menos 6, totalmente o oposto. E aqui menos seis. E aqui vamos nós. Veja, você não vê muito porque quando você clica nisso, vamos soltar sombra. Temos o arrastar essa coisa para cima no livro de brilho. Agora, dê uma olhada. Isso é chamado de UI suave. Agora, clique no branco, o superior, isso pode interromper a sombra. Você pode derrubar isso. Escreva algo como 50. Mais uma vez. Vou e voltando para ver o que posso fazer com este. Não gosto de ser preto. Clique na sombra preta. Clique aqui, pegue a cor ao lado dela, certo? Agora, arraste-o para baixo, basta dar uma olhada. Ou para a direita um pouco. Nós pegamos a cor, uma cor mais escura da mesma cor, vemos algo assim. Então isso é uma interface suave, algo que é muito agradável morrer. Agora, dê uma olhada. Vou selecionar esse componente crítico, então chamamos esse quadrado de sombra brilhante. Agora, estou pressionando Alt e Shift e arraste isso para baixo. Vou chamar isso em vez de um quadrado, círculo. Agora dê uma olhada. Mantenha pressionado Controle ou Comando e clique na guia na janela branca em um círculo. Agora, clique neste pequeno canto, arraste isso para baixo. Clique na sombra preta, a mesma coisa. Arraste isso para dentro. Agora temos esse lindo círculo e q, a coisa legal sobre isso. Por que fizemos isso um componente, novamente, se eu manter pressionado o controle e clicar nisso e mudar essa cor para outra coisa. Tudo o resto, tudo o que estamos trabalhando no projeto vai mudar. Ao mesmo tempo. Vamos usar basicamente todos esses em todo o projeto. Não podemos voltar e mudar isso um por um. Leva muito tempo e é muito demorado. Portanto, essa é basicamente a melhor maneira de criar seu aplicativo. Agora pressione Command, Control Z para voltar. Então isso é chamado pop ou out, ou apenas a sombra. E o destaque, temos outra coisa chamada. Sombra interna. Como podemos criar isso é muito simples. Agora segure o Comando ou Controle e clique em um desses mais comando ou controle C. Agora saia Command ou Control V. Então, ele vai simplesmente colocá-lo no topo, arrastá-lo para a direita, e desligue a sombra. Não precisamos de nada, só do campo. Portanto, o campo é da mesma cor. Temos algo chamado sombra interior. Basta clicar nele, torná-lo ativo. Então, por padrão, você vê o que aconteceu. Basta fazer esse valor x número três. Então, três valores e um valor y são sempre os mesmos e apenas mantê-lo em seis, sempre podemos alterá-lo. Clique na sombra interna e gentileza. Então, neste momento , coloquei em 50%. Selecione este, pressione Comando ou Controle D para duplicá-lo. Vai chamar essa sombra interior escura. E isso vai ser branco em um raso. Então o de cima é o branco, mas deve ser oposto. O que quero dizer é que este deve ser menos três, menos três, e a cor deve ser branca. E o problema é que, se você colocar o preenchimento, não vemos o plano de fundo. Então, verifique isso porque queremos ver o plano de fundo. Então, a sombra interna superior de um dia de largura só tem sombra interna. Portanto, ele não tem o campo ou a borda. Esse é o truque. Agora, selecione isso pressione Command ou Control K para torná-lo um componente ou clique neste sinal de mais. Agora, se eu clicar nisso, vá para a sombra interior escura, posso brincar com essa capacidade. Pode torná-lo mais leve. Algo assim. Olhe. Ou posso usar a mesma sombra de cor como esta. Se eu for para a sombra e eu puder escolher a mesma cor daqui e olhar. E é isso. Agora, selecione este. Só vou copiá-lo dessa sombra brilhante, certo? Quadrado de sombra interna. Role para baixo Alt e Shift arraste isso para baixo, clique em Controle ou Comando, arraste isso para baixo. Clique fora do Comando ou Controle, derrube isso e é isso que temos. Vou chamar esse círculo. Temos dois outros estilos de coluna que vou mostrar a vocês. Selecione este ou não, Alt e Shift e arraste-o para baixo. Clique com o botão direito nele. E colocarei o componente agora, pressione Command ou Control G para agrupar. É chamado isso. E ele vai copiar é este. Copie, cole. É meio arrojado, quadrado de sombra interior. Vamos entrar nessa pasta. Clique na sombra interna escura pressione Command ou Control D para duplicá-la. Eu só vou arrastar isso para baixo e vou chamar isso de BG. É isso. Agora, com a tecla de seta para baixo, pressione uma vez, dois. E vamos ver o que aconteceu. Algo está surgindo. Clique nesta cor de campo e medido. Isso é um pouco mais escuro. E é isso. E agora dê uma olhada nisso. Criamos uma dimensão mais e sentimos com esta. Só vou colocar isso ao lado deste e dar uma olhada. Isso é algo, estou perdendo outra coisa. Então, vamos excluir este. Selecione este, pressione Command ou Control K para torná-lo um componente. E eu costumo mudar, arrastar isso para baixo. A mesma coisa em vidas. Clique em Controlar ou Command, selecione este, a mesma coisa, selecione esta a mesma coisa, e pronto. Então você pode imaginar apenas estar usando esse tipo de formas que criamos todo o aplicativo. É possível? Sim, é. Menos concreto. Um. 4. Como criar o redigir de Ui de tremo no Adobe XD: Agora vamos para o suave você, eu fiz versão escura. Então, basicamente, a maioria das pessoas gosta da visão escura do suave que você é, por que você vai ver em alguns minutos o ácido desses e segurar, Alt e Shift e arrastar um desses aqui. Veja, não funciona em um vermelho escuro, certo? Mas nós só vamos consertá-lo. Nós só vamos torná-lo perfeito. Isso é brilhante. Vou chamar isso de escopo escuro e árabe. Vamos para a sombra negra. Só vou ficar sombra preta, basta clicar no campo, no conta-gotas e clicar nele. Você não vê porque o topo é o largo, a mesma coisa. Clique nele. Portanto, esses dois contaminantes são da mesma cor que o plano de fundo. Vamos voltar para a sombra negra. Vamos para soltar a sombra. E vamos tentar torná-lo muito escuro como este. Vamos para a sombra branca. E este aqui, derrubamos um pouco a opacidade. E é isso. Se isso estiver realmente escuro, vá para a sombra negra, solte a sombra. Derrube a opacidade para torná-la mais natural. Algo assim. Se você acha que pode brincar com isso. O que quero dizer é crítico, uma sombra negra. Clique na sombra, e isso pode ser talvez 15. Por sua vez. Isso pode ser 15 inter, e pode ser testado ou 20. Vamos voltar um pouco a tecla de seta para baixo, torná-lo 10. Podemos brincar com eles. Então, faça seu componente e brinque com isso. Você pode mudar qualquer coisa. Quando terminar, clique com o botão direito do mouse e desagrupe-o e torne-o um componente novamente porque com a região preta, quando ele primeiro componentes principais. Dê uma olhada neste . Este olhar para este quadrado verde é totalmente verde. Se eu clicar neste, há um ponto dentro do grau. Isso significa que mudamos isso. Portanto, esses são nossos componentes principais e principais. Se você quiser mudar alguma coisa, temos que mudar isso. Se eu quiser mudar a cor de tudo, você tem as mudanças. Se você estiver aqui e clicarmos em Editar componente principal, voltamos a este. O mesmo se aplica a este. Só vou selecionar isso ou faço disso um componente principal. C é totalmente verde. Clique sobre isso. Vamos voltar. Vamos fazer isso seis. Vamos clicar na sombra preta e torná-la seis. São três, são três. Olhe. Mas, por enquanto, vou clicar nisso, fazer este 10, apenas jogar fora. Menos 10. Menos 10. Faça o mesmo com o preto, 10, 10 e 10. Então, é mais pop. É mais pop para ele. Se eu clicar nisso, o branco está realmente aparecendo. Podemos mudar este, torná-lo menos seis, menos seis. Certo? Agora você tem a ideia. Também podemos mudar a largura para qualquer cor que você gosta. Por exemplo, isso vai ser um pouco mais brilhante. Talvez eu só vá brincar com isso. Talvez eu pergunte algo rosado. Você pode adicionar um pouco rosado a essa cor. Primeiro, vou mantê-lo branco. Derrube a opacidade apenas um pouco, apenas um empurrão para mostrar é branco. E mesmo com essa sombra negra, podemos derrubar a opacidade. E é aqui que você tem. Agora, vamos siliciar isso do que a autoria. Arraste isso para baixo, clique, faça este círculo. Gleick. Faça disso um círculo. Vou chamar essa sombra escura de um quadrado. E esta sombra escura prata. Agora vamos para a inicial Eu clico nisso, Copiar. Este comando de saída ou controle V está aqui. Arraste para a direita. Deveria ser. Falta de sombra interna. Não precisamos da sombra, então a cor é a mesma, totalmente a mesma que ativar a sombra interna. E vamos fazer isso 336 e trazer à tona a opacidade. Então, se você tem algo assim, eu quero fazer disso caras um pouco privilegiados, algo assim. Só vou brincar com ele. Veja, cada um é um pouco melhor para mim porque vai ser a versão escura dele. Então, a versão escura dele, mas um pouco de sensação arroxeada. A mesma coisa. Pressione Command ou Control D para duplicá-lo. Esta será a sombra interna branca. Então isso deve ser menos três, menos três. E a sombra interna deve ser branca. E derrube a opacidade. Agora, também podemos mudar essa cor para ser o arroxeado também. Dê uma olhada. Como as taxas ativas, não podemos ver o plano de fundo. Desligue isso. Agora podemos ver isso. Vamos clicar na seta preta. A sombra interna preta deve ser totalmente preta. Arraste-o para baixo ou o suporte está no canto. Veja como é legal e bonito que você pode brincar com essa cor, a sombra interna branca. Quero dizer, não deveria ser esse propósito. Eu disse que depende totalmente de vocês. Só vou arrastar isso para baixo. E vamos voltar para o branco. Algo assim é mais natural para eles iniciarem o silicone. Comando ou Controle K, faça dele um componente, porque está verde. Isso significa que este é o componente mestre. Mantenha pressionado Alt e Shift, arraste isso para baixo a mesma coisa, Comando ou Controle, clique, faça um círculo. Controle de comando tomar, fazer um círculo, e é isso. Então, selecione este. Vamos chamar esse quadrado interno escuro. A mesma coisa. É bom aqui. Vamos chamar esse círculo íntimo escuro. Selecione este, mantenha pressionado Alt e Shift arraste-o para baixo. Clique de controle. Vamos para a sombra interna preta Command ou Control D. Arraste isso para baixo, vamos chamar esse BG. E a tecla de seta para baixo apenas um a dois para sentir e deixar isso um pouco mais escuro. Isso é tudo o que selecionamos para o Alt e Shift arrastar isso para baixo novamente antes disso, porque vamos usar este, temos que fazer isso como um componente mestre. Então clique com o botão direito do mouse em Desagrupar componente e clique novamente neste sinal de mais. Então, este vai ser o próprio mestre dele. Agora, alt Shift, arraste isso para baixo, clique em Control ou Command, faça este círculo. Então, temos três deles maduros, clique em Apigee também. E é isso. Então você pode imaginar que apenas usamos esse tipo de blocos? Podemos criar todo o aplicativo ou o site. Você não acredita em mim, só vou te mostrar. 5. O de design Soft e animação de in de prototipagem: Tudo bem, vamos começar a criar esta página de login para o nosso aplicativo. Clique neste, pressione Command ou Control D para duplicá-lo. Só vou remover tudo. E essa cor maior, algo diferente desta. Por exemplo, nosso cliente está nos dizendo para criar algo como essa cor. Então o que quero dizer é que se eu clicar em um desses e segurar Alt e arrastá-lo aqui, você verá diferente. Então o que fazemos aqui é algo muito interessante, porque veja, aqui você vê que o interior do quadrado é branco. Então, isso significa que se eu clicar com o botão direito do mouse e editar, o componente principal voltará aqui. O que eu vou fazer isso, essa interface suave escura. Então, primeiro, vou apenas fazer uma cópia desses. Portanto, este é o domínio. Portanto, certifique-se de clicar no software. Eu escureço a prancheta e me certifico de que a doença seja a mesma que essa cor. Agora, clique neste clique duplo. Vamos para a sombra interna preta e pegar a ferramenta conta-gotas. E isso é o que você faz. E é isso. Então, sempre que você quiser alterá-lo, basta clicar com o botão direito do mouse e editar o componente principal. Mude este, o que quer que você faça com isso, apenas afetará todo o aplicativo. Isso é tudo o que fazemos o tempo todo agora, porque este é o aplicativo que eu só vou conseguir um golpe é pressionar Command Control V ou o tem isso. E vou colocá-lo aqui. Só vou arrastar uma caixa. Algo como 25 ou 30 ficaria bem. Vamos usar fio telefônico. Então eu não vou subir aqui, vou amarrar, bem-vindo. Estou usando a fonte Poppins medium. Vamos colocá-lo no meio. Eles sentem que é o mesmo que essa cor na cor de fundo. Agora, a mesma coisa. Só vou selecionar este. E eu vou para Alt e arrastá-lo para isso. Então eu tenho que editar isso para torná-lo totalmente natural com esse clique duplo entrar na sensação seletiva e pronto. Tudo bem, legal. Isso também está mudando. Vou deixar isso de lado, colocá-lo aqui, ou vou excluí-lo porque já temos este aqui. Então, vamos começar com este. Só vou arrastá-lo e soltá-lo aqui. Total faça uma caixa, algo assim. Segure, clique e faça o canto arredondado. Vamos voltar para a camada para que vocês possam ver para celebrar o canto e arrastá-lo para dentro. E é isso. Agora, mude-os, brinque com ele. Quando você o torna maior ou maior. E seu controle de dois pontos e clique, você vê, você tem que fazer isso de novo e de novo. Então, tentei figurar o tamanho primeiro e, em seguida, altere este. Então a largura, talvez 200 para se esconder. Por 120. A mesma coisa com duzentos trezentos e vinte. Veja, a mesma coisa. Arraste e traga para dentro. Por que 21, a mesma coisa. Arraste para dentro. E isso é 1,5. Agora, novamente, mantenha pressionada Control ou Command e clique na camada superior, o canal y. Precisamos mudar essa cor para algo, um pouco azulado, algo por aqui. Então, vou arrastar isso e colocá-lo para a direita até conseguir algo que eu gosto. Para dar uma olhada, selecione este e jogue. Vai ser algo parecido com esses caras, lindo. Então, esse será o nosso pessoal de fundo. Vamos chamar esse loop de sombra BG. Esta sombra escura. Certo? É isso. Vou colocá-lo no topo. Por isso, é muito organizado. Agora não Comando Controlador e clique em, certifique-se de que a sombra branca esteja selecionada. Pressione Command ou Control D para duplicá-lo. E chame esse gradiente azul e G4. Para sentir a mistura, clique em Cor sólida, coloque-a nos gradientes lineares. O superior e o inferior. Selecione a parte inferior e certifique-se de que isso seja algo como lowish, algo assim. Certo? Agora, selecione o superior, você pode selecioná-lo aqui. A mesma coisa. Vou deixar isso um pouco mais brilhante, ainda mais brilhante. Selecione este e, portanto, brincamos com ele. A parte inferior deve ser um pouco mais escura e a superior deve ser um pouco mais brilhante. Novamente, selecione a sombra branca e, quando você estiver no azul, certifique-se de que a sombra seja e 0, certifique-se de que a sombra interna esteja ativada. Então você ativa isso, mas é a entrada por sua vez. Vá para dentro e faça isso muito nítido, algo que todos possam ver esse olhar. Deve ser algo como disfarce. Agora, selecionou Comando ou Controle D novamente. vou chamar isso de impressão digital. Mantenha pressionado, desloque, arraste isso para baixo. Veja o que vai acontecer. Agora, desta vez, vamos voltar. Cor sólida. Escolha a mesma cor que a cor de fundo, certo? Selecione o iene e arraste-o para cima. Deve ser algo assim. Agora, já temos um desses antigos e arrastá-lo, colocá-lo aqui. Se você ver que esta linha azul no núcleo está escolhendo, basta selecionar isso, clique duas vezes nela. Clique neste ponto com uma tecla de seta para a esquerda. Basta clicar na tecla de seta para a esquerda dentro. Clique nesta tecla de seta para a direita e esta deve ser a tecla de seta superior. Então, basicamente, não vemos essas linhas azuis ao redor. E é isso. Quando você clica nisso e vê este e clica no gradiente linear novamente, você vê essas alças, arraste isso para cima. Então, para a mudança de cordeiro, arrastar é uma combinação de azul e ciano na parte superior. Então, isso funciona perfeitamente para o nosso design. Eu adoro isso. Então, já temos este. Quero deixar isso um pouco mais escuro. Então, vamos para o campo e arraste-o um pouco para baixo. Talvez menos, algo assim, algo um pouco mais. Pop esse Deus, você está se conectando. Certifique-se de instalar este ícone para o plug-in de design. É bastante simples. Você precisa ir para o plug-in, clicar no sinal de mais. E aqui basta digitar o ícone para design e, em seguida, clicar em instalar , algo assim bom, ou pelo menos nisso gratuitamente. Então, quando você tiver, clique em Python para design. E vou chamar isso de impressões digitais. Agora clique nele, basta arrastá-lo para baixo. E é isso. Eu só vou torná-lo branco ou algo não totalmente conectado aqui. Aqui. Então, é meio óbvio o que você tem que fazer. Veja como isso é bonito, certo? Vamos voltar e selecionar Control e Alt e Shift arrastar isso para baixo. Vou digitar aqui impressões digitais. E vamos colocá-lo na luz. Coloque-o no centro. Certifique-se de que isso esteja no centro também. Este e este em um centro também. Talvez arraste isso um pouco. Bom. Quero Paul Lam Control e clique nisso. Volte para os últimos anos, a sombra branca. Vamos mudar a sombra branca para algo um pouco mais azulado. Porque tudo parece um azul. Então, faz sentido. Miser, é muito sutil, mas funciona bem com esse design. Então, bem-vindo. Impressões digitais. Se você clicar nisso, ele deve ser um bloqueio aqui. E eu vou clicar nisso. Ele deve desbloquear. Tudo bem, vamos voltar ao ícone. Só vou chamar esse bloqueio. Então, vamos quebrar esse desbloqueio, derrubá-lo, torná-lo um pouco menor. Basta deixá-lo aqui. Eu conheço pessoal, isso é desbloqueio. Então, isso deve ser bloqueado primeiro em breve porque precisamos desbloquear primeiro. Y. Só vou te mostrar o porquê. Agora, legal. Então, por dentro, selecione isso, faça isso totalmente branco para o branco brilhante. Clique aqui e chame isso de bloqueio. Agora vamos chamar esse login e Alt e Shift e arrastá-lo para a direita para a animação. Para nossa animação, isso será aberto e, por padrão, vai clicar duas vezes aqui. Eu só vou clicar neste ou no turno do almoço e neste, e este, e ao longo tecla de seta e arraste isso para baixo. E é isso. Você quer ver sua animação. Deixe-me mostrar a você. Clique no protótipo. Data chave, por exemplo, se eu colocá-lo aqui, a guia aqui, basta dar uma olhada nessa sorte, veja o que acontece. Se eu colocá-lo em 1 segundo, o tipo deve ser animado automaticamente, nada, apenas por nenhum. E vamos ver o que aconteceu. Comando ou Controle Enter. E se eu clicar nesse URL, fiquei doente, muito naturalmente só vou abrir. Tudo bem, vamos excluir este. Vamos voltar ao Design. Então, nós tentamos descobrir o que vai acontecer. Então, se eu clicar nisso, o que vai acontecer com este? Só vou selecionar isso, o design, e vou escolher uma cor, talvez essa cor. E vou adicionar essa cor às minhas amostras. Então, por um hábito, bom. Se clicarmos vai ficar azul, significa que está tudo bem. E o que vai acontecer? Mochila fora e para baixo controle e clique nesta letra dentro e rastreie isso um pouco. Se você clicar na impressão digital, que é algo aqui na parte superior, é um bloqueio. Portanto, devemos a impressão digital, a opacidade é 0. A versão do log, a opacidade é 100% e tente trazê-la para cima. E também deve ser desbloqueado. A mesma coisa aqui. Se eu clicar nisso, vamos aumentar a opacidade por enquanto. Desbloqueado. Traga o centro. A opacidade é 0. Mais uma vez, clique nisso, tentando fazer com que ele circule quanto possível. Então, vou fazer a altura para 100 também. Vamos ver. Se isso é algo como isso está acontecendo, pessoal. Tente mantê-lo o mais simples possível. Então, vou tentar fazer isso algo assim. É como um círculo. Se não acontecer, significa que você tem que selecionar este e este, e este e este. E rastree-os para torná-los exatamente no centro ao mesmo tempo. Porque em animação, perto da rede em movimento. Incrível. Então, vamos animar isso. Vai clicar. Se eu clicar nisso, será essa guia, nenhuma, duração 1 segundo. Selecione esta placa para collicullus. Então, há reprodução, este. Vamos voltar. Muito legal. Agora é hora de usar o mais fácil. Selecione este. E se for selecionado, em vez de nenhum, devemos colocar uma facilidade fácil. O mesmo se aplica a este é a facilidade. E agora veja o quão inteligente vai acontecer. Lindo. Como impressão digital. Desbloqueie, desbloqueado. Olha, tudo é muito natural. Agora vamos torná-lo mais interessante. vez, dê uma olhada nessa impressão digital. Vamos ver o que acontece. É como se estivesse desaparecendo aqui e algo mais vai. Sorte. Tudo bem, vamos tentar tornar isso mais natural. Se eu clicar nesta impressão digital está aqui, certo? Vamos fazer os bits superiores. Só vou arrastar isso para cima e colocá-lo aqui. Agora, derrube a opacidade e vamos ver o que aconteceu. Apenas uma placa de experimento. Isso é como uma impressão digital, está se convertendo para desbloquear ao mesmo tempo. Parece exatamente como animação de morphing. Tudo bem, legal. Agora acabamos com essa parte. 6. Início de design de touca para ui: Tudo bem, vamos para a página principal. Apenas controle. Clique neste. Pressione Command ou Control D. Falta ir ligar para esta casa e excluir tudo. Só vou escolher um desses Espere, segurar e arrastá-lo para cá. Então isso é sombra escura, um quadrado mantenha pressionado o deslocamento e torná-lo um pouco maior. Talvez, talvez eu queira fazer isso. Vamos bloquear isso. Então, quando mudamos a largura, a altura também está mudando. Você colocou no AD. Agora, e a luz dessa sombra? Se eu clicar na sombra branca, talvez possamos brincar com ela e podemos torná-la um pouco azulada. Certo? Está resolvido, mas sinto que está tudo bem. Certo? É por isso que estou indo e voltando resumindo longe para ver se é real, então vou jogar C se estiver tudo bem. Tudo bem, Cool. O que é que vou colocá-lo, então vou copiar. Só vou entrar. Então, vou colar isso e colocá-lo aqui. Certifique-se de que isso seja médio, deve ser semi-negrito. Só vou ligar para este quarto. Este vai ser um quarto de piso leve. Um. Arraste isso um pouco para baixo. E talvez também neste. Este bom loop de conexão para luz. A lâmpada aqui. Este está bom. Só vou arrastá-lo e colocá-lo aqui. Faça com que seja um pouco menor. Eu poderia, vamos voltar para a camada. Vou chamar essa lâmpada e me certificar que tinha uma sombra interior para lhe dizer isso branco e não precisa sentir. Portanto, não há necessidade de sentir. Apenas a sombra interna. Brinque com isso até conseguir alguma coisa. Eu queria algo gradualmente como gradiente ou de baixo para cima. É como uma mistura, algo para se misturar na verdade. Então eu só vou salvar isso, talvez coloque-o em 60. Essa coisa se aplica a fazer s1 ou é sua é apenas excluir este, selecionar essa tecla Shift, arrastar isso para baixo, torná-lo um. Coloque-o aqui. A mesma coisa com este. Mas para este eu só vou fazer essas cores. Então, bata. Esses três são selecionados e os tornam o centro disso, se eu puder, sim. Acabei de jogar, veja se é legível. Tambor bit. Por que não é? Porque é um 9. Deve ser 14. Sim. Para algo assim, você só quer vê-lo muito rapidamente e quer mudar. Delícia. Você tem que vê-lo muito grande. Vá para cima, para cima. Vamos apenas jogar. Selecione três deles e alinhe-os no centro. Mas o problema é que esses dois devem estar próximos um do outro. E eu só vou agrupá-los e selecionar este. E agora vou arrastar isso cima. Isso é muito melhor. Então, quarto um, selecione isso, selecione deficiência e coloque o centro. E é isso pessoal. Vou voltar aqui, selecionar este e excluí-lo, este e excluí-lo. Então este clique com o botão direito do mouse, desagrupe primeiro, clique duas vezes e apenas uma lavanderia. Este aqui. Exclua este. Clique com o botão direito, desagrupe-o. E vou chamar essa cozinha. Colocando este centro, selecione este também e coloque-o no centro. Então isso é basicamente o que temos aqui. Selecione todos esses, arraste-os para baixo. Vê a lacuna entre esses dois? Deixe-me ver. São 26. Então, a diferença entre esses três deve ser 26. Estou usando minha tecla de seta para baixo para ser 26, 27, 26. A mesma coisa se aplica aqui. Arraste isso para baixo. E acredito que está tudo bem. Este deveria estar comendo. Clique com a tecla Control pressionada, este deve ser áudio. E certifique-se de que esteja no centro. Vê o quão legal é tão maior? Isso é suave, você é, tudo deve se misturar facilmente. Essa é a nossa cozinha? Só vou colocar este salão. Certifique-se de que a capital da espécie. Aqui vamos nós. E este, porque é uma casa inteligente, deve ser cortina. Legal. Vamos ver se este está no centro. Este centro. Cisne lindo. Legal. Portanto, certifique-se de que tudo esteja no centro primeiro porque quando animamos isso, ele vai lê-lo. Difícil consertá-los. Então, um clique, um clique. Certifique-se de que tudo esteja no centro. Tenho certeza que as lavanderias em seus centros. Nós não fomos no centro. Incrível. Então, tudo está no centro. Deixe-me verificar este. Este aqui. Este aqui. Vá. Agora posso dizer que tudo está no centro. Agora, eu só vou clicar neste. Cópia. Venha aqui, venha aqui e cole-o aqui. Então precisamos da mesma coisa aqui com a sombra interna, pressione Comando ou Controle D. Não há necessidade de sentir. Este deve ser menos três. Menos três. E isso é, deve ser branco. Então derrube a opacidade. Algo assim. Então isso não é mais impressão digital é o controlador branco? Controle a falta deles. Então, sombra branca, sombra preta. Mas essa sombra negra deve estar mais embaçada. Como fazemos isso? Vamos colocar isso no Twitter. Também. A mesma coisa, mas o branco é colocado em 20. Perfeito. Então agora você vê isso com base no que temos aqui, apenas essas ferramentas, esses objetos que criamos. Estamos criando todo o aplicativo. Só vou copiar este. Copie, venha aqui, cole-o. Isso poderia ser aqui também. Então, vamos selecionar isso. Acredito que algo não é Cambridge, apenas sombra branca, apenas diluído. Selecione-o, copie-o, venha aqui, cole-o. Acabei de clicar duas vezes sobre isso. Então é por isso que acabei de me dar o interior dela. E quanto a esse branco? Você gosta porque essa sombra tem um Bluetooth. Devemos mudar este? Vamos tentar. Vamos ver. Clique em Control e branco. Vá para a sombra interna, clique nesta área branca. Vamos brincar com ele. Muitas configurações. Veja isso, bom. Vamos ver toda a página inicial. Eu adoro isso. Acho que é perfeito. Tudo bem, antes de criarmos essas setas, vamos selecionar e derrubar tudo um pouco, e derrubar esta também. Algo por aqui Em um momento em que você faz algo para voltar. Título da casa. E também precisará de uma alternância para alternar entre escuro e branco deste design. Então não se preocupe pessoal, tenham tudo aqui. Então, antes de trouxermos isso, eu só vou sentar em um desses. Clique em. Vamos para a sombra interna preta. Clique neste conta-gotas e mude a cor. Isso é tudo. Então eu preciso apenas deste por enquanto. Vamos apenas copiá-lo. Só vou trazê-lo aqui e vou colá-lo. Vai ser algo que temos. Deixe-me verificar. Tecnologia. Legal. Eu adoro isso. Sim, precisa do ícone de seta. Vamos ver se conseguimos este. Perfeito. Deslocamento Alt. Um ir. Bom. Então eu posso voltar daqui e ver como parece flutuar. Quero dizer, algo É muito interessante sobre sentir como flutuar também. Parece que está entrando é loucura. Eu adoro isso. Então, o que mais precisamos? Peso também, algo assim. Ele vai copiar isso para baixo Alt e arrastá-lo e soltá-lo. Aqui. Vamos ver o tamanho disso. Arraste isso para cima. Talvez um pouco para baixo, talvez dentro do centro. Tudo bem. Isso é como uma alternância, mas em dipolo diferente. Só vou selecionar algo aqui. Traga para baixo. Certifique-se de que a sensação seja da mesma cor. Só é necessário. Drop Shadow. Arraste para cima. A sombra do centro. Então, homens, esses dois são 0. Significa a área do solo como uma sombra. Algo assim. Olhe. Deixe-me brincar com ele. O que mais? Acredito que isso seja muito melhor. Minh declarou sobre isso e adicione-o a este. Este prato. Bom, adoro isso. Tudo bem, legal. Quando ele colocou essas flechas aqui. Então, as mesmas setas. Deixe-me verificar este. Control X vindo aqui, cole-o aqui e deixe-o branco. Por enquanto. Descer Shift, gire-o. Vou colocá-lo aqui exatamente do centro. Agora vamos voltar para a camada. Só vou cancelar isso. Então, quando está desligado? Deve ser algo como esse cara clique aqui. Então isso significa que nada está acontecendo. Clique e solte a sombra. Certifique-se de que isso seja 0 e isso também é 0. Vou clicar novamente em Drop Shadow. Arraste isso para cima. Tudo bem. Então, você vê algo, pressione Command ou Control D para duplicá-lo. E isso vai acontecer. Quando está indefinido, é totalmente branco. E a sombra também é branca. Então isso vai ser, é mudar a seleção um componente e clicar novamente em novo estado, estado para estado dois. Você deveria ser branco. Acabamos de entrar. A origem deve estar 100% de desconto. Selecionou sua imagem. Vamos voltar ao estado padrão. Quando estivermos em padrão, estado, abra isso. Vamos chamar isso. A versão ARM está fora da oferta lá. Só vou torná-lo um pouco melhor com apenas a sombra interior para que possamos ver mais. Obviamente, 112. Vamos arrastar isso para cima. Algo assim. Agora, podemos ver que, como você pode ver, algo está aqui, algo está aqui, certo? Nós o tornamos maior. Lindo. Então este é o 1. Estado 2 está indo para a ciência. Às vezes acontece, vá em frente e separe. No entanto, mais uma vez. Desligado, ligado, desligado. Então, a mesma coisa. Só vou arrastar isso para baixo. Os caroços mudam e giram. Vou colocá-lo aqui no centro, arrastá-lo para a direita, exatamente no centro. Girado. A mesma coisa. Gire para baixo. Este aqui. Envie para baixo. Bom. Tente estar no centro. Incrível. Vai entrar em um prato. E eu adorei o quão legal é isso. Talvez esteja um pouco escuro demais. Vamos entrar. Porque este é o principal. Se mudarmos este, tudo vai mudar. Silício. Isso é um off. Vá para a sombra interna e arraste isso para baixo. Deve ser um pouco mais leve. Muito melhor. Vamos vê-lo novamente. Você sempre tem que verificar. Se estiver tudo bem. Eu adoro isso. Já está lá. Então, se alguém clicar nele, o que vai acontecer? Vai ser ativado, mas não o ativamos. Se eu ativar isso. Bom protótipo Gilligan, não é necessário ter animação automática. Basta colocá-lo no estado de transição 2. Deve ser em dois segundos muito rapidamente. Se eu for estado para uma ativação, isso voltará ao estado padrão com 2 segundos e deve ser desconhecido. A mesma coisa aqui. Você deveria ser freira. Pense. Certo, chique. Clique em. Bom. Então, a coisa legal sobre isso, quando editamos o mestre, tudo o resto também mudará. É por isso que a melhor maneira de projetar as coisas. Dessa forma, temos o componente mestre, nós mudamos este. Tudo o resto também vai mudar. Certo? Agora vou clicar aqui e arrastar este aqui. Só vou chamar essa Coluna. Clique aqui em, então tudo está perfeito. Só o mal é muito pop. Então selecione este. Só vou escolher uma cor. Essa cor. Jogue de novo, muito natural, muito macio. Então, chamamos essa interface de usuário suave. Agora é hora de animar essas partes. 7. A animação de Prototyping leve: Tudo bem, vamos para a animação. Então, vou clicar em um design para fazer com que ele meça essa linha no centro. Clique de controle, clique duas vezes, três, também introduzido. Um leão deveria estar aqui. Agora é. Controle. Perfeito. Um, 23. Então, quando clicamos nele, o que vai acontecer? Então, vou selecionar tudo pessoal ou algo assim, essa caixa delimitadora para ver que a verde clica com o botão direito do mouse e desagrupa. Não precisamos dele por enquanto. Então, fizemos nossas partes. Vamos voltar e trazer este também. Quando clicarmos nisso, isso vai acontecer. Algo assim está subindo. Vou colocá-lo aqui. Vou selecionar tudo aqui, sair para G para agrupá-lo. E vamos chamar isso. Este é o primeiro. Então, quando você clicar nele, a parte inferior aparecerá. Então, essa é a França, talvez. Isso está de volta. Então, vamos colocar isso de volta por enquanto. Só aqui, todo o município para torná-lo do mesmo tamanho. Glyco. Então, quando você clica será algo assim. Agora, selecione os dois. Certifique-se de clicar em Componentes, nos bots traseiro e frontal. Clique novamente primeiro, com o botão direito do mouse e certifique-se de que isso seja desagrupar. Mais uma vez, Comando ou Controle G para agrupá-lo e chamar isso de volta do meio. Quer ser um componente. Só queremos ser um grupo porque vamos apenas selecionar esse grupo, este e este, e agora torná-los um componente. Vamos chamar isso. Então, individual. Temos costas e frente. Então, vamos colocar isso de volta para frente, na frente. Agora, selecione a frente, abra-a, clique no laboratório e arraste-a para fora. Então a lâmpada será animada entre a frente e a parte de trás. Então confira isso. Bom. Pode componente, estado mais novo, estado T2, dia seguinte para clicar duas vezes e no quarto, arrastá-lo para baixo. E talvez ele caia um pouco. Este aqui virá aqui. Vai ser maior. Vai mudar a cor para algo muito gradualmente, mais leve, algo assim. E vou adicioná-lo às minhas amostras, algo como desgraça. Tudo bem, então esta é a parte de trás, este é o estado para o estado 1 ou estado padrão, estado dois. Então, vamos animá-lo. Tem um protótipo. Um clique na guia Por na animação automática. Isso, coloque-o em seis segundos. A flexibilização é L deve estar usando isso, usando está em suas saídas. Vai ficar, a mesma coisa se aplica. Um clique. destino deve ser o estado padrão. Agora vamos jogar e ver o que acontece. Certifique-se de voltar para a placa de estado padrão. Se eu clicar nisso, veja, o ato não está ativado, algo está acontecendo. Se eu selecionar isso, novamente, não escolhi a arte ou o estado para aperfeiçoar. Veja a animação. Isso está diminuindo e desaparecendo e isso vai substituí-lo. Perfeito. Quando isso é ativado, significa que agora posso aumentar a luz ou diminuir a luz. Perfeito. Impressionante, eu adoro. Tudo funciona como um char. Lindo. Vamos à lavanderia e ao aquecimento e áudio também. Vamos voltar ao Design. Selecione este. Quando você vai declarar para selecionar isso, podemos ter um pouco de olhar de sombra interior. A sombra interna dessa cor. É como se essa cor fosse selecionada, certo? Mas ótimo ensaio de download. Então, vamos voltar para casa. Se eu clicar nisso. Agora está de pé. Adoro isso. Perfeito. Vamos fazer a mesma coisa com este. 8. Animação de Laundry: Tudo bem, meça a roupa selecionada, clique com o botão direito do mouse sobre ela e desagrupe-a. Agora pressione Command Control G para agrupá-lo. Vou chamar isso de frente. Deixe-me apenas, algo está me incomodando. Nesta, a animação. Acredito que isso é bom, muito bom. Essa luz não é muito legal? Então, vou clicar no Control e 10 inércia desligada. Foi tudo o que eu fiz. Quero dizer, é muito simples. Agora vamos jogá-lo. Eu sempre gosto da simplicidade da animação e ela funciona perfeitamente. Nós. A mesma coisa aqui. Isso vai estar de volta. Só vou copiar isso, trazê-lo aqui, colar. Venha aqui exatamente para o centro. Certifique-se de que isso esteja totalmente alinhado. Clique com o botão direito e desagrupe-o. Comando ou Controle G, isso vai ser na frente, ou vou trocar esta roupa frontal. Selecione ambos, torne-os uma biblioteca de componentes. Abra isso, ele deve estar na frente. Você acabou de copiar essa área frontal. Então, temos lavanderia na frente. Deixe-me verificar se C deve voltar Landry. Canadá. Voltar deve causar dados de volta. Isso para cima. Abra isso. Incrível. O texto da roupa está fora e a caixa está em cima uma da outra. Temos que voltar, deixe-me desligar isso. Esta é a parte de trás. Você está pronto, traga aqui. E esta era a frente, digamos que esta é a frente real. E todos eles estão dentro de um componente chamado Londres. Foi assim que criamos isso. Clique neste sinal de mais novamente e vá para o novo estado no estado dois, o que vai acontecer na propriedade para a frente está desligado. A parte de trás aparece em um estado 2, 1. Abra isso. A parte de trás está desligada. A frente está ativa. Então, se eu vou mudar isso, isso é o que vai acontecer. Se eu for a um estado para abrir isso, às vezes acontece. A parte de trás deve ser ativada agora. Agora vamos jogar novamente. Clique fora deste e deste. Deixe-me animá-lo. Primeiro, clique neste destino deve ser um estado muito simples. Se eu estiver nesse estado para clicar neste destino deve ser o estado padrão é uma facilidade. Seis segundos. Isso é tudo. É sempre o mesmo. Vamos colocá-lo como padrão existe também. Então você pode ver a diferença e é lindo. Parece assim para que ele possa funcionar nisso. E esta é uma bela animação. Incrível. Então, quando algo assim está acontecendo, lavanderia, não tem uma operação e seta para baixo, algo mais deve aparecer, algo que diz clique em mim. Deixe-me mostrar a você. Vamos voltar aqui para o design vem aqui. Clique nisso. Cópia. Selecione fora do Command Control V. Certo? Agora, é bom sentir isso bem para linear. Só vou fazer algo assim. O melhor desta vez eu quero deixar isso um pouco escuro. Na parte inferior, vou torná-lo um pouco mais brilhante. Então, até como esses caras. Agora, vamos para a sombra interior. Vamos deixá-lo muito escuro. valor Ebit x é três. Isso talvez seja 20. E arraste isso para cima. Então, temos uma borda escura aqui, tem como um botão, como Vejo você lá. Legal. Pressione Command ou Control D para duplicá-lo. Tudo bem, agora selecione o inferior, será chamado de fundo no BG. Mantenha pressionados Alt e Shift e arraste-o um pouco para cima, talvez um pouco maior. Então você vê que o canto direito. Então, é lindo. E certifique-se de que isso seja totalmente um círculo. E clique neste. Este também é circular. Este também é um círculo. Então, estamos no BG. Bg, eu quero fazer isso apenas uma cor sólida para algo muito branco. Goste do botão para que você possa clicar nele. Deixe-me jogar. Veja como isso é bonito. Incrível. Eu adoro isso. Então selecione isso e selecione o BG, o comando Shift ou Control G, o botão The Scholars. Então pressione Command ou Control X. Então, agora vou selecionar a lavanderia para o estado padrão para clicar duas vezes nele e pressionar Command ou Control V, apenas copiando o mesmo lugar. Então significa o que quero dizer, a roupa, isso vai ser ativado. Então, se eu clicar nele, vou fazer a página de lavanderia. Então, vamos ver se todo o estado normal é simples. Vamos ver brincar. Então esse é o meu som. Na verdade. Eu estava pensando em adicionar um som a ele. Vai ser um trabalho muito bom. Tudo bem, vamos ver o que eu já chamei som para isso. Então este é C, um truque, apenas vai excluir este. Se eu clicar nisso, estou no estado padrão. E se eu for para o modo protótipo, tenho algo aqui chamado ação. Se estivermos entrando neste plus inscreva-se algo chamado reprodução de áudio, que pode deixá-lo dessa forma, um arquivo de áudio selecionado e adicione um novo arquivo. Na final está o MP3. Você tem algo como smush, Gilligan it e é um arquivo WAV, um arquivo mp3. Só vai funcionar. Então, ambos estão funcionando, importam. E vamos ver o que vai acontecer, pessoal. Se clicarmos nisso, a animação soará assim. Certo, clique nisso. Deixe-me desligar meu microfone e vocês não conseguem ver isso. Deixe-me aumentar o volume de B. Vai ser soado como esses caras. Então solte. Então, também podemos adicionar isso a este também. Este aqui. Se você estiver por padrão, o estado pode clicar neste sinal de mais para ação. Então, agora você vê que está ativado. Vá para escolher. Um arquivo de áudio já está lá. Portanto, não precisamos adicionar mais. E isso sugere o que vai acontecer com o home plate para deixá-lo ir. Então, a soma de ativar algo ou tocar em algo será esse som. Então, certo, vamos projetar bem a página da lavanderia ou da máquina de lavar roupa. 9. Como criar uma máquina de lavagem: Tudo bem, vamos criar a página de Londres. Então, obtemos nossa prancha, a prancheta em casa pressione Command ou Control D para duplicá-la não removerá tudo. Mas neste também. Basta selecionar este, arrastá-lo para a direita. Então, apesar de em diante, deve estar em casa. Isso vai para Plugins chamados esse botão home. Isso é legal. Isso arrasta-o aqui e fica um pouco menor. Peter, menor. Eu desenhei aqui e da mesma cor. Vai ser não-repúdio vai te dar uma cópia e arrastar isso para baixo. Só vou digitar empurrão inteligente, certo? Para mim, é grande. E estou procurando algo semi-ousado. Arraste isso para baixo, digite aqui máquina. Mas este deve ser leve. E também estará um pouco mais perto 200, 400, 500, 550. O resto pode ser assim. Selecione-o, levantando a tecla de seta para cima e aqui vamos nós. Ela definiu ficando um bom, o que eu estou fazendo esse capital, eu também faço o dia guardado. Acredito que isso seja muito melhor. Agora Cellectis. Está bom. Então, algo assim. Máquina de lavar roupa inteligente. O que mais precisamos? Eu não preciso desses. Exclua, selecione este, mantenha pressionado o shift e torne-o um pouco maior. Tudo bem, selecione isso, arraste-o para baixo. Selecione esses, arraste-o para baixo. Selecione este. Vamos voltar para a camada. Quero ver o que fizemos. Abra isso, branco e verificando se a largura e eu somos iguais, certo? Talvez um pouco maior. P, algo assim, 1, 36, e este em torno dele. Legal. Agora vou clicar no círculo comunista no centro. Mantenha pressionado Alt e Shift e arraste para cima. Indo exatamente para o meio. Saia do campo para que possamos ver a fronteira. Vamos colocá-lo em 20. Agora. Vamos experimentar tudo para mudar para fazer isso exatamente algo como aqui. Talvez um pouco mais perto do exterior. Este e este. Mantenha pressionada a tecla Shift e aumente-as. Mais uma vez. Agora, tudo é perfeito é um e aquele, estou mudando a largura e a altura. Então, tudo está bom. Basta selecionar isso. Só vou escolher um carro legal ou algo assim. Isso realmente não importa. Então você sempre pode procurar cores, torná-lo totalmente branco ou vermelho, e apenas brincar com ele até obter algo como aqui nesta área. Devemos fazer algo assim também. Esta área está dando um bom contraste entre o fundo e a cor. Então, vou escolher este. Agora, há outro truque legal porque você quer animar isso. Este é o truque que vou mostrar. Você. Coloque a lacuna em determinado centésimo. Quando você colocá-lo no 700 será algo assim. Só uma pequena linha aqui, certo? O que você também pode reduzir a opacidade. Não há nada para animar que a lacuna é igual a 700, mas o traço, se eu segurar minha tecla de seta superior, você vê o que aconteceu? Olha, é assim que animamos isso. E vai ser muito natural, muito legal. Deixe-me chegar à área que está totalmente nivelada com o topo. Para fazer isso, vou criar uma linha para isso. Só vou selecionar novamente e deixá-lo ir. Certo, isso é legal. Agora, confira isso. Temos que usar a tampa arredondada e ver se eles vão para dentro , o que é legal. Então esse é o truque. Agora. Vou selecionar tudo, pressionar, Command ou Control G para agrupá-lo e arrastar isso para cima. Vamos colocá-lo aqui. E também arraste-o um pouco para a direita. Bom. O que mais precisamos? Precisamos da água para dentro, então como podemos criar a água. Então deixe-me selecionar isso e clicar na máquina de lavar roupa, Glenn Command ou Control e clique nesta parte superior arredondada no canal y. Pressione Command ou Control D para duplicá-lo. Vou arrastá-lo e colocá-lo no topo. Então, haverá máscara. Agora clique no combustível. E vou usar a mesma cor que esta. Vamos para linear, o primeiro. Porque eu faço borracha. Venha aqui. Selecione este, pegamos pela borracha e escolhemos essa cor. Então, a mesma coisa. Mas temos que mascarar isso como? Quantidade de controle clicando. Então, estamos sob Máscara. Pegue sua ferramenta de caneta. Agora, selecione fora, um clique aqui, ao longo do turno, um clique aqui, instável aqui, e também aqui. Então, só temos a borda dele. Sem clique na seleção, clique duas vezes aqui. Basta arrastar um desses para baixo. Então, é um cuidado aquoso. Agora, arraste isso, incline-o para baixo assim. Então, nada está dentro dessa forma aqui dentro do círculo. Certifique-se de que isso esteja selecionado. Mantenha pressionado também o controle e selecione este também. Portanto, esses dois são selecionados, seu caminho e a máscara são selecionados. Clique com o botão direito do mouse sobre ele e Mascarar com forma ou o atalho Shift Command ou Control M. Portanto, isso será mascarado. Então, nada está lá. A máscara está desligada. Então, basicamente, se eu aparecer e esta máscara Ao clicar na máscara, você vê algo assim. Você vê o passado. Se eu clicar no caminho, se eu clicar aqui, é isso que você vê. Se eu sair, veja o que você vê. Então meu go-to Z, para voltar. Então, isso será perfeito para nossa animação. Então, temos três botões aqui. Vamos trazer este, copiar e colar, e torná-lo do mesmo tamanho que aquele. Turno para baixo. Arraste isso para baixo, torne-o no centro deste. E eu vou arrastar isso para baixo também. Então, está totalmente sozinho. Não, arraste isso e coloque-o para fora. E para o ícone, vamos para o ícone do seu material, ícone do Google. É infile e você pode ter acesso a ele. Basta esperar esses três ícones. Vou colá-los aqui. Então, isso vai ser para começar e desligar isso antes do som. E este vai ser o temporizador agora neste momento. Tudo bem, legal. Tudo bem, perfeito. Então, também temos esses três ícones. Então aqui, este deve ser verde, algo assim, certo? O mesmo que este, o mesmo lugar. Procure algo esverdeado, não deveria estar morto. Meio verde. Este verde é claro, muito verde claro. Então, até gostar disso. Mas quando isso estiver ligando, a sombra afetará esse tipo de sombra aqui. Então, a sombra interna também será da mesma cor, mas derruba a opacidade. Ele disse: Oh, não, está tudo bem. Portanto, esse slide afeta essa área de sombra, a iluminação ao redor dela. Também tenho esses ícones aqui. É chamado de ícone inteligente. Só vou arrastar e colocá-lo aqui. Nada de interesses especiais e clique com o botão direito e desagrupe-o. Basta colocá-lo aqui. Agora, faça dele um componente. Então, porque vamos apenas copiar isso para todos os outros livros ou podemos copiá-lo facilmente e podemos alterá-lo facilmente. 10. Máquina de lavagem de animação de Prototyping: Então, este é o lar. Vou chamar esses Landry Command ou Control D para duplicá-lo. Clique nisso e certifique-se de que a cor, é tipo de estudioso. Ou talvez essa cor. Estou selecionando essa cor e vou adicionar isso às minhas amostras. Agora nesta prancheta. E estou abrindo essa máscara e estou clicando e estou passando. Vamos ampliar um pouco. Portanto, certifique-se de que, ao colocar o mouse aqui, você vê este círculo. Está me dizendo que você está comemorando. Este está selecionando este. Agora, você tem que selecionar este, duas vezes, clique nele e arraste-o para cima. E brinque com ele. Algo como algo assim. Vamos descer. Talvez tenha surgido um pouco. Talvez algo como aqui. Para que possamos brincar com ele. Então você só precisa chegar até o topo para selecionar a cor, ir para a máscara. É bom ouvir. Vou colocá-lo em cores sólidas e escolher a mesma cor que esta. Vamos torná-lo muito simples e muito interessante porque é uma interface suave, então tudo deve ser confortável e fácil para os olhos. Agora, o que animar o chamado, é muito fácil caras. Então, apenas certifique-se selecionar essa borda, selecione esta placa lá. Deixe-me ver. O que é um objetivo? As elites são 61, a elipse dele? Podemos mudá-lo para um círculo para que seja incrível. Círculo. Cópia. Aqui vamos nós. Círculo também. Então, se eu clicar aqui, então certifique-se de que este é o círculo, então sabemos disso. Portanto, deve ser rotação 360 e voltar para o mesmo lugar. Novamente, Comando ou Controle D para duplicá-lo. Selecione este para garantir que você clique duas vezes na máscara. E vamos subir. Desta vez. Deve ser o oposto. E arraste isso para cima. Então, vamos animá-lo até aqui para que possamos ver que tudo está bem ou não. Então selecione esta prancheta, a roupa, arraste e solte-a para o aqui. Isso deve estar ligado. Uma vez eu também posso animar. Deve ser freira. Mais uma vez. Guia. Mais uma vez, nenhum. Eu só vou ver antes de fazermos a animação, posso ver esses ícones quando ele vem aqui deve ser um ícone de parada. Na verdade, vou excluir este e vou excluir este também. Eu já tenho o ícone de parada aqui, vou colocá-lo aqui. E esse ícone de coisas deve ser e isso é azul. Esta também, a iniciativa deve ser azul também para derrubar a opacidade 24. Copie isso, exclua este e selecione este e cole-o aqui. Então, basicamente, se eu clicar neste e arrastá-lo para aqui, será a autonomia da guia que a lavanderia usando não são nenhuma e a duração será de 1 segundo. Então eu só vou clicar nesta, a página total. Arraste para aqui. Então este deve ser pontual. Não fazemos nada. É cronometragem, não 1 segundo. Então, vamos fazer a animação. Vamos ver se tudo é suave, especialmente este, o círculo. Lindo. Então, eles estão mudando porque eles são, têm os mesmos nomes. Então este e este têm os mesmos nomes. Só vou chamar isso. Então eu deveria mudar para três. Eu só vou mudar aleatoriamente o nome para que você não queira distrair o público por este. Então, mudou as paradas ou vamos detê-lo. Lindo. No final, devemos adicionar a bolha. Vai ser muito divertido. Tudo bem, vamos para outra página, Comando ou Controle D para duplicá-la. Nós já sabemos. Claro, o passe está entrando. Aqui. Devemos apenas clicar no passado, arrastá-lo para cima. Lado oposto, arraste este para cima. Este deve vir aqui um pouco. Também. A sessão de música, venha aqui. Arraste isso para cima. Então, delicie-se com isso. Está quase lá. Agora, o que está neste, vamos acabar com ele. Clique duas vezes nele na parte superior. Para o topo. E é isso. E no final há outro esgoto. Um legal. Agora vamos fazer a animação. Vamos ver o que aconteceu. Então a animação deve ser se eu for para o protótipo e arrastar este e também arrastar este também. Então, vamos consertar o primeiro, o círculo. Se eu clicar nele, vamos para Design primeiro. Se eu clicar no círculo, será rotação 0. O próximo círculo é 360. O próximo deve ser 0 novamente. Deixe-me clicar no círculo. Sim. 0. O próximo deve ser 360, e este deve ser 0. Vamos fazer a animação e vamos ver se ela funciona. Lindo. E é feito Command ou Control D para duplicá-lo. Vai ser irritação no final. Então, fazemos isso. Vamos consertar tudo. Então o primeiro difere, círculo, essa rotação é 0. O segundo é 260. Novamente deve ser 0. Circle novamente deve estar em 360. Novamente, deve ser 0. E no final, queremos apenas uma rotação de 90 graus porque é tempo de secagem e apenas mudar a cor para algo esverdeado. Não o passado. Vamos voltar. Apenas a máscara. Aqui. A máscara está secando. Vamos ver a animação primeiro. Então vamos para a placa de detalhes. Então, está parando aqui. Por quê? Isso pode sentir que parou aqui? Porque não fizemos a prototipagem. Quão legal é isso? Então, tempo de lavanderia, nenhum. Mais uma vez, a mesma coisa. Mais uma vez, a mesma coisa. Se eu parar com isso, todo o pacote vai voltar para aqui. Vamos ver. As peças são lindas. Vamos voltar. Olha como isso é legal o tempo todo, eu adoro. Lindo. 11. Crie bolhas para a máquina de lavar: Tudo bem, agora é hora de adicionar algumas bolhas. O que é bolha? Clique aqui. Vamos voltar ao Design. Clique neste pequeno círculo aqui e jogue alguns bugs. E quem vai fazer da mesma cor que esta? Bom. Cor profunda. Certo? Um aqui, um aqui, um aqui, um aqui. Apenas cinco deles. Selecione tudo, agrupe-os. Chame essa bolha e derrube a opacidade. Copie isso. Vamos para aqui. Cole-o. Então, traga-o para baixo e coloque-o dentro desta máquina de lavar. Então, traga a opacidade, selecione esta, arraste-a para um ano para ficar um pouco maior. Para aqui, derrube a opacidade muito baixa. Este, opacidade baixa, este maior. Então este, vou colocá-lo aqui. mesma coisa. Copie o mesmo grupo. Copiado. Clique duas vezes dentro, cole-o. Então a bolha também está no topo. mesma coisa. Se eu clicar neste , arraste-o para cima. O aluno talvez vá acidentalmente e acertar este canto. Isso vai aquecer esse canto. Verificamos que não está saindo. Legal. Então, estou procurando essa elipse. E você acaba derrubando a opacidade. Talvez indo para o topo. Este aqui. Este é, isto é, tudo é. Então, estou perdendo algo aqui. Então, provavelmente, algo no meio, talvez muito pequeno. Não seria ruim. Amostrando a bolha, copie. Clique duas vezes dentro. Posso controlar a bolha? Agora brinque com ele. Então aqui, aqui tivemos um acidente, certo? Então, aqui nós batemos na esquina. E este me deixou verificar. Deixe-me apenas copiar este. Se eu apenas copiar este, copie este. Clique duas vezes, cole-o. E este tem 18 anos. Vindo aqui, vindo aqui, vindo aqui, para baixo, para baixo. O que mais? Faça outra coisa. E ainda assim a rainha a ser feita também. Então, mais uma vez, copie a bolha que era Lee aqui. Cole-o em frente. Então, isso seria bom. E também vamos colocá-lo aqui também. Cópia. Então aqui vai voltar à bolha, a opacidade 100%. E este aqui, a bolha está aqui. Escreva isso. Então, vou colocá-lo dentro da máquina de lavar. Direcione-o selecionado, desloque, selecione a tecla de seta para baixo e certifique-se de que a opacidade seja 0. Então isso é, vamos ver, nós fizemos. Então, algo na parte inferior estava faltando. Vamos consertar este. No seu ouvido. Alguma coisa. A bolha e essa bolha devem surgir. Vamos ver mais uma vez. Jogado. Bom. Eu adoro isso. É lindo. 12. Adicione efeitos de som no Adobe XD: E o som? Então, no final, para esse som, pois um som também tem que mudar isso porque esse significado está ligando certo? Então, vamos voltar aqui e vamos procurar o som que queremos. Quando é desta forma. Copie, cole. Adquira este. E apenas no centro. Legal. Pegue essa cor. Bom. Copie esses. Então, vamos excluir, excluir, excluir. Então selecione, Shift, selecione todos eles, comando ou Control V. Apenas estará nos mesmos pontos aqui. A mesma coisa. Então este derruba a opacidade. Então, antes disso, certifique-se de fazer a mesma cor. Agora, derrube isso. Então, isso vai ser ligado. Aqui vamos nós. Aqui, controle V, som desligado. Então este aqui, e eu não quero que este, clique em Control clique em Command ou Ctrl G para agrupá-los. Só vou chamar esse som. Se você clicar nisso, o que vai acontecer? Isso faz dele um componente primeiro. Som. Quando estiver em padrão, deve haver algum prazer. Vai para novos estados? Deve ser algo assim. Então isso está ligado e desligado. Desligado deve ser 10, o braço deve estar ligado. E também esta, a sombra interior, será a mesma que esta. Opacidade para baixo. Então, destaque é o que vai acontecer. Desligado. Vamos animá-lo. Clique nele. Estado dois, bom ficar para fazer deve estar ligado por um segundo. Também podemos ter uma ação para disciplinar, como me dizer que fora desse chamado à ação na solução para este também. Então, vamos ver como ele funciona. Vamos trazer isso de volta ao padrão conforme eles buscam. Funciona conosco. Bom o tempo todo, certo, legal. A outra coisa que podemos fazer é esta. Aqui basta digitar. A secagem é colocada tão divertida. 0 é fazer isso semi-negrito. E também dois pontos no final. Faça isso um pouco pequeno. Vamos derrubá-lo. Você poderia fazer vários pequenos. Coloque no centro. Copie esses. Coloque-o aqui, torne-o grande. Selecione este, derrube a opacidade. Então, isso vai ser como se pareceu. Mas senhoras, gostam de secar agora. Vamos voltar. Cozinhe. Então, isso, veja essa animação. Então, significa os mesmos nomes. Temos que mudar esse tipo de 11 aqui, outro aqui. Então, não importa porque ela então está mudando para vamos ver, se algo está errado. Então, temos que consertar tudo está bem. Tudo é totalmente perfeito. Som. Leva quatro segundos. Isso parece certo. Desejado e isso incrível. Eu adoro isso. Agora, vamos para o temporizador. 13. Design de timer e animação de prototyping XD: Tudo bem, vamos criar o lado da tela do temporizador. Eu vou usar um desses, na verdade, algo como este. Só vou arrastar este para baixo. E também a chave aqui é a sombra. Deve ser branco. Vamos tentar isso, talvez por volta de 80. A altura para a direita. Alinhe-os, vá para a esquerda. Alinhe, comande ou controle. Clique em cantos arredondados, cantos arredondados. Então, temos este. Se eu manter pressionado o controle e clicar nisso e selecioná-lo em preto, em uma sombra. Se eu entrar em phaco e linear, o de cima, este deve ser branco. A parte inferior deve ser da mesma cor que esta. Agora este brinca com ele até que você esteja feliz com algo assim. Além disso, clique nele como sombra interna. E este deve ser um pouco mais escuro. Ratos, eu adoro. Pressione T no teclado. E basta digitar o número 0. E faça isso maior. Não deveria ser Poppins para a área numérica ao redor. É bom e sua rodada vazia é legal. Ele vai usar este. Certifique-se de que a cor de preenchimento seja essa cor de fundo. Clique em uma sombra interna, ele amplia para que vocês possam ver exatamente o que vai acontecer. Clique em uma sombra interna e tente criar luzes muito brilhantes. Vou tentar algo assim, arrastar isso para cima. Talvez essa cor possa ser a melhor cor. E vou adicioná-lo aqui. Então, está aqui. Este aqui. São três, e b, nove, E1. Então, brinque com ele. Acabei de descobrir que esta é a cor base a ser usada. Então você sempre tem que brincar com a cor, algo assim. Parece um terno do seu design. Então este é o 01. Então, como criamos isso? Então deixe-me mostrar um exemplo. E vamos colocar isso aqui. E eu só vou arrastar isso para cima. Você pode criar, repetir, arrastar isso para baixo. Só vou contar. Tudo bem. 1234567890. Então, é suficiente. Então, vou começar com mais uma vez, 01. Isso vai ser 109 porque é um momento em que você tem que ir para trás. Sete. Se fosse um temporizador normal, você poderia apenas fazer um simples 10123. Mas estamos indo para trás, está descendo de 10 para 0. Para os militares. Também. Silêncio. Então, até agora, tão bom. Arraste isso para baixo e continue. Algo assim, certo, legal. Então, temos algo como disfarce. Então, precisamos de uma cópia do seminário para copiar algo ao lado dele. E podemos selecionar esses dois e simplesmente copiar algo ao lado dele novamente. Mas temos que usar máscara porque se eu selecionar todos esses e colocá-los aqui, vamos ver o que acontece. Imagine um colocar esses dois. Aqui. Nós percebemos que teríamos lacuna aqui. abertura do plugue é duas. E selecione esses dois e o arrastei para ouvir também. Selecione tudo. Certifique-se de que está no centro, que é tão retângulo ligante. E certifique-se de clicar aqui. Para aqui. Ative um campo para que possamos ver que ele mudou o 1234 selecionado. Então, quatro deles são selecionados. Clique com o botão direito e masker, barato. Então, só vemos os esportes. Se estiver fora dele, clique duas vezes nele. Selecione este. Este retângulo. Vou para o Silicon este retângulo e arrastar isso um pouco para baixo. Então é isso. Agora, vamos entrar. Clique duas vezes. Pressione T, e vamos pressionar M. Vamos fazer esse tipo de branco e muito pequeno. Então isso vai ser um minuto aqui. E isso vai ser o segundo S. Tudo bem? Então, agora selecionamos tudo, até mesmo este. Esses dois também estão, estão dentro desse grupo. Então, vou ligar para esse cronômetro ou hora. Isso deve ser temporizador. Selecione este, clique com o botão direito do mouse e desagrupe-o por enquanto. Tudo bem, agora vamos agrupá-los e chamar esse cronômetro. E também temos tempo, então tempo e hora e selecione este e também turno selecione este. Então, ambos são selecionados. Clique no componente e também clique em novas propriedades. Portanto, este é o estado um, o estado padrão, e este é um estado para uma propriedade para descrever a cor disso mudará para este. E também essa sombra interior vai mudar essa também e derrubar a opacidade. E temos destaques vermelhos. E no estado 2, isso começará assim. Só vou selecionar isso e arrastar isso para baixo. Algo assim. Comece em dez minutos. Vamos ver o que está acontecendo. Estado padrão, um estado para sua animação, este vai para o protótipo. Clique duas vezes sobre isso. Ativado. A nação deve ser um estado. 2 em abandonado ou 6. O segundo está em suas saídas e está subindo. Vamos clicar do lado de fora. Selecione isso novamente. Vamos para o estado 2 que vamos ouvir ativado. Certifique-se de voltar ao padrão, state. A mesma coisa. Então, ativar esses padrões é que, basicamente, você está no padrão, o estado que é reproduzido. Ative-o. Então, dez minutos, vamos voltar. 0, ativado 10 minutos. Então é assim que ativamos isso. Portanto, por padrão, é 10 e também podemos alterá-lo manualmente. Tudo bem, Incrível, eu adoro. Agora. Temos que copiar isso. Você precisa copiar o estado para todos os lugares. Vamos excluir este e colá-lo aqui. Isso é 10. Então, ele começará a clicar duas vezes aqui. Então, vai ser 0. Isso vai ser nove. À medida que vemos este, clique nisso. Arraste isso para cima, ele arraste isso para cima. Tudo bem. Vou clicar nisso. Porque é o segundo deve ir rapidamente. Então, isso vai ser cinco. Vai ser talvez para copiar a coisa toda. Exclua, cole-o aqui. Isso deve ser dobrado. Estou clicando duas vezes em seis. Vamos voltar. Então, deve ser dois. Deve ser 29. Incrível. Se você ver que algo está aparecendo. Adoro apenas selecionar a máscara e arrastar esse outro bit. Copie o pacote inteiro. É isso. Temos mais dois, seis, isso vai ser 3. Cinco novamente, 50. Cópia. E é isso. Vamos fazer isso 0, 0, 0, 1, 0, 0. Basta clicar nele e arrastá-lo um pouco para baixo. Então, está nivelado. Então, vou clicar nele e colocá-lo aqui também. Aqui você apenas secando. Então isso significa que isso não está funcionando mais. Então, estamos mudando a cor para este. E também, provavelmente nesse estado, isso está voltando ao padrão. O estado. Não é necessário alterar a coluna. Você já criou o design e o componente acabou de reproduzi-lo, veja se ele funciona. Então, ele está ativado. Agora você joga. Vamos voltar. Ativado, gasto 10. Agora. Prato. É lindo e vai começar. Muito Sarah, desenho perfeito. Agora. Vamos voltar. Pare com isso. Perfeito. 14. Prototyping Comece para terminar: Agora vamos fazer todo o pacote juntos. Como um lado é ir para Protótipo. Se eu clicar nisso, então a animada que isso está dizendo é adicionar 1 segundo vai para o pai um, eu venho a esta página que ia acontecer vai ser vai voltar. Então, não deve voltar. Portanto, isso não é untap é a transição do tempo, empurre por si só, seis segundos. Vamos ver. O Asm é um pouco rápido. Um de cada vez. Talvez 8 segundos. Por favor. Queremos ver o bloqueio Qu de transição e pronto. Lindo. Estamos nesta página. As obras são incríveis. Então, quando a roupa dele, deixe-me clicar nisso. Ele deve ir para a outra página. Selecione este. Você está no estado dois. Se eu clicar neste protótipo, vamos para este. Transição, empurre para a esquerda, o que significa que este é empurrado para a direita. Vamos ver como ele funciona. Deixe-me trazer isso de volta ao estado padrão. Aqui vamos nós. Lavanderia e linda. Vamos voltar. Incrível. Podemos apenas fazer isso também. Volte para este. É como empurrar, certo? O que significa que, se você estiver neste, clique nisso. Incrível, lindo. No final, vamos animar isso e criar a mesma coisa para o modo brilhante. Você não quer Landry. Eu acredito que, para uma lavanderia tornar mais interessante que você esteja realmente selecionando esta, você pode mudar a Sombra Interior. Landry. Clique duas vezes. Você tem a frente, nós temos o banco. Então, se formos para trás, se formos para o estado 2, tosilato, citrino de volta Landry, a seta branca, é por isso que acabamos de colocar o nome nele. Vai ser muito interessante. Talvez algo arroxeado ou algo avermelhado. Arraste isso para cima. Mesmo o nome da lavanderia, talvez, talvez o título, até mesmo a inicial possa ser um pouco. Talvez essa cor, para mim, ruim, para a sombra interior, o branco. Deixe-me selecionar essa cor também e arrastá-la para baixo. Então, algo assim. Acredito que isso seja muito interessante porque tentamos torná-lo o mais interessante possível. Landry, bom. Portanto, é óbvio que selecionamos a roupa. Agora vamos para este modelo de placa de máquina de lavar roupa. Então, vamos voltar. Portanto, certifique-se de que a apresentação sempre antes de começar o primeiro clique no cronômetro, será em 10 minutos. Em seguida, clique no início. Secando o som e vamos voltar. Tudo bem, Awesome. Podemos voltar, ou se você clicar neste, o que vai acontecer? Nós clicamos neste. Este ainda vai voltar. Aqui. Nós empurramos, certo? É a mesma coisa que caras. Tudo bem, Nice. Agora, o que acontece com este? Se clicarmos nisso, o que vai acontecer? 15. Design o modo brilhante: Tudo bem, já temos o modo escuro. Vamos para o modo brilhante. Portanto, ele já está selecionado. Clique no campo e escolha essa cor. Superioramente, estes têm esses dois LAN o tempo todo arrastando-o por aqui. Então, já temos essas duas opções. Selecione isso. Então podemos mudar este porque, estes são metade do estágio de torção, certo? Mas este deve ser simples. Cozinha e este certo? A cozinha da lâmpada e o modo escuro. Vou pressionar Command ou Control G e chamar esta cozinha. Clique nele. Então, estamos em branco, sombra. Clique sobre isso. Então eu disse: E essas cores? Vamos preenchê-lo com a mesma cor ou desligar isso porque ele tem sombra interna. Só vou pegar a mesma cor e brincar com ela até ficar algo muito legal. Quero dizer, essa cor. Estou adicionando isso aos soldados porque vamos clicar nisso. E a mesma coisa. E o preto? A mesma coisa nisso. E sobre a sombra? Só vou adicionar este e arrastar isso para baixo. Que tal, eu só vou para Controlar clique em sombra branca. A sombra, deve ser realmente branca. Algo assim. Então, já temos este. Então, o BB inteligente e mantém todo o texto. Clique com o botão direito e desagrupe-o. Não quero digitar que leva novamente. Então, escola, significa que eu posso simplesmente selecionar isso, ir para iniciar ou clicar neste. Está esvaziando este também. Então este, e quando ele rapidamente, basta clicar neste, este, tapete direito. Vamos sair. Python, ruby, venha aqui, clique com o botão direito do mouse e envie para trás. Vai ser assim, incrível muito rapidamente. Desta vez, vou apenas copiar a roupa. Má conduta. Exclua este, selecione este. Segure Shift, arraste-o para o comando certo ou controle V. E vamos para a sombra interna neste. Então, essa é a maneira que podemos fazer rapidamente o resto. Então o resto disso vai ser seu pessoal da tarefa. Tudo bem, dado este e este, que cor você tem que adicionar a este para ser exatamente assim. Então, vou deixar assim. Vou apenas projetar este para vocês. Então, essas serão suas tarefas e até o resto. Quero dizer, quero que vocês criem a mesma coisa, mas o modo de cor branca, certo? Então envie-o para mim e vou ver o que vocês fizeram. E ele vai controlar o clique neste. Isso vai ser branco. E isso vai estar controlando de volta. Vamos escolher uma cor. Em uma sombra. Está muito escuro. E também, quem talvez adicionará essa cor a ela? Seria muito melhor. Eu só vou fazer os brancos em uma sombra para o branco. Arraste isso para cima. Lindo. Vamos para um desses, estado 1 e estado 2, certo? Então, digamos que 2 vai ser algo assim. Mas o estado padrão e isso, isso é suficiente, certo? Deveria estar em algo assim. Scooby padrão, o estado sobre isso vai para soltar sombra. Vamos ver, o que temos aqui? Ligado e desligado. O telhado deve ser opacidade e 0 ligado, ligado. Sombra solta. Só vou colocá-lo para baixo em algum lugar como este. Portanto, esse é o estado padrão e normal para clicar nele. O íon está desligado. E basta clicar em desligar, ativar isso. Então, vai ser para trás, mas a cor deve ser dessa cor. É isso. Vamos ver o que fizemos. Tudo bem, legal. Só vou remover todo o resto. Arraste isso para baixo. Declarado. Colocá-lo aqui significa e eles são girados. Coloque-o aqui no centro. E a mesma coisa aqui. É muito simples. Acredito que quero fazer isso algo assim. Então, o resto, vou animar isso também vocês possam ver o que vai acontecer. Se eu for ao protótipo e se eu clicar nisso, ele só virá para este. Animar automaticamente. Aqui está uma facilidade e 6 segundos. Portanto, certifique-se de que isso esteja vindo para a esquerda. Então essa é a cor que vocês precisam fazer, é ir para o design. E a cor deve ser descartada. O resto, cabe a você. Vamos ter o designer, o dono, os hábitos, tudo está aqui. Arraste a mesma coisa aqui e coloque na parte de trás, é isso. Então o resto será fácil para você, basta substituí-los por este e adicionar tudo para garantir que você siga o pedido. O que eu fiz para o modo escuro, basta fazê-lo para o modo brilhante. É isso. É um livro. Você pode clicar nisso. Então, vamos para civis portuários. Se eu clicar nisso novamente, a coisa toda vai voltar aqui. Vamos ver o que fizemos. Então, tudo está mudando. Portanto, certifique-se de que, no final, altere o nome disso. Então, nem tudo está se movendo. Então esta é a animação que vocês têm que fazer. Então, a troca e isso é muito simples. O resto. E será sua tarefa fazer medida, enviá-la para mim. E vou ver qual de vocês fez da melhor maneira. E vou mostrar aos caras do design. Então, também vai ser algo assim. Deixe-me dar uma olhada nisso. É o estado padrão, que é o padrão é state. O design. Deve ser algo parecido com este. Mas essas sombras são muito melhores neste raio de canto ou melhor. Portanto, certifique-se de que isso seja preto também. E o resto cabe apenas dar uma olhada neste. Vocês vão fazer a mesma coisa. Eu gosto dessa cor também. Então tente criar a mesma cor e continue. 16. Design de botões de inscrição: Neste momento, estou olhando para esta impressão digital aqui e podemos adicionar um botão de inscrição de login também. Vai ser muito simples. Clique em um desses, arraste-os para cá e basta colocar aqui e arrastá-lo para a direita. Certifique-se de que seu centro. Vou digitar aqui, fazer login. Certifique-se de que a cor seja azul. E é bom novamente. O centro. Agora, selecione-o, faça dele o abismo, segure Alt e torne-o um pouco menor e melhor. E arraste isso para cima em Alt e Shift, e arraste isso para baixo. Vai ser uma inscrição. Para a inscrição. Vou mudar isso para este. Vamos ver. Vai produzir aqui. Arraste este aqui, bem aqui. Então, vamos selecionar este, excluí-lo, selecioná-lo, arrastá-lo para a esquerda, clicar com o botão direito do mouse, enviá-lo para trás. Vai ser Inscrever-se. Faça-o branco. Certifique-se de selecionar este. Eu faço um clique de controle de transporte. Vá para isso e certifique-se de que isso seja linear. Vamos voltar por cima disso. E isso à esquerda, vamos colocar isso à direita. Vai ser algo assim. Este lado será muito brilhante e decidirá que será essa cor. Então, vamos ver. Assinar, inscrever-se. Incrível. Vamos selecionar os dois. Controle de Comando C. Saia do controle. Nós dissemos, esquecemos de fazer isso. E acho que está feito.