Aprender design de UX de interface com o Adobe XD

1. Introdução do Adobe XD: Olá a todos e bem-vindos à nossa aula de Adobe XD para aprender I. Se você está planejando aprender a interface do usuário e a experiência do usuário desde o início , você está no lugar certo. Porque abordaremos nesta aula do básico ao avançado. Esta é uma aula de nível iniciante. Se você não tem nenhuma experiência anterior, então você pode participar desta classe. Vamos dar uma olhada no que você aprendeu nessa aula. Introdução, espaço de trabalho e interface. Em seguida, aprenderemos sobre ferramentas básicas e wireframe de baixa resolução no Adobe XD Como usar a opção de texto no XD usando formas no XD Stroke. Copie e cole ícones gratuitos para usar em projetos e UIKits existentes Agrupamento e edição de ícones, prototipagem em Adx D, animação, como compartilhar seu quadro de palavras Além disso, aprenderemos a criar cores de moodboard no AdobXD e imagens no OobXD Por fim, projeto sobre como criar um design de página da web. Depois de concluir esta aula, você poderá criar seu próprio aplicativo móvel e web design. Crie seus próprios gradientes de cores e paletas de cores e obtenha um bom conhecimento de coloração em web design Faça a prototipagem, selecione imagens para criar botões e também faça o estilo da página da web Este é um projeto baseado durante o aprendizado, você terá projetos de classe. O que você aprende, você poderá participar de projetos de classe, para poder praticar enquanto estiver aprendendo. Você terá recursos de apoio nesta aula, então será fácil aprender durante o aprendizado. Se vocês enfrentarem algum problema ou tiverem alguma dúvida , sinta-se à vontade para me perguntar. Estou sempre à sua disposição para ajudá-lo. Vamos começar a aprender XD para YU X juntos. 2. Introdução, espaço de trabalho e interface: Olá a todos e bem-vindos ao tutorial sobre o Adobe XD. Aqui está o primeiro capítulo, e aqui aprenderemos sobre design de UI UX. Ok, então, no primeiro capítulo, vou contar a vocês o que é o Adobe XD e como ele é diferente de qualquer outro software de design de UI UX disponível no mercado, ok? Então eu vou falar para vocês sobre o espaço de trabalho e também a interface desse aplicativo em particular, ok? Como você pode realmente aprender como trabalhar e como começar a criar seu primeiro aplicativo móvel ou uma página da web. Ok, não vamos perder tempo e vamos começar com esse design de UI UX juntos. Aqui vocês podem ver que estou na página inicial do Adobe XD. Aqui vocês podem ver se estão familiarizados com outros aplicativos da Adobe. Vocês estão familiarizados com esse espaço de trabalho, ok? Seja uma loja de hotel ou de design, Illustrator ou After Effects Essa página inicial em particular, é exatamente a mesma coisa. OK. No canto superior esquerdo, vocês podem, esse é o logotipo do Adobe XD. Está bem? Então esse é o logotipo depois disso. A partir daqui, vocês podem criar um novo arquivo se você fez algum trabalho anteriormente e o salvou. Se você clicar em Abrir, esse tipo de barra de menu virá de onde você poderá acessar seu sistema. E a partir daqui, você pode basicamente escolher qual deles deseja abrir. Ok, vou fechar como um e aqui está uma opção que o levará à página da web de onde você saberá como começar a usar esse aplicativo específico. Ok, então daqui vocês podem ver que há algumas coisas que podemos aprender. Aqui estão os tutoriais, alguns guias do usuário e alguns dos problemas comuns que você pode enfrentar Eles também têm a solução para tudo isso. Ok, vamos voltar novamente para minha página de aqui depois disso. Se você estiver na opção de arquivos. Na opção de arquivos, vocês podem ver se eu trabalhei alguma coisa ou se tenho alguma coisa salva aqui. Como vocês podem ver, eu tenho um arquivo aqui no qual trabalhei anteriormente. Se alguém estiver compartilhando esse trabalho específico com quem quiser trabalhar neste X D junto com você, para que você também possa trabalhar, pode compartilhar com você da mesma forma que compartilhar algum arquivo com você. A partir daqui, vocês podem acessar todos aqueles a partir daqui. Vocês podem gerenciar links se já tiverem colocado algum link em seu trabalho antes. Daqui vocês podem ver, mas eu não tenho nenhum por enquanto. Está apenas me levando para outra página para me mostrar que não tenho nenhum link compartilhado. OK. Vou voltar novamente. Venha para o meu X D a partir daqui, vocês podem ver se excluíram algum arquivo daqui. OK. A partir daqui, vocês veem o arquivo excluído. Por exemplo, se vocês quiserem se recuperar, vocês podem se recuperar. Mas dentro de 30 dias, ele será excluído permanentemente se você estiver colocando seu trabalho aqui na opção de exclusão. Está bem? Então você precisa recuperar isso antes de 30 dias, ok? Como estou usando o plano de inicialização, eles estão me dizendo para atualizar partir daqui, você pode ter acesso a todos os arquivos recentes que você trabalhou ou visualizou. Ok, a partir daqui, mostrarei a vocês como abrir um novo arquivo ou como criar um. Ok, aqui, suponha que eu queira criar um novo arquivo. Eu posso simplesmente clicar neste, ok? Aqui, esse é o espaço de trabalho. Mas como acabei de selecionar essa, esta web 1920 por 1.000 ATP. Esse é o tamanho padrão da moldura, ou o tamanho da prancheta, ok? De onde podemos começar a trabalhar. Mas para mim, basicamente, se eu quiser fazer alguma coisa nesse caso, como se eu tivesse um tamanho específico em mente, para qual é um aplicativo móvel ou um aplicativo web para o que estou criando. Nesse caso, o que posso fazer é voltar à minha página inicial novamente. Na minha página inicial, vocês podem ver que eu tenho diferentes tipos de predefinições aqui Você pode ver que eu tenho diferentes aqui, como para iPhone, para iPad Google Pixel. Se você está fazendo isso para qualquer página da web, vocês também podem fazer para uma página da web. Ok, venha aqui novamente. Se eu apenas arrastar isso até aqui, você também pode ver na página da web que eu tenho tamanhos diferentes. Se você estiver criando uma história no Instagram ou qualquer postagem no Twitter, postagem no Facebook ou vídeo no Youtube, vocês podem usar essa predefinição específica aqui Se você já tem algum tamanho, já conhece a largura e o hype Existem muitos sites. De onde vocês podem obter os tamanhos de tela. A partir daí você pode ver a largura e a altura de acordo com o que vocês podem colocar aqui também. Você também pode salvar esse tamanho personalizado aqui. Ok, vou mostrar a vocês como criar uma prancheta aqui Como você pode ver, agora estou no espaço de trabalho aqui. Ok, este é o espaço de trabalho básico de onde vocês trabalharão Se você quiser voltar para sua página inicial, vocês podem voltar aqui ou clicar neste botão inicial. Ok, vou fechar esta depois disso, vamos saber quais são todas as páginas que eu tenho aqui. Ok, então aqui vocês podem ver que essa é chamada de barra de ferramentas. A partir daqui, vou contar a vocês sobre todas essas ferramentas, o que podemos usar depois disso. Vocês podem ver que tenho a opção de prototipagem Ok, eu vou dizer a vocês como fazer um protótipo também. Ao lado da minha página aqui, vocês podem ver se eu apenas diminuir o zoom. Ok, deixe-me usar outras predefinições aqui. Ok, deixe-me pegar uma prancheta, deixe-me criar uma a partir daqui Deixe-me vir aqui e eu quero criar uma prancheta. Nesse caso, o que vou fazer é selecionar, basicamente posso criar pranchetas diferentes Deixe-me mostrar a vocês, criando um, voltem ao seu arquivo de design. arquivo de design aqui, vocês podem ver a opção Artboard Depois de selecionar esta prancheta aqui, vocês podem ver que eu tenho modelos ou predefinições diferentes Deixe-me pegar o iPhone 14, Pro max aqui. Vocês podem ver que eu tenho uma prancheta aqui. Basicamente, pranchetas são como molduras ou a mesma coisa. Ok, se você estiver usando o Figma ou se estiver familiarizado com qualquer outro aplicativo de design de UI UX , vocês emoldurarão uma prancheta aqui no X D. É exatamente o Usando essa ferramenta. Vou apenas mover este aqui. Essa é a opção para prototipagem. Suponha que eu queira prototipar isso com este. Eu posso fazer isso assim. Está bem? Depois disso, posso simplesmente deletar este novamente. Vá para a opção de design. Ok, espero que vocês tenham entendido como basicamente criar pranchetas Aqui, vocês podem ver que essa é a camada de prancheta, ok? Daqui eu posso basicamente ver, ok. Isso é chamado de painel, ok? Então, isso pode ser chamado de painel de design. Aqui. Você também pode fazer prototipagem e, se quiser compartilhar o arquivo, também pode compartilhar o arquivo Este é o painel de design depois disso. Aqui vocês podem ver que eu tenho opções diferentes. OK. Aqui. Esta é a biblioteca de onde podemos tirar cores diferentes. Se eu quiser adicionar alguma cor, posso adicionar. Se eu quiser adicionar algum estilo de caractere, posso adicionar a partir daqui. Ok, componentes diferentes, vídeos, tudo o que eu colocar aqui nesta caixa aparecerá aqui. Ok, vamos ver os diferentes plug-ins. Ok, aqui vocês podem ver que eu posso acessar um plugue aqui. Os plug-ins são basicamente um lugar de onde vocês podem realmente importar diferentes tipos de imagens, ícones, web design e muitas coisas que podemos fazer. Vamos ver e descobrir nossos plug-ins. Tudo o que temos, está aqui. OK. Se eu clicar nisso, vocês podem ver que estou sendo redirecionado para a página automática aqui A partir daqui vocês podem ver o que eu tenho, ok? Em que toda aplicação. Eu posso usá-los se eu quiser Were Frame, muitos modelos de estrutura de arame. Eu posso pegar o criador de Were aqui. Você pode ver se eu quiser algum ícone, ilustração de três dias, eu posso pegar este Icon Scout Vou pegar esse. E aqui eles estão me pedindo alguma recomendação, ou estão me pedindo uma permissão. Vou clicar em. OK. Porque eu quero usar esse Can Scout aqui. OK. Aqui vocês podem ver muito mais. Eu tenho esses ícones para design aqui, vocês podem ver, na verdade, você pode baixar basicamente de acordo com sua necessidade. Está bem? Tudo o que precisarem, vocês podem pegar daqui. Esses são alguns dos recursos. Agora, se eu for ou voltar aqui novamente, este é o ícone Scout. A partir daqui, posso clicar em Avançar se quiser fazer login, ou se quiser me inscrever, também posso fazer isso a partir daqui Agora eu me inscrevi com sucesso. Além disso, depois de se inscrever, vocês podem ver que é assim que realmente ficará. Ok, esta é a página aqui. A partir daqui, vocês podem escolher. Ok, se você quiser apenas o gratuito daqui, se você clicar em grátis, aqui estão todos os ícones que você pode usar gratuitamente. Ok, aqui estão diferentes ícones que você pode simplesmente colocar. Deixe-me colocar um e mostrar a vocês e o. Existem muitos pacotes se você quiser personagens, se quiser algum ícone de mídia social, qualquer tema como Valentine ou for Christmas, qualquer NFT's, vocês podem ter acesso a tudo isso Esse é o uso de plug-ins, como podemos obter ícones diferentes de acordo com nosso uso. Vou falar com pessoas físicas novamente. A partir daqui, vou assumir um. Suponha que eu queira inserir isso. Ok, agora eles estão me perguntando, eu quero importar um arquivo PNG pequeno ou apenas um PNG básico? Ok, aqui o escoteiro está trabalhando. Então isso importe minha imagem no AutoBXDBox ou dentro da minha Em vez disso, pode demorar um pouco. Vou parar com isso e vou pegar isso e inserir o pequeno PNG. Ok, aqui vocês podem ver que eu tenho esse ícone na minha moldura aqui. Eu posso redimensionar isso. E se eu aumentar o zoom, vocês podem ver que é assim que eu posso basicamente me exercitar. Se eu quiser criar alguma página ou página da web sobre o WhatsApp, posso usar este ícone. OK. Também posso pesquisar diferentes tipos de ícones se tiver alguma pesquisa relevante aqui. Espero que vocês também tenham entendido o uso do plug-in aqui. Ok, aqui eu também tenho as molduras. Se eu quiser baixar alguma coisa, posso realmente começar. Se eu clicar em Começar aqui, vocês podem ver que eu tenho molduras diferentes aqui que vocês também podem usar para o seu trabalho. Ok, vocês podem editá-los. Vamos voltar da opção de plugue. Vou fechar este. Espero que vocês também tenham entendido três dessas coisas. Essa é a barra de ferramentas básica. Agora vamos vir aqui e vamos até o quadro de arte. Ok, a partir daqui, basicamente este é chamado de painel de controle. Está bem? Qualquer caractere ou objeto que eu escolha que esteja presente dentro dessa moldura, eu posso realmente transformar essa largura e altura. Se eu quiser alterá-lo individualmente, posso fazer essa rotação. E tantas coisas que aprenderemos nas fases posteriores da aula. Também podemos alterar a opacidade. Aumentar a opacidade, o modo de mesclagem e diferentes tipos de efeitos também estão aqui Ok, se eu quiser exportar essa coisa em particular, posso simplesmente clicar em Marcar para exportação e eu as exporto também. Ou se você quiser apenas selecionar uma página daqui, como você pode ver. Se você selecionar uma página específica, vocês podem ter acesso a tudo isso, ok? Se eu quiser mudar alguma coisa ou se eu quiser mudar a largura, altura ou se eu quiser mudar a cor, posso fazer isso a partir daqui. Ok, é assim que trabalharemos nesta página. Deixe-me voltar novamente. Quero manter isso na cor branca, espero que vocês também tenham entendido isso sobre o painel de controle. Aqui eu tenho a opção de compartilhamento, ok, então, a partir da opção de compartilhamento, posso realmente enviar o link para eles. Ok, eu posso basicamente criar um novo link. A partir daqui, também posso definir as configurações de visualização. Ok, a partir daqui, como eu quero usá-los, tipo, eles serão capazes de fazer algum trabalho aqui? Por exemplo, eles serão capazes de criar e quem terá acesso ao link? Ok, só pessoas convidadas. Somente um com senha. Também posso definir a senha. Depois disso, se eu criar um link, um link será criado e poderemos compartilhá-lo com meus colegas ou meu cliente. Ok, aqui se eu quiser obter alguma prévia do dispositivo, posso usar essa opção. exemplo, depois de terminar de criar um aplicativo móvel a partir daqui, posso obter a prévia ou testá-la. Ok, aqui. Outra opção é a opção de zoom, ok, pois minha tela agora está em 30 graus. Se eu fizer isso 100, vocês podem ver como vai ficar. Se eu fizer isso 50%, é assim que realmente parece. Faça com que seja 33, é assim que realmente ficará a partir daqui. É assim que podemos basicamente trabalhar. Aqui está outra opção , como Desktop Preview. Ok, se você quiser ver isso em um desktop ou página da web, ok, eu posso clicar aqui também aqui. Se eu quiser salvar este documento no meu espaço da Creative Cloud ou na minha Creative Cloud , também posso salvá-lo aqui. Ok, é a maneira mais fácil de fazer isso. Agora, se eu clicar aqui. OK. A partir daqui, também posso mudar o nome. Ok, deixe-me vir aqui, deixe-me desmarcar este Venha para a opção de design. A partir daqui, eu também posso mudar o nome. Ok, se eu clicar aqui. Sim, a partir daqui você pode salvar isso como quiser. Espero que vocês já tenham entendido sobre o espaço de trabalho e a interface Agora vocês estão bem familiarizados com como começar a trabalhar nesse aplicativo. Eu expliquei a você sobre o espaço de trabalho, a interface e o que é esse Adobex Basicamente, como eu já disse a vocês, posso criar um design de UI UX e também testá-lo a partir daqui. Faça a prototipagem. Após o final deste tutorial, vou garantir que vocês saibam como criar seu próprio design, como criar seu próprio aplicativo móvel. Como também temos um projeto de aula, aprenderemos e, ao mesmo tempo, praticaremos essas coisas vemos na próxima aula onde aprenderemos sobre todas as ferramentas básicas aqui na barra de ferramentas, que você pode ver Eu vou dizer a vocês como vocês podem usá-los. Depois disso, também falarei sobre a estrutura de baixa fidelidade e a estrutura de alta fidelidade. Está bem? Diga a eles, cuide-se e até a próxima aula. 3. Ferramentas básicas e wireframe de Lofi e Hifi no Adobe xd: Olá a todos e bem-vindos a mais um capítulo do tutorial do Adobe XD. Ok, então aqui em nosso capítulo número dois, aprenderemos sobre a ferramenta básica. E também vou dizer a vocês o que é uma moldura de baixa fidelidade e alta fidelidade. Ok, então eu tenho dois desses. Eu tenho um aplicativo com poucos arquivos e também mostrarei a vocês um quadro de alta fidelidade neste tutorial em particular. Então, não vamos perder tempo e vamos começar com esse design de UIUX juntos Aqui, de volta ao espaço de trabalho. Ok, agora vamos tentar entender todas essas ferramentas básicas que eu tenho na minha barra de ferramentas. Ok, vamos começar. Esse é o primeiro. Isso é chamado de ferramenta de seleção atalho da ferramenta de seleção é V do nosso teclado Suponha que, se eu selecionar isso, se eu clicar em V no meu teclado, ele será transformado em uma ferramenta de seleção. Ok, a partir daqui. Como você pode ver, depois disso, usando a ferramenta de seleção, podemos basicamente nos movimentar. Além disso, podemos selecionar qualquer item específico, se o tivermos em nossa página. Também posso alterar o tamanho do espaço de trabalho, conforme posso manter. E aqui você pode ver que estou mudando a altura a partir daqui. E se eu mudar a largura , ficará assim. Está bem? Quando estivermos trabalhando aqui, nós não conseguiremos nos mover se eu tocar aqui. Ok, se eu tiver algum conteúdo ou qualquer objeto dentro do meu quadro aqui, ok, nesse caso eu preciso selecionar este aqui. Basicamente, posso me mover, ok, a partir do nome que vou selecionar e posso me mover pela minha moldura a partir daqui. Esse é um deles. E também posso renomeá-lo a partir daqui. Suponha que não se confunda em qual quadro, ou neste slide, farei um protótipo com outro Nesse caso, posso renomeá-lo adequadamente. Agora, espero que vocês tenham entendido sobre a ferramenta de seleção. E você também pode ampliar isso, se quiser. Está bem? Agora, isso é chamado de ferramenta retangular, logo abaixo A tecla de atalho para isso é R no teclado. Ok, se eu vier aqui, eu posso fazer uma caixa retangular aqui Você pode ver que eu fiz uma caixa retangular aqui. Vou selecionar isso, posso deletar aquele. Agora eu tenho a ferramenta de seleção. Usando isso, podemos basicamente mudar ou mudar. Como vocês podem ver aqui, vocês podem ver a mudança na forma. Nós podemos fazer isso basicamente a partir daqui usando essa ferramenta de retângulo Está bem? Também posso diminuir o tamanho, aumentar o tamanho. Se eu quiser ampliar este, posso fazer isso aqui. Se eu quiser girar, também posso girar isso Ok, é assim que podemos basicamente trabalhar com essa ferramenta aqui. Espero que vocês tenham entendido muita coisa. Agora vamos para a próxima ferramenta, que é o círculo ou a ferramenta Elipse, ok Essa é a ferramenta Elipse, e vocês já entenderam que usar a ferramenta de elipse, vocês podem criar um É assim que vocês podem criar um círculo. Se você quiser criar um novo círculo proporcional, basta pressionar a tecla de controle e vocês podem fazer um círculo proporcional aqui Agora, vocês não serão capazes de mudar a forma. Como você pode ver, este é proporcional e este não é, ok? Esse não é. Vou deletar isso e mover o círculo aqui em um lado. Está bem? Usando tudo isso, podemos criar nossos botões. Qualquer projeto, se você quiser fazer, nós podemos fazer isso. Aqui também está outra forma, que é o polígono. Está bem? Basicamente, eu posso criar um polígono aqui. Como você pode ver nas opções, como você pode ver, existem algumas opções. Usando isso, o que eu posso fazer é mudar a força dos cantos ou apenas diminuir a força dos cantos. Essa é uma maneira pela qual eu quero simplesmente mover isso para baixo ou reduzir isso. Eu posso fazer isso. Se eu fizer desse jeito, esse tipo de ícone, eu posso fazer isso a partir daqui. Eu posso escalar este usando a ferramenta de seleção. Vou colocar esse aqui. Sim, isso é bom. Depois disso, vamos tentar ver aqui a ferramenta de linha. Ok, a ferramenta de linha é basicamente usada para criar linhas. Por exemplo, se eu quiser criar qualquer linha a partir do canto, posso realmente alterar o comprimento ou o posicionamento. Ok, aqui, uma vez que isso está no meio, está me mostrando assim, mas agora estou divergindo da linha Isso vai me mostrar assim. Ok. É assim que podemos realmente fazer uma linha a partir daqui. Se usarmos nossa ferramenta de seleção, eu posso basicamente entrar ou sair usando essa ferramenta a partir daqui. Agora, essa é uma maneira de usar a ferramenta de linha a partir daqui. Vou contar a vocês em detalhes sobre tudo isso, por exemplo, como você pode alterar o traçado ou como podemos alterar a cor do traçado, a cor do campo e também a intensidade ou a largura dessa linha específica aqui. Como você pode mudar. Ok, vou selecionar tudo isso daqui, vou deletar, espero que tudo tenha ficado claro até agora. Ok, agora vou falar para vocês sobre a ferramenta Pin, ok? Usando o Pen Tool, vocês podem criar diferentes tipos de animação e também diferentes tipos de logotipos, ok? Mas a ferramenta Pin é bastante complicada. Vamos usar a ferramenta Caneta aqui. Está bem? Só vou mostrar vocês um uso básico que vocês podem entender, como você pode usá-los em suas palavras aqui. Estou apenas fazendo uma forma de acordo comigo mesma. Eu vou fazer uma forma aqui. E aqui eu tenho uma forma particular. Ok. O que eu também posso fazer é mudar o tamanho deste, aumentar o comprimento aqui, trazer este para algum lugar aqui. Eu também posso fazer isso aqui. Como você pode ver, eu já fiz um logotipo a partir daqui. Está bem? Essa é uma maneira de fazer isso. E também aprenderemos como podemos basicamente preencher isso com cores a partir daqui. Essas são algumas opções, você pode fazer de acordo com sua vontade ou como quiser. Pento é muito útil. Depois disso, eu também tenho a opção para o texto. Ok. Aqui, como vocês podem ver, selecionei a opção de texto ou a ferramenta de texto. Agora eu tenho meu cursor aqui e cliquei neste quadro E agora eu posso escrever coisas de acordo com minha necessidade. A partir daqui. O que posso fazer é selecionar essa camada específica aqui e redimensioná-la ou alterar o tamanho Suponha que eu queira 60, clicarei em Enter, e aqui você pode ver o tamanho da letra ou o tamanho da minha fonte. Aqui eu posso escrever assim. Aqui você pode ver todos os objetos que eu tenho aqui nesta moldura específica ou na prancheta Você terá essas camadas aqui. Está bem? Se eu voltar aqui, você pode ver este. Eu também posso esverdear esta prancheta em particular. A partir daqui, eu posso basicamente vir até aqui, e uma vez que eu seleciono isso, eu tenho todos os objetos nela também Ok. Aqui, se eu quiser esconder isso, eu posso clicar aqui. Se eu quiser registrar este , não poderei alterar o posicionamento ou algo parecido. Aqui eu também faço isso se eu quiser apenas exportar essa escrita específica daqui. Eu também posso exportar isso. exemplo, se eu quiser usar essa mesma coisa em particular, ou o mesmo botão, ou o mesmo design em outra página, eu também posso fazer isso. exemplo, se eu quiser usá-lo em outros aplicativos ao criar qualquer pôster, também posso usá-los Espero que essa opção de texto também tenha sido clara. Vou deletar isso também aqui. É assim que você pode criar o Db, que eu já mostrei aqui. Você tem todas essas predefinições. Não quero predefinições, você pode simplesmente vir aqui e criar um quadro de arte de si mesmo, do seu próprio tamanho Aqui, eu tenho a placa daqui, basicamente posso mudar o nome. Ok, eu posso fazer isso também. Ok, depois disso, a última opção em nossa barra de ferramentas é a opção de zoom Ok, se eu clicar aqui, vocês podem ver que eu posso simplesmente ampliar. Está bem? Essa é a opção para ampliar. A partir daqui. Eu posso copiar qualquer coisa, ou posso simplesmente me movimentar. Eu também posso me movimentar. Ok, esta é a opção para ampliar. Se eu clicar aqui, vocês podem ver que eu também mostrei vocês diferentes maneiras de ampliar Diminuindo o zoom, ok, aqui está outra opção. Ou se você apenas pressionar o teclado e com o mouse também, você pode simplesmente ampliar, diminuir o zoom, depende de você. Está bem? Eles também têm funções diferentes para fazer a mesma coisa aqui neste aplicativo. Se você quiser mover o quadro, totalmente como o quadro inteiro ou a página inteira, basta clicar em Shift no teclado. E usando o mouse, agora vocês podem arrastar aqui no meu teclado. Vocês podem ver. Agora eu tenho um sinal com a mão. Ok. Isso é chamado de ferramenta manual. Ok. Usando a ferramenta manual, posso basicamente me movimentar com minha ferramenta de seleção. Eu não posso fazer isso. Ok. Com a ferramenta de seleção, posso selecionar qualquer quadro específico e movê-lo pela página. Mas para mudar o posicionamento da página inteira, eu posso mudar. E depois disso, com meu mouse, eu posso simplesmente me mover. Ok. Também posso diminuir o zoom usando o controle e o mouse. Espero que vocês tenham entendido todas as ferramentas básicas. Ok, agora deixe-me mostrar para vocês. Oi E o que é uma moldura de baixa resolução? Ok, existem dois tipos de armações de desgaste, basicamente. O primeiro é de baixa fidelidade, o formulário completo é de baixa fidelidade. We frame Hii é de alta fidelidade onde enquadramos. Ok, deixe-me abrir um arquivo. Venha aqui E daqui, como você pode ver, eu tenho essa página aqui, ok? Agora este está carregando. Este será um exemplo de como é a aparência de uma página baixa aqui. Eu tenho todas essas molduras aqui, ok. Agora amplie um quadro, ok? E eu vou dizer a vocês por que eles chamam esse de o cinco mais baixo. Ok, acabei de aumentar este aqui. Basicamente, eles não colocaram nada. Este é apenas um protótipo que, se você quiser, suponha que aqui vocês possam ver que eu tenho as opções laterais, inscreva-se aqui Se gostarem do design e de tudo mais, vocês podem fazer este apenas com a moldura Hi Fi Ok, esta é apenas uma visão geral. Se você gosta do estilo e de tudo mais aqui, vocês podem realmente conferir os estilos e tudo mais a partir daqui. Como você pode ver, depois de se inscrever, ele terá opções aqui e tudo isso aqui. Você pode ver no topo que ele também renomeou isso a bordo Ok, esse será o perfil aqui. Basicamente, você só precisa colocar essas coisas como eu mostrei. Este é o mais discreto aqui. Na verdade, você também pode editar tudo isso. Se eu não quiser esse, basta clicar aqui e deletar. Também posso colocar estilos diferentes. Aqui você pode ver que eu também consigo fazer a curva a partir daqui neste ícone, se você Ou eu também posso mudar o tamanho. Ok, essa é uma maneira de fazer um lo fi. Primeiro, criar um arquivo para mostrá-lo ou apenas guardá-lo para recomendação ajudará você a obter um melhor conhecimento sobre design. Ok, aí vem o L one. Ok, agora deixe-me mostrar a vocês alta ou alta fidelidade. Nós, se eu mostrar a vocês, vocês serão capazes de entender e diferenciar entre uma estrutura de fio de alta fidelidade e baixa fidelidade Agora, deixe-me acessar minha página inicial novamente. A partir daqui, abrirei uma página. Vou para os downloads ou vou para o meu desktop aqui. Eu tenho esse. Agora, se eu for para qualquer arquivo, este é um arquivo PSD Deixe-me pesquisar e mostrar para vocês. Agora posso mostrar a vocês a estrutura de arame de alta fidelidade. Esta é uma estrutura de arame escura de alta fidelidade. Vocês podem ver que este é o quadro Were de alta fidelidade daqui Basicamente, o que eles fizeram está aqui, como você pode ver, todos esses botões e todos esses designs e ícones. Portanto, isso é apenas baseado ou feito com base no quadro de baixa fidelidade Ok, pelo uso de uma moldura de baixa fidelidade. Este está feito, ok. Agora, esse design de alto nível, ok. A partir daqui, eu também posso basicamente editar este. O principal é que eles pegaram uma coisa de baixa fidelidade e têm aqui o quadro de alta fidelidade que é um link direto entre o usuário e o trabalho. Está bem? Então, eles verão essa coisa em particular e a interface do usuário. O designer de UX tentará torná-la mais amigável e lidará diretamente com a interface ou a experiência do usuário, ok? Isso é o que eles poderão ver, ok? O usuário nunca consegue ver o som baixo, moldura artística ou a área de trabalho Ok. Isso é feito com base em um quadro We de baixa fidelidade Mas agora esse é o produto final. Ele lida com o conjunto específico de clientes ou com as pessoas-alvo. A partir daqui, posso realmente adicionar botões diferentes. Agora, este está pronto e agora você pode dar esse trabalho específico ao seu programador e explicar o que deseja que ele faça Ok, espero que vocês tenham entendido. Como você pode ver, acho que esta é apenas uma pequena moldura de um aplicativo de criptomoeda. Sim, espero que vocês tenham entendido essa aula. Espero ver todos vocês no próximo tutorial, onde aprenderemos sobre como você pode digitar em Adote Were Frames. Ok. Espero ver todos vocês na próxima aula. Até lá, cuide-se e adeus. 4. Como usar a opção de tipo no Xd: Olá a todos e bem-vindos a mais um capítulo do tutorial do Adobe XD. Ok, então aqui nesta aula, aprenderemos como você pode usar a opção de texto em X D, da mesma forma que você pode basicamente escrever ou criar uma caixa de texto. Como podemos realmente gerenciá-los. Como podemos alterar o kerning, também a permissão e também outros tamanhos de fonte E também os estilos de fonte. Ok, então aprenderemos nesta aula tudo sobre essas coisas em detalhes. Vamos começar com essa aula em particular agora. Como vocês podem ver, estou aqui no meu espaço de trabalho ou na tela inicial, mas agora vou para o meu espaço de trabalho a partir Como você pode ver, eu tenho uma página aqui por padrão. Ok, vou selecionar este e vou deletar este. Agora, vou criar sozinho a partir daqui. Ok, eu vou para o Artboard. Deixe-me esse Samsung Galaxy S tamanho dez. Com essa ferramenta de seleção. Eu vou mover este. Vou criar quatro delas. Ok, vou manter esse aqui novamente. Vou colocar outro aqui. Eu terei quatro telas aqui, como vocês podem ver. Também posso renomeá-lo daqui, se eu quiser. Está bem? Vou colocar isso como um. Esse tem dois, esse tem três. Este tem quatro. Está bem? Eu também tenho esse nome. Por enquanto. Agora, vamos tentar entender como usaremos nossa opção de texto aqui. Ok, deixe-me um pouco agora, existem duas maneiras básicas, ok? Então, a primeira é se você clicar aqui com o mouse, depois de selecionar a opção de texto, ok, a partir daqui você pode digitar o que quiser. Está bem? Portanto, ele também pode sair da caixa. Ok, então essa é uma maneira. Agora, outra forma é criar uma caixa de texto. Ok, deixe-me voltar, desmarque isso. Agora, se eu criar uma coluna de texto aqui, como vocês podem ver, eu posso criar uma página aqui. Está bem? Ou uma caixa de texto. Agora, eu posso realmente colocar texto dentro dessa caixa em particular. Quando atingir o nível certo que eu criei a caixa, ela descerá automaticamente. Ok, aqui vocês podem ver, ok, eu estou enchendo minha caixa aqui. Ele se estenderá apenas no lado vertical. Essa é uma opção de como você pode fazer isso. Agora, selecionarei essa caixa de texto novamente e a excluirei. Ok, então, novamente, deixe-me escrever algo aqui. Então, talvez eu escreva Roberts Toy World. Ok, então vou escrever Roberts toy, Robert, Toys Toys World. Agora eu tenho essa frase em particular aqui. O que eu posso fazer é com minha ferramenta de seleção, eu posso selecionar isso aqui. Você pode ver que eu posso trazê-lo para o centro. Ok, talvez eu mantenha este aqui a partir daqui. Novamente, o que vou fazer é ao criar uma página mundial de brinquedos aqui, publicar minha mensagem de marketing. Ok, a partir daqui talvez eu crie uma caixa. Eu vou escolher o tamanho a partir daqui. Como você pode ver aqui, eu também fiz uma caixa. Ok, vou apenas digitar mensagens de marketing para serem exibidas aqui. Ok, eu tenho isso e agora vou selecionar isso. Depois disso, vocês podem ver que aqui estão diferentes opções. OK. Aqui. Se eu quiser trazê-lo para o centro, posso fazer isso. E se eu quiser ir ou alinhá-lo à direita, também posso fazer isso OK. Eu virei aqui novamente. Também posso aumentar o tamanho a partir daqui. Vou mudar o tamanho da caixa. Vou selecionar esse texto. Agora, o que posso fazer é clicar na tecla de controle e posso aumentar o tamanho de acordo com essa mensagem de marketing. Ok, eu vou manter este até aqui. Vou diminuir o tamanho aqui também. Ok, esta é uma maneira de fazer isso aqui em particular agora, vou mudar isso por aquilo. Primeiro eu preciso selecionar esta aqui, vocês podem ver que eu posso mudar o tipo de fonte. OK. Aqui eu tenho diferentes tipos de fontes, aqui vocês podem ver se eu selecionar isso, poderei obter esses tipos. Ok, eu vou pegar esse. Eu vou escolher o Calibri básico. Em Calibri, vou escolher o negrito e itálico. Agora, também posso alterar o tamanho a partir daqui. Ok, deixe-me pegar 30 aqui. Você pode ver aqui o título. Ok, vou selecionar este aqui. Vou colocá-lo em um canto ou em cima. Ok, deste lado. Basicamente, o que posso fazer é se eu selecionar novamente todo o texto, selecionarei isso novamente. A partir daqui, posso clicar duas vezes aqui e aqui vocês podem ver que tenho algumas opções aqui. OK. Aqui. Como você pode ver, se eu vier aqui e digitar 50. Ok, primeiro selecione e sim, 50, vou clicar em. OK. Então aqui você pode ver que esta é a opção, o espaçamento entre linhas, se eu tiver duas linhas aqui, ok? Ou vou me inscrever neste aqui. Se eu selecionar esse espaçamento entre linhas a partir daqui. Ok, 18 aqui, você pode ver o espaçamento entre linhas aumentado Ok, aqui está outra opção , como espaçamento entre água. Eu posso aumentar isso se eu aumentar em cinco. Aqui vocês podem ver. Mas, como você pode ver, eu tenho essa opção. Vou franquear isso novamente. Agora, aqui eu também tenho muitas outras opções. OK. Automático, vento. Você pode ver se eu clico em automático com a forma como minha caixa de texto está mudando. Ok, se eu clicar no centro aqui, vocês podem ver aqui. Como vocês também podem ver. Ok, aqui estão opções diferentes. Espero que vocês tenham entendido que esse é o espaçamento entre parágrafos Suponha que eu tenha esse aqui. Agora eu quero aumentar o espaçamento entre parágrafos. Eu posso fazer isso daqui. Se eu fizer outra caixa de texto aqui. Eu só preencho isso com um texto simples, ok? E agora vou criar outro parágrafo. Agora, como você pode ver aqui, Ok, aqui eu tenho isso e aqui vocês podem ver. Agora eu quero fazer o espaçamento entre parágrafos. Nesse caso, o que eu posso fazer é selecionar esta caixa a partir desta caixa aqui, eu vou descer, e agora você pode ver que são dez. Eu vou fazer 30. Está bem? Aqui você pode ver o espaçamento entre os parágrafos alterado aqui, ok? Também posso aumentar o tamanho. A distância do parágrafo será a mesma, assim como será a mesma, mas as palavras se afastarão. Como vocês podem ver. Vou deletar este novamente. Espero que vocês tenham entendido até aqui. Ok, então a primeira coisa que vocês precisam fazer é não fazer muitas mudanças com suas palavras, ok? Mas basta selecionar o tamanho e tudo mais, ok? exemplo, qual tamanho de fonte você vai usar para o título e o que você vai usar aqui. Eu tenho isso agora. Vou copiar esse texto em particular novamente aqui. OK. Mas aqui o que vou fazer é colocar o conjunto de produtos e agora selecionar essa caixa de texto específica aqui. E agora eu posso trazê-lo para o centro. Está bem? Como vocês podem ver, estou trazendo isso para o centro. Agora, aqui eu tenho esse também. Agora, o que vou fazer é pegar meu botão antigo e também soltar um aqui. Está bem? Mas vou escrever este texto, e vou pegar outra caixa daqui e vou escrever Saiba mais. Agora, aqui vou escrever Saiba mais. Vou escrever mais, como já contei aqui. Vou selecionar este e agora posso realmente diminuir essa altura. OK. Então eu vou manter 010 está bem Vou colocar apenas 20. Vamos ver como fica. Sim, este está bom, acho que agora o que posso fazer é trazê-lo aqui e é assim que podemos fazer nossos botões aqui também. Mais uma coisa boa sobre isso está aqui, como vocês podem ver C aqui, vocês podem ver que está me alinhando na parte superior do outro botão E aqui está me alinhando com o meio. E aqui, daqui de baixo, eu também posso ver a largura aqui. Está bem? Entre os parágrafos aqui, também posso ver a largura Ok, aqui, basicamente o que eu posso fazer é também girar isso Aqui você pode ver que há uma mudança no meu ícone. Usando isso, posso girar isso e também posso colocá-lo de acordo com o meu Está bem? Mas, neste caso, eu não quero girar este Vou colocá-lo no centro. Vocês podem ver aqui também. Aqui está a opção de rotação. De onde vocês podem basicamente girar, ok? A partir daqui, posso ver ou verificar o posicionamento. Vou manter esse aqui. Espero que vocês tenham entendido essa aula do que aprendemos aqui. Está bem? Depois dessa aula, aprenderemos como você pode realmente criar formas. Está bem? Eu vou dizer a vocês como fazer um retângulo ou vou apenas dar um esboço para essas caixas aqui Está bem? Eu vou dar esses. Vou adicioná-los também. Nos vemos no próximo tutorial e adeus. 5. Usando formas no Xd: Olá a todos e bem-vindos a mais um capítulo do tutorial do Adobe XD aqui enquanto estamos aprendendo o design de UI UX. Este é o nosso capítulo número quatro e aprenderemos como podemos usar formas. Então, aqui nesta aula, vou contar a vocês como você pode usar formas, como alterar o raio dos cantos dessas formas e como você também pode criar qualquer forma proporcionalmente Eu vou dizer a vocês como você também pode basicamente diminuí-lo individualmente. Vou dizer a vocês como colocar seu texto na frente de uma forma. Está bem? Suponha que, se você tiver suas opiniões invertidas, como você pode transformá-las Também falarei sobre como agrupar isso ao criar botões ou ao criar qualquer ícone, que é a prévia final nesse caso, como você vai adiantar isso Ok, não vamos perder tempo aqui e vamos começar com essa aula. Como vocês podem ver, eu já estou no espaço de trabalho em que trabalhei na última aula, ok, agora vou mostrar como você pode criar, basicamente, contei a vocês tudo sobre as ferramentas básicas nas quais tenho minha barra de ferramentas Está bem? A partir daqui, você pode criar uma caixa retangular Está bem? Quero criar uma caixa retangular Em primeiro lugar, o que vou fazer é aumentar o espaçamento a partir daqui Ok, vou trazer esse aqui. Imagem do produto, quer caber aqui? Agora o que vou fazer é colocar uma caixa aqui. OK. Que eu possa colocar meu trabalho em primeiro lugar. O que vou fazer é selecionar a caixa retangular. A partir daqui eu vou fazer uma caixa. OK. Agora, como vocês podem ver aqui, está coberto. Eu tenho meu texto abordado aqui. OK. Só dentro desta caixa para trazer essa para a frente. Há muitas maneiras diferentes de colocar esse texto na frente desse retângulo Mas vou mostrar a vocês os mais básicos e o que vocês podem usar. Basicamente, o mais básico que eu uso é se você clicar com o botão direito do mouse aqui, você pode ver que a opção se chama enviar para trás, ok? Então, o controle de atalho, abra o colchete aqui. Se você quiser adiantar isso como suponha que, se eu quiser apresentar alguma coisa nesse caso, posso clicar na opção de fechamento Control plus Bc. OK. Vou enviar este para trás ou preciso selecionar todo o texto a partir daqui Eu selecionei este envio para trás. Aqui meu controle ou minha trava para gatos estava ligada, por isso não estava funcionando. Basicamente. Aqui, clicarei em Enviar este produto para trás É assim que você pode basicamente fazer, você pode colocar este aqui no centro, ou a outra maneira de fazer é se você selecionar os dois, suponha que eu coloque este aqui em algum lugar. Agora eu quero trazer isso para o centro. Nesse caso, eu virei aqui. E o que eu vou escolher está aqui. Como você pode ver, eu posso trazer isso para o centro. Ok, eu vou para a opção de alinhamento. A partir daí, posso escolher aqui usando a tecla de atalho. Eu comprei este no centro. OK. Essa é outra maneira de fazer isso. Agora, espero que vocês tenham entendido como basicamente brincar com isso. Está bem? Eu também vou descer aqui e aqui. Agora, na verdade, eu também posso mudar a largura. Ok, para este, basicamente, como eu posso fazer isso é se eu vier aqui, se eu voltar aqui, suponha que eu queira selecionar esta página, ok? Agora, o que eu vou fazer estão aqui, como você pode ver, os pequenos pontos aqui, ok? Usando isso, eu posso realmente mudar o raio, como vocês podem ver daqui E a outra maneira de fazer isso é virmos aqui, ok? Basicamente, a partir daqui também, eu posso mudar, deixe-me pegar 50 aqui, você pode ver que mudou em 50, o raio do canto Se eu quiser alterar o raio de cada canto individualmente, suponha que eu queira colocar aqui 80, serei 70 Aqui 20 e aqui 40, ok? É assim que realmente ficará. Está bem? Mas eu não quero isso, vou voltar novamente. Agora, aqui vou apenas diminuir o raio do canto aqui. Agora eu posso basicamente me movimentar. OK. Se eu quiser fazer alguma alteração aqui na forma, posso fazer isso a partir daqui. OK. Vocês poderão ver assim. Eu também tenho esses cantos. De onde eu posso manter o tamanho até aqui. Espero que vocês tenham entendido. Ok, agora eu vou fazer outra caixa aqui, da mesma forma. Vou pegar isso aqui e vou fazer com que chegue à ferramenta de seleção. A partir daqui, selecione isso e envie para trás. Eu tenho minha mensagem aqui, vou colocá-la dentro dessa caixa em particular. Também vou mudar o raio do canto a partir daqui. Ok, eu tenho isso aqui. Vou manter esses botões aqui embaixo e também vou colocar caixas para eles. OK. Espero que vocês possam ver como realmente parece. Vou apenas fazer uma opção adicional aqui. Está bem? Essa opção adicional, vou fazer um círculo a partir daqui. Está bem? Talvez eu o coloque aqui no centro, criando um círculo. Vou mostrar a vocês como fazer isso. Depois de selecionar o botão da elipse. Com isso, posso criar ou brincar com o círculo. Eu posso escolher a largura e a altura. Mas aqui eu tenho esse tipo, mas se eu quiser um círculo perfeito ou uma forma redonda perfeita, nesse caso, o que eu posso fazer é clicar em Control Shift. Agora vocês podem ver que isso me dará um círculo perfeito. Eu não posso brincar com a largura e a altura aqui. Isso me dará um círculo proporcional. Espero que vocês tenham entendido essa. Vou selecionar isso e vou deletar isso. Vou reduzir o tamanho novamente. Vou clicar em Control Shift. Agora, aqui eu tenho esse botão aqui. Vou colocar esse botão aqui. Agora vou colocar um sinal de mais. OK. Sinal de adição. Ou eu posso simplesmente selecionar outra coisa. OK. Deixe-me pegar uma linha ou vou pegar apenas um plus. Vou para a opção de texto na caixa de texto. Eu virei aqui, eu vou, para selecionar esta carta em particular daqui. E coloque esse no centro. Ok, vou tentar colocar este no centro. Agora, como você pode ter essa coisa em particular aqui no centro, vou colocá-la assim aqui. Você também pode ver a opção positiva aqui. E agora está bem visível. Ok, vou fazer mais caixas. Suponha que eu queira essa caixa, vou selecionar isso. Eu posso copiar qualquer caixa, se eu quiser. Está bem? Talvez esse seja o retângulo Ou um retângulo aqui. E saiba mais na página. Essa. Esta página aqui. Está bem? Talvez eu pegue esse retângulo daqui. Está bem? O que vou fazer agora é copiar este usando o controle. Eu posso vir aqui e clicar no controle V. Aqui você pode ver que eu tenho a caixa do mesmo tamanho. A partir daqui, diminuirei a escala ou o tamanho dessa caixa Agora vou encaixar este. Ok, para meus botões aqui, como vocês podem ver, façam a mesma coisa. Envie para trás ou apenas selecione esse texto primeiro. Se você enviá-lo para trás. E há outras maneiras de fazer isso, ok? Se eu simplesmente remover o campo, também posso fazer isso. Está bem? Eu posso selecionar isso aqui. Essa é uma maneira de fazer isso. Novamente, da mesma forma que eu virei aqui, talvez aqui, retângulo um, eu copiarei este E vou colar aqui. Ok, eu tenho essa caixa também. Agora, com isso, vou me mover, agora. Vou mover esse aqui. Vocês podem ver agora que eu também tenho essa carta. Ok, a partir daqui também, se eu quiser mudar, eu posso mudar isso, mas espero que vocês tenham entendido isso. Ok, eu tenho isso e também posso diminuir o tamanho se eu quiser colocar este no centro desse jeito. Sim, tudo bem. Eu tenho essa página pronta. Ok, espero que vocês tenham entendido esse C aqui. Eu mostrei a vocês como você pode realmente criar uma página como essa, como você pode usar as formas e como colocar essa na frente. Por exemplo, se você tiver dois, vocês também podem agrupá-los. Ok, se eu selecionar esses dois daqui, posso basicamente selecionar ou, se eu quiser alterar a largura, posso fazer isso. Se eu quiser girar, tudo bem, eu posso fazer isso também OK. Se eu quiser girá-lo em 5% aqui, vocês podem ver que a rotação ocorreu com os dois. Está bem? Então é assim que podemos basicamente agrupar. Clique com o botão direito aqui e aqui você pode ver a seleção do grupo. Ok, a partir daqui, se eu mover apenas um dos, todo o texto será removido. Está bem? Esse é o uso do agrupamento para que vocês possam realmente mover pelas páginas ou por um botão Ok, espero que vocês tenham feito essa aula e agora possam começar a fazê-la assim. Na próxima aula, copie, cole e traça, explicando como isso é útil e o que podemos fazer usando essas opções neste Adobe XD Espero ver todos vocês no próximo tutorial. Até lá, cuide-se e adeus. 6. Ícones gratuitos para usar em projetos e no kit de interface de usuário existente: Olá a todos e bem-vindos a mais um capítulo do Atop XD, onde aprenderemos a projetar UY Ux. Ok, agora estamos no nosso capítulo número seis. E aprenderemos de onde todos vocês podem obter ícones gratuitos que podem ser usados em seus projetos ao criar um novo aplicativo móvel. Ou você está apenas começando com este aplicativo. Então, de onde você pode obter esses arquivos de recursos. OK. Também vou contar a vocês como encontrar kits de interface de usuário existentes que podem ser usados e pegar ícones ou tamanhos de cores e cores diferentes. Cor de fundo primária e secundária, como você pode receber sugestões dos trabalhadores. E vou contar a vocês sobre alguns dos sites de onde vocês podem obter tudo isso gratuitamente e como também podem usá-los em seu trabalho. Não vamos perder tempo e vamos começar com esse capítulo específico aqui. Como você pode ver, novamente, agora estou de volta ao meu espaço de trabalho. E agora vou mostrar a vocês de onde vocês podem obter alguns dos ícones gratuitos que podem usar em seu trabalho. Ok, primeiro o que vou fazer é mostrar a vocês um site chamado localizador de ícones Ok, aqui talvez eu procure o ícone da página inicial da página um. Aqui vocês podem ver que eu tenho opções diferentes. Se eu quiser uma ilustração ou uma ilustração de três dias ou qualquer adesivo, posso obter tudo isso aqui Se vocês rolarem um pouco para baixo, podem ver aqui diferentes recomendações de diferentes trabalhos aqui. Ok, então aqui estão alguns adesivos ou ilustrações. Você também pode baixá-lo e usá-lo adequadamente. Venha até a busca de ícones por casa. Isso me dará uma sugestão para curtir ícones domésticos daqui. Ok, então aqui estão alguns dos ícones que estão carregados. Ok, então suponha que aqui eu tenha isso, ok, mas deixe-me fazer vocês entenderem sobre os preços, o prêmio e todas as licenças também Ok, então aqui, primeira parada. Se você quiser ver os produtos premium e os gratuitos, vocês podem clicar aqui e ver isso. Está bem? Mas para este projeto, o que vou fazer é selecionar o botão gratuito a partir daqui. Ok, agora vou ter todos os três ícones, que estão na opção de ícones iniciais. Ok, aqui eu posso selecionar todos os estilos. Eu não tenho nenhum problema com o estilo. Ok, aqui você pode ver todas as licenças do Action Call a partir daqui Basicamente, vocês podem escolher o que vão usar. Ok, aqui você não pode ver nenhum link de volta, licença básica. Se você quiser obter uma licença básica e quiser usá-la, pode obtê-la aqui. Vou escolher a opção sem link de volta. Como se eu não precisasse mencionar o nome deles ou algo parecido , eu posso fazer isso. E este é para fins comerciais, como se o estivéssemos usando para qualquer uso comercial, como criar a página da web de qualquer empresa ou algo parecido. Nesse caso, você pode fornecer este e eles mostrarão as opções. OK. Eu quero tudo de graça, então deixe-me vir aqui e deixar eu pegar este. OK. Aqui, existem duas maneiras básicas de como você pode fazer o download. Ícone grátis. Ok, aqui está o formulário PNG e este é o formulário SVG. Espero que vocês estejam familiarizados com o que é o formulário PNG, mas agora veremos também o que é o formulário SVG Ok, vou baixar os dois simultaneamente, lado a lado. Ok, vou clicar em 48 pixels. Primeiro, vou baixar o PNG. Como vocês podem ver, meu PNG está sendo baixado. Agora vou para a opção SBG e, a partir do SVG, também vou baixar o ícone SBG OK. Também existem outros ícones . Em qual formato? Se eu quiser fazer o download, se eu quiser baixá-lo no formato Illustrator, como se eu fosse trabalhar no Auto Illustrator , posso baixá-lo aqui Se eu quiser baixá-lo no formato ICO, também posso fazer isso. A partir daqui, você pode ver se também pode usar o formato CNS Esse formato só pode ser usado em ou se você tiver um produto Apple. OK. Agora eu baixei os dois. Vou mostrar a vocês daqui. Ok, eu vou para os downloads a partir daqui. Eu tenho dois. Ok, vou mostrar vocês o que podemos fazer a partir daqui. OK. Agora, a maneira mais fácil de colocar seu trabalho aqui é acessar a opção de arquivo. Ok, do arquivo você vem para a opção de importação. A tecla de atalho para isso é shift plus control plus I. Em Macs ou PC, é shift control ou command plus I. Ok, estou simplesmente importando isso e todos os meus arquivos estão sendo baixados nos downloads. Jo, vou trazer este aqui ou vou selecionar Vou tentar importar este. Ok, aqui como vocês podem. Eu tenho essa imagem aqui agora. Vou importar outro. De lá eu irei e verificarei as propriedades daqui. Esse é o arquivo PNG. Como vocês podem ver, vou cortar isso por enquanto ou vou deletar isso. Está bem? Vou baixar o arquivo SVG, ok? Vou baixar o formato SVG aqui. Ok, vamos ver daqui. Aqui vocês podem ver que eu tenho o formato SVG aqui. Agora, como você pode ver, eu tenho isso. Também vou importar a mesma coisa aqui no meu XD. Venham até o arquivo, vão até ele, e esse aqui, vocês podem ver que esse é o formato SVG Trabalhe aqui, ok? Deixe-me colocar isso lado a lado e mostrar a vocês a diferença entre o formato SVG e o formato PNG, ok? Deixe-me ampliar mais, ok? Então, agora vou ampliar mais. Aqui você pode ver que este é o arquivo PNG que está quebrando, ok? E aqui eu tenho o arquivo SVG, ok? Aqui, se eu aumentar o tamanho, ok, a partir daqui, vou selecionar isso ou torná-lo um grupo, ok? Eu posso simplesmente mudar esse daqui, ok? Então isso é um grupo. Eu posso movê-lo, ok, de acordo com minha vontade. E eu também posso dividir isso se eu quiser. Está bem? Esse é o arquivo PNG. Também posso aumentar o tamanho a partir daqui, mas a qualidade não é muito boa. OK. Como vocês podem ver daqui, eu também posso manter isso se eu quiser dar uma volta. Ok, eu vou voltar. Espero que vocês tenham entendido a diferença entre arquivo SVG e também um arquivo PNG, ok? Agora, o que vou fazer é excluir este novamente. A partir daqui, excluirei isso e também excluirei esse arquivo PNG. Ok, a partir daqui eu tenho acesso. Vocês também podem ter acesso a todos esses ícones em. Ok, então vou baixar a versão SVG somente a partir de agora, abaixo desta Ok, vou procurar um ícone de imagem. Ok, vou pesquisar a imagem e clicar em Entrar aqui. Você pode ver que eu tenho um conjunto diferente de ícones de imagem aqui. Suponha que eu queira instalar este ou baixar este. Vou clicar aqui, e aqui ele foi baixado. Agora vou acessar meu arquivo XD novamente aqui. Como você pode ver, vou simplesmente deletar essas linhas daqui. Ok, vou deletar essa linha também. Eu também vou deletar isso, dois lados. Ok, o que eu tenho aqui. Vou deletar isso. Agora, aqui vou eu com minha ferramenta manual. Agora aumente o zoom para selecionar isso. Agora, a partir daqui, o que vou fazer é colocar esse arquivo SVG aqui Ok, voltarei novamente para a opção de importação a partir daqui. Talvez eu selecione este. Este é o primeiro e eu quero importar isso. Ok, eu tenho meu arquivo aqui ou posso escolher aqui. Ok, talvez eu escolha este. Agora, aqui, como vocês podem ver, eu posso realmente decompor isso e movê-lo de um lado para o outro. OK. Agora, como você pode ver, comprei esse arquivo SVG aqui, mas como você também pode ver aqui, posso selecionar as camadas individualmente Suponha que eu queira apenas importar a parte do meio nesse caso. Selecione apenas a parte central a partir daqui. E a partir daqui, basicamente eu posso selecionar isso e trazê-lo até aqui. Ok, o lugar que eu quero, essa é uma maneira de fazer ou trabalhar aqui. Agora vou importar apenas este. Ou primeiro vou simplesmente desvincular isso. Ok, vou colocar aqui agora, vou tentar manter isso no centro. OK. Agora, este eu vou deletar. Só fico com este daqui e vou trazê-lo para o centro. É assim que vocês podem basicamente colocar uma opção de imagem se não gostarem de outra coisa. Se você quiser pegar qualquer outro ícone de qualquer outro quadro, vocês também podem fazer isso. Ok, vou baixar esse SVG daqui. Vou importar no mesmo lugar. Ok, venha para o X D novamente e jogue na importação de arquivos. Depois disso, vocês podem importá-lo daqui. Ok, eu tenho esse arquivo aqui agora. Eu posso basicamente mudar o tamanho ou a forma disso também, ok? Como você pode ver, eu posso mudar a partir daqui. Se eu quiser apenas selecionar uma camada específica, posso vir aqui e selecionar uma camada específica como essa. Eu posso implementar 23 coisas ao mesmo tempo. Essa é uma maneira de fazer isso. Eu posso vir aqui com o Shift. Se eu pressionar Shift, posso selecionar as duas camadas, apenas essas camadas internas. Eu posso clicar aqui e fazer com que fiquem bem. Agora, se eu tentar mover qualquer ícone daqui, suponha que eu esteja selecionando isso. Basicamente, eu também posso mudar isso. Ok, essa é uma maneira de trabalharmos aqui. Espero que vocês tenham entendido até agora como podemos importar e usar seu ícone de onde todos vocês podem chegar aqui. Ícones gratuitos que você pode usar em seu trabalho. Há uma variedade para vários usos que você pode usar. Se quiserem algo colorido, vocês também podem comprá-lo daqui, ok? Já em outras aulas, mostrei a vocês como você pode pegar alguns recursos, ícones do seu estoque de Dob Está bem? Aqui para isso eu preciso ir ao Plug-ins, e aqui você pode ir ao Scout E sob o ícone Scout, ele também, vocês têm muitas opções Ok, se eu quiser apenas os gratuitos , posso pesquisar aqui. Vou apenas pesquisar ícones aqui. Além disso, você tem animação, três ilustrações de D. Vocês podem pesquisar a partir daí. Que tipo de formato eu preciso aqui? Além disso, vocês podem ver, eu quero isso no formato PNG ou SVG Para mim, eu pessoalmente recomendo que vocês usem o formato SVG Está bem? Porque eu uso esse tubo e isso é bom, não ruim. OK. Agora vamos aprender como você pode obter um tipo diferente de kits de interface de usuário gratuitos ao tentar praticar, ok? Ou simplesmente copie seus tecidos ou tecidos prontos e use-os em seu trabalho para criar um novo design de página da web ou design de aplicativo móvel Ok, vamos começar com esse primeiro. Ok, para isso de novo, vou ao meu Chrome. OK. Vou adicionar uma nova página da web. A partir daqui, vou pesquisar crianças X DUI. OK. Então, este é um site chamado Xd Guru.com. Então, a partir daqui, vocês podem obter alguns kits de interface de usuário gratuitos, mas agora eu recebo o valor da cobrança aqui para que vocês possam realmente suas comunidades e, a partir daqui, vocês possam se juntar ao grupo deles Se você tiver alguma coisa para perguntar a eles, vocês também podem enviar seu comentário. OK. Aqui estão alguns kits de interface de usuário que você pode comprar por si mesmo. Talvez você precise pagar uma pequena quantia por mim. O que eu vou recomendar é que, primeiro vocês comecem com crianças UY gratuitas E depois disso, quando você estiver apenas avançando em seu nível de trabalho nessa plataforma, poderá adquirir uma premium, que será um ótimo investimento para seu trabalho Aqui vocês podem ver alguns dos kits premium que podem ser usados. Vou apenas digitar kits de interface de usuário gratuitos. OK. Talvez eu pegue este e eu possa tentar obtê-lo. Agora. Deixe-me ver o que eles estão me perguntando aqui. Eles estão me pedindo algo assim? Aqui vocês podem ver esses kits. OK. Vocês podem usar essa cor aqui. Você. Ícones. Agora eu posso salvar isso no meu quadro de humor. Ok, eu preciso criar uma conta para isso. Vou voltar e posso fazer testes gratuitos aqui. Está bem? Como você pode ver, eu posso usar isso enquanto trabalho. Essa é uma forma de conseguirmos tudo isso, ok? A partir daqui, vocês podem obter isso, pois essas são algumas das páginas da web manuais que você pode usar. Está bem? Agora, deixe-me voltar ao meu E aqui e tentarei obter um arquivo diferente. Ok, vou tentar importar daqui, dentro da importação aqui. Você pode ver que eu já importei um arquivo aqui. Talvez tenha sido excluído novamente, preciso baixá-los novamente, faça o download. Vou acessar novamente outro site que é The Adors From a Stock. Além disso, vocês podem obter diferentes tipos de interface de usuário, ok? Mas para isso vocês precisam pagar um pouco por isso. Vocês também podem usar o premium. A partir daqui, vocês podem ver coisas diferentes aqui. OK. Então esta é uma plataforma de comércio eletrônico, então deixe-me baixar isso aqui. Vocês podem ver que isso está sendo baixado. OK. Esse é um recurso do XD. Vou tentar abrir isso aqui no meu arquivo aqui. Estou baixando o kit. Ok, deixe-me voltar ao meu X D e importar esse arquivo daqui. Ok, vou passar para a opção de importação a partir daqui. Esse, do lado do comércio eletrônico, eu vou importar, acho que não daqui. Basicamente, o que eu preciso fazer é cancelar isso. Eu virei aqui. A partir daqui, eu posso realmente abrir o arquivo, ok. Basicamente, agora vocês poderão ver uma página da web que está sendo projetada por outra pessoa. A partir daqui, vocês podem ver que ele fez algumas das páginas, ele também as nomeou. Está bem? O login da página de inscrição e a página de esquecimento da senha Aqui estão a página inicial e as categorias. Está bem? Mas a principal coisa em que vou me concentrar são os componentes. Ok, deixe-me ampliar e mostrar a vocês quais componentes ele usou. Ok, aqui vocês podem ver que ele usou diferentes tipos de ícones ou logotipos. Basicamente, vocês podem pegar os logotipos, talvez mudar alguma coisa ou fazer desse jeito e realmente mudar a cor para mim. No momento, o que posso fazer é pegar o botão home daqui. O que vou fazer é desagrupar este. Agora posso selecionar um individualmente e clicar em Control plus, que é a cópia básica. Venha aqui, venha aqui e digite, ou simplesmente clique na opção Ritmo. Ok, aqui vocês podem ver que eu tenho essa coisa aqui. Talvez eu coloque isso em algum lugar aqui. Pense nisso como o logotipo, ok? Então esse é o logotipo do mundo dos brinquedos dos ladrões daqui. Vocês não precisam colocar nenhuma cor, mas se quiserem colocar alguma cor ou algo parecido aqui neste ícone. Então, deixe-me pegar outro aqui. Acesse esta página e controle V. Agora vou aumentar o tamanho desta. E suponha que eu queira mudar a cor. Em seguida, vá para a opção de campo a partir daqui. Escolha a cor do seu gosto e vocês podem colocar essa cor, ok? E você também pode escolher a opacidade aqui. E você também pode escolher o tamanho da borda, ok? Talvez eu mude um pouco a largura , então vou torná-la três. E eu vou dar a essa cor amarela. Ou talvez algo em vermelho. Ok, algo em vermelho. E eu também vou mudar o tamanho, talvez seis. Ok, este é o ícone que eu quero. Vou diminuir o tamanho a partir daqui. Ok, eu posso diminuir o tamanho a partir daqui. Basicamente, o que eu posso fazer também é clicar duas vezes aqui, se vocês puderem ver que eu tenho os botões pequenos aqui, ok? Basicamente, a partir daqui, posso diminuir o tamanho do ícone. Eu também posso basicamente fazer qualquer alteração, se eu quiser. Ok, aqui você pode ver pontos diferentes. Usando esses pontos, eu posso realmente me mover e brincar, mas vai ficar feio aqui Para isso, vou voltar aqui e deletar esse buraco. Ok, é assim que também podemos colocar cores ou qualquer detalhe em nosso ícone. Como se também pudéssemos editá-lo depois de obtê-lo de qualquer outra pessoa. Existem alguns sites gratuitos ou úteis onde vocês podem obter seus kits de interface de usuário e também diferentes tipos de ícones que você pode usar ao desenvolver seu web design ou design de aplicativo móvel. Espero ver todos vocês na próxima aula onde aprenderemos sobre grupos. E também discutirei com vocês sobre alguns dos problemas que vocês podem enfrentar ao editar o ícone. Ok, até lá, cuide de todos e espero ver todos vocês na próxima aula. 7. Ícones de agrupamento e edição: Olá a todos e bem-vindos a mais um tutorial do Adobe XD aqui. Agora estamos no capítulo número sete e vou contar a vocês como fazer agrupamentos e agrupamentos E também na última aula, como eu disse a vocês, vocês podem pegar diferentes tipos de ícones de lugares diferentes. Se você obtiver esses ícones, como você pode basicamente editar esses ícones de acordo com você mesmo e qual é a maneira mais precisa e melhor ou única de editar esses ícones como você mesmo. Ok, vou mostrar vocês tudo aqui nesta aula, então não vamos perder tempo e vamos começar com o design. Agora, como vocês podem ver aqui, estou no meu espaço de trabalho novamente. Agora, o que vou fazer é a primeira parada, vou me livrar dos ícones. Ok, aqui vocês podem ver que estou na página número um aqui. Você pode ver que tenho esta página aqui, alguns ícones, e os nomeei adequadamente para não me confundir ao aumentá-la. Ok, vou trabalhar e mostrar como agrupar adequadamente. Ok, primeira parada, vocês conhecem o uso básico do agrupamento, pois eu estava agrupando coisas enquanto também frequentava outras aulas Ok, primeiro, eu virei aqui arquivá-lo. Suponha que eu queira importar mais de uma página. Nesse caso, o que posso fazer é selecionar Controle. Depois disso, posso selecionar duas ou três imagens ao mesmo tempo. Ok, vou selecionar isso, vou importar todos esses três ícones aqui. Ok, depois disso eu posso importá-los daqui. Ok, então talvez eu selecione aqui com minha ferramenta de seleção. Aqui. Vocês podem ver que esses são os poucos ícones que acabei de comprar no meu espaço de trabalho Agora eu o importei na página número dois. Agora vamos ver primeiro o agrupamento e o desagrupamento. A maneira mais básica de saber isso é quando você seleciona o quadro inteiro aqui ou o ícone inteiro, botão direito do mouse aqui, vocês podem ver a opção, ok, aqui eu posso desagrupar essa novamente, selecionar essa coisa toda, vocês agrupam Agora, se eu tentar mover um quadro daqui, suponha que se eu selecionar isso, agora eu quero mover isso, ok? Ou se eu estiver apenas selecionando a camada externa, posso mover essa de forma independente. Está bem? Aqui. Da mesma forma que, se eu clicar aqui e clicar neste, basicamente também posso me movimentar. Ok, para isso, deixe-me aumentar o tamanho. Está bem? Vou agrupar este novamente. Agora, vou tentar ampliar isso, ok? Como você pode ver, estou ampliando isso. Se eu quiser escalá-lo corretamente, no sentido proporcional, nesse caso, o que eu posso fazer é vir aqui, selecionar isso e clicar em Control Shift Então tente mudar essa casa para cá. Você pode ver que aumentará proporcionalmente. Está bem? Talvez eu tire outra imagem, que já tive aqui antes. Importe agora pegue este cartão aqui. O carrinho de compras está sendo selecionado aqui, como você pode ver. Ok, talvez eu coloque esse cartão em algum lugar aqui. E agora, basicamente, vou ampliar para que vocês possam entender melhor. Ok, então, como você pode ver, eu tenho esse cartão aqui. Se eu quiser fazer alguma alteração ou editar alguma coisa a partir daqui. Primeiro, preciso clicar neste. E daqui vocês podem ver que eu posso mudar a proporção, mas eu quero fazer mais, ok? Nesse caso, vou clicar duas vezes aqui. Você pode ver que eu posso mudar o tamanho, ok? Mas como vocês podem ver, uma vez que eu cliquei várias vezes, vocês podem ver aqui algumas opções, ok? Basicamente, se eu quiser aumentar ou diminuir algum tamanho específico a partir daqui, se eu simplesmente voltar daqui, suponha que eu apenas selecione essa extremidade, ok? Eu quero mudar alguma coisa a partir daqui. Está bem? Talvez eu coloque esse aqui. Da mesma forma que vou trazer esse acordo aqui. Está bem? Então eu posso fazer isso, derrubar isso um pouco ou apenas. Verifique ou faça assim. Essa é outra forma de como podemos realmente trabalhar aqui. Ok, essa é uma maneira. Agora, se eu selecioná-lo individualmente, tudo bem, posso clicar aqui, ou vou selecionar esse quadro inteiro. Vou selecionar o botão direito do mouse. E continuarei clicando na Opção de Grupo a partir daqui. Ok, vou clicar de novo e de novo, vou clicar em Grupo. Agora eu não tenho mais a opção de grupo aqui. Vocês podem ver que tudo isso não está agrupado, eu acho. Está bem? Também posso selecioná-lo individualmente. Aqui. Agora eu não tenho a opção de subgrupo. Precisamos entender que isso é apenas uma coisa simples aqui. Está bem? O que eu posso fazer é simplesmente diminuir o tamanho aqui. Talvez pegue esta se eu quiser somar alguma linha aqui. OK. Em seguida, adicionarei uma linha aqui como esta. Talvez do mesmo. Vou copiar deste lado. Ok, então talvez eu clique em Alt e traga um aqui. Está bem? E eu vou selecionar este aqui. Vocês podem ver basicamente como realmente fica aqui. É assim que realmente ficará. Também posso alterar o tamanho do traçado a partir daqui. Ok, venha para a opção de fronteira, mude a borda. Vou pegar um cinco. Esse também. Vou clicar aqui, Copiar. Vou apenas colar a aparência aqui. Vou apenas colar a aparência. É assim que realmente ficará meu ícone. Se eu quiser acrescentar mais alguma coisa, posso fazer isso. Espero que vocês tenham entendido como podemos realmente contornar as opções. Ok, basicamente eu posso trabalhar a partir daqui, ok, eu posso realmente diminuir o tamanho a partir daqui também. Aqui, vocês podem ver essas opções. Está bem? Então, é assim que podemos basicamente contornar. Ou se eu quiser mudar a cor aqui, posso mudar a cor aqui também. Talvez eu queira pegar um vermelho aqui, eu quero pegar verde. Está bem? O campo, a fronteira, tudo bem, aqui. É assim que podemos basicamente contornar. Venha para a fronteira novamente, pegue uma cor amarela, escolha uma, e você tem isso aqui também. Você também pode adicionar cores diferentes nesse ícone específico. Escolha a cor azul, talvez eu pegue um ícone azul aqui. Ok, então este é o meu carrinho de compras, que parece bem diferente da época em que eu baixei este. Ok, é assim que você pode basicamente contornar seu design. Suponha que eu queira colocar isso ou criá-lo como um grupo. Vou selecionar isso e clicar em Controle. Ok, agora eu posso mover esse de um lado para o outro. Ok, agora eu posso movê-lo por aqui. Acabei de copiar este novamente. Vou diminuir um pouco o zoom e tentar ver como isso basicamente se parece. Ok, então eu vou fazer esse. Eu posso selecionar isso e agora posso movê-lo por aqui, ok? Ou em vez da opção de compra aqui, talvez se eu simplesmente excluir isso, eu possa simplesmente colocar esta. Eu tenho isso. Vou colocá-lo aqui no meio. OK. Então é assim que podemos realmente trabalhar também. Mas agora eu não quero colocar esse logotipo aqui agora. OK. Para isso, vou excluí-lo. Eu vou voltar. Sim, espero que vocês tenham entendido como você pode realmente editar seu ícone, seja ele qual for. Ok, então se eu for ao localizador de ícones, existem ícones diferentes que você pode escolher Ok, aqui eu posso pegar qualquer ícone e realmente usá-lo para mim. OK. Deixe-me baixar este de venda. E novamente, venha para o meu X D a partir daqui. Agora eu posso realmente importar, ok, controle de turnos. Além disso, eu também posso usar o controle de mudança. Serei redirecionado para esta página aqui e aqui vocês podem ver que eu também tenho o logotipo da venda. Está bem? Este, eu quero expandi-lo proporcionalmente para aquela mudança de controle E eu vou selecionar isso, este, você pode colocá-lo em um canto em algum lugar. Está bem? Ou em algum lugar aqui. Portanto, também podemos contornar tudo isso. Está bem? Se eu clicar aqui e também conseguir desagrupar esse, ok? Agora eu posso basicamente mudar a partir daqui, vocês podem ver, ok? Então, é assim que podemos basicamente fazer com que vocês vejam que é assim que podemos realmente contornar. Está bem? Mas vou deletar este por enquanto. Não quero isso, espero que vocês tenham entendido essa aula sobre como usar esse agrupamento Ok, então essa é uma das principais coisas, como podemos editar todos esses ícones que obtemos. Ok, eu também mostrei a vocês sobre agrupamento, como você pode basicamente agrupar em torno de outra forma de importar qualquer coisa de qualquer outro lugar Suponha que eu tenha essa página de componentes aqui. Eu posso simplesmente ampliar, mover com minha ferramenta manual aqui. Ok, a partir daqui, basicamente o que eu posso fazer é talvez eu querer esse ícone para esse ícone. O que eu posso fazer é clicar em Controlar. Agora volte para esta página aqui e talvez selecione esta página. E agora clique no controle V. Ok, então aqui vocês podem ver que eu tenho um componente aqui, ok? Então, esse componente eu posso colocar aqui. Ou se eu quiser aumentar o tamanho, posso aumentar o tamanho. Se eu quiser aumentá-lo proporcionalmente, posso fazer isso a partir daqui Está bem? Assim. Eu posso basicamente aumentar o tamanho deste também. Está bem? Este é basicamente um componente e posso simplesmente selecioná-lo aqui. Basicamente, posso selecionar a opção de grupo se quiser agrupar esta. Mas aqui você pode ver que isso consiste em todas essas coisas, ok? A partir daqui, você pode ver se eu quero desagrupar o componente, posso fazer isso aqui Agora você vê que eu tenho esse diferente. Essa parte é diferente. Eu posso simplesmente mudar esse de lugar, suponha que eu não queira isso. Nesse caso, o que posso fazer é selecionar isso e excluir este também. É assim que podemos realmente decompor um componente. Basta vir aqui e como você saberá que isso é um componente, basicamente algo de cor verde. Do jeito que acabei de mostrar para vocês, em algum momento, se vocês quiserem ver de novo, é assim que a margem ficará para um componente A partir daqui, posso simplesmente selecionar esse componente específico, vir aqui e desagrupar o componente, ou o atalho para isso é o controle de mudança Para Mac, é Shift plus Command plus. Ok, vou deletar. Ok, vou deletar isso também. Aqui vocês podem ver. Vou selecionar isso, colocar este aqui. E esse eu vou deletar. OK. Agora, se eu quiser editar isso também, posso fazer a edição também. Está bem? Então, eu posso simplesmente ampliar. Quanto melhor a visão que eu tiver, melhor serei capaz de fazer isso. Ok, então a partir daqui talvez eu escolha isso aqui. Vou levar isso. Venha aqui. Sim, escolha este. Venha aqui novamente. E agora vocês podem fazer algo assim. OK. Aqui, como vocês querem fazer isso algo assim, vocês também podem fazer isso. Está bem? Talvez se eu diminuir um a partir daqui, essa seja uma maneira de fazer as coisas. Espero que vocês tenham entendido essa aula de como trabalhar por aqui, ok? É assim que você pode realmente criar seu logotipo e fazê-lo de acordo. Se você quiser usar essas opções, vocês sempre podem usar essas opções para si mesmos. É sobre isso que eu fiz. Ok, deixe-me voltar. Se eu quiser colocá-lo em algum lugar no meio, também posso fazer isso. Ok, mas por enquanto vou deletar esse ícone também. Então essa é uma maneira de fazer isso. Ok, então nos vemos na próxima aula, onde aprenderemos como começar com sua prototipagem Ok, então a prototipagem é basicamente como se eu juntasse esse ícone a esta página ou aqui, se eu clicar nesse ícone, passaria para outras páginas Como eu tenho quatro páginas, como você pode ver, eu só comecei a fazer o trabalho aqui na primeira, OK. Então, também faremos a prototipagem para que vocês entendam como fazer o design do IBX OK. Até lá, cuide de todos e até a próxima aula. 8. Prototipagem no Adobe Xd: Olá a todos e bem-vindos a mais um capítulo do tutorial do Adobe XD, onde estamos aprendendo sobre design de UI UX. Agora estamos no capítulo número oito e aprenderemos sobre prototipagem no Adobe prototipagem é basicamente conectar páginas com páginas de como será a aparência Ok, então aqui nesta aula vamos aprender sobre a prototipagem E também vou mostrar a vocês uma maneira diferente de colocar a interação entre seus quadros. E também vou mostrar a vocês todas as animações que vocês podem fazer usando isso. Ok, então não vamos perder tempo e vamos começar com este capítulo aqui. Então, aqui vocês podem ver que estou no meu espaço de trabalho e tenho quatro páginas aqui Ok, então eu mostrei a vocês como fazer as páginas, então, da mesma forma, eu fiz esses quadros em particular aqui, ok. Então vocês podem ver se eu quero As, ok, agora tudo isso está alinhado Então, aqui você pode ver que eu tenho quatro quadros, mas o que eu quero fazer é na prototipagem, eu quero conectar essas páginas umas às outras Ok, então vamos primeiro tentar entender como podemos começar a fazer isso ou como podemos começar com a prototipagem Então, aqui neste painel em particular, vocês podem ver ao lado da opção de design, eu tenho a opção de protótipo e a tecla de atalho para isso é Alt mais dois em nosso Vou acessar esta página de protótipo. Como você pode ver, quando estou em uma página de protótipo e quando clico em qualquer ícone, tenho esse tipo de sinal logo ao lado OK. Se eu clicar na página inicial, também tenho essa aqui. Está bem? Mas da mesma forma, se eu acessar o arquivo de design e clicar aqui aqui aqui, você verá que não tenho a mesma opção disponível aqui no painel de design. Então, vou para a opção de protótipo. Novamente. Aqui eu poderei me conectar com as páginas. Ok, talvez eu queira conectar esta página inicial específica a esta. Está bem? Esta página aqui. Esta página em particular. Eu quero conectá-lo com esta e esta página com a última. Está bem? Aqui vocês podem ver que eu tenho tudo isso aqui. Se eu mostrar a vocês um exemplo de como ficará. Então, vou para o painel de visualização do Dekstop se quiser visualizá-lo, mas vou para a visualização prévia do dispositivo a partir Ok, aqui como vocês podem ver, eu tenho a moldura aqui. Ok, se eu clicar aqui, estou na minha segunda página. Agora, se eu clicar aqui, vocês podem ver que esta é a terceira página. Esta é a última página , pois eu especifiquei algo em particular. Então essa é a prévia que eu vou ter aqui. Ok, então aqui vocês podem ver que eu não posso voltar. E outra forma de fazer isso é usando o teclado, basta clicar no botão, nos botões de seta. A partir daqui, estou clicando no botão de seta para a esquerda. E eu posso clicar no botão de seta para a direita aqui, como vocês podem ver. Mas isso é apenas o básico do que você pode fazer aqui, ok? Apenas o básico. Se eu vier aqui, se eu clicar nisso, excluo, eu excluirei este. Vou deletar isso também. Vou deletar isso também. Ok, espero que vocês tenham uma ideia de como isso basicamente é. Basicamente, eu também excluí essa mensagem. Ok, mas eu só quero deletar isso. Está bem? Não é a mensagem aqui. Eu virei aqui. É assim que podemos começar a trabalhar aqui. Ok, espero que vocês tenham uma breve ideia. Agora vou falar para vocês sobre algumas das maneiras mais fáceis de fazer sua prototipagem. Ok, quando eu estiver Agora, o que eu quero selecionar é que eu quero selecionar essa opção específica Por. E eu quero ir diretamente para a página de checkout, ok? Agora, se eu clicar nesta e conectar esta página a esta, ok? Com a página de checkout a partir daqui. Como vocês podem ver na opção Saiba mais, conectarei esta página a esta aqui. Como você pode ver, eu tenho o botão home aqui. Vou conectar a página. Essa, talvez essa página inicial. Vou conectá-lo com o primeiro. Agora, como você pode ver, eu tenho esse ícone aqui. O que posso fazer é que, se eu quiser também criar o mesmo recurso, copiarei este daqui. Exclua isso, venha aqui, eu vou colar este aqui. Você pode ver que, depois de colar, o mesmo recurso também está sendo colado aqui Está bem? Como vocês podem ver, da mesma forma, se eu vier aqui, ok, neste botão em particular e eu só quero qualquer entrega que eu possa fazer também. Ok, espero que vocês tenham entendido o básico de como trabalhar aqui nesta página. Ok, cara, esse também vai aqui, eu também venho aqui, eu vou, esse, eu vou clicar aqui, eu vou clicar no controle C, e eu vou colar o controle V aqui. Ok, então você também pode ver o recurso aqui. Ok, agora deixe-me ir para a opção de pré-visualização a partir daqui. Ok, aqui eu selecionei apenas esse botão, ok? E aqui agora, se eu clicar na opção Por, aqui, você pode ver que estou sendo transferido para minha página de checkout Se eu quiser voltar à minha página inicial, basta clicar neste ícone na parte superior. Essa é uma maneira de fazer isso. E agora, se eu me mover e quiser ir daqui para a página inicial, vamos para esta página aqui. partir daqui, também posso voltar para a página inicial, pois acabei de copiá-la e colá-la, a mesma função se tivermos tantas páginas e tivermos que fazer coisas como, no sentido de eu fazer tivermos que fazer coisas como, no sentido de eu fazer protótipos ou prototipagem, como se tivesse 500, 600 quadros Nesse caso, posso usar esse método, que é bastante útil. Agora vamos ver a prévia novamente. Se eu clicar na opção Saiba mais aqui, você pode ver que posso acessar a página do produto aqui. Ok, vou clicar aqui, eu virei aqui. Vou selecionar essa opção agora. E este vai me levar para a última página. Ok, aqui eu tenho tudo e espero que vocês tenham entendido como essa prototipagem Ok, espero que até agora tenha ficado claro para todos vocês. Agora vamos tentar ver a animação. Todas as animações que podemos colocar durante a prototipagem. Ok, sua página simplesmente entrará ou será retornada para isso Como vocês podem ver, eu tenho um menu exibido aqui no meu painel de controle, como eu tenho todas essas coisas aqui Especialmente se eu, se eu clicar, vocês podem ver onde tudo está conectado. Se eu chegar a esta página aqui, vocês podem ver, se eu chegar à página de checkout aqui, vocês podem ver todo esse forro ou junção Ok, aqui vocês podem realmente gerenciar isso a partir daqui. Se você quiser adicionar qualquer outro, você também pode fazer isso. Ok, se eu tocar, posso colocá-lo em qualquer lugar que eu quiser. Ok, eu posso mudar o local. Agora vamos tentar entender. Suponha que com mais esse botão, ele venha aqui, mas eu quero que ele venha com estilo, ok? Para isso, o que eu vou fazer é talvez eu selecionar este, ok? Esse forro em particular aqui, você pode ver o modo de transição daqui, ok? Aqui você pode ver diferentes tipos de transição, ok, se eu clicar em Animar automaticamente E onde está o destino, ok, a partir daqui. Além disso, se você não quiser escolher ou vinculá-lo a partir daqui, vocês estão aqui, ok, aqui. Como você pode ver, quando estou aqui na minha página inicial, você pode ver onde eu quero que essa página seja vinculada, a página do produto, a página de pagamento ou a página do pedido feito a partir daqui Além disso, nós podemos fazer isso. Temos aqui uma opção para sair, sair e sair sem ventos fortes. Vou mostrar tudo isso para vocês, ok? Essa é outra opção chamada de gatilho. Está bem? O gatilho é basicamente como seu aplicativo se moverá, ok? Suponha que eu tenha selecionado esse botão aqui. Se eu selecionar arrastar, tenho que beber o botão E só então eu vou passar para a próxima página ou para o próximo lugar onde eu selecionei. Ok, eu vou escolher aqui. Deixe-me mostrar a vocês um exemplo daqui. Ok, deixe-me diminuir o tamanho a partir daqui. Deixe-me manter isso em um canto. Ok, aqui está como eu selecionei a animação automática. E toque aqui. Se eu clicar aqui, isso está apenas facilitando. OK. Também posso selecionar a duração de quanto tempo eu quero essa animação. Ok, suponha que eu queira 2 segundos, então eu vou esperar 2 segundos. Abra a pré-visualização novamente e clique em Saiba mais. Basicamente, é assim que vai ficar, ok? Vai se acalmar assim. Se eu quiser selecionar este daqui, suponha que agora esse forro, ok, ou essa junção aqui, nesse caso aqui, você pode ver que está vinculado à página de checkout E eu vou escolher a opção de dissolução a partir daqui. E eu vou escolher o horário também, ok? Vou levar 0,5 segundo. Eu quero uma transição, ok? Não quero fazer nenhum tipo de reprodução de áudio ou reprodução de voz durante Se eu selecionar tudo isso, preciso escolher um arquivo de áudio. E tudo o que eu posso fazer é também. Porque em muitos lugares que vocês já viram, como se você estivesse indo para a próxima página, eles dirão algo assim que você clicar em um botão. Depois de acessar essa página, eles dirão a página número dois ou serão bem-vindos à página do pedido. Bem-vindo à Amazon. Bem-vindo ao Tesla, algo assim. Ok, isso é o que nós também podemos fazer. Ok, daqui eu virei e irei para a opção de animação automática A partir daqui, vou escolher isso em vez de relaxar. Agora vou escolher. Ok, vamos ver a prévia novamente. A partir daqui, é assim que vai acontecer. Ok, agora vamos ver outras opções também. Ok, eu fiz esse. Agora vamos para essa opção. Ok, isso me levará a esta página. Agora, vou animar este. Vou mostrar a vocês toda a animação. Ok, a partir daqui você pode selecionar a opção de dissolução. Com facilidade, talvez eu escolha o snap. Ok, vamos ver a prévia novamente. Aqui você pode ver em um piscar de olhos, estou de volta ao mesmo lugar, ok? Em vez de dissolver, se eu chegar à opção de slide à direita aqui, se eu clicar em pular, tudo bem, agora vamos ver a prévia daqui Aqui você pode ver que esse é o salto. Posso selecionar o horário aqui. Suponha que, se eu quiser 1 segundo, eu possa clicar aqui. E agora clique nessa opção aqui ou vá para o botão de visualização. Agora clique, você pode ver a forma como minha página aparece ou a animação, é diferente. Ok, então espero que vocês tenham entendido o que é o gatilho. Ok, vou mostrar a vocês um exemplo de travesti. Suponha que eu tenha escolhido este, talvez não. Isso selecionará este. Ou eu vou voltar aqui. Sim, vou escolher um. Agora vou selecionar em vez de qualquer coisa e vou escolher a opção de atenuação A partir daqui, entra e sai. Agora vou para a opção de pré-visualização. Agora, se eu arrastar, posso ir para a próxima página. Ok, mas eu não apliquei a mesma coisa aqui. Ok, se eu vier aqui. Então essa é uma forma de como eu posso arrastar essa coisa. OK. Aqui também, vou escolher arrastar. E agora estou nesta página. Se eu arrastá-lo com o mouse. OK. Então, aqui neste caso, talvez eu tenha cometido algum erro aqui, porque isso é bastante, sim, espero que vocês tenham entendido aqui. Se eu só precisar arrastar e se eu chegar a esta página e se eu der essa aqui, coloco o arrasto, ok, vamos ver a prévia. Ok, vou arrastá-lo até aqui. Volte aqui, arraste, arraste. É assim que basicamente também podemos fazer esse trabalho. Ok, vou deletar isso. Vou deletar este também. Ok, espero que vocês tenham entendido até agora muito do que podemos fazer. Espero que vocês tenham entendido sobre o gatilho da opção, sobre o tipo, por exemplo, como eu quero fazer isso para animar ou se eu quero uma sobreposição Se eu quiser reproduzir alguma visualização, qualquer reprodução de áudio, às vezes, quando você clica em qualquer coisa, ouvirá um Se eu quiser adicionar isso, posso clicar na reprodução de áudio. Se eu quiser contar alguma coisa, posso clicar na reprodução da fala Está bem? Nesse caso, preciso fazer o upload desse arquivo de áudio aqui. Está bem? Isso é sobre o tipo, ok? E esse é o destino. Onde eu quero que minha página termine? OK. Essa é outra opção chamada de rolagem OK. Se eu quiser fixar a posição durante a rolagem , podemos simplesmente marcar esta OK. Eu também tenho essas opções de flexibilização. Se eu não quiser nenhum, posso simplesmente selecionar nenhum, nada será aplicado, ok. Essa é uma maneira de basicamente fazermos nossa prototipagem Se eu quiser adicionar isso, ok, adicione este, então eu posso adicionar como qualquer interação. Se eu quiser adicionar, posso adicionar clicando na opção de adição aqui. Espero que vocês tenham entendido que na verdade existem muitas maneiras de fazer uma coisa simples aqui em todo o aplicativo, especialmente no X D, isso é bastante útil e bastante saudável. Espero que vocês tenham entendido como começar a fazer sua prototipagem Como você também pode fazer animação de protótipos ao mesmo tempo. Cuide de todos. Na próxima aula, aprenderemos sobre animação no AutoBXD Está bem? Vamos aprender mais sobre animação. Como você pode animar, como qualquer objeto, suponha que esse objeto esteja aqui Quando eu chegar a esta página, ela simplesmente cairá em algum lugar, ou simplesmente aparecerá aqui, ou esse botão em particular, simplesmente aparecerá. Também aprenderemos sobre animação depois dessa aula em particular. Dia após dia, à medida que avançamos na aula, a turma fica animada e espero que vocês também estejam entendendo essa aula. Até lá, cuide-se e espero ver todos vocês no próximo capítulo. 9. Animação no Adobe Xd: Olá pessoal, bem-vindos a todos em outro capítulo do tutorial do Adobe X, onde estamos aprendendo sobre design de UI UX. Então, agora estamos no capítulo número nove e aprenderemos como você pode adicionar animação nesse aplicativo específico. Na última aula, falei para vocês sobre prototipagem. E agora, nesse mesmo cenário de guerra, vou mostrar a vocês como vocês podem fazer sua animação. Como um objeto específico pode aparecer sozinho em sua tela. Depois de acessar essa página específica, mostrarei como você pode selecionar um objeto específico ou eu na caixa ou até mesmo em um botão e animá-los em seu estilo em sua moldura Ok, vamos começar com esse capítulo específico aqui. Agora, aqui, como vocês podem ver, estou no mesmo espaço de trabalho aqui Está bem? Na última aula, mostrei a vocês sobre prototipagem Ok, aqui eu tenho esta página com minha ferramenta manual. O que vou fazer é diminuir um pouco o zoom. Ok, com minha ferramenta manual, vou me mover a partir daqui. Agora, o que vou fazer é a primeira parada. Se eu quiser fazer alguma animação, o que vou fazer aqui, como você pode ver esse ícone aqui. Eu quero que esse ícone simplesmente apareça assim. Quando chego à primeira parada desta página, preciso duplicar esta página a partir daqui Está bem? Há muitas maneiras de duplicar usando todas as duas que podem duplicar, caso contrário, posso simplesmente copiar esta, ok Vou copiar isso e colar aqui com o controle V. Ok? Aqui você pode ver que eu tenho isso. Agora deixe-me ampliar as duas páginas aqui, ok? Agora, o que eu quero é que esse ícone esteja aqui. Eu quero que esse ícone venha aqui. Ok, essa é uma maneira de fazer isso. Primeiro, precisamos ter certeza de que, quando eu estiver nesta página, vamos primeiro selecionar esse ícone em particular. Aqui, seu nome é ícone de seta. OK. Agora, novamente, vou acessar esta página aqui. Está bem? Nesta página, vou selecionar, ok. O nome deste também é ícone de seta. Ambos os nomes devem ser semelhantes para fazer acontecer ou fazer isso funcionar. Está bem? Esta é a primeira página do pedido feito. Vou nomear isso como dois. Ok, eu tenho essas duas páginas aqui. Quero que minha animação aconteça aqui. OK. Primeiro, o que vou fazer é manter esta página aqui. Vou conectar este com este aqui. Ok, aqui nesta opção de ação. Por padrão, ele sempre permanece como transição. Mas vou apenas mudar essa animação automática que estava lá antes Também posso escolher a duração de quanto tempo eu quero que minha animação dure. Ok, deixe-me tomar 1,2 segundos aqui. E que tipo de flexibilização eu quero? Ok, eu quero que as coisas se acalmem aqui. Ok, agora vamos tentar ver a prévia daqui. Ok, como estou nesta página aqui, se eu clicar em todo esse ícone, vocês podem ver que ele se move para cá, ok? Essa é uma maneira de fazer isso, ok? Se eu voltar novamente, se eu clicar aqui, pessoal, ele simplesmente segue para esse caminho. OK. Espero que vocês tenham entendido até agora como começar com sua animação. Mas, basicamente, o que eu quero é não precisar clicar aqui. Suponha que eu esteja na minha página. Ok, vou até esta última página aqui. Não quero essa página, não preciso pressionar esta basicamente para colocar essa animação aqui. Ok, o que eu vou fazer é agora, então agora vamos passar para isso. Ok, para isso, precisamos ter certeza de que não estamos nos conectando aqui com esse ícone. Ok, curta o ícone com a página. Então, se eu vier aqui, ok, veja, eu só posso fazer esse tipo de prévia. Se eu clicar nisso, ele virá aqui, aparecerá assim. Mas o que eu quero, eu quero animar automaticamente, ok? Nessa gaiola, preciso selecionar essa página inteira. Depois de selecionar a página inteira, vou mover essa aqui, ok? Agora, uma vez que eu seleciono esta página com esta, se eu chegar à opção de gatilho, pessoal. Eu também tenho a opção de tempo. Ok, mas suponha que eu exclua este daqui. Vou deletar isso aqui. Deixe-me entrar em contato com esta página agora. Vamos tentar ver aqui na opção de gatilho, eu não tenho a opção de tempo, mas para animar automaticamente eu preciso fazer isso. Vou deletar isso. Vou selecionar a primeira página do pedido. Selecione esta página com esta aqui. Agora, quando chego aqui, posso escolher a opção de horário. Ok, quantos segundos de atraso eu quero? Ok, aqui como você pode ver, não vou atrasar nada aqui. E eu tenho a opção de animação automática. Agora eu tenho a duração aqui de 0,3 segundos, que vou mudar para 0,5 Ok, vou escolher 0,5 aqui. Vou clicar em Enter. Agora, acesse esta página específica aqui e vamos ver a prévia daqui agora. Ok, agora vamos voltar. Sim, vou até esta página. Vou tentar ver a prévia. Se eu clicar no botão Por aqui, você pode ver que está apenas animando automaticamente aqui Ok, se eu voltar e conferir a opção, clicarei aqui e você poderá ver a animação automática daqui. Espero que vocês tenham entendido essa parte específica daqui. Com este, eu posso realmente escolher como eu quero que isso apareça, como eu quero? Eu também posso fazer isso. Acesse esta página, veja a prévia. Clique em até agora. Aqui você pode ver a opção aqui. Ok, na mesma página, o que eu posso fazer é talvez eu querer que este simplesmente desapareça Ok, agora eu quero que esse ícone desapareça. Eu vou aqui, vou para a opção de design. A partir daqui, na opção de design, vocês podem ver que minha opacidade aqui é 100 O que vou fazer é mudar minha opacidade. Algo assim, assim, eu posso realmente trabalhar. Ok, agora vamos ver a prévia a partir daqui. Ok, venha para esta página aqui. Veja a prévia. Ok, vou clicar nisso. É assim que basicamente aparecerá. Ok, aqui eu posso mudar a opacidade. Ou se eu quiser apenas girar este, posso girá-lo também Está bem? Suponha que eu queira girar isso, algo assim A partir daqui. Também posso fazer a rotação. Ok, aqui eu tenho isso. Agora, vamos tentar ver a prévia daqui, ok? Clique na opção Por, é assim que ela vai aparecer, ok? Se eu quiser vê-lo devagar , preciso gerenciar a opção de protótipo a partir daqui. Está bem? Mas vou continuar assim a partir daqui. Agora eu tenho isso, vamos ver a prévia novamente. A partir daqui, espero que vocês tenham entendido como fazer sua animação inteligente a partir daqui. Ok, agora se eu quiser animar esses ícones de forma inteligente também, suponha que eu queira que esse ícone em particular apareça aqui Esta página em particular, vou manter esta aqui. Agora, eu posso basicamente selecionar a partir daqui. Suponha que, com esta página, eu vá ao protótipo novamente, aqui vou selecionar isso Ok, a partir daqui eu posso realmente escolher, talvez eu crie outro protótipo aqui Vamos ver a prévia a partir daqui. Ok, clique em Até agora, é assim que ele aparecerá. Ok, é assim que podemos fazer isso. Ou se eu quiser colocar alguma opção de salto aqui, também posso fazer isso Suponha que eu tenha selecionado este aqui. Eu tenho esse quadro-chave aqui. Eu tenho as interações. Vou vir aqui, digitar este. Vou tocar em, vá para a animação automática aqui. Você pode escolher a opção de salto aqui. Ao mesmo tempo, posso colocar três interações aqui. Está bem? É assim que podemos basicamente adicionar. Se eu quiser adicionar outro, também posso fazer isso a partir daqui. Neste momento eu tenho dois. Ok, aqui estão algumas das ações. Se eu quiser adicionar alguma reprodução automática eu já falei para vocês Ok, agora vamos tentar ver uma prévia daqui. Clique em até agora. Aqui você pode ver que isso está caindo aqui, ok? Ou suponha que eu queira que todos esses três ícones apareçam aqui na minha tela. Nesse caso, o que vou fazer é voltar à opção de design. Isso, traga isso aqui. Agora, vou tirar isso da tela aqui, aqui e aqui. Agora, vamos tentar ver uma prévia. É assim que vai aparecer. Nós também podemos fazer isso. Espero que vocês tenham entendido essa aula de como fazer sua animação inteligente. Ok, agora vou mostrar outra maneira de como você pode realmente avançar na animação. Ok, para isso vou selecionar esse ícone específico aqui. OK. Como já estou na minha opção de design, vou alterar o limite de opacidade em cem aqui Mas aqui neste eu quero que isso desapareça. Ok, vou diminuir o ícone aqui. Agora, o que eu quero fazer é copiar esta página. Ok, antes disso, deixe-me dizer, vou copiar esta página aqui. Eu tenho essa página aqui. Ok, então, como você pode ver, ele simplesmente desaparecerá. Então, deixe-me mostrar a vocês e pré-visualizar como isso vai desaparecer. Ok, então é assim que isso desaparece. Mas eu posso basicamente trabalhar com o tempo aqui. Ok, talvez eu aumente o tempo para 1 segundo. Agora, vamos tentar ver a prévia. Venha aqui. Ou simplesmente me mova com minha mão para ver esta. Clique aqui e é assim que ele aparecerá. Está parecendo muito rápido. Novamente, eu virei aqui e tocarei aqui. Esse é de 1 segundo. Vou ficar dois, 2 segundos aqui. Sim, esse é bom. Acho que é assim que vai aparecer aqui. Venha aqui e selecione isso. Agora, basta excluir um daqui. Ok, vou deletar este daqui. Agora, vamos ver. Ok, aqui eu tenho esse segundo, selecione esta página, veja a prévia. Clique aqui, vocês podem ver que desaparece desse jeito. Ok, agora que eu criei outra página aqui, ok, agora o que eu vou fazer é importar um ícone aqui. Ok, do arquivo, vou para a opção de importação. Na opção de importação, vocês podem ver que eu tenho SVG. Aqui está meu ícone, como vocês podem ver aqui. Ok, então vou selecionar a partir daqui. Também diminuirei o tamanho desse ícone específico. Novamente, vá para a opção de design aqui. A partir daqui. Basicamente, com a mudança de controle e com o mouse, você pode simplesmente diminuir seu tamanho de acordo com você mesmo. Ok, agora eu tenho essa marca aqui. O que acontecerá é que, como eu tenho esse aqui, quando ele chegar aqui, este desaparecerá nessa tela em particular. Este só aparecerá aqui quando isso for feito. Ok, deixe-me conectar, vá para a opção de prototipagem, coloque esta e conecte esta página com esta Aqui você pode ver o gatilho. Você também tem tempo. Ok, talvez eu demore aqui talvez 1 segundo. E eu vou clicar em Enter aqui. Agora vou tentar ver a prévia daqui. Ok, agora vamos ver a prévia, como eu já disse. Ok, venha aqui para esta página. Clique aqui, vocês poderão ver a animação aqui. Está bem? Ou vamos começar do início, ok, selecione esta página aqui para ir para a opção por. E para esta página de checkout, assim que eu terminar de comprar Aqui você pode ver a animação. Ok, então aqui você pode ver que meu pedido foi recebido, e aqui eu fiz a animação. Espero que vocês tenham entendido como você pode realmente fazer um nível avançado de animação de seu trabalho aqui Como você pode ver, eu tenho três pranchas de arte aqui. OK. Você pode ter 20, você pode ter 15. Se você tem tantas animações, vocês podem fazer isso usando essa opção específica. Está bem? Então, espero que vocês tenham entendido essa animação em detalhes agora. Ok, vou contar a vocês algumas coisas sobre os problemas que vocês podem enfrentar enquanto trabalham com pranchetas aqui Ok, eu vou aqui, vá para a prancheta. Quero selecionar ou criar uma prancheta a partir daqui. Suponha que eu tenha isso. Vou duplicar este apenas com Al. Eu dupliquei esta prancheta. Agora, aqui eu tenho duas páginas. Está bem? Agora, suponha que eu queira criar uma caixa retangular aqui Deixe-me preencher isso com uma cor vermelha. Agora, o que eu quero fazer é com minha ferramenta de seleção, vou duplicar essa aqui também Mas o que eu quero é colocar isso aqui fora. Agora eu quero fazer prototipagem, ok? Eu quero fazer a prototipagem, ok? A partir daqui, ele virá aqui se escolhermos assim. Agora, se tentarmos ver a prévia aqui, vocês podem ver que tem alguma coisa aqui. OK. Então é assim que ele se anima automaticamente, mas não devemos selecionar ou mover essas coisas para dentro ou fora antes que elas já estejam lá Ok, agora vamos ver a prévia. Basicamente, é assim que vai ficar, ok? Mas a maneira certa de fazer isso, mesma coisa é se eu mover este depois de fazer a prototipagem Suponha que eu tenha feito isso aqui, ok, vou deletar tudo. Começou do começo, ok? Como eu tenho este aqui, como você pode ver, eu tenho isso agora, depois de ir para a opção de protótipo, depois de mover este aqui, e talvez eu o exclua agora se você quiser vê-lo desaparecer Ok, eu posso fazer isso. Está bem? Também posso alterar a opacidade Vá para a opção de design. Altere a opacidade aqui. Basicamente, podemos fazer isso, ou talvez alterar a opacidade, alterar a capacidade a partir daqui Agora vamos ver a prévia. Ok, então é assim que basicamente vai ficar. Espero que vocês tenham entendido essas diferentes partes. Como você pode basicamente animar tudo se quiser fazer alguma transição Então vocês podem fazer a transição a partir daqui. Está bem? Eu selecionei este daqui. E suponha que aqui eu mude a opacidade disso primeiro. Deixe-me copiar este, controle C, venha aqui, controle V, ok. Agora vou fazer a prototipagem a partir daqui, como você pode ver. Venha aqui, vá até a opção de design, altere a opacidade. Agora, a partir daqui, se eu for para a opção de reprodução aqui, você poderá ver a animação. Parece bom agora, mas se eu colocar isso diretamente do lado de fora ou antes de fazer a prototipagem, ele não aparecerá Ok, essa é uma maneira de fazer isso. A partir daqui, vocês podem ver que eu também posso usar as opções da ferramenta Pin aqui. OK. Como se eu pudesse criar meu próprio logotipo ou qualquer coisa como tal. Eu também posso fazer tudo isso a partir daqui. Essa é uma maneira de fazer isso, ok? Então, se eu vier aqui, também posso fazer isso daqui. Vamos ver a prévia daqui novamente, é assim que basicamente ficará. Espero que vocês também tenham entendido essa aula, tudo o que vocês podem fazer aqui nesta aula. Eu contei tudo sobre animação, todos os problemas que vocês podem enfrentar durante a animação e também quais são as formas avançadas. Ok, espero ver todos vocês na próxima aula, onde aprenderemos sobre compartilhar e comentar Suponha que você tenha enviado seu trabalho para seu cliente e, em seguida, ele queira comentar e dar uma prévia. Ou seu feedback contando a vocês sobre o compartilhamento, por exemplo, como vocês podem começar a compartilhar, como eles podem adicionar comentários e tudo em detalhes. Então, nos vemos no próximo tutorial. Até lá, cuide-se e adeus. 10. Como compartilhar seu Wireframe e comentário: E B um. E bem-vindos a todos vocês em outro tutorial do AutoBXT, onde estamos aprendendo sobre o design de UI UX Agora estamos no capítulo número dez e aqui vamos aprender como você pode compartilhar sua estrutura de arame. Ok, na última aula, mostrei a vocês sobre prototipagem, criação de sua estrutura de arame Agora vou mostrar como você pode compartilhá-lo. Suponha que você tenha seu cliente ou talvez alguém que queira pré-visualizar seu trabalho. Você só quer que eles dêem uma olhada, como seu mentor, você pode dar isso a eles e pedir que verifiquem como realmente está. Eu vou mostrar para vocês desde o início como vocês podem começar a compartilhar e também no comentário, que vocês poderão ver como editor. Ok, vamos começar com essa aula agora. Vocês já podem ver que estou aqui na minha página, ok? Esse é o mesmo espaço de trabalho em que eu estava criando minha página aqui, ok, a página do aplicativo móvel O que eu vou fazer é compartilhar isso. Está bem? Logo ao lado do protótipo, você pode ver a opção de compartilhamento Depois de clicar nessa opção de compartilhamento, vocês podem ver algumas coisas aqui. Ok, as configurações do link estão aqui. Eu tenho os links. Se eu quiser criar um novo link, posso fazer isso, só você precisa gerenciar. É isso mesmo. Ok, aqui está uma opção, aqui está outra opção, que é a configuração de visualização. Basicamente, isso significa que quem você estiver compartilhando seu trabalho com o que será capaz de fazer, será capaz de criar a revisão ou também será capaz desenvolver como se tivesse permissão para editar Como se eles apresentassem seu design testassem o usuário ou personalizassem a experiência do espectador. Você pode clicar aqui se quiser personalizar tudo o que eles poderão fazer. Eles poderão fazer comentários ou você deseja que eles os abram em tela cheia e incluam especificações de design Eu posso fazer isso daqui. O que vou fazer é clicar neste, Design Review. Quero receber uma avaliação do meu design. Aqui você pode ver uma pequena prévia do que essa opção fará aqui, logo abaixo Ok, este receberá feedback sobre seu design e protótipo Aqui você pode compartilhar este com o desenvolvedor. Agora você compartilhou seu design com o desenvolvedor. Agora, eles tentarão criar o site ou o aplicativo. Ok, então isso é para apresentação e isso é para testar seu protótipo Então, vou dar uma revisão do design. E agora a última coisa aqui é o acesso ao link. Ok, então, basicamente, aqui, isso significa que todos poderão acessar esse link e qual será o trabalho deles? Está bem? A primeira é que qualquer pessoa com o link poderá acessar meu design específico aqui. Ok, então este eu espero que vocês tenham entendido, e agora o segundo é apenas pessoas convidadas. Ok, então se eu clicar em apenas pessoas convidadas, ok, então eu posso simplesmente convidar essas pessoas aqui, e somente essas pessoas poderão obter meu design daqui. Também posso selecionar qualquer senha. Suponha que eu selecione uma senha e depois compartilhe a senha e também o link no clique. Depois de definirem a senha ou colocarem a senha , eles poderão ter uma visão do meu trabalho. Ok, vou apenas selecionar aqui o link, acessar qualquer pessoa com o link. Agora vou criar um link, e aqui vocês podem ver que eles estão criando um link público aqui. Ok, agora está demorando um pouco. Então aqui vocês podem ver que eu tenho meu link aqui. OK. Então, aqui você pode ver algumas opções. Se eu quiser copiar o link, posso clicar aqui. E aqui eu tenho outra opção, como copiar Embedded Cut. Se eu quiser copiar o código incorporado, posso fazer isso aqui. A outra opção é compartilhar em mãos. OK. Se você quiser compartilhar este projeto no site da Hand, basta compartilhar seu projeto nas mãos. Este é um protótipo público, por exemplo, onde você pode obter diferentes tipos de molduras de utensílios a partir daqui Se você quiser atualizar seu link, atualize o link aqui. Ok, então talvez eu venha aqui no Chrome. Vou passar por este e clicar em Enter. Ok, isso está me levando para a estrutura de guerra. Agora estou aqui, e estou apenas carregando o trabalho. Ok, então aqui você pode ver que eu o tenho em uma página daqui. Basicamente, eu posso ver como isso realmente funciona. Ok, aqui eu clico na biografia. Agora vou selecionar isso e posso ver a animação do que eles fizeram. Ok, e eu vou clicar em. O Robert novamente. Ok, eu não escolhi isso. Volte aqui. Sim, estou volta a esta página. Clique aqui A partir daqui, vocês podem ver a prévia total aqui. Ok, então é assim que seu cliente ou seu mentor podem ver seu trabalho e também podem comentar aqui Essa é a maneira básica de como eles podem comentar. Ok, se eles estão dizendo para mudar a cor do fundo, eles estão me dizendo para mudar a cor do fundo. E eu posso simplesmente enviá-lo a partir daqui. Como vocês podem ver daqui, basicamente posso adicionar um comentário. Há duas maneiras de fazer login com um Adobe ID. Isso é mais profissional. Assim, eles podem entrar com uma Adobe ID e adicionar um comentário aqui. Mas se eu quiser adicionar um comentário como convidado, posso escrever para Darren, posso continuar a partir daqui OK. Aqui você pode ver o que Darren contou e a mensagem de que Por favor, altere a cor de fundo aqui. Aqui você pode ver na minha Creative Cloud, aqui eu posso ver menu pop-up que mostra novas atividades na classe D do Adobe Eggs, que eu chamei de minha classe. Aqui você pode ver o comentário de Darren sobre a aula Adobe Eggs. Ok, a partir daqui eu posso basicamente ver que, se eu quiser fixar esse comentário, também posso fixar esse comentário. Ok, agora que estou aqui, posso adicionar um comentário aqui. Você pode ocultar as anotações aqui. Você pode comentar adequadamente. Ok, se você quiser ver a opção de resolução, se quiser esclarecer quais são os comentários de hoje e tudo o que vocês podem ver e quem são seus revisores Ok, essa é uma forma de como seu cliente pode basicamente revisar seu trabalho. Eles podem dizer se você precisa mudar alguma coisa ou se o trabalho está bom, eles também podem gostar de você. Está bem? Isso é do lado do cliente, ok? É assim que seu cliente visualizará seu trabalho e poderá comentar adequadamente. Mas se você vier aqui, como você vai resolver esse problema? Ok, venha aqui na opção de design, vá até o protótipo, e a partir daqui vocês podem basicamente ter acesso aos comentários Ok, agora talvez venha aqui novamente, eu virei aqui, ok, vá para as opções de design, pois elas estão me dizendo para mudar a cor de fundo. Talvez eu selecione esta página. A partir daqui, vá para a opção de preenchimento. Eu posso escolher a cor de acordo. OK. Como você pode ver, posso escolher a cor de acordo. Quando meu objetivo for o resultado, como se eu tivesse feito tudo, o que posso fazer é aqui, acessar a opção de compartilhamento novamente. Quando terminar de atualizar um link, compartilhe esse link da mesma forma. Ok, você pode ver esses comentários na sua caixa da Creative Cloud. Ok, a partir daqui você receberá uma notificação. Ok, a partir daqui você pode ver qual é o comentário em X D, alterar a cor de fundo. A partir daqui eu posso, eu posso simplesmente dispensar o. Caso contrário, posso acessar esse arquivo específico novamente. OK. Talvez eu queira ir para esta página aqui. Eu criei muito. Muitos. Posso vir aqui nesta página e responder a Darren que, sim, terminei de cumprir sua palavra apenas fazendo login OK. Como fiz login, não tenho a opção de visualizar. OK. Espero que vocês tenham entendido como basicamente compartilhar, como atualizar seu link, como obter feedback e também como editá-los depois de receber esse feedback. Ok, então, na próxima aula, aprenderemos como podemos basicamente criar um moodboard e o que é um moodboard Ok, então aprenderemos como criar nosso próprio quadro de humor. Até lá, cuide de todos e espero ver todos vocês na próxima aula. 11. Coloração no Adobe Xd: Olá a todos e bem-vindos a mais um capítulo do Adobe X Diutorial Aqui estamos aprendendo sobre o design de UI UX. E estamos no nosso capítulo número 12. Então, aqui em nosso capítulo número 12, aprenderemos tudo sobre colorir neste aplicativo. Está bem? Então, vou contar a vocês como vocês podem criar sua própria paleta de cores, como podemos brincar com suas cores, como podemos criar seu próprio gradiente para qualquer botão ou cor de fundo E também vou mostrar de onde todos vocês podem se inspirar em cores. Ok, então aprenderemos sobre tudo isso neste tutorial em particular. Então, vamos começar com essa aula. Então, agora o que eu vou fazer é, como você pode ver, eu estou aqui no meu espaço de trabalho Agora, primeiro, vou mostrar a vocês como você pode criar sua própria paleta de cores E por que você usa a paleta de cores basicamente? Ok, suponha que agora eu queira criar minha própria página da web e tenha selecionado um tema de cores. Ok, suponha que aqui no Moodboard, eu mostrei a vocês que essas são algumas das cores E agora o que eu vou fazer é pegar as caixas daqui ou a caixa de cores, ok? Suponha que eu queira fazer algo assim. Está bem? Então, deixe-me ampliar isso. E suponha que eu queira usar essa coloração na minha página da web. Nesse caso, o que vou fazer é primeiro criar uma caixa aqui. Ok, eu criei esta caixa. E agora, usando a ferramenta Eyedropper, o que vou fazer é selecionar uma cor específica Suponha que eu queira essa cor, e sim , eu tenho essa cor, essa será minha cor primária. OK. Agora, aqui eu tenho essa cor primária. Com essa ferramenta, vou apenas duplicar essa camada. Ok, eu dupliquei essa camada a partir daqui. O que vou fazer é acessar a opção de preenchimento e mudar a intensidade da cor. Como você pode ver, mudei a intensidade da cor novamente. Agora selecione isso novamente, copie este aqui. Agora vou mudar a intensidade dessa caixa em particular também. Ok, venha aqui para a opção de preenchimento. Talvez essa cor ou algo escuro, ok? É assim que podemos realmente criar nossa própria paleta de cores. Ok, agora novamente, pegue este e repetiremos o processo de quantos conjuntos de cores queremos. Basicamente, depende de nós. Ok, todos colam aqui. Agora, venha para este e mude o preenchimento a partir daqui. Talvez eu queira um pouco de escuridão. Ok, agora eu tenho essa paleta de cores. Suponha que a partir daqui eu também queira tirar o tema de cores desta foto. Ok, nesse caso, talvez eu venha um pouco para este lado. Ok, vou criar uma paleta de cores aqui. Vou repetir o mesmo processo, criar uma caixa aqui. Ok, agora com seu conta-gotas para manter essa ferramenta de conta-gotas aqui Agora, a partir daqui, você pode selecionar uma cor. Ok, talvez eu tenha selecionado essa cor. Agora, o que eu posso fazer é copiar isso, ou posso simplesmente fazer uma cópia deste Está bem? Vou fazer uma cópia desta Agora, eu posso mudar a intensidade da cor a partir daqui. A partir daqui. Como você pode ver, estou mudando a densidade novamente. Repita o mesmo processo. Suponha que eu queira uma cor específica aqui desse conta-gotas dois, talvez eu possa algo aqui Ok, esse é o mais escuro. Novamente com Al. Duplique essa camada e agora altere a intensidade a partir daqui. Está bem? Talvez algo escuro, mude o posicionamento a partir daqui. Ok, eu também tenho essa paleta de cores. OK. Agora podemos basicamente agrupar esse e nos movimentar. Suponha que eu queira manter este aqui. Ok, esta é outra paleta de cores. Suponha que essa seja minha principal e minha segunda paleta de recoloração Quantas cores você quiser usar em sua página da web, vocês podem adicioná-las ou empilhá-las Espero que vocês tenham entendido como criar sua própria paleta de cores Agora vou contar a vocês como criar seu gradiente de cores Suponha que agora eu venha aqui e crie uma caixa aqui. Nesta caixa em particular, o que vou fazer é acessar a opção de preenchimento aqui. Na opção de preenchimento, vocês podem ver no topo que eu tenho uma opção. OK. Vou abrir o menu. Ok, aqui você pode ver se eu quero pegar alguma cor sólida. Eu posso fazer isso daqui. Como vocês sabem daqui, eu posso mudar a intensidade o quanto eu quiser. Esta é a ferramenta de conta-gotas. A partir daqui, você pode realmente salvar a cor. Está bem? Agora, deixe-me chegar primeiro ao gradiente linear Está bem? É assim que se parece um gradiente linear Está bem? Vou selecionar este. Está bem? Este lado eu vou, esse daqui, eu posso mudar a cor. Está bem? Suponha que eu queira pegar essa cor novamente. Eu vou escolher esse. E desse lado, eu quero uma cor diferente aqui. Você pode ver que essa é a combinação das duas cores aqui, verde e vermelho. Se eu quiser adicionar uma cor diferente em qualquer lugar, posso adicionar uma cor diferente como. Ok, eu posso mudar o posicionamento e posso adicionar quantas cores eu quiser. Depende de qual deles ficará melhor. E eu também posso mudar o posicionamento a partir daqui. Ok, deixe-me selecionar algumas cores diferentes. Está bem? Vou selecionar outra cor aqui. Está bem? É assim que você pode basicamente criar seu próprio gradiente. Você pode colocar o quanto quiser. Você também pode alterar a opacidade , como eu já disse. Deixe-me levar isso aqui. Eu terminei com o gradiente e é assim que você pode basicamente trabalhar aqui Você pode realmente mudar isso. Particularmente, volte à opção de campo. E a partir daqui, se você quiser mudar isso a partir daqui, você pode selecionar como a cor fluirá, ok? Basicamente, se eu quiser mover a cor dessa forma e qual parte terá o que ela está me mostrando aqui, criei um gradiente Esse foi o exemplo do gradiente linear. Mas agora vamos ver como você pode criar basicamente um radial Está bem? Vou selecionar outra caixa aqui. Agora vá para a opção de preenchimento. Novamente, na opção de preenchimento, eu tenho esse gradiente radial, ok Ele virá em uma forma radial. Isso também é o mesmo. Talvez eu escolha uma cor vermelha. Vou mudar um pouco a opacidade. Agora vou selecionar este na cor verde. OK. Daqui você pode ver que esse é o vermelho lá fora. Eu tenho o verde aqui. Está bem? Também posso alterar o posicionamento, se quiser, ou posso simplesmente adicionar mais cores a ele. Está bem? Como você pode ver, eu posso mudar a opacidade dessa Isso está em radial. Da mesma forma que seleciono quantidade de cores e de todas as cores que eu preciso. Eu virei aqui. Ok, vou selecionar outro aqui. Ok, vou colocar outra cor aqui. Vou selecionar este. Espero que vocês também tenham entendido sobre a coisa radial É assim que você pode, se estiver criando qualquer logotipo ou design, vocês podem fazer isso. Eu também posso mudar esse. Eu posso dar a volta por cima. Eu também posso girar isso se eu quiser. Ok, suponha que eu queira girar este. Eu posso girá-lo de acordo com minha vontade com minha ferramenta de seleção Vou mover esse aqui. Eu também mostrei a vocês como criar seu próprio gradiente aqui Agora vou ver o último gradiente que você vai fazer Deixe-me tirar uma elipse ou eu farei essa. Está bem? Uma forma poligonal Vou criar um polígono aqui, movê-lo aqui e manter este Agora, selecione essa ferramenta na opção de campo. Venha para o gradiente angular a partir daqui. Da mesma forma que vocês podem basicamente escolher a cor que desejam. Se eu quiser adicionar mais cores, posso adicioná-las aqui. Ok, vou adicionar mais cores. Vou adicionar mais alguns. É assim que podemos basicamente criar esse gradiente. Sim, espero que tenham entendido essa aula de como vocês podem criar sua própria paleta de cores Como você pode criar seu próprio gradiente de cores. OK. Particularmente na coloração, não existe essa coisa que você precise colocar essa, você precisa colocar essa cor específica para aquela coisa. Não há nada como tal. Mas eu sempre recomendo que vocês vejam o trabalho de outras pessoas, por exemplo, como elas estão usando suas cores em suas páginas da web para que vocês possam se inspirar. E é por isso que o quadro de humor é muito importante. Ok, agora vamos ao meu Chrome e vou mostrar a vocês de onde vocês podem tirar algumas das ideias de cores. Ok, se vocês estão usando seu gradiente a partir daqui, vocês podem basicamente ver que esses são alguns gradientes, ok, que estão sendo usados principalmente Vocês podem conferir quais são os gradientes que as pessoas basicamente usam e ver aqui vocês Agora, a pergunta que vocês podem ter é, ok, vejo que todas essas cores são boas e boas o suficiente. Mas o problema é como posso pegar essas cores se eu quiser essa cor específica aqui, como vou colocá-la no meu espaço de trabalho Ok, aqui vocês podem ver um código escrito. Eles são chamados de código de cores. E copiarei esse código de cores específico daqui e irei para o meu desfiladeiro X. Suponha que eu queira obter a mesma cor, posso colocar uma caixa aqui e acessar minha opção de campo ou a opção de colorir aqui. Vocês podem ver que eu tenho um código que eu disse que vou contar a vocês sobre isso mais tarde. Nesse caso, o que você pode fazer é simplesmente colar esse código de cores específico aqui. Ok, então vou deletar isso primeiro. Agora cole. Estou tendo algumas dificuldades aqui em colar isso. Está bem? Vou pegar essa cópia aqui no ovo T, podemos simplesmente colar aquela cor específica. Está bem? Ou eu só preciso pegar esse. Ok, não é a tecnologia de hash. Eu posso clicar aqui. Exclua isso. Agora eu posso colar isso. Ou eu também posso fazer isso manualmente. Tipo, se eu visse o quê, 99? Então eu vou chegar ao X, D, D nove. OK. E eu posso clicar em Enter aqui. Vocês podem ver a cor específica que eu tenho aqui, meu banco, E. Eu virei aqui novamente. OK. Vou clicar em Entrar aqui. Você tem uma cor específica. Vocês não podem simplesmente escolher qualquer coisa. Está bem? Esses são códigos, basicamente, se eu quiser criar uma paleta desse, eu posso realmente fazer da mesma forma que eu fazia antes Ok, venha aqui, mude a intensidade. Talvez dois desses copiem este novamente, alterem a densidade deste para este. Venha aqui, pegue um. Eu tenho minha paleta de cores aqui. Ok, eu posso usar isso como minha outra paleta de cores. Devemos sempre manter as cores que você está sempre usando. Espero que vocês tenham entendido o uso da coloração, como você pode basicamente colorir aqui. Se você quiser agrupar isso, vocês podem vir aqui, clicar aqui e clicar em Grupo. Não. Se eu mover este, ele se moverá de acordo. Está bem? Essa é a paleta de cores Eu também posso nomeá-lo. Ok, a partir das caixas eu posso dar um nome a esse arquivo. Está bem? Agora, suponha que eu tenha essa cor específica aqui. Está bem? Venha para a opção de preenchimento. A partir dessa opção de preenchimento, posso basicamente escolher essa. Está bem? Eu tenho isso a partir disso, eu posso realmente salvar essa cor. Está bem? Se eu clicar neste e vir aqui, ele será salvo. Essa paleta de cores específica será salva. Trata-se de colorir aqui nesta aula. Na próxima aula, vou contar vocês como você pode brincar com imagens e quais são as diferenças de usar imagens na criação de sua própria página da web ou no desenvolvimento de seu próprio design móvel. Ok, então nos vemos na próxima aula. Até lá, cuide-se e adeus a todos. 12. Imagens no Adobe Xd: Olá a todos e bem-vindos a mais um capítulo do tutorial OBX Ok, então aqui, enquanto estamos aprendendo o design de UX, estamos no final deste tutorial. E depois disso, mostrarei a vocês um projeto de como vocês podem criar seu próprio design. Ok, eu já mostrei vocês sobre o aplicativo móvel, como você pode obter uma estrutura baixa de cinco fios. Agora você pode preenchê-lo de acordo com você mesmo. Recomendo muitos trabalhos , como eu fiz. Mas eu vou mostrar a vocês um projeto também e vamos dar a vocês projetos de classe também. Ok, aqui agora vamos aprender como você pode usar imagens. Está bem? Este é nosso último capítulo, que é o capítulo número 13. Está bem? Imagens. Aprenderemos como você pode mascarar, como usar sua ferramenta de caneta ao usar imagens Vamos começar com essa aula aqui novamente, no mesmo espaço de trabalho. Agora, como você pode ver, estou aqui neste espaço de trabalho Então, agora vou tentar fazer o upload de algumas imagens daqui. Vou para a opção de importação. Da importação, irei para o arquivo de recursos, ok, ou irei para algumas das minhas capturas de tela que tenho aqui Eu vou vir aqui e essas são as poucas imagens que eu tenho, ok? O mais básico é que você pode simplesmente arrastar e soltar. Caso contrário, você pode simplesmente importar. Mas o problema da importação é que vocês podem ver que ela vem em tamanho total aqui, ok? O tamanho é bem grande aqui, ok? Como vocês podem ver. Se eu diminuir o zoom para que vocês possam ver, esse é o tamanho da imagem. Mas o que eu posso fazer é simplesmente diminuir o tamanho da imagem a partir daqui. Suponha que essa seja a página da web. Posso diminuir o tamanho adequadamente e posso colocar este aqui. Está bem? Antes disso , vou diminuir o tamanho. A partir daqui. Eu posso mudar do meu teclado e ele será redimensionado de acordo Ok, suponha que se eu mantivesse essa no topo e agora eu selecionasse essas duas camadas. Agora, o que posso fazer é selecionar essa camada aqui e enviá-la para trás. Agora eu posso diminuir o tamanho disso aqui. Eu tenho isso aqui. Eu também tenho minha imagem. Bem, eu não consigo ver agora. Essa é uma maneira de fazer isso basicamente. Está bem? Você pode simplesmente tirar qualquer uma das imagens que você pode ver. Altere a largura ou a altura a partir daqui. Você pode alterar o posicionamento da imagem. Está bem? Essa é uma forma de mascarar isso. Suponha que eu queira que essa imagem esteja aqui primeiro. O que eu preciso fazer é selecionar isso. Venha aqui agora para mascarar isso de novo, talvez eu tire uma imagem diferente daqui de cima, ok. Ou vá para a opção de importação de arquivo. Eu também posso clicar no controle de mudança e eu venho aqui, talvez eu queira essa imagem. Ok, a partir daqui eu selecionei esta imagem. Vou importar isso, mas o tamanho é muito grande. O que eu posso fazer é diminuir o tamanho novamente mantendo esta imagem aqui. Agora, o que vou fazer é selecionar essas duas camadas. Ok, minha caixa inferior também está selecionada. Agora, o que posso fazer é basicamente agrupar essa ou simplesmente desagrupar essas coisas também Ok, suponha que se agrupar agora eu tenha essa camada separada aqui. Você pode ver que isso não está acontecendo lá fora, ok. Essa é uma maneira de fazer isso. Aqui vocês podem ver, ok. Agora eu também posso diminuir o tamanho e tentar me encaixar aqui. Uma maneira básica de fazer isso está aqui. Eu tenho que selecionar essas duas camadas. Agora vocês podem vir aqui. E vocês podem selecionar e tentar fazer disso um componente. Ok, essa é uma maneira, ou eu posso simplesmente mascarar essa com uma forma. Se eu apenas aumentar esse, minha imagem também aumentará. Agora isso está dentro de uma forma, e da mesma forma que vocês podem trazer qualquer imagem aqui. Suponha que eu queira a mudança de controle I. Ok, eu tenho esta página aqui novamente. Eu virei aqui e quero colocar uma imagem. Eu posso selecionar Importar. E aqui vocês podem ver que vou clicar em Shift, diminuir o tamanho. Guarde essa imagem aqui. Mude, diminua o tamanho. Guarde este em algum lugar aqui. Agora podemos selecionar essas duas camadas e usar essa máscara com forma. A partir daqui. Basicamente, podemos realmente manter a imagem de como queremos. Se quisermos até esse ponto, posso colocar esse valor e você pode fazer o mascaramento a partir daqui Essa é uma maneira básica de mascarar e usar imagens adequadamente Está bem? Essas são algumas opções. E a partir daqui você também pode alterar a opacidade, ok? Se você quiser alterá-lo aqui, aqui, você tem essa opção. Está bem? Basicamente, você também pode alterar as fronteiras. Está bem? Suponha que eu queira pegar uma borda amarela, eu quero pegar essas três. Está bem? Eu posso fazer isso daqui. Espero que vocês tenham entendido como usar imagens. Há diferentes formas de usar imagens. Suponha que eu venha aqui e tire outra foto. Suponha que essa imagem daqui, controle C. Vou colar essa imagem aqui, ou vou tirar essa imagem daqui. Ok, nesta imagem em particular, o que eu quero fazer é com minha caneta para que primeiro eu aumente o zoom. Agora eu quero apenas manter essa forma aqui a partir daqui. Eu quero fazer a modelagem a partir daqui. Está bem? Eu só quero essa parte. Não quero o plano de fundo. Em vez disso, quero colocar um fundo verde aqui. OK. Eu posso basicamente fazer tudo isso aqui. Eu tenho isso, eu tenho feito até agora. OK. Agora, o que posso fazer é basicamente selecionar esse quadro específico. Eu posso delinear os traços, ok? Posso descrever esse traço específico aqui. Como você pode ver, basicamente posso selecionar a partir daqui. Eu posso realmente mudar a fronteira. Eu posso fortalecer a fronteira. Seis, sim, aqui vocês podem ver. E eu também posso tirar uma imagem específica. Ok, eu virei aqui, clique aqui, e você também pode selecionar Marcar para exportar. Você pode simplesmente selecionar uma parte específica da imagem se eu chegar a outra imagem. Então, deixe-me deletar este. Vou mostrar a vocês em uma imagem simples. Ok, deixe-me subir aqui ou aqui. Vou copiar essa imagem e colar aqui. Ok, aqui eu tenho uma imagem. Vou apenas aumentar o tamanho com minha caneta para supor que eu só quero, uh, isso. Está bem? Eu quero tirar isso apenas dessa imagem em particular aqui. Está bem? Esse é o esboço Está bem? Então, agora o que eu quero fazer é assumir a marca, ok? Eu só quero obter apenas essa opção de marca a partir daqui. Nesse caso, o que eu basicamente posso fazer é exportar este. Ok, esta opção específica aqui, é assim que podemos basicamente pegá-la e marcá-la e simplesmente removê-la e colocar qualquer outro plano de fundo aqui. Espero que vocês tenham entendido sobre imagens. Agora vou mostrar a vocês como você pode basicamente tirar uma imagem e como exportá-la. Suponha que eu tenha pego isso e marcado este como exportação. Venha aqui na opção de arquivo, exporte isso. E se quiser selecionar todas as pranchetas, você pode selecionar todas as pranchetas E você pode ver o tamanho da exportação. Vou dimensionar a página da web nesta prancheta. E onde eu quiser salvar isso, talvez eu o salve em meus downloads aqui, posso simplesmente exportar os ativos daqui. Agora, se eu for para esta página aqui, ok, então deixe-me vir aqui, vá para os downloads. Aqui você pode ver que minha prancheta está sendo exportada para minha mesa É assim que nós podemos realmente selecionar a prancheta específica Aqui você pode ver que todas essas páginas, quadro a quadro, estão sendo baixadas. Está bem? É assim que você pode basicamente fazer o download para obter uma prévia do seu trabalho. Ok, é assim que vocês podem, espero que tenham entendido todo esse tutorial, como você pode trabalhar nesse aplicativo específico e criar seu próprio design. Na próxima aula, mostrarei vocês, criando um projeto em uma página da web, como você pode criar sua própria página da web, como você pode colorir, fazer a prototipagem juntos Nos vemos na próxima aula. Até lá, cuide-se e adeus a todos. 13. Projeto de curso 1: Olá a todos, e bem-vindos novamente ao projeto da classe Atop X D. Aqui, este é o nosso projeto de classe número um. Agora, criaremos nossas próprias pranchetas de aplicativos móveis. E faremos o protótipo adequadamente. Então, basicamente, vocês precisam criar suas próprias pranchetas de design Está bem? Talvez crie de quatro a cinco e depois crie um protótipo desses de acordo Use o método de facilidade de facilitar, diferentes tipos de transições e também diferentes tipos de efeitos Ok, vamos ver tudo o que você precisa fazer nesta aula. Aqui, como você pode ver, o nome do projeto da turma é criar suas pranchetas de aplicativos móveis e fazer a prototipagem adequadamente Ok, você pode ver a descrição, o que eu escrevi. Esse é um aplicativo móvel no Adobe XD que envolve a criação de pranchetas, o design de interfaces de usuário e a prototipagem de interações Ele oferece uma variedade de ferramentas para ajudá-lo nesse processo e cria um aplicativo móvel fácil de usar e visualmente atraente Ok, aqui vocês podem ver quais são as diferentes etapas que vocês seguirão. Primeiro, você precisa coletar todos os ícones e paletas de cores necessários e diferentes tipos de tamanhos de fonte para sua Depois disso, você precisa criar seu próprio design em todas as pranchetas, ok Simultaneamente, você pode criar quatro pranchetas e acessar a opção de prototipagem e fazer a Eu mostrei a vocês onde a prototipagem ocorre. Se vocês tiverem algum problema, podem sempre consultar o tutorial mínimo, usar quatro pranchetas, ok, para criar o link Crie pelo menos quatro pranchetas e também use animação nas pranchetas, que incluem animação inteligente e também a animação básica A última coisa será copiar o link do seu arquivo específico e carregá-lo em nosso painel de projetos. Depois dessa aula, você terá um design de aplicativo totalmente funcional , que pode ser verificado na opção de visualização. E será um design bem definido, interativo e testado pelo usuário , que servirá como base para o processo de desenvolvimento. Ok, vamos ver como isso é feito. Como você pode ver, estou no meu espaço de trabalho e, agora, a partir dessa opção de protótipo, virei aqui depois disso Vocês podem ver que quando eu clico em alguma coisa específica aqui, esse tipo de ícone aparece, o que eu já mostrei no tutorial desta página. Não vou selecionar a página inteira, vou selecionar esse botão específico. Se eu clicar nesse botão específico, serei redirecionado para esta página Aqui, eu posso mudar a transição. Está bem? Vou dar animação automática aqui. Vou mudar o horário. Vocês podem fazer isso de acordo com vocês mesmos. Está bem? Vocês realizam várias ações. Se você quiser escolher qualquer arquivo de áudio, farei isso como Tap. Depois disso, esta página em particular, talvez eu selecione esta. E essa, vou vinculá-la à primeira página. Eu farei o mesmo. Essa. Vocês deveriam conectá-lo. Eu falei para vocês sobre diferentes atalhos que você também pode usar aqui Está bem? Então essa é uma maneira de fazer isso. Agora vou vincular esta página em particular, saiba mais opções aqui. Vou conectar este com esta página aqui. OK. Então, como você pode ver, eu fiz isso. Agora, o que vou fazer é que, como essa é a animação inteligente que já está no meu tutorial, mostrei a vocês como fazer a animação inteligente. Ok, venha aqui ou selecione o arquivo inteiro aqui. Depois disso, siga em frente. Neste caso, selecione a opção de horário, e eu não vou atrasar nada. Ok, depois disso, vou selecionar isso também, como toda a página a partir daqui, não qualquer ícone em particular. E eu vou largar este, talvez aqui eu leve dois ou 1,5 segundos. Ok, 1,5 segundos. Vou clicar em Enter aqui, darei animação automática. Basicamente, é assim que vai ficar e vocês podem conferir no painel. Ok, então deixe-me primeiro ir para esta página a partir daqui. Ok, então, como vocês podem ver, vocês podem ver as ligações entre isso. Se vocês quiserem mudar alguma coisa a partir daqui, podem fazer isso. Ok, vamos para esta página. Clique nessa opção de pré-visualização. Deixe-me clicar nessa opção agora aqui. Vai para aquela página aqui. Novamente, estou tendo algumas dificuldades em acessar esta página para atrasar isso. Agora, novamente, para a prototipagem a partir daqui. Agora você pode ver que eu vim aqui nesta opção. Se eu clicar nessa opção, vou apenas redirecionar aqui Ok, agora vamos ver. Como você pode ver a animação aqui também. Espero que vocês tenham entendido como basicamente fazer a prototipagem Mas esse design, como eu mesmo fiz, peço que vocês mesmos o façam. Esses designs específicos vocês podem colocar se tiverem algum problema. O que há na animação inteligente que mostrei a vocês tudo em detalhes na aula Crie uma página como essa. Depois disso, a última coisa que vocês farão é virem até aqui, clicando nesta opção de compartilhamento. Ok, tudo isso já está selecionado. Ok, você pode atualizar o link aqui. Ok, vocês não precisam atualizá-lo, criarei um link para vocês e vocês podem simplesmente copiar esse link e compartilhar esse link em nosso painel de projetos. Ok, aqui você pode simplesmente dar uma avaliação e colocar qualquer pessoa com o link ou apenas pessoas convidadas. É assim que vocês podem compartilhar seu trabalho comigo, que eu possa revisar seu trabalho. Ok, obrigado a todos por participarem deste tutorial de projeto de classe e espero que vocês enviem seu projeto assim que possível. Estou realmente interessado em ver seu trabalho e seu design de como você cria sua página da web. Ok, então nos vemos em qualquer próximo tutorial. 14. Projeto de curso 2: Olá a todos. E agora é a hora do nosso projeto de classe. E agora faremos nosso projeto de classe número dois aqui. Você precisa criar seu próprio quadro de humor e criar suas próprias paletas de cores Ok, então para isso primeiro, você precisa importar algumas imagens e, depois disso, criar suas paletas de cores Alguma pergunta que você tenha sobre isso, como fazer isso? Eu os abordei em meu tutorial. Vocês podem recomendar isso novamente para si mesmos. Ok, então vamos ver quais são todas as etapas que você precisa seguir neste processo. Aqui no topo, vocês podem ver o nome da turma. O projeto é criar um moodboard e criar suas próprias paletas de cores Ok, aqui você pode ver a descrição. Qual é a descrição de criar um quadro de humor e por que você não deve criar um quadro de humor e uma paleta Ok, então vocês podem ver aqui. Ter ferramentas integradas que facilitam a criação, gerenciamento e a implementação desses elementos de design de forma eficaz. Ok, o primeiro passo que você seguirá é que você precisa se inspirar em cores em diferentes sites que eu mostrei. Eu te mostrei sites diferentes, como Hads Awards, algo assim A partir daí, vocês podem obter suas inspirações de cores. Depois disso, você pode importar essas imagens na página. Posteriormente, você empilha tudo isso adequadamente e cria paletas de cores de pelo menos três E ajuste tudo isso em uma prancheta, exporte a prancheta selecionada para seu sistema e, depois disso, coloque sua prancheta em um Depois disso, você obterá um conjunto de imagens e alguns conjuntos de paletas de cores dentro da sua prancheta, o que será visualmente atraente A partir daqui, você também pode criar paletas de cores personalizadas, criando seu Ele aprimora o processo geral de design, o que leva a resultados de design mais coesos, visualmente atraentes e eficazes visualmente atraentes e eficazes para seu projeto Isso ajuda você a se manter organizado, inspirado e alinhado com os objetivos do seu projeto depois de criar esse quadro de humor específico e também algumas Ok, deixe-me agora mostrar a vocês como isso é feito. Agora estou aqui no meu espaço de trabalho e daqui vou para a prancheta Vou criar uma prancheta aqui. Ok, nesta prancheta, vou assumir diferentes tipos de formas Ok, deixe-me criar formas aqui. Ok, talvez mais assim. Na verdade, eu posso fazer isso aqui. E agora eu também posso duplicar essas camadas. Ok, a partir daqui eu posso simplesmente duplicar isso. Está bem? Vou duplicar isso também. Basicamente, é assim que posso duplicar ou, se quiser criar muitas outras caixas, posso criá-las adequadamente Ok, aqui vou colocar as paletas de cores. Talvez eu guarde isso aqui. Vou colocar algumas cores aqui e uma imagem, ou vou criá-la do lado de fora. Ok, não se preocupe. Com isso também, vou criar outra caixa retangular Agora, a partir daqui, o que vou fazer é a maneira mais básica de tentar importar primeiro as imagens aqui nesta caixa específica. Aqui. Ok, vou importar, se eu vier aqui, passo o arquivo, vá para os arquivos de recursos. A partir daqui, você pode tirar imagens diferentes. Ok, você pode baixar as imagens. Eu tenho seis imagens por enquanto, se eu importar essa, eu tenho todas essas imagens aqui na minha caixa. Ok, se eu diminuir o zoom, vocês podem ver aqui, há todas essas imagens que eu tenho aqui. Basicamente, o que posso fazer é selecionar uma imagem específica, reduzir os tamanhos. Então vocês podem realmente ampliar esta imagem e depois trazê-la aqui no quadro de humor. Ok, suponha que se eu ficar aqui, se eu simplesmente subir aqui, vocês terão a prancha aqui em algum lugar. Eu criei um quadro. Caso contrário, vou criar outra prancheta a partir daqui. Talvez eu ainda selecione o tamanho da prancheta. Agora eu posso simplesmente colocar essas imagens aqui. Talvez diminua o tamanho. Todas essas imagens que eu tenho aqui, eu posso guardar assim. Todas essas molduras nas quais eu tirei minhas inspirações de cores, eu também posso aumentar o tamanho delas, de acordo com o que eu quero aqui Além disso, tenho imagens diferentes, que posso colocar aqui. Ok, diminua o tamanho. Venha aqui nas esquinas. E diminua o tamanho a partir daqui também. Eu posso importar mais imagens. Suponha que eu queira importar aqui todo esse quadro, que eu criei. Está bem? Todo esse quadro. Eu posso selecionar esta moldura a partir daqui, e posso colocar esta também. Ok, eu posso fazer isso, mas agora vou apenas dilatar isso aqui Vocês podem ver que eu tenho coisas diferentes aqui, então eu posso movê-las para lá também. Ok, as diferentes opções aqui, você pode ver, são imagens em tamanho real que eu basicamente posso copiar para mim também. Vou manter este aqui em um canto. Talvez eu aumente o tamanho deste também. Selecione as coisas extras e coloque-as de lado em algum lugar aqui. Talvez você possa aumentar o tamanho assim. Você pode colocá-lo aqui. É assim que você pode criar um quadro de humor para si mesmo. Agora vamos tentar entender como você vai criar uma paleta de cores Ok, venha aqui, selecione uma caixa. Suponha que você queira se inspirar em cores a partir daqui. Acesse a ferramenta de conta-gotas aqui. E com a ferramenta conta-gotas, selecione essa cor da mesma forma aqui Então copie isso. Agora venha aqui na caixa de campo e altere a intensidade da cor, da mesma forma. Repita esse processo de quatro a cinco vezes. Agora selecione esta caixa aqui e altere a intensidade um pouco mais. Está bem? Novamente, venha aqui, selecione esta caixa, vá até esta e altere a intensidade. É assim que vocês podem basicamente mudar a intensidade. Quantas vezes vocês quiserem, vocês também podem fazer isso. Está bem? Suponha que eu queira mais cores claras em comparação com isso. Venha aqui e vá para algum lugar aqui. É assim que você pode criar suas próprias paletas de cores. Vocês criam essa paleta de cores, três delas, ok? Como você pode ver, aqui estão cores diferentes. Você também pode experimentar cores diferentes. É assim que você pode criar seu próprio quadro de humor. A última coisa é selecionar os dois quadros aqui. Depois disso, venha aqui, vá para a opção de arquivo. A partir daqui, vá para exportar e selecione o selecionado . Exporte-os. Como você pode ver, ele será exportado. Agora, se você for ao sistema, se você acessar a opção de downloads aqui, vocês podem ver, ok, primeiro acho que preciso agrupar isso. Ok, vou agrupar isso. Selecione este único quadro de humor. Agora eu posso marcar este para exportar um aqui. Exportar, selecione um. Então, é assim que você pode basicamente exportar sua prancheta. Aqui, de volta. Está bem? E aqui você pode ver que eu tenho minha prancheta, então é assim que vocês podem pegar exportar sua prancheta e também sua paleta de cores da Ok, então, como você pode ver aqui, eu tenho as paletas de cores Agrupe os selecionados e apenas os selecionados. E aqui, é assim que vocês podem basicamente exportar. Sim, eu também tenho as paletas de cores, então vocês podem enviar seu trabalho assim para mim e colocá-lo em nosso painel de projetos E ficarei muito feliz em revisar seu trabalho e dar a vocês as instruções adequadas. Ok, até lá, cuide-se. Todos, espero ver todos vocês no próximo tutorial. 15. Projeto de como fazer um design de página da web: Olá pessoal, e bem-vindos a todos em mais um tutorial do Adobe XD. Então, esta será a última lição basicamente em que será apenas uma aula de projeto. Eu contei a vocês tudo sobre o X D, como você pode usar o aplicativo específico, como você pode começar com o design de UI UX. Então, aqui nesta aula, vou mostrar vocês do zero como criar uma página web de design. Vou mostrar a vocês tudo isso. E vamos começar com a aula e começar a criar uma página da web. Bem, novamente na mesma página, ok? E agora, a partir daqui, vou criar uma arte. Está bem? A partir daqui, selecionarei a prancheta e, como você pode ver, tenho um tamanho de webdectop diferente Vou selecionar o tamanho 1920, 5.080 a partir daqui e movê-lo para algum lugar Ok. Sim, esse é bom. Agora, a maneira mais básica de selecionar uma imagem. Ok, para isso eu salvei uma imagem. O que vou fazer é cobrir esta página com uma imagem, depois escreverei minhas coisas e as editarei de acordo com mim mesma. Ok, a partir daqui vou para a opção de importação. Importar. Vou acessar meus downloads. Dos downloads, eu baixei uma imagem de pixels. Vou colocar esse aqui com meu turno. Vou diminuir o tamanho dessa mudança de imagem em particular aqui, vou diminuir o tamanho. Ok. Eu tenho essa moldura em particular aqui. Como você pode ver, eu tenho isso aqui. Ok. Eu posso basicamente diminuir o tamanho agora, se eu quiser. Ok, mas vou continuar até aqui. Agora, veja, a camada desta está pronta para eu começar meu trabalho aqui. Ok, talvez eu selecione isso se eu quiser torná-lo um componente ou se eu quiser editar no Photoshop, eu posso fazer isso Ok, eu posso basicamente trabalhar com isso também. Se eu quiser movê-lo, posso simplesmente movê-lo de acordo com mim mesmo. Ok, agora o plano de fundo da minha página da web está pronto. Agora, o que eu preciso fazer é editar essa página específica aqui. Para isso, o que vou fazer primeiro ir para a caixa de texto aqui na caixa de texto, vou criar uma caixa de texto específica aqui onde vou colocar o que vou escrever Suponha que aqui eu venha e aumente o tamanho. Vou dar 30 e entrar. Ok, eu vou voltar aqui. Ferramenta de seleção. Com essa ferramenta de seleção, eu tenho esta página aqui, crie uma caixa de texto. Como devo nomear esse? Ok, deixe-me nomear esta caixa 45 lar para todos. Eu tenho essa página crítica aqui. Clique aqui e agora altere o tamanho a partir daqui. Suponha que eu queira pegar 45, e aqui eu a pego nesse tamanho. Também posso calcular o tamanho a partir daqui, ou posso aumentá-lo a partir daqui. Ok, se eu vier aqui, vou aumentar o tamanho da caixa. Selecione esse texto novamente. Agora, o que vou fazer é, a partir daqui, clicar em Enter, selecionar. Isso basicamente depende de muitas coisas de como você deseja. Vou colocá-lo no centro. Agora eu quero mudar o tipo de texto. Ok, o estilo que eu quero mudar. Ok. Talvez eu pegue alguma coisa. Vou pegar o Collaborate básico. Eu gostaria de manter meu trabalho bem simples. Ok, então talvez eu use o negrito em itálico e mude o tamanho para 90 Sim, eu preciso aumentar o tamanho da caixa também. A partir daqui, selecione isso. Eu tenho esse aqui. Selecione esta e escolha uma cor de acordo com você. Ok, suponho que eu vá. Uh, alguma coisa que acontece com aquela cor específica aqui. Ok, vou pegar essa cor, suponha que eu também selecione a borda dessa cor como vermelha ou algo escuro. Mas aqui vou mudar a borda para duas e clicar em Enter aqui, você pode ver que o logotipo está pronto aqui. Agora eu posso colocar imagens diferentes ou tipos diferentes de ícones se eu quiser colocar ícones. Eu vou novamente para este aqui. Então, no localizador daqui, posso pegar vários tipos de ilustrações, quantos adesivos Ok, talvez eu digite em casa. Vou clicar aqui. Aqui você pode ver que há muitas três animações em D que eu posso fazer e nenhum link para voltar E eu quero os gratuitos daqui. Pode levar algum tempo para carregar aqui. Como você pode ver, eu posso escolhê-lo adequadamente. Suponha que eu queira pegar este, mas estou procurando os gratuitos. Vou até as ilustrações da opção de adesivos. É assim que basicamente podemos ficar bem. As imagens, mas eles estão tentando me cobrar uma caixa aqui, mas eu quero uma versão gratuita disso. Ok, vou pegar esse. Estou baixando o arquivo agora. Eu baixei. Volte para o meu X D. Venha aqui a partir disso, eu vou importar este aqui. Vocês podem ter isso. Ok, talvez com o Shift eu possa aumentar o tamanho deste. Ok, vou selecionar isso e trazer isso aqui. Ok. E a partir daqui, o que posso fazer é selecionar o tamanho da borda como dez. E eu vou clicar em Enter aqui. Você pode ver que eu tenho um ícone aqui. Ok, eu seleciono isso aqui e vou apenas agrupar este. Eu tenho isso agora aqui. Esse está pronto. E tudo que eu quero colocar aqui, ok, se eu quiser colocar alguma imagem ou curtir imagens diferentes sobre o grupo. Ok, eu posso colocar aqui, suponha que eu queira colocar como o menu ou algo parecido. Novamente, crie a caixa de texto ou simplesmente traga sua caixa de texto aqui. Crie uma caixa de texto aqui. Vou diminuir isso para 30. Vou clicar em Enter aqui, vir aqui e escrever Menu. Agora, o que eu vou fazer é com esta, eu posso criar caixas diferentes. Está bem? Suponha que, com Al, eu crie uma caixa diferente aqui. Suponha que eu queira ter cinco caixas aqui. Como cinco opções, ok? Aqui, vou seguir em frente, mas mais tarde explicarei como vocês podem, basicamente, aqui. Eu tenho cinco opções no topo aqui, ok? Agora o que vou fazer é escrever, ok, primeiro escreverei para nós, no próximo escreverei um trabalho. Então eu vou para este menu e nós, o que devo escrever aqui sobre o nosso trabalho? E escrevemos aqui eventos. Eu virei aqui e escreverei, ok, todas essas opções são bem diferentes aqui. A última coisa que vou escrever é se juntar a nós. Estou tentando criar uma página de ONG aqui, ok? Vou me certificar de que o espaçamento entre tudo isso seja bastante apropriado, ok? Vou manter um bom espaçamento entre tudo e cada um . Aqui eu tenho. Também estou me alinhando no mesmo lugar. Ok. Sim. Como você pode ver agora, eu tenho um bom espaçamento entre eles e eles podem entender que essa é barra de menu a partir da qual eles podem basicamente contornar Ok, eu terminei com este e agora posso criar a partir daqui. Quero dar um resumo do que se trata. Posso usar uma legenda se eu vier aqui e quiser criar outra caixa aqui Então, vou criar uma caixa de texto aqui. Agora, nesta caixa de texto, eu escrevo, vou escrever, inspirando mudança e esperança Esse vai ser meu subtítulo, ok? Ou o lema daqui. Vou apenas redimensionar este talvez para 60. Vou clicar em Enter Now, também posso mudar a cor daqui. Suponha que eu queira um contraste dessa cor e também queira verificar a borda. Ok, talvez a fronteira. Vou pegar algo verde. Vou mudar esse traço para dois, está bem. Ok. Vou manter este aqui com minha ferramenta de seleção. Vou selecioná-lo e colocá-lo adequadamente. Agora, eu também posso criar uma caixa aqui. Ok. Uma caixa por uma caixa para pesquisa. Ok. Ou eu, qualquer ícone. Acesse o localizador de ícones aqui e eu criarei um botão de pesquisa aqui Ok, eu virei aqui. Como você pode ver, eu tenho botões de pesquisa diferentes aqui. Eu posso pegar um daqui, posso fazer isso e, novamente, voltar para o meu arquivo XD a partir daqui, posso basicamente colocá-lo em algum lugar aqui. Ok, vá para o arquivo de importação novamente. A partir daqui, vou importar isso e reduzir este. Desta vez, às vezes é muito difícil simplesmente mudar isso. Vou apenas mover este em torno desse círculo em particular aqui. Agora eu posso simplesmente diminuir o tamanho disso. Sim, eu tenho. Sim, este é o botão de sobretensão aqui. Basicamente, posso colocar algumas imagens dessa ONG em particular Está bem? O nome da ONG é o lar de todos O slogan é inspirador de mudança e esperança. Ok, agora, se eu quiser criar uma página, suponha que aqui eu queira criar caixas específicas. Como se eu quisesse que eles preenchessem seus nomes. Aqui, ok, aqui. E a mesma caixa. Vou duplicar este. Ok, venha aqui, verifique a ferramenta de seleção. Clique sobre isso. Essa. Este aqui você pode selecionar. Vou pegar outra caixa aqui, e aqui vou escrever com minha caixa de texto aqui. Vou escrever Don. Ok, selecione esse texto específico. Com isso, vou trazer esse aqui. No meio. Eu também vou mudar a cor. Ok, talvez eu use a cor preta. Eu não quero nenhuma fronteira. Ok. Eu quero que isso seja amplo. Vou manter esse aqui. Talvez eu possa simplesmente aumentar para ousado. Agora vou copiar a mesma caixa aqui. Ok, agora vou selecionar isso. Com este, eu vou trazê-lo aqui. Aqui, aqui. Então, basicamente, eu posso colocar assim. Está bem? Então, a partir daqui, agora vou digitar o nome aqui. Vou digitar número de telefone, valor, endereço de e-mail, e-mail. Ok. Então eu tenho esse aqui, pessoal, podem ver que minha página da web está pronta aqui. Ok. Posso adicionar mais algumas coisas aqui, nos doar a partir daqui Você pode ver que eu tenho as opções de texto aqui, mas se eu usar o negrito Metálico aqui, você pode ver que basicamente ficará assim Ok. Aqui você pode ver que minha página da web está quase pronta, mas eu quero colocar alguns dos botões aqui. Ok. Eu voltarei aqui novamente. Ok, aqui eu quero o botão de login, faça login ou vou ver qual fica melhor. Ok, talvez eu possa pegar esse. Este parece muito bom. Vou baixar o formulário SVG aqui. Venha para o meu X aqui. Agora vocês poderão ver isso. Vou importá-lo novamente. A partir daqui eu vou. Como você pode ver aqui, eu tenho esse botão específico. Ok. Clique em Shift, e depois de clicar em Shift, vocês podem vir aqui um pouco. Selecione aqui. Depois de clicar neste, você será direcionado para outra página aqui. Ok, então espero que vocês tenham entendido. E agora eu também posso importar algumas das imagens. Talvez eu coloque aqui e escreva nossa campanha. Selecione isso, coloque isso em algum lugar aqui. Mova este, um pequeno top embaixo deste. Vou adicionar algumas das imagens. Ok, aqui, eu quero adicionar algumas imagens para isso, vou selecionar esta caixa específica aqui. Primeiro, vou duplicar essa caixa novamente. Ok, aqui eu também selecionei uma caixa específica aqui novamente. A partir daqui, vou alinhar isso com a mesma linha aqui. Venha aqui, vá para a opção de importação. A partir da importação, vou importar algumas das imagens. Ok, a partir daqui, novamente, selecionarei suponha esta imagem. Vou importar essa, mas a imagem é muito grande. Com meu turno, diminuirei o tamanho da imagem e também importarei outro arquivo. Eu deveria ter feito isso de uma vez, mas talvez eu tire essa foto. Vou importar este aqui. Ok. Sim, eu tenho essa imagem. Vou tentar trazer esse aqui e esse aqui. Agora, eu novamente amplio meu local de trabalho aqui. Agora, como você pode ver, eu tenho as duas imagens, mas o que eu quero fazer é alimentar isso por dentro. Está bem? Suponha que eu tenha isso e esse. Agora, o que eu posso fazer é talvez eu selecionar isso, isso juntos. Quero selecionar os dois juntos. Nesse caso, o que eu puder fazer, eu virei aqui, clique aqui. Vou fazer deste um grupo. Bem, eu tenho aqui duas imagens, como você pode ver no meu plano de fundo. Também tenho imagens. O que eu posso fazer aqui é, ok, deixe-me deletar este. Em vez de colocar minhas imagens dentro desta caixa em si, se eu vier aqui, agrupe esta, e agora eu posso selecionar, excluir esta. E selecione isso. E exclua este também. Ok, esta será a última etapa em que colocarei tudo e estarei aqui. Ok de novo, venha aqui. Vá até a opção de importação. Nas opções de importação, selecione essas duas imagens. Importe-o. E, como você pode ver, vou diminuir um pouco o zoom. E agora eu posso simplesmente selecionar as imagens de acordo. Suponha que eu só queira selecionar essa imagem aqui. E agora eu quero diminuir o tamanho dessa imagem em particular aqui. Está bem? E da mesma forma que eu quero diminuir o tamanho dessa imagem também. Ok, agora vamos vir aqui. Vamos colocar essa imagem com minha ferramenta manual. Eu virei aqui e, com o velho, aumentarei o zoom. Mova isso para cá. Você pode ver que eu tenho essa imagem aqui. Ok. A partir daqui, basta clicar em Shift, posso basicamente mover essa imagem onde basicamente quero colocá-la. Suponha que se eu quiser colocar essa imagem aqui, eu possa colocar isso. E eu também tenho outra imagem aqui. Ok, vou trazer essa imagem em particular aqui também. Vocês podem ver aqui. Eu também tenho a imagem aqui, então vocês podem ver que eu posso basicamente alterar ou aumentar o tamanho das imagens. Sim, agora minha página da web está pronta. Como vocês podem ver, criei uma página na web para ONGs Ok. Então, o nome da ONG é o lar de todos e esse é o lema e essas são algumas das imagens de sua campanha E aqui você pode doar, dar seu nome se quiser saber alguma coisa Então, é assim que você pode basicamente fazer web design. Ok, então espero que você tenha entendido da maneira mais fácil. E agora a última coisa que você vai fazer é vir aqui e você pode basicamente agrupar este. Se eu mover essa agora, ela se moverá toda de uma vez, ok? Então, se eu selecionar isso aqui, como você pode ver, uma vez que eu seleciono este e venho aqui, você pode ver que existem grupos diferentes. Está bem? Este é o grupo um, grupo quatro, ok? Aqui você pode ver que existem diferentes tipos de coisas aqui. Esta é a página da web em que eu estava trabalhando. Vou deletar este daqui. Este é o quadro de arte. Espero que vocês também tenham entendido tudo sobre essa aula. Por fim, mostrei a vocês como criar nosso próprio design de si mesmos ao criar uma página da web. Ok, eu mostrei a vocês a maneira mais simples de como vocês podem realmente começar a fazer seu design. Espero ver todos vocês no projeto da turma, e eu dei alguns projetos a todos vocês. E espero recuperá-los de todos vocês, ok. Que eu possa analisá-los e enviar feedback sobre como vocês podem fazer isso. Ok. Então, acabei página da web bastante simples aqui. Vocês podem realmente aprimorar isso, usar algumas das três animações em D. E é assim que você pode ver outras páginas do site e vê-las adequadamente. E eu mostrei a vocês um protótipo para que vocês também possam fazer prototipagem criando mais Ok, então se vocês estão enviando mais páginas, não tenho nenhum problema em verificá-las. Ficarei muito feliz que vocês tenham enviado. Até lá, cuide-se e espero ver todos vocês em qualquer outra aula. Se vocês tiverem algum problema em relação a este tutorial, se não estiverem entendendo nada, toda vez que puderem entrar em contato comigo, eu estarei lá para ajudar vocês. Cuide-se, pessoal, e adeus.