Adobe XD para iniciantes: design web

1. Introdução: Olá a todos, e bem-vindo ao meu novo curso Skillshare para o Adobe XD começa. Por todos. Meu nome é Sam Harrison e eu dirijo um negócio de web design e desenvolvimento baseado no Reino Unido. E neste curso, quero ensinar a você como criar sites usando o Adobe XD em breve os principais pontos que abordaremos ao longo deste curso são como usar todas as diferentes ferramentas de forma. Como usar um vídeo importante e arquivos Lottie. Como usar vários atalhos de teclado diferentes, a velocidade do seu processo de trabalho e como geralmente obter o melhor resultado ABX day para tornar seu fluxo de trabalho o mais suave possível. Maneiras que até o final deste curso, você terá uma boa compreensão de como usar o Adobe XD. Nosso projeto de classe é basicamente onde criamos uma landing page para qual você pode começar a construir sobre o conhecimento adquirido para o seu próprio trabalho. Então, se você está apenas começando e quer aprender a usar um programa específico de web design como o Adobe XD. Este curso definitivamente ajudará você a começar. E como nível de iniciante, tipo de entrada na ferramenta e fazendo você começar a criar sites. Ok, então se isso soa bem para você, vamos começar. 2. Aprenda os fundamentos: Ok, então para a primeira parte deste curso, vou te levar por vários aspectos diferentes do dia, no dia seguinte. E basicamente eu sou a linguagem que te acostume com a interface e o fermento para reformular o milho, como usá-los. Agora, há um bom número de coisas diferentes para aprender sobre o TDAH e nem tudo está codificado neste curso. Estou meio que direcionando especificamente coisas para fazer com o web design e todas as coisas que acho que você precisará aprender a usar o XD e como começar a criar sites usando essa ferramenta. Agora vamos cobrir tudo em termos de design gráfico. Estamos usando formas e meio que manipulando-as ao redor? Mas este curso visa especificamente começar a criar sites com o XD. Então, para os primeiros vídeos, vamos começar a usar pranchetas de arte, como manipular pranchetas, como manipular diferentes formas, como importar imagens e como importar um vídeo em Arquivos Lottie. Ok, então vamos começar com o primeiro conjunto de vídeos. 3. : Ok, então depois de se inscrever e fazer login, você enfrentará esta tela inicial. Então, antes de tudo, vamos falar sobre nossos painéis e tamanhos de tela e alguns fundamentos básicos de como usar a manobra de certos elementos dentro do Adobe XD. Então, antes de tudo, você receberá quatro opções diferentes para diferentes tamanhos de tela. O primeiro é muitos tamanhos diferentes de telefone e tablet. Então você chama novamente popular. Eu encontro tamanhos gigapixel, iPad. A partir daí, temos diferentes tamanhos de desktop. Então você tem HD, você tem 1366 por 76, oito, 1280 por um 100. E novamente, para que você possa escolher um padrão predefinido para diferentes tamanhos de tela. Você também tem diferentes tipos de mídia social de tamanho de tela. Então, se você estiver criando como uma capa do Facebook, ela não tem uma espécie de predefinição ou a cada ano a partir de agora também teremos isso lá. Bem, a sensibilidade será um dissidente e criará sua própria coisa na criação de tamanho personalizado. Mas o que vamos hoje, já que vamos nos concentrar na criação de sites neste tutorial, vamos clicar na Web 1920 por 1080. E isso vai nos dar nossa prancheta. Então, novamente, apenas para reiterar, pense no seu quadro de arte como sua tela em branco para seus projetos. E isso é basicamente apenas o Canvas que você pode trabalhar. Então, um preenchimento com conteúdo. E você pode arrastar a tela ao redor apenas clicando nela. Você mesmo. Mantenha pressionada sua barra de espaço e ela lhe dará o símbolo de mão pequena onde, o que significa que você pode movê-lo. Se você tiver um trackpad, você também pode simplesmente apertar e ampliar. E por falar em zoom, se você quiser ampliar um lugar específico no quadro de arte, você pode fazer isso mantendo pressionado Controle ou Comando se você estiver em um Mac e ele passará o mouse se você rolar a roda do mouse para onde quer que o mouse esteja atualmente residindo. Então, se eu for para o canto superior direito, mantenha pressionada a tecla Control ou Command e, em seguida, amplie a minha roda de rolagem. Você vai rolar até aquele ponto em que o mouse está. Então isso é uma coisa muito útil que você usará bastante ao longo do tempo com o XD. Então, esses são os fundamentos do que é uma placa de arte. Se ele quiser começar a mudar o tamanho. Então você muda de ideia. Você não quer que seja 1920 por 1080, você pode alterá-lo. Você pode simplesmente arrastar isso como quiser quando estiver selecionado. Obviamente, se você estiver criando um site, precisará de mais imóveis de tela desnecessários em vez de criar uma nova prancheta para cada seção ou você tem que fazer é apenas arrastar isso baixo e ele irá para baixo até agora como você quer que ele vá. Você pode ver que temos esse tipo de linha pontilhada azul. Você não precisa necessariamente brincar com isso. Isso basicamente é apenas deixar você saber a altura da janela de visualização. Então, o viewport Heights, neste caso, extra 1920 por 1080. Então, basicamente, pense nisso como sua seção de heróis do site. E tudo abaixo aqui está abaixo da dobra do seu design. Portanto, a altura da janela de exibição é 1080. Então é basicamente com isso que estamos trabalhando. Mas, novamente, você pode mudar isso se quiser. Mas digamos que também você queira trabalhar em vários projetos de uma só vez. Você também pode fazer isso. Então, digamos que você queira ver a lista de bolas que acompanham no dia seguinte. Se você clicar na letra a no seu teclado, você verá, no lado direito, agora temos todas aquelas coisas que tínhamos nas estrelas, nas fazendas de queijos. Se você quiser adicionar outra prancheta, você pode simplesmente clicar em uma e então eu vou tê-la ao lado dela de segurança e outra, você pode fazer o mesmo tipo de coisa novamente. Você pode se certificar de que, se você pressionar a letra a, ela lhe dará todos eles aqui e você pode escolher quantos quiser. Agora também há uma opção se ele quiser criar seu próprio tamanho, você pode fazer isso. Se você segurar a letra a, verá que o cursor mudou um pouco. Se eu deixar ir, se eu voltar da família quando ele vir agora atender ao ponteiro, se eu segurar um, você verá que o cursor mudou e isso me permitirá desenhar minha própria prancheta para qualquer tamanho que eu queira que seja. Então, novamente, eles são meio as principais maneiras pelas quais você pode controlar nossos conselhos. Mais uma vez, você pode ter quantos quiser. Você não está limitado, então quantos você pode ter. E, obviamente, mais tarde, se você estiver criando um site inteiro, você quer usar algum ponto a opção de protótipo, que permite que você basicamente vincule páginas juntas. Mais uma vez, vamos entrar nisso mais detalhes um pouco mais tarde. Mas, em primeiro lugar, queria apenas dar a vocês uma introdução básica de como nossos corpos funcionam, o que eles são e como você pode manipular folhas ao redor. Ok, então no próximo vídeo, o que vamos falar um pouco sobre como usar grades e como trabalhar dentro de um contêiner de largura máxima, o que será muito útil para projetar sites. 4. Layout de diagrama: Ok, então, em seguida, quero falar um pouco sobre como usar a grade de layout dentro do XD. Então, como estamos criando sites, maioria dos sites tende a ter um tamanho de contêiner. Então, se apenas tivermos uma olhada rápida em um site agora, veja o site Webflow. Você pode ver se eu passar o mouse no meu caso, tenho a vantagem aqui de que todo o conteúdo que você pode ver está chegando a uma largura máxima. Agora, este não é necessariamente o caso de cada projeto em que você terá acordado. Mas é bastante comum ver que a maior parte do seu conteúdo terá uma largura máxima para que ele não fique grudado diretamente na borda da tela. E se você estiver criando sites usando o XD, isso é algo que você vai querer tentar seguir. E você queria tentar fazer com que todos os seus projetos funcionassem dentro de um determinado tamanho de contêiner. Como escolhemos 1920 por 1080, você não gostaria de todo o conteúdo direto na borda da tela. Então, a maneira de fazer isso é usando a opção de grade aqui. Você realmente tem duas opções diferentes para isso. Você tem o que é chamado de opção de camada. E também temos quadrados. Então, quadrados, não vamos cobrir demais neste curso. Então, se novamente usar quadrados, é mais provável que você use isso para algo como criar ícones. Então você pode ter certeza de que eles são todos do mesmo tipo de XYZ. Mas, para este curso, presumivelmente veremos a opção de camada em que temos colunas. Então, se apenas diminuirmos apenas por um momento, você verá agora que selecionamos essa opção por padrão. Temos 12 colunas e temos algumas definições de dimensionamento para a largura e a largura da coluna. E nós temos esse tipo de 12 colunas aqui que atualmente são como uma cor de cauda. Você pode mudar a cor deles apenas ganhando seu seletor de cores aqui. Você pode fazer da cor que quiser. Pessoalmente, eu prefiro tê-lo como espécie de apenas um cinza branco. Obviamente, isso dependerá do tipo de esquema de cores do site que você tem e do que você está projetando. E, e que a ideia disso é que ele permite alinhar as coisas a certas colunas. Se você tem um design muito particular que tem que ser completamente mesmo em um certo aspecto. Isso é algo que você basicamente pode usar como guia para ajudá-lo a fazer isso. Agora, pessoalmente, muitas vezes não me vejo usando isso tanto quando se trata de ter 12 colunas. Pessoalmente, na maior parte do tempo, gosto de tê-lo para que eu possa ter um conjunto contendo uma largura como estávamos apenas discutindo. Então, em vez de ter 12 colunas, por que eu costumo gostar de fazer em vez de 12, eu apenas digito uma. E isso me dá apenas um grande tipo de quadrado cinza. E no momento diz que a Largura da Coluna é 1640, o que queremos é 1200. E isso nos dará uma largura máxima de 1200 pixels daqui para aqui, que vai ecoar algo semelhante ao que temos no site Webflow, tem a tela principal, que é claro é de largura total, vez que ele tem um fundo branco, mas o conteúdo é corrigido dentro desse contêiner máximo. E essa é a ideia do que estamos fazendo no momento. Portanto, este é basicamente um contêiner de largura fixa de 1200. E agora você pode começar a alinhar as coisas a isso. Se eu arrastasse um pouco do OEM muito brevemente, vamos chegar a isso em apenas um momento. Mas se eu apenas excluir isso e eu meio que imediatamente o cabelo você vai achar que vai querer encaixar nisso, que você espero que você possa ver se eu fizer isso de novo, se eu aumentar o zoom à medida que me aproximar dele, ele encaixe automaticamente para o lado. E isso será o mesmo para qualquer coisa que você joga. Portanto, é apenas uma maneira muito útil de orientar tudo dentro do seu design. Ok, então esses são os diferentes tipos de camada que você pode ter. Novamente, se você mudar de ideia, você sempre pode voltar. Então, você quer voltar para 12 colunas, você pode fazer isso. E, claro, ele terá essa configuração para você. Mas, novamente, pessoalmente, eu não gosto de tê-lo, pois uma coisa é uma espécie de coisa pessoal. Eles, você pode gostar de ter várias colunas para alinhar as coisas a mim pessoalmente na maioria das vezes eu me encontro apenas usando uma grande coluna que me permite alinhar meus legos ao seu conteúdo para uma largura máxima. Então esse é o básico de usar esse cordeiro, e é isso que vamos usar predominantemente ao longo deste curso. Agora, vamos dizer que você não quer ter isso o tempo todo. Então você pode ser um pouco distrativo. Você pode simplesmente se livrar dele. E você pode fazer isso usando, apenas clicando nisso novamente e ele se livrará dele. Mas às vezes, se você tem muitas coisas acontecendo e não pode necessariamente selecionar a prancheta. Então, o que você também pode fazer é usar um atalho de teclado, que será controle de turno e depois apóstrofo, e isso o trará de volta para se livrar dele, desloque o apóstrofo de controle novamente. Se você estiver em um Mac, será apóstrofo do Comando Shift, e isso fará o mesmo tipo de coisa. Vou me certificar de ter uma animação na tela para mostrar todos os diferentes atalhos de teclado medida que os uso durante todo o curso. Ok, então esse é o básico de usar a grade de layout. uma vez, brinque com ele você mesmo. Você meio que decide por si mesmo o que você mais gosta. E na próxima parte do curso, vamos começar a analisar todas as diferentes opções de forma que temos no XD. 5. Formas parte 1: Ok, então agora na parte divertida, vamos começar a olhar para todos os diferentes tipos de ferramentas de forma que temos dentro do XD. Agora vou passar por isso de cada vez e também mostrar como você pode controlar as maneiras de Gêmeos. Então, pouco antes de fazermos isso, eles só apontam que temos a ferramenta Selecionar. Portanto, a ferramenta Selecionar, novamente, como o nome sugere, permite selecionar coisas e essa é a opção padrão que você tem no dia seguinte. Agora, muitas vezes, sempre que você estiver usando algum outro tipo de ferramenta. Obviamente, o caso, você pode vê-lo aqui, na verdade mudou para como uma mira. Digamos que você não queira mais isso e queira voltar para a ferramenta de seleção. Obviamente, o que você teria que namorar, eu vou voltar para ele aqui. Ou você pode ver uma vez que eu passe o mouse sobre isso, ele diz Select e, em seguida, há a letra V entre parênteses. E isso basicamente significa que é um atalho de teclado. E, na verdade, temos atalhos de teclado para todas essas opções diferentes. Então isso é algo que você quer começar dando uma olhada e meio que se acostumando, para tornar sua vida um pouco mais fácil enquanto usa o XD. Então eu acho que o seleto, talvez de todos eles, seja aquele que você quer usar um atalho de teclado para o máximo, apenas para salvar você meio que fazendo algo e ficando velho jeito de cabelo e todo o caminho de volta. Agora, novamente, não é um grande negócio. Mas só para a velocidade é muito mais fácil, basta clicar na letra V e você verá que meu cursor mudou de idéia mudou de idéia, se eu voltar para o cabelo de duas vias, meu estojo é comumente em um se eu apenas digitar na TV, ele se livra dele e ele volta automaticamente para a ferramenta Seleção. Então, vamos nos livrar disso por enquanto, mas agora vamos até a ferramenta retângulo e vamos desenhá-la dentro de nossas placas de arte. Ou você tem o dia em que estava desenhando estes fechados mantenha pressionado o botão esquerdo do mouse. E então você apenas arrastará isso para o tamanho que você quiser. E, obviamente, como você esperaria, você pode manipular isso como quiser. Você pode alterar a altura e a largura da maneira que quiser. Agora, obviamente, isso é meio que eu meio que forma livre no dimensionamento desse retângulo. Se nos livrarmos dele, novamente, certifique-se de que ele esteja selecionado. Desta vez. Se mantivermos Shift pressionado e arrastar, você verá que ele criará um quadrado perfeito. Então, se você quiser algo que seja perfeitamente quadrado, mantenha pressionada a tecla Shift e isso fará isso. Obviamente, se você mudar de ideia depois, se você clicar na letra V para recuperar sua ferramenta de seleção, você pode começar a arrastar isso como quiser k. então, já que estamos neste primeiro aqui, Vou levá-lo através algumas opções aqui também. E, obviamente, há muitas dessas opções de repente agora apareceram, certo? Ela garante o trabalho através destes à medida que avançamos ao longo do curso, vai ser mais fácil demonstrar todas as diferentes opções em elementos particulares. Então, se o retângulo for, acho que vou mostrar que é o raio da fronteira e também como usar o preenchimento e a borda. Então, por padrão, no XD, tudo o que você tem, tudo o que você arrasta para a tela é que gerúndios realmente têm uma borda que você pode não necessariamente querer. Então, se você não quiser que ele tenha uma borda, você pode desmarcar. E, obviamente, no momento em que a cor de preenchimento e você pode dizer, Ei, é branco. Então, o que faremos é torná-lo preto por enquanto, para que possamos dizer isso. E também, eles serão obviamente momentos em que você não quer ter um retângulo ou quadrado em ângulo afiado perfeito. O que você pode fazer é obviamente afetar o raio fronteiriço. Agora, novamente, há algumas maneiras que você pode fazer é se aumentarmos apenas o forame, você verá aqui logo abaixo, nós temos essa opção. E se clicarmos nisso e arrastá-lo, você verá que ele está realmente curvando os cantos. Então, ao fazer isso, é realmente possível fazer tipo de elipses e círculos com essa ferramenta também. Mas se você não quiser fazer isso dessa maneira, o que você pode fazer é ir para essa opção aqui e depois digitar talvez 10. E isso vai se curvar f. Isso só se digitarmos algo mais extremo como um 100, você verá que é caótico por muito. Então você tem um tipo de microcontrolador no cabelo, e você também pode controlá-lo clicando e arrastando essa opção específica para lá também. Então, essa é uma maneira de criar a curvatura dos cantos de um quadrado ou retângulo. Outra coisa que vale a pena mencionar também. Se você quiser fazer um canto, você tem essa opção aqui. Assim, você também pode aplicar um raio diferente cada canto. Então, se quiséssemos dizer uma gordura, talvez apenas no canto superior esquerdo e no canto inferior direito, poderíamos fazer isso. Então, se quiséssemos talvez um 100 para este, você verá que é apenas doar para o canto superior esquerdo e também todos para afetar o canto inferior direito também. Se formos neste aqui, digite um 100, você diz que ele só afetou o canto superior esquerdo e os direitos inferiores. E isso permite que você novamente, mais controle sobre a curvatura de suas bordas. Ok, então é praticamente isso para a ferramenta retângulo. Mais uma vez, vamos entrar em tudo isso à medida que avançarmos. Então, vamos nos livrar disso por enquanto. E o que faremos a seguir é ir para a ferramenta Elipse em ambos os círculos. Então, o mesmo tipo de coisa se aplica se eu começar a arrastar. Você verá que eu posso controlar o tipo de forma que quer ser, não precisa ser um círculo perfeito. Pode, pode ser um mal como novamente, o mesmo tipo de coisa se aplica. Mas digamos mais uma vez, se quiséssemos ter um círculo perfeito, você teria certeza de que ele foi selecionado. E então você pressionará Shift e depois arraste. E não importa o quão grande nós o façamos, sempre seja um círculo perfeito. Ok, então novamente, as mesmas coisas se aplicam à ferramenta Elipse como com a ferramenta retângulo, você pode ter uma borda se quiser, veja o que você pode mudar a cor do. Você não pode ter borda e também pode dizer que essa será uma cor de preenchimento diferente. Então, vamos ver diferentes cores de preenchimento agora também. Então, atualmente, é branco, então podemos dizer, vamos torná-lo uma cor escura. Isso obviamente é apenas uma cor sólida por padrão. E, mas e se quiséssemos ter algum tipo de gradiente para isso? Então você também tem essas opções. Então você acabou de selecionar essa opção aqui. Em seguida, obtemos uma lista suspensa que diz cor sólida, gradiente linear, gradiente radial e gradientes angulares. Então, vamos apenas levá-lo por essas opções. Portanto, um gradiente linear lhe dará uma opção de ponta a ponta ou o elemento que você não tem tela. Então, se você quiser alterar as cores de ambos os lados, você pode realmente manobrar onde o gradiente é de até. Você não precisava ter isso certo dessa maneira de ponta a ponta. Você tem isso meio no meio. Você também pode adicionar gradientes no meio. Se você quisesse ver, então obtive três cores diferentes. Então, vou desmarcar isso só por enquanto. Mas para mudar a cor para isso, se seguirmos para a extrema esquerda aqui, vamos ter que talvez seja como um azul escuro. Então, no lado direito, você pode ver agora o que podemos escolher uma cor diferente e nós a teremos como uma cor de cauda. Então, são gradientes lineares. E, novamente, você pode manobrar isso como quiser. Você pode trocá-los por aí. Você pode fazer praticamente o que quiser com isso. Mas digamos que você, mais uma vez, queremos mudar o tipo de gradiente que temos e queremos um gradiente radial. Portanto, um gradiente radial é praticamente, como sugere, uma espécie de irradia para fora. E, novamente, você pode ter várias cores diferentes lá também. Então, digamos que quiséssemos ter talvez uma cor mais clara no meio. Teremos como um azul claro e do lado de fora onde quer que realmente fique mais escuro para que você possa ver isso lá. E você pode afetar a posição que você tem que pode torná-la mais ampla ou menor, dependendo do design que você teria. UM REINO UNIDO. Então, novamente, você pode ter vários tipos diferentes. Você deseja adicionar um, você pode escolher o paradeiro que aparece na linha. Você pode, novamente, já é algo óbvio. Assim, você pode escolher muitos tipos diferentes de gradiente como quiser. Então, vamos apenas desfazer isso por enquanto. Certo, e o último será um gradiente angular. Novamente, como o nome sugere, o tipo de cria uma base de gradiente em um ângulo. Então, novamente, assim como antes, você pode escolher todas as cores diferentes. Essa é uma cor muito diferente para essa, por isso é mais brilhante. Você também pode ter outro lá dentro. Então, se você quiser tornar este um pouco diferente, você pode dizer que este, por exemplo, novamente ser é torná-lo amarelo. Então, novamente, você tem um controle diferente sobre como esses diferentes gradientes funcionam. E há todos os tipos de infográficos que você pode fazer com isso. Acho que essa é a explicação básica de quais gradientes. Voltarei a isso um pouco à medida que vamos ao longo do curso. Então, por enquanto, o que faremos é nos livrar de nossa ferramenta de elipse e vamos dar uma olhada em nossa ferramenta de polígono. Então esta é a última das formas, por enquanto, vamos cobri-la. Em seguida, vamos cobrir a linha, caneta e os textos nos próximos vídeos. Então, para polígono, por padrão, temos um triângulo. Agora, novamente, isso é meio que eu meio que livre formando isso. Você pode criar qualquer tipo de forma arrastando-o para o que quiser. Assim como antes, se mantivermos Shift pressionado e depois arrastar, ele criará um triângulo equilátero, que significa, obviamente, todos os lados têm o mesmo comprimento. Agora, novamente, se você mudar de ideia, você pode. Obviamente, depois de fazer isso, torná-lo maior e menor. E você não está apenas preso a um triângulo também. Então você verá aqui o que temos é a quantidade de cantos que temos. A córnea é três colunas que criarão um triângulo se quisermos tê-lo. Quanto ao Tao do retângulo maior ou losango, podemos então sair do tipo de tamanho diferente que você quiser, hexágonos, octógonos, o que quiser. E isso cria todos os tipos de formas diferentes, como você imagina. O mesmo tipo de coisa aqui com a placa de um raio de canto, devo dizer. Isso era basicamente suavizar os cantos do objeto específico que você tem. Então, se voltarmos a talvez cinco apenas por enquanto, e vamos diminuir o zoom apenas um toque. Se eu selecionar um raio de borda para isso ou algo como 20, você verá que é tão suavizar as bordas um pouco na forma. Você também tem essa relação de stall dois. Então, se voltarmos a talvez algo como quatro, e então aplicamos uma proporção de estrelas a isso. Será algo como 50. Você verá que o que é feito é essencialmente criado uma estrela de quatro. E você pode alterar essa proporção. É se você quer que seja, então é mais extremo. E, novamente, você pode ter até 100% para que ele fique maior novamente. Então, novamente, brinque um pouco com ele e veja o que você inventa. E isso funcionará, é claro, para qualquer tipo de forma que você tenha. Então, se voltarmos para talvez 10 lados, você pode ver que isso mudou um pouco. Faça com que seja a menor porcentagem que você tem, quanto mais extremas elas são meio que as folhas integrais ficam essencialmente como se eu fizesse ainda mais massa do que 25%. Você vê que temos esse tipo de forma. Então, novamente, ele lhe dá muito e muito controle para todo o tipo diferente de forma que você pode criar com essa ferramenta. Então é muito, muito maleável e você cria muitas coisas interessantes com ele. Ok, então acho que por enquanto vai cobrir praticamente todas as diferentes formas que vamos usar para esta primeira parte do vídeo. O próximo vídeo que veremos usará a ferramenta de linha, a ferramenta caneta e também como obter texto na página. 6. Formas parte 2: Ok, então as próximas coisas que vamos ver serão a ferramenta de linha. Em seguida, vamos olhar para o temido Pentel e, em seguida, a opção da ferramenta de texto também. Mas vamos começar com a linha reta. Então, a ferramenta de linha e talvez muitas vezes seja usada tanto quanto talvez a ferramenta de caneta, porque com o lápis você tem uma espécie de flexibilidade de shopping no que você pode fazer com ele. Isso é literalmente apenas para desenhar linhas retas ou nem mesmo linhas retas, apenas linhas em geral. Então, se você quiser, na verdade, desenhar uma linha pode afetá-la como você deseja. Você pode movê-lo em torno de qualquer tipo de ângulo. Se você começar a desenhar outra linha e, em seguida, tente conectá-la até certo ponto, ela irá. Mas se aumentarmos o zoom, você verá que ele não está perfeitamente alinhado. Se você quer esse tipo de coisa, queremos meio que pontos de ancoragem um para o outro. Então você quer que uma linha se junte a outra. A melhor opção para usar é a ferramenta caneta, que chegaremos em apenas um momento. Então, realmente você quer pensar na ferramenta de linha para realmente desenhar linhas retas. Eles não se conectam necessariamente a outro. Se você quiser criar um tipo de e sim, certos tipos de ícones ou talvez, talvez através do tipo de coisa que você pode querer experimentá-lo com a ferramenta caneta. Você pode fazer isso e ver que as linhas estão nos informando quando algo está alinhado corretamente. Se eu apenas mover este também. Você vê agora todas essas linhas estão se alinhando adequadamente umas com as outras. E é basicamente assim que você usa essa ferramenta. Então, novamente, não tem opção de preenchimento para isso porque é apenas uma linha reta. Você pode, claro, mudar a cor das diferentes linhas que você tem. Um rei aumenta o tamanho da borda. Isso também se aplica a todos os itens aqui. Então, todas essas opções têm um pensionista, você terá as outras formas, bem como por tornar dez dos Omeka muito mais espessos. Você também pode ter um traço. Então, se digitarmos o número cinco, obteremos novamente uma perda de linhas tracejadas. A lacuna que podemos aumentar, bem como torná-la 10. Vai torná-lo mais espaçado. Então, novamente, todas essas opções, hey, você realmente as tem também para elipse retangular, e para polígono também. Portanto, essa é uma visão geral básica da ferramenta de linha. Em seguida, temos a ferramenta Caneta. A ferramenta Caneta. Agora, se você estiver familiarizado com o uso Photoshop ou estiver familiarizado com o Illustrator, estará bastante familiarizado com a forma como isso funciona. O lápis no XD funciona de uma forma bastante semelhante. Agora, a ferramenta Caneta pode ser um curso sozinho porque é muito complicado. Pode ficar muito complicado, especialmente se você estiver entrando no design gráfico e está criando muitos tipos diferentes de formas. Este curso não é realmente sobre isso. Então, vou apenas dar uma visão geral básica do que a ferramenta Caneta pode ser útil. Pense no lápis realmente como uma forma de unir várias linhas diferentes entre si que estão perfeitamente conectadas. Então, no meu exemplo anterior, você teria visto que quando eu conectei ou tento conectar as linhas juntas, elas realmente se uniram perfeitamente. Mas se aumentarmos aqui, você verá que esses realmente estão perfeitamente alinhados como uma espécie de lacuna estranha lá. Então, tudo isso é unido. E se você quiser criar e preencher isso, você pode adiar a forma. Então, no momento, temos apenas uma borda que está criando essa forma. Novamente, você pode mudar tudo isso para o que quiser que seja. Se você quiser se livrar da fronteira, você pode fazer que eu não a tenho apenas como um preenchimento. Você também pode fazer isso. Então essa é a melhor maneira de descrever como a ferramenta caneta funciona para unir linhas. Então você pode imaginar todas as formas malucas diferentes que você pode criar com esta, ela criou a forma e você volta para sua ferramenta de seleção. Você pode manipulá-lo como quiser. Algo que ainda não mencionei é a ferramenta de rotação. Então, você verá, à medida que passamos o mouse, obtemos um ícone que muda para rotação. Então, se eu voltar um pouco, você vê quando eu me movo para fora, ele muda para esse símbolo lá. Agora, se eu clicar, arrastar e girar, ele girará o item. Claro, isso também se aplica a todas as outras formas que temos também. Portanto, a ferramenta de rotação, você terá uma opção para isso para elipse retangular e para polígono também. Então essa é a visão geral básica de como criar formas diferentes com isso. Agora, onde fica mais interessante é se começarmos a criar curvas. Então, se você simplesmente continuar clicando e depois parando em certos pontos, ele criará linhas retas. Mas agora, desta vez, se eu clicar, se eu segurar, mude-o. Mas desta vez, se eu segurar e arrastar, ele trará uma curva ou uma curva de Bézier. Agora, novamente, isso pode ficar muito complicado. E o, basicamente, pensar nisso como uma forma de curvar linhas é a melhor maneira que posso descrevê-lo. E você pode imaginar todas as cores diferentes, formas que você pode fazer com isso. E como você manipula esse tipo de barra aqui manipulará a intensidade da curva que você tem. E como você pode ver, isso está apenas criando uma curva no lado esquerdo aqui. Se continuarmos, clico em outro lugar. Você pode dizer que ainda vai se curvar para o próximo lugar, bem como encontrado para juntar os opsins no meu cabelo. Podemos fazer isso. E então essa curva se alinhará com essa caixa lá. Se eu sair dessa ferramenta agora e você clicar novamente, vai voltar para as linhas retas. E então é basicamente assim que isso funciona. Agora, novamente, isso pode ser muito complicado. Eu não vou em muita profundidade para isso, mas vamos fazer isso mais uma vez só para mostrar a vocês. Então, se você segurar, dormimos a lápis. E então, se você clicar e, em seguida, ir para outro ponto e, em seguida, segurar. E então arrastar vai criar uma curva é a melhor maneira que posso descrevê-la. Então, se deixarmos ir e depois ir para o nosso primeiro aqui e depois nos juntarmos a isso. Ok, podemos fazer isso clicando novamente. E então criamos uma curva. Estou criando esse tipo de forma curvilínea. E se chegarmos ao escritório e voltarmos à nossa ferramenta de seleção, você verá agora se aumentarmos, todos esses pontos estão perfeitamente unidos. Não há nenhum tipo de lacuna estranha. Então você pode imaginar todos os diferentes tipos de formas que você pode criar com isso. Se você quiser entrar mais no design gráfico. Se eu, se você estiver interessado em eu criar outro curso sobre isso, me avise. Novamente, este curso é sobre a mudança da interface do usuário como design gráfico. Mas essa é uma visão geral muito básica de como a ferramenta caneta funciona e permite que você crie formas que você não seria capaz de criar apenas com a ferramenta de linha única. Ok, outra coisa antes de começarmos a nos encontrar em outra coisa. E digamos que você tenha mudado de ideia e essa forma não é exatamente o que você quer que seja. E, de fato, vamos apenas dar um preenchimento. Digamos que você realmente queira mudar isso. Se você clicar duas vezes nele, você pode realmente criar um ponto diferente. Você pode ver se eu passar o mouse sobre ele, temos um círculo que aparece. E se fizermos isso de novo, e se eu clicar e arrastar, você pode ver que posso voltar a ele. Um autor. Bem, eu já fiz. Então, se eu tirar isso um pouco, então tudo bem. Lição Eu quero fazer a mesma coisa aqui. Se eu clicar e arrastá-lo para fora, posso manipulá-lo mais uma vez e depois criar um tipo diferente de forma, mesmo quando ela terminou a forma original por você. Então, espero que isso faça algum tipo de sentido. Esta é apenas uma breve visão geral de como você pode usar a ferramenta caneta para criar todos os tipos de formas diferentes. 7. Texto: Ok, então, em seguida, temos nossa ferramenta de texto. Então, se selecionarmos isso e , em seguida, apenas clicarmos na tela UNC, obtemos um cursor, ponto em que podemos começar a digitar o que quisermos. E você vai ver se eu apenas segurar isso. Se eu continuar digitando geralmente é apenas continuar indo e indo e indo. Portanto, não há um tipo de largura definida no momento e ele continuará digitando o quanto você queria dizer. Agora, obviamente, isso não é particularmente útil. Você vai querer contê-lo até certo ponto sempre que estiver digitando texto na página. Então, há algumas maneiras pelas quais você pode fazer isso. Primeiro de tudo, vou mostrar como você pode alterar o que você já fez. Digamos que você queria o que acabei de fazer agora, mas você não queria todo o caminho. Existem algumas maneiras de manipular isso. E o principal aqui é ter altura automática. Então, se você clicar nesta opção aqui, agora temos uma opção para basicamente arrastar essa caixa, no entanto, queremos isso, e agora você verá o cursor mudar no final. Se eu começar a arrastar para dentro, você verá que agora está escalando automaticamente de tal forma que o texto agora está caindo abaixo. Então, se você fez do jeito que eu fiz, onde você apenas através do texto e você quer alterar a largura dele. Você pode fazer isso. Você também pode tê-lo de tal forma em que há um tamanho fixo para também estados nunca ultrapassarão um certo ponto. Mais uma vez, o tipo semelhante de coisa. Então, ei, você tem a opção de um pouco mais para baixo e eu nunca vou passar de um certo ponto. Ok, então se colocarmos isso de volta à largura automática por um momento e nós realmente vamos nos livrar disso. Se tentarmos isso novamente, certifique-se de que enviamos todas as mensagens selecionadas novamente, basta clicar na letra T também. Se você clicar e arrastar, você pode realmente criar uma área que alcançaremos que o texto não vai além. Agora, se começarmos a digitar, você verá quando chegar à borda desta caixa, ela também começará a cair abaixo. Então, novamente, as duas coisas que acabei mostrar que fazem o mesmo tipo de coisa. Portanto, depende apenas se você souber antecipadamente como deseja que seu texto seja dimensionado. Então essa é a maneira básica disso. Então, se eu apenas digitar algo sobre eles, tipo de bobagem, acabamos de colocar, este é um curso AB XD para iniciantes. Todas as opções de textos que você esperaria ver com qualquer tipo de programa ou isto, ou aqui está, obviamente, pode mudar os diferentes tipos de diversão que temos aqui. Você também pode carregar seus bebês. Mas temos novamente, acesso a fundos de um bebê e todos os tipos de coisas diferentes que você pode ter um S Se tentarmos algo diferente que temos qualquer coisa a ver com cor de preenchimento. Mais uma vez, eu teria me visto esperar ver como tipo de coisa. Você pode mudar isso. Ele também pode dar uma fronteira. Você pode alterar a opacidade do texto em si ou o alinhamento. Você esperaria vê-lo aqui não poder enviá-lo para a direita. E novamente, certamente também aumenta e o que você tem. Também temos espaçamento de rede. Temos altura da linha, também temos altura do parágrafo. Ok, então há apenas uma outra coisa que eu quero falar quando se trata de texto e como você pode manipulá-lo. Às vezes, você vai querer ajustar a aparência do texto na página. Talvez você queira ajustar caracteres individuais e não pode fazer isso por padrão. Então, por causa disso, isso é um, na verdade, é texto. Não é tecnicamente um arquivo vetorial até agora, mas há uma maneira de você conseguir fazer isso tanto. Então, do jeito que você faria isso, certifique-se de que seu texto esteja selecionado. É o seu objeto. E você vai para o caminho. Em seguida, você pode converter o caminho. Há também um atalho de teclado para isso também. E agora, se aumentarmos e aumentarmos o zoom, podemos realmente selecionar caminhos individuais de cada uma dessas letras. Então, se quisermos mudar algo sobre como algo parece, podemos fazer isso e podemos manipulá-lo do mesmo tipo de maneira, fazer você manipular qualquer uma das formas que temos. Então agora isso é essencialmente um tipo de arquivo vetorial que agora você pode alterar e manipulá-lo como quiser. Então, se você está projetando um Lego, digamos que você esteja usando o XD, você pode tipo de fonte base de usuário e, em seguida, você pode mudar isso como quiser que ele tenha certeza de que sua chuva. E, novamente, há todos os tipos de aplicativos para os quais você pode usar isso. Qualquer coisa. Basicamente, você precisa mudar algo tão ligeiramente com o texto. É assim que você faria isso. 8. Imagens: Ok, então, em seguida, vamos falar sobre como manipular e como importar imagens. Então, obviamente, você não pode usar imagens um pouco ao longo do tempo projetando sites com o XD. Então, vamos com Então as duas principais opções em termos de importação de uma imagem. Primeiro de tudo, a coisa mais importante a aprender é um atalho de teclado, que é Shift Control e a letra i ou Shift Command. Ou se você estiver em um Mac, se você fez isso, ele exibirá seu painel onde você pode escolher obviamente de todas as diferentes pastas que você tem. Depois de desejar aplicá-lo uma polegada, clique em um e, em seguida, clique em Importar. Se você clicar em todos eles e importar todo o lote, também pode fazer isso. E o XD importará automaticamente todas as coisas que você acabou de selecionar. E então você pode usar isso como quiser. Você pode arrastá-los para um lado. Se você pensar, novamente para usá-los todos individualmente um pouco mais tarde, você pode fazer isso, mas vamos apenas isso por enquanto. Então essa é uma maneira de fazer isso. A outra forma de importar uma imagem já é ter uma pasta aberta, onde você pode simplesmente arrastar as imagens como quiser. Obviamente, você pode arrastar e selecionar tantos e arrastá-los dessa maneira também. Então, é novamente espero que bastante óbvias de importar imagens simplesmente desfaçam isso por enquanto. Então estamos de volta à estaca zero. Então, lá estamos nós. E então, como você imagina, todas as coisas que você pode fazer com algumas das ferramentas de forma também podem ser feitas com imagens, bem como se você quiser cuidar das fronteiras. Você pode fazer isso simplesmente arrastando. Você também pode alterá-lo em termos de cone individual é, se quiser, você quer ter apenas uma curva em um canto. Você poderia fazer isso também. Em termos de coisas como preencher a cor calma sobre isso, ele simplesmente transformará uma cor completamente sólida. Então, o filme realmente é apenas a imagem em si. A economia fez isso. Você pode ter fronteiras. Então, se você quiser ter uma grande borda grossa em você doce, novamente, todos os mesmos controles das outras formas também. Então, tudo o que acabamos de fazer até agora também está disponível para imagens I, k. E em termos de sombra, novamente, todas as mesmas coisas estão disponíveis você possa ter sombras para controlar o quantidade de desfoque que você tem e todo o resto. Então, tudo isso está disponível. Ok, então isso é um tipo de poder óbvio fora do caminho. Então agora vamos falar sobre como realmente usar essas coisas de uma maneira mais óbvia para projetar sites. Muitas vezes, o que você vai usar imagens é tipo de imagens de fundo e apenas imagens de instalações com blocos Info dentro do seu design. A primeira coisa que mostraremos como fazer é criar uma imagem de cabelo com a seção de Harry com a imagem. Agora, se nós apenas puxarmos isso para as bordas aqui, você verá que ele se encaixa. Mas é aqui que nosso tipo de abaixo do ponto de dobra está aqui. Na verdade, se eu colocar isso um pouco mais baixo, você vê aqui, esta seria nossa seção de cabelo de um site. E muito comumente você tem uma imagem como ocupando toda a largura disso. Mas se fizermos isso, você verá com essa imagem em particular é, na verdade, ela não vai para cinco corretamente. Vai ficar abaixo da dobra, o que realmente não queremos hoje. E o que você poderia fazer, suponho então meio que colocá-lo na caixa sobre ele, o COVID para cima. Mas essa não é a maneira mais eficaz. A melhor maneira de fazer isso é usando uma forma. Primeiro de tudo, então o que vamos fazer é usar nossa ferramenta de forma, ferramenta retangular. E vamos desenhar um retângulo até um ponto em que ele esteja abaixo da dobra, à direita, para afirmar um ponto de interrupção. E então vamos fazer é lançada imagem dentro deste quadrado. Então é isso que vamos fazer agora dizer que vou abrir minha janela aqui. Vou pegar uma imagem. Vou deixá-lo lá dentro e você verá que ele foi dimensionado automaticamente para essa forma. E isso funcionaria para qualquer outra forma que você tenha também. Então, se eu clicar duas vezes na imagem, você pode ver que, na verdade, ainda está acima e abaixo. Portanto, na verdade, não é um ajuste perfeito, mas na verdade estamos recortando automaticamente uma parte dessa imagem. Então isso é perfeito se você estiver projetando algo como uma imagem de cabeçalho. E se ele quiser manobrar, você pode fazer isso simplesmente clicando duas vezes. E então, sempre que você soltar e clicar fora, ele permanecerá pesado deixando-o. Digamos que você queira estender essa imagem muito mais. E você só quer ter talvez o canto inferior da imagem seja grande o suficiente e isso permite que você faça isso. Você pode fazer isso também. E quando eu clico longe dele, você vê que agora desaparece. Então é assim que você começaria a usar imagens para criar tipos de seções de heróis ou site. E vamos voltar a isso um pouco mais tarde no curso também. Então essa é a maneira mais óbvia de fazer isso. Vou apenas excluir isso por um momento e você verá uma vez que eu fiz isso, ele também excluiu a forma ao mesmo tempo. Então, basicamente, coloque-os juntos. Então, vou mostrar mais um exemplo. Então eu mencionei que você pode fazer isso com qualquer forma também. Se apenas desenharmos um círculo talvez, e vamos apenas estourar esse tipo de para o lado aqui. E, mais uma vez, o que vamos fazer é apenas lançar uma imagem dentro dessa forma e ela ajustará automaticamente a imagem na forma que você desenhou. E se você quiser movê-lo, podemos fazer. E, obviamente, não é apenas a ferramenta Ellipse também é para a ferramenta de polígono. Então é basicamente assim que você faz isso. E isso é tudo o tipo de coisas obviamente, você poderia fazer com essa ferramenta super útil para ter. Ok, então essa é uma breve visão geral de como importar imagens para o seu design. Novamente, se você quiser apenas importar um monte de imagens e ter mais do lado pronto para você usar. Você pode fazer isso. Vamos voltar a manipular imagens muito mais ao longo do curso. Vá em vez de mais detalhes e como você pode usar grades repetitivas que começaram a chegar em um momento em que você pode copiar e colar elementos com bastante facilidade. Mas no próximo vídeo vamos falar sobre como importar vídeos e arquivos Lottie. 9. Vídeo e de Lottie: Ok, então, em seguida, vamos falar um pouco sobre como importar vídeos em arquivos Lottie no Adobe XD. Então, estou gravando este curso no final de 2021. E isso é, na verdade, uma coisa muito nova que acabamos de apresentar. Então, vou mostrar como você pode fazer isso. Muito simples, semelhante a como você importaria uma imagem. Ou temos que fazer essencialmente é arrastar ou simplesmente mudar Controle e Alt ou Shift Command I. E então apenas o vídeo. Ou podemos simplesmente arrastá-lo como eu mencionei. E agora estamos, temos um vídeo. Agora ele não é reproduzido até que você realmente visualize a tela em si. E há algumas configurações que você pode ter para como realmente atua também. Então você pode ver aqui que temos um novo tipo de opção de configuração aqui, onde diz Play on tap, que é o que está atualmente, a reprodução mensal ou nenhuma de Platão , ou você pode editar aspectos de como ele é reproduzido. Isso tem mais a ver com a parte de digitação de postagem. Bolus tem sua própria reprodução automática porque as chances são que se você estiver usando um vídeo, as chances são bastante altas será algum tipo de vídeo em segundo plano com mais frequência do que não. Então, agora, se visualizarmos isso, você verá como fazemos isso, ele começa imediatamente a jogar a pré-visualização da mamãe. Então é basicamente assim que o vídeo de Mackenzie. E, obviamente, você pode redimensionar como quiser. Somos todos o mesmo tipo de controle que você tem com qualquer outra coisa. Há algumas das coisas que você não tem automaticamente, como sombras não o terão. Você está um pouco mais limitado quando se trata disso. Então, assim como ir às imagens, você pode realmente uma espécie de mascote para uma forma também. Então, vamos apenas mostrar isso. Se acabarmos de desenhar um triângulo, talvez apenas jogue nosso vídeo no triângulo. Clique duas vezes e, em seguida, você terá uma opção para ver como ele é reproduzido. Então eles jogam automaticamente novamente. Posso sair disso e espero que possamos estender isso para qualquer tamanho que quisermos. E então, se visualizarmos, você verá que será reproduzido automaticamente dentro dessa forma que mascaramos para dizer simples, isso é exatamente o mesmo tipo de coisa que você faz com as imagens. Mais uma vez. Então é isso para vídeo. E novamente, provavelmente há mais algumas coisas que você pode fazer com ele. Mas, novamente, eu queria mostrar a vocês o básico de como isso funciona. Você pode gerenciar todos os diferentes tipos de vídeos que você tem no painel esquerdo, vamos entrar nos ativos de documentos em apenas um momento. Mas vamos apenas dizer que você arquivos latae. Então, os arquivos latae se você não está ciente deles, ou basicamente depois de seus arquivos do After Effects que foram convertidos em calor e em sites são muito, muito populares no Webflow e coisas como elemento ou o momento. O motivo é um tamanho de arquivo muito menor e algo como um vídeo ou GEF. Então há, há flores são bem grandes. E, obviamente, quanto maior o tamanho do arquivo de um site, mais lento o site será carregado. Então, quanto menor o tamanho do arquivo, melhor e esse tamanho de arquivo é muito pequeno, é por isso que eles são muito, muito populares. Então, eu quero apenas baixar um só para mostrar como isso funciona. Mais uma vez, super simples. Muitos deles são gratuitos. Então, se você quiser dar uma olhada em todos os diferentes que você tem aqui. Se você for para o files.com Lottie, você pode então suavemente através de uma série de animações gratuitas diferentes que as pessoas têm algumas para usar como quiser. Eles também têm um mercado onde você pode comprar talvez mais avançados ou certas animações em um tópico específico. Então, vamos baixar este, eu acho. E tudo o que temos hoje, você pode baixá-los em alguns formatos diferentes. Você pode realmente tê-los como um presente para ou em um vídeo. Se baixarmos esta topologia está bloqueado arquivo adjacente, você verá que ela faz isso. E então tudo o que fazer é arrastá-lo para o nosso Canvas, soltá-lo. E, assim como um vídeo, você tem algumas opções diferentes e como ele reproduzirá um play on tap ou você pode tê-lo reproduzido automaticamente. Então eu acho que o que provavelmente faremos é tê-lo jogado automaticamente. E então vamos apenas colocar isso em algum lugar. Então, novamente, você precisa realmente visualizá-lo. Na verdade, é ver a animação funcionando. E então o que faremos é escolher jogar automaticamente. E também não queríamos que ele parasse depois, depois de jogar uma vez. Então isso coloca o cabelo no lado esquerdo, e isso também é verdade para o vídeo deveria ter dito que isso vai fazer um loop na reprodução. Então, agora, quando visualizarmos isso, ele jogará continuamente horas extras, o que provavelmente é o que você teria se usasse isso em um site. Então lá vamos nós. Então, sim, Novamente, é basicamente assim que você vai usar arquivos Lottie e arquivos de vídeo. Isso só lhe dá um pouco mais de liberdade de design. E isso permitirá que você veja como um site pode ser ou um aplicativo pode parecer como um produto mais acabado, então isso é atualizado. Esse é o ponto inteiro. Às vezes, você terá que esperar até o processo de desenvolvimento para ver como ele realmente se parece. Agora você pode ter muitos arquivos e vídeos é uma coisa realmente ótima. Essa é a visão geral básica de como você pode usar vídeos e arquivos Lottie em seus designs. 10. Atalhos do teclado: Neste vídeo no SOC, atalhos de teclado muito comuns que você vai querer aprender. Vou fornecer a você nos materiais do curso uma lista completa de atalhos de teclado disponíveis frase, eles podem dar uma olhada no seu lazer. Há muita coisa. Então eu queria, no entanto, eu queria apenas entender por que eu uso um pouco e meio dos fundamentos absolutos de usar atalhos para certas coisas. Ok, então o mais óbvio é copiar. Então, vamos apenas dizer que queremos ter esse quadrado. Vou copiá-lo em outro lugar. Você pode simplesmente ir e controlar C e controlar V. E isso lhe dará automaticamente outra versão do que você acabou de fazer. Então essa é uma forma de copiar. Outra maneira é se você segurar um pouco o elemento Alt e você pode movê-lo enquanto segura isso, enquanto você o mantém pressionado, eu criarei uma duplicata do que você já tem, o SR. Então, outra maneira de fazer isso. Outra coisa sobre quando você mantém Alt como uma espécie de outra coisa bastante útil se você estiver selecionando um elemento e você apenas o mantém pressionado, mas eu estou arrastando. Ele mostra a distância de um elemento para outro. Então você pode ver aqui, ele está mostrando a distância deste ponto até o topo, lados, a parte inferior. Então, se você não arrastar é outra maneira de usar esse controle onde eu posso te dizer, tipo de dar-lhe uma ideia de espaçamento. Então, é muito, muito útil fazer isso. É assim que você pode usar atalhos de teclado para duplicar itens. Outro teclado, Shoko, é claro, digamos que queremos nos livrar de tudo o que fizemos. Apenas Controle e Z, desfaça tudo o que acabamos de fazer. Ok, assim como você faz isso para qualquer outro útil para você quando estiver usando um PC ou Mac. Ok, então o tipo de óbvio a partir daí, obviamente estaremos passando por muitos desses símbolos diferentes aqui. Nossa tentativa e, na verdade, não usar esses dois modos apenas para que você possa ver melhor o que está acontecendo. Mas cada um deles tem seu próprio atalho de teclado, como mencionei anteriormente. Mas você quer se acostumar particularmente a usar a ferramenta de seleção no VA. Porque o que quer que você esteja fazendo atualmente de cada vez, se você olhar para o caso de agora, pressione a letra V e voltamos à seleção. Então, isso será usado um pouco ao longo do curso. Eu não vou voltar constantemente a este a sebes, um socialmente apenas eu diria para sempre comer, eu quero fazer isso usando atalhos de teclado para manipular elementos. Mais uma vez, provavelmente já tocamos nisso um pouco. Mas se você pressionar Shift em qualquer elemento que você tenha ou qualquer forma você tenha, ele criará. Eu vou apenas uma espécie de escala exatamente como é sem adicionar nenhum tipo de ciência em ambos os lados. Se você deixar de lado, você pode dimensioná-lo como quiser. Se você quiser se alongar. Mas de cima e de baixo. E se você segurar Alt, enquanto faz isso, você verá que é movê-lo e escalá-lo, mas só assim e assim. Então, de cima e de baixo, se ele fez isso do outro lado também, mantenha pressionado Alt novamente, ele só crescerá de ambos os lados dessa maneira também. São coisas bem comuns que você vai usar. Coisas como Bring to Front é outro atalho de teclado muito comum. Então, se dermos a isso uma cor de preenchimento você possa ver melhor o que estamos fazendo. E vamos desenhar outra coisa também. E teremos um preenchimento e rapidamente já temos filme como cinzas finas agora daremos uma cor de preenchimento diferente, caso contrário, e ficaremos confusos. Então, vamos dizer, obviamente, queremos colocar essa caixa atrás dessa caixa, você pode simplesmente clicar com , enviar de volta ou usar um atalho de teclado também. Então eles são os únicos que você vai usar. Um pouco. Block é digamos, dê uma olhada na tecla, a lista de atalhos de teclado que você fornece um papel alumínio e você realmente quer comer o máximo que puder, basta tentar usá-los. Então, chega a um estágio em que é quase segunda natureza. E depois de usar isso por um tempo, ele se tornará uma segunda natureza, particularmente coisas como ferramenta de seleção de bateria, selecionando a letra V. Esse tipo de coisas óbvias, obviamente fazendo Control a, O controle V será muito óbvio para você. Funciona. Você provavelmente está acostumado a usar coisas. Mas, novamente, percorra e encontre coisas que você gosta de usar. E isso tornará sua vida muito mais rápida ao usar este programa. 11. Controlando e bloqueio: Ok, Então, em seguida, como controlar e manipular elementos dentro do XD. Então, vou te mostrar isso de uma forma mais utilizável. Então, vamos criar um menu básico de navegação muito rapidamente, menos girafa, o retângulo. E imagine que isso não é dinheiro suficiente ou se livrar da borda e nós lhe daremos uma cor. Então, vamos fazer talvez azul escuro. Então lá vamos nós. Temos o funcionamento do menu de navegação agora em um menu de aplicativos no site, obviamente você geralmente terá uma perna no lado esquerdo. Em seguida, você tem os itens do menu nav no centro para o lado direito. Então, vamos fazer isso agora. Então, se quisermos começar a construir coisas sobre isso, às vezes você não quer mover isso acidentalmente, o que é feito com muita facilidade, especialmente se você estiver tentando redimensionar elementos ou tentar selecionar outros itens, ele pode ser uma pintura. Você realmente quer bloquear isso em posição. Na verdade, vou mostrar isso como pode ser um problema. Vou apenas criar um logotipo muito, muito básico. Então, vamos deixar este círculo vermelho só para mostrar a você. Certo. Então, vamos ter isso no lado esquerdo e, em seguida, criaremos alguns como itens de navegação aqui. Então, se entrarmos na ferramenta Texto aqui e começarmos a digitar, talvez tenhamos amor em casa. E nós clicaremos nisso e, em seguida, vamos simplesmente duplicar isso algumas vezes. Então, se eu jogasse isso, agora, vou fazer isso simplesmente fenomenal de forma livre muito bem. Mas digamos que queremos reajustar o que temos aqui. Então, o espaçamento é apenas sobre direitos ou eu consegui há pouco. Vamos fazer isso de novo. Ok, então você pode ver esse espaço uniformemente. Mas e se quisermos ajustá-los? Se eu quiser selecionar todos esses juntos, você verá como eu tento e faço isso, ele apenas move a barra de navegação porque não está bloqueada na posição. Então, se você quiser tentar selecionar todos esses que estão abaixo desta barra de navegação. Você não pode fazer isso sem afetar esta barra de navegação. Então, o que você pode fazer para contornar esse problema é bloqueá-lo no lugar. Então, duas maneiras de fazer isso. Você pode clicar com o botão direito do mouse no elemento que deseja bloquear. Veja uma opção para um que tem muito. Assim, você pode clicar nisso alternativamente, sempre mostra que você é um atalho de teclado, que é o que você quer tentar e se acostumar a usar o máximo que puder apenas para velocidade. Então você controla um l ou Command e S em um Mac. Então, se fizermos isso, você verá agora que temos esse símbolo de bloqueio no canto superior esquerdo. E isso significa que não importa o que façamos, importa o que tentamos e clique nisso, não se moverá importa o que, mesmo que tentemos excluí-lo, ele foi mais tarde está bloqueado no lugar. Ele não moverá tudo. Para desbloqueá-los, basta clicar no próprio ícone ou clicar novamente em Control e L e desbloqueá-lo para você. Então é basicamente assim que isso funciona. E novamente, Control e S, ou Command e L. Tente usar atalhos de teclado o máximo que puder. Isso só economiza muito tempo. Então, agora, como no lugar, isso significa que agora, quando tento arrastar e clicar, posso selecionar facilmente meus itens de navegação e isso não faz diferença. Eu posso então redimensioná-los como eu quero fazer o que quiser com eles. Eu posso fazê-lo livremente sem afetar nenhum outro elemento no próprio menu. Então esse é um caso de uso óbvio para esse tipo de coisa. Você achará que isso é muito, muito comum. E quando você começa a usar o x day, você descobrirá que esse tipo de acontece um pouco e você terá o hábito de olhar as coisas enquanto você está tentando construir sobre isso. Então esse é um caso de uso muito, muito comum. Digamos que vamos nos livrar de tudo isso por enquanto. E, na verdade, se eu mantiver as formas, vamos usá-lo apenas para demonstrar outra coisa. Só estou desbloqueando isso. Na verdade, vou redirecionar isso apenas por um momento. Então, agora temos duas formas. Então, se eu arrastar isso sobre a parte superior do meu retângulo, você verá que ele passou automaticamente por cima. Agora, isso não significa necessariamente que você queira sempre ter um pedido. Às vezes você pode querer ter esse círculo embaixo do retângulo. Então, como você os faz? Algumas maneiras de fazer, mais uma vez, é clicar no item que você deseja manipular. Você pode clicar com o mouse. E você vê aqui que temos algumas opções. Trazemos para a frente, avançamos, enviamos para trás ou enviamos para o banco. Trazer para a frente é trazê-lo direto para a frente e enviar de volta está enviando frente para trás, pois será óbvio. Avançar e retroceder significa que ele vai se mover dentro do painel de camadas em que temos feno no qual não entramos. Sim, chegaremos a isso no próximo vídeo. Mas basicamente, você também pode manipular isso aqui. Vou mostrar-lhe muito rapidamente. Então, se arrastarmos isso acima, você verá que agora é a área afetada aqui. Então você também pode afetar isso dessa maneira. Ou você também pode clicar com o botão direito do mouse e, em seguida, basta clicar na opção desejada. Ou você pode usar o teclado Shoko que está listado lá também. Portanto, existem duas maneiras diferentes manipular esses itens. Então isso vai ser super, super comum e você vai querer manipular esses itens um pouco. Sempre que você está projetando sites, isso é algo que você vai usar muito. Então, vale a pena lembrar atalhos de teclado para isso. Ou se você preferir arrastar essas coisas, você também pode fazer isso. Claro, isso também varia para o texto. Se tivéssemos textos aqui, você pode manipular isso como quiser. Então, espero que isso faça sentido. Então você cai novamente quando começamos a projetar nosso projeto de classe um pouco mais tarde, vamos fazer uso de todas essas técnicas diferentes à medida que avançamos. Ok, então essa é uma visão geral básica de como você pode aproximar os itens ou mais longe da tela, e como você pode reordená-los em sua posição no eixo. E também como você pode bloquear itens no lugar para que você possa construir coisas sobre isso. 12. Selecionando e agrupamento: Ok, então agora vamos falar sobre como selecionar e agrupar vários itens diferentes em sua tela. Então, novamente, isso vai ser super comum. Muito tempo, você vai querer selecionar vários itens juntos. Então, digamos que queremos que esses dois itens se movam ao mesmo tempo e mantenham a mesma distância que eles têm atualmente. Então, se fôssemos fazer isso, se apenas clicarmos e arrastarmos e selecionar os dois itens juntos, se eu agora tentar mover isso, ele os moverá ao mesmo tempo. No momento em que eu clico e tento fazê-lo novamente, ele meio que irá agrupar os itens. Então essa é uma maneira rápida de reunir itens, mas você não quer que ele esteja sempre no mesmo grupo. Mas haverá muitas vezes que você quer, talvez digamos, talvez criar algum tipo de cartão de algum tipo. Você pode sempre querer ter esses elementos agrupados e eles meio que se tornam suas próprias coisas. Você também pode fazer isso. Então, em vez de apenas selecionar, apenas encontrar, se quiser, e sempre se comportar e reagir juntos. Você pode fazer isso porque novamente, no momento, eu clico fora, isso vai parar com isso. Então, mais uma vez, selecione ambos juntos, clique com o botão direito do mouse e, em seguida, você verá que diz: Ei, grupo, que também é um atalho de teclado, que é Control e J, novamente, este é um atalho de teclado. Você quer se lembrar o máximo que puder. Vai poupar muito tempo, mas se fizermos isso, você verá que agora está agrupado. E mesmo que eu clique nele e volte a ele, agora me deixará conhecer esses itens e eles sempre serão agrupados. Então, se você quiser desfazer o aperto ou você tem que fazer é clicar com o botão direito do mouse e, em seguida, ir em frente e na uva. Se você começar a clicar, agora você pode mover itens diferentes individualmente novamente. Então é assim que você agruparia itens juntos. E, novamente, não há nenhum tipo de limite para quantos desses você pode fazer. Você pode adicionar texto. Eles trabalharam com texto, funciona com tudo. Então é assim que você agrupa itens juntos. Novamente, isso é algo que você usará aspas acima. E você verá se o mantemos em nosso painel Camadas aqui. No momento, esses dois itens têm sua própria coisa individual acontecendo No minuto selecionamos os dois juntos e, em seguida, clicamos em GREP, você diz que ele cria uma pasta para esses itens. Se agora clicarmos duas vezes nisso, você verá que temos dentro dessa própria pasta. Então, se esse fosse um tipo de elemento, você usará muito em todo o seu site. Você pode então dar um nome a isso e chamá-lo do que quiser. Mais uma vez, vamos voltar para este painel Elements e apenas um pouco apenas para mostrar mais detalhes onde você pode lidar com isso. Mais uma vez. Mas essa é a visão geral básica de como você pode agrupar itens juntos. E então, sempre que você os move com um mouse, ele sempre os move juntos ao mesmo tempo. Além disso, vale a pena mencionar que você deseja dimensionar esses itens grupo monofilético, você também pode fazer isso. Se for sempre um grupo, ele só moverá o item no qual você clicará. Se você segurar Shift pressionado, isso fará com que ambos cresçam no mesmo tipo de nível. Então é basicamente assim que você grep itens e como manipula itens agrupados juntos. 13. Elementos de escondidos: Então, pouco antes de seguirmos em frente, quero mostrar mais uma coisa quando se trata de manipular itens diferentes. O que também às vezes queremos fazer é ocultar itens. Então, vamos supor por um minuto que queremos, criamos algumas coisas de tal forma em que temos algo que é meio cruzando esses dois itens. Mas o que quer que quisermos editar é talvez embaixo lá para que ele possa fazer é desagrupá-los, sair do caminho, mas uma maneira melhor e pode ser muito alto o item apenas temporariamente. Então, por que você pode fazer é clicar com o botão direito e, em seguida, basta clicar em ocultar ou usar o atalho do teclado. E eu vou me livrar disso só por enquanto. E então você tem controle total do elemento também por baixo. E se você quiser exibi-lo, você pode apenas controlar Z. Ou você pode ver no seu painel de camadas aqui, você verá que a Elipse 1 está atualmente toalha em branco e tem esse tipo de globo ocular com uma cruz três, o que significa que está oculto. Então, o que você pode fazer é simplesmente clicar nisso e ele o trará de volta para onde estava uma bengala. Digamos que seja uma visão geral básica de como agrupar itens e como manipulá-los juntos, e também como ocultar itens temporariamente e depois trazê-los de volta. Um que ela queria. 14. Combinando formas: Ok, então, em seguida, vamos falar sobre como combinar um cruzamento de itens diferentes juntos. Então, isso talvez seja mais comum se você estiver usando formas um pouco assim. Talvez você tenha criado algum tipo de gráfico. Isso é algo que talvez você usaria para isso especificamente. Portanto, isso não está muito relacionado à criação de um site per se. Mais talvez a ver com a bomba de design gráfico apenas mostrará de qualquer maneira, porque obviamente surgirá. Vou mostrar os lados de design. Então, vamos começar dando esses dois itens juntos neste tipo de imponente, digamos, primeiro vou sobrepor esse círculo aqui assim. Certifique-se de que seja bom e uniforme. E vou agrupar esses dois itens juntos. Vou apenas selecioná-los assim. E agora você vê uma vez que fizermos isso, agora temos este painel aqui. Então, vamos voltar para Repeat Grid em apenas um momento. Mas agora temos essas opções diferentes que temos ADD, temos um subtrato, também cruzamos e também temos uma sobreposição de exclusão. Então isso pode significar que nada é uma recompensa. Então eu acho que a melhor maneira de mostrar isso é apenas mostrar-lhe. O que faremos inicialmente é clicar em Adicionar. E o que você vê acontece aqui é basicamente que você acabou adicionar a forma que estava em cima à forma que está aqui. E também muda de cor também. Então, se você quiser apenas adicionar o que tiver a outro item, muito simplesmente, essa é a maneira que você faria isso e ele assumirá automaticamente a mesma cor do objeto abaixo se invertermos isso um pouco. Então, estávamos dizendo antes, se quisermos ter o círculo mais profundo no eixo, podemos fazer isso como se tivéssemos apenas clicar com o botão direito do mouse e ir. Talvez apenas envie para trás e faça o mesmo tipo de coisa. Agora você verá uma coisa diferente acontecer. Agora temos, o item cunhou, parece o mesmo, mas é tomado nas propriedades do elemento mais longe no ponto de acesso. Então, espero que isso faça algum sentido. E, obviamente, você pode criar todos os tipos de formas diferentes, fazendo isso é adicionando itens juntos. O próximo será subtrair. Agora este é muito, muito útil, particularmente unido para criar formas únicas. Então, agora o que vamos fazer, novamente, certifique-se de que ambos os selecionados clicarão em subtrair. E você pode ver que agora estava lá como um círculo agora foi basicamente mordido fora do item que estava lá embaixo. Então, novamente, a única maneira que você pode fazer isso sem usar essa ferramenta, mas talvez colocar um círculo que também fosse branco com um fundo branco, você poderia fazê-lo dessa maneira. Mas dessa forma, isso é realmente S3. Então, se eu souber a forma por baixo dela, só para mostrar a você, e eu darei a ela uma cor de fundo. Veja, se eu tentar mover isso sobre ele, você diz que é completamente transparente. Agora não há nada neste espaço. Então isso está subtraindo um elemento de outro. E vamos apenas inverter isso mais uma vez. Então, se agora tivermos isso, envie para trás e faremos o mesmo tipo de coisa novamente. Clicaremos em subtrair e agora ele subtraído o outro item dos elementos NUS. Desculpe, isso é importante quando se trata que um item é mais alto no ponto do eixo. Então, a primeira vez foi o retângulo. Desta vez, é um círculo. Então é basicamente assim que você usa a subtração. Novamente, não vou criar muitas formas diferentes para isso. Só estou mostrando o básico de como isso funciona. Então, mais uma vez, para ter certeza de que eu selecionei e agora temos a ferramenta de interseção. E se clicarmos nisso, você verá agora só temos essa parte lá. Então, ele cruzou os dois itens juntos. Eles são uma espécie de ponto de contato. E então, se eu clicar nisso novamente e você verá como isso funciona. Então, novamente, não é o mais utilizável para este em particular, mas muito útil se você estiver tentando combinar certos elementos em uma determinada forma. E o último que temos será excluir a sobreposição. E agora você pode ver um tipo semelhante de coisa a subtrair essa parte onde ela se cruza agora é completamente transparente. Então, só para provar isso, então se eu colocar algo embaixo disso mais uma vez, se eu apenas desenhar um círculo, darei uma cor de preenchimento. Se eu mover este item, você verá que ele será exibido. Se eu realmente vou fazer isso. Vou trazer isso para a frente. E você verá agora, enquanto eu passar por cima, baixo vai realmente aparecer por baixo vai realmente aparecer porque isso está completamente claro agora. E é basicamente assim que você usaria essas ferramentas. Então essa é a ferramenta de sobreposição de exclusão. Agora, novamente, este não é um curso de design gráfico, então eu não vou garantir todos os casos de uso possíveis para isso, mas espero que possa ver como isso pode ser útil se você estiver tentando criar formas muito específicas que podem não ser possíveis tão facilmente usando apenas as ferramentas de forma por conta própria. Então essa é uma visão geral básica de como usar esse tipo de ferramentas de interseção e como subtrair e adicionar formas diferentes para criar formas diferentes. 15. Grid.: Ok, então a próxima Oprah e apenas usando formas aleatórias correndo para criar algo que se parece mais com um pod ou um site. Então, agora vamos olhar para essa opção aqui, que é Repetir Grade. Então, o que vamos fazer é criar uma seção de cartão ou um item de cartão. E então vamos usar a grade de repetição para repetir o item em vez de apenas duplicar o final. Então, poderíamos duplicá-lo segurando Alt pressionado e arrastando. Mas você também pode usar a grade de repetição, que torna a vida muito mais fácil e facilita o espaçamento das coisas. Então, vamos começar por ter um ângulo reto. E vamos apenas cair livre e livre sobre isso no momento, pois algo assim parece bom para mim ou obter é algo como no meio da tela. Vamos apenas arredondar as bordas um pouquinho só para a frente dela. Vamos nos livrar da fronteira e daremos a ela um cinza um pouco claro. E então eu acho que faremos a partir daí há pamps vai apenas trancar isso no lugar. Agora vamos começar a construir coisas em cima disso. Então, novamente, isso agora está completamente no lugar. Ele não se moverá. Posso começar a construir coisas em cima, não interagirá com os outros itens coloquei até permitir que isso aconteça. Então, o que vamos fazer é jogar em uma imagem agora. Então, vamos mudar o controle I. Vamos apenas escolher uma imagem aleatória, que é esta aqui, apenas redimensionará um pouco, apenas para que ela se encaixe na nossa seção de código e vamos apenas aumente o zoom tão ligeiramente também. Então, sim, para que possamos ver melhor o que estamos fazendo. Então, vamos ver o quão longe isso é. Então, são 13 pixels na parte superior, e atualmente são 15, desculpe, 16 do lado. Então precisamos apenas dar um soco um pouco mais e ficar mais central. Então isso sairia agora não precisa ser pixel perfeito apenas por enquanto. E talvez obteremos um título e um cabelo também. Então, clique no ícone Linha de texto, poderíamos simplesmente clicar na letra T também. E vamos nos certificar de que você pode ver aqui está me informando por essa linha que ela se alinha corretamente a essa borda. Então, faremos isso. E vamos chamar isso de fotografia. E vamos apenas diminuir o zoom por um momento. Certo, está tudo bem. Voltaremos à minha ferramenta de seleção. Na verdade, antes de fazermos isso tornará esse título um pouco menor. Vamos fazer algo como 30 provavelmente estaria certo. Vamos torná-lo um pouco mais ousado também só porque por que não? Ok, então também poderemos colocar um parágrafo aqui também. Então, novamente, vamos nos certificar de que tudo isso esteja alinhado corretamente. Então vamos apenas estourar isso aqui e vamos apenas colocar, este é um feitiço de ícone de parágrafo da coisa dele. E vamos fazer isso muito menor, é claro. Então, em vez de negrito, terá isso como regular e faremos algo como 18. Certo. E então, a partir daí, vamos adicionar mais uma coisa. Acabamos de inventar isso um pouco, então é um pouco arrependido, um pouco mais perto do título. Certo, tudo bem por enquanto. Vamos apenas adicionar um botão também. Então, vamos usar nossa ferramenta retangular. E teremos isso na parte inferior. E você verá que a linha apareceu mais uma vez, apenas para me informar que isso agora está alinhado corretamente com a borda da imagem. E então vamos apenas desenhar isso. Algo assim. Não teremos uma fronteira. E de que cor devemos Vamos apenas ter um cachorro. Tudo bem. E talvez apenas um pouco mais alto. E então, na verdade, bloqueará esse vínculo no lugar. O motivo de estar aberto para agora colocar algum texto em cima dele. Então, só para que eu possa manobrar mais facilmente, é melhor fazer isso. E então nós apenas adicionamos, talvez aprenderíamos mais. E também certifique-se de que podemos realmente vê-lo também. Então, em vez de ser escuro ou tê-lo como leve, e vamos torná-lo muito menor. Então, vamos fazer algo como 16 pixels, talvez menor do que isso. Ok, e então entraremos no sensor. Ok, então criamos uma espécie de seção de cartão muito básica. Agora, novamente, nosso tipo de fundos todos trancados juntos. O que poderíamos fazer porque queremos ter isso é chamado de seção tudo como uma coisa. Se começarmos a mover isso, você verá agora que é meio que mova partes aleatórias e não ao mesmo tempo. Então, certifique-se de que eu desbloqueei. E então o que podemos fazer agora é selecionar tudo e garantir que tudo esteja selecionado em conjunto. E, em seguida, se você clicar em Control G ou Command G, este agora é um item agrupado ou todos esses itens. E você pode ver no meu painel de camadas aqui, todas elas estão dentro de sua própria pasta, que é comumente chamada de Grupo 1. Obviamente, quero fazer é renomear essa meramente seção de cartão. Mas, novamente, o que vamos tocar nisso mais, chegamos ao nosso painel Camadas um pouco mais tarde. Então, como duplicamos isso? O que você obviamente quer hoje em vez de tipo de leitor. E isso novamente, é basicamente copiar o que você tem aqui. E talvez apenas mude o texto e mude a imagem. E se quiséssemos duplicar isso? Você não gostaria. Normalmente, a seção de cartas vem pelo menos, geralmente vem em três mais comumente. Então, o que você gostaria de fazer talvez seja duplicar esse único resumo dele. Então, a maneira como você pode fazer isso é mantendo pressionada Alt e, em seguida, selecione o item novamente e depois solte, e ele terá uma duplicata do que você tem que, então, você pode mover isso , se quiser. Essa é uma maneira perfeitamente razoável de fazer isso. Você poderia então fazer isso de novo com este. E então, para todos os três, o que você poderia fazer é agrupá-los todos juntos se você quisesse. Para que pudéssemos criar a coisa toda. Ou, alternativamente, você poderia usar algo chamado Repetir Grade. Então, vamos voltar por apenas um momento. Certifique-se de que ainda selecionamos. E você vê, essa opção agora tem uma espécie de sugerida para essa coisa exata que acabei de cobrar que está mostrando uma seção de cartão aqui. E, na verdade, vamos fazer exatamente o que está dizendo. Então, se clicarmos em Repetir Grade, você verá agora que aparecemos alguns novos tipos de ícones. E se agora arrastarmos isso, você verá que ele criará automaticamente duplicatas do que temos. E, na verdade, continuará indo e indo tão longe quanto você faz isso. Então, mesmo que você tenha itens diferentes, vamos repeti-lo e, em seguida, começaremos do início. Mas, novamente, você pode fazer isso tanto para o lado quanto para baixo também. Então, se você tem algum tipo de sim, grade de repetição, você pode usar essa ferramenta e é super CB. Então, e a principal razão pela qual isso é mais útil do que dizer, hum, apenas duplicando, você pode alterar o espaçamento muito mais fácil usando a grade. Se você fosse fazer isso duplicando os individuais, não é tão fácil. Ao usar a grade, você pode obter esses espaços exatamente como você quer dizer que isso é realmente útil quando se trata de web design, porque a maioria dos sites algum ponto vai ter alguns tipo de seção de cartão. É extremamente comum. E essa é uma maneira muito útil de obter o espaçamento entre tudo exatamente o mesmo, em tudo exatamente o mesmo, vez de ter que aplicar manualmente o espaçamento a cada um. Isso faz isso automaticamente, então substitua, pacífico. E então digamos que você chegou ao lugar dele se você quiser apenas UM grupo que você pode fazer, seu próprio grupo, e então você consegue, e obviamente há um atalho de teclado para isso também. Mais uma vez, apenas nossa feira você volta para a página de opções Shoko do teclado que eu incluí nos materiais do curso. Mais uma vez, diga que espero que faça sentido como você faz isso. Obviamente, se você foi começar a mudar diferentes itens G candy. Então, se você quiser substituir essa energia pode clicar com o botão direito do mouse e clicar em Substituir imagem e, em seguida, você pode escolher o que quiser. E então essa é uma maneira muito mais rápida de fazer isso, em vez de ter que criar um e depois criar outro guerreiro. O que você quer fazer é apenas duplicá-los EVA, e a melhor e mais fácil maneira de controlar o espaçamento também é usando grade de repetição. 16. Transformas 3D: Ok, então neste vídeo é falar sobre transformações em transformações 3D. Então, algumas coisas antes de entrarmos no material 3D, há algumas coisas que eu acho que quero mencionar mais uma vez, posso ter mencionado, mencionei isso brevemente antes, mas você pode realmente girar elementos sem itens também. Então, vamos nos certificar de que tudo está selecionado. E muito simplesmente, se você passar o mouse sobre a esquina, não pode simplesmente girar elementos ou itens como quiser. E novamente, isso é super fácil e direi que isso dependerá do tipo de design que você tem. Quer você queira fazer esse tipo de coisa ou não. Se você quiser encaixá-lo em graus, você pode galopar em uma espécie de blocos de 15 se você olhar para este aqui, então é apenas 60, o próximo será 75 e assim por diante. E é só isso meio que ajuda você a obter um ângulo que é meio utilizável. Então, isso é apenas elementos ou itens rotativos. Você pode fazer isso para qualquer coisa no dia seguinte, é claro. E também tipo de inversão de imagens para. Ainda não mencionamos isso. Então, digamos que você tenha uma imagem e você quer investir, digamos que o cara está para o lado esquerdo, você pode fazer isso. Então você tem essas duas opções aqui. Então, se clicarmos neste aqui, ele dirá virar horizontal e eu meio que invertido para que os caras para o lado esquerdo. Você poderia fazer se todo o elemento, se você quisesse. Obviamente, como temos textos que parecerão muito estranhos, mas você pode fazer, você também pode fazê-lo verticalmente também. Então você poderia dizer de cabeça para baixo. Então, algumas transformações muito básicas lá. Mas agora vamos olhar para a transformação 3D. Então, o que vamos fazer é dar a esse cartão em particular um pouco mais de vida a ele. E se você estiver criando um site onde você quer ter um tipo de efeitos 3D. Talvez seja assim que você faria. Portanto, vamos nos certificar de que ele está selecionado. E então clicaremos neste ícone aqui para transformar 3D ou é control and tail command nc se você estiver em um Mac. E agora temos esse novo ícone como emparelhamento, o que nos permitirá controlar isso nos eixos x e y. Então, se você controlar a esquerda ou a direita, vai mover-la para que ela esteja sempre aproximando a borda da tela. Então, está se aproximando. No eixo X ou Y. Você pode fazer isso para a esquerda e para a direita. Você pode abrir também, ou, claro, uma mistura dos dois. E isso está basicamente dando a você um tipo de efeito 3D, que novamente você vê em muitos sites diferentes. E é um efeito muito bom que é muito, muito utilizável. E você também tem o benefício de se afastar mais ou mais perto da tela no ponto de acesso. Então, novamente, dependendo do que você tem como parte do seu design, isso pode ser combinado com todos eles. Você poderia fazer isso para cada palavra juntos, se quisessem. Vamos apenas dizer que recuperamos como era antes de eu começar a brincar. Se eu sair disso, lembre-se se eu quero fazer tudo ao mesmo tempo que você pode fazer é se você selecionar todos esses juntos, Tente isso novamente. Clique na transformação 3D, e agora, se fizermos isso em uma, ela o fará. Absolutamente todos eles, o que provavelmente é se você estiver usando isso para uma seção col, provavelmente é assim que você faria de qualquer maneira. Então, espero que faça sentido. E, novamente, você não precisava usá-lo apenas por causa das imagens que você pode fazer se um texto também. Então, tudo isso é super, super útil e é uma maneira muito boa de trazer algum tipo de vida aos seus projetos. Portanto, essa é uma visão geral básica de como você pode usar a transformação 3D em seus projetos. 17. Camadas: Ok, então agora vamos finalmente começar a falar sobre nosso painel de camadas. Assim, você pode acessar o painel de camadas apenas clicando aqui no ícone Camadas. Ou você pode usar apenas um atalho de teclado, que é Control e y. e agora vamos trazê-lo à tona. E o painel é basicamente apenas uma coleção de todos os itens que você tem atualmente no Canvas selecionado. Então, você pode realmente renomeá-los o que quiser. Então você pode simplesmente chamar essa imagem. Ou, novamente, você poderia ter isso como talvez aprender mais textos. Eles meio que dependem do que você quer coisas legais. E é uma boa ideia, meio que se acostumar a nomear coisas. Porque se você quiser voltar ou encontrar alguma coisa é quando nós muito mais fácil se você realmente foi e se esforçou para realmente chamar as coisas do que elas queriam ser. Agora, na verdade, todos desagrupei esses itens apenas por enquanto, é por isso que temos tantos. Mas se nós apenas agruparmos todos esses itens juntos, então vamos clicar com o botão direito do mouse e, em seguida, vamos para o grupo. Se você ficar de olho neste painel aqui, verá que agora está transformado em uma pasta. Então você pode renomear a pasta como cartão. E então todas as coisas que estão dentro dela estarão dentro da pasta do cartão. Então, geralmente, sempre que você estiver criando designs, você provavelmente terá muitas pastas diferentes. Você geralmente não tem tudo desagrupado. Muitas vezes você tem tudo agrupado, às vezes em forma de componente, que será o próximo vídeo. Mas, novamente, esta é apenas uma visão geral básica de como você pode usar e como se referir ao painel de camadas. Então, o que você também pode fazer com esse painel de camadas é controlar a ordem em que as coisas aparecem. Então, na verdade, vou me livrar de dois desses, só para dizer que temos um e será mais fácil de seguir. Então você pode ver que o elemento provavelmente na trás ou o que deveria ser a parte de trás é o nosso tipo de retângulo principal. Então, enviaremos isso para trás e vamos enviá-lo direto para trás, na verdade. Mas digamos que queríamos ter isso na frente de tudo. Mais uma vez, você provavelmente não gostaria de fazer isso. Mas só para que eu possa te mostrar, se você mover este retângulo da posição de Boston aqui e imediatamente direto para o topo. Você verá agora Está certo sobre Tudo é você agora. Por mais tempo, veja qualquer coisa que você tenha aqui. E se o movermos para baixo um de cada vez, você pode ver que cada um desses itens começará a aparecer lentamente à medida que fazemos isso. Então esse é o retângulo do botão. E então diga novamente, isso é basicamente uma maneira de controlar todos os diferentes elementos dentro do painel de camadas. Obviamente, você também pode usar coisas como sacos de centavo e para trás ou trazer para a frente. Mas você também pode controlar o mesmo tipo de coisa usando nosso painel Camadas. Você também tem uma opção para ocultar elementos aqui também. Então você pode ver que esta é a imagem que temos. Você tem a lei é que você pode bloqueá-la do painel também, para que eles não sigam em frente, lochia e fora para que você possa ocultá-la também, o que mencionamos brevemente anteriormente. Você também pode marcar se Exportar também. Portanto, essa é uma visão geral básica do painel de camadas. E novamente, você quer tentar nomear coisas que fazem sentido. Então, novamente, em vez de apenas ter uma pasta que diz Grupo 5, você quer apenas chamar isso talvez, talvez bloco de cartão, algo assim. Tão certo que faz sentido todo o cérebro. Então você sabe onde encontrar certos elementos. Porque, na verdade, uma vez que você tiver uma página de modelo projetada, será muito aqui. E quanto mais você puder, mais facilmente você pode navegar melhor. Ok, então, como uma visão geral básica de como você pode usar seu painel de camadas. 18. Ativos e componentes: Ok, então, em seguida, vamos falar sobre ativos de documentos. Então, se você deu para a guia da biblioteca aqui, e depois, provavelmente será confrontado com essas páginas. Então bibliotecas, basicamente onde você pode usar vários elementos diferentes, tipo de projetos multiplataforma e cruzados. Então, se você quiser ter uma loja de diferentes tipos de ícones, talvez tão diferentes. Portanto, as seções são pré-fabricadas ou kits de interface mesmo que você possa ter dentro de sua biblioteca que você pode reutilizar. Mas neste vídeo, vou falar sobre ativos de documentos. Então é aqui que temos coolers, estilos de personagens, que é basicamente toda topografia, adicionando componentes e comemos qualquer campanha que você tenha criado, que entraremos em apenas um momento. E, em seguida, vídeos sobre os quais já falamos. Então, vamos começar com as cores primeiro e na verdade, apenas deixar esse fundo mais escuro. Agora, por um motivo específico. Mas sempre que você começar a criar um site, geralmente você quer ter um esquema de cores em mente. E digamos que você queira se referir a isso e dizer que o que poderíamos fazer é apenas criar nossa própria paleta de cores ou quem tem caixas Afib usará Repeat Grid. E teremos talvez três ou quatro desses. Dependerá quantas cores você estiver usando para o projeto. O que poderíamos fazer então é apenas desagrupar essa grade e eu darei a cada caixa uma cor diferente. Então ele terá preto para estrelas e também terá lido. Novamente, estou apenas, estou apenas puxando cores aleatoriamente é azul. Esta não é a melhor paleta de cores. Então, digamos que essa seja a nossa paleta de cores. O que você pode fazer é sempre ter essas cores disponíveis e fáceis de acessar se destacarmos toda esta lei aqui, entrar em cores e, em seguida, clicar no ícone de mais agora é criada nossa paleta de cores dentro do nosso Documento Ativos. E isso significa que agora podemos clicar neles para afetar diferentes elementos para dizer, digamos, vamos apenas fazer nosso título aqui. Em vez de ser escuro. Vamos tê-lo. A luz fará o mesmo parágrafo. Então, agora é que ambas as luzes também farão nosso botão. Vamos apenas dar uma fronteira para que possamos dizer isso na América, na verdade vamos mudar a forma como isso parece. Então, digamos que com um fundo em vez de ser como um cinza claro, o que é atualmente. Se tivermos o Document Assets aberto e eu chamar um painel, agora podemos mudar isso para qualquer coisa que tenhamos com bastante facilidade, basta selecionar um que temos aqui. Então, se quiséssemos tê-lo como buraco escuro e tê-lo azul, você poderia fazer isso. Então, essa é apenas uma maneira de você usar cores diferentes. Você não precisa fazer isso dessa maneira. Você também pode simplesmente dizer chamá-lo como uma amostra. Então, se você entrar na cor de preenchimento, basta clicar neste botão aqui e adicioná-lo como um swat e você também os terá disponível com seu seletor de cores. Entendi que só depende de que maneira você quer fazer isso. E não há jeito certo ou errado. É exatamente o que você quiser hoje. Mas é bom ter todas as suas cores disponíveis para classificar rapidamente itens diferentes. Como se a partir daí tivéssemos estilos de personagem. Então, se nós, se nós apenas bloquearmos isso para Maman, e se selecionarmos e este boxeador se tornar mais, você verá que ele é automaticamente desenhado em você verá que ele é automaticamente desenhado em fazendas eferentes que estamos usando atualmente dentro desse elemento atual. E agora estão todos disponíveis para uso se usarmos, se começarmos a criar texto em outro lugar. Então, digamos que joguemos uma opção de texto aqui. E quando digo que começamos a digitar algo, e não será necessariamente a fonte exata que queremos. Então, digamos, digamos, por exemplo, padrão para outra coisa, diga algo como PET serif. Mas queríamos que fosse Proxima Nova, poderíamos fazer isso. E tudo o que teríamos que fazer é clicar no elemento de texto que temos e, em seguida, clicar em Proxima Nova e ele o mudará automaticamente para o que você tiver. Agora, por padrão, isso vai para uma versão escura. Então você poderia obviamente ter uma versão escura e clara e isso aparecerá em janeiro para o barro se você estiver criando como um guia de estilo antes de começar, é provavelmente o que você faz. Você provavelmente tem por versões UV light e dark aqui, ele tem você assim seus títulos, bem como isso provavelmente é o jeito que você faria. Você armazenaria todos eles dentro de seus estilos de personagem. Só assim, quando você está projetando, você pode editar rapidamente certos elementos e clicar no Fama exato que deseja usar para qualquer palma específica. Componentes. Um pouco diferente. Então, vamos falar sobre reclamantes ou campanha. É basicamente uma maneira de reutilizar um item em todo o site. E você pode basicamente copiar uma instância de uma Ariba. Então, isso é um pouco parecido com as grades repetidas, onde se você também ganhou um OTC em todas elas. Então, o que vamos fazer com esse selecionado, vamos clicar com o botão direito do mouse e clicar em Criar componentes. Então você também pode fazer isso clicando em controlar k. E agora você verá que temos esse tipo de contorno verde. No canto superior esquerdo. Temos esse tipo de verde com ícone de diamante, o que significa que agora isso é um componente, e você dirá que em nosso painel está listado aqui, está comparando um. Então, vamos apenas renomeá-lo. Não é possível bloquear. Agora, isso significa que se reutilizarmos isso ou duplicá-lo, mudar qualquer coisa em uma campanha mestre em todos os outros. Então eu apenas dupliquei clicando Alt ou Option se você estiver em um Mac e ele meio que o dedicou dessa maneira. Você também pode simplesmente arrastá-lo da seção de comparação para a página e ela a terá lá. Então veja se você consegue detectar a diferença entre esses dois aqui. Portanto, há uma diferença fundamental, e é basicamente esse ícone aqui. Então, temos esse ícone de diamante aqui. Podemos ver que não está preenchido. Então este aqui é preenchido, o que basicamente diz que você é o componente mestre. Isso significa que qualquer coisa que você alterar Nessa afetará todas as outras instâncias do seu projeto. Então, apenas para provar que, se eu mudar a cor de preenchimento em algo, em seguida, cinza claro, você verá que ela a alterou automaticamente em todas as outras instâncias que tivermos. Então, se tivéssemos múltiplos desses mudarão em cada um. E isso é o mesmo para qualquer elemento que você tenha. Então esse é o tipo de coisa útil sobre os reclamantes. E isso é particularmente útil se você estiver criando sites porque geralmente você está usando cores globais, você não tem muitas cores aleatórias juntas. Geralmente, as coisas estão sendo criadas da mesma maneira. Onde quer que você cara. Agora, se você quiser substituí-lo, você pode fazer enquanto não estiver editando o ativista mestre, você não pode realmente alterá-lo. Então, se eu fosse mudar este, exemplo, clicando duas vezes. Se eu alterá-lo para dizer talvez um azul escuro ou azul claro, você pode ver que ele não está mudando componente mestre porque essa é a nossa comparação mestre. Portanto, é uma distinção importante se você quiser alterar tudo em todas as diferentes instâncias em todo o site, você deseja afetar o componente mestre. Se você quiser substituí-lo, você pode selecionar cores diferentes no, duplicado, o que você tem. Então você pode mudá-lo, mas apenas tenha em mente que o que quer que você mude neste, nós mudaremos em todos eles. Portanto, essa é uma visão geral básica dos componentes. E suponho que o uso principal das campanhas será se você tiver uma barra de navegação, obviamente sua barra de navegação e seu rodapé serão os mesmos em cada página. Então esse é o tipo de coisa que você quer fazer como concorrente e apenas como exemplo. Ok, espero que isso faça sentido. E, geralmente, para kits de interface do usuário que você tem também, haverá componentes. Novamente, é super, é apenas uma maneira super útil de manter tudo igual e manter suas cores globais. Ok, então estamos quase ao ponto que vamos começar nosso projeto de classe onde realmente vamos criar uma landing page. Mas pouco antes de chegarmos a isso, temos mais algumas coisas para cobrir, o que seria como usar o protótipo e como usar a opção de compartilhamento também. Então, isso vem a seguir. 19. Protótipo: Ok, então, em seguida, vamos falar sobre nossa guia protótipo. Então, para demonstrar isso, em vez de apenas usar formas aleatórias, vou dar uma olhada no nosso projeto de classe. Portanto, este é basicamente um kit de interface do usuário gratuito que você pode baixar completamente gratuitamente no Adobe XD. Também vou fornecê-lo dentro da descrição do curso também. E vou mostrar como você pode protótipo e como tornar seu design interativo. Então, o que quero dizer com isso? Então, se clicarmos em uma morada e depois visualizarmos, ela sairá como um design por um momento. Se visualizarmos isso, você pode ver para este específico, se clicarmos em um botão ou pelo menos virar os bósons, ele realmente irá para essa página específica. Então, é quase como ter o site criado em menor grau. Então, se eu agora, enquanto não estava realmente ligado a tudo, então eu não posso voltar ao menu principal, mas o que você pode fazer é basicamente vincular pular sobre diferentes pranchetas juntos usando o protótipo opcional peer. Então, se clicarmos nisso agora, você verá que eles realmente têm alguns já definidos. Tão abominável mostra como você pode realmente fazer isso. Então, esta é a nossa página inicial que vamos começar a projetar os próximos vídeos. E, obviamente, o que gostaria de fazer é atribuir nosso Menu de navegação e vinculá-los a uma página específica. Então, o link Sobre Nós aqui obviamente gostaria de ir para a balança que paga as histórias. Vamos para a página das lojas aqui e assim por diante. Então, basicamente, você não pode realmente fazer isso com o dia seguinte. Você pode vincular páginas da Web e dar aos seus clientes uma ideia de como eu terminei site pode realmente parecer e sentir o cinza. Há limitações em termos de como você pode ter animações. Não é realmente possível, o mesmo grau é usar algo como web player, por exemplo. Mas algum tipo de sensação básica de como o site nós meio que pareceremos e meio que nos conectaremos. Então agora cliquei nele. O que vou fazer é apenas clicar nesta mão do ícone de navegação, parece ideia que você pode ver todas essas linhas aleatórias aparecendo. Então, isso pode parecer um pouco opressivo no início, mas na verdade é muito, muito simples. Então, como mencionei anteriormente, se eu apenas ampliar por um momento, esse par de linguagem obviamente vai para a página Sobre Nós. E o que eles fizeram aqui está vinculado ao valor foi guia lá. E você pode ver que a linha azul está indo até a página Sobre nós. Isso é tudo o que está fazendo. Essa linha azul está basicamente apenas dizendo que quando você clica nesse link, ela o levará até esta página. E todos esses outros que temos aqui estão vinculando duas páginas diferentes. Então, o próximo que eu acho que foi o que era, então nossas histórias dizem que uma que você pode ver é saltar sobre este aqui e depois ir para a página das lojas. Então, isso é basicamente o que está acontecendo. Então, um super simples, se eu clicar neste botão que tenho aqui, por exemplo, eu clico duas vezes, você verá essa opção para começar a arrastar isso para fora. Então, vou recuar um pouco e fazer isso de novo. Então, vou clicar nisso e vou arrastá-lo para uma página de minha escolha. Então, digamos que quiséssemos ir para esta página aqui e depois soltá-la. Você verá agora que essa linha azul está vinculando a esta página. Então, se eu agora visualizar e clicar e clicar neste botão aqui, você verá que vai fazer isso. Então, vou destacá-lo e agora, vamos realmente visualizar a página. E se descermos para aquele botão que eu liguei, acho que foi este. Agora você verá que ele vai para aquela página à qual eu a vinculei. Então, é realmente tão simples assim. E embora pareça um pouco complicado, mas sempre indo a todos os lugares, lembre-se, tudo o que você está fazendo é vincular um determinado botão ou uma determinada seção a outra coisa dentro de uma prancheta diferente. É realmente tão simples assim. Então isso é super, super fácil. Então, você também tem uma opção de como ele age quando você vai para essa página também. Então você pode ter diferentes opções de gatilho. Você pode tê-lo, enquanto uma transição também. Assim, você pode ter uma espécie de facilidade ou facilidade. Há muitas opções diferentes aqui que você também pode ter qualquer tipo de salto. Portanto, o mais comum provavelmente seria uma espécie de facilidade e facilidade. E você pode escolher sua duração para a aparência. E acho que eles já têm alguns desses aqui de qualquer maneira. Então, se apenas orarmos para isso novamente, apenas o Sheri apenas selecionará este. E veremos quando clicarmos nele, ele meio que se desvanece para o próximo. Então isso é basicamente algo que eles configuram para fazer isso, ok, então espero que tudo isso faça sentido. Novamente, a principal coisa a lembrar é que tudo o que você está fazendo, mesmo que pareça um pouco complicado quando você sempre vai a todos os lugares, tudo o que você realmente está fazendo é que você está vinculando de um aeroporto para outro. E, obviamente, quando você visualiza aqui, isso lhe dará uma ideia do que muito quando você clica em uma página diferente, você também tem opções diferentes de como essas coisas realmente têm efeito. Então, essa linha que tínhamos saído selecionada, você pode ver que temos uma transição e ela meio que se dissolveu nela. Você também pode ter o SlideUp. Então, vamos visualizar isso agora apenas para mostrar como isso funciona se eu fizer isso novamente. Então este aqui, você vê nossos slides para cima. Escolhemos um tipo diferente de animação para fazer isso. Então, novamente, isso é meio que, não é tão importante, mas apenas lhe dá algum ruído afeta o tipo de mudança nas diferentes pranchetas. Ok, espero que tudo isso faça sentido. E nos próximos vídeos, vamos começar um projeto de aula muito em breve. Há apenas mais uma coisa que eu quero cobrir antes de começarmos a fazer isso. E esse é o botão Compartilhar que temos aqui, onde você pode começar a compartilhar seus projetos com seus clientes. 20. Compartilhar projetos: Ok, então quando fui para a última parte antes de começarmos a criar uma dessas páginas. Então, pouco antes de fazermos isso, quero apenas mostrar como você pode compartilhar projetos com seus clientes. E isso é super, super importante e é algo que eu uso o tempo todo porque é a melhor maneira de fazer isso se você for um desenvolvedor de barras de designer. E você também desenvolve seus sites, talvez em algo como Webflow. Ter você criando seu site está em um software de design como o XD primeiro é super importante e é muito mais fácil mudar as coisas e receber feedback no dia seguinte. É por isso que temos essa opção Compartilhar aqui. Então, o que você pode fazer, basicamente, você pode criar um URL para qualquer uma das diferentes opções que você tem. E você pode enviar isso para seus clientes e, em seguida, você pode me dar feedback sobre o design que você cria. Então, apenas para mostrar como isso funciona, se você tem algumas opções diferentes, você tem uma revisão de design, que é a que você usará praticamente o tempo todo. Você também tem uma opção de desenvolvimento. Então, se você quiser dar aos seus desenvolvedores, desenvolvedores e quiser apenas transportar alguns dos CSS para eles. Você pode fazer isso. Se eles usam ou não isso. Eu não sei por experiência que eles muitas vezes, mas sem isso você vê alguma coisa? Pessoalmente, faço todos os meus sites no Webflow de qualquer maneira, então eu meio que, não preciso da opção. A opção de apresentação é como uma versão em tela cheia onde não há tipo de opções de feedback de design e personalizar, você pode tipo de cliente, eles querem que eles coloquem moedas ou não. Mas a principal delas que você usará é a revisão de design. Então, se clicarmos nisso, você poderá escolher quem tem acesso a este link. Portanto, se ele tiver alguém com o link, eles podem acessá-lo. Ou você também pode especificar certamente certas pessoas convidadas. Então, se você tem uma espécie de suíte C de PP1, envie isso para, você, só pode enviá-lo para algumas pessoas selecionadas e somente elas terão acesso a ele. E então o que vamos fazer é manter qualquer pessoa com o link. E vamos atualizar o link. E depois que isso terminar de carregar, depois de clicarmos nele, ele nos levará a um URL. Web. Os clientes podem começar a deixar feedback. Digamos que este é o link que está sendo aberto. E você verá basicamente permite feedback. Então isso é super CB. Então, e eu sempre faço isso em geral. Eu raramente começo a desenvolver imediatamente, recebendo feedback sobre o seu design. E a coisa realmente ótima sobre isso é essa opção, ou feno, que é colocar um alfinete para que eles possam fazer comentários, dizer o que quiserem. Eu não gosto disso. Eles podem dizer que eu não gosto disso. Ou se eles gostarem, eles podem dizer que gostam. Mas também CP para que eles possam fazer um comentário ou também podem colocar os pinos. Eu apenas digitaria algo. Então, se eu colocar se não posso soletrar Então minhas marcas na frente do meu rosto. Então eles podem escrever esse comentário, o que não é muito útil. E então eles também podem colocar um alfinete para dizer o que eles realmente não gostam. Então, digamos isso, o texto e a pessoa não são bem centralizados, o que não é. Eles podem colocá-lo lá, dizer que eu não gostei disso e enviá-lo. E então, quando você entrar neste documento, você vai ver o que eles disseram, que ótimo. Ele é lançado para um ALS. Clientes. Diga-lhe imediatamente qual é o problema. Se eles tiverem um, você pode pedir que leiam ou escrevam o máximo de detalhes possível. Não faça com que ele diga coisas assim, o que não é útil, novamente para explicar por que eles não gostam de algo. E é por isso que eu sempre digo aos meus clientes, seja brutal. Se você não gosta de algo, diga-me exatamente. O problema é, diga-me como você acha que pode ser corrigido se você tiver uma ideia em sua cabeça. E, geralmente, o que eles não gostarem, é realmente útil ter feedback imediato sobre qualquer coisa. E você pode colocar quantos pinos quiser onde quiser. Escreva um comentário que dependa disso. Obviamente, se você tem muitas pessoas vendo isso, todas elas podem adicionar seus próprios comentários. Você terá que rolar para trás por toda uma lista de comentários ao entrelaçar passar por Troy. E é por isso que o incentivo para muitas pessoas, porque você tem cinco ou seis pessoas deixando comentários ao mesmo tempo. Eles nem todos vão concordar uns com outros e isso pode ser um pesadelo. Então vou tentar e limitar-me a talvez uma ou duas pessoas para lhe dar feedback. Apenas as pessoas que realmente importam , enquanto os tomadores de decisão, geralmente é por isso que eu tento me juntar completamente a isso de qualquer maneira. Digamos que essa seja uma visão geral básica de como você pode compartilhar seu trabalho com seu cliente. Novamente, acho que essa talvez seja minha parte favorita do dia x quando se trata de, você sabe, quão útil é para mim e para o meu negócio. De antemão, você tinha que ter acabado de enviar o designer também. E você teria que conversar com eles e tentar descrever algo para você. E porque eles não são designers ou desenvolvedores, eles não sabem o que são sempre porque eles não sabiam necessariamente isso é uma barra de navegação ou que eu sempre sei que essa é a ação do Harris. Então, esta opção para colocar pinos nas coisas. E você também pode tipo de pessoas também. Assim, você pode mencionar e povos, se você tiver vários designers, eles podem dizer, eles podem meio que gerenciá-lo no comentário também. Mas este é um CPC, estes funcionarão e isso será um salva-vidas para fazer as coisas rapidamente quando você começar a apresentar seu caminho aos seus clientes. 21. Introdução do projeto do curso: Ok, tão bem feito para chegar até aqui. Espero que tudo com o COVID até este ponto faça sentido. Mais uma vez, assista novamente a esses vídeos tanto quanto você precisa para lidar tudo, parar e lugares. Certifique-se de praticar algumas dessas coisas sobre as quais estamos falando no curso. Porque esse próximo conjunto de vídeos é onde vamos começar a criar uma landing page de um popular kit de interface do usuário e você pode baixar gratuitamente no Adobe XD. Então, o que vamos fazer para esse projeto de classe é basicamente criar a versão para desktop de um site. Portanto, este kit de interface do usuário tem todos os diferentes tamanhos de tela lá. Oh, se desenvolve. Mas o que você vai criar é a visualização da área de trabalho. Obviamente, se você quiser criar o tablet e a pequena empresa para você também, você pode fazer isso. E então, se você quiser compartilhá-lo com a classe no Skillshare, isso seria ótimo. Mostre-nos o que você fez. Alternativamente, se você não quiser acompanhar o que vamos fazer para a próxima parte, você pode começar a criar talvez seu próprio tipo de web design. E se você quiser compartilhar isso com a classe para agora também ser ótimo. Ok, então o próximo é um projeto de classe, e começaremos com o primeiro vídeo em que damos uma visão geral da landing page que vamos projetar. 22. Visão geral do projeto do curso: Ok, então estamos nos aproximando do ponto em que estamos prontos para iniciar nosso projeto de aula, que é onde o que você vai fazer é recriar a página inicial deste kit de interface ou você pode baixá-lo completamente gratuitamente no XD. Agora, eu também vou fornecer a você uma espécie de minha versão disso. Na verdade, tenho uma espécie de ponto de partida para vocês todos prontos para ir, apenas tornar a vida um pouco mais fácil. Mas pouco antes de começarmos a fazê-los, quero apenas mostrar como isso foi meio que se deitou. Então, novamente, tudo isso é de nível gratuito no dia seguinte, mas você pode ver que temos muita coisa acontecendo. Então, o que temos é uma versão para desktop, temos uma versão para tablet e também temos uma versão móvel. Geralmente, se você estiver criando um site ou está apresentando isso a um cliente, ele vai querer ver versões diferentes. Nem sempre faço uma versão para tablet se for honesto, nem sempre. A razão é que, na maioria das vezes, o que você está fazendo é colapsar colunas. Então, se eu mostrar a página inicial na área de trabalho, você pode ver aqui. Agora temos uma espécie de quatro colunas. Três colunas lá. No tablet é extremamente provável que tudo o que você quer fazer é talvez ter o tipo de dois seguidos. Então você tem um tipo de dois lá até embaixo. Isso provavelmente diminuiria para uma idade. Se apenas diminuirmos o zoom e olharmos o que eles fizeram, parece que foi exatamente o que eles fizeram. Então eles têm uma espécie de duas colunas, colocam duas linhas desta vez. Então, às vezes, não vale necessariamente a pena fazer tablets também. Cabe a você se você tem um design muito incomum que será metade do alterado. Especificamente para cada dispositivo possa haver faria isso, mas devo confessar, nem sempre faço tablet pessoalmente, mas isso é apenas uma coisa pessoal para mim. Então isso depende de você. Mas eu definitivamente sempre faço uma versão móvel. Então, só para mostrar um pouco mais de casas foram dispostas, obviamente, você tem todas as páginas diferentes aqui e eu deveria ter rotulado qual parte é qual. Aqui temos o kit UI, que é basicamente toda a tipografia foi usada. Uma soma de todos os IVs de tamanhos diferentes também. Então isso é cp é o que você quer? Ela meio que tem seu design principal no lugar e você meio sabe e decidiu com o que está trabalhando. Você nem sempre começaria assim. E isso é algo que você faz quando você meio que tem seu design no lugar. Eles também têm aqui uma biblioteca de componentes também. Então isso é particularmente útil se, digamos, você apresentar esse trabalho a um cliente e eles meio que vão, bem, nós não gostamos dessa parte lá. Podemos mudar isso ou esperar, oh, podemos colocar essa parte desta página aqui? Ter uma espécie de biblioteca de componentes resolvida torna esse processo muito mais fácil. Então isso é uma coisa muito útil de se ter. Então dê uma olhada nisso sozinho só para ver como colocar isso. Este é um exemplo muito, muito bom e algo que vale a pena copiar em termos de como você mesmo iniciaria um processo de design. Portanto, essa é uma visão geral básica desse projeto e do que vamos fazer a seguir. Vou recriar esta página inicial aqui do início ao fim. Vou te levar por como fazer isso. Vamos resistir à tentação de usar qualquer componente. Então, vou fazer na versão Yoga. Vou excluir tudo isso, só vou deixar os ativos aqui. Alguns dos ícones. E muitas vezes o que provavelmente faremos é apenas para a velocidade copiará o texto somente quando Mesilla copiar um ponto, eu vou copiar seções de todo o ponto deste curso projetando você mesmo. Mas acho que essa é uma boa maneira de começar um, especialmente se você é um iniciante. Dessa forma, você pode ter uma ideia de algo e você pode se referir a ela olhando lado a lado. Então isso vem em seguida. E depois que fizermos isso, o que você pode fazer é decidir por conta própria recriar a página inicial da versão do tablet ou na versão móvel. Depois de fazer isso, você pode compartilhar todo o seu projeto com uma aula no Skillshare para que todos vejam se há algo que você queria que a ABA tivesse que ser realmente ótimo se fizesse. Ok, então, em seguida, vamos começar nosso projeto de aula, e vamos começar criando nossa Napa. 23. Navbar: Bem-vindo à primeira parte de nossos projetos de classe. Então, apenas para reiterar, a primeira parte do nosso projeto de classe é garantida para criar ou o sistema operacional criando a página inicial deste kit de interface do usuário do XD. A versão que tenho para você aqui é uma versão modificada que me livrei de todos os componentes apenas para remover a tentação de trapacear. Obviamente, o ponto principal disso é que você vai recriar isso apenas olhando o que eles foram criados no Canadá em sua própria coisa. Ao longo de mim mesmo fazendo isso, vou digitar algumas das coisas, mas apenas por velocidade, vou copiar e colar a camada de texto só para que você não fique entediado de me ver digitar tudo. Portanto, os pontos deste curso são apenas para mostrar como estruturar as coisas, como usar todas as ferramentas diferentes. Obviamente, apenas digitar as coisas não está particularmente interessado. Relógio aquecedor por, por 20 minutos. Então, ok, o que precisamos fazer antes de tudo é começar criando nossa barra de navegação. Então, espero que faça sentido o que você vai usar nossa ferramenta retangular para nos dar a forma. Em seguida, garantimos doenças graves que ataca o logotipo e para os links de navegação. Agora, se eles foram criar um botão também, a primeira coisa que estávamos contando hoje, então eu realmente preparei a tela apenas começar é exatamente a mesma que isso. Também vamos usar esse sistema de grade também, só porque ele meio que faz sentido ao invés de eu tentar fazer algo inteligente ou diferente. Às vezes eu só uso um grande bloco de cores. Se você está trabalhando em uma nota específica como eles parecem ser. Talvez apenas para este curso, vamos realmente mantê-lo no mesmo. Você diz. Não fica confuso para você. Certo, então vamos começar. Primeiras coisas primeiro, vamos nos livrar de nossas grades ou apóstrofo de controle de mudanças. E vamos jogar nosso primeiro retângulo, que será nosso elemento navbar. Então, vou desenhar um retângulo. E em termos da altura disso, você pode copiar exatamente se quiser ou você pode ser sua inversão. Acho que vou ficar com isso de forma bastante rígida só para que pareça exatamente como deveria. Eles se livrarão da fronteira para esse triângulo retângulo. Esse é um recurso, espero que eles apresentem onde ele não vem automaticamente com o quadro porque isso é uma dor. Então, em termos de altura, você pode ver aqui, a floresta tem um 128, não está bem lá, então é apenas 95, então vamos apenas copiar isso. Portanto, é um 128 e eu o farei automaticamente do mesmo tamanho. Então, em seguida, vamos ter nosso Lego dentro. Então, novamente, o que você faria se você sionista pela primeira vez, ele vai com sua opção de texto aqui e comece a digitar se o Lego é apenas para velocidade. Na verdade, vou apenas copiar o que temos aqui. Digamos que vamos nos livrar disso por um momento. Se eu estraguei isso, livre-se disso. Então, vou copiar isso. Então, Comando C ou Controle C a partir do windows. Vou apenas dizer os Windows apenas por espaço. Obviamente. Depende do que você está usando. Estou usando o PC para isso ou Windows. Então, vamos colocar isso no lugar agora. Então, vamos recuperar nossa grade por um momento e você pode ver o que eles estão fazendo aqui, alinhando-a ao interior desta coluna aqui. Então, vamos simplesmente copiar o que eles estão fazendo. Então, vamos nos certificar de que temos o mesmo que eles. Então, no momento, está no errado. Então, vamos colocá-lo aqui. E você pode ver que ele está encaixando automaticamente no lugar um para aumentar um pouco. Você pode ver aqui é aqui que nossos contêineres também. Então, se nós apenas nos certivermos de que ele se encaixe no meio, medida é a mesma distância que você pode ver lá. Isso é praticamente bancário. Ok, então vamos deixar esta grade no lugar só por enquanto. Na verdade, estou indo para o primeiro antes que qualquer outra coisa agora esteja realmente bloqueando nosso elemento navbar no lugar. Porque em um momento vamos precisar começar a entrar em nossos links de navegação e eu botão. E se começarmos a tentar obter essas distâncias iguais, não queremos que essa barra de navegação esteja se movendo. Então, o que podemos fazer é clicar com o botão direito do mouse e clicar em Bloquear ou você pode simplesmente usar o atalho de teclado, que é Control e L. Então, vamos bloquear isso no lugar. E agora, sempre que movemos qualquer coisa, não vamos acidentalmente mover este elemento napa em qualquer lugar fora de uma posição. Vamos agora começar a fazer isso. Porque acho que temos nossos links de navegação à mesma distância do nosso botão que temos aqui. Se mantivermos Alt pressionado, você verá que a distância distante dessa pessoa é 28. E o mesmo acontece também para nossos links de navegação também. Então, só para tornar a vida um pouco mais fácil, eu realmente vou fazer esse botão antes de tudo. E então faremos os links de navegação depois porque este botão está alinhando tudo o que diz até o final desta pequena coluna aqui. Então, vamos começar fazendo isso. Então, para fazer esse fundo, o que vamos fazer é realmente usar, na verdade, ainda usamos uma ferramenta retangular, mesmo que isso seja meio arredondado para os lados, vamos basicamente girar fora das bordas do nosso retângulo. O que estou dizendo, vamos fazer isso. Digamos que realmente queremos que ele se alinhe a este aqui. Então, vamos começar fazendo isso. Então, fizemos um pouco inicialmente. E não queremos ter nenhum tipo de fronteira. E o que queremos fazer agora, novamente, estou realmente pressionando bastante V. Lembre-se, sempre que quiser voltar à sua ferramenta de seleção, basta clicar na letra V e agora se livrar de qualquer tipo de ferramenta que você está usando. Não tínhamos isso com uma cor de fundo, então queremos tê-lo como uma cor verde, e também queremos dar um raio. O que você pode fazer simplesmente puxando assim. Ok, então está tudo bem como nosso botão para baixo e isso está praticamente alinhado. Da mesma forma. Este é. Quanto isso vai? Ele faz, ok, então está literalmente indo de ponta a ponta nessas duas colunas aqui, o que é totalmente bom. Então isso está tudo bem. Na verdade, vamos apenas copiar e colar esse elemento de texto apenas para facilidade e velocidade. Então, agora vamos fazer isso e vamos colar isso dentro. E queremos colocar isso mais no centro. Lá vamos nós, morre agora praticamente no local. E também, o que queremos fazer agora é tornar este Poston um componente. Porque vamos usar isso um pouco ao longo deste design vai dizer que aparecerá pelo menos mais algumas vezes aqui para o Leia Mais, Não adianta recriar uma pessoa todas as vezes. Você também pode ter o único botão pronto e, em seguida apenas mudar o texto como em quando precisar. Então, vamos fazer isso. Então, o que faremos para fazer isso é apenas selecionar os dois elementos juntos. E se clicarmos com o botão direito do mouse novamente, você pode usar os atalhos de teclado, mas só para poder vê-lo mais fácil, às vezes vou usar o botão direito do mouse. Então, o que podemos fazer agora é criar um componente que sempre será o mesmo. E se você quiser reutilizar isso e você pode fazer, é claro, mas se ele então o, então esses são basicamente seus componentes mestres. Então é isso que sempre será e se você quiser mudar um, então se eu disser que não entendi a coisa toda, não mudei o texto neste. Isso não afetará o mestre comparando apenas porque esse é o tipo do original. Então, se você quiser mudar os botões mais tarde, diga coisas como Leia Mais, que você tem aqui. Você pode basicamente usar a mesma coisa, mas depois você deve aos que você tem. Então é assim que vamos fazer isso. Então, vamos nos livrar disso por enquanto. Certo, e isso é meio que a primeira parte feita. Em seguida, precisamos colocar nosso texto para o menu de navegação sobre links de navegação. Eu vou copiar isso só por velocidade. Isso não está particularmente alinhado mais. Por que parece um pouco, mas vamos apenas alinhá-lo talvez a essa cobertura de coluna interna seja ajudar com meu ACD. Então, o que faremos então, e é só colar isso aqui. E, de fato, o que faremos inicialmente é apenas falar sobre usar sua nota salarial ou não. Agora, existem duas maneiras pelas quais podemos abordar isso. Poderíamos usar Repeat Grids se fizéssemos isso e clicarmos nele, você verá que agora podemos simplesmente separar isso. E então podemos usar o espaçamento como todos dizem. A questão, é claro, é que quando começamos a mudar o texto, ele vai alterar isso um pouco. Então, mesmo que tenhamos usado o espaçamento agora é carnívoros QF e ele não vai se encaixar corretamente. Portanto, há um argumento para não fazer isso. O que você poderia fazer de forma muito simples é colar seu texto novamente. E então você pode simplesmente duplicar cada um de cada vez. Claro. Eles são a mesma distância quando ela não queria. Então, é por isso que acho que podemos fazer a entidade por enquanto, mas você pode facilmente facilitar a grade de repetição. Então, o primeiro é seguranças. Em seguida, perguntamos histórias nas notícias e eventos. Na verdade, vamos digitar isso como uma cesta está boa. E depois foram nossas histórias. Peça desculpas, continue cometendo erros ortográficos. Tenho um microfone enorme na frente do meu rosto. Posso ver meu teclado. E então, querendo apenas movê-los um pouco. E então vamos duplicar isso segurando Alt e arrastando. E vou duplicá-lo. E então temos notícias e eventos. Notícias e eventos. Digamos, eu realmente quero sempre capitalizar também. Então, vamos nos certificar de que podemos fazer isso. Então, em vez de tê-los todos minúsculos, então teremos capitalizados assim. E esses já estão bem. Então, novamente, poderíamos ter usado bolha de grade repetida, acho que vou fazer é apenas apagar meu olho. E então eu vou alinhá-lo a este aqui, eu acho. E nós só teremos cada um deles em uma coluna própria. E você pode ver que essas linhas estão aparecendo, o que me permite saber que elas estão perfeitamente alinhadas. Então, novamente, este, provavelmente não vamos fazer isso por colunas porque obviamente alguns desses itens são mais longos que outros. Então, o que vamos economizar você basta escolher um valor. Então eu acho que o que eles fizeram foi, acho que seu slide 28 pixels em termos de espaçamento. Ok, Então, em termos de alinhamento, menos apenas por falha, então eu acho que foi algo como 24 pixels de ponta a ponta. Então, se o fizermos, podemos realmente nos livrar da grade por um momento. E vamos fazer a distância lá. Então ele escreveu para medir a distância. Você pode manter pressionada a tecla Alt ou Option em um Mac. E isso lhe dirá o quão longe você está do objeto mais próximo dele. Então, são 25. Vamos fazer o mesmo para todos eles. Então, são 25 também. Bem, meu show vinculado, então também é 25 e lá estamos nós. Então, tudo isso agora está perfeitamente alinhado. Nossa grade. Então, todos nós estamos agora no meio. Se você quiser verificar no meio, se você selecionar todos os itens juntos, você pode querer fazer isso como um grupo. Se quiséssemos como um grupo, você poderia clicar com o botão direito do mouse e, em seguida, basta clicar em grep. E dessa forma, se você quisesse ter certeza de que estava tudo no centro, você poderia fazer isso de uma e assim, você sabe, de fato, está perfeitamente alinhado dessa maneira. Então, vamos passar isso novamente. Certifique-se de que esteja no centro que está. Certo, isso parece muito bom. Ok, então vamos nos livrar da nossa grade por um momento. E agora podemos ver que temos praticamente a mesma coisa acontecendo aqui. E isso é praticamente o nosso navbar feito. Então, na próxima parada, veremos adivinhar nosso tipo de seção de heróis salgada e todos os ativos para isso. Oh, eu cheguei ao lado esquerdo. Assim, você pode literalmente arrastar sua imagem e instalar fazendo isso. Ok, então, a seguir, temos nossa seção de heróis. 24. Seção de Herói: Ok, então, em seguida, temos nossa seção de heróis hoje. Então este será relativamente fácil. Tudo o que precisamos fazer é colocar essa imagem no lugar e, finalmente, criar como uma forma de retângulo para o tipo de caixa de texto. E também se esse tipo de lógica não for realmente um botão, apenas como uma caixa de subtotal. Mais uma vez. Então, vamos começar. Então, antes de tudo, vamos arrastar esta imagem agora é que estamos dizendo que essa imagem em particular já foi dimensionada corretamente. Então, na verdade, não é qualquer coisa que precisamos fazer com isso para que funcione. Isso parece um pouco fácil. Então, geralmente, suas imagens não se encaixam perfeitamente. Então, o que você teria que fazer é arrastá-los para uma forma como fizemos no início do curso. Eu meio que combiná-los com uma forma e então você meio que os move como quiser. Você pode ver aqui que isso já está acontecendo e, na verdade, já foi massa para uma forma. Faremos isso de novo em apenas um minuto. Podemos redimensionar algo. Mas, novamente, desafie, faça você saber que é por isso que isso se encaixa tão bem. Já foi feito. Os outros que vamos vir não tinham sido feitos. Então vamos, chegaremos a isso. Ok, então essa parte é super simples, já estava perfeitamente no lugar. E ao lado de planejar o que faremos. O que eu sempre gosto de fazer é bloquear esse plano de fundo no lugar. Sempre que você tiver uma espécie de fundo que você não tem coisas em cima de seu medalhão só assim, você não pode acidentalmente começar movê-lo, porque se você começar a mover as coisas, você vai inevitavelmente, acidentalmente, clique nele. E então a mídia, o que, claro, você não quer fazer. Certo, então primeiro, acho que vamos criar esse tipo de texto e título de herói. Então, as primeiras coisas primeiro, vamos colocar nossa grade e veremos como eles estão fazendo isso. Então eles estão alinhando novamente com este aqui. E está passando por meio de duas barras lá. Então, faremos o mesmo tipo de coisa, certo? Então, vamos retirar nossa ferramenta retangular e vamos libertar a forma 246. E então algo assim. Mais uma vez, não vou necessariamente copiar exatamente. Chegaremos o mais perto que pudermos apenas olhando. Se você quer ser super exato, o tamanho exato que eles estão fazendo, você pode dizer, bem, você pode dizer, bem, não é por isso que estamos fazendo isso. Se ele estava fazendo isso costumava ser para se acostumar a usar o XD, mas se você quiser chegar exatamente à mesma altura doce, então 416 McCann, só para o inferno. Por que não? Vamos fazer isso. Certo. Então, com isso, não vamos nos certificar de que está no meio está agora. E há duas linhas me dizendo isso. Então, novamente, mais uma vez, porque agora vamos começar a colocar as coisas em cima disso. Na verdade, vou trancar isso no lugar também. Então, isso será Control L ou Command L, ou você pode simplesmente clicar com o botão direito do mouse e bloqueá-lo dessa maneira também. Novamente, a razão para o desperdício é que vamos colocar qualquer coisa, mas sempre que você colocar algo em cima de algo, você não quer ter o perigo de mover as coisas em torno de zumbis, assim , porque isso é irritante. Ok, então vamos voltar a ele. Certo, então certifique-se de que está bloqueado. E você sempre sabe que é muito ter esse símbolo apareça. Ok, então primeiro, vamos colocar nossos textos. Então, vou apenas copiar e colar este também. Vou começar a digitar alguns desses. Mas este eu acho que iria apenas colocar como está. E então, para este pedaço de texto também, acho que vamos apenas copiar e colar aquele neste que faremos de forma diferente. Então isso é colar isso. E, novamente, certifique-se de que tipo de Central. Certo, então está tudo bem. Então, com este próximo, em vez de eu apenas digitar e eu queria apenas mostrar o que aconteceria na vida real se você estivesse fazendo isso. Então, achamos que isso está particularmente alinhado, qualquer coisa como tal. Então, vamos meio que, ao olhar, ele vai se livrar da camada fora agora da nossa grade. E então vamos começar a digitar. Por padrão, se eu começar a digitar algo no momento, é o tipo errado de fonte para lá. Portanto, temos que ter certeza de que podemos encontrar o correto. Agora, a maneira como eles estabeleceram isso, tal forma em que é relativamente fácil ver você um G9 com isso, ele realmente mostra que a fonte em um grau também. Então você pode meio que obter uma falha. Eventualmente, use um monte de tamanhos de fontes diferentes por lá. Portanto, é um pouco mais complexo do que talvez seus projetos iniciais possam ser Bothell. Eu meio que faço isso só para mostrar a vocês, apenas vejam com o que você pode se deparar se você mesmo estiver criando isso. Obviamente, você poderia fazer isso de tal forma que você entenderia melhor. Mas só para você saber, se a velocidade é realmente essa que queremos. Então, vamos antes de tudo apenas digitar isso. Então, se você entrar na ferramenta Adicionar texto e vamos apenas digitar aqui para que possamos dizer por enquanto, e faremos isso é hashtag e interromper a mudança climática. E o que queremos fazer agora é trazê-lo aqui. E também queremos ter certeza que essa fonte é específica. E pelo pessoal, estamos usando nossos estilos de caracteres dentro de nossos ativos de documentos. Ele é alterado automaticamente para isso novamente, CPU, tudo bem, e o que faremos é usar essa opção aqui, que é o tamanho fixo. E vamos escalar isso um pouco para trás e depois arrastar isso para baixo. E então temos praticamente o mesmo que eles têm. Então, vamos nos mover como eu sempre toco. E faremos isso algo assim parecer bom para mim. Embora, na verdade, esteja cobrindo a parte de trás dos sujeitos tinha base baixa. Então, devo admitir para mim, na verdade, se possível, gostaria de tentar obtê-lo para que o texto não seja quantidade de cabeça, que é o ar. Então eu poderia apenas desbloquear isso e eu ter um pouco de brincadeira e apenas mudar os esforços são um pouco, eu poderia apenas me mover onde quer que seja um pouco mais. Só para que tenhamos um pouco mais de espaço para brincar ou pode mostrar que é assim também. Então, eu só vou tocar. E sim, acho que estamos apenas recuando um pouco mais. Mais uma vez, eu só mudei um pouco. Mais uma vez, é praticamente o mesmo que eles fizeram. Mas, novamente, isso só lhe dá um pouco mais de espaço para respirar. Novamente, isso servirá contrato qualquer maneira quando você entrar em diferentes tamanhos de tela, mas geralmente você não quer textos meio que oh, a cabeça das pessoas demais, se possível. Certo. Então isso é praticamente esse pouco que nem sempre tem que fazer agora é colocar esse poder aqui. Então, vamos criar uma outra forma de retângulo aqui. Então, vamos dar uma olhada na grade novamente e veremos o que eles estão aprendendo. É preciso o Senhor, eles estão alinhando-o até a borda desta primeira barra, passando, na metade do caminho para a próxima. Então, vamos fazer uma coisa semelhante, eu acho. Então, vamos colocar nossa ferramenta retangular e começar a partir daí. Algo assim. Eu acho. Certifique-se de que ele esteja centrado. E vamos ter isso com nove mais amplos. E teremos a cor de preenchimento e esse tipo de azul escuro. E então, apenas por velocidade, vou simplesmente copiar e colar esse elemento de texto. Certifique-se de que ele esteja selecionado. Cole isso e verifique se está no centro. Então, tipo de encaixe para se livrar da minha grade só para que você possa ver isso melhor. Então, novamente, você vê aquela mira lá. Então isso está perfeitamente alinhado. Certo. Tão honrado que agora está praticamente nossa seção de cabelo completa. E então, em seguida, vamos para esta próxima parte aqui, que é uma espécie de, eu acho que você chamaria isso de seção de ação. 25. Seção de ação em ação: Ok, então, em seguida, temos nosso tipo de coisa que chamaremos isso diz seção de ação. Então, isso deve ser relativamente fácil hoje. Tudo o que precisamos para obter nossa ferramenta retangular para dar um fundo verde. E então vamos usar a grade de repetição para criar o tipo de quatro colunas aqui. Ok, então vamos começar. E também vamos redirecionar o botão que já criamos para cabelo, que é chamado de H0. Eu vou literalmente apenas mudar o texto para eles, colocá-lo lá. Então, o que faremos inicialmente, é começar com uma espécie de fundo verde. Ok, então primeiro, vamos pegar nossa ferramenta retangular e sair. E então vamos apenas desenhar isso diretamente por baixo. Então, algo assim parece muito bom. Se quiséssemos obter o espaçamento exatamente o mesmo, podemos fazer diz 261. Novamente, não necessariamente a equipe de matemática, que há apenas 240, isso se deve a 61. E então o que faremos é que , na verdade, parece um pouco diferente. Então eu acho que o que está acontecendo aqui é que isso está indo por baixo disso. Então, provavelmente é melhor como tínhamos antes. Então isso é apenas um T4. E isso parece melhor, certo? Então está tudo bem. E então vamos dar isso vai se livrar da borda e obteremos essa a cor de preenchimento de verde. E novamente, porque é um plano de fundo e não queremos mover isso acidentalmente enquanto estamos tentando mover as coisas, vamos trancar isso no lugar. Então você controla um L para bloquear. Então você verá que os símbolos de bloco apareceram novamente. Se fosse um Mac, será Command. E agora está tudo bem. Agora, o que fazemos então é criar um desses e, em seguida, usaremos a grade de repetição para basicamente fazer isso ao longo da linha. Então, vamos fazer isso agora. E acho que vou pegar emprestado aquele lá. E vamos colar isso no lugar. E vamos levantar nossa grade só para ver onde estamos. Portanto, precisamos ter certeza de que isso está alinhado incorretamente. Então, isso precisa estar aqui. E vamos fazer por aí sobre o F e agora talvez. E então precisamos colocar nossos textos no lugar. Então, opa, vou apenas mover isso. Então, novamente, vamos pegar emprestado este poste aqui. E vamos copiar e colar isso em. E vamos nos certificar de que isso esteja alinhando corretamente. Então cinco com preenchimento. Então está tudo bem. Então, o que faremos agora é selecionar esses dois itens juntos. Vamos nos livrar da nossa grade. Mais uma vez. Se eu fosse selecionar isso ou tentar se eu não tivesse bloqueado isso no lugar, quando tentei arrastar para fazer isso, ele teria movido o plano de fundo. Então, novamente, essa é apenas outra razão pela qual você quer tentar bloquear por que eu geralmente bloqueei fundos no lugar. O que estou tentando fazer, esse tipo de coisa. Certo. Diga o que faremos, certifique-se de que está tudo junto. Você pode agrupá-lo se quiser. Você não precisa dTTP grão. Então, precisamos fazer é clicar em Repetir Grade. E agora vamos arrastar isso para fora para que tenhamos para você, ok, isso parece muito bom. Temos nossa grade de volta apenas por um momento e garantiremos que tudo esteja alinhado corretamente. E eu acho que o que eles fizeram, eles praticamente têm que ir até o final deste tipo de segundo para o último chefe. E vamos fazer o mesmo tipo de coisa. Então, vamos aumentar o espaçamento dos Sólidos para que possamos fazer isso diz algo como apenas este ponto meu booleano dizer algo parecido com isso parece emprestado semestralmente. Então, já que está entre essas bolas, talvez essa seja a melhor maneira de fazer isso. Ok, então isso parece muito bom. E então o que podemos fazer é no G3P, eu vou mantê-la sub t. E então podemos simplesmente entrar em todos os textos diferentes que temos. Digamos que este será voluntário. Em seguida, temos que compartilhar e doar. Então, vamos adicionar isso e depois doar para o último. Ok, então isso é praticamente a maior parte dessa seção ou não. Mais uma vez, super, super fácil. Usando a grade repetida se você puder imaginar como isso seria sem ela, seja uma dor real. Então, obviamente, você teria que ter feito um e depois fazer outro. Ou você pode simplesmente duplicá-lo e dizer que poderíamos ter pressionado Alt e então meio que fazê-lo assim. Essa é uma maneira que poderíamos ter feito isso. Tenta alinhá-lo dessa forma. Mas, novamente, Repeat Grid é tão rápido e fácil, especialmente porque você pode mover o preenchimento no meio. É por isso que gosto usar o Repeat Grid o máximo que puder. Ok, então mais um pouco a fazer. Então, precisamos ter certeza de que também temos esse botão no lugar, o que é praticamente um smack bang no centro. Ok, Então, em termos de fundo, o que vamos fazer é basicamente duplicar isso, mas agora temos aqui e meio colocá-lo aqui e alterar os dados de texto. Então, se você já tivesse um componente classificado para isso, você poderia simplesmente arrastá-lo de uma seção de componentes aqui. Estou trazendo só porque isso está tão perto, podemos muito bem fazer isso e podemos mover isso no lugar, então queríamos. Agora, obviamente, no momento, você pode ver aqui que a está caindo embaixo da nossa seção. O que queremos, é claro, é tê-lo no topo. Então, o que queremos hoje é clicar com o botão direito do mouse e então vamos apenas em Bring to Front, e lá vamos nós. Então, vamos usar nossas linhas aqui para garantir que tudo esteja perfeitamente centrado. E isso parece muito bom para mim. Brilhante. Ok, então só para fazer que o WHO Office esteja meio centrado também, vamos nos certificar de que tudo isso é selecionado e arrastá-lo até essas linhas estejam nos dizendo que é meio que tudo as distâncias são iguais. E lá estamos nós. Essa é praticamente nossa seção de ação. Não quero mais coisa hoje. Vamos apenas mudar o texto. Digamos que vamos mudar isso para agir. Certifique-se de impostos no sentido, e lá vamos nós. Isso é praticamente tudo isso agora completamente feito. Ok, então, em seguida, temos o que fazemos sanção sobre o que vamos fazer aqui também é usuário uma nota P para criar esse tipo de seção de código que temos aqui. 26. O que fazemos a seção: Em seguida, temos nossa seção o que fazemos. E, como mencionado anteriormente, usaremos nossa grade de repetição para criar essa seção de chamada com três colunas. E, obviamente, o que faremos é apenas uma espécie de pop nas imagens que estão separadas. E também usaremos nosso botão que temos no topo aqui e apenas alteramos a área de texto para ler mais. Novamente, Gemini, se você criar seu próprio projeto, você provavelmente criaria esses componentes que você pode arrastar. Temos todos os componentes aqui, mas não estamos prestando muita atenção por isso por enquanto. Porque eu quero que você construa todas essas coisas à medida que vamos. Mas geralmente é isso que você faria. Ou você pode simplesmente segurar Alt ou Option e, em seguida, um pouco capaz de def e através, se quiser. Isso não funcionou. Isso meio que não está agrupado ainda. De qualquer forma, então vamos começar. Então, integramos nosso tipo de seção agora pois usaremos nossa ferramenta retangular mais uma vez, vou me certificar de que ela se alinha com o ar. E então nosso anterior olhou para o espaçamento disso, que fará 177. E também vamos nos livrar da fronteira. Opa. E daremos uma cor azul. Agora, há uma coisa que eu quero mencionar na verdade. Então, nesta versão específica disso, nem todo o espaçamento é exatamente o mesmo. Então, isso é algo que você vai querer pensar ao fazer seu próprio design. Especialmente quando você está vindo para se desenvolver, você quer pensar em um tipo de preenchimento consistente para cada seção. E com isso quero dizer basicamente quanto espaço há desde o topo desta ação até o início do primeiro elemento. E o mesmo da parte inferior do último elemento até a parte inferior da seção, você geralmente quer tentar ser o mais consistente possível, a menos que seja um motivo específico pelo qual você está tendo uma seção mais curto que o outro. Como estamos copiando isso, pode não ser necessariamente absolutamente perfeito. Mas geralmente você quer tentar mantê-lo consistente e meio que tê-lo. Portanto, é o mesmo em todo o site também. Então eu não sei se este está feito, não completamente, mas é isso que vamos tentar fazer pelo resto das diferentes seções que temos. Certo, então as primeiras coisas primeiro, vamos fazer o botão. Então, o que podemos simplesmente dias, certifique-se de que vamos para este botão aqui, certifique-se de que está tudo selecionado em conjunto. E se você pressionar Alt e arrastar, poderá criar outra instância desse osso. E principalmente o que queremos fazer é garantir que ele esteja entrando no frenesi pode ver no momento, porque colocamos esse novo tipo de retângulo em nossa próxima seção. Isso está chegando abaixo disso, mais uma vez clique com o botão direito do mouse ou você pode usar um atalho de teclado. Estou trazendo isso para as frentes e agora você pode realmente vê-lo. No entanto, queremos que o plano de fundo seja branco e o texto fique embaçado. Então, vamos agora mudar isso. Portanto, certifique-se de que o plano de fundo selecionado primeiro, teremos esse branco. E então o texto terá como nosso círculo azul. Então está tudo bem. E em termos de espaçamento, novamente, meio que depende. É diferente de projeto para projeto. Não há nenhum tipo de coisa. Isso está correto. E então, olhando para este último D, algo como 200, acho que para essa seção em particular que pareceria, todos podemos alterar isso assim que o fizermos para que possamos decidir o que queremos que o padrão seja. Novamente, mesmo que você esteja desenvolvendo isso sozinho, você pode meio que, quando chegar ao desenvolvimento real, Paulo II, você pode decidir por si mesmo o que você quer que seja. Ok, em seguida, vamos apenas copiar e colar este texto. Eles só precisam economizar tempo. Então copie e cole-o. E vamos novamente, tentaremos ter espaçamento consistente dos elementos t. Então provavelmente teremos que isso é 40 do botão. Certo, então está tudo bem, certo? Então, agora precisamos criar nosso cartão aqui. Então, novamente, conheça essas ferramentas I Rectangle para ter que executar os principais elementos chamados no lugar. E então você também precisa compensar ligeiramente nossas imagens tão lentamente. E usaremos a grade para tentar obter muitas coisas também. Certo? E, obviamente, depois disso , usaremos nossa opção Repetir Grade. Então, primeiro, vamos pegar nossa ferramenta retangular. Vamos nos certificar de que ele esteja pelo menos aproximadamente alinhado. E então criaremos nosso cartão. Se você quiser ser exato com a versão que está feita, podemos ter apenas uma latência local ou a largura desse 320, para que possamos fazer o mesmo. Certo, e então a altura provavelmente é um pouco diferente. Então, o que temos? Digamos que a altura seja de cinco a oito, então isso é D, isso é D o mesmo a k. Já que estamos fazendo 40, 40 é 80, já que essa imagem será um pouco mais alta. Então, vamos fazer isso de novo. Ok, então primeiro polígono, também algo que eu sempre esqueci hoje, é que você realmente quer bloquear esse fundo azul no lugar para garantir que ele esteja selecionado. E, em seguida, Control e S ou Comando. E agora, e agora, quando eu mover isso, ele não vai mover o plano de fundo também. Ok, então a primeira imagem que precisamos é como plantas, então tudo bem, então vamos agora colocar isso no lugar. Então, vamos abrir nossa grade. Então esse é o foco do seu teclado. Então, o que faremos aqui é tentar combiná-lo alto. Eles fizeram isso. Ok, então parece que eles estavam alinhados com a seção Col. Então, parece que isso é meio que indo metade dessa bola. Então, faremos o mesmo tipo de coisa. E isso, na verdade, é praticamente perfeito e diga, sim, tudo bem. E, obviamente, quando repetimos isso fará o mesmo para cada um deles. Você precisa ter certeza de que suas imagens são todas do mesmo tamanho. Sorte teria isso porque eu lhe dei as imagens como o lado correto. Isso não seria um problema para mim. Mas, novamente, tenha em mente que se você está criando seu próprio projeto, você terá que se certificar que tudo é do tamanho correto você quer que seja tudo. Você pode mascarar a forma da imagem e meio que sim, você pode alterar como se quiser. De qualquer forma, diga que está tudo bem. Agora vamos apenas aparecer no nosso texto. Então, todos nós vamos pegar emprestado e colá-lo. E você pode ver que estamos alinhando o texto com a borda dessa imagem. Então é isso que faremos por este também. Cientistas Putnam de volta. Então, estamos fazendo 40. Fique com isso. E, novamente, pegaremos emprestado este texto fictício. Basta copiar isso. Apenas alinhe isso. Então, parece correto. Então, vou fazer. Então, em termos de espaçamento dentro do Nessus, algumas maneiras de fazer isso. Parece que eles têm um tanque um pouco mais baixo, o que meu digno faria pessoalmente, acho que o que eu faria é ter o texto um pouco cortado para o título, então talvez tenha o barco e em direção ao fundo. Esse é um tipo de aplicativo pessoal é um tipo de gosto pessoal na verdade. Mas acho que o que vou fazer, sim, acho que vou fazer isso. E, em seguida, no botão, vamos redirecionar a partir do topo aqui. Então, vamos apenas ampliar nosso botão de doação. Certifique-se de que isso esteja novamente agrupado. No momento eu tenho isso como um componente. Então, vou apenas segurar o Alt e depois vou arrastar e isso vai me deixar criar uma cópia dele. Obviamente, o que vamos fazer é mudar isso um pouco. Eu e você podemos ver que está realmente vindo por baixo das sanções. Então, a mesma coisa novamente. Precisamos ter certeza de que ele é trazido para a frente para que possamos realmente vê-lo. E então vamos colocá-lo no fundo aqui. Ok, então você pode ver que temos um problema aqui com esta pequena caixinha não é bem o fim. Isso tem a ver com a opção que temos aqui para o tamanho fixo. Então, se o colocarmos de volta aqui, você verá as caixas e descomentará a borda. E agora podemos alinhá-lo muito mais fácil. Então é assim que faremos isso. Então, algo assim. Quero tentar garantir que o preenchimento da parte inferior seja o mesmo que este é do topo. E então vamos nos certificar de que está selecionado. Então, são 40. Então, faremos o mesmo pelo botão também. Portanto, vamos nos certificar de que está a 40 pixels de distância daí. Então, vamos apenas mover isso um pouco para cima. Um pouco mais. Brilhante. Ok, então está tudo feito. Ok, então esse é praticamente nosso primeiro cartão concluído. E então o que faremos agora é usar nossa grade de repetição para superá-lo. Então, na verdade, desculpe, a imagem não está bem em ascensão. Isso precisa ser um pouco alto. Então, vamos novamente, faremos o mesmo por isso, que é garantir que tudo isso esteja alinhado corretamente. Então está tudo bem. E já que temos 40 como espaço e faremos o mesmo pela imagem também. Ok, então agora estamos todos bem. Então, o que faremos agora é garantir que tudo esteja selecionado e, em seguida, clicar em Repetir Grade. E então podemos arrastar isso três vezes e depois ajustar o espaçamento por mais que precisemos. Vamos colocar nossa grade de volta no lugar. Acabei de dizer que podemos alinhar isso corretamente e você pode ver que não estamos longe na verdade. Então, tudo o que precisamos fazer é arrastar esse espaçamento até que ele se encaixe no lugar lá. E isso agora é praticamente perfeito. Eu acho. Isso parece praticamente o mesmo que eles têm acontecendo. Certo. Então, lá estamos nós. Isso é praticamente isso feito. Vamos nos livrar da minha grade. Agora vou substituir essas imagens pela correta. Portanto, se você clicar duas vezes nele, desculpe se você clicar com o botão direito do mouse sobre ele e vá e substitua a imagem. E se você tiver essas imagens em papel alumínio, então, por perto, você pode chegar rapidamente a elas. Então, neste caso, eu realmente vou ter, então vamos fazer isso. E então nós temos o que é isso e dizemos que é esse, eu acho. Ou eco-cidade alternativa. Distraí-los do meu comportamento também, usaria por um minuto novamente para fazer isso. Então, eu sou executado novamente, então chamaremos Substituir imagem. E então temos este aqui. Certo? Então, o que substitui o texto agora. Então, na verdade, ataques semelhantes estão faltando caixa. Então, como isso estava realmente escondido, precisamos apenas ler apenas que isso é um pouco na verdade. E então vamos nos certificar de que temos isso. Então, novamente, essa é a beleza da grade repetida porque agora temos que alterar algo depois do fato. Como temos uma grade de repetição, podemos realmente ajustar o e quando o fazemos apenas para cada um. É por isso que é super, super útil usar é coordenar o que fizemos com a resposta. Certo, então está tudo bem. E, obviamente, se precisarmos ajustar esse texto fictício, isso também será o mesmo. Assim, podemos fazer o mesmo com isso e garantir que seja tudo igual. E também acho que o que também faremos é talvez apenas movê-lo para baixo um toque, talvez, ou está tudo bem? Agora, na verdade, estou feliz com isso. Certo. Então, tudo o que temos que fazer agora é apenas aparecer no texto correto, que farei fora da câmera só para economizar tempo. Você pode ver que quase obteve a quarta manometria que eles querem. Ok, espero que tudo isso faça sentido. Obviamente, o que teria que fazer agora é obter a zona alvo correta. Basta mudar isso para ler mais, que seria o mesmo que os outros também. E então temos nossa ação de causa praticamente concluída. E, em seguida, vamos entrar em nosso tipo de seção de fatos ou seção de DNA, como vamos chamá-lo. 27. Seção de Stat: Ok, então, em seguida, temos nosso tipo de sanção de prova social ou tipo de seção de status, assim como você chama. Ok, desculpe novamente, o mesmo tipo de coisa. Mais uma vez, agora temos uma imagem de fundo. Vamos usar uma grade de repetição mais uma vez para fazer tudo isso. Então, isso vai dizer muito tempo. É tudo muito semelhante ao que fizemos com nosso tipo de seção de cores. Certo, então vamos começar. Primeiro de tudo, precisamos colocar nossa imagem. Novamente, isso acontece de ser praticamente pontual em termos de dimensionamento. Se não fosse obviamente, poderíamos manipular isso, no entanto, precisaríamos. Mas, como acontece, isso foi muito bom. Então, no próximo casal, acho que fazemos isso. Ele só vai adicionar texto no lugar, Wang, e simplesmente, basta copiar e colar isso no lugar. Certifique-se de que tudo esteja totalmente alinhado. E também precisamos colocar nosso botão no lugar. Então, vamos apenas pegar este emprestado. Estou estourando isso por baixo. Você pode ver o que realmente não podemos ver nada porque isso é meio que embaixo das seções. Clique com o botão direito do mouse e depois apenas trazemos para a frente Vamos vê-lo novamente. E vamos fazer agora é apenas mudar o texto para agir. Então, faremos isso agora. Então, tome medidas. Mais uma vez, vamos apenas alterar a maneira como isso está olhando para os fins do Boston meio que estão sendo alongados pela opção que selecionamos aqui. Então, em vez do tamanho fixo, basta colocá-lo de volta para a largura automática. E isso vai meio que colocar isso mais no lugar para que nós vamos. E alguns de nós têm, tem 40. Certo, isso parece muito bom, certo? Então, na próxima abertura, então criando nosso tipo de seção de estatística como alguns desses, alguns dos textos Aqui estão repetições é que eu não vou mexer com textos do que Alpha. Você pode fazer isso sozinho se quiser. Mas vamos pelo menos criar um pouco esse tipo de ícones sociais. Nós os levamos para a mesa lateral esquerda terá que criar o círculo em que vou. Certo, tão bem. Vamos agora garantir que nossa imagem de fundo esteja bloqueada para que possamos começar a manobrar as coisas ao redor. Provavelmente começaria desenhando nosso retângulo. E vamos tentar garantir que ela esteja alinhada à nossa grade também. Então você pode ver que este que eu tenho aqui está alinhado a esse tipo de segundo 1, segundo ao último. Então é isso que faremos também. Comece por aqui. E em termos de que abrangência, abrangendo seis chefes diferentes o ensaio, vamos fazer o mesmo. Certo, e isso parece certo para mim. Talvez talvez uma corda ligeiramente alta. Bem, para isso em apenas um momento. Certo. Então, vamos começar. Então, o que faremos muito para eu pedir emprestado um gabarito que já criamos e dissemos Provavelmente pegaremos o que temos aqui. Então, se nos livrarmos da grade iônica por enquanto, vamos apenas duplicar isso. Mais uma vez. Certifique-se de que podemos trazê-lo para a frente que possamos vê-lo. Os sons colocam isso no lugar. Vamos apenas trazer minha grade para ver há alanina para qualquer coisa em particular que eles dizem, vamos fazer o mesmo. E isso será agora, você sabia? Então, vamos mudar isso para AK. Ótimo. E digamos que um texto espacial é realmente enviado porque nós meio mexemos com isso um pouco. Apenas se livre da nossa grade por apenas um momento. Brilhante. Certo, então está tudo bem. E vamos começar a colocar nosso texto no lugar. Vou pegar isso emprestado e colar isso lá dentro. E talvez mostre mais um espaçamento. Novamente, basta pegar emprestado este bloco de texto e colá-lo lá também. Ok, Então, em termos de deixar isso tão espaçado corretamente, o que podemos fazer é bloquear esta seção também para que possamos obter isso como queremos que ela seja dizer como ter esse tipo de no meio . Sim, isso parece muito bom para mim. Em seguida, precisamos começar a criar nossos ícones sociais. Então eu só preciso fazer é criar um círculo e depois estourar e nossos ícones sociais no lugar. Tão super, super simples. Então, vamos pegar os ciclos do céu no primeironome vai pegar os ícones apenas um momento. Só recebe nossa ferramenta de elipse. E então o que faremos é manter pressionado Shift. Por isso, cria um círculo perfeito. Parece equipe, que eu posso dizer algo assim. Vamos nos livrar da fronteira. Ele precisa ser de cor verde. E então eu, os ícones sociais ficarão azuis, acho que sim. Certo. Ok, então vamos pegar esses. Só eu, há EVA. Então, do jeito que eu acho que vou fazer isso, esses grupos que acabamos de escrever apenas por um momento. Certo, então primeiro, o que temos? Então, temos o Twitter em primeiro lugar. Então, vamos estourar isso. Então, se nós apenas pegarmos isso e puxá-lo para dentro, isso parece muito bom. Talvez um pouco maior. Sim. Posso dizer se você segurar Shift. E isso parece muito bom. Ok, então a seguir, o que vamos fazer é simplesmente uma duplicata do que já temos aqui. E então vamos apenas aparecer no ícone do Facebook em vez disso. E talvez façamos isso um toque maior também para balançar combinações com o tamanho. Certo, ótimo. E então uma coisa que faremos é agrupar ambos juntos assim. E então vamos ficar incentados. Sim. Acho que parece que posso dizer algo assim parece muito bom. Certo. Então estamos praticamente, praticamente lá. A única coisa que deveríamos ter feito último, na verdade, nesta pós-instalação, você deve sair do caminho, porque também não queremos necessariamente duplicar um Boston para cada um. Então acabei de sair do caminho por enquanto. E vamos nos livrar dessas fronteiras. Também não queremos isso. Ok, então agora desbloqueei tudo e o que vamos fazer é selecionar tudo juntos. Quando eu vou clicar em Repetir Grade, e então podemos arrastar isso para baixo. Então, vamos ter para eles para que possamos obter e como esses espaços diminuem. Certo, então precisamos ser um pouco mais, algo assim. Experimente 35. E então talvez isso seja um pouco grande demais na verdade. Então talvez possamos facilmente apenas mim esse toque arredondado. O mais importante é que o tenhamos centrado na seção que temos. Então, vamos apenas garantir que isso não aconteça. Então lá vamos nós. Então, isso é realmente centrado. E sim, isso parece muito bem para mim. Hum, talvez tenhamos feito isso um pouco grandes demais. Então, se for esse o caso, o que podemos fazer é clicar neles enquanto ainda estamos na grade de repetição. E se mantivermos pressionado Alt ou Option, se você estiver em um Mac, você pode ver como eu faço isso está movendo o espaçamento tanto acima quanto abaixo do próprio elemento. Então, se eles são um pouco grandes demais, talvez seja assim que você faz isso. Então, vamos torná-los um pouco menores talvez para algo assim. E então você pode dizer meio que fizeram se todos eles, em vez de ter que apenas todos, todos eles individualmente e dizer, vamos voltar, certifique-se de que eles são todos slides juntos. Eles dizem, e nós vamos e depois vamos nos certificar de que está centrado. E isso serve. Ok, então está muito bem. E então vamos colocar esse botão de volta onde estava. Vamos recuperar nossa grade. Eu deveria estar fazendo para garantir que estes estejam alinhados da mesma maneira. Acho que estamos praticamente bem. Estou um pouco mais para o lado. Sim. Oh, ok. E então, mais uma vez, isso coloca as necessidades de voltar para a frente. Tudo bem. Certo, isso eu, tudo bem. Brilhante. Então, estamos praticamente acabados com essa seção. Agora. Vamos dar uma olhada rápida como vamos, vamos fazer tudo está alinhado corretamente? Isso não é exatamente o mesmo. Vamos agrupá-los e apenas movê-los um pouco para cima. Vou alinhá-lo ao topo desta caixa aqui assim. Ok, então ele talvez seja um pouco diferente do que eles fizeram, mas é praticamente o mesmo tipo de coisa. E não está bem alinhado corretamente. Acho que é. Sim, isso é ótimo. Certo. Então, é praticamente isso. Vamos mudar o lado da tecnologia é o mesmo. Ok, então isso significa que estamos praticamente acabados com essa seção. Então você pode ver que somos praticamente iguais, talvez porque o espaçamento para esta seção seja um pouco diferente. Mas, essencialmente, temos o mesmo tipo de coisa acontecendo. Certo, então o Paul está pronto agora. E agora, em seguida, vamos criar nossa menor seção. 28. Seção de slider: Certo, então estamos chegando lá. Então, em seguida, temos nossa seção de controle deslizante. Então, novamente, isso será bastante simples para apenas colocar uma imagem em jogo. E então teremos nossa ferramenta de retângulo para criar esse tipo de caixa de cotação. E então vamos barrar ableton de um que criamos anteriormente. E depois. Vamos apenas criar esse tipo de indicadores deslizantes usando a ferramenta elipse. Certo, então vamos começar. Então, antes de tudo, precisamos criar nossa seção, mesmo que seja meio espaço em branco, ainda vou criar um retângulo para esta seção de qualquer maneira. Então, vamos tentar manter isso praticamente o mesmo. Na verdade, vou deixar o conselho neste momento. E também vou trancá-lo no lugar. E a razão é só para que possamos ver onde nossos limites. Ok, então agora precisamos colocar nossa imagem no lugar. Então, se apenas diminuirmos o zoom e colocarmos essa imagem, também vou recuperar nossa grade apenas por um momento para que possamos ver o que estamos fazendo. E, no entanto, é um tamanho muito bom no sensor. E, obviamente, o que precisamos fazer agora é ter certeza de que obtemos nossa ferramenta retangular e apenas nossa ferramenta retangular e apenas sobreponha isso ligeiramente nesta seção também. Em seguida, usaremos a ferramenta Elipse para fazer isso em apenas um momento. Ok, então vamos fazer esse tipo de texto ou bloco de cotação. Primeiro de tudo, voltaremos para esse botão, todas as postagens no final. Não posso dizer isso. Vamos começar a desenhar que trará nossa grade volta novamente para que você possa ver com o que estamos trabalhando. E certo, vamos começar a partir daqui, eu acho. E vai se sobrepor como um unicamente para a próxima bola e algo assim. Vamos apenas garantir que ele esteja no sensor. Quero dizer, vamos ver o tamanho que temos para isso. 344. Perto o suficiente. Certo, diga que está tudo bem. Vou me livrar da minha grade para ter isso sem borda e teremos uma cor de preenchimento do nosso tipo de azul escuro. Não é tão bom. Então, pegaremos emprestado este elemento de texto aqui e copiaremos e colaremos isso. Então está tudo bem. E também seria o mesmo para este também, apenas para economizar tempo. Então, vamos ter isso como 10. Ótimo. Então, quase lá. Vamos pegar nosso tipo de indicadores deslizantes, o pescoço. Então, novamente, você pode ver hexadecimal, desde que você tenha verde, isso significa que eles também usaram grades repetidas. Então, vamos fazer o mesmo tipo de coisa semelhante a um vamos fazer isso agora. Então, um deles tem uma cor de preenchimento, um deles não. Nós vamos ter todos eles com, uh, com cor de preenchimento ASA antes de tudo, e então apenas meio que desagrupar a grade e, em seguida, fazer uma com se isso fizer sentido, fará sentido como fazemos. Então eu tenho a ferramenta de elipse agora e vamos segurar Shift pressionada e arrastá-la para fora para que possamos fazer um círculo perfeito. Diga que algo assim parece bom. E isso vai ter um, terá uma borda, mas não terá cor de preenchimento. A cor da borda será azul. E então usaremos nossa grade de pico. E vamos arrastar isso mais algumas vezes e agora vamos apenas o espaçamento tão árabe perto de algo como 10, acho que vai ter, ótimo. E então o que faremos é desagrupar a grade. Por ser eu 0, agora quero selecionar este por conta própria para que eu possa dar uma cor de preenchimento agora, enquanto esses obviamente não teríamos feito isso. Então, agora vamos nos livrar do West saindo de cor para essa. E agora você pode dizer que foi uma maneira rápida de fazer isso, robinson de fazer isso um por um. E espaçamento sábio, quão longe é isso daqui? Então, novamente, apenas para reiterar, sempre que você selecionar o elemento, mantenha pressionada a tecla Alt. Clique em arrastar. Também lhe dirá a distância de um elemento do próximo. Então isso é 56, então isso não é nada específico. Então, vamos ver se podemos fazer que algo realmente aumente antes de fazermos isso. Isso parece um pouco grande demais, então vamos torná-lo um pouco menor. Então, novamente, eles não estão mais na grade de repetição, mas como o glúten juntos, eu vou segurar Shift e então meio que encontrá-los um pouco para ficarmos um pouco menores. E isso parece certo para mim. Ok, então, a que distância está esse elemento da parte inferior? Vamos dar uma olhada. 25. Na verdade, parece. Acho isso , mas vamos ficar um pouco mais longe. Diga apenas um pouco mais prompts. O que você 35? Sim, estou feliz com isso. Certo. Então estamos muito, muito quase lá. Em seguida, queremos apenas pedir emprestado. Isso, coloca no meu VA, então vamos apenas apertar a tecla Alt pressionada e depois arrastar e então vamos soltar isso aqui. Eu me certifico de que seja trazido para a frente. E vamos colocar isso no lugar. Então, um lombo. Então, vamos ter 50, eu acho. E então diz ler mais desta vez. Então, vamos apenas mudar os textos Eva, e então vamos nos certificar de que ele está alinhado corretamente. Ok, então agora somos Appleton para o topo desta imagem, que vai pedir emprestado da que eu tenho aqui. Então, novamente, nós apenas seguramos Alt e vamos apenas mover isso para o lugar. Digamos, tenho certeza que isso se alinha com eles aparecem. Eles não o fizeram. Fazer essa mensagem não é necessariamente assunto. Quando redimensionarmos vai se mover de qualquer maneira, mas só por enquanto, vamos alinhá-lo com isso. Ok, hum, qual era o texto dessa parte? Então, histórias e agora está enviando mensagens de texto, basta ampliar. Então, novamente, o zoom que você pode fazer se você tiver um trackpad é óbvio, você vai beliscar e ampliar. Se você tem um teclado normal, mantenha pressionada a tecla Alt ou Option e, em seguida , basta entrar com a roda de rolagem. Posso dizer, vamos apenas ter certeza de que é o meio. E lá vamos nós. Ok, agora temos nossa sanção deslizante ou concluída. Agora que fizemos isso, podemos realmente clicar nele novamente e podemos desbloqueá-lo por um momento. E vamos nos livrar da nossa fronteira. Só porque, em seguida, vamos começar a colocar em um fundo azul para nossa próxima seção. 29. Salve a seção de futuro: Ok, assim por diante para a próxima seção. Diga o que ele, em primeiro lugar, é colocar nosso tipo de seção de fundo azul entrando na ferramenta de retângulo AI. E vamos nos certificar de que encontramos a borda desta mão e depois começaremos a desenhar isso. E então nós vamos nos livrar da borda e daremos uma cor de preenchimento de azul escuro. Então está tudo bem. E então, mais uma vez, trancaremos isso no lugar. Chamamos de mover acidentalmente qualquer coisa. Ok, então antes de tudo, precisamos colocar nosso texto em jogo. Então eu vou apenas copiar e colar isso sempre para velocidade e então esse cara no lugar. Então, vamos voltar apenas por um momento para que possamos ter certeza de que tudo está alinhado corretamente. Um cara. Certo? Certo, então está tudo bem. Ok, então vamos colocar nossa imagem no lugar substantivos, o que está muito lá. Ele só o pegará de uma seleção. E então, o que pode nos mostrar que está 0 corretamente alinhado. Então ela tem uma ótima volta para fazer com que a OMS fosse boa. E vamos fazer isso um pouco para que o arroz chegue a 50 de distância. Posso dizer isso. Então vamos encontrar uma boa abertura para obter nosso bóson e todas as minhas mensagens. Então, vou simplesmente copiar e colar isso. Eu sou só porque meio que faz sentido fazer isso. Vou arrastar isso para um comportamento assim. E então vamos ter isso um pouco abaixo. Na verdade, faremos nossa inversão, então vamos apenas copiar essa também. Nós só precisaremos, talvez sair trazido de volta para a frente novamente. Então, se apenas clicarmos com o botão direito sobre isso, Traga para a frente. Então, ainda temos um ligeiro deslocamento, então não está bem alinhado a ele, é apenas um pouco no centro dele. Então, faremos a mesma coisa novamente. Vamos pegar um ótimo banco e tê-lo neste aqui. E depois faremos o mesmo por isso também. Certo, ótimo. E então teremos nosso texto fictício no qual se livra como grade por um momento. Vamos apenas barrar isso mais uma vez, isso por aqui. Então, do jeito que eles têm espaço para fora, vamos meio que copiar peças de gelo. Não sei se faço da mesma forma, mas talvez seja alongado sobre toda a caixa em si ou talvez tenha todo o tipo de lugar sônico juntos. Mais uma vez, preferência pessoal. Então, vou apenas fazer o que eles fizeram apenas por facilidade. Vou apenas pegar este botão emprestado aqui. Mais uma vez. Eu quero que você apenas tenha certeza de que trazemos para a frente para que possamos dizer isso. E o que eles fazem? Então, se eles não estiverem prontos, alinhei-o dessa maneira. Então eu vou tê-lo um pouco de argila, então teremos é 40. Então, tudo combina e já está lido toupeira. Então está tudo bem. Então, o que podemos fazer uma emenda para economizar tempo, vamos copiar tudo isso juntos. O que temos aqui, eu estou colá-lo aqui embaixo, então faremos isso. Primeiro de tudo, digamos que vamos agrupar tudo isso juntos. Você poderia fazer dele um grupo se quisesse. E então o que faremos é segurar Alt e depois duplicaremos isso. E vamos apenas trazer esse caminho. Preocupe-se com o espaçamento em apenas um momento. Ok, obviamente precisa mudar o texto em apenas um momento. E então vamos ter nossa última imagem restante para esta seção no lugar, que é mu isso agora. E vamos recuperar nossa grade para que possamos começar a alinhar as coisas corretamente. Então, basta copiar o que eles estão fazendo aqui. Eles estão alinhando novamente como o início disso em um aqui. E é meio que apenas chegando ao limite lá. Então está tudo bem. Vamos fazer o mesmo tipo de coisa. Na verdade, não estamos longe de qualquer maneira. Então, vamos apenas mover isso um pouco mais adiante . E tão bom. E então, para este, este ainda vai estar alinhado a este aqui. Então, faremos o mesmo tipo de coisa. E vamos dar uma olhada na borda disso. Sim, está tudo bem. Certo. Então, estamos parecendo muito bons. Por fim, o que precisamos fazer então é ter certeza de que mudamos nosso texto. Então, farei isso fora da tela apenas para economizar tempo. Então, novamente, espero que tudo isso esteja fazendo sentido e isso seja relativamente fácil de seguir. Eu vou mover isso um pouco. Então, onde tipo de não haver uma lacuna com esses dois satélites, apenas baseados em grupos e mova-os um pouco mais perto. Vamos apenas ampliar e tocar apenas para garantir que eles estejam alinhados corretamente. Certo. Isso parece certo para mim. E então vamos pensar que vai fazer é então agruparemos tudo. Vou me certificar de que tudo esteja centrado perfeitamente. Basta voltar atrás. Certifique-se de que estamos na borda lá. Posso dizer que estamos muito bem. Na verdade, isso não demorou muito. Ótimo. Então, atualizarei as tags fora da tela. E, em seguida, temos uma espécie de I2 últimos bits para fazer, que é nossa seção de call to action e nosso rodapé. Então, este nós muito rapidamente, na verdade, o que eu provavelmente farei é fazer essas duas coisas juntos, porque dessa forma é muito longo e então eu, ok, então em nossa última parte dos projetos desta classe, nosso call-to-action e nosso rodapé. 30. Seção de CTA e rodapé: Ok, então em nossa última parte deste projeto de classe. Então, espero que você tenha que seguir o serif espero que tudo isso faça sentido. Agora, se eles tiveram isso devagar, fácil até agora porque já tínhamos todos os nossos ativos no lugar ou no tamanho, mas achei que fazia sentido fazer isso dessa maneira para você se acostumar a usá-lo. E então a emulação de outra coisa inicialmente, eu acho, é uma boa maneira de aprender. Como uma coisa, apenas para mencionar agora, certifique-se de que você está arrastando o texto para baixo. Então, todo o texto está no lugar. No vídeo anterior, acho que não tinha todos os textos compartilhando totalmente. Digamos que se você pensar, Oh, é um pouco estranho, apenas certifique-se de que a caixa de texto seja totalmente longa, alongada para que você possa realmente ver tudo. Então, talvez seja Y0 estranho antes. Certo, então aqui vamos nós. Precisamos fazer nossa seção de call to action e, em seguida, nosso rodapé. Então, faremos isso tudo como um vídeo só porque isso não vai demorar muito tempo. Ok, então primeiro, vamos pegar nossa ferramenta retangular e desenhar nossa seção de call to action. Livre-se da borda e teremos essa cor de preenchimento verde. Vai bloqueá-lo no lugar novamente, desculpe, depois de acidentalmente mover qualquer coisa. E o que faremos é colocar nossos elementos de texto antes de tudo no lugar. Então, vamos copiar isso aqui e garantir que esteja tudo centrado. Está tudo bem. E, na verdade, estamos entrando em gradientes que poderíamos simplesmente copiar isso e realmente fazer algumas das coisas que temos é vamos apenas fazer esse tipo de endereço para o seu endereço de e-mail NTC falhou. Então, vamos fazer isso. Então, como você pode fazer isso? Então você me fez pensar, oh, talvez você pudesse usar a ferramenta elipse. Sou meio assim. Não, você não faz isso. Na verdade, você está inserindo sua ferramenta retangular novamente e, em seguida, apenas arredondar as bordas, assim como faz com o Boston. Então, vamos fazer isso agora. Então, vamos desenhar isso. Então, algo assim. Parece certo para mim. Então, sou um pouco mais alto. Opa, isso gira. Certo. Isso parece bom. Não queremos a fronteira, mas não teremos um raio para ela. Então, podemos arrastar essa entrada que e eu praticamente farei é super, super simples. Na verdade, vou fazer com que pense um pouco mais. E só por velocidade, vou pegar o texto emprestado e colocá-lo. Então isso está centrado. Vamos apenas ampliar e tocar. E sim, algo assim parece muito bom para mim. Ok, então o que precisamos agora é uma versão escura deste botão. Então, o que faremos é duplicar isso. Vamos trazê-lo para a frente. Mais uma vez. Nós nos certificaremos de que ele esteja alinhado na grade central de volta também, apenas para que possamos garantir que ele esteja alinhado corretamente. E este, é claro que queremos mudar. Eles querem é ter azul escuro. E então o texto no centro será branco. Chora, certifique-se de que seu texto esteja selecionado e, em seguida, escolha um k. lá estamos. E então o que faremos é garantir que ele esteja alinhado corretamente à nossa grade. Ok, então parece muito bom, isso foi rápido. Então essa é a parte agora que faremos em seguida. Oh, desculpe. Mais uma coisa que precisamos para garantir que nosso texto realmente não seja garantido, como diz o Green, Meu show de que estamos fazendo isso. Lá vamos nós. Então, vamos nos livrar da minha grade e dar uma olhada rápida. E sim, isso parece muito bom para mim. E vamos nos certificar de que, essencialmente, alinhamos corretamente para que fique à mesma distância. Está tudo bem. Certo? Então, nossa última parte deles, que será nosso rodapé. Então, o que eu vou fazer algumas maneiras de você fazer isso. Você poderia literalmente digitar uma caixa de texto. Mas, na verdade, vou fazer um desses. E então, mais uma vez, vou usar a grade de repetição apenas para nos dar o mesmo para cada um. Então, estamos parecendo muito bons. Então, vamos apenas diminuir o zoom e ver o que fizemos até agora. Então, novamente, somos praticamente iguais ao que eles fizeram. Novamente, não se preocupe muito se não for exatamente o mesmo espaçamento, o que você tem? Este curso é apenas para você se acostumar a usar o XD e fazer com que cada um tipo de como você vai, como você se aproximaria. Então, a criação de certas sanções. Então, o que precisamos fazer é apenas pegar emprestado nosso logotipo de um par, apenas duplicar isso. E vamos trazê-lo todo o caminho para baixo e dizer: Vamos dar uma olhada nisso. Então, na verdade, não estamos centralizando tudo aqui. Então, vamos ter isso um pouco mais de altura. Diga algo como ganhar sobre isso será bom. E então vamos ter esta seção onde temos nossas tags. Vou pegar isso emprestado e vamos colar isso no lugar. E esse cara grelha de volta, na verdade , só para que possamos realmente aprender com algo. E então vamos tê-lo por perto. Então, tão bom. Ok, então agora só precisamos colocar uma espécie de nossa linha no lugar. Então, vamos fazer isso agora. Então, novamente, poderíamos usar a ferramenta caneta, poderíamos apenas usar a linha para onde as coisas, já que estamos fazendo literalmente uma linha reta, apenas usaremos isso. Então, vamos manter pressionada, mantenha pressionada a tecla Shift para garantir que ele desenha uma linha completamente reta. E teremos esses dois aqui. E o tamanho, acho que vamos ter algo como 399, definitivamente A3, outros também. E isso parece o mesmo, acho que é Toulon eles têm lá talvez um pouco mais espesso. Seja lá o que for, está tudo bem. Certo, então está tudo bem. Mas minha ferramenta de seleção, e vejo que isso vai ser ao invés de graciosamente azul, meio que faz sentido. E então eu vou apenas, vou apenas barrar esse texto e copiá-lo e apenas acelerar para me ver digitando nossos textos para sempre. Ok, então estamos chegando muito perto agora e pergunto hoje a partir daqui é ter certeza de que temos isso selecionado. E vou usar nossa grade de repetição mais uma vez, vou arrastá-la para fora, então temos mais dois. E então vou apenas ajustar o espaçamento. Rússia provavelmente retorna esse espaçamento em apenas um momento. Então, precisamos colocar essa parte também. Então, vamos apenas clicar por um momento. Ok, então vou clicar neste aqui. Vou apenas desagrupar o queixoso para que quando eu tentar barrar isso não vai levar tudo comigo. Então, vou duplicá-lo segurando Alt pressionado e depois arrastando. Vou deixá-lo aqui. Certo? Então, vamos recuperar nossa grade e garantir que as bordas estejam alinhadas a esse tipo de n um só aqui. E vamos nos certificar de que está no centro também. Ótimo. Então isso é tudo divertido. E pode não estar muito longe, na verdade, está bem, então precisamos de um pouco mais. Haverá menos mesmo quando se trata do ensaio de espaçamento. Então, algo assim, acho que é o que queremos. Berlim, acho que estamos lá. Apenas certifique-se de que eu selecionei o final. Sim, feliz com isso. Brilhante. Ok, então tudo o que temos que fazer agora é garantir que todo o texto apropriado esteja no lugar, o que, claro, você pode preencher se quiser. E estamos essencialmente concluídos. Tudo agora está praticamente feito. Então, vamos apenas diminuir o zoom e ver o que temos. Então, novamente, talvez tenhamos direto um pouco da versão deles. Quando se trata dos diferentes enfeites e do que você tem. Mas nós, na maior parte, ainda construímos a maior parte disso nós mesmos com uma espécie de copiar e colar esse texto apenas por velocidade. Mas, novamente, o objetivo deste projeto de classe é apenas fazer você começar a usar o XD. Então eu sempre acho que a melhor maneira de começar a lente algo é apenas tentando emular outra coisa. Então, espero que você tenha achado isso útil e espero que seja meio que inspirou você a começar a criar seus próprios projetos, que é o que você espero fazer para os próximos projetos de classe, que esperamos que você compartilhe na seção de projeto da classe Skillshare. Mas espero que tudo isso pareça bom para você. Espero que você tenha gostado de fazer isso. E eu vou te ver no último vídeo. 31. Experimente meus cursos de Webflow na Skillshare: Ok, então se você chegou a este vídeo, significa que você está mais uma vez no final do curso. Agora, com suas novas habilidades encontradas com web design, você pode estar pensando, bem, como eu realmente crio esses sites? E, como acontece, eu tenho outros dois cursos sobre o Skillshare, que são sobre Webflow, uma ferramenta chamada Webflow, que é basicamente uma ferramenta de desenvolvimento web onde permite criar o site é visualmente agora Webflow é um pouco diferente algo como Wix ou outros construtores de arrastar e soltar. Você pode arrastar e soltar elementos, mas é uma ferramenta profissional de desenvolvimento web e é a coisa mais próxima de um desejo que você pode chegar sem a necessidade de realmente saber codificar. Então, se você criar um design que você gosta, esse curso ajudou você a fazer isso. Se você quiser começar a desenvolver sites, agora você pode combinar as duas habilidades juntas assistindo meus cursos de ultrapassagem no Webflow. Então vá até lá e dê uma olhada e me avise o que você pensa e experimente, veja se você pode desenvolvê-lo usando suas novas habilidades encontradas do design. E, em seguida, os cursos do site podem ajudá-lo a desenvolver os sites também. Se você quiser, veja mais para mim, eu tenho um canal no YouTube. Se você digitar algum Harrison Webflow, as chances são de você me encontrar lá. Espero que você tenha achado este curso útil, e espero que tenha dado a você pelo menos um ponto de partida para começar a criar seus próprios projetos. Ok, obrigado mais uma vez, fazendo o curso, me avise e revise o que você acha disso e eu te vejo no próximo curso.