Animação do Adobe Xd - guia completo de ícones à interface do usuário

1. Apresentação do curso: animando você. Re design branco é importante porque ele mostra que você está pensando processo melhor do que apenas uma imagem estática mostrando seus clientes design animado vai ajudá-los a compreendê-lo melhor e acelerar o processo dramaticamente. Animar no Adobe X'd é simples porque o aplicativo é gratuito, fácil de aprender e tudo em 12 Oi lá. Meu nome é Alex e Discurso. Você aprendeu diferenças entre nações como dedo do pé animar ícones, fundos, formas, formas, controles deslizantes de texto, efeitos de Sharp e mais do que aplicar esse conhecimento para planejar, desenhar e criar quadros de arame em imagens, ícones e sombras. Para criar um experimento. Use as técnicas que você aprendeu para criar protótipos. Compartilhe o trabalho com seus clientes para obter feedback e, finalmente, como exportar seus ativos. Para desenvolvedores, este curso é para todos, quer você esteja apenas começando ou seja um profissional procurando algumas dicas extras no Adobe X'd . Espero que você esteja pronto para aprender o Adobe X'd em recursos de animação incríveis. Tem que oferecer, e te vejo na aula 2. Apresentação do curso: Ei aí. E bem-vindo ao curso. Meu nome é Alex, e neste curso, você vai aprender tudo o que precisa saber sobre animação dentro do Adobe X'd, bem como como como você pode compartilhar essa animação com seus clientes, bem como com seus seguidores de mídia social . Então o que vamos fazer neste curso é rodar 60 vídeos diferentes com 60 efeitos diferentes em oito categorias diferentes. Então vamos passar por ícones, fundos, textos de formulário, textos de formulário controles deslizantes de imagem, gráficos, efeitos e outros efeitos que você pode facilmente aplicar ao nosso trabalho de design. Agora, como tudo isto parece, deixe-me mostrar-lhe rapidamente. Então vamos passar por ícones e você vai obter um arquivo separado de ovos para cada uma dessas oito seções diferentes. Então, como você pode ver aqui, temos ícones diferentes, dos mais fáceis aos mais complexos. Então nós estamos indo para ir e passar para diferentes botões, então nós estamos indo para passar por botões básicos, bem como no entanto botões e assim um. Então vamos passar por formulários. Então, a partir de formulários básicos de inscrição, dois formulários de e-mail mais complexos e assim por diante estavam indo para passar por alguns efeitos de texto contra-efeitos básicos para alguns efeitos diferentes. Sobreposições e assim por diante iam passar por controles deslizantes de imagem, desde controles deslizantes básicos até os mais complexos. Com mais imagens dentro, vamos passar por diferentes gráficos e como eles se animam, bem como com alguns efeitos diferentes. Então, de carregadores, efeitos de queda do dedo todo o caminho para baixo efeitos de paralaxe. E finalmente, vamos passar por outra música. Grande, claro, diferentes controles deslizantes diferentes que barras, imagem, pop menus de cabeça e alguém. E finalmente, vamos passar por nosso projeto onde você está indo, receber um resumo de design. Vamos passar por alguns projetos. A exploração, bem como com alguns desenhos de arame, iam passar pelo nosso guia de estilo como você pode criar por que é importante e o que está contido dentro dos guias de estilo . Então vamos projetar armações de arame usando nossos quadros de papel direito como nossa referência. Então vamos passar para projetar em diferentes imagens, sombras, sombras, cores diferentes para fazer o design aparecer. Como os clientes gostam de dizer, vamos projetar diferentes menus, telas de perfil e assim por diante. E, finalmente, vamos passar para o protótipo onde nós estamos indo toe aplicar algumas animações para aqueles diferentes projetos foram criar vários estados fora das mesmas telas e adicionar efeitos diferentes que estão indo para fazer o nosso aplicativo projetado realmente interessante e realmente moderno olhar, bem como fazer o cliente facilmente entender o nosso design, Nossa intenção por trás de tudo o que é projetado no processo de design, bem como os desenvolvedores que estão indo toe facilmente entender que efeitos que eles precisam para aplicar mais tarde no frio? E como eles devem usar esses efeitos e como eles devem usar uma estrutura de arquivo de dívida que você criou para seus fins de desenvolvimento. Então eu estou realmente animado para compartilhar todas essas informações com você. Eu realmente espero vê-lo dentro do curso, e eu realmente espero que você vai aplicar tudo o que você aprendeu neste curso em seu próprio futuro. Você eu desenhei o trabalho, então eu vou te ver na aula 3. Por que animamos o animemos: principal razão estavam animando. Você é sábio para passar o ponto para o nosso espectador para que ele possa entender melhor o nosso conceito quando você está trabalhando com o cliente só porque você tem isso em sua cabeça? Como alguns elementos vão se mover e interagir uns com os outros não significa que o cliente vai entender esse design da mesma forma que você faz. É mais fácil para eles entender o que as animações de CD em vez de apenas imagem estática, porque é assim que o aplicativo eventualmente será parecido. Além disso, quando você está enviando os arquivos para desenvolvedores, é mais fácil para eles entender o que eles têm para animar citações quando eles têm as animações de referência, em vez de pensar qual animação iria bem em qual e qual interação é melhor para qual elemento. Tudo isso acelera o processo fora do design no Adobe X'd porque dentro de um up você é capaz de projetar compartilhamento de protótipos, obter feedback e erar rapidamente sem a necessidade de fundir APS externo ou algum outro software 4. Diferentes animações UI: maioria das vezes, quando você está animando seu você y você vai se deparar com diferentes animações. 1 é para os grandes elementos. Então, para os controles deslizantes, por exemplo, e se verificarmos este exemplo, você pode ver como isso se parece. Se eu clicar aqui quando ele carrega, você verá estes exemplos deste grande controle deslizante agradável. Você pode ver todos esses elementos diferentes e alguns elementos menores. Então, por exemplo, essa barra de passos, isso é o que é chamado de micro interação. Então você está apenas focando em alguma pequena parte fora do U Y toe geral animado e para mostrá-lo toe potenciais usuários como ele vai se parecer e toe mostrá-lo para diminuir. Para que eles possam entender melhor todos esses diferentes elementos. Porque se você acabou de mostrar-lhes isso como imagem estética, eles não saberão. Então eles podem fazer algumas perguntas. Por exemplo, isso eu posso mudar quando você tocar nele? Como isso vai parecer quando você clicar aqui, o que vai acontecer a seguir? Então, por exemplo, você terá que então criar Eu não sei para este talvez 56 10 imagens diferentes apenas para mostrar esse efeito. Portanto, é muito mais fácil criar animação desde o início e, em seguida, enviar essa animação para seus clientes. E eles podem então iterar nessa animação e dizer, por exemplo, que eu não gosto de como isso gira. Talvez possamos adicionar uma sombra assim que for clicada. Talvez você possa mudar o espaçamento um pouco e apenas dar-lhe um feedback adequado. Isso será muito melhor para você para que você possa entregar a eles um design melhor. Rebocá-los para que eles possam entender melhor seu conceito e seus desenhos e suas idéias, e finalmente, para desenvolvedores para arredondar tudo porque eles serão capazes de entender como todos esses diferentes elementos estão indo para interagir uns com os outros. E o que eles devem colocar dentro de seu casaco para imitar isso para que eles saibam qual tecnologia eles devem usar. Então, por exemplo, deve usar JavaScript deve usar alguma outra tecnologia apenas para que eles possam obter essa animação olhando para a direita, e eles podem melhor retratar esse conceito fora do seu código dentro fora do seu código. É por isso que estamos animando Ru Y. E é por isso que existem algumas diferentes destas animações. Mas a maioria das vezes. Você trabalhará com essas interações menores e mostrará como as diferentes telas estão fazendo a transição entre si. Não importa se é um aplicativo móvel. Se for um site, se for, ah, ah, algum tipo de design de painel ou algo assim, você sempre trabalhará em algumas dessas animações menores e essas micro interações. Então você vai mostrar esta marca de seleção e esta vontade, odores e garrafas, que estão mudando de cores, esses elementos voando de todas as decisões e assim por diante. Então é isso que você estará fazendo para a maioria fora do tempo. E é por isso que os ovos são ótimos, porque em apenas algumas nossas portas, você pode mostrar todos esses conceitos bem, e então você pode enviá-los para desenvolvedores, e eles podem ver dentro dos designs de volta, que Vamos cobrir um pouco mais tarde. Com o seu o que eles devem estar usando? Eles podem exportar CSS imediatamente. Eles também têm alguns plugins, e eles podem exportar HTML se isso é algo que eles precisam e eles podem começar imediatamente com seu trabalho. E isso é a coisa mais importante aqui. Você está economizando tempo para si mesmo porque você terá que fazer, Ah, menos interações como essa. Você está economizando tempo para os clientes porque eles vão entender mais rápido seu conceito que você está tentando passar. E é mais fácil para os desenvolvedores também porque eles sabem de uma vez o que eles devem estar tentando alcançar dentro da cotação. Quais tecnologias devem usar e como devem implementar esse design no frio ? Porque agora eles sabem como todos esses diferentes elementos vão interagir uns com os outros. 5. Os recursos de prototipagem do Adobe Xd: Recursos do Adobe Xd.: neste vídeo, eu queria cobrir ovos os recursos de prototipagem, mas não em detalhes. É por isso que temos o resto do curso. Eu só queria mostrar como tudo parece, onde tudo está localizado e o que você pode esperar desses recursos de prototipagem. Então aqui no topo, nós projetamos nessa parte que você está projetando seu ey. Você está projetando todos os elementos de suas telas, colocando imagens, sombras e assim por diante. E quando você terminar com esse design e quiser adicionar algum movimento a ele e algumas animações, então você está clicando nesta guia de prototipagem e aqui à direita, você tem algumas opções. Mas primeiro você deseja selecionar o que os usuários clicarão, o que acontecerá e depois de cada vez e assim por diante. Então, se eu clicar neste, você tem essa alça azul e quando você move essa alça azul de tela para tela, isso vai aparecer e interação vai acontecer. Então aqui você pode selecionar seus gatilhos. Então, o que será o usuário devido ao gatilho e esse comportamento em seguida você tem ação. Então, qual ação vai acontecer uma vez que este gatilho tenha sido ativado. Você preservou a posição de rolagem. Se você quiser preservar a posição de rolagem da tela para a próxima tela, você tem o destino. Então imagine que você tem 200 ou 300 desses diferentes nossos portos. Então você pode selecionar aqui facilmente de quais são também, que essa interação vai acontecer. Temos a animação ou aqui, e você pode escolher entre a variedade de animações diferentes que temos flexibilização. Então, como o efeito vai acontecer entre estes dois são portas está indo para o pé. A facilidade vai acontecer imediatamente. Vai desvanecer-se ou desvanecer-se e algo assim. E finalmente temos a duração. Então, quanto tempo esse efeito vai durar? E, finalmente, temos posição fixa ao rolar. Então temos posições fixas, rastejando, por exemplo, para alguns elementos para os cabeçalhos, para os menus de garrafas, algo assim. Imagine que você tem o site bem aqui, e você tem o menu principal em cima, que vai ficar fixo. Então você clica bem aqui. E esse elemento vai ficar fixo enquanto você rola o resto do seu U y. Então vamos rapidamente percorrer alguns deles. Temos torneira. Então, quando o usuário toca, seja com a boca ou com o dedo, é assim, e é aí que começa a interação. Nós temos o arrasto, então basicamente a mesma coisa, mas você tem que clicar em segurar e, em seguida, arrastar ou com a boca ou o dedo. Nós temos chaves e jogo ruim, que é basicamente, se você está projetando e prototipando para jogos, você pode incluir o controlador X box, por exemplo, ou controlador PS, e, em seguida, usando esses você pode escolher quais interações estão acontecendo apenas quais comandos. Assim, você pode incluir esses comandos usando as teclas do portão e os pads de jogos. E finalmente temos a voz. Então, isso é, por exemplo, quando você está por encaixe para um Alexa muçulmano, ou para o Google ou algo assim, e você está usando sua voz para emitir comandos diferentes para algumas interações. Dedo acontecem. Em seguida, temos ação, então temos transição, apenas uma transição regular. Nós temos auto animate, que é ovos, esses recursos incríveis, e eles estavam trabalhando muito nesse recurso, e eles estão usando inteligência artificial e aprendizado de máquina para criar essas interações porque eles estão tentando entender como alguns elementos vão interagir uns com os outros e principais. Um recurso importante para esse recurso de animação automática é ter suas camadas nomeadas corretamente e ter as mesmas camadas basicamente em ambas as portas. Isso é quando Exit está tentando olhar a diferença entre cada uma das nossas portas e quais camadas foram alteradas. Então eles mudaram de tamanho? Eles mudaram de cor em um pastoso e assim por diante? E ele vai tentar dedo do pé também animar. Basicamente, essas mudanças entre os nossos portos. Temos a sobreposição. Tudo um é usado principalmente em você. Eu especialmente em Adobe X'd para os menus. Então imagine, tenha aquele menu lateral ou menu superior ou algo assim, ou você quer sobrepor um emergente ou de algo que você pode usar esse recurso e apenas incluído, e ele vai sobrepor por cima. Estes são portos. Temos reprodução de fala. Então você pode, por exemplo, quando você está usando voz aqui, você tem essa reprodução de fala e ele vai reproduzir esse discurso. Eso, por exemplo. Você pode fazer uma pergunta. Você pode dar uma resposta, e quando você pergunta, é uma pergunta. Dar-te-á essa resposta. E isso é útil. Van que você está projetando como um conjunto para Amazon Alexa, por exemplo. E você disse “Ok, Alexa, como está o tempo hoje? E você dá aquela reprodução de fala e ele vai mostrar e dizer a você a reprodução do discurso da dívida . E, finalmente, temos aeroporto anterior, que está indo apenas para a transição para o anterior nosso destino portuário. Você pode escolher qual destino e está indo dedo do pé ir para. E como eu disse, imagine, tem 100 ou 200 telas. Em seguida, ele vai fazer a transição dos destinos que você escolher aqui temos animações. Então temos apenas algumas animações básicas que dissolvemos, que é basicamente um desvanecimento ou desvanecimento. Temos deslizamento para a esquerda, direita, para cima e para baixo. Temos empurrado, esquerda, direita, direita, empurrar para cima e empurrado para baixo e não temos nenhum. Então você pode até mesmo escolher não se você não quer quaisquer transições entre essas telas e ele vai apenas mudar imediatamente de uma tela para a próxima flexibilização que temos é em fora aliviação e está fora snap, acabar e saltar. E todos estes são um pouco diferentes. Então ele está fora vontade, obviamente está fora da animação é dentro vai fazer o oposto. Fácil. Agora vai servir. O Boat Snap fará o que diz. Acabar é basicamente vai ser um pouco. Algum tipo de combinação entre Snap e o salto e os limites é basicamente quase assim. Ele vai saltar no lugar quando você clicar que finalmente temos a duração, o que é realmente importante, e você pode alterar esses valores. Então, por exemplo, eu posso digitar três percentres, e vai durar por três segundos. E é aí que você pode realmente ajustar como todos esses elementos diferentes se parecem, obviamente, se você quer a transição, Toby mais curta, você vai escolher afiado o tempo a partir daqui. Se você queria ser mais longo e mais do que um segundo, você pode escolher, por exemplo, quatro. E vai durar quatro segundos. Finalmente, quando você quer dedo adicionado algo, qualquer um para estreá-lo. Você vai usar esta visualização da área de trabalho e esta janela vai aparecer, e você pode ver claramente como suas transições vão se parecer dentro muitas vezes daquela tela. Então, em um clique aqui, você pode mudar. Você pode ver alterado para este porto de arte. Mas quando eu clico aqui e trago essa seta de volta, você pode ver que ela está preservando tudo o mesmo em direções, em todos os mesmos elementos que escolhemos ir daqui até. Aqui está apenas usando as mesmas interações para voltar para esta tela anterior. E é por isso que a Adobe é ótima porque ela se lembra de todos os diferentes elementos que você escolheu aqui. E isso é especialmente importante se você tem, por exemplo, 100 diferentes nossas pastas e você tem poucas interações, então você pode imaginar que o usuário pode clicar nesta imagem. Eles podem clicar neste título. Eles podem clicar neste texto. Talvez haja um fundo bem aqui. Talvez haja um menu que eu chamo para que você não possa se lembrar de todas essas transições diferentes . Você incluiu 50 telas em, e você terá que voltar e copiá-los e colá-los. Mas se você estiver usando as mesmas interações, você pode simplesmente arrastar essa pequena alça azul para a próxima tela, e ela manterá as mesmas interações que você escolheu para este e com cada atualização e eles estão tentando lançar mensalmente atualizações, e até agora eles fizeram um trabalho fantástico com essas atualizações. cada atualização, Ecstasy está ficando mais inteligente e inteligente. Então, em alguns anos, será simplesmente incrível o que ele pode fazer e o que ele pode trazer para a mesa quando se trata de você. Eu projetei uma nova animações, então eu realmente gosto dele para ele porque dentro deste para cima você pode fazer projeto protótipo compartilhar . Você pode colaborar com seu cliente e seus desenvolvedores. Você pode enviar desenhos, pacotes que você pode enviar protótipos, receber comentários, empacotar tudo, exportar tudo bem salvar tudo é vídeos. Então eles realmente pensaram em tudo. E eles realmente criaram este pequeno sistema de igualdade para nós. Toe realmente desfrutar do nosso processo de design porque torna muito mais fácil e, como se costuma dizer, projetado à velocidade do pensamento. 6. Ícone 1: neste vídeo, vamos criar esta marca de seleção, que você pode usar nos botões de confirmação do APS do seu site para informar seus usuários que eles concluíram com sucesso a tarefa que você pediu para eles. Então vamos começar. Então vamos começar com uma arte de quatro ou 500 por 500. E se você não sabe como criá-lo, você pode ir para casa. E aqui no tamanho personalizado, você pode digitar 500 com 500 pressionando, entrar ou retornar, e você vai começar a ouvir que vamos usar o mental. Então clique nele. Clique aqui, então aqui ele escapou para escapar desta eleição e clique aqui na rodada mantida porque queremos que nossas bordas para ser em torno, aumentar o tamanho do curso para 10 por cento e então eu vou simplesmente passar o mouse sobre ele aqui e clique em algum lugar por aqui dedo do pé Adicionar mais um ponto e eu vou toe klik Em algum lugar fora selecionado. Acerte este do meio, este do meio para colocá-lo abaixo no meio, clique e clique duas vezes para que você possa entrar no ar neste modo de edição. Clique neste e simplesmente mova-o para aqui. Em seguida, clique neste e movê-lo para alguns por aqui para que você possa criar esta seleção Marcar lugares selecionados no meio assim. E agora o que você vai fazer é nós vamos fazer algumas cópias. Então, diminua um pouco Hit controle D D e em D mais uma vez. Agora vamos usar essas cópias para animar tudo. Então vamos começar do “nenhum ponto “neste aqui. Eu vou dobrar, clique, clique sobre este, clique sobre este, arrastá-lo todo o caminho até aqui até que eles se encontram no centro bem aqui e, em seguida, clique sobre este e movê-lo até que você obter este círculo como assim e eu vou abaixar a sua data-base reduzida para zero. Agora, neste segundo estado, queremos estendê-lo até aqui. Mas não para ouvir. Então, DoubleClick mais uma vez, e então simplesmente mova este dedo aqui até você obter este círculo assim. E no 3º 1 está indo para a extensão do pé. E, finalmente, no último, vou clicar nele e tocar 02 vezes ou você pode simplesmente usar o controle deslizante. Ele vai sobre o um pastoso baixo para zero. E agora vamos animar tudo. Então clique aqui, use o protótipo, então simplesmente arraste este dedo do pé de seta aqui. Tempo usado também anima, e nós vamos usar está fora em um presente. Clique neste dragões, e em vez de facilidade para fora, vamos usar Snap porque queríamos encaixar de disposição em disposição e finalmente, clique aqui, em seguida, arraste esta seta para este último. E em vez de snap, vamos usar é fora 0,3 segundos porque queríamos desaparecer para zero. E, finalmente, você pode arrastar esta maneira antiga para aqui e usar as mesmas configurações agora para visualizá-la. Clique neste 1º 1 clique play e esta marca de seleção agradável está mostrando, por isso é realmente fácil criá-lo. Como você pode ver, é apenas uma única linha, mas brincar com esses pontos e reposicionar para obter essa forma e, em seguida, simplesmente animado. E este é o resultado que você vai obter, então eu vou vê-lo no próximo vídeo 7. Ícone 2: neste vídeo, vou mostrar-lhe como você pode animar este ícone de coração. Então, um novo toque sobre ele está indo dedo do pé aparecer como você tem gostado de algo. Então isso está se inspirando no Instagram, obviamente. Então, quando você clica esses raios de luz tipo fora saltam para fora deste coração para indicar que ele é luz. E eu também vou mostrar neste vídeo como você pode mudar a cor. Então, é ótimo. Mas quando você clicar nele, ele ficará vermelho. Então, vamos começar. Então eu tenho este ícone de coração que eu vou clicar no Nosso porto mais uma vez é 500 por 500. Vou clicar aqui mesmo no Grande e vou escolher o quadrado. Se você tiver um layout como esse, basta clicar aqui e mudá-lo de volta para quadrado. Agora o que vou fazer é usar o lápis. Eu vou ampliar um pouco, clique aqui e talvez alguns por aqui hit escape, clique aqui para arredondar a tampa e talvez aumentar devido a 10 percenter e vamos reposicioná-lo um pouco melhor, então eu vou para tê-lo Talvez isso seja bom. Então nós vamos ter esses dois quadrados para o topo e talvez ter um quadrado vazio, assim talvez assim porque o coração ocupa bem aqui. Aperte controle o clique duplicado aqui para girá-lo e posicioná-lo para aqui. Então, mais uma vez, queremos ter um. Bem, porque o ícone é um pouco mais branco. Vai estar algures por aqui. Não, selecione. Ambos tinham a escritura de controle duplicada mais uma vez, e então clique aqui para virá-los verticalmente. Segure a tecla Shift e Arrow moveu-o para baixo. E com a tecla Shift selecionada até que eles se encaixem assim, você saberá que você tem exatamente o mesmo espaçamento entre o antigo. Então eu vou apertar o controle D e controlar o mais uma vez. E o que vamos fazer agora é ir dedo do pé, selecionar todos eles e clicar um por um para remover e esses quadrados porque não precisamos mais dele. Agora, neste 1º 1 nós vamos fazer duplo clique nesta linha, em seguida, clique neste ponto e movê-lo até que ele se encontre bem aqui. Clique aqui, faça o mesmo. Então clique aqui e mova para cima em direção ao coração. Como assim. E eu vou clicar no primeiro turno inteiro. Clique no último. Eles vão clicar no meu zero, ou você pode baixar o seu Bay City aqui. Agora o que vamos fazer neste 2º 1 é clicar no coração, manter a tecla Shift, manter a tecla Shift, Ault e Left Click para que você possa ampliá-lo. Então, em algum lugar por aqui e, finalmente, na nossa 3ª 1, estavam indo para o pé. Faça-os estender o pé aqui. Então eu vou clicar aqui e fazer basicamente o oposto. Tão normal com nesta direção até que eles se encontram no círculo assim e finalmente fazer o mesmo para este último. Como assim. Em seguida, clique no primeiro turno do buraco, clique no último e baixou o básico para zero. Agora temos que animá-lo tão rápido. 1º 1 e vou clicar no meu coração porque queremos que as pessoas toquem neste coração. Mude-o para o protótipo a partir do design, arraste-o para aqui. Vamos escolher Step Auto. Animate é em 0,2 segundos, e então nós vamos clicar neste. Arraste o dedo do pé aqui, e queremos usar o tempo em vez de toque. Então, para este 1º 1 você usou uma torneira. Mas para este 2º 1 vamos usar o tempo ou o dedo do pé animado. E talvez ele tenha saído com uma escolha melhor. Então vamos ver o que descobrimos. Você pode clicar neste 1º 1 clique jogar, e quando você toca, você pode ver como ele se parece. Então, se você acha que é demais, você pode fazer o mesmo fora do curso. Mas vamos passar a sagacidade dessas linhas para que você possa selecioná-lo a partir daqui e simplesmente sobre eles até aqui. Então talvez cinco por cento e fazer o mesmo para este, que você possa selecionar todos eles. Clique cinco aqui e você pode ver que nós baixá-los para baixo e finalmente fazer o mesmo para o último . Então selecione todos eles Q cinco, e o que vamos fazer neste exemplo final é que queremos escolher o coração tão final nossa porta. Queremos arrastá-lo para começar Escolha o tempo está fora 0,2 segundos porque você quer que ele circule volta para este primeiro 1 então clique quando este um clique jogar e quando você tocar nele Isto é como ele parece agora E é círculos de volta para o primeiro 1 Agora finalmente, Deixe-me mostrar-lhe como você pode mudar as cores. Então, quando as pessoas clicam no coração, ele se tornará um vermelho. E você pode fazer isso simplesmente mudando de volta para a zona. Escolhendo seu coração, clique aqui. Escolha a cor certa, quais são os que queremos. Talvez este escolha este último clique aqui e, em seguida, bem aqui dedo do pé usar a mesma cor saltar de volta para o protótipo e quando você clicar, ele vai ficar vermelho E porque ele volta para este 1º 1 Como você pode ver, ele passou de Vermelho de volta para grande. E também queremos mudar a cor do raio. Então vamos selecioná-los aqui e clicar aqui para chamar um seletor e fazer o mesmo para todos eles. Então, assim e você pode saber círculo de volta para o protótipo e ver como ele se parece. Então, como você pode ver, agora é vermelho também. E vai de grande para vermelho e volta para cinza novamente. Então é isso para este. E eu te vejo no próximo vídeo 8. Ícone 3: neste vídeo, nós vamos criar este ícone de ponto pulsante, que pode ser usado para, por exemplo, quando algo s streaming ou alguém entrou ao vivo e você pode usar este ícone correspondente à cor. Assim, por exemplo, ele pode ser lido para indicar que a pessoa é vida ou que o streaming está indo ao vivo. Então é isso que você vai criar neste vídeo. Então vamos começar. Então eu estou usando nosso porto ou 500 por 500. Igual a todos os outros vídeos. Vou escolher o círculo. Círculo grande e agoniado, talvez usado 100 por 100. Pressione enter posicionado no meio e no meio. Clique aqui, Controle. Consulte para copiar esta cor. Clique aqui. Controle V pressione enter, e eu vou remover a borda deste círculo. Em seguida, eu vou selecioná-lo. Aperte o controle D e eu vou fazer uma cópia. Vou dar o dedo do pé. Amplie um pouco. Incluir borda. Remova o filme e para a fronteira. Talvez eu possa incluir 60 fora da espessura e, em seguida, simplesmente movê-lo abaixo do nosso primeiro círculo. Eu vou bater um turno velho e clique esquerdo para que eu possa posicioná-lo no centro e sobre o tamanho, assim e porque ele está na parte de trás, realmente não importa porque ele está escondido por este primeiro círculo. Eu vou selecionar o aeroporto, aperte o controle de duplicado e, em seguida, selecione Eclipse dois e aperte o turno velho e clique esquerdo do dedo do pé Aumentá-lo assim que alguns por aqui e reduzido tamanho borda dedo um pressione enter. E como você pode ver, é assim que parece. E eu também vou baixar o colado deles para baixo para zero, e é basicamente isso. Agora está animado. Clique neste arrastar um protótipo hit, e vamos usar o tempo. Transição vai ser auto animar está fora, e a duração vai ser um segundo. E vamos usar o atraso. Tempo livre um segundo tão bem, porque vai nos dar um pouco de tempo entre esses dois. Agora vamos clicar no segundo 1 arrastá-lo todo o caminho de volta, e vamos usar o tempo mais uma vez. Mas agora não removemos esse atraso e temos que ser um zero. Mas você tem que digitar 0,0. Pressione enter para que ele saiba que você quer ser zero. Clique aqui, faça o mesmo. Então 0.0 pressione enter, então ele vai ser zero. Mas em vez de ação ou para animar, você vai escolher a transição e vai ser dissolvido como por clique habitual aqui , as crianças brincam. E como você pode ver, estamos tendo essaanimação agradável e pulsante, animação agradável e pulsante, e você vai usá-la como um conjunto para streaming para quando alguém entrar ao vivo. Ou se você quiser chamar a atenção de seus usuários, dedo do pé uma coisa particular em seu você eu trabalho. Se você acha que este círculo de fundo sai um pouco branco, você pode reduzi-lo reduzindo o tamanho aqui neste segundo nosso porto. Mas basicamente depende de você também. Você pode alterar as cores, então, se você quiser ser lido, você pode mudar a cor deste círculo, bem como o círculo de fundo. Faça o mesmo neste, e é basicamente isso para este vídeo. Vejo-te no próximo. 9. Ícone 4: neste vídeo, vamos criar um ícone de menu de hambúrguer simples, então quando você clicar nele, ele se tornará uma linha e, em seguida, mudar o dedo X para que você possa fechá-lo. Então, quando você clica em X, ele vai mudar de volta, dedo do pé uma linha e, em seguida, mudar para o menu mais uma vez. Então, aqui vamos nós. Mais uma vez, você pode clicar nele. Torna-se X clique no X, e torna-se ícone de menu mais uma vez. Então vamos começar. Então vamos começar criando nossa linha. Vou usar o mental mais uma vez. Clique aqui. Clique aqui no turno inteiro. Ele escapou para se safar. Clique aqui digitando 20. Então essa é a nossa multidão irritada aqui para que tenhamos em torno de Gap. Posicione-o no meio. Então selecionado clique aqui, em seguida, bem aqui e nós vamos fazer duplicatas dele. Então este vai ser o número dois Hit control D Hold shift uma seta para cima. 123456 Algo assim. Em seguida, clique em 2º 1 mais uma vez, aperte Controle D e vai ser o nosso 3º 1 E este vai ser o nosso 1º 1 Então clique duas vezes no centro de imprensa do nome. E na 3ª 1 mantenha o Shift e o Arrow para baixo. 123456 para posicioná-lo, Toby. Basicamente o mesmo que o primeiro turno inteiro. Selecione todos eles. Aperte o controle G para agrupá-los. Clique aqui, digitando o apresentador do menu. E então clique aqui e logo aqui para posicioná-los no meio. Clique aqui. Aperte o controle de para duplicar toda a nossa porta. E agora o que você vai fazer é que nós vamos movê-los para baixo para o centro para que você possa apertar controle e clicar neste primeiro 1 para clicar nele. Mantenha a tecla Shift pressionada até que ela se encaixe assim. Faça o mesmo para este 3º 1 Mantenha a tecla shift pressionada e com o mouse, mova-a para aqui. E então, finalmente, o que precisamos fazer é clicar aqui, Hit Control D e clique aqui neste 2º 1 vamos reduzir Dupay City 20 E neste 1º 1 vamos girá-lo para que você possa clicar aqui mesmo nesses graus. Digite 1 35 assim, clique em um perturbado e clique aqui digitando 45 assim e agora temos nosso X. Então o que precisamos fazer agora é duplicar este controle D e finalmente duplicar este controle de um porque nós vamos da linha de reboque do menu, Toe X, volta a linha e depois volta a esta mais uma vez. Então vamos começar a animá-los. Vou acertar o controle zero. Para encaixar no lugar como este mudou o protótipo clique neste menu, e é por isso que agrupamos para que possamos clicar nele, arrastou este identificador para ouvir que você está indo para você passo também animar. E em vez de snap, vamos usar está dentro e talvez 0,4 segundos. Agora clique neste nosso porto arrastado para aqui, e vamos usar o tempo ou para animar. E em vez de sair. Vamos usar o snap agora de volta. Vamos usar este mesmo, então vamos usar passo ou animar está dentro. Então clique no X arrastá-lo dedo do pé aqui para tocar ou para animar em vez de snapper. Quando usar está dentro e usar ponto zero para todos os lugares apenas para que possamos manter as coisas simples e, finalmente, fazer o mesmo para aqui. Então clique aqui para ver o que fizemos. Então fizemos tempo ou para animar e estalar. Então clique aqui para selecionar este. Arrastá-lo para que tenhamos tempo ou para animar e temos snap assim E, finalmente, para voltar para aqui simplesmente arrastou a alça para este 1º 1 Vamos usar o tempo em vez de snap. Nós vamos usar nenhum porque nós estamos indo deste ícone de volta para este basicamente mesmo ícone . E nós vamos baixar isso para 0,2. Então estão esperando. O tempo está mais baixo. Então agora vamos pré-visualizar. Eu vou clicar aqui, e você pode tocar no seu ícone e você pode ver como ele se parece. Clique aqui para alterá-lo novamente e clique aqui para fazer o mesmo. Basicamente, mais uma vez. Agora, uma coisa que perdemos é muito voltar ao design. Vamos ficar bem aqui. Selecione o número dois e toda a obesidade para baixo para zero e para o mesmo, Este. Então no número para baixá-lo basicamente para baixo, e agora ele é pré-visualizá-lo assim e agora você não pode vê-lo quando ele desaparece, como você pode ver, Então é basicamente isso. Nós terminamos de criar nosso ícone de menu e você pode ver que é coisa muito fácil e muito simples de fazer, e eu vou vê-lo no próximo vídeo. 10. Ícone 5: neste vídeo. Queremos criar este ícone de download para que você possa ver quando você clicar nele. Esta flecha vai descer o dedo do pé. Indique que o download foi iniciado e você pode incorporá-lo em seus botões, em seu site ou em seu aplicativo. Então, quando as pessoas estão baixando, elas podem ter certeza de que o NAL só começou. Você também pode alterar a cor. Então, quando eles clicam nele e download começa, este próximo ícone pode mudar a cor, bem como esta linha de fundo. Então, vamos começar. Então, mais uma vez, tenho o nosso porto a 500 por 500. E eu também tenho este ícone de seta e vamos criar a linha na parte inferior. Saw Ali foi o clique mental em algum lugar por aqui e segure o turno, clique em algum lugar por aqui, acerte a fuga mais uma vez acerte a tampa redonda e acerte 15 como, então agora vamos ampliar um pouco mais perto. Selecione ambos como então acerte no círculo do meio, posicione-os no meio e posicione a seta aqui até que ela se encontre com a linha superior desta linha de fundo, basicamente assim e o que vamos fazer agora é arrastado A dele para baixo. Chamá-lo de linha assim e nós estamos indo para posicioná-los para pressionar o controle G para agrupá-los, posicioná-los no centro como tão direito Clique no grupo e você está indo para duplicar nossa seta. Então aperte o Control de em posição. Está algures por aqui. É bom. Agora agrupe as setas bater o controle G pequeno clique aqui. Digite setas de feijão assim E nós vamos usar a ferramenta de retângulo. E você vai desenhar um retângulo como este e arruinar para cobrir nossa seta de baixo e ir até a borda. Então você o consome muito mais perto para encobrir bem. Então, assim e foi para remover a fronteira e você vai ligar para esta mesquita e ver como estamos . Acho que precisamos movê-lo um pouco para cima para que você possa pressionar sua tecla de seta superior quando seu teclado e você pode se mover neste carrinho de mão inferior apenas um pixel acima assim. tecla de seta superior quando seu teclado e você pode se mover neste carrinho de mão inferior apenas um pixel acima E agora o que vamos fazer é selecionar a mesquita, segurar seletor de deslocamento, segurar seletor de deslocamento pasta de setas e clique direito e mesquita de judeus com forma. Ou você pode usar o controle de turno em ou a glândula de deslocamento. E se você está em um Mac para mascará-lo e basicamente você tem essa forma. Agora clique aqui, acerte, controlou o para duplicá-lo. E agora o que precisamos fazer é saltar máscara insider, clique em nossas setas. Mantenha a tecla shift pressionada, segure o mouse esquerdo, clique e posicione este grupo no lugar. E você também pode usar suas flechas para algum lugar por aqui para que possamos vê-lo. E quando você clica lá fora, isso é o que você vai conseguir. Então é basicamente isso para a parte de design. Vamos agora protótipo e então clique aqui. Clique no protótipo e o que vamos fazer é basicamente tocar aqui para que você possa arrastar a alça para fora. O todo está entediado. Então fomos escolher um toque ou animar. A flexibilização vai ser fácil para fora e duração fora de um segundo e agora no 2º 1 arrastá-lo dedo do pé aqui em vez de tapper quando usar o tempo. Nota fácil e aqui nós vamos digitar em 0.0 segundos e ele vai ser é dentro do mesmo. E certifique-se de que você tem o atraso fora de zero, e você deve tê-lo por padrão. Clique aqui, Hit, jogue. E quando você clica em algum lugar por aqui, isso é o que acontece. E então ele vai fazer a transição deste 2º 1 de volta para o 1º 1 Então, quando você clicar nele, ele vai parecer basicamente exatamente o mesmo porque ele tem o atraso desligado. Zero segundos do 2º 1 para o 1º 1 vai mudar para o 1º 1 imediatamente para que você possa continuar clicando, e ele vai continuar mostrando isso a você. E finalmente, vou mostrar-lhe o segundo truque, que é? Foi para colorir basicamente esta segunda seta, que é esta para uma cor diferente. Então, por exemplo, é apenas azul ou algo assim. Talvez eu não saiba algo assim, talvez um pouco mais leve, assim, e então quando você clica aqui, aperte a visualização. Como pode ver, a boneca que devia já começou. Então, se você quiser, você pode criar outra nossa porta, e, em seguida, certifique-se de que o azul permanece azul no 2º 1 e, em seguida, mudar de volta para o 1º 1 Se você quiser, mas eu acho que não é necessário fazer isso em tudo porque As pessoas vão saber o que você fez porque você mostrou a eles que esta segunda flecha está se movendo para baixo. Então, basicamente, quando eles clicarem nele e verem o segundo, eles saberão instantaneamente que o dólar começou. Então é isso para este vídeo, e eu vou te ver no próximo. 11. Ícone 6: neste vídeo, vamos criar este ícone de notificação Bell, então quando você clicar nele vai tocar duas vezes, círculo direito vai aparecer e um número fora de notificação vai saltar para dentro do lado. Então deixe-me mostrar-lhe rapidamente mais uma vez. Então, obviamente, isso não vai acontecer. Este gatilho de etapa terá um gatilho de tempo quando você implementou em seu aplicativo ou um site, porque ele será exibido após certo tempo que o usuário tem notificações. Mas eu só queria mostrar quando ele é implementado na torneira, porque é mais fácil mostrar isso no vídeo. Então, mais uma vez, quando você pisar nele vai tocar duas vezes, este círculo vermelho vai aparecer e o número três vai entrar de lado. Então vamos começar. Então aqui eu tenho este ícone de notificação de sino, e eu vou criar um círculo rápido para que você possa ver que temos a parte inferior e superior. Então nós vamos incluir um círculo em apenas indo para manter minha tecla shift e onde ele diz sentir que eu estou indo para clicar ali e bater com base, e eu vou usar esta cor e b cinco f 67 pressione enter e, em seguida, removeu a borda porque eu Não preciso dele, realmente. E como podem ver, é uma cor vermelha muito bonita. Eles vão aumentar isso para 50 torná-lo em torno agradável e limpo, e eu vou posicioná-lo um pouco melhor dedo do pé aqui até que ele se encontre com o toque certo fora do feitiço e até que ele se encontre com a borda superior direita fora deste cinto também. Passo bem aqui. Chame-lhe Circle assim e usa-me ferramenta de texto. Clique em algum lugar dentro dos três primeiros, por exemplo, porque queremos usar os números fora da notificação, você pode usar qualquer número que quiser. Eu vou usar Open Sense 24 posicioná-lo no meio assim e assim Então é uma posição corretamente, e você também pode clicar no número de seu turno inteiro. Clique no círculo para selecionar os dois. Clique aqui do que aqui, e ele vai posicioná-los no centro tanto horizontal quanto verticalmente. Então eu vou incluir esses dois dentro do nosso sino, assim e então a posição é Bell como So Então para estar perfeitamente no meio. Como está, estou usando Art Board 500 por 500. Igual a todos os outros vídeos. Então agora podemos começar com a nossa animação. Então, as primeiras coisas primeiro. Vamos fazer algumas mudanças. Então eu estou indo dedo do pé, saltar para dentro e clicar no número. Segure o turno e posicione-o por aqui. Portanto, não é visível duplo toque para fazê-la obedecer a cidade a zero porque essa é a nossa primeira etapa para o círculo. Só quero usar um com um, por isso é extremamente pequeno. Está algures por aqui, e podes deixá-la aqui se quiseres, ou podes posicionar-te. Está algures por aqui. Se você quiser parecer que eles vêm do centro, você pode pisar zero vezes duas vezes e baixar a Cidade Obedeça 20 e basicamente esse é o nosso primeiro estágio. Então o que queremos fazer a seguir é saltar para dentro e depois agrupar o sino por si só. Então controle G com ambas as camadas selecionadas e cinto de qualidade porque queremos torná-lo separado desses dois itens, e basicamente esse é o nosso primeiro estágio feito Hit control D sobre este, nossa porta e ele iria controlar o mais uma vez. O que você quer fazer para este 1º 1 é selecionar o sino assim e bater 10 bem aqui onde diz rotação pressione enter Em seguida, clique no 2º 1 no cinto mais uma vez bater menos 10 porque queríamos ir para a outra direção. Em seguida, duplicar este controle de um hit no e bater no sino mais uma vez e digite em zero aqui porque nós queríamos ir para o primeiro estágio. Agora, finalmente, o que queremos é controlar d mais uma vez para duplicá-lo mais uma vez. E agora queremos que o círculo apareça. Então eu vou saltar para dentro, clicar no nosso círculo, aumentar Dubay City dedo 100 mudar de volta para 50 e 50 aqui mesmo. E eu vou posicioná-lo onde ele estava tão alinhado com a borda superior fora do sino, bem como com a borda direita fora do cinto. Assim como. E agora, finalmente, podemos entrar aqui, localizar nosso texto, localizar nosso texto, aumentar sua cidade de pagamento nos dedos 100 e depois simplesmente empurrá-lo de volta para o centro assim. Então ele vai dedo do pé parecer completo bem aqui. Como você pode ver, temos como maney dois para seis diferentes nossos portos para este. Mas se você quiser fazer com que pareça agradável e limpo, então precisamos de tantas tábuas de arte. Então vamos começar com a nossa prototipagem. Não, para este 1º 1 como um show, você eu vou usar o passo. Por isso, vou arrastá-lo para aqui. Toque em para facilitar. Vamos usar é em porque ele está indo dedo fácil para a animação para o 2º 1 nós vamos usar o tempo e deixar tudo como está. Você pode apenas ter este fácil e fora para torná-lo agradável e simples está dentro. Faça com que pareça o mesmo e simplesmente acredite assim. E para este último, eu queria curvar como, então porque eu quero este número 32 limites da direita para a esquerda quando ele chegar a este lugar. Então vamos testá-lo. Clique aqui. Olhe lógica malvada. Isso um pouco quando você clica nele está indo dedo do pé salto esquerda para a direita círculo vai aparecer. E então o número três vai aparecer mais uma vez, vamos testá-lo mais uma vez. Como você pode ver, círculo direito esquerdo aparece e, em seguida, número três saltos e você pode mudar este número três Toby no topo para que ele possa saltar de cima para baixo porque é branco bem aqui. E todo este ícone é branco. Pode saltar da esquerda. Ele pode saltar de baixo usando máscara ou como você quiser. Mas eu acho que isso parece legal para que possamos deixar assim. Ou podemos apenas fazê-lo sofrer com este primeiro nosso porto. Você pode puxar este cabo aqui e ir daqui para aqui usando o tempo. Então, agora, quando você visualizá-lo, ele vai pular imediatamente e mostrar a você essa notificação, uma animação de notificação. Mas mais uma vez, como eu disse, eu gosto de usar o gatilho de toque porque vai ser muito simples mostrar isso aos seus clientes porque dessa forma eles podem ver a animação como foi planejada, mas não apenas para a final produto. Então foi testado mais uma vez. Deixe-me grande quando você clica nele vai saltar da esquerda para a direita número vai dedo do pé aparecer da direita e saltar para o lugar. Então é isso para este. E vejo-te no próximo vídeo. 12. Ícone 7: neste vídeo, eu vou mostrar a vocês alguns dias. Animação de três pontos como os que você vê nas mídias sociais, especialmente no APS mensageiro. Então Facebook Messenger, se você está usando Viber, o que está acontecendo e assim por diante? Você pode ver esses como as pessoas estão digitando e você está esperando pela primeira vez. Aqui está o que basicamente, você está vendo. Então esses três pontos para que você saiba que a outra pessoa está digitando para que você possa esperar um pouco para receber sua mensagem. Então, sem mais delongas, vamos começar. Então, mais uma vez, como sempre, eu tenho 500 por 500 nosso porto. Eu vou usar o banco de elipse simplesmente segurar minha tecla shift e desenhar um círculo. E pode ser qualquer tamanho que você quiser. Vamos usá-lo. Por exemplo 70 com 70 e eu vou clicar aqui. Aperte o controle C para que eu possa copiar esta cor. Clique aqui. Controlar o segundo baseado nele. E finalmente vou remover a fronteira. Clique aqui para que eu possa posicionar meu círculo no meio, em seguida, pressione o controle D. Você também pode usar a repetição. Ótimo, mas achei isso um pouco mais fácil. Eu vou posicionar pixels vazios separados, Hit controlar o mais uma vez. E finalmente, temos 30 aqui também. Vou clicar duas vezes aqui e chamar este círculo. E este é o número três. Este é o Círculo número dois. E finalmente este é o Círculo número um. É importante que você nomeie suas camadas porque também, feição animar não funciona. Bem, se as camadas são nomeadas de forma diferente. Então eu vou posicionar estes um pouco diferente. Então o número um chegará ao topo e o número três ao fundo. Eu estou indo para casa uma tecla shift, aperte o controle G para que eu possa agrupá-los e chamou isso, por exemplo Círculos. Vou clicar aqui, depois aqui, Toe . Posicione-os perfeitamente no meio e este será basicamente o nosso primeiro estado para o nosso segundo estado. Vou clicar no pátio, trabalhar o controle devido ao controle duplicado e hit. Clique para que eu possa clicar no círculo um. Mantenha pressionada a tecla shift e a seta para cima duas vezes para que eu possa me mover com 20 pixels para cima. Clique aqui. Aperte o controle de mais uma vez agora acerte o controle, clique no segundo círculo e mantém o deslocamento de uma seta para cima quatro vezes. Então 1234 para que você possa mover com 40 pixels para cima e clique no primeiro 1 hit Shift para baixo Seta um, também, que você possa trazê-lo de volta para a posição original. Clique aqui, Hit controle D e vamos mover o círculo para baixo duas vezes ou mudar seta para baixo duas vezes. Mas desta vez vamos nos mudar. Circulou 3 40 pixels para cima. Então mude 1234 e, finalmente, aperte o controle D. Vou derrubar este. Então, turno 12 e turno 12 e é basicamente isso. Você deveria ter quatro quadros de arte como este porque este é o nosso início do estado. O ponto número um vai subir. Então o 2º 1, depois virou um. E enquanto o 3º 1 está descendo, todos eles já desceram. Então vamos animá-lo. Vou escolher o protótipo, clicar aqui na alça azul, arrastá-lo para aqui, e vamos usar o tempo porque todos eles serão baseados no tempo e para a ação. Vamos usar os inimigos fotográficos facilitando. Nós vamos usar nenhum. E para a duração, vamos usar 0,2 segundos. Basta arrastar isto até aqui e, finalmente, neste último. Vamos arrastá-lo todo o caminho para a frente e usar o atraso off 0.2 segundos porque queremos que este último dedo espere um pouco antes que ele vá até o estado inicial . Então, vamos clicar aqui. Acerte nossa pré-visualização e você pode ver como ele se parece. Então, basicamente, este último está indo para o pé. Espere um pouco antes que ele vai todo o caminho para este 1º 1 Mas eu realmente não gosto de como ele parece, porque vamos clicar aqui que remover e atraso de tempo. Então eu vou clicar 0.0. Pressione Enter porque eu queria esperar deste para este, não deste para este. Então, vamos clicar neste 2º 1 e sobre ele, vamos usar o atraso e bater a visualização mais uma vez. E agora, como você pode ver, parece muito mais limpo porque quando chega a isso, primeiro estado está indo pesos 0,2 segundos e, em seguida, começar a animação novamente. E agora faz muito mais sentido do que para o seu peso do dedo do pé deste dedo o 1º 1 Em vez disso, ele vai o peso do dedo do pé do 1º 1 ao 2º 1 para que você possa ver que parece muito suave porque nós escolhemos aliviar nenhum, porque para esta animação em particular, se você escolher alguma dessas atenuações, esses pontos não vão parecer naturais, e eles vão saltar e acabar e encaixar-se na posição. Mas queremos que sejam tão naturais quanto possível. Então, como você pode ver, eles estão neste caso. Então é isso para este vídeo, e eu vou te ver no próximo. 13. Ícone 8: neste vídeo, eu vou mostrar a vocês este ícone de fechamento de pesquisa. Então, quando você clica no ícone de pesquisa, alinhe saltos dentro de voltas no reboque X, e quando você bater em, o X vai fechar e saltar de volta para a mesma posição e, em seguida, dar-lhe a capacidade de fazer a animação mais uma vez. Então, mais uma vez, quando você clicar nele, ele vai se transformar em roupas. Quando você chegar perto, ele vai voltar para a busca, e este círculo vai distorcer um pouco. Então vamos começar. Então, como de costume, eu tenho meus são derramados em 500 por 500. Vou usar a Ellipse. Ainda desenhe um grande círculo. Vamos dar-lhe 240 semanas, 200 para a altura. Posicione-o no centro assim e para a fronteira. Vamos usar, por exemplo, cinco. Acho que funciona bem. Você pode usar mais se quiser. Se você quiser fazer o ícone parecer um pouco mais atraente, talvez, talvez, mas eu costumo usar cinco. Mas o que você está neste caso, vamos ver como isso se parece. Vou ligar para este círculo. Tudo bem, então eu vou usar o meu clique de lápis bem aqui no meio. Desenhe também. Então estamos por aqui, ele escaparia. Clique aqui para arredondar a tampa. E se eu digitar 10 como você pode ver vai olhar exatamente o mesmo que este círculo e você pode selecioná-lo e, em seguida, posicioná-lo no meio. Assim, vamos chamar esta linha um controle de criança D e chamado mas um alinhado para assim e eu vou agrupar essas duas linhas. Então controle G chamá-lo alinha e agrupar a coisa inteira e chamá-lo ícone assim. Então, para este 1º 1 vamos criar nosso ícone de pesquisa. Então eu vou pegar as linhas e eu vou pairar bem aqui. Rode um pouco para alguém por aqui e posicione este dedo por aqui. Esse ciclo parece que parece bom e você pode posicionar o ícone para estar no centro assim E, finalmente, o que eu quero é bater o controle, clique dentro do círculo DoubleClick quer novamente e passar o mouse sobre algum lugar por aqui para que posso acrescentar mais um ponto. Então vamos fazer isso de novo. Use o círculo, clique duas vezes dentro e você pode clicar sobre esses pontos e, em seguida, adicionar mais um ponto em algum lugar por aqui porque esta é a área que vai distorcer quando esta linha está indo para ir à vista fora do nosso ícone de pesquisa. Então é isso para os primeiros Estados. Então, o estado original vamos usar um 2º 1 para que ele controlasse os dois duplicados. Agora vamos selecionar essas linhas e vamos posicioná-las apenas uma visão em algum lugar por aqui. Vamos ver. E mais uma vez, eu fui para o clique no círculo Clique neste novo ponto recém-criado que acabamos de criar e simplesmente distorcido em algum lugar por aqui. Você pode brincar com este ângulo se quiser. Então, por exemplo, você pode criar para ser um pouco mais dramático para algo assim. Se você quiser. Sim, isso parece bom. Vou fechar este clique aqui. Aperte o controle D Agora o que você vai fazer com as linhas é que vamos abrir isso, usar as linhas, segurar nosso turno, manter, e então simplesmente posicioná-los para estar no centro fora do nosso ícone. Mas antes de fazer isso, temos que selecionar este primeiro círculo simplesmente selecionado a partir daqui. Aperte o controle C feche este salto à vista. Exclua este círculo e aperte o controle V porque isso vai posicionar para circular exatamente na mesma posição que este 1º 1 Nós estamos indo dedo do pé, movê-lo para trás Então as linhas estão em foco e agora vamos selecionar ambos. Clique aqui e depois aqui para posicionar nossas linhas no centro deste ícone. Então é isso para este controle de palco para duplicá-lo mais uma vez. E agora temos dedo girar esses ícones para fazer um ícone de fechamento. Então vamos usar este suco de laranja 25 ou escolher 135 assim e no 2º 1 Vamos usar 45 e basicamente é isso para a criação que temos ou são todos os nossos estados. E agora, basicamente, o que vamos fazer é clicar aqui, apertar o controle de para duplicar este. Clique aqui, controle DE para duplicá-lo, e este vai ser um primeiro estado. Este vai ser o nosso estado final porque queremos criar um close e, finalmente, de perto do dedo do pé para trás este ícone, vamos ter o loop e podemos ser capazes de clicar neste ícone mais uma vez e, em seguida, criar todos esses ícones mais tarde. Então vamos começar a prototipagem. Então, vamos clicar aqui. Selecione. Nosso primeiro são pobres, mas vamos selecionar o ícone arrastou uma alça azul para pisar para os sapatos de transição ou animar dedo do pé. Ele sai daqui e faz 0,2 segundos porque queremos que tudo pareça bom, limpo e rápido para este. Vamos usar o tempo por isso não são pobres para aqui. Nós vamos usar fácil agora 0.2 e simplesmente ir a partir daqui em diante. Vamos usar a torneira porque queremos ter exatamente as mesmas configurações que esta para esta. Vamos usar o tempo e, finalmente, para este, vamos usar o tempo também. Então vamos dar uma olhada. Clique aqui em grande um pouco. Quando eu clico nele, você pode ver que essa pequena distorção acontece. X vai aparecer quando você clicar nas roupas e você pode ver que a loja acontece novamente. Clique aqui. E como você pode ver, é muito sutil, mas é bem bonito também, então esse é basicamente o seu ícone. Você pode usar este ícone para animar seus campos de pesquisa, por exemplo, por isso, se você tiver um campo de pesquisa em seu site ou em seu aplicativo móvel, você pode usá-lo dessa forma apenas para trazer um pouco mais de atenção para o campo e apenas um um pouco mais de interesse para esse campo. Então, quando os usuários clicam nele, eles podem ser capazes de notar a diferença entre apenas regular para que ele preenchido e aquele com a animação do site. Então é isso para este vídeo, e eu vou te ver no próximo. 14. Ícone 9: neste vídeo, vou mostrar-lhe como você pode criar este ícone responsivo, que está indo do telefone para o tablet para a área de trabalho e de volta para o telefone novamente. Você pode usá-lo em seu site ou em seu aplicativo móvel, apenas para apresentar aos seus usuários que seu aplicativo ou site é responsivo e que eles podem usá-lo em todos os dispositivos fora de seus dispositivos. Então, vamos começar. Então, como de costume, eu tenho 500 por 500 nossa porta, e vamos usar a ferramenta de retângulo. Você pode segurar sua tecla shift para desenhar um retângulo e deixá-la ir para algum lugar por aqui, fazer o raio do canto 20 e fazer a borda com cinco só para que possamos ter um belo dedo grande brincar com o dedo do pé. Você pode baixar isso e torná-lo um pouco menor porque nós vamos do telefone todo o caminho até o tablet. E o que queremos aqui é criar um pequeno botão. Então use o dedo do pé de elipse e criado como então talvez você possa aumentar o curso de borda com para dois. Acho que isso parece bom. Posicioná-lo no meio certifique-se de que você está na linha com esta forma inferior. Pressione shift uma vez e topo, Pero para que você possa movê-lo 10 pixels para cima. E, finalmente, vamos usar uma ferramenta de retângulo mais uma vez e desenhar um retângulo grande e agradável. Eu vou clicar aqui, controle, veja, veja, que eu possa copiar esta cor. Clique aqui, controle V e entre para que o frango colá-lo e eu vou remover a borda, e se nós rapidamente voltar para o retângulo que criamos, podemos ver que é em cinco. Então eu vou clicar nesta forma que criamos e para a altura, use cinco para que possamos ter a mesma altura que esta borda é vara e finalmente clicar nesta forma de fundo e você pode ver que é 136 em sagacidade, então eu posso clicar em este e digite 136 linha central pressione aqui para estar no meio, alinhando-se com o círculo para uma mudança e era superior uma vez para que possamos posicioná-lo uniformemente a partir do fundo e do círculo. Agora vamos dar um nome a eles. Vamos chamar este de uma linha de um fundo e, finalmente, este que vamos chamar de forma agora. O que nós também queremos é criar mais duas linhas adicionais para ir aqui para o fundo porque nós vamos usar auto animate e explicou várias vezes ao longo destes vídeos você tem que ter exatamente a mesma estrutura de camada para o dedo do pé inimigo automático corretamente Então você pode duplicar nesta linha duas vezes pressionando o controle D. Isso vai ser uma linha do meio e, finalmente, isso vai ser uma linha de fundo para o nosso desktop. E nós vamos mover essas duas linhas para baixo até que eles se encontrem com o fundo fora da nossa forma, mover ambos abaixo da forma. E para a inteligência, podemos usar algo como 50 e posicioná-los todos no meio, assim. E você pode usar todos os três e clicar aqui para que ele irá posicionar todos eles no meio assim. Agora você pode apalpar todos eles. Controle de batida, contato G Informe assim e, mais uma vez, certifique-se de que está no meio. Como assim é para que possamos bater o controle D para criar um tablet então O que você vai fazer neste caso é simplesmente ampliá-lo. Então eu vou desligar responsivo, muito tamanho porque nós não precisamos dele e você vai usar o parafuso de deslocamento e clique esquerdo em um dos cantos. Vamos aumentar para algum lugar por aqui. Eu acho que é bom, e nós vamos reposicionar alguns desses elementos para que ele possa saltar para dentro. Clique na parte inferior e posicione o dedo do pé por aqui. Mudar o nosso pere uma vez e, finalmente, fazer o mesmo para a linha enviada fora de heroína uma vez e agora, vamos apenas verificar rapidamente se alguma coisa mudou para forma Quicken, você pode ver as vistas ainda é cinco, e eu posso clicar na linha e ver que A altura da linha é agora sete. Então mude de volta para cinco e faça o movimento mais uma vez. Então mudar um barril quer, e é basicamente isso. E podemos fazer o mesmo por estes dois. Se você quiser bater cinco e apenas certifique-se de que eles estão na borda inferior fora desta forma. Mas como nossa forma tem uma cor branca Whitefield, realmente não importa porque eles estão posicionados abaixo. Então é isso. para o nosso tablet e vamos posicioná-lo no meio assim. E finalmente, vamos criar uma área de trabalho para que ele controlasse profundamente e o que eu quero fazer. Aqui você pode clicar em insight, e eu quero esconder nossos botões. Então, basta clicar aqui. Ou melhor ainda, você pode baixar. Você baseá-lo para baixo. Então você despreza 02 vezes ou move o controle deslizante todo o caminho para a esquerda, e o que queremos neste caso é o dedo do pé. Amplie esta forma, bem como a linha para que você possa manter a tecla Control pressionada. Selecione dois deles. Clique quando você é a chave antiga e, em seguida, clique em um fora dos sites. Então vá para algum lugar por aqui. Eu acho que é bom. E finalmente mover essas duas linhas para baixo. Então, Celik, ambos tinham o turno 12 e o turno 12 para esta parte um. Agora esta parte de um, porque vai ser um stand, vai ser um pouco maior. Então, em vez de 68, vamos usar algo como 90 pressione enter ou até melhor, 120 apenas para torná-lo muito maior. E, finalmente, você pode reposicioná-lo para estar no centro assim e lá tê-lo. Temos a nossa área de trabalho. Então vamos posicioná-lo no centro assim. E agora temos todas as nossas três formas prontas para ir. Agora o que podemos fazer é clicar aqui, escolher o protótipo. Basta arrastar e escolher o atraso de tempo. Podemos escolher um segundo escolher auto animate e você pode usar fácil agora fácil no que quiser e fazer o mesmo para este. Apenas certifique-se que você tem que atrasar aqui também. Então queremos esperar um segundo entre cada animação para que os usuários possam ver o que ela realmente é e o que ela realmente faz para que ele visualize para ver como isso parece. E você pode ver que ele aumenta bem e este botão desaparece e traço de linha permanece consistente em todos esses ícones. E como você pode ver, tudo parece muito bom e limpo. Não há uma última coisa que possamos fazer. Como você pode ver, esses ícones estão em torno dele. Mas essas duas linhas de fundo não são. Então podemos mudar isso. Basta selecionar ambos ou clicar um por um e, em seguida, escolher traçado, talvez 20 ou talvez até 50 apenas para torná-lo um pouco mais claro. Algo como isto. Funciona bem e vamos verificar mais uma vez. Como você pode ver, ele muda para telefone para tablet. E como você pode ver, essas duas linhas agora estão bem em torno dele, modo que é isso. Basicamente, para este vídeo, espero que você tenha gostado. E como você pode ver, é realmente fácil criar essas transições. Apenas você tem que criar o ícone. Fizemos a transição em mente. Então, como você viu, você tem que manter todos os seus nomes de camada consistentes e você tem que alterá-los de acordo . Então, eles se encaixam entre cada transição e apenas certifique-se de deixar o tempo de atraso entre cada animação em um segundo, para que você tenha um pouco mais de espaço e os usuários possam determinar. Ok, então isso é um telefone. Este é um tablet, e finalmente, este é um computador desktop, então é isso para este vídeo, e eu vou vê-lo no próximo 15. Ícone 10: neste vídeo, vou mostrar-lhe como você pode criar este ícone de pausa de reprodução. Então, quando você bater em, o jogo vai mudar o dedo do pé uma linha e, em seguida, dividir em dois criando ícone oposto. E quando você clica no ícone Pose, ele vai saltar para trás, dedo do pé uma linha e, em seguida, voltar para o ícone da placa. Então vamos começar. Então, mais uma vez, estamos em 500 por 500 para o tamanho do aeroporto. Vou usar o Ellipse Tal desenhar um grande círculo. Vamos usar 200 por 200. O mesmo líquido. Em alguns dos exemplos anteriores, os analistas usam cinco para o curso com Now. O que você vai fazer é que nós vamos aproximar um pouco mais desse jeito, e você vai usar o lápis e nós vamos desenhar uma parte simples. Assim ele escapou. Clique aqui digitando cinco e clique aqui para executar o acampamento e torná-lo agradável e ao redor. Agora selecione-o e posicione-o no meio assim, e eu também vou posicioná-lo um pouco para a direita. Assim. Se você acha que vai ser muito alto. Basta clicar duas vezes sobre ele. Clique aqui para baixá-lo um pouco assim e, em seguida, reposicioná-lo para o meio assim. Agora, esta vai ser a nossa primeira linha então podemos chamá-la de linha na linha um hit control D e controlar a mais uma vez. Então isso vai estar mentindo e, finalmente, isso vai ser mentira três. E finalmente, vamos fazer mais duas cópias desta primeira linha. Então ele controlou o e controlar o mais uma vez Isto vai ser linha para e você pode agrupar estes dois hit controle G e chamado Dispose. E estes três chamada, por favor, como Então agora você pode esconder o poste ou simplesmente baixá-lo abaixo placa e usou uma linha um e linha para, por exemplo, e nós podemos apenas girá-los. Então, quando você passar o mouse sobre de perto, você pode ver essas duas setas e você pode simplesmente um girá-lo assim, e você pode posicioná-lo para o topo como esta extremidade do mesmo para a linha para, mas na outra direção. Então algo assim e posicioná-lo apenas para ter certeza que está na esquina assim. E agora você pode simplesmente reposicionar esses dois para que você possa clicar duas vezes sobre este e torná-lo assim. Por exemplo, você conduta enfraqueceu este e conectado no final assim. E lá vamos nós. Nós temos nosso ícone de jogo, e se ele não parecer como você quer, você pode simplesmente baixar esses dois. Ou você não pode clicar neste 1º 1 e talvez torná-lo muito mais perto assim e um provável condicional para que você possa realmente brincar com ele. E também, mais uma maneira é simplesmente selecionar isso. Então selecione o círculo e vamos entrar em círculos e simplesmente desenhar uma diretriz daqui para o meio assim, e você vai ver isso se estiver no meio ou não. Então, porque não é, vamos clicar duas vezes em seu analista, posicioná-lo assim e, em seguida, clique no 2º 1 e vamos posicioná-lo assim até que eles estejam conectados. E agora você pode ter certeza de que é um triângulo apropriado para que você possa remover esta linha e deixá-lo é realmente com você. Mas essa é a primeira etapa do nosso projeto. Feito. Você pode clicar aqui. detalhes de controle fizeram piquete no nosso porto. E agora o que vamos fazer é fazer algumas mudanças. Então use a linha número um, clique duas vezes sobre ela e você pode mover este ponto até que ele se encontre bem aqui. Parece bem aqui também. Mova esta linha aqui até que ela se encontre no meio e certifique-se de que está no meio. Assim também. Certifique-se de que eles estão todos devidamente alinhados assim e simplesmente mover apenas um pouco dedo do pé direito como este até que você tem basicamente uma linha reta. E agora o que você vai fazer é mover, jogar e pausar ícones no meio para que possamos escolher. O círculo está bem posicionado, tudo no meio assim, e agora vamos pular e criar outro. Então ele controla D e salta para trás rapidamente neste. E quando você acerta o jogo, você pode baixar seu Bay City para baixo assim, e você pode clicar no prato aqui bem e abaixou seu Bay City para baixo também e agora sem perturbações. Vamos usar o post, e você pode tipo de dividi-los para que você possa clicar na linha um deslocamento e tecla de seta esquerda um para o fim do mesmo para a linha também um para apenas para ter certeza de que você tem o mesmo espaçamento quando você criou eles ícone supor. Então agora o que precisamos fazer é duplicar isso mais 11 vezes para acertar o controle D, e é basicamente isso, porque ele vai de aqui para aqui para aqui tocar e, em seguida, aqui, volta para aqui. Então vamos testá-lo. E o que vamos fazer é fazer o protótipo dele para que você possa clicar no protótipo aqui . Vamos escolher isto, assim como a fase inicial. Então nós vamos dirigir este manipulador você passo para a transição. Não usaríamos animação automática. Que uso está dentro e 0.3 segundos. Isso é bom para este. Vamos usar o tempo em vez do top 0.3 facilitando. E para este, vamos usar toque mais uma vez, então toque ou para animar, nota fácil. E para este, vamos usar o tempo porque ele vai voltar para o primeiro 1, então ele é rapidamente testado . Veja como parece. Então, quando você clica nele, como você pode ver, é agradável e suave. Quando você clicar nele novamente vai saltar na frente na linha do meio para duas linhas para a pose e mais uma vez para a linha do meio de volta para o triângulo. Mais uma vez, você pode brincar com diferentes configurações. Você pode escolher diferentes atenuações. Você pode usar bombas aqui se você quiser, mas se você não quiser, você pode simplesmente deixá-lo como está vindo da facilidade em dois estados diferentes. Mas se você quiser, você pode fazer isso também. Além disso, se você quiser, você pode alterar as cores desses traços. Então, por exemplo, isso deve ser uma cor, e quando você clica nele, ele muda para pausar e neste momento particular, então neste estágio permanece o mesmo. Mas nesta fase é muda de cor para que possa ser azul, por exemplo, e neste estágio vai saltar de volta para a cor original e vai ser cor original nesta fase também. Então, como você pode ver, é realmente agradável, simples, animação limpa. Realmente, não há não muito acontecendo, mas ele realmente vai apimentar seu você Por que, especialmente se você está compartilhando, por exemplo, um aplicativo móvel com seu cliente e eles vão ser capazes para ver, por exemplo, você pode criar uma barra animada aqui na barra de progresso animal superior. E quando eles clicarem nele, a barra de progresso vai parar naquele ponto específico quando eles baterem. Jogar mais uma vez vai continuar e ir para o fim para que você possa realmente apimentar o seu trabalho assim e criar um pouco mais de interesse visual para seus usuários. Então é isso para este vídeo, e eu vou te ver no próximo 16. Arquivo XD de Ícones: neste vídeo. Eu só queria mostrar como você pode usar os ícones. Ovos contaminam aqui. Como você pode ver, temos todos os nossos ícones que eu já abordei nesses vídeos. Então você pode seguir junto, se quiser. Ou você pode conferir mais tarde ou antes de começar apenas para que você possa conferir algumas dessas animações. E se você quiser, você pode ver a animação. E se você gostar, você pode seguir o vídeo. Ou se não, você pode pular esse vídeo e assim por diante. Você também pode verificar se você perdeu algo porque, ah, muitas vezes as pessoas voltam para mim e me fazem perguntas. Mas aqui você pode verificar o arquivo original e ver se você conseguiu tudo corretamente. Se você quiser visualizar alguns deles, você pode simplesmente clicar no primeiro quadro de arte em qualquer um deles. Ele tocava bem aqui. A animação vai começar e você pode conferir e ver por si mesmo dentro do arquivo Theodore B X D para esse ícone particular que eu criei durante os vídeos para que você possa verificá-los, você pode ir para trás e para a frente. Você pode ver como eles se parecem, e você pode visualizá-los apenas para que você possa ver com o que você está trabalhando. Além disso, mais uma coisa que você pode usar qualquer um desses ícones que criamos para o seu projeto específico. Você pode usá-los para projetos pessoais ou comerciais gratuitamente. Porque, como você viu, nós criamos quase todos do zero. E uma vez que não o criei, tirei do Free. Recurso é que eu vou ligar no último vídeo off discurso, e você vai ser capaz de baixar todos esses ícones para seus projetos e usá-los gratuitamente para projetos pessoais e comerciais. Então é isso. Confira este arquivo, brinque com ele. Ele tocava em alguns desses ícones e via como a animação parecia, e eu encorajo-te a testá-lo por si mesmo e a criá-los para si mesmo também. Seguindo esses vídeos, 17. Botão 1: neste vídeo, vamos criar seu menu inferior, que você pode encontrar na maioria dos APs. Então nós temos este fundo no meio, e quando você clicar nele vai virar de mais. Ainda assim, X vai cuspir todos esses ícones para o topo, e quando você aperta perto, ele vai fechar e girar de volta para mais. Então, mais uma vez, quando você clicar sobre ele ou X cuspir todos esses ícones que topo quando você clicar sobre ele novamente vai saltar de volta para o moinho, saltar caminho velho para baixo e voltar para mais. Então vamos começar. Então aqui está o que eu tenho aqui eu tenho esses três ícones inferiores, então se eu clicar em alguns deles, você pode ver que temos casa. Temos nosso anúncio e roupas lá dentro. Temos adicionar ou fechar ícone e também temos este círculo de fundo, e finalmente temos este ícone de carteira todo o caminho. É certo e no topo temos três ícones, que são apenas um pouco menores do que estes três na parte inferior, porque estes ícones primários de ar e estes são ícones secundários e eles são apenas um pouco menores para que eles possam acomodar para estar dentro deste círculo. Então temos um ícone de câmera, ícone de imagem, bem como vídeo. Eu não posso aqui. Então, o que eu quero fazer primeiro, por favor selecione este ent close. Eu vou duplicar este círculo e você vai obter esses arquivos para que você possa acompanhar todo este vídeo e eu vou duplicar este círculo e posicioná-lo em algum lugar por aqui. Vou fazer mais duas cópias. Então ele controlaria De control de mais uma vez e eu vou separá-los como So Now, finalmente, finalmente, eu estou indo para o pé. Adicione todos esses ícones nos círculos. Então eu vou arrastar a imagem logo acima deste círculo do meio. Vou clicar nele, ter certeza que está no meio. É, e eu vou simplesmente movê-lo aqui. Selecione a imagem usando a tecla de controle Aperte o controle G para agrupar Lá. Não, rápido aqui. Digitando imagem como Então, em seguida, vou usar este círculo para a câmera. Localizei a câmera. Aqui está. Arraste-o apenas sobre o círculo aperte o controle G e chame esta câmera, e finalmente temos o vídeo como o fim, e eu vou posicioná-lo bem aqui. Ele controlava G chamado este vídeo como Então agora, mesmo que a imagem está no meio e deve estar no meio direito entre a câmera e vídeo, eu vou deixá-lo no topo porque ele está indo dedo do pé saltar primeiro e, em seguida, de para trás . Estes dois vão aparecer. Então vamos primeiro agrupar todos eles, assim que controlou G. E eu vou chamá-los, por exemplo, topo do Aiken porque eles vão para o topo fora desses ícones inferiores. Em seguida, vou selecionar todos os ícones e mudar sua cor. Então segurando meu controle, G click aqui. Clique na cor de fundo branco. E agora, finalmente, estou indo para o pé. Basta posicioná-los Toby no meio, assim eu vou fazer o mesmo para esta câmera e finalmente fazer o mesmo para este vídeo. Então eu estou selecionando os dois e batendo bem aqui para posicioná-los Toby no meio. E isso é basicamente para o processo de criação deste vídeo. O que eu quero fazer a seguir é abrir esta pasta, selecionar todos os três em clique aqui para que eu possa posicioná-los no meio. Em seguida, clique aqui para que ele possa estar perfeitamente no meio como este ícone e simplesmente movê-lo todo o caminho para baixo até que ele se encontre. Assim até que esteja perfeitamente por trás deste ícone de fechamento do anúncio. Então isso é basicamente para a nossa parte de design. Vou clicar aqui mesmo no aeroporto, Hit Control D, e você pode duplicá-los à medida que avança. Então, primeiro, o que vamos fazer é clicar dentro deste ícone de fechamento de anúncio, selecionar este modo mais e girado mantendo o deslocamento para cerca de 90 graus ou menos 90 graus para que possamos ter este X em seguida. Vou fechá-la. Aperte o controle DE para duplicado mais uma vez. E o que eu quero fazer agora é mover esses ícones de parada para o topo para que você possa segurar uma mudança em nosso perigo para empurrá-los acima, em seguida, colisão alinhado como este turno de hit e vestuário em 234 vezes , por exemplo, que você possa tê-lo a 40 pixels acima deste. Próximo, o quê? Vamos fazer é bater o controle de mais uma vez, saltar para dentro destes e, em seguida, selecionar a câmera. Mantenha a tecla Shift na seta para a esquerda, selecione vídeo, turno inteiro e seta para a direita algumas vezes e, em seguida, moveu-os, por exemplo. Vamos tê-los a 40 pixels. Então em algum lugar por aqui e com o mesmo para este. Então, se diminuirmos um pouco, aperte o controle zero para ver o que fizemos. Então vamos começar com este estado. A seguir, vamos passar para este estado. Uma vez que uma pessoa clica aqui, então esses ícones vão saltar por trás deste ícone X, e eles vão se dividir em três e mostrar este ícone. Agora, o que também precisamos é de uma cor vermelha para que possamos indicar que as pessoas podem fechar este ícone Mex . Então eu já tenho uma cor. Vou saltar insight e apertar-me a tecla Control. Clique aqui. E em vez desta cor azul, vou usar este vermelho. Então é e 53 c 85 por cento, e eu vou fazer o mesmo para este. Clique aqui. Controle o trigo com base exatamente na mesma cor. Agora o que você vai fazer a seguir é terminar neste estado. Então precisamos copiar este. Então controle D e, finalmente, copie este 1º 1 assim controlou o mais uma vez. Então vamos fazer um círculo completo daqui até aqui, e então podemos clicar no dedo do pé voltar a este. Então agora vamos começar a prototipar e adicionar algum movimento. Então, vamos clicar aqui para este 1º 1 Vamos clicar no botão, arraste esta alça azul vamos usar passo também animar. Vamos usá-los para fora e 0,3 segundos está bem. A seguir, vamos escolher o tempo para este, porque queríamos aparecer por um certo tempo. Então nós vamos usar o tempo auto qualquer carne e em vez de está dentro. Vamos usar o vento para cima porque queremos esse dedo do pé até o topo. Só um pouquinho para este. Nós vamos usar o tempo também, mas nós vamos ter um pouco fora de atraso, então nós vamos ter um 0,4 segundos, e em vez de acabar vamos usar o salto. Então aqui está ele, bem na parte inferior e nós vamos estender apenas um pouco para 0,6 porque nós queremos toe esperar apenas um pouco enquanto ele chega aqui antes que ele se divida em três. E nós também queríamos saltar, então esses dois ícones externos vão saltar para o lugar. A seguir, vamos a este, mas não vamos usar o tempo. Em vez disso, vamos usar passo. Então, vamos clicar neste botão porque ele vai fechar os dedos para usar seus hits nele. Mesmo líquido que com este 1º 1 para abri-lo em primeiro lugar. Então nós estamos indo para você passo auto, animar. E em vez de saltar, vamos usar snap e 0.3 segundos para que você possa digitá-lo aqui mesmo 0.3 percenter para ter o 0.3 porque queríamos encaixar de volta no ícone original, não saltar ou acabar ou qualquer coisa assim porque nós queria encaixar na posição nesta posição do meio. E finalmente, o que temos aqui, vamos dirigir. Esta alça quebrada e o que vamos fazer é que vamos usar o tempo e para o atraso , vamos usar 0,4 segundos porque queríamos ter apenas um pouco fora de atraso antes que ele vá para baixo para o X. , vamos usar 0,4 segundos porque queríamos ter apenas um pouco fora de atraso antes que ele vá para baixo para o X. vai usar também animar e em vez de snapper foi usar está dentro. E em vez de 0,3, vamos usar 0,6 segundos. E finalmente, queremos ir deste último todo o caminho de volta para o 1º 1 Então eu vou selecionar a parte inteira é. Arraste-o aqui. Vamos usar o tempo de atraso 0.4 segundos e vamos usar snap. Finalmente, você pode ter isso em 0.3 apenas para que possamos ter um pouco mais de consistência fora. Então vamos bater a pré-visualização. Vou clicar no seu primeiro clique aqui. Eu vou ampliá-lo apenas um pouco, então quando você clicar sobre ele vai girar, cuspir todos esses três no topo. Eles vão se dividir em três limites no lugar quando você clicar em X, como você pode ver, há apenas um pouco fora de um atraso antes de cair. E, finalmente, isso volta a cor azul como originalmente. Waas. Então vamos fazer isso. Mais uma vez, você pode clicar sobre ele como você pode ver as bombas no lugar quando ele está perto e eles estão indo para saltar para trás em vez de volta para mais. Então é isso para este vídeo, e eu vou te ver no próximo. 18. Botão 2: neste vídeo. Nós vamos criar este fundo, e quando você clicar nele, ele vai mudar de um texto para outro, e um leve reflexo vai ir da esquerda para a direita apenas para apimentar as coisas um pouco . Então, se eu mudar novamente quando você clicar nele, você pode ver como ele se parece. Então vamos começar. Então aqui Havenaar Portátil 500 por 500. Igual a todos os outros exemplos, vou usar o meu texto. Ochlik bem aqui. Bean enviou mensagem. Certifique-se de que está no meio. Eu fui usar o sentido aberto livre frente legal quando colocá-lo como. Então, em seguida, eu vou usar ferramenta retangular olhos desenhados. Grande retângulo Matthews 2 a 5 com 70 e vamos usar 50 para os cantos arredondados. Clique duas vezes no nome da camada e chamá-lo de VT e posição logo abaixo são enviar mensagem e certifique-se de que está no meio também. Em seguida, vou usar sem fronteira. Ah, sinto a cor fora três apresentador e. C. C. Seis ff, e eu vou usar branco para o nosso texto, vou simplesmente clicar aqui, e eu vou agrupar estes dois e chamar este botão Como assim em seguida. O que eu quero fazer é duplicar este controle de texto D. Eu vou esconder e vamos ver uma parte, e eu estou indo dedo digitando sucesso assim e apenas certifique-se que está no meio como está agora. E enquanto eu vou fazer é alto isso. Mostre isso e eu vou criar mais um retângulo bem aqui no meio, algo bem aqui, por exemplo, por exemplo, e chamar a mesquita de disco porque esta vai ser a nossa mesquita para o texto. Eu vou posicioná-lo no meio, assim no meio, como tão removido a borda. E o que eu também quero fazer é que você pode simplesmente deixá-lo como está, ou você pode baixar a sua cidade paga para baixo se você quiser, apenas para que você possa ver o seu texto. Mas não, não, não. Vamos deixar no zero e ver como isso funciona. E o que eu quero fazer agora, para o sucesso é movê-lo logo acima daquela mesquita. Então, em algum lugar por aqui, vamos ver. Sim, porque se eu pairar bem aqui com a minha tecla de seta de baixo. Você pode ver que ele atinge a marca de topo da nossa mesquita. Então vamos deixar isso aí. Então talvez não apenas um pixel para cima assim. E o que eu quero fazer é selecionar todos os três e clique direito e escolher mesquita com forma. Ou você pode usar turno, controle em ou turno, comandá-los mesquita com forma. E como podem ver, a mesquita criou. Mas o que acontece é que este sucesso do topo vai desaparecer, e nós vamos ver apenas o texto da mensagem enviada. Então não vamos olhar aqui e chamar disco, mesa, mesa, mesquita de texto assim E o que eu quero fazer saber é criar um retângulo sobre tudo como então eu vou movê-lo logo acima da nossa pasta, e nós vamos chamar esse reflexo assim, e eu vou reduzir seu peso para algum lugar por aqui removeu a fronteira porque nós não precisamos dela, e eu vou clicar duas vezes sobre ela. Eu vou selecionar esses dois pontos no topo, segurar minha tecla shift e simplesmente movê-los para algum lugar por aqui, e eu vou clicar neste, segurar o shift um para apenas para reduzi-lo um pouco. Clique neste turno inteiro 12 para reduzi-lo um pouco mais, e é basicamente isso. Criámos a nossa reflexão. Você pode brincar com ele o quanto quiser, mas achei que isso é bom o suficiente. Então o que eu quero fazer agora é duplicar este botão para que ele controle D e colocá-lo logo acima do nosso reflexo. E o que nós também queremos é selecionar estes para clicar direito e mesquita com forma e isso vai para mesquita são reflexão. Então o que você pode fazer neste ponto é que você pode diminuir a opacidade deste reflexo, ou você pode deixá-lo em 100%. É mesmo com você. E vamos chamar essa mesquita assim Então, neste primeiro estado, o que você quer é mover o reflexo para fora do fundo, então eu vou clicar nela, segurar minha tecla shift e simplesmente movê-lo para fora para algum lugar por aqui. E então o que queremos é duplicar este nosso circuito de controle D e para este. Queremos que o reflexo para ir todo o caminho através e ir fora do botão oferta assim, e nós também queremos mudar a cor do botão. Então eu vou usar uma cor verde agradável como 55 d 466 Mais uma vez, você terá todos estes nos arquivos de prática, então você pode usá-los tanto quanto você quiser. E o que queremos neste momento é remover esta mensagem para fora. Então eu vou manter o turno em árabe inferior. Vou pressionar algumas vezes até que esteja escondido de você, assim. E eu vou colocar o sucesso bem aqui no meio do nosso botão para que você possa segurar , mudar e posicioná-lo assim. E quando você clica fora, você pode ver o sucesso de Lee. Então, em seguida, temos que animá-lo. Assim é. Você pode ver que nós só temos para nossos portos, então eu vou clicar em protótipo, clicar em um botão e arrastá-lo dedo do pé aqui e apenas um por passo. Além disso, qualquer carne está fora. E para a duração, vamos usar algo como 0,6 segundos, ou você pode usar um segundo. É mesmo com você. Então, quando você clicar aqui, você pode Roger, apenas um pouco quando você clicar sobre ele. Como você pode ver, um bom reflexo está chegando, e esse sucesso está vindo do topo. Então vamos verificar mais uma vez e você pode ver como isso se parece. Eu acho que ele realmente parece limpo e simples, e ele realmente mostra o ponto porque ele vai de azul para verde e bem como de enviar mensagem para o sucesso. Então é isso para este vídeo, e eu vou te ver no próximo. 19. Botão 3: neste vídeo. Vamos criar este botão. Então, quando você clicar nele vai mudar o texto, alterar este ícone e alterar o ícone e texto novamente e, basicamente, ir de animada dedo do pé esperando. Como você pode ver, isso está carregando e finalmente para ativá-lo. Então vamos começar. Então o que eu tenho aqui é o porto de arte ou 500 por 500 mesmo Michael em todos os outros vídeos até agora, e eu vou criar o botão. Eu também tenho esses dois ícones porque eles vão nos poupar um pouco de tempo. Então eu vou usar a cor fora três e c. centro seis FF. Vou remover a fronteira. O que eu quero é ter bordas ancoradas 50. E para o tamanho, vamos usar 2 a 5 trigo 70. Então eu vou posicionar esse botão no centro, chamá-lo bem aqui em Bt e centro, indo para movê-lo para baixo, e eu vou usar meu têxtil e digitação ativa como, então certifique-se que é da esquerda. Eu vou posicioná-lo para estar no centro assim, e eu vou movê-lo, por exemplo. Mas veja 12345 alergias, 50 a partir desta borda, ou talvez possamos até ir 60. Acho que isso é bom. Vamos usar cor branca para isso. Controlado os dois duplicados. Vou esconder este. Vou chamar esta esperando. E finalmente para a tartaruga. Vamos duplicar este. Esconda-se esperando. E para o terceiro 1 vamos chamar isso de ativado assim. E eu vou escolher basicamente todos os três e move-lo para baixo, assim. E eu vou selecionar todo este controle de calor G e frio, este botão como este. E agora precisamos criar uma mesquita. Então, para fazer isso, eu posso usar o retângulo para, e eu posso desenhar uma bela mesquita grande para algo assim, e eu vou posicioná-lo para estar no centro do nosso botão assim. Eu vou remover a fronteira, carregando uma cidade 20 Eu vou chamar esta mesquita como, então movê-lo dentro da nossa pasta, Selecione todos os quatro e clique direito e Judeus Mesquita com forma. Vou chamar esta mesquita e, finalmente, vamos mover este texto, então primeiro vai ser ativado e o último vai ser acionado. Então eu preciso de pé no grupo da mesquita só para que eu seja capaz de fazer isso. Eu vou mover ativado para o topo porque ativar vai ser um 1º 1 Esperando vai ser um 2º 1 e ativado vai ser o nosso terceiro e último. Então vamos selecioná-los agora. Mesquita Jules com forma. Ligue para esta mesquita assim e eu vou rapidamente tirar estes dois do caminho. Então mova-os para o topo, por exemplo, assim. E como podem ver, agora só temos ativar e vamos criar esses outros elementos. Então vamos criar um círculo que eu vou é um lábio estola com algo como aqui. É uma boa posição para estar no centro, chamado de círculo, e nós vamos ter a borda fora dos brancos e três assim, e eu vou posicioná-lo em algum lugar como 123 Então Third picaretas é da esquerda. Este vai ser o nosso círculo, e vamos usar este ícone simplesmente posicioná-lo para aqui. Eu vou fazer este ícone azul e vamos movê-lo para estar no centro de tudo assim . Acho que isso parece bom. E talvez possamos torná-lo um pouco menor. Então, algo como aqui. Em seguida, eu vou posicionar a marca de verificação logo acima dela, e eu vou arrastá-la para dentro e vamos ter certeza que eles são aproximadamente do mesmo tamanho. Então algo assim, eu acho, funciona bem. Em seguida, o que vamos fazer é posicionar esta marca de seleção para estar no centro assim certifique-se de que a seta está no centro também está. E esta marca de seleção vai ter uma cor diferente. Então eu vou provar rapidamente essa cor agora, então nós vamos ter uma boa cor verde. Então vamos usar essa cor, que é 55 D 466 Pressione enter e eu fui esconder tudo isso rapidamente, e o que eu quero fazer agora é ter nesses círculos em seus grupos separados. Então o que eu quero é duplicar este, então controle D e vamos agrupar este cheque Mark tão controlado G e chamar esta marca de verificação . Assim. E eu vou baixar. Você paga 20 à cidade? Vamos ter o 2º 1 para a flecha. Então controle G, este vai ser nosso árabe, e nós vamos posicioná-los como eles se movem junto com isso. Então eu vou duplicar o círculo mais uma vez, e eu vou posicionar o círculo logo abaixo da nossa flecha assim eu vou esconder rapidamente a seta para o momento porque o que nós queremos é criar esta forma que vai ao redor. Então o que eu quero é que talvez possamos chamá-lo de forma assim e o que eu quero é remover a cor de preenchimento e nós vamos adicionar um traço off 50 e gap off 50 também. Assim. E vamos clicar em torno de Gap porque queremos que essas bordas sejam em torno basicamente. Então é isso para o processo de criação. Agora é hora de animar tudo. Então vou incluir a seta de volta. Eu vou esconder a forma que eu vou clicar bem aqui, apertar o controle D e para o segundo estado. O que eu quero é mover a seta um pouco para cima, que isso crie a ilusão de que ela está subindo. E nós também vamos reduzir você pagar cidade fora desta seta e nós vamos toe incluir uma forma basicamente, mas no primeiro estado forma não deve ser escondido. Esse é o meu erro que Shape deveria ter debaixo de uma cidade fora de zero. Então, basicamente, à medida que isto se move para cima, esta forma vai aparecer, e bem aqui em vez disso, ativar. Nós vamos movê-lo para baixo, Mas nós vamos incluir espera assim, certificar-se de que eles estão no mesmo lugar assim e simplesmente mover, ativar e descer abaixo. Então este vai ser o nosso segundo estado. E neste estado está basicamente indo para o pé Espere, um, um pouco. E então, no estado de Sturtz, isso vai começar a girar um pouco. Então vamos usar essa forma e vamos girá-la para que você possa segurar sua tecla shift e girar para algo assim, por exemplo, e teremos mais um estado. Mas em vez de duplicar este, vou duplicar este primeiro e, finalmente, o que precisamos é do estado final. Então aqui vamos ter essa cor verde. Então 55 D 466 assim em vez de esperar, vamos ter ativado. Então certifique-se de movê-lo para baixo até que ele se encontre no meio. Assim, certifique-se de mover esperando para baixo e o que queremos para este é que queremos esconder a forma, mas queremos incluir a marca de verificação de volta assim. E como podem ver, temos cinco tábuas diferentes como vocês deveriam, e isso muda da espera ativada do dedo do pé. Está indo para o pé. Espere um pouco. Isso vai girar, e finalmente vai mostrar ativado no final com um botão de cor verde. Então não, é hora de animá-lo, e eu vou te mostrar como você pode fazer isso. Então é muito simples. Você pode clicar no protótipo, até mesmo clicar no botão, arrastou estas alças azuis aqui mesmo. Vamos ter a torneira. Também animar para a transição está dentro e duração desligada 0,6 segundos. Agora, para o segundo estado, você vai usar o tempo, então escolha o tempo e para o atraso, vamos escolher 0,6 segundos. A flexibilização vai ser fácil e fora e a duração vai ser de 0,6 segundos. Faça o mesmo por este e, finalmente, faça o mesmo por este. E vamos dar uma olhada. Vamos ver o que criamos. Então, quando você clicar nele vai mudar de espera. Isso vai girar para a esquerda e para a direita, e vai mostrar acionado, então é realmente fácil. É muito simples. Você pode fazer um pouco mais com ele. Então, por exemplo, podemos Talvez quando você clicar sobre isso, ele vai se esconder nesta seta quando você cria uma mesquita logo acima do mesmo líquido que para o texto. Então ele vai esconder a seta, e então você pode mudar este círculo Togo de sujeira, cor para traço. E então essa forma vai aparecer para que você possa adicionar um pouco mais de variação a este design . Mas eu acho que este é realmente um bom ponto de partida para você. É realmente bom, limpo, fácil, fácil, simples de criar, e você pode então adicionar a partir daqui você pode até mesquita esta forma para que ele possa aparecer a partir daqui . Você pode saltar para trás, toe seção Icahn fora do discurso e você pode ver que nós criamos este ícone e você pode incluir essa animação nesta animação botão para que ele realmente possa construir sobre ele. E você pode criar algo completamente diferente do que eu criei neste vídeo . Então é isso para este vídeo, e eu vou te ver no próximo. 20. Botão 4: neste vídeo. Nós vamos criar este menu suspenso e você tem essa seta dentro do círculo, e quando você clica nele, ele vai se expandir e a seta vai virar o dedo X para que você possa fechá-lo. E você tem esses itens de menu dentro desta caixa. Então, quando você clica na caixa de roupas vai entrar em colapso de volta em círculo e o X vai virar para trás dedo para baixo seta mais uma vez. Então, vamos começar. Então, como sempre, tenho o quadro de arte a 500 por 500. Vamos criar um círculo rápido. Eu vou usar este controle de cor de batida C controle de peso baseado em e eu vou remover a borda porque nós não precisamos dele. E vamos usar o tamanho de 54 por 54. Eu acho que funciona bem, eu vou posicioná-lo aqui e chamá-lo de círculo como Então Agora vamos criar o nosso Xman. Vamos clicar aqui e, em seguida, aqui usando o mental. Eu vou acertar o animal de fuga para esconder o círculo para que você possa ver como ele se parece com ele. Vamos ver o que podemos fazer. Podemos usar o tamanho de três assim, e podemos usar em torno do Kip para que possamos contorná-lo. É chamado de linha um como então ele controlava o e inferior. Vamos chamar uma linha para o estoque. Um. Podemos girar a 1 35 assim e o que quer? Vamos girar em 45 assim, e podemos ter um bom X e podemos pressionar o controle G para agrupá-los e chamar isso de perto assim . E podemos virar o círculo para trás e não podemos mudar a cor dessas linhas do dedo do pé branco. Eu assim? E podemos agrupar isso também. Mas antes de o fazermos, podemos clicar aqui no dedo do pé, fazê-los estar no centro. Você pode até despreparar isso se quiser. Na verdade, cabe a você. Mas vamos manter o grupo e chamar isso de perto assim. E nós vamos agrupar esses dois e chamar isso de perto mais uma vez. Vamos ver. Sim, isso parece bem, agora o que precisamos criar é um retângulo. Então o que eu realmente vou fazer é duplicar neste círculo ou ainda melhor. Vamos criar um novo retângulo cerebral e vamos usar o tamanho 235 com 235 como então eu vou remover a borda. Inclua a mesma cor de preenchimento. E para esses retângulos arredondados, vamos usar 30 para o raio do canto, e eu vou me mover neste retângulo Isso é bom. Isso está se movendo para baixo, e o que eu realmente vou fazer é alinhá-lo com este círculo para que você possa bater três, por exemplo, apenas para que você possa baixar sua cidade de pagamento dele e posicioná-lo Toby, alinhar com a borda superior do círculo, bem como com a borda direita. Então o que eu quero fazer agora é adicionar algum texto. Então, o que é, por exemplo, controle doméstico, O A. Vamos usar a Velha Princesa como fizemos. O que você pode fazer é que você pode alinhá-lo com o círculo como se alinhasse até aqui. 1234 e 1234 Talvez você possa usar para gostar assim controlar D e mover esta parte inferior e vamos chamar esta loja, por exemplo, assim, e certifique-se de que está em 40 para se você acha que é demais. Vamos usar 20 só para que possamos manter as coisas simples. Mova este para baixo. Isso vai vencer o Blawg assim, e apenas ter certeza que é um 20. É, E o que queremos fazer agora é mover tudo isso para baixo, bater lá no seu teclado ou aumentar a sua cidade de pagamento. Tudo bem, então o que eu quero fazer e agora é apertar o controle. D e eu queremos chamar esta mesquita porque vai ser a mesquita para toda a coisa. Então eu vou clicar em todo o turno. Clique no retângulo bateu o botão direito e mesquita com forma. Então, como você pode ver, basicamente nada aconteceu. Eu vou chamar essa mesquita, e nesta mesquita eu vou pisar em cima de sua base apenas um pouco, e isso vai ser tudo, basicamente para nossa parte de design. E como você pode ver, agora temos esta mesquita e quero fazer Finalmente, é mudar a cor deste texto dedo branco assim, e isso é basicamente para o processo de criação. Certifique-se de que tudo está bem alinhado como está, e o que você pode fazer é agrupar esses dois e simplesmente movê-los para o centro. Fora dos nossos portos. Vou dar o dedo do pé. Desembrulhá-los agora e este será o nosso estado final, basicamente. Então eu vou acertar o controle de no aeroporto. Vou deixar assim para o segundo estado. E para o primeiro estado, tudo que você realmente tem que fazer é pegar sua mesquita, segurar sua tecla shift e simplesmente torná-la muito menor até que basicamente se encaixe bem aqui neste círculo. E então você clica em algum lugar lá fora. Como podem ver, escondeu esta mesquita. Então o que eu quero fazer a seguir é clicar duas vezes dentro e eles vão clicar mais uma vez nesta linha . Um que vou posicionar. É em algum lugar por aqui, digamos, como então por que eu cliquei na linha e posicionei até que eles se encontrem no centro assim ? Para que você possa ter essa forma de seta agradável e, finalmente, o que eu quero é movê-la no centro do círculo assim, e isso é basicamente para a parte de criação. Agora está animado. Você pode bater protótipo e você pode clicar sobre ele, arrastar a alça azul que podemos usar toque grande notícia. Auto anima o que o uso está dentro e talvez 0,6 segundos e usar as mesmas propriedades para a parte de trás. Então, vamos clicar aqui, e quando você clica nele, como você pode ver, ele salta para fora. Seta vira o dedo X, e quando você clica nele de volta, ele salta de volta para o estado original. Então é isso para este vídeo. Espero que tenhas gostado e vejo-te no próximo. 21. Botão 5: neste vídeo, nós vamos criar este botão flutuante agradável, então quando você clicar nele vai virar o dedo X e este menu vai aparecer e quando você clicar nele de volta, vai virar o dedo do pé mais mudar a cor e ir para o meio. E se eu clicar nele mais uma vez, você pode ver esta pequena animação como os itens estão chegando ocorreu. E quando você fecha, você tem a mesma animação mais uma vez. Então vamos começar. Então, para economizar um pouco de tempo neste vídeo, eu não vou mostrar a vocês como eu criei tudo. Porque você pode verificar isso no vídeo anterior porque nós temos o mesmo tamanho para este fundo. Criamos este ex a t exatamente da mesma maneira que fizemos no vídeo anterior. Temos este passado. Temos esta mesquita dentro, e este retângulo tem exatamente o mesmo tamanho do vídeo anterior. Acabei de adicionar mais um item aqui para o contato, e incluí esses ícones aqui. E se eu selecionar todos eles e mostrar o espaçamento. Então, se pressionarmos shift e seta para a esquerda 12 você pode ver lá em 20 pixels da borda esquerda e para o texto se ele tinha deslocamento um para seus 20 pixels a partir deste ícone. Todos esses ícones estão posicionados no meio porque a casa é o maior ícone. E todos eles estão no meio, ao lado do ícone inicial. Temos esta mesquita no topo. Basicamente, a mesma mesquita que usamos no vídeo anterior. Então, basicamente, eu dupliquei esta camada erguida, coloquei em cima, selecionei tudo certo, clique camada com mesquita e tudo está agora dentro desta mesquita. E finalmente temos divulgado. Então, basicamente, como eu disse, exatamente a mesma configuração do vídeo anterior para que você possa assistir e aprender como eu criei tudo. Então, basicamente, este vai ser o nosso estado final e nós temos que criar o nosso primeiro estado. Então, para fazer isso, vou bater no controle. D. Então, como eu disse, este é o nosso estado final. Este é o nosso primeiro estado. Então eu estou indo dedo do pé controle de hit e clique em Insight. Eu vou clicar aqui, digitando três e então três e c seis ff apresentador para ter esta cor azul agradável e o que realmente vai fazer com isso é eu vou girá-lo. Então eu vou segurar no centro de imprensa menos 45 para obter este ícone mais. E o que eu também vou fazer é clicar aqui, então bem aqui , posicioná-lo bem no meio do nosso porto. Em seguida em ir dedo do pé, esconda-o rapidamente para que eu pudesse mostrar-lhe o que eu fiz com estes itens. Então, como você pode ver, todos esses itens estão agora no segundo lugar do nosso porto. Mas no primeiro quadro inicial, vamos espaçá-los um pouco para que possamos ter aquela animação agradável enquanto eles estão entrando no lugar. Então você pode clicar no 1º 1 que é o Michael inteiro. E mais uma vez, você terá todos esses arquivos nos arquivos de prática e você pode brincar com ele para que você possa selecionar tudo. Mas eu não vou selecionar todos Michael e para casa logo indo para o pé Segure minha chave de controle. Clique e clique para que eu possa de selecioná-los e no resto deles eu posso segurar shift na seta inferior 1234, por exemplo. Como um dedo do pé inteiro controlado, o selecionado estes para deslocar ambos a medula 1234 e controlado o selecionar estes dois e finalmente, mudar 1234 apenas para que eu pudesse ter um pouco mais de espaçamento entre cada um desses itens. E agora o que tenho que fazer é selecionar todos eles. Então eu vou clicar no ícone da página inicial. Vou clicar no contato, e o que eu também vou fazer é basicamente empurrá-los para baixo e a gravidade fora. Seu efeito depende de quanto você empurrá-los para baixo. Então eu não vou realmente empurrá-los todo o caminho para baixo. Eu só vou colocá-lo, por exemplo, por exemplo, aqui e finalmente para a mesquita. Inclua as roupas de volta. Vou clicar na mesquita. Eu vou segurar o turno velho e o clique esquerdo, e eu estou indo para cima, decidir aqui, e quando você clicar em algum lugar fora, tudo vai ficar escondido, como você pode ver aqui. Então é basicamente isso para o nosso design. Vou fechar isto e passar para o protótipo. Vou clicar no nosso botão e arrastar o dedo para cá. Estamos indo para o seu passo ou dedo animado Fácil uma saída e duração 0.6 segundos. Se você quiser que este dedo dure mais tempo, você pode usar, por exemplo, 0,8 ou um segundo. O que? Achei que isso funcionasse bem e arrastasse a mesma alça para trás. E se eu clicar aqui para visualizá-lo e você pode ver como ele se parece assim todos eles estão pulando no lugar. Você pode clicar aqui, e como você pode ver, todos eles estão vindo no mesmo lugar e você tem essa animação agradável, e isso mais gira dedo X e muda de cor bem agora. Uma última coisa que esqueci de mencionar é que adicionei uma pequena sombra. Então, se eu clicar no círculo dentro deste próximo, você tem essa sombra. Então é 036 e se eu clicar aqui, ele está usando este 000 então basicamente cor preta em 16%. Ou pagar cidade, e para reduzir ou aumentar suas bases, você pode mover este isqueiro, mas vamos mantê-lo de volta em 16%. Então é basicamente isso para este vídeo. Espero que tenhas gostado, e vejo-te no próximo. 22. Botão 6: neste vídeo, vamos criar este interruptor de alternância para que tenhamos o X bem aqui, e quando você clicar nele vai mudar a cor e ir para marcar Marcar. Como você pode ver, ele meio que se transforma em cheque Mark, e quando você clica sobre ele de volta, ele muda de volta dedo X. Então, mais uma vez de X para marca de verificação de Jack Mark de volta para ex, quaisquer alterações chamador também. Então, vamos começar. Então, como de costume, eu tenho o nosso porto a 500 por 500 quando usar o clique mental aqui e depois aqui mesmo , eu vou acertar a fuga. Ele usou três para o tamanho e clique aqui para adicionar o kep redondo. Se aproximarmos um pouco mais, você pode ver como isso se parece. E eu vou chamá-lo de Linha um Controle de e isso vai ser uma linha para na primeira vez. Vamos usar 135 no 2º 1 Vamos usar 45 assim, e eu vou fazer um belo círculo ou 54 por 54. Então, assim, eu vou chamá-lo de círculo assim, e eu vou ter certeza de que tudo está no meio assim. Vou me mover nessas duas linhas no meio, assim. E o que eu realmente vou fazer agora é selecionar esta cor hit controle C clique no campo Controle V, e eu vou remover a borda das linhas. Eu vou escolher a cor de branco assim, e eu vou agrupar todos eles e chamá-los círculo assim. E o que eu quero fazer agora é ter certeza de que está no meio que está, e eu vou usar a ferramenta de retângulo. E para a altura, vamos usar 54 então basicamente a mesma altura do círculo. Então, para a altura como esta e para a sagacidade, vamos usar o dobro. Então que usar 108 assim e vamos usar canto, raio ou 50. Isso funciona bem, posicioná-lo para estar no meio e chamou este, mas nada demais, assim. E para este primeiro estado, vamos movê-lo para esta borda esquerda assim até que a carne aqui, então é basicamente o nosso primeiro estado. Vamos atacar o controle Dion Yard pobre para criar um segundo estado. E para este para a cor do círculo, vamos usar três pc seis f f centro de imprensa e o que eu quero fazer agora é girado um pouco como este, por exemplo, assim. E eu vou movê-lo todo o caminho até o limite assim. E o que queremos fazer agora é morrer um pouco mais fundo e criar uma marca de seleção. Então eu vou clicar duas vezes nesta linha. Vou movê-lo para algum lugar por aqui. Eu também vou estender um pouco. Então, em algum lugar por aqui, vamos ver algo assim de uma maneira de falar vazamento quando esta outra linha garantir que eles se encontram no meio assim, e eu vou clicar nesta linha e simplesmente reduzi-lo para algum lugar por aqui. Eu acho que parece bem, e eu vou selecionar ambas as formas. Certifique-se de que eles estão no meio do nosso círculo assim, e se você não gostar, você pode mudá-lo. Você pode se certificar de que você seleciona e forma que deseja e você pode mover. Estes pontos são quase tanto quanto você gosta, mas eu acho que isso parece bem. Agora. Vamos animar. Eu posso clicar no protótipo, clicar no meu interruptor total e arrastar a alça aqui. Você está indo para você passo ou para animar para a transição. Fácil agora, e podemos usar 0.6 segundos, e podemos usar a mesma ação para voltar e vamos ver como isso se parece. Então, quando você clicar nele vai mudar a cor e mudar de volta, rebocar este ícone de marca de seleção, e quando você clicar nele novamente, ele vai dedo do pé mais de volta para o X. Agora você pode brincar com diferentes mesquitas, e, por exemplo, você pode criar um dedo do pé da mesquita de fundo aqui, então ele vai mudar à medida que você mudar isso. Então, vamos fazer isso rapidamente. E, por exemplo, podemos escolher a cor Toby a cor fora disso e para o círculo. Podemos usar a cor da borda fora do branco, por exemplo, assim, e para este círculo, vamos usar a cor da borda fora do branco também. Mas para este, vamos usar esta cor para que você possa rapidamente experimentá-la daqui e para a borda. Você consome Plett também, assim, se você gosta de como isso parece e agora vamos visualizar rapidamente madeiras, então quando você clicar sobre ele é, você pode ver mudanças de cor se isso é algo que você quer. Caso contrário, você pode até alterar as cores de fundo. Então, por exemplo, você pode mudar este Toby uma cor mais clara, e então ele pode ir de cor mais clara para esta cor branca. Mas cabe a você e você condena a experiência com isso, então é isso para este vídeo, e eu vou vê-lo no próximo. 23. Botão 7: neste vídeo, vou mostrar-lhe como fazer este botão, que diz fazer o pagamento e tem esta cor azul. Quando você clica nele, ele muda de cor. Este texto aparece com esses pontos mudando e finalmente muda de cor mais uma vez para o sucesso . Então vamos ver isso mais uma vez. Então, quando você clica nele, esses pontos estão mudando. Como você pode ver, ele muda de cor mais uma vez, e muda pilhas para o sucesso. Então vamos começar. Então, mais uma vez eu tenho meus portos em 500 por 500. Vamos criar um botão. Eu vou usar a ferramenta retangular, retângulo do Olho de Dragão e vamos usar 2 a 5 peso 70 digamos, como em todos os outros exemplos. E para os preparativos de canto, vamos usar 50 Vamos remover a borda e vamos usar essa cor. Então veja, uma vez que ele quiser ele quer uma cor cinza bonita, e nós vamos chamá-lo de Bt e agora que usar o texto e para o texto. Vamos escrever algo como fazer pagamentos, ter certeza que vai do meio. É um 20 sentido aberto parece que em nossos outros exemplos, vamos mudar a cor dos brancos texto, e você está indo para posicioná-lo no centro como então certifique-se de que eles estão entediados barco no centro. Então agora basicamente, temos esses dois. Temos botão e temos o texto. Agora vamos esconder o texto por um momento e vamos trabalhar no nosso fundo, então vamos fazer algumas cópias dele. Então vamos usar o controle D para fazer uma cópia má e eu vou chamar esta mesquita de botão. Assim. E para estes dois. Vamos chamar esse botão azul e eu vou segurar minha chave antiga e ampliá-la um pouco . E este vai ser o nosso botão azul. Então vamos usar a cor três e c seis f centro de imprensa. E como você pode ver aqui no fundo, agora é azul. Vou fazer outra cópia e chamar este botão verde. E para esta cor verde, deixe-me verificar rapidamente minha cor. Vamos usar esta cor para 55 D 466 E mais uma vez você terá isso em seus arquivos de prática. Mas como podem ver, está bem aqui. Agora eu vou selecionar todos eles e o que eu realmente vou fazer é selecionar tudo e apertar o controle. G para fazer o grupo principal Então fundo não. Vou selecionar todos os nossos botões. Certo. Clique na mesquita Judeus com forma ou mudança. Controle em ou turno. Comande-os como quiser. E eu vou chamar esta mesquita inferior assim. E o que nós realmente vamos fazer é ir para o pé, eu acredito que a cor principal, Toby Blue. Então deixe aqui e eu vou mover a cor verde bem aqui no topo. Então em algum lugar por aqui, e então ele clica lá fora. Você pode ver que temos esta bela cor azul. Agora vamos trabalhar no nosso texto. Então nós temos que fazer o pagamento, eu vou fazer outra cópia de Controle D e eu vou chamar este processamento assim e vamos criar nossos três pontos. Então eu vou fazer apenas bom círculo grande removido a fronteira e chamou o círculo um controle de batida . De chamou este círculo também, e apertou o controle. De chamou este círculo três como Então eu vou mover estes dois e eu vou tê-los em cinco, como você pode ver e finalmente fazer o mesmo com o número três. Então, se movermos este número três com a minha tecla de seta para a esquerda, então 12345 Como você pode ver cinco pixels desta borda, bem como cinco pixels desta borda. Então eu vou mover todos esses círculos e logo abaixo do processamento. Selecione o processamento, bem como os círculos e certifique-se de que eles estão no meio fora de nosso fundo, assim como eles são, e certifique-se de que eles estão no meio assim e certifique-se de que todos esses círculos estão no meio como Bem. Ou se não o fizer, pode movê-los Toby para algum lugar por aqui. Então, basicamente, apenas na borda inferior do nosso texto, eu acho que funciona um pouco melhor. E finalmente, vamos movê-los para algo como 10 ou 20 pixels. Vamos ver o que funciona melhor. Sim, vamos movê-los. É 10. Selecione, uh novamente e certifique-se de que está no meio assim Agora Finalmente, vamos esconder tudo isso para que possamos ver isso Fazer pagamento bater controle de mais uma vez, posicioná-lo todo o caminho até o topo, esconder para fazer pagamento e este vai ser o nosso sucesso assim e garantir que o sucesso está no meio. Igual a todas as outras. Então o que vamos fazer agora é incluir tudo de volta e nós estamos realmente indo toe criar uma nova forma logo acima desta vai ser a nossa mesquita. Então você pode chamá-la de mesquita assim e ter certeza que a forma está no centro fora do nosso círculo, assim. Então o que eu realmente vou fazer com a mesquita é no alto da fronteira esconder o campo porque nós não precisamos dele. Vou selecionar a mesquita, manter o turno, selecionar tudo o resto abaixo, clique direito e mesquita com forma. Vou chamar essa mesquita de texto assim. E o que realmente vai fazer é remover tudo, exceto fazer pagamentos. Então eu vou segurar a tecla Shift e seta para cima. Não, nem tudo fora da nossa mesquita. E quando eu clicar lá fora, você pode ver que só restam este texto de pagamento. É exatamente o que queremos. Então o que vamos fazer agora é duplicar este nosso quadro então eu vou clicar nele, ele controle e D, e agora vamos começar a fazer essas mudanças. Então, dentro da mesquita de texto, temos que posicionar o processamento, bem como esses círculos no círculo central mudando seta inferior até que eles se encontrem no centro assim e simplesmente se movem. Faça o pagamento abaixo até ficar fora de vista. E para a mesquita inferior, vamos usar a cor azul. Vamos removê-lo todo o caminho para baixo assim. E se eu clicar lá fora, ficaremos com este ótimo botão. Então é isso para este estado. E nós vamos ter outro e outro. Então, neste 1º 1 vamos girar esses pontos. Então eu vou localizar o círculo número dois e número três, selecionar o barco fora deles. Passe o mouse aqui com o clique do mouse chamado My Shift Key e girá-los assim, tão círculo completo. Você pode fechar isso e agora no nosso último aqui, você pode fazer o mesmo novamente. Então, dentro da mesquita de texto. Mas agora nós circulamos um e circulamos, também, então eu vou para casa uma tecla Shift, girá-los círculo completo assim. Vou fechar isto e finalmente fazer um estado final. Então este vai ser o nosso botão verde para que você possa abrir tudo texto aberto, mesquita, clicar no sucesso, posicioná-lo no meio assim E agora eu vou selecionar círculos de processamento e movê-los para fora de visão assim. E finalmente, vou abrir a mesquita e clicar no botão verde e posicioná-la no meio como eu. Se eu clicar lá fora, você pode ver que agora temos essa cor verde, e é basicamente isso. Então agora temos que protótipo tudo. Então o que eu vou fazer é clicar no nosso botão e arrastá-lo para aqui. E a partir daqui, eu quero usar auto animates como então eu vou escolher facilidade em fora 0.6 segundos. Assim, agora para os próximos três estados. Quero dizer, quatro estados, na verdade, vamos usar o tempo, então arraste assim. Use o tempo agora para o atraso, quando usar 0,6 segundos. Fácil uma saída. Então tudo está como deveria. E durante a duração, você pode deixá-lo em 0,6 segundos. Então você pode clicar aqui, arrastou a vela azul clique aqui, arrastou a vela azul mais uma vez para este último estado. E se apertarmos a pré-visualização aqui, se eu ampliá-la e clicar nela, você pode ver que temos aquela animação agradável e agora mostra sucesso no final. Então, se eu clicar mais uma vez, você pode ver que temos essa animação agradável e tem sucesso no final. Então é isso para este vídeo, e eu vou te ver no próximo. 24. Botão 8: neste vídeo, eu vou mostrar a vocês como você pode criar este anúncio inferior, e quando você clicar nele, ele vai basicamente dividido em quatro partes, e nós vamos ficar com este X no meio. E quando você clica, quando o X tudo vai colapsar de volta no reboque, um botão e o X vai mudar de volta para mais. Então vamos começar. Então o que eu tenho aqui é que eu tenho quatro ícones diferentes, basicamente os mesmos que eu usei antes. E eu tenho essa vantagem no meio, basicamente a mesma vantagem que usamos antes no vídeo anterior. Então, como você pode ver, nós temos essas duas linhas e eu vou girá-las um pouco mais tarde e nós temos o círculo. E para um círculo, temos 80 com 80 e para esses outros círculos lá um pouco menor. Então 72 por 72. Então eles estão indo para o pé. Adicione isso um pouco mais do interesse visual quando eles se separaram deste círculo principal, então eu os posicionei 20 pixels para cima, então mude 12 Como você pode ver em todas as direções e vamos começar a animar tudo. Agora, como de costume, você tem isso em seu arquivo de prática para que você possa abrir seu arquivo de prática e usar esses ícones para seus outros projetos. Nossa experiência com ele um pouco mais. Vou clicar aqui, apertar o controle e D para este segundo estado. E para este primeiro estado, basicamente, eu vou selecionar todos esses ícones. Então clique no primeiro 1 chamado Shift Clique no último e clique aqui e, em seguida, aqui para colocá-los todos no meio. E eles estão todos por trás deste anúncio, basicamente . E neste segundo estado, eles vão expandir-se até aqui. Mas o que vamos fazer agora é abaixar a opacidade deste círculo, e vamos girar nossas linhas como então certifique-se de que você inclui a opacidade antes que você mude de mais dedo X então, assim e nós vamos mudar a cor da borda deste azul extra assim. E agora vamos abaixar a opacidade disso, e isso é basicamente para a parte de design. E para a parte do protótipo, você pode simplesmente clicar aqui, arrastá-lo para você pisar. Use auto animate que você pode usar está dentro. E, por exemplo, 0,6 segundos funciona bem e, finalmente, para a parte de trás. Vamos usar o mesmo botão, e ele vai manter as mesmas configurações. Então, quando eu clico aqui, aperte a visualização e clique dentro, você pode vê-lo se divide em quatro botões diferentes que o usuário contém clique, ou se eles não querem clicar, fazendo clique aqui, e é vai saltar de volta para o fundo original. Você pode brincar com ele. Você pode girar estes se quiser, então quando eles vierem atrás deste botão azul, eles vão girar um pouco. Faça um círculo completo, por exemplo, e depois uma terra no mesmo espaço que este. Então você pode realmente brincar com ele. Você pode fazer mais alguns efeitos. Então, por exemplo, você pode deixar este dedo do pé, ter uma borda, e então você pode aumentar essa borda para, por exemplo, esta espera bem aqui, mas não do botão inteiro mas fora do círculo em si. Então use a borda, usou a mesma cor fora deste excluído, preenchido e, em seguida, aumentar o tamanho. Por exemplo, assim para que você possa combinar todos eles, por exemplo, E então vamos ver como isso se parece. Então talvez eu possa posicionar tudo para trás, assim, e vamos ver como isso funciona. Então, como você pode ver, ele meio que se divide no reboque para diferentes ícones e, em seguida, basicamente, colapsa de volta no reboque. Um ícone para que você possa fazer esses tipos fora mudanças se você quiser, mas eu acho que isso funciona bem o suficiente em basicamente, eu acho que ele mostra a intenção por trás deste botão. Então é isso basicamente para este vídeo, e eu vou te ver no próximo. 25. Botão 9: neste vídeo, eu vou mostrar como você pode criar é Donald Bottom. E quando você clica nele, você pode ver esse tipo de progresso verde e a marca de seleção no final para indicar que o Donald está concluído. E se um jogador voltar mais uma vez, você pode ver como isso se parece. Então vamos começar. Então, como de costume, estamos começando com er porta de 500 por 500 Estou usando este ícone. Eu vou usar o dragão ferramenta retângulo eu falo retângulo, e vamos usar parece que fizemos para todos os botões anteriores. Então vamos usar para cinco com 70 assim. E eu vou usar o raio de canto fora 50 e eu vou posicioná-lo no meio Dragão abaixo chamado seu bte Dan por assim e eu vou fazer um er duplicado. Então eu vou bater controle d chamar esta cor verde assim e bater controle de mais uma vez chamado esta mesquita e para esta cor verde, eu tenho a cor já selecionada, então deixe-me copiá-la rapidamente. Então vai ser esta cor tão 55 D 466 E se eu ir em frente e esconder a mesquita, você pode ver como isso se parece. Então nesta mesquita, vamos esconder a fronteira e o campo também. E para esta cor verde, vamos esconder a borda assim e vamos selecionar estes para clicar com o botão direito e mesquita com forma, como vamos chamar esta mesquita. E o que eu quero fazer para esta cor verde é bater minha chave antiga e simplesmente estender os lados foi para segurar minha tecla shift em abaixá-lo todo o caminho para baixo assim. E quando eu clicar em algum lugar do lado de fora, você pode ver que esta mesquita foi criada. Agora que o fundo está completo, o que precisamos fazer é criar uma marca de seleção. Então vamos primeiro agrupar todos esses itens para chamá-la de botão assim. E eu quero criar uma marca grande e agradável. Então eu vou talvez simplesmente copiar essas formas ou usar minha caneta tal para algum lugar por aqui. Talvez tenha escapado. Eu estou indo dedo em torno kep para o tamanho e reduzido para, e isso é basicamente ele permite chamado sua marca de verificação como assim, e eu vou posicioná-lo para estar no centro. Então eu vou fazer isso assim. É alto, esta carga agora. Então não é confuso para nós. Posicione-o no meio assim. E isso é basicamente para o seu design. Vamos mover a marca de seleção logo abaixo para baixar. Vamos reduzir a opacidade assim. Mas talvez possamos incluir a fronteira Toby White porque esta marca de seleção será branca uma vez revelada. Então isso é basicamente para 13 processo de design. Agora vou fechar este botão e vou fazer uma cópia rápida. E neste aqui, o que eu quero fazer é simplesmente sobre Você paga City fora com este ícone Donald? Podemos atacar o Control de mais uma vez. O que eu quero fazer neste aqui é trazer de volta essa cor, então eu vou incluí-la de volta. Então é clicar sobre ele assim, e eu vou posicioná-lo para estar no centro assim. Como você pode ver, fundo agora é verde, e o que eu também quero é apertar o controle D e agora vamos trabalhar em um cheque Mark. Então, nesta fase, vamos clicar duas vezes dentro e nós estamos indo toe talvez nem mesmo editado no momento . Então vamos fazer primeiro duplicar controle de. Então, basicamente, este vai ser o nosso estado da tia, e este vai ser um estado do meio. Então agora eu vou saber Clique nele. Eu vou dedão, traga esse dedo aqui. E neste 1º 1 também podemos mostrá-lo por enquanto, Clique duas vezes, e vamos trazer esses dois pontos até o ponto inicial assim, até que você obtenha o círculo, eu vou baixar sua cidade de pagamento para zero. E o que eu quero é copiar esta camada. Então eu vou bater o controle C. Eu vou fechar isso e eu estou indo toe basicamente baseado em todas as outras camadas para que nós temos a mesma camada. Então ele vai abaixo do download para que quando começarmos a animá-lo, ele vai funcionar corretamente em todos os estados trill d assim E vamos verificar rapidamente se temos tudo corretamente, você deve ter cinco nossas placas. Então, como podem ver, temos cinco deles. Então agora vamos começar a prototipagem. Então eu vou clicar em um protótipo clique aqui. Vou arrastá-lo até aqui e para este. O que queremos é usar o gatilho de torneira. Não usaria carne automotiva. Nós vamos usar fácil e fora assim e vamos usar 0.3 segundos agora para este segundo estado. Vamos usar o tempo. E pelo tempo aqui, vamos usar o atraso de 0,6 segundos. Também animar. Facilitar e direção vai ser um segundo, porque queremos dar-lhe algum tempo até que ele preencha. E revela essa cor verde. Agora, para o próximo estado. Nós também queremos usar o tempo 0.6 como o atraso. Fácil e fora. Mas aqui vamos usar 0,4 segundos. E, finalmente, para o nosso estado menos, o que queremos é também usar o tempo para o atraso. Vamos usar 0,0 segundos. Então basicamente zero segundos fácil. Uma saída e duração desligada 0,4. Então vamos ter uma pré-visualização de uma sequela. Parece que, como podem ver, temos o nosso traseiro. Vou clicar nele. Vai desaparecer. Vai encher. E agora temos essa marca de seleção. Então vamos ver que mais uma vez vai preencher. E temos esta marca de seleção para indicar que a boneca velha está acabada. Então é basicamente isso para este vídeo, e eu vou te ver no próximo. 26. Botão 10: neste vídeo, vamos criar esse fundo de compartilhamento social, então quando você clicar nele, ele vai se expandir e esses ícones vão aparecer. E quando você quiser fechá-lo de volta, você pode clicar aqui, e ele vai fechar e revelar para compartilhar ícone mais uma vez. Então, vamos começar. Então, como de costume, temos o nosso porto ou 500 por 500. E para encurtar algo, eu baseei isso. Alguns destes ícones no reboque aumentam a nossa velocidade. Primeiro, vamos criar um círculo. Então eu vou escolher o banco de elipse. Vou dar o dedo do pé. Coloque-o em 80 por 80. Certifique-se de que é completamente no centro como então eu vou remover a borda incluído preenchido cor azul três d seis c seis ff Centro de imprensa e eu vou basicamente movê-lo aqui. Eu vou chamá-lo de um círculo, e eu vou colocar o ícone de compartilhamento à vista, e eu vou ter certeza de que eles estão no meio assim Próximo eu vou mudar a cor do ícone de compartilhamento para esta cor branca. Eu vou agrupá-los e chamar este botão assim ou você pode ir compartilhar botão quiser em seguida, vamos criar o X. Então, vamos criar o X. em algum lugar por aqui, em algum lugar por aqui, em algum lugar por aqui, apertaria Escape que seria um três. Ou talvez seja também. Sim, dois é bom round Kep. Eu vou chamar esta linha um Controle De e neste fundo maravilha quando usar a linha para ambos deve ser branco e concordou em esconder uma parte por agora Quando este 1º 1 Vamos usar 135 E no 2º 1 Vamos usar 45 assim E eu vou posicioná-los no centro assim e assim. Então, para estar perfeitamente no centro deste círculo, vou incluir a parte que eu voltar, colocá-la em cima e vou reduzir a sua cidade salarial deste machado por enquanto. Em seguida, vamos criar nosso retângulo, que vai girar em torno de todos esses ícones. E para fazer isso, vamos usar a ferramenta retangular e vamos verificar novamente em nosso botão e ver círculo é 80 por 80. Então precisamos ser 18 série de altura e para o qual podemos essencialmente 3 20 ou algo assim. Podemos usar 50 para o raio do canto e para a cor, deixe-o escolher rapidamente essa cor já criada. Então é agradável, cor cinza suave e é B E B E E B E E E E Em seguida, eu vou posicioná-lo em algum lugar por aqui até que ele se encontre com a borda esquerda do nosso , uh, botão. Ele vai chamá-lo de praia como então posicioná-lo abaixo de tudo, e o que eu quero fazer agora é, por exemplo, podemos com 40 pixels, então selecione todos esses ícones de mídia social. Segure o turno. 1234 O D Select Facebook faz o mesmo para este. Então 1234 eles selecionam o Twitter e finalmente fazem o mesmo para este. Então 1234 e é basicamente isso. Então agora podemos começar nosso segundo estado. Mas antes de fazermos seu primeiro grupo, todos eles juntos controlam G chamado esses ícones assim. E se você acha que essa cor é um pouco escura demais, você pode baixar seu pastoso. Mas o que eu gosto de fazer é simplesmente escolher meus ícones para ser branco, e agora tudo funciona como deveria. E, claro, você pode posicionar tudo para estar no centro assim. Mas neste primeiro estado, vamos primeiro usar isso assim e vamos mudá-lo. Aperte o controle D e agora vamos criar nosso segundo estado. Então ouvir isso é um segundo estado. Mas certifique-se de que tudo está no centro que é. E certifique-se de alinhar tudo corretamente neste. E no 2º 1 vamos incluir as linhas de volta, e vamos reduzir a sua cidade salarial fora do nosso ícone de ações, então esse é basicamente o nosso estado final . E para este primeiro estado, vamos colocar o fundo no meio assim. E o que nós também queremos é reduzir a opacidade desses ícones assim e mover este ícone BG para estar no centro do nosso círculo em algum lugar por aqui, então não importa que tipo de forma você tem, então se eu esconder isso, você pode ver que não é um círculo completo. Realmente não importa. Mas importa que esteja no centro escondido por este ícone, basicamente. Então agora vamos protótipo de tudo rapidamente. Então o que eu vou fazer é clicar em um protótipo, clicar no ícone, arrastá-lo para aqui. Vamos usar o passo. Nós vamos usar auto animar, fácil e fora daqui revigoração de 0,6 segundos. E nós vamos usar a mesma interação para aqui. Então Teppo para animar Fácil agora em 0.6 segundos. Então, agora, quando eu voltar aqui, clique em pré-visualização, clique bem aqui. Você pode ver como ele se parece. Então, basicamente se revela. Altera o Toe X, e quando você clica para fechar, ele volta a ser compartilhado. Então é isso para este vídeo, e eu vou te ver no próximo. 27. Arquivo XD com botões: neste vídeo, eu queria mostrar-lhe os botões. Exe o arquivo. Este é o arquivo onde todas as animações estão contidas. Assim, sobre as emissões de todos os vídeos nesta seção fora do curso, e você pode rapidamente saltar para dentro. Verifique se você entendeu tudo corretamente. Você pode copiar ícones deste arquivo se você não os tiver ou se você não quiser baixá-los em nenhum outro lugar, você pode usá-los daqui para projetos pessoais e comerciais. Você pode copiar e colar essas animações e, em seguida, fazer alterações posteriormente em seus próprios arquivos . E você também pode usá-los em seu trabalho U Y ou UX. Na verdade, cabe a você. Mas eu dou. Vou lhe dar permissão total para usar este arquivo como quiser, basicamente para seu trabalho pessoal e comercial. E o que eu também quero mostrar a vocês é isso. Então eu criei esses ativos bem aqui. Então essas cores antigas estavam usando ao longo desta seção fora do curso para que você possa acessar rapidamente essas cores e copiá-las daqui, colá-las em seu próprio trabalho. Se você quer essas mesmas cores em seu próprio design e, finalmente, o que eu quero compartilhar com você é que você pode clicar em qualquer um desses. Então, por exemplo, este e você pode clicar em Play aqui para visualizar como ele se parece, então você pode clicar nele e você pode ver e ser lembrado da animação que criamos nesta seção fora do curso. Então, basicamente, para qualquer um desses, você pode acessar rapidamente essas animações e verificar se você tem tudo corretamente. E se você quiser usá-los, você pode fazer a partir daqui. Então é isso para este vídeo, e eu vou te ver no próximo. 28. Formulário 1: neste vídeo. Nós vamos criar este formulário de inscrição quando você clicar no campo de e-mail vai preencher o e-mail e, em seguida, quando você clicar na assinatura vai dizer inscrito e mudar a cor para verde. Então vamos começar. Então temos aqui em nossa porta fora 800 com 800 Eu vou rapidamente criar a entrada. Vamos usar 300 com 70 que é chamado de entrada. Essa vai ser a nossa entrada para o e-mail. Vamos usar, digamos, oito para o raio do canto. Ele controlaria D e este vai ser o nosso botão e para os robôs. E fomos usados 2 a 5 com 70 e vamos movê-lo rapidamente até aqui. Nós fomos usar a cor de preenchimento de três E C 6 f para o fundo, e você vai remover a borda indo para torná-los um pouco mais perto. Aperte o turno 1234 para a direita, Selecione ambos, agrupou-os e, em seguida, posicionado no meio Aqui. Grupo de ódio. Agora, para a entrada. Vamos digitar seu e-mail como então vamos usar 20 e open sense, assim. Posicione-o no meio, mova seu deslocamento para a direita 20 pixels. E nós vamos usar D d d d apresentador porque isso vai ser uma espécie de esta cor cinza claro . Vou duplicá-lo, movê-lo para aqui, ter certeza que vai do centro e digitando. Subscrever? Eu acho que sim. E eu fui usar a cor branca para ela e posicioná-la no centro. Fora deste botão aperte o control de mais uma vez. E neste, eu só vou adicionar de porque ele vai dizer inscrito como So. Então eu vou dar o dedo do pé. Mova estes dois para baixo assim e faça uma duplicata deste botão. Vou chamar este botão verde e este de baixo. Você pode deixá-lo assim, ou você pode chamá-lo de um botão de bolha. E finalmente, vou agrupar todos eles. Chame este botão e vamos criar uma mesquita. Basta usar retângulo normal. Desenhe uma borda removida retângulo, e você pode reduzir seu pastoso para zero. Clique duas vezes aqui chamado esta mesquita como assim e você está indo para selecionar o texto ea mesquita, clique direito e mesquita com forma. Você também pode usar o controle de turno Amolsch se elogiá-los, e nós estamos indo dedo do pé chamado esta mesquita como. Então, finalmente, vamos abrir a mesquita e mover o texto inscrito, que deslocam uma seta para cima para fora do caminho. E nós só vamos ficar com este texto de assinatura e para a entrada. Vamos fechar este rapidamente. Vou apertar o controle DE para duplicar este texto, e vamos usar essa cor para ele. Então eu vou apenas copiar e colar esta cor clique duplo, e eu vou digitar, sendo, sendo, por exemplo, designer em email dot com. Mentira e vamos criar uma mesquita para isso também. Eu só estou indo para rapidamente mesquita ele para algum lugar por aqui. Vamos ver, vou chamar esta mesquita assim, e vou remover a fronteira assim. Eu vou selecionar esses dois clique direito mesquita com forma, e porque ele não fez nada assim, vamos rapidamente chamar esta mesquita como esta. O que você vai fazer é realmente mover esta mesquita para a esquerda, então para algum lugar por aqui e mover a borda direita todo o caminho até aqui. E como podem ver, agora esconde o texto. Então nós estamos indo de pé animado para ir até aqui, e então ele vai revelar nosso texto. Então, quando você clica fora, ele vai ocultar e enviar mensagens de texto, e nós vamos agrupar esse controle de hit G e chamá-lo de e-mail assim. E finalmente, o que você vai fazer é parar de ser uma mensagem aqui. Então ele realmente copiar esse texto do meu outro porto e você vai movê-lo. Digamos que você queira 34 60 pixels até o topo, e vai ser sentido aberto em 28. Então vai ser um pouco maior do que o nosso texto original aqui. E isso é basicamente para a parte de design. Agora vamos fazer uma primeira cópia, Controle de calor profundo e o que você vai fazer nesta cópia. Nós vamos clicar no seu e-mail e nós vamos baixar e você paga a cidade para zero porque isso vai acontecer quando alguém clicar aqui vai baixar Dear Bay City dele, e agora nós temos que fazer outra cópia, e nesta cópia, vamos revelar o e-mail. Então, como se alguém tivesse tipos em seus e-mails. Então, mova esta mesquita para a direita, assim, dedo do pé, revele todo o e-mail. E finalmente, nesta última cópia, eles vão clicar neste botão. Então temos que fazer o estado final. Então, neste, nós vamos abrir esta mesquita, mover o texto inscrito abaixo até que ele se encontre com o nosso texto original de assinatura e assinar. Vamos nos mover todo o caminho para baixo, fora do caminho. E finalmente, vamos incluir este botão verde de volta. Mas o que eu realmente esqueci de fazer é que eu esqueci de incluir a cor deste botão verde. Então eu vou fazer isso agora. Rápido. Então o que eu realmente vou fazer é selecionar este botão verde e eu vou usar a cor . Vamos ver, qual é a cor da tela. Então é 55 D 466 Eu vou pressionar enter e eu estou indo para baixo do dedo do pé. Você paga a cidade ou isso? Então deixe-me rapidamente, clique em copiar, e eu vou descer sua cidade base para baixo. Eu vou manter o meu controle e rápido dentro clique com o botão direito da aparência baseada, e eu vou baixar o seu basicamente para baixo clique com base na aparência mais baixa. Você baste-lo para baixo e clique direito com base na aparência e ele vai ser em 100%. Então, todos esses três, está em zero. E nesta final, está a 100%. Vamos verificar rapidamente se tudo está correto. Eu acho que é. Então vamos fechar rapidamente tudo assim e agora é hora de protótipos, então eu vou clicar no protótipo. Primeiro usuário terá que tocar neste campo de e-mail porque ele deseja inserir seu e-mail. Então vamos arrastá-lo para fora. Vamos usar a torneira e para a transição. Vamos usar inimigos automáticos aliviando e 0,4 segundos agora no 2º 1 Queremos usar o tempo porque queremos que algo aconteça depois de um certo tempo, então teremos um pequeno atraso de 0,4 segundos. A animação automática está fora, e a duração vai ser em um segundo agora. Finalmente, queremos que alguém clique no botão de assinatura porque ele insere seu e-mail e quer se inscrever. Então, vamos clicar na animação de inscrição Você passo ou dedo do pé. Subscreva. Ele está fora. E finalmente, o que queremos para o tempo é 0.4 segundos. Então vamos clicar em pré-visualização e ver como tudo parece. Então, quando você clicar aqui vai esperar para revelar o e-mail e, em seguida, quando você clicar , subscrever vai mudar a cor e sobre este texto inscrito sobre a assinatura. Então vamos ver isso mais uma vez. Então, quando você clica aqui, e-mail sai quando você clica. Assine, diz que está inscrito. Então é isso para este vídeo, e eu vou te ver no próximo. 29. Formulário 2: neste vídeo, vamos criar este formulário de assinatura. Temos e-mail e a senha, e finalmente um botão abaixo. Quando você clica no e-mail, ele vai sentir o e-mail e esta linha vai ficar verde. Temos a senha vai fazer a mesma coisa para a senha. E finalmente, quando você clica, este botão de entrada está indo para o dedo do pé. Tenha esta marca de seleção para indicar que você tem o site em, e então você pode imaginar que a transição vai acontecer após a tela para o próximo . Então vamos começar. Então temos em nosso porto de 800 por 800. E vamos adicionar algum texto, alguém para digitar, entrar , usar o senso aberto aqui. Assim e para o tamanho. Vamos usar 28 eu mesmo. Ou talvez possamos usar 30. É bom. Certifique-se de que vai pela esquerda. Em seguida, vamos toe hit control profundo, duplicado e arrastar esta cópia inferior abaixo, e agora vamos criar um campo. Então vamos primeiro criar texto escrevendo seu e-mail selecionado. Vamos usar 20 para ele e para os colonos usaram apresentador DDT. Agora temos que criar nossa linha. Então vamos criar uma linha abaixo. Vamos tê-lo em 400 para a cor que usou esta cor, então usá-lo para o filme. Remova a borda. E para a altura, vamos usar um pixel ou talvez até dois. Um é apenas para 10 e podemos selecionar tudo na linha. Tudo à esquerda pode ser usado assim. Isto vai ser uma linha, e vamos arrastá-la logo abaixo do nosso e-mail. E vamos posicioná-lo, por exemplo, 40 20. Acho que é bom o suficiente. Agora vamos duplicar seu e-mail. Ele controlaria D. Vou esconder a de cima. E neste 10.1, eu vou digitar em designer uma fêmea para não vir, por exemplo, e você vai usar essa cor para a cor do campo assim. E finalmente, vamos criar nossa mesquita. Então vamos usar uma mesquita algo assim, por exemplo. Mas vamos ampliar esse retângulo apenas um pouco, ou podemos tê-lo, por exemplo, por exemplo, 10 pixels que podem manter o deslocamento e a seta para a esquerda apenas para que saibamos o quão longe o expandimos . Agora esta vai ser a nossa mesquita, e podemos remover a fronteira se não quisermos, e você vai colocá-la aqui mesmo. Em seguida, vamos selecionar o banco, clique direito e mesquita com forma. E esta vai ser a nossa mesquita e finalmente parece que no vídeo anterior, nós vamos apenas mover esta mesquita para o dedo esquerdo, esconder o texto e vamos posicionar seu e-mail abaixo desta mesquita e finalmente enfraquecer. Agrupe tudo assim. Aperte o controle G. E você vai chamar este e-mail de detalhes de controle para obter esta pasta chamada Shift e Bottom Arrow, e nós podemos posicioná-lo para aqui 1234 para que possamos tê-lo em 40. E isto. Vamos posicioná-lo em 60 só para termos um pouco mais de espaço aqui. Chame essa senha assim e abrindo. E em vez de seu e-mail digitar sua senha, assim e finalmente dentro da mesquita, você pode esconder sua senha por enquanto, você Condell clicar dentro e bater zero. Só me deixe selecionar primeiro, então acerte o espaço espaço do Senhor, não o espaço. E eu vou selecionar tudo Hit controle C porque eu sou preguiçoso Hit controle V para que eu tenha oito tiros seguidos. Patrulha E e eu vamos selecionar 44 aqui. E isso vai ser o nosso possível basicamente. Então você pode clicar em algum lugar lá fora. Você pode ver sua senha. E finalmente, o que precisamos é de um botão. Selecione rapidamente. Escolha isto. Sua possível mensagem controlava o para duplicar, e eu vou movê-lo para fora desta pasta. Tenho que movê-lo para baixo e eu vou digitar o lado aqui porque esse vai ser o nosso texto para o fundo. Agora, a garrafa em si. Vamos usar, vejamos, talvez 2 a 5 com 70 assim, usar oito para o raio do canto e para a cor que podemos remover a borda. Vamos usar a cor de três e c seis dedos do pé. Obter esta bela cor azul. Chame este botão assim com logo abaixo, e você vai posicioná-lo 60 a partir desta linha de fundo. Então, turno 123456 Eles vão usar a assinatura. Selecione a cor branca e posicione-a para estar no meio do nosso botão assim E vamos agrupá-la assim. Assim chamado este, Botsan assim. E finalmente, o que precisamos criar é uma marca de seleção. Então vamos usar o lápis. Você pode clicar em algum lugar fora da tecla Shift. Então ele vai em 45 graus, clique e, em seguida, clique mais uma vez bater, escapar. E para a cor fora desta borda, vamos usar o tamanho branco vai ser, também. E finalmente, terra mantida. Então nós em torno de nossas bordas fora e vai ser a nossa marca de verificação como esta. E finalmente, o que eu quero é posicionar esse Jack Mark em algum lugar no meio do nosso botão para que você possa clicar. Marque, clique em um botão clique aqui do que aqui para posicioná-lo no meio. E finalmente, você pode esconder esta assinatura. Então, clique na marca de seleção. Clique nestes dois pontos como para que você possa selecioná-los e, em seguida, movê-los. Silver aqui fora e nós estamos indo para o pé. Basicamente, tenha isso em 0%, então clique duas vezes em sua chave zero ou você pode baixar sua cidade de pagamento aqui , e isso é basicamente para nossa parte de design. Vamos incluir rapidamente a assinatura. E agora vem a parte divertida, que é a parte de prototipagem e o que queremos bem aqui antes de começarmos o protótipo. Vamos falar de tudo, o controle de crianças G, o grupo, tudo isto do meio, este do meio. E vamos simplesmente mais com 10 pixels para a direita, porque se você se lembra, porque se você se lembra, nossa mesquita se estende para a esquerda 10 pixels. Então vamos ao grupo de tudo. Agora temos o nosso formulário e vamos bater o controle D Agora neste 1º 1 vamos ocultar nosso e-mail para que você possa clicar no seu e-mail e mais baixo você colocá-lo para baixo para zero hit control de mais uma vez, e neste vamos revelar nosso e-mail. Então clique na mesquita e estenda a mesquita até aqui. E finalmente vamos clicar na linha, e precisamos dar um pouco de cor. Então, para a cor permite que você algo verde com 55 d para 66% e que vai ser a nossa cor verde para esta linha, e eu posso simplesmente copiar isso porque você vai precisar dele um pouco mais tarde. Agora, quando o e-mail for preenchido, precisamos clicar no seu passaporte. Então vamos deixá-lo assim para este estado de controle profundo porque clicamos nele na tela anterior. Vamos escondê-lo neste. Então, sua senha simplesmente mais baixa. Faça básico fazê-lo e aperte o controle de mais uma vez. E neste, vamos revelá-lo. Então para localizar sua mesquita e estender a mesquita até aqui, por exemplo. E neste, escolha a cor desta linha para que ele entre. E finalmente, quando as pessoas clicarem neste, vamos ocultar a assinatura na próxima tela. Então localizou a assinatura. Nós estamos indo toe abaixar o básico Aqui ele e finalmente inclui nossa marca de verificação de volta com o nosso primeiro ponto e clique sobre isso mais uma vez neste. Vamos estender nossa marca de seleção para que você possa selecionar este ponto Talvez possamos até mesmo esconder a assinatura neste, e vai ser um pouco complicado, mas você tem que clicar sobre ele e você tem que basicamente estender para baixo como chave de turno para algum lugar por aqui. Você pode ampliar um pouco para algum lugar como este e apenas certifique-se de que você selecionou tudo fora seu ponto Então algo como esta posição ele para estar aqui e finalmente ele para controlar o mais uma vez porque nós vamos estender o nosso ponto final dedo do pé ir para fora. Então, quando selecionamos nossa marca de seleção, podemos selecioná-la assim e certificar-nos de que ela vai para fora. Você pode segurar o turno, alinhá-lo um pouco e apenas diminuir o zoom e ver se isso parece bom. Sim, acho que está bem. Então agora chega a hora de animar tudo. Então clique no protótipo e podemos aproximar um pouco mais. Podemos clicar neste primeiro campo. Eles vão usar a torneira automática. Animar está dentro e arejamento fora 0,4 segundos. Quando este vamos ter tempo. Então use o tempo de atraso que vamos ter em 0,4 segundos, por exemplo, fácil uma saída ou animar o dedo do pé. Então, em seguida, temos o topo para este tão acostumado a tocar ou tentar encontrar-se. Tudo é igual neste. Usei o tempo assim. Então, neste próximo, vamos usar a torneira na parte inferior porque vamos clicar na parte inferior e a animação vai acontecer. Então toque ou para animar está dentro de 0,4 segundos. E neste, vamos usar o tempo de atraso. Nós não vamos ter nenhum atraso, então ele vai ser 0.0 duração zero ponto estrangeiro. Isso é bom por enquanto, mas vamos checar e ver se fica bem. Controle de calor zero e clique neste 1º 1 clique jogar. Tenho sido grande um pouco. Quando você clica, seu e-mail está indo para o pé. Digite um e-mail, e esta linha vai ficar verde quando você clicar no passaporte vai fazer basicamente a mesma coisa. E, finalmente, quando você clicar no botão vai mostrar esta marca de seleção. Então é basicamente isso para este vídeo, e eu vou te ver no próximo 30. Formulário 3: neste vídeo, vamos criar este formulário de assinatura quando você clicar em seu e-mail vai saltar para fora e para cima. Digite seu e-mail, em seguida, vai fazer a mesma coisa quando você clicar em sua senha. E finalmente, quando você clicar neste botão vai saltar no meio, estender todo o caminho para fora e dizer, Bem-vindo de volta. Então vamos começar. Então, para começar, temos em nossa porta fora 800 por 800 indo para usar o tipo dito e digitando sinal em Controle E. Eu vou usar o senso aberto assim, e eu vou usar o tamanho de 30 assim, e nós vamos duplicá-lo para que ele controlasse o mais uma vez. E neste, vamos digitar Bem-vindo de volta. Então certifique-se que ele vai do meio e certifique-se de selecionar a cor fora de branco assim , e nós vamos posicioná-lo no meio e no meio assim e nós estamos indo dedo do pé reduzir o você basicamente para baixo para zero porque isso vai ser a última tela agora para a assinatura. Vamos deixar isso aqui por enquanto. Agora vamos criar nosso botão. E para o botão, vamos usar vamos ver 2 a 5 com 70 apresentador e vamos usar azul Então três E C seis ff para a cor e vamos usar, digamos , sem borda e digamos, para exemplo, 50 para o raio de canto para tê-lo ser agradável e redondo. Eu só vou digitar rapidamente botão aqui e copiar e colar em uma seta que eu já usei no exemplo. Então eu vou posicioná-los para estar no meio assim. Pressione o controle G para agrupá-los, Chame este botão assim, movê-lo para baixo e botão vai ir acima da nossa forma. Mas ele vai estar localizado abaixo de tudo. Mas isso vai acima da nossa forma aqui porque teremos que criar aquele salto azul para fora , e isso vai ser por cima de tudo. Então eu vou mostrar-lhe um pouco mais tarde, e você será capaz de entender isso melhor. Então eu vou bater o controle de em projetar para duplicá-lo. Eu vou movê-lo para baixo um pouco, e neste aqui. Vamos pegar o seu e-mail e você vai duplicá-lo ou enterrá-lo. Vamos criar tudo e então vamos duplicar o campo em si. Agora este vai ser 20 final. Vai ser no D.D tão leve, como então vamos deixar lá por enquanto. Agora vamos usar uma ferramenta de retângulo e podemos ter, por exemplo, para centenas para a inteligência. Eu gosto disso, também, para alturas, e nós vamos usar essa cor para controlar o campo e nós não vamos usar o traço em tudo. Eu vou posicioná-lo para a esquerda, alinhá-lo nós dois textos e eu vou colocá-lo em talvez 20 para baixo assim. Em seguida, eu vou chamar esta linha, e eu vou movê-la abaixo do seu e-mail, e eu vou agrupá-los e chamar este e-mail assim. Em seguida, vamos duplicar seu texto de e-mail e você vai ocultar essa parte superior, e vamos chamar isso de, por exemplo, designer no Gmail dot com. Esse vai ser o nosso e-mail, e vamos usar essa cor para a cor do campo assim. E finalmente, o que precisamos é de uma mesquita. Então vamos desenhar um retângulo bonito e grande, algo assim, e essa será a nossa mesquita. Então é uma mesquita de qualidade assim. E, finalmente, estamos indo para o pé. Coloque-o na borda esquerda aqui. Vou segurar o turno e talvez usar a minha esquerda. Há duas vezes, e então eu vou movê-lo para baixo. Selecione estes para bater mesquita com forma, chamado esta mesquita como aquela, e eu vou mover a mesquita fora do caminho, assim. E, finalmente, vamos usar o seu e-mail, mas movendo logo abaixo, e esse é basicamente o nosso campo de e-mail. Agora vamos bater ações de controle duplicadas, e neste próximo, vamos chamá-lo de senha assim e vamos movê-lo para baixo. Como que dentro não iria escrever em seu e-mail, mas sua senha assim e, finalmente, dentro da mesquita. Vamos esconder um possível em vez de designer. Vamos estender esta mesquita para podermos ver o que estamos fazendo. Em vez de designer, Eu vou usar pontos espaçados espaço espaço espaço ponto, por exemplo, Criar para controle, Veja? Duplicá-lo, controlar um e aumentar o tamanho de 40. Só para que sejam grandes e agradáveis. Mova a mesquita por aqui e inclua sua senha de volta. Então é basicamente isso para o processo de criação. Vamos agora começar um pedido. Tudo para cima. Então, o que queremos para este é que queremos colocar aqui e depois abaixá-lo. 80. Então 12345678 Como aquele movimento de segurar na seta inferior e fazer o mesmo para este. Então basicamente estendido para ser em 18 assim e finalmente moveu o botão aqui e será em 80 também. Basta movê-lo para aqui. E essa é basicamente a nossa forma. Você pode agrupar tudo, G. Mas deixe o texto de boas-vindas fora dele porque ele vai ficar onde está. Vou me posicionar no centro e apertar o turno duas vezes para a direita, porque se você se lembra, nossa mesquita foi 20 peças para a esquerda. Vamos seguir em frente, agrupar tudo e deixar tudo como está agora. Então, há basicamente isso para a parte de design deste vídeo e agora vamos nos mover para prototipagem parte para que você possa clicar em nossa porta hit control D E neste 1º 1 vamos mover este seu e-mail para cima. Então, onde clicar? 1234 Agora, nesta fase, nós estamos indo para o pé Espere. Então ele controla o D neste aeroporto? E agora, nesta fase, vamos revelar a nossa mesquita e mostrar o nosso e-mail assim, e vamos fazer o mesmo. Então, basicamente, vamos clicar na sua senha. Nesta fase, o texto da sua senha vai saltar para fora. Então 1234 e vamos pesar o dedo do pé. Nesta fase, absorva-o controlado mais uma vez e agora vamos revelar as nossas palavras-passe. Então mova a mesquita para a direita. E mais uma vez, se seu computador confundiu sobre isso, você pode examinar os arquivos de prática e você pode ver exatamente o que eu fiz, o que eu criei. E você pode usar esses mesmos arquivos para seus projetos pessoais e comerciais. Então, finalmente, agora temos que clicar no botão e queremos clicar no controle de certificada. Então, neste um usuário vai clicar na parte inferior agora o botão vai se mover no meio como então nós estamos indo dedo do pé, torná-lo círculo. Então 70 por 70 e a seta vai entrar assim e finalmente clicar aqui para posicionar isso bem no meio. Neste próximo, nós estamos indo dedo do pé, ter controle sobre D. Clique no botão e nós estamos indo dedo do pé segurar um parafuso de mudança e clicando esquerdo em um dos cantos e estendido todo o caminho para fora até que ele sente tudo fora. E vamos esconder a flecha nesta fase. E finalmente temos que mover o botão acima de tudo. Então, basicamente, será bem-vindo de volta e o botão abaixo, então eu estou indo dedo do pé, rapidamente clique em todos eles e posicionar o botão acima de tudo. Então vamos fazer isso bem rápido, porque precisamos dessa cor azul para cobrir tudo, exceto o bem-vindo de volta que vai estar acima, então, mais uma vez, quando eles clicarem, ele vai se tornar círculo. Então ele vai gastar e, finalmente, neste, vamos ter nosso texto de boas-vindas revelado pela primeira vez, então é basicamente isso. Você tem 2468 nossos portos no total. E mais uma vez, se você está confuso com qualquer coisa, você pode verificar os arquivos do projeto e ver tudo por si mesmo. Agora vamos protótipo-lo assim em conflito Protótipo. Então, neste 1º 1 eles vão clicar no seu e-mail. Então, vamos usar os inimigos do passo automático e para o glúteo aliviando está dentro. E, finalmente, vamos usar 0,6 segundos. Por exemplo, neste, vamos usar o tempo. Então tempo e atraso vamos usar 0.60 ponto seis para declaração também, e ele vai pousar em dois aqui. Em seguida, vamos clicar na sua senha. Então toque ou para qualquer carne, mesmas configurações. E neste aqui, vamos dirigir o manípulo azul. Vamos usar o tempo, então basicamente o mesmo atraso e tudo até que preencha o passaporte. E, finalmente, vamos usar toque para este notas fáceis, e este vai ser o momento. Então vamos ter o atraso um pouco maior. Um segundo, por exemplo, que você 0.6, e neste, vamos usar 0.6 e 0.6 e ver como isso se parece. Então eu vou clicar neste primeiro quadro de início clique pré-visualização. Então, quando você clica, seu e-mail vai saltar para fora e o designer vai revelar sua senha quando você clicar vai fazer a mesma coisa. E, finalmente, quando você clicar no fundo vai saltar no meio, expandir e nós estamos indo dedo do pé. Tenha este texto de boas-vindas. Então é isso para este vídeo. E mais uma vez, se você estiver confuso sobre qualquer coisa, você pode conferir os arquivos do projeto e aprender mais sobre as dimensões, o espaçamento e tudo dentro desse arquivo de projeto. Então é isso para este vídeo, e eu vou te ver no próximo. 31. Formulário 4: neste vídeo, vamos criar esses campos de formulário com o seletor na parte superior. Então, quando você clica em qualquer um desses campos, esses campos vão expandir ou colapsar. Como neste caso e o texto vai mudar dentro da parte inferior também. E vai corresponder com o que você clicou no topo, para que você possa ver a assinatura aqui mesmo. Em seguida, inscreva-se e, finalmente, correr senha. Então vamos começar. Então nós temos um aeroporto fora 800 por 800 Eu vou usar meu título e eu vou digitar, Entrar e eu vou usar aberto, diz B 20 regular. E eu vou apertar o controle DE para duplicado. E neste, eu vou digitar, inscrever e finalmente, eu vou ter mais um, e este último vai ser redefinido para o passaporte. Agora vamos começar a criar nossos campos. Então, para o campo, vamos usar para 100 com 70. Assim e para os cantos arredondados. Vamos usar algo como oitos e bom e limpo, e eu vou mover isso no meio assim, mover decidindo tudo para ouvir, inscrever-se. Vamos chegar perto e todo o turno e talvez movê-lo. Não sei, 20 ou 40 pixels. Vamos usar 30 e finalmente redefinir. Movendo-se para esta borda, duplique esta e arrastada para baixo e mova-a logo acima do retângulo. Aqui. Nós vamos digitar a entrada assim e assinar para que possamos agrupá-los e chamar este e-mail mais tudo abaixo e dentro do texto de assinatura mais com 20 pixels para a direita e vamos escrever em seu e-mail como assim em seguida, nós vai duplicá-lo e mover este para baixo assim deixá-lo estar em 20 pixels, assim E isso vai escrever em possível porque esta vai ser nossa senha assim e renomeá-lo como senha assim E finalmente, o que precisamos é uma repetição senha. Então ele controlaria D neste e talvez mais, que 20 pixels para baixo assim e nós vamos chamar essa senha de repetição assim e clique baixo dentro e digitando. Repita assim. E finalmente, o que precisamos é de um botão. Então vamos fazer isso. Aperte o controle D, e vamos chamar este de fundo assim e vamos movê-lo. Não faça 20 pixels. Então vai ser o mesmo, basicamente, para todos eles. E dentro deste. Primeiro posicionamento do centro do Toby alinhado, e você vai escrever dentro assim para a importação. Vamos mudá-lo para baixo porque vai ser a nossa borda inferior agora removida. E para o filtro quando judeus três e c. seis ff assim e texto de assinatura vai ser branco assim finalmente posicionou-os para estar no centro assim. Estamos indo para o pé. Duplicar o circuito de assinatura Control de E neste aqui, nós vamos escrever dentro para cima porque isso vai saltar de cima assim e certificar-se de que está no meio. Então selecione se inscrever, Mantenha o controle. botão Selecionar. Certifique-se de que está no meio controle de controle de Esconda este. E finalmente, para este, vamos digitar a senha de redefinição porque isso vai ser para a nossa seleção final ou topo. Então isso é um reset. Possivelmente. Você faz o mesmo, então certifique-se que está perfeitamente no meio assim e mostre todos os três. Use retângulo para desenhar. Eu falo retângulo. Chame de mesquita. Você pode selecionar o texto a partir daqui, apertar o controle C e, finalmente, selecionar tudo certo? Clique e Moscou sua forma. Clique duas vezes dentro do Controle V e basta chamá-lo de mesquita. Agora, finalmente, vamos nos mover no recente possível e sair fora de nossa mesquita assim e nós só vamos ser deixados de fora com Sign in. Finalmente, o que precisamos é de um triângulo. Então vamos criar um triângulo grande como este usando distal e para a altura, vamos usar o turno, por exemplo, para o filme. Nós vamos usar esta cor assim, e finalmente você pode alinhá-la com esta borda como então certifique-se de que ele está no meio fora assinar e neste primeiro 1 vamos apenas deixá-lo assim. Então vamos chamar este seletor Então em posição logo abaixo do nosso texto assim. E finalmente, o que queremos é selecionar todo o texto e talvez posicioná-lo em 20. Então temos tudo coerente e bonito. Finalmente selecionar tudo o seu controle. G posicioná-lo no centro como tão certo. Clique e cresça papagaios. E este será o nosso projeto concluído. Agora vamos criar nosso estado. Então vamos precisar de três estados, então eu vou bater o controle D duas vezes. Então você tem duas cópias agora para este primeiro 1 que eu vou selecionar. Cadastre-se. Segure o turno. Selecione. Reiniciar. Clique aqui. Digitando de presse gasto, er Então eu vou ter que ser nesta cor cinza claro. E, finalmente, o que queremos é posicionar o botão logo acima desses campos. Assim e para a assinatura. Nós só queremos seu e-mail e senha, então eu vou me posicionar. Botão de login. Basta ouvir e repetir possível. Baixem a Bay City para zero. Agora, neste próximo, vamos mover o seletor para se inscrever, para estar no centro assim. Fomos selecionar a assinatura e redefinir. Clique aqui. D d d d dedo do pé. Torná-lo mais leve. Ótimo. Agora, nesta placa. Nós vamos ter esses campos como este, e finalmente, vamos mover este sinal no texto abaixo assim. Mas nós vamos posicionar Inscreva-se para estar no centro assim e, em seguida, mover lado sendo logo abaixo você pode fechar a mesquita e, finalmente, vamos saltar para este estado agitado. Então vamos mover no seletor, Toby no centro fora do reset e selecionar o banco. Clique aqui, D d d pressione enter e, finalmente, movendo o botão para estar bem aqui, e vamos posicioná-lo acima de tudo. Certifique-se de fazer isso com cada um desses. Então é sobre todos os campos. E finalmente, para este, vamos nos esconder, senha e repetir passaportes que podem selecioná-los e diminuir o seu baseado para baixo. E neste, o que queremos é saltar para dentro da mesquita e baixar a senha repetida todo o caminho para baixo no centro assim, e finalmente mover a assinatura todo o caminho para baixo e mover Cadastre-se, para baixo, bem como este . Então, a senha de repetição está no centro, então isso é basicamente para o nosso design e protótipo. É muito simples. Então clique em um protótipo e eu vou aproximar um pouco mais e o que você o que você quer fazer é conectar tudo para que os usuários possam clicar entre essas três telas. Então, finalmente, vamos clicar na inscrição. Vai nos levar até aqui. Vamos usar o passo ou qualquer carne. 0.6 segundos. Digamos que clique no reset, faça o mesmo. Clique aqui na assinatura vai conter o mesmo efeito. Clique aqui para saltar para o reset e, finalmente, fazer o mesmo para este. Então este é o sinal, e este primeiro 1 é o sinal de entrada. Então é basicamente isso. Vamos pré-visualizar. Tudo o que está em grande é apenas um pouco. Então, quando você clica na inscrição, ele vai se expandir. Altere o texto para se inscrever. Clique na redefinição está indo toe reset senha aqui e mover todos os campos dedo ficar em branco como assinar. Como você pode ver, tudo está funcionando corretamente e você pode mudar e adicionar seus próprios toques. Então, por exemplo, você pode destacar neste triângulo e esses campos. Se você quiser, você pode fazer essas outras cores. Você pode adicionar sombras em segundo plano. É mesmo com você. Você pode até mesmo alterar a cor de fundo desses campos. Então, por exemplo, eles são brancos. É este. Eles podem ser como criar este que pode ser escuro. Leia este. Então, é realmente até você e estrutura superior este design. Então é basicamente isso para este vídeo, e eu vou te ver no próximo. 32. Formulário 5: neste vídeo, vou mostrar-lhe como você pode criar essa senha criada falhou, que você pode então integrar em seus formulários. Então, quando você clica em criar palavras de análise vai desaparecer, então ele vai começar a digitar a senha, e ele vai mostrar a força da senha, e essas cores bem aqui abaixo vão corresponder com tudo. Então, se eu jogar mais uma vez, você pode ver que ele começa com quatro, em seguida, seis caracteres e finalmente termina em oito e mostra uma senha forte com uma cor verde abaixo. Então, vamos começar. Então o que temos aqui é em nosso porto de 800 por 800 eu já fui em frente e criei em algum lugar. Então, o que? Aqui criamos possível Open diz 20 e temos a senha em cumprida. Então temos uma mesquita criar senha escondida, que é este ícone, e finalmente, em entradas e dentro de uma mesquita. Só temos alguns pensamentos regulares, como já te mostrei. Então, se eu revelar a mesquita, você pode ver como ela se parece, e esses pontos que você já viu em alguns desses vídeos anteriores. Então esse é basicamente o nosso campo, e agora vamos criar as informações abaixo. Mas primeiro, vamos começar com o texto. Vou duplicar este. Vou arrastá-lo aqui para baixo, e vou posicioná-lo. É algo como 20. Vou fazer com que dê certo. Então, para estar alinhado à direita, vá para a borda direita e este vamos escrever em semana, assim com abaixo, controle de duplicado. Vou esconder essa parada. Isto deve escrever, pode ser mais forte, assim e finalmente, vou ter o controle De e neste fundo. Isso é certo. Perspectivas fortes, como essas são as nossas três fases, e agora vamos criar uma mesquita para elas. Então é usado um retângulo. Certifique-se de que ele vai para a borda direita assim, e certifique-se de que ele está no meio do texto assim, porque vai ser mais fácil para nós posicioná-lo um pouco mais tarde. E vamos mover o dedo da mesquita aqui, por exemplo, você pode baixar sua cidade paga. Realmente não importa porque vai ser a nossa mesquita assim. E finalmente vamos selecionar tudo, certo? Clique em mesquita de forma ou use este atalho. Então, controle de mudança e grande Windows ou deve comandá-los no Mac. Agora, esta vai ser a nossa mesquita, assim, e finalmente, vou mover todo este texto para fora da nossa mesquita assim, e vamos fechar esta mesquita. E como podem ver, não podemos ver nada aqui. Então, finalmente, o que vamos fazer é ir, na verdade, na verdade, , agrupar a mesquita e vamos agrupá-la um pouco mais tarde e eu vou mostrar a vocês por que deixar tudo como está. Precisamos disto para posicionar estes lá em baixo. Então vamos começar a criar nossas cores. Vou usar uma ferramenta de retângulo e vou escrever algo assim. Então vamos usar o peso fora. 90 alturas 19 altura fora. 11 analistas usam o raio de canto de oito assim e para a cor. Vamos usar o DDT assim. Posicione-o assim e no meio desta mesquita. Então, assim. É por isso que precisávamos da mesquita. E agora você pode pular em frente e agrupar esta mesquita mais uma vez. Então, vamos selecionar tudo. Mas temos que trazer o texto de volta para o centro, assim é sagacidade. Vamos movê-lo aqui para que possamos ver o que estamos fazendo. Então, assim. E vamos mover a mesquita bem aqui no topo, clique direito e mesquita com forma finalmente, e esta vai ser a nossa mesquita e finalmente saltar para dentro da mesquita e mover tudo fora dela assim. Agora, finalmente, fazer duas cópias dele, mas primeiro chamá-lo vazio que controla o controle de. Agora, neste 1º 1 você pode apertar o controle G para agrupá-lo qualidade, certo, porque esse é o nosso primeiro controle de cor G. Chamá-lo de azul. Essa é a nossa segunda cor e controle violento. G chamou este verde assim, e você pode abrir todos eles, bater controle de e, em seguida, renomeá-los como estas cores, porque essas cores vão corresponder com a força do possível. Tão controlada. O fim finalmente chamou este verde. Agora as cores para o vermelho. Deixe-me copiar rapidamente nessa cor. Então, para os vermelhos, você vai usar E 53 c 85 para o azul, vamos usar 366 f f f. E finalmente para o verde normalmente selecionaria essa cor também. Vamos ter esta cor. Então, finalmente, vamos agora movê-los para que você possa selecionar estes para manter o deslocamento e a seta para a direita e posicioná-lo em algum lugar como talvez 10. É bom e finalmente fazer o mesmo para o verde, então mantenha um 10. Isso é bom. Não, vamos fazer algumas mudanças neles. Então todos eles vão ter a semana de folga um, porque nós vamos começar e depois expandi-los assim e pastoso atrasado para zero para todos os três. Você pode fechar tudo isso, e é basicamente isso para o nosso design. Então, como você pode ver, é realmente fácil e simples de fazer. Agora, vamos começar a criar algumas cópias dele para que ele controlasse o agora neste segundo estado. Quando alguém clica neste campo, criar senha vai desaparecer. Então, vamos baixar o apace it it it. Mas antes disso, vamos primeiro encomendar algumas dessas camadas antes de fazermos quaisquer outras alterações. Então o que temos temos temos grande possível e possível no topo. Então temos estes três e, finalmente, uma mesquita à direita. Agora podemos copiá-lo. Então ele controlou o E neste primeiro estágio, como eles disseram, nós vamos baixar a cidade apace fora, criar possíveis mensagens de texto e neste segundo estado, isso não é nenhum salto à vista e gastar esta mesquita e nós podemos expandi-lo para quatro pontos. Por exemplo, para este primeiro estado para este segundo estado, vamos expandi-los para seis. E no terceiro 1 dedo oito. Então é isso para a senha. Vamos escolher obesidade vermelha como 100 você pode clicar aqui e ver a sagacidade é 90. Então você tem que fazer o mesmo por aqui. Então 90 vai preencher e, finalmente, para a mesquita. O que precisamos é do texto que diz demasiado fraco. Posicioná-lo no meio como então o próximo está indo dedo do pé. Espere um pouco. Então ele controlava. O usuário está indo direto para dentro. Mais dois personagens assim e faremos o mesmo com o azul. Então 100 a 90 assim e nós temos que mudar o texto mais uma vez. Então duas semanas vai cair ou você pode deixá-lo e incluir poderia ser mais forte no centro e, em seguida, movê-lo para fora porque é mais fácil para nós alinhá-lo assim e finalmente bater Controle D e nós vamos expandir a mesquita todo o caminho para a borda assim e finalmente incluem a cor verde. Então são 90 e 100 para a opacidade. E, finalmente, para as tarefas que você pode incluir senha forte e pode ser mais forte, você pode movê-la para baixo. Então é basicamente isso para a parte da criação. Você deve ter esses cinco nossos portos, e agora o que vamos fazer é protótipo. É um clique bem aqui. Clique neste campo. Então, quando o usuário toca, auto animate vai acontecer e nós podemos escolher, por exemplo, 0.6 segundos, eu acho que vai funcionar muito bem agora para este 2º 1 Vamos desenhá-lo, e o que queremos é tem o tempo de atraso de 0.6 segundos ou animar 0.6 é bom e ele está dentro. Podemos deixar isso assim apenas ter certeza de que você tem área de flexibilização, então eu vou mudá-lo aqui também. Não para um perturbado. Vamos conduzi-lo até aqui. Vamos ter tempo. Então, mais uma vez, apenas movemos assim. Então o atraso de tempo vai ser um segundo e notas fáceis e, finalmente, um segundo aqui também . Agora, neste último que vamos arrastar para aqui, vamos usar basicamente as mesmas configurações então tempo um segundo facilitando e um segundo também. Bem, agora está testado e ver o que fizemos. Então eu vou clicar neste 1º 1 clique jogar, ampliá-lo apenas um pouco. Então, quando você clica dentro, ele vai para a altura do dedo do pé, criar senhas mostrar esses quatro pontos, então seis e tudo isso está indo junto. Então, quando eu movê-lo mais uma vez, quando você clicar dentro vai se esconder, então mostrar para pontos, então seis e finalmente oito e tudo isso abaixo está seguindo. Agora tenha em mente que você pode criar isso como apenas uma barra e, em seguida, incluir sort off um Grady int , por exemplo, e, em seguida, usar o mesmo texto , como fizemos neste exemplo, mas apenas moveu o ao longo da linha para fundo fora deste campo deve ser um cinza claro. Então dd a mesma cor que eu usei neste exemplo. Mas para o Grady int, você pode posicioná-lo Toby, por exemplo, em três. E então você pode mover este junto e então ser verde, ou fazer o que quiser com ele. Você também pode, por exemplo, colorir essa entrada Toby Greene para corresponder com isso e também alterar as cores do texto. Assim, cada texto corresponde a cada um desses campos. Portanto, cabe a você se quiser fazer alterações adicionais. Essas são apenas algumas das minhas idéias, e você também pode explorar alguns outros exemplos on-line. E finalmente, você pode incluir as cores dos clientes dentro para que você possa chamá-la de ciclo. Por exemplo, Destexhe bem aqui, apesar das mudanças que eu mostrei a você aqui. Então, realmente as opções são infinitas quando você está trabalhando em um projeto e cabe realmente a você, seu cliente e seu dedo do pé imaginação colocar tudo isso no trabalho de reboque. Então é isso para este vídeo, e eu vou te ver no próximo 33. Formulário 6: neste vídeo, vou mostrar-lhe como você pode criar este formulário. Então, quando você clicar no nome vai ficar azul, ele vai fazer o mesmo para o nome e-mail e, finalmente, mensagem aqui. E finalmente, quando se sentir fora de todos os campos, quando você clicar em enviado, ele vai desaparecer e, em seguida, mostrar rapidamente obrigado, e nós entraremos em contato com você em breve Mensagem. E é assim que você sabe que enviou a mensagem. Então vamos começar. Então aqui eu tenho o aeroporto fora 800 por 800 para economizar um pouco de tempo, já criei o projeto tão rapidamente executado através dele com você. Mas algo assim nós já criamos em um de seus vídeos anteriores. Então, cada um desses campos fora do seu nome, e-mail e mensagem tem exatamente a mesma configuração. Então, se eu aproximar um pouco mais de dentro, nós temos a mesquita. Então, se eu abrir a mesquita, temos em nome desta em particular. Então você vai gastar a mesquita à direita para revelar o nome como fizemos em alguns de nossos vídeos anteriores. Temos o seu nome que vai desaparecer e finalmente temos esta linha que quando alguém clicar nela, vai ficar azul. Em seguida, o texto vai digitar na íntegra e, em seguida, ele vai voltar para a sua cor original . Então é isso que temos para esses três campos. E finalmente temos este fundo no fundo. Então, se eu abri-lo, nós apenas temos o cheiro eo fundo que é de 2 a 5 com 70 mesmos como todos os nossos outros botões. Finalmente temos contato conosco, que está aberto, diz em 30 tudo fora do resto do texto é em 20 e, finalmente, temos que agradecer-lhe. Então, se eu selecionar todos esses baixa base anterior, selecione o obrigado e aumente sua opacidade. Então o que temos dentro temos a marca de verificação. Então temos o círculo em 70 por 70 e vamos chamá-lo de círculo. Então, e finalmente temos este ícone de marca de seleção dentro, simplesmente colorido em branco. Então, nada de especial. Abaixo que temos texto de agradecimento que está aberto, alguns resistente. E finalmente nós vamos voltar para você em breve. Abrir molho 20 nesta cor mais clara. Igual à cor dos nossos campos. Então eu vou pisar em toda a cidade do Reino Unido. Selecione todos os outros, e a razão pela qual eu baixei a cidade apace dele é que ele vai aparecer em nossa tela final, então ele vai se tornar totalmente visível no estado final desta animação. Então vamos começar com o nosso protótipo. As primeiras coisas primeiro. Vou clicar no aeroporto, bater no Control de para duplicado. E neste primeiro dia, quando alguém clicar aqui, o nome vai desaparecer. Então vamos carregar uma cidade 20 e a linha vai ficar azul Sercan. Basta clicar aqui para selecionar a cor azul. Então é isso para o primeiro estado para o segundo estado, eu estou indo controle de criança dedo do pé e clique dedo dedo salto direito dentro. Vamos mudar a cor de volta para esta grande cor, então vamos ver rapidamente qual é a cor? Então é 70 70 70. Então este tipo de escuro grande e finalmente vamos revelar a mesquita assim apenas para revelar o nome a seguir. Vamos clicar aqui para receber o seu e-mail, então vamos duplicar a porta de arte. Vamos clicar dentro e diminuir a opacidade do e-mail e alterar a cor da linha azul do dedo do pé assim . E é isso para este estado. E no próximo estado, vamos mudar a cor da linha de volta. Então eu vou escolher isso na cor cinza escuro e abrir a mesquita para que possamos revelar o e-mail do designer neste caso assim. E finalmente, alguém vai clicar bem aqui, e nós vamos passar por cima da opacidade da sua mensagem neste caso. Então atrasou o ritmo da sua cidade. Vamos chamá-la na linha azul para indicar que alguém está digitando. E finalmente, vamos duplicar este para o nosso estado final para o texto. Vamos mudar a cor da linha de volta para este cinza escuro e está explicando alguns de nossos vídeos anteriores. Você pode simplesmente copiar e colar esses códigos hexadecimais se isso for mais fácil para você, ou você pode simplesmente usar essa ferramenta de seleção de cores e simplesmente escolher a cor que quiser. Então isso é basicamente para o nosso processo de criação fora de tudo neste último estado usuário vai tocar neste fundo enviado e o que vai acontecer a seguir? Vamos controlar D. Agora. Vamos selecionar tudo. Exceto pela pasta de agradecimentos. Vamos baixar a cidade pagadora deles para zero. E finalmente, para o nosso último estado, vamos aumentar a opacidade do texto no topo. Então, este obrigado. Vamos aumentar a cidade obedeça assim. Então é basicamente isso para todo o processo de criação. Como você pode ver, há muito fora dos campos que Toby criou. Mas tudo é realmente bastante simples. Tudo é basicamente o mesmo. Você só está repetindo esses passos. Então azul golpe azul e, em seguida, revelar realmente , muito bem , basicamente, é isso. E, finalmente, clique utilizável na parte inferior. Então começou a protótipo. Vamos entrar no nosso 1º 1 e vamos clicar neste campo. Nós estamos indo para você passo ou para qualquer carne está dentro n 0.6 segundos vai funcionar muito bem para estas prisões fora dos campos. Você pode pisar para alguns deles se você quiser, mas dedo do pé aumentar a velocidade fora desta interação. Só vou usar o tempo. Então, em vez de tocar, vamos usar o tempo. Vamos deixar o atraso em zero usar auto animar, fácil uma saída e 0.6 segundos para que tenhamos exatamente a mesma configuração. Então eu só vou arrastar essas alças azuis porque ele vai simplesmente copiar e colar as mesmas configurações que usamos para o primeiro 1 E ele vai apenas preencher tudo para nós. Agora. Finalmente, neste último estado, vamos para você pisar no botão de envio, então vamos simplesmente arrastá-lo. Além disso, animar facilmente agora 0,6 segundos. E neste estado final, vamos usar o tempo. Também animar, aliviar, ou você pode usar fades, ou você pode usar o que quiser. Então talvez possamos usar limites para ver como isso se parece ou estalar. Mas eu acho que isso parece muito bom e apenas o uso está dentro apenas para ter a consistência entre todos eles. Então, é rápido no primeiro 1 clique jogar. Eu só vou ampliá-lo um pouco e vamos ver como isso se parece. Então, quando você clicar, seu nome vai ficar azul, falhando sensação de golpe em tudo. E, finalmente, quando você clica no botão de envio vai desaparecer e, em seguida, desvanecendo este texto de agradecimento . Então é isso para este vídeo e eu vou te ver no próximo. 34. Formulário 7: neste vídeo, vou mostrar-lhe como criar este formulário de contato simples. Então, quando você clica na parte inferior, a imagem neste texto com um título de trabalho salta para fora do caminho para cima para revelar os campos de e-mail e mensagem. Então, quando você clica no e-mail, o campo vai preencher tudo e, em seguida, quando você clica, enviar mensagem está indo tomo flip de enviar mensagem para mensagem enviada, e ele vai cinza para fora esses campos para que você saiba que você realmente tem enviou a mensagem. Então, se eu clicar nele mais uma vez, você pode ver como tudo parece. E finalmente, ele vai escrever na Mensagem enviada. Então vamos começar. Então estamos usando o aeroporto de 800 por 800. Mesmo como em todos os outros vídeos, eo que eu tenho aqui é o projetado para economizar um pouco de tempo. Então vamos começar com a imagem. Esta imagem é liberada a partir de um ponto de respingo com e sua 80 grande 80 Então círculo perfeito e finalmente, ele tem uma sombra, apenas uma sombra basicamente completa fora 03 e seis ea cor é totalmente preto em 16%. Igual a um dos vídeos anteriores. Então, temos este texto e o cargo. Portanto, este texto principal é sentido aberto e 20. Então basicamente o mesmo Texas, este só uso a cor mais escura. Então este é D D. D. E este é 70 70 70 70 e está posicionado apenas ligeiramente acima. Então, 10 pixels acima deste título de trabalho. Um cargo interno. Temos a etiqueta de título, qual é? 80 pela Turquia. E, finalmente, temos você, I texto designer, que é sentido aberto novamente em 10 e apenas cor azul básica. Então esses dois estão localizados. Então, se eu apertar shift 1234, eles estão localizados 40 pixels para a direita desta imagem, e eles estão localizados no meio. Então, se eu colocar uma tecla Shift como esta com a tecla esquerda do mouse, você pode ver que eles estão no meio desligado. Esta imagem e imagem em si estão posicionadas 20 peças acima deste campo. Então, o campo temos e-mail e a mensagem, mas as primeiras coisas primeiro. A ordem de todos esses elementos. Então primeiro temos a imagem no topo, e depois temos o designer à direita. Então temos o fundo porque estes dois e-mails e mensagens vão saltar para trás do fundo. Portanto, é importante posicionar tudo corretamente antes de criar suas animações para que tudo funcione corretamente. Agora temos e-mail é um dito. Temos o seu e-mail, que está aberto, diz 20 em D DD capacidade total de 100. E nós temos este cliente e e-mail se eu esconder isso sobre a opacidade em zero, então basicamente o mesmo texto. Mas em 70 70 70 Open diz 20. Então basicamente o mesmo que o seu e-mail, e se eu aproximar um pouco mais, você pode ver que é apenas uma diferença de cor. Então, neste estado, é uma opacidade D menor em zero. Fizemos o mesmo com a mensagem. Então nós temos este, e nós temos neste na parte de trás então basicamente o mesmo negócio que os acima. Agora, para os campos em si, esta entrada está em 400 com 70 e a parte inferior está em 400 com 80 E como eles disseram várias vezes ao longo deste curso você vai obter os arquivos de prática e você vai começar brincar com ele e você pode Faça um pouco com o seu próprio. Você pode incluir cores diferentes. Se você quiser usar esses projetos específicos para nossos clientes, você pode escolher suas cores e assim por diante. Mas eu só queria explicar o processo na lógica por trás dele. Finalmente, temos o fundo. Então, se eu abrir o fundo, teremos a visão da máscara. Então dentro da máscara, se eu aproximar um pouco mais, teremos contato conosco no topo. Envie mensagem aqui e mensagem enviada logo abaixo. Então, esta mesquita é criada basicamente da mesma maneira que todas as outras mesquitas neste curso, então não vai entrar em muitos detalhes sobre ele. Então vamos bater Control de para duplicar este nosso barco. Mas como este vai ser o nosso segundo estado, vamos trabalhar neste primeiro estado. Então vamos começar com esta imagem. Vai ser em 120 com 120, então, assim, você pode simplesmente ampliá-lo aqui e eu vou posicioná-lo perfeitamente. Wit e esta borda stop off no campo de e-mail, e eu vou simplesmente clicar aqui para posicioná-lo no meio. Em seguida, vamos abrir a pasta dos designers. Use o nome pressione shift e clique com o botão esquerdo até que ele esteja no meio. Fora disso você é designer. Em seguida, posicione tudo no meio e mova-o logo abaixo da imagem. E agora vou posicioná-lo. Então, mude. Flecha inferior. 1234 Então talvez com 40 anos vamos manter as coisas simples porque temos 20 pixels lacunas entre tudo. Então nós temos 20 pixel gap aqui e 20 pixel gap aqui, então vamos buscá-lo aqui também. Então vamos deixar isso aí. E finalmente temos que mover e-mail e mensagem para fora do caminho. É por isso que temos a garrafa em cima. Então, quando eu o movi, assim você pode ver que eles estão indo atrás do fundo, não acima dele. É por isso que a animação está indo trabalhar corretamente. Então vamos primeiro mover tudo 80 pixels. Então mude na seta de baixo. 12345678 e então podemos mover a mensagem também, então 12345678 E se você quiser, você pode movê-los ainda mais. Então 12345678 em tudo. E finalmente, com ambos selecionados, simplesmente abaixe a opacidade para zero. E depois no próximo estado, que é este. Quando eles clicam neste botão, ele vai para o dedo do pé. Apareça bem aqui. Agora vamos mudar esses textos em ir dedo do pé controle de hit e clique em Insight neste 1º 1 vai escrever em Fale comigo para que eu possa baixá-lo e eu vou dedo do pé bater em enviar mensagem e movê-lo para fora do caminho abaixo como assim. E posso posicioná-lo como um zero com esta mensagem enviada. Então, o que podemos fazer a seguir? Porque criamos nossos dois estados, podemos começar nossa animação para que possamos primeiro criar nossas telas ou iniciar animação como esta basicamente, Mas vamos primeiro criar nossas telas. Então, vou apertar o controle. De fato, para duplicar este nosso porto e neste 1º 1 as pessoas vão clicar aqui. Então vamos começar do início. Eles vão clicar. Entre em contato comigo isso vai aparecer, e então eles vão clicar aqui onde diz o seu e-mail. Agora, neste segundo estado, vamos ultrapassar a opacidade do teu e-mail e aumentar a tua cidade salarial. Uh, esta mensagem de e-mail a seguir, eles vão clicar na sua mensagem para que sua mensagem seja em zero ou Pacenti, e nós vamos duplicá-la. E lá dentro iam aumentar o ritmo deste texto e, finalmente, aqui, eles vão clicar na mensagem enviada. Então vamos duplicar mais uma vez. E estes dois textos vão mudar a cor. Então, basicamente, eu vou selecionar os dois usando controle de mente manter e eu vou clicar aqui , apertar o centro de imprensa D d para mudar a cor. E finalmente eu tenho que mudar o texto dentro. Então o texto vai escrever na mensagem, enviado assim, posicioná-lo no centro e enviar mensagem. Podemos tirá-lo do caminho assim. Então há basicamente isso. Temos três textos diferentes dentro do nosso botão. Temos dois textos diferentes para cada um desses campos, e acabamos de tirar esses dois do caminho. Então vamos começar com a animação. Vou bater no protótipo. Aproxime um pouco mais para que as pessoas toquem neste botão. Então fomos até você. Passo orto. Qualquer carne está dentro e 0,6 segundos para a transição. Em seguida, podemos fazer o mesmo para que possamos clicar no seu e-mail aqui para iniciar a animação. Então vamos para um passo ou dois. Alguma carne, exatamente as mesmas configurações? Não, daqui até aqui, vamos usar o tempo porque vai sentir tudo por nós então ou para animar. Calma agora. E você pode usar 0,8 segundos se quiser que a animação seja apenas um pouco mais longa. E, finalmente, eles vão clicar em enviar mensagem então arrastado para fora torneira ou torneio é em N 0.6 segundos para que possamos ter consistência com todos eles. Então vamos clicar no 1º 1 clique jogar eu posso maior, apenas um pouco, e quando você clica aqui, você pode ver como isso se parece. Então, se saltarmos para trás, você pode ver que esta imagem está encolhendo o dedo 88 80. E isso está se movendo para a direita na posição exata em que criamos em primeiro lugar. E esses dois campos estão pulando de baixo para cima e indo para sua posição original , bem como este texto está mudando na parte inferior para que você possa ver que realmente parece agradável , limpo e suave, assim. E finalmente, quando eles clicarem aqui vai digitar tudo e quando você clicar, enviar mensagem vai mudar a mensagem de texto enviada, e ele vai cinza para fora este texto para que você saiba que você realmente enviou a mensagem . Então é isso para este vídeo, e eu vou te ver no próximo. 35. Formulário 8: neste vídeo, vou mostrar-lhe como podemos criar este formulário de contato simples. Então, quando você clicar em seu nome vai falhar, quando você clicar em, seu e-mail vai preencher isso Bem, finalmente, quando você clicar em sua mensagem vai preencher a mensagem. E então quando você clicar neste ícone de botão vai desaparecer, Azul vai se expandir e você receberá uma mensagem de agradecimento. Então, vamos começar. Então, como de costume, temos o nosso porto de 800 por 800 dedos poupan-nos um pouco de tempo. Eu incluí o design já, então para inspecioná-lo um pouco, e mais uma vez você vai obtê-lo nos ovos, contaminar e você pode copiá-lo. Você pode fazer o que quiser com ele, basicamente usá-lo para trabalho pessoal ou comercial, e nesse arquivo, você será capaz de inspecioná-lo com um pouco mais de detalhes se quiser, então verifique os espaçamento para verificar o texto tamanhos e assim por diante. Então, vamos começar. Mande-me uma mensagem aberta, diz 30. Voltarei cedo demais. É possível que esteja aberto, diz 20. Algum para casa? Uma tecla Shift, uma seta para cima. Você pode ver sua posição 20 pixels de Envie-me uma mensagem. E este é 40 pixels abaixo desses dois campos para os campos que nomeamos e-mail e a mensagem e todos os três têm exatamente a mesma configuração. E você já viu essa configuração nesses vídeos. Então o que temos aqui é uma mesquita que mostra o nome. Então vamos revelar o nome assim e abaixo que você pode ver seu nome, que vai desaparecer quando você clicar nele. E é basicamente a mesma história para todos os três. Agora, os tamanhos. A entrada é 300 com 70 e temos 20 espaço de pixel entre eles. A mesma coisa é para o seu e-mail e para a mensagem logo abaixo. Se eu clicar na entrada, você pode ver que são 6 20 com 150 nós temos a mensagem em basicamente duas linhas. Se eu gastar a máscara assim, então é tudo para esta configuração. E finalmente temos o fundo lá em baixo. Temos apenas um ícone enviado regular com ah cor branca e a parte inferior é 70 por 70 e a parte inferior é a posição. Se eu apenas pairar. Está 40 pixels abaixo de todos esses campos e texto. E finalmente, o que temos no topo é um texto de agradecimento que vai aparecer no final porque é branco. Deixe-me provar rapidamente. Tornou-se um golpe, então você pode ver que é obrigado. Voltarei para você o mais rápido possível e se eu pular para dentro, obrigado. Texto é um 30 Eu vou chegar a um mais rápido possível é em 20. Então vou torná-lo branco de novo. Abaixe a opacidade zero. E quanto à configuração, é assim que parece. Então este texto de agradecimento branco está no topo porque ele vai aparecer no estado final desligado . Este fundo de animação está logo abaixo, porque este obrigado vai aparecer logo acima da cor azul fora da parte inferior. Então é por isso que o botão está aqui. Então nós enviamos uma mensagem, Al, volte o mais rápido possível e então estes em ordem. Então vamos começar e neste primeiro dia eu estou indo para o pé. Faça uma cópia rapidamente. Então, controle a Andi. E nessa, as pessoas vão clicar no seu nome bem aqui. Então, ele vai desaparecer daqui, e a mesquita está indo para o pé. Revelá-lo sozinho, então ele vai mostrar o nome. Em seguida, eles clicarão no seu e-mail. Então vamos fazer outra cópia. Então seu e-mail nós vamos baixar o Bay City 20 e vamos mostrar a máscara algo assim. Em seguida, eles vão clicar na sua mensagem. Então vamos esconder sua mensagem de texto, e vamos revelar nossa mesquita assim. E finalmente, eles vão clicar neste botão neste estado. Então, neste estado, vamos simplesmente mover o ícone para fora em algum lugar por aqui e baixar a opacidade para zero. Assim como ele se move para fora do círculo, ele vai diminuir o apace ele para baixo para zero, e então nós vamos ter outro estado. E neste estado, vamos aumentar o tamanho deste círculo. Então eu vou abrir e escolher a parte inferior, e você pode manter Shift velho e clique com o botão esquerdo do mouse e simplesmente ampliá-lo assim até que ele preencha tudo e quando ele faz simplesmente selecionar tudo abaixo dele, como assim com o seu tecla shift e um amante fazer colado para baixo para zero. Então, quando ele se expande para preencher toda a tela fora, o resto da informação vai desaparecer, basicamente como ele se move dedo do pé azul e finalmente na última mudança de estado nd e eu vou aumentar a opacidade fora deste obrigado Mande texto para o dedo 100. E este é o nosso último estado e a nossa mensagem. Então é isso que eles vão receber quando sentirem tudo. Então vamos começar com o protótipo. Então, quando um usuário clica em seu nome, vamos para passo automático. Animate sai daqui e 0.6 segundos. É bom o suficiente, e vai preencher tudo. Em seguida, eles clicarão no seu e-mail e usaremos as mesmas configurações. Em seguida, eles vão clicar na sua mensagem. Então, basicamente, novamente as mesmas configurações, e finalmente eles vão clicar neste botão então vamos usar passo ou 20 carne. Mesmas configurações. Mas entre esses dois, vamos ter o gatilho de tempo assim e vamos escolher 0,8 daqui tudo fora. O resto das configurações permanecerão as mesmas. E finalmente, vamos arrastar tudo para ouvir. Mas remova o atraso. Então, 0.0 apresentador. Então você recebe zero para o atraso e está fora 0,6 segundos, então tudo permanece o mesmo. Então, por que fizemos isso? Realmente? Então, basicamente, quando as pessoas clicam aqui, este ícone vai desaparecer no espaço em branco. Está indo dedo do pé, espere um pouco, em seguida, expandir essas cores azuis e, finalmente, que este texto está indo dedo do pé aparecer no topo. Então vamos dar uma olhada. Eu vou tocar play para visualizar tudo e ampliá-lo um pouco. Então, quando você clica aqui, seu nome vai desaparecer e o nome está indo para cima aqui, dizendo, dizendo, quando você clica para o e-mail dizendo quando você clica para a mensagem e, finalmente, quando você clica aqui, irá desaparecer. O Blue vai gastar e acabar com ele. O texto vai aparecer novamente, então vamos conferir mais uma vez. Então, seu nome, seu e-mail, sua mensagem e, finalmente, aqui. Icon está indo embora. Azul está se expandindo e tanking texto está aparecendo Agora, obviamente, como todos nós fora desses outros exemplos, você pode fazer isso com as cores de seus clientes. Você pode incluir clientes. Um logótipo. Então, por exemplo, distinto. Você local pode aparecer daqui, ele pode saltar de cima. Cabe a você, ao seu projeto particular e à sua imaginação colocar este exemplo em bom uso e fazer um bom uso dele. Basicamente, quando você enviá-lo de volta para o cliente, isso é apenas para você entender a mecânica e a lógica por trás dele e para entender a estrutura, como emitido estrutura todos os seus elementos para que você possa alcançar a animação perfeita. Então é isso para este vídeo. E vejo-te no próximo 36. Formulário 9: Neste vídeo, vou mostrar-lhe esta transição rápida e agradável entre contactar-me e enviar-me uma mensagem. Então, quando o usuário clica em me contatar, mensagem me vai basicamente entrar em colapso e revelar todas essas informações sobre o usuário ou a empresa que eles querem entrar em contato. E quando você clica em me mandar uma mensagem, está indo para o pé. Expanda esses campos de mensagem e eles podem inserir seu nome, sua mensagem e, em seguida, enviar o email. Então, mais uma vez, quando me contatar, tudo isso vai desmoronar. E quando clicar, mande-me uma mensagem. Tudo isso vai desmoronar. Então vamos começar. Então aqui temos aos nossos portos 800 por 800. E eu só vou mostrar a vocês o design acabado porque nós só temos nossos portos. Então, neste 1º 1 deixe-me aproximar rapidamente um pouco mais. O que temos é um ícone de telefone e, em seguida, contacte-me. Então, princesa, aos 30, qualquer deslocamento fraturado e seta para a esquerda, você pode ver sua posição 20 pixels para a direita. Então é isso que temos aqui. Então temos uma mensagem porque vai aparecer logo abaixo dela. Como você pode ver neste segundo estado e dentro, temos basicamente a mesma configuração. Então temos ícone de e-mail e mensagem de texto que é ciência aberta em 30 também. Então, quando eu o colapso, nós temos informações de contato e nós temos visão mascarada tão alto fez isso. Se eu aproximar um pouco mais, você pode ver, então eu tenho todos esses impostos. Então está aberto, diz 20. Então, apenas um pouco menor que nestes títulos e nós temos todos eles apenas dispostos assim e finalmente eu coloquei a máscara de cor tão branca com borda. Ou você pode colocar uma máscara sem cor de sem borda. Realmente, realmente não importa e eu coloquei a máscara acima de tudo como você pode ver aqui . Então, todas essas camadas de texto estão abaixo e a máscara é colocada no topo como você viu em vários vídeos antes deste. E finalmente eu selecionei todos eles, clique direito e mesquita judeus com forma. E então eu tenho esta mesquita e finalmente abaixo. Temos a mesquita para a mensagem de nome e os botões. Então basicamente tudo isso que você vê aqui. E eu fiz exatamente a mesma coisa que com a Mesquita de Informações de Contato. Então eu criei esses campos pela primeira vez. Então, o mesmo que fizemos em todos os vídeos anteriores. Então o campo para o nome um para a mensagem e, finalmente, apenas os botões regulares. Então, se eu expandi-los, você pode ver que temos sua entrada de nome, sua entrada de mensagem e enviado e botões azuis inferiores de basicamente tudo fora da mesma configuração como um show fazendo em vídeos anteriores. Apenas neste, a entrada está em 6 20 apenas para coincidir com a entrada da mensagem abaixo dele. Então é a mesma sagacidade que aquela. E para o fundo, temos que lutar com 70. Então basicamente o mesmo que todos os outros fundos. E como eu disse, coloquei a mesquita quase todos eles. E nesta, a mesquita desabou, como podem ver aqui. Então é logo abaixo e nesta mesquita é expandida. Então, se eu clicar nele, você pode ver toda a mesquita. Soto escondê-lo, apenas indo simplesmente deixar cair a mesquita para baixo como está no primeiro estado aqui, e quando você clica fora, ele simplesmente vai esconder tudo. E quando você expandi-lo vai revelar tudo o que está dentro da mesquita e neste é você pode ver em informações de contato. Temos exatamente o oposto, então a mesquita é desmoronada e se eu clicar dentro da mesquita e expandi-la para baixo, você pode ver que ela vai mostrar o texto. Então é basicamente isso para o design. Temos essas duas mesquitas trabalhando exatamente da mesma maneira e fazendo basicamente exatamente a mesma coisa. Mas um deles está posicionado apenas no topo e um deles está posicionado abaixo agora é para a camada. Organização é que você pode ver que temos contato comigo no topo porque ele sempre fica no topo. Então temos uma mensagem para mim porque precisamos dela para cobrir este texto quando ele saltar para o pé aqui neste segundo estado e finalmente temos informações de contato, que é isso aqui só porque nós temos mensagem para mim em cima dele bem aqui, e ele está indo para cobrir isso no segundo estado, e então esta mesquita que é esta mesquita para os campos está indo dedo do pé expandir para o topo. É por isso que está no fundo. Então, se eu começar a animá-los quando eu clicar no protótipo, você pode ver que nós temos esses dois estados. Mas eu vou apenas quebrá-los. Então, quando você clicar, entre em contato comigo vai expandir isso quando você clicar. Mensagem para mim vai expandir isso. Então precisamos clicar na mensagem me para que ele mostre isso. Vou simplesmente arrastar dois aqui. Nós vamos pisar ou dedos animar fácil agora 0.6. E finalmente vamos clicar em Contato, arrastá-lo para aqui e usar as mesmas configurações. Então é assim que é fácil ligar esta coisa. Então, quando você clicar em pré-visualização, eu só vou ampliá-lo um pouco, como você pode ver quando entrar em contato comigo é clicado. Essa informação é exibida quando a mensagem me é clicada. Como você pode ver, ele se expande para o topo. Escondendo o texto de contato e revelando todas essas informações. Então, quando você poderia entrar em contato comigo, vai empurrar tudo abaixo e revelou esta informação e vice-versa para me mensagem . Então é isso para este vídeo. E se você não sabe como eu fiz essa informação, ela vai estar contida na profanação X, que você vai obter para esta seção do curso. Ercan saltar para dentro. Você pode inspecionar espaçamentos por si mesmo. Se você perdeu algo como uma cor ou o tamanho do texto ou diferente, você pode inspecioná-lo e copiá-lo e colá-lo em seu próprio design. Você também pode usá-lo para seu próprio trabalho pessoal ou comercial. Você pode fazer isso, por exemplo. Deixe-me dar-lhe um exemplo rápido. Então o que diz, entre em contato comigo. Você pode colocar uma imagem de fundo atrás dela, e quando diz mensagem para mim, você pode colocar a imagem por trás disso. Então, basicamente, ele vai mostrar duas imagens lado a lado. Bem aqui. Você também pode usar cores de fundo diferentes. Então, por exemplo, você pode escolher uma cor verde para o fundo atrás. Entre em contato comigo e cor azul para o fundo atrás. Envie-me uma mensagem para que você possa basicamente colapsar essas duas cores ao lado dela, então uma acima da outra, e você pode fazer isso para apimentar esse design um pouco. Só queria mostrar-te os ossos nus na mecânica por trás disso. E então é realmente com você, toe colocá-lo para trabalhar em qualquer design que você tem ou você tem em mente. Então funciona para você em seu projeto particular. Então é isso para este vídeo, e eu vou te ver no próximo. 37. Formulário 10: neste vídeo, vamos criar este formulário. Então, quando o usuário clica em, seu e-mail vai desaparecer e, em seguida, digitar um e-mail e realçar o dedo do campo de entrada ficar verde. O mesmo acontecerá com a senha. E finalmente, quando eles tiverem que repetir a senha, eles vão cometer um erro. Então ele vai tremer, saltar de volta para os personagens, e então quando eles corrigirem, ele vai ficar verde porque ele vai coincidir com isso, possivelmente em cima. E, finalmente, quando eles clicam em criar conta, ele irá mostrar-lhes sucesso. Então vamos começar. Então, como de costume, tenha o aeroporto em 800 por 800 e eles são todos realmente criados o projetado para economizar um pouco de tempo. Então, no topo, nós criamos contagem, que é sentido aberto em 28. Então temos esses três campos, e finalmente temos um botão abaixo. Então, para os campos, se eu aproximar um pouco mais, temos o texto menor no topo. Introduza o seu e-mail. É sentido aberto. E 14 temos uma mesquita, que é a mesma máscara, basicamente como você viu nos vídeos anteriores, especialmente na seção do curso. Então temos esta mesquita, que vamos revelar mais tarde. E abaixo disso temos o texto, obviamente. Mas abaixo da mesquita temos seu e-mail, que é sentido aberto na luz DDT, cor cinza. E finalmente temos a entrada, que neste caso está em 400 por 70. Então, se eu diminuir um pouco, nós temos esses dois campos basicamente exatamente o mesmo que este 1º 1 E finalmente temos criar conta inferior, que tem uma mesquita e dois botões. Basicamente. Então nós temos o botão azul, que é este botão básico Nós temos o botão verde com a opacidade um abaixado, e a cor verde é a que usamos ao longo do discurso. Ou é 55 D 466 E como eu disse várias vezes ao longo deste curso, você vai ter este selvagem dentro desse arquivo extra. Você pode então inspecionar todos esses elementos e copiar gatos. Koji sentir como essas cores para usá-los em seu trabalho e, finalmente, na parte inferior. Temos a mesquita foi para texto dentro, então basicamente o mesmo que eu mostrei em alguns dos vídeos anteriores. Então nós temos First State, que é criar conta e Estado Final, que diz sucesso e vai descer de disposição para disposição. Então, vamos começar e vamos duplicar este nosso porto atingiu o controle de. E neste primeiro dia vamos ficar doentes sobre a cidade de Obedeça do teu e-mail até ao fim. Então vamos bater o controle mais uma vez, porque neste Primeiro estado os usuários vão clicar para inserir seu e-mail. Em seguida, o seu e-mail vai desaparecer. E então nesse estado, vamos mudar a cor dessa entrada. Então deixe-me abri-lo rapidamente, e nós vamos usar a cor verde de que são inferior é para que possamos rapidamente selecionar o colar verde a partir daqui. Então eu vou simplesmente clicar no controle C neste para copiar a cor e onde ele diz entrada. Você pode clicar aqui mesmo na fronteira, não no filme bater Control V para colá-lo, e nós vamos revelar nossa mesquita para mostrar que o e-mail foi inserido e foi inserido corretamente como você pode ver aqui mesmo porque estes formulários pode detectar se você, por exemplo, perdeu cardo no personagem ou você soletrar errado, por exemplo, Gmail ou você perdeu a filha. Algo assim. Eles podem detectar isso e indicar em vermelho que você cometeu um erro. Ou, se você não fizer isso corretamente, eles podem indicar em verde que você fez isso corretamente. Então eles vão clicar aqui na sua senha. Então basicamente a mesma coisa que para o e-mail. Então nós vamos bater o controle um D e no passaporte estávamos indo para todo o lado lá baseado para baixo, bater o controle mais uma vez e, em seguida, aqui dentro nós vamos revelar a mesquita, e esses pontos são conjuntos abertos em 40 e nós vamos faça o mesmo para a parte inferior mais tarde. E finalmente temos dedo baseado a cor fora da borda de entrada. O mesmo que com o anterior. Então, em seguida, eles vão apertar a senha repetida, então nós vamos duplicar essa. Então, quando eles clicarem, a senha repetida deles vai passar por toda a Bay City para baixo. Basicamente, vamos ter o controle do mais uma vez e agora neste vai ficar vermelho e eles vão começar a digitar seu passaporte. Então, primeiro, deixe-me ampliar isso um pouco. Tão bom acertar 40 para torná-lo o mesmo. Então, para este, eles vão começar a digitar seu passaporte assim. E ele vai mostrar um vermelho para a entrada e a cor da ameaça é E 53 C 85 assim. Então ele vai mostrar basicamente que eles perderam seu passaporte porque eles entraram aqui e então eles não repetiram corretamente aqui. Então vamos duplicar este hit controlou o e agora neste, o que queremos é localizar esta entrada, e vamos apertar shift e seta para a esquerda para movê-lo. 10 píxeis do lado esquerdo. Então vamos acertar o controle, não é? Mais uma vez. E neste, vamos basicamente movê-lo de volta para o meio, assim. Então mude 10 pixels para a direita, e então vamos movê-lo basicamente mais uma vez, ou você pode deixá-lo assim. Então, se você quiser tremer em ambas as direções. Você pode fazê-lo diretamente a partir daqui, então, quando eles começarem a digitar e terminarem de digitar, ele ficará vermelho. Então ele vai tremer para a esquerda, e depois volta para a posição. Ou você pode apenas fazê-lo ir para a direita. Na verdade, cabe a você. Como você quer exibir esse shake? Realmente? Então, neste próximo, vamos abaixar isso. Então esta mesquita nós podemos baixar por três caracteres para baixo assim e no próximo quando eles começam a digitar novamente, assim, nós vamos mudar a cor de entrada dedo que cor verde para que você possa simplesmente escolher este cor. Certifique-se de que é sim. 55 D 466 Então é basicamente a mesma cor que todos esses outros, e finalmente eles vão clicar, criar conta. Ele controla D. E neste estado final, o que queremos é que esta garrafa fique verde e esta mesquita vai mostrar sucesso. Então, apenas certifique-se de que eles estão na mesma linha que estão, e nós vamos mover, criar uma conta para baixo na parte inferior. Então é basicamente isso para os nossos estados. E agora é hora de protótipos, então eu vou ter o controle. Zero e eu fomos aproximar um pouco mais. Vou selecionar este campo inteiro. Os usuários vão tocar em. Vamos usar o carro. Animate está dentro e digamos 0.6 segundos. Eu acho que vai funcionar bem o suficiente agora neste próximo. Queremos ter tempo porque está indo para a transição do dedo do pé. Basicamente, entre esses dois são placas e para o tempo que vamos usar, digamos, atraso de tempo 0,8 segundos. Também animar, aliviando. E, finalmente, vamos usar 0,8 segundos para que tenhamos um pouco de consistência. Agora, neste próximo, eles vão clicar aqui mesmo. Então vamos usar a autonomia passo TZ nota 0,8 segundos. Boletim, rápido. Confira este 1º 1 Usamos 0.6 segundos. Vamos usar 0,8 em todos eles, então cabe a você se você quiser que ele seja mais curto ou mais longo. Então 0.8 ou dedo do pé animar. Agora, neste, você vai usar o tempo. Então tempo 0.80 ponto oito Fácil. Uma saída neste. Eles vão bater no dedo do pé assim ou para qualquer carne que se afaste. E finalmente, o que queremos para estes porque agora eles vão começar a tremer. Vamos usar o tempo de atraso fora de zero segundos porque queríamos saltar imediatamente para este. Em seguida, em que vamos usar o tempo DeLay 0.8. Mas nós vamos usar salto em vez de facilidade para fora assim e neste bem, em é as mesmas configurações. Então, às vezes vai 10.8. Ou talvez possamos usar Yeah, vamos usar o seu nomeado para ver o que ele faz Bounce 0.8. E finalmente, para este, não vamos para o salto dele. Você vai usar uma saída fácil porque ele vai ser basicamente no mesmo lugar que este aqui. Então vai saltar de volta para a sua posição original. Nós estamos indo para stymie zing fora, e Delay permite que você 0.8 ver como isso se parece. E, finalmente, vamos clicar no botão, arraste seu você está indo para passo foto inimigo, nota fácil e 0.8 segundos. Então, agora que conectamos tudo, vamos checar. Veja como parece que ele para jogar em grande Ele clique aqui vai desaparecer. Digite um e-mail e fique verde para que a senha vai desaparecer. Digite um e-mail, fique verde. Repita a senha. Como você pode ver, ele salta volta para a posição e agora ele mostra pontos originais. Agora temos um pequeno bug aqui, que eu vou corrigir. Mas primeiro vamos verificar isto. E finalmente temos sucesso. Então, como podem ver, eu mudo o tamanho desses pontos mais tarde quando eles são revelados. Mas não antes disso. Então é por isso que temos este estranho pântano para saltar mais uma vez mostrando toda a animação. Então temos isto. Nós temos isso e agora veja isso porque estes estão em 40 e essas palavras são um pouco mais baixas. Então, quando você clicar aqui como você pode ver a classificação fora alargar a partir da primeira posição do pé esta última posição. Então eu vou pular e consertar isso agora. Então vou revidar o projeto, ver onde eles estão. Então aqui estão todos eles aos 40. Eu vou pular aqui. mesquita. E nós vamos clicar aqui mesmo. 40 assim. E eu vou fazer a mesma coisa basicamente, para todos fora deles no outro, nossos portos. Bem aqui na mesquita, 40. Obrigado. Então talvez possamos clicar com o botão direito e clicar em Copiar neste. Clique com o botão direito sobre esta aparência baseada em um hit. E como você pode ver, ele muda para 40 bem aqui. Você pode fazer o mesmo aqui, certo? aparência baseada em cliques muda para 40. Então você não tem que digitar todas as vezes. Então, simplesmente localizado aqui, direito, clique com base. E neste primeiro 1 clique com base no botão direito. É por isso que estou dizendo que você tem que ter as mesmas configurações em todo o seu design. Então, em todas as nossas portas e você tem reboque, basicamente nomeie suas camadas corretamente para que tudo funcione corretamente. Caso contrário, não funcionará como deveria, como pretendia para mim. Então vamos verificar isso rápido. Bem aqui. Isto parece bom. Clique aqui, Waits revela. Clique aqui. E como você pode ver agora, parece corretamente ele vai saltar para trás, trazer de volta alguns pontos do que digitar fora novamente. Como você pode ver. Tornar-se verde e violar. Crie o sucesso da conta. Isso é tudo para este vídeo. Espero que tenhas gostado e vejo-te no próximo. 38. Arquivo XD: neste vídeo, eu queria mostrar-lhe formulários X'd arquivo. E estas são todas as formas que estávamos criando nesta seção fora do curso, Sirkin, saltando rapidamente, inspecionar alguns elementos e mencionamos várias vezes ao longo desta seção do curso. E dentro desses vídeos, você pode realmente inspecionar todos eles para seu próprio processo de criação. Então, por exemplo, você esqueceu o quão grande é a botânica. Você pode pular para dentro. Você deseja usar a mesma cor, você pode copiá-la se quiser usar a mesma frente ou o tamanho do telefone. Você pode fazer isso também. Para este exemplo particular, onde usamos imagem. Talvez você não se lembre como algumas transições funcionam. Você pode clicar rapidamente no protótipo, e você pode clicar entre eles e vê-lo, por exemplo. Ok, você vai pisar ou animar? Fácil agora 0.6 segundos. Então, quando você obtém uma pré-visualização, você pode ver como isso se parece para que você possa fazer todas essas coisas dentro deste arquivo. Você pode copiar e colar esses formulários em seus próprios projetos, e então você pode usá-los para seus clientes pessoais e comerciais. E finalmente o que quero mostrar a vocês é este painel de ativos. Então, quando eu clicar aqui, você tem todas as cores aqui. Então você pode clicar com o botão direito e copiar esta cor, por exemplo, se você quiser usá-la em seu próprio design e, finalmente, se você quiser mudá-la em algum lugar por aqui. Então, por exemplo, temos este azul na maioria dos projetos que você pode clicar com o botão direito do mouse editar e, por exemplo, eu quero usar essa cor roxa. Como você pode ver, vai mudar em todos os lugares em cada instância onde temos essa cor azul. Então, cabe a você o que você quer fazer com este arquivo. Você tem toda a minha permissão para usar qualquer um destes formulários em quaisquer outros elementos deste curso em seus projetos pessoais e comerciais. E quanto aos links, por exemplo, para a imagem e a frente, eu vou deixar todos os links na lição final fora do discurso onde eu vou mostrar a vocês o arquivo de vídeo que você também vai receber um esse arquivo pdf. Todos os links serão localizados toe download e usar todas essas fontes re que são gratuitos para uso pessoal e comercial. Então eu vou te ver no próximo vídeo 39. Texto 1: neste vídeo, eu vou mostrar a vocês esse efeito contra o texto. Então, quando você clica em atual ou depois de um certo tempo, ele vai percorrer todo o texto e, em seguida, aterrissar em um determinado número. Então vamos começar. Então eu vou usar em nossa porta off 800 por 800 em quando usar o tipo dito. Clique em algum lugar lá fora e vamos usar o cess aberto aos 90. Vou digitar o Centro de Imprensa zero. 123456789 Então, se eu clicar em algum lugar fora e diminuir o zoom, você pode ver como isso parece que eu vou clicar duas vezes, controlar um controle, viu? Em seguida, clique no texto, mova todo o caminho para baixo pressione, digite com base e, em seguida, pressione Venter e baseado novamente. Então, se eu diminuir o zoom, vocês podem ver que ouvimos três linhas de números indo de zero esta noite. Então esse é o nosso 1º 1 E eu vou apenas usar rapidamente uma ferramenta de retângulo. Alguém assim, e eu vou posicionar o dedo do pé aqui, então para estar perfeitamente no centro, e então eu vou posicionar isso logo acima deste retângulo. Então, talvez para algum lugar por aqui, então eu vou copiar o texto para que ele controlasse D. Mova-o para a direita. Digamos que 20 pixels assim e ele controlou mais uma vez e moveu os 120 pixels para a direita também. Então eu vou agrupar o texto para ele controlar G, movê-lo para o centro como eu posso agrupá-lo, em seguida, usar este retângulo e reduzir a inteligência dele para algo como aqui. Vou ligar para esta mesquita, e depois vou pedir a mensagem. Então este é 1/3 1 da esquerda para a direita. Este é o 1º 1 Este é o do meio. Então eu vou selecionar todos eles usando minha tecla Shift, certo? Clique e mesquita com forma. Vou ligar para o balcão da mesquita e este será o nosso primeiro estado. Então eu vou bater Control de para duplicar este nosso porto. Eu vou pular dentro do texto e eu vou segurar o turno e mover este primeiro texto para este número sete. Algo como isto. Certifique-se de tentar rebocar todos esses números para cima, então algo assim, então eu vou usar o 2º 1 e agora eu não vou usar no primeiro número sete. Então não este, mas sim o segundo número sete. Então continue rolando para cima até chegar ao número sete e tentar alinhá-lo com este 1º 1 assim E finalmente, vamos fazer o mesmo para este bosta. Mas vamos usar o terceiro número sete, então vá para o terceiro número sete. Então o último neste contador e aqui está, então você não precisa usar os mesmos números. Você pode usar números aleatórios. Então vamos usar, por exemplo, 78 noites. Então, basicamente, isso realmente ajudou para você quais números você está escolhendo e certifique-se de que você vê se eles estão todos alinhados, eles são Talvez apenas este número nove apenas amarrado oito. Só um Ted agora. Então algo assim, eu acho, funciona bem. Sim, este processo é um truque. Você pode usar guias, mas eu estou tentando te mostrar isso em outra pequena hora de estar. É possível. - Não. Vamos protótipo de protótipo de calor. Eu vou usar o passo, o que você pode usar o tempo. Então, depois de um certo tempo, isso vai acontecer. Então vamos usar o atraso de tempo. Só vou usar um segundo. Também animado. Selecionado Fácil agora em duração é de três segundos. Então vamos ver como isso se parece. Então, depois de um segundo vai começar e chegar a 789 agora, você também pode voltar se você quiser, e ele vai contar todo o caminho até zero. Você pode ter quantos números quiser. Apenas certifique-se de percorrer por eles ou se você quiser alternar um por um, então você pode tê-los. Por exemplo, queremos um 789 Você não precisa percorrer três linhas de texto como fizemos neste vídeo . Você pode fazê-lo com apenas um, mas você não vai conseguir um efeito diferente. Então esta é basicamente a base para você e seus projetos. Então, construa a partir daqui. Então é isso para este vídeo, e eu vou te ver no próximo 40. Texto 2: neste vídeo, vou mostrar como podemos criar esse efeito de texto que você costuma ver em cabeçalhos, por exemplo, por exemplo, ou em sites ou em algumas áreas fora do site, onde você quer chamar a atenção. Então, quando eu clicar em, ele vai ampliar um pouco mais perto da imagem e trazer o foco principal na imagem em foco. Então, é este veado neste caso, então se eu voltar mais uma vez, toque nele. Você pode ver como isso parece, então vamos começar. Então aqui tem o aeroporto em 800 por 800 quando usar o título, clique em Bean Nature, selecione tudo e escolha senso aberto a partir daqui e para o tamanho. Vamos escolher algo realmente grande, por exemplo, em 50 e posicionado no centro. Certifique-se de que está no meio assim, e em vez de regular, você pode usar parafuso extra para que nós alcançamos este efeito de texto realmente negrito. Em seguida, você tem que clicar com o botão direito sobre ele goto parte, em seguida, converter parte dedo do pé porque eu gosto de uma loja de fotos onde você pode apenas mesquita este dentro de seu painel de camadas. Você não pode fazer isso no Adobe X'd até agora, pelo menos não na realização deste vídeo. Então isso é posicioná-lo no centro. Não, e talvez na atualização futura eles estejam indo para o pé. Adicione essa opção. Mas como eu disse, por enquanto, você não pode fazer isso. Então eu tive que convertê-lo em maconha. Vamos chamar essas partes de texto como Então, em seguida, eu vou rapidamente dragar uma imagem do meu computador. Eu vou posicioná-lo no pacote, e eu vou chamar essa imagem assim E eu vou ampliar, por exemplo, algo como aqui. E vamos rapidamente o Dia da Mesquita se inclinar para que você possa selecionar os dois. Bastante clique mesquita com forma ou seu turno. Controle em ou comandante de turno no Mac, e você pode ver agora eles estão mascarados. Agora vamos fazer uma duplicação para que ele controlasse o e neste, vamos usar o nosso turno e a tecla de seta esquerda. Não reduza o tamanho e para baixo muito algo como isto e condensa ou os desobedeceram melhor. Então, por exemplo, em algum lugar como este, para que tivéssemos que ver a cabeça do veado assim, e neste 1º 1 nós vamos ficar muito, muito grandes, então você pode clicar na imagem controle de deslocamento e esquerda, clique e amplie-o tanto quanto você quiser. Então, por exemplo, algo ridículo como este, e finalmente, tempo funciona muito bem com este gatilho. Mas eu mostrei como ele funciona com a etapa para que você possa clicar sobre isso, nossa porta arrastar uma alça. E em vez do tempo de uso superior, teremos um atraso de 0,8 segundos de transição ou para animar, flexibilizar e duração. Você pode configurá-lo em assemelhar-se a três segundos para que ele pudesse jogar. Vai esperar um pouco e, em seguida, vai ampliar um pouco mais perto do foco principal deste vídeo. Então é basicamente isso para este vídeo, e eu vou te ver no próximo 41. Texto 3: neste vídeo, eu vou mostrar a vocês como ele pode criar este texto de carregamento de fato. Então, quando eu clicar sobre ele vai começar a carregar peso e, em seguida, revelar o texto inteiramente. Então, lute por favor de novo. Você pode ver que ele começa, pára e, em seguida, revela o texto inteiramente. Então vamos começar. Então, como de costume, estamos começando com a saída de 800 por 800. Vou clicar no têxtil. E então eu tenho carregado como Então eu vou fazer isso sentido aberto. E para Dis Ice, vamos escolher algo grande como 120 E em vez de normal, vamos escolher um parafuso extra como este, ter certeza que está alinhado no centro e certifique-se de posicioná-lo no centro como So Now para a cor, vamos usar essas cores azuis ou três E C. Seis ff. E finalmente, vamos usar lápis porque vamos desenhar uma forma agradável e simples. Então vamos começar com uma linha de fundo como esta. Segure o turno e talvez possa criar um carro como este. Então, basta clicar e segurar e, em seguida, liberado para algum lugar como aqui, e então talvez possamos criar ocorrer assim e você pode obter técnico com isso. Você pode entrar em muitos detalhes e criar quantas ou poucas dessas curvas você quiser, apenas para que você possa alcançar o efeito que você realmente quer. Então, por exemplo, aqui mesmo que criamos essas partes, é chamado, por exemplo, forma assim E vamos mesquita, ambos para obter o nosso Sercan, selecione eles clique direito e mesquita com forma, e o que eu vou fazer é clicar na forma e simplesmente baixá-la assim e nós vamos chamar esta mesquita. Então esse é o nosso primeiro estado. Vamos apertar o controle DE para criar nosso segundo estado para que você possa selecioná-lo e vamos mover essa forma um pouco. Então pode segurar o turno e movê-lo para algum lugar como aqui. E você pode clicar fora e ver. Chamar sua forma parece. Então, se você quiser fazer algumas alterações adicionais, você pode e finalmente criar nosso terceiro estado. E neste estado vamos revelar o nosso texto. Mas não só isso. Vamos mudar essa forma um pouco, então eu vou clicar duas vezes. Então eu posso saltar para dentro e eu posso arrastar alguns desses pontos por aí. Então, por exemplo, este e eu podemos arrastar. É para algum lugar como aqui. Posso arrastar este também para fora. Então talvez em algum lugar como este arraste este 12 aqui e certifique-se de que todos os outros estão seguindo. Então algo assim é bom. Então tudo é basicamente revelado e você pode ver todo o texto. Então, não, vamos criar um protótipo. Você pode clicar e escolher tocar ou tocar em qualquer encontro, facilitando e duração ALS. Dê um segundo para o 2º 1 Vamos usar o tempo. Então, atraso no tempo. Podemos usar um segundo ou para animar nota fácil e um segundo para a duração. E vamos visualizar o que criamos. Então, quando eu clicar aqui, você pode ver que ele começa e, em seguida, revela todo o texto. Então, como eu disse neste segundo estado, se eu pular para dentro mais uma vez, é realmente até você como você pode criar o local e você pode editá-lo à vontade. Você pode até fazer isso direito. Então, por exemplo, se escolhermos o retângulo, você pode criar um retângulo exatamente como este e, em seguida, revelá-lo no topo e revelar todo o texto, se quiser. Mas eu acho que é muito mais interessante quando você está usando mental para criar essas formas, e eu acho que isso dá muito mais valor a ela. Por exemplo, você pode até usar logotipos e combinar logotipos de clientes nesta animação de carregamento. Assim, por exemplo, quando terminar de carregar ou abrir caminho como aqui, você pode trazer logotipo para trás. Você pode revelar o logotipo com o texto de carregamento. Então, por exemplo, logotipo pode estar bem aqui no topo, e é realmente até você como você pode conseguir isso. Mas é importante que você inclua dentro desta mesquita. Então, por exemplo, se você quiser incluir o logotipo, talvez você possa colocá-lo aqui logo abaixo dessa forma ou no topo. Isso realmente importa, e então quando você revelar tudo, logo virá aqui no topo. Então é isso para este vídeo, e eu vou te ver no próximo 42. Texto 4: neste vídeo, eu vou mostrar a vocês este texto morphing, que vai de uma imagem para a imagem de fundo e se transforma de volta no lugar. E se você vê-lo mais uma vez, você pode ver como isso se parece, e você pode usá-los para cabeçalhos. Quando o seu site ou móvel voltas, você pode usá-los para chamar a atenção dos pés uma parte do design que precisa de mais atenção do que os outros e assim por diante. Então, vamos começar. Então ter um aeroporto off 800 por 800 foi para usar tipo têxtil em montanhas e consentimentos úteis . Talvez 120 assim, talvez até 100 quando ele pode ser demais. E podemos usar algo como parafuso extra ir do centro, posicioná-lo no centro. Eu posso clicar com o botão direito sobre ele, pensamento converte em parte, e então simplesmente posicioná-lo como para que você possa escolher um texto como esse. E, finalmente, eu preciso de uma imagem de arrastar e soltar na imagem. Esta imagem é do ponto com splash, e eu vou posicioná-la e diminuir o tamanho para algum lugar por aqui. Vou chamar esta imagem BG porque vai ser a nossa imagem de fundo. Vou duplicá-lo para o controle D. E esta é apenas a nossa imagem, que vamos para a mesquita com este texto. Então, como ambos, clique direito mesquita com forma. E como você pode ver, nada realmente aconteceu aqui. Mas agora vem a parte divertida. Então este é o nosso primeiro estado de controle de batidas D. Este vai ser o nosso segundo estado, então você pode fazer isso de várias maneiras. Você pode assumir isso. Amplie isso. Você pode, por exemplo, fazer assim ou simplesmente movê-lo dedo do pé na área fora mais leve. Concentre-se em. Talvez assim, você poderia ver como isso se parece, e isso é basicamente para a parte de design. Vamos fazer o protótipo. Então clique em seu 1º 1 Você pode escolher um atraso de tempo fora de um segundo. Transição é animação automática. Facilidade para fora daqui e finalmente duração literalmente três segundos. Por exemplo, clique no 2º 1 arrastado manipulado de volta. Ele vai conter os mesmos efeitos, então quando você clica bem aqui, ele está indo peso do dedo do pé, em seguida, mostrar-lhe este texto e revelar basicamente e, em seguida, saltou de volta ao lugar. Você pode torná-lo maior ou menor, vir de dentro ou fora da matéria Drillers, e você pode até mesmo usar a cidade apace. Então, neste 1º 1 acima de uma cidade fora, o texto pode ser zero, e no 2º 1 pode ser 100, então ele pode realmente adicionar ao efeito, e você pode usá-lo. Como eu disse em seus cabeçalhos ou nas áreas do site ou aplicativo móvel, você quer chamar mais atenção em. Assim, por exemplo, você pode escrever no nome do produto e você pode colocar o próprio produto dentro deste texto e, em seguida, revelar o produto como, por exemplo, usuário rola ou quando eles clicam em algum lugar, e o próximo estado desse clique deve ser a revelação do produto. Então você pode revelar o produto dessa maneira e torná-lo um pouco mais interessante. Então é isso para este vídeo, e eu vou te ver no próximo 43. Texto 5: neste vídeo, eu vou mostrar a vocês esse efeito de texto distorcido. Você pode usá-lo durante o carregamento ou quando você está em transição, ou quando você quiser apenas chamar um pouco mais de atenção para a nossa área ou para uma seção do seu site ou de um aplicativo. Então, vamos começar. Então Havenaar embarcar 800 por 800 indo para usar meu têxtil para digitar jogo aberto diz 100 extra negrito. E eu vou usar a fronteira sem nenhum filme. Então, se você se sentir selecionado como de costume, simplesmente desmarque aqui. Em seguida, eu vou clicar com o botão direito sobre ele, parte para parte, e eu vou colocá-lo aqui e aqui. Então, para estar perfeitamente no centro a seguir, vamos criar uma duplicata para que ele controlasse D para fazer uma cópia. E neste, você vai clicar duas vezes dentro e simplesmente brincar com esses pontos para que você possa posicioná-los em todos os lugares no próximo chefe Adulto como ele vai converter de pontos retos para o ponto de terra para que você possa realmente jogar com ele, e você pode expandi-lo ou colapsá-lo do dedo do pé como você quiser. Só não adicione mais pontos porque isso vai estragar todo o recurso de animação automática. E, por exemplo, você pode criar algo assim, então classifique o efeito ondulado. Portanto, todas as cartas devem ser dispensadas. Então, talvez algo assim, por exemplo, e depende de você. Quantos fora destes você quer criar, e que efeito você está tentando alcançar? Então, talvez assim? Talvez seja bom o suficiente? Sim, e vamos mantê-lo assim. Mas talvez faça o mesmo aqui e finalmente sobre isso. Por que caráter? Vamos fazer isso e talvez fazer o mesmo para esses dois, mas estendê-los ao contrário. Então eu vou clicar nele e talvez criar algo como isso, então realmente um efeito ondulado e meio fora. Então, como você pode ver, ele realmente parece diferente do que este aqui. E quando chega a hora de protótipo, basta selecionar todo o nosso uso de drogas porto atraso tempo de zero ou para qualquer carne está em nossa duração de um segundo e simplesmente trazendo de volta mais uma vez. Então, quando eu clico em um apelo, você pode ver que ele se transforma em distritos que acabamos de criar, e você pode usar isso como eu disse, enquanto carrega. Ou se você quiser chamar a atenção para uma determinada parte do seu site ou em cima, você pode incorporar este efeito. Você também pode fazer isso com o logotipo de seus clientes, assim você pode, você stat para carregar, e você pode usá-lo basicamente de várias maneiras. Você pode colocar uma mesquita em cima e mais disso em uma imagem, então é realmente com você em sua imaginação. Então é isso para este vídeo. Vejo-te no próximo. 44. Texto 6: neste vídeo, eu vou mostrar esses efeitos de texto. Então, quando você clica em algum lugar vai digitar um início de palavra. Então vamos começar. Então, como de costume, tinha o aeroporto em 800 por 800 vamos começar a digitar são letras. Então eu vou digitar s usando Oh, processe 100 parafuso extra com a posição no centro, como tão controlado profundamente e eu vou falar coisas t como então certifique-se seu barco alinhado assim e, em seguida, pressione shift e tecla de seta para a direita para que você pode movê-lo 10 pixels para o controle esquerdo. Você mais uma vez a mesma digitação a. Então faça o mesmo espaçamento como então controle Você mais uma vez e, em seguida, criar um R como então E, finalmente, controle de Para criar um T como este, você pode selecionar todos eles. Mas o que eu gosto de fazer é pedir lá porque é mais fácil para mim e depois saber qual é qual. Então, assim, você pode agrupá-los posição no centro assim, e o que você pode fazer é criar uma bela grande mesquita como Então posicionar essa mesquita no centro assim. Eu fui mesquita e você pode selecionar tudo Mesquita com forma. E agora todos os seus personagens são mesquitas como esta. Precisamos de um estado vazio e de um estado final. Então vamos duplicar estes são placas algumas vezes. Então este vai ser o nosso estado vazio. Sim, e este vai ser o nosso estado final. Então, o que vamos fazer, basicamente, é que vamos saltar aqui mesmo dentro desta mesquita e sobre todas elas para baixo para simplesmente segurar o turno na sua seta de baixo. Então você pode pular aqui dentro e deixar justiça dentro e apertar Shift na seta de baixo algumas vezes até mover tudo para fora para baixo. Isto é para RT, então S e T vão ficar lá dentro. Você pode mover todo o resto para cá. Teremos um nome. Então não vão ficar para baixo assim E aqui vamos manter o nosso mas apenas removido t E finalmente, para este último, vamos manter tudo assim Então vamos começar a prototipar. Então, neste vamos usar passo ou para animar snap 0.4 segundos. E para o resto deles, vamos usar o tempo ou para animar o snap 0.4 segundos. Agora queremos usar o snap porque queremos que ele se encaixe na posição. E se eu clicar em seu primeiro 1 clique jogar, eu vou tocar. E como você pode ver, eles se encaixam em posição assim Então é basicamente isso para este vídeo, e eu vou te ver no próximo. 45. Texto 7: neste vídeo, vamos criar este carregamento de efeitos de texto. Então, se um clique aqui, ele vai carregar e, em seguida, cair de volta. Se eu clicar novamente, você pode ver como ele se parece. Então, basicamente anima o contorno do texto e, em seguida, cai de volta para baixo do dedo do pé branco. Então vamos começar. Então, como de costume, ter o aeroporto 8 800 por 800 indo para usar o título que eu tenho carregado usar senso aberto, e talvez possamos usar 100 sika Isso parece, sim, sim, eu acho que isso parece bom, mas judeus extra ousado. Ou talvez possamos até escolher algo leve. Ou assim, por exemplo, que mostra Bolt e vamos escolher borda dentro em vez fora do campo como então vamos clicar com o botão direito sobre ele parte converte em pote para que possamos animá-lo. Posicioná-lo no centro fora da nossa placa, assim e o que nós também vamos querer é que eu só vou voltar algumas vezes porque eu quero fazer um er duplicado. Então eu vou obter o controle D então selecione o controle D para fazer uma duplicata e agora eu vou esconder este e transformar este em partes. Então converta os potes. Agora eu vou selecionar ambos e posicioná-los no centro como então esconder o texto original. Quanto ao papel, vou fazer outro policial. Você é ele. Selecione ambos, e eu vou usar a borda fora três e c seis f f assim e quer aumentar essa borda para talvez cinco. Sim, acho que parece bom. E eu vou clicar com o botão direito sobre ele. Mesquita com forma. Então agora o que você vai fazer é simplesmente mover este topo para baixo assim incluir o carregamento e para o carregamento, nós estamos indo dedo incluir sentir cor fora branco assim E nós estamos indo dedo do pé pode ser movido ligeiramente. 1234 pixels para a esquerda ou algo assim. Finalmente, vamos fazer o controle do aeroporto, selecionar tudo, selecionar tudo, e agora estamos indo para o pé. Mova isso de volta para a posição assim. E como você pode ver, ele já está mostrando o efeito e você pode clicar no carregamento e talvez posicioná-lo um pouco diferente. Então talvez algo assim para que você possa movê-lo com suas flechas para cima e para baixo e ver. Encontre o efeito que você gosta. Então talvez aqui, sim, talvez seja bom, e você também pode fazer é colocar um texto normal no topo, ou você pode até mesmo ir maior do que isso. Você pode todo o tamanho ou aumentar o tamanho. É mesmo com você. E agora, finalmente, com o carregamento clicado, eu vou apertar o controle C porque nós movemos isso e eu vou clicar neste hit Control V para que tenhamos exatamente o mesmo texto em ambas as portas. Então, agora acerte o protótipo e você pode cumprir pena. Ou você pode fazer Tep. Vamos usar o tempo de atraso de talvez um segundo ou dois animates. Facilidade para fora daqui e duração. Vamos dar um segundo e, finalmente, vamos trazê-lo de volta para o 1º 1 para ver quando eu poderia jogar. Você pode ver como ele se parece, e ele está voltando para o dedo do pé branco. Ele está voltando ao carregamento e está voltando para baixo, então é assim que é fácil criar. E é isso para este vídeo, e eu vou te ver no próximo 46. Texto 8: neste vídeo, vou mostrar-lhe este efeito de digitação. Então, qualquer clique que você verá esta maldição ou piscando, e então ele vai começar a digitar letra por letra e e peixes. Vai voltar a zero, e vai desaparecer. Então vamos começar. Então, mais uma vez eu tenho em nossa porta, configurado em 800 por 800 quando usar o título Bean. Eu acho que sim. Eu vou usar o senso aberto, e eu vou usar algo sendo como 100. Acho que isso parece bom e enfraquece. Não use, talvez até mesmo parafuso, assim posição no centro, e eu vou criar um retângulo que vai servir como uma mesquita. Sloan apenas rapidamente mesquita como assim chamá-lo de mesquita como este, e finalmente, eu vou criar mais um retângulo. Então talvez algo assim, com a posição no meio, usou exatamente a mesma cor de preenchimento, e este vai ser nosso pisca assim, então certifique-se de que está no centro. Certifique-se de que está posicionado em algum lugar do lado de fora. Então, por exemplo, talvez aqui e finalmente trazer de volta a mesquita, selecione mesquita e digitação e crie mesquita com forma usando turno de controle M turno. Comande-os se estiveres num Mac, por isso esta vai ser a nossa mesquita. Finalmente saltar para dentro e trazer a mesquita de volta para a esquerda para que você possa esconder todos os personagens. Assim como. E neste 1º 1 vamos simplesmente clicar no pisca duplo tipo R zero tecla. Ou você pode baixar sua cidade paga aqui para zero. Em seguida, vamos clicar no controle D para duplicar o aeroporto. Selecione tudo aqui. Use o pisca. Aumentou o seu pastoso. O controle 100 d Vender o pisca novamente. Abaixe seu ritmo, equipe Jodi, selecione o pisca novamente a partir daqui. Aumente seu pastoso. E no próximo, vamos começar a revelar nosso texto. Então vamos usar nossa mesquita, revelar Artie só para ouvir, então simplesmente mover o pisca para aqui. Em seguida, podemos duplicar este e fazer o mesmo para que possamos começar a enrolar. São cartas como o controle De e podemos revelar este também. Então fale “controle”. De como você pode ver, esse processo pode ser um pouco tedioso, especialmente se sua palavra é um pouco mais longa Mas se o efeito é satisfatório, especialmente seus clientes, então vale a pena prosseguir. Especialmente se você está dando isso para os desenvolvedores um pouco mais tarde para que eles possam saber que efeito eles podem alcançar no frio um pouco mais tarde e o que você tinha em sua mente para o processo de design . Então, finalmente, uma vez terminado, podemos fazer mais um. Assim como o pisca e abaixe o pastoso A para baixo para zero. Agora vamos começar a prototipagem. Você pode clicar salto protótipo aqui, e podemos usar passos para que possamos iniciar a animação que podemos usar. Animar automaticamente, fácil agora e zero pontos. Isso é um seis segundos está aqui fora Agora para este aqui, nós vamos usar basicamente as mesmas configurações, mas tempo de espera então tempo, ou para animar Fácil. Agora 0.6 fazer o mesmo para este, mas para este, vamos usar snap em vez de está dentro. Então estamos usando o tempo. Um cm de atraso, zero segundos também animam snap e 0,6 segundos. Então vamos usar o snap para todos eles. Então vamos movê-los junto. E finalmente, para este último em vez de snaps, vamos usar está dentro agora vamos ver como isso se parece. Eu vou clicar em seu 1º 1 clique Play. Step Somewhere vai piscar duas vezes, e ele vai começar a digitar e revelar nossas cartas e finalmente desaparecer. Você também pode incluir um atraso neste último para que você possa incluir seu atraso, talvez um segundo. Ou talvez seja demais para 0,8. Então, mais uma vez quando eu clicar aqui, ele vai piscar duas vezes 12 Então ele vai começar a digitar todas as letras e vai esperar aqui e depois desaparecer. Portanto, é bom efeito ter, especialmente se você tem algo, por exemplo, em seu cabeçalho. Então você quer chamar um pouco mais de atenção para reduzir a taxa de rejeição, e você quer manter esses visitantes um pouco mais em sua página da Web para mostrar-lhes um pouco mais informações adicionais. Você também pode fazer mesquita dentro da mesquita, por isso, quando você digita neste texto, você concorda, revelar a imagem no fundo e realmente possibilidades são infinitas, e especialmente após o processo de design tem terminou, os desenvolvedores podem então facilmente incorporar isso no design para a citação final. Desculpe, porque eles sabem o que você queria desde o início. E isso reduz o atrito entre o designer, você e o desenvolvedor que tem que chamar para esse projeto. Então é isso para este vídeo, e eu vou te ver no próximo. 47. Arquivo XD: neste vídeo. Queria mostrar-te este texto que os ovos contaminam a mesma coisa. Como nas seções anteriores fora do curso. Você tem este arquivo x'd para esta seção específica fora do curso, e você pode rapidamente saltar para dentro e ver as animações. E você também pode pular e ver, por exemplo. Ok, eu tenho as três camadas de texto dentro para que eu possa saber o que fazer. Você também pode pular, selecionar algumas cores. Você pode, por exemplo, porque temos a imagem que você pode clicar duas vezes na imagem e ver, Mas eu coloquei para que você possa saber onde você pode colocá-lo também. Você pode verificar as cidades obedecer em algumas camadas, por exemplo. Ok, este é um 100, mas este 10 E, finalmente, você também pode reproduzir essas animações para que você possa simplesmente clicar no primeiro são parte fora da animação que você deseja escolher hit visualização da área de trabalho. Isso vai ser lançado, então você pode saber. Ok, isso é o que eu vi naquele vídeo. E você pode então saltar para dentro e, em seguida, examiná-lo mais adiante e ver por si mesmo. Quantas dessas camadas você precisa? Quais são as cores da camada. Então, por exemplo, se um clique no dedo do pé local, você pode ver que ele tem borda fora de cinco, e ele tem a cor azul para que você possa simplesmente copiar e colar isso em seu próprio design, se você quiser. E o mesmo que com as seções anteriores, você pode usar isso em seu trabalho pessoal ou comercial. Então, para você ou seus clientes, e você pode incorporar como quiser, você tem minha permissão total. Então é isso para este vídeo, e eu vou te ver no próximo. 48. Slider de imagem 1: neste vídeo, vamos criar o controle deslizante da escola, que vai alternar entre os cartões. Então, em um clique e arraste sobre este, você pode ver que o do meio está se tornando um pouco menor, e que o 3º 1 está desaparecendo completamente. E quando eu estiver trazendo de volta, ele vai voltar para sua posição original, e este vai voltar para onde estava, e este vai aparecer mais uma vez. Então vamos começar. Então o que eu tenho aqui é este cartão, e se eu abri-lo um pouco e zoom um pouco mais perto, você pode ver que eu tenho este texto bem aqui na parte inferior e a imagem está bem aqui no topo. Agora, se olharmos aqui um pouco mais de perto, você pode ver que a imagem tem um raio de canto em 24 cantos esquerdo e direito. Estes são os cantos em questão, e para os cantos inferior esquerdo e direito, você pode ver que o raio do canto é zero. Enquanto para o texto que está abaixo, temos o texto. BG, que é apenas uma camada de plano branco e camada de forma, e tem o oposto. Então ele tem o raio do canto inferior direito e esquerdo fora 20 de modo que nós temos em toda esta seleção olhando assim. Em seguida, temos natureza Noruega, que é ciência aberta negrito e 17. E aprendemos mais, que é ciência aberta regular aos 17 anos. E ele tem esta cor azul fora três e. C. Seis ff. Agora por que eu coloquei o texto em cima da imagem é porque se eu clicar de distância, você pode ver que ele tem uma pequena sombra de gota. E se eu os coloquei de forma diferente, você pode ver que agora a imagem está vindo em cima deste fundo branco, e sua sombra está vindo em cima deste fundo de texto. Então é por isso que eu coloquei em cima para que nós tenhamos basicamente duas sombras agindo como uma só. E quanto à Sombra é apenas uma sombra básica. Eu mostrei já em poucos dos vídeos no discurso, Então nós temos a sombra aqui fora 03 e seis, e se eu clicar na cor da sombra, você pode ver que é completamente preto em 16%. Então, sempre que você bater na sombra para que ela apareça. Você vai obter esta sombra padrão fora do curso, você pode brincar com ele. E, por exemplo, você pode incluir o shell azul se você assim escolher, ou se o seu cliente tiver qualquer outra cor, você pode fazer isso também. Seguro. Um clique aqui na digitação de três e c seis f depois de um centro. Você pode ver que agora temos essas sombras azuis correspondentes a este texto azul, mas eu não vou fazer isso. E não vamos atolar com alguns desses detalhes. Vamos duplicar este carrinho. Então eu vou apertar o controle D e eu vou colocá-lo bem aqui. Aperte shift e deixou um rochoso duas vezes para que eu possa posicioná-lo 20 pixels a partir deste. Eu vou deixar o tamanho responsivo como você pode ver aqui, e eu vou segurar o turno em um dos cantos e eu vou simplesmente diminuir o tamanho dele. Por exemplo, aqui mesmo, vou clicar aqui para posicioná-lo no meio. Apenas certifique-se de que são 20 pixels deste aqui. Você também quer ter certeza de que este está no meio, e este vai ser o nosso cartão um, e nós vamos bater nele para que ele controlasse D para fazer uma duplicata indo para posicionar este até o fundo. Certifique-se de que ele tem a mesma distância entre o seu próprio e este meio, e eu vou chamá-lo de cartão três como então em seguida, eu vou arrastar uma imagem para dentro para que você possa selecionar a camada de imagem. Vou localizar a imagem. Basta arrastar e largar para dentro. Ele vai preencher em vez desta maneira imagem para clicar duas vezes dentro e simplesmente movê-lo para algum lugar por aqui. Eu vou mudar o texto para que ele corresponda com a imagem. Então vamos chamá-lo de um dia em Paris, por exemplo, assim. E, finalmente, vamos fazer isso para as primeiras imagens Bem, então você pode pressionar o controle e clicar para saltar direto para dentro. Vou localizar essa imagem, e essas imagens são de “splash dot com “, então elas são livres para usar tanto para projetos pessoais quanto comerciais. Então isso parece bom e podemos dizer algo como história romana antiga. Por exemplo, assim e, finalmente, temos são projetados concluída. Agora o que temos que fazer é agrupar todos eles. Então eu vou selecionar todos eles. Ele controlaria G para agrupá-los e chamá-lo de cartões, porque este cartão TERT no próximo estado vai desaparecer do aeroporto. E quando isso acontece, ele vai para este espaço vazio. Então, onde não há nossas tábuas e não podemos animar assim. É por isso que criamos este grupo para que possamos animar todos eles em todos os nossos portos. Vou escolher este pé primeiro. Nosso controle de batida na porta é duplicado. Em seguida, vou selecionar o cartão um. Vou apertar minha tecla Shift e com a esquerda, maioria clique. Eu só vou ter certeza que é do mesmo tamanho que este meio de e eu vou segurar o meu turno e a tecla esquerda e posicioná-lo Toby no meio. Em seguida, eu estou indo dedo do pé sobre o tamanho fora deste 2º 1 até que ele se encontre com a borda superior deste cartão inicial , e você pode movê-lo para que você possa vê-lo. Então eu vou para o turno inteiro, assim e finalmente movê-lo para o fundo também. Vou posicioná-lo em seu lugar assim. E finalmente, eu vou mover este cartão número três. E, como você pode ver, se não fizemos porque eu vou colocar 20 picaretas. Também deslocar 12 Ele desaparece deste nosso porto e vai para esta tela cinza área cinza, que é chamado Spaceport. Mas porque está no grupo ainda contido neste nosso porto. Então não está fora dele, e ainda podemos animar tudo corretamente. Então, quando se trata de animação, clique em protótipo, você pode clicar direito dentro, então clique duas vezes com o mouse esquerdo. Continue selecionando este cartão. Vou arrastá-lo até aqui. Nós vamos usar arrastar, então não toque, mas arraste porque queremos arrastar entre esses dois controle deslizante animado automático é esta nação. E para a flexibilização, você pode escolher fácil agora para reconhecer, não deixar. Na verdade, cabe a você. E, finalmente, para isso, também podemos escolher esse mesmo, e podemos arrastá-lo de volta. Ele vai conter todas as configurações que escolhemos para o 1º 1 e eu vou clicar em pré-visualização, e quando você arrastá-lo, você pode ver como ele se parece. Mas como você pode ver, este carrinho de partida não altera a opacidade. Fica a 100%. Pode deixar assim, se quiser. Mas o que eu realmente vou fazer é eu vou pular bem aqui. Clique no desejo localizado um número de cartão três. Eu vou baixar a cidade pagadora deles 20 Então, quando a visualizarmos agora, você pode ver que uma vez que ela desaparece, ele reduz a opacidade automaticamente todo o caminho até zero. Então ele basicamente desaparece da tela e quando e trazê-lo de volta, você pode ver que ele começa a aparecer e vai todo o caminho de volta para 100. Então é isso para este vídeo, e eu vou te ver no próximo. 49. Slider de imagem 2: neste vídeo, vamos criar o controle deslizante. Então, quando você clica nessas setas na parte inferior, os slides vão mudar. E nesta última, esta flecha vai descer para a sua base ITI. E se eu voltar para o 1º 1 você pode ver que agora isso está deitado em uma base para indicar que não há mais insultos à esquerda e quando você clica no dedo do pé perturbado um, este indica que não há mais ligeiro à direita. Então vamos começar. Então eu tenho aqui o nosso porto de 800 por 800 concluído, projetado para economizar um pouco de tempo. Então o que temos aqui é uma imagem. Então, se você abriu isso, você pode ver que a imagem está em 400 peso para 50 e nós temos um raio de canto em 20 em todos os cantos. E finalmente temos essa sombra padrão bem aqui na parte inferior. Em seguida, temos San Francisco de cima, que é senso aberto 20 negrito e estes três e c seis ff cor. E, finalmente, temos este texto aqui, que está novamente aberto desde 20. Mas nesta cor cinza padrão. E finalmente temos essas duas flechas bem aqui no fundo. Esta seta para a direita é a cor desligada. B dois b dois b dois tão realmente leve. Ótima. E isso deixou Tero é da mesma cor. Mas você paga a cidade está em 40% agora. Criamos esse design porque precisamos ter todos os três slides. Se você se lembra de alguns dos vídeos anteriores, temos que ter controle deslizante completo no início para que possamos saber onde podemos posicionar alguns fora dos elementos. E também estes I Rose vão ficar fora deste grupo que vamos criar em um momento porque vamos clicar. E isso vai fazer a transição entre o controle deslizante e esse controle deslizante. Precisamos dessas flechas, Toby lá embaixo. Então, por exemplo, eles não podem estar bem aqui porque eles vão ser cobertos pelo texto desses insultos. Além disso, essas imagens são do site chamado dívida para stock foto dot com, e você pode ir até eles e baixar suas imagens gratuitas. Eles são livres para usar tanto para uso pessoal e comercial e eu vou deixar o link em um pdf na lição final off discurso para que você possa acessar esse site facilmente para que você possa simplesmente clicar no link e acessar a coleção fora de suas imagens que eles têm na época. Ou você pode usar basicamente qualquer imagem que você deseja para seus clientes ou para si mesmo. Agora vamos começar. Eu vou criar uma mesquita, então eu vou clicar no retângulo e desenhar uma bela mesquita grande sobre a imagem e sobre o texto que eu posso baixar seu acordo base apenas para que eu possa ver o que é. Vou colocá-lo no meio como eu, e eu vou simplesmente trazer isso um pouco para baixo para algum lugar por aqui e fazer o mesmo para a garrafa um como, Então eu vou chamá-lo de Mesquita assim, e eu vou posicioná-lo logo abaixo de nossas flechas. Eu vou selecionar tudo direito Clique mesquita com forma. Vou chamar essa mesquita, e como podem ver, vocês não podem ver esses dois controles deslizantes porque eles estão escondidos dentro desta mesquita. Mas vamos lidar com isso em apenas um segundo. Então agora eu vou posicionar as setas esquerda e direita para o fundo para que ele tivesse a mesquita no topo e as setas na parte inferior. Agora eu vou clicar nesta seta para a esquerda, tocar minha tecla zero no teclado para que ele salte de volta para 100 para uma cidade, e este é basicamente vai ser o nosso segundo slide. Vou clicar no controle de calor do aeroporto D mais uma vez, e se você estiver confuso sobre qualquer um disso, como para cada seção fora do curso, você receberá controles deslizantes. Ovos contaminam, no qual você pode acessar todos esses elementos. E você pode então inspecionar ainda mais tudo o que você não entendeu ou perdeu dentro de alguns desses vídeos para que, se você pular algo, você vai perder alguma coisa? Você sempre pode voltar para esse arquivo e ver, por exemplo, por exemplo, quais transições usaram quais cores eu usei fundos e alguém para que você tenha isso à sua disposição em todos os momentos, e você pode, fora do curso, usar isso para projetos pessoais e comerciais. Agora vamos começar com este. Então esta é a nossa terceira bola vai primeiro clicar nesta seta direita bater quatro no meu teclado para baixar a opacidade para baixo para 40 Eu vou saltar dentro da mesquita e neste . O que queremos é que eu salte para trás. Então esta é a do meio. Este é o 1º 1 e este vai ser o nosso 3º 1 Então vamos começar. Na verdade, desde o início do 1º 1 eu vou abaixar o baixo para 40 e vamos mover esta mesquita no meio. Mas eu vou segurar minha tecla shift como assim você também pode usar guias. Mas é mais fácil para mim assim. Eu vou selecionar o número dois ou o número três e eu vou movê-los até que eles se encontrem com a borda direita desta imagem. Assim como. Em seguida, mantenha a tecla Shift 12 com a minha seta para a direita para mover 20 pixels para a direita e mais uma vez porque eles estão no grupo e dentro da mesquita. Se um salto para dentro, você pode ver que todos eles estão contidos dentro deste nosso aniversário não ir para o passaporte porque eles estão dentro deste grupo mesquita? - Não. Então esta é a nossa primeira linha. E como podem ver, não podemos ir mais para a esquerda. Porque este é o primeiro controle deslizante. Este é o segundo controle deslizante. E, finalmente, este é o terceiro controle deslizante. Então vamos mover a imagem número três para o seu lugar. Eu só estou segurando turnos até que ele se encontre, assim, indo para selecionar a tecla de seta esquerda ainda mantenha Shift até a carne bem aqui. Seu turno inteiro 12 para mover 20 pixels para a esquerda. E basicamente ficamos com este controle deslizante. Agora vamos protótipo de tudo. Então o que eu realmente vou fazer é clicar nesta seta bem aqui. Então você pode aproximar um pouco mais para que você possa vê-lo? Arrastá-lo até aqui? Vamos animar ou pisar os pés. Fácil agora e 0.4 segundos, eu acho que funciona muito bem. Agora, neste, vamos clicar nesta seta para a esquerda. Arraste-o para aqui, use o mesmo efeito, clique neste arrasto aerodinâmico direito para ouvir, use o mesmo efeito e, finalmente, em perturbado. Nós só precisamos animar essa flecha de cocô porque ela vai por aqui, e essa direita não vai fazer nada igual a isso. Primeiro 1 bem aqui. Então, quando eu clicar aqui bater, jogar e clicar nessas setas, você pode ver que ele transições bem para aqui. Você também pode adicionar mais alguns efeitos. Então, se você se lembrar de um dos vídeos anteriores, você pode diminuir a opacidade desses controles deslizantes enquanto eles estão indo embora. Então, por exemplo, neste meio, como você pode ver aqui, quando você quer ir para a direita, ele pode diminuir o ritmo como ele vai para a direita, e quando ele salta para trás para ele, ele pode trazê-lo de volta para 100%. E ele vai carregar as bases fora deste turno um e assim por diante, então você pode realmente jogar junto com ele. Você também pode criar cartões, como fizemos em um dos vídeos anteriores, para que você possa trazer todas essas informações em um único cartão, e então você pode deslizá-los para dentro e para fora. Basicamente, cabe a você e ao seu projeto. Então é isso para este vídeo, e eu vou te ver no próximo 50. Slider de imagem 3: neste vídeo, vou mostrar-lhe este controle deslizante. Então, quando você clicar nesta seta, essas imagens vão mudar. Este texto vai mudar, bem como a cor do plano de fundo. Então, em um penhasco novamente, você pode ver tudo em ação. Então vamos começar. Então o que eu tenho aqui é um aeroporto de 1000 por 600 porque eu queria criar em nosso porto um pouco mais largo para este. E aqui temos a próxima configuração. Então temos a pasta de imagens, era da pasta de texto, que é essa seta inferior, e temos B G, G dois e G três, que são apenas cores de fundo diferentes para slides diferentes, porque Vamos ter três slides agora. Vamos começar com o texto porque é muito mais simples. Então temos esta visita Londres, que está aberta, diz 100 regular, e temos mesquita de texto. Você já viu esta mesquita em vários vídeos neste curso, mas basicamente eu criei esses três textos com uma mesquita nele. Então, se eu esconder a mesquita, você pode ver como isso e esses textos parecem estar simplesmente posicionados aqui no topo. E quando você clica nesta seta para alterar os slides, eles vão deslizar para baixo para revelar o próximo texto. E eles vão pousar exatamente na mesma posição que esta aqui. Agora todos os três textos têm duas linhas de texto, então eles vão se complementar muito bem. Agora, as imagens. As coisas são um pouco mais complicadas, mas nada muito importante. Tão certo. Três. Aqui temos duas imagens, então imagem quer uma imagem para agora imagem um, que é esta parada. Um tem dimensões em 1 61 com 1 92 e quero apenas mencionar mais uma vez muito rapidamente. Você tem este controle deslizante em seus controles deslizantes, ovos o arquivo para que você possa acessá-lo a qualquer momento. E olhe para essas dimensões. Olhe para as posições. Cabe a você se quisermos fazer isso e pular para dentro e ver o que eu fiz. Imagens são mais uma vez de que é a foto stock dot com, e eu vou deixar o link para esse site na lição final fora do discurso, Senhor pode facilmente acessar essas imagens. Agora que é a primeira imagem, e a segunda imagem é para 15 que para 56. Posicionei a imagem número um em cima da imagem número dois. Você pode incluir sombras se quiser. Mas eu não incluí nenhuma sombra neste exemplo. E essas duas imagens, se eu selecioná-las, estão localizadas no centro da nossa porta. Então, no centro, assim. Então, basicamente, exatamente o mesmo espaço que você tem aqui no topo é exatamente o mesmo espaço aqui na parte inferior dessas imagens agora abaixo delas, nós temos o número da imagem para, uh se eu abrir a pasta. Imagem número três na imagem número quatro. Exatamente o mesmo. Configure exatamente as mesmas dimensões. Exatamente o mesmo espaçamento. Então tudo é exatamente o mesmo. Basicamente, eu criei um e dois os duplicei para criar três e quatro e duplicei isso mais uma vez para criar cinco e seis. Então você pode ver que estes são cinco e seis também. Agora todos eles estão localizados aqui para este primeiro slide, e nós vamos mudar suas posições. Eu só queria mostrar como tudo estava estruturado, então é basicamente isso para toda a estrutura. Esta seta está localizada 40 pixels a partir desta borda inferior e localizada no centro, muitas vezes nossa porta. E é basicamente isso. Então agora vamos começar a animar. Então, para este primeiro slide, vamos primeiro duplicar tudo para todos os três slides. Então, aperte o control de control de. Então agora temos três slides, e isso é exatamente o que precisamos. Porque quando as pessoas clicam, esta seta vai mudar para este segundo slide, e vai mudar para este terceiro slide agora para este. O que queremos é que queremos essas imagens Toby abaixo, e uma delas vai para cima. Mas vamos primeiro trabalhar com este 1º 1 Então eu vou para a posição dois e três logo abaixo. Agora. Todas estas pastas estão localizadas dentro desta pasta principal. Então, 12 e três dentro deste principal. Porque se não fizermos isso assim quando eu os mover, eles só vão para o rodapé e eles não vão ficar dentro de fora, espantaram a nossa prancha. E isso não é algo que queremos. Então, para este 1º 1 vamos localizar todos eles abaixo. Então este é o número três. Este é o número dois, como você pode ver, eles não estão pulando para o rodapé porque eles ainda estão contidos nesta pasta de imagens principais . Agora, para esses, eu vou simplesmente mover isso um pouco para baixo, em seguida, mover a pasta inteira fora do número três um pouco para baixo e fazer o mesmo para o número dois. Então eu vou apenas movê-lo para baixo e você pode mover este para baixo também, apenas para que você possa alcançar essa mosca em vigor se você quiser. Agora, para este 2º 1 o que queremos, queremos o número dois Toby localizado abaixo. Mas deixe-me apagar rapidamente este, Billy, este também. E eu vou agora duplicar este primeiro nosso nascimento porque nós já criamos essas imagens . Então não para nos repetir, localizar o número para agarrá-lo, segurar, deslocar, movê-lo todo o caminho até que ele se encontre com a borda superior desta imagem. Assim, assim. Então, quando ele atinge zero, e como você pode ver, agora temos essa imagem que está saindo. Mas você pode removê-lo da pasta, segurar shift, posicioná-lo, deslocado assim e depois movido de volta para a pasta número dois. E agora temos que mover o número um fazendo exatamente as mesmas coisas. Então vamos movê-lo para cima e eu vou mover este para cima. Ah, muito assim. E mais uma vez, você pode mover toda a pasta para cima. Cabe a você o quão grande fora o efeito que você quer alcançar neste caso. Agora o que precisamos, precisamos mudar a cor de fundo para que você possa simplesmente por toda Bay City fora deste , e isso vai mudar para este. Eu sim e precisamos mudar o texto. Mesquita de texto. E esta é a arquitetura. Ótima arquitetura. É este apenas vai simplesmente movê-lo assim até que eles estejam todos alinhados e cidade da história, nós vamos apenas movê-lo para fora do caminho. Então, agora temos esse texto no lugar. Então é isso para o controle deslizante número dois. Vamos movê-lo junto. Este é o controle deslizante número três, e basicamente vamos fazer exatamente a mesma coisa. Vamos baixar a cidade de pagamento deles fora do 2º 1 localizar este texto, bobs e clubes vão entrar em disposição. Ótima arquitetura. Vamos tirá-lo do caminho assim. E, finalmente, vamos trabalhar em nossas imagens. Então número três, você pode simplesmente movê-lo assim. E finalmente, este aqui. Você pode agarrá-lo, arrastá-lo para fora, posicioná-lo no lugar como então trazê-lo de volta e agora fazer o mesmo para o número dois. Então vamos primeiro desenhar a pasta inteira assim, e então você pode simplesmente posicioná-la em algum lugar por aqui. Então é basicamente isso para a parte de design. Vamos agora protótipo para protótipo. Tudo é realmente simples porque nós estamos indo apenas para focar nesta seta porque os usuários estão indo para clicar lá para que a transição para acontecer. Então vamos fazer passo ou animar, facilitando um segundo, e vamos fazer o mesmo para este. E porque não temos o herói Togo de volta, vamos simplesmente trabalhar com esta flecha. Então, quando eu clico disperso um clique pré-visualização e quando eu clicar nesta seta, você pode ver essa transição agradável. Assim, imagens de texto movendo o ar está mudando, e essa cor de fundo está mudando também. Então, por clique mais uma vez você pode ver como isso se parece. Então, se saltarmos para o 1º 1 M jogador de volta um pouco mais rápido, você pode ver para que essas imagens tenham apenas um pouco fora atrasado. É por isso que os separamos. Então, quando eles estão entrando no lugar, você pode ver que eles estão indo. Então este 1º 1 está indo 1º 2º 1 está seguindo e fazendo exatamente o mesmo movimento. Em seguida, as imagens estão entrando no lugar para que você possa ver bem aqui. Então é isso para este vídeo, e eu vou te ver no próximo. 51. Slider de imagem 4: neste vídeo, vamos criar este controle deslizante de imagem. Então, quando você clica no texto seta vai mudar e esta imagem vai apelar para cima e para longe. E finalmente, quando clicar aqui, ele voltará e esse texto voltará. E essas setas também desaparecem para indicar que não há mais controles deslizantes para o lado da morte. Então você não pode clicar aqui. Como você pode ver, nada acontece porque não há mais controles deslizantes Dessa forma você tem que clicar aqui e então você pode ver tudo fora dos slides. Então vamos começar. Então, para este vídeo, isso está configurado. Então temos o aeroporto a 1000 por 600. Então temos esse layout. Então temos o texto aqui. Setas, essa imagem, uma imagem para ser G, que é o primeiro fundo e digital, que é o segundo plano de fundo. E eles vão mudar entre esses dois slides. Então, para o texto, se eu clicar em nosso projeto, você pode ver que é sentido aberto 100 nós temos a mesquita de texto, então mesma mesquita, como usamos em basicamente uma maioria dos vídeos neste curso, mas o diferenças em vez de ir de cima para baixo, agora está indo da esquerda para a direita. E nós temos esses dois textos correspondentes às imagens que você vai ver na tela abaixo que nós temos a seta, então ele tem seta para a direita e nós temos seta para a esquerda e esquerda. Tero é 40% de pastoso, como você pode ver porque, como eu disse, indica que não há mais slides para a esquerda. Então temos imagem um na tuba antes de eu chegar até eles. Só quero mostrar-lhe que aqui estão os nossos antecedentes. Então eles vão mudar entre os slides como o quê? As imagens. Nós temos apenas uma mesquita quando a imagem tão basicamente exatamente o mesmo configurado como para este texto . Então, se eu abrir, você pode ver que nós temos o texto e nós temos a área da mesquita no topo. Então a mesma coisa aconteceu aqui. Mas em vez de criar a área da mesquita, eu primeiro criei um retângulo em branco usando esta ferramenta retângulo posicioná-lo Toby alinhado com parte inferior superior e borda direita e deu-lhe algum espaçamento aqui à esquerda lá faria policial seu ele e na cópia inferior. Na nossa imagem caso, eu incluí a imagem enquanto o estado de cópia superior preenchido com cor. Então nada realmente mudou a sua e eu simplesmente selecionei ambos clique direito e forma mascarada que eu faço duplicado e nós criamos nossa segunda imagem, que é esta imagem bem aqui. E para mostrar essa imagem, primeiro preciso expandir esta mesquita. Então eu sei que meu conselho é 600 em sagacidade. Então eu vou apenas digitar 600 assim e ter certeza de que ele está chegando ao topo assim para que você possa vê-lo assim. E essa é basicamente a nossa segunda imagem. Então, se eu clicar neles, você pode ver como eles se parecem, então eles basicamente vão mudar entre os slides. Mais uma vez, você pode acessar isso nos ovos, contaminar para esta parte do curso, e você pode explorar um pouco mais para ver esses tamanhos para ver esses espaçamentos um en. Se você perdeu algum elemento, você também pode ver isso. Então vamos neve começar a fazer nosso design configurado para a animação, então eu vou selecionar o suporte hit control D para fazer uma cópia. E neste, eu só vou primeiro mover o texto. Então eu vou apenas clicar sobre estes textos inferiores movendo-se ao longo. Então com a tecla Shift e a tecla de seta esquerda até que ela se encontre assim e então eu vou mover este texto para a esquerda todo o caminho para fora do caminho assim. Então eu vou pisar no BG ou cidade paga Então opacidade deste fundo assim e finalmente eu vou mudar essas flechas. Então este vai estar em 40%. Este vai ser 100%. Então, nesta fase, indica que você não pode clicar em direitos. E neste estágio indica que você não pode clicar no botão esquerdo. Então, como vamos fazer isso? É muito simples. Vamos apenas criar esta mesquita. Então deixe-me clicar na mesquita nesta imagem número um, e eu vou apenas tirá-la do caminho assim. E se eu clicar em algum lugar do lado de fora, você pode ver que esta imagem está mostrando e vamos ver como isso se parece. Então, basicamente, neste 1º 1 vamos fazer o mesmo, mas vamos apenas para o fundo. Então, na imagem número dois na primeira ligeira, eu vou apenas clicar na mesquita e trazê-la até o fundo até que ele se encontre com a borda inferior para que façamos isso mais uma vez. Então, eu vou até aqui. Clique em algum lugar fora e você pode ver que ele está mostrando ainda. Mas você pode baixar o seu basicamente 20 e nós vamos baixar o basicamente 20 aqui fora deste ligeiro. Então, basicamente, ele se desvanece como ele vai junto. Então não, podemos mostrar a imagem número um. Tudo parece correto. Então agora é prototipagem, protótipos rápidos, e nós só nos preocupamos com essas setas para que ele pudesse manter o controle para clicar dentro desta seta. Eu vou arrastá-lo fácil agora dois segundos, ou para animar, e nós estamos indo para o seu passo e finalmente dispostos a usar o mesmo efeito voltando para trás. Se você acha que o efeito dura muito tempo, você pode baixá-los, mas na verdade depende de você. Vou acertar a pré-visualização bem aqui em grande. E quando eu clicar nesta seta, você pode ver que temos este efeito deslizante agradável. As flechas estão mudando. O texto está mudando. A partir da esquerda, certo? Perfeitamente Codus Arrow. Você pode ver que temos exatamente o mesmo efeito indo para o outro lado, então você pode realmente alternar entre eles e ver como eles se parecem. Eu realmente acho que parece bom e a cor de fundo realmente muda. Também podemos selecionar a cor de fundo, por exemplo, para ser uma delas. Por isso, corresponde melhor com o design geral. Mas acho que está bonito. Então é isso para este vídeo, e eu vou te ver no próximo. 52. Slider de imagem 5: neste vídeo, vou mostrar-lhe como você pode criar este controle deslizante. Então, quando você clica neste ponto de paginação vai mudar, o texto vai mudar. As imagens vão fazer a transição entre si. Quando você clicar sobre isso, um vai mudar para baixo. Você também pode voltar, ver como isso se parece. E finalmente, quando você alcança, eles agitaram um. Quando você clica em, ele vai revelar e o texto vai descer no meio. Então vamos começar. Então aqui, aqui no nosso quadro fora 1000 com 600 parece que em alguns vídeos anteriores. E se eu pular para dentro, você pode ver que nós temos esses dois textos separados. Ambos estão abertos envia 100 regular, mas esta parada é forrada à esquerda, e esta inferior está direita, alinhada em um apenas posicionou-os uma tampa aleatória do dedo do pé, alguma parte fora da imagem, então há realmente não há muita coisa acontecendo aqui. Quanto às imagens em si, vamos cobrir a paginação primeiro. É simples. Temos apenas três pontos aqui, então os pontos estão em 16, onde 16 1º tem tanto sensação quanto derrame. Ambos têm esta cor 70 70 70. Então cinza escuro, este segundo círculo tem o campo fora da borda branca desta cor 777 e finalmente circulou três é exatamente o mesmo círculo através de Agora. Quanto às imagens, temos estas três imagens e criei esta forma com 10 pontos. Então 10 lados neste sinal Kout e eu simplesmente usei este Pollock suave desenhar um polígono clique 10 aqui. E eu tenho essa forma, e nela eu simplesmente colei a droga arrastou e soltei uma imagem. Então, se eu selecionar rapidamente uma imagem de um, selecionar esta e simplesmente arrastá-la e soltá-la dentro, foi assim que eu coloquei a imagem bem aqui. Ninguém e dois são basicamente iguais, e vamos mudar o texto. Mas este 3º 1 é um pouco diferente. Então basicamente temos essa forma igual a uma imagem para uma imagem três. Mas não incluímos nenhuma imagem dentro dela. É apenas uma forma básica. Como você pode ver aqui, esta imagem é a imagem de fundo. Então, como eu fiz isso, deixe-me agrupar rapidamente esta mesquita Agora esta imagem vai todo o caminho para trás para que ele sente todo o nosso porto e esta forma permanece onde está. E eu basicamente selecionei ambos, clique direito mesquita com forma e eu posso rapidamente eu fui mesquita, e basicamente, isso é o que nós vamos ter como uma mesquita para que você possa basicamente movê-lo como você faria com estes duas imagens aqui. Mas basicamente, é assim que é fácil criá-lo. Se você está confuso. Como eu disse várias vezes ao longo deste curso, você pode acessar o arquivo. Então cidras de imagem arquivar ovos de ponto D. E vai ser em seu pacote que você vai baixar com este curso, e você também pode acessar todos esses elementos. Você pode inspecioná-los ainda mais. Você pode clicar sobre qualquer coisa que você está confundido com. Então, basicamente, para ajudá-lo junto com esses vídeos. Então agora vamos começar com nossas animações. Então, para este primeiro 1 nós vamos simplesmente ter a imagem um e dois. Desculpe, imagens dois e três se movem para baixo. Então eu só vou segurar minha tecla de turno e seta inferior, e é importante tê-los na mesma pasta, porque assim eles vão ficar dentro deste nosso porto e não ir para o beisebol. Mencionou isso várias vezes ao longo destes vídeos. Agora selecione o controle de batida do aeroporto D. E agora, quando você duplicou, vamos digitar o segundo texto. Então este tipo de dedo do pé em, rolar sobre estas não são as marcas reais, a propósito. Eu simplesmente inventei algumas dessas coisas. Vou posicionar a imagem número dois no meio, alguns apenas segurando a tecla de seta para cima até chegar ao meio. E neste, vamos apenas mover este número um todo o caminho para cima no caminho. Estamos finalmente indo toe clique nesta paginação e vamos clicar e clicar aqui para selecionar o mesmo falhou. E para o círculo um, vamos simplesmente selecionar a cor branca. Então é isso para este 2º 1 Vamos criar um turno um. Então, neste agitado, deixe-me digitar rapidamente aqui assim e simplesmente indo para mover este texto em assim e aqui vai escrever na tabela. Então, como você pode ver, este está digitando da esquerda para a direita. Este está digitando da luz, certo? A esquerda. Realmente não importa. Você pode fazer com que eles votem do centro. É mesmo com você. Mas gosto de manter as coisas simples só se puder. Então eu estou apenas movendo esta imagem número três para o lugar. Uma imagem em movimento Número dois Fora do caminho. Isto vai ser desta cor, e o 2º 1 vai ser branco. Então é basicamente isso para este. E agora vamos fazer uma última. Então, vamos passar rapidamente por eles antes de o fazermos. Quando as pessoas clicam nesses pontos, eles vão mudar entre essas três imagens, e eles vão ser capazes de subir e descer através deles e ver esses produtos. E finalmente, quando eles clicarem neste, eles vão revelar e descobrir basicamente o que é em um pouco mais de detalhes. Então eu vou apenas manter o controle, clique nesta mesquita para selecionar esta mesquita chamada Imagem três, e eu vou simplesmente girá-la um pouco. Então algo assim usando meu clique esquerdo do mouse e em um dos cantos. Não importa qual você pode segurar. Deslocar velho e esquerdo. Clique no mouse para dimensioná-lo uniformemente e simplesmente arraste até que ele cobre toda as nossas portas. Então, em algum lugar por aqui é bom o suficiente. Apenas certifique-se de que você não vê branco nos cantos. Em seguida, você pode clicar quando ele vai revelar toda a imagem. Agora vamos selecionar esses dois, e eu vou simplesmente movê-lo por aqui. Certifique-se de que eles encontrem barco no centro assim e bordas como esta chamada turno 12 talvez, talvez em algo assim. Agrupe-os. Então, controle G esse meio, esse meio e eu estou indo nos agrupar assim, e isso é basicamente nosso projeto concluído. Permitam-me que concretize rapidamente o que fizemos. Então, começamos com este. Em seguida, vamos passar para este e em seguida, vamos passar para este, e finalmente, e finalmente, quando você clicar nesta imagem vai esconder uma paginação e revelar a imagem inteira, e este texto vai para o meio. Então agora vamos começar a proteger. E quando estamos na prototipagem, eu não queria criar mesquitas para este texto. Eu só queria que você visse que há essa opção também. Você viu muitas mesquitas nesses vídeos no discurso. Então, se você quiser dedo do pé, você pode simplesmente incluir uma das mesquitas. Então, ou um vindo do lado ou vindo do topo Você viu isso em todos esses vídeos. Agora é rápido Creek bem aqui. Então eu vou clicar neste meio, arrastá-lo para aqui. Então este estado segundo estado, vamos para você Step auto. Animate está fora. E vamos usar, por exemplo, dois segundos. Acho que vai funcionar muito bem. Agora vamos clicar nisso. 1º 1 vai usar exatamente as mesmas configurações. Clique no 2º 1 assim e, finalmente, vamos clicar neste se você quiser voltar. E se você quiser revelar esta imagem, nós estamos indo dedo klik bem aqui nesta mesquita e arrastou sua alça azul Você pisar ou dedo animado fácil agora para dois segundos. E agora vamos visualizar e ver o que criamos Então, em uma prévia rápida, ele abrirá tudo. E como você pode ver, você pode clicar aqui. Vai mudar porque são dois segundos. Dá-nos tempo de sobra para ir entre estes dois textos e esta imagem. Como você pode ver, parece muito agradável e suave e fácil. E finalmente, quando se trata deste, podemos clicar vai girar, revelar a mesquita, e ele vai chegar a esta. Então, se eu mudar de volta para este, ou se um clique novamente, você pode ver que parece realmente suave porque nós criamos essa duração fora de dois segundos. Então ele realmente mostra o efeito bem. Você pode brincar. Obviamente, eu não queria incluir nenhum detalhe de design porque você pode criar todos os tipos de texturas aqui. Você pode adicionar mais alguns elementos fora. Exemplo. Algumas setas ou círculos em segundo plano. Cabe a você como você quer apimentar esse design. Eu só quero manter as coisas simples, e como eu mencionei várias vezes você pode acessar este design. Você pode usá-lo com minha permissão total para projetos pessoais e comerciais. você pode adaptá-lo como quiser. Você pode incluir ou excluir qualquer coisa que desejar. Apenas certifique-se de que você tem todos os seus nomes de camada. Consistente e nomeada de forma consistente. Então, por exemplo, você pode ter a imagem 123 aqui. Mas imagem 246 bem aqui. As coisas não funcionarão corretamente como deveriam. Então é isso para este vídeo, e eu vou te ver no próximo. 53. Slider de imagem 6: neste vídeo, vou mostrar-lhe como você pode criar este controle deslizante. Então, quando eu clicar aqui, você vai ver que esta barra de processo vai junto, muda para este texto, bem como esta imagem, e finalmente muda para a terceira imagem, bem como o texto de cocô. Então vamos começar. Então o que eu tenho aqui é o aeroporto fora 1000 com 600 deixe-me mostrar rapidamente a configuração. Temos a explorar nossos quartos, texto aqui no topo. É senso aberto 36 ousado. Próximo. Abaixo disso, temos a mesquita, que é a visão das imagens, e vamos chegar a ela em um segundo. Mas antes disso, temos o progresso e o progresso em branco. Agora o Progresso em branco é apenas esta barra bem aqui na parte inferior. Fora da imagem e o progresso é o que está no topo. Então ele está atualmente em um pixel com enquanto os problemas em branco preenche toda a largura fora do aeroporto em 1000 e sua altura em quatro pixels, e se eu clicar aqui, você pode ver que é realmente uma luz grande fora DBT BTB. E à medida que nos movemos ao longo dos slides, este azul vai gastar e sentir todo o progresso mais. Em seguida, temos imagens. Então criamos essas imagens. Então eu simplesmente usar a ferramenta de retângulo Desenhe um retângulo arrastado e soltou imagens dentro e eu fiz três cópias. E finalmente, esta é uma mesquita com apenas a cor no topo. Então é esta cor e b e b e b. Então, mais uma vez realmente leve grande. Eu selecionei todos eles, clique com o botão direito e uma máscara para a sua forma. Então é por isso que você vê esta mesquita e, no momento, todas elas estão localizadas no mesmo espaço. Mas vamos brincar com ele em um segundo. E finalmente temos esses textos aqui na parte inferior. Então, todos eles são iguais. Este está no meio. E estes estão à esquerda e à direita. E se eu saltar para dentro, você pode ver que este texto no topo é todo processado 20 negrito e é azul em três e. C. seis ff. E finalmente, este é sentido aberto. Regular em 20 nesta cor cinza regular off 70 70 70. Então é basicamente isso para a nossa configuração de design. E mais uma vez, como em vídeos anteriores, se você não se lembra de todos os detalhes, se você ficar preso em algum lugar, você pode conferir os controles deslizantes de imagem, ovos contaminar e dentro dele você pode encontrar este isqueiro e brincar com todos os detalhes que estou falando neste vídeo para que você possa acompanhar com o vídeo, bem como com os arquivos de prática. Então vamos começar. Eu vou criar uma cópia para pressionar o controle D e nesta cópia, vamos primeiro encomendar algumas dessas imagens. Então eu vou pular dentro da mesquita. Eu vou mover essas duas imagens, então eu vou simplesmente selecionar imagem para uma imagem três mantenha o deslocamento e a tecla de seta para a direita no meu teclado. Eu só estou indo para o pé até eu vê-lo estalado assim. É aí que sabemos que eles estão na extremidade direita do nosso porto, e porque eles estão dentro da mesquita, que é basicamente uma pasta, eles vão ficar dentro deste nosso porto e não entrar fora do rodapé. Então esta é basicamente a nossa primeira ligeira, e ela vai começar quando eu clicar nesta sala clássica, eu vou obter o controle D E neste, tudo o que eu tenho que fazer é estender a barra de progresso. Então eu vou apenas clicar aqui e digitar 1000 assim. E como você pode ver, parece que toda a nossa porta como se a seguir, vamos criar uma cópia. Então eu vou clicar bem aqui, apertar o controle D, e neste, vamos fazer algumas mudanças. Então as primeiras coisas primeiro barra Progress, trazendo de volta um dedo do pé. Assim como. E nós vamos clicar aqui mesmo. Clique em preencher três e c seis ff para alterar a cor deste texto dedo azul. E eu vou clicar bem aqui. Altere a cor deste texto para este cinza. Mais uma vez, 70 70 70. E isto é para indicar que as pessoas clicaram aqui. Mas nós vamos fazer um tempo acionar Justo, aumentar a velocidade um pouco, mas você pode brincar com torneira também. Finalmente, vamos mover essas imagens para fora do caminho para que eu possa selecionar imagem um e dois Holdeman tecla de controle Hold, deslocar para a esquerda. A maioria clique e posicione-o aqui. Então vai mudar para a sala da família, clicar no aeroporto, clicar no Control D para fazer outra cópia, e eu vou sentir a barra de progresso. Então 1000 assim? Então, parece toda a tela. Em seguida, vamos fazer outra duplicata neste. Traga a barra de progresso de volta para um. Vamos mudar a imagem mais uma vez. Então eu vou selecionar todas as três imagens neste caso e movê-las ao longo do dedo do pé aqui. Vou selecionar o quarto deluxe três C seis FF e vou clicar neste. Clique aqui, e como esta é a mesma cor, vamos apenas provar a partir daqui. E finalmente, vamos terminar. Então controlou mais uma vez. E neste, tudo o que tem a fazer é trazer a Barra de Progresso para 1000 assim, e é isso que acaba com o nosso design. Como podem ver, temos seis portas diferentes. Então agora vamos clicar no protótipo e começar a prototipagem. Então o que eu tenho que fazer é clicar aqui mesmo dedo do pé, iniciar a animação, e com o cabo azul seco Rent você pisar ou dedo do pé animar, facilitando e duração. Vamos dar uma duração de três segundos para este, porque eles estão mudando do dedo cheio vazio. Vamos usar tempo de atraso de zero segundos e você vai usar algo como 0,4 segundos para o próximo. De vazio para cheio, vamos usar a duração fora três segundos mais uma vez sem demora ou para animar sua própria. E o gatilho de tempo agora a partir do dedo cheio vazio, nós vamos ter que ser em 0,4 tempo. Tudo permanece igual. E finalmente, para este último, vamos ter que ser às três. Então vamos testar tudo. Então, quando eu tiver uma prévia, amplie isso um pouco. Quando eu clicar aqui, você pode ver que a barra de progresso está indo. As imagens estão mudando bem e imagem finalmente perturbada. Agora, se você acha que este 0,4 segundos entre mudar essas imagens então isso aqui, se você acha que isso é muito rápido, você pode então em fazer uma mudança, mesmo lá para que ele vai de pé cheio vazio, então talvez possamos colocar 0,8 segundos. Então, a partir daqui também, vamos escolher 0,8, por exemplo. E finalmente, vamos dar uma prévia. Então, em um clique aqui, você pode ver que ele vai todo o caminho para fora. Então, três segundos, 0,8 e agora tem uma transição muito mais limpa. E se você não gosta disso, ou você pode brincar com o dedo do pé mentiroso ainda mais, então é isso para este vídeo, e eu vou te ver no próximo. 54. Arquivo XD: neste vídeo, eu queria mostrar-lhe controles deslizantes de imagem. Exe o arquivo tão dentro dele, você pode ver todos os controles deslizantes que cobrimos nesta seção fora do curso. Então, o que você quiser verificar o que você quiser inspecionar, veja por si mesmo. Ou apenas se você esqueceu algo, você sempre pode voltar para este arquivo e inspecionar como nós o criamos. Então, por exemplo, você pode visualizá-lo. Vamos clicar nesta primeira visualização da área de trabalho, e se eu clicar nesta seta, você pode ver que isso muda. E se você quiser ver como isso é feito, você pode simplesmente clicar nas camadas bem aqui, saltar para dentro e dizer, por exemplo, Ok, isso está aberto, diz 100. É essa cor e assim por diante, então você pode realmente saltar para dentro e inspecionar todos esses elementos e ver por si mesmo. Se você perdeu algo durante esses vídeos, então é isso para este vídeo, e eu vou vê-lo no próximo 55. Gráfico 1: neste vídeo, vou mostrar como você pode criar este gráfico animado. Então, quando você clica de gastos diários toe, gráfico de gastos mensais está indo toe atualização, bem como o número aqui, bem como as datas aqui. Então, nos gastos mensais, temos os meses aqui e no gasto diário. Como você pode ver, muda dois dias. Então, quando você alternar entre eles, você tem esta pequena animação agradável. Então vamos começar. Então eu tenho aqui os nossos portos fora 800 por 800 Eu tenho dois deles e um projeto acabado porque eu queria mostrar a diferença entre esses dois. Então vamos primeiro saltar para este primeiro 1 Então, se eu clicar em tinha sido zoom um pouco mais perto, vamos correr através do que está incluído dentro e bem como com todas as lições anteriores em partes deste curso, você vai obter este gráfico ovos profanar, e dentro dele você pode inspecionar todos esses elementos, e você pode ver como todos eles se parecem com espaçamento entre eles tamanhos de telefone, cores e assim por diante. Assim como em todas as lições anteriores e partes do discurso. Então vamos começar do início. Então o que ouvimos aqui é que temos gastos diários e mensais, então se eu abrir diariamente dobrado, você pode ver que está aberto. Sense 20 e todas as despesas incluídas estão abertas desde 18, mas tem esta cor mais clara. Então é DDT e este é três E c seis ff. Então o mesmo azul que usamos para a maioria fora do discurso. E aqui temos exatamente o mesmo texto. Mas isso aqui, esse gasto mensal é de 70 70 70. Então nós temos esses dois e eles estão posicionados uniformemente um do outro bem aqui. Então eles estão basicamente alinhados com essa borda esquerda e alinhados com isso. Escreva-o desta garrafa às cegas. Falando nisso, temos essa linha de fundo que tem a sensação de cor fora de F f f. Mas vamos mudá-la para esta cor assim, e eu vou remover o traço porque não precisamos dele. Então sagacidade é 600 altura é dois e esta é a cor de preenchimento. Então 70 70 70. Então, em seguida, temos esta linha e eu vou excluí-la em um segundo e mostrar-lhe como você pode criá-la e nós temos este número e se retomar um pouco mais perto, nós temos três elementos dentro. Então temos o texto que é sentido aberto, negrito. Aos 20 temos número, fundos e número BG, que é apenas um retângulo regular com um raio de canto fora 20. E nós temos o círculo com a cor do campo fora de branco para que ele possa corresponder bem com o fundo branco e nós temos a borda. Então este azul 3 60 c seis ff com o tamanho fora para finalmente, temos que repetir Grande. Então, se eu aproximar um pouco mais, aqui está a nota de repetição para o diário. Então, estes são os dias. Como podem ver, temos exatamente o mesmo espaçamento entre cada um deles. Vou mostrar-lhe como criá-lo em um segundo. E neste 2º 1 o que temos é mensal. Então basicamente o mesmo acordo com um pouco menos de espaçamento entre cada um desses elementos de texto e eles vão mudar entre si. Então, no 2º 1 diário está em zero opacidade, e neste 1º 1 mensal está em zero opacidade, como você pode ver aqui. Então deixe-me criá-lo rapidamente. Vou clicar aqui mesmo. Estive na segunda-feira, por exemplo. Vamos usar isso. Usou esta cor Então 70 70 como então eu vou usar analistas regulares. Use 18 por exemplo, apenas para que você possa ver. Então, uma vez que eu criei este primeiro item, eu cliquei. Repita a grade. Eu coloquei algo como aqui, por exemplo, em seguida, um site de clique duplo, digitando terça-feira, digitando quarta-feira, quinta-feira, sexta-feira, sábado e finalmente domingo. Então, se eu não clicar dentro, é assim que parece. Mas como pode ver, acaba aqui. Mas como podemos chegar a este estado? Então é simples. Você pode clicar fora da saída do dedo do pé, repetir a grade e, em seguida, clicar nela. Então você tem que clicar assim. E finalmente, termina bem aqui para que você possa mover esta alça direita para aqui para domingo e então simplesmente mouse aqui e aumentar o espaçamento entre todos eles. Então basta clicar e movê-lo até que você esteja feliz com o seu up. Por exemplo, algo assim, ele conterá espaçamento uniforme entre todos esses elementos de texto e simplesmente clique aqui ,posicione-o perfeitamente no centro da página. , Então foi assim que cheguei a este grande texto de repetição e este também. Então este é exatamente o mesmo. Basta reduzir o espaçamento entre cada um desses elementos de texto. E foi assim que cheguei lá. Então agora deixe-me mostrar-lhe como você pode criar esta linha. Então eu tenho duas ótimas configurações. Então, se eu clicar na nossa porta em si, eu vou clicar no layout. Eu tenho sete colunas porque eu tenho sete dias em uma semana e aqui eu passei por isso em zero. Então, se eu, por exemplo, colocar cinco, você pode ver essa cor. É este espaçamento entre as colunas. Então temos sete colunas e o espaçamento é cinco entre todas elas. Mas se eu reduzi-lo a zero, você pode ver que não há nenhum espaçamento entre eles. Mas você pode ver claramente essas linhas vindo dela. E você tem linhas para todas as sete colunas. Então, como criar essa linha? Basta clicar em um lápis, indo para clicar bem aqui porque ele me dá as bordas. Você pode ver porque ele está vindo para a borda esquerda na segunda-feira então eu vou clicar, segurar, segurar, mudar e talvez soltá-lo em algum lugar por aqui. E então você pode simplesmente pressionar escape para escapar para fora da seleção. E então você pode simplesmente passar o mouse e clicar onde essas linhas são seguras. Assumindo muito mais perto. Você pode ver esta linha e esta próxima linha porque essas são as linhas do nosso grande. Então eu vou clicar nessa linha. Clique mais uma vez, clique mais uma vez, e cada vez que você clicar em adicionar esses pontos do pé esta linha, e todos esses pontos são retos. Então, se eu tentar movê-lo, você pode ver que eles estão se movendo em uma linha reta para que eles estão se movendo no ângulo certo, por exemplo. E se você quiser mudar isso para ter a linha curva, você pode simplesmente ir em frente e clicar duas vezes em cada um deles, e ele irá girá-lo da curva do dedo do pé do ponto, e você pode então simplesmente movê-los ao redor. Então, para fazer isso, basta clicar em cada um deles e simplesmente arrastá-lo para fora da fervura, certificando-se de que você fica nessa linha assim e nós vamos fazer mais algumas mudanças em apenas um segundo. Mas, por exemplo, em algum lugar por aqui e vamos terminar com isso aqui, vamos clicar aqui. Digite cinco, por exemplo. Dedo tem borda grande agradável três C seis ff é para a cor. Eu vou clicar em torno, mantido para arredondar os cantos assim. E finalmente, vou posicionar esta parte logo abaixo deste número. Vou clicar na nossa porta para remover a grade assim. E eu vou simplesmente posicionar este número um pouco mais baixo. Assim. E se você não estiver satisfeito com a aparência deste gráfico, você sempre pode reposicionar alguns desses elementos. Então, por exemplo, eu posso movê-lo como então talvez mover isso um pouco para baixo assim. Talvez mover isto ainda mais para baixo, talvez mover isto assim. E você pode até mover isso para baixo se você quiser sugerir movê-lo um pouco abaixo desta linha inicial. Mas eu não vou fazer isso para que você possa ver que foi assim que conseguimos essa linha. Então vou deletar daqui. Vou pular aqui mesmo. Nomeá-lo linha como então pressione o controle C Clique neste, Clique em Controle V e aqui mesmo. O que eu fiz é a mesma coisa para o grande, então eu vou clicar em um grande Como você pode ver, nós temos agora 12 colunas como, Então nós nos livramos de zero para que você possa brincar. Adicione mais alguns pontos se você quiser, para que você possa reposicionar isso para cada mês. Então, se eu clicar duas vezes e clicar aqui, posso adicionar outro ponto. Talvez eu possa mover este só um pouquinho. Agora você pode clicar duas vezes no dedo do pé torná-lo redondo ou reto. É mesmo com você. E você pode posicionar essas alças como quiser, para que você possa brincar com elas e expandi-las ou trazê-las de volta ao ponto original . Então, é realmente até você como você quer que este gráfico seja parecido. Então, como eu disse, você pode adicionar vários pontos. Você pode até brincar com esses pontos e alinhá-los a essa nova grade. Então, por exemplo, em algum lugar por aqui, talvez isso possa ir um pouco abaixo. Vamos trazer isso ainda mais. Então, como você pode ver, você pode brincar com essas alças para alcançar a aparência exata que você quer. E você pode, por exemplo, posição. Está algures por aqui. Sim, estou feliz com o que parece. Talvez eu possa adicionar mais um aqui, clique duas vezes para fazer isso em torno de algo assim. E vamos chamá-lo de um dia movendo-se logo abaixo do número que eu vou clicar no nome Nossos Portos . Eu removi o layout da grade e, finalmente, o que eu quero é posicionar isso um pouco melhor. Então eu vou posicioná-lo em algum lugar por aqui, e isso é basicamente para o projeto do processo. Então, como você pode ver, é realmente simples projetar isso, e ele vai animar muito bem. Então, quando eu clico em um protótipo, o que temos aqui é deixe-me removê-los rapidamente para que possamos fazer tudo juntos. Então nós temos que clicar quando este 1º 1 ir em gastos mensais e ele vai bem aqui. Então vamos animar você pisar ou dedo do pé. Fácil fora em um segundo Para a duração, você pode ter um pouco mais de duração se você quiser ter este animado um pouco mais lento, mas eu encontrei um segundo para ser apenas bom gasto diário o suficiente. Vamos fazer exatamente a mesma coisa e movê-la para aqui. E você também pode baixar o pacenti desses se você quiser. Então, por exemplo, vamos clicar neste gasto diário aqui. Volte ao design. Podemos bater 40. Como você pode ver, vai até 40% se você quiser alcançar esse efeito. Mas se não, você pode deixá-lo assim. E finalmente, o que quero mostrar é mais uma vez. Então, neste 1º 1, onde estamos mostrando gastos diários, temos os dias sobre isso. 2º 1 terá gastos mensais foram mostrando os meses. Mas neste, os dias se eu clicar aqui são zero, e neste um mês estão em zero opacidade. Então reduza esses dois para que eles estejam alternando bem entre si. Você sabe, é finalmente uma prévia de como tudo parece. Então, se eu clicar mensalmente, você pode ver que este gráfico se anima e essas datas aqui estão mudando. Assim, a partir do gráfico diário para mensal está animando bem, como você pode ver. Mas o que eu não incluí aqui é a linha. Então, vou consertar isso agora. Então eu vou simplesmente clicar em seu resultado final. Clique em Controle Ver Clique neste porque ele tem um campo branco foi dedo do pé, excluí-lo. Controle. Tomamos, colado na forma como a posição. Está bem aqui. E quando eu começar a pré-visualizar mais uma vez, clique entre como você pode ver agora. linha permanece exatamente a mesma, mas os gráficos do estão se movendo. Você também pode mover isso se você quiser seguir exatamente onde a linha está, então, como você pode ver agora, se move apenas um pouco. Mas você pode movê-lo para aqui, por exemplo, se esse for o valor mais alto. Então, por exemplo, mensalmente aqui, mas diariamente talvez possa estar aqui para que você possa movê-lo até aqui e ter um pouco mais de animação se quiser. Então é isso para este vídeo, e eu vou te ver no próximo 56. Gráfico 2: neste vídeo eu quero mostrar como ele pode criar este gráfico de linhas. Então, quando você clica diariamente ele vai mudar e este seletor está indo para mover você clique em Mensal está indo toe atualizar mais uma vez. E então, quando você clicar hoje, ele vai cair para trás e mostrar apenas os valores de hoje. Sirkin bem ciclo entre eles, e como você pode ver, eles têm este bom radiante sobre eles também. Então vamos começar. Então, estes são portos a 800 por 800, vamos destruí-los. Então, se eu ampliar um pouco mais perto concedido, nós temos esta eleição no topo, e nós temos hoje mensal diária e seletor. Então, para o texto, vamos usar o senso aberto assim. E eu vou fazer o mesmo por estes dois. Então aberto diz assim. E finalmente, para o seletor, temos em 52 para a inteligência para as alturas e 50 para o raio do canto redondo, e eu vou basicamente fazer o mesmo. Então, vou apertar o controle. C mudou-se para aqui e foi excluí-lo porque eu quero mostrar-lhe como você pode aplicar a diferentes seleções. Então, o 1º 1 é hoje. 2º 1 é diário, então vamos clicar nele. Vou clicar em um clique diário, este seletor de cores. Vou selecionar esta cor azul. E para o dia de hoje eu vou clicar política e clicar aqui mesmo porque essa é a nossa cor padrão. Em seguida, eu vou mover a seleção para a borda esquerda do texto e movê-la para aqui assim. E, finalmente, vamos fazer o mesmo para o mensal. Alguém para clicar aqui. Use a ferramenta de seleção de cores. Escolha o clique azul hoje, clique aqui e, em seguida, aqui mesmo. Achei muito mais fácil fazer assim. E finalmente, vamos fazer isso. Então, por exemplo, para aqui e vamos chamar essa seleção feita. Vou segurar o turno e simplesmente fazer fila para este banco. Vou fazer o mesmo por este e, finalmente, por este. Agora vamos quebrar isso Então nós temos este fundo, que é basicamente uma camada de forma. É um 600 por 300. Tem essa cor de campo fora do DDT. O canto arredondado é às oito. Então esse é o nosso raio de canto e finalmente temos linhas horizontais e linhas verticais. Então estes estão dentro da grade de repetição. E para criar o muco, basta desenhar uma linha. Então vá do topo. Segure o turno todo o caminho até o fundo assim e ele homenageia. Ótima. E cabe a você quantas linhas você quer ter. Então deixe-me verificar. Tem 1234567 linhas. Então eu vou segurá-lo de 1 a 4, 567 Então é basicamente isso. E você pode posicionar essas notas repetidas. Então eu tenho que estar aqui e simplesmente indo dedo do pé, alinhá-los assim e ter que ser em 73. Vou clicar aqui, selecionado para ser branco, e foi assim que criei este. Quanto a este, fiz exactamente a mesma coisa. Assim, para as linhas horizontais fez uma linha como então bateu grade repetição. Quero ter 1234567 linhas. Então eu vou clicar em Mary Pitt Grid 23456 Então mais um sete. Eu vou fazer um espaçamento, mas deixe-me primeiro movê-lo de acordo com este aqui. Então, em algum lugar aqui, eu vou fazer uma seleção e selecionado para ser algo como isso. E foi assim que criei as linhas horizontais e verticais, não para as linhas na parte inferior. Deixa-me mostrar-te. Como é que isso fez? Então, se eu clicar nele, você pode ver que ele tem a sensação. Tem fronteira. E ele tem o golpe com off cinco, bem como a rodada que manteve. Então eu vou clicar no meu lápis. Vou clicar aqui mesmo no canto. E eu vou simplesmente clicar em alguns por aqui certificando-se de que eu estou aderindo a essas linhas do nosso grande. Então é por isso que criamos a grade para que possamos segui-la. E neste, eu vou descer até o fim. Você poderia acertar a fuga. Então o que temos aqui são cinco que tivemos em torno de Kep e para o filme, vamos ter um Grady em. Então temos um Grady linear a partir daqui, Basta clicar nesta pequena seta judeus, o ingrediente linear agora, neste caso e simplesmente indo para mostrar-lhe com o preto e branco porque já os criou com o nosso cores. Então o que eu vou fazer é girar isso. Então eu vou clicar neste ponto inferior Clique neste ponto de parada e simplesmente girá-los a cor mais clara esteja na parte inferior como então certifique-se de tentar alinhá-los para ir perfeitamente baixo seguindo esta linha, e você pode clicar no branco e simplesmente clique aqui para baixar a Bay City todo o caminho até zero. E é aí que você vai ter esse efeito indo da cor velha para baixo do dedo do pé, sem cor. Quanto aos leões, vamos clicar duas vezes no local. Vou clicar duas vezes em cada um desses pontos. O mesmo que no vídeo anterior. Você é muito sólido, e você pode adicionar mais pontos simplesmente clicando em qualquer lugar. Então, se você quiser adotar aqui, você pode adicioná-lo e simplesmente puxar todos eles para cima como você quiser. E você pode mover essas alças se quiser mudar a aparência do ângulo. Então, por exemplo, como aqui, eu vou clicar duas vezes aqui, bem como você pode com todo o caminho bem aqui no topo . Você pode mover este aqui para baixo. Você pode realmente brincar com eles. E é assim que são criados estes dois. Agora, para começar, vamos dobrar rápido em cada um deles, então temos que fazê-los ir perfeitamente em linha reta. E então, em algum momento, mude para o diário. Como você pode ver bem aqui. Desculpe por hoje. Como você pode ver bem aqui. Então, como fazer isso? Salte para dentro, clique duas vezes em cada um deles novamente para torná-los retos mais uma vez. E então simplesmente mova todas essas linhas para seguir a linha de fundo. Assim, certifique-se de que eles são héteros assim. Não clique neste. E se não for reto, você pode simplesmente convertê-lo em torno dele. Dois para trás de novo. E você pode simplesmente segui-los assim. E até que você esteja feliz com isso, você pode até mover essas linhas. Então, por exemplo, se quisermos movê-lo como aqui, você pode fazer isso. E finalmente, para este, você pode fazer com que seja algo assim. Então talvez ele vá desta linha, e talvez ele possa ir um pouco mais baixo em algum lugar como aqui. E como você pode ver, agora temos esta forma agora para o segundo e o terceiro 1 Você simplesmente vai reverter o processo de outra forma. Então, vai clicar duas vezes em todos esses pontos e, em seguida, movê-los novamente, dedo do pé qualquer processo que você quer e qualquer lugar que você quer e certifique-se de que você está tentando dedo do pé on-line. Todos os pontos nesta grelha. Foi por isso que a criámos. E foi assim que criei essas linhas. Então agora vamos começar com animação. Eu vou fazer isso no local porque nós não precisamos mais dele, assim, assim, e nós temos nossas partes azul e verde agora para o verde. Esta é a cor tão 55 D 466 E para o azul, é padrão três e. C. seis f f. Você terá este arquivo de prática fora do curso nos gráficos X profanar quando você baixar os arquivos de prática e você pode abri-lo, abri-lo e brincar com ele. Se você perdeu algo agora, vamos começar para a animação. Vou clicar no protótipo e vou fazer zoom um pouco. Tudo o que temos que fazer é animar estes aqui no topo. Então, para o mensal neste 1º 1 eu vou arrastá-lo aqui para o toque mensal auto animate, nota fácil. E um segundo para a libertação do dia-a-dia. Ir para clicar aqui vai conter o mesmo efeito hoje e mensalmente. E aqui vamos escolher hoje e diariamente, certo? Então tudo isso usando o mesmo efeito daqui. E se eu clicar na pré-visualização do 1º 1 clique e quando você clica neles, você pode ver que eles estão se movendo bem e eles estão tendo essa pequena transição agradável e indo até o zero. Agora, é claro, você pode gerenciar esse design e torná-lo ainda mais bonito adicionando os números aqui no site como um ombro no exemplo anterior. Então você pode fazer ah basicamente copiar fora do exemplo anterior baseado em aqui usando repetição grande também. Então, por exemplo, você pode ter horas para o diário para que as horas possam estar bem aqui. Minutos podem estar bem aqui. Desculpe por hoje. Para o diário você pode ter que ser nosso, por exemplo, e talvez até mesmo segundos ou É realmente até você e para o mensal. Você pode ter que ser, por exemplo, dias e horas e colocá-los abaixo e à esquerda. Então é basicamente isso para este vídeo, e eu vou te ver no próximo. 57. Gráfico 3: neste vídeo, vou mostrar-lhe como você pode criar este gráfico de barras. Então, quando eu clicar aqui, você pode ver que todas essas barras estão sendo preenchidas para os valores e eles estão pretendendo . Então vamos começar. Então aqui tem que nossas portas fora 800 por 800 projeto já está concluída. Mas como eu mencionei nos vídeos anteriores, você pode obter o design completo em gráficos X'd arquivo, e você pode inspecioná-lo mais em detalhes. Mas vou mostrar rapidamente como criei tudo isso. Então deixe-me duplicar o nosso quadro, por exemplo, e vamos em frente e apagar tudo. Então eu vou apenas escolher uma ferramenta de retângulo e começar a desenhá-la. Torná-lo 600 como assim posicionamento para ser mesmo ler esses dois números. Então talvez ir a algum lugar como este, mas não importa, e eu vou fazer isso por exemplo, 20 algo assim, e vamos posicioná-lo no topo deste número. Vamos continuar e duplicar este número aqui, e vamos digitar um porque estes vão representar milhares de dólares. Então, o que vai digitar um como esse? E eu vou mover o um logo abaixo dele. Isto vai ficar vazio, por isso vamos remover a fronteira. E para o filme, vamos incluir D DD tão cinza claro. Eu vou obter o controle D e isso vai ser preenchido e vai ser três e c seis ff como assim 10 vai ter uma altura fora um, e eu vou selecioná-lo e o clique vazio aqui, e ele vai posicioná-lo para o linha de fundo fora deste estado vazio, como você pode ver bem aqui. Então é basicamente isso para o processo de criação. Eu só então selecionei todos os três, como então cliquei notas repetidas e criei 12 diferentes. Então, mas na contagem, 2345678 9 10 11 12 Então vamos terminar neste, e agora você pode simplesmente espaçá-los para que você possa simplesmente passar o mouse aqui para obter este espaço rosa , e você pode simplesmente pairar sobre eles, movê-los entre si para que você possa ter este espaço agradável como quiser, você pode então posicioná-lo no centro ou movê-lo para onde quiser. E, finalmente, basta clicar duas vezes dentro assim e você pode digitar dois. Você pode clicar duas vezes dentro do tipo em 3456 e até 12. Quando você terminar, você condensa simplesmente para a direita. Clique em grades de grupo. Você vai obter todos esses elementos e você pode executar através e nomeá-los todos corretamente. E uma vez que você tenha feito isso, então este vai ser um número um tão economicamente pode nomeá-lo. Este é o número dois. Este é o número 34 56789 10 Isto vai ser 11 e finalmente 12. Como você pode ver, leva apenas alguns segundos para fazer isso. E nós temos que fazer isso e em agrupados como este porque nós temos que criar esses azuis e ampliá-los então basicamente movê-los para o topo. Então eu estou indo para controlar a duplicata este nosso salto porta dentro, escolher o azul e você pode fazer isso com todos eles, então deixe-me fazê-lo rapidamente. Então você pode selecionar todos eles assim. Então selecione campo, campo campo, selecione todos eles mover para baixo. Então, é realmente simplesmente apenas segurando o controle e nós matar clique do mouse, você pode simplesmente clicar para baixo e aqui está. Você não pode encontrar o ponto do meio onde o ponto do meio está e você pode simplesmente, por exemplo, posicionar para esconder em 20 como este e, em seguida, simplesmente moveu todos eles reboque. Alinhe-os com esta borda inferior. Então você pode simplesmente ligar sobre o ponto médio, estender para aqui e, em seguida, você pode morehead e selecionar um por um. Então clique duas vezes dentro. Basta movê-lo assim e você pode mover todos eles como quiser. Uma vez que você terminou tudo isso, deixe-me comer rapidamente estes também. Uma vez que você terminou toda a dívida, você pode ter algo assim. E, claro, você pode ter valores como quiser, você pode adicionar vários valores aqui. Então, esta é culpa caiu RVers gastos totais. Então, por exemplo, você pode ir a partir daqui, até mesmo ir 11 10 98 todo o caminho até zero e isso é basicamente vai ser seu ponto zero e você pode então alinhá-los com esses números, então isso pode ser, por exemplo, 10. Isto é às 11. Isso é às sete, e você começa a idéia. Você só tem isso como um conceito básico neste vídeo, e cabe a você do que o dedo do pé. Implemente-o em seu próprio design. Você pode incluir suas próprias cores e alternar cores facilmente. Você pode simplesmente não clicar neste. Você pode pular aqui para o painel de ativos. Clique no chamador para selecioná-lo. Em seguida, você pode clicar com o botão direito nele e você condensa qual ele vai desligar instâncias de todas essas cores que eram azuis antes. Agora eles vão ser desta cor. Então, por exemplo, você pode inserir o código hexadecimal de seus clientes aqui, e ele vai, hum, incluí-los instantaneamente neste design tão rapidamente. Volte algumas vezes e agora vamos animar, então é importante que ambos tenham exatamente os mesmos nomes de camada, então, como você pode ver, começa a partir de um aqui e termina em 12. Então este é o número 12, como você pode ver, e neste eles são exatamente os mesmos. Então, começa com o número um termina com o número 12 e estes são exatamente os mesmos em ambas as portas. Então agora o dedo do pé animado, é realmente simples. Eu só vou clicar aqui, arrastar o dedo do pé aqui. Vamos animar o seu passo ou o dedo do pé. Facilitar e duração vai ser de dois segundos porque queríamos ter aquela animação suave para que todos eles estão falhando suavemente de baixo para o topo. Então, vamos clicar em pré-visualização, ver como isso se parece. Então, em um clique aqui, você pode ver porque nós tivemos isso em dois segundos, eles estão sentindo e sem problemas. Se você quiser preenchê-lo mais rápido ou mais lento, você pode simplesmente alterar esse tempo de duração para, por exemplo, quatro segundos. Se quiser, Toby mais devagar ou se quiser que seja Foster, pode ficar com 0,2 segundos. Mas vamos dar uma olhada. Você pode ver apenas se encaixa na posição, então eu realmente não acho que parece tão bem. Eu acho que dois segundos é uma espécie de ponto legal para esta animação, então é isso para este vídeo, e eu vou te ver no próximo 58. Gráfico 4: neste vídeo, eu vou mostrar a vocês como criar esses gráficos de artesanato. Então, quando eu clicar aqui, ele vai se expandir. Como você pode ver , tem uma luz radiante agradável, e preenche todas essas linhas basicamente. E quando eu clicar nele novamente, ele vai saltar de volta para o ponto de partida. Então vamos começar. Então o que eu tenho aqui é para os nossos portos de 800 por 800. E se eu pular para o 1º 1 vamos quebrá-lo. Mais uma vez, você terá isso em seus gráficos. X profanar Sercan, saltar para dentro e inspecioná-lo um pouco mais. Mas aqui temos o opus s 20 Bolt. Temos este 12 horas e K aberto diz 18 mesmo como no vídeo anterior. E nós temos essas duas linhas. Então esta é a linha esquerda com seus quatro e alta 86 32 E finalmente nós temos esta linha de fundo tão, mas exatamente o mesmo, mas ao contrário. Testemunha quatro e altura é 63 para finalmente, temos essas linhas horizontais, então elas são basicamente uma linha de 6 30 em 2. Usando ferramenta de retângulo e eu estou simplesmente usando, repita grande e alinhá-los assim. Então, como você pode ver lá a 45 pixels de distância. Então agora eu tenho isso uniformemente espalhado por esta seção e você pode adicionar números. Então este será 11 10 98 todo o caminho até zero, que será bem aqui. E você também pode adicionar os números para os milhares aqui na parte inferior, se você quiser. Mas, mais uma vez, este é apenas um exemplo fora do design geral. Agora, quanto à parte, como podem ver, maconha está escondida aqui e expandiu-se bem aqui. Então, como você pode criá-lo? Então deixe-me mostrar rapidamente que neste 1º 1 vamos usar o mental. É óbvio que vamos para aqui, no canto. Mas eu vou aqui para não mexer com a parte original. E eu vou simplesmente clicar e clicar aqui. Você tem que ter certeza de que todas essas linhas são retas, então magicamente clique bem aqui. Segure sua tecla Shift. Clique aqui e, em seguida, trazendo de volta do dedo do pé ponto original para que você possa ver, É realmente muito simples. Você pode ter cinco, por exemplo. E deixe-me clicar rapidamente aqui. Clique com o botão direito do mouse Vou clicar nesta parte clique direito na aparência baseada para que possamos obter este Grady em cópias do original. E se saltarmos bem aqui, você pode ver que temos o Grady int no azul três dizer seis FF e cor azul está no topo, está topo, indo para baixo do dedo do pé branco e branco está em 0% fora da cidade base. É por isso que temos esse efeito. Então é isso que você está recebendo aqui. Mas como você pode chegar a ele aqui? Então eu vou mostrar a vocês que se eu clicar nas partes originais e escondê-las e se eu pular bem aqui parte crua, condicional e escondê-las também, vamos usar nossa parte do dedo do pé animar isso para que eu possa simplesmente controlar crianças. Vês? Clique neste próximo. Controle V está indo para o pé. Passe-o no reboque. Posição original. Então, como podemos fazer isso? É realmente muito simples. Então esta vai ser a nossa parte final, e esta vai ser a nossa parte inicial. Agora, para a parte inicial, você tem que selecionar todos esses pontos e trazê-los para o ponto de partida. Então, como você pode fazer isso? Basta clicar duas vezes da sua parte, clicar no início e simplesmente piscar. Traga todos eles de volta ou você pode trazê-los até aqui, por exemplo, Deixe-me ampliar um pouco para que você possa trazê-los todos para este mesmo ponto. Assim, depende de quantas partes você tem. Desculpe, quantos pontos você tem vai demorar mais ou menos. E então uma vez que você terminar isso, você pode simplesmente selecionar todos eles como então nós dois clique com o botão esquerdo do mouse e trazê-los de volta para o ponto original. E finalmente, quando você terminar, você pode simplesmente clicar sobre isso não aqui, e você pode trazê-lo de volta ao ponto de partida, que é bem aqui, e é basicamente isso. É assim que é fácil criar. Vou clicar aqui, escolher o protótipo e já o conectei. Mas deixe-me trazer isso de volta para que possamos começar tudo de novo, assim. Então o que eu quero fazer é clicar neste texto. Eu vou arrastar ervas, manipulado você pisar ou dedo do pé animar. Easy Now duração é de dois segundos e clique aqui para que eu possa trazê-lo de volta. É isso. É assim que é fácil criar isto. Então, se eu clicar aqui, clique em uma pré-visualização. Como pode ver, não podemos ver nada. Mas quando eu clicar aqui vai se expandir e você vai ter esse efeito. E quando você clicar para trás, ele vai trazê-lo de volta enquanto mantém as configurações originais e a posição original que você pode ver o ponto aqui se eu ampliar um pouco mais perto. Mas você pode, é claro, mover esse ponto para selecionar tudo e simplesmente movê-lo para trás do dedo do pé aqui. E você também pode reduzir o tamanho talvez 24 e ele vai se misturar ao fundo muito bem. Então é isso para este vídeo, e eu vou te ver no próximo 59. Gráfico 5: neste vídeo, eu vou mostrar a vocês como você pode criar este gráfico de rosquinhas. Então, em um clique aqui, alguns valores vão mudar. Como você pode ver, Soifer saltar de volta para o 1º 1 Você pode ver que o texto vai mudar. Então este texto no meio três textos aqui na parte inferior vão aparecer do nada, bem como o próprio gráfico de rosquinhas. Então, se você verificar mais uma vez, você pode ver que tudo preencheu bem e suavemente. Então vamos começar. Então o que eu tenho aqui são dois nossos portos de 800 por 800. E como podem ver, temos este estado inicial e temos este estado final. Então vamos explorar alguns desses elementos. E mais uma vez, antes de eu começar, você tem esses gráficos em seu arquivo de prática profunda, então você pode inspecioná-los um pouco mais se você perdeu algo aqui neste vídeo, e você pode entrar em um pouco mais detalhes sobre como tudo foi criado. Então vamos começar. Como você pode ver, aqui é difícil. O pedido parece, então temos o seu gasto hoje Texto aqui. Está aberto desde 20 Bolt abaixo que temos a mesquita de texto central que é apenas esta mesquita. E se você se lembrar dos vídeos anteriores é apenas três textos neste caso, porque 00 e 98 vão mudar enquanto estes cifrão vai ficar no lugar. Então, como eu fiz isso eu criei três textos e este cifrão é deixado em linha. E estes dois estão certos. A linha, como podem ver aqui, que me permitiu apagar o sinal inferior destes dois. E eu simplesmente criei retângulo apenas básico para a máscara Selecionado todos eles e clique em criar mesquita com camada de forma. Basicamente, foi assim que criei esta mesquita de texto. Antes de entrarmos em círculos, deixe-me mostrar-lhe a configuração de dissidência abaixo. Então temos a comida que temos círculo que é 2020 e tem esta cor Bluefield. Temos café basicamente o mesmo círculo mais uma vez. Mas agora tem esta cor verde 55 d 466 e, finalmente, o mesmo para os doces. Então temos o círculo 2020 como podemos ver e é 53 c 85 mortes são de cor vermelha agora para este texto. Então comida, café, doces. Temos senso aberto, regular aos 20. Então isso é ousado. Isso é normal, e eu esqueci de mencionar dentro deste texto central. Esta é a ciência aberta 36 Bold, porque eu queria torná-la apenas um pouco maior porque é o principal ponto focal deste gráfico. E finalmente temos esta mesquita de texto no fundo. Então temos aberto diz 20 regular, estes três textos. E como podem ver, temos o retângulo, mesquitas, a mesma mesquita que vocês têm aqui. Temos aqui mesmo. Mas eu acabei de mover estes três textos abaixo da mesquita e no próximo estado, nós vamos apenas posicioná-los dentro da mesquita e posicioná-los no centro horizontalmente. Então, se eu pulei de volta aqui, vamos fazer um acordo com círculos. Então os círculos são um pouco mais complicados, mas não há nada a temer. Então, como podem ver, temos este círculo principal como vocês o chamaram de volta. É 50 por 215 Tem fronteira sem Phil e o tamanho da borda é 20. Quero dizer, derrame com é 20 e se eu clicar aqui, você pode ver que é o D. D. Então é realmente cor clara. E como você pode ver, eu posiciono para ser fora ou acidente vascular cerebral em torno de Kip e em torno de articulação. Você não tem que fazer isso, mas eu simplesmente às vezes gosto de fazer isso porque torna algumas coisas muito mais simples de trabalhar . Por exemplo, os pontos e você pode clicar duas vezes sobre esses pontos para tornar as coisas um pouco mais simples. Agora, o que eu fiz em seguida foi eu fiz três cópias fora deste círculo de trás, então eu apertei o controle D três vezes dedo do pé ficar vermelho, verde e azul círculo. Então eles são exatamente iguais a este círculo traseiro. Mas eles são coloridos, e eu fui em frente e criei mesquitas para cada um deles. Então, se eu clicar neste aqui, você pode ver como esta mesquita se parece. Então eu fui com o centro. Primeiro, como criei essas linhas. Então você tem esses caras aqui à sua esquerda e no seu topo. Então, porque eu sei que isso é 800 por 800 eu preciso posicionar meus guias em 400 por 400. Então, para estar perfeitamente no centro, fora deste círculo, tão alto fez isso Basicamente, basta clicar aqui e movê-los para dentro até ver a mesma distância de ambos os lados. Assim você pode vê-lo no topo. Você tem 400 por 400 você pode fazer o mesmo por este. E obviamente, quando você está trabalhando em seu projeto, como você pode ver bem aqui, ele está no moinho. Quando você está trabalhando em seu projeto, você tem reboque. Calcule esses números para você e seu projeto específico, mas para esta apresentação, está em 400 por 400. Mas apenas certifique-se de que você posicionou estes guias no centro fora do círculo. É com isso que você tem que se preocupar. Então vamos voltar para essas mesquitas. Então, basicamente, Howard cria nas mesquitas. Eu cliquei em um lápis bem aqui, então em algum lugar fora do círculo, clique bem aqui no meio, clique bem aqui segurando minha tecla Shift. Então segue esta linha. Eu crio, clique em algo aqui e, em seguida, saltando de volta para o centro e em seguida, selecionei no azul e no local, clique direito e mesquita com forma. E foi assim que consegui esta mesquita. E você verá esta mesquita assim. Então isso é basicamente aquela mesquita. Agora, para este primeiro estado, não queremos ver a mesquita. Então, como podemos fazer isso? Podemos simplesmente clicar duas vezes no local, e é um pouco mais complicado entrar nessa parte porque ele fica fora dela o tempo todo. Então você tem que ter muito cuidado e clicar na peça em si. Então, assim. E uma vez que você selecionar o pote, você pode simplesmente clicar neste ponto, por exemplo, e simplesmente movê-lo aqui. Você pode clicar fora termina indo dedo do pé, mesquita a forma completamente, e você não vai vê-lo. E será basicamente parecido com isso. Então você não pode ver essa forma como mídia como esta. E eu fiz o mesmo para o 2º 1 Então aqui está a Mesquita Verde. Então o azul começa a partir daqui. Acaba aqui. Então basicamente em algo como o centro, basicamente, sim, então 1/4 fora do círculo é o azul e verde está vindo atrás dele e porque a pasta verde está abaixo das mesquitas azuis mais cheias neste caso. Então imagine isso como uma pasta. Então temos uma pasta principal. Temos pasta azul verde e vermelho um. Todos eles estão posicionados abaixo um do outro para que possamos obter esse efeito como você vê aqui . Então o azul está saindo primeiro. Verde está saindo depois e o vermelho está saindo finalmente, e eu posicionei azul no topo porque é o primeiro verde está abaixo do golpe porque ele está saindo segundo lugar e finalmente vermelho está abaixo de todos eles porque ele está saindo primeiro. Agora, para estas mesquitas. Se pulando bem aqui, você pode ver como eles se parecem. Então me perguntaram esta porção fora do verde, então eles pararam porção e parte inferior estado como ele é. Então, quando eu clicar em algum lugar fora e você lutar, clique no verde e aumentou a opacidade dele, você pode ver como ele se parece. Então esta é basicamente a nossa mesquita, por isso cobre a parte azul. Basicamente, ele vem abaixo da parte azul e nesta seção estão apenas indo para estender a mesquita. Então, se eu clicar nesta mesquita verde. Então círculos mesquita verde. Você pode ver como esta mesquita se parece. Então eu basicamente fui de disposição em disposição, usando o mesmo método que eu mostrei para o azul. Então você pode simplesmente pular dentro de sua mesquita. Deixe-me ver o que é. Aqui está. E recomendo que se aproxime um pouco mais. Clique duas vezes dentro para que você possa realmente chegar à sua mesquita bem. E como você pode ver, aqui está eu simplesmente movo este ponto para aqui. E se eu pular lá fora, é assim que parece. Então é basicamente isso para a Mesquita Verde e para a máscara vermelha. Olhando rapidamente, leve isso a zero opacidade para a Mesquita Vermelha. Eu fiz exatamente a mesma coisa. Então, se eu levar até o fim, você pode ver que começa a partir daqui. E é extremamente pequeno, então você não pode realmente vê-lo. Se eu clicar nele, você pode ver que é basicamente uma linha porque eu queria isso e eles estão vindo aqui. Então eles estão se encontrando neste ponto, então se você clicar em algum lugar por aqui, você pode vê-lo. Mas se eu expandi-lo para ir até o topo. Você pode ver agora como parece agora. Vermelho também está em opacidade zero. Então você não pode vê-lo neste estado. E um azul é 100 obesidade porque nós a coletamos aqui no topo. Então, basicamente nos juntamos aqui. Estamos usando nossas duas linhas. Então você pode imaginar que esta é a primeira linha da mesquita. Esta é a segunda linha da mesquita e você tem dois pontos bem aqui e bem aqui você pode clicar neste começo e simplesmente trazendo de volta para aqui dedos colapsá-los e fazer basicamente uma única luz. E foi assim que criei este azul. É um pouco complicado, mas você pode mergulhar um pouco fundo neste arquivo gráficos xz, e você pode saltar para dentro se algo não está claro para você. E neste próximo, eu incluí todos eles então basicamente moveu todas as mesquitas e, por exemplo, para este verde, você pode estender esta mesquita para ouvir o quanto, branco ou dito que você quer porque realmente não importa porque é coberto por este ditado mesquita azul vai para o vermelho. Está coberto pela mesquita verde porque está bem aqui abaixo da verde. Então, se eu apenas costumava estender este verde para ouvir isso vai cobrir neste vermelho muito bem e porque nós baixamos a opacidade fora deles bem aqui. Então, se um salto para dentro, você pode ver que o verde está em zero. Pay cidade vermelha é com zero opacidade que vai dar algum tempo até que o balão se enche e eles vão começar a aparecer e tudo vai parecer suave e limpo. Agora, o texto. Eu coloquei tudo em posição. Então, se eu saltar para dentro e mostrar-lhe a mesquita de texto central, se um trabalho ao seu lado concedeu, eu movi esses dois zeros no topo do estado lado dólar o mesmo e 98 apenas entrou em posição. Dizer vale para esta mesquita bem aqui no fundo. Então todos esses números estão no centro horizontalmente com esta forma de mesquita, e finalmente eu expandi os círculos dedo do pé. Sinta-se lá fora locais designados, e é basicamente isso. Uma vez que você pegar o jeito dele quer começar. É realmente bastante simples fazer isso, mas deixe-me mostrar-lhe rapidamente em um caso adicional. Então vamos apertar o controle em D e eu vou deletar tudo. E eu vou pular aqui e ver o meu círculo. Então, são 2 50 por 2 50 Deixe-me apertar o controle C Hit Control V. Certifique-se de que é isso no centro, e eu vou apenas mostrar a vocês como criar esse. Então vamos chamar isso de azul e vamos escolher o azul para as fronteiras. Três c seis f assim. E agora vou mostrar a vocês como criar isso. Então clique aqui e logo aqui. Então aqui mesmo. Clique em algum lugar por aqui e feche-o. Assim. Agora remova a borda. Inclua o filme. Esta vai ser a nossa mesquita e selecionar mesquita e golpe direito clique e mesquita com forma . É basicamente isso. Agora este vai ser o nosso segundo estado. Então vai parecer assim. E no primeiro estado, eu vou apenas clicar duas vezes na mesquita, você consumindo um pouco mais perto para que você possa clicar nele e o que eu realmente vou fazer é apenas mover este ponto todo o caminho até aqui até que ele se encontre com esta luz do meio. Quando você clica fora, você não pode mais ver a cor azul. Então, quando eu saltar para o protótipo clique toque para ouvir ou dedo do pé animar Fácil Agora um segundo, e se clicarmos em pré-visualização, você pode ver como isso se parece. Então, basicamente, imagine esse processo e você pode repeti-lo para todos os três. Apenas certifique-se de que o verde vem abaixo de um azul e vermelho vem abaixo de um verde, para que eles apareçam como uma linha basicamente única. Então, vamos excluir esses dois e vamos voltar para o nosso design original. Então é basicamente isso para o design. Vamos clicar aqui. Acertar protótipo. O que vou fazer é basicamente o mesmo que te mostrei. Portanto, toque em ou para animar uma nota nítida e fácil. Um segundo quando eu clicar em pré-visualização, você pode ver aqui que estamos neste estado vazio. Então, quando eu clicar, verão vai preencher e porque eles estão desaparecendo de zero, ele fica bem com esse tipo de facilidade em nossa transição, e esse texto está chegando bem aqui, ambos na parte inferior. Então você pode ver que parece muito bom. E finalmente, mais uma vez, é assim que parece. Então, mais uma vez, eu encorajo você a verificar gráficos, ovos, profanar , dedo do pé. Brincar com este arquivo. Se você encontrou algo não está correto ou encontrado, algo não está claro. Então você pode realmente ver como eu os criei e como você mesmo pode criá-los. Então é isso para este vídeo, e eu vou te ver no próximo. 60. Arquivo XD: neste vídeo. Quero mostrar-lhe gráficos X'd arquivo. Então eu mencionei este arquivo várias vezes ao longo destes vídeos, especialmente nesta seção do curso, porque a maioria fora, especialmente jovens designers, encontrou o coração desses gráficos para projetar e difícil de entender. Mas eles realmente não são. Eles são realmente bastante simples uma vez que você obter a trava sobre eles e quer que você projetou alguns. Então aqui está o arquivo. Você pode saltar para dentro, você pode verificar qualquer coisa. Então, por exemplo, eu quero ver como isso se anima. Você pode clicar neste primeiro nosso conselho clique aqui e, em seguida, você pode clicar entre eles e ver como ele se anima. E uma vez que você viu a animação, você pode saltar para dentro. Clique aqui no painel de camadas e você pode realmente saltar para dentro e ver. Oh, OK, estes são clientes valiosos. Estas são linhas horizontais. Você pode abrir esta grade de repetição. Você pode clicar na linha e ver o quão grande é, por exemplo, e você pode ver OK, este é o azul. Mas ele tem algo assim. Então algo como um Grady int que você pode clicar, vê? É ingrediente de linho. Vai da cidade de pagamento zero branco todo o caminho para azul e você pode ver que o azul está no topo e o branco está no fundo. Foi assim que obtive este efeito para que ele possa realmente saltar para dentro e inspecionar cada elemento que você vê aqui. E como de costume, você tem toda a minha permissão para usar este arquivo para projetos pessoais e comerciais para um número limitado de clientes. Então você pode basicamente copiar essas cores. Copie esses efeitos, copie essas transições e use-as em seu trabalho de forma totalmente gratuita. Então é isso para este vídeo, e eu vou te ver no próximo. 61. Carregamento: neste vídeo, eu vou mostrar este girador de carregamento, e enquanto ele está carregando e girando, esses pontos também estão mudando. Então vamos começar. Então tire o aeroporto. 800 por 800. E vamos criar nosso texto. Vou digitar um carregamento, ter certeza que é sentido aberto. Igual a tudo o que criamos no placar até agora. Eu vou colocá-lo no meio, e eu vou criar meus três pontos, vou desenhar um bom ponto para exemplos. Eu estou fazendo isso. Então, seis por seis e eu vou selecionar a cor da borda. Remova a própria cor da borda. Vou colocar bem aqui e colocá-lo, por exemplo, de baixo para cima. 12345 estava apenas na minha tecla de seta superior. Em seguida, vou posicioná-lo bem aqui. Aperte o turno e mexa-se. 10 pixels para a ação de controle de acerto direita duplicado e posicioná-lo cinco. Então controle de engate. Dissuadir duplicado mais uma vez e posicioná-lo cinco bem aqui. Em seguida, eu estou indo dedo do pé. Ordene-os assim. Então este vai ser o círculo um. Isto vai ser um círculo, também. E, finalmente, isso vai ser circulado três, como então vai movê-los para baixo, agrupar tudo, chamá-lo de texto. Então, e eu vou posicioná-lo aqui e aqui para estar perfeitamente no centro. Em seguida, vamos criar nosso círculo, então eu vou criá-lo como 2 50 com 2 50 como Então eu vou dar-lhe uma cor de borda fora DDT assim e remover o filme. Eu estou indo dedo do pé usado tamanho de traço fora 20 e eu estou indo dedo do pé posicioná-lo no centro como Então seguida, eu vou clicar no centro, acidente vascular cerebral em torno de Kip e em torno da articulação, e você vai ver por que em um segundo eu vou ter certeza Está perfeitamente no centro, e vou ligar para este de volta. Eu vou obter controle de duplicado, e eu vou toe chamar este girador como então vai clicar na cor da borda. Certifique-se de que é três e c seis f duro assim, e agora podemos remover a parte de trás. Por isso, vou escondê-lo por enquanto. Em seguida, vou clicar duas vezes aqui para entrar no modo de edição. Vou selecionar estes dois pontos aqui. Segure minha tecla antiga e pressione delete. É por isso que eu estou indo para excluir esses pontos e em seguida em apenas indo para selecionar esses dois hit delete. E agora eu só tenho essa forma em seguida, eu vou trazer a parte de trás e eu estou indo para sobre isso tão pastoso, baixo para zero, eu vou selecionar Thies para apertar o controle G para agrupá-los e chamar este por exemplo, Spinner E isso é tudo para o nosso primeiro estado. Para os nossos segundos estados, vou conseguir que o controle de duplicar isto está entediado. Vou selecionar o girador Clique aqui. Digite 3 60% e eu vou pular dentro do texto e fazer algumas mudanças. Então eu vou apertar, controlar, clicar e selecionar esses dois, e eu vou girá-los assim. E você se lembra desse efeito? Se você assistir as lições anteriores, eu vou bater controle o mais uma vez para criar 1/3 1 Quero dizer, vai ter certeza de que ele é em 3 60 mais uma vez e finalmente eu vou selecionar esses dois agora e eu estou indo toe girá-los usando meu tecla shift assim e isso é basicamente para todo o efeito. Como rapidamente. Vá em frente e verifique. Se o velho Fullers está perto, eles são. E agora chega a hora do protótipo. Eu vou clicar em um protótipo arrastado vela azul, usar o tempo usado auto animate para a transição, está dentro e um segundo agora para o 2º 1 e apenas vai usar exatamente as mesmas configurações . E para o 3º 1 vamos trazê-lo de volta para a frente assim vamos usar a transição do tempo e podemos usar Dissolver. Fácil agora em duração vai ser zero segundos, senhor. Entrando em contato com o centro de mama duplo 0.0 e você vai ter este zero segundos. Agora o que? Isso que está trazendo de volta deste efeito todo o caminho até o início. Então os pontos vão mudar aqui. Vai girar. Pontos vão mudar aqui também vai passar mais uma vez e, em seguida, com o atraso desligado, zero segundos, quero dizer duração de zero segundos. Ele vai voltar direto para este aqui e então começar tudo de novo Então vamos pré-visualizar. É como a primeira vez que clicar aqui e você pode ver que começa a girar, e esses pontos estão mudando também. Agora você pode deixar assim, se quiser. Mas você pode, por exemplo, criar outro e criar um retângulo de médico azul no meio. Por exemplo, deixe-o estar em todos os três com opacidade zero e, em seguida, torná-lo realmente pequeno como um pixel por um pixel com opacidade zero. E, em seguida, neste final, quando ele começa uma parada girando, este spinner e texto vai desaparecer para zero e que o azul vai aumentar para preencher toda a nossa porta. E então você pode fazer a transição dessa maneira para a próxima tela. Então, a partir de tela de carregamento levou próxima tela usando essa cor azul. Então é isso para este vídeo, e eu vou te ver no próximo 62. Flip de cartão: neste vídeo, vou mostrar-lhe como criar este flip produto cartão. Então nós temos este produto aqui, e quando o usuário quiser clicar para saber mais, ele vai virar e revelar um pouco mais de informações. E então temos essa seta para trás. Então, quando você clicar nele, ele voltará para o cartão original. Então vamos começar. Então aqui tem dedo do pé são pássaros fora 800 por 800 um projeto acabado. Mas deixe-me mostrar rapidamente como criar esses sapatos. Ambos os sapatos são P e G, o que significa que essas imagens têm fundos transparentes. Então deixe-o, podemos tirar essas imagens se eu diminuir um pouco? Estes são meus sapatos, então eu encontro algumas fotos deles e cortei usando a loja de fotos. Como você pode ver, eles não são qualidade de estúdio, mas eles vão fazer para este vídeo. Vou simplesmente trazer esta imagem para dentro. Eu vou sobre isso aqui, mas não dentro do cartão, mas aqui no cartão um. Então deixe-me fazer isso mais uma vez. Vou trazê-lo de volta lá para fora, assim. Então agora está lá fora no esporte pago. Vou clicar no cartão um e depois trazer a imagem para dentro. Então, como você pode ver, ele está no cartão um, e eu simplesmente vou segurar minha tecla shift e diminuir o tamanho desta imagem. Amplie um pouco mais perto, por exemplo, de algum lugar por aqui. Vamos ver. Certifique-se de que está no meio deste círculo, assim como este cartão, e eu vou fazer o mesmo para a imagem número dois. Então eu vou clicar nele Dragon posicioná-lo no lugar como para que eu possa até girá-lo um pouco. Então, por exemplo, assim, certifique-se de que está no meio e, por exemplo, por exemplo, posicione-o em algum lugar por aqui. Certifique-se ao cortar seus P G de que você não tem o excesso de espaço, especialmente nesta imagem, para que você possa imaginar que toda a sua imagem original foi esta parada. Então, até aqui, por exemplo, quando você estiver cortando, certifique-se de cortá-lo até aqui para que você não tenha acesso ao espaço desperdiçado basicamente em torno dessa imagem. Então agora que eu fiz isso, como eu poderia mostrar a vocês no design original. Aqui tenho o cartão. E como você viu as imagens bem aqui abaixo disso, nós temos o círculo, que é de 30 por 2 30 e tem essa cor de um 7, um 578 e Holly tem essa cor é que eu simplesmente provei a partir dessas letras bem aqui no atirar abaixo que temos o nome do produto que está aberto desde 20 Bolt e abaixo desse senso aberto 20 irregular. Temos apenas a descrição básica do produto. Finalmente, temos o fundo, que está em 3 50 com 70 e aprender mais é aberto, diz 20 regular e branco. Finalmente, temos este passado. É um raio de canto branco a 20 e temos esta sombra. Então, mais uma vez, tudo zero tão velho sombra negra que 16%. Mas agora nós temos em cinco e largo eixo x y e este borrão fora 20 então ele vai apenas um pouco mais para fora. Então esse é o nosso cartão número um. E quanto ao carro número dois vai, deixe-me verificar semanalmente. Se este círculo é da mesma cor que este, deve ser. - É. Então nós temos essa seta no topo e você viu essa seta nos vídeos anteriores. E simplesmente posicione-o aqui. Temos o mesmo círculo. Temos o sapato e finalmente temos o texto do parágrafo aqui. Se você não sabe como obter parágrafo, você pode simplesmente clicar no texto. Clique em algum lugar por aqui, por exemplo. Mantenha pressionado o botão esquerdo do mouse e arrastou a área onde você deseja digitar o texto também . O texto em si. Eu tirei do site oficial da Adidas para esta página do produto, então eu apenas baseei ele insight, e isso é basicamente para o texto. Agora vamos seguir em frente e eu vou te mostrar como projetar este efeito flip card e uma última coisa que eu esqueci de mencionar. Como você pode ver, não temos a cor branca para o nosso porto, mas sim esta cor cinza claro, que é mais uma vez, DDT. Eu só queria trazer o cartão um pouco para a frente para que você possa ver como ele se parece agora para este efeito dedo do pé funcionar corretamente, temos que fazer algumas mudanças. Então, a primeira mudança é que eu vou fazer uma cópia desse fundo, e eu vou arrastá-la para fora para algum lugar por aqui. E então eu vou selecionar o cartão, clique neste BG Original um e remover a sombra como Tell e eu vou fazer o mesmo para o carro para tão controlado o para duplicar o BG. Arraste-o para fora para ouvir, movê-lo para baixo e remover a sombra do fundo original como Então Agora porque fizemos isso é que precisamos exportar esses projetos como sendo suco, assim como imagens com transparência para que possamos trazê-los de volta para este design original. E eu vou mostrar a vocês como em um segundo para que você possa clicar neste 1º 1 Então Karlan bateu controle E ou o suco de comando PNG. A partir deste menu suspenso, você pode usar o design. Certifique-se de que você tem as configurações de exportação muito deseja exportar. Esta imagem é no meu caso, é apenas desktop e eu vou clicar em exportar e ele vai toe exportar este cartão como uma imagem PNG sem a sombra porque esta cópia de fundo tem a sombra e nós não queremos que este tenha uma sombra, então eu vou fazer o mesmo para o carro para então apenas selecionado hit control E. E eu estou indo toe exportá-lo mais uma vez para o meu desktop como um transparente sendo jipe. Agora o que vamos fazer é esconder o cartão um e o carro para eu vou fazer uma cópia dos cartões para ter certeza que você sabe qual deles é qual. Então eu vou selecionar esses dois e simplesmente movê-los um pouco e estão indo toe fazer uma cópia fora deste cartão um também. Vou trazer isso para trás um pouco. Certifique-se de ter o mesmo espaçamento entre eles. Então são 70 assim. Então, mais uma vez, d ainda são a carta número um. E esses dois são o cartão número dois, e você pode conferir e ver por si mesmo. É o carro número um no carro número dois. Agora o que você vai fazer é que nós vamos trazer essas imagens. Então, para o cartão número um, vou selecioná-lo aqui mesmo. Vou trazer o carro número um e simplesmente arrastá-lo e soltá-lo em algum lugar por aqui. Vou posicioná-lo no lugar, e você pode clicar aqui e bem aqui para ter certeza que está na posição. Em seguida, vou apertar o controle. C. Clique aqui, aperte o controle V colá-lo e eles estão indo dedo do pé. Mexa-se só um pouquinho. Então ele vem abaixo desta pasta. Essa parte realmente não importa, mas eu gosto de organizar minhas camadas. Agora vamos fazer isso rapidamente para o carro número dois, então eu vou arrastá-lo para dentro da minha área de trabalho, posicioná-lo no lugar, certifique-se de que ele está no meio e fazer o mesmo para este, então certifique-se que ele está no meio como Bem. Agora, como você pode ver, agora temos duplicatas, e isso é importante ter, e eu vou mostrar a vocês o porquê em apenas um segundo. Então, para fazer esse carro virar efeito, o que temos que fazer é distorcer essa imagem. É por isso que eu o exportei como imagem como um PNG, porque para distorcê-lo como um design no Adobe X'd, é realmente difícil de fazer, e você vai ter esses efeitos estranhos. Então, por exemplo, este sapato não vai parecer adequado. Este círculo vai parecer estranho, especialmente o texto e assim por diante. Então, é realmente fácil exportar o dedo do pé. É P e G e, em seguida, trabalhar com imagens PNG. Então, para essas cópias, então segundas cópias de cada uma, o que nós realmente vamos fazer é que nós vamos fazer a sagacidade fora de uma. Então, como você pode ver agora, a sagacidade é 445 Então eu estou indo realmente bater um bem aqui, pressione Enter no meu teclado. E se você conseguir esse tipo de efeito estranho, isso significa que você tem reboque desbloquear esse aspecto. Então eu vou clicar aqui para trancá-lo. Vou acertar um dedo do pé agora. E como você pode ver, altura agora permanece em 671, pois deve clicar no BG e fazer o mesmo. Então, aperte um e certifique-se de selecionar os dois e certifique-se de que eles estão no meio assim. Ou você pode simplesmente posicioná-lo como este um por um Se eles não querem se comportar corretamente e finalmente reduzir a opacidade fora do cartão número 120 assim, e deixar a obesidade fora BG em 100 porque ele deve ficar assim em seguida. Vamos fazer o mesmo por este cartão também. Então, eu só vou dar o dedo do pé. Encomende como fiz para o cartão. Um tão selecionado. Certifica-te de que está trancada. Clique em um e faça o mesmo para o BG. Então ele quer. Como assim mover o VG no centro, mover o cartão no centro e isso é basicamente para o nosso design. Agora vamos começar a prototipagem. E como viu, deixei as cartas lá dentro. Então, a qualquer momento, se você quiser fazer alguma mudança, você pode saltar para dentro. Alterar a cólera como incluir novas imagens e alguém. Apenas certifique-se se você deseja apresentar seus projetos seu cliente neste usando este efeito, certifique-se de exportá-lo. AAP Então traga de volta assim. E então você pode esconder o design original e depois fazer o design. Em seguida, faça o protótipo mais uma vez. Então, para o protótipo em si, vou clicar em algum lugar. Então neste cartão eu vou arrastá-lo para ouvir você pisar ou dedo do pé. Inimigo diminuindo e 0,4 segundos Agora neste, vamos usar o tempo como animar automaticamente fácil agora 0.4, e neste aqui porque ele vai virar a partir daqui. Dedo isto. Vamos usar essa seta para trás, então toque em ou para animar o Fácil. Agora 0,4 segundos e, finalmente, neste, vamos usar o tempo mais uma vez. Então vamos dar uma olhada. Veja como se parece. Então, como você pode ver, aqui está, aqui está o nosso cartão. Eu vou clicar aqui mesmo vai virar e inclinar e depois mostrar-nos esta informação. E quando eu clicar aqui, ele vai virar e mostrar desinformação mais uma vez. Então não é um cartão perfeito, mas dá-lhe este tipo de ilusão de virar e depois revelar. E esta próxima carta. Então ele realmente funciona muito bem, especialmente se você tem cores de fundo consistentes. Então parece muito bem, mas eu acho que ela para as entranhas do pé mais baixo. Você paga a cidade aqui? Sim, então vamos fazer isso mais uma vez, assim e agora parece muito mais limpo. Então é isso para este vídeo, e eu vou te ver no próximo 63. Artigo de rolagem.: neste vídeo, vamos criar este artigo e neste artigo vai ajudar o controle deslizante. Então, em um clique e arraste o controle deslizante para baixo, você pode ver que o texto está se movendo para baixo, e quando eu clico e trazendo de volta para cima, você pode ver que ele o traz de volta para cima. E você pode fazer isso para ilustrar, obviamente para seus clientes como alguns artigos na página podem ser semelhantes. E você também pode ilustrar isso dentro dos APs móveis criando o gatilho de arrastar, que irá imitar o gatilho de arrastar com o dedo que você realmente faz em seu celular . Então vamos começar. Tudo bem, então este é super fácil de criar, e tudo que você tem a fazer é criar um espaço reservado de imagem para que você possa usar um retângulo para apenas desenhar são um retângulo grande agradável. Remova a borda e basta arrastar e soltar a imagem dentro. E uma vez que você faz uma vez, você pode clicar duas vezes na imagem e então posicioná-la. No entanto, você quer dentro do suporte da polícia de imagem. Então você pode renomear imagem como eu fiz aqui, e minhas dimensões são 800 por 300 porque minha porta é 800 por 800 neste caso. Por isso dá-te este grande rectângulo de urze. Em seguida, criamos a sombra. Então, para a sombra, eu estou usando mil tão preto, mas desta vez com 10% de desconto base, porque eu encontrei 16. É só um pouco demais. Além disso, eu estou usando zero para o ex 10 40 y e borrar fora 10 também para obter esta bela sombra olhando. Em seguida, eu criei o texto. Então, para o texto, eu tenho montanhas fora da Noruega, que é o texto do título da arte aberto Sands 30 parafuso e é alinhado à esquerda. Eu posiciono 40 pixels a partir desta borda esquerda e eu criei este texto parágrafo que você viu em alguns dos vídeos anteriores. Como você pode criar o quê? Deixe-me mostrar mais uma vez para que eu possa controlar DE para duplicar isso, e eu vou excluir rapidamente todos esses elementos na página. Vou apenas arrastar um retângulo agradável, algo como este ou quadrado agradável para o texto e digitando apenas algumas letras. Vou clicar fora para obter esta seleção, e você pode posicioná-la como. Então, como qualquer outro elemento dentro do aeroporto, e eu estou usando um plug in. O plugue é gratuito. Um monte de Epsom. Está frio. E se você não sabe como instalar o plug em uma vez que você clicar aqui no painel INS plug , você tem este sinal de mais você pode clicar nele e você pode clicar aqui para pesquisar. Você pode digitar Lauren Gypsum e basta clicar em instalar, e depois que você fizer isso aparecerá aqui. Então você tem que fazer é criar esta camada de texto, em seguida, selecionado clique carga de gesso preenchido com texto de espaço reservado, e você pode usar qualquer fora dessas opções. Estou usando este Cicero Inglês e clique em inserir texto. É isso. Ele irá inserir as pilhas bem nesta caixa delimitadora, e você tem este parágrafo agradável que você pode brincar com. Em seguida, vou mostrar-lhe como criar este controle deslizante. Então tudo o que fiz foi criar estas duas formas, então esta forma de fundo é apenas um retângulo simples. 12 é a sagacidade para 44 para a altura, e vai em tamanho e em altura com este título de montanhas fora da Noruega. Então vai até aqui e vai aleatoriamente até aqui. Mas você pode, claro, ser mais específico se quiser. E finalmente eu tenho o controle deslizante, que é eu apenas duplicado. Este fundo criou este mais leve e altura é de 60 e a cor é 70 70 70, enquanto a cor de fundo é D dd. Então é basicamente isso para todo o projeto. Você pode ver como é realmente simples. E para este parágrafo, tudo o que eu fiz foi estender tudo até aqui, e eu simplesmente selecionei na parte com texto porque muitos membros que terminaram por aqui você pode selecionar esta parte do texto pressionando o controle C e, em seguida, pressione o espaço e, em seguida controle V controle. Fazemos mais algumas cópias abaixo da linha, e é basicamente isso agora para este segundo estado sexual. O que eu fiz foi mover este controle deslizante todo o caminho para esta imagem de parte. Eu movi o texto todo o caminho até aqui, e o título está indo todo o caminho até aqui. Mas se você se lembrar dos vídeos anteriores. Se você fizer um grupo como eu fiz para o texto, ele será contido dentro do aeroporto. Ele não vai para o ritmo mais porque se as montanhas da Noruega estava fora deste grupo de texto, por exemplo, ele vai para o passaporte ea animação não iria funcionar. Tudo o que você tem que fazer agora é protótipo-lo para que eu possa clicar neste controle deslizante, arrastar a alça. Eu vou usar arrastar, auto, auto, animar, aliviar, aliviar, e finalmente fazer o mesmo para este tão selecionado a partir daqui, e simplesmente arrastá-lo de volta e ele irá conter o mesmo efeito dentro. Então, quando eu aperto a visualização, você pode ver como ele se parece, e você pode ir tão devagar quanto quiser para imitar essa experiência de leitura de artigos, ou você pode ir o mais rápido que quiser. Realmente não importa, e depende de você. Você pode, é claro, adicionar mais alguns efeitos. Então, por exemplo, você pode trazer o tempo. Então, quando este artigo foi publicado, você pode trazer a água para que possamos colocá-la aqui. E você pode, claro, deslizou esta imagem para fazê-lo parecer um efeito de paralaxe para que você possa torná-lo menor nesta fase , ou você pode torná-lo ainda maior do que é aqui. Cabe a você, e você não pode colocar todos esses detalhes em foco com seu artigo. E você pode, é claro, por exemplo, trazer um botão, que estava contido logo abaixo deste texto e quando eles clicam no botão bem ali. Eles condenaram, por exemplo, compartilhou este artigo ou passar para outro artigo ou voltar para a página inicial ou qualquer que seja a opção. Então é isso para este vídeo, e eu vou te ver no próximo. 64. Slider de valor: neste vídeo, vou mostrar-lhe como podemos criar este controle deslizante de valor. Então, quando eu clicar nesta seta, ele vai virar e todas essas outras opções vão se encaixar na posição. Então eu posso mudar esses valores e mover ao redor desses controles deslizantes e eu posso trazê-los de volta para suas posições originais e um e pronto. Posso bater bem aqui para trazê-lo de volta. Então, vamos começar. Então o que eu tenho aqui é o design acabado e todas essas placas estão em 800 por 800 fugas. Verifique rapidamente este, que está expandido, e eu vou chegar a este que entrou em colapso. Então, aqui está como eles se parecem. Então, se eu clicar aqui, você pode ver todas essas camadas dentro. Mas vamos dissecar apenas este, porque todos eles são exatamente iguais. Então aqui têm alarmes de mídia de toque e chamadas na parte inferior. Então, se você abrir o toque, aqui está como ele se parece. Então nós temos essa seta aqui, que é apenas um ícone estreito, e então nós temos esses ícones bem aqui. Agora este é ícone toque em seguida, temos texto ringtone que está aberto desde 25 neste caso, e 70 70 70 para a cor. E, finalmente, temos BG para o fundo agora para o controle deslizante já mostrou isso em um dos exemplos anteriores, temos o círculo que é sentir com cor branca, sem sombra de borda. Então, sombra preta padrão 16%. E neste caso, os valores são duas exposições para a posição Y e 10 para o desfoque. E foi assim que obtive esse efeito de borrão para o fundo abaixo que temos a mesquita. Então é a mesma mesquita como já mostrar-lhe em número fora de vídeos anteriores e você pode ver que eu mover este dedo ligeiramente aqui. E se eu quiser, posso simplesmente trazer de volta para aqui. Clique fora e, em seguida, ele não tem mesquita em tudo. E, obviamente, este círculo seguirá para a esquerda e para a direita, e você pode simplesmente segurar o turno e movê-lo para a posição. E finalmente, o que temos aqui está vazio, que é apenas esta camada cinza claro de fundo, e está no DDT. Cor agora para os tamanhos. Fundo é 700 com 1 28 e este controle deslizante vazio é 5 20 a 12 pés de altura ea mesquita e camada preenchida, obviamente muito como você movê-lo ao longo Círculo é 30 por Turney, e isso é basicamente para a configuração. Agora eu criei todos estes copiosos logo abaixo alterar o texto e ícones para corresponder com os valores em questão. E finalmente, esta flecha vai girar. Então, se você vê bem aqui, ele está apontando para cima e no primeiro exemplo está apontando para baixo. Agora, quanto à prototipagem, parte vai, o que você tem que fazer é, neste primeiro caso, eu acabei de movê-los. Então, todos os três eu os selecionei, colocá-los no lugar com este e mais baixo. Você paga 20 para a cidade neste? Eles vão gastar com 20 pixels entre si. Bem aqui. Esse é o espaçamento. E a opacidade é obviamente 100 porque eles vão se encaixar na posição seguinte. Acabei de criar mais três cópias para esses três controles deslizantes. Então eu movi este 1º 1, em seguida, mudei o 2º 1 e finalmente movi o agitado todo o caminho até 100% na posição. E finalmente, quando você protótipá-lo, você pode trazê-lo de volta à sua posição original. Então vai partir daqui, Tohir. E então você pode mover esses isqueiros para baixo em posição. Agora, para um protótipo em parte, se eu clicar em um protótipo, você pode ver o que eu fiz. Então eu cliquei nesta seta para ir para este segundo nossa porta que eu usei toque também animar e encaixar na posição. E 0,4 segundos foi a duração. E quando você clica na seta para voltar, eu mudei um pouco. Então eu usei exatamente as mesmas configurações aqui. Mas eu usei facilidade para fora e 0.2 segundos porque eu queria que ele para aliviar escritor em vez snap e para a duração, Toby um pouco mais curto. Então, em vez de zero ponto para ele 0.2 porque eu queria que ele voltasse um pouco mais rápido. Então, se eu clicar em pré-visualização, você pode ver isso. Então nós temos estes para trás e nós temos snap para que eles se encaixem em posição. Você também pode usar snap, mas ele vai logo acima da borda stop apenas um pouco, e você pode ver esse tipo de efeito fantasma É por isso que eu usei é fora e 0.2. Então você não vê esse efeito agora para esses controles deslizantes? O que eu fiz é, por exemplo, eu cliquei neste ponto e movê-lo toe este nosso porto e para ele usamos drag auto animates e está dentro porque eu queria facilitar e aliviar fora da animação. E basicamente eu fiz exatamente a mesma coisa para todos estes descansar fora dos pontos e nossas tábuas. Então, como podem ver, temos exatamente a mesma configuração para este e para este, e eu voltei para cada um deles para trazê-los de volta ao seu lugar original usando exatamente as mesmas configurações. Então, se eu clicar no primeiro 1 clique pré-visualização e eu vou ampliá-lo apenas um pouco. E eu incluí neste fundo de grau leve para o aeroporto em si porque eu queria que isso destacasse um pouco melhor porque você pode encontrar isso em seus dispositivos móveis, por exemplo, e geralmente têm fundos desfocados. Então esses fundos brancos fora dos itens em si vão saltar um pouco melhor contra esse fundo azul então quando você clicar sobre ele, ele vai se expandir. Você perdoa o colapso, se quiser. E a flecha vai virar, obviamente. E você pode mover esses controles deslizantes ao redor e as mesquitas seguirão porque eu acabei de estender as mesquitas todo o caminho até aqui e movido os círculos para trás para que você possa movê-los de volta para sua posição original. E você pode, é claro, brincar com ele. Você pode ir até o zero, mas eu só queria te mostrar como você pode criar assim também. Então é isso para este vídeo, e eu vou te ver no próximo. 65. Pesquisa: neste vídeo, vou mostrar como você pode animar o campo de pesquisa. Então, quando você clicar aqui, ele irá expandir o tipo em Paris, e esses cartões vão voar do topo. Então vamos começar. Então eu tenho isso para nossos portos bem aqui, e todos eles estão em 800 por 800 Eu vou rapidamente verificar com você sobre o projeto. Então o que temos aqui é o texto. Então a busca por qualquer coisa está aberta desde 20 regular, e nós temos a busca, que está logo acima de procurar qualquer coisa. Texto, porque neste próximo porto, ele vai expandir e cobrir a busca por qualquer coisa e por ele. Eu não criei usando um lábio ainda, mas eu criei usando retângulo para também, se um clique na entrada, você pode ver que o raio do canto é 100 luta corporal menor que 20 Você pode ver que é apenas um retângulo básico. O que isso nos permitirá fazer é criar esse retângulo expandido, e ele terá um raio de canto grande para indicar que está se expandindo do círculo. Você pode conseguir isso também, usando o retângulo como um elemento separado, em Colocar dentro sobre a mesquita e, em seguida, expandir a máscara para a esquerda. Mas achei isso um pouco tedioso, e isso é super simples de criar. Quanto ao ícone de pesquisa, não é realmente um ícone, mas um círculo e a linha, e esta linha é um que você pode ver 70 17 e um para a sagacidade para o campo. É 70 70 e este círculo é o mesmo, mas é um 23 23 para indicar este ícone de pesquisa agora na próxima tela, como você pode ver aqui com fez algumas mudanças importantes. Então, para a linha, como você pode ver, Circle está agora em zero opacidade neste próximo, nossa porta para a linha é girada. 45 graus é você pode ver que está bem aqui a 45 graus menos 45 e bem aqui, se eu clicar nele, está em zero. Mas seu tamanho também aumentou de 17 dedos Turley, como você pode ver aqui, e eu posiciono Toby no meio horizontalmente com este campo de busca para que ele gire bem aqui. Ele se move todo o caminho aqui para a esquerda, e ele vai expandir em tamanho bem de 17 advogados e este círculo vai desaparecer todos juntos. Agora, mais uma vez, eu só quero mencionar que você tem este exemplo em seu arquivo de efeitos X'd para que você possa verificar qualquer momento se algo não estiver claro durante este vídeo. Então, como eu disse, este campo vai gastar em busca de cobertura para qualquer coisa agora nesta próxima pesquisa de portos usando qualquer coisa ainda está em 100 opacidade, mas você pode baixá-lo para zero se você quiser, para tornar esse efeito ainda menor. Mas eu não fiz isso porque nós temos essa cor de fundo e é a mesma cor que para procurar qualquer texto. E assim ele se mistura bem com esse fundo, e essa sensação de busca tem a sombra também. Então, se eu clicar na entrada, você pode ver a sombra 05 10 mesma cor, tão preto completo e 16% 40 opacidade. Então, como você pode ver apenas uma sombra regular básica e vai se expandir e cobrir por aqui . O que temos a seguir são as mesquitas de texto. Então, se eu pular para dentro, vou esconder isso por um segundo. O que temos para a mesquita é basicamente da mesma maneira, como mostrei em vários vídeos. Ao longo deste curso, temos o texto. Temos a mesquita, então é basicamente uma forma sobre um texto. Você pode selecionar fora deles, clique direito mesquita com forma e, em seguida, simplesmente mover esta mesquita sobre para ocultar o texto no início. Estado fora de sua animação e finalmente temos as cartas. Mas vamos cobri-los. Vamos primeiro a cor da capa excessivamente assim, porque nossa placa é 800 por 800 esta cor de fundo excessivamente é exatamente as mesmas dimensões, então 800 por 800 e que esta opacidade do primeiro estado é reduzida em 0%. Então, quando o usuário clica, campo de pesquisa vai aumentar o 100 como você pode ver aqui mesmo enquanto tudo o resto está acontecendo. Agora, vamos para as cartas. Então, se eu pular aqui, as cartas são basicamente um único elemento. Então, se eu mostrei a vocês, é apenas retângulo regular com o raio de 20 canto Tamanho é 3 40 com 235 e eu tenho 40 pixels no meio. Cada um deles. Apenas um bom espaçamento. Então, 40 a partir daqui. Aqui, aqui. E você pode adicionar mais alguns aqui se você quiser incluir arrastar gesto deste também. Mas eu não queria incluí-lo no momento. Agora, finalmente, porque os usuários estão digitando em Paris, como você pode ver aqui, esta linha se move. Então, a partir daqui, como você revela o texto, ele se move para aqui e ele permanece lá neste final nosso porto, e porque eles estão digitando em Paris, vai cuspir todos os resultados de Paris, como você pode ver aqui em ordem cronológica. Então este foi há três minutos, seis minutos atrás, nove minutos atrás e 13 minutos atrás. Agora, se eu saltar para dentro e clicar nisso, você pode ver três minutos de sentido aberto 10 regular e um fora em Paris sentido aberto para qualquer regular. Eu apenas cliquei duas vezes dentro, selecionei esta parte fora do texto, clique na cor e adicionei a cor azul, que é mais uma vez três e. C seis f f. Então foi assim que eu criei isso. Quanto à imagem, em vez de dar-lhe um raio de canto de 20 ao redor, eu dei um raio de canto de 20 para o canto superior esquerdo e superior direito, enquanto canto inferior esquerdo e inferior direito estão em raio de canto zero. Então é por isso que temos essa linha reta atravessando. próximo passo foi apenas incluir uma imagem, e todas essas imagens são gratuitas. E a partir de um “splash dot com “, é basicamente isso. Isso é funcionários da House para criar este projeto. E para este estado, eu apenas quando eu fiz isso, eu fiz uma cópia dele. E neste original que eu criei deixe-me incluir você pagar cidade de volta. Eu só movi esses cartões para fora do caminho e movê-los para que você possa movê-los quiser. Eu fiz assim. Então eles estão vindo de cima para baixo. Você pode fazer o contrário como se eles estivessem vindo de baixo para cima. Ou você pode talvez incluir dois desses à esquerda para ir à esquerda, dois desses à direita para ir para a direita e nesta tela eles estão vindo ambos os lados e se encontram no meio neste ponto bem aqui. Mas o que é crucial é uma vez que você criou todos esses cartões em seu último porto para fazer uma cópia deles e duplicá-los e colá-los basicamente em todos os seus outros nossos quadros. Então, quando eu fiz isso, eu vou sobre o apace City 20 odiava o controle C e os baseei exatamente nos mesmos locais em todos esses outros portos. E é basicamente isso para o design. É super simples, super direto, então basicamente expanda este círculo Togo para retângulo. Mova esta linha para ir de 45 graus para 90 graus, aumente-a em altura de 17 para 30 e, em seguida, simplesmente quando os usuários começam a digitar, ele irá revelar o texto de Paris, e esta linha irá passar para o fim. Como você pode ver bem aqui. E todas estas cartas são vão de zero opacidade toe 100 base T e voltar para suas posições originais. Agora, quanto à prototipagem, é extremamente simples. Clique no protótipo, e para este 1º 1 Eu criei um gesto de toque aqui para este 1º 1 Então, se nós inspecionados, você pode vê-lo passo ou dedo do pé animar. Diminuindo em 0,6 segundos Agora para o 2º 1 porque quando eles tocam, queremos que algo aconteça. Então, neste caso, este campo de formulário vai expandir o dedo do pé aqui. Então é por isso que vamos usar o tempo. Dê um atraso de 0,6 segundos. Então ele vai peso do dedo do pé uma vez que você tocar 0,6 segundos e, em seguida, durante este tempo de um segundo vai facilitar dentro, fora do movimento e expandir todo o caminho até aqui. Então toda essa interação vai durar 1,6 segundos. Basicamente, Então 0.6 para a libertação ea duração em si é um segundo desculpe para o atraso 0.6. Então, neste próximo, o que eu fiz foi criado um tempo mais uma vez. Então, a partir deste ponto, quando ele revela todo o campo de busca neste ponto quando ele digita Paris e este indicador se move para a direita, nós vamos ter basicamente o mesmo atraso. Então, como você pode ver aqui, nós temos o atraso de 0.6 segundos duração um segundo tempo ou toe animar e está dentro porque nós queríamos facilitar na animação e está fora, fora da animação. E finalmente, neste, temos todas as cartas no lugar, então isso é basicamente você pode incluir. Talvez uma vez que este círculo se desvaneça para zero, como podem ver aqui quando eu passar por cima dele. Então ainda está aqui, mas está na cidade de pagamento zero. Se eu voltar ao design, você pode vê-lo bem ali, em vez de ele. Você pode, então, talvez, incluir um ícone de fechamento aqui. Assim que isso desaparecer, isso se move. Talvez nesse estado, enquanto os usuários começam a digitar, você pode ter esse tipo de ícone X, mas talvez eles possam clicar em algum lugar fora ou tocar em algum lugar fora. Isso depende de você e do seu projeto. Portanto, não é uma pré-visualização. Vou selecionar este dedo do pé de um clique, visualizá-lo, ampliá-lo um pouco, então quando eu clicar aqui, ele vai se expandir. Espere um pouco. Digite-o Paris, e então essas cartas estão indo do pé voando do topo. Então, se eu voltar mais uma vez, você pode ver toda a animação mais uma vez. Então pesos Paris e, em seguida, esses cartões droppin irritado você mais uma vez para verificar os efeitos ovos, profanar os efeitos ovos, dos quais você está indo para obter no discurso. Dê uma olhada nele. Se algo não estiver claro, inspecione alguns desses elementos e veja se você perdeu algo. Se você está confuso sobre algo, é por isso que eu estou fazendo esses ovos contaminar para cada uma dessas seções fora do curso para que você possa inspecionar todos esses elementos depois de assistir esses vídeos, ou melhor ainda, durante a visualização desses vídeos para que você possa se certificar de que obteve o efeito. Você quer desde o início. Então é isso para este vídeo, e eu vou te ver no próximo. 66. Popup.: Neste vídeo, vamos projetar alguns desses pop ups chatos que todos odeiam. Então imagine que você está na página do produto e você está tentando comprar algo. Mas talvez tenha mudado de ideia. Assim que você tentar sair do site, o up salta para fora, e quando você tenta fechá-lo, ele vai saltar de volta para baixo. Então vamos começar. Então aqui eu tenho para nossos portos em 800 por 800 você vai reconhecer alguns desses elementos porque eu reutilizá-los, especialmente a partir desta seção. Então temos esse show. Temos exatamente o mesmo texto que usamos neste exemplo para o sapato. E finalmente temos este fundo. Então é o mesmo fundo que usamos do show. Eu só o fiz maior. Então, neste próximo, temos um pop-up e deixe-me ir um detalhe de cada vez. Primeiro, temos que aparecer acima de tudo, então você luta. Zoom um pouco para fora. Você pode ver que é maior bem aqui, mas nós vamos chegar a ele em um segundo, e nós temos chamado excessivamente, que é basicamente esta cor. Mas a 0% Pacenti. Acabei de fazer uma forma retangular em 800 por 800 inferior fazer colado zero no lugar logo acima deste sapato. Então, nesta próxima tela, as mulheres fazem a transição para ele. Você vai ver que está a 90% de desconto na Base City, então abaixo dos sapatos, ele disse. Temos o texto, por isso aqui temos uma estrela. Nós temos, um, este texto abaixo e tudo isso se eu selecioná-lo daqui, é sentido aberto para qualquer negrito para o título e o nome do produto, e estes dois são senso aberto 20. E você já viu isso no vídeo anterior. E para a parte inferior, ouvimos o botão 3 50 com 79 finalmente, o preço está aberto desde a cor regular e branca. Então há basicamente isso para este primeiro 1 Agora para o segundo 1 deixe-me guiá-lo através. Então eu já falei sobre o pop-up na cor excessivamente, e se eu esconder a sobreposição de cores, você pode ver que temos exatamente os mesmos elementos no fundo como eles estão aqui no 1º 1, mas eles estão apenas escondidos usando este chamador ordenado Então, para o próprio pop up. Se eu abri-lo, você pode ver que temos fechado ícone aqui temos este texto que está aberto desde 20. Posição ousada apenas no meio deste pop-up, assim. Então apenas no meio horizontalmente temos e-mail, que é apenas uma entrada e retângulo regular, e nós usamos isso nos formulários. Exemplo. Então exatamente este mesmo e nós temos o seu e-mail, que está aberto, diz 20 mais uma vez D D D D para a cor ea entrada é 300 com 70 branco para a cor, oito para o raio do canto e finalmente borda off 77. E que botão temos 2 a 5 com 70. Assinar é branco Open Sense 20 e está posicionado no meio é que você pode ver aqui e, finalmente, temos distritos não vai gastar você, prometemos está aberto desde 18. Então eu fiz um pouco menor para caber bem aqui. E temos que estar no Alec só para apimentar um pouco as coisas. E está no DDT só para que não seja tão visível porque esse é o ponto desses pop-ups. Finalmente, eu criei o carro BG. Então, se eu esconder a imagem, você pode ver que está em 700 com para 16 e é canto branco oitenta fora 20 e apenas uma forma de retângulo regular. Nada de especial. E finalmente eu duplicei, e dentro dela eu posicionei esta imagem porque eu baixei a opacidade da imagem para 40% para que possamos ver nessas letras um pouco melhor. E é por isso que eu criei a duplicata do cartão PCI. Caso contrário, você pode simplesmente incluir sua imagem dentro desta camada original, e isso é basicamente para o pop-up. Agora, como você obter esse efeito já mostrou um pouco. Então, se eu ampliá-lo bem aqui e aumentou seu pastoso de volta para 100 e se eu clicar nele, você pode ver que tudo o que eu fiz foi aumentá-lo muito usando o turno velho e clique esquerdo em um dos cantos. Então algo assim, e você pode ampliá-lo o quanto quiser. Cabe a você, e tudo o que eu fiz foi posicioná-lo apenas um ou dois pixels desta borda inferior fora da nossa parte, então ele fica dentro de nossa porta, e eu simplesmente baixei Você colou para baixo para zero? E eu fiz isso depois de criá-lo bem aqui no 2º 1, então achei mais fácil de fazer do que o contrário. Então você vai primeiro criar o seu elemento e, em seguida, voltar para o primeiro nosso porto, e em seguida, apenas aumentar seu tamanho. Achei que era muito mais simples do que aumentar seu tamanho aqui e depois adicionei de volta aqui . Agora chega a hora de protótipos de tudo. Ela controla zero, para encaixar no lugar para que você possa ver melhor. Então, quando eu clico no protótipo, tudo o que eu fiz aqui foi criar algo como um toque. Normalmente, as pessoas tentarão mover suas bocas aqui para fechar a página da Web ou tentar rolar para cima em seu telefone celular, e esse pop-up irritante aparecerá. Mas eu criei um gatilho só para mostrar o que vai acontecer. E para este passo, o gatilho é simplesmente clicado aqui. Então, nada de especial. Então, se eu te mostrar que eu vou bater bem aqui. Você pisa ou dedo do pé animar, Easy out e 0.6 segundos. E neste 1º 1 vamos voltar ao design. A opacidade deve estar em zero. Então é isso para o 1º 1 E para o 2º 1 Eu cliquei neste ícone X, conectado Ele usou exatamente as mesmas configurações para que tenhamos exatamente o mesmo movimento indo deste dedo, 2º 1, bem como do 2º 1 de volta para o 3º 1 Então se eu clicar nesta pré-visualização de um hit, isso é o que vamos conseguir. Então imagine que você está tentando escapar desta página, e o pop-up está vindo em sua direção. Então, eles estão tentando seduzi-lo a deixar seu e-mail para que eles possam enviar este código de promessa, bem como futuros códigos promocionais, e então tentar obter você como um comprador. Quando você quiser fechá-lo, você vai fechá-lo e ele vai descer e subir em tamanho porque é assim que nós criamos agora. Você pode ir para o outro lado. Você pode criar o pop-up aqui para ser muito menor do que isso. Então, por exemplo, Toby, ainda menor do que este botão movê-lo para baixo parecer como um fez no nosso caso. E então ele vai gastar para este tamanho, e então nós bater X vai voltar e voltar para aquele tamanho. Então, se eu visualizá-lo mais uma vez, você pode ver a cor excessivamente saltando bem como este pop-up. Então, quando eu clicar nele para fechá-lo, você pode ver como isso se parece. Então é isso para este vídeo, e eu vou te ver no próximo. 67. Paralaxe: neste vídeo eu vou mostrar como você pode criar esse efeito de paralaxe. Então eu criei a simulação desta página de destino. Então, quando as pessoas pousaram e depois de um certo tempo isso vai cair, texto está indo dedo do pé aparecer do fundo e capaz de tudo entrará em perspectiva se eu mostrar mais uma vez. Aqui está como isso parece e tudo está entrando em perspectiva depois de um certo tempo . Então vamos começar. Então o que eu tenho aqui são duas nossas portas fora 1000 com 600. Claro, o site vai ser maior. Mas para os fins fora deste curso, eu queria manter os tamanhos fora do nosso porto um pouco semelhante com o resto fora dos nossos portos. Já te mostrei. Então é assim que parece. Mas para que entenda, primeiro tenho que mostrar o arquivo do Photoshop. Então, se eu pular na minha loja de quatro, é assim que o arquivo se parece. Então aqui no topo temos este texto que eu realmente vou mover logo abaixo deste primeiro plano. Blair, temos que fazer agora, que vai estar no topo e é só um logotipo. Eu só inventei algum logotipo realmente importa apenas para os propósitos fora deste vídeo e aqui temos a navegação. Se pressionei E, é sentido aberto. Regular 14 e direito à linha é que você pode ver aqui, e é apenas ilustrado. Este é um site agora, abaixo disso, temos algumas camadas, mas antes de eu mostrar essas camadas, deixe-me desligar rapidamente tudo para que eu possa mostrar a imagem original que eu vou realmente esconder. O texto é, bem, só por enquanto. Então esta é a imagem original. É de Splash, e é a imagem da região da Toscana na Itália e você perdoa Aled esta imagem de graça, e eu vou certificar-me de viver link para ele no arquivo PDF. Então o que eu fiz foi cortar algumas dessas camadas acima do dedo do pé, incluir um pouco fora de movimento e incluir um pouco de profundidade nesta imagem. Já foi filmado lindamente, e já mostra a profundidade entre estes arbustos na frente, este campo no meio e este fundo perfeitamente alinhado. Mas eu queria ter certeza de animar isso dentro do Adobe X'd, então eu tive que cortar todas essas partes. Então o que eu fiz primeiro foi esconder a imagem e depois mostrar-lhe. Cortei o primeiro plano. Então este é o primeiro plano, e você pode ser tão preciso quanto quiser ou não. Cabe a você, à sua imagem e ao seu projeto. Mas o que eu fiz, eu uso a ferramenta caneta e simplesmente clique em todos estes. E é um pouco confuso, mas para os propósitos deste vídeo, tudo bem, especialmente porque estamos usando a imagem original como fundo de qualquer maneira, então eu cortei o fundo. Então eu fiz o mesmo para o primeiro plano, incluindo os arbustos bem aqui. Então eu cortei os arbustos si, e finalmente, eu só acrescentei, Alguns vão mais simples para estes arbustos. Então eu fui aqui para filtrar azul e depois me desfoque da canela. E se eu trazê-lo de volta para aqui, você pode ver que está em 3,4 pixels, e isso é basicamente o meu treinador. Mais simples, e isso vai ser elemento de primeiro plano como ele desaparece. Este elemento de primeiro plano real vai aparecer, então o fundo vai ficar o mesmo. E, finalmente, o texto está indo toe pop up deste jogador em primeiro plano. Então esse é basicamente o meu arquivo do Photoshop. Fiz tudo isso na loja de fotos. Você pode fazer isso na verdade, em Adobe X'd, especialmente se você quiser usar o lápis e, em seguida, você algumas mesquitas. Mas porque eu já tenho para comprar, eu descobri que é muito mais fácil assim. O que eu fiz então é evento aqui para salvadores de arquivos salvou isso como um arquivo Photoshopped e, em seguida, eu fui em frente e abri em adobe eggs. Então aqui está no Adobe X'd e você pode ver se eu clicar aqui. Todas essas camadas estão aqui, então eu incluí todas dentro deste arquivo do Photoshop. Então eu podia ouvir o controle de batida C para copiar esta nossa porta indo para fechar isso por agora e então pulou dentro deste arquivo e apertou o controle V para colá-lo. Você não tem que fazer isso. Você pode fazer isso no arquivo original quando você abri-lo em outro B x d. Mas eu fiz mesmo assim. Então esta é a imagem que você viu dentro da loja quatro se eu pular aqui. Mas a coisa que está faltando nesta imagem original é o primeiro plano bem aqui. Como você pode ver, você não vê esses arbustos borrados. Isso é porque eu os movi para baixo, como você pode ver bem aqui e tudo entrou no lugar nesta segunda imagem. Mas nesta primeira imagem, arbustos borrados estão bem aqui e eu os ampliei muito. Você pode ver os direitos delimitadores aqui à esquerda e à direita. Você pode ver como eles são grandes também, se eu escondê-los, Eu também movi este primeiro plano muito para o topo. Você pode ver como ele se parece originalmente bem aqui. Eu só fui em frente e mudei muito para cima. E então neste próximo vai cair e o texto vai voltar para cima. Agora, uma coisa que você não vê bem aqui que você viu no arquivo original para loja são esses arbustos originais porque eu cortei e então criei esse efeito de borrão. Você não os vê aqui. Se eu escondê-las. É original para o grande Lor porque descobri que eram obsoletos. Basicamente, eles são um pouco demais nesta imagem. Então tudo o que eu fiz para a prototipagem porque basicamente, você acabou aqui. Você pode clicar no protótipo e tudo o que eu fiz. Você pode usar o tempo. Então, depois de um certo tempo quando o usuário pousa nesta página e eu recomendo que você faça isso em seu arquivo de projeto cliente depois de um certo tempo, auto animate vai acontecer e está dentro é o que você deve estar usando porque você precisa do facilidade do dedo do pé animação em. E então ele está fora para este resultado final na duração de toda a animação é de quatro segundos. Então, se eu clicar neste primeiro nosso quadro clique pré-visualização, você pode vê-lo esperar um pouco e, em seguida, tudo está entrando no lugar. Então, como você pode ver aqui, ele está se movendo deste para esta duração é de quatro segundos, e porque nós configurá-lo, dedo do pé está fora. Você pode ver como ele se parece. Então, mais uma vez, este elemento de primeiro plano é movido para o topo. Estes arbustos são muito ampliados, e eles vão se mover todo o caminho abaixo desta nossa prancha, como você pode ver bem aqui, então eles estão basicamente indo dedo do pé desaparecer. Na verdade, a partir desta página e finalmente este é o resultado. Quando você clica nele e o texto vai aparecer, você pode ser ainda mais dramático. Você pode, por exemplo, reduzir o tamanho do texto na primeira nossa porta, e então torná-lo original neste segundo são parte, modo que ele terá uma espécie de efeito de inclinação e irá de menor dedo do pé de texto, texto maior, e então seu efeito será uma marcha mais dramática. Você pode até incluir algumas nuvens, por exemplo. Então as nuvens desaparecerão daqui e revelarão o fundo aqui. Então, realmente não há limite. E tudo depende basicamente do seu projeto e da sua criatividade. Então apenas tenha isso em mente que você tem que ter todas as suas camadas nomeadas corretamente e ordenadas corretamente para que este efeito de paralaxe funcione corretamente e, claro, como com todos os outros efeitos que eu mostrei neste curso, você pode usá-los tanto para seus projetos de site quanto para seus projetos móveis. Então é isso para este vídeo, e eu vou te ver no próximo 68. Arquivo XD de efeitos: neste vídeo, eu queria correr rapidamente através do arquivo de efeitos X'd. Então é o mesmo para qualquer outra parte. Fora do curso. Você obtém este ex contaminar com tudo o que viu à vista fora dos vídeos para que você possa brincar com ele e inspecioná-lo no reboque. Muito mais detalhes. Então, se você não tem certeza sobre qualquer coisa desses vídeos, você pode clicar aqui na camada especial. Você pode conferir e você pode pular para dentro. Abra tudo isso e veja como tudo foi criado. Você pode mergulhar fundo. Você pode usar essas cores que você pode clicar através e ver o tamanho do texto que eu uso. Então, por exemplo, aqui é um sentido aberto pé irregular, e você pode realmente mergulhar fundo e ver tudo o que lhe interessa desta parte fora do curso. Você também pode visualizar todas essas animações, e você pode ver por si mesmo como todas elas se parecem, e você pode simplesmente copiar e colar todos esses elementos em seus próprios designs. Se assim o desejar, finalmente, pode usar esses projetos para seu uso pessoal ou comercial, e você tem minha permissão. Então, por exemplo, imagine que você deseja usar um pop-up para o site do seu cliente. Você pode usar esse pop-up exato se isso é algo que você quer e colá-lo em seu cliente no design, e então você pode adaptá-lo com essas cores. E esses fundos, por exemplo, para fazer parecer que esse toque pessoal foi adicionado a eles. Finalmente, se algo não estiver claro, você sempre pode verificar e saltar para dentro. Você pode assistir vídeos e enquanto está assistindo, você pode abrir esse arquivo e inspecionar tudo o que eu estava falando dentro desses vídeos, e você pode aprender muito melhor dessa maneira. Então é isso para este vídeo, e eu vou te ver no próximo. 69. Slider de valor: neste vídeo, vou mostrar-lhe como podemos criar este controle deslizante de valor. Então, quando eu clicar nesta seta, ele vai virar e todas essas outras opções vão se encaixar na posição. Então eu posso mudar esses valores e mover ao redor desses controles deslizantes e eu posso trazê-los de volta para suas posições originais e um e pronto. Posso bater bem aqui para trazê-lo de volta. Então, vamos começar. Então o que eu tenho aqui é o design acabado e todas essas placas estão em 800 por 800 fugas. Verifique rapidamente este, que está expandido, e eu vou chegar a este que entrou em colapso. Então, aqui está como eles se parecem. Então, se eu clicar aqui, você pode ver todas essas camadas dentro. Mas vamos dissecar apenas este, porque todos eles são exatamente iguais. Então aqui têm alarmes de mídia de toque e chamadas na parte inferior. Então, se você abrir o toque, aqui está como ele se parece. Então nós temos essa seta aqui, que é apenas um ícone estreito, e então nós temos esses ícones bem aqui. Agora este é ícone toque em seguida, temos texto ringtone que está aberto desde 25 neste caso, e 70 70 70 para a cor. E, finalmente, temos BG para o fundo agora para o controle deslizante já mostrou isso em um dos exemplos anteriores, temos o círculo que é sentir com cor branca, sem sombra de borda. Então, sombra preta padrão 16%. E neste caso, os valores são duas exposições para a posição Y e 10 para o desfoque. E foi assim que obtive esse efeito de borrão para o fundo abaixo que temos a mesquita. Então é a mesma mesquita como já mostrar-lhe em número fora de vídeos anteriores e você pode ver que eu mover este dedo ligeiramente aqui. E se eu quiser, posso simplesmente trazer de volta para aqui. Clique fora e, em seguida, ele não tem mesquita em tudo. E, obviamente, este círculo seguirá para a esquerda e para a direita, e você pode simplesmente segurar o turno e movê-lo para a posição. E finalmente, o que temos aqui está vazio, que é apenas esta camada cinza claro de fundo, e está no DDT. Cor agora para os tamanhos. Fundo é 700 com 1 28 e este controle deslizante vazio é 5 20 a 12 pés de altura ea mesquita e camada preenchida, obviamente muito como você movê-lo ao longo Círculo é 30 por Turney, e isso é basicamente para a configuração. Agora eu criei todos estes copiosos logo abaixo alterar o texto e ícones para corresponder com os valores em questão. E finalmente, esta flecha vai girar. Então, se você vê bem aqui, ele está apontando para cima e no primeiro exemplo está apontando para baixo. Agora, quanto à prototipagem, parte vai, o que você tem que fazer é, neste primeiro caso, eu acabei de movê-los. Então, todos os três eu os selecionei, colocá-los no lugar com este e mais baixo. Você paga 20 para a cidade neste? Eles vão gastar com 20 pixels entre si. Bem aqui. Esse é o espaçamento. E a opacidade é obviamente 100 porque eles vão se encaixar na posição seguinte. Acabei de criar mais três cópias para esses três controles deslizantes. Então eu movi este 1º 1, em seguida, mudei o 2º 1 e finalmente movi o agitado todo o caminho até 100% na posição. E finalmente, quando você protótipá-lo, você pode trazê-lo de volta à sua posição original. Então vai partir daqui, Tohir. E então você pode mover esses isqueiros para baixo em posição. Agora, para um protótipo em parte, se eu clicar em um protótipo, você pode ver o que eu fiz. Então eu cliquei nesta seta para ir para este segundo nossa porta que eu usei toque também animar e encaixar na posição. E 0,4 segundos foi a duração. E quando você clica na seta para voltar, eu mudei um pouco. Então eu usei exatamente as mesmas configurações aqui. Mas eu usei facilidade para fora e 0.2 segundos porque eu queria que ele para aliviar escritor em vez snap e para a duração, Toby um pouco mais curto. Então, em vez de zero ponto para ele 0.2 porque eu queria que ele voltasse um pouco mais rápido. Então, se eu clicar em pré-visualização, você pode ver isso. Então nós temos estes para trás e nós temos snap para que eles se encaixem em posição. Você também pode usar snap, mas ele vai logo acima da borda stop apenas um pouco, e você pode ver esse tipo de efeito fantasma É por isso que eu usei é fora e 0.2. Então você não vê esse efeito agora para esses controles deslizantes? O que eu fiz é, por exemplo, eu cliquei neste ponto e movê-lo toe este nosso porto e para ele usamos drag auto animates e está dentro porque eu queria facilitar e aliviar fora da animação. E basicamente eu fiz exatamente a mesma coisa para todos estes descansar fora dos pontos e nossas tábuas. Então, como podem ver, temos exatamente a mesma configuração para este e para este, e eu voltei para cada um deles para trazê-los de volta ao seu lugar original usando exatamente as mesmas configurações. Então, se eu clicar no primeiro 1 clique pré-visualização e eu vou ampliá-lo apenas um pouco. E eu incluí neste fundo de grau leve para o aeroporto em si porque eu queria que isso destacasse um pouco melhor porque você pode encontrar isso em seus dispositivos móveis, por exemplo, e geralmente têm fundos desfocados. Então esses fundos brancos fora dos itens em si vão saltar um pouco melhor contra esse fundo azul então quando você clicar sobre ele, ele vai se expandir. Você perdoa o colapso, se quiser. E a flecha vai virar, obviamente. E você pode mover esses controles deslizantes ao redor e as mesquitas seguirão porque eu acabei de estender as mesquitas todo o caminho até aqui e movido os círculos para trás para que você possa movê-los de volta para sua posição original. E você pode, é claro, brincar com ele. Você pode ir até o zero, mas eu só queria te mostrar como você pode criar assim também. Então é isso para este vídeo, e eu vou te ver no próximo. 70. Barra de Tab: neste vídeo, vamos criar este passo barb. Então, quando você toca nesses ícones, você pode ver que a cor está mudando do cinza escuro para o azul, bem como este seletor está se movendo, indicando o que ele está selecionado. Então vamos começar. Então isso é o que eu tenho aqui para nossos portos de 800 por 800. E se eu aproximar um pouco mais, vou mostrar-vos um, porque todos eles são exatamente iguais. Eu só criei este e depois fiz várias cópias. Então temos B G, que é apenas o fundo e sua luz. Ótimo como você pode ver fora desta cor, E C E C E C O raio do canto é 20 e as dimensões são 6 50 com 1 27 E como você pode ver, ele está lá apenas para servir como um fundo, e você pode imaginar que isso vai para o fundo do seu celular tela do dispositivo. Em seguida, temos o seletor, que é apenas mais uma vez, este retângulo na parte inferior e sua linha acima no centro fora desses ícones como ele se move ao longo. É com Sua 55 altura é para milho ou oitenta é um 20 cor é três C seis ff, e finalmente temos os ícones e os ícones são exatamente os mesmos. Então, se eu saltar para dentro, todos eles são exatamente os mesmos em termos fora da estrutura. Como podem ver, temos a mesquita. Então nós temos apenas uma camada básica bem aqui. Então apenas retângulo básico em cima do ícone. E temos casa eu concolor neste caso e temos ícone home, que é esta cor cinza escuro. Mas como podem ver, opacidade está em zero. Agora, para a cor, eu uso três C seis f f e para este eu uso 70 70 70 70 apenas para a cor normal. Então eu criei este ícone. Depois fiz uma duplicata. Ele incluiu a cor, então esta cor azul, em seguida, criou mesquita, selecionou a mesquita e esta cor azul clique direito e mesquita com forma. É por isso que eu tenho esta mesquita e eu incluí o ícone original e esta mesquita dentro da pasta usando o Controle G. E finalmente este seletor vai seguir onde quer que nós clicamos. Basicamente, é isso para a detonação. Como você pode ver, é muito simples. Todos esses outros ícones são exatamente os mesmos. É que a mesquita é movida no topo. Se eu ampliar, por exemplo, neste Jets que eu chamo isso de nossa mesquita e é simplesmente movido aqui para o topo. E quando você clica em algumas outras telas e selecionou este ícone, por exemplo, esta mesquita vai dedo do pé expandir para baixo para revelar a cor azul. E este ícone original dos Jets vai para o zero fora da cidade base para que tenhamos este ícone azul agradável apresentado. Agora, quando você terminar com ele, você pode simplesmente clicar na mesquita e simplesmente movê-lo para fora do caminho. E como você pode ver, ele vai selecionar de volta o ícone original e a cor original. Agora eu tenho quatro cópias no Total porque nós temos quatro ícones. E agora, se eu clicar no protótipo protótipo é exatamente o mesmo para cada um desses ícones em apenas vai mostrar um. Então, por exemplo, eu vou clicar aqui para ir para esta tela. Vou arrastar o meu cabo de volta. Como você pode ver já tem estes dois selecionados para ir para o terceiro e quarto nosso porto. Mas se eu selecionar este ícone, eu sei que ele vai para este nossos portos. Então, eu só vou arrastar minha alça azul e estas são as configurações estavam indo para usar o usuário está indo dedo do pé toque. A ação também será animada porque todos eles são exatamente iguais. Entre as nossas placas nomes de camada são a mesma configuração é a mesma Então tudo é o mesmo que vamos usar está dentro e uma curta duração fora de 0,3 segundos. Então, quando você clicar em pré-visualização, isso é o que vai acontecer. Então, por exemplo, quando você clicar deste para este um seletor vai mudar Esta mesquita vai subir revelando este ícone. Esta mesquita vai cair revelando ícone descolorido Esta cor original eu concerto este cinza escuro vai para zero em uma cidade paga e este vai voltar para 100 em Kobe City como você pode ver aqui. Então, clique aqui, clique em pré-visualização Então é isso que vai acontecer. Então, quando você clicar aqui vai mudar como você pode ver e você pode voltar entre esses dois, por exemplo, e você pode ver que está indo de cinza escuro para trás dedo azul, e está indo de azul para escuro. Ótimo quando você alternar para esses outros ícones. Então, como você pode ver, é realmente simples. Você está apenas movendo mesquitas para cima e para baixo e reduzindo ou pacenti desses ícones cinza escuro originais para zero quando você pousa sobre esse ícone em particular. E, claro, neste seletor, aqui embaixo na parte inferior vai seguir e ser posicionado no centro de cada um desses ícones. Então é isso para este vídeo, e eu vou te ver no próximo. 71. Menu lateral: neste vídeo, eu vou mostrar a vocês como você pode criar essa interação com o menu lateral. Então, quando você clicar no ícone, ele vai saltar para baixo e um menor em tamanho também. Introduza esta sombra de fundo e, em seguida, quando você clicar nela novamente, ela voltará à sua posição original. Então, vamos começar. Então isso é o que eu tenho aqui. Este é o design que criei há alguns meses, e este é, na verdade, um dos meus produtos de design que as pessoas podem realmente comprar. Mas estou te dando esse brinde para essa lição. Então aqui está como se um salto dentro nós temos a barra de status, que é a barra de status bem aqui no topo. E se eu escondê-lo, você pode ver o que tem dentro. Então, temos status, barra e plano de fundo se você quiser incluí-lo. Mas escolhi não o fazer. Então temos a tela em si, que é tudo isso aqui. E finalmente temos esse passado. Então eu escolhi este são pobres em primeiro lugar, Então, a nossa placa é para o iPhone, X r x s assim 375 esperar 8 12 e Se eu clicar aqui, você pode ver o que consiste fora. Então é apenas esta cor azul claro fora B C E zero f d. E é claro que você vai conseguir isso nos outros. Ovos contaminam. Você pode saltar para dentro e inspetores em muito mais detalhes. Mas eu estou apenas dando a você a essência, basicamente o que está localizado aqui. Então temos o logotipo e com alguns dos componentes para o logotipo, bem como este texto. E finalmente temos esses itens de menu, então todos eles são de sentido aberto. E toda essa visão de texto fora da tela está aberto Cessnas bem, assim você pode acompanhar facilmente. Você pode apenas instalar este fundo e ter basicamente tudo pronto. Agora todos esses itens de menu são 20 e eles são brancos e eles são deixados alinhados com este logotipo , e então tudo é selecionado e posição para o meio verticalmente como Então agora se eu pular dentro da tela, você pode ver Consiste juntos. Então temos perfil, Menu Icon e BG, que é este fundo com uma pequena sombra, e mais uma vez você pode inspecionar todos esses elementos em muito mais detalhes Se você quiser aceitar, temos o Pessoa. Então é o nome da imagem e a localização deles. Temos um botão de seguir e um botão de mensagem. Ambos são do mesmo tamanho. Mas isto é branco. Este é um tipo de azul e finalmente temos as torneiras. Então nós temos favoritos, seletor de galeria e sobre e nós temos o bar noturno que é este bar Never e você vai notar que ele está ligado ao meu design original. Mas se eu, hum eu vou ficar um pouco mais tarde para que você não tenha que se preocupar com isso em seus projetos para que você possa usá-lo imediatamente sem quaisquer preocupações. E, finalmente, temos estas imagens aqui em baixo. Então temos nove imagens. Todos deitam-se em um grande e apenas eu incluí algumas imagens e, finalmente, temos este fundo que é 375 com 8 12 que é o tamanho fora de nossos portos. E eu incluí isso para que eu possa baixá-lo em tamanho como você pode ver aqui. Então, como eu criei isso se eu pular para dentro, eu vou em frente e, uh, assim. Então é 10 10 20. Para que eu possa saber o que incluir. Agora. Eu vou em frente e deletá-lo. Eu vou escolher nesta tela inteira hit controle C Clique aqui, Hit Control V eo que eu realmente vou fazer é segurar shift, Ault e clique esquerdo na minha boca, e ele vai escala para baixo uniformemente, tanto horizontalmente e verticalmente. Tudo e redimensionamento responsivo está ativado. Então, quando você está tamanho este ovos está indo dedo do pé. Tente fazer o seu melhor para alinhar tudo como era originalmente. Então está indo para o dedo do pé. Faça algumas restrições, vai tentar manter tudo em ordem como era, e ele vai tentar dedo do pé uma linha tudo como bundas perto possível para esta tela original. Em seguida, só vou segurar a tecla Shift e movê-la em algum lugar por aqui, eu vou clicar aqui para posicioná-la eram grossas e vamos saltar à vista assim, e eu vou movê-la logo abaixo da barra de status porque era assim. Aqui está você pode ver que vai tela barra de status, itens de menu local porque estados de barra aqui, não importa o que, eu vou clicar aqui e eu vou saltar para dentro, abrir BG e clicar na sombra, digitando 10 e digite 10 aqui e finalmente digitando 20 aqui. Então, se escolhermos, algo está ficando um pouco estranho, como você pode ver, nós agora temos essa bela sombra que eu vou aumentar em Bay City bem aqui. E você pode ver como isso parece agora para a própria prototipagem. Eu só vou clicar aqui neste item de menu e eu vou escolher toque auto Animate, Fácil agora 0.6. E eu vou fazer o mesmo por este. Então eu estou indo para casa e controle clique dentro deste ícone de menu e eu vou apenas arrastar essas velas azuis de volta e nós vamos ter as mesmas configurações. Então toque ou dedo do pé animar está em fora n 0.6 segundos e, finalmente, mais uma vez antes de eu bater Pretty. Você pode encontrar isso em seus outros arquivos xz e você pode inspecioná-lo em muito mais detalhes. E você pode usar, é claro, todos esses elementos em seus projetos, tanto pessoais quanto comerciais. Então vamos visualizá-lo e você pode ver como isso se parece. Então ele salta para baixo em disposição. Cobre tudo e a torneira. Este temperamento permanece o mesmo aqui no topo, para que não mude o End. Neste momento, temos esta bela sombra cobrindo bem este fundo. Então, ele se destaca contra ele. E quando eu clicar aqui, ele voltará à sua posição original. Então é isso para este vídeo, e eu vou te ver no próximo. 72. Ampla imagem: neste vídeo, vamos projetar essa interação simples. Então aqui tem a galeria de imagens, e quando eu clicar na imagem para ampliá-la, você pode ver que ela se encaixa na posição. Este leve e radiante aparece assim como este ícone de fechamento. Então, quando eu aperto o ícone de roupas, você pode ver que ele volta para sua posição original, radiante e as roupas desaparecem e você pode ver que ele contém seus cantos arredondados. Mas quando eu clico nele, esses cantos desaparecem e ele volta para a reta. Quando eles clicam para fechá-lo, você pode ver que ele vai para cantos arredondados mais uma vez. Então vamos começar. Tudo bem, então isso foi super simples de criar e configurar. Então, se eu aproximar um pouco mais, você pode ver o que temos aqui. Então temos o texto que as imagens superiores, que é aberto Sands Bold 70 70 70 Para a cor. Nós temos pessoas, que é senso aberto, regulares e 18, então apenas um pouco menor que este aqui. E é no DDT, e é a mesma história para a natureza aqui em baixo. Para as imagens são 1 37 com 1 98 20 pixels. Espaço como este 20 acende este 20 como este e assim, bem como com estes elementos. Então são 20 pixels daqui para texto e de texto para imagem, bem como da imagem para baixo e basicamente 20 pixels em todos os sites. Como eu criei estes, eu apenas uso uma ferramenta de retângulo. E se eu clicar em alguns, por exemplo, este, você pode ver que eu mencionei o que é novamente. Então, 1 57 com 1 98 cantos arredondados são 20. Eles são preenchidos com branco porque aqueles eram os retângulos ea cor original era branco. Acabei de remover a fronteira, e é basicamente isso agora para este. Como você pode ver, há um ligeiro Grady int aqui, bem como divulgar ícone. Close Icon é basicamente auto-explicativo, mas para o int Grady, você pode ver como isso se parece. Então eu escolhi. Em vez de cor sólida, eu escolhi ingrediente linear, e por padrão ele dá-lhe este ingrediente. Então, se eu mudar de volta para a cor sólida, escolher preto, por exemplo, voltar para o ingrediente magra. Você pode clicar sobre estes pontos e você pode movê-los ao redor e você pode baixar a cidade apace bem aqui. Então, por exemplo, se eu movê-lo dedo do pé branco como era originalmente, ter um menor a opacidade dele. Zero Eu vou então mudar essas posições para que a cor mais escura e vai para a cor mais clara superior vai para a parte inferior e você pode fazê-lo, por exemplo , assim, ou ele pode movê-lo assim. E então você pode brincar com as cores de onde o Grady int está vindo, por exemplo, e você pode clicar nesta cor mais escura. Você pode reduzir sua cidade paga, e você pode realmente brincar com ele para obter o olhar desejado que você estava indo para. E você pode, claro, mover esta esquerda para a direita se você quiser que o int ganancioso venha desses ângulos mas porque eu não quero Oh, eu queria vir direto da posição de cima para fora. É algo assim e talvez diminuir sua cidade paga dele apenas ligeira agora para a imagem em si. O que eu fiz, eu vou mostrar-lhe aqui para que ele possa controlar DE para duplicá-lo. E o que eu fiz basicamente um apenas ampliá-lo assim. E como a imagem está contida dentro dessa mesquita básica, quando você arrasta e solta a imagem dentro da forma que você conduz, clique e segure, mude e mova a imagem. Então, por exemplo, aqui mesmo, se você quiser que esse seja o seu ponto focal e você pode, é claro, movê-lo como quiser e o que finalmente foi. Acabei de saltar à vista e trouxe o raio da esquina para zero. Foi assim que consegui esta imagem. Então, para o protótipo, é extremamente simples mais uma vez. Então uma coisa que eu tenho que mencionar é que nós temos o ícone de Grady int e fechar bem aqui, mas Kobe City fora ambos fora deles, é Zero, como você pode ver aqui e bem aqui está em 100. Icahn está no topo do int ganancioso, obviamente, porque caso contrário você não vai vê-lo. Bem, agora para um protótipo, é extremamente simples. Apenas dois estados, para que você possa clicar sobre este arrastou a alça azul e estamos usando toque automático, animar, fácil e para fora e 0.4 segundos agora para voltar. Você pode clicar neste ícone de fechamento e usar exatamente as mesmas configurações. Então, em um calor para pré-visualizar, é assim que parece. Assim como você pode procurar radiante e roupas estão desaparecendo. E enquanto esta imagem leva algum tempo para vir aqui, Grady Int e Close Icon aparecerão nesse tempo. Como você pode ver aqui e quando você clica para trás, é apenas uma transição suave. Agora você pode fazer isso de várias maneiras. Você pode, por exemplo, mostrar Vamos fazer isso também. Então, se você voltar ao design, você pode clicar duas vezes, você pode aumentar o tamanho. Então, por exemplo, por aqui, vamos ver. E quando entrarmos em privado e agora você pode ver como isso se parece. Então ele amplia e amplia para fora, salta para o lugar se isso é algo que você gostaria de explorar. Mas eu acho que isso funciona muito bem. Então, quando a pré-visualização de calor, ele só aumenta nesta imagem para que possamos vê-lo um pouco melhor e ele salta para o lugar. Então é isso para este vídeo, e eu vou te ver no próximo 73. Outros arquivos XD: neste vídeo, eu vou mostrar a vocês os outros arquivos X'd. Então, basicamente, é o mesmo arquivo que com todas as outras palestras anteriores e você viu nas seções anteriores fora do discurso e estes ovos contaminados estão aqui para ajudá-lo ao longo e dedo do pé, talvez trazê-lo um pouco mais perto de os detalhes. Se você perdeu algo durante o vídeo para que você possa saltar para dentro, você pode realmente dissecá-lo. Entre em detalhes e você pode, é claro, usar todos esses elementos para seu uso pessoal e comercial. Você também pode copiar e colar essas imagens se optar por usá-las em seus próprios projetos pessoais . E, finalmente, você pode usar essas cores e ícones, imagens e botões e assim por diante em seus projetos pessoais. Agora, finalmente, se eu pular aqui para o painel de ativos, você pode ver todas essas cores que foram selecionadas, e essas são peças e desenhos, e você pode usar essas cores novamente, basta clicar com o botão direito do mouse copiar esta cor e baseá-la em seu próprio design. Se você assim escolher, você também pode dissecar e os projetos um pouco mais para que você possa saltar bem aqui. Você pode abrir as telas e você pode pular. Além disso, veja o que eles mencionaram. Veja as cores, os efeitos e você pode, se você gosta deste efeito, por exemplo, desta sombra, você pode simplesmente clicar com o botão direito sobre esta cópia e colá-lo em seu próprio design, se você quiser. Finalmente, você pode visualizar todas essas animações para que você possa simplesmente clicar sobre isso. Primeiro nosso porto fora, qualquer que seja a parte que você quiser. Você pode clicar em pré-visualização e condenar, inspecionar e ver o que eu fiz. E você também pode saltar para o modo de prototipagem e ampliar dentro e clicar entre essas telas e ver quais interações eu usei para que se você perdeu algo realmente como essa interação, você pode usar exatamente o mesmo em seu projetos. Então isso é basicamente para esta seção, e isso é basicamente para essas seções de animações. Na próxima seção do curso, vamos saltar e projetar um celular do zero, e vamos implementar tudo o que aprendemos no curso até agora na criação e prototipagem de nosso aplicativo móvel. Vamos projetar um aplicativo com várias telas. Vamos criar interações personalizadas entre elementos e vamos colocar no reboque tudo o que você aprendeu até agora neste curso. E vamos passar de desenhos estáticos , desenhos lindamente animados que vamos apresentar aos nossos clientes e obter feedback para eles. Então, vejo-te no próximo vídeo. 74. Resumo sobre design: Neste vídeo, vou compartilhar com vocês o resumo de design que recebi do cliente. E eu vou dar-lhe este modelo e você pode usá-lo para seus próprios projetos, se você quiser. Você só tem que mudar este texto de acordo com seus próprios clientes e as informações que você obteve deles e as informações que você vai obter de seus clientes, você pode encontrar dentro deste resumo de design. Então deixe-me aproximar um pouco mais. O que temos aqui é o aplicativo móvel do obturador, e o cliente está quebrando aplicativo móvel. E o prazo é 12 de dezembro. Agora, aqui temos o perfil da empresa. Portanto, há uma pequena empresa de Belgrado, Sérvia, e seu objetivo é criar um aplicativo móvel para que os usuários compartilhem imagens que tiraram com seu telefone ou câmeras profissionais. Em seguida, para compartilhar essas imagens com a comunidade fora de fotógrafos amadores e profissionais. Então eles podem obter algumas dicas e truques sobre como melhorar suas imagens e se tornar melhores fotógrafos lá uma pequena equipe de cinco pessoas e eles acabaram de receber a primeira rodada de financiamento antes de prosseguir para a próxima rodada, onde eles tentará garantir fundos para o desenvolvimento do site e expandir sua equipe ainda mais. Eles ganharam o cargo e todas as coisas estão localizadas naquele escritório em Belgrado, Sérvia. Agora o que isso nos diz é tudo o que você precisa saber sobre a própria empresa, sobre seu objetivo principal e sobre o que você precisa criar para eles, que é um aplicativo móvel para os fotógrafos amadores e profissionais, onde eles podem compartilhar suas imagens com a comunidade abaixo que temos o projeto Oreo. Então esse é o projeto em si mesmo. Então eles precisam de um aplicativo móvel criado e se eles protegerem o site de financiamento também, que significa que vamos começar com o aplicativo móvel primeiro e, em seguida, se o financiamento estiver seguro, eles vão então nos pedir para criar um site também. Eles estão tentando criar uma comunidade com fotógrafos amadores e profissionais que vão compartilhar sua paixão com a comunidade enquanto recebem dicas e truques de fotógrafos mais experientes . Então essa é a coisa principal. Eles estão tentando construir uma comunidade a partir de pessoas que estão apenas interessadas em fotografia em si, então eles não estão tentando obter pessoas que querem compartilhar suas refeições e seus vídeos de gatos e alguém que eles só querem fotógrafos, amadores e profissionais para compartilhar seu amor pela fotografia. Dentro desta comunidade, objetivo da APP mais tarde seria pagar a adesão pro e ficar duro por clientes é um fotógrafo para as cerimônias de casamento, interiores de belas artes e cetera. Para os primeiros 12 meses. Eles só querem atrair pessoas específicas apaixonadas por fotografia, toe seu aplicativo antes de começar a empurrar para essas mudanças, uma vez que eles têm usuários suficientes na plataforma. Então, basicamente, em termos gerais, este vai ser um aplicativo gratuito projetado, então atrai fotógrafos para ele. É de graça. Então, qualquer pessoa ficar contra começou e quando eles começaram a usá-lo, quando eu começar a amar na comunidade 20 Creator, então eles vão implementar essas mudanças e inclui a opção de se tornar membro profissional fora deste aplicativo. E então você vai desbloquear esses recursos como obter, por exemplo, descontos em seu equipamento, recebendo algumas recomendações sobre muito. Você pode comprar esse equipamento e também, o principal importante aqui é encontrar um emprego para que as pessoas sejam capazes de contratá-lo através deste aplicativo, e você vai ser capaz de trabalhar como fotógrafo. Em seguida, temos metas e objetivos. Então eles querem atrair tantas pessoas dedicadas. É possível para o aplicativo e dedicado é a palavra-chave aqui. Mantenha-os comprometidos e assinados. Mais pessoas nos próximos 12 meses receberão 10.000 usuários no primeiro ano e expandirão para 20.000 no segundo ano antes de serem todas essas mudanças. Então isso é basicamente manter. Eles só querem tanto usuários como muitos usuários quanto possível para este aplicativo. E então, quando eles estão todos fora, as mudanças para tentar manter esses usuários existentes, bem como trazer mais e mais usuários para o APP. O principal objetivo é criar um aplicativo móvel que pareça simples e claro e para ser fácil no olho antes que eles façam essas grandes mudanças aqui, também, e, em seguida, introduzir novos elementos de design como tabelas de preços oferecem cotações de emprego, porque todos esses novos elementos de design vão mudar drasticamente o design da APP. Então é por isso que eles querem a versão. Quer ser extremamente simples, extremamente fácil de usar, e um nativo para basicamente se parecer com Instagram, Pinterest, Facebook, todos eles combinados. Talvez no Twitter. E basta rolar para fora o mais rápido possível para obter esses novos usuários e atraí-los para o aplicativo abaixo que temos público-alvo Então pessoas de meia-idade procurando um lugar dedicado para compartilhar a paixão pela conversa pela fotografia. Idade entre 24 65 Gênero suave é 30% feminino, 70% masculino País do Presidente Sérvia Isso é por enquanto. Cidade de residência. Belgrado Novamente por agora, no início, local de trabalho Pessoas que têm um trabalho de dia, mas à procura de um trabalho paralelo também. Hábitos de consumo de mídia 60% no Instagram. Então eles realmente gostam de sua fotografia 30% de novo para. Talvez eles estejam procurando algumas dicas e truques sobre como talvez investir um pouco mais em seus equipamentos, como melhorar seus fotógrafos e assim por diante. E finalmente, 10% do Facebook. Talvez eles estejam visitando alguns grupos do Facebook e recebendo algumas dicas e truques. Eles são finalmente nós temos hábitos diários, indivíduos tão ocupados com estilo de vida criativo orientado, o que significa que eles estão trabalhando em seu trabalho diário. Como você pode ver aqui, mas eles têm que como um todo, estar fora da fotografia. Ou talvez eles são fotógrafos profissionais, mas olhando para tipo de deixar algum vapor fora, usando um aplicativo móvel dedicado para fotógrafos abaixo que temos requisitos de design, então eles precisam de uma íris Mobile. App projetado versão Android virá mais tarde. Eles acreditam que os usuários Iris vão pagar mais do que os usuários do Android, especialmente nesta comunidade onde as pessoas estão gastando muito dinheiro em fotografia aqui. Dimensões ácidas. Portanto, as resoluções são o iPhone X no início. Outras versões a serem criadas posteriormente, se necessário. Isso significa que eles vão testar e ver quantos usuários estão baixando seu aplicativo. Em seguida, eles estão indo para lançar uma pequena pesquisa e perguntou-lhes, por exemplo, Você conhece alguém que tem em um iPhone maior ou um iPhone menor, todos versão mais antiga ou uma versão mais recente, e então eles serão capazes de Contar? Certo, então temos esse usuário. Talvez possamos começar a lançar um iPhone maior ou um iPhone menor, algo assim antes que eles comecem a mudar para a versão Android, e então eles vão fazer o mesmo novamente. Então, por exemplo, quando fizeram tudo em cima, não é? Alguns? Alguns usuários são os usuários preocupados ou algo assim. E então eles vão ser capazes de adaptar isso para aqueles usuários do Pacífico abaixo que temos formatos de arquivo. Então, o Adobe X'd é o arquivo principal do projeto, e os ativos estarão em SPG e PNG, e eu mostraria como você pode exportar vídeos, bem como exigir a paleta Qala. Vamos criar um para eles por enquanto. E, em seguida, no segundo ano, nós vamos mudar completamente as imagens para ser incluído. Então imagens gratuitas antes que os usuários começam a fazer upload de seu próprio conteúdo quando vamos usar imagens gratuitas para projetar este EP e, finalmente, associar documentos de cópia, David entregar cópia final antes de lançar o APP basicamente e colocar ou perder Toby, incluindo em vez disso. Isso significa que vamos usar um monte de texto ipsum nesses espaços reservados. Finalmente, temos orçamento e cronograma, então o orçamento é dividido em partes de árvores. O mesmo é o projeto em si. Então temos a íris, depois temos o site e finalmente temos a versão Android. Então 2400 para a exploração, planejamento, planejamento, Iose design e Preparação 3600 para o design completo do site e criação para Responsive porque ele terá um monte de páginas fora. E é por isso que precisamos ter o máximo de sua atenção possível e criar um site responsivo desde o início e, finalmente, 2400 para a versão Android, porque ele vai basicamente olhar exatamente o mesmo que Iris, mas adaptado para Android 50% na frente, 50% após a entrega de ativos. Então isso significa que quando terminarmos o projeto e estivermos prontos para entregar os arquivos finais ao cliente, eles irão. Eles nos pagam esses 50%. Então, após o planejamento de entrega de ácido, levará cinco dias. Pesquisa. Três dias de pesquisa, três dias de design, quatro dias de apresentação. A revisão de hoje de cinco dias e o total de entrega é em 22 dias. Então o que toda essa informação significa é que sabemos para quem é o cliente. A partir de todas essas informações que reunimos, sabemos o quão grande é o que eles precisam de seu público-alvo. Quem exatamente eles estão tentando segmentar, quem, exatamente, eles estão tentando usar seu aplicativo basicamente o que eles vão expandir, como foi e onde. Então, sabemos todos esses detalhes para que possamos começar a projetar imediatamente. E na próxima série de vídeos, eu vou mostrar a vocês ah, processo de design que eu adotei basicamente quase 10 anos atrás e eu estou usando para todos os meus projetos e vamos chegar a ele no próximo vídeo. 75. Planejamento de projetos: O que eu gosto de fazer para cada projeto é planejamento de projetos. Isso significa que eu posso planejar todas as telas basicamente que eu preciso no início, e, em seguida, obviamente, todas as telas podem ramificar para diferentes telas mais tarde. Mas estes são apenas um meio ponto de partida para mim para que eu possa entender quais verdes não precisam projetar e quanto tempo fazer qualquer para dedicar toe este aplicativo basicamente, antes que eu possa obter toe ah, maior escopo do projeto e saltar dentro de todos dessas telas e elementos diferentes e depois dissecá-los um pouco mais e, em seguida, entrar em muito mais detalhes porque todos esses projetos podem levar meses para criar, especialmente quando você começar. Você acha que tem, por exemplo, 10 telas diferentes, mas indianas. Você acaba com 100, então é muito importante. Pegue este projeto. planejamento começou antes de enviar o resumo de design para o cliente antes de enviar seus preços para o cliente, porque você pode realmente se cortar curto nesta fase antes mesmo de saber o quão grande o projeto realmente é. Então, é realmente importante chegar a um pedaço de papel e ovos neste caso, e apenas anote algumas das telas principais que você vai projetar e depois ir a partir daí. Então o que temos para começar é a tela de carregamento. Então foi quando eles abriram o aplicativo, e obviamente eles vão pular dentro do login para cima e para baixo com seu Facebook ou com seu e-mail. Mas não vamos para a fronteira com isso. No momento temos tela inicial, que é a tela principal, e isso é basicamente onde seus pés estão. E ele vai se parecer muito com o Instagram porque é isso que o cliente quer que criemos. Em seguida, temos a imagem aberta de casa, então eles vão clicar na imagem e abri-la aqui mesmo. Temos adicionar nova imagem porque será uma barra de abas na parte inferior dessas telas, e eles vão ser capazes de adicionar novas imagens tanto da galeria. Como você pode ver aqui e da câmera. Vamos projetar galeria porque não vamos nos preocupar com a câmera porque é apenas um padrão básico da câmera IOS, então ele vai abrir isso. Mas nós vamos apenas projetar rapidamente esta imagem de edição de galeria. Algumas telas, Então vamos projetar alguns controles deslizantes. Então, para Indy, por exemplo, brilho, contraste, talvez nitidez e assim por diante. Então vamos projetar uma tela de corte, então eles vão ser capazes de cortar esta imagem. E, finalmente, temos a descrição da imagem e publicado. Então, depois que eles clicaram em Nova Imagem, adicionado da Galeria, editou a imagem completamente. Em seguida, antes de publicar, eles vão adicionar imagem, descrição e tags e, em seguida, clicar em publicar. Teremos gostos porque eles vão ser capazes de ver os gostos que receberam perfil. Então seu perfil em suas imagens no perfil e eles vão ser capazes de incluir, por exemplo, ícones de mídia social lá. São apenas uma descrição básica. Então, vamos ter o painel e à vista do painel. Eles vão ser capazes de ver o número total off gosta, por exemplo, por exemplo, o Quando nosso dia em suas imagens mais gostou de uma vez vezes do dia em que dia, por exemplo, e assim por diante. E finalmente nós vamos ter o menu do site, que está apenas indo dedo do pé, basicamente seduzir todas essas telas diferentes juntos e ele vai aparecer do decider do topo. Você vai ver isso no próprio processo de design. Então há basicamente isso para o planejamento do projeto. Como eu disse, este é apenas um começo difícil. Assim, a partir desta tela inicial, por exemplo, você pode projetar cinco telas diferentes. Basicamente, a partir desta imagem aberta, você pode até ir um pouco mais longe e projetar um monte de telas diferentes. Mas estes são apenas o seu ponto de partida para que você possa pensar sobre o que é importante para projetar nesta primeira fase. 76. Esboço: Neste vídeo, eu vou mostrar como você pode esboçar nossos anos no dedo do pé apenas um pedaço de papel simples. Mas antes de o fazer, queria mostrar-te isto. Esta vai ser a nossa estrutura de projeto. Então, à medida que avançamos com essas lições e esses vídeos, vamos adicionar mais e mais, e então vamos seguir em frente para preencher a maioria desse espaço. Mas antes disso, como você viu nos vídeos anteriores, temos o resumo de design. Temos o planejamento do projeto que já cobrimos, e agora temos esses esboços. Agora, estes são apenas os esboços e que eu desenhei no dedo do pé um pedaço simples de papel branco. Eu escaneei o principal usando meu scanner. Mas se você não tem um scanner, você pode simplesmente tirar uma foto com seu telefone e apenas incluído dentro de seu ex profanar. E eles são realmente úteis porque você pode simplesmente desenhar algumas de suas idéias no papel antes de disparar. X'd basicamente, e você pode apenas bloquear algumas das peças brancas e a maioria dos elementos que você deseja incluir. Então, talvez você tenha algumas idéias que você se inspira nesses sites de design, por exemplo, drible ou ser latas ou algo assim, e então você só quer dedo do pé. Coloque essas ideias no papel antes de começar a desenhar. Então eu realmente recomendo isso porque você pode simplesmente cuspir todas as suas idéias no papel, ver o que funciona, o que não funciona. E então você pode começar a criar no Adobe X'd. Então, como você pode ver aqui, eu tenho 12 telas, como eu já mostro no vídeo anterior com o planejamento do projeto. Mas agora o que temos aqui é uma tela de carregamento, que será apenas o logotipo deles, e vamos incluir um pouco de animação nessa tela de carregamento. Vamos brincar com alguns fundos e assim por diante antes das transições para a tela inicial . Aqui, vamos ter a barra superior com a seta para trás e o menu de volta. Arrow obviamente não vai estar aqui, mas eu apenas incluí em todos os lugares porque é mais fácil para mim do que desenhar e seguir adiante . Isto porque isto é destinado a ser como um processo rápido e não um processo demorado. Então você só quer colocar tantas idéias quanto quiser no jornal. Então, por exemplo, em um papel você tem 10 telas iniciais diferentes e apenas faz uma exploração básica de design. Veja o que funciona, o que não funciona e, em seguida, mova ao longo de todas essas telas usando as mesmas técnicas. Então aqui vão ter imagem do usuário ou são amargos. Vou ter o nome deles, a localização fora da imagem ou os selos de tempo. Então, por exemplo, Dispose postado 23 minutos atrás ou algo assim. Vamos ter a imagem em si. Nós vamos ter alguns ícones básicos aqui, e então nós vamos ter a localização ou o carimbo de tempo. Então eu só vou decidir que nós vamos ter o texto, que é a descrição para esta imagem e, finalmente, comentários abaixo disso. Nós vamos ter as barras superiores que você vê em muitas dessas telas, e eles vão conter os ícones principais e os outros itens de menu estarão aqui dentro deste menu. Eu chamo que quando você tocar nele, ele vai exibir este menu lateral com X para fechar, e você pode tocar em todos os outros itens para entrar nessas outras telas. Aqui temos a imagem aberta, então quando você clica nesta imagem, ela vai abri-la para ser um pouco maior, e você vai explorar os comentários lá. Basicamente. Então nós vamos determinar isso com o cliente um pouco mais tarde se eles querem mostrar os comentários imediatamente aqui nesta tela ou eles devem estar ouvindo e, em seguida, ter outra tela dedicada, como o Instagram faz. Então, quando você clicar nos comentários, ele vai abrir a tela, e então você pode ler todos os comentários que temos na New Image. Então, um desses ícones na parte inferior na parte superior vai ter este ícone adicionar nova imagem . Então, quando você tocar nele, ele vai abrir esse grito. Ele vai conter ilustração, e eu sou bom show onde você pode obter as ilustrações gratuitas para a tela e nós vamos ter galeria e câmera. Assim, anos pode haver uma dívida capaz tocar um para galeria para abrir a imagem de sua galeria ou abrir a câmera imediatamente do que encaixar imagem e, em seguida, incluído no reboque. Este aplicativo abaixo que temos a galeria, então quando eles clicam aqui, eles vão para a galeria e selecionar a imagem que eles querem. A imagem será carregada nesta tela de imagem adicionada, e eles vão ser capazes de ter todos esses controles deslizantes. Talvez nós vamos ter um ícone de salvar bem aqui e ter talvez um ícone de tela dividida ou algo assim para nos mostrar o antes e depois desta imagem que ele completou. E nós vamos ter a seta para trás para que eles vão ser capazes de saltar de volta para a galeria e incluir mais algumas imagens lá. Abaixo disso, nós íamos ter a colheita. Então vamos seguir em frente. Basicamente, quando você pode salvá-lo irá mostrar-lhe a colheita. Se você quiser cortar, você pode. Se não, você pode apenas ficar seguro e, em seguida, ir para esta descrição barra publicada tela. Muito. Nós vamos ser capazes de ver a imagem dela Toe adicionou o texto. Você quer hashtags e assim por diante. E para adicionar uma localização fora da imagem se a localização estiver incluída e a maioria desativada, esses novos formulários, especialmente iPhones, têm esse recurso para que você possa usar esse local ou você pode pesquisar o local dentro do APP, e você pode adicionar um local diferente se quiser. E então nós temos o botão, que é basicamente um botão publicado, e quando você deve publicar, ele irá levá-lo de volta para a tela inicial. E ele irá substituir esta primeira imagem com a sua imagem de imagem que você acabou de publicar abaixo que nós temos Dashboard, que estavam indo toe acesso a partir do menu lateral e painel vai mostrar gráficos diferentes . E ele vai mostrar informações diferentes onde, por exemplo, por exemplo, você pode acessar os horários mais curtidos de um dia para postar. Então, você sabe, foi postar suas imagens a seguir e esse tipo de informação. Assim, por exemplo, nossos usuários, mulheres ou homens que são principalmente como em suas fotos quais fotos são retrato mais popular fora da paisagem ou algo assim. Vamos explorar isso na parte de design fora do discurso. Então nós vamos ter, como para que as pessoas possam acessar curtidas a partir desta barra de passos, e eles vão apenas ver basicamente o usuário de imagem que gostou dessa imagem e as vezes que eles vão ser capazes de dizer Quando essa imagem foi curtida? Vamos ter um perfil, que é, claro, claro, acesso a partir desta barra de degraus. Então nós vamos ter a imagem do usuário, sua descrição de nome, talvez ícones de mídia social bem aqui, bem como suas imagens que eles publicaram neste aplicativo. Finalmente, temos menu lateral, então todos os itens que não estão dentro fora da parada nossa ou a barra de toque vão ser localizados neste menu de lado, e eles vão ser capazes de acessar todos esses itens usando este ícone. Este ícone X ou fechar vai aparecer e então eles podem fechá-lo e esta tela vai desaparecer. E vamos usar algumas técnicas de sobreposição quando incluirmos a tela no topo. Todas essas outras telas, que têm essa opção para nós para que possamos clicar no ícone do menu lateral e este menu lateral vai aparecer. Então, esses são basicamente são apenas quadros básicos de arame de partida. Obviamente, eles vão mudar, especialmente na segunda rodada deste projeto, quando começarmos e incluir alguns novos recursos no segundo ano a partir de agora. Mas para começar há apenas um bom ponto de partida e podemos começar com nossos arames , e é isso que vamos fazer. Na próxima série de vídeos. Vamos girar os esboços em armações de cabos de reboque, usando a descrição do resumo de design que o cliente nos deu. Então, o iPhone X no nosso caso para o ponto de partida. E nós vamos transformar esses esboços em quadros de arame de pleno direito e, em seguida, mais queremos incluir imagens incluem cores diferentes e sombras para criar um design acabado antes passar para o protótipo e animar todas essas telas para cima e antes de enviá-los de volta para o cliente. Então é isso para este vídeo, e eu vou te ver no próximo. 77. Como criar wireframes 1: neste vídeo, vamos começar a nos preparar para os quadros de arame, e como você pode ver aqui, eu adicionei rapidamente. Ah, guia de estilo e eu incluímos alguns ícones que vamos usar neste projeto. E eu chamo esse guia de estilo porque vamos incluir cores, formulários, uma ilustração que vamos usar um pouco mais tarde. E nós vamos estabelecer tudo aqui para ser facilmente acessível para seus desenvolvedores e para o cliente se eles escolherem escolher e copiar e colar alguns desses ícones em outro lugar, se eles quiserem. Então, para recapitular rapidamente o que fizemos até agora, temos o resumo de design no qual temos todas as informações relevantes que precisamos incluir dentro do nosso design. Então temos o planejamento do projeto, que são apenas as telas principais que você vai projetar. Depois disso, criamos nossas molduras de arame no papel, usando apenas um lápis simples com escândalo significa e nós os incluímos dentro de um documento Adobe X'd distante , que vamos fazer referência um pouco mais tarde, porque estamos vai usar alguns desses nomes dentro estão fora de nossos portos e, finalmente, temos agora neste guia de estilo, que eu incluí com os ícones e apenas este logotipo básico que eles enviaram aqui. Agora, se eu clicar nele, você pode ver que este é o logotipo do obturador e ele só tem uma parte. Então, tudo se funde. Mas quando tivermos O animando, vamos animar alguns desses porque precisamos incluí-los e depois tipo de selecioná-los. E eu vou explicar isso um pouco mais tarde quando você começar a animar isso, mas não vai ficar neste olhar assim. Então agora vamos começar a adicionar algumas nossas portas, e vamos incluir 12 delas porque vamos ter 12 telas para nosso design incluir uma nova nossa placa. Você pode clicar aqui e nós estamos indo para o pé. Adicionar iPhone 10 e 10 s a partir daqui, e eu vou toe chamar esta tela de carregamento como então basta clicar duas vezes sobre este texto aqui no topo, e você pode, em seguida, adicionar o seu nome fora do aeroporto. Vou fazer umas cópias. 23456789 10 11 12 porque vamos ter 12 telas diferentes. Deixe-me contra-atacar rapidamente. Então, para 8 12 como então eu vou clicar duas vezes aqui e digitando casa. Isto vai ser imagem aberta. O próximo será na nova imagem. Não, este vai ser da galeria. Isto vai ser adicionado imagem. Este vai ser descrição barra publicar porque nós vamos ter um fundo publicado bem aqui. Em seguida, podemos criar um painel como então vamos criar curtidas para a lista fora de gostos que vamos criar um perfil. Vamos criar menu lateral e deixe-me contar rapidamente mais uma vez. Então para 68 10 11 por falta de mais um eu preciso adicionar corte aqui, então eu vou adicionar grupo. Em seguida, depois que vem descrição da imagem barra publicar Depois que vem no painel e , em seguida, gosta de um formulário e, finalmente, menu lateral. Então é basicamente isso para esta parte de criação. Vou separá-los ligeiramente do resto dos nossos portos. Então talvez algo assim, talvez 200 pixels desses, só para que possamos ter um pouco mais de espaço. Estas vão ser a nossa armação de arame. Segundo Presti, clique aqui fora no rodapé e você pode digitar armações de arame. Você pode ouvir o controle de uma areia de areia aberta. Vamos usar 200. Bom, grande e fraco. Posicioná-lo em algum lugar por aqui e talvez por aqui. Então, agora que temos nossas armações de arame configuradas. Eu só queria adicionar mais uma coisa rápida dentro deste vídeo, e isso é uma parte do status. Vou me basear a partir daqui. E vamos fazer letras pequenas aqui. E eu vou simplesmente apertar o Controle V. E eu peguei isso de outro aplicativo, e se você não sabe como encontrar isso, você pode ir direto para casa. Você pode ir para adultos. Você pode ir até você. I kits, e quando você clicar ali mesmo, ele irá levá-lo para o site deles. Basta baixar o IOS oficial da Apple. Você gosta? O que quer que seja no momento em que você está assistindo ao discurso. Então, por exemplo, neste momento eles têm o IRS 13 isca acima. Mas eu não vou baixar essa versão beta porque ele ainda tem alguns bugs nele, e eles ainda não esmagaram esses. Mas eu vou usar IOS 12 porque ele já está completo e enviado em todos os seus dispositivos. Mas se você quiser mais tarde, você pode usar o IRS 13 também. Aqueles apenas alguns, digamos que mudanças de menu. Eles não são tão grandes, mas você pode baixá-lo. Se você estiver usando ovos E em seu Mac, basta abri-lo e você pode ter que você gosta que ele aberto. Se você está usando em suas janelas, você tem reboque. Descompacte-o porque ele vem como uma imagem DMG, e você pode descompactá-la Usando sete zip, por exemplo, você pode simplesmente clicar com o botão direito e descompactar isso em sua área de trabalho, e quando você descompactar que é assim que parece. Então esta é a Iris original e oficial. Você gosta da própria Apple, então você pode realmente mergulhar fundo aqui, e você pode clicar bem aqui para os ativos. Você tem todas essas cores oficiais. Você tem todos esses fundos oficiais, símbolos, símbolos, ícones e assim por diante. Mas o que estamos interessados é apenas para parar, estão doentes e clicar sobre ele de qualquer pessoa fora dessas telas e você pode simplesmente mergulhar profundo insight e vamos ver, estado é onde você pode clicar com o botão direito aqui ou bater o controle C, copiar a partir daqui e, em seguida, simplesmente colá-lo em seu próprio. Os nossos portos. Foi o que eu fiz aqui. E eu posso apertar o controle C neste e diminuir um pouco. Seleccione o resto das minhas tábuas, bata no Controlo V e aí vai. Está em todo lugar, mas antes de fazer isso, quero clicar nele, apertar o controle, apertar o controle, comandar K e fazer um símbolo. E se você está pulando bem aqui, você pode vê-lo. Adicionado isso aos componentes. Então temos o componente da barra de status aqui e você condensa. Basta pressionar o controle C. Em seguida, selecione tudo, exceto o menu, porque não precisamos dele no interior do menu. Aperte o Controle V, e está indo para o pé. Acompanhe-os aqui mesmo, e ele vai colá-los como componentes infantis. Então este é o componente mestre porque ele tem este diamante bem aqui, e todos estes são componentes filhos. Você pode fazer alterações nesses componentes-filho irrelevantes nesse componente mestre. Mas uma vez que você faz uma mudança. Então o componente da mesquita está indo dedo do pé aplicado que mudar o dedo do pé todos os componentes da criança frio . Então, se eu pular aqui e, por exemplo, mudar esse estilo de tempo de preto para vermelho, talvez você possa ver que ele muda para ler em tempo real em todos esses, de modo que basicamente ele para este vídeo, e isso é basicamente para a nossa preparação. E no próximo vídeo, vamos pular e começar a projetar nossos quadros de arame, e eu vou mostrar a vocês como podemos definir ou alguns desses elementos. Heiken usar guias em mais alto pode lidar Ian Pace sobre esses elementos para tornar seu trabalho muito mais fácil e muito mais rápido. 78. Como criar wireframes 2: Não vamos começar a criar nossas armações e eu vou pular dentro do nosso guia de estilo. Clique no controle de batida do logotipo C. Clique na tela de carregamento. Controle de batida. Vamos dar o dedo do pé. Coloque-o abaixo das escadas. A Barb acertou este do meio, este do meio. É isso por enquanto, porque vai ser apenas uma tela de carregamento. E na próxima seção do curso, quando começarmos a prototipagem e adicionarmos animações a isso, então vamos incluir algumas animações e reprodutor com ele. Mas, por enquanto, vamos ficar lá. Agora vamos saltar para dentro de uma tela inicial e vamos começar a criar isso. Então eu vou usar minha ferramenta de retângulo, e eu vou desenhar um belo formigamento de crack grande, que vai ser 375 com 88 assim, e eu vou adicioná-lo ao topo. Mova para baixo, e eu vou chamar isso de nunca barra B G. Então eu vou incluir uma pequena sombra. Posicione-o aqui e remova a borda, e vamos deixá-la na rede. Agora vamos criar um texto ou enfraquecer. Basta adicionar um local aqui no centro. Vamos fazer isso eu vou clicar aqui mesmo. Aperte o controle C ele controla V E eu vou apertar o controle de deslocamento e clique com o botão esquerdo do mouse, e eu vou posicioná-lo em algum lugar por aqui para o início. Talvez 20 pixels desta garrafa correspondam. Posicione-o lá. E agora o que precisamos merecido. Estes dois ícones vão apertar o controle C para copiá-los. Pule aqui dentro. Aperte o controle V e eu vou dar o pé. Posicione-os como então isso vai acontecer aqui. Isto vai ficar bem aqui. Mantenha a tecla Shift 12 para posicionar em 20 pixels a partir da esquerda. Mantenha a tecla Shift um para posicionar em 20 pixels. E então eu vou selecionar o menu da câmera e o obturador de uma só vez. Clique aqui para posicioná-los no meio e, em seguida, movê-los, por exemplo, 10 pixels a partir desta borda inferior. E acho que parece bom. Vamos dar a isso alguma cor, e vamos usar essas mesmas cores área para usar nos vídeos anteriores. Então três C seis esforço, assim e deixe ser azul. E isso parece bom. Agora vamos agrupar tudo isso. Vamos tirar a barra de status do caminho. Então temos uma câmera que temos obturador, que é o nosso menu de logotipo. E nunca Barbie G foi selecionar. Todos eles tinham controle G e chamavam essa barra de Naff como então agora são torneiras de design na parte inferior. Ir e escolher o meu retângulo para mais uma vez simplesmente desenhar um grande retângulo agradável. Vou dar o dedo do pé. Remova a borda e você pode incluir a sombra se quiser. Mas eu só vou mudar a cor do seu ligeiramente para algum lugar por aqui. Talvez só para que possamos ver. E por suas dimensões. É 375 e altura é 83. Eu vou movê-lo para baixo para a parte inferior assim, e então eu vou simplesmente selecionar indicador home da minha outra tela. Eu vou colá-lo no lugar, e este indicador de casa que eu tirei do kit oficial IOS eu realmente não gosto desta cor. O que muda para esta cor? Sim, parece melhor. É apenas uma grande cor cinza. E vamos usar alguns desses ícones. Então vamos usar esses quatro “hit control “C. Eu vou pular aqui mesmo. Controle o filme e eu vou movê-los para baixo. Então vamos ver, eles estão em um grupo para que possamos posicionar assim então eles estão no meio e talvez possamos usar um retângulo. Vá para a borda superior deste fundo, desenhe grande retângulo, em seguida, selecione este grupo posicionado no meio, como então foi dedo do pé. Apague este retângulo e eu vou para o pé. Mova tudo isso para baixo com indicador home retangular. Isto vai ser barra de tabulação B G como Então este é indicador home, e estes são apenas ícones. Então vamos movê-los para fora deste grupo vai excluir o grupo e o que precisamos é reposicionar alguns deles. Então vamos mover esses três, por exemplo, 20 pixels a mais 20 e isso vai ser 20 também, então talvez possamos agrupá-los, mover o grupo no centro, e eu acho que isso parece ótimo. Agora posso desprepará-los ou deixá-los lá dentro. Está mesmo atrás de mim, mas vou dar o pé. Desembrulhe-os porque vai ser ah, muito mais fácil selecionar um pouco mais tarde agora, porque esta é a nossa tela inicial. Vamos mudar a cor do dedo do pé. Três C seis ff, assim, e você pode adicionar isso à sua amostra de cor para que você possa salvá-lo assim. Você pode aplicar essa amostra de cor, e você também pode clicar aqui nos ativos. Clique nas cores e você pode escolher esta cor, porque essa é a nossa principal grande cores para 70 70 70 se você se lembrar dos vídeos anteriores, e você pode usar essa cor, se quiser. Agora vou usar a mesma cor para isso. Então é 70 70 70 e vamos clicar aqui e selecionar esta cor. Vou movê-lo todo o caminho para baixo, e talvez possamos selecionar este branco. Mas vamos lidar com isso um pouco mais tarde. Quando temos o design acabado, então é muito mais fácil selecionar todas essas cores. Agora vamos gostar de tudo bateu no Control G, e este vai ser o nosso bar 10. Acho que sim. Agora é hora de criar esses outros elementos, então nós vamos criar este cartão, que vai para o centro, e nós vamos duplicar esse cartão mais tarde, usando grade de repetição agora para obter uma estrela. Vou usar os lábios. Mas antes disso, vou simplesmente mover esses guias para me ajudar a posicionar esses elementos um pouco melhor . Então, se você tem um direito aqui, você pode ver esta seleção e você pode vê-lo no topo também. Isso é para o guia, então você pode simplesmente, entanto, bem aqui, clicar nele e, em seguida, aplicar o dedo guia na borda esquerda deste ícone. E agora temos 20 pixels aqui à esquerda. Eu posso fazer o mesmo com este ícone de menu, mas como você pode ver, não há nenhum aqui. Você tem que selecioná-lo a partir desta borda, então é basicamente exatamente o mesmo, como em quatro lojas. Se você já usar para a loja, você sabe que você pode aplicar esses caras e você pode clicar com o botão direito do mouse copiar esses guias e colá-los em todos os outros nossos quadros, e eu vou garantir que um pouco mais tarde. Mas agora vamos criar esse carrinho. Então, se eu selecionar um grande círculo, eu vou chamar o Salvator por agora, vou movê-lo logo abaixo e nunca parte aqui. E vamos mantê-lo pequeno. 40. 40. Assim e eu vou mexer isso para ouvir o turno dele. 12 Então 20 pixels desta borda aqui. Vou selecionar meu têxtil e vou digitar Joe John até, por exemplo, e vamos preenchê-lo com esta cor. Vamos usar todas as princesas assim e vamos ver, talvez possamos usar, sabe, 14 Bolt. Então 14. E vamos usar a digitação de parafuso a partir da esquerda, e eu posso posicioná-lo aqui mesmo. Talvez mais 10 pixels e dentro do centro, como este controle de batida D, e para esta cópia, vamos usar essa outra cor. Então vamos ver, talvez possamos usar 12 como para que possamos usar regular e podemos usar DDT assim, e você pode adicionar essa cor a uma amostra de cores, e você também pode clicar aqui e adicioná-la aqui. Agora vamos posicioná-lo, e ele vai estar alinhado à direita. Certifique-se de que está no centro com este texto para que você possa usar suas teclas de seta para algum lugar por aqui e você pode posicioná-lo obviamente, para esta borda clique duplo, e que vai ser a nossa localização assim. E talvez eu possa adicionar um coma aqui assim. E abaixo disso, vamos criar nossa imagem. Então eu vou simplesmente desenhar um belo retângulo grande. Podemos usar o raio da esquina, talvez cinco. Podemos tê-lo sem fronteiras, incluindo a sombra. E vamos usar essa sombra padrão. E para a altura, vamos usar 200 assim posição em 20 pixels. Então um para gostar disso e abaixo disso, podemos adicionar um pouco fora do texto. Então talvez possamos clicar neste controle de batida em D, e talvez eu possa movê-lo para baixo e será um carimbo de data/hora. Então vamos chamá-lo há três minutos assim. Então eu furando e nós vamos usar essa cor, e nós também podemos adicioná-la às amostras aqui. E eu já adicionei, Aqui mesmo os dedos são componentes de cor e honestamente, que lá esta vai ser a nossa imagem e o que precisamos aqui são alguns ícones. Então vamos usar alguns deles o que, você vai usar o nosso coração para que eu possa selecionar o coração vamos usar o comentário e vamos usar compartilhamento. Então aperte o controle C e eu vou pular bem aqui. Zoom um pouco mais perto. Aperte o Controle V. Isto vai alinhar até aqui. Mova-o aqui e, em seguida, 20 pixels para baixo. E entre cada um deles, talvez possamos adicionar algum espaço. Vamos ver 1234 Porque temos neste bom espaçamento e 40 pixels entre estes também . E agora simplesmente mova isso no centro para fora desses ícones como este. E, finalmente, o que precisamos é de um parágrafo. Então vamos ver. Podemos usar o sentido aberto 14 mais uma vez para criar um parágrafo, você pode simplesmente clicar aqui, Em seguida, desenhar um parágrafo e você pode digitar algo dentro. Em seguida, você pode saltar aqui para plugins, Lauren Ipsum e você pode clicar nele preenchido com texto de inserção de texto de espaço reservado. E lá vai você. Só vou fazer com que pareça alinhado à esquerda assim. E se você não sabe como toe instalar alguns desses plugins, especialmente um monte de gesso, você pode clicar aqui neste sinal de adição como aqui, digitando um monte de gesso aqui está, e você pode simplesmente clicar instalar, e quando você fizer, ele irá mostrar como instalado como Então, não, é sentido aberto. 12 regular, Mas vamos torná-lo um pouco menor para mim antes de linhas de textos assim e, em seguida, o que vamos criar é, por exemplo, por exemplo, esse sistema de instagram para os gostos. Então vamos usar esse controle de batida e D, e vamos simplesmente colocá-lo aqui e ter certeza de que está alinhado à esquerda. E talvez a vista. 24 comentários controlam um clique aqui e, em seguida, basta selecionar esta cor DDT. Como você pode ver, é muito simples de escolher. Então de 1 a 20 pixels e vamos ver este 1123 que ouvimos a 20 pixels. Então tudo parece igual e tudo é que 20 pixels como esse. E agora vamos simplesmente pedir alguns desses. Então primeiro temos o nosso avatar. Está no topo. Então temos grana de brincadeira. Então temos Londres, Inglaterra como esta. Então temos a nossa imagem. Abaixo disso, temos esses ícones que temos há três minutos. Temos o texto do nosso parágrafo e, finalmente, temos vista 24 comentários. Vou selecionar tudo o que ele controlou o G, e este vai ser o nosso carrinho como então agora é isso. Basicamente, nós criamos nosso cartão, e agora o que podemos fazer é clicar no carro, clicar em grades repetidas, e podemos simplesmente desenhar mais alguns desses cartões abaixo e isso está indo para o pé. Crie uma ilusão para o pergaminho. Então talvez eu possa terminar em algum lugar por aqui. Digamos que veja onde estão os comentários. Aqui estão eles, para que eu possa acabar com isso aqui. E então temos três postagens, e então quando obtemos um protótipo, podemos simplesmente clicar aqui e depois movê-lo para baixo assim, e criar uma ilusão melhor. Porque as cartas agora estão cobrindo tudo abaixo. Você pode mover esta barra de passos acima das cartas, e quando você rolar para baixo, esta barra de passos vai ficar fixa, e vai adicionar esta ilusão de que todas essas cartas estão indo abaixo dela. E talvez possamos até incluir alguma sombra. Mas vamos ver isso um pouco mais tarde. Dentro da parte de design, esta é apenas uma parte de armação de arame. Então vamos manter tudo agradável e simples. Então é basicamente isso para este vídeo. Vejo-te na próxima, quando formos criar a imagem aberta, por isso vou ver lá. 79. Como criar wireframes 3: Agora, à medida que você avançar e começar a projetar sua melhor idéia para salvar seus arquivos. Como você pode ver, esta pequena estrela está aparecendo bem aqui. Você pode simplesmente controlar s ou comandantes no Mac, e ele vai dizer o seu projeto. Então vamos agora começar a criar esta imagem aberta. Eu só vou clicar aqui. Bit controle C hit controle V posição abaixo. Clique aqui. Aperte o controle C Control V. E como você pode ver, ele vai me mostrar tudo porque isso ainda é uma página inicial. Basicamente, só tem esta imagem aberta. Mas aqui, precisamos criar uma seta para trás. Então, vamos selecioná-lo a partir daqui. Aqui está, controle. Vês? E eu vou simplesmente clicar aqui, controlar V na câmera, e eu vou apenas posicioná-la onde ela está. Então, aqui mesmo. Certifique-se de que está no meio de tudo, ou como a borda superior. Pelo menos clique em uma câmera bateu excluir. E você também pode fazer um clique com o botão direito em alguns desses e você pode copiar esses caras. Mas acho que não precisamos deles em todos os nossos portos. Então vamos acreditar como é. E eu vou mover que a barra deles para baixo. Agora, o que precisamos para este aqui, vamos usar alguns desses elementos. Então vamos copiar uma dessas cartas e você pode bater o controle. Clicar bem aqui. Aperte o controle V. Você pode agrupar a grade. E como você pode ver, algumas dessas cartas foram para fora. Então vamos excluir para o 2º 1 É este, e vamos clicar no início, que está lá fora no rodapé, e vamos deletá-lo também. Agora, o que queremos é mover alguns desses elementos. Então eu vou clicar aqui e mover tudo 20 pixels para cima a partir desta borda inferior. E o que eu quero é estender isso. Então, eu vou apenas abrir. Vou escolher o nosso nome e localização. Vou secá-lo fora desta pasta. Vou posicionar um pouco por aqui. A seguir, vou saltar para dentro. Pode barra naff e altura e isso nunca Barbie Gee ou ainda melhor, Eu posso abaixar seu pastoso para baixo É mais fácil e mais fácil mais tarde para prototipagem também. Mas como você pode ver, você pode mantê-lo aqui e vai parecer agradável e simples, mas eu acho que vai adicionar um pouco mais de interesse visual como este. Mas vamos mantê-lo abaixo. Então vamos selecionar esses, ver se funciona. Não, e talvez possamos mantê-lo aqui. Deixa-me saltar para dentro desta. Eu vou selecionar estes três hit control C Click aqui. Controle V vai colocá-los exatamente na mesma posição. E eu estou indo para o pé. Ordene-os de volta para o cartão. Agora, o que eu quero com esta imagem é que eu queria estender o dedo do pé aqui e ouvir tão bem eu estou indo para o dedo, remover o raio do canto , mantê-lo em zero, e simplesmente estender minha imagem até o topo. Isso vai cobrir tudo, e vai me mostrar a imagem. E finalmente, quando chegarmos à parte de design, talvez possamos adicionar uma pequena sombra aqui. Ou talvez um pouco de Grady int. Acho que será uma ideia ainda melhor. Então ingrediente irá cobrir basicamente o que esta barra de fundo naff para cobre agora. Mas vamos continuar assim. Simpático, limpo e simples. E vamos seguir em frente porque vamos lidar com todos esses detalhes um pouco mais tarde quando começarmos a projetar e começar a adicionar algumas das ilustrações, sombras e cores, incluindo imagens e assim por diante. Então é isso para este vídeo. Vejo-te na próxima, quando estivermos a ir ao pé da imagem nova, e vamos incluir uma boa ilustração. 80. Como criar wireframes 4: vamos conhecido design adicionar nova imagem. Mas antes de o fazermos, vou clicar aqui mesmo para o NAB, o nosso controlo de batidas C, controlo V, para lidar com isto aqui mesmo. E eu vou apenas remover esta seta para trás fora da pasta porque isso é tudo que precisamos para esta tela agora, abaixo disso, nós só precisamos neste indicador home Então deve controlar ver clique em Controle V. E agora nós vamos adicionar algum texto aqui e que simplesmente baseado em de fora. Então isso está aberto, diz 14 só para eu não ter o dedo direito dentro, então eu sou um pouco preguiçoso assim. Vou arrastar isso para baixo e arrastar isso para baixo para ouvir. Agora, aqui em cima, você vai ter uma ilustração, então eu vou pagar Started também. Agora, esta ilustração é livre de usar. E se você pular aqui para os plugins, é do Andro. Então você pode clicar neste plug in e você pode ver que você pode mudar as ilustrações noturnas ou você pode clicar aqui e talvez tirar fotógrafo digitando assim e ele vai procurar . E aqui está a ilustração. Você pode clicar nele. E quando terminar, você pode simplesmente bater feito, e você pode ir para algum lugar fora para ouvir. Por exemplo, clique em Controle V. E foi tomado com base nessa ilustração. Você pode ampliá-lo, e porque ele funcionou lá ilustração, você pode ver como isso se parece. Se você quiser alterar algumas dessas cores, você pode clicar dentro. Podemos segurar o turno, selecionar tudo. Talvez possamos clicar para algumas fora de nossas cores, então talvez você possa usar este aqui. Você pode usar esse. Talvez você possa aumentar e diminuir a opacidade e assim por diante. E quando você está feliz, você pode simplesmente arrastá-lo para dentro de uma de nossas tábuas. E depois vai ficar assim. Deixe-me voltar para os meus menus, e o que eu preciso criar a seguir é que eu preciso criar duas seleções porque precisamos que as pessoas sejam capazes de fazer seleções da galeria, bem como da câmera. Então vamos fazer essa seleção bem aqui. Vamos criar um pequeno retângulo. Não, vamos adicionar essa sombra. Vamos adicionar canto. Raio cinco vai ser talvez quadrado, então 140 com 140 assim, e vamos remover a fronteira porque não precisamos dela. Realmente? - Não. A sua posição. É um pouco mais agradável. Então talvez 40 pixels para baixo, assim. E esta vai ser a nossa galeria BG, porque as pessoas vão ser capazes de adicionar novas imagens da galeria hit control Andi para duplicado e este vai ser o nosso outro. Então câmera BG, porque eles vão ser capazes de adicionar a partir da câmera, bem como Então eu vou mover seus talvez 20 pixels a partir deste assim e ter certeza que ambos estão no centro assim . Vou duplicar este texto. Eu vou movê-lo aqui para baixo, e eu vou mover alguns desses ao redor. Então este vai ser o nosso texto irregular como, então certifique-se que é em 14 e nós vamos simplesmente escrever na galeria como este, e eu vou posicionar isso no centro fora deste e talvez movê-lo bem , Vamos mantê-lo aqui por enquanto. Ele controlaria D neste aqui, e nós estamos indo para o dedo do pé da câmera aqui assim. Certifique-se de que está em dissidente também, e precisamos de ícones aqui. Então eu vou selecionar rapidamente estes ainda. Então esses são os dois aqui, e eu vou simplesmente movê-los aqui. Então, Controle V, esta será nossa galeria, então certifique-se de que está no centro. Esta vai ser a nossa câmera assim, certificar-se de que ambos têm, por exemplo, 20 pixels como essa. E nós podemos talvez selecionar todos eles e, em seguida, simplesmente movê-los para o centro assim e vamos saber, encomendar alguns deles. Então isso é da galeria, e nós vamos agrupar tudo daqui e chamar essa galeria, e isso vai ser da câmera e agrupar tudo isso e câmera de qualidade. E apenas para o último, vamos selecionar o banquinho. Clique aqui e simplesmente selecione esta cor. Agora eu não preciso desta cor porque é revestido a partir desta ilustração, então eu vou apenas mantê-lo agradável e simples e usar apenas a nossa cor, e é basicamente isso. Nós criamos esta tela, então vamos animar isso um pouco quando tivermos prototipagem de uma parte do curso. E as pessoas vão ser capazes de selecionar a partir da galeria e da câmera. E vamos selecionar e projetar rapidamente esta armação de arame da galeria porque tudo será bastante simples. E nós vamos simplesmente usar neste nunca Bar hit controle C Clique aqui. Aperte o controle V M. Estou indo para o pé. Remova este logotipo do obturador. Eu vou selecionar este texto Hit controle C Clique aqui, Controle V. E certifique-se de escrever galeria aqui como dívida. E eu vou posicioná-lo no centro e no centro fora disso também, assim. E você pode até mesmo selecionar estes três em clique aqui e vai se certificar de que você está no centro. Não, o que precisamos são algumas imagens, e vamos simplesmente usar uma grade de repetição. E o que eu posso usar é um retângulo agradável, por exemplo. Então talvez eu possa primeiro criar nossos guias para que eu possa clicar neste ícone e arrastar no guia daqui todo o caminho para esta borda esquerda e clicar no ícone de menu e fazer o mesmo para ele também. Então certifique-se de que é assim. E finalmente, o que eu quero é criar esses quadrados. Então, antes de fazer, eu quero clicar aqui e ter certeza que isso está em 100%. Esta vai ser a nossa imagem assim, e vamos dar-lhe algumas dimensões. Então, certifique-se de que é isso. Por exemplo, 99 com Sadie para isso parece bom. E vamos usar cinco para o raio do canto assim. Certifique-se de que está a 20 pixels daqui. Controle D e vamos mover este para o centro e ele controlou o mais uma vez. E vamos mover este para esta margem direita assim. Então todos eles têm exatamente, desde o ritmo entre eles. Enfraquecer grupo esta chamada de imagens ou ainda melhor. Sim, vamos agrupá-los e simplesmente apertar a grade de repetição. Poderíamos mover tudo para aqui, por exemplo. E o que eu quero fazer é talvez, sim, vamos manter a fronteira por enquanto. Mas vamos dar outra cor. Talvez este para mantê-lo um pouco mais leve. Sim, assim. E isso é basicamente para esta tela também Bem, como você pode ver, você pode apenas criar um deles, depois copiá-los, duplicá-los e posicioná-los em seus espaços. E quando você fez isso, você pode simplesmente clicar em grade de repetição, e você pode desenhar esses retângulos para baixo e vai duplicá-los. Você pode passar o mouse aqui, e você pode aumentar ou diminuir o espaçamento entre cada um desses elementos, tanto horizontalmente quanto verticalmente, bem como, se você quiser. E então você simplesmente começa esta agradável repetição grande, que é realmente fácil de criar como você viu, e isso realmente economiza muito tempo fora. Agora, no próximo vídeo, vamos projetar esta tela de edição de imagem, e eu vou ver lá. 81. Como criar wireframes 5: agora é projetado algumas dessas outras telas, então eu vou usar o agora emprestado mais uma vez, Controle. Veja o controle. Estamos aqui a mover-nos abaixo da barra de estado. E o que eu quero é o ícone de salvar bem aqui. Então eu só vou me mover para ouvir, selecionar meu ícone dizer, Aperte o controle C e mover todo o caminho de volta para aqui. O que eu quero aqui são apenas esses ícones Soul. Deixe-me rapidamente basear isso. Posicione-o em um lugar como aquele e eu vou movê-lo para esta borda esquerda. E eu vou mover seta para trás e salvar fora desta pasta e simplesmente pressione Excluir. Você pode deixá-lo assim, ou você pode agrupá-los dentro de sua pasta. Realmente não importa. E o que eu quero aqui é uma imagem. Uma imagem só vai usar esta imagem daqui, então localize o controle de batida da imagem C. Olhe aqui, Controle V. Eu vou movê-la abaixo de tudo aqui, e eu vou usar as dimensões Desligado. 375 semanas. 532 assim. E vamos deixar essa sombra. Uma espinha é E o que queremos é criar alguns controles deslizantes abaixo aqui porque as pessoas estão indo dedo do pé estar selecionando imagens da galeria. Então eles vão ter esta tela de edição de imagem. Se eles estiverem satisfeitos com a imagem como ela está, eles podem acertar, salvar e mover diretamente para uma descrição e publicar ou para esta outra tela se quiserem recortá-la. Mas se não estiverem, eles terão os controles deslizantes na parte inferior para brincar, e então eles serão capazes de fazer essas mudanças. Agora precisamos de uma mensagem bem aqui. E vamos usar o Sense 14 aberto, por exemplo, e vamos encontrá-lo. É bem aqui deve controlar, veja, e eu vou colocar a direita aqui, apertar o Controle V, e vamos usar esses caras mais uma vez. Então vamos desenhar um guia rápido para aqui e vamos fazer um, por exemplo, bem aqui. Algo não está certo aqui, então vamos dar isso e vamos gostar deste ícone também e desenhar um bom guia para aqui. Sal. Vamos posicionar apenas para ouvir, ter certeza de que ele saiu das linhas e ter certeza que é regular, e eu vou escrever com brilho. Vou fazer uma duplicata. Eu vou escrever. Em contraste, controle de batida, não é? Mais uma vez. Isto vai ser destaques, assim e finalmente, vamos ter sombras. Agora deixe-me posicionar alguns deles, então o brilho estará no topo. Os destaques estarão aqui, e todos estarão abaixo da nossa imagem. Então eu rapidamente movi alguns deles para baixo porque eu vou posicionar um pouco melhor. Então 20 pixels e eu vou criar um dedo retangular ir deste guia para este. E agora vamos começar a criar nossos controles deslizantes. Então este vai ser um slider BG como esse. E vamos usar essa cor. Então vamos remover a borda e para a cor. Vamos usar. Vamos usar este. E nós estamos indo para o raio da esquina. Tem 50. E para a altura, vamos usar oito, por exemplo. Sim, acho que parece bom. E eu vou posicionar tudo, Por exemplo, bem aqui. Em seguida, vamos criar um círculo, então apenas desenhe um círculo agradável e use talvez 16 com 16. Bom e pequeno assim e por isso. Talvez possamos usar essa cor azul para isso e talvez possamos usar a cor da borda fora do branco. Isso vai ser um círculo, e nós estamos indo para o pé. Faça uma duplicata deste hit controle D, e ele vai ser uma cor ou uma cor deslizante ainda melhor. E nós vamos dar-lhe uma sensação de cor azul, e talvez possamos movê-lo para aqui e então posicionar isso para ouvir, talvez porque as pessoas vão ser capazes de brincar com ele um pouco mais tarde e depois ajustar suas imagens de acordo até que eles estejam felizes com o resultado. Agora, esse grupo de reunião, tudo isso para que selecionar todos os três controle de calor G distrito para ser um controle deslizante e você vai mover o controle deslizante abaixo Brilhante. E vamos posicioná-lo aqui com 10 pixels para baixo. Apenas contrastar. Posicione-o aqui e mova seus 20 pixels para baixo. Agora podemos duplicar este controle deslizante, movê-lo para aqui e certificar-se de que são os pixels para baixo também. Certifique-se de que este é um 20 e eu fui para mover isso um pouco para baixo para que ele controlasse D e mova o controle deslizante para baixo, então certifique-se de que está em 10. Isso vai ser em 20 e, finalmente, vamos usar mais uma cópia deste controle deslizante e vamos movê-lo para baixo em ter certeza que está em 20 também , ou apenas 10. E eu acho que isso parece bom agora é que você pode ver que é bastante difícil de ler. É por isso que vamos mudar. Os são de cor pobre em si. Então, a partir desta cor, podemos escolher essa cor. E agora você pode ver claramente esses controles deslizantes muito mais fácil e muito mais limpo. Agora podemos posicionar essa cor e, por exemplo, escolher todas as cores BG deslizantes e podemos escolher branco. E se você acha que isso é muito duro, talvez possamos trazê-lo de volta para aqui, e vamos brincar com ele um pouco mais tarde. Agora deixe-me selecionar rapidamente todos os nossos textos e para a cor, eles só vão usar a cor branca. Então agora, como você pode ver, você pode ver este texto muito mais claro e muito mais fácil do que antes. Agora o que eu vou fazer é selecionar esses dois ícones aperte o controle C. Clique aqui, aperte o controle. Nós nos certificamos de que este tem a mesma cor do mandril que este aqui, e o que eu realmente vou fazer é criar uma ilusão fora da colheita. Então deixe-me saltar para dentro e e estes dois vão agora mudar de cor do dedo do pé branco porque você pode vê-los melhor assim. Agora vamos criar uma ilusão fora da colheita aqui, porque as pessoas vão fazer algumas mudanças aqui. Em seguida, clique em Salvar movido para esta tela, onde eles podem cortar se houver até. Se eles não querem dedo do pé, eles podem simplesmente clicar no ícone de salvar, e ele irá movê-los diretamente para publicar onde eles serão capazes de incluir sua descrição, por exemplo, e simplesmente mover junto de lá. Mas vamos nos concentrar nessa tela por enquanto. E vamos criar uma imagem. Então vamos criar uma imagem grande e agradável. Então vamos de ponta a ponta. Então 375 e para a altura, talvez possamos usar 532 por exemplo. Então, Toby, o mesmo que este. E talvez eu possa até chamar Peyton desta vez. Só para tornar as coisas ainda mais simples, mover tudo para baixo, colocá-lo no meio assim, e talvez para ele possamos usar? Eu não sei. Então, sobreposição de cores. Talvez seja assim. Vamos ver como isso se parece. Talvez eu possa acertar o controle e D e criar esta bela sobreposição de cores. Talvez eu possa movê-lo para aqui. E finalmente, talvez eu possa criar algum tipo de área de corte de imagem. Então talvez eu possa usar essa imagem que foi removida pela primeira vez nessas sombras porque não precisamos delas por enquanto. Então esta vai ser uma cor excessivamente, e esta vai ser agora a nossa área de corte de imagem. Então isso significa duplicar este que ele controlou para ouvir remover o preenchimento. Inclua a água da fronteira vai ser branco, e vamos torná-lo um pouco menor. Então, por exemplo, algo assim, talvez. E vamos brincar com as configurações para que eu antes 50 e talvez possamos dar folga fora. 10. Então agora, como você pode ver, nós temos essa área de corte de imagem agradável e vamos chamá-la assim. Então, este será basicamente o nosso corte de imagem, e nós vamos brincar mais tarde na parte de design deste curso quando incluirmos a imagem real que vamos cortar aqui. E eu vou mostrar a vocês como você pode mesquita alguns desses elementos e realmente se certificar que esta imagem se destaca e talvez no mesmo parque. Talvez possamos incluir outras cores, como talvez possamos cortá-la uma por uma. Encomenda às 16 por nove. E talvez possamos incluir uma outra opção aqui, antes e depois, só para que as pessoas possam ver isso. E também podemos incluir essa opção aqui, para que as pessoas possam comparar imagens entre edições. Então, vamos pensar sobre isso e talvez incluir um pouco mais tarde. Mas por enquanto, isso é tudo para este vídeo. E no próximo, vamos passar para a descrição e para publicar. E eu vou mostrar a vocês como você pode adicionar alguns elementos diferentes aqui. 82. Como criar wireframes 6: que não é projetado descrição publicada tela. Então o que eu preciso é nesta parte de trás, eu me preocupo apenas indo para selecioná-lo a partir daqui para que ele controle ver rápido hit Control V. Eu vou movê-lo para baixo, porque as pessoas vão ser capazes de ou voltar e fazer essas alterações adicionais ou para publicar, e vamos criar um fundo em apenas um minuto. Mas primeiro, vamos usar alguns desses outros elementos que eu vou usar são John Doe e talvez imagem também, para que ele controle. Ver e ou não. Vamos usá-lo a partir daqui. Na verdade, John Doe na imagem atingiu o Controle C. E eu vou entrar bem aqui e acertar o Controle V exatamente no mesmo lugar. E talvez eu possa até movê-lo um pouco mais longe. Então, por exemplo, 20 pixels daqui. Então 12 assim e mover tudo para baixo e nesta imagem, vamos ter que ser em 1 18 assim, e eu vou fazer uma duplicata ou seu controle de calor em D. Eu vou posicionar isso um pouco para baixo na batida, ter certeza que eles estão alinhados como este turno 12 e o que eu quero por ele. Vai ser a nossa entrada. Então vamos chamá-lo de colocar, vamos remover em sombra incluir a fronteira e para ele. Vamos ter que estar em 1 30, por exemplo, porque não precisamos dele tão grande assim? Não, vamos usar algum texto. Podemos usar este parágrafo aqui e eu fico cheio à vista. Talvez eu possa movê-lo. 1212 Talvez algo assim. E talvez eu possa trazer isso. Por exemplo. Talvez eu possa dar um 10 e mantê-lo assim. Copie este texto aperte Controle C aperte Controle V, e eu vou movê-lo todo o caminho até aqui. Certifique-se de que está na linha que está, e eu vou posicionar para ouvi-la. Shift 12 e vamos escrever pessoas intactas porque os usuários serão capazes atacar seus amigos, por exemplo, ou pessoas que estavam lá com eles naquele dia. Agora vamos usar um pouco disso, então vamos usar a entrada. Por exemplo, aperte o controle C Patrulha V, e eu vou movê-lo todo o caminho para baixo mais uma vez, e esta vai ser apenas a nossa linha divisória. Então, o que vai ficar igual? Mas a altura vai ser uma. E nós vamos mover essa linha. Por exemplo, 20 pixels abaixo deste texto. E, finalmente, vamos selecionar esses dois itens Controle de calor D para fazer duplicatas fora deles, movido para baixo e posicionar isso Então 1 a 20 pixels para baixo. Mova esta linha divisória muito mais. E eu vou adicionar esse local aqui também. Então eu vou selecioná-lo a partir daqui, por exemplo. Então, usou este controle de batida C e eu vou me mudar para aqui. Aperte o Controle V e eu vou posicioná-lo. Primeiro de tudo, para ser deixado alinhado, Toby aqui, Toby, 20 pixels abaixo. E esta linha vai ser 20 pixels abaixo deste texto também. Então 12 E finalmente, vamos criar o nosso fundo. Então vamos usar um retângulo para ganhar drone é grande botão, e vamos dar-lhe um peso de 200 a altura de 50. E vamos dar-lhe um raio de bordo de oito como esse, nós vamos incluir esta cor de sensação Nós não teremos nenhum derrame. Desculpe fronteira, e nós vamos incluir uma sombra de fundo também e fomos posicioná-lo em algum lugar por aqui. Mas é com o apropriado. Então 1234 40 pixels e vamos usar este texto hit controle na unidade com abaixo botão movido todo o caminho para baixo. Este deve ser o nosso botão e distrair as pessoas. Texto vai realmente escrever, publicar como, então certifique-se que ele vai do centro. Posicioná-lo no centro assim e assim, certifique-se de que é branco e vamos mantê-lo regular assim e simplesmente reposicionar se necessário. Acho que isso parece bom. Aperte o controle do grupo G. É e chamá-lo de botão, e isso é basicamente para esta tela. Então vamos passar mais uma vez. Então, no clique aqui, vamos para aqui. Então, quando eles clicam no dedo do pé, adicionar nova imagem a este ícone, ele irá levá-los para esta tela na tela Nova imagem, e eles podem escolher a partir da galeria ou da câmera. Ou eles podem escolher a partir da câmera lá como três a partir daqui. Se eles escolherem a partir da galeria, ele vai levá-los dedo do pé anúncio da tela da Galeria, onde eles podem escolher imagens de sua própria galeria. Quando os judeus a imagem que eles vão, goto adicionado, imagem onde eles podem mudar todos esses valores diferentes. Quando eles baterem em salvar, eles vão para a colheita. Se quiserem cortar, podem cortá-la. Se não, eles podem clicar, salvar dedo do pé, vir para esta tela onde eles vão ver a visualização fora de sua imagem. Eles serão capazes de adicionar descrições, atacar pessoas e impostos aqui no topo, e eles serão capazes de mudar de local. Então, no local aqui e aplicativo irá adicionar automaticamente localização se ele é fundado dentro dos dados de maneira de imagem porque imagens de telefone e imagens de câmera manter moderador dentro. Então ele vai tomar esses dados e mostrar, Por exemplo, Londres, Inglaterra aqui mesmo e eles serão capazes de publicar isso. Isso é basicamente isso, porque quando eles publicam com todas essas informações, ele vai levá-los de volta para a tela inicial, onde ele vai empurrar tudo isso para baixo e ele vai ser exibido nessa nova imagem bem aqui no em cima. Então, isso é basicamente o nosso trabalho completo para este aplicativo, e no próximo vídeo vamos passar no painel de design. E nos próximos bilhões nós vamos terminar o design de nossos quadros de arame e, em seguida , na próxima série de vídeos, mover o design real do nosso aplicativo. 83. Como criar wireframes 7: Não, ele é projetado a tela do painel e eu vou escolher este. Então aperte o controle C clique bem aqui. Aperte Controle V e eu vou posicionar abaixo status Par salto à vista para a seta para trás e eu estou indo dedo do pé mover neste guia aqui e movido um para aqui, bem como Então eu vou excluir de volta Carol porque nós não precisamos dele. E este dedo do pé, direita, painel assim e certifique-se de que está no centro que está. E vamos precisar de uma marca aqui para podermos escolher esta. Por exemplo, Hit controle C ele controlar o e você pode selecionar o ícone home e clique aqui e escolher esta cor fechar Tudo moveu essa parte para baixo. E agora vamos criar nosso painel. Então eu vou simplesmente escolher textos do que já foi criado na minha outra tela só para nos poupar um pouco de tempo. Mas se eu saltar para dentro, você pode ver que ambos são de sentido aberto 14 regular, e eu apenas digo o tempo livre criando este texto. Agora vamos duplicar este, então eu vou apertar controle de movê-lo para fora, posicioná-lo bem aqui abaixo e ter certeza que ele é deixado alinhado assim. Mova-o para aqui e certifique-se de que está 20 pixels abaixo deste, e ele vai escrever no tipo. Precisamos de mais um e vamos chamar esse de “gosta”. E finalmente precisamos da sujeira e do último, e serão os melhores momentos para postar assim e isso vai acontecer em algum lugar por aqui. Agora vamos criar um retângulo como este, e vamos chamar este tipo de VG como Então mova-o para aqui e certifique-se de que está 20 pixels abaixo deste e certifique-se de que ele tem o raio de canto desligado. Cinco. Sem padrão de borda Cale a boca e é 1 57 wits 200 e não, vamos nos mover para ouvir alguém para bater o controle de dedo, fazer uma cópia dele, e isso vai ser um tipo BG e simplesmente fluído para aqui até que ele se encaixe na posição aqui e mover os gostos. Pé a linha para esta esquerda Etch. Agora, o que precisamos aqui são alguns elementos. Então deixe-me escolher este texto. Vou controlar o “D” e os filmes aqui mesmo. Nós estamos indo direto no retrato assim e eu vou para ele Control de mais uma vez, e nós vamos chamar esta paisagem como esta e ter certeza que eles estão em 12. Então, selecione os dois, aperte 12 e certifique-se de que eles estão alinhados no centro. E podemos, por exemplo, dividi-los para que eu possa movê-lo assim. Shift 12 Certifique-se de que eles estão a 20 pixels de distância e mova-se para o centro assim. E talvez eu possa posicioná-los a 20 ou 40 pixels do fundo. Mas vamos manter 20 só para manter as coisas simples. Agora vamos criar um círculo. Então dar-lhe um círculo de 10 por 10 como este, e talvez pudéssemos mover este círculo, por exemplo, 10 pixels para cima. Certifique-se de que está no centro assim. Remova a borda, e para a falha, vamos dar-lhe uma cor de campo azul. Agora vamos cumprimentar uma cópia, mas vamos primeiro nome ou círculos, e eu posso movê-la logo acima do controle de retrato D mais uma vez, e eu vou posicionar isso no centro de Island Escape assim e isso vai ter essa cor verde. Então eu vou clicar aqui mesmo com base nessa cor. Então é 55 d 466 e visualizações que já em alguns de nossos outros vídeos. Agora vamos criar um gráfico de donut grande e agradável. Então deixe-me criar rapidamente um grande círculo e vamos dar-lhe dimensões fora. 90 por 90. E vamos usar, por exemplo, apenas uma fronteira. E vamos usar borda fora 20 como este e eu vou posicioná-lo no centro assim , ter certeza que é a mesma distância ou talvez até 20. Vamos ver como isso se parece. Acho que isso parece bom. Chame este círculo ou o círculo principal como este e agora faça duas cópias dele para que ele controlasse de Control De isto vai ser azul. Isto vai ser verde como este e dar-lhes as suas cores. Então isso é verde. Isto é azul assim e finalmente, vamos criar uma mesquita. Então eu vou talvez escolher mental como este clique rápido aqui. E então talvez aqui, eu vou entrar na mesquita. Chame esta mesquita e eu vou posicioná-la logo acima desta azul. E eu vou bater no controle de turno M dedo do pé, fazer uma mesquita e isso vai ser azul e agora fazer o mesmo para os verdes. Então certifique-se de ir do centro assim até aqui, certifique-se de cobrir tudo assim que esta vai ser a nossa mesquita e posicioná-lo logo acima do verde. Selecione tudo. Controle de turno M um comandante de turno. Se o seu Mac e isso pudessem ser verdes assim então agora que temos que posso agrupar tudo , apenas certifique-se de que tudo está onde deveria estar. É, e eu posso selecionar todos eles e eu só tenho que selecionar tipo PG bem Movê-lo. Só para ouvir o tipo deve ir todo o caminho no topo Tipo P. G na parte inferior e pressione o controle G para agrupá-los. E este vai ser o nosso tipo assim. E apenas certifique-se de que Type PG está lá. É, e estas são as nossas mesquitas que estão indo para fora agora podemos seguir em frente para baixo, e isso vai ser no topo, logo acima do tipo e vamos criar gostos. Então o que podemos fazer é escolher esses dois. Então círculo retrato círculo escapar hit controle de fato. Mova tudo para fora desta pasta, selecione-os todos novamente e certifique-se de que eles estão no centro assim porque precisamos dos mesmos eles mencionam como Então agora vamos criar nosso retângulo. Certifique-se é 90 em altura, e você pode fazer um pequeno truque indo para o tipo, movendo isso aqui e apenas certificando-se de que ele se alinha com o nosso círculo principal. Ele então move-o para fora. E isso, vamos chamá-lo de Barbie. Puxa, assim, e vamos dar cor desta borda cinzenta removida. E talvez eu possa adicionar um raio de canto suave de cinco, por exemplo, apenas para manter as coisas simples e interessantes. Vá para o centro daqui. Aperte o controle D mais uma vez, e esta é a nossa barra azul. Vamos dar-lhe uma cor azul, e podemos movê-lo para baixo assim. - Não. Então, como ambos, ele é o controle D, e você pode movê-los para baixo aqui, por exemplo. Segure sua tecla Shift e mova-os para aqui, e esta vai ser nossa barra verde assim e você pode estender isso um pouco para cima. Talvez possamos movê-lo um pouco para baixo, por exemplo, e em Green Bottle mudou a cor para esta cor. E agora vamos agrupar tudo isso. Então isso vai ser como todos no topo. E esses círculos devem ir abaixo das grades assim, e vamos agrupar tudo para pegá-la. Então, apenas mais como BG aqui gosta de tudo é selecionado Hit control G. E isso vai ser um gostos. Mova abaixo do tipo. E agora vamos nos concentrar na melhor hora para postar. Então será 20 pixels para baixo assim E agora vamos criar um retângulo. Mas podemos usar este. Por exemplo. Basta apertar o controle D com o lado de fora, movê-lo para baixo como então segure o turno. Certifique-se de que está a 20 pixels daqui. Então, 12 e vamos chamar isso vezes B G. E para isso. Vamos ver. Podemos dar um pouco maior, eles mencionaram. Ou vamos manter as coisas simples. Vamos apenas aumentar seu tamanho dois aqui e vamos mantê-lo em 200 para que tenhamos a mesma aparência consistente em todos estes. Então vamos agora incluir algum texto. O que usar sons abertos. 12. Então, vamos escolher este. Controle de Calor D para duplicar. Mova-o para cima e isto vai ser válvula de sentido aberto. Primeiro de tudo, ele vai escrever da esquerda, e é chamado isso de M assim E vamos apertar o controle de mover isso um pouco para baixo em Vamos chamar este PM assim e vamos movê-los para ouvir o turno dele. 10 pixels da borda esquerda. E agora vamos criar algumas linhas. Então eu vou criar uma linha como esta. Chame-o de linha esquerda, assim, e para esta linha esquerda, eu vou escolher nesta cor de campo. Vou remover a fronteira para o raio da esquina. Vamos usar cinco. E para o tamanho, vamos usar 150 para alturas. E para os inesperados costumavam gostar assim de analistas. Não posicioná-lo. Então vamos movê-lo para aqui até que ele se alinhe com o nosso texto e com a borda superior fora do RBG como esta mudança 12345 Millikan com 15 e, em seguida, mudar e para a direita para que possamos movê-lo assim e então nós podemos reposicionar isso Então aqui mover o PM todo o caminho para baixo para aqui, por exemplo. E agora vamos criar uma linha diferente. Então, vamos ser duplicados. Este atingiu o controle D e esta vai ser a nossa linha de fundo, assim como motor. Basta manter a sua esquerda Most click shift inteira para girá-lo e certifique-se de alinhá-lo corretamente assim. Apenas certifique-se de que você não vê nenhum fora das bordas assim. E para a inteligência, podemos usar algo como 81 e apenas ter certeza de que você alinhá-los corretamente. Então, para aqui, por exemplo, e agora não perder mais tempo. Vou simplesmente copiar o texto de outro são parte que eu já criei. Mas eu basicamente usei este texto comigo Hit control D e eu usei grade de repetição e, em seguida, eu simplesmente criei múltiplos dele. Então 2467 Para os dias. Esta foi segunda-feira. Isso foi terça-feira. Esta foi quarta-feira, e assim por diante. E então eu simplesmente pairava sobre ele assim e, em seguida, aumentava ou diminuía o espaçamento entre eles até eu ter algo como isso, como eu excluído. E agora o que podemos fazer. Eu vou mover isso e logo abaixo, eu vou criar um gráfico agradável. Então vamos usar um lápis e simplesmente desenhar algo assim. Então talvez aqui para ouvir Talvez eu diria que foi até aqui. Talvez. Não, foi aqui, aqui, aqui. E finalmente desceu até aqui, segure a tecla Shift e conecte-os. E agora o que podemos fazer é incluir a cor do campo. Posso remover a borda agora para a cor do campo. Vou incluir azul, mas vou usar um ingrediente linear. Então eu vou escolher a cor mais escura, que é esta, e escolher esta para esta. Eu vou escolher brancos e eu vou reduzir o seu basicamente para baixo para zero. Então eu vou virar. Então faça isso assim e certifique-se de que vai até aqui. E agora vou incluir a fronteira de volta. E agora você vê como isso se parece. Então este é o truque. Sempre mostrar-lhe em um dos vídeos anteriores quando animado são painéis, mas que basicamente isso para que possamos chamar os tempos de fala, por exemplo, assim, e eu vou posicioná-lo em algum lugar por aqui. Digamos que logo abaixo de nossas linhas de fundo e podemos aumentar a espessura fora desta borda. Mas eu acho que parece bem o suficiente, e nós vamos animá-lo um pouco mais tarde. Mas, por enquanto, isso é tudo para os painéis. E no próximo vídeo, nós vamos projetar um curtidas, e vamos passar mais tarde para o perfil e finalmente terminar tudo com o menu lateral , então eu vou te ver lá. 84. Como criar wireframes 8: Não, vamos terminar nosso projeto e eu vou clicar aqui. Aperte o controle C para copiar esta aba são pressionados Controle o hit Controle V bem aqui, bem, e nós vamos fazer algumas mudanças. Então eu estou indo toe select e os gostos Ike um. Vou mudar sua cor para azul e vou fazer o mesmo aqui. Mas eu vou selecionar o ícone do perfil e mudar essa cor para azul aqui mesmo. A seguir, preciso de uma barra de cima. Então eu vou escolher este controle de batida C e selecionar ambos como para que ele controlasse V. E é por isso que eu amo Adobe X'd, porque você viu como isso foi rápido. Então, com realmente algumas cópias, ele pode realmente fazer um belo design. Extremamente, simplesmente. Então agora vamos nos concentrar nos gostos, e eu vou escolher este ícone, e eu vou arrastar um guia para aqui. Como você pode ver aqui no topo, diz 20. Então você pode ver claramente o quão longe você está arrastando e isso, e você pode ver 20 bem aqui, e você pode fazer o mesmo por aqui, mas eu realmente não acho que isso seja necessário. Mas vamos criar um retângulo como Então vamos mover 20 pixels daqui. Então 12 e vamos chamá-lo de imagem. Mas mova-o para aqui e vamos dar-lhe algumas dimensões. Muitas vezes 99 com 82 como Então vamos dar o raio de canto ou cinco. E vamos manter o campo e a fronteira por enquanto. Talvez possamos até adicionar uma pequena sombra. Então essa vai ser a nossa imagem. E então podemos remover a fronteira porque não precisamos mais dela. E agora vamos incluir algum texto. Então eu vou simplesmente Corp isto e talvez este texto. Então aperte o controle C. Vou pegar o Controle V aqui. Então vamos digitar um nome bem aqui. Então, Jane. Então vamos dar, e podemos posicionar isso no centro dessa imagem. Eu vou mover isso para fora do caminho assim, e eu vou posicionar 20 pixels como este e vamos ver o que podemos escrever aqui. Então, esses selos de tempo ou três minutos atrás, certifique-se de que é da esquerda e vamos dar para 12 como Então analistas escolhem esta cor cinza claro , e eu vou posicioná-la aqui e talvez, eu não sei. Vamos ver 10 pixels. Sim, isso funciona bem. Ele controlou a unidade, e eu vou posicionar isso competindo para baixo tão velho turno 10 pixels para baixo e esta vai ser a nossa identificação. Então, como a sua imagem. E talvez possamos selecionar este texto e escolher esta cor, mas selecionar a imagem a partir daqui e escolher a cor azul para ele. É basicamente isso. Podemos selecionar isso, movê-lo no centro, parece bom e agrupar tudo. Vamos chamar essa imagem e movê-la abaixo da barra de toque porque vamos criar uma repetição ótima até o fim. E ele vai ir logo acima da aba ou nós nem sequer temos que enfraquecer. Gostaria que este clique em repetir Grande. E talvez possamos parar aqui. Ou talvez possamos até criar um como este e, em seguida, movê-lo para baixo dessa barra para que as pessoas possam realmente rolar para cima e para baixo. E essa é a nossa tela semelhante feita. Podemos fazer mudanças adicionais mais tarde na seção de design fora do discurso, mas por enquanto, é isso. Agora vamos nos concentrar na tela de perfil e eu vou criar círculo. Vou chamar este avatar, e vou remover a fronteira. Inclua uma sombra. Certifique-se de que está no centro e para as dimensões. Vamos usar 80 por 80 assim, e eu vou posicioná-lo 20 pixels e para baixo a partir do topo, e eu posso pular aqui, e eu posso copiar este texto. Então aperte o controle C aperte o Controle V bem aqui. Certifique-se de que todos eles estão no centro, e o que eu vou usar aqui é o nome. Então, para o nome, vamos posicioná-lo no centro e mover 20 pixels para baixo. Vamos dar a este um local. Longs na Inglaterra gostam, então certifique-se que está no centro. Posicione-o aqui mesmo, e se eu segurar minha tecla shift, você pode ver o mesmo espaçamento como assim que o futuro é realmente bom no Adobe X'd, porque você pode saber que você posicionou alguns elementos usando o mesmo espaçamento daqui para aqui até aqui, então tudo é igual. Agora eu vou copiar este texto de outra tela, então eu estou basicamente usando um monte de gesso e eu tenho duas linhas de texto e isso é suposto representar uma descrição dessa pessoa. Então, onde eles estão, o que eles estão fazendo e assim por diante. Então, basicamente, algum tipo de seu currículo pessoal para este aplicativo. Agora, vamos usar alguns ícones de mídia social, então eu vou selecioná-lo a partir daqui. Aperte o controle C e eu vou para aqui. Aperte o controle V. Certifica-te de que estão no centro. Mas primeiro os agrupe. Chame isso de mídia social porque posicioná-lo no centro como este Shift 12 tudo é exatamente o mesmo que para os espaçamentos. E para a cor de sua dada esta cor agora, em Lee coisa que precisamos são imagens. Então vamos usar as mesmas imagens desta tela. Então, eu vou apertar o controle C neste. Voltando para o Controle V e eu não preciso de muitos. Talvez eu possa usar esses muitos para que você possa ver como é simples, toe criar esses elementos e você pode movê-los logo abaixo Tab são e eu estou indo toe Mover tudo logo abaixo da barra de valete. Então mantenha tudo agradável e organizado e você pode ver ajuda. Simpático e simples. Isto parece agora. Tudo isso ficará muito melhor quando incluirmos imagens dentro, porque as imagens criarão um bom contraste entre a facada de uma barra e tudo o resto. Mas agora, finalmente, vamos criar um menu lateral, e isso vai ser extremamente simples. Mas as primeiras coisas primeiro. Precisamos fazer algumas mudanças no nosso quadro. Então, em vez de 8 12 para a altura, vamos escolher para 77 como este porque vamos usar recurso excessivamente e tudo o que vê em todos os lugares que você vê nesses ícones de menu foram indo dedo do pé realmente posicionar este menu de lado e vai vêm do topo. Mas tudo ficará muito mais claro quando começarmos com a prototipagem. Mas as primeiras coisas primeiro. Vamos criar alguns textos. Permitam-me, portanto, escolher rapidamente este texto. Por exemplo, Hit Control C Control V aqui mesmo. Eu vou escrever em casa, ter certeza que está no centro assim, e eu vou posicioná-lo bem aqui, apertar o controle D, e eu vou mover isso um pouco para baixo, e eu vou dar-lhe um nome Off gosta então basicamente tudo o que eles têm nesta barra de torneira aqui. Eles vão ter aqui também, mas eles vão ter essa opção dedo do pé. Apenas fique bem aqui. Tudo deve ser acessível em um só lugar. Esse é o ponto principal do menu do site, então vamos dar um pouco de espaçamento. Então 1234 Certifique-se de que é em 40 quando, então eu comprei fora deles, movê-los um pouco para cima para me dar tão espaço quando ele iria controlar o mais uma vez. E isso vai ser um perfil. Basicamente, estamos listando tudo o que você viu na barra de toque, mas também estamos dando a opção de menu lateral. Ele controlou a mais uma vez e isso vai ser o painel de controle. Então é assim que eles vão acessar seu painel a partir daqui. Certifique-se de que está no centro tinha controlado a mais uma vez. Não, isso vai ser configurações assim. E finalmente, vamos dar o mesmo espaçamento. Finalmente, vamos ter um log out na parte inferior assim e ter certeza que está em 40 também. Agora precisamos desse ícone tão rapidamente localizado, eu vou usar a divulgação que eu não poderia apertar o controle C e rápido bem aqui. Aperte o controle V. Posicione-o no lugar. Agora, deixe-me copiar isso rapidamente. Nunca Bar Control V. E eu vou simplesmente usar este ícone e mover seu Toby exatamente no mesmo local que este ícone manual. Então, assim, assim e eu vou movê-lo para a borda direita bem aqui. Eu vou me mover para fora desta pasta hit, delete. E é basicamente isso. Como você pode ver, não temos barra de status porque esta é uma tela adicional. E quando você clicar neste ícone de menu, esta tela virá de cima para baixo, e virá logo abaixo da barra de status. Então, essas barras de status existentes vão cobri-lo de qualquer maneira. Então vamos terminar isso e movê-lo para aqui. Por exemplo. 1234 E o que precisamos é de um fundo. Então eu vou usar apenas uma das imagens. Então aperte o controle C controle V colá-lo no lugar. E o que eu quero é posicioná-lo aqui, ter certeza que as coronárias estão em zero. Vou dar o dedo do pé. Mova-o para as bordas. Posição para aqui 1234 porque eu só quero que a sombra de fundo fora desta imagem, e este vai ser o nosso menu BG. E você pode incluir imagem aqui, se quiser. Mas eu só estou interessado nesta sombra de fundo por enquanto porque ele vai ficar bonito quando você clicar aqui vai saltar de cima para baixo e ele vai ter nesta sombra de fundo. Então ele vai dedão sobreposição em cima desses elementos existentes. Então há basicamente ele que você pode acertar. Controle s porque você terminou de criar seus quadros de arame. Agora a próxima seção deste curso vai ser projetada, e nós vamos transformar esses amigos de fios em projetos completos. Vamos colocar imagens diferentes. Vamos brincar com as sombras, talvez até com poucas cores, e depois de criarmos estão cheios de design de carne. Vamos passar para a prototipagem e finalmente adicionar algumas animações e terminar este projeto, então eu vou vê-lo no próximo vídeo 85. Como criar design 1: neste vídeo, vamos começar a criar nossos designs. Mas antes de fazermos o dedo do pé, organize algumas coisas. Aqui estamos em nosso projeto X profanar. E se eu diminuir o zoom todo o caminho, você pode ver que X'd começa a partir do centro. E quando você começa a adicionar arquivos, ele começa a se mover para a direita. Então vamos consertar isso e vocês notarão que essas armações de arame vão ficar em posição. Isso é porque esta é apenas a imagem que está sendo arrastada e deixada dentro da obesidade. E não é um regular. Nossa porta você pode corrigir isso arrastando no reboque são pobres. Mas é muito mais fácil para mim dessa maneira, então eu vou simplesmente selecionar tudo. Eu vou o mais rápido que puder, e eu posso movê-los, por exemplo, até aqui. E então eu posso mover este papel para sua posição e este texto bem aqui no topo para que eu possa aproximar um pouco mais, e eu posso ver que eles estão todos a 70 essa distância. Então vamos verificar este também é, e eu vou mover esta armação de arame, texto em algum lugar por aqui. Digamos que talvez este seja o meio, por exemplo. E agora, se eu ampliar todo o caminho, você pode ver quanto espaço eu tenho aqui para o meu design para os meus protótipos. Talvez mais tarde, eu possa adicionar um site design bem aqui. Design de aplicativo Android Econet e assim um. Então este é realmente um ótimo recurso para ter. Você pode até ir até o topo. E quando você começa o controle ou o comando zero em seu teclado vai encaixar de volta uma posição onde você parou e você pode projetar a partir daí. Então agora vamos começar a criar nossos projetos. E para fazer isso eu vou duplicar esses quadros de arame porque eu quero que os clientes sejam capazes de verificar esses quadros de arame como eles eram como nós os projetamos. E então, quando avançarmos para projetar nesta seção do curso, eu quero que ele seja capaz de ver o que mudou de armações de arame para projetos para que você possa selecionar tudo o que ele controlaria D. E eu vou movê-los apenas um pouco para que Posso ter este espaço extra daqui até aqui. E eu vou apertar o controle D neste texto, e eu vou clicar duas vezes aqui, digitar o design, e eu vou movê-lo aqui mesmo no centro. Então, por exemplo, em algum lugar por aqui, digamos que sim, eu acho que funciona bem. E é basicamente isso para a preparação. E agora podemos começar a adicionar nossas imagens, e eu vou começar com o carregamento e você pode ver que ele adicionou esta extensão. Você pode alterar essa extensão clicando duas vezes no nome da nossa porta, e você pode digitar o design, por exemplo, assim, e você pode pular no reboque. Todos estes diferentes nossas placas e design de digitação. Não vou fazer isso no momento. Vou deixá-la na Extensão 1, porque mais tarde, porque mais tarde, quando começarmos a prototipar isso, vamos duplicá-lo mais uma vez, e então ele vai para o pé. Adicione outra extensão fora para, e então saberemos mais tarde em qual é qual. Então o arame original armação este com um é projetado e aquele que para seus protótipos, então vamos começar com a tela de carregamento, e eu vou apenas arrastar e soltar algumas imagens dentro. Eu baixei essas imagens de on splash dot com, então eles são todos livres para usar. E você vai obter essas imagens uma vez que você baixar este arquivo de projeto e uma vez que você começar a usá-lo para que eu possa movê-lo por aqui. Eu posso acessar meu painel de camadas aqui, e eu vou mover esta imagem todo o caminho para baixo assim. E quando eu estou feliz com a posição, por exemplo, aqui eu posso digitar um no meu teclado e isso está indo do pé sobre Bay City até 10%, como você pode ver aqui, porque meu objetivo era ter algum tipo fora do interesse visual bem aqui no fundo . E talvez possamos adicionar alguma animação mais tarde, quando pudermos, talvez aumentar de diminuir essa opacidade fora do fundo e eu vou mostrar chamada. Vamos mudar esse logotipo e criar um pouco de animação para a tela de carregamento . Agora vamos querer tela inicial, e quando eu clicar aqui, Eu vou acessar este cartão Repetir grau. Você pode agrupá-lo, ou você pode simplesmente editá-lo como está aqui. Eu também tenho algumas imagens que eu baixei no splash dot com, e eles são apenas imagens de algumas pessoas. Eu só vou arrastá-lo e soltá-lo neste círculo vai ficar azul, como você pode ver bem aqui e quando eu soltar, vai preencher esses círculos e esses círculos em Lee porque eu pairava sobre eles. Só vou remover a fronteira porque não precisamos dela, porque se você se lembra, porque se você se lembra, acabamos de ter essa borda em torno de nossas imagens. Nós vamos removê-lo, e neste ponto, com a esta repetição grande selecionado. Você pode selecionar esta imagem de avatar, e você pode adicionar, por exemplo , sombra, e ela vai adicionar a sombra em todas as suas imagens, como você pode ver aqui. Eu não vou fazer isso porque eu não acho que isso é necessário para esta imagem. Mas vamos seguir em frente e adicionar novas imagens a esta seção de imagens. Então, mais uma vez, quando eu arrastá-los e soltá-los para dentro, ele vai preencher essas imagens, e é melhor idéia dedo do pé. Nomeie suas imagens de acordo, então eu fui em frente e nomeei esta imagem um. Este era o número dois. Isto foi livre de números. Então, ele vai adicioná-los nessa ordem específica. Vou fazer o mesmo por estas imagens. Então estes são 0102 e 03 Agora eu vou mudar alguns desses nomes para que esta possa ser Jane Doe. Tudo o que você tem que fazer é simplesmente clicar duas vezes no nome e ele vai mudar esse nome. Vamos chamar isso, por exemplo. Sabe, Paris, França. Vamos ver e mover um para baixo. E isso vai ser há quatro minutos, porque está passando do mais recente até o final. Então, vamos mover isso para, por exemplo, seis minutos atrás. Só isso. Um pouco de interesse visual. E vamos ligar para esse cara. Mas não conheço o James . Digamos assim, e vamos deixá-lo em Londres, Inglaterra, Inglaterra, por causa das chaves. Você também pode alterar quantos comentários cada imagem tem, mas eu não vou fazer isso. Talvez eu possa fazer isso por isso. Tão real. 18 comentários e o 3º 1 vai ser 24. Então é basicamente isso para este. E nós vamos passar para a próxima tela no próximo vídeo, então eu vou te ver lá. 86. Como criar design 2: vamos agora projetar esta imagem tela aberta e porque já sabemos o nome dessa pessoa. Vamos apenas abrir o cartão localizado avatar, e eu vou arrastar e soltar a imagem lá dentro. Mas você tem que ter cuidado para não cair. Solte-o sobre esta imagem, mas sobre esta imagem, e você vai ver estes realce azul quando você doce entre eles instantaneamente letra ir. Vamos remover a borda porque queremos manter a consistência com este, e eu vou mudar a cor do texto do dedo do pé branco. Você verá o porquê em um segundo. Eu também quero mudar a cor desses ícones na música superior Inside Back Arrow, Homer Control Select menu, e eu vou mudar a cor do dedo branco também. Além disso, o que eu quero fazer aqui é ir em frente e reduzir o seu pastoso para zero como está bem aqui , porque nós vamos colocar um pouco de radiante bem aqui. Em seguida, deixe-me arrastar e soltar minha imagem dentro, então eu vou simplesmente selecionar a imagem aqui e arrastá-la e soltá-la da minha área de trabalho. Então é esta imagem bem aqui, e você pode mantê-la uma disposição. Vai fazer zoom no centro. Se eu clicar duas vezes, você pode ver o que ele faz ou você pode dobrar, clicar e, em seguida, manter a tecla shift e, em seguida, movê-la para a esquerda ou para a direita se isso é algo que você quer. Mas eu acho que isso funciona bem o suficiente, você pode tê-lo como ele é aqui mesmo. Ou você pode adicionar um leve radiante e isso é o que eu vou fazer e ir dedo do pé adicionar um pouco de dedo radiante, talvez por aqui. E se nosso Senhor você basear isso é apenas um pouco para que possamos vê-lo. Talvez o Grady em pode terminar aqui, por exemplo, algo assim em 1 60 e o que eu quero fazer é remover a borda, clicar na cor do campo em vez de cor sólida, escolher ingrediente linear, e o que eu quero fazer é realmente pisá-los para que a cor mais escura vá para o topo. cor mais clara vai na parte inferior assim, e eu vou escolher um preto escuro aqui e para o branco. Eu vou baixar a cidade paga aqui mesmo 20 e depois fui para o pé. Talvez até mesmo mover este um toque, também aqui e clique na cor preta e, em seguida, tudo sobre ele. Então, basicamente, para baixo um pouco. Então você tem este leve radiante bem aqui no topo e todos os outros ícones ficam como estavam, então você pode até movê-lo para aqui. Tão ligeira, radiante. Nós não precisamos de nada especial, e você pode mover esta cor branca tanto quanto você quiser para o topo se isso é algo que você quer e você achou necessário. Mas vamos mantê-lo assim. Por exemplo. Vamos chamar isso de radiante, e vamos colocá-lo logo acima de nossa imagem e logo abaixo do texto e todos esses ícones e barra de status para que ele não corrompa com nosso design. Então há basicamente isso para esta tela. Você pode até mesmo mudar a cor deste logotipo, mas eu acho que vai funcionar muito bem, dependendo de suas imagens que você incluir insight, e eu encorajo você a experimentar com diferentes imagens para este projeto. Então você vai obter este arquivo de projeto e você pode saltar dentro de uma notícia exatamente as mesmas imagens que você vê daqui para que você possa clicar duas vezes dentro, localizar o controle de batida de imagem C. E em algumas dessas próxima tela, você pode ouvir patrulha ser notícia exatamente a mesma imagem que eu usei. Mas eu realmente encorajo você a praticar com suas próprias imagens para que você possa obter resultados diferentes . E então você pode postar isso em seu portfólio. Agora para esta tela e nova imagem. Nós não vamos mudar nada porque dentro da seção de prototipagem deste curso , nós vamos brincar com este fundo e nós estamos indo para o pé. Adicione uma pequena animação aqui antes que os usuários cliquem em Adicionar da galeria. Mas a partir da galeria em si, precisamos de um grupo na grelha e localizar a imagem número um, que é esta aqui. Eu só vou dar o dedo do pé. Removê-lo todo o caminho até aqui, logo abaixo agora Bar e eu vou excluir tudo, porque em ordem para incluir imagens usando repetição de nota, você tem que começar com um, não com três, como eu mostrei na seção de design deste curso, mas é muito simples de criar assim. Então você só tem uma imagem em vez de três seguidas. Então você apertou a grade de repetição e eu verifiquei que havia 19 pixels entre eles. Então eu estava ampliando um pouco mais perto, mais perto poço grande bem aqui e ter um mais baixo direito aqui e escolher 19. E como você pode ver, os toques são um grande neste caso. Então tudo o que eu tenho que fazer agora é simplesmente arrastar esta alça verde todo o caminho até o fundo assim. E agora eu posso adicionar minhas imagens para que eu definitivamente vou bastante aqui imagens, e eu posso remover a borda dele porque eu não preciso mais dele. E eu tenho algumas imagens já baixadas de um “splash dot com”. Vou pegar todos eles, arrastar e soltá-los dentro de nossa grade de repetição. E como você pode ver, ele vai preencher nossa repetição Grande com essas imagens para que você possa verificar se você tem tudo corretamente. Então, por exemplo, eu posso clicar duas vezes aqui, e talvez eu possa reposicionar essa imagem. Talvez isso parece toque Branco ou não, você pode clicar duas vezes em qualquer um deles, e você pode reposicioná-los se precisar. Então, por exemplo, podemos mover isso até aqui, talvez, e isso está fora de lugar. Talvez possamos nos posicionar para ouvir este também. Para ouvir que eu conduzo como aqui mesmo em posição. Este Ah, um pouco variado. Ele pode segurar seu turno e suas setas teclas de seta. E você pode reposicionar essas imagens como quiser. Talvez eu possa mover o seu toque acima e talvez posicionar o 1º 1 até aqui e vamos ver este. Sim, é bom. Então vamos chamar isso e pronto e digamos que nós povoamos todas as nossas imagens. E no próximo vídeo, vamos começar com Adit Image, e eu quero mostrar como você pode selecionar essas imagens e para fins de simplicidade. Vamos usar a primeira imagem da nossa grelha. E para que a nossa proteção Stover corretamente, precisamos no grupo discreto porque precisamos que os usuários toe ser capaz de clicar nesta primeira imagem e não em toda a grade. Então eu estou indo toe ungh, corda o grande hit Control G mais uma vez e chamei essas imagens porque agora nós temos imagens separadas bem aqui. Então eu vou vê-lo no próximo vídeo quando vamos começar a projetar no resto dessas telas. 87. Como criar design 3: Então aqui estamos com a tela de edição de imagem e o que temos que fazer como explicar no vídeo anterior . Eu só vou usar esta primeira imagem para que você possa localizar a imagem aqui e você pode arrastá-la e soltá-la da sua pasta. E agora você pode reposicioná-lo como quiser. Eu vou clicar duas vezes aqui porque você pode ver que é uma imagem de paisagem e oposição até aqui, então, estes acreditam, estes acreditam, são um pouco a partir deste centímetro. Como você pode ver, este “A “está em foco, e talvez eu possa movê-lo assim. Mas é mais fácil para nas próximas telas dedo do pé. Faça assim, e eu vou deixar assim. Todas essas imagens podem indicar como seriais esses ícones podem indicar como eram, e agora vamos passar para isso para que eu localizarei a imagem, esconda minha cor. Excesso. Vou arrastar e soltar a mesma imagem dentro, embora clique mais uma vez reposicioná-la para a mesma posição. Então é por isso que eu estou usando essas folhas porque há grande ponto de referência para que eu possa movê-los , por exemplo assim e eu posso agora clicar na sobreposição de cor trazendo de volta e talvez você pode reduzir o tamanho de Desculpe, Você paga cidade dele toe talvez 60% da noite de domingo que para que os usuários possam ver o que eles estão cortando ou talvez até 50%. Então você pode clicar aqui, apertar cinco no seu teclado, e ele vai diminuir. Você base cidade off para 50%. Você também pode brincar com esses modos de mesclagem para que você possa usar escuro e você pode usar chamado queimar, por exemplo. Mas eu não vou fazer isso no momento. Eu só vou usar um pastoso em 50% porque temos esta área de corte de imagem e, em seguida, uma vez que você está pronto para publicar, Então, se você optar por cortar esta imagem, você pode cortá-la assim. Mas se você optar por não fazer isso, você condensa simplesmente tê-lo como está aqui. E é isso que vou fazer. Eu só vou clicar duas vezes aqui e agora eu posso ampliar essa imagem muito. Bem, por exemplo, aqui e aqui está. Isso é basicamente como vai parecer em nossos pés e mais tarde vamos copiar esta imagem no modo de prototipagem. Vamos adicioná-lo lá para que você possa adicionar alguns ícones aqui. E é isso que vamos fazer a seguir. Então eu tenho essa imagem. Desculpe, tenho este ícone selecionado. Vou pular bem aqui. Zoom em onde isso eu poderia é eu vou apertar o Controle V e eu vou apenas reposicioná-lo um pouco melhor. Mas desative o redimensionamento responsivo porque eu não quero que ele redimensione de forma responsiva todo o ícone, apenas indo para casa uma tecla shift até aqui. E talvez eu possa posicioná-lo 20 pixels para a esquerda e movê-lo para onde deveria estar. Então aqui está, e eu vou usar a mesma cor. Talvez eu possa até movê-lo 40 pixels, mas eu acho que 20 pixels funciona bem, mas vamos verificar em 40. Na verdade, 40 é ainda melhor porque você pode imaginar que este é um espaço muito pequeno no seu telefone, e o usuário tem que tocar isso com os dedos. Então vamos usá-lo em 40 pixels. Então eu só vou apertar o controle. C pulando bem aqui, aperte Controle V. Ele vai colá-lo no mesmo local, e eu vou usar esta cor branca para ele aqui. Você também pode brincar com mais detalhes aqui e adicionar, por exemplo, se você quiser cortar esta imagem em 16 por nove ou um por um, ou para instagram e assim por diante, e você pode adicionar isso para ser barra de rolagem bem aqui em o fundo. Mas não vou fazer isso neste caso porque falei com o cliente. Eles só querem manter as coisas simples o máximo possível para esta primeira rodada e, em seguida na próxima rodada, nós vamos apenas brincar com mais detalhes porque eles não têm o bloqueado em, hum, hum, formatar fora imagens que a insulina tem, por exemplo, porque o Instagram realmente gosta desse tipo de imagens quadradas, enquanto o Facebook realmente gosta desse tipo de paisagem. Então é por isso que eles escolheram não ir com cada um e depois deixar os usuários carregarem o que quiserem e depois verem como tudo funciona. E se for uma fase posterior, eles querem fazer algumas mudanças em relação a isso eles farão. Mas agora nos estágios iniciais. Eles só não querem sobrecarregar seus usuários com esse tipo de informação. Eles só querem o maior número possível de usuários desde o início. Então, agora vamos terminar rapidamente este. E eu só vou adicionar imagem do nosso avatar aqui, indo para remover a borda para mantê-lo consistente. E então você pode pegar as pessoas bem aqui. Mas não vamos fazer isso no momento. E vamos apenas digitar Então hashtags bem aqui. Então o que eu vou fazer é estender este dedo do pé de texto aqui, e eu vou clicar duas vezes dentro e simplesmente esconder tudo daqui. Mento terminou com os pontos, e eu vou digitar alguns aspectos. Então vamos ver o que temos em nossa imagem. Então talvez possamos digitar, por exemplo, interiores mínimos, por exemplo, decoração e, por exemplo, minimalista assim, e podemos selecionar este texto, nós pode clicar na cor. Podemos mudá-lo para azul apenas para adicionar um pouco mais de interesse visual para essas tags, e você também pode brincar com isso e explorar um pouco mais. Mas certifique-se de atualizar isso uma vez. Baseaste-o bem aqui. Então vamos fazer isso na seção de prototipagem fora do discurso. Nós vamos usar exatamente as mesmas configurações que um mostrou a você, e nós estamos indo toe pay place. Esta imagem que acabamos de criar acima desta e, em seguida, vamos fazer protótipos. Vejo vocês no próximo vídeo quando terminarmos nossos projetos. 88. Como criar design 4: vamos agora terminar nossos projetos e não vamos tocar no painel porque eu acho que isso funciona muito bem para este projeto. Mas vamos seguir em frente para curtidas, e vamos fazer algumas mudanças aqui. Então, as primeiras coisas primeiro, olhando bem aqui. Vou abrir a imagem e vou selecionar algumas imagens daqui, e vou simplesmente arrastá-las e soltá-las à vista aqui. E como você pode ver, eles povoaram esta repetição muito bem. Deixa-me só verificar. Se eles se repetem, não se repetem. E agora vou pular para dentro e me trocar. Alguns desses estados começam. Então isso foi há três minutos. Isso também foi há três minutos. Isto foi, digamos, há cinco minutos. Isto foi, digamos, 15 apenas para tornar as coisas um pouco mais interessantes. Então é chamado de 20 e para mudar este último. Vamos esconder a barra de abas e este será um 25. Digamos que esta é a Jane. Não sei, Frank Esta é a Mary. Sim, digamos que isso foi franco também, e você pode obviamente incluir nomes diferentes usando essa ótima função de repetição. Então deixe-me ligar. Sim, deixe que estes Toby Jane você pode adicionar criar apenas uma camada de texto normal e um arquivo de texto e simplesmente digite alguns fora dos nomes padrão que você encontrar on-line, e você pode então arrastar e soltar a camada de texto aqui mesmo em seu texto, e ele irá atualizá-los em tempo real para que eles possam rapidamente criar apenas documentos de texto básicos . Então, se eu abrir, você pode ver como isso se parece. Então é chamado de massa franca. É baseado em algumas vezes, assim, assim, e você pode chamar isso de marca. Pode chamar isso de próximo. A Jane. Você pode ligar para este, vamos ver. E Mark, vamos ser assim. Não sei, Jenny, e sejamos francos também, e você pode sair. Você pode fazer isso, obviamente, no Windows e no Mac também. E então você pode pegar seu documento fiscal arrastar e soltá-lo nesses nomes, e ele irá preencher em tempo real para que você possa fazer isso, ou você pode fazê-lo como eu já mostrei a você. Mas ele vai mudar o nome para novo documento de texto porque eu não mudei o nome disso para que você possa alterá-lo, por exemplo, nomes de usuário ou algo assim, e ele vai ser atualizado em tempo real. Você pode fazer isso para qualquer camada de texto que você encontrar aqui, especialmente se eles estão repetindo. Então, por exemplo, se você tem algo como locais ou você tem eu não sei esses três minutos, quatro minutos, cinco minutos e assim por diante. Você pode fazer isso para todas essas camadas de texto, mas apenas certifique-se de nomear esse arquivo porque ele vai atualizar o nome do arquivo e o nome da camada aqui. Então vamos trazer a conta. Estão de volta. Vamos passar para esta tela. E este deve ser o John só para manter as coisas consistentes. E se verificarmos aqui é John, e vamos arrastar e soltar a mesma imagem do usuário aqui e do Onley. Vamos mudar, certo? Aqui estão estas imagens, mas vamos fazer o mesmo. Quanto ao anúncio da Galeria estavam indo de pé no grupo para grande. Vamos localizar a primeira imagem, que é esta. Vou dar o dedo do pé. Mova-o aqui mesmo. Vou selecionar. Tudo deve excluir Klay bastante aqui. Bater. Repita. Ótimo. E eu vou fazer três instâncias aproximando muito mais. Feche aqui e eu só vou fazer 19 como está aqui. E você pode se posicionar para estar no centro e tudo o que eu quero fazer é agora alto. A conta está lá, e eu vou estender todo o caminho até talvez aqui. Sim, isso funciona bem. E contra quem? Em um pouco mais perto, para fechá-lo bem aqui e ser preciso. E o que eu posso fazer é então selecionar todas as minhas imagens e, em seguida, arrastá-las e soltá-las dentro de sua indo para preencher. E é importante que esta seja a primeira imagem que estamos usando porque essa imagem vai preencher bem aqui. O que você também pode fazer é duplicar este ótimo porque é exatamente o mesmo. E então simplesmente arraste e solte na posição. E talvez possamos fazer isso. Você provavelmente bateu no controle C e então pulou bem aqui. Mas eu queria mostrar a vocês essa opção também, e eu vou apertar Controle V e eu vou apenas mover essas imagens aqui porque se você lembrar, nós mudamos parte da posição dessas imagens e fazer tudo parecer consistentes, vamos continuar assim. Agora vamos movê-lo para cá. Excluir são um pouco grade, e tudo o que eu quero fazer a partir dessas imagens é simplesmente saltar à frente e excluir algumas delas. Então eu vou começar de baixo e excluir estes e excluir este último também . E ninguém inclui aquele bar de volta. Você pode ver que parece bem. Você também pode encomendar essas imagens se você quiser, e isso deve ser imagem um em rua uniforme e assim por diante. Ou você pode simplesmente exportá-los assim. Mas isso vai ser outro assunto. Pode se tornar prototipagem, e eu vou mostrar como você pode alterá-los em seus protótipos mais tarde e como você pode exportá-los para facilitar o acesso. Mas agora vamos finalmente lidar com a tela do menu do site. Tudo o que eu quero fazer aqui é incluir mais uma imagem em foi usar essa mesma imagem splash, então eu vou apenas arrastar e soltá-la dentro, e eu vou incluir um borrão de fundo quando tudo o que eu quero fazer aqui é aumentar o apace iti Apenas um pouco. Então, por exemplo, talvez 5%. Ou vamos mantê-lo em 6%. Então, tudo ainda é visível. E isso vai adicionar apenas um pouco mais de interesse visual como ele vem para baixo das bordas superiores nossa tela. E é basicamente isso para o design. Eu vou vê-lo na seção de prototipagem, que vem em seguida no discurso, e nós estamos indo para o pé. Adicione algumas alterações em alguns ajustes aqui e ali. Vamos incluir várias outras telas. Eu vou mostrar a vocês como você pode mudar algumas dessas imagens porque nós temos esses controles deslizantes bem aqui. Vamos alterá-los e fazê-los fazer algumas mudanças nesta imagem. E então nós vamos atualizar essas mudanças para esta e para esta imagem. E finalmente, eu vou mostrar a vocês como você pode visualizar esta imagem em sua tela inicial bem aqui, como ela vai aparecer e mover todas essas imagens para baixo e assim por diante. Então nós vamos brincar com isso, e nós vamos brincar com alguns desses nomes de imagens porque nós vamos então exportar tudo isso para desenvolvedores e para nossos clientes. Então teremos que fazer isso em uma parte mais tarde fora do curso. Mas não vou fazer isso agora porque vai demorar muito tempo. E nós vamos fazer duplicatas dessas camadas de qualquer maneira. E nós vamos mostrar esse dedo aos nossos clientes mais tarde quando chegarmos à fase de prototipagem fora discurso, então eu vou te ver no próximo vídeo. 89. Prototipagem 1: neste vídeo, vamos começar a criar nossos protótipos. E para fazer isso, eu vou fazer uma duplicata de todos esses projetos porque se eu não puder ampliar todo o caminho , você pode ver que nós propositadamente colocamos tudo que criamos até agora bem aqui neste canto esquerdo fora do nosso ritmo prancha. E agora vamos duplicá-los e depois simplesmente colocá-los aqui à direita. E agora deixe-me aproximar um pouco mais. Vou selecionar todas essas telas. Ele controlou o dedo do pé, fez uma duplicata e, em seguida, simplesmente movê-los para algum lugar por aqui, por exemplo, em 200 para que tenhamos o mesmo espaçamento entre estruturas de arame de porta estilo tese, design e finalmente protótipos. Em seguida, vou simplesmente duplicar este texto de design e clicar duas vezes aqui e digitar protótipos ou simplesmente proteger e mover o texto aqui porque teremos muito mais telas em um momento . Mas, por enquanto, vamos deixá-la. Uma espinha é a primeira coisa em primeiro lugar. Deixe-me selecionar todas essas telas porque eu vou trabalhar nas telas de carregamento primeiro , e o que eu vou fazer é clicar nele e, em seguida, fazer duas cópias. E para esta primeira cópia, o que eu vou fazer é girar este 360 graus. Como assim. E para este, eu vou deletar e depois duplicar este porque é mais fácil porque giramos 360 graus, então simplesmente copiar este em vez disso. E então o que eu quero fazer é simplesmente ampliá-lo para casa. Um turno velho e clique esquerdo. Velho caminho para aqui, por exemplo, algo assim. Então, deixe um pouco dele bem aqui, dentro da sua tela. E eu vou também, abaixe seu pastoso para zero. Em seguida, vamos fazer o mesmo para a nossa imagem. Então, ampliando todo o caminho até aqui, por exemplo? Porque eu quero ter esta parte preta cobrindo esta parte branca. Então, indo para o pé em cima, zoom muito e fazer algo assim. Então, até conseguir basicamente algo como isto. Então está cobrindo toda a sua tela. Sim, algo assim. E agora chega a hora de protótipos. Então o que eu vou fazer não vai clicar neste. Protótipo Quicken. Fui arrastar o meu azul, mandei até aqui. Vamos usar o tempo de atraso de 0,6 segundos. Vamos usar carro e carne. Vamos usar nota fácil e, finalmente, durante a duração, vamos usar dois segundos. E agora, depois disso, precisamos conectar essa e essa tela. Então o que eu vou fazer, e eu vou fazer isso muito nesta seção do curso, eu vou mover essas telas para trás e para frente, porque agora nós temos essas três telas. E para manter a consistência, vou movê-los aqui. Então o que temos para a primeira tela não vamos fazer para a segunda tela. Então eu vou clicar e arrastar a vela azul bem aqui. Vamos usar o tempo 0,6. Também animar, aliviando. Mas, durante a duração, queremos usar 0,6 segundos. E, finalmente, para os agitados são pobres. O que vamos fazer arrastou vela azul para ouvir tempo de uso e para o atraso, vamos tocar duas vezes são zero. Mantenha o dedo do apresentador, tem um atraso de zero segundos. Animadores de automóveis. Bem, nota fácil e 0,6. E vamos saber, pré-visualizá-lo. Vou clicar aqui mesmo. Você pode ver através de gira em maior e ele desaparece e nos apresenta com esta tela. Então, se verificarmos mais uma vez você pode ver as gira e gira Mais uma vez desaparece e nos apresenta hoje Scream no próximo vídeo. Vamos começar a trabalhar na tela inicial, então te vejo lá. 90. Prototipagem 2: Não vamos trabalhar na tela inicial, e eu vou mudar para a torneira de design bem aqui, e eu vou fazer isso mais uma vez. Então eu vou selecionar todas as nossas outras telas, movê-lo, e eu vou simplesmente fazer uma duplicata com aqui, e então eu vou trazê-los todos de volta para aqui. Na verdade, vamos ter mais dessas telas iniciais nos próximos vídeos. Mas, por enquanto, vamos continuar assim. Então, para este, vamos começar com isto. Então, se eu pular dentro do painel de camadas, você pode ver que nós temos este cartão. E o que eu quero fazer neste é simplesmente segurar minha tecla shift rápido e depois movê-los até o topo. Em seguida, uma vez que eles estão alinhados com a nossa guia, você pode apertar shift em nosso perigo duas vezes para mover 20 pixels para o topo. Agora, quando voltarmos para o fosso de prototipagem, posso simplesmente clicar nele e arrastar esta alça azul até aqui. E em vez de tocar, vou usar arrastar. E para facilitar, você pode usar fácil e fora apenas para manter tudo consistente e, em seguida, simplesmente trazendo de volta para aqui. Então, uma vez que visualizamos, você pode ver como isso se parece. Então tudo poderia ser arrastado para cima e para baixo assim, e funciona perfeitamente. Agora, a idéia com isso é que vamos carregar a nova imagem em algumas dessas outras telas, e então nós vamos fazer essas mudanças um pouco mais tarde. Mas, por enquanto, vamos continuar assim. Agora vamos clicar duas vezes aqui dentro desta imagem, e o que queremos fazer é arrastar isso para aqui. Nós vamos para você pisar ou dedos animar, fácil e sair. Vamos ver, Talvez possamos usar, por exemplo, 0.4 segundos aqui, e o que queremos fazer aqui é clicar duas vezes um, este, este, arrastá-lo aqui e usar as mesmas configurações, porque nós Quero que as pessoas sejam capazes de arrastar isso na cidade para rolar para cima e para baixo. E então quando eles clicarem aqui, ele também será animado para este. E quando você quiser voltar, você pode clicar aqui, e ele vai levá-lo de volta. E o que eu também quero é. Eu quero clicar nesta imagem que eu quero ir todo o caminho para a tela de perfil para que você possa localizar a tela de perfil aqui. Você pode simplesmente arrastar esta alça de sopro e usar as mesmas configurações. E o que eu quero é daqui. Eu quero que as pessoas sejam capazes de clicar nesta imagem e depois ter a mesma experiência aqui. O que também precisamos fazer é conectar alguns deles. Então eu vou chamar o meu controle, manter e clicar dentro deste ícone de curtidas. Posso fechar o carro porque não preciso mais dele. E quando eu clico nos gostos, eu quero ser capaz de ir para a tela de curtidas aqui. Então eu vou simplesmente arrastar esta alça azul até aqui. E então eu quero clicar aqui e, em seguida, arrastou Toe adicionado Esta nova imagem. Teremos os mesmos efeitos para todos eles e finalmente clicaremos no perfil, e eu quero poder ir para a tela de perfil aqui. efeitos para todos eles e finalmente clicaremos no perfil, E esta é a parte mais chata porque é tão tedioso de fazer. Mas você realmente tem que fazer isso, porque caso contrário isso não vai funcionar corretamente. Então isso é para os gostos. Você pode manter o controle e clicar dentro, mas tem que ampliar um pouco mais perto porque este está cobrindo. Você pode clicar no add, e ele irá levá-lo para esta tela. E, finalmente, quando você clicar no perfil, ele irá levá-lo para a tela de perfil. E vamos fazer isso mais uma vez por isso. Tão velho clique duplo aqui. Mantenha o controle e clique dentro para selecionar o ciclo e outros gostos localizados. Basta arrastar uma pequena alça e ele vai clicar aqui para a formiga, e eu vou arrastá-lo para aqui e finalmente segurar o clique de controle e, em seguida, simplesmente arrastá-lo para o perfil. Então, uma vez que você bonita com mais uma vez para ele jogar com este ano, você pode arrastar para rolar para cima e para baixo. Você pode clicar neste, e quando você clicar aqui, ele irá levá-lo para a tela de perfil para que basicamente para este vídeo no próximo vídeo, vamos começar com a imagem aberta e vamos adicionar alguns efeitos. Então, quando as pessoas clicam aqui para gostar desta imagem, ela vai mudar e adicionar uma transição agradável e sutil e mudar a partir deste dedo vazio um coração vermelho, então eu vou vê-lo lá. 91. Prototipagem 3: Não vamos brincar com essa tela aberta de imagem. Vou voltar para a minha guia de design e Samos antes de selecionar todos os nossos portos e simplesmente movê-los para fora do caminho por enquanto. E neste 1º 1 o que vou fazer é saltar para dentro e localizar o ícone de curtidas. Aqui está, e eu vou bater no controle D para fazer reboque bíblico. Vou chamá-lo de Campo Curtido, por exemplo, e vou esconder isso por enquanto. Vou clicar duas vezes aqui, e você tem todos esses pontos e todas essas notas estão formando este ponto. Então, quando você excluí-los, ele cobrirá tudo, e você só ficará com a forma plana e a forma preenchida. Na verdade, se você não tem Aiken que tem este campo, bem como, ah, forma de traçado, então você usá-los. Mas se você não fizer isso, este é o método que você pode usar. E finalmente, para a cor de preenchimento de colagem simples, a cor já escolheu, e é essa cor vermelha e deixe-me adicioná-la rapidamente aqui à amostra de cores e também saltar aqui e adicionado aqui também. Eu vou saltar para trás e em desgostos preenchidos nesta primeira tela vai mantê-lo em zero ou pagar cidade . Vou trazer isto de volta e o que vou fazer é duplicar isto. E neste segundo estado, o que eu quero é trazer o coração de volta. Então eu vou trazê-lo de volta assim. Eu vou reduzir isso para zero e um monte de secura em apenas um pouquinho. Então você pode segurar, deslocar velho e clique esquerdo para que eu possa ampliá-lo para aqui, por exemplo, e o que queremos fazer agora, em vez de copiar este, eu simplesmente copiei este primeiro 1 porque ele tem todo coração original dentro e eu vai saltar para dentro, garoto Meus gostos, assim e menor cidade Dupay deste 20 Então ele vai transição de ser invisível aqui , dedo do pé ser visível e grande e, em , seguida, voltar para a sua posição original e tamanho para que eu possa Feche isso. Também fecharei todos se estiverem abertos. Eles estão bem aqui. Então o que temos que fazer agora é saltar para dentro e protótipo de tudo. Então o que eu quero aqui é Ochlik bem aqui. Em seguida, clique no ícone do coração e arrastou o dedo azul punho aqui eo que eu quero um passo ou dedo animado, facilitando e 0.6 segundos. Não, eu vou simplesmente clicar em toda esta nossa porta um arrasto, meu dedo azul punho aqui e o que você quer usar este atraso de tempo fora de zero segundos. Inimigos automáticos estão fora e 0.4 segundos porque queremos ter este pequeno atraso quando as pessoas clicam aqui. Queremos que esta ação aconteça usando o gatilho de tempo do tronco e ele mudará, em seguida, rebocar este tamanho original e esta forma original. Então vamos pré-visualizar rapidamente para que as pessoas possam pular aqui. Abra esta imagem, e se eles querem gostar como você pode ver, parece muito bom. É uma espécie de saltos deste lugar e usando o gatilho temporal, ele voltará para este. Então, se eu mudar mais uma vez quando você clicar nele, ele vai tipo de saltar para fora e, em seguida, ir para a sua posição original. Então agora o que podemos fazer é simplesmente pular em frente. E como este foi um gatilho temporal, eu não vou usá-lo. Mas você pode clicar aqui e toda a torneira em um desses e você pode ver que é fácil entrar e 0.4 segundos e nós podemos fazer isso para todos eles aqui. Então eu conduzo clique aqui, localizo meus gostos. É neste e 0.4 segundos, e eu posso clicar aqui mesmo dedo do pé. E finalmente eu posso clicar aqui para perfil saltou um perfil porque mais uma vez, este é um gatilho de tempo e ele vai voar em apenas 0.6 segundos, e ele vai pousar sobre este aqui para que você não tenha que criar as áreas de estepe neste. Então é isso para este vídeo. E no próximo vídeo, vamos saltar para dentro e começar a trabalhar na adição de nova imagem, galeria de imagens e finalmente adicionar imagem. Vamos iniciar esta tela porque ela irá conter um monte de telas diferentes quando chegarmos a ela. Então eu vou te ver no próximo vídeo 92. Prototipagem 4: neste realmente tudo. Vamos continuar de onde paramos e começar a trabalhar em New Image porque vou ter mais uma tela. Deixe-me mover rapidamente essas telas para a direita, assim, assim, e eu vou pular dentro do meu modo de design, Hit controle V dedo do pé, fazer uma duplicata dele eo que eu quero fazer aqui. Eu quero que este seja o meu estado final, então será oito pior originalmente. Mas para este, eu vou simplesmente saltar para dentro e mover algumas dessas partes ao redor para que eu possa mover isso um pouco para a direita e posso mover isso um pouco para a esquerda. Isto vai para a direita. Isso vai para a esquerda, e o que eu também posso fazer é simplesmente uma rotação. Estas folhas apenas um pouco como assim porque eu quero fazer apenas um pouco de interesse visual . Então, quando as pessoas pousam nesta tela, que é a tela quando muito cedem, partir do que eles clicam sobre isso, adicione novo botão de imagem, em seguida, desenvolva esta tela. Uma pequena animação vai acontecer na transição para esta tela, e agora eles podem clicar da galeria e, em seguida, ele vai levá-los para a caloria ou da câmera, para que o assunto, e ele vai levá-los para a câmera. Então agora vamos saltar para trás prototipagem fosso. Vou simplesmente arrastar a minha vela azul de todo o nosso porto, e vou usar o tempo. Zero segundos para o atraso. Também animar flexibilização e a duração é de dois segundos porque eu quero que isso seja capaz de fazer a transição bem. Então, quando eu clicar em pré-visualização, você pode ver o que ele faz. Basicamente gira essas folhas e volta à sua posição original. Então, se eu visualizá-lo mais uma vez, você pode ver como isso se parece. Então, apenas uma pequena e pequena animação que vamos tocar quando as pessoas chegarem lá agora, porque não temos que adicionar mais telas enfraquecer, saltar para trás e fazer deste dedo a sua posição original. E o que queremos deste aqui é que queremos que as pessoas cliquem na galeria. Então, quando eu clicar aqui, vamos arrastar esta alça azul. Você vai pisar em vez de inimigo foto para? Vamos usar a transição e para a animação vamos usar ligeiro. Assim, assim e a duração vai ser 0,6 segundos, como tão fácil uma saída Porque queremos que as pessoas sejam capazes de clicar aqui, e então toda a tela vai deslizar para cima de baixo. Então, quando eu clicar aqui, Preview, clique em add from gallery, você pode ver como isso se parece e agora as pessoas vão ser capazes de clicar aqui, e ele vai levá-los para esta tela. Então agora vamos trabalhar nisso rapidamente, e eu vou fazer mais uma cópia da imagem Adit. Então o que eu realmente vou fazer é simplesmente mover em vermelho o resto dessas telas para fora do lugar, do lugar, como Então eu vou clicar sobre este e fazer uma duplicata assim. E o que eu quero fazer aqui é quando as pessoas fazem a transição desta para esta tela, eu quero que isso leve para cima de baixo, por exemplo. Então o que eu vou fazer é que eu posso até saltar de volta em duplicado Desculpe, deletou este, e eu posso selecionar todos estes e apertar o controle G e chamá-lo de controles deslizantes como assim porque vai ser fácil para mim dedo do pé. Mova-os como um grupo. Agora eu vou apertar o controle D e nesta primeira tela vai simplesmente mover isso para fora do caminho todo o dedo do pé aqui, por exemplo. Mas só me certificando de que parte dele fica dentro do nosso porto, e eu simplesmente vou pisar em toda a base deles. É para baixo. Agora. O que podemos fazer é clicar aqui e clicar na nossa primeira imagem. Isto vai saltar para fora, e depois de um certo tempo, isto vai saltar do dedo do pé para cima do fundo. Então vamos ver como fazer isso. Vamos entrar no modo de prototipagem. Vou clicar nesta imagem, arrastar minha alça azul para aqui e o que realmente queria adicionar aqui Passo também animar para a transição. Fácil uma saída e 0.4 segundos porque eu quero que isso aconteça rapidamente. E agora, depois disso acontecer, quero poder saltar disto para isto. Então, na verdade, vou usar o gatilho temporal. Assim. Atraso é em zero segundos auto animar fácil. Uma saída e duração 0,6 segundos. Então, quando você clicar bem aqui primeiro, vamos voltar ou todo o caminho para este aqui. Então, quando eu clicar na galeria, ele vai nos levar para a galeria. Você pode clicar na primeira imagem, e como você pode ver, ela abre esta primeira imagem, e esses controles deslizantes saltar para fora de baixo. Então, se uma pré-visualização mais uma vez, você pode ver esta ligeira falha Nets porque este são pobres é cor branca. E este nosso porto é de cor cinza. É por isso que temos esta pequena falha. Então é basicamente isso para este vídeo. E no próximo vídeo, vou mostrar como você pode adicionar imagens diferentes aqui, e vamos mover alguns desses controles deslizantes para que os usuários possam realmente fazer alterações nessas imagens em tempo real. Então, vemo-nos lá. 93. Prototipagem 5: vamos saber, fazer alterações nesta tela. Mas antes de irmos, vamos trabalhar rapidamente nestes porque esqueci de adicioná-los mais cedo. Então eu vou clicar duas vezes aqui nesta seta para trás clique aqui e você está indo para você passo e em vez de auto Inimigo para nós estamos indo para a transição. E aqui vamos fazer, por exemplo, por exemplo, pouco à esquerda. Veja como isso parece. Então, quando clicamos aqui, clique em pré-visualização da galeria e em um pouco à esquerda. Mas vamos ter que fazer engenharia reversa, então eu vou clicar aqui. Está deslizando para cima, então vou simplesmente colocá-lo leve. Não, eu vou trazê-lo de volta para esta posição original. Então, se eu clicar em pré-visualização, clique aqui e, em seguida, clique em voltar, ele vai nos levar para esta tela. Então isso funciona bem. E para este, podemos simplesmente clicar a partir desta seta para voltar para a tela e você pode usar sleight esquerda assim transição e, em seguida, leve esquerda. Veja como isso parece. Então vamos pré-visualizar esta tela, e quando você clicar nesta seta, ele irá levá-lo aqui. Mas eu acho que deslizar para a direita realmente pode funcionar ainda melhor. Então deslize para a direita? Pré-visualização de calor? Sim, funciona muito melhor, então é fácil. Pense no Adobe X'd. Quando você esquece algo, você pode facilmente saltar para trás e fazer essas alterações e ajustes em uma questão fora de segundos. Então, como vamos adicionar mais algumas telas aqui, deixe-me mover rapidamente todos esses fora do caminho. Então a primeira tela que eu vou adicionar vai se chamar Brilho. Então, clique duas vezes aqui e eu chamarei isso de brilho. Então deixe-me fazê-lo rapidamente a partir daqui e vamos mover esses controles deslizantes ligeiramente. Então clique duas vezes aqui porque vamos acionar o brilho a partir desta tela. Então deixe-me clicar duas vezes aqui. Cor do controle deslizante. Vou movê-lo, por exemplo aqui. Em seguida, clique no círculo, segure minha tecla Shift até ver esta cruz aqui. O que significa que está no centro a partir desta cor de slide. E agora, quando fizemos isso, podemos fazer outro para buscá-lo. Vamos chamar isso de contraste. Então, quando as pessoas movem o controle deslizante de contraste aqui, ele também será atualizado aqui. Então nós conduzimos semana aqui neste controle deslizante para o contraste e movê-lo para aqui, por exemplo, apenas um pouco. E então mova o dedo do círculo. Aqui. Você pode fechar isso. Faz outro controle de calor duplicado, não é? Isto vai ser destaques. Basta excluir isso e para os destaques. Eu quero ir um pouco mais baixo porque geralmente com as imagens de luz do do, você quer ir mais baixo em destaques porque os destaques já são realmente fortes lá. E finalmente, vamos trabalhar em nossas sombras tão fracas aqui e incluir sombras, insights como esse e para as sombras. Eu quero ser capaz de abrir as sombras porque já é uma imagem muito clara para algum lugar por aqui. Talvez, talvez apenas isso de volta, e não simplesmente mover este círculo para a posição. Então, uma vez que você fez isso, você precisa de imagens para incluir para corresponder a essas mudanças. Então esta é a nossa imagem original que tiramos da nossa galeria na árvore de imagens e somos chamados propositalmente assim porque eu já preparei essas imagens. E se eu trazê-los de volta para aqui, você pode ver que eu os chamei de brilho, contraste, destaques e sombras. O que eu fiz foi abri-los na loja de fotos. Se você não tem quatro lojas, você pode usar qualquer outro software que ele quiser. E basicamente, eu ajustei o brilho para esta imagem. Salvei-o. Contraste ajustado Salvei-o. Destaques dizem que fora das sombras e assim por diante. E se eu clicar duas vezes no dedo do pé, abrir essas imagens, você pode ver quando eu alternar entre elas, você pode ver uma pequena mudança porque eu fiz essas mudanças. Então o que vou fazer agora é pelo brilho. Vou usar brilho para o contraste, contraste e assim por diante. Então vamos fazer isso. Então aqui estamos nós como o brilho. Vou arrastar o dedo do pé e soltar minha imagem lá dentro. E para esta imagem em particular você tem dedo do pé saber suas colocações. São 49 pixels para a esquerda. Então, a partir desta borda, o que eu vou fazer é todo o turno 12345 e, em seguida, simplesmente trazer um pixel para a direita. Então eu vou usar o mesmo para o contraste. Então eu vou colocar a imagem de contraste bem aqui, e eu vou movê-la para a posição aqui. 123451 Eu vou fazer o mesmo para os destaques Tão rápido. 123451 e finalmente no mesmo para as sombras. Então, como este 12345 e depois um para trás. Então, como você pode ver, é realmente fácil fazer isso, e realmente não leva muito tempo. Na verdade, são alguns segundos quando você posiciona suas imagens corretamente, e agora vamos pular dentro de um tempo de prototipagem porque precisamos fazer algumas alterações nessas imagens. Então o que eu quero é que eu vou clicar neste controle deslizante de brilho na imagem de edição. Então eu estou indo para um clique maçante bem aqui neste círculo. Vou arrastar para ouvir, usar e beber ou animar o dedo do pé. E para estes ingleses uso está fora. Agora clique aqui neste círculo. Traga-o de volta, depois clique duas vezes aqui e depois aqui mesmo. Nunca clique aqui nos destaques. E não olhe aqui para que possamos trazê-lo de volta, se necessário. Agora clique neste e, finalmente, nenhum clique neste. Então agora vamos testar isso rapidamente. Vou sair desta tela e clicar aqui. Ele vai fazer a transição e, em seguida, você pode simplesmente mover este controle deslizante e você pode ver o efeito está acontecendo em tempo real. E está aplicando essas mudanças e que fizemos naquelas imagens. Então você pode, por exemplo, fazer um. Então, digamos que esta primeira tela e, em seguida, inclua essas quatro imagens insight para uma transição ainda mais suave . Mantenha todos eles 0% da cidade paga, e então quando você alternar entre eles, ligue sua cidade base de volta para 100. Então, por exemplo, esse brilho está em 0% aqui. Quando você move o controle deslizante, ele se tornará 100 para esses outros fazendo o mesmo também. Então é basicamente isso para esta parte. E agora o que temos que fazer é ter a colheita. Mas antes da colheita, vamos fazer antes e depois. Então pule bem aqui, controle D, e isso vai ser chamado de comparar. Vamos ver, porque queremos que o usuário seja capaz de comparar o que aconteceu antes e o que aconteceu depois. Mas em vez de usar esta imagem, o que vou fazer é que é publicamente bem aqui. Copie isto. Então não tenho que escrever de novo. Eu vou usar esta imagem hit controlar o porque ele contém imagem original e valores esta imagem porque ele contém imagem final. Então eu vou fazer o controle de fato, localmente, bastante aqui com base no meu nome de título Meu nome de porta. Isto vai ser depois e isto vai ser antes. Então o que eu realmente vou fazer é localizar a imagem fora das sombras porque essa foi a última imagem que usamos aqui. E eu vou arrastá-lo e soltá-lo aqui mesmo na imagem depois. E o que eu vou fazer é clicar duas vezes e, em seguida, simplesmente movê-lo para aqui. Digamos que apenas para que possamos ver algumas dessas mudanças, talvez assim, talvez assim, as pessoas possam ver essas mudanças, e você pode, claro, usar mesquitas se quiser. Mas acho que funciona bem. E agora o que temos que fazer é clicar neste ícone aqui no topo, e temos toe criar essas transições a partir do ícone de comparação. Então eu vou clicar no ícone aqui porque esta é a nossa última tela para sombras e quero que os usuários do pé ser capaz de comparar imagens a partir daqui e, em seguida, voltar se eles estão satisfeitos com ele . Então eu vou arrastá-lo até aqui. Vamos usar o toque automático, animar, fácil agora, e 0.3 segundos quando o clique aqui vai levá-los de volta. E finalmente, quando eles clicarem neste ícone de segurança, queremos que eles sejam capazes de ir para a colheita. Então vamos usar isso para aqui passo ou para animar. Fácil agora 0.3 segundos e vamos trazer isso de volta para 70 assim e usar o mesmo a partir desta imagem aqui. Então arraste passo ou carne chinesa? Fácil agora para 0,3 segundos. E agora vamos visualizar tudo e ver como tudo se parece. Então, em um grupo, por exemplo, nesta tela, vamos começar tudo de novo. Temos a ligeira animação que podemos clicar da galeria. Podemos clicar nesta imagem. Vai desaparecer de baixo. Então podemos fazer essas mudanças, então aplicar contrastes, realces reduzidos e talvez abrir as sombras. E quando eu clico em pré-visualização, isso é o que vai acontecer. Mas como você pode ver, eu cometi um erro com esses controles deslizantes, mas nós estamos indo para o pé. Conserte isso em um segundo. Mas você pode ver isso acontecendo e nos mostrando a diferença entre essas imagens em tempo real . E finalmente, quando você clicar aqui para salvar, ele vai saltar de volta para aqui. Mas agora vamos rapidamente fazer essa mudança. Então eu estou pulando para a guia de design, eo que eu quero é clicar sobre esses controles deslizantes, excluí-los, em seguida, clique sobre os controles deslizantes. Aperte o controle C controle V aqui. Mova-os até o fundo. E agora, quando eu clicar aqui, Pré-visualizar e, em seguida, compará-los. Você pode ver que os controles deslizantes estão ficando colocados e eles não estão se movendo em qualquer lugar. Então, uma última coisa que tem de ser feita é que você pode fazer isso ainda mais. Se você quiser fazer culturas, por exemplo, então você pode fazer cultura quadrada ou retângulo um ou qualquer um que você quiser. Mas eu vou pular para esta posição. Vou saltar para dentro. O protótipo foi para saltar bem aqui. Inimigos de Te Porto. Então vamos usar tudo isso. Então, quando você clicar aqui, visualizar, você pode clicar, Salvar ele vai levá-lo de volta aqui ou ele vai levá-lo de volta para esta tela de comparação, mas eu não vou dedo do pé. Envie para a tela de comparação. Eu vou clicar aqui e depois simplesmente reposicioná-lo para este nosso porto, porque eu quero que este seja o meu último, nosso barco antes de vir para esta tela. Então, vamos rapidamente Prewitt clicar em Salvar. E quando eu voltar, ele vai voltar para este aqui, e você pode ver que ele tem um belo pedaço de animação, e o que resta para nós finalmente, é o dedo do pé. Crie a conexão entre o salvamento e essa descrição. Publique, então vamos fazer isso. Próximo. Vamos clicar nele, arrastar e soltar para aqui, e vamos usar basicamente as mesmas configurações que fizemos aqui. Então, quando você clicar aqui, por exemplo, visualizar, clicar, salvar, salvar novamente e você pode vê-lo se encaixa novamente na posição. Então é isso para este vídeo. E no próximo vídeo, vamos trabalhar na tela de descrição barra publicada, e eu vou te ver lá 94. Prototipagem 6: Não vamos trabalhar na tela de descrição barra publicada. Vou voltar para o fosso de design e voltar para 70 assim, e então vou mover todas essas telas para fora do caminho por enquanto, e vou fazer algumas mudanças nesta tela em particular. Vou pular dentro do texto, e o que vou fazer é simplesmente criar um retângulo, criar um retângulo como este. Chame de mesquita assim, e eu vou colocá-lo logo acima do nosso texto e todos selecioná-los e apertar o controle de turno em ou comandante de turno. Se você está em um Mac localmente, chorou aqui, chamá-lo de uma mesquita. E nesta primeira tela, e neste primeiro estado, eu simplesmente vou movê-lo assim todo o caminho para fora do caminho assim. E talvez eu pudesse movê-lo assim para ter certeza de que tudo está coberto. Então, isso irá imitar na verdade quando os usuários começarem a digitar. E eu já mostrei isso na área de texto fora deste curso, e para este botão, vamos usar uma cor mais escura. Ou talvez possamos usar essa cor mais clara. Então este é o estado unclipped, e uma vez que eles são capazes de clicar Ele vai ficar azul Então agora vamos obter o controle d para fazer outra duplicá-lo e eu vou saltar dentro deste botão tornando banho a azul e também saltar dentro desta mesquita e estendido todo o caminho até aqui assim. Mas agora, uma vez que você clica em publicar, onde você vai? Então o que temos que fazer é realmente criar mais telas iniciais, então eu vou pular todo o caminho até aqui. Vê quantos mais temos para os protótipos? 10 para um projeto e teremos mais algumas telas. Mas essa é a maneira com protótipos em um não bxe, ele terá que fazer mais cópias. Então, vamos selecionar tudo menos essas telas iniciais aqui. E eu vou segurar a tecla Shift e tirá-los do caminho. E o que realmente quer fazer é clicar bem aqui, apertar o controle D para fazer uma duplicata dele. Eu vou saltar para dentro, estão em repetição grande clique no grupo. Ótima. E você pode ver que este cartão deixou de fora da tela. Eu estava simplesmente trazendo o dedo do pé aqui para que ele salte dentro desta casa para a nossa prancha. Eu não vou movê-lo para aqui localizar o número um. Aqui está. Número dois. Aqui está. Mas em vez de chamar este cartão número um, vou chamá-lo de carro número dois. Este deve ser o cartão número três. Este deve ser o cartão número quatro e eu vou fazer outra duplicação deste 1º 1 e chamar este cartão número um assim E então eu vou agrupar todos eles juntos, controle de acerto, G cartões de chamada assim e eu vou me mover na rua abaixo. Mas antes de o fazer, deixe-me clicar rapidamente neste último, e eu vou alinhá-lo assim. E como você pode ver, há 20 pixels entre cada uma das cartas. E agora, finalmente, posso pegar esses três e movê-los para baixo. Então, em casa uma chave shift todo o caminho até aqui e certifique-se de que eles estão em 20 como o resto destes cartões. Então, assim e isso vai ser realmente nossa nova imagem que você acabou de enviar. E vamos chamar isto de um minuto para ir. E em vez desta imagem temos que procurar localizar a imagem das sombras porque se você se lembra , Shadows foi a nossa última imagem que carregamos aqui e essa foi a última mudança. Então outro localizou a imagem das sombras bem aqui na minha pasta. Basta ampliar um pouco mais perto, selecionar imagem, arrastar e soltar minhas sombras dentro. Vou clicar duas vezes para ampliar esta imagem para algum lugar por aqui, talvez, e vou movê-la para o centro assim, e essa será a nossa nova imagem. E porque é uma imagem nova, vamos dar talvez seis comentários algo assim, porque é novo e o que queremos é tornar outra droga precisa. Então controle de calor D e saltar insight aqui e, em seguida, movê-los todos para fora do caminho para aqui e , em seguida, mudar um para somar mais de 20 pixels acima da parada da barra superior. E isso vai imitar o gesto de arrastar. Então saltar de volta para o fosso prototipagem e eu posso clicar sobre isso, cartões uma camada, arrastar minha alça azul e, em seguida, usar em arrastar, e aqui usar fácil um fora e, em seguida, clique aqui e trazendo de volta porque eu quero usar exatamente no mesmo estilo. E quando eu clico em pré-visualização, você pode ver que foi até aqui. Então aqui está a nossa nova imagem e podemos voltar a esta e você pode alternar entre elas se quiser. Como você pode ver, eu fiz esta imagem abrir telas para esta imagem. Mas se você quiser, então você pode mudá-lo de volta. E você pode simplesmente deixá-lo assim para que você possa mudá-lo. Toby, esta imagem para estar nesta nova imagem para que os usuários possam visualizá-la lá você pode simplesmente trocá-la. Então aqui e então você ainda pode ter essas animações que já criamos. Mas se não, você pode deixá-lo assim. Então agora vamos conectar nossas duas novas telas iniciais com essas telas publicadas. Então o que eu vou fazer é selecionar essas telas para casa uma tecla shift e trazê-lo volta para 70 e eu vou clicar aqui mesmo toe animar esses. Então o que realmente queremos é clicar neste campo de texto, arrastá-lo para aqui, e queremos usar passo ou dedo animar fácil uma saída e 0,8 segundos, por exemplo, porque queremos dar-lhe apenas um pouco mais de tempo para revelar o texto E então quando clicamos no botão de publicação, vamos trazê-lo de volta à nossa tela inicial, nossa nova tela inicial, para que o assunto seja. Então, vamos clicar nele e arrastá-lo para a nossa nova tela inicial, que é esta. Espero que consigas ver. Então é este com a nova imagem e para ele podemos usar toque. Agora podemos usar a transição Home para está na tela, e podemos usar push up, por exemplo, ou ligeira para cima é dentro e 0.8 segundos. Então vamos visualizar esses dois, ou podemos ir da tela de corte uma matéria za. Então, quando você clicar, diga que ele vai saltar de volta para aqui. Quando você clicar aqui, ele irá digitar fora do texto e a publicação ficará visível. E quando você clicar bem ali, ele vai levá-lo de volta para a tela inicial, onde você pode deslizar para cima neles e eu vou ir em frente e conectar esses ícones da mesma forma que eu fiz com as telas iniciais originais. Mas eu não vou incomodá-lo. Uma vez que você arquivo Donald R Project, você pode saltar para dentro e lembrar-se sobre quais transições eu usei para essas telas. Se você esqueceu algo no próximo vídeo, vamos lidar com o painel e te vejo lá. 95. Prototipagem 7: Agora vamos começar a trabalhar em nossa tela de painel e ir em frente e selecioná-lo. Mova-o para aqui e, em seguida, salte para dentro do controle de batida de design D para fazer uma duplicação dele. E eu vou trazer essas telas de volta para aqui. Por que eu criei a duplicata é porque precisamos criar nosso ponto de partida e um ponto final . Este vai ser o nosso ponto final. E para o ponto de partida, precisamos criar algumas mudanças em todos esses gráficos. Então vamos começar com este gráfico. Vou abrir e você pode ver que temos duas máscaras, uma do verde, outra do azul. Agora você pode clicar duas vezes sobre a Mesquita Azul aqui, e você pode ampliar se você não pode clicar diretamente em. E o que eu realmente quero fazer é trazer esses pontos de volta tão fracos aqui. Então eu vou clicar aqui, por exemplo, e todos posicionar este dedo aqui todo o caminho para o centro. E quando eu clico lá fora, você pode ver que nós ficamos com esses grandes antecedentes. Agora temos que fazer o mesmo para o verde, e não vai parecer perfeitamente. Você pode circular de volta para os vídeos gráficos e ver como eu fiz isso para os gráficos, para o resultado perfeito, porque nós só vamos ter para nossos portos. E você precisa ter pelo menos três para que isso funcione corretamente. Mas temos esses outros gráficos dentro da tela. Então, se eu criar três telas, por exemplo, vai parecer estranho apenas para este gráfico para que você possa circular de volta para este vídeo e ver como eu o criei. Mas, por enquanto, vamos simplesmente tirá-lo do caminho. E eu vou fazê-lo na outra direção, por exemplo, para este. E eu vou movê-lo para aqui, por exemplo, indo para movê-lo todo o caminho bem aqui para o topo. Vou tirar este do caminho também. Isso eu vou mover aqui, e quando eu clicar lá fora, vai se tornar ótimo. Agora vamos fechar esse. Siga em frente para os gostos. Então, mais uma vez, você pode voltar para o vídeo para ver como eu fiz isso, para obter o resultado perfeito. Mas para este não vai ser basicamente perfeito como poderia. Então vamos abaixar este dedo do pé um em altura, mais baixo. Você colou para baixo? Eu vou clicar na barra verde e fazer a mesma coisa como então já uma pasta, você sabe, e vamos abrir a última. Então os melhores momentos para postar você sabe por que isso não está em um grupo. Então vamos fazer essa mudança. Então melhor hora para postar I esta qualidade tempos e eu vou fazer o mesmo para este. Deve ser em um grupo de qualidade tempos também. E para este estado original, vamos simplesmente fazer a mudança tão bem para os tempos de pico e você pode clicar duas vezes e mover esses pontos ao redor. Então eu vou movê-lo, todos eles para aqui. E certifique-se de que há linhas acima com este ponto e você também pode encontrar este vídeo dentro da seção de gráficos deste curso e você pode ver como eu criei ele lá. E nós também temos mais uma variação para este efeito se você quiser criar outro efeito que está tentando ser diferente do que este, mas ele realmente cria um resultado diferente Se isso é algo que você está atrás e eu vou clicar em Este, posso trazê-lo todo o caminho para ouvir. Zoom muito mais perto. Clique aqui e, em seguida, selecione todos esses pontos e, em seguida, simplesmente trazê-los aqui para este ponto de partida e não vamos animar isso. Então, quando eu clicar aqui, eu vou clicar no protótipo. Arrasta a minha vela azul até aqui, e o que vou usar é o tempo. Vamos usar o atraso de zero segundos ou animar o dedo do pé, aliviando e um segundo para a duração. E porque as pessoas estão acessando esta tela do painel aqui do menu e não de qualquer outro lugar, ele será basicamente o ponto de partida uma vez que eles clicam no menu. Então, aqui, por exemplo, e, em seguida, clique no painel aqui. Este vai ser o ponto de partida para isso, então vamos visualizá-lo, e você pode ver como isso se parece. Mais uma vez, estes dois funcionam bem, mas este não é tão bom. Mas novamente, ele tem esse tipo de interesse visual para que as pessoas possam olhar para ele e entender o que ele faz. Então agora vamos passar rapidamente para curtidas porque é realmente simples de criar. Eu vou mover essas duas telas para fora do caminho por agora, vou clicar em Meus gostos hit control D para fazer uma duplicata dele. E porque temos a nossa imagem original aqui que editamos e incluímos tudo o que tenho a fazer por esta, eles simplesmente a movem para aqui de volta. Então, e então todo o turno um para trazê-lo 20 pixels para cima, e eu vou clicar no protótipo. Clique na imagem em si. Dragões usar e arrastar auto animar e flexibilizar. Use fácil agora porque nós o usamos no resto fora de nossos vídeos e simplesmente trazendo de volta para este também. Então, quando eu clico em pré-visualização, você pode ver como isso se parece. Então é basicamente isso para este vídeo, e você pode até mesmo expandi-lo ainda mais. Então, por exemplo, se você abriu esta nova imagem em vez desta aqui, você não pode pular aqui para o gosto. E quando você clica nesta imagem aqui porque você pode ver que essa é a nossa nova imagem quando você clica nela, ele levaria você bem aqui porque em vez desta imagem nós usamos esta imagem para que você possa realmente girá-los ao redor, e você pode realmente criar seu próprio pote sobre como você vai usar essas telas. Mas eu descobri que este funciona corretamente para mim neste caso, mas mais uma vez você está recebendo nosso arquivo de saída do projeto, e você pode incluir suas próprias imagens. Eu até encorajo você a fazer isso e a brincar com suas próprias imagens personalizadas. Você pode fazer alterações diferentes nesses controles deslizantes. Você pode até criar efeitos de cultura aqui, usando alguns dos outros efeitos no discurso e então realmente obter um resultado diferente. Você também pode criar mais algumas telas para o traço Mais dedo do pé. Alcançar um resultado diferente aqui mesmo. Mas cabe a você mesmo. É por isso que você está recebendo este arquivo do nosso projeto. Eu realmente encorajo você a construir suas próprias telas, usando este arquivo, bem como fazer alterações na diversão existente. Então, no próximo vídeo, vamos lidar com a tela de perfil apenas um pouco e não vai criar muitos efeitos para ele e finalmente lidar com decidir menu porque ele vai ser uma sobreposição para as telas e você vai ver Vamos ter um bom efeito. Enquanto isso, eu vou simplesmente saltar à vista e conectar todos esses outros ícones da mesma maneira como eu fiz para a tela inicial. E mais uma vez, se você não se lembra de qual dessas transições foram, você também pode pular para dentro e clicar nesses ícones. Então, quando você está no modo de prototipagem de produto, você pode clicar nesta parte inferior , por exemplo, e você pode ver bem aqui quais configurações são usadas para esse efeito, Então eu vou vê-lo no próximo vídeo. 96. Prototipagem 8: vamos agora terminar nossos protótipos com o perfil, e a única coisa que eu quero fazer aqui é conectar todos esses pontos de passo exceto este, e este é para o menu. Então, se eu clicar no controle e clicando no site para selecionar o meu menu, eu posso simplesmente arrastar e soltá-lo para aqui eo que eu o quê? Eu quero usar este passo e em vez de também animar eu quero usar mais tarde porque ele vai dedo sobrepor esta tela em cima deste grito, e você pode usar esta alça para movê-lo todo o caminho aqui para o topo, e você pode segurar a mudança , se você quiser. E o que eu quero fazer é escolher ligeira para baixo porque eu quero que isso leve e para baixo a partir do topo em todas as telas que têm este ícone de menu. E, finalmente, eu quero usar uma saída fácil, e a duração vai ser de 0,8 segundos. Então, quando eu clicar aqui, clique neste ícone, você pode ver que ele desliza para baixo a partir do topo, e se eu fizer isso mais uma vez, você pode ver como isso se parece, e porque isso tem um borrão de fundo, você pode ver a imagem. Mas em qualquer tela que seja apresentada, ela parecerá um pouco diferente porque está desfocada e tem menor ou, basicamente, por isso, vai se separar, ser translúcido um pouco e parecer um pouquinho diferente. Em seguida, aqui, você pode off, é claro, usar e ah, fundo branco, fundo preto, qualquer outra cor vendida e parecia o mesmo em todas as telas. Mas assim acrescenta um pouco mais de interesse visual desta forma. Agora, finalmente, o que eu quero fazer é conectar esses itens de menu com as telas. Então, por exemplo, eu posso clicar em para casa e eu posso saltar todo o caminho aqui, e eu quero conectá-lo com a casa, que está nesta tela, e o que eu quero usar aqui é passo. Quero usar a transição. Eu quero usar dissolver, então é bem aqui no topo, flexibilizando e 0,8 segundos, e agora eu posso saltar para trás e fazer o mesmo para toda a tela. Então aqui estão os gostos. Eu posso simplesmente arrastá-lo para ouvir que terá exatamente as mesmas configurações. Este é o meu perfil, e o meu painel será esta primeira tela. Então é aqui que você acessa o painel. Então, o que você pode clicar aqui, ele irá levá-lo para o painel de controle. Não temos configurações, teremos que sair. Então é basicamente assim que parece. Então, mais uma vez, quando clicamos em pré-visualização, podemos clicar no ícone do menu. Ele vai saltar do topo, e quando eu clicar no painel, por exemplo, ele irá mostrar-lhe a tela do painel. Então agora o que eu quero fazer é entrar e basicamente criar o que eu fiz para a tela de perfil e este menu. Então eu vou entrar aqui e te mostrar alguns deles. Então eu vou simplesmente conectar meu menu. Venho e ofereço-te um passo. Eu vou usar demais, e ele vai sobrepor aqui mesmo no topo. E você também pode saltar para trás aqui e usar a mesma configuração. Então deslize para baixo, aliviando e 0,8 segundos. Então aqui estamos nós, em vez de dissolvidos. Deslize para baixo facilmente agora 0,8 segundos. E agora, quando você clicar duas vezes aqui em qualquer um deles e arrastá-lo para ouvir ele terá exatamente as mesmas configurações, e eu não vou ir em frente, saltar para dentro e mudá-lo, dedos todos eles. E uma vez que o fiz, voltarei para lá. Então, agora que eu fiz isso e conectei tudo, talvez possamos saltar para dentro e visualizar o protótipo inteiro. Então, aqui vamos nós. Nós vamos começar do início, e eu vou ampliar isso um pouco para que possamos ver todo o projeto em ação . Então vamos nos lembrar que usamos um gatilho de arrasto bem aqui, e temos esses elementos capazes. Então, quando eu clicar aqui, por exemplo, e eu quero visualizar esta imagem de um clique aqui, talvez até que eu gostaria de. Então é assim que parece. E talvez eu queira voltar para a tela inicial a partir deste ícone. Mas vamos adicionar, por exemplo, uma nova imagem. Isso vai se mover um pouco e vamos clicar da galeria, e talvez possamos usar a primeira imagem. Esses controles deslizantes estão aparecendo de baixo e vamos fazer algumas alterações nessa imagem. Então, talvez aqui. Talvez um clorato tenha caído. Talvez eu possa aumentar isso até aqui. Talvez eu queira ver antes e depois disso. Fica bem em você Pode salvar. Sim, achei a colheita satisfatória. E eu quero seguir em frente e deixe-me adicionar uma descrição. E Ochlik publicou aqui. E aqui estamos nós no início, na tela inicial e, por exemplo, eu quero conferir meus gostos e ver que alguém gostou da minha imagem daqui. E vamos verificar o perfil muito rápido. E aqui está. Essa imagem também está aqui. Vamos verificar algumas outras coisas. Então, por exemplo, vamos conferir Dash Word. E aqui estão nossos analistas de painel rapidamente voltar para casa a partir daqui. Então esse é todo o nosso protótipo. Essa é a parte da prototipagem feita. E no próximo vídeo, vou mostrar como você pode compartilhar esse protótipo com seu cliente. E na próxima seção, fora do curso, vamos fazer alguns ajustes aqui e ali, e vamos compartilhar isso com nossos clientes, bem como com seus desenvolvedores. Então eu vou mostrar a vocês como você pode fazer isso e também como você pode exportar todos esses ativos para Finalmente compartilhá-los com seu cliente e o desenvolvedor. Uma última coisa que quero fazer neste vídeo. Eles simplesmente clicam de volta no design e movem este texto para algum lugar por aqui. O Toby. Talvez um pouco mais no meio. Talvez aqui mesmo. E se eu pudesse controlar zero, você pode ver o quão longe isso chegou, e você pode sempre selecionar todos esses m, por exemplo, movê-los aqui abaixo se isso é algo que você quer. Mas é por isso que demos tanto espaço para que tenhamos muito mais espaço aqui. Se você quiser brincar com ele um pouco mais e mais telas ou mais efeitos, ou fazer algumas alterações ou no futuro em versões Android e Web também. Então é isso para este vídeo, e eu vou te ver no próximo 97. Como criar guia de estilo: antes de começarmos a compartilhar são projetados com desenvolvedores recusados e, finalmente, aposentar. Temos que terminar nosso guia de estilo. E para fazer isso, deixe-me aproximar rapidamente um pouco mais. Como você pode ver, nós só temos o logotipo deles, bem como os ícones. Mas queremos incluir muitos mais itens aqui. Então, por exemplo, quero incluir essa ilustração. Aqui. Quero incluir cores. Quero incluir a sombra que foi incluída. Temos um botão que precisa ser incluído aqui para que tudo possa parecer bem , bem como os fundos. Então vamos começar do início. Vamos primeiro saltar para dentro. Vou Presti no meu teclado e deixe-me incluir as camadas de volta para que você possa ver o que eu estou digitando. Então vamos digitar um logotipo aqui. Estamos em sentido aberto. 14 analistas usados nesta cor, e vamos colocar este texto aqui no topo. Então é organizado isso um pouco melhor, então eu vou colocá-lo aqui e deixe-me mover rapidamente tudo para baixo para que talvez possamos mover tudo por e antes dos pixels ou 60. Então 1234 sim, pois Ele parece bom. O logotipo selecionado. 1234 Agora eu estou indo toe duplicar o texto do logotipo. Então controle D E eu vou mover isso para baixo e vou chamar esses ícones assim. E eu vou me mover nesses ícones, bem como a frente quatro pixels para baixo. Então 1234 E finalmente, deixe-me de selecionar o texto. Alinhe tudo com nossos ícones Texto 1234 E o que eu quero fazer agora é incluir nossos fundos . Então nós apertamos o controle D e movemos isso todo o caminho para baixo, alinhá-lo com este texto e chamar este dinheiro assim E porque nós só temos um fundo para este projeto, será realmente muito simples usar tudo. Então 1234 Então o que temos é senso aberto. E se saltarmos para a nossa tela inicial, se eu clicar duas vezes dentro ou você pode abrir este cartão, o que temos aqui é senso aberto. 14 temos aberto desde 12 e nesta cor, e temos aberto desde 12. E nessa cor, então só temos uma frente nesses 33 estilos, então vamos fazer isso. Então, para fazer isso, você pode simplesmente clicar aqui e usar estilos de caracteres. Então vamos adicionar este. Então vamos adicionar este porque é da mesma cor. E finalmente podemos adicionar este. Então nós criamos todos os três aqui, e nós temos componentes bem aqui. Mas você pode adicionar vários componentes. Então, por exemplo, você pode saltar para dentro e adicionar cada ícone que você vê aqui. Você pode adicioná-los , os componentes. Você pode adicionar a parte inferior como o componente separado. Se isso é algo que você deseja, você pode adicionar essa barra de etapas como componentes diferentes. Então, como temos quatro ícones, você pode ter quatro barras de tabulação diferentes. Você pode adicionar isso aqui, Toby. Uma guia é para que tudo o que você deseja possa adicionar como um componente separado. E assim será mais fácil para você projetar mais tarde se isso é algo que você quer. Mas, por enquanto, vamos mantê-lo assim. Então, teremos esses três estilos de caracteres e só terá barra de status como um componente . Então deixe-me adicionar rapidamente esses telefones aqui, então eu vou duplicar o telefone para texto pressione Control D e movê-lo para baixo 40 pixels. Então 1234 e vamos pular aqui e chamamos isso aberto desde 14. Parafuso assim. E você pode, por exemplo, controlar D e mover o Bottom Corp comido. Só um toque como este. 12 talvez 20 pixels. E você conduz aqui, digitando números. Então, de 0 a 9, isso pode ser atingido espaço. E então você pode digitar em todo o alfabeto se isso é algo que você quer, Então um B c o e deixe-me rapidamente pausar o vídeo aqui enquanto um topo tudo. Então aqui está todo o alfabeto, bem como com números, e você também pode adicionar os sinais se você quiser. Então talvez você possa um sinal de explicação pontos comuns e assim por diante. Mas eu vou manter isso simples e mantê-lo assim. O que eu quero fazer a seguir é selecionar esses dois. Você pode fazer isso a partir daqui também. Ele controlaria D, e você pode mover esses dois para baixo todo o turno e movê-lo 20 pixels para baixo assim e então eu só queria aplicar este próximo a ele. Ou talvez eu possa até clicar neste porque é da mesma cor que este aqui. Então talvez possamos mantê-lo 20 pixels para baixo assim. E se eu clicar neste, é normal, então eu vou mudar aqui. Então é normal e é sentido aberto. 12. E agora, finalmente, finalmente, vamos fazer uma cópia de cocô, então vou pular aqui. Ele controlaria o Indy para fazer uma duplicata, mover os dois para baixo, e eu vou simplesmente fazer isto. E para isso eu posso clicar neste, e ele vai mudar a cor e você pode ver que ele ainda está aberto. Posição 12 regular. Mas é de cor distinta, então eu posso fazer o mesmo espaçamento como era antes. Então 20 pixels e são 20 pixels aqui tão bem quanto você pode ver. Então agora o que nos resta fazer é adicionar essas cores, modo que também é bem simples, eu possa mover tudo para baixo. E como você pode ver, estamos perdendo essa cor verde bem aqui. Então eu simplesmente pularei dentro de nossos painéis, por exemplo, controle e clique no site e, em seguida, simplesmente adicionar essa cor verde aqui. Então essas são todas as cores que estávamos usando. E então podemos simplesmente pular aqui e incluir essas cores para que eu possa usar um desses textos. Por exemplo, este aperta o controle D e eu não vou movê-lo todo o caminho para baixo. E agora podemos começar a criar esses grupos então eu vou duplicar os telefones, bem como mover os fundos aqui assim e então mover este texto todo o caminho até aqui e de um grupo. Todos os fundos atingiram o controle G e chamaram isso de fundos porque será muito mais fácil para nós processar tudo. Estes são ícones. E finalmente, este é o nosso logotipo ou agrupá-lo também, assim E finalmente, o que queremos para isso é cores como essa. Deixe-me fazer 40 pixels para baixo. Então, o que tem nisso? Mais uma vez daqui. Tanto tempo. 234 E podemos usar isso para as cores dos impostos. Agora, as cores. Eu posso simplesmente pegar uma dessas imagens da nossa armação de arame. Então deixe-me localizar uma dessas imagens. Talvez eu possa usar este. Por exemplo, aperte o controle C. Eu vou até aqui bater o Controle V e, em seguida, opor-me aqui mesmo. Talvez ele possa ir 20 pixels ou até melhor para os pixels para baixo. Não para complicar ainda mais as coisas. E vamos saber, começar a adicionar nossas cores. Então a nossa causa primária é esta grande. E também vamos mover o azul aqui. Então este cinza mais claro e este tipo fora ainda mais leve. Ótima. Então ouvimos o verde e o vermelho finalmente. Então vamos começar do início. Podemos mover este, talvez 20 pixels e deixe-me selecionar os dois e eu removo suas sombras para que eu possa posicioná-los bem aqui. Então temos que fazer por seis cores. Vamos fazer seis cópias. Então isso é para cinco aqui e depois seis, assim e então você pode simplesmente pular aqui e começar a adicionar todas essas cores assim E então uma última coisa que nos resta fazer aqui é criar as hashtags antes e citação hexadecimal. Então 707070 Essa é a cor para isso. Ótima. E podemos usar a cor branca para o texto tão pouco rapidamente selecionar branco a partir daqui. E se eu saltar para dentro e mover isso acima dessas imagens para que possamos chamar esta cor selecionada e, em seguida, clique duas vezes e pressione o controle V ou comando V dedo do pé baseado no dedo do pé. Todos fora destes, e você também pode movê-los ao redor. Então este é o 1º 1 segundo, 1/3 14 1/5 1 e violar. Este é o 6º 1 Então você pode facilmente criar isso simplesmente pressionando o controle em D. E você pode posicioná-los no centro de cada cor, assim. E, obviamente, vamos mudar a cor desta para esta. E podemos duplicar esses assim posicioná-los no centro assim. E então, finalmente, o que você pode fazer é saltar aqui, clique duas vezes e simplesmente digitar essas cores três C seis ff que é para o nosso azul. A próxima cor é de de de de. Esta cor é, um, F oito F oito F oito. Esta cor é 55 D para 66 E finalmente, no final. Esta cor é E 53 C 85. Agora estamos criando isso para nossos desenvolvedores, bem como para nossos clientes, para que eles possam entender rapidamente quais cores realmente V usam para que possamos agrupar tudo. Você pode ir cor por cor e torná-los em seus grupos separados. Mas eu não vou fazer isso. É como se isso estivesse bem. Então vamos chamar isso de cores. Então o que podemos incluir aqui são aquelas sombras. Então, porque nós só temos um e é o padrão, nós podemos duplicar esta cor assim como esta, então ele controlaria D. E nós vamos apenas posicioná-lo todo o caminho até aqui assim. E talvez possamos empurrá-lo 40 pixels deste. Então 1234, por exemplo. E podemos mover este texto. Deixe-me selecioná-lo mais uma vez para que possamos movê-lo para aqui, alinhando para a esquerda com esta sombra. Faça-o fazer o nome sombra. Tudo bem, então nós vamos fazer isso branco, mas apenas inclua o show de fundo, e nós vamos chamá-lo de Sombras simplesmente sombra porque nós só temos um. E agora podemos incluir botões aqui. Mas eu não vou fazer isso. Deixe-me selecionar tudo, na verdade. E eu vou posicionar píxeis como este, assim como este. Para que tenhamos o mesmo espaçamento. Vou chamar essa sombra e o que queremos aqui. Vou incluir esses botões. Então deixe-me duplicar este texto, e eu vou posicioná-lo para a direita fora desta sombra para que tenhamos algum espaço. Então isto vai chamar garrafas como esta? Deixe-me posicioná-lo 40 pixels a partir deste. Então 1234 e deixe-me selecionar nossos botões. Então eu não vou selecioná-lo a partir de armações de arame ou um design. Vou selecioná-lo a partir de protótipos. Então eu vou selecionar esses dois segurando, Shift hit control C. E eu vou saltar todo o caminho de volta para o nosso guia de estilo aperte Control V. Mas ele acabou de selecionar os botões. Então deixe-me fazer isso mais uma vez. Vou dar o dedo do pé. Selecione esta opção assim como esta. Então, aperte minha tecla Shift Hit Control C. Esperemos que agora ele irá selecionar e baseado tudo aqui. Então aperte o controle V Sim, aqui estão nossos botões e você pode simplesmente clicar aqui para colocá-los ambos no meio. E o que eu quero fazer é mover esses botões para que eu possa ver qual deles é qual. Então você pode se alinhar com essa sombra só para que possamos ver onde está essa sombra? Então, talvez aqui seja bom, mas vamos movê-lo. Simplesmente 40 pixels para baixo. Alguém tomou 34 Agora ele será alinhado com esta sombra. Faça o mesmo por este. Então 1234 E podemos chamar esse fundo clicado. E basta chamar este estado inferior ou vazio. Ou como você quiser chamá-los e você pode falar com os desenvolvedores apenas para que você possa ter certeza quais nomes você deve usar em seus nomes de camada. Então estes são botões assim e, finalmente, o que precisamos é incluir essa ilustração. Então eu vou mover este texto para ouvir e, em seguida, posicioná-lo para o pixel. Então 1234 e vamos incluir nossa ilustração assim, e deixe-me localizar essa ilustração. Aqui está o controle de batida C, controle V, e agora vamos posicioná-lo por aqui, e eu vou movê-lo para aqui. 1234 para baixo. E eu vou simplesmente clicar duas vezes e estender o nosso porto em ambas as direções para que ele possa atender ao requisito da nossa ilustração. E é basicamente isso para o nosso guia de estilo. Você pode acertar o controle. Isso é para dizer sobre o seu projeto, mas deixe-me agrupar rapidamente estes também. Então esta é a nossa ilustração. E agora, uma vez que terminou de economizar porque é um projeto bastante grande, como você já viu. Então temos os arquivos de preparação que temos nos quadros de arame. Nós projetamos protótipos, então temos cada coisa dentro deste arquivo, e se eu checar na minha área de trabalho, ainda são 75 megabytes, que é incrível. Imagine se você está fazendo um projeto é maior isso dentro de quatro loja. Será certamente alguns gigabytes de tamanho, então 75 megabytes é realmente pequeno tamanho de arquivo realmente gerenciável. Você pode facilmente enviá-lo para o seu cliente, e é isso que vamos nos cobrir em alguns fora dos próximos vídeos. Mas no próximo vídeo, vamos abordar como você pode compartilhar esse projeto com seu cliente e como você pode receber feedback antes de começarmos a exportar nossos ativos de design e enviá-los para desenvolvedores. Então, vejo-te no próximo vídeo. 98. Compartilhando com o cliente: neste vídeo, vamos cobrir como você pode compartilhar seus protótipos com o cliente, e é realmente extremamente simples óleo tem que fazer é ampliar para a primeira tela, que é esta, se você lembrar de nossa prototipagem para que você possa saltar para o protótipo e você verá este ícone home, que indica que esta é a primeira tela e você pode simplesmente clicar em share. Se você quiser convidar alguém para o documento, você pode simplesmente fazer esse dedo aqui, e eles podem então fazer algumas alterações nele. Você pode compartilhar para uma exibição, e é isso que você vai clicar para compartilhar com seu cliente. Se você estiver no plano gratuito com o Adobe X'd, você só pode compartilhar um protótipo para que os clientes analisem, e você pode ter apenas um protótipo dentro da biblioteca on-line. Se você estiver trabalhando com vários clientes, poderá aguardar e terminar com um deles. Você pode excluir esses protótipos do seu plano e, em seguida, você ainda pode compartilhar apenas um protótipo. Mas se você está realmente falando sério sobre isso, ou se você já comprou a Creative Cloud da Adobe , você tem um número ilimitado desses projetos que pode compartilhar para que eu possa trabalhar em vários projetos ao mesmo tempo e compartilhar vários projetos com vários clientes. Em seguida, compartilhamos para desenvolvimento, e é aí que você vai compartilhar com seus desenvolvedores e dessa forma eles podem ver diferentes espaçamentos entre elementos, cores diferentes. Você usou diferentes formas que estão dentro, e esse arquivo é extremamente útil para eles, porque então eles podem saber que tipo de margens e padrões eles podem incluir dentro de seu casaco. E que tipo de transições eles devem usar? Porque eles vêem todas essas animações que você criou dentro do Adobe X'd dor de cabeça e planejado em avançado o que eles podem colocar dentro do casaco para que tudo funcione corretamente. Finalmente, temos links gerenciados. Dessa forma, você pode gerenciar todos os links que compartilhou anteriormente com seus clientes anteriores . Então imagine que você trabalhou com alguns clientes, você sabe, seis meses atrás e você quer excluir esse projeto porque esse projeto já terminou. Eles pagaram você e tudo funcionou bem. Mas você quer liberar algum espaço dentro da sua biblioteca online. onde você pode simplesmente clicar lá, ele irá levá-lo para sua conta, e então você pode excluir os projetos anteriores em que você trabalhou. E finalmente temos um vídeo gravado. Dessa forma, você pode gravar um vídeo de todos esses protótipos, ou ele vai lançar um protótipo. Da mesma forma, como um clique aqui. Toe visualizar meu protótipo nesta janela, e ele vai começar a gravá-lo e você vai então você pode então ter a opção de exportar esse vídeo. Então, tudo o que você vê aqui estará dentro do vídeo. Então tudo clique e mova, e então você pode compartilhar esse vídeo em plataformas online como Big Chance ou Dribble para mostrar a todos o que você tem feito. E você pode colocar esse vídeo, por exemplo, dentro de quatro. Loja dentro dos copos mais, você pode usar estático mais culturas, que é apenas basicamente imagens estáticas. Ou você pode usar mais copos animados, que são mais populares. Uma frota za, e você pode apresentar mais copos de uma maneira em movimento. Basicamente, para o Windows, você tem a opção básica de gravação de jogos, assim ele vai manter este texto aqui no topo. Então, por exemplo, visualize nosso projeto e medicamente chorou aqui. Ele irá mostrar este texto dis aqui e revelar ícone tudo o resto. Mas você também pode ampliá-lo. Será bem aqui no centro, e o que quer que esteja fazendo, é só mostrar aqui no centro. E então você pode cortá-lo dentro de quatro lojas, por exemplo, ou após efeitos ou mais rico, mais suave que você está usando. E então você pode apresentá-lo dessa forma, se isso é algo que você quer, se você está compartilhando com declines, você pode simplesmente enviar o vídeo para eles, e é isso se eles quiserem ver um vídeo e não quiserem clicar para eles mesmos. Mas se você estiver em um Mac, as coisas são muito mais simples, então você pode simplesmente bater esse disco ou bater aqui, e ele gravará um protótipo sem essa barra no topo. Então é mesmo. A principal diferença entre Eggs D no Windows e Mac é que gravar a função de vídeo, porque gravará um vídeo apenas fora desta tela. Mas no Windows, ainda não temos essa opção porque fora de como as janelas são criadas em estruturado, então ainda temos essa barra no topo. Mas, como eles disseram, você pode simplesmente ampliá-lo. Importe este vídeo como este dentro do arquivo de sua loja de fotos, e você pode, em seguida, cortá-lo e certificar-se de que esta barra na parte superior desaparece. Então é basicamente isso para a parte de gravação. Então agora vamos compartilhar nosso projeto com o cliente, então eu vou apenas clicar aqui. Clique em Compartilhar para revisão Qualquer pessoa com o Lincoln View ou você só pode convidar pessoas que você deseja que possam visualizar este projeto. Então, se você assinou um nd A com o cliente, esta opção é extremamente útil. Assim, apenas pessoas dentro da equipe, por exemplo, ou algumas partes interessadas importantes podem ver este projeto. Você pode dar um nome aqui, então temos um obturador para que possamos chamá-lo assim. Você pode permitir comentários, e eu recomendo. Se você quiser receber feedback diretamente sobre a Adobe sair do site, você pode mostrar dicas de ponto de acesso, que é realmente importante porque às vezes os clientes ficam presos. Eles não sabem onde clicar, então as dicas de pontos de acesso são extremamente úteis, você pode mostrar controles de navegação, que são os controles na parte inferior, fora da tela, e eles concordam ser capaz de alternar entre o telas, e eles então saberão onde eles estão. No momento, você pode abrir em tela cheia. Se você fizer isso, mostrar controles de navegação desaparecerá automaticamente e, finalmente, você pode exigir uma senha. Se este é algum tipo de projeto secreto e você deseja mantê-lo em segredo, você pode exigir uma senha e qualquer pessoa com o passaporte pode entrar. E então, por exemplo, comente e veja todos esses pontos quentes e tudo mais. Tudo o que você tem que fazer aqui é criar um link, e ele começará a carregar. E dependendo do tamanho do seu projeto, bem como da velocidade da sua conexão com a Internet, isso pode levar de alguns segundos até alguns minutos. Vejo-te quando chegar a 100% e quando for publicado. Então, uma vez publicado, aqui está como se você fizer qualquer alteração neste protótipo, você pode clicar em Atualizar, e ele irá atualizar esse link, e você pode, em seguida, enviar esse novo link para os nossos clientes e link. Quero dizer para o cliente, e eles podem verificar as mudanças. Ou você pode simplesmente copiar cópia do link em mau frio. E você pode incorporar isso em representações de que algo que você quer ou você pode simplesmente clicar neste link, e ele vai abrir isso ao lado da nova janela. Quando você estiver abrindo pela primeira vez, levará algum tempo para carregar, então tenha isso em mente. Como você pode ver, animação já começou, e aqui estamos na primeira tela, e todas as animações estão funcionando. Tudo bem, como você pode ver aqui. Se eu clicar no ícone de menu, por exemplo, você pode ver como isso se parece. E se eu clicar nesta imagem, ela irá ampliá-la. Então tudo o que fizemos anteriormente foi criado aqui mesmo. Mas você vai ver algumas falhas de vez em quando porque você tem que passar por estes no nosso caso, 29 telas diferentes, que você pode ver bem aqui. E então você será capaz de ver todas as animações sem problemas depois de percorrer todas essas 29 telas diferentes. Então, se eu clicar aqui, você pode ver que nós temos são diferentes animações. E se em algum momento eu quiser saltar para casa, eu posso simplesmente clicar aqui, e ele vai me levar para a primeira tela. Agora, quando se trata de comentários, você pode simplesmente arrastar este pin. Você pode colocá-lo, por exemplo. Digamos aqui e vamos escrever um comentário, por exemplo, por exemplo, e você pode clicar em enviar, e ele irá enviá-lo. E, por exemplo, eu posso alternar por todas essas telas diferentes. Deixe-me verificar rapidamente. Talvez eu esteja na tela 20 e eu quero me lembrar, Onde este comentário foi deixado? Eu posso simplesmente clicar nele, e ele vai me levar para esta tela, e ele vai destacar assim. Você pode colocar muitas dessas dores como quiser. Então, por exemplo, você pode digitar, talvez alterar essa imagem e ela será atualizada em tempo real, e você sempre pode voltar para ela e descobrir onde esses comentários estavam. Então, como eu disse antes, talvez você esteja nesta tela. Você pode clicar aqui, e ele irá levá-lo para esta tela. Então é muito fácil. do pé muito simples. Receba feedback para fazer alterações no dedo atualize seus protótipos aqui e depois confera-os mais uma vez com o cliente e veja se todos estão na mesma página com o design. E então, finalmente, você pode entregar tudo o que você trabalhou anteriormente para seu cliente para seus desenvolvedores que eles possam desenvolver esse design no final. No próximo vídeo, vou mostrar como você pode preparar tudo e exportar ativos para desenvolvedores e como você pode empacotá-los para facilitar o envio para desenvolvedores, bem como para os clientes. Então, vemo-nos lá. 99. Exportando recursos: Agora é hora de exportar nossos ativos e enviá-los para os desenvolvedores, bem como para os clientes . Então, como podemos fazer isso? Nós não estamos indo para exportar protótipos porque todos esses elementos já estão contidos dentro de nossas telas de design. Eles só estão se movendo e mudando aqui e ali. Mas, por exemplo, temos esses painéis aqui. Mas vamos exportar os acabados. E nós temos esses dois botões, então nós vamos exportá-los assim. Então, como você pode realmente exportar? O que eu recomendo que você faça é que você crie algum tipo de estrutura. Então, como você pode ver aqui, temos quatro, 68 10 12 telas diferentes dentro da seção de design e diferentes variações dessas mesmas telas bem aqui. Mas, por exemplo, essa imagem é exatamente a mesma em todas essas três telas, bem como neste ícone. Eles só estão mudando de tamanho. Então, por que eu deveria exportar esses três onde eu posso exportar apenas este também, eu não vou exportar este ícone a partir daqui. Vou simplesmente saltar para o guia de estilo e exportar todos esses ativos a partir daqui. mesmo que com os fundos Então, como você pode ver, guia de estilo é extremamente útil para isso também. Então, como você pode ir sobre a exportação é que você pode criar uma estrutura de arquivo. Então aqui está a minha estrutura de arquivos bem aqui. Então você pode ver como isso se parece. Basicamente, eu tenho na pasta para cada uma dessas telas. Você pode vê-los aqui no painel de corte da galeria e assim por diante. E também, eu tenho a pasta Ícones, que é a minha pasta para todos esses ícones aqui do Guia Sal. Porque se você se lembra, nós apenas os copiei das telas. Portanto, estes são os tamanhos originais como aparecem nestes, onde estão as telas, bem como com o logotipo. Então, como você pode ir sobre isso é você pode exportar todos esses ícones aqui. Você pode exportar o logotipo em oito pastas separadas ou fora de todas essas pastas que você pode usar. Então, por exemplo, eu sei que esses botões publicados são da tela de publicação, então você pode localizado aqui. É uma descrição publicada, e você pode exportá-los para lá. Então, por exemplo, vamos exportar ícones. Primeiro, vou selecionar todos esses ícones daqui. Então eu vou segurar minha tecla Shift, selecionar tudo e, em seguida, pressionar o controle ou o comando E. E ele vai me mostrar esta penalidade de ativos de exportação. Então eu vou escolher SPG para os ícones. E antes de exportar qualquer coisa, eu aconselho você a falar com os desenvolvedores e perguntar-lhes que tipo de arquivos eles precisam? Eu sempre faço isso quando estou criando meu resumo de projeto. E você pode ler isso dentro do resumo para que eu possa saber com antecedência. Que tipo de arquivos eles precisam? Que tipo de tamanhos eles precisam? Portanto, sabemos que eles precisam de tamanhos de iPhone 10 para começar e começar com este projeto. Então esse é o tamanho de Onley que estava indo para exportação para o IRS. Piorar por enquanto. Se eles quiserem algo feito mais tarde, corrigiremos esses tamanhos para os dispositivos maiores e exportaremos os ativos novamente. Ou se eles já têm ácidos SPG, que são infinitamente escaláveis porque eles são formato de arquivo reitor e X T é ferramenta eleitor para que eles possam usar esses arquivos SVG como eles foram exportados no início. Mas por exemplo, para P e G para imagens J Peg teremos que exportá-las mais uma vez. Então, uma vez que você selecionou no formato, você pode ter em diferentes estilos. Mas você pode ter CSS interno se eles querem copiar CSS a partir desses ícones. Mas eu recomendo que você sempre deixe essas configurações como estão, menos que os desenvolvedores peçam em diferentes configurações de exportação para que você possa tê-las incorporadas ou como links otimizados, unificados. Então isso é extremamente importante e ótima opção de ter, especialmente quando você está projetando sites, porque se você clicar, otimizar, ele irá otimizar esses ícones SVG ainda mais. Então, eles vão carregar ainda mais rápido e abrir o site ainda fomentar, que é extremamente importante, obviamente para S CEO e para a otimização do motor de busca em geral. Mas vamos apenas manter as coisas simples para este vídeo e apenas manter tudo como está. E, finalmente, você pode exportar para, e você pode criar alterações e podemos localizar nossos ícones. Aqui está, e eu posso selecionar essa pasta e eu posso simplesmente clicar em exportar, e ele irá exportar todos esses diferentes ativos como ícones separados. Então, se eu abrir essa pasta aqui, então aqui está, os ícones que você pode ver que ele exportou cada ícone separadamente aqui para esta pasta de ícones. Então eu conteúdo mais sobre uma exportação de todos esses ativos diferentes dessas telas diferentes . Então eu não vou desperdiçar seu tempo e exportar cada um dos ativos individuais. O que eu posso recomendar é que você exporte esta ilustração como ela é. Mas mais uma vez, se você se lembra, nós apenas cooperamos a partir daqui e simplesmente colamos aqui no guia de estilo. Assim, para esta tela específica em New Image, você pode simplesmente exportar esta ilustração a partir daqui. Ou se você quiser, você pode simplesmente saltar e exportá-lo a partir daqui porque nós já exportamos isso. Esses ícones, você pode simplesmente exportar esses espaços reservados e isso é basicamente o fim. Faça isso. Então, vamos exportar essas imagens. Então o que eu posso fazer porque este é um crit repetido eu posso un grupo descript eo que eu recebo aqui é o cartão. Mas como você pode ver, ele basicamente se moveu. Descarte lá fora, fora e nosso porto. Então você pode lembrar que tivemos um problema semelhante com um dos vídeos anteriores. Então o que eu posso fazer é agrupar todos esses cartões para que eles estejam contidos dentro deste nosso porto e eu posso simplesmente chamá-lo de cartões assim. E eu posso posicionar o cartão inicial, que é este. Eu poderia movê-lo todo o caminho para baixo. Desculpe, na verdade está neste, eu acho. Vamos verificar rapidamente qual é qual. Este é o carro número um. Então vamos posicioná-lo logo acima Este é o cartão número dois. Sim, é. Então, vou simplesmente chamá-lo de Carro número dois. E este é o cartão número três. Então eu vou mover aquele carrinho todo o caminho para baixo. Então mova-o para aqui e tenha 20 pixels. Então, o mesmo tipo, e esses espaçamentos. Então eu posso abrir todos esses cartões e você pode ver que temos exatamente os mesmos nomes aqui . Então o que você pode fazer é pular para dentro e chamar essa arte ou uma. Este é um amargo também. E, finalmente, isso no final, está fora. Nossos três e você pode fazer o mesmo com imagens. Então esta é a imagem um. Esta é a imagem e, finalmente, esta aqui em baixo é a imagem três. Agora, como você exportou esses ícones, eles podem usar os ícones como estavam aqui. para que eles possam saltar dentro da pasta Ícones e levá-los daqui porque eles são exatamente do mesmo tamanho e se você compartilhá-lo com eles para desenvolvimento. Então, se eu clicar aqui, você tem rebocar esses ativos para download e você pode simplesmente criar um link. E ele vai criar esse projeto para os desenvolvedores e dentro de lá. E eles podem ver a diferença de cama e margens e assim por diante. E eles podem ver espaçamento diferente que você usou e tudo o resto. E eles podem então iniciar e criar este aplicativo. Eles também têm Adobe X'd. Eles podem abri-lo e ver por si mesmos essas diferenças basing que você usa em vários lugares diferentes. Mas para que possamos exportar qualquer coisa, podemos selecionar essas imagens e você pode manter o controle enquanto você está selecionando, ou Commander Mac e você pode selecionar todas essas imagens diferentes. Em seguida, aperte controle Comando E. E em vez de festa, você pode escolher PNG. Neste caso, você pode escolher design ou você pode escolher IOS e ele será selecionado. Ele irá exportar ativos selecionados em um x dois x e três x e eu realmente recomendo que você faça isso, ele é projetado em um X, então ele é projetado no tamanho original e ele vai escalar para cima caso eles precisam para dispositivos maiores mais tarde para que eles possam usá-lo assim. E, finalmente, podemos bater mudança porque queremos que este seja exportado para pasta diferente para que você possa clicar aqui e localizar a casa. Então, aqui está. Vou selecionar que Faller Aaron, uma exportação de sucesso. Ele irá exportar todas as minhas imagens como PNG. E se eu encontrar um lar bem aqui, você pode ver como tudo parece. Então nós temos uma água 11 que é dois X e um um um três x E ele fez exatamente a mesma coisa para o resto fora de nossas imagens. Então, a próxima coisa que você pode exportar são nunca barra em Tab são. Então deixe-me fechar rapidamente tudo para que você possa clicar aqui para o nab nosso e para a guia são. É por isso que estávamos dando a esses nomes como este para que você possa selecionar o controle de batida de barra e barra de rasgo ou o comando e select como PNG e hit export porque queremos que eles sejam capazes de sobrepor. Estes como PNG em cima destes diferentes elementos. E, finalmente, o que você pode exportar aqui é a barra de status. Mas a barra de status geralmente vem por padrão dentro de um menos, então eu realmente não vejo o ponto de exportar a barra de status. Está aqui só para espaçamento. Então todos estão na mesma página que o dedo onde os elementos estão vindo. A mesma coisa é com este indicador doméstico, é a opção padrão dentro de Iris. Então não há realmente nenhum ponto fora exportá-lo, porque ele virá quando os desenvolvedores queriam entrar. Está aqui só para a referência. Então eles sabem que tipo de espaçamento devem usar? Porque, mais uma vez, este indicador inicial, bem como a barra de status, estão vindo do IOS padrão. Você gosta dele feito pela Apple, já falou sobre isso em um dos vídeos anteriores. Então, você sabe, você vai embora porque você usou exatamente o mesmo espaçamento que a própria Apple. Então você sabe que está no bom começo. Você não exporta texto porque eles vão incluir texto dentro do casaco, então eles vão ver aqui dentro. Se você compartilhar para o desenvolvimento. Eles vão ver diferentes espaçamentos mais uma vez. Então, entre, por exemplo, isto após imagem e esta imagem. E entre essa imagem e esses ícones e assim por diante, eles vão ver que tipo de tamanho você usa para o texto. Quantos parágrafos têm e assim por diante e assim por diante para que saibam tudo. Então você basicamente exporta imagens e esses espaços reservados diferentes. Então, para mim não entrar em cada tela, deixando correr rapidamente e dizer isso, mais uma vez você vai exportar essas duas imagens e você vai exportar a facada estão no fundo bem aqui. Estou falando do nosso projeto. Obviamente você vai exportar esta ilustração ou, se você já fez a partir do guia de estilo, você pode simplesmente pular esta etapa. Mas você pode exportá-la daqui. Você está indo para exportar esses espaços reservados para galeria BG, bem como câmera BG, porque existem diferentes elementos e seus clicáveis. Nesse caso, você já exportou o ícone, então você não precisa se preocupar com isso nesta tela. Você vai exportar todas essas imagens diferentes. Se isso é algo que você quer porque você quer exportá-lo e essas dimensões. Você também pode incluí-los em uma pasta separada para que os clientes possam ter o tamanho original. Por exemplo, esta imagem estava citando 5000 por 3000 algo assim. Mas na minha opinião, você deve exportar todas essas imagens diretamente daqui porque assim os desenvolvedores saberão quais tamanhos eles devem usar a partir daqui. Em seguida, nós adicionamos imagem e eu não vou toe exportar esta imagem nesses estados diferentes. Como você pode ver aqui, eu só vou exportar esta imagem original. Agora, para os controles deslizantes, você está indo apenas para exportar esses três elementos. Então círculo, cor deslizante e slider Bijie, você vai exportá-los como PNG separados fez dessa maneira. Os desenvolvedores vão simplesmente copiar este controle deslizante para que você não precise exportá-los várias vezes. Você pode apenas exportar para este, e então eles podem simplesmente copiá-los porque eles podem obter este compartilhamento para o link de desenvolvimento e eles podem ver os diferentes espaçamentos e assim por diante. Aqui você pode exportar esta área de corte de imagem, mas mais uma vez eles podem incluir o recurso de recorte IOS original. Assim, por exemplo, eles podem incluir esses ícones personalizados. Mas o recurso de corte original fora do próprio sistema IRA, então não há confusão lá. Finalmente, para a descrição e publicação, você pode obviamente exportar esta imagem, esta imagem, e você pode exportar esta área de texto. Estas linhas e para a parte inferior já mostram que os botões estão dentro do guia de estilo, para que você possa exportá-los dessa forma. Agora, para os gráficos de si mesmos, eles podem usar os gráficos padrão e que o IOS oferece e eles sabem com tubarões que eles devem usar para imitar esses. Mas apenas no caso de você pode exportar esses gráficos como quer s vegetais ou PNG, apenas para sua referência, você não exportar texto, e mais uma vez você está indo para exportação. Estes BG's assim tipo de BG gosta BG e, finalmente, melhores momentos para postar VG porque esses são seus espaços reservados. Você também vai exportar essas linhas, e é basicamente isso para esta tela. Para os gostos. Você está indo para exportar imagens mais uma vez barra superior e a barra nunca para o perfil. A mesma coisa mais uma vez. Então estes dois, bem como todas as imagens que você vê e Finalmente, para o menu lateral, você pode exportar este ícone, mas mais uma vez ele está localizado no guia de estilo para que ele possa exportar de Havia como nós já fez, e finalmente, você pode exportar esta imagem como ela é, mas exportada como PNG. Então, cada vez que eles incluídos dentro do menu, será PNG transparente. Assim, ele vai obter todos esses efeitos agradáveis que já mostraram dentro de nossos vídeos. E isso é basicamente isso para exportar. E finalmente, quando chega a hora de compartilhá-lo com seu cliente, tudo o que eles precisam fazer é que você pode simplesmente selecionar tudo isso. E no Windows eu posso clicar com o botão direito do mouse WinZip e adicionar ao zip aplicativo do obturador. E uma vez que ele faz isso, ele vai criar um arquivo zip simples e facilmente compartilhável. Então, no meu caso, você pode ver que está em Lee seis megabytes de tamanho, e você pode salvar este nosso arquivo de projeto e enviá-lo separadamente, se quiser. Mas no nosso caso, como você viu, nosso arquivo ZIP é de apenas seis megabytes, então podemos enviá-lo para o nosso cliente, e eles podem ser facilmente compartilhados foram e-mails que você pode compartilhá-los foram caiu no ar, por exemplo, você pode compartilhá-los através do WhatsApp Viber. O que quer que seus clientes estejam usando pode estar se comunicando por meio de folga para que você possa enviá-los via Dropbox e assim por diante. E eles podem facilmente abrir este arquivo zip tanto no Windows quanto no Mac, e ter essa estrutura de pastas aqui dentro. Você também pode compartilhá-lo assim com seus desenvolvedores, e eles serão capazes de abrir todos esses arquivos e usá-los como eles seu dedo pretendido. 100. CONCLUSÃO: Parabéns. Você chegou ao fim do curso. Eu realmente espero que você tenha achado útil. Qualquer um para encontrar algumas dessas técnicas úteis e novas e informativas, e que você está indo toe aplicá-los em um trabalho futuro. Eu realmente espero que você vai colocar esse conhecimento à prova e que você realmente vai aplicar pelo menos parte do que você aprendeu neste curso para o trabalho futuro e que toda essa informação melhorou o seu trabalho pelo menos para alguns grau. E agora vamos recapitular rapidamente o que temos aprendido e o que fizemos dentro deste curso. Então, a primeira coisa fonte. Percorremos todas estas oito categorias diferentes. Então passamos de imagens através de gráficos, botões, efeitos e assim por diante todo o caminho para outros. E nós completamos vários efeitos diferentes. E nós aprendemos como animar tudo, desde ícones a formulário até texto e assim por diante. E então, uma vez que completamos a dívida, criamos nosso projeto. Começamos a partir do resumo de design. Incluímos o planejamento do projeto. Nós incluímos alguns arames que desenhamos no papel, então criamos nosso estilo Guide criou nossos arames e planejamos todo o projeto. Então, uma vez que completamos as armações de arame, passamos com o design. Nós incluímos diferentes variações desses arames. Nós incluímos as diferentes imagens, criamos algumas sombras diferentes, e criamos as telas do painel e alguém. E depois que concluímos nosso projeto, passamos para os protótipos, criamos vários estados de todas essas telas diferentes. E finalmente, uma vez que criamos o protótipo, nós compartilhamos isso com o recusado com os desenvolvedores. E eu te mostrei como você pode empacotar tudo isso, Toby facilmente digerível tanto para seus clientes quanto para seus desenvolvedores. Então é basicamente isso para o discurso. Obrigado. Mais uma vez, tanto por aceitar. E mais uma vez, eu realmente espero que você pegou algum conhecimento em algumas dicas valiosas dele e que você está indo dedo do pé, aplicá-los em seu futuro trabalho no último vídeo deste curso eu vou compartilhar com vocês alguns links. E recurso é que eu mencionei no discurso onde você pode encontrar fundos onde você pode encontrar imagens sempre usando onde você confinou. Nice, bons ícones livres onde você pode encontrar as ilustrações que usamos e alguém até que eu vou vê-lo lá. 101. Links e recursos: Finalmente, eu quero compartilhar links e recursos é com você. Então você está indo para obter este links e recurso é pdf você pode abri-lo e simplesmente clicar sobre esses links quer clicar sobre eles. Ele irá pedir-lhe esta mensagem. Você pode clicar em permitir para que você possa ser capaz toe obter o dedo do pé que link imediatamente. Então aqui temos o Fundo Sense aberto, que é livre de fontes do Google, e nós estávamos usando isso em todo o nosso trabalho, você pode baixar imagens grátis do Splash e que a foto stock Então você pode basicamente clicar sobre estes palavras e ele irá levá-lo a esses links. E, finalmente, você pode baixar ícones gratuitos do design de material do Google e eles são gratuitos para uso pessoal e comercial. Finalmente, você sempre pode entrar em contato comigo se você tiver alguma dúvida. Por que essas plataformas são tão compartilhadas de habilidades ou você para mim onde quer que você esteja fazendo meu curso ou meus outros cursos? E eu sempre responderei de bom grado. Obrigado mais uma vez por fazer este curso, e eu realmente espero que você tenha encontrado tanto valor nele. E eu realmente espero que você vai aplicá-lo a um futuro. Você eu desenho trabalho assim até a próxima vez, ser criativo e cuidar 102. Componentes de Adobe XD: Aqui é Designer Alex. E eu só queria dar a vocês uma rápida atualização sobre o Adobe X'd em geral. Ah, enquanto volta adobe eggs, a equipe lançou uma atualização para os componentes, e agora você pode criar um componente fora de seus botões, imagens, imagens, formulários e assim por diante, e então você pode interagir entre esses componentes. Então eu só queria criar uma atualização para a morte porque eu queria esperar e ver o que eles incluiriam dentro desses componentes. Porque, como você sabe, adobe eggs, a equipe está lançando atualizações todos os meses. Então, basicamente, eu só queria lhe dar uma rápida análise e como você pode usar esses componentes se você quiser usando técnicas que eu ensinei neste curso. Então a primeira coisa que eu quero mencionar é que você não tem que usá-los, mas é benéfico para você usá-los porque você vai criar o seu trabalho mais rápido e você vai terminar o seu trabalho mais rápido do que antes porque esta atualização é realmente importante. Então, para começar, vou te mostrar o que quero dizer. Então vamos criar retângulo. É usar algo como muito cedo com o Coronel 70, por exemplo, vamos posicioná-lo no centro. Vamos dar-lhe um raio de canto de 50, por exemplo, apenas para criar uma garrafa agradável e simples. Vamos usar a cor então três e C seis funcionários F sem uma borda. E vamos incluir, por exemplo, carrega mais texto. Dentro comigo incluem sentido aberto como o 20 Leste. - Tudo bem. Torná-lo no centro alinhado e oposição no centro assim, e eu também vou garantir que é branco. Selecione ambos e simplesmente clique aqui. Aperte o controle G para agrupá-los E como sempre, eu vou chamá-lo Bt end e eu vou saltar para dentro e chamar este Bt e B G. Agora o que você pode fazer com este botão? É bem simples. Nós sempre tivemos a criação de componentes dentro do adobe é D, então você pode simplesmente pressionar o controle ou comando K, e você criará um componente. E se eu pular aqui, você pode ver que nós temos componentes e nós temos BT dentro, que é este componente que eu acabei de criar. Este diamante preenchido significa que seu componente mestre, que basicamente significa que ele é o primeiro componente que você criou fora desta instância, e você pode criar quantas instâncias quiser usar em todas as nossas placas e em toda a sua tudo o que você tem a fazer é simplesmente arrastar e soltar a partir daqui. E você pode ver se eu clicar neste que este diamante é preenchido e este é oco por dentro. Se retomar muito mais perto, você pode ver o que quero dizer. Então isso é oco e isso é preenchido, o que basicamente indica que este é o componente mestre. E esta é a instância deste componente mestre o que isso significa novamente. Na prática, por exemplo, eu clico aqui e digitando, por exemplo. Eu não sei busca. Você pode ver que ele se atualiza, mas você pode pular aqui no 2º 1 e eu fui soprado mais. E você pode ver isso porque esta é a instância fora deste componente monstro. Mais uma vez, você pode ver que ele está atualizado, o que significa que ele foi. Ele tem uma mudança em comparação com o componente mestre, porque agora você pode ver que este diamante não é mais segurar. Mas tem este ponto no meio. O que isso significa é basicamente ovos as buscas para suas mudanças e ele pode ver que a cor fora deste componente monstro é azul e desligado. Esta instância também é azul. Então, por exemplo, se eu quiser alterar essa cor para alguma outra cor, ocorrências de atualização odiosas ao longo. Mas se eu digitar aqui e clicar, saiba mais, você verá que ele não é atualizado para este componente abaixo desta instância porque nós alteramos essa instância separadamente deste componente monstro. Então, basicamente, o que quer que você crie, ele vai para um show abaixo. Se você quiser mostrar, ou você pode substituir esses recursos simplesmente usando essas instâncias e simplesmente atualizando o que você não alterou em seu componente mestre, por exemplo, podemos alterar o raio do canto. Então vamos usar 20 e você pode ver que está indo para atualização. Em ambos os casos, em tempo real, você também pode escolher a borda porque nós não alteramos a borda abatida e brincamos com ela. Você pode jogar com essas configurações, por exemplo. Você pode incluir o que quiser aqui. Você pode estender para palestras para 100, por exemplo. Você pode ver como ele se estende em sagacidade e todas essas coisas que você pode melhorar. Você pode incluir se quiser, e ele será atualizado em tempo real. Em todas as suas instâncias. Mas lembre-se, quando você criar uma instância a partir de seus componentes mestre, ela será atualizada da maneira que você quiser atualizar. Então, mais uma vez, se você quiser o dedo do pé bem, este exemplo e apenas manter a cor azul neste exemplo. Eu posso clicar aqui, e eu posso digitar 20. E você pode ver agora instância é atualizado enquanto o componente mestre ainda é assim, ainda em sua forma original. E se eu clicar aqui e mudar isso para 20, por exemplo, ou até menos, Tenente , digamos, como você pode ver, não vai atualizar instância. Ele só vai atualizar o componente mestre. Então, no próximo vídeo, eu vou mostrar a vocês o que tudo isso significa e nós vamos jogar com estados, e eu vou mostrar a vocês como os estados vão evoluir seu processo de prototipagem. Quais são os pontos fortes e também Quais são as limitações? Porque isso tem algumas limitações, e você ainda terá que usar várias portas para algumas animações. Não para todos, mas para algumas animações. Então eu vou te ver no próximo vídeo onde nós vamos explorar que 103. Estados de componente do Adobe XD: Então, como ele disse no vídeo anterior, isso tem algumas limitações, e eu vou mostrar a vocês quais. Mas antes de o fazer, deixe-me explicar rapidamente o que é isto. Então, como você pode ver no vídeo anterior, criamos um componente que sempre esteve dentro de fora do Adobe X'd. Só se chamava simples antes. Agora é chamado de componentes. Mas o que é diferente é isto. Então você tem aqui no seu componente direito, mestre, mestre, e aqui você tem o estado padrão para que você possa clicar aqui, dedo do pé, adicionar um estado, e quando você fizer isso, você pode. Você vai ser apresentado com um novo estado ou estado de foco. Como você pode ver, ele tem este ícone Tonder, então novo estado que você pode chamá-lo como quiser. Então vamos chamá-lo clicado, por exemplo, e você pode adicioná-lo agora. Este estado clicado como você quiser, então eu vou pular bem aqui para o meu BT e BG, e eu vou mudar a cor. Por exemplo, ele é usado alguma cor escura apenas, por exemplo, algo como isso, e agora você pode mudar entre seus estilos e você pode ver o padrão. Estado é este agradável azul em clicado é esta cor cinza escuro. Então, como você pode usar esses estados? É muito simples. Você só precisa ir para um fosso protótipo e simplesmente clicar aqui, e ele vai apontar para o mesmo nosso porto como você pode ver e você vai escolher gatilho. Por exemplo, toque em transição. Vamos usar também animar destino, e você tem que escolher um estado, porque agora você tem estados, e você pode adicionar como muitos fora desses estados como você quer. Por exemplo, pairar vazio, clicado, erro, sucesso e assim por diante, para que você possa adicionar quantos desses estados quiser. Então vamos simplesmente usar judeus. Estado clicado porque esses são os estados que temos flexibilizando tão basicamente mesmo como antes . Vamos com a duração fácil agora 0.3, e é basicamente isso. Então, agora, quando eu clicar aqui e clicar aqui, você pode ver que ele muda para este estado de clique. Então, se fizermos isso mais uma vez, você pode ver quando um clique ele muda rapidamente para esse estado porque a única coisa que realmente muda é a cor neste caso Agora, como tudo isso se traduz em nossas animações. Vou te mostrar no próximo vídeo quando eu estiver indo para o pé. Explique alguns pontos fortes e limitações porque isso, como um conjunto no vídeo anterior, tem algumas limitações. E a chave está bem aqui. Então, quando você está escolhendo interações, você pode ver que não temos tempo. Então, basicamente, eu vou explicar no próximo vídeo, você pode fazer um monte de coisas com isso, mas ainda há algumas limitações, então eu vou te ver lá. 104. Animação de componentes Adobe XD: A principal limitação com esses componentes é basicamente o tempo. Então, se eu entrar aqui, nosso arquivo de botões e você também pode baixar este arquivo, ele já é fornecido. Você pode ver isso onde quer que tenhamos tempo para que você possa ver o tempo gatilho. Podemos usá-lo com componentes se for assim, então podemos ter uma interação múltipla entre componentes quando temos tempo, mas não podemos usá-lo quando é o 1º 1 Eu não sei porquê. Então, por exemplo, se você quiser aquela animação de carregamento que eu mostro, que começa com o gatilho de tempo, você não pode usá-lo porque você não pode usar o 1º 1 para ser o tempo. Às vezes, também não lhe dará a opção de usar o gatilho de tempo para esses segundos e ativar os e assim por diante. Mas normalmente você vai. Mas vamos explorar a dívida, então eu vou usar isso como um exemplo, e eu vou voltar para o projeto, então eu vou copiar este. Então aperte o controle ou comando profundo, eu vou saltar para dentro, e você pode ver em vez de ter essas pastas como Sul e ter para nossos portos. Para esta animação, vamos usar rapidamente Control Command K para criar um componente. E vamos chamá-lo de suspenso, por exemplo, Então e como você pode ver, estamos agora no estado padrão. Mas vamos escolher novos estados e vamos chamá-lo de fechado. E para este novo estado, vamos simplesmente abrir a máscara, escolhê-la e simplesmente manter a tecla shift pressionada para fechá-la. E isso é basicamente isso que você precisa fazer uma vez que você tem o seu design. Portanto, é importante que você tenha que ter seu design primeiro, a fim de ter isso selecionado. Então, como podem ver, eu tenho esta animação ou bem aqui estendida. Mas não vou fazer isso por causa do tempo. Só quero te mostrar o que você pode fazer com ele. Então, quando você quiser protótipo isso, tudo que você precisa fazer é clicar em um salto de estado padrão para o protótipo, clique onde quiser. Neste caso, vou clicar aqui mesmo. Basta clicar aqui para estendê-lo. Você pisa, e isso é o que eu estava dizendo. Como pode ver, não temos o gatilho temporal. Então, se o gatilho de tempo for o 1º 1, você não pode usá-lo. Então vamos usar a torneira e vamos fechar o suco. Fácil agora 0,3. Isso é bom. Agora o que você precisa fazer feche isso. É simplesmente cabeça sobre o próximo, e então você tem que clicar aqui e suco passo. Você pode ver que ainda não temos tempo aqui. Fácil agora 0.3 e escolha a nossa porta fora do estado padrão E agora, uma vez que um hit aqui para entrar no modo protótipo. Clique aqui. Você pode ver que se estende. Clique aqui. Você pode ver que ele fecha, mas como você pode ver em vez de fora para nossos portos, nós só temos um. E como eles disseram, você pode ter tantos desses estados quanto você quiser, então você pode ter 50 estados 60. Não importa, no entanto, é outro estado, então você pode adicionar um estado porto também. Você tem que escolher o estado padrão, por exemplo, ou fechado. Vamos escolher o estado de dobra e pairar. Vamos lá. Ele, no entanto estado. E agora o que você precisa fazer é simplesmente mudar Woods. Vá com o retângulo da mesquita. Vamos adicionar uma sombra que é estendida para 55 ou 20 por exemplo, assim, e vamos estender nossa mesquita ainda mais para que possamos ver como essas sombras são realmente . E se eu clicar aqui, você pode ver que estamos em um estado portuário. Mas aqui estamos nós, estado padrão. Então, quando eu clico em pré-visualização é, você pode ver como ele funciona. Mas quando você tenta fechá-lo e fazer a animação, ele não funciona. Mas deixe-me ir para o estado padrão. Clique mais uma vez, você pode ver que temos o poder, mas não podemos fechá-lo. Por que não podemos fechá-lo porque há uma diferença entre o estado do porto e o estado padrão porque dentro do estado de horror, nós estendemos a mesquita e adobe ovos não podem trabalhar o recurso auto animar porque a mesquita é estendido. Mas você tem a idéia. Quando você começar a projetar, comece a incluir essas coisas enquanto estiver projetando e, em seguida, crie componentes depois de terminar com seus designs. Então, primeiro, criar tudo e, em seguida, criar componente e, em seguida, em diferentes estados para seus componentes . Então você não é. Você não acaba com uma situação como esta, então basicamente você não pode ter elementos diferentes entre seus diferentes Estados. Todos os seus elementos têm que permanecer o mesmo se você quiser usar auto inimigo, modo que é basicamente isso para esses componentes. Como você pode ver, eles podem economizar muito tempo. Então, basicamente, quando você tem nossos quadros como estes, eles não vão funcionar porque eles são o momento. E quando você tem nossos portos como esses com estados básicos, eles funcionarão. Mais uma coisa é quando você está mudando de lugar, por exemplo, daqui para aqui, eles vão criar algumas falhas às vezes, especialmente em casos como estes quando você está mudando de cor. Então, de azul para vermelho, criará algum tipo de falha quando mudar de posição daqui para aqui. Então, por favor, tenha isso em mente. Este sistema realmente não é perfeito, e eu sempre recomendarei que você testá-lo antes de se comprometer com ele. Então, basicamente, veja se funciona assim. Se isso acontecer, então é fantástico. E será sempre assim com algumas animações básicas. Assim, por exemplo, em casos como estes, ele vai de um lado do outro e simplesmente muda de cor e muda a forma deste ícone para que ele funcione sempre nesses casos. Mas nesses casos complicados, talvez seja sempre melhor usar várias nossas portas, especialmente se você tiver que seguir muitas dessas etapas, como 1/2 em algumas delas. Por exemplo, neste onde temos este processo Donald e assim por diante em casos como estes, ele sempre funcionará bem para que você possa usá-lo para economizar algum espaço e algum tempo dentro do Adobe X'd. E além disso, tudo o que eu disse que eu sempre recomendarei é que você use componentes porque os componentes são uma maneira fantástica dedo do pé. Aumente sua velocidade e para melhorar seu fluxo de trabalho, porque com componentes você pode fazer muitas coisas. Como você viu em vídeos anteriores, você pode alterar as cores separadamente. Você pode incluir fundos diferentes. Você pode incluir diferentes raios de canto, sombras e assim um para diferentes estados de componentes, por exemplo, que você possa realmente brincar com ele. Quanto à parte de animação, apenas certifique-se de testar se ele não funciona com apenas um quadro de arte, e com tudo combinado em que único nosso porto, então você sempre pode voltar para este princípio e simplesmente copiar e colar seu nossas portas e simplesmente ir entre essas são portas porque, como você viu, você tem muito mais opções, especialmente com o gatilho de tempo e com o gatilho de voz quando você tem várias nossas portas do que apenas com um único nosso porto.