Aprenda o web design com o Adobe XD: design de sites profissionais do zero — design de UI e UX

1. Aprenda web design Xd: Bem-vindo ao curso Adobe XD Mastery, onde você aprenderá a criar um belo site para Web e dispositivos móveis do início ao fim, enquanto tem um ótimo fluxo de trabalho. Ei, eu sou Reno e eu serei seu instrutor para este curso. Descobri a minha paixão pelo design há quase 10 anos e é por isso que fui para a escola de design onde aprendi o básico sobre design. Comecei um canal no YouTube onde compartilhei tudo o que aprendi. Este canal do YouTube me deu exposição suficiente para começar minha primeira empresa de design com meus amigos, e trabalhamos para muitas empresas menores, mas também para algumas grandes marcas como Coca-Cola, Microsoft e Adobe. Isso foi muito legal. Atualmente, passo a maior parte do meu tempo ensinando online porque é isso que eu realmente gosto de fazer. Projetei este curso para qualquer pessoa que queira aprender a criar sites com o Adobe XD. Há muitos cursos extravagantes do Adobe XD sobre design de aplicativos, mas neste curso vamos nos concentrar no web design. Porque realisticamente, é aí que a maioria de nós começa como designers de IU que querem ganhar dinheiro com nossas habilidades. Mas vamos projetar um site completo com quatro páginas e alguns desenhos separados, e eu vou fornecer-lhe todas as imagens, os ícones e as fontes que são usadas para criar esses sites, você possa acompanhar comigo. Começaremos com facilidade e trabalharemos gradualmente mais rapidamente para que você tenha tempo suficiente para se familiarizar com o Adobe XD. Ao final deste curso, você poderá trabalhar com o Adobe XD para criar páginas web e móveis. O método que eu vou ensinar é muito poderoso porque ele vai permitir que você reutilize certos elementos que você só terá que criar uma vez. Depois que você terminar com a página inicial, as coisas ficariam muito fáceis e rápidas. Eu também vou mostrar-lhe alguns dos truques de design que são usados para fazer meus projetos olhar melhor. Isso significa que não vamos realmente aprofundar a teoria do design, porque o objetivo deste curso é ensinar a você o Adobe XD. Este curso é para qualquer pessoa que tenha interesse em web design e queira aprender o Adobe XD, mas é especialmente bom para as pessoas que usam Photoshop ou o Illustrator agora criarem seus sites. Porque depois de criar um site no Adobe XD, acho que você não voltará ao Photoshop ou ao Illustrator. Por exemplo, basta olhar para a ferramenta de repetição de grades. O Adobe XD permite inserir imagens, alterar a cor ou tornar páginas inteiras clicáveis com a ferramenta de prototipagem. É apenas uma ferramenta incrível para design de interface do usuário. Então, se você estiver interessado em aprender o Adobe XD, espero vê-lo no próximo vídeo. 2. Boas-vindas ao curso! O que esperar: Muito bem, bem-vindos dentro do Gore. Muito obrigado por se inscrever. Estou muito animado para começar. Tenho um monte de coisas preparadas para você. Quero dizer algumas coisas antes de começarmos primeiro. O capítulo 1 é sobre o básico. Vamos muito devagar para o Capítulo 1, porque eu realmente quero ter certeza de que vocês conheçam as chaves para chaves curtas e como se mover, como alinhar as coisas, porque isso tornará as coisas muito mais fáceis no futuro para vocês. A maneira como eu uso meus atalhos, a maneira como eu zoom, a maneira como eu seleciono elementos. Se tentares saber o que faço, vai ser muito mais fácil para ti. É por isso que o Capítulo 1 é realmente um mergulho profundo no controle, nos alinhamentos, nas cores e tudo mais. Então, uma vez que você começar a projetar a Homepage, a Homepage levará alguns episódios. Mas então, como eu disse no trailer, as outras páginas vão muito rápido porque o método que eu vou ensinar neste curso é realmente eficiente. Você prepara um monte de coisas antecipadamente e, em seguida, você pode copiar e reutilizar um monte de elementos para criar suas páginas mais rapidamente. Depois de concluir todo este curso e executar todas as etapas, você pode até usar esses elementos para outro projeto. Porque para cada projeto você precisa de coisas como títulos, você precisa de texto, você precisa de botões. Então, se você tiver um novo projeto, basta alterar os estilos e, em seguida, você pode reutilizar isso em outros projetos. Eu quero ter certeza que você se ater a ele porque eu realmente quero que você obtenha um resultado. Se tiver alguma dúvida, pode deixá-las abaixo. Então eu espero que você realmente aprecie o curso. Espero vê-lo no próximo episódio. 3. Aqui estão seus downloads (não se esqueça de instalar fontes): Tudo bem caras. Estou super animado para mergulhar no Adobe XD. Primeiras coisas que eu fiz é muito fácil para você para que você possa me acompanhar. Eu criei esta pasta que você pode baixar. Nesta pasta você encontrará o primeiro arquivo de exercícios que vamos abrir no próximo vídeo. Você encontrará meu projeto final. Você encontrará muitas fontes gratuitas que você pode instalar, e todos os arquivos que você precisa para criar o site. O que eu quero que você faça é ir para o link abaixo e então você vai para uma página. O que você vai fazer é clicar no download, baixar o arquivo zip em seu computador e extraí-lo em seu computador. Se você estiver em um Mac, basta clicar com o botão direito do mouse e clicar em extrair. Se você estiver em um Windows, você também pode fazer isso se você tiver WinZip ou WinRAR instalado no seu computador. Na maioria dos computadores já está instalado. Você pode ver extração com WinRAR ou WinZip. Se você ainda não tem isso em seu computador, você pode baixá-lo gratuitamente, basta digitar Google, WinRAR ou WinZip. Uma vez que você tem que você pode ver todos os arquivos dentro. Então a primeira coisa antes de você clicar em um arquivo XD é que você vai instalar as fontes, porque eu usei fontes específicas dentro de meus arquivos de design. Se você simplesmente abrir isso antes de instalar as fontes, você não pode ver as fontes que eu usei. O que eu quero que você faça é passar pela pasta de fontes aqui e selecionar todas as fontes. Se você estiver em um Windows, clique com o botão direito do mouse e clique em instalar. Se você estiver em um Mac, será necessário abrir o livro de fontes. Basta ir para o seu livro de fontes, abrir seu livro de fontes e, em seguida, basta arrastar todas as fontes para dentro aqui. Basta inseri-los nesta lista. Eu já fiz isso, então não vou fazer isso de novo. Então você está totalmente preparado para ir para o próximo episódio onde vamos abrir nosso primeiro exercício, um arquivo básico. Instale as fontes e eu vou vê-lo no próximo vídeo. 4. Noções básicas de interface do Adobe: Bem-vindo de volta no episódio anterior, nós baixamos todos os arquivos que precisamos e agora vamos para o arquivo Básico. Esta é a tela inicial quando você abre o Adobe XD pela primeira vez. Vejo todos os meus arquivos de razões aqui, você provavelmente não verá que, se você nunca abriu XD e eles também lhe dão algumas opções para criar uma nova parte. Mas, por enquanto, criei um arquivo básico muito simples que vamos cobrir, então basta clicar duas vezes no “ Arquivo básico ” e a primeira coisa que você vai ver é isso. O básico do básico. Eu estou assumindo que a maioria das pessoas que assistiram este curso já tem um pouco de experiência em criar um software. Talvez você tenha trabalhado no Photoshop, no Illustrator, talvez até mesmo em ferramentas como o Premiere Pro ou o After Effects. Em seguida, muitas das coisas são as mesmas no Adobe XD, mas existem algumas diferenças importantes, portanto, mesmo que você seja completamente novo para criar um software e isso será fácil de seguir. Mas se você tiver um pouco de experiência, você entenderá isso muito rápido. Primeiramente, a “Barra de espaço” são as ferramentas de movimentação. Se você pressionar esta “Barra de espaço”, se você vai ver que o mouse vai mudar em uma mão e você pode se mover na tela, então basta clicar e arrastar para se mover. Então, se você quiser ampliar, existem diferentes opções, mas a opção mais fácil e a opção que eu sempre uso e é a mais rápida na minha opinião, é o “Alt” mais “Scroll”, então se você tiver um mouse, você pode pressionar “Alt” e depois “Scroll”, e onde você coloca o mouse é onde ele vai ampliar. Se você não tiver um mouse, eu também mostrarei algumas opções, mas esta é a opção mais fácil. Agora estou pressionando “Alt” e estou rolando com o mouse, então vou ampliar esse círculo. O mesmo se eu quiser ampliar esta parte, mas eu mover meu mouse e ampliar para essa parte. Se você não tiver um mouse e tiver um trackpad, você pode usar apenas o zoom, da mesma forma que zoom em um smartphone, para ampliar uma foto, você pode usar dois dedos e, em seguida, ampliar uma área específica. Se você não quiser se mover, você também pode usar a “Barra de espaço” e movê-la assim ou usar dois dedos e, em seguida, mover para dois dedos na mesma direção e desta forma, você também pode se mover muito suavemente dentro de sua tela, então esta também é uma boa maneira. Digamos que você não tenha um trackpad e não tenha um mouse, o que eu não recomendo. Eu recomendo que você use um mouse enquanto você está projetando. Eles também podem usar a ferramenta aqui à esquerda e você pode simplesmente selecionar uma parte como esta e, em seguida, zoom, e então, se você pressionar “Alt”, você pode fazer zoom para trás. Mas eu nunca usei como ferramenta, eu apenas usei o mouse, então volte para a ferramenta de seleção e, em seguida, pressione “Espaço” e pressione “Alt” para diminuir o zoom, pressione “Alt” para ampliar, e apenas se familiarize com o zoom. Basta experimentá-lo por si mesmo e certifique-se de que você entende como isso funciona. Há mais três pequenas coisas que quero te mostrar. Primeiro de tudo é a ferramenta de movimentação, portanto, se você quiser mover um item, basta clicar e arrastar o item para qualquer local que desejar. Clique e arraste, e isso acontecerá fora das vezes que você mover um item em estender. Você não queria fazer isso, então você precisa dar um passo atrás. Você pode fazer isso aqui, “Editar” e, em seguida, “Desfazer mover objeto” como este e você pode fazê-lo novamente. Boom, e então você está de volta e como você pode ver, há um atalho aqui e é chamado de Command Z ou em um Windows é Control Z. Se você apenas movê-lo assim e você pressionar “Command Z” ou “Control Z”, ele simplesmente vai se mover para trás. Se você fosse como não, era melhor naquele lugar velho, você só aperta “Command Z” mas depois com “Shift” e então ele vai voltar como você pode ver aqui, então isso é tudo que você precisa saber para tudo dentro deste espaço. Também temos um bar aqui. Falamos sobre a ferramenta de seleção, portanto, se você tiver a ferramenta de seleção selecionada, você pode selecionar coisas. Se você tiver a ferramenta de retângulo, você pode criar retângulos como este. Se você quiser aperfeiçoar retângulo, basta usar “Shift”, é assim que você cria um retângulo perfeito. Em seguida, se você quiser liberá-lo, certifique-se de que você primeiro solte o mouse e, em seguida, solte o “Shift”. Isso é importante porque se você fizer o contrário, então você primeiro libera o “Shift, então ele vai saltar para trás, então primeiro solte o mouse e depois solte o “Shift” para fazer um retângulo perfeito. Isso funciona da mesma forma para o círculo, então basta clicar no círculo se você quiser criar um círculo perfeito, pressione “Shift”, boom. Primeiro soltou um mouse e depois solte o “Shift”, e então você terá um círculo perfeito. Mesmo para retângulos, muito fácil e com linhas, ele vai apenas criar uma linha horizontal ou diagonal ou vertical. Se você usar o “Shift” e caso contrário você poderia usar qualquer direção que você quiser. O lápis vamos falar sobre isso em um vídeo futuro. A ferramenta de texto, se você estiver indo para clicar na “Ferramenta de Texto”, você pode simplesmente pressionar em qualquer lugar e você pode começar a digitar o que quiser, e então se você quiser voltar e você quiser selecionar um texto, você precisa voltar para a ferramenta de seleção e, em seguida, você pode selecioná-lo. Isso é o mesmo para todas as outras ferramentas, então se você estiver dentro da ferramenta de retângulo, por exemplo, e você estiver dentro daqui. Você quer mover este retângulo, você precisa voltar para a ferramenta de movimento, e como um atalho para isso, que é “V”, esta é uma das teclas que você vai usar repetidamente, para você possa escrever isso para baixo se você quiser. Mas esta é uma das coisas que você usará com muita frequência. Meu cursor agora não é um cursor normal do mouse. Como você pode ver, são pequenos retângulos, então você sabe que você está em um retângulo para ver se você pode ver agora é um círculo, agora é retângulo, e então se eu pressionar “V”, eu vou voltar para o movimento ferramenta e eu posso mover essas coisas ao redor. Eu posso até selecionar coisas diferentes pressionando e segurando assim e, em seguida, a excluí-los com a ferramenta backspace como esta, muito fácil. Então a última coisa do básico que eu queria mostrar é o painel de propriedades, porque agora nós falamos sobre essa parte. Agora, há também uma grande parte aqui com um monte de opções, então se você clicar em um item, você terá um monte de opções para esse item. O item que tem um contorno azul que agora está selecionado e agora você pode alterar essas configurações aqui. Por exemplo, este é o tamanho da fonte. Se você clicar sobre isso e você digitar 60, por exemplo, este texto vai ser maior. Agora, vou colocá-lo de volta às 52. Se você quiser mudar a cor dos textos, você vai até aqui para preencher a cor. Você pode mudar a cor aqui para outra cor que você quer, então talvez algo como isso, roxo, mas você também pode usar a ferramenta de marionete aqui e isso é muito bom. Eles têm uma chave curta finalmente para esta edição, porque eles não tinham isso em uma versão anterior, agora está em “I” ou apenas clique sobre isso e aqui você pode selecionar uma cor que você deseja, então, por exemplo, esta cor, e então ele vai mudar. Se você apenas usar o “I”, você pode apenas pressionar “I” e ser como, oh, talvez esta cor é agradável, talvez esta cor é agradável, e talvez esta cor é agradável, então neste painel direito você pode mudar o cor para qualquer outra cor que você deseja. Aqui, esta é a posição, então se você mudar isso para 300 vai mudar a posição. Eu sou mais como um designer visual, então eu só gosto de mover as coisas na prancheta e realmente não dar uma olhada nisso. Mas às vezes, se você quiser criar um círculo que seja, por exemplo, 50 por 50 pixels, você pode mudar isso aqui. Esta é a largura, esta é a altura, a posição X e a posição Y na tela. Isso é realmente tudo que você precisa saber sobre este painel lateral por enquanto. Esse é o básico para o movimento e a mudança de objetos. No próximo vídeo, vamos falar sobre o painel de camadas. 5. Entendendo camadas no XD: Tudo bem. Então neste vídeo vamos mergulhar no painel de camadas. Isto é importante para entender. Você realmente não vai passar muito tempo aqui mas se você não entender isso, você vai ter problemas. Então, vamos apenas clicar no painel de camadas. Você vai abri-lo clicando aqui, e agora você só pode ver uma prancheta e uma área de trabalho. Se você clicar dentro da prancheta, você vai entrar dentro de todas as camadas que estão dentro desta prancheta. Você pode ver coisas diferentes aqui, por exemplo, todos esses círculos que você pode ver aqui, você pode ver as camadas de texto, e você pode ver, algumas pastas aqui. Se você clicar em um item, ele acenderá em azul claro. Se você selecionar mais itens de uma vez , ele também irá acender em azul para que você saiba qual é a camada. Então, por exemplo, se você está projetando e você quer ver como o seu design fica sem esta caixa, você pode ir até aqui e pressionar o olho e isso irá esconder esta camada. Portanto, ele não será clicável, mas ele ainda será salvo dentro de seu painel de camadas. O que você também pode fazer é bloquear esta camada, este também é um recurso agradável, porque então ele será visível, mas haverá este bloqueio. Então, por exemplo, se você tiver um monte de outros itens sobrepostos, e você não quiser que este item se mova se estiver movendo outras coisas, então, por exemplo, você está selecionando um monte de itens aqui que deseja mover, e, em seguida, a camada bloqueada também será selecionada, mas não será movida porque está bloqueada. Então esta é também uma das coisas legais que você pode fazer, e eu não sugiro que você vá para o painel Camadas e clique em bloqueio porque você também pode usar comandos ou Control L. Então é isso que eu sempre faço, eu apenas pressione Command L para bloquear ou desbloqueá-lo. O que você também pode ver é que esta camada ou este grupo eu deveria dizer, está acima desta caixa visualmente. Isso também é verdadeiro no painel de camadas. Então, se você quiser mover esta caixa abaixo da caixa principal, o que você precisa fazer é clicar na caixa de imagem e, em seguida, movê-la abaixo. Então certifique-se de ver esta linha azul, com um círculo no início e, em seguida, solte-o agora, isto está abaixo da caixa principal. Na verdade, esta caixa está agora abaixo de todas as camadas, então mesmo que a movamos para cima, você verá que está abaixo de todas as camadas. Então, como eu disse, se você quiser mover esta caixa todo o caminho para o topo, você pode fazê-lo assim, mas eu não aconselho a usar o painel Camadas em tudo, e apenas usar teclas curtas, porque você também pode fazer isso com teclas curtas. Então, se você pressionar Command e, em seguida, os colchetes, você também pode trazê-lo lentamente para trás um passo de cada vez. Vou abrir o painel de camadas para mostrar o que estou fazendo. Então, se você usar para chave de colchete direita ele vai subir com comandos, então comandos colchetes direita ou esquerda, então vamos subir ou descer. Então teste isso por si mesmo e veja como funciona. Em seguida, se você quiser movê-lo até o topo, adicione também Shift. Então, você está pressionando Control ou Comandos, Shift e, em seguida, os colchetes corretos. Então é assim que você move todo o caminho para cima ou todo o caminho para baixo. Eu uso isso o tempo todo, então eu aconselho que você também anote este. Ok. Então é isso para o painel Camada. 6. Selecionar, movendo e duplicando: Bem-vinda de volta. Neste vídeo, vamos mergulhar na Seleção. Como elementos de seleção, a movimentação de elementos é uma parte essencial do Adobe XD. Vamos primeiro cobrir algumas das noções básicas. Por exemplo, se você quiser copiar isso, duas vezes. O que você pode fazer é pressionar Alt e arrastá-lo para a esquerda. Pressione Alt, clique nele e arraste. Desta forma, você pode fazer uma duplicata, como você pode ver. Faça isso mais uma vez e depois solte. Para praticar mais uma vez, vou apagá-lo. Certifique-se de que, quando estiver duplicando, solte primeiro o clique do mouse e, em seguida, o Alt. Agora, por exemplo, se você quiser testar a aparência quando você arrastar essas duas caixas para baixo, você pode arrastá-las para baixo assim ou você pode fazê-lo ao mesmo tempo. Você pode fazer isso com o Shift. Se você clicar em um elemento e você vai manter Shift pressionado, então você pode selecionar dois elementos. Como você pode ver no painel de camadas agora, dois itens são selecionados, então você pode arrastá-lo para baixo. Agora, se eu segurar Shift, ele não vai sair da linha vertical. Isto é o mesmo para a horizontal. Eu vou voltar. Se você quiser selecionar esses três, você vai clicar em, Shift, clique em, clique em. Você está apenas segurando Shift e clique no que quiser nesta Seleção para movê-lo. Outro truque que quero mostrar a vocês é a Seleção com Comando. Se algo está dentro de um grupo, por exemplo, temos uma caixa de imagem aqui, e então você pode ver o botão que também é uma pasta. Por exemplo, se você quiser selecionar este texto, o que você normalmente faria é clicar, você deseja clicar duas vezes, clicar duas vezes, clicar duas vezes e, em seguida, você tem o texto. Isso significa que você precisa clicar oito vezes. Se você quiser pular isso, basta pressionar Command, como você pode ver, você pode simplesmente selecionar através de todas as pastas ou grupos. Recentemente, eles adicionaram um novo recurso que é realmente bom. Digamos que você queira mudar a cor de todo o texto aqui. Normalmente, você não poderia fazer isso, mas agora você pode. Se você pressionar Command e, em seguida, ir para este, você pressiona Shift, então você pressiona Shift e Command, porque Command você clica em todas as camadas e com Shift você pode selecionar várias coisas. Agora, você pode selecionar coisas diferentes, mesmo que elas estejam dentro de diferentes pastas ou grupos. Isso não era possível antes, então isso é super legal. Agora você pode, por exemplo, alterar a opacidade. Não vamos fazer isso neste projeto, mas é isso que eu queria mostrar a vocês. Como eu mostrei antes, você também pode selecionar os diferentes elementos apenas arrastando, mas às vezes você tem um fundo. Por exemplo, se tivermos esta pasta e esta estiver em cima daqui, e você vai selecioná-la assim, você também seleciona o plano de fundo, isso não é o que você quer sempre. Basta clicar em Shift, clique e clique em. Agora, você pode arrastá-los para baixo. Digamos que você gosta de usar esse recurso, e você também selecionou o plano de fundo. Você pode desmarcar o plano de fundo. Deixe-me fechar a pasta, para ver o que estamos fazendo aqui. Vou selecionar todos esses. Agora, se eu pressionar Shift e eu vou clicar na caixa principal, grande, ele vai desmarcar essa caixa principal. Agora, eu posso apenas mover essas três partes, mesmo que eu comecei com toda a Seleção assim. Novamente, você seleciona tudo e, em seguida, você pressiona Shift para a coisa que você não quer dentro dessa Seleção e, em seguida, você pode mover todas as outras partes. Tudo bem, por enquanto eu vou movê-lo de volta. Eu vou selecionar esses. Vou pressionar Shift, vou descer e vou deixar assim. Isso é para a Seleção, muito fácil, mas uma coisa muito importante para saber. 7. Fundamentos de alinhamento: Bem-vinda de volta. Neste episódio, vamos falar sobre alinhamento, também coisa muito importante no Adobe XD, mas no web design em geral. Se você não alinhar seus objetos corretamente e não entender o espaçamento branco, seus projetos parecerão confusos. O que vou mostrar agora é como alinhar corretamente no Adobe XD. Como você provavelmente já viu, é que se você mover um elemento no Adobe XD, um monte de números roxos aparecerão e às vezes até mesmo essas caixas. Essas caixas são muito agradáveis porque eles vão dizer qual é a distância entre esses elementos. Adobe XD vai olhar para a distância entre os elementos e então ele vai dizer, hey, você quer o mesmo espaçamento aqui? Muitas vezes você quer isso, então é muito bom usar esse recurso. Vamos ver esta mensagem aqui. Por exemplo, se eu vou arrastar este texto Adobe XD vai em algum momento ser como, hey, você também quer 10 pixels deste para este texto, o mesmo que você tem aqui. Isso é o que você pode fazer. Os números que você vai ver na tela são os pixels. A posição de um item, você pode ver isso aqui, então se você vai mudar isso, o número aqui vai mudar também. Agora vou deixar aos 30, porque é o mesmo espaçamento que temos aqui. Mas eu tenho que mostrar uma coisa que é que ele vai contar o espaço da parte inferior de seus campos de texto. Por exemplo, ele irá calcular um espaço como você pode ver não na parte inferior deste texto, mas na parte inferior deste campo de texto. Se eu tornar este campo de texto um pouco menor, então ele será nove pixels a mais como você pode ver. Essa é uma das coisas importantes que você precisa saber sobre a ferramenta de alinhamento. O que também é um recurso muito bom é que você pode alinhar itens muito rapidamente sem realmente tentar fazê-lo assim. Por exemplo, se você tem um designer muito confuso como este, o que você pode fazer é você pode selecionar todos os seus itens e, em seguida, você pode movê-los para o topo. Aqui estão as ferramentas de alinhamento. Por exemplo, se você quiser ter este item no meio da sua tela, basta clicar nele e clicar neste. Agora está perfeitamente alinhado no meio. O que você também pode fazer com esta ferramenta é certificar-se de que, por exemplo, este botão está no meio de toda esta caixa. Por exemplo, se você tem um botão longo como este e você quer que o botão esteja exatamente no meio ou digamos apenas que este texto, você quer ter este texto no meio deste botão. O que você pode fazer é selecionar um texto no botão e, em seguida, você pode usar a ferramenta de alinhamento. Vou mostrar-lhe, você vai pressionar Command, clique no texto, pressione Shift e, em seguida, clique no botão. Agora eu tenho que texto e o botão selecionado, e então se eu clicar sobre isso, ele vai alinhar meu texto exatamente no meio. Esta é uma daquelas coisas que é super legal para trabalhar. Além disso, se eu quiser alinhar este botão no meio desta caixa, eu posso fazer isso com o mesmo truque também. Mas para este exemplo, se eu vou alinhar isso, então ele não será alinhado aos meus textos e ao título. Para este exemplo, eu só quero saber qual é a distância entre isso e eu também quero aplicá-lo aqui. Você pode simplesmente selecionar os botões, então clique duas vezes sobre ele e certifique-se de que você tem o botão com o texto. Agora, se você vai diminuir ou aumentar o tamanho, XD sabe automaticamente que você quer que este item esteja no meio. Como é que o XD sabe disso? Bem, eles sabem disso porque você acabou de alinhar este texto no meio. Mesmo que este texto esteja alinhado à esquerda, XD vai até entender que você quer ter isso no meio. Se você quiser obter a distância deste emblema, você vai pressionar Alt e então você vai ver que isso é 50 pixels. Se você quiser apenas o mesmo do outro lado, o que você pode fazer é aumentar com o mouse para torná-lo 50. Ou se você sabe que isso é 50 e você sabe que agora é 62, então você sabe que você só precisa de 12 pixels a mais. Então você pode ir até aqui e digitar mais 12 e boom. Agora está no 290 e agora você só sabe que isso está alinhado perfeitamente. Certo, digamos que você queira que esses itens estejam perfeitamente alinhados sob essa caixa principal. O que você vai fazer é garantir que um desses itens está apenas tocando o lado de fora da caixa, não importa, e o outro você também quer ter isso. Você pode até tê-lo assim, desde que esteja alinhado com o lado de fora da caixa. Agora, mesmo que este item seja como aqui, você pode selecionar todos eles e alinhá-los ao topo assim, para que todos eles sejam alinhados e, em seguida, usar isso. Se você clicar em distribuir horizontalmente, ele irá calcular o espaço entre os itens. Você vai ter isso assim, então isso é super legal. Agora você pode simplesmente pegar todos eles e torná-los também 50 pixels para esta caixa principal, e agora seu alinhamento parece muito bom. Mais uma vez para praticar isso. Digamos que isso esteja em todo o lugar que você selecioná-los, você os faz, por exemplo, no alinhamento do meio e, em seguida, você clica neste e o espaço entre esses itens será o mesmo. Se você ainda acha que isso é difícil, Adobe XD lançou um novo recurso chamado Rulers. Se você já usou o Photoshop ou o Illustrator, você já sabe disso. Mas se você for para o site do seu quadro de arte, por exemplo, temos a mesma situação como esta aqui e você realmente não vê esta linha, o que você pode fazer é clicar neste item, então ir para o lado e seguir em uma régua e apenas fazê-lo clipe para o lado. Faça isso também deste lado assim. Boom, ele vai ficar como você vê. Então você pode simplesmente alinhá-lo muito facilmente a essas partes, selecioná-los, torná-los como já era e, em seguida, colocá-lo assim, selecionar todos eles e torná-los 50 pixels para o outro item. By the way, você também pode mover itens que são teclas de seta. Com um clique, ele se moverá em pixel. Se você usar esses turnos, poderá mover 10 pixels. Agora isso é 44, então agora eu só preciso fazer 50 pixels como este. É isso, se você quiser remover estes, você pode apenas direcioná-los para o lado e boom, agora eles se foram. Muito fácil de usar e fará com que seu design pareça muito melhor. Ok, então é isso para este episódio. Vejo você no próximo vídeo. 8. O painel muito útil: Bem-vinda de volta. Neste episódio vamos dar uma olhada na coluna de ativos. Você pode encontrar a coluna de ativos aqui. Se você clicar, você vai abri-lo. Esta é também uma daquelas coisas que designers iniciantes não usam com frequência. Mas é tão importante, porque se você usar isso, fará com que seu design pareça muito melhor. Porque você não vai por todo o lugar com suas fontes e qualquer cor. O que eu quero te mostrar é algo muito bom. Por exemplo, se você tem suas cores aqui, esta é uma paleta de cores. É super bom ter isso em algum lugar em seus projetos para que você possa usar o olho para escolher uma cor. Mas o que é ainda mais agradável é usar os ativos. Por exemplo, se eu estiver indo para selecionar todas essas camadas, Eu posso clicar aqui e uma cor, Eu posso clicar no plus. Agora, todas as cores com os códigos hexadecimais reais serão edições para os ativos de cor. Isso significa que se eu vou mudar uma cor aqui, ela vai mudar em todos os documentos. Por exemplo, temos este roxo aqui. Este é o mesmo roxo em todos os títulos e botões. Vamos ver que é 7768CC, como você pode ver 7768CC. Agora, digamos que você está trabalhando para um cliente ou você tem seu próprio site e você decidiu que você não gosta mais do design e você quer ter azul como sua cor principal. Bem, se você tem um site grande e você só quer mudar todas as cores, você só precisa encontrar todas essas camadas. Você só precisa entrar em 100 camadas diferentes ou talvez até mais do que isso. É horrível. É por isso que eu uso os bens. Agora, se eu vou clicar em editar aqui nos ativos e eu sei que essas cores são todos conjuntos para a mesma cor. Agora eu posso mudá-lo e todos os elementos dentro do meu documento mudarão, como você pode ver aqui. Esta é uma maneira muito rápida de testar as diferentes cores em seu design. Agora eu vou apenas clicar fora dele e pressionar Control Z para voltar. Mas eu acho que você entende por que isso é tão útil agora. Isso também é verdadeiro para as camadas de texto. Por exemplo, se eu preparei alguns blocos de texto aqui e eu quero que este texto seja os textos em todos os textos principais no meu site. Isso é 18 pixels e seus 28 pixels em altura de linha. Isso é, a propósito, a altura entre as fileiras. Se eu diminuir isso, você verá que vai mudar. Também estou feliz com a cor. O que eu posso fazer agora é, eu vou adicionar um estilo de personagem. Agora ele irá adicionar um estilo de personagem. Agora, se eu vou para este aqui, vamos ver o que é isso. Este é o 16. Digamos que eu queira ter o mesmo aqui. Eu posso apenas clicar sobre isso e agora ele vai mudar. Agora estes estão todos ligados aos personagens aqui. É o mesmo princípio. Se eu clicar em editar e até mesmo, vamos apenas dizer que eu quero outra fonte arial, ele vai mudar em todos os documentos. Vou colocá-lo de volta em Montserrat agora mesmo. Você pode até mudar a cor do texto se quiser gostar disso, porque a cor também é salva dentro deste estilo de caractere como você pode ver aqui. Agora, vou mostrar-vos um exemplo da vida real. Se você voltar para o localizador, você pode abrir meu projeto final, arquivo Rino. Basta clicar nele e ele será aberto. Como você pode ver eu adicionei muito mais estilos de caracteres neste documento aqui. Se você vai ampliar, você vai ver que eu tenho estilos diferentes para este site. Por exemplo, este título aqui é 36. Você também pode ver isso aqui. É o mesmo para este título. Mas eu também adicionei estilos de personagem, 40 cores diferentes como você pode ver aqui. Há um último recurso que eu não vou mostrar agora, mas isso é componentes, é também parte da coluna de ativos. Isto é, por exemplo, se você tiver um design de rodapé que deseja repetir em todas as suas páginas e quiser o mesmo design em todas as páginas, você usará os componentes. Mas é isso por enquanto. Você só precisa conhecer os estilos de personagem e as cores. Estamos quase terminando o básico, então eu vou vê-lo no próximo vídeo. 9. Artboards. Tudo que você precisa saber.: Pranchetas, por que você usa pranchetas? Bem, principalmente para páginas. Se eu voltar ao meu arquivo final de design. Como você pode ver neste projeto, se eu vou fechar este aqui. Eu nomeei minhas pranchetas. Esta é a prancheta da minha página inicial. Então eu tenho uma prancheta diferente para a página de design Home Mobile e, em seguida, para a página Portfolio e, como você pode ver, essas são as pranchetas que eu criei e eu dei a eles um nome. Você pode alterar o nome da prancheta apenas clicando duas vezes nela, por exemplo, esta é a V1. Eu o nomeei, mas você também pode mudar isso para Vietnã, por exemplo, e este aqui para Indonésia. Desta forma, você pode simplesmente estruturar seu design. Uma coisa que você tem que saber se você ampliar muito, você vai ver esses pontos. Você precisa ampliar um pouco para ver os nomes reais. Você deseja trabalhar com os nomes das pranchetas. Não é apenas bom para o seu próprio fluxo de trabalho, mas isso também é importante se você for trabalhar com o protótipo no futuro. Porque com o protótipo também, você pode facilmente clicar com o botão direito do mouse e, em seguida, pesquisar o nome da prancheta para a qual deseja vincular. Sugiro que você sempre use bons nomes em suas pranchetas. Como criar uma nova prancheta? Vamos voltar para o arquivo de exercícios. Você pode simplesmente copiá-lo da mesma forma que você copiar elementos apenas pressionando Alt e depois rastreá-lo, algo assim e então você pode mudar o nome para prancheta 2, por exemplo, ou você pode clicar na ferramenta prancheta aqui. Eu vou fechar este aqui e então você pode ver todas as opções de prancheta aqui. Você pode usar uma Web, por exemplo, 1366. Isso é o que você pode fazer. Você pode arrastar uma prancheta se quiser. Mas o que eu faço na maior parte do tempo é apenas fazer uma boa prancheta e, em seguida, eu apenas duplicado. Mas se eu quiser um design móvel, eu vou apenas para as pranchetas e eu vou para iPhones 6/7/8 e então eu posso apenas fazer essa prancheta muito maior se eu precisar. O que você também verá é esta linha azul aqui. Esta é a posição de rolagem. Se você voltar para o meu arquivo final, você pode ver isso aqui também. Na página de design móvel, você pode ver que a linha está aqui. Esta é apenas a posição padrão e você vai precisar disso se você estiver indo para clicar no jogo aqui. Vamos diminuir um pouco e se você estiver indo para clicar no jogo, você terá uma pré-visualização do seu design. Agora a posição de rolagem está na parte inferior aqui, e isso parece bem normal, mas se eu mudar essa posição, eu vou copiar o valor, então eu não vou esquecer. Se você vai mudar a posição assim e então você vai pressionar play, você vai ter uma prévia como esta e é claro, não o que você quer. Você quer um design normal do telefone e é por isso que você deve mantê-lo assim e isso é super legal se você vai fazer um protótipo ou você só quer mostrar o seu design para outra pessoa. Você também pode fazer isso para sua página inicial, por exemplo, eu realmente não tenho isso nesta página inicial aqui porque ele define um nenhum, mas você pode configurá-lo para vertical e agora ele está em 4.000 pixels. Isso não é bom, claro, porque então você verá a página inteira e você não pode rolar através dela. Agora você só vai colocá-lo em 800, por exemplo, talvez algo como isso e, em seguida, se você clicar na visualização, você pode ver seu site em tela cheia como este. Tudo bem, isso é tudo que você precisa saber sobre pranchetas. Vamos para o próximo episódio. 10. Onde obter os novos modelos pré-criados: Bem-vinda de volta. Neste vídeo, vou mostrar onde você pode obter modelos pré-fabricados. Vamos primeiro limpar o arquivo de exercícios principal por enquanto. Eu só vou apagar isso e salvar no arquivo agora mesmo. Então, se você não é um designer muito experiente ou você simplesmente não tem inspiração para um design agora, o que você pode fazer é você pode acessar os kits de modelos pré-fabricados se você clicar no arquivo e, em seguida, você vai para obter kits de interface do usuário, eles têm diferentes kits de interface do usuário da Apple, Google e Microsoft. Eu já baixei os certos para você dentro da pasta para download. Nesta pasta, os Kits Pré-fabricados. Então, se você clicar em “Google Material Design”, por exemplo, e você vai abrir este arquivo, você vai obter um arquivo grande com muitos elementos de design diferentes do Google. Então vamos dar um zoom por um pouco. Você vai ver todas as fontes que eles usam, você vai ver seus ícones, você vai ver seus ícones, e você pode simplesmente dar uma olhada nesses ícones se você precisar de um ícone, por exemplo, para seu site e você pode simplesmente copiá-lo porque este é apenas um arquivo XD, Super legal. Sugiro que copie tudo do Google ou de outra pessoa? Não. Sugiro que use isso como inspiração. Mas, por exemplo, se você quiser criar uma Caixa de seleção, aqui está a Caixa de seleção do Google. Então este arquivo pode lhe dar uma boa inspiração. Isso é principalmente focado no design do aplicativo, como você pode ver, mas há algumas coisas agradáveis que você também pode usar para sites. Então, por exemplo, caixas de seleção, caixas de rádio e botões como este. Mas você pode simplesmente clicar em e você pode copiá-los para o seu próprio arquivo. Mac OS também tem um bom kit. Clique nos elementos da interface do usuário e, em seguida, clique neste arquivo. Como você pode ver aqui estão os arquivos do Mac OS para Adobe XD. Claro que você não vai apenas colocar uma mensagem como esta em seu site, mas você pode usar isso para se inspirar. Aqui estão algumas coisas agradáveis, por exemplo, uma barra de abas com itens diferentes, uma revisão em estrela, um controle deslizante como este, ou talvez uma lista suspensa. Como você cria um menu suspenso? O último que quero mostrar é da Microsoft. Essa também é boa. Se você clicar no WindowSuixd. Este é um momento muito interessante porque eu acho que o Windows tem as opções mais utilizáveis para um design de site. Se você estiver indo ampliar, você verá todos os botões deles, um hiperlink, por exemplo. Esta é também uma daquelas coisas que a maioria dos designers eles só querem usar um botões para tudo, porque um botão parece bonito. Mas às vezes você só quer usar um link para vincular a uma página específica. Então aqui está um exemplo de design para isso. Isto é o que você pode usar para campos de entrada, por exemplo. Aqui estão mais controles deslizantes e caixas de seleção. Isto também é muito bom. Às vezes você tem que criar uma lista suspensa com uma exibição em árvore como esta. Aqui você pode dar uma olhada em quanto espaçamento, por exemplo, o Windows usa. O que é um bom espaçamento, por exemplo. Então, esses arquivos também são campos de entrada super agradáveis para uma senha. Às vezes você precisa projetar e fazer login. Dê uma olhada nele por si mesmo. Mas se você quiser obter a versão mais recente, use ir para arquivo, Obter kits de interface do usuário e, por exemplo, clique em Microsoft Windows. Em seguida, você vai para um site e você pode baixar a versão mais recente dos kits de ferramentas Design como aqui, Adobe XD toolkit e você pode baixá-lo. Isso já é super bom, mas no próximo vídeo vai ser ainda mais agradável. Vou mostrar-lhe o site que eu uso para obter fontes gratuitas, imagens gratuitas e ícones gratuitos. Então, vejo-te no próximo vídeo. 11. Como começar a fonte e imagens e paletes de cores e preenchimento: Neste vídeo, eu vou mostrar onde eu consigo todas as minhas coisas gratuitas que eu uso para design. Por exemplo, se eu for para o meu design para aqui, você pode ver uma fonte muito legal e criativa aqui, é chamado de conjuntos RB de jatos RB e isso é do site dafont.com. Em dafont.com, você pode obter fontes diferentes. A maioria deles é livre para usar, mas não todos eles. Como você pode ver, por exemplo, esta fonte é gratuita apenas para uso pessoal, então, se você quiser obter uma fonte que seja gratuita, também para uso comercial, você precisa ajustar sua pesquisa. Por exemplo, se vamos entrar em uma categoria manuscrita, acho que é uma categoria legal. Como você pode ver um monte de fontes criativas aqui que você pode usar. Mas então se você quiser pesquisar, você vai para mais opções e você vai clicar em 100% de domínio público ou livre e se você clicar em enviar, então ele só irá mostrar as fontes que você pode usar 100% de graça. Você pode até usar esses textos aqui, então, por exemplo, se você quiser saber como essas palavras exploram parece que você vai apenas digitá-lo aqui e você só vai ver como as palavras exploram se parecem, e então você pode simplesmente clicar em nele, e então você pode baixar a fonte aqui e instalá-la em seu computador e, em seguida, usado no Adobe XD, este é um site super, super, super agradável para todas as fontes criativas. Outro site que tem apenas fontes gratuitas para usar é o Google Fonts. Estas fontes aqui não são tão criativas. Mesmo que você tenha algumas fontes criativas aqui, na verdade muito, mas não tanto quanto fontes da Adobe, então o que você pode fazer aqui, você também pode usar um texto. Por exemplo, explore o Vietnã. Se você estiver indo para digitar isso aqui e clicar em aplicar a todas as fontes, você também vai ver como esse texto parece. Você pode ajustar o tamanho aqui e você pode selecionar categoria, então, por exemplo, se você quiser apenas fontes manuscritas, você pode simplesmente desmarcar todas elas e você verá as fontes manuscritas do Google Fonts em um download experiência neste como um pouco diferente, se você quiser ter este tipo de letra, você vai clicar em mais, e então ele será apenas aqui. Se você desclicar nele, você pode clicar em “Personalizar”. Às vezes, ele tem mais versões para que você possa selecionar as que você quer, e então você vai clicar em “Download” aqui, então é assim que você baixar fontes de fontes do Google. Agora, para ícones, se você estiver indo para clicar em um ícone neste site é o ícone que eu uso. Se você vai voltar a este design, você pode ver ícones aqui. Por exemplo, este ícone de passeio é uma montanha. Este ícone do hotel um caminho e este jantar é um copo. Aqui estão os ícones que eu usei, e eu acabei de procurá-los aqui na barra de pesquisa, flaticon.com, então se você quiser um ícone para uma casa, por exemplo, você está indo para procurar casa e há um monte de ícones gratuitos que você pode usar. Alguns deles são bates, como você pode ver com a coroa e ele baixar experiência aqui também é um pouco diferente. Você pode simplesmente pressionar o mais e ele irá adicioná-lo à sua biblioteca. Deixe-me apagar os antigos. Se você selecionou alguns ícones como este, você pode baixar a seleção e se você quiser usá-la no Adobe XD eu sugiro que você use a opção SVG, e então você pode baixá-la aqui. Quero dizer todas as informações, 40 créditos estão na pasta de downloads, mas o SVG é ícones vetoriais ou como você pode ver aqui, não importa o quanto eu zoom nele será sempre nítido e isso é claro o que você quer, então sempre use SVG, mas você também pode usar PNG, e então, por exemplo, escolha um tamanho maior, algo assim, então ele também será nítido, mas não tão nítido como SVG porque este é vetor, então estes não são pixels e PNG é sempre pixels, então é isso que você precisa fazer para os ícones. Agora para as imagens, o site que eu sempre uso é unsplash.com e há um monte de fotos hipster legal em splash, então se você, por exemplo, precisa de uma foto de uma bicicleta, porque vai acontecer muito de vezes em que você está trabalhando com um cliente que ele ainda não tem as imagens e você só quer uma imagem de preenchimento para seu plano de fundo, para suas imagens, então o que você vai fazer, você pode procurar bicicleta e então você pode baixar para este como este para a sua pasta de downloads. Você escolhe pressionar “Enter” e agora você tem esse arquivo em sua pasta de downloads. Super imagem de alta qualidade, como você pode ver aqui, modo que é super agradável. Outro site que eu costumo usar é pexels.com, mesmo princípio que no splash. Você também pode procurar bicicleta e você vai obter imagens diferentes. Há muitos desses sites, mas se você está começando, basta salvar esses e você pode apenas começar a projetar, e então outro site que você precisa salvar é color.adobe.com. Este é um bom site para criar uma paleta de cores. Como eu tinha criado no meu filme de design aqui, eu uso o site da Adobe como inspiração, então você pode simplesmente arrastar isso assim e colocá-lo em roxo, por exemplo, e então criar uma paleta que você quer e você pode fazer diferentes opções por aqui. Por exemplo, monogrammic, esse é um que eu usei para este site, e então você pode apenas criar uma paleta aqui. Então você pode copiá-lo. Por exemplo, você pode fazer uma captura de tela. Você pode trazê-lo dentro do Adobe XD, mas apenas uma base, e, em seguida, basta usar a ferramenta de colírio para criar as cores no Adobe XD e, em seguida, é claro, editar na coluna de ativos, editar na coluna de ativos,de modo que eu uso este site. Eu só o uso para inspiração e depois transformo em cores de ativos no Adobe XD. O último site que você deseja salvar é este site, loremipsum.nl e neste site você pode apenas obter algum texto de preenchimento falso. Também muitas vezes quando você está trabalhando em um site, você não tem o texto ainda, então você pode simplesmente copiar um texto como este e então ir para o Adobe XD, ir para o seu arquivo assim, colocar os textos aqui, e então você terá alguns textos para trabalhar. Este é o site que eu queria te mostrar. Salve-os em seu próprio computador porque em quase todos os sites você precisa de fontes, você precisa de ícones, você precisa de imagens, e você precisa de texto de preenchimento, e claro que você também precisa de cores, então isso é para este episódio. Espero que você tenha achado isso útil, e então vamos pular para o próximo episódio. 12. Preparando nosso primeiro quadro e grade: Olá e bem-vindo de volta. Neste episódio vamos preparar a nossa prancheta. O que vamos fazer é deixar esses dois arquivos que abrimos aqui porque vamos criar nosso próprio arquivo. Neste episódio vamos criar o arquivo real que vamos usar, que você vai usar para criar o site inteiro. Como criar um novo arquivo? É muito simples. Basta ir para “Arquivo” e clicar em “Novo”. Então você terá algumas opções. As opções que você vai ver aqui, não são as opções que você vai usar com frequência para um site web desktop. Precisamos mudar um pouco. Por enquanto, vamos facilitar e clicar neste ícone da web, e agora ele cria uma prancheta. Como eu disse antes, as pranchetas estão aqui. Então, se você clicar nas pranchetas, você verá algumas configurações aqui. Mas antes que você esteja indo apenas para clicar em uma das opções, eu quero explicar como a web funciona porque isso é realmente importante. Porque a prévia que te deram. Agora estamos em nossa prancheta que é 1920, mas isso é muito grande para um site, porque você tem que entender que maioria dos sites com o conteúdo do site real. Vamos voltar ao meu arquivo de design por um minuto. A caixa principal onde todo o conteúdo está, então neste site, é esta a partir desta parte esquerda para a parte direita aqui. No site moderno, na maioria das vezes são 1140. Este é um daqueles números que você quer anotar. Não sei se já disse isso antes, mas isso é quase sempre 1140. Às vezes são 1200. Nos tempos em que o site era em 1960 e, em seguida, nossas telas ficaram maiores. Agora, o conteúdo principal do site é 1140. Por que isso é importante? Isso é importante porque você deseja criar dentro dessa coluna. Porque se você não fizer isso, você provavelmente vai acabar em um site que não fica bem em todos os dispositivos. Você também quer que seu site seja visível em telas menores. Por exemplo, um laptop com apenas 11 polegadas. É por isso que você precisa ficar entre essas fronteiras. O Adobe XD tem um ótimo recurso para isso e é chamado de grade. Se você clicar na “Grade” e você pode vê-lo no meu arquivo aqui, você pode ver que a largura da calha, que é a largura entre o conteúdo é 1140. Isto é o que nós também vamos criar para o nosso próprio arquivo. Certo, pessoal, tenho que dizer uma coisa. Este é o Rino, do seu futuro. O Adobe XD alterou o recurso Grade. Agora não é possível ativar a Grade para cada prancheta individual. Agora, se você desativar a Grade em uma prancheta, ela será desativada em todas as pranchetas. Por favor, agora que quando você está assistindo este vídeo, porque este vídeo foi gravado alguns meses atrás. Como você pode ver nos lados aqui, há algum espaço sobrando, e você não precisa de muito mais, como você pode ver porque o espaço nos lados aqui, isso é suficiente para um site e esta prancheta é de apenas 1400. Esse é o tamanho que eu uso muitas vezes. Vamos voltar ao nosso novo arquivo. Não vamos usar esta prancheta. Como você está indo para clicar em “Prancheta” novamente. Você pode começar melhor para um site com este, que é 1366. Vou diminuir o zoom. Vou apagar este e bum, aqui estamos nós. Nós vamos realmente mudá-lo para 1400, mas você também pode colocá-lo no 1360 porque realmente não importa. Agora vamos ligar a Grade porque queremos ter certeza de que nossas colunas são perfeitas, e eu já coloquei a informação aqui. Você precisa verificar se você tem os mesmos números. Eu sempre trabalho assim. Você tem duas colunas e tem 1140 aqui. Esse é o espaço entre eles. Então você tem 130 em ambos os lados. Se você somar isso duas vezes 130, e este número, você vai acabar com 1400. Também aqui, ouvi dizer que para algumas pessoas não funciona como eu mostrava aqui. O que você precisa fazer é tentar primeiro adicionar as colunas e a largura da calha, em seguida, pular a largura da coluna e, em seguida, ir para a última e, em seguida, a largura da coluna é adicionada automaticamente. Se isso não funcionar para você, então altere a ordem de colocar os números. Alguns designers gostam de projetar dentro de uma grade. Então você terá um monte de linhas extras por aqui. Mas eu não, porque a maioria dos sites, você só tem uma coluna de três ou quatro, talvez uma coluna de duas, às vezes uma coluna de cinco, e você realmente não precisa de linhas extras para isso. Você também pode usar apenas as ferramentas de alinhamento dentro do Adobe XD. Eu só uso a grade externa como esta. Essa é a solução mais fácil. Agora, se sua página se tornar mais longa, você pode simplesmente clicar no nome e, em seguida, arrastá-lo para fora como você pode ver. Em seguida, esta linha é exibida, e esta linha é a borda de rolagem. Tudo bem, então outra coisa que você precisa preparar, que eu acho que é importante, é a coluna para o seu celular. Se você voltar para o recurso prancheta aqui e você rolar para baixo, eu sempre uso o iPhone 6. Você também tem telefones Android aqui. Como você pode ver, o iPhone 6, 7, 8 é um pouco mais largo do que o celular Android, então você tem um pouco mais de espaço. Sugiro que escolha este ou escolha este. Eu sempre escolho o iPhone. Por que não uso o iPhone mais novo? Bem, porque o iPhone mais novo é muito longo e maioria das pessoas tem uma tela que se parece com isso, pelo menos na proporção de dimensões. É por isso que sempre sugiro que use este. Vou mudar isto para móvel. Aqui também é o mesmo se você estiver indo para rolar, você também vai ver essa linha. Se você clicar em “Jogar”, você verá um tamanho normal de telefone e você pode rolar para o site se você tiver algum conteúdo dentro dele. Na prancheta móvel, também vamos configurar a grade, então marque esta caixa aqui. É assim que eu configu-o, e talvez os recursos padrão em sua tela não sejam os mesmos, mas você quer ter pelo menos 20 pixels em ambos os lados. Como você pode ver, se você mudar isso para 10, você terá menos espaço em ambos os lados, mas você quer dar-lhe algum espaço. Então vamos voltar para o meu telefone agora. Clique em “Mobile”, clique em “Grade” e como você pode ver, eu até usei 30 aqui, que faz parecer um pouco mais agradável, mas você precisa de pelo menos 20. Mas a maioria dos designers gosta de mais espaços em branco, então, para este projeto, nós também vamos colocá-lo em 30. Porque mais espaço em branco no lado esquerdo e direito só fará com que pareça mais limpo. Pelo menos use 20, mas eu prefiro 30. Agora estamos totalmente preparados para começar a projetar. Agora o que eu quero que você faça é ir para “Arquivo” e ir para “Salvar” porque nós vamos salvar este arquivo. Isso também é algo se você é XD trava e você não salvou seu arquivo, eu acho que você sabe o que isso significa. Eu sempre salvo no meu computador porque quero que os arquivos estejam no meu Dropbox, mas você também pode usar a Adobe Cloud. Mas se você não tem uma Adobe Cloud, sugiro que use seu próprio computador. Agora não quero salvá-lo na minha área de trabalho. Não quero salvá-lo na mesma pasta. Eu vou colocá-lo na pasta Arquivos de Curso” por enquanto, e eu vou dar-lhe um nome, Xd Course Exercício File, e eu vou clicar em “Salvar”. Agora você pode estar pensando, ok, por que precisamos nos preparar tanto? Porque eu só quero começar. Bem, é muito importante que você prepare suas pranchetas uma maneira boa, porque se você projetá-lo muito grande, por exemplo, e você está trabalhando com um desenvolvedor ou você está fazendo o site você mesmo, você está construindo-o no WordPress ou está codificando o site você mesmo, se você projetou nas propriedades certas, você pode apenas clicar em um item, e você pode apenas ver, oh, isso é 46. Se você o projetou muito grande, você precisa fazer previsões sobre o tamanho de todos os itens em um site real. É por isso que é tão importante preparar suas pranchetas da maneira que fizemos agora. Sei que é um pouco chato, mas é muito importante. Vamos para o próximo episódio onde vamos preparar nossas cores. 13. Preparando nossas cores: Bem-vinda de volta. Neste vídeo, vou mostrar como você pode criar suas próprias paletas de cores, com a cor de sua escolha. Vamos adicionar as cores à nossa coluna de ativos, as cores reais que vamos usar para o nosso site. Para este site, eu tenho essa paleta aqui, e eu sempre começo com algo assim. Eu tenho um fundo branco, é apenas um branco puro. Então eu tenho um quase branco, que é como um branco quebrado, como você pode ver. Em seguida, um mais leve, depois uma cor super brilhante e, em seguida, alguns tons escuros. Todas essas cores estão dentro do mesmo intervalo de cores. O que quero dizer com isso é que todas estas cores têm o mesmo valor de matiz, vou mostrar-lhe o que quero dizer. Por enquanto, vou copiar toda essa paleta de cores do meu design final, arquivo Rino. Vamos voltar ao nosso arquivo, e vamos basear essas cores aqui. Por enquanto, vamos arrastá-los para fora dos quadros de arte. Como eu disse no vídeo de ativos, você pode selecionar todos eles, e depois adicioná-los aos ativos aqui. Desta forma, se mudarmos a cor aqui, ela será alterada em todo o site. partir de agora, estamos prontos para o próximo passo. Mas vamos apenas dizer que você está projetando outro site, porque este site que vamos construir juntos é, naturalmente, um exemplo, e você usará o Adobe XD para muitos projetos diferentes. O que eu queria mostrar é como você pode criar suas próprias paletas de cores. Vamos apenas dizer que você tem um cliente, e seu cliente tem um logotipo, então vamos apenas dizer que você está trabalhando para a empresa Nikon. Isso seria muito legal. Este é o logotipo do cliente, então como você pode criar uma paleta com esse logotipo? O que você vai fazer é, em primeiro lugar, você vai fazer uma duplicata deste, onde você apenas cria seus próprios círculos com esta ferramenta aqui. Então o que você precisa fazer é fazer outra duplicata, e você precisa saber qual é a cor da tonalidade, da cor desta marca principal. Você tem um dos círculos que você vai usar como referência, e você vai levar a ferramenta conta-gotas aqui. Você pode clicar nele ou você pode clicar em I, então clique nele e, em seguida, soltá-lo assim. Agora clique no preenchimento, e nós vamos mudar o código hexadecimal, que é o código de cor aqui, para HSB. Agora você pode ver o valor de matiz aqui, então este é o valor de matiz. Esta é a saturação, e este é o brilho. Se você derrubar isso, vai ser uma cor mais escura. Se você derrubar isso, vai ser mais para Grey. Se você mudar isso, ele vai mudar a cor real. Novamente, vamos apenas, colocar os olhos, clicar nele, abri-lo, e então você vai ver que o valor de matiz desta cor é 52. Este é branco, não precisamos mudar isso. Mas para este, basta abri-lo, e apenas digitar 52 aqui. Eu também vou fazer isso por este, 52. Agora, eu criei uma nova paleta a partir deste logotipo, então essas cores sempre ficarão agradáveis ao lado desta cor principal aqui. Você também pode adicionar essa cor, é claro, à paleta, se quiser. Mas é assim que você pode criar suas próprias paletas a partir de um logotipo ou de uma imagem. Às vezes você precisa fazer alguns ajustes, porque com amarelo, por exemplo, o amarelo não parece tão brilhante em comparação com esse valor. A saturação aqui é 94 e 100, e isso também é o mesmo. Mas isso não parece tão brilhante quanto essa cor, então às vezes você precisa alterá-la um pouco para torná-la compatível. Eu nem sempre recomendo isso, mas quando ele parece realmente diferente, você pode alterar os valores, e fazer uma paleta que parece quase igual a esta. Ou outra paleta que você pode encontrar online, ou usar a cor da Adobe, ou talvez uma imagem do Pinterest, ou outra coisa. Isso é tudo o que eu queria mostrar para a paleta de cores, por enquanto eu vou apenas excluir tudo isso. Vamos clicar em salvar por enquanto, e a última coisa que eu quero fazer é criar um novo quadro de arte para todos os elementos da nossa marca. Agora eu vou apenas clicar no título do quadro de arte, pressionar alt, e arrastar um novo quadro de arte para cá. Apenas dê um pouco de distância como esta. Desligue a grade, pegue suas cores e coloque-as dentro deste quadro de arte. Nós vamos usar este quadro de arte também para o próximo episódio onde vamos preparar todas as nossas camadas de texto. Isso será muito bom porque se tivermos muitos elementos já preparados aqui, podemos facilmente arrastar um item daqui para aqui. Então podemos construir a página muito rápido. Eu vou renomear este quadro de arte para styleguide, e eu vou fazer a cor do fundo algo um pouco mais escuro para que eu possa realmente ver todas as cores aqui. Isso deve ser bom por enquanto. Vou salvá-lo novamente e, em seguida, no próximo episódio, vamos preparar todas as nossas fontes. 14. Preparando nossas fontes: Bem-vinda de volta. Neste episódio, vamos preparar todas as nossas camadas de texto. Este também é um passo importante antes de você realmente começar a criar todas as páginas em seu site. Muitas vezes vejo designers que não aderem aos tamanhos de fonte, espaçamento de fontes, uma altura de linha, e então começa a se tornar realmente confuso depois de um tempo. Vamos preparar todos os elementos principais. Não vamos preparar tudo, caso contrário não teríamos muita liberdade criativa. Mas você sempre precisa de um título grande, um título médio, corpo de texto único, você precisa de dois botões, você precisa daqueles em cada site. Isso é um benefício, e o que também tem benefício é que você já pode ver se tudo parece bem juntos antes de realmente começar a projetar a página. É o que vamos fazer. Como você pode ver, por exemplo, este é um título muito grande e este é um título de tamanho médio. Então volte para o nosso arquivo de exercícios. Nós vamos para os painéis de arte de guia de estilo, e nós vamos pegar a ferramenta de texto. Certifique-se, a propósito, que você tem as fontes instaladas. Portanto, na pasta de fontes, certifique-se de que você instalou todas essas fontes no seu computador. Mas é claro, você também pode usar suas próprias fontes se você quiser praticar um sinal diferente do que eu estou criando agora. Ok, então, por enquanto, eu vou pegar a ferramenta de texto e eu vou fazer o grande título primeiro. Não basta clicar, mas fazer uma caixa porque queremos ver a altura da linha e que é a altura entre as diferentes linhas. Vou pôr isto à esquerda aqui. Eu só vou digitar, “Este é um grande título com pelo menos duas linhas de texto.” Clique na sua ferramenta de seleção. Vamos mudar algumas configurações aqui. Primeiro de tudo, vamos mudar a cor, então pressione “I” e, em seguida, vá para a cor escura principal e clique nela, então agora é a cor certa. Também altere esse valor para 54 e esse para 64, e isso depende das fontes que você está usando. Mas eu quase sempre uso algo em torno de 50 para o meu grande título principal. Então deixe assim e agora faça uma cópia com “Alt” e “Shift” e depois arraste, primeiro solte o mouse, depois “Alt” e “Shift” e agora faça nosso segundo grande título. Agora crie o nosso h2, que é o título não tão grande, mas ainda muito grande. Eu sempre uso algo em torno de 36 e agora você precisa ajustar a altura da linha para algo como 44. Então parece um irmão mais pequeno deste. Você pode até mudar o texto para algo assim. Em seguida, no site, eu também usei outro título ainda menor. Nós temos este título este é um grande, e título médio, e um título menor para os meus itens de portfólio, por exemplo, que é 24. Eu também vou preparar isso. Faça outra cópia com alts, faça 24 e, em seguida, altere a altura da linha para 32. Agora você pode ver duas linhas porque esta caixa é muito grande, então faça esta menor, e agora você pode ver a altura da linha. Você pode ver que estes corrige. Esta linha, nós não precisamos desta linha agora porque nós não vamos rolar dentro deste quadro de arte. Clique no seu quadro de arte, vá para “Rolagem” e defina isso como nenhum. Esta linha desaparecerá. Agora, para os textos corporais, como eu disse antes, precisamos de um texto lorem ipsum, que é apenas texto de preenchimento que todo designer usa. Basta ir para loremipsum.nl ou eu tenho uma nova extensão que é chamado Lorem Ipsum gerador e você pode criar um texto ipsum lorem como este. Por enquanto, vou copiar este. Copie-o, volte para o seu Adobe XD. Vamos fazer uma cópia deste, “Alt” clique e “Shift”, fazer uma cópia, selecionar todos os textos e colar todo o seu texto lorem ipsum, não importa que seja muito longo. Clique fora dele e faça este 16. Para textos corporais, que é a parte principal do seu grande texto. Grandes textos longos como este, eu sempre uso 16 e às vezes até 18. Porque na maioria dos sites e na maioria das telas, isso parece bom o suficiente. Eu aconselharia 18 ou 16. Para este site é 16. Negrito não parece tão bom para o corpo do texto, o que significa que textos que são longos para este site, eu usei o meio. Em muitas fontes, às vezes também é chamado regular e isso deve ser bom o suficiente. Talvez às vezes leve, mas eu sempre fico com o normal ou médio. Lá para a altura da linha, eu uso algo como 25 e, em seguida, parece com isso. Ok, então agora nós preparamos os estilos de texto, e para os textos principais, o que também parece bom, se o texto principal não é tão preto quanto os títulos, mas um pouco cinza. É por isso que usei esta cor. Vamos colocar esses dois ao lado do outro, e eu vou mudar a cor aqui. Vamos trabalhar com cinza por enquanto. Como você pode ver, ele se mistura um pouco melhor se você escolher um tom cinza. Para o meu site, isso parece cinza, mas não é cinza, é na verdade roxo misturado com cinza. É por isso que combina tão bem com o fundo e esta cor e este título, e ele só parece muito bom. Clique neste texto e, por enquanto, eu vou escolher a cor que eu usei para o texto, que é este. Neste fundo, ele não parece tão bom, mas em um site ele parece realmente bom, então alinhado corretamente, e então nós vamos criar nosso botão principal. Para botões, eu não uso o bloco de texto, eu apenas uso uma única linha. Clique no “T”, clique nele e digite algo como “Lorem ipsum” ou “Este é um botão”. Volte para sua ferramenta de seleção, e para seus botões, eu, maioria das vezes, uso semi negrito. A cor do texto para botões neste site é branca, e o plano de fundo é um retângulo. Vou pegar seu retângulo e fazer um retângulo grande como este. Desmarcou a fronteira. Certifique-se de que a cor está definida para a cor do botão desejada. Agora, coloque-o abaixo dos textos do botão, mas agora está acima dessa camada de texto. Então use comandos e, em seguida, colchetes esquerdos, se você ainda não estiver acostumado com as teclas curtas, vá para suas camadas e, em seguida, basta arrastá-lo assim, certifique-se de que está sob a camada de texto. Agora posição em como este torná-lo ainda um pouco maior espera “Alt”, de modo que os lados serão escala proporcionalmente, algo como isso deve ser bom. Para o texto em si, Eu sempre uso 15, É um pouco menor para os botões. Vou usar 15 por enquanto. Pegue a seleção novamente e alinhe-a no meio. Agora a última coisa que eu fiz foi, eu dei os botões, cantos arredondados. Para este site, usei quatro. Então você pode pegar as coordenadas aqui e colocar em quatro, você pode ver o número aqui, ou você pode apenas digitá-lo e usar suas setas para criar algo que parece bom. Mas quatro é o que usei para este site. Agora agrupe esses dois juntos, então clique no texto mantenha “Shift”, clique também no plano de fundo. Agora esses dois são selecionados e pressione um comando “G” ou clique com o botão direito e, em seguida, “Grupo”. Agora este botão é um grupo e podemos movê-lo assim. Além disso, uma última coisa, certifique-se de selecionar um texto, clique duas vezes nele e, em seguida, certifique-se de que este está alinhado no meio. Isso é bom porque agora, se você quiser aumentar o botão, ele ficará automaticamente no meio desse botão. Então isso também é um bom truque. Agora nós preparamos a maioria das camadas de textos importantes, mas isso é apenas para web. Deixa-me mostrar-te o que quero dizer. Para a web, eu usei um título de 54 pontos aqui, mas em um celular que parece muito grande porque este é 64. Vou te mostrar o que quero dizer porque se eu usar o mesmo tamanho de título em celulares e me deixar apenas clicar em um texto móvel, e eu vou colocar isso no 54, vai parecer muito grande em telefones celulares. Você quer que seus títulos sejam um pouco menores em dispositivos móveis. Volte para o arquivo de design e você só precisa fazer isso para esses títulos. Porque textos corporais muitas vezes também parecem bons no celular. Pegue todos os seus títulos, arraste-os para os direitos, libere-o fazer talvez suas placas de arte um pouco maiores para o nosso comentário clique no fundo do quadro de arte, faça seu quadro de arte um pouco maior, e então nós vamos fazer esses campos um pouco menores. Você não pode usar o mesmo truque que para imagens, por exemplo, e basta usar o “Shift” porque então o tamanho da fonte não mudará. Temos de o fazer de uma forma diferente, o que é necessário para alterar os valores aqui. Por exemplo, torná-lo um pouco menor. Para o meu site, eu usei 46 e 52 para este título, Eu usei 30 e 36, 38, e este título realmente não parece tão ruim no celular. Você sabe o que? Nós só vamos ter títulos personalizados para os grandes títulos aqui. Estes são os sites móveis e estes são os sites de desktop. Deixe-me criar um título bem rápido. Uma área de trabalho, eu vou usar outra fonte caso contrário, é confuso. Vou usar algo muito diferente, algo como Helvetica. Vai torná-lo menor e vai torná-lo de outra cor. Não vamos confundi-lo com nosso próprio design, desktop e celular. Agora sabemos o que, o que é. Agora, a última coisa que queremos fazer é adicioná-los ao painel de ativos. Abra o painel de ativos novamente, selecione todas as camadas de texto da área de trabalho e pressione o sinal de mais em “Estilos de caractere”, e agora também selecionou esses dois e pressione mais. Mas para esses dois, você quer saber que eles são móveis. Você pode mudar o nome aqui. Clique fora dele e depois renomeie aqueles também, e talvez coloque um m atrás dele, que você saiba, é para celular. Você também pode reorganizá-los se quiser, assim. Seus celulares estão aqui juntos. Tudo bem, então isso é tudo o que precisamos fazer para preparar todos os telefones. Agora vai ser muito fácil construir nossa página. Nós já temos um botão, temos um corpo de texto, e temos alguns títulos e todas as nossas cores. Espero vê-lo no próximo vídeo onde vamos começar a construir o cabeçalho que vamos ver aqui. Agora estamos totalmente preparados para começar a projetar o site real. Espero vê-lo no próximo episódio. 15. A imagem de grandes cabeçalho e menu: Bem-vindos de volta a este novo capítulo. Agora vamos finalmente começar a construir nossa página. Nós preparamos este design de uma forma muito profissional. Neste vídeo, vamos criar esta seção que vamos ver aqui. É uma bela seção limpa com um cabeçalho transparente e algumas camadas de texto diferentes. Vamos apenas começar. Estamos aqui no arquivo de exercícios, e este é o quadro de arte que preparamos. Nós configuramos nossa grade como podemos ver, que vamos usar para o esboço. Precisamos de muitos arquivos agora desta pasta, o arquivo do site, então certifique-se de ter este aberto. A primeira coisa que precisamos é a foto, então esta é a foto que eu usei para o cabeçalho. Mas primeiro, vamos criar uma forma, então vamos apenas pegar a ferramenta de retângulo por enquanto e criar uma forma porque vamos criar o plano de fundo primeiro. Crie uma forma grande como esta e faça-a caber na tela, algo assim, e agora vamos dar-lhe uma cor de fundo. Primeiro, desmarque a fronteira. Agora é branco e agora dê uma cor de fundo, que é essa cor escura. Agora há uma boa ferramenta dentro do Adobe XD e que é que você pode arrastar em uma imagem para uma forma e, em seguida, ele será automaticamente mascarado. Vou te mostrar como isso funciona. Mas primeiro, precisamos criar uma cópia porque se você arrastar a imagem agora, assim, ela criará automaticamente uma forma, mas então a cor escura desaparece. Precisamos dessa cor escura porque em nosso design final, há uma cor escura abaixo de nossa imagem, e essa imagem tem uma transparência de 30%. Vamos voltar para o nosso arquivo e excluir essa imagem por agora com o comando Z. Primeiro, vamos criar outra duplicata desta camada, então eu vou arrastar Alt, e agora eu tenho duas dessas camadas, colocá-las em cima de uns aos outros. Agora pegue sua imagem e arraste-a para a tela, então agora eu tenho uma imagem e um plano de fundo. É assim que eu sempre faço. Você também pode definir um fundo para todo o seu quadro de arte, mas eu quero ter esta cor branca para o fundo do meu site, então é por isso que eu faço uma forma separada para o fundo. Agora eu tenho uma imagem, e eu vou colocar essa imagem em uma opacidade de 30%. Basta pegar a opacidade aqui ou apenas pressionar 3, por exemplo, ou 4, dependendo da sua imagem e do seu plano de fundo, é claro. Por enquanto, vou colocar em 30%. Agora pegue os dois. Vamos agrupá-los, então clique com o botão direito do mouse e clique em Grupo. Agora vamos bloqueá-los com Comando+L ou clique com o botão direito do mouse e, em seguida, bloquear, porque então não podemos movê-lo mais e podemos facilmente colocar itens em cima dele. Essa é a primeira parte, e agora vamos criar o menu superior, então precisamos de um logotipo. O logotipo é a versão branca que você pode ver aqui, é esta. Agora eu vou arrastá-lo para cima da minha tela, e se eu arrastar outra imagem para cima de uma tela que não está bloqueada, ela irá substituir essa imagem também. Essa é uma das coisas que você precisa ter cuidado. Às vezes você tem um monte de imagens em seu quadro de arte e, em seguida, você quer arrastar um logotipo para fora do seu quadro de arte, para que ele não substitua e mascare dentro da forma em que você está arrastando. Isso é só uma pequena gorjeta. Por enquanto, vamos arrastar isso e usar a grade que criamos e fazer isso um pouco menor assim. Basta agarrá-lo, diminuir o zoom, e isso é bom por enquanto. Agora vamos criar o menu. Pegue a ferramenta de texto aqui e vamos alinhá-la perfeitamente depois disso, então não importa onde você clique. Basta clicar em algum lugar e digitar Início. Agora, para o site final, nós também usamos semibold muitas vezes. Como você pode ver, temos um texto aqui, e isso é semibold, mas não adicionamos semibold aos nossos estilos de personagem. O que eu aconselho você a fazer para tornar sua vida um pouco mais fácil é fazer outro estilo aqui que vamos usar muitas vezes. Basta copiar este título, por exemplo, fazer outro, colocar no 16 no semibold, altura da linha vai ser um pouco diferente, 22 por enquanto. Nós também vamos adicionar este estilo à nossa cédula, e eu vou arrastá-lo para o fundo. Agora temos dois estilos de 16. Isto é para o corpo do texto e isto é para títulos. Agora volte para o seu arquivo e agora podemos usar este mesmo estilo. Se clicarmos em nossos textos caseiros e clicarmos neste, agora será exatamente o mesmo estilo. Mas como você pode ver agora é preto, então nós não podemos realmente vê-lo. Agora vamos clicar no branco, e agora temos este estilo, mas depois com uma cor branca. Agora eu vou fazer algumas duplicatas para todas as minhas páginas, então eu vou segurar Alt e Shift e, em seguida, primeiro soltar o mouse e , em seguida, soltar Alt e Shift. Faça isso novamente e faça isso novamente e, em seguida, clique duas vezes e altere o texto. Clique fora dele, fora, boom, e agora eu terminei. Como podem ver no meu projeto final, há também um estado ativo sob este ícone de Início. Um estado ativo significa que o usuário sabe em que página ele é, então nós também vamos fazer isso em nosso design, mas vamos apenas primeiro alinhá-lo um pouco. Eu vou pegar todos eles assim, e eu vou me certificar de que está alinhado com este aqui. Como eu vou fazer isso é eu vou também selecionar um logotipo e clicar neste, então agora ele vai estar perfeitamente alinhado no meio. Agora eu vou arrastar esses quatro, colocá-los à direita aqui, dar um pouco de espaçamento, selecionar todos eles, e então pegar essa ferramenta. Agora, o espaço entre eles é exatamente o mesmo. Agora só precisamos criar uma linha, então vá para sua página inicial, pegue a ferramenta de linha e crie uma pequena linha sob seu texto inicial. Acho que usei dois ou três de tamanho. Vou colocá-lo em dois por agora e a cor da borda é a cor roxa que eu usei. Agora volte para a sua ferramenta de seleção, mova-a um pouco para cima, isso parece bom. Agora o que você quer fazer é pegar todo o seu cabeçalho e agrupá-lo porque nós vamos precisar deste cabeçalho em um monte de páginas, é claro, então agora temos um pequeno grupo com todos os itens nele. Agora precisamos criar esses textos e agora isso vai ser muito fácil. Mas a única coisa que temos que ter certeza é que instalamos esta fonte, que é chamada Abuget. Se você vai para o localizador e você vai para as fontes de pasta, certifique-se de que você instalou o Abuget, e agora podemos criar um design que se parece com este. Este é o grande título, 54, este é o 16 semibold, e é apenas um texto corporal normal. Isso vai ser muito fácil porque nós preparamos nossos estilos aqui. Pegue este título, faça uma duplicata, segure Alt assim, e solte-o, pegue um de seu corpo de texto assim, e pegue um de seus semibolds assim, e então nós só precisamos do Abuget, mas nós realmente não precisa de um estilo para isso porque há apenas um lugar no site onde Abuget é usado. Agora vamos alinhar isto primeiro. Eu seleciono os dois inferiores e torná-los brancos e selecionar o superior e torná-lo roxo. Eu não vou fazer todas as camadas de texto nesta série tutorial perfeito porque realmente não importa, então às vezes eu vou apenas deixar os textos padrão como você pode ver aqui. Para os textos do Abuget, o que você pode fazer é que eu faria uma nova camada de texto. Clique aqui, basta digitar seu nome, voltar para a ferramenta de seleção, selecionar a fonte, torná-la branca, e torná-la muito maior. Para esses tipos de fontes criativas, os tamanhos de fonte podem ser muito diferentes porque eles têm um monte de formas diferentes. Eu não recomendaria usar os mesmos tamanhos que usamos para este, porque com títulos criativos, vai ser muito diferente. Como você pode ver agora, eu preciso alinhá-lo um pouco melhor para torná-lo bonito. Para o alinhamento, é claro, você pode pegar todos esses e, em seguida, pressionar esta ferramenta para torná-los alinhados corretamente. Mas Xd irá alinhá-lo à parte inferior da caixa de texto real, então se eu vou arrastar a caixa de texto até aqui, e então eu vou usar a mesma ferramenta que você pode ver agora, ele vai mudar. Isso nem sempre é perfeito. Se você estiver alinhando e usando essa ferramenta em camadas de texto, eu sugiro que você tente fazer isso se encaixar assim. Também para este, torná-lo o mais pequeno possível e, em seguida, usar a ferramenta de alinhamento, porque então ele ficará melhor no olho. Isso é lá para este tutorial. Vou desmarcar a grade para ver o que criamos. Como você pode ver, já que temos os estilos preparados, este foi um processo muito fácil. Basta arrastá-lo para dentro, mudar as cores, alterar o texto, e agora podemos passar para a próxima seção, que será esta seção com uma forma personalizada e esta barra ou caixa aqui com nossos ícones vetoriais SVG personalizados. Espero vê-lo no próximo vídeo. 16. O divisor de forma de onda: Olá e bem-vindo de volta. Neste vídeo, vamos criar essa forma personalizada e essa barra de sobreposição que estamos vendo aqui. Como eu disse antes, esses ícones são porta efeito, por isso não importa o quão longe você zoom em, eles sempre serão afiados. Há uma bela sombra macia debaixo deste bar. Você realmente não vê, mas quando eu desligo, você pode ver. Isso faz flutuar um pouco. Agora vamos criar essas partes, vamos voltar ao nosso arquivo. O que vamos fazer é criar a forma personalizada primeiro. A forma personalizada tem essa cor, parece branca, mas não é realmente branca. Pegue a ferramenta Caneta porque com a ferramenta Caneta você pode criar qualquer forma que desejar. Se você já trabalhou no Photoshop ou no Illustrator antes de conhecer essa ferramenta, mas se você não conhece essa ferramenta, você precisa saber duas coisas. Você pode clicar, clicar, clicar, clicar, clicar para criar uma forma e fazer uma forma curva que você clica e mantém. Desta forma, você pode criar formas personalizadas como esta, e então se você quiser fechá-lo, você volta para o seu primeiro ponto e então você pode preenchê-lo com uma cor, você não pode ver agora porque é branco. Por exemplo, você pode criar uma forma como esta. Volte para a ferramenta de seleção, clique fora dela, clique nela e exclua-a. Volte para a ferramenta Caneta através do P no teclado e agora vamos criar essa forma. Vamos ver como isso funciona. Primeiro, baixo, depois para cima e depois para baixo novamente. Clique aqui, e esse é o primeiro, em seguida, clique em algum lugar por aqui e arraste-o. Uma onda grande aqui, algo assim, e podemos ajustar isso mais tarde se você quiser. Agora você pode ir um pouco fora do seu aplicativo, realmente não importa ou apenas no lado e eu apenas fazer a última forma. Não parece perfeito, mas por enquanto, isso é o que vamos fazer, clique aqui e depois volte e clique aqui e feche assim. Agora, vamos dar-lhe uma cor, que precisamos ter certeza de que está ligada, e vamos apagar a borda. Clique fora dele, volte para a sua forma e mova-a para cima. Como você pode ver agora, parece uma onda muito agradável. Não é perfeito, portanto, se você quiser ajustar a forma, você pode clicar duas vezes nela e clicar em seus pontos de ancoragem. Isso é o que eles chamam de pontos de ancoragem, e você pode ajustar as formas assim. Mude isso um pouco porque eu quero uma forma que se pareça um pouco mais semelhante ao meu design. Além disso, depende para que você possa adicionar mais pontos mais tarde. Por exemplo, se você quiser outra colisão aqui, você pode simplesmente clicar e adicionar outro ponto de ancoragem, mover isso para cima e, em seguida, usar as alças aqui se você quiser. Então, se você quiser excluir um desses pontos de ancoragem, basta clicar no “Ponto âncora” e clicar em “Excluir”, e agora você está de volta ao seu design original, pelo menos mudou um pouco. Às vezes você precisa ajustá-lo um pouco assim. Agora isso parece legal. Agora o que eu também vou fazer é clicar em toda a “Prancheta” e mudar a aparência de fundo para uma cor que está no meu paladar. Agora parece que esta forma e o fundo é apenas uma peça. Novamente, vou bloquear esta camada, então clique nela e clique com o botão direito do mouse e clique em “Bloquear” ou “Command L.” Agora vamos criar a forma personalizada. Volte para esta ferramenta e crie uma forma. Nós não sabemos onde o tamanho da prancheta está agora, então eu vou clicar em “Prancheta” novamente, ligar a grade, depois voltar para a minha ferramenta de seleção, clicar em “Voltar” no retângulo e colocar o retângulo assim. Vou colocá-lo no meio desta linha. Se vamos clicar em “Play” agora, veremos metade desta caixa, que parece muito bom. Isso é bom por enquanto, desligar a borda e torná-la a cor escura. Agora, para dentro desta caixa, temos usado o Montserrat Semi Bold novamente, e temos quatro ícones. Vamos começar com a importação dos ícones. Volte para o localizador, vá para os arquivos do site e, em seguida, vá para os ícones da página inicial. Estes são os quatro ícones. Agora, antes que você vá arrastá-los para dentro, certifique-se de que você está em algum lugar fora de sua prancheta, e apenas direcioná-los para dentro assim porque eles podem ser realmente grandes, agora eles são muito pequenos, mas às vezes eles são enormes e então eles bagunçam sua prancheta. Então, às vezes, você não consegue encontrá-los porque eles se encaixam dentro de uma prancheta. Certifique-se de que você está fora da prancheta ao inserir elementos. Agora vou selecioná-los e arrastá-los para o seu Canvas assim. Às vezes você não pode realmente selecioná-los assim, é realmente frustrante porque você realmente precisa clicar sobre as formas reais de seus ícones. Como você pode ver agora, se eu quiser arrastar todos esses, agora funciona, mas nem sempre funciona. Você tem que realmente ter certeza de que você vê essas linhas azuis e então você pode arrastar os ícones. Se você não gosta que arrastar, o que você também pode fazer é selecionar todos eles e, em seguida, pressione “Command X” e role para a parte onde você deseja, em seguida, pressione “Command V." Command X é para cortar e, em seguida, V é para colar. Ou você também pode usar o botão direito do mouse e, em seguida, cortar, como você pode ver aqui. Agora eu vou alinhar esses corretamente e claro, vamos usar as ferramentas de alinhamento para isso. Primeiro para tornar a nossa vida um pouco mais fácil, vou trancar esta barra e agora só colocar os ícones assim. Certifique-se de ter espaço suficiente para as mensagens aqui. Agora selecione todos os seus quatro ícones. Use esta ferramenta e, em seguida, use essa ferramenta, e agora coloque-os em posição. Agora vamos voltar ao nosso styleguide e vamos pegar este título porque precisamos de um semi negrito tão alt, e depois arrastar, torná-lo largo, e então temos nossos títulos. Como você pode ver agora, meu alinhamento não é tão bom. Às vezes você quer começar com o texto, às vezes você quer começar com os ícones, e desta vez você quer começar com esse texto. Por exemplo, se eu tiver uma superfície chamada Web Design, por exemplo, eu posso fazê-lo assim. Agora eu não preciso desta caixa de texto porque eu não uso duas linhas, eu só vou clicar no “Texto do Ponto” e isso torna mais fácil de alinhar. Certifique-se também de clicar em “Alinhamento central”. Porque então, se você copiá-lo e você fizer um novo texto, ele se alinhará de dentro do meio. Eu fiz um quatro superfícies agora, atualizações de site, Backups, Desenvolvimento e Web design, e agora eu quero alinhá-lo corretamente. Por exemplo, se você selecionar esses dois, alinhe-os assim e agrupá-los. Novamente, clique neste, turnos, clique neste, alinhe-os no meio e, em seguida, clique com o botão direito do mouse e agrupe-os. Este não é um. Isso não foi muito útil. Se você clicar em seu ícone e seus textos, e então pressionar “Comando G”, você não precisa mouse porque às vezes você clica errado como eu fiz agora. Agora eu quero que o espaço entre esses ícones seja o mesmo, e eu quero que o espaço seja o mesmo deste lado. O que eu vou fazer é alinhar este a um lugar que parece bonito, e agora eu vou contar os pixels para o lado, então são 130. Vou colocá-lo em 110. Vamos nos certificar de que este também tem 110 pixels do lado, assim. Agora eu vou arrastar todos os quatro ícones e eu vou alinhá-los no meio. Isso parece legal? Vamos desmarcar a grelha por enquanto. Não, parece muito bom, quero que fiquem mais próximos um do outro. Eu vou fazer isso mais para o meio assim, 160, e também para este 160. Novamente, selecione quatro deles e alinhe-os assim. Isto parece um pouco melhor. Agora precisamos adicionar a sombra. Volte para a camada de fundo, desbloquee-a com “Command L” e adicione uma sombra como esta. Amplie para que possamos ver o que estamos fazendo, e como você pode ver agora, é uma sombra muito pequena, e queremos que essa grande sombra faça flutuar. Você faz isso aumentando esse número, o que trará a sombra para baixo. Se você colocar isso em 30, por exemplo, você pode ver que ele vai trazer para baixo e se você, em seguida, aumentar este número para 30, 60, que são valores que são usados com bastante frequência. Você pode ver que se torna esta sombra muito suave e agradável. Você pode até mudar a cor da sombra se quiser. Mas a maioria das sombras em preto parece boa ou você pode diminuir a intensidade da sombra assim. Agora terminamos com esta parte. Vamos verificar o que criamos até agora. Clique em sua “Prancheta” e clique em “Jogar” e, como você pode ver agora, ele começa a parecer um site real. Isto é muito bom. Vamos pular para o próximo episódio. 17. Imagens de Floating com sombras: Bem-vinda de volta. Neste vídeo, vamos criar a seção de imagens flutuantes que se parece com isso. Parece complicado, mas é uma das coisas mais fáceis de se fazer. Vamos usar essas sombras novamente, e também vamos criar um ícone personalizado. Como você pode ver aqui, criamos este ícone dentro do Adobe XD. Se você realmente quer entrar em design de ícones, eu sugiro que você vai usar o Illustrator porque essa é uma ferramenta de software da Adobe que realmente se concentra em criar formas fatoriais. Mas se for apenas por um ícone simples como este, também podemos criá-lo no Adobe XD. Vamos ver o quão rápido podemos criar esta parte esquerda. Vamos voltar ao nosso arquivo de exercícios, e vamos usar nossos recursos, é claro. Agora precisamos de um título médio, então segure Alt e faça uma cópia dele. A propósito, não te esqueças de ligar a tua grelha, para sabermos que lado é este. Também precisamos de um convés de parafusos, por isso também vou fazer uma cópia deste. Alinhe-o corretamente, e isso é realmente tudo que eu preciso. Para este texto, eu fiz com três linhas de altura, sim. Como você pode ver agora, esta camada de texto quase parece cinza, mas na verdade é cor cinza roxo escuro. Neste contexto, a combinação dessas duas colunas parece muito agradável. Então sim, agora vamos criar duas coisas. Primeiro, vamos criar esta pequena linha, e depois vamos criar os ícones personalizados. Amplie o seu título, aperte a linha dois aqui e crie uma linha como esta. Segure, e então faça um pouco mais espesso. Sugiro que a espessura da linha seja a mesma que os elementos ao seu redor. Por isso, neste momento temos um grande texto aqui. Se você quiser fazer o design ficar bonito, certifique-se de que é quase tão grosso quanto este. Então, talvez quatro ou cinco. Isso deve ser bom para a cor. Claro que vamos usar o roxo. Então agora ele parece em linha com este design. Agora vamos criar nosso ícone personalizado. Então, primeiro vamos criar uma linha de texto. Por enquanto eu vou apenas criar uma linha de texto como esta. Agora queremos criar o nosso ícone. Então amplie um pouco. Agora pegue a ferramenta caneta em P, e vamos criar uma caixa de seleção. Uma caixa de seleção não é muito difícil. Então, siga-me neste. Você sempre pode ajustá-lo mais tarde, para que não tenha que ser perfeito. Basta tentar criar uma caixa de seleção agradável como esta. Talvez queiras ter um fundo plano, talvez não. Só parece legal. Então vamos testar se é isso que queremos. Desligue a borda e para a cor de preenchimento, vamos escolher nossa própria cor roxa assim. Eu realmente não gosto do fundo plano, então nós vamos apenas clicar duas vezes sobre ele e eu vou apagar este e apenas trazer este para o meio. Sim, isto parece um pouco mais agradável. Agora, basta ajustar alguns pontos para que pareça um ícone de verificação realista. Isso parece muito bom, então eu vou clicar fora dele novamente. Agora o que eu quero fazer é alinhá-lo corretamente e talvez torná-lo um pouco menor assim, segure Shift. Em seguida, alinhe-o ao meio do texto. Alinhe o texto assim. Você sabe o que? Vou torná-lo um pouco maior. Se voltarmos ao nosso projeto final, podem ver que usei coordenadas arredondadas aqui. Também lhe mostrarei como fazer isso. Então, se você quiser um fundo arredondado, por exemplo, basta clicar duas vezes neste ponto de ancoragem, e então você pode ajustar o fundo assim. Talvez também faça isso por este lado. Dê a ele um pouco de sensação personalizada, que se encaixa no seu site. Não é perfeito e você pode gastar muito tempo em ícones, é claro. Mas eu só quero mostrar o básico sobre como criar um ícone legal. Agora o que eu quero fazer, é ter certeza de que ele fica bem em apenas uma linha. Agora basta selecionar ambos, agrupá-los e, em seguida, manter a tecla Alt e Shift e criar outra linha de caixa de seleção como esta. Agora temos três deles. Alinhe-os corretamente, boom. Talvez dar um pouco mais de espaço. Novamente, algumas pessoas gostam de medir cada barra entre todos os seus itens. Eu só gosto de projetar no meu olho porque as medidas são boas, mas às vezes você precisa ajustar o alinhamento para torná-lo bonito, mesmo que não esteja perfeitamente alinhado. Então use seu olho e sua imaginação para fazer com que pareça bonito. Então, vamos agora desligar a grelha. Então eu vou clicar no quadro de arte novamente. Desligue a grade. Volte ao nosso projeto final. Como você pode ver, esta linha é um pouco mais longa. Então eu vou esticar este aqui para fazer algo assim. Estas são três linhas e eu vi que esta é um pouco mais longa, e talvez um pouco menos falsa, mas isso depende do seu site, é claro. Então agora terminamos com essa parte, e agora vamos arrastar nossas imagens. Então, o que você quer fazer é ir ao seu localizador, diminuir o zoom e certifique-se de arrastá-lo para fora do seu quadro de arte. Agora, como podem ver, este é um pouco menor. Então eu vou fazer isso do mesmo tamanho que os outros, assim, e ter certeza de que eles são uniformemente grandes assim. Agora selecione ambos, selecione todos eles e torná-los muito maiores. Agora só precisamos reorganizá-los de uma forma que pareça agradável e apenas direcioná-los para fazer um em cima do outro, ou podemos usar comentários, e, em seguida, colchete esquerdo ou colchete direito. Isso é algo que eu gosto de usar porque é muito mais rápido. Tudo bem. Isto parece bom. Eu vou fazer todos eles um pouco maiores novamente. Agora vamos adicionar sombras. Então, selecione todos eles e, em seguida, vá para suas sombras. Então vamos ajustar as configurações para todos eles. Então coloque isso em 30 de novo e coloque isso em 60. Agora, como você pode ver, esses itens estão flutuando muito bem. Talvez seja um pouco intenso demais, então diminua este, trazendo para 12, por exemplo. Agora, se você clicar de distância, olhar para este design, parece muito legal. Então, sim, na verdade, isso foi tudo o que eu fiz por este design. Então experimente sozinho. Então, no próximo episódio, vamos para a seção de clientes, onde vamos trabalhar com uma nova ferramenta chamada de grades de repetição, onde podemos mudar muitas coisas diferentes apenas arrastando assim. Espero vê-lo no próximo episódio. 18. Seção de logotipos de clientes na ferramenta de repetição: Olá e bem-vindo de volta. Neste episódio vamos trabalhar com um novo recurso chamado Repetir Grade, e vamos inserir alguns logotipos. Vai ser muito divertido. O que eu quero que você faça é ir ao nosso arquivo de exercícios, e tornar nossa prancheta um pouco maior. Selecionando sua prancheta como fizemos antes, você pode simplesmente clicar no nome, mas se você realmente estiver ampliado e não quiser rolar para cima até o topo da prancheta, você também pode comandar e em seguida, clique em sua prancheta, ou vamos apenas dizer, clique no plano de fundo. Porque se você clicar em um item com comando, você vai, claro, selecionar o item, então você precisa clicar no plano de fundo, e então você pode tornar sua prancheta mais longa assim. Agora vamos apenas criar esta nova seção rapidamente. Podemos, claro, sempre voltar para o nosso guia de estilo e um arrastar um novo título a partir daqui. Mas como este é o mesmo título, nós também podemos rastrear este título assim, alinhá-lo no meio, e então copiar uma de nossas linhas de texto corporal aqui, e também alinhar isso no meio. Eu quero alinhar essas duas camadas no meio de toda a minha prancheta. Eu só vou clicar na camada, boom, clique neste aqui, boom. Agora, mude o texto, algo assim. Este texto, eu quero que seja roxo, então volte para seus bens, e faça aquele roxo. Alinhe-o coloque 15 pixels do topo, e agora vamos trabalhar com as Grades de Repetição. O que eu quero que você faça é criar uma forma com seu retângulo. Vamos criar um retângulo como este. No início, vamos ligar a grelha. Novamente venha e clique no fundo, e ligue a grade porque realmente precisamos da grade agora para alinhar isso. Porque seu Repetir Grade também é uma ótima ferramenta, porque muitas vezes você terá o mesmo item diferente em uma fileira. Também podemos usar um Repeat Grid para este. Vamos praticar muito rápido. Eu vou excluir esses dois, e se você clicar neste, e você clicar em Repetir Grade, o que acontece é que, que XD sabe que este grupo precisa ser repetido em uma direção. Você pode repeti-lo para o fundo assim, ou você pode repeti-lo para o lado. Muitas vezes você tem uma grade dentro de seu site, e é aí que você pode usar sua ferramenta Repetir Grade, e agora você pode realmente facilmente apenas mudar o alinhamento assim. Para esses benefícios, precisamos apenas de três linhas. Podemos fazer isso assim, tornar nossas vidas um pouco mais fáceis, mas para a seção de clientes, também queremos fazer isso. Porque se não usarmos esta ferramenta Repetir Grade. By the way caras, o atalho para alternar entre o arquivo XD é comentário e, em seguida, o ícone de onda de um texto putty na tela, e no Windows isso é segurar e tocar. Se não usarmos esta ferramenta Repetir Grade, e queremos alterar a sombra, precisamos alterar a sombra em todas essas camadas individuais, e então você precisa desagrupar todas elas, ou simplesmente clicar em todas elas, e isso não é muito legal. Desta forma, se você mudar a sombra aqui, ela vai mudar em todos os lugares como você pode ver aqui. Volte para o nosso arquivo, clique neste, e clique em Repetir Grade, e agora basta criar três blocos como este, e também para o fundo, e agora precisamos alinhá-lo com a grade aqui. Você pode apenas aumentar o espaçamento entre os blocos. Uau, isso é 50, o que é quase perfeito, mas você também pode, claro, fazer os blocos um pouco maiores. Venha e clique no seu “Bloquear”, e então faça um pouco maior assim. Quero o mesmo espaçamento aqui, então serão 36. Isso é apenas brincar com os valores até você conseguir o que quer. Agora temos seis caixas perfeitamente alinhadas, e agora vamos estilizá-las. Clique na sua primeira caixa e, em seguida, exclua a borda, e nós vamos adicionar uma sombra como esta. Acho que usei a sombra padrão nisso. Pode ser que eu aumente ou devo dizer, diminua a intensidade dele, então parece um pouco mais agradável. Mas acho que foi só isso que fiz. Agora, para o interior, eu preparei todos os logotipos na pasta de logotipo do cliente, e eu acabei de baixar alguns logotipos da Internet, como você pode ver. By the way, este é apenas um exemplo, eu não trabalhei para essas empresas. Mas, na verdade, trabalhei para a Coca-Cola. É a única empresa para a qual trabalhei nesta lista. Mas isto é apenas um exemplo. O que eu fiz é que eu já os exportei com um fundo branco. Porque se você está apenas indo para arrastar todos os logotipos dentro de sua prancheta como este, eu vou selecionar todos eles, não a pasta de exportação, eu vou arrastar todos eles assim, você ainda vai ver o sombras que acabamos de aplicar. As imagens vão se estender da esquerda para a direita, e não é isso que queremos. O que eu fiz no meu arquivo de design final foi que eu criei pranchetas separadas para meus logotipos, porque caso contrário você vai ter esse problema. Quando eu soube que minhas caixas eram deste tamanho, eu posso realmente fazer 160 de altura, que seria bom, 360 e 116 de tamanho. O que eu fiz foi criar uma nova prancheta. Eu só agarro, por exemplo, este, fiz uma cópia dele, e fiz que 360 por 180, e então chamei que o nosso logotipo, por exemplo, desligar a grade. Eu dupliquei isso como você pode ver, e então eu inseri os logotipos um por um porque você quer alinhá-lo corretamente, é claro. Então eu exportei todas essas imagens, e aquelas imagens que você pode vê-las aqui. Vamos exportar em outro episódio, mas foi o que fiz para criar essas imagens. Primeiro criei todas as portas e depois exportei as imagens. Mas, por enquanto, para tornar sua vida um pouco mais fácil, você pode usar minhas imagens, e arrastá-las para a tela assim, ou você pode arrastar seus logotipos um por um, e depois colocá-las na prancheta. Mas então eles não fazem parte deste Repeat Grid. Somente se você arrastar todos eles assim, as Grades de Repetição funcionarão com essas imagens. Porque esta imagem agora está apenas no topo da nossa ferramenta Repetir Grade. Se você quiser usar essa ferramenta Repeat Grid, primeiro você precisa exportar todas as imagens que eu vou mostrar no próximo episódio, e então você pode simplesmente inserir todas as imagens como esta, e então você tem o logotipo perfeito do Repeats Grid seção. O que também é muito legal sobre isso é que se você vai criar seu design móvel, você pode simplesmente arrastá-lo assim, e depois mudá-lo para cima, e ele vai lembrar os dados que estão dentro se você só lembrar os logotipos como você pode ver aqui. Mas isso também é para um próximo episódio. Este foi o básico da ferramenta Repeats Grid. Espero que você tenha gostado deste episódio, e então eu vou vê-lo no próximo episódio onde vamos criar este esboço na caixa numérica. 19. Seção de estatística com caixas vazias: Bem-vindo de volta, neste episódio vamos criar a parte estatística. Este será um vídeo muito fácil, mas esta é apenas uma boa seção para quebrar a página. Caso contrário, será apenas uma cor grande. No meu site real, usei essa parte para animar esses números. Posso mostrar-lhe o resultado final no meu site. Como você pode ver aqui, esta é a idéia para esta parte onde esses números começam a se animar. Vamos começar a criar esta parte. Vamos voltar para o nosso arquivo de exercícios, e vamos mover este conselho Rs para a decisão porque precisamos fazer nossa placa R muito mais longa. Venha e clique em sua placa R, torná-lo mais longo e agora vamos desligar a grade porque nós realmente não precisamos disso para esta parte. Corte seu retângulo, crie uma forma grande como esta, desligue a borda, escolha os fundos mais escuros pressione V para a ferramenta de seleção. Selecione isto para copiá-lo com Alts e, em seguida, eles estarão abaixo da nossa camada, e isso é porque se você criar uma nova camada, ela estará no topo e esta é uma cópia de uma camada antiga. Coloque-os aqui e, em seguida, pressione Comando X e então, pressione Comando V. Então eles estarão no topo. Você não vê o título, mas isso é porque ele tem outra cor. Agora, clique fora deste, clique no título, torná-lo largo, em seguida, clique em ambos e alinhá-los direito. Em seguida, também alinhe-os à esquerda. Oh, disse direita, eu quis dizer esquerda, é claro. Agora, alinhe-os à grelha e teremos algumas linhas de ajuda, como esta. Isso parece bom. Meu design e este texto é um pouco mais curto, algo assim, talvez até mais curto. Novamente, vou bloquear esta camada de fundo. O que vou fazer agora é criar duas formas. Basta escolher a sua ferramenta de retângulo e criar duas formas como esta; a largura das formas, vamos alinhar isso a esta parte. Então ficará um pouco mais agradável. Pressione V novamente e, em seguida, torná-los tão grandes quanto os outros dois. Nós já sabemos a largura, que é 360 e 40 de altura. Queremos fazer isso um pouco maior dizer talvez aos 40, algo assim. Isso parece bom. Antes que vamos duplicá-lo, mas primeiro vamos estilizar o primeiro. Desmarque o preenchimento e para a cor da borda, vamos escolher o roxo e é assim que você cria um contorno. Agora, é só uma questão de dois números. Apenas uma camada de texto que tem um alinhamento do meio e é branca. É apenas um título que é apenas um texto pontual. É um número grande. Este tamanho não faz parte do meu guia de estilo, mas eu apenas desenhei isto no olho. Se você quiser alinhar todos esses itens no meio, certifique-se de selecionar primeiro o item que deseja e, em seguida, seu plano de fundo e, em seguida, pressione este para alinhá-lo no meio. Além disso, para este, selecione ambos e boom. Já estava alinhado, como pode ver. Acho que usei algo como clientes surfando. Eu não uso uma caixa de texto por enquanto, alinho isso corretamente assim e agora faço uma cópia desta. Mas primeiro vamos agrupá-lo assim, Comando G, e depois clique em todo o grupo e duplicá-lo e torná-lo alinhado à direita da nossa placa R. Não vemos onde acaba. Acaba aqui? Eu acho que não. Clique na sua placa R novamente, ligue a grade e, como você pode ver, este não é o fim do nosso 1140. Agora, basta clicar e mudar o número aqui para cheques feitos ou algo assim. Foi assim que criei esta parte aqui. Parte muito fácil, mas um fundo escuro. Isso só quebra o site de uma maneira agradável. Este episódio foi muito fácil. Vamos para o próximo episódio onde vamos construir a seção de depoimentos. Isso é um pouco complicado porque precisamos de uma forma personalizada com uma sombra e também usamos uma ferramenta de transporte repetitivo aqui. Espero vê-lo no próximo vídeo. 20. Seção de Testimonial com a ferramenta de caneta: Olá e bem-vindo de volta. Neste episódio, vamos criar uma seção de depoimento em D. Eu acho que esta é uma seção muito legal. Tem o mesmo estilo de sombra que o logotipo aqui. Vamos apenas começar. Primeiro vamos criar um título. Pegue este e pegue este, velho, velho e turnos e, em seguida, solte-os e este título é desta cor. Vou fazer o tabuleiro um pouco maior clicando em comum nos fundos e arrastando-o para baixo. Agora vamos criar nossa primeira seção de depoimento. Uma coisa que você tem que entender é que você não pode adicionar sombras a um grupo. A maneira mais fácil que você pensaria que nós criaríamos uma forma como essa é criar um retângulo como este. Em seguida, crie outro retângulo como este. Em seguida, gire esse retângulo 45 graus para algo assim e coloque-o um em cima do outro, selecione ambos, desmarque uma borda e agrupe-os. Como você pode ver, você não pode realmente adicionar uma sombra. Esta não é uma solução para esta parte. O que você quer fazer é usar os pénis. Primeiro, basta criar um retângulo como este e ter certeza que ele tem a largura da seção do logotipo aqui para que possamos usar o mesmo tipo de espaçamento, modo que foi 360. Agora o que você quer fazer é adicionar alguns pontos de ancoragem. Se você clicar duas vezes no ângulo direto, você pode ver que podemos selecionar os pontos de ancoragem e da mesma forma que criamos essa forma de onda personalizada, agora podemos adicionar mais pontos de ancoragem a isso. Para criar uma forma como esta, precisamos de mais três pontos de ancoragem. Porque precisamos começar, precisamos de um ponto negativo e precisamos de outra nomeação. Agora, se você clicar neste aqui e seguir este em linha reta, tentar torná-lo reto, algo assim. Agora você volta, você clica fora dele. Desmarque a fronteira. Agora você pode adicionar uma sombra à forma. Isso é o que você quer fazer. Clique na sombra e diminua a capacidade um pouco e torná-lo um pouco mais agradável. Como você pode ver, agora nós discutimos alguma forma. Antes de começarmos a duplicar, vamos primeiro terminar este. Precisamos de uma foto de perfil e um título. Pegue o círculo ou a ferramenta Eclipse e segure Shift e, em seguida, faça um círculo para sua foto. Sim, imprensa e desça corretamente. Talvez isso seja um pouco grande demais, então eu vou fazer um pouco menor. Agora vamos criar um título. Este é o nome da pessoa, selecione-o e, em seguida, alinhá-lo à esquerda e fazer que a versão bowls, fazer uma cópia dele, fazer que T versão pequena e que será o título da versão. Eu quero fazer este título, eu quero fazer aquele puxão de nascimento alinhar isso um pouco para a esquerda, algo assim. Clique na sua imagem e desmarque a borda. Agora criamos nossa primeira forma. Não vamos arrastar nossas imagens ainda porque precisamos de mais uma coisa e esse é o texto dentro daqui. O que eu quero que você faça é copiar um dos nossos textos principais aqui. Basta arrastar este como pode ver, boom, assim. Às vezes não tínhamos a forma. Você quer alterar o tamanho da fonte 1 ponto menor, porque às vezes parece um pouco grande porque está dentro de uma forma. Por agora eu vou colocá-lo em 15. Certifique-se também de que tem espaço em branco suficiente no lado esquerdo e direito. Talvez isso signifique que sua caixa precisa ser um pouco maior. Não basta arrastá-lo assim porque então você está, uma forma no fundo vai mudar. Em seguida, você precisa clicar duas vezes em sua camada de Forma, selecionar ambos os pontos de ancoragem e, em seguida, usar as teclas de seta para mover este para cima. Em seguida, volte para o seu texto e alinhado este no meio até que pareça bom. Acho que este parece muito legal. Agora eu vou selecionar tudo isso e iniciar a ferramenta de grade de repetições e, em seguida, duplicar para a direita até que ele corresponde a este lado da nossa grade, assim. O espaço entre os itens agora é diferente devido à sombra aditiva. Não se preocupe com isso, apenas certifique-se de que ele não vai passar por este lado aqui. O único lugar onde estará fora do nosso 1.140, nosso conselho é para essas imagens, mas esta é apenas uma parte criativa do site. Tudo bem para essa parte. Vamos usar o mesmo truque da seção de clientes aqui, vamos importar nossas imagens. Se você voltar para o seu localizador e você vai para a pasta de depoimentos. Preparei três imagens de apenas mils aqui. Se você arrastá-los para o círculo, exceder, em seguida, irá preenchê-los automaticamente e mascará-los dentro desse círculo vamos desligar a grade por enquanto e olhar para isso. Parece absolutamente lindo. Sim, foi isso por esta parte. Agora vamos criar as duas últimas barras do site que será o rodapé, que vamos repetir e todos os sites. E, esta parte, que tem uma imagem em cima de um botão de imagem e divisor em forma de D. Espero vê-lo no próximo vídeo. 21. Seção de chamada à ação com gradientes: Ei, e bem-vindo de volta. Neste vídeo, vamos criar esta seção para baixo. Não vai ser muito difícil, então vamos começar. Então, primeiro, vamos arrastar nosso quadro de arte um pouco maior assim, e precisamos do mesmo estilo de fundo que usamos no cabeçalho. Então eu vou rolar pelo meu cabeçalho, e então bloqueá-lo assim, e, em seguida, copiá-lo, e, em seguida, bloqueá-lo novamente, e, em seguida, ir para baixo e colar isso. Primeiro eu preciso escrever imagem, então volte para nossa seção de fotos, e depois arraste a imagem certa. Eu usei esta imagem, e eu vou apenas substituí-la assim. By the way, se você quiser mover a imagem dentro de sua máscara, você pode clicar duas vezes nela e, em seguida, você pode mover a imagem dentro da máscara. Então agora isso é bom por enquanto. Também precisamos do divisor de forma, mas já criamos isso, então vamos copiar o que criamos aqui. É aqui, então precisamos desbloquear isso de novo, e então fazer uma cópia como esta, e então ir para a parte superior trancá-la novamente. Em seguida, vá para baixo, mova-o para cima com o comando Shift colchete direito, ou simplesmente vá para o painel de camadas e, em seguida, mova-o para cima, arraste-o para cima e, em seguida, gire-o. Então, se você apenas ir com o mouse para o lado aqui, você pode girá-lo assim, e então se você segurar shift, por exemplo, torná-lo reto ou simplesmente fazer um flat novamente. Ou você pode apenas, é claro, também digite mais 180 para invertê-lo. Mas, por enquanto, vou criar uma forma assim. Certifica-te de que está abaixo da tua secção de depoimentos. Então eu vou usar o comando e os colchetes esquerdos para ter certeza de que está abaixo desta seção. Agora para esta imagem, que é um grupo, mova isso para cima, e agora ela está em cima da nossa camada de forma. Então eu também vou mover isso para baixo. Como você pode ver agora, isso parece muito legal. No meu design final, temos um título e um botão, e já criamos esses elementos, então vamos arrastar um desses, como este, um do texto principal e um botão. Então é tudo o que preciso por agora. Eu vou fazer as duas mensagens para branco. Esses textos devem estar alinhados no meio, no centro. Faça o mesmo para este, alinhe-o no meio, centralize-o. Eu usei um texto diferente algo assim parece bom. Segure alt para torná-lo um pouco menor. Mova este para cima, também para o botão, mova isso no meio. Se você quiser alterar o comando de retenção de texto, clique nele e, em seguida, ajuste o texto. Agora, se o seu botão é muito largo, comando clique no fundo do botão, em seguida, segure alt novamente e, em seguida, torná-lo um pouco menor. Eu sei que uso muitos atalhos, mas atalhos tornam sua vida muito mais fácil se você se acostumar. Sei que às vezes pode ser um pouco frustrante, mas continue usando esses atalhos. Facilita as coisas. Agora, mova todos esses um pouco para cima, então segure o turno, e então mova-os um pouco para cima. Precisamos de mais espaço no fundo aqui, então pegue nossa camada, e agora, quero fazer a foto um pouco maior. Como você pode ver, uma vez que é uma máscara, ela escala automaticamente. Portanto, não teremos um fundo que não esteja preenchido com a imagem. Então eu acho que é isso que eu quero por agora. Volte para o seu localizador e nós vamos inserir nossos dois itens do portfólio. Sim, basta selecionar dois deles que você quer Eu acho que eu usei esses dois. Sim. Então certifique-se de arrastá-los para fora do seu quadro de arte porque se você arrastá-los para aqui, ele vai substituí-lo como eu disse antes. Então o que você quer fazer é sair do seu quadro de arte, arrastá-los para aqui, e então certifique-se de colocá-los em cima do seu quadro de arte assim. Em seguida, certifique-se de que sua grade está ativada porque não há necessidade de criar novamente para o site. Selecione os dois, torná-los muito maiores assim. Se você quiser mais espaçamento no meio, criar mais espaçamento como este pode ser algo como 50. Em seguida, selecione ambos e certifique-se de que eles estão dentro da grade. Agora, se você quiser cortá-los, você também precisa usar uma máscara. Em excedendo a máscara funciona assim. Se você criar um novo retângulo, você pode usar sua forma retangular, para qualquer coisa, como uma máscara. Então o que você pode fazer agora é criar uma forma como esta, que irá cortar os desenhos como este, desmarcar a borda e torná-la uma cor estranha porque nós não vamos ver isso. Agora selecione ambos os itens do portfólio e uma nova máscara e pressione o comando shift M, ou clique com o botão direito do mouse e clique na máscara. Não, nem está aqui, está em algum lugar? Máscara com forma, como você pode ver, comando shift M. Então você cria uma máscara, e então ele irá mascarar dentro desse retângulo. Agora, no meu projeto final, como podem ver, há também uma sombra dentro daqui, e essa sombra está dentro da máscara. Então o que você quer fazer agora é criar essa sombra. Para criar uma sombra, você também precisa de um retângulo. Então vamos criar uma sombra fora do nosso quadro por enquanto. Vamos fazer algo assim. Desligue a borda, vá para o preenchimento, vá para gradientes lineares. Agora, faça de preto para preto. Mas a seção superior, é claro, precisa ser baixa transparência, porque então cria uma sombra. Então também vá para esta cor e faça isso preto. Como podem ver agora, temos uma opacidade negra de 100% a uma opacidade negra de zero por cento. Esta é, na verdade, a ferramenta de gradiente, mas você também pode usá-la para sombras. Certifique-se de que isso está em cima de suas imagens, e como você pode ver, isso é muito intenso. Você poderia simplesmente deixá-lo assim, mas se você quisesse tê-lo dentro de sua máscara, você apenas vai pressionar o comando x, em seguida, clique duas vezes em sua imagem assim, e então pressione o comando V, e então ele também será dentro da sua máscara. Porque nós ainda estamos, como você pode ver, dentro da máscara aqui e às vezes você também vai querer isso, então é por isso que eu estou explicando. É muito intenso, então talvez faça 40 por cento de opacidade, algo assim. Agora ele cria um pouco de profundidade dentro desta seção. Esquecemo-nos de alguma coisa? Eu acho que não. Talvez a opacidade do fundo seja um pouco diferente aqui, porque a imagem é diferente, talvez eu coloque em 20, como você pode ver, talvez eu também tenha mudado a forma para torná-la um pouco menos intensa. Então você também pode fazer isso se você quiser alterar os pontos de ancoragem, arraste todos os itens e torná-lo caber da maneira que você quiser. Então agora terminamos com a página inicial, e a última coisa que precisamos fazer é criar o rodapé. Mas vamos ver o que criamos até agora. Então eu vou clicar no meu quadro de arte, e eu vou clicar no jogo. Se você criou a página até agora, você deve estar muito orgulhoso, porque este item, você já pode usar este item em seu portfólio. Eu sugiro que você mude o estilo, claro, e as imagens porque este é apenas meu rosto e meus logotipos, mas se você pode criar uma praia como esta, você pode apenas mostrar negócios como “Ei, olhe para isso, eu posso criar uma nova página inicial para você.” Então, se você apenas alterar os itens e os botões no texto, você já pode criar uma página inicial bastante decente. Então isso é muito legal. Então eu espero que você também tenha gostado deste vídeo, e, em seguida, no próximo vídeo, vamos criar o rodapé, que você vai duplicar em todas as páginas. 22. Rodapé como um símbolo reutilizável: Bem-vinda de volta. Neste vídeo, vamos criar o rodapé, como você pode ver aqui. Tem um contorno verde. Isso é porque é um componente. Esta é uma das categorias de ativos que você tem aqui. O que é bom sobre um componente é que você pode usar este item em páginas diferentes. Como você pode ver aqui, isso também tem um contorno verde, e se eu mudar algo no componente principal aqui, ele também mudará em todos os outros. Por exemplo, se eu arrastar esse logotipo para baixo, assim, você verá que ele mudará em todas as páginas. Eu não fiz isso para o Menu, porque no menu eu quero mudar esta linha para mostrar ao visitante em que página ele é, isso não é realmente um componente. Como neste arquivo, eu o tornei um componente, mas eu realmente não preciso disso, porque na página Portfolio, como você pode ver, não é um componente porque é diferente. Se um item for o mesmo em todas as páginas, você deseja usar este componente, como você pode ver aqui. Isso é o que vamos criar agora. Torne a nossa prancha um pouco mais longa, faça com que o nosso retângulo faça um retângulo grande, desmarque a borda, dê uma cor de fundo, levante e, em seguida, alinhe-a. Eu não vou criar esta célula novamente, eu vou apenas copiar isso do menu. Basta copiar todo o menu, ir para baixo e bloquear este, e, em seguida, pressione V e já é quase um rodapé. Clique neste e, em seguida, desagrupe, clique com o botão direito do mouse e desagrupe. Você pode mudar as células individuais para uma linha mais limpa. Eu quero um logotipo para estar no meio. Na maioria dos rodapés pelo logotipo está à esquerda e há apenas alguns itens aqui à direita. Mas para este rodapé, eu só quero mantê-lo muito simples. Eu só tenho isso assim. Eu tenho um item aqui, item aqui, e um item aqui. Só mudo o texto para algo assim. Não é o rodapé perfeito, porque o alinhamento é apenas um pouco estranho porque algumas palavras são mais longas do que outras palavras. Eu realmente não amo este rodapé, vamos apenas torná-lo um pouco diferente agora, vamos apenas mudar o estilo e apenas colocar o logotipo à esquerda aqui. Será um pouco diferente do site real que eu criei. Vamos selecionar todos eles, colocá-lo assim, e agora precisamos transformá-lo em um componente. Mais uma vez, desbloqueá-lo e precisamos selecionar tudo e ir para Componentes e pressione o Plus. Agora ele vai criar o contorno verde, então você sabe que é um componente e este é o componente mestre porque você pode ver que aqui ele tem este triângulo de Saturno aqui. Se criarmos outra página no futuro, podemos simplesmente arrastar este componente que precisamos renomear, caso contrário não sabemos o que é isso. Poderíamos apenas direcionar este componente como este boom, e talvez para outra página, boom. Se mudarmos o primeiro, ele também mudará outros dois como você pode ver. Esta é a parte componente também um recurso muito agradável no Adobe XD. No próximo episódio, vamos criar outra página que é a página Sobre vai ser muito fácil. Acho que podemos criar esta página em um episódio, poucos minutos. Isso deve ser muito divertido. Espero vê-lo no próximo episódio. 23. A página de portfólio: Tudo bem, bem-vindo de volta. Neste episódio vamos criar a página Portfolio, como você pode ver no arquivo de design final aqui. É uma página muito fácil, então vamos começar. Vou voltar ao meu arquivo e vou fazer uma cópia do meu quadro de arte principal. Vamos abaixar isso também um pouco. Vou clicar nos três pontos. Eu vou segurar Alt e Shift, e eu vou fazer uma cópia do meu quadro de arte principal, e é isso. Agora, eu vou apagar tudo o que está nesta página, enquanto pelo menos quase tudo como este, excluído. Este estava bloqueado, então vamos desbloqueá-lo, clique com o botão direito do mouse em desbloquear e, em seguida, excluí-lo. Vamos ampliar aqui e isso é apenas o fundo, então precisamos de todos esses ícones. Precisamos segurar Shift e, em seguida, clicar nos ícones e o fundo, e agora isso acabou também. O cabeçalho desta página é um pouco mais curto, então também precisamos desbloquear este, mover isso um pouco para cima, algo assim, que deve ser bom. Nós também vamos mudar o texto. Eu usei o 36 aqui. Eu o fiz branco, eu o tornei alinhado no centro, e o centro alinhado com todo o quadro de arte. Como pode ver, foi muito rápido. Exclua tudo isso porque não precisamos disso e também vamos mudar o menu porque estamos agora na página Portfolio. Agora vou pressionar o Comando e vou manter essa linha, então vou segurar Shift. Solte os Comandos e segure em Shifts para movê-lo na horizontal e então eu vou apenas arrastá-lo e torná-lo mais longo. Agora, não use Shift ou Command, basta arrastá-lo. Agora temos uma pequena indicação de que estamos na página Portfolio. Tudo bem, o que precisamos nesta página? Precisamos de uma imagem, de um título, um texto e de um link. Vamos ver o quão rápido podemos criar isso. Certo, vamos voltar ao nosso arquivo. Agora, vá para o seu Finder, percorra os arquivos de sites e, em seguida, itens de portfólio e aqui estão seus quatro itens. Vamos apenas arrastar e nossa primeira imagem, certifique-se de que você não arrastá-lo sobre este apenas no fundo como este. Isto é bom. É um pouco pequeno demais. Minhas exportações não são perfeitas, mas isso não é um grande problema por enquanto. Precisamos de um título que seja 24. Vou voltar ao meu guia de estilo. Eu vou escolher este, e eu vou escolher este. Eu mantenho o Shift e seleciono ambos. Pressiono Copiar ou vir ver. Volto para o meu quadro de arte. Eu clico no quadro de arte e, em seguida, clique com o botão direito do mouse em Colar, e agora temos um título e temos uma descrição. O título de um projeto, eu só quero que seja uma linha. Então eu quero um pouco de espaçamento. Digamos que 20 pixels talvez façam essas três linhas, e agora queremos um link. Como vamos criar um link é fazendo uma duplicata, então eu estou segurando Alt novamente nos textos. Vou apenas clicar duas vezes e alterar este texto para descobrir os projetos. Eu só faço um ponto X porque não precisamos dessa caixa de texto inteira. Vou torná-lo roxo, e agora vou clicar nesta ferramenta aqui e criar um sublinhado nos textos. Isso fará com que pareça um link. Agora eu quero alinhá-lo, então eu vou ter certeza de que também são 20 pixels deste fundo e, como eu disse antes, certifique-se de que suas caixas estão cortadas para o fundo dos textos, e agora isso parece legal. Mas agora o tamanho não é bom, então precisamos mudar algumas coisas. Em primeiro lugar, a imagem precisa ser muito maior. Digamos que nossa imagem, queremos que seja tão grande quanto esta. Mas antes vamos arrastar os textos e também torná-lo branco e usar a grade de repetição para, agora primeiro vai verificar se esta é realmente a largura que eu quero. Vou fazer uma duplicata deste. Segure Alt e Shift, e agora o que há? Há apenas 21 pixels no meio. Eu acho que isso é um pouco menos, então eu vou fazer este um pouco menor, então segure-o deste lado, algo assim. Faça uma duplicata novamente e, em seguida, no meio é 55. Isso é muito melhor. Você pode, naturalmente, jogar com essas configurações, mas isso é bom o suficiente por enquanto. Agora eu vou arrastar todos os meus textos e apenas arrastá-los, e isso é uma coisa legal sobre a ferramenta de texto. Em vez disso, você pode simplesmente arrastá-los e o texto será mais longo. Apague isso por enquanto. Tudo bem, então a última coisa que eu fiz foi adicionar uma pequena sombra, como você pode ver, é muito suave. É a mesma sombra que eu uso para os logotipos, então é apenas três, seis, e então a opacidade é 16. Lembre-se que três, seis e 16. Vamos voltar ao nosso arquivo. Clique em nosso item, clique em Sombra três, seis e depois 16. Tudo bem, não, você se lembrou. O Adobe XD lembrou das configurações. Agora o que podemos fazer é selecionar todas as camadas e agora clicar na Repetir Grade. Agora precisamos da grade no site para ver quão grande será o espaço entre esses dois itens. Precisamos alinhá-lo com o lado. Só estou arrastando. Vou garantir que esta linha atinja a linha azul assim. Agora efeito desesperado e eu também vou estender para o fundo. Apenas certifique-se que você tem quatro itens por enquanto. Eu também vou clicar dentro dele e, em seguida, arrastar este, torná-lo muito maior. Por agora eu vou colocá-lo em 80, porque eu acho que está tudo bem. Vou desligar a rede e importar algumas imagens. Vou voltar ao meu Finder, selecionar todos os meus itens do Portfólio e agora arrastá-los assim. Agora você pode ver que estamos quase terminando já com esta página, que é super agradável. Agora a única coisa que precisamos, eu acho que é um Rodapé. Como eu expliquei em um dos episódios anteriores, agora você pode apenas arrastar o componente a partir daqui, boom. Basta colocá-lo assim, certifique-se de que há uma margem saudável abaixo dela. Eu vou escolher 100 pixels, e eu vou apenas vir e clicar no fundo e, em seguida, arrastar este um pouco mais curto e ter certeza que ele se encaixa no fundo. Agora, como você pode ver dentro de alguns minutos, nós projetamos esta página, parece muito agradável e isso também é muito fácil de converter em uma página responsiva. No próximo episódio, estaremos construindo a página sobre, que é um pouco mais complicado. Eu chamei de serviços, isso não é bom. Esta é a página sobre. Mas na página sobre há abas, como você pode ver aqui, há uma galeria de imagens e há esta seção FAQ. Vejo-te no próximo episódio. 24. Sobre a página 1: um começo rápido: Vamos começar a construir a página Sobre, isso parece muito criativo. Quando eu começar, vamos tentar fazê-lo o mais rápido possível e tentar avançar um pouco para acelerar, porque este também é um curso para tornar o seu fluxo de trabalho um pouco mais agradável. As seções superiores aqui são muito fáceis, isso será feito muito rápido, e então vamos passar para esta seção que é um pouco complicada. Este é fácil e este também é um pouco complicado, mas não vai ser tão difícil, vamos ver o quão rápido podemos construir esta página. O que eu vou fazer é fazer uma duplicata da página do portfólio, eu vou clicar em cima, eu vou segurar Alt e Shift e então fazer uma duplicata como esta, eu vou excluir todo o conteúdo no interior. Primeiro de tudo, eu vou vir e clique e torná-lo muito mais longo por agora, arraste o rodapé para o fundo. Agora a primeira coisa que precisamos fazer é criar as três colunas que precisamos para este nosso Sobre, eu quero mostrar um pequeno truque sobre como você pode fazer isso. Vamos pegar seu retângulo por enquanto, e eu vou criar um retângulo como este. Agora eu vou criar outro retângulo segurando Alt, isso é perfeito. Já tem 50 pixels de diferença, isso foi apenas sorte para mim. Agora também temos 50 pixels de diferença, você quer ter um pouco de espaço em branco entre esses blocos, porque vamos usar esse espaço em branco em toda a página. Vamos ver se estamos na grade, isso é perfeito, isso foi apenas sorte, por agora vamos criar algumas linhas de ajuda ou réguas, como é chamado, se você mover o mouse para o lado do upboard, você terá esse efeito de pairar, se você clicar e arrastar, você pode colocar uma linha em seu upboard que não faz parte do seu design, mas vai ajudá-lo a alinhar certas coisas, eu vou colocar uma linha aqui. Agora posso apagar todos esses blocos como este, e teremos algumas linhas que nos ajudarão a alinhar nossos elementos. Vamos voltar ao meu projeto final, vamos primeiro ver o que temos aqui. Este é um título 36, 16 e 822, o que vamos fazer é arrastar alguns títulos daqui. Este é o 24, você vê, eu cometi um erro aqui, este deve ser 24. Também vamos usar este, e vamos usar este, nós também vamos usar o negrito e vamos usar para texto, eu vou copiar tudo isso, voltar para o meu arquivo, e vamos apenas coloque o texto aqui primeiro, copie e cole, exclua este, agora vamos primeiro criar as colunas. Alinhe cada texto a essas colunas, como você pode ver aqui, vamos olhar para o design final, eu preciso de um título ousado aqui e um 36 aqui para todos os títulos. Primeiro, há uma versão menor e, em seguida, há uma versão maior, vamos apenas pegar a versão menor como esta. Esta será apenas uma linha de texto, eu vou torná-lo um texto ponto, eu vou fazer isso roxo. Agora este será apenas um grande título como este, eu também vou fazer isso no ponto X porque como você pode ver, há apenas uma linha de texto porque eu vou tornar mais fácil arrastar e alinhar, eu vou dar que 10 pixels de espaço em branco entre esses dois itens. Agora, como você pode ver, o design final, nós também temos apenas uma linha de texto aqui, eu vou converter este também em um texto, em textos de um ponto como este. Também dê 10 pixels de espaço entre talvez um pouco mais, talvez algo como 15. O que vou fazer agora vou arrastá-lo até aqui, ter certeza que está alinhado com o topo e fazer uma cópia disso. Agora temos o básico para toda esta página e isso vai facilitar a construção de uma página. O que vamos fazer agora é olhar para o nosso design. Como você pode ver, este cabeçalho é realmente grande então o que eu quero fazer é primeiro arrastar este para baixo. Talvez fazer algo assim, vamos arrastar este para baixo um pouco mais, eu vou preparar primeiro o fundo, eu vou desbloquear a camada de fundo, e eu também vou desagrupá-la porque há duas camadas dentro dele, eu pressiono “Comentário Alt G” ou apenas clique com o botão direito e desagrupe. Agora eu vou para o meu localizador, inserir a foto que precisamos assim e eu vou torná-la muito mais escura diminuindo a opacidade, eu vou colocá-lo em 20 por cento, eu vou pressionar dois ou talvez até mesmo um assim o texto será realmente visível. Agora selecione ambas as camadas de fundo, agrupou-as novamente e, em seguida, clique com o botão direito do mouse e bloqueá-las, e desta forma, podemos movê-la. Além disso, eu também vou fazer isso por este. Agora vamos ver o quão rápido podemos fazer isso. Pegue todos os seus títulos, clique em todos e faça uma duplicata, agora faça este, faça-os brancos. No meu projeto final, há até um texto introdutório, como podemos ver aqui, sinto muito, esses textos não precisam ser brancos, precisam ser roxos como este porque isso parece muito bom neste fundo escuro, temos um pequeno texto introdutório, como podem ver aqui. O que eu vou fazer é arrastar este um pouco para baixo e, em seguida, arrastar um desses, fazer uma cópia dele, torná-lo menor assim e eu torná-lo mais longo. Agora precisamos de mais espaçamento, então eu apenas colocá-lo assim, que parece tudo bem, vamos ver o que criamos até agora, clique no upboard e clique no jogo e isso parece absolutamente bonito. Vamos apenas inserir a imagem por enquanto e então vamos passar para as outras seções, voltar para o seu localizador. A foto sobre é o que precisamos para tirá-la do seu upboard para ter certeza e, em seguida, arrastá-lo para dentro do seu upboard e escalá-lo, como você pode ver, eu não exportei as imagens grandes o suficiente, mas eles ainda são afiados o suficiente. Eu acho, bem, não é perfeito, mas você deve sempre usar imagens nítidas, é claro, não muito nítidas porque caso contrário seus sites serão lentos, mas esta imagem está sobreposta como você pode ver aqui. Deixe-me ver, há também uma sombra muito suave e agradável, nós também vamos criar isso. Clique na sombra, vamos colocar isso no 30 e depois no 60. Agora temos esta sombra muito suave e agradável, talvez diminua este um pouco, e vamos ver o que criamos até agora, clique em seu upboard novamente e, em seguida, pressione play. Absolutamente lindo, eu gosto deste resultado, vamos agora continuar com esta parte no próximo vídeo. 25. Sobre a página 2: abas + galeria: Bem-vinda de volta. Neste vídeo, vamos criar o recurso DEP que você pode ver aqui. Este é um dos recursos que é frequentemente usado em grandes sites, para, por exemplo, exibir um processo em que há várias etapas e você não deseja tornar a página muito longa. Você oculta informações entre essas etapas. É realmente fácil. É só um monte de mensagens e um esboço. Vamos apenas criar como por agora. Vou voltar para o meu filme. Vou certificar-me de que a cor aqui é boa. Vou colocar isso no roxo. Que cor eu usei aqui? Acho que usei esta cor. Sim. Eu não uso esses blocos. Não usamos um título aqui. Só usamos uma caixa de texto branca como esta. Alinhe-o ao topo. Certifique-se de que está alinhado no topo de uma linha de textos. Isso parece bom. Talvez colocar um pouco de Enter para que pareça um pouco mais agradável. Agora basta mover este para cima assim, e vamos primeiro criar o contorno. O que eu vou fazer é pegar a ferramenta Linha como você pode ver aqui. Eu só vou criar um esboço muito áspero. Agora você realmente precisa usar o Shift. Então, se você segurar Shift e você pode ver que outra linha vai ficar reta e isso é o que você quer. Não importa se não é perfeito da primeira vez. Primeiro solte o mouse e depois solte o Shift. Não se preocupe com a cor aqui. Agora não comece neste ponto porque então você vai arrastar a primeira linha. Agora precisamos começar em outro ponto e retroceder assim. Não se preocupe com as falas por enquanto. Só quero mostrar a forma básica. Crie uma linha como esta. Eu também vou criar uma linha como esta. Certifique-se de usar as linhas azuis para ajudar a si mesmo assim. Mas eu sei que vou torná-lo um pouco maior para o texto. Vou acabar com isso assim. Agora pressione V. Agora vamos alinhar a caixa inteira para que ela se ajuste ao nosso design. Primeiro de tudo, o que eu vou fazer é arrastar tudo, movê-lo para a esquerda e torná-lo um pouco maior. Como podemos ver agora, vai atrapalhar o nosso design. Mas isso não é grande coisa, porque precisamos mudar as linhas manualmente. Então, certifique-se de que está deste lado. Certifique-se de que é grande o suficiente. Então eu vou pegar uma das minhas camadas de texto e movê-la para dentro e alinhar isso, talvez fazer quatro linhas como esta e ver se há espaço suficiente à esquerda, e na parte superior e na parte inferior. Talvez eu queira um pouco mais de espaço no fundo. Então eu vou selecionar tudo, desmarcar os textos e eu vou segurar Shift e, em seguida, clicar no texto. Vou torná-lo um pouco maior para dar um pouco mais de espaço. Agora a linha azul está no nosso caminho, então vou apagar isso por enquanto. Então, basta arrastá-lo e movê-lo para o lado e, em seguida, ele desaparece. Eu também vou desligar a rede, como você pode ver. Então podemos realmente ver o que estamos fazendo. Agora clique em seu texto e apenas alinhá-los. Não se esqueça de segurar Shift para que suas linhas fiquem retas. Certifique-se de que todas as linhas estão conectadas. Novamente, selecione tudo, mantenha a tecla Shift pressionada, desmarque o texto e, agora, torne-o roxo ou a cor real desejada. Acho que usei roxo. Não, eu usei roxo claro aqui, o roxo normal, e roxo escuro. Faça deste um roxo claro. Queremos arrastar um título. Vamos apenas arrastar este. Faça este passo número um, por exemplo, design. Agora faça uma cópia deste. Mude o texto, deixe-o um pouco mais escuro. Esta é também uma das coisas que é realmente importante no web design, é que você usa suas cores para tornar a experiência melhor. Neste caso, se eu também tornasse este roxo, a única indicação de que estamos neste passo seria esta linha e isso é suficiente. Mas se você pode adicionar outra camada de profundidade a isso, agora você pode ver que esta está destacada. Então, mesmo que alguém não tenha uma boa tela e não tenha essas linhas, você pode ver que esta está destacada porque é mais leve. Então é isso que eu só queria te mostrar. Eu acho que esta caixa é um pouco pequena demais, então eu vou ajustá-la e torná-la um pouco maior. Vou fazer dois outros títulos. Algo como isto. Vamos apagar essas linhas por enquanto. Como você pode ver aqui, comparado ao meu resultado final, parece semelhante. Você pode alterá-lo um pouco mais, claro, para torná-lo caber um pouco mais. Mas eu gosto deste design, é simples e funciona. Neste episódio eu também quero criar esta parte. Vai ser muito fácil, mas porque estas são apenas algumas imagens e é o mesmo estilo que usamos antes. Vamos ver. Eu vou pegar este aqui. Faça uma duplicata disso. Agora certifique-se de que você tem o mesmo espaço daqui para aqui, depois daqui para aqui. Isto é 100. Agora você quer ter certeza de que você tem 100 pixels na parte inferior desta linha. Como você pode ver, esta linha não está perfeitamente alinhada, mas 990.9 é bom o suficiente. Agora vá ao seu Finder, pegue o software que eu uso. Pegue todos eles e coloque-os dentro do seu quadro de aplicativos. Vou usar duas filas, três colunas cada. Alinhe-os para que fique bem nos olhos. Agora basta agrupá-los e colocá-los dentro da sua placa de aplicativos. Agora você pode mudar o espaçamento para torná-lo um pouco melhor. Vamos ver o que criamos até agora. Vou clicar em mais. Isso parece muito bom e o contraste parece bom. Temos que pisar aqui e temos uma pequena galeria de fotos de alguns logotipos. Isso parece muito bom. No último episódio desta página, vamos criar esta seção. Não vai ser muito difícil, mas vamos usar a ferramenta Forma para esses retângulos. 26. Sobre a página 3: seção de perguntas: Bem-vinda de volta. Neste vídeo, vamos criar esta seção FAQ que parece que esta parte é realmente aberta clicando em ângulo direto. Eu sinto muito. O triângulo aqui. Vamos começar com este design. Primeiro de tudo, vamos duplicar o título, é claro, e garantir que ele tenha o mesmo espaçamento. Exclua esta linha por enquanto. O que é este design, na verdade, é apenas um título, que é apenas um semi parafuso 16 pontos. Então é este pequeno triângulo e inline. Nós já criamos esta linha, então podemos apenas direcionar esta linha a partir daqui e colocá-la aqui. Para a camada de texto, eu quero pegar uma caixa de texto como esta, torná-la apenas uma linha e, em seguida, torná-la 16 em parafusos. Eu uso duas cores para a ativa. Eu usei o roxo claro e para o não ativo, eu usei o roxo escuro, que é o mesmo estilo que usamos aqui. Certifique-se de que você tem o mesmo estilo em seu site, em suas páginas diferentes. Porque então ele só parece consistente, o que é importante no design. Como você pode ver, eu até usei uma versão mais escura aqui. Isso não é perfeitamente consistente com isso. Agora, vamos ficar com esta cor aqui. Agora, o que você quer fazer é ampliar e criar e clicar na ferramenta de triângulo e nós vamos apenas criar um pequeno retângulo. Mantenha a tecla Shift pressionada para fazer um triângulo perfeito. Agora, desmarque a fronteira, faça escurecer. Agora, se a pergunta não for clicada, ela precisa apontar para a direita. Basta pressionar “V” e, em seguida, ir para a direita até ver a rotação, manter a tecla Shift pressionada e, em seguida, girá-lo e alinhá-lo. Um pouco grande demais. Vamos torná-lo um pouco menor, alinhá-lo novamente e lá vamos nós. Vamos pegar tudo isso. Faça um grupo como podemos facilmente duplicar como segurar Alt e Shift e fazer duas duplicatas dele como este. Dê-lhe um pouco de espaço, porque também precisamos de uma pergunta que esteja aberta. Faça outra duplicata desagrupar esta. Clique com o botão direito, desagrupe, coloque este no fundo. Teremos um pouco de espaço para os nossos textos. Acho que precisamos de mais espaço. Vamos aumentar este espaço aqui. Vou pegar uma das suas caixas de texto assim. Segure Alt e faça com que ele se ajuste ao design. Agora, se fizermos isso um leve, você pode ver que o contraste, não é muito bom. Na verdade, prefiro o design que usei aqui. Eu só vou pegar este, este e este título. Estou segurando o Comando e o Shift e vou fazer com que isto seja a cor escura. Este, sim, é este, o 6A6680. Eu também vou fazer isso para esses títulos porque eu acho que parece um pouco melhor. Agora, há ainda uma diferença maior entre o estado ativo e os estados não-ativos. Sim, parece um pouco melhor. Agora, só precisamos de um breve texto introdutório como este. Tenho certeza que é uma linha no topo do título menor. Agora, pegue tudo isso, agrupe, mova-o para cima e a única coisa que precisamos fazer é mudar o retângulo. Desculpe, o triângulo aqui e rode para que pareça que se abre. Agora, a última coisa que precisamos é do Rodapé. Pegue seus componentes, arrastando seu rodapé. Eu já comi um rodapé. Vamos diminuir a nossa prancha e agora, terminamos. Vejamos os nossos resultados. Vamos clicar no nosso quadro, clicar em “Play”, e estou muito feliz com os resultados. Espero que o seu design também pareça muito bom. Mas esta é uma página sólida sobre. Vamos guardar o nosso ficheiro por enquanto. Então vamos para a próxima página, que vai ser uma página super fácil. Vamos construir isso em um episódio. Vai ser a página Sobre com nossos ícones de mídia social personalizados que são afetados e super nítidos. 27. Página de contato com ícones vetoriais: Bem-vinda de volta. Neste vídeo vamos criar a página de contato. Agora o que você vai fazer, se você tem o seu projeto aqui, você vai fazer uma duplicata desta página ou desta página? Isso é também o que eu penso antes de começar a duplicar. Você tem que olhar para a página e parece mais semelhante a esta página ou parece mais semelhante a esta página? Neste caso, realmente não importa porque a seção superior parece mais semelhante a esta página e a seção para baixo é mais parecida com esta página. Mas eu só queria te dar essa dica. Apenas não duplique sua última página e, em seguida, comece a ajustá-la. Talvez haja outra página que já se parece com ela, pelo menos um pouco e então você não precisa mudar muito. Por agora eu vou apenas pegar esta página assim, excluir o interior dela. Eu também vou fazer uma duplicata desta parte, então copie-a, clique na Nova prancheta e cole-a. Então, como você pode ver aqui, nós temos esta parte inferior, que se parece com esta parte superior, mas depois com cores diferentes. Então eu vou pegar essa parte segurando Shift, mantenha pressionado Comandos, pressione Copiar, vá para nossa nova prancheta e cole-a, mantenha pressionada a tecla Shift e mova-a para baixo, e depois mude a cor aqui assim. Agora vamos mudar a imagem novamente. Desbloqueie, desagrupe e, em seguida, vá para o Finder, vá para fotos e arraste a nova foto assim. Vou fazer este um pouco mais grande para dar um pouco mais de variedade. Agora, a única coisa que precisamos para este design é um enorme Google Map. Por enquanto eu vou apenas usar uma captura de tela. Se você quer que o Google Map implemente em seu design, eu deveria ir ao Google Maps, e então eu apenas faço uma captura de tela do lugar real. Mas você não quer que isso faça parte do seu projeto. Digamos que você está morando aqui. Basta digitar a sua localização e clicar aqui, e agora você pode fazer uma grande captura de tela. Se você quiser, você pode fazer uma captura de tela de toda a página. Mas para o seu design eu acho que parece um pouco mais limpo se você não incluir todos esses botões, mas você pode, claro, criar uma captura de tela desta parte e esta parte também. A propósito, eu te mostrei como criar uma captura de tela? Isso é diferente para o Windows do que é no Mac. Mas no Mac, é Comando, Controle, Shift, 4. Não é um atalho fácil, mas é super bom porque então você pode criar uma captura de tela como esta. Então, se você segurar espaço, você pode até mover esta caixa assim. Eu uso isso o tempo todo. É tão super legal. No Windows você pode simplesmente usar o botão Imprimir tela, mas eu acho que no Windows 10, há uma nova opção para isso onde você também pode apenas criar uma captura de tela de uma parte de uma página. Agora eu vou clicar, e agora ele está salvo na minha área de transferência. Agora eu posso ir para o Adobe XD e eu posso apenas clicar em uma pasta ou comando-v e, em seguida, apenas diminuir o mapa aqui e torná-lo caber sua prancheta assim. Eu vou adicionar uma sombra novamente, você já sabe os números 30, 60 e talvez diminuir a opacidade um pouco. Agora mova esta caixa inteira para cima, também vai colocar isso para fora em 100 pixels de espaço em branco. Agora, a última coisa que precisamos fazer é inserir o texto. Como podem ver aqui, tenho duas cores dentro de uma camada de texto. Como você pode fazer isso é muito fácil, se você apenas digitar o texto, por exemplo, algo assim, então você pode apenas selecionar o texto e, em seguida, pressionar uma cor. Isso não é possível na maioria das ferramentas, porque em outras ferramentas você seleciona toda a caixa de texto, mas no XD, você pode simplesmente fazê-lo assim. É bem fácil. Agora vamos apenas inserir nossos ícones de mídia social, que são vetoriais a propósito. Agora vamos para a pasta, Ícones sociais, SVG, você pode escolher alguns ícones sociais a partir daqui. Vou colocar YouTube, Instagram e LinkedIn, por exemplo. Basta arrastá-los para fora da sua prancheta assim. Nós já jogamos com os ícones SVG na página inicial, é claro, então você já sabe como isso funciona. Você vai inseri-lo, torná-lo menor mantendo a tecla Shift pressionada e torná-los ainda menores. Reduza o zoom para ver se não é muito grande. Eu gosto de fazer os ícones muito pequenos porque eu acho que parece muito bom. Agora dê a eles um pouco de espaçamento, selecione todos eles, alinhe-os assim, e então dê a eles uma cor, algo assim que pareça bom. É muito grande para o meu gosto. Vou torná-los ainda menores. Acho que isto parece bastante decente. Agora só temos que arrastar este para cima e fechá-lo diminuindo o tamanho da prancheta. Vamos ver o que criamos. Vou clicar no jogo. Isto parece muito bom. Talvez o título precise ser um pouco mais alto. Temos este grande Google Map com super agradável sombra suave, e temos nossos ícones e nossos textos. Parece muito bom. Vou clicar isso de distância. Vou clicar em salvar. Agora você já viu que a primeira página levou muito tempo, mas as outras páginas foram criadas muito rápido, então certifique-se de que você colocar um monte de esforço em sua página inicial porque se sua página inicial é boa e você prestou atenção ao seu texto e para seus botões, para suas cores, as outras páginas serão muito fáceis de criar. Agora vamos para outras coisas adiantadas. Por exemplo, não usamos o efeito de desfoque de fundo, como você pode ver aqui neste design. Este é também um efeito popular para fazer algumas coisas sair um pouco mais. Isso é o que eu quero ensinar-lhe no próximo episódio e também criar um design como este, que tem um corte com uma máscara, um tipo diferente de estilo de botão e também aqui esta cor de borrão de fundo. Isso é o que eu quero fazer nos próximos episódios. Se você conhece essas técnicas, você tem certeza de que pode criar praticamente qualquer design que desejar dentro do Adobe XD. Espero vê-lo no próximo episódio. 28. Um site de viagem com desa: Bem-vinda de volta. Neste vídeo vamos criar este design que você pode ver aqui. Isso é um pouco diferente do projeto em que temos trabalhado até agora. Mas eu quero mostrar alguns efeitos que não eram parte deste design, mas que você pode usar para tornar seu design mais interessante. Por exemplo, este efeito de desfoque de fundo que você pode ver aqui. Este é um efeito muito moderno, você pode fazer um leve como este, ou você pode criar um mais escuro como você pode ver aqui. Ou como podem ver aqui, isto é o que faremos no próximo vídeo. Este efeito é muito bom para fazer seus itens aparecerem um pouco mais, porque sem esse fundo, eles simplesmente desaparecerão na imagem. Esta é uma ótima maneira de separar os itens do fundo. Vamos apenas começar. O que eu quero que você faça é ir ao seu localizador e certificar-se de que você tem a fonte Abuget instalada. Há duas pastas sobre um aqui e agora vamos nos concentrar na página de viagem. Vamos começar, vamos para o nosso arquivo de exercícios, e vamos fazer uma duplicata da nossa página. Vamos apagar esses rodapés por enquanto. Vamos fazer uma duplicata e vamos apagar tudo o que está na página. Vamos criar uma pequena distância aqui. Apague tudo o que está na página, assim. Não precisamos que a página seja tão longa. Você sabe o que? Vamos chegar tão alto quanto o porto de visão. Vamos copiar este número e colá-lo aqui na altura. Desta forma, temos uma página menor. Eu não vou entrar em cada pequeno detalhe como criar esta página porque agora você já sabe como criar um menu como é, então eu vou pular certas coisas. A sombra, por exemplo, você poderia copiar esta sombra do fundo do nosso design aqui, o que já fizemos, porque já criamos essa sombra. Você também já sabe como inserir os ícones como este, mas há alguns outros ícones que eu usei neste design. Se você quiser recriar este design e talvez colocar isso em seu portfólio, isso é possível, porque eu incluí os ícones de viagens que eu usei. Aqui estão os arquivos SVG, aqui está o coquetel, a cama e a neve. Deixe-me criar esta página rapidamente. Estou quase terminando com o design da página como você pode ver aqui. Está chegando lá, acabei de inserir o menu do meu próprio site, realmente não importa. Mas há uma coisa que ainda não te mostrei e que é como criar um ícone de hambúrguer como este. Um ícone como este é chamado de hambúrguer porque tem três camadas, e este menu é muitas vezes usado em dispositivos móveis para abrir um menu e parece realmente limpo. Este site de novo, não é realmente prático, mas é apenas para exercer nossa habilidade de design. Vamos apenas criar este ícone de hambúrguer em nosso arquivo rapidinho. O que eu vou fazer é ampliar, pegar seu retângulo, e criar um pequeno retângulo como este. Em seguida, contorne seus cantos, certifique-se de que não é muito grande, ou talvez isso seja um pouco grande demais. Torná-lo um pouco menor, basta pegar sua ferramenta de grade de repetição e certifique-se de que você tem três desses pequenos hambúrgueres. Aí tens o ícone do hambúrguer. Talvez seja um pouco falso demais, apenas jogue um pouco com ele até que esteja satisfeito. Agora eu preparei todos os elementos e agora vamos criar o efeito de borrão de fundo. Na verdade, não é tão difícil, basta pegar seu retângulo, criar um retângulo grande como este, e colocá-lo no fundo, primeiro vamos fazer uma outra cor como esta para que possamos ver o que estamos fazendo, pressione Command e colchetes esquerdos para trazê-lo para o plano de fundo. Como você pode ver, talvez eu precise de um pouco mais de espaçamento entre as colunas. Vamos dar-lhe um pouco de espaço amplo como este, e vamos torná-lo preto por enquanto e desligar a fronteira. O que você pode fazer agora é ativar o desfoque de fundo. Se você fizer isso, ele criará o desfoque de fundo padrão, que é bastante pesado, se você puder ver. Você pode brincar com essas configurações aqui. O que eu fiz no meu design foi diminuir o desfoque de fundo. Se você colocá-lo em zero, você pode simplesmente olhar através e é apenas uma camada branca com opacidade, mas se você aumentar o borrão, você ainda pode ver o fundo um pouco. Então você também pode brincar com a iluminação e, claro, com a transparência de toda a camada. Isso depende, claro, do seu design e até depende do fundo real. Por agora eu vou aumentar o borrão um pouco com estes poucos, um pouco para baixo, dar-lhes um pouco mais de espaçamento e duplicar esses blocos como este, e usar outro para o último. Novamente, este não é um design perfeito e eu não tenho medido todos os elementos aqui, mas é apenas para mostrar como o efeito funciona. Como você pode ver, meu projeto final, parece um pouco mais agradável. Há alguns cantos arredondados nas bordas, eu também vou mostrar-lhe como fazer isso. Se você clicar em um retângulo como este, você tem os cantos arredondados aqui. Já falamos sobre isso na seção de botões, mas você também pode inicializar um canto, por exemplo, apenas o lado esquerdo para cima. Se eu apertar o oito agora, você verá que eu só tenho um canto deste lado e não em todos os outros lados. Desta forma, você pode criar um retângulo muito agradável com cantos arredondados. Você também pode selecionar ambos e, em seguida, fazê-lo assim. Lá vai você. Este é o efeito e agora eu também quero mostrar a versão escura, eu vou duplicar meu design, e então clique no primeiro, mantenha a tecla Shift pressionada, mantenha a tecla Shift pressionada e clique nos outros dois. Agora vamos brincar com a iluminação aqui. Como você pode ver, você também pode diminuir a leveza. Então, em algum momento, torna-se mais escuro do que o fundo real. Se você colocá-lo em um número mais, ele se tornará mais leve, e este é o efeito que você pode ver no design moderno nos dias de hoje. Eu não vejo a versão mais escura muitas vezes, mas isso também é muito bom. Claro, isso depende do seu fundo, você precisa jogar com as configurações para torná-lo bonito, mas isso não parece tão ruim. Vamos testá-lo com algumas origens diferentes. Vou desbloquear meus antecedentes e vamos ver como isso funciona. Volte para o seu localizador e, por exemplo, pegue outra imagem e coloque-a no fundo assim. Como você pode ver, neste fundo, a versão escura parece muito agradável. Isso também não parece tão ruim, mas eu gosto da versão escura muito mais aqui. Vamos testar com um fundo mais claro como este. Como você pode ver aqui, isso é um pouco leve demais. Neste fundo, a versão escura também funciona um pouco melhor. Você pode tentar com os fundos que eu incluí aqui, “Oh, eu realmente gosto deste aqui, este é o realmente limpo.” Esse foi o efeito de borrão de fundo, espero que tenham gostado deste, este é um efeito muito moderno. No próximo episódio vamos criar este design, que é um pouco mais complicado, tem uma máscara e tem esse controle deslizante, efeito deslizante vertical, e um botão estranho. Espero vê-lo no próximo vídeo. 29. Um site de mascaras: Bem-vindo de volta. Neste vídeo, vamos criar este belo design. Nosso borrão de fundo está aqui de novo e temos uma máscara, temos um botão estranho, então vamos começar com este. Novamente, eu não vou mostrar como inserir um fundo e como fazer um menu porque você já sabe disso. Dê-me um minuto para recriar este projeto. Estou quase terminando de recriar esta página. Há algumas coisas diferentes nesta página do que o Explore Indonésia. Em primeiro lugar, o desfoque de fundo é muito mais intenso e há também um desfoque de fundo no canto que é apenas um pequeno com um ícone de pesquisa. Como eu fiz isso foi eu copiei o retângulo com o borrão nele, eu apaguei tudo isso, fiz apenas um retângulo afiado. Eu coloquei em um canto aqui e agora isso parece muito mais escuro que este retângulo e isso é por causa do fundo. Mas apenas para o seu design, então você pode apenas aumentar a leveza para fazer parecer que combina com o fundo real. Este é um pesadelo para os desenvolvedores, mas isso é apenas para mostrar como visualmente torná-lo atraente talvez para o seu portfólio. Mas se você estiver trabalhando com desenvolvedores, simplesmente não coloque valores diferentes em todos os seus elementos. Caso contrário, eles não vão ficar muito felizes. As linhas aqui são apenas criadas com a ferramenta de linha. É branco e, em seguida, colocar 20 por cento de opacidade então, desta forma, você obtém essas linhas bonitas que você pode ver aqui. Eu também vou colocar um à esquerda e agora vamos criar os efeitos de máscara. Você pode ver um 02 aqui que está cortado. O que vamos fazer é duplicar nosso grande título, que é, a propósito, a Fonte Grendel, que você também pode encontrar nos downloads. Eu vou criar um grande 02, eu vou torná-lo um texto pontual, torná-lo maior, e então eu vou colocá-lo na linha. Vamos adicionar outra linha de ajuda aqui. Isso parece bom, e agora eu quero cortar os dois em algum lugar por aqui. O que eu vou fazer é pegar um novo retângulo e então eu vou criar um e sobrepô-lo nos dois, excluir a borda e escolher uma cor diferente muito estranha porque nós não vamos ver essa máscara. Qualquer máscara funciona assim. Você precisa de um item para estar no topo e, em seguida, se você selecionar ambos com shift e, em seguida, pressionar “Máscara”, eu sempre uso o comando “Shift M”, mas talvez você também possa fazer isso a partir daqui. Eu acho que você pode fazer isso daqui, mascarar com forma. Aqui você usa a forma para criar uma máscara e isso significa que só veremos o que está dentro desta forma vermelha. Se eu fizer isso agora, você pode ver que temos esse efeito e agora podemos aplicar a opacidade aqui. Se quiser alterar o texto, não poderá fazê-lo clicando duas vezes. Você precisa clicar na camada de texto real. Esta é a máscara, você ainda pode clicar nela e alterá-la se quiser, e esta é a camada de texto. Se eu quisesse camada de texto para ser uma cor diferente, eu preciso fazer isso aqui. No meu projeto, eu coloquei em, eu não sei, 40% de opacidade, por exemplo, e como vocês podem ver agora, nós criamos essa bela máscara. Exclua esta régua de ajuda por enquanto e isso parece muito limpo. Eu acho que pode fazer no meu design real é ainda maior então eu vou aumentar o tamanho como você pode ver. Certifique-se de que está dentro de sua máscara e, se não estiver dentro de sua máscara, você pode mudar a máscara assim. Isso parece muito bom e agora vamos criar o botão que você pode ver aqui com uma pequena seta e alguns cantos diagonais. Isso também não é muito difícil de fazer. Vamos criar um botão bem rápido. Pegue sua ferramenta de retângulo, crie um botão, escolha uma cor que corresponda ao seu design. Isto parece bem por enquanto. Exclua a borda, coloque algum texto dentro de sua camada. Eu criei uma seta usando a ferramenta de linha como esta, faço uma linha branca, e depois agarrar a ferramenta triângulo e fazer um pequeno triângulo como este, desmarcar a borda e girá-la. Certifique-se de que não é muito grande. Isso parece muito legal. Agora, o que você pode fazer, se você clicar duas vezes no retângulo, você pode alterar o ponto de ancoragem. Da mesma forma que mudamos o efeito de onda em nosso site, você pode pegar esse canto e esse canto ao mesmo tempo pressionando “Shift” e clique, e agora você pode simplesmente mudar a posição desses pontos de ancoragem. Desta forma, você pode criar um botão que parece um pouco mais criativo. Se você agrupar esses três itens como este, você clica no texto e você também clica no “Botão”, e você clica neste, agora ele está alinhado no meio. Novamente, não parece exatamente o mesmo, mas esta é a técnica que eu usei. Eu acho que no meu design aqui também há muito espaçamento entre as letras como você pode ver. Eu também vou fazer isso bem rápido por agora. Aumente a visão de espaçamento da fonte se você realmente quiser corresponder ao design. Acho que meu passado é um pouco mais sombrio no meu projeto final. Vamos mudar o texto por enquanto, comprar agora. Isso parece muito legal. A última coisa que eu quero fazer para esta página é criar este efeito que você pode ver aqui. Como você faz isso é usando a máscara e usando duas camadas em cima da outra. Vamos criar isso bem rápido. O que eu vou fazer é fazer zoom e pegar o círculo, fazer um pequeno círculo como este, duplicá-lo. Em seguida, para o superior, mova-o um pouco mais para cima e, em seguida, faça uma cópia dele segurando “Alt”, torná-lo maior segurando “Alt” e “Shift”, em seguida, coloque a borda e preencha. Agora, coloque isso em brancos, faça muito maior, e agora você pode ver que meus pontos são muito grandes. Preciso selecionar tudo, vamos fazer tudo um pouco menor. Como você pode ver aqui, há um contorno branco em cima dele e, em seguida, há uma versão mais escura abaixo dele. O que fiz foi fazer uma duplicata desta, então a branca precisa estar por cima. Para ter certeza de que está no topo, basta clicar em trazê-lo para a frente. Este vai ficar o branco. Para isso queremos versões cinza, então eu vou colocar isso em 50% de opacidade. Mas agora, se eu sobrepor este, não vamos ver o anel de fundo, então há duas maneiras de fazer isso. Podemos criar uma máscara neste que se pareça com isto ou podemos criar uma máscara neste e sobrepô-la, então parece que o branco está no topo, mas na realidade, este está no topo. É o que vou fazer porque é um pouco mais fácil. Pegue seu retângulo por enquanto, crie um retângulo e certifique-se de que ele esteja na posição certa, então clique em ambos e clique em “Objeto” e depois em “Máscara”. Agora o cinza está no topo, eu vou mover o branco abaixo dele, agora pressione “Command” e colchete esquerdo para trazê-lo para trás. Agora está abaixo dele, mas não podemos ver este porque usamos a opacidade, e é por isso. Não podemos usar a opacidade neste caso. Precisamos aumentar a opacidade e mudar a cor para algo que se pareça um pouco mais com o fundo, torná-lo um pouco mais leve. Você pode realmente vê-lo, e agora se você diminuir o zoom, você pode ver que isso parece muito legal. A única coisa que é diferente aqui é que há muito mais margem entre todos os pontos e os pontos aqui em baixo têm uma opacidade, algo assim. É assim que você cria esse efeito, parece muito bom, isso pode ser usado para um controle deslizante que irá substituir a imagem em segundo plano. Este design funciona também muito bem com diferentes fundos. Por exemplo, vamos pegar outro fundo e colocá-lo aqui. Como você pode ver, parece muito bom. Talvez isso seja um pouco intenso demais, então diminua a opacidade assim, coloque em 50 ou 60 e agora você tem seu design. A única coisa que eu esqueci mais o ícone de pesquisa aqui, que eu também incluí. Novamente, se você quiser usar este item em seu portfólio, eu não me importo, tudo bem. Existe o ícone de pesquisa. Isso parece muito bom. Espero que você também tenha gostado deste episódio. Esta foi outra técnica agradável, espero vê-lo no próximo episódio, porque vamos criar alguns outros efeitos legais. 30. Design de móveis de responsive - parte 1: Bem-vinda de volta. Neste episódio vamos fazer algo realmente divertido. Vamos criar um design móvel responsivo. Esta nossa prancha está vazia há algum tempo. Eu queria preencher este design com o conteúdo desta página vai ser um muito fácil porque já preparamos alguns estilos para nossos títulos. A página web não é tão difícil de tornar responsiva porque não tem um monte de colunas difíceis. Então isso é apenas duas colunas. Há três colunas aqui, três, três, dois, quatro, e apenas uma grande. Então, se você quiser ter certeza de que seu design móvel vai ser fácil, então não vai ser difícil se você tem uma página que se parece com isso. O que eu quero fazer agora é que eu quero expandir a página móvel porque provavelmente vai ser mais longo do que este. Agora precisamos desbloquear algumas coisas para copiá-lo. A primeira coisa que eu quero fazer é desbloquear o fundo por enquanto, e eu vou apenas copiá-lo assim. Clique em nosso plano de fundo móvel e cole-o. Então, basta colocá-lo dentro do nosso tabuleiro, talvez torná-lo um pouco menor assim. Agora também para o nosso menu, queremos usar um ícone de hambúrguer como eu mostrei em um episódio anterior. Só vou copiar os logótipos. Clique duas vezes no logotipo, vá para o celular e cole-o e verifique se as grades estão configuradas com 30 pixels dos lados. Às vezes eu também uso 20. Mas 30 pixels parecem um pouco mais agradáveis porque quanto mais espaço em branco você tem, mais agradável fica, mas nem sempre é prático. Para os meus sites reais, quando criei os inversores do meu site, uso 20 pixels nas laterais. Então vamos colocar em 20 por enquanto. O que eu estou fazendo? Eu vou pegar o ícone de hambúrguer que eu criei em outro episódio que é realmente bom ícone. Vou copiar isso, ir ao meu design móvel e colá-lo aqui. Boom, eu tenho isso aqui. Isso parece muito dope, e não está perfeitamente alinhado porque eu ainda tenho as grades de repetição. Eu realmente não preciso dele aqui, então eu vou desagrupar as grades de repetição. Eu poderia apenas fazer um grupo fora dele e alinhar com a grade. Agora vamos inserir nossos títulos. Como nos preparamos aqui, o grande título será este. Eu só vou copiar tudo, e eu vou fazer uma duplicata e colá-lo aqui, colocá-lo assim. Só vou clicar no título. Nós já preparamos isso. Agora vamos para o título do celular. Vou deixar branco. Agora é 46 e este foi 54. Agora, a única coisa que você precisa fazer é certificar-se de que sua caixa de texto não estende a grade assim. Certifica-te de que há espaço suficiente para as tuas mensagens. Isto é talvez um pouco demais no meu site real. Não há muitas mensagens no grande título. Mas você pode ver aqui, eu projetei e construí sites que não são um texto muito longo. Se você usar uma fonte grande como esta, certifique-se de que seu título não é muito longo. Agora eu também vou usar este aqui. Como você pode ver, são apenas três linhas. Isso é bom para uma visão móvel também. Vamos copiar este título e usar um texto real. Isso parece muito bom. Vou registrar o fundo de novo, colocar isso um pouco para cima. Também vou copiar a onda que está bloqueada. Vou desbloqueá-lo novamente com o comentário L e, em seguida, clique no meu celular, ou placa e colá-lo. Certifique-se de que você ainda pode ver a onda, talvez torná-la um pouco mais intensa no celular. Então você pode realmente ver uma parte da onda. Não faça isso muito intenso. Caso contrário, vai parecer barato. Então algo assim que deve ser bom. Agora o fundo, nós também queremos ter o mesmo fundo de preenchimento que temos neste. Para o preenchimento, vamos apenas escolher o fundo F5, F5, F7. Agora isso parece muito melhor. Vamos ver o quão rápido podemos criar este design móvel. Para esta caixa o que eu vou fazer, é eu vou pegar a caixa assim, e ter certeza que está no nosso quadro certo. Certifique-se de que ainda podemos ver um pouco da onda porque isso seria bom. Eu só vou pegar meus dois primeiros ícones como este, copiá-lo, ir para a minha placa aérea, e depois colá-lo. Acho que algo assim deve ficar bem. Claro, em um telefone celular é difícil ter quatro colunas. Às vezes você só tem que quebrar o seu design um pouco para torná-lo adequado para os telefones celulares, algo assim que é bom o suficiente. Agrupe e agora é apenas um grupo. Agora, para esta parte, talvez eu não queira usar quatro imagens aqui porque isso talvez seja um pouco demais. O que eu vou fazer é pegar tudo isso primeiro, eu vou mover isso para o meu design móvel assim. O segundo título, precisamos do segundo título móvel como este. Torná-lo um pouco menor. Certifica-te de que se encaixa na grelha. Todas as camadas de texto e alinhá-las corretamente. Agora quatro imagens, talvez sejamos um pouco demais. Claro que pode fazer algo assim. Agrupá-lo, copiá-lo, colá-lo aqui, e apenas fazer uma grande imagem fora dele, se você gosta disso. Na verdade, parece muito melhor. Porque no meu site, eu escolhi duas imagens, e as coloquei uma em cima da outra, mas eu acho que isso parece realmente muito bom. Mas o que eu fiz no meu site, eu só escolhi duas imagens. Por exemplo, estes dois. Então eu tenho comentários clicados e eu copiar para essas imagens e colá-los aqui. Você pode vê-los em tamanho real. Acho que vou alinhá-los no meio, algo assim. Novamente, talvez você não queira mostrar tudo em um design móvel. Às vezes você só precisa pular e excluir algumas partes. Em sites reais, isso é muitas vezes o que acontece porque em um telefone celular caso contrário ele se tornaria tão grande. Faça algo assim ou a outra solução que eu projetei. Por enquanto eu vou usar essa solução porque eu gosto muito dela. Agora, para esta parte, isso é realmente bom sobre a chapa de repetição porque agora você pode ver como bom repetição chapa é. Primeiro vou copiar o meu título. Certifique-se de copiar seu título, dar-lhe um pouco de espaçamento, e certifique-se de que ele se encaixa, é muito longo. Não sei quanto texto é, talvez duas linhas, isso deve ser bom. Agora, se copiarmos a chapa de repetições e formos para o nosso celular a nossa placa e colarmos, só podemos colocar uma caixa aqui. Em primeiro lugar, precisamos diminuir o tamanho de cada retângulo. Vamos fazer isso primeiro, diminuí-lo, mantenha o turno. Agora vai ser muito bom. Porque agora, se diminuirmos o lado da grade de repetição, ele vai se lembrar de todas as imagens que estão no interior e mostrará as mesmas imagens. Então você não precisava reorganizar as imagens assim. A única coisa que você precisa para reorganizar é a margem entre os retângulos reais. Porque para a sua seção de clientes, não sei se você já quer pular alguns clientes no celular. Então é por isso que eu o desenhei assim. Tudo bem, essa parte parece muito legal. Certifique-se de que há espaço em branco suficiente entre as colunas. Mais uma vez para o seu título escolha o celular. Novamente, agora eu estou fazendo isso muito rápido porque eu não quero gastar muito tempo medindo tudo. Mas em um projeto real, eu realmente vou medir cada espaçamento entre todos os títulos para ter certeza de que é muito consistente em todo o site porque isso é importante. Então vamos terminar este design móvel no próximo vídeo. 31. Design de móveis de responsive - parte 2: Ok, bem-vindo de volta. Vamos terminar esta página em um design móvel então certifique-se de copiar sua camada de fundo assim. Esta parte vai ser muito rápido bloqueá-lo e bloqueá-lo para web. Segure seu título assim, faça uma cópia. Certifique-se de que é o tamanho certo como este. Torná-lo largo. Alinhe seus textos, redimensione suas caixas de texto, e agora pegue um desses, copie-os assim. Clique na borda e certifique-se de diminuir o tamanho dessa coluna interna real como esta. Agora, se você quiser ter certeza de que você tem exatamente as mesmas medidas nesta coluna, o que você precisa fazer é copiar esta e então você precisa mudar o texto. Às vezes faço isso porque quero ter certeza de que o tamanho das caixas é o mesmo. Agora redimensione seu plano de fundo e agora terminamos para esta parte. Para a seção de depoimentos, vou mostrar-lhe como fazer essa parte porque você já conhece os títulos. Se você pegar um desses depoimentos, ele vai ser muito grande, então certifique-se de que a parte esquerda está alinhada em sua grade e, em seguida, diminua o tamanho da camada de fundo. Certifique-se de que você não clique sobre a coisa toda, mas você vem e clique apenas na camada de fundo, diminua isso, e então também vem e clique em sua camada de texto e também dar-lhe um pouco de espaço amplo. Desta forma, parece quase o mesmo e agora você pode usar sua chapa de repetição e ter os outros comentários dentro daqui. Agora, para a última parte, como você deve resolver esta parte aqui? No meu site, pulei essa parte toda. Todo o meu site móvel só parece sem isso porque eu realmente não sabia como resolvê-lo. Claro, você pode fazer um muito pequeno ou apenas mostrar uma dessas imagens, mas vou mostrar-lhe como ele parece no meu site. O que fiz foi agarrar a onda e agarrei o fundo copiei-a e colei-a. Copiei todas as camadas de texto como esta, colei, ajustei para o tamanho móvel, talvez eu tenha mudado a onda um pouco e isso realmente tudo o que eu fiz para a seção para baixo. Você não quer tornar as coisas muito difíceis para si mesmo, às vezes. Agora, para o rodapé, porque este é um componente, precisamos mudar o componente para o rodapé. O que eu quero que você faça é uma cópia dos componentes, clique com o botão direito do mouse e, em seguida, desagrupe os componentes. Este ainda é o nosso componente principal que podemos ver aqui. Mas agora precisamos fazer um componente para o nosso rodapé móvel. Nós só vamos mudar este rodapé, agrupá-lo bem rápido. Entre no seu quadro de arte, desagrupe novamente e certifique-se de que ele se encaixa no seu design móvel. Para rodapés, o que você sempre quer fazer é alinhar seus elementos à esquerda, certifique-se de que eles estão todos dentro de seu rodapé. Nem sempre é alinhado à esquerda, mas para a maioria dos rodapés é alinhado à esquerda porque você tem muitos textos. Este é um rodapé muito simples. Talvez você também possa fazer um design central para este rodapé. Mas na maioria dos rodapés você só quer um rodapé alinhado à esquerda. Isto parece bom o suficiente. É assim que você quer fazer isso para grandes sites. Mas por enquanto, eu vou usar o design central porque isso parece um pouco mais agradável para este site. Agora pegue tudo, vá para componentes, pressione o sinal de mais e renomeie para rodapé m porque esse é o rodapé do nosso celular. Agora podemos apenas inserir os componentes de rodapé do celular em todas as páginas. Agora a última coisa que precisamos fazer é diminuir o tamanho do quadro de arte e clicar em nosso quadro de arte e clicar no jogo e vamos ver o que criamos até agora. O menu móvel parece um pouco grande demais para o meu gosto, mas como você pode ver, isso parece muito bom. Tudo parece otimizado para dispositivos móveis. Eu preciso trabalhar, eu tenho o título aqui, eu preciso trabalhar nas margens, mas você pode ver o quão rápido é criar um design móvel se você tiver preparado tudo para desktop. Digamos que agora você está feito com o seu design e você quer mostrar o seu design para outras pessoas. Isso é o que eu quero mostrar nos próximos vídeos porque você precisa saber algumas coisas para compartilhar seu design, fazer um protótipo e enviá-lo para o seu cliente, ou talvez até mesmo carregá-lo em seu próprio portfólio. Vejo-te no próximo vídeo. 32. Exportação de arte e elementos: Olá e bem-vindo de volta. Neste episódio, vou mostrar-lhe como você pode exportar seus designs. Então, talvez você queira compartilhar seus projetos com seu cliente ou você queira carregá-lo em outra ferramenta de prototipagem ou você quer fazer uma exportação para colocar esses projetos em seu portfólio. A maneira mais fácil de fazer isso é simplesmente selecionando suas placas de arte e exportando-as. Você também pode usar a marca para o recurso de exportação. Mas eu realmente não uso isso, porque muitas vezes você está trabalhando em uma página e você precisa enviar essa página para um cliente ou você quer exportar três ou quatro telas e mesmo se você quiser exportar 10 telas, não é realmente difícil de clicar neles, então eu realmente não usar a marca para o recurso de exportação. Basta clicar nos elementos que eu quero e exporto-os. Isso é o que eu quero mostrar e se você realmente quer um vídeo marcado para exportação, então me diga, mas esse é o caso se você estiver trabalhando em arquivos realmente grandes. Eu acho que a maioria das pessoas que assistem a este curso não terá grandes projetos ainda. Que é apenas melhor clicar nas coisas que você quer uma exportá-lo, é muito mais fácil. O que você precisa saber se você quer exportar coisas é que os nomes de suas placas de arte e as camadas serão exportados também. Isso é muito bom porque às vezes você tem uma situação como esta, onde você quer exportar essas quatro imagens separadamente. Como você faz isso é selecionando todos eles assim, então você comenta clique no primeiro porque este está dentro de um grupo, você comenta turnos clique no segundo. Agora, você tem quatro itens selecionados, incluindo a sombra e para manter tudo organizado, você pode ir para o painel de camadas e aqui você pode ver a nomeação. Isso já tem um bom nome, então se eu vou exportar estes para JPEG ou PNG, você vai ver esses nomes. Vamos tentar isto por enquanto. Eu vou para o arquivo e eu clicar em exportar e, em seguida, clique em selecionado, porque eu selecionei essas quatro imagens. Eu vou fazer uma nova pasta e chamar isso de exportações por enquanto, assim como eu testo. Então, aqui você tem algumas opções para exportar seus projetos. Neste momento, estou exportando imagens que têm sombras e isso significa transparência. É por isso que precisamos PNG, porque PNG é o único formato de pixel que pode lidar com transparência com JPEG você terá um fundo branco. Se você usar transparência ou estiver explorando ícone, por exemplo, e quiser exportá-los para pixels, você precisará PNG, caso contrário, você terá um fundo branco. Vamos escolher PNG por enquanto e então você tem algumas opções aqui. Na maioria das vezes, eu só uso design, que é apenas 1x ou Web e que é 1x e 2x e isso significa o quão grande a imagem vai ser dentro de sua nossa placa, esta imagem pode ser um 300 por 400 pixels de largura e se você selecione esta opção, em seguida, ele irá exportar uma imagem com 300 e 400 pixels de largura, mas também uma versão que é 600 por 800. Isso pode ser bom se você importou imagens grandes reais e quiser manter a resolução, ou você só quer saber o quão nítida sua exportação será. Basta clicar neste e agora ele criará oito exportações porque selecionamos quatro imagens. Vamos clicar na exportação por enquanto, como realmente rápido, vá para o seu localizador, vá para as exportações e como você pode ver, ele tem os mesmos nomes de camada e um 2x versões têm este @2x no final. Se você abrir isso, você pode ver que há muito espaço em branco, mas isso é para a sombra e essas imagens não são nítidas em tudo porque eu importei em imagens nítidas e agora estamos exportando novamente. Isso não é realmente nítido, mas como você pode ver, a versão normal é menos nítida do que a versão 2x e esta é uma quantidade horrível, mas eu só quero mostrar como esse recurso funciona. Esta é a versão normal e esta é a versão mais nítida. Vamos fazer isso para quadros de arte agora também, então vamos renomear essas placas de arte para Home final v1 e, em seguida, Home final Mobile v1. Então, clique no primeiro quadro de arte, a grade não importa que ele ainda está ligado e não vai exportar a grade e também mudar clique na placa de arte do seu desktop. Agora vá para o arquivo novamente, vá para exportar selecioná-lo e agora nós também queremos testar o 1x e 2x e agora eu vou escolher JPEG porque um benefício com JPEG é que você pode aplicar uma compressão em suas imagens. Por exemplo, você pode colocá-lo em 60 por cento de qualidade, ainda será super afiado. Mas se você estiver compartilhando itens com seus clientes, você não deseja enviar JPEG que são como 10 megabytes. Você quer adicionar um pouco de compressão a ele. Eu vou mostrar-lhe se você colocá-lo como em 60 por cento de capacidade, ele ainda vai ser super afiado e nós vamos ver 1x e 2x coisa. Vamos clicar na exportação e depois vamos para o localizador. Como você pode ver agora, as imagens foram exportadas. Existe uma versão móvel doméstica que é de 260 kilobytes. A versão 2x é quase 700. Vamos abrir a versão um por enquanto e eu vou ampliar e ver se ainda está afiada o suficiente. Como você pode ver, isso ainda é bastante afiado para uma compressão de 60 por cento no 1x não é super afiado. Vamos apenas clicar no 2x por enquanto. Muitas vezes eu envio a versão 2x para o meu cliente. Como você pode ver para um telefone celular, isso é mais do que afiado o suficiente para compartilhar com seus clientes ou até mesmo colocar em seu portfólio. Vamos também verificar a versão 2x da página inicial. Vamos ampliar um pouco e, como você pode ver, isso é bastante nítido para uma imagem que tem apenas 1,5 MB e quase 10.000 pixels de altura. Então a descompressão no Xd é muito boa. A última coisa que eu quero mostrar é como exportar ícone vetorial. Por exemplo, nós projetamos um botão. Por exemplo, nós projetamos este botão ou esta pequena seta. Se queremos exportar a seta, temos um problema porque esta é uma linha e, por algum motivo, se você exportá-la, ela não define as linhas. Você precisa usar um retângulo se quiser criar um ícone vetorial. Isso não é muito legal e talvez eu esteja fazendo errado, mas é assim que eu faço. Esses são dois itens separados, então, para exportá-los como um ícone, você precisa alternar clique neles, selecionar ambos e, em seguida, agrupá-los, e basta chamar esta seta afiada por muito tempo. Por exemplo, selecionei o grupo. Isso é importante para selecionar um grupo e agora ir para arquivo e exportar. Porque se você selecionar ambas as camadas como esta e você ir para as exportações de arquivos selecionadas, ele irá exportar a linha separadamente e o triângulo. É por isso que você precisa clicar no Grupo e, em seguida, ir para o arquivo, ir para exportar e, em seguida, selecioná-lo e agora você precisa usar SVG. SVG é o formato usado em sites e você também pode importá-lo dentro do Adobe XD, como você já viu antes com nossos ícones sociais. Este é um realmente bom formatos para exportar ícones vetoriais. Agora, se você escolher o SVG porque este é um ícone vetorial e exportá-lo, agora você tem um arquivo vetorial que você pode usar em qualquer outro arquivo Adobe XD que você quiser. Como você pode ver aqui, se você escalá-lo, ele ainda parece muito bom e é ilimitado afiado. Meu conselho seria se você projetar ícones fazer com um Illustrator, porque o Adobe XD não é uma ferramenta perfeita para projetar seus ícones. Mas às vezes você pode projetar um pequeno ícone como este com um retângulo e um triângulo e reutilizá-lo em outros projetos. Isso era tudo o que eu queria mostrar para o recurso de exportação. Vejo você no próximo vídeo. 33. O menu Sticky no topo: Bem-vinda de volta. Neste episódio, vamos criar o efeito de cabeçalho pegajoso. Em todos os designs que criamos neste curso, usamos o efeito de cabeçalho transparente. Isso parece muito moderno, mas você precisa de uma imagem de fundo agradável. Para muitos projetos, este é um visual muito moderno e os clientes estão mais procurando por algo assim, apenas um cabeçalho muito limpo e simples neste site. Não parece tão bonito porque o fundo aqui não é branco. Mas na maioria dos sites, você terá um cabeçalho parecido com este ou um menu com um plano de fundo. Você tem um logotipo preto ou um logotipo mais escuro, e você tem itens de menu quase preto. É assim que a maioria dos seus menus vai olhar no site que você vai projetar. O que você pode fazer com isso é que você pode ir para a ferramenta de prototipagem porque você vai correr em situações onde você precisa para apresentar seu site para um cliente e como ele vai olhar quando você rolar. Porque em um site como este, se você clicar em um quadro de arte real, você clica em jogar e você rolar, então o menu vai apenas ficar no topo. Com muitos sites, o menu vai ficar no topo e isso é o que você pode fazer. Estamos no modo de prototipagem, mas isso é muito difícil de fazer com o cabeçalho transparente porque então ele estará em cima dos outros itens ou abaixo dele, realmente não funciona. O que você precisa fazer é criar um menu que se pareça com isso se você quiser fazer esses efeitos. Agora, vamos para o modo de prototipagem. O modo de prototipagem é onde você pode criar um protótipo falso, e então você pode obter uma experiência para o produto real, o produto final quando ele é codificado será semelhante. O que você pode fazer agora, nada muda, mas você pode vincular certos elementos uns aos outros. A única coisa que eu quero fazer neste episódio é mostrar-lhe a posição fixa ao rolar efeito. Isso não é possível no recurso de design. Portanto, não procure essa opção quando estiver no modo de design. Você precisa é mudar para o modo de prototipagem e, em seguida, clique sobre este, uma posição fixa ao rolar. Corrigido significa que ele permanecerá nessa posição. Agora, se clicarmos no nome do quadro de arte e clicarmos no jogo, e começaremos a rolar. Você vai começar a ver que nosso menu vai ficar no lugar, mas agora você pode ver que ele está abaixo da maioria dos itens, e isso não é o que nós queremos, é claro. Então, precisamos clicar em nosso plano de fundo e trazê-lo para a frente, ou apenas pressione o comando shift e suporte direito. Agora, se clicarmos no jogo novamente, você pode ver que o menu ficará no topo em todo o site. Você pode até adicionar uma sombra se quiser. Um pouco de sombra aqui, porque muitas vezes você vai ter um fundo branco aqui, eu vou te mostrar. Se o seu plano de fundo do seu site é branco, como este. Digamos que isso também é branco. Você tem um site que se parece com este porque a maioria dos sites tem um fundo branco e você faz o efeito de rolagem e você também tem um cabeçalho branco. Não parece tão perfeito. Então você pode fazer duas coisas. Você pode usar um muito pequenas linhas sutis, algo assim. Basta escolher a ferramenta de linha, criar uma linha que preencha toda a tela da esquerda para a direita e colocá-la na parte inferior do menu e certificar-se de que está dentro do grupo. Agora, comando x para ter certeza que você conseguiu. Em seguida, entre no grupo, para que você possa clicar duas vezes. Você pode ver que agora eu estou dentro do grupo. O cabeçalho é realmente chamado grupo 305. Vamos chamar de menu por enquanto. Então vemos o que estamos fazendo. Vá para dentro do grupo, agora estamos dentro dessa pasta e então pressione comando v. Então coloque sua linha assim e então coloque isso em uma opacidade mais baixa, por exemplo, algo assim. Então, se clicarmos no jogo, você verá que há uma pequena diferença entre essa seção. Mas eu acho que isso já é muito intenso, então vamos colocar em 15% por enquanto. Clique no jogo, e isso já parece um pouco mais agradável. O que você também pode fazer é usar uma sombra. Digamos que não goste destes efeitos de linha. O que você poderia fazer é vir e clicar em seu plano de fundo. Assim, no retângulo de fundo branco, em seguida, adiciona uma sombra muito pequena. Talvez isso já seja muito intenso. Vamos testar isso por enquanto. Sim. Bem, isso é um pouco intenso demais, então você sabe como funciona. Você pode diminuir a intensidade da sombra e, em seguida, clicar em Reproduzir. Isso também irá criar um bom efeito para o seu menu. Agora, no próximo episódio, eu quero mostrar a vocês como você pode realmente vincular essas páginas. Se você clicar nesses itens, você vai realmente para essas páginas. Então ele realmente começa a olhar como um site real. 34. Criando um protótipo para web e móvel: Bem-vindo de volta neste vídeo, vamos ligar todas as páginas juntas. Estamos aqui no modo de design. Mudei todos os cabeçalhos e me certifiquei de que o sublinhado está na boa página. Esta é a página do portfólio, sobre a página e a página de contato. O que você quer fazer é ir para o seu modo de prototipagem, clicar aqui porque não precisamos disso agora, ampliar e, em seguida, começar a ampliar o seu menu. Você pode fazer duas coisas. Você pode clicar duas vezes no item real que deseja vincular e, em seguida, basta clicar e arrastar para a prancheta real que deseja vincular. Então você tem algumas configurações aqui. Você quer tocar nele porque se você clicar isso significa que eu toque, vai ser uma transição para outra tela. Você pode até mesmo preservar a posição de rolagem porque às vezes você vai de uma seção aqui para outra página e você também quer ficar na mesma altura. Por exemplo, se você criar um botão e se você clicar nesse botão, a cor do botão será alterada. Então você não quer ir para outra página, você quer ficar nessa posição. Você está trocando de tela, mas precisa fazer com que pareça que não está trocando de tela. É por isso que você usaria esse recurso. Vamos para aquela página. Eu não nomeei minhas páginas corretamente. O efeito de dissolução significa que ele vai desaparecer e suas configurações de desvanecimento estão aqui, então, acalme-se e levará 0,3 segundos. Vamos testar isso por enquanto. Vamos para a final, clique no jogo. Se clicarmos no portfólio, veremos o que acontece, isso foi um desvanecimento que não podemos voltar porque também precisamos vincular a partir da página do portfólio para sua página inicial. Há também em transição na aba dissolver. Vamos ver o que criamos até agora. Clique em jogar portfólio, casa. Isso é legal. Isso funciona e ambos rolam. Você também precisa conectar essas outras páginas. Às vezes torna-se uma bagunça porque você precisa diminuir o zoom e conectar todas as páginas e vai ser muito pequeno, senão eu quero mostrar um truque. O que eu faria se você estiver indo para vincular todas as páginas juntas, primeiro nome seus itens. Por exemplo, v2-home final. Nomeei todas as minhas páginas para v2 final. Se eu, por exemplo, ir para a página sobre, e eu clicar neste item, eu posso escolher minhas pranchetas a partir daqui e então eu posso ir para, isso precisa ser V2 final sobre, e então ele irá automaticamente criar esse linkpara e então ele irá automaticamente criar esse link Você não tem que mexer com o arrasto. Mas por enquanto eu não quero dissolver efeito porque em um site páginas não se dissolvem eles basta clicar e é apenas instantâneo. Se você apenas clicar em nenhum, e nós também vamos fazer isso para essas animações aqui. Clique nestes dois e coloque-os na nossa página inicial aqui. Então volte para a página do seu portfólio, também clique neste, coloque-os em nenhum. Vamos ver o que criamos até agora que eu vou clicar na minha página inicial, clique em jogar. É assim que ele deve funcionar sem uma animação de desvanecimento porque a maioria dos sites não desbota. A página sobre, novamente ele também funciona. Tudo que você precisa fazer é apenas vincular todas essas páginas de menu entre si. Clique nele, escolha a prancheta que você deseja, v2 e ele se lembrará das mesmas configurações. Portfólio, clique nele, clique no portfólio, entre em contato. Esta é uma maneira muito fácil de vincular seu site assim. Parece bastante realista. Se estás a apresentar-te a um cliente, não lhes digas que isto é real porque isto é tudo falso. Claro, você não pode exportar isso para HTML. Bem, pelo menos ainda não. Talvez isso irá no futuro que você pode exportar certos elementos para elementos reais do site, mas por enquanto, isso é apenas para sua apresentação. Se você vinculou todos os seus elementos, você terá um monte desses itens vinculados como eu estou criando já agora. Terminei todos os itens vinculados. Não importa onde eu esteja na página, eu posso simplesmente clicar em todas essas páginas. Isto é muito fixe para a tua apresentação. Há mais uma característica legal que eu quero mostrar que você pode usar para apresentar seu trabalho no próximo vídeo. 35. Criação de um vídeo e link compartilhável: Tudo bem pessoal, estamos quase terminados. Duas coisas que eu quero mostrar a vocês, a apresentação do trabalho, primeiro é o recurso móvel no Adobe XD. Você pode baixar o aplicativo Adobe XD em seu smartphone. Se você conectar seu cabo USB ao seu telefone, você pode clicar neste ícone aqui, conectar dispositivos iOS ou Android para XD via USB para visualizar seus projetos ou protótipo em tempo real.This é realmente bom porque às vezes quando você estão projetando em uma tela, as coisas na tela parecem boas o suficiente. Mas, na realidade, você projetou muito pequeno ou o botão é muito pequeno para seus dedos ou a distância é muito grande ou muito pequena, essa é uma dica que eu quero dar a você, mas você pode baixar o Adobe XD do aplicativo em a Play Store e conecte seu telefone via USB. Experimente se estiver projetando e verifique se seu design fica bem no seu próprio celular. Talvez tente alguns telefones diferentes. Isso é apenas algo que eu também queria te mostrar. O último recurso que eu quero mostrar a vocês para compartilhar seu design é o recurso de vídeo todo o meu protótipo aqui. Se eu quiser mostrar ao meu cliente como o site funciona? Como fica quando eu rolar para a página? Como fica quando eu clico nessas páginas? Então, se você estiver dentro do modo de jogo, que acabamos de preparar com todos os itens vinculados. Você tem esse botão aqui, e eu não vou clicar nele agora porque eu já estou gravando minha tela e eu acho que eu vou travar meu computador se eu clicar nisso porque eu não sei se meu computador pode lidar com dois gravações ao mesmo tempo, mas isso é porque eu estou gravando este curso. Esse é um recurso que você pode gravar somente essa parte da tela. Você pode rolar para o site, clicar em diferentes coisas que você conectou através da ferramenta de prototipagem e, em seguida, basta enviar um MP4. Acho que exporta um MP4 para o seu cliente e envia o vídeo. Transferimos ou enviamos um vídeo no YouTube. Você também pode compartilhar o design do seu cliente com muita facilidade. Você pode comprar um software de gravação que estou usando para fazer este curso. Eu uso o fluxo de tela para gravar este curso. Eu também posso gravar meu áudio com uma entrada de microfone porque é isso que eu estou fazendo no momento para gravar este curso. Para pessoas que não têm um microfone ou não os lêem, querem falar dentro do microfone e do recurso blade, esse botão é perfeito para compartilhar seus designs e as interações reais com seus clientes. Havia duas características que eu também queria mostrar a vocês. 36. Felicitações + quer mais?: Muito bem pessoal, parabéns, vocês terminaram com o curso. Esta é uma conquista incrível porque maioria das pessoas não chega ao final do curso. Isso realmente mostra que você realmente quer aprender e eu realmente aprecio isso. É por isso que eu quero agradecer neste vídeo. Então e agora? Talvez você queira mais. Se você viu alguma coisa online que você quer que eu explique e acrescenta a este curso, por favor me avise. Mande-me um DM no Instagram. Meu nome é Rinodeboer ou apenas deixe um comentário aqui embaixo. Eu também quero saber o que eu posso melhorar neste curso porque eu posso apenas criar novos episódios e melhorar o core show. Se você pode deixar um comentário para este curso que será realmente útil e que me permitirá melhorar o curso. Você tem acesso a este curso agora. Se eu adicionar novos episódios e, em seguida, você verá esses novos episódios se eu carregá-los. Mais uma vez, parabéns. O que também é uma possibilidade é que você quer que eu faça outro curso, talvez sobre alguns tópicos mais profundos como teoria do design, esse é um curso que eu quero criar. Ou talvez algumas outras ferramentas possam estar criando ícones no Illustrator, por exemplo. Por favor, avise-me e espero ver-te na internet. Mais uma vez você pode me seguir no Instagram no rinodeboer, ou você pode seguir os links de [inaudível] no YouTube ou no Instagram. Vou colocar esses links abaixo. Então quero agradecer novamente por fazer este curso. Certo, pessoal, espero que nos vejamos em algum lugar na internet. Obrigado.