Adobe XD de iniciante a especialista — design, protótipo e colaboração

1. Introdução ao curso Adobe XD: Bem-vindos ao meu curso sobre isso. Mais de 60 anos e nas escolas você vai aprender todas as coisas básicas e todas as coisas oferecidas mais de 60 nós vamos projetar, vamos criar protótipos, estávamos indo para o dedo do pé, estávamos indo para o dedo do pé, aprender tudo sobre prototipagem de papel e todos os diferentes protótipos interativos, protótipos ao vivo. E nós vamos colaborar com seus desenvolvedores. Então, o que a colaboração significa é que vamos entregar nosso design para desenvolvedores que usam Zeppelin e Advil cold. Então não se preocupe se você não sabe sobre este material avançado porque você vai aprender que neste curso eu vou cobrir todos os conceitos básicos. Atalhos? Quais são as diferentes ferramentas que você pode usar para construir seu design? E então vamos passar para a fase de prototipagem onde vamos gerar a gripe fora do aplicativo e diferentes skins. Vamos conectar os diferentes ecrãs uns com os outros. E, no final, usaremos nosso design para colaborar com outros desenvolvedores. Nós estamos indo para projetar, nós estamos indo dedo do pé, dar-lhes especificações de design e diferentes as distâncias entre diferentes elementos e os guias de estilo citados, que seus desenvolvedores podem usar instantaneamente lá nós design aplicativo ou Design de aplicativo para iPhone. Agora vamos cobrir muito sobre datilografia na fronteira. Você vai me ver criando diferentes protótipos de papel estavam indo para cobrir a parte de esboço ou o design de nível de bloco, que é o primeiro rosto fora de qualquer projeto. Portanto, este curso é uma mistura de técnicas de experiência do usuário, poucos deles. Eu tenho discutido em um monte de TD como prototipagem e também sobre Adobe X T. Como você pode usar e criar protótipos instantâneos originar protótipos instantâneos usando Adobe X'd . Agora, muitos designers fora, eu vi que eles nunca falam sobre diretrizes de design, I diretrizes de design dos EUA ou as diretrizes. Todo designer e desenvolvedor deve saber que a barra de navegação ou que eles estão fora do EUA aplicativo dos EUAdeve ter 49 pontos ou a carga deve ser 44 pontos. Todas estas especificações que vou cobrir neste curso. E, uh, se você tiver algum problema ou você enfrentar qualquer problema, você pode facilmente entrar em contato comigo. Por que são respostas a perguntas e você também pode me perguntar diretamente por mensagem. Vamos fazer muitas coisas juntos, então vejo você em breve nesse curso, e eu serei seu instrutor 2. O que é o Adobe Xd?: Olá, todo mundo. Hoje vamos conhecer a nova ferramenta fora da Adobe, que é um trabalho x d e eu estava lendo por um longo tempo para alguns recursos que o introduzido agora em X t. E agora eu vou mostrar alguns off as grandes características fora dele. E eles são a equipe Robur. Eles estão trabalhando mensalmente sobre isso e lançando cada recurso mensalmente com base na atribuição de diferentes designers e designers de experiência de usuário de todo o mundo. Ok, então isso é em mais de 60. Estou agora no Windows. Existem apenas algumas pequenas diferenças dentro da versão macro e versão do Windows, mas elas são quase semelhantes. OK, agora eu vou mostrar alguns fora dos grandes e legal recursos off X'd e por que você deve usá-lo como, ah design via quadro e ferramenta de protótipo em sua experiência de usuário, design, design, fluxo de trabalho ou seu você um trabalho de design. Ok, agora por que essas três ferramentas para esboço loja e atrás atrás D Eles são ótimos para o seu design ou experiência do usuário design porque a Apple são versão líderes U S, eles estão produzindo seus gráficos nestes três para Max Ok, Então agora eles estão ostentando para o esboço da loja e aeróbica T. E se você olhar para os tamanhos dos arquivos adobe X t tamanhos menores dos anos oitenta, 18,9 MB para que você possa ver que é muito perto do tamanho do arquivo de esboço, então é cinco tamanho é muito pequeno. Ok, então este é um grande ponto positivo porque você pode criar, tipo, centenas de diferentes quadros de arte nele. Ok, então telas diferentes, talvez centenas sejam 20 ou 30 telas diferentes, e o tamanho do arquivo ainda será pequeno. Ok, então é mais fácil compartilhar um off the grid características de um trabalho X t é. É repetição. Bom. Saber o quê? Repetir a ganância é que você cria o seu elemento de design uma vez, e você vai repeti-lo fazendo um grande Reino Unido Você pode ver neste exemplo de design que vamos criar um fim fora das pontuações. Você pode ver que esta é a nossa repetição cria. Então, se eu tentar os dedos curtos sobre ele, você pode ver que ele está removendo todos os outros, uh, estes, hum, modelos de conteúdo aqui. Ok, então ele está movendo estes. Ok, Então você pode estender sua grade em destruição e na direção vertical, ambos fora dessas direções e ele vai multiplicar seu único conteúdo e você pode alterá-lo. Você pode. Eu fiz isso. E você pode fazer o que quiser. E vai significar um grupo. Ok, então este é um ótimo recurso para criar origem. Leia o conteúdo instantaneamente. Ok. Então você não precisa gerar tudo de novo e de novo. Você pode ver por aqui. São duplicatas. Ok. Minha proteção infantil. Produção infantil, treinamento de proteção infantil. Então temos outro recurso que é chamado de prototipagem. Você pode vincular toda a tela que você pode ver ou ouvir. Aqui está um protótipo de seção, e você pode visualizar o protótipo em sua área de trabalho. Você pode ver seu cabelo. Aqui está um protótipo. Este é um ótimo recurso porque no design da experiência do usuário, você precisa testar seus protótipos com seus usuários. Você precisa ver como os usuários vão realmente usar isso. Se este botão é suficiente para o Tom deles ou se ele está faltando lá, Tom. OK, então todo o tipo de coisas, se o espaçamento entre esses dois elementos é bom o suficiente para que o usuário não esteja tocando neste e abrindo este. Ok, então estes são alguns grandes recursos fora do Adobe X'd, e ah, nós vamos cobrir um monte de coisas nele. Ok? Além disso, você pode se mover. Vou pré-visualizar seus protótipos. Você pode visualizá-los diretamente no seu celular. celular do seu usuário. Além disso, você pode compartilhar as especificações de design. Está bem, deixa-me mostrar-te as especificações do design. Aqui temos as especificações de design do mesmo projeto, e você pode ver se eu vou a algum desses. Está a mostrar-me que este verde está ligado a este. Então, se eu for para este, Ok, então ele está mostrando todas as cores usadas neste quadro de arte juntamente com todos os estilos er corretos . Então, se eu clicar em qualquer off thes item, ele vai mostrar os detalhes fora que Qual é a aldeia em altura fora deste item? Qual é a distância entre esses dois itens de eso? 16 pontos. Então todas essas coisas cores, redondeza. Esta é a redondeza deste botão. Certo, cantos arredondados. E está mostrando também outros fatos, como sombra e essas coisas. Ok, então isso é muito útil. Está agora em especificações amargas de design, Peter. Eles estão tentando melhorá-lo para o e eu espero que ele vai ser uma grande característica no futuro próximo. Ok. Ok. Agora de trás do dedo do pé, Adobe X'd mais alguns recursos, que eu realmente amo é esta biblioteca de símbolos. Você pode ver os ativos. Eu posso adicionar todas as cores que eu usei todos os diferentes têxteis, e, uh, estilos que eu usei nos símbolos símbolos é na verdade o elemento reutilizável. Você pode criar um símbolo e você pode multiplicá-lo ou usá-lo em qualquer tela. E se eu fiz algum fora dos símbolos, você pode ver sobrecarga. Sei que estamos mais no protótipo. Então aqui temos um símbolo. Certo, então isso é um símbolo. E se eu tentar mudar a cor fora do símbolo você pode ver que ele mudou em toda parte. Diferentes furos de arte em todo o design. Onde quer que eu tenha usado este símbolo, ele vai ser mudado. Então este é um ótimo recurso. Você pode mudar instantaneamente qualquer coisa em qualquer quadro de arte. Se for um símbolo, será atualizado em todos os quadros de arte. Então este lado está basicamente nos guias de estilo que normalmente usamos para criar em outro Softwares ou qualquer coisa em Zeppelin. Ou se você lavou meus outros cursos, você sabe o que são guias de estilo? Eles são basicamente os guias de estilo, coloração e tipográficos para usar diferentes quatro tamanhos, cores diferentes e como eles serão usados em nosso design. Ok, então estes são todos os grandes recursos fora do X t, e eu vou mostrar-lhe um monte fora do negócio e como podemos rapidamente gerar esses projetos em X t. No mundo real, situações criando designs com muita velocidade é realmente necessário. Você quer mostrar o seu protótipo ou você está trabalhando demonstração ab. Faça seu cliente ou seu usuário e você queria fazê-lo instantaneamente dentro de duas horas ou dois metros ou talvez quatro horas. Eu acho que este tipo de projetos com essas muitas telas, como uma porta nove telas. Eu acho que você pode fazer isso apenas no nosso. E você também pode compartilhar seus protótipos. Você pode ver o cabelo dela publicar protótipo. Ok, você pode compartilhar seu link de protótipo com qualquer fora de seu cliente ou cliente no instante, e eles podem fazê-lo em seus dispositivos. Ok, agora, na próxima lição, eu vou mostrar a vocês como baixá-lo e como comprar este software se você realmente quiser comprá-lo. Mas agora, se você está aprendendo, você só precisa baixar a versão de teste. Certo, então vamos para a próxima lição. 3. Faça o download e instale o Adobe XD: Ok, agora seguindo em frente. Nós vamos baixar em Obey X'd versão de teste. Então você está indo para ir para esta jóia adobe dot com produtos barra x ação artista TML ou eu vou compartilhar este mundo com você. Ok, então este é o teste gratuito. Você pode baixar a avaliação por um mês, e você também pode comprá-la. Então, se você clicar sobre isso agora, é sujeira barato agora, e está disponível para $10 apartamento. Ok, então este é apenas recentemente, Eu acho que há outros APS lá por US $20 por mês, mas na verdade está disponível para US $10 apartamento. Está bem, se queres mesmo comprá-lo. Ok. Agora chegando aos requisitos do sistema. Ok. Então, antes de instalá-lo em seu PC são Mac, isso é muito legal coisa sobre este aplicativo que ele está disponível para ambos os sistemas operacionais . Ok, então, se seu usuário ou seu cliente estiverem trabalhando em um PC ou Mac, eles podem ver seu design e podem brincar com ele. Ok, então aqui temos os requisitos de sistema para Mac OS, que é Mac os 10.11 e posterior. Ok, estas são a memória de G B, 1.4 gigahertz conhecido. Pronta? Não exibir. Retina recomendada. Ok. E então temos o Windows 10. Alguém? Três atualização. OK, então se você tem janelas simples, então e norte e atualização misericórdia ou qualquer coisa abaixo desta versão 16 07 ele está indo dedo do pé. Dar-te-ei problemas. Você não pode instalá-lo muito fora de estudantes. Eles me perguntaram como instalá-lo no Windows 10. Certifique-se de que você tem qualquer atualização de misericórdia ou a versão mais recente do Windows 10. Ok. E estes são os requisitos CPU, dois gigahertz memória para G B A, G B, fora do espaço de instalação e exibição. E desça lá. Ok. Eu realmente prefiro que você tenha uma boa placa gráfica em Leeds. Pelo menos ter Koji bi ou um GB off ram em sua placa gráfica. Ok? Porque é necessário para a maioria deles projetar aplicativos intensivos. Ok, agora, estes são os requisitos, então certifique-se de ir em frente. Se você ainda não instalou o Baxter. Tente instalar a versão de avaliação gratuita e baixe-a e instale-a, e eu o verei na próxima lição. 4. Por que o Adobe XD é incrível: três e vou apresentar-te. Com fio será extinto é tão popular entre os designers de interface de usuário. Vocês são designers e designers de experiência de usuário. Existem várias coisas ou você pode dizer, recursos que devem estar presentes em qualquer tipo fora ferramenta de design para torná-lo perfeito para a experiência do usuário . Designers gostam de designers. Agora. A primeira característica é que ele deve gerar protótipo Você é? Eu crio ou tela fora de qualquer aplicativo rapidamente para que possamos construir rapidamente nele. Podemos projetar. Certamente. Não deve demorar como o dia inteiro para criar cinco ou seis coisas, muitas vezes aplicativo. Ok, então isso é uma coisa. A segunda coisa é que podemos facilmente compartilhá-lo e podemos é um fantástico com os usuários, que é também você pode construir um protótipo rápido droga, Protótipo fora de seu produto X Testá-lo com seus usuários rapidamente. Então, se você está testando com o usuário e mostrando-lhe ou coração sua primeira idéia fora do seu aplicativo e hey não gosta de algo ou ele diz que isso é isso não é o que eu quero. Você pode instantaneamente alterá-lo em adobe X T e gerar outro protótipo passeio de distância e mostrou que você realmente quer este. Ok, então esta é outra característica. Terceiros recursos, que eles realmente introduziram agora, são para desenvolvedores. O que os desenvolvedores precisam é que eles realmente precisam de especificações, cores os cabos off cores em valores acessíveis ou valores RGB ou às vezes algum outro valor rgl para valor. Ok, então eles estão mais interessados nas especificações que as cores que precisamos usar em nossa equipe fora deste aplicativo ou site. E quais são as especificações diferentes que exultavam com? Ok, então estes foram introduzidos recentemente na Adobe, na verdade, que é que você pode extrair seu gerar seus elementos, suas especificações de design, que este elemento está muito longe deste botão. Ok, você pode gerar nele dentro dentro do elemento inspecionar, que é, eu acho que eles são recurso da Adobe na divisão B agora. Além disso, eles introduziram recentemente que você pode exportar seus designs extras de adobe no Tow Zeppelin , que é outra ferramenta para criar em especificações de design e gravado qualquer menção fora do seu design. E, em seguida, eles também introduziram que você pode exportar suas camadas para sempre legal. Ok. E também há mais um. Eu acho que proto por para criar qualquer missão fora do seu protótipo. Mais detalhes e emissões são micro animações. Certo, então isso é tudo sobre essa lição. Espero que você tenha gostado da minha introdução txt operacional e o que você pode fazer com ele e por que ele está ficando popular entre outras ferramentas. Porque há mais uma razão para o tamanho do arquivo ser realmente pequeno. Acho que é ainda menor do que o esboço. Se você conhece um mapa de esboço, ele é menor do que esboçado. Então, ele está se desenvolvendo em um rápido e paz e um monte de recursos são adicionados todos os meses nele. Então eu realmente aconselho que se você gosta designer estão em algum design UX sentir que você realmente deve aprender a, você sabe, misturar-se com esta mão longe oferta excesso. Ok. É muito fixe. Leve, e espero que você vá adorar. Está bem, vejo-te em breve. Em outro menor 5. Tela de boas-vindas: Espero que até agora, você já tenha instalado o Adobe XD em seu computador. Agora vamos ver o que esta tela de boas-vindas aqui. Então, sempre que você executar o Adobe X D, esta é a primeira tela que você verá. Aqui na parte inferior, podem ver que estes são os meus arquivos recentes. Então estes são meus projetos recentes ou arquivos que abri. Posso reabri-los clicando em qualquer um deles. À esquerda, temos diferentes áreas como aprender em casa. Saiba se você deseja ver alguns dos vídeos da empresa Adobe sobre como usar este Adobe XD. Então temos documentos em nuvem. O Adobe XD foi recentemente transferido para a nuvem. Assim, sempre que você abrir ou salvar qualquer arquivo, ele também é salvo na nuvem. Então ele traz as mudanças e o histórico modificado do seu documento. Então, o que você projetar, por exemplo, como uma hora para ir para o nosso atrás, se você o salvou, ele refletirá todas as mudanças que você fez com o tempo. Então ele vai atualizá-lo automaticamente na nuvem. Então, estes são documentos em nuvem. Se eu clicar aqui você pode ver que estes são todos os documentos que eu carregei para a minha nuvem. Você pode ver aqui, estes são poucos documentos. Se você quiser excluí-los, você pode clicar aqui. Você pode excluí-los assim. Além disso, você pode classificá-los. Estas são opções diferentes. E então nós temos dab compartilhado com você. Então estes são os arquivos se alguém compartilhou seus projetos comigo e eu estou trabalhando com eles nos documentos da nuvem. Isto vai ser por aqui. Estes são todos os ficheiros apagados. Então eu recentemente o exclui, levantou este arquivo. Então, isto está tudo aqui. Agora, se você clicar em Gerenciar links, ele vai para a sua nuvem aqui você pode ver este Macleod e uma vez que você clicar no gerenciamento, mas, em seguida, estes são todos os protótipos publicados ou especificações de design ou projetos I ter compartilhado com eles. Então você pode ver se você olhar de perto aqui na parte inferior ele diz protótipo, protótipo, protótipo, protótipo de projeto protótipo de especificações de design. Então, esses são arquivos diferentes que compartilhei com outras pessoas. Você pode ver aqui, estes são links publicados, então estes são todos os que eu compartilhei com os outros. Você pode gerenciá-los aqui. Você pode clicar aqui, você pode copiar esse link e compartilhá-lo com outras pessoas. Você pode excluir permanentemente esses links compartilhados ou publicados. Agora, vamos voltar para nossa tela do Adobe XD e você pode ver se voltamos para casa, isso é tudo que temos aqui, nossos documentos de nuvem compartilhados comigo, arquivos excluídos, LINCS gerenciados, links gerenciados para os arquivos que compartilhei com outros. Então isso é tudo sobre esta tela de boas-vindas. Espero que tenham gostado desta lição. Vamos mais longe e discutir a interface na próxima lição. 6. Introdução à interface adobe XD NOVO 2020: Agora vamos abrir um novo arquivo para isso. Temos modelos diferentes aqui. Aqui temos iPhone, diferentes poucos querem projetar um aplicativo para iPhone ou Google App ou Android app, você vai e aqui, se você quiser ir para web design, você estará usando alguns dos modelos aqui. Se você quiser projetar algo para mídias sociais, postagens do Instagram, postagens do Twitter, desvanecimento do cabeçalho do Twitter, postagens do Facebook, filmar seu vídeo. Você vai para cá. Agora mesmo. Vou selecionar algo daqui. Como, vamos selecionar este Google Pixel para, para Excel. Agora, este é o nosso quadro de arte aqui. Então vamos maximizar este. E você pode ver no topo ele diz sem título e aqui está um pequeno login na nuvem e ele está me mostrando o tempo aqui. Então, vamos clicar aqui e alterar o nome para o nosso, digamos primeira visita ao XD salvar. Então agora você pode ver que eu já tenho alguns plug-ins e estrela, então ele está me mostrando que um plug-in precisa de atualização que temos agora eu vou fechar este. E esta é a nossa interface simples ou Adobe X à direita você pode ver que temos poucas opções aqui como este é o nível de zoom. Podemos ampliar até 100%. Este é um 100% deste design. Esta é a nossa pré-visualização da área de trabalho para o protótipo. Esta é a nossa pré-visualização móvel. Se instalamos o aplicativo móvel e queremos ver esta tela em nosso celular. Isto vai ser o aqui. Se eu quiser convidar outra pessoa, outra pessoa , algum outro designer, eu posso clicar aqui. Isso ainda está na versão beta, então eu posso habilitar a edição. Então outro designer pode editar meu projeto dois. À esquerda aqui, temos três abas, design, protótipo e cisalhamento. Design é onde estaremos projetando gabar-se de nossas telas, estaremos colocando diferente. Mas como vamos fazer coisas diferentes por aqui. Por exemplo, este botão aqui. E na seção do protótipo, estaremos ligando duas ou três telas. Por exemplo, se eu tiver outra tela onde aprendemos cada atalho e tudo mais, eu só estou tentando explicar. Então agora você pode ver que temos duas telas. Um é este 11 é este segundo. Posso conectá-los assim. E isso vai estar no nosso protótipo. Então, nossos protótipos interativos serão sobrecarga. Nossos arquivos de projetos serão sobrecarga. Compartilhar será quando quisermos compartilhar nossos projetos com alguém. Assim, você pode ver que temos diferentes opções onde revisão de design para obter feedback sobre seu design ou protótipo. Então temos um desenvolvimento onde vamos compartilhar nosso documento com desenvolvedores para mostrar-lhes o código que temos para todos esses elementos aqui. Então, para a apresentação, talvez queiramos mostrar aos nossos clientes. E, em seguida, para testes de usuário e, em seguida, para configurações personalizadas. Portanto, essas são configurações diferentes para compartilhar seu documento. Não, vou voltar para casa. E se eu clicar em Início, você pode ver que podemos voltar para esta tela inicial onde podemos abrir qualquer outro documento recente. Novamente, temos algum menu aqui, você pode ver à esquerda no Adobe XD é versão Mac, temos o mesmo menu no topo do MAC aqui. Então eu posso clicar aqui, você pode ver que temos um novo documento aberto. Então temos diferentes portões de interface do usuário. Em seguida, temos documento recente, renomear este documento, salvar como salvar como documento local. Assim, você também pode salvar este como seu documento local. Agora o problema será se você tentar salvá-lo como seu documento local, suas alterações são histórico não serão salvas aqui. Então vocês podem ver que estas são as duas mudanças que eu fiz às 302 PM e 03:04 PM. Três nossas 15:00 e quarto minuto, Eu realmente adicionei esta segunda tela. Então ele está realmente salvando todas as minhas alterações na nuvem. Então, sempre que eu quiser acessá-lo, eu posso voltar, por exemplo, para este aqui. Posso reverter de volta. Você pode ver aberto em uma nova janela. Então, se eu tentar abrir isso em uma nova janela, você pode ver que ele terá apenas uma tela. Então você pode ver que temos este mutuário tempo aqui. E é a primeira tela com a qual eu acho que comecei. Esta é a diversão. Começamos com tela vazia. Então ele vai salvar todo o histórico de todas as mudanças que você vai fazer ou talvez salvar depois de quatro ou cinco minutos. Eu não tenho certeza de qualquer maneira. Então, à esquerda, temos todas as ferramentas. Estas são as ferramentas que vamos usar nas próximas lições. Vou explicar cada um deles. Então, na parte inferior aqui temos ativos, temos painel Camadas, temos nossos plug-ins aqui. Portanto, quaisquer plugins que você vai instalar, estes são plugins gratuitos. Alguns deles são pagos. Você pode instalá-los aqui e você pode usá-los assim. Então, se você clicar aqui, você pode ver que diz um erro. Escala de cores muito larga. Vamos criar, você pode ver que esta é uma escala de cores aqui. Então, esses são os plug-ins que eles vão automatizar e aprimorar seus recursos do Adobe XD. Então estas são as ferramentas. Estes são os três que vamos principalmente olhar para este quadro de arte aqui a bordo de Arbor, Pelham. Estes são quadros de arte, na verdade, estes são chamados de quadros de arte. E isso é tudo sobre a interface do Adobe XD. Temos três abas principais aqui, design, protótipo e compartilhamento. E este é o nível de zoom. Vamos usá-la muito. Este é o botão play para pré-visualizar o nosso tempo de distância perfeito. Você pode ver nesta janela, isso também vai ser usado muito. Então essa é toda a introdução sobre a interface. Vamos aprofundar mais as mensagens de texto da Adobe na próxima lição. Vamos pular para o próximo S E agora. 7. Interface do painel de adex XD: Então, se eu voltar a este projeto, você pode ver aqui nós temos outro painel, que é o nosso painel de propriedades. Ok, então se eu clicar neste quadro de arte então este quadro de arte é selecionado, e esta linha azul mostra que este quadro de arte está ativo, eu vou mostrar um ver todas as opções alegadas. Faça este quadro de arte, como com na posição desta placa de arte altura a estibordo. O que é será a rolagem e a altura da placa de visualização. Quanta altura é visível, então temos aparência, a cor de preenchimento. Eu também posso mudar a cor se eu quiser. Oh, e quero dizer, eu preciso clicar nisso. Ok, então eu também posso criar grades e Leo está nele. Vamos falar sobre os layouts da Gretchen mais tarde. Só estou mostrando que este é o painel de propriedades. Ok, então se eu clicar neste retângulo arredondado, ok, então se eu clicar neste ângulo de rejeição redondo, você pode ver todas as opções mais tarde para isso, como alinhamento. Uma repetição da nota. Este ataque e essas raiva relacionam tudo bem, então isso está tudo aqui. Ok. Na barra superior serão alinhamentos. do que temos. A repetição criou nossa união. São opções? Não quero explicar agora. Só você precisa saber que esta área é para controlar seus objetos de design. Ok, então se você tem um quadro de arte, você pode controlar sua altura e outras características. Se você tem ah, retângulos, você pode criar diferentes efeitos e tamanhos diferentes e arredondamento diferente e capacidade diferente como usando painéis de propriedade do. Ok, então tudo, a maioria das coisas sobre qualquer objeto será deste lado. Você pode ver o que aqui. Agora, eu selecionei este texto e o texto. As opções são por aqui. Você pode ver. E se você selecionar a arte embarcada, propriedades relacionadas ao quadro de arte estarão aqui. Então é assim que usamos um emprego. Um x T. OK, Agora, há mais dois ícones à esquerda. Na parte inferior, você pode ver ou ouvir camadas e ativos. Ok, agora, esses ativos estão lá vai ser todas as cores. Estilos de personagens são símbolos que vou usar em todo o meu design ou em todas as placas de arte. Ok, então se eu tentar adicionar isso como o estilo da tia Corrector, você pode ver, ele adicionou um estilo de trator R nesta área de ativos. OK, então não confunda este design e protótipo com estes dois. Ok? Estes vão mostrar todas as camadas e isso vai mostrar todos os ativos que você usou em seu design. Ok, então esta é a introdução à interface do Adobe X'd. Espero que tenham gostado desta lição. Vamos passar para o próximo exercício. 8. Adobe XD e ganhar as diferenças: Ok, agora neste ouvir, vamos ver quais são as diferenças entre a versão Max desligada. Não, B, x d e B. versão B, x d e B. C é desligada, então seja extra. Ok, então a primeira coisa que você vai notar é esta barra de parada, que é barra de atalho aqui, que não está presente nas janelas. E embora os atalhos sejam muito fáceis de lembrar, mas ainda assim vai ajudar muito. Ok, então você pode ver que você sabe o que você pode fazer com esses objetos. Você pode adicioná-los. Você pode. Há opções de texto do que temos um intervalo e tudo mais capa sobre. Então temos uma data e um arquivo. Ok, então esta é a primeira grande diferença. Então temos mais algumas diferenças. Como você pode ver o recentemente adobe X t. Eles têm pelo menos alguns, hum, plugins que são suportados, ou as ferramentas de terceiros que são suportadas pelo Adobe X'd em. E se eu for para esta exportação, você pode ver que ali está Zeppelin. Agora, Zeppelin é uma ferramenta, e uma outra ferramenta é sempre chamada e duas, ou ver essas ferramentas tipo off que são usadas para gerar cabo e gerar especificações e documentos especificações. Se você não sabe sobre Zeppelin, você deve tirar meu fluxo de trabalho fora mais do que representar curso onde nós geramos todos os guias de estilo , cores , equipes, tudo dentro Zeppelins usando para a loja. Ok. Não, estamos todos prontos. Eu tenho um criado, um parágrafo um cabeçalho em um botão, e nós vamos exportá-lo. Dedo do Zeppelin. Vamos ver o que vai acontecer aqui. Ok, então vamos selecionar este quadro de arte, e vamos exportá-lo para Siplin. Ok, então isso é importante. Então eu criei em um X. Então eu vou importá-lo em um próximo, e ele está carregando o design agora. Ok, então tudo está feito. Vamos ver isto. Certo, isso é muito legal. Eu realmente gosto. Ok, então este é o nosso título, e este é todos os tamanhos que você pode ver nos pontos que são para desenvolvimento móvel. Você pode ver por aqui. Então temos isso também, a cor também está vindo em RGB. Acho que é para nós. Então você pode ver aqui como podemos exportá-lo para Ah Zeppelin. Certo, então veremos isso mais tarde. Estamos indo para o pé. Veja isso em detalhes mais tarde. Nas últimas lições agora, só queria mostrar que você pode fazer muitas coisas com o Adobe XY. Então, o que o Adobe Extra faz é que eles normalmente lançaram seus novos recursos primeiro para minha pergunta, e depois de um ou dois meses, ele vai ser incluído no reboque. A pergunta das janelas. OK, então não se preocupe se você tem janelas que você está faltando atrás. Ok, então isso não é uma grande diferença. Ok, então há mais uma diferença que eu esqueci de dizer se você criar um protótipo aqui , então eu vou duplicar isso reprimindo minha chave de opção artística. E eu vou dar o pé. Basta criar um protótipo simples. Eu iria ligar essas duas telas, parecer tão dissolvido, e apenas mudar a cor deste botão. Então sabemos que estamos lá dentro. Outro passou por aqui. Ok, então tudo feito. Agora vamos tocar isso e você pode ver aqui. Uh, então o que você pode ver aqui é um pequeno botão, que é recorde. Ok. Então eu posso pressionar isso e eu posso gravar um vídeo na minha pré-visualização. Ok? E depois posso exportá-la assim. Vai ser um vídeo. Ele vai salvar uma renovação de vídeo, tipo brutal. E você pode compartilhar esse vídeo com qualquer um. Ok, Neste momento, este oficial não está disponível no Windows. Espero que venha logo neles. Os próximos upgrades, talvez no próximo mês ou talvez de março ou Apple. Eu não sei. Este é também um recurso puro que só está presente na versão Adobe X'd Mex. E espero que tenham gostado desta lição para os usuários do Mac. Acho que este é um criador, Will e você pode fazer muitas coisas com ele. Espero que tenham gostado desta lição. Se tiver alguma pergunta a me fazer, a menos que passe para a próxima lição. 9. Atualizações e recursos de atualização XD: uma das melhores coisas sobre aeróbica T é que ele é atualizado regularmente. Então, adobe uma empresa e eles estão trabalhando nele um dia a dia e noite a noite e quase dar-lhe uma atualização a cada mês. Ok, então você pode ver a última atualização. WAAS 11 de dezembro de 2017 e o mais recente é geralmente 22 de 2018. OK, então eles têm melhor desempenho na zona. Visualização do Dropbox para alternar arquivo extra entre cor morse três cores diferentes morse que eles estão oferecendo agora e novos INTs gananciosos. Realmente Ingredientes melhorar a exibição de especificações de design mental são limitados 100% e novo recurso, que é chamado de exportação em lote. Além disso, eles estão começando o trabalho de terceiros através de integrações como Zeppelin. Nunca corte. Basta colocar uma torta e guia composto. Ok, então ah, você pode ver aqui eles mostraram que disponível para Mac no Lee. Portanto, há poucas características que eu vou mostrar a vocês na próxima lição. Algumas das diferenças que você vai ver na minha pergunta. A versão para Mac é como, uh, 10%. Ou talvez eu possa dizer 5% de visão de janelas. Ok, então eles têm mais recursos no Mac. Primeiro eles os lançaram no Mac primeiro, e depois eles lançam no Windows. Ok, então isso é sobre as atualizações. Deixe-me mostrar mais uma coisa que eles estão trabalhando em muitas solicitações de recursos. Ok, então este é o formulário de solicitação de recurso extra da Adobe, e você pode ver aqui as pessoas estão votando para diferentes novos recursos, como texto para acasalamento. E então temos o objeto fixo estático entre tradições. Então você pode ver que esta é a revisão de um debate? Eles estão dizendo recurso em revisão. Ok, então eles estão revisando esse recurso do que eles têm recurso precisa de mais informações do que eles têm destaque no backlog. Ok, então há poucos recursos que eles já têm funcionando, começou, começou a trabalhar, como você pode ver ou ouvir sobre os recursos esportivos de refugiados iniciados, então espero que eles vão perdê-lo em No próximo mês, ou talvez dois meses depois disso. Comece a trabalhar nisso. Então você pode dizer que este é muito legal recurso. Você pode se manter atualizado com o que está por vir em uma porta. X'd. Ok, vamos passar para a próxima lição onde nós vamos ver como começar a usar X d. Ok, então nós estamos realmente indo para começar a usá-lo 10. Exercício - primeira atribuição simples: - Não. Vamos conseguir algumas coisas práticas com o Adobe Extra. Ok, nós conversamos muito sobre isso, e agora eu vou mostrar a vocês como você pode criar algumas coisas simples nele. OK, então vamos fazer esta primeira tarefa. Esta vai ser a sua missão. Vou criar uma tela simples. Deixa-me mostrar-te. Então eu abri este quadro de arte, que é o iPhone 678 e eu vou pressionar o controle zero, comando zero, zoom in. Ou você também pode ir até aqui e zoom 200%. Está bem. Agora, o que eu quero que você faça é apenas clicar neste banco de elipse e apenas arraste e segure sua tecla shift para que você possa fazer uma circular proporcional. Estamos aqui, e agora vamos pressionar isso, selecione nós e vamos fazê-lo no meio. Ok, então uma vez que está no meio, você pode ver que há ah, linha rosa ou guia inteligente, que está nos mostrando que ele está no meio. Então nós vamos para aqui nesta área e este é o tamanho da nossa fronteira. Podemos aumentar o tamanho da borda para quatro assim. E eu vou pegar minha imagem Jewel na frente, e eu vou arrastá-la e soltá-la dentro deste círculo assim. Ok, então eu quero que você faça algo assim. Você pode usar sua própria imagem. Você também pode alterar a cor da borda. Clique aqui e eu posso mudar o dedo do pé do assassino da fronteira para 7 para 7 para 7. Algo assim. E depois quero que escreva uma mensagem aqui. Por exemplo, este é o meu título. Como Mohammed s e CES. Algo assim. E quero que datilografe sua quadra favorita aqui. Ok, então talvez Ok, então se o seu texto é um pouco mais, então eu estou indo para o pé este vai é tamanho de ataque aqui. Não se preocupe, eu sou isso. Eu vou entrar em um monte de detalhes na próxima seção, então não muito agora. Apenas vendo o tamanho do texto para algo como 16 como este, você pode ver Não, quando eu tento me mover, ele está me mostrando as distâncias entre diferentes elementos. Além disso, eu posso selecionar este e eu posso ir daqui para o pé qualquer coisa, ok? E eu também posso alinhá-los no meio assim. Isso já está no meio. Ok? E depois quero o dedo do pé. Tem o botão ah aqui. Então vamos criar um botão com a ferramenta de ângulo distrital. Clique no ângulo da seita. Este é um exercício muito simples. Não se preocupe que você é “Não”. Você vai se meter em problemas. Remova a borda e para o campo. Eu quero a cor. E eu vou usar minha ferramenta fiscal para criar algo nele. Como me contratar. Ok, então eu tenho escape de mama ou V 2 selecionado. E então eu vou selecionar outro lugar. Sim. Mova-o para o meio assim. E eu vou mudar a sua sensação. A cor está ali à direita. Vou torná-lo nulo. Ok? Você também pode selecionar ambos fora deles como esta folga dragão, e você pode alinhá-los no meio assim. Mas normalmente eu gosto disso. Eu deveria movê-lo para cima. E eu selecionei comprou fora deles novamente assim e movê-los para cima assim. É muito simples Ferramentas, design dos dedos e trabalho aqui. K Além disso, se você quiser, você também pode digitar algo aqui como este. Então, se eu quiser um parágrafo fora do texto é um monte de texto, eu vou clicar e arrastar assim e blá, blá , blá, blá, blá, blá, blá, blá, blá, blá. Muito bem, é uma bela poesia. E eu vou mudar a cor de preenchimento. Ok, então primeiro eu preciso selecionar este texto e assistir a cor do filme para algo assim. Ok, então eu não quero que você escreva blá, blá. Ei, então eu vou com o normal e eu estou indo para o pé. Obtê-lo? 18 saídas fora do tamanho. Ok, então vamos escrever algo aqui. Eu vou pular isso. Ok, então eu escrevi algo sobre mim. Ok, então eu vou remover este, e eu vou usar este aqui assim. E você pode usar isso no meio. Algo como isto? Sim, porque é muito deitado no meio, e eu posso usar algo assim. E agora você pode ver aqui nós temos Vamos mudar a cor de preenchimento dedo cor mais escura como esta. Ok, então esta vai ser a sua primeira tarefa. Só seu nome, o que você ama e o que você faz e o que você gosta e o que você assistiu em apenas duas linhas e Abberton. Ok, então se você quiser mudar o raio do fardo quer o dedo do pé, faça os cantos arredondados você pode fazer aqui como eu queria ser. Oito pixels arredondados. Você pode ver seu cabelo Se eu quiser adicionar um pouco de sombra, você pode clicar nesta sombra não mudar nada, Não jogar muito com esses valores estavam indo para cobrir Ah, muito no detalhe. Então esta vai ser a sua primeira tarefa que você quer criar algo parecido com isso. Basta criar uma elipse. Arraste sua imagem para ele seu nome, o que você gosta. Você também pode mudá-lo dedo do pé um pouco de cor graça. Então há um contraste entre estes dois e um fardo agradável e alguma sombra em torno dele. Você também pode arredondar os cantos, se quiser, e você também pode usar algo assustadores. Então eu vou usar quatro para os cantos arredondados. Vamos fazer a capacidade 100%. Está bem. Então você pode fazer algo assim. Deixe-me mudar essa cor para algo assim. Então isso é mais profissional. Ok, então eu quero que você crie algo assim e ah, postado na próxima tarefa. E verei você em breve na próxima seção. 11. Pranchas e grades no XD: Agora, a primeira coisa que eu vou falar é sobre quadros de arte, porque esta é a primeira coisa que você vai encontrar no Adobe X'd. Ok, então eu sou para este exemplo. Vou selecionar esta teia, e eu vou selecionar esta placa de 12 80 jardas e vamos ampliar o comando ou controle mais ou apenas pressionar comando ou controle zero dedos. Umit dedo do pé o ajuste e dentro desta tela. Então aqui temos sobre a nossa prancha. Este é o nome do quadro de arte. Se você quiser fazer você pode clicar duas vezes, e você pode editar como design do site ou algo assim. Ok, Agora, sempre que você quiser selecionar um quadro de arte, você precisa clicar em seu nome, então clique uma vez e ele vai ser selecionado e você pode ver diferentes opções e mais tarde toe este quadro de arte sobre Aqui. Esta é a largura e a altura. Se quiser medalhão, pode se quiser. Olha, vai bloquear a proporção. E uma vez que você aumentar isso, o segundo valor também vai ser aumentado, o que normalmente não queremos. Ok, então nós temos este retrato e paisagem mais, o que não é uh, faz sentido em Web design, mas em aplicativo móvel, então faz sentido. Certo, então temos essa rolagem. Ok, então rolagem é que quando você cria um protótipo fora deste design, se você quer uma barra de rolagem aqui para rolar o design deles e ok, então algo assim. Então Vieux Port Height vai decidir onde o corpo de rolagem. Então, se eu tiver esse, uh, Vieux Port Heights disse para 600 você pode ver aqui é a minha parte da escola. Ok, então este é o meu você pode dizer página cheia de gesso em web design. Dobra de tempo é a área que está indo dedo do pé visível na primeira vez, e alguém visita. Certo, então até esta área, o site estará visível em seguida, vamos bater rollerball. Certo, agora passando para essa aparência. Aparência é basicamente a cor de fundo de todo o seu design. Você pode configurá-lo para o que quiser, mas eu acho que mantê-lo branco é a melhor opção. Ou aqui. Certo, vamos clicar de novo. Certo, agora temos as grades. Estes são conceitos muito importantes, e isso é usado principalmente em web design. Um monte. Ok, então, mesmo em design gráfico, existem dois tipos de layouts fora da grade. Um deles é esse layout, que é baseado em coluna, e o 2º 1 é quadrado melhor. Ok, então o tamanho quadrado é normalmente feito para abdominais móveis. Não é bom para eu acho que Web design, mas pode rapidamente colocar objetos, se você quiser. Oh, assim. Ok, então isso é muito, você sabe, ele vai quebrar os dedos de cada caixa. Ok, então é mais fácil o seu dedo assim. Ok, mas faz mais sentido no design móvel veio e você está projetando para laboratórios móveis. Faz mais sentido. Vamos deletar de novo. Vá para a praça e este é o tamanho fora do azulejo. Você quer, se quiser, como 24 porcos, analfabetos, susto duro, tamanho quadrado. Você pode configurá-lo para 24. Você pode configurá-lo para 64. Tudo depende da sua própria escolha. Então nós estamos indo para o pé. Discuta este outro layout, que é baseado em coluna. Nós normalmente usamos em Web design. Um layout de 12 colunas e o bom disso depende de sua própria escolha. Mas normalmente, se você usar as configurações de bootstrap, será de 30 pixels. Então vamos para essas margens. As margens são basicamente este todo o espaço à direita, este espaço em branco ou e à esquerda. Então eu vou ajustá-lo para 30 algo assim. Está bem, então está a mostrar-me isso. Você quer margens diferentes em cada lado ou mesmas margens? Então, se eu clicar na mesma margem vai defini-lo 31 pixels, então um pixel não importa muito, então eu vou viver com isso. Ok, então esta é a nossa ganância estilo quase bootstrap. E se você quiser que você congee no tamanho do dedo 12 abaixo de 11 70 algo assim. Está bem. E se você quiser margens diferentes em cada lado, esta é a opção que você vai usar Stop, passo inferior e margem esquerda. Está bem. Você também pode torná-la a coluna padrão mais tarde Configurações. Ok, assim, e ele vai ser definido como padrão. Então, sempre que você começar a usar algumas colunas, será dito para esta configuração Defar. Então este é o básico. Propriedades básicas de qualquer placa de arte. Agora, se você quiser outro quadro de arte, talvez eu queira outro quadro de dardos. Então clique nesta ferramenta de quadro de arte e eu vou clicar em um. Então, o que? Aqui? E ela vai gerar outra arte agora. A segunda opção é que, se eu quiser dedo do pé, basta clicar em V. D. Selecionado primeiro e clicar na placa de arte novamente e você pode ver diferentes opções de inicialização arte . Então, se eu quiser e iPhone seis soar um modelo aqui, eu posso clicar sobre isso, e será paralelo ao meu Web design. Ok, então se eu te visse, eu cliquei mais uma vez. Então vamos mover o dedo do pé isso novamente, moveu tudo e eu vou diminuir um pouco para que possamos ver comprado os furos de arte. E agora, se eu quiser movê-lo, eu apenas selecionei e então eu posso movê-lo, ok? Então eu posso colocá-lo aqui, ou eu posso colocá-lo aqui sempre que eu quiser. OK, então é assim que você cria diferentes pontos de vista fora do mesmo site Noray e eu vou clicar fora e selecionar a ferramenta de placa de arte pressionando um e eu também posso clicar tablet android . Ok, então, não, eu tenho três visualizações. Um é um site ou desktop você do que temos modelo, vista, e então temos vista iPhone. Se eu clicar aqui, eu posso mudar seu layout toe quatro colunas, que normalmente usamos no Mobile APS e superou. Vai ser 16 e eu quero as margens à direita e à esquerda para 24 s. Então eu estou indo toe select 24 ou aqui. Está bem. Então, ok, então ele está cercando a 25, o que é bom. Ok, então aqui está a minha configuração para Web versão fora do mesmo site um jogo. Então eu vou usar quatro colunas aqui, e então eu vou usar oito colunas aqui, então você pode ver que é definido muito longe para oito colunas, que é muito criar. Eu realmente amo esse software. Eles têm valores padrão muito bons, então vamos defini-lo como 32. Ok, então isso está ótimo. Então é assim que eu vou configurar meus furos de arte se eu estou projetando diferentes pontos de vista do meu site . Está bem. Então visão móvel, Andhra tablet visualização e visualização desktop. Está bem. Então eu não vou entrar em detalhes e criar um design de site para isso, mas é assim que você vai configurar seus crudes. Agora, se você quiser excluir um quadro de arte, você pode selecionar e pressionar excluir, e ele vai excluir este quadro de arte. Ok, então é assim tão simples. Além disso, você pode selecionar a partir daqui e excluir. E também você pode duplicar cópia e comandos diferentes que você pode ver aqui. Ok, então é assim que você usa esses livros de arte. Espero que tenham gostado desta lição. Vamos passar para a próxima lição e nos vemos em breve. 12. oito ferramentas no XD: nesta lição. Vamos aprender sobre essa barra de ferramentas que temos no Adobe X'd. Então eu vou passar rapidamente em torno de todos esses objetos e da barra de fezes. Ok, então vamos começar com este iPhone 678 Vamos ampliar. Comando zero no controle zero. E aqui temos a nossa bola dura. OK, então esta é a ferramenta de seleção mais rica do V, que é, uh, isso você pode selecionar qualquer coisa com ele. Ok, então nós temos a ferramenta de ângulo da seita, que é o nosso r e você pode criar, mas termina com ela. Basta pressionar são, e aqui temos apenas arrastar e soltá-lo no meio. E isto é fronteira. Estas são propriedades diferentes fora dele. Vamos chegar a esta área mais tarde. OK, então estes são alinhamentos. Repetir alturas de grau com aparência e diferente este raio de canto raio sentir borda. Vamos olhar para eles em outra lição agora. Vou apresentar-vos todas as ferramentas aqui disponíveis. OK? Temos ferramentas muito limitadas e esta é a coisa de rua sobre este extra de adobe. Ok, então nós temos esse eclipse e você pode compartilhar o dedo do pé, você sabe, tê-lo em uma proporção proporcional e você pode pressionar arte com ele são opção dedo chave do dedo do pé fazer e crescer em destruição. Ok, então ele vai crescer a partir do centro assim. Então, cabe a você. Vou colocá-lo no meio. Certo, então temos essa ferramenta de linha. Você pode usar esta ferramenta de linha em qualquer lugar que você quiser. Certo, então aqui temos essa linha. Então temos o combustível gasto e esses atalhos são muito fáceis. E ah, o que chamamos na experiência do usuário. Design, mapeamento, mapeamento É mais fácil de lembrar. Ok, então ps pentti é texto nossas fronteiras um Exumas E. Então estes são auto-explicativos. Você não precisa se lembrar deles. Certo, então temos essa ferramenta de texto do que essa ferramenta de caneta com mental, você pode criar formas diferentes como essa. Apenas continue girando. E, em seguida, também podemos clicar e arrastar. Clique e deixe assim. Em seguida, clique e arraste para que possamos criar muitas formas diferentes. É quase semelhante ao de uma loja. Ok, vamos chegar a ele mais tarde em profundidade. Ok, então isso é têxtil. Você pode apenas selecionar o 30 ou e você pode escrever algo aqui como algo. O que tem imprensa escapar e é isso. Pressione V, e você pode selecioná-lo e movê-lo. Agora, as opções de alinhamento. Ou você pode dizer que o alinhamento inteligente é muito sofisticado para o novo futuro. Seu software de design é como um esboço, e será extra Reino Unido. Uma vez que você mover algo, ele vai mostrar a distância fora com todos os elementos diferentes aqui em relação a eles. Ok, então ele está me dizendo que agora ele está alinhado com este aqui. E a distância entre estes dois é de 15 pixels. Certo, então temos essas ferramentas de arte. Penso que já discutimos este assunto. Você acabou de selecionar e criar outro quadro de arte. Esta é a placa de arte para iPhone X. E então esta é a ferramenta de zoom que você pode ampliar em qualquer elemento. Isso é algum de volta? Eu pressionei o comando zero zero, e você pode ampliar toda a porta de arte assim. Ok, então isso é muito simples. Você também pode definir o nível da zona daqui em diante. Reduza o zoom. Estes são você pode ver diferentes teclas de atalho. Controle um controle do dedo do pé mais e controle mais menor. Zoom out e ah, zoom para seleção, Controle ou comando três. Então, se ele estava usando Mac, ele vai ser substituído por comando. Muito bem, muito simples. Muito fácil. Teclas de atalho. Eu vou dar o dedo do pé. Crie uma lição separada para todas as teclas de atalho utilizáveis. Ok, então podemos usar e começar a usar rapidamente o Adobe X'd. Então estas são todas as ferramentas. 3456 e oito ferramentas que você tem sobre ele. E a maioria deles é justiça. 123456 Então, seis ferramentas uma é placa de arte e um zoom, que é uma espécie fora de um utilitário para usar. Amplie e diminua seus quadros de arte. Isso é tudo sobre a barra de ferramentas. Aqui nós temos. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 13. Ferramenta de retângulo para criar botões: à distância. E eu vou falar sobre essa ferramenta de retângulo e como podemos usá-la e como existem propriedades diferentes. Deixe-o esperar e como podemos criar um botão bonito olhando com a direção. Ok, então eu vou apenas selecionar nossa imprensa são e nós vamos arrastar até aqui e criar um retângulo como este. E você pode ver no lado direito que temos a largura e a altura. Vamos passar para 75 na altura de 60. Picks está aqui. Então nós ajustamos para 60 e hiato para 75. Agora vocês podem ver aqui que temos o primeiro controle, que é essa opacidade, que é como estão de volta. Vai ser. E eu vou deixá-lo 200%. Então o próximo é o raio do canto. Então, se eu quisesse estar por perto, eu vou dar o pé. Use algum raio de canto como seis por aqui. Você pode ver agora que são 100. Então, se eu d selecionado para conceder Ok, se você quiser diferentes por diferentes razões para cada canto, você vai selecionar este. Ok, então se eu pressionar zero aqui e também zero para este aqui. Ok, então você pode ver agora nós temos dois cantos de carga ou truncado. Ok, então é assim que você pode fazer isso. Então, se eu quiser 32 aqui, eu posso ter algo assim. Ok, então eu vou pressionar este aqui. Então, se você quiser uma forma de pílula, você pode aumentá-la para, tipo, 39 ou algo assim. Soy este 1939 e você pode obter isso foi enviado. Mas temos essas duas propriedades, que é uma delas, Phil, que é a cor. Então eu vou preenchê-lo com uma bela cor azul. Talvez esta loja Buchler aqui assim. Certo, então temos essa fronteira. Acho que vamos removê-lo agora mesmo. E se você olhar para as propriedades da borda, você pode ver aqui é o quanto você quer que a borda em torno dele e preencher a borda será Deve estar em um acidente vascular cerebral. O Bader deve estar lá dentro. Estes estão do lado de fora do nosso, no centro. Ok, S. Então eu vou usar o lado de fora e vamos mudar o tamanho do dedo 10 pixels. Ok, então agora você pode ver aqui nós temos a seleção e a fronteira é fora disso. Ok, então eu vou usar um pouco de borda fora desta cor como esta só para mostrar a você o que podemos fazer com ela. Certo, então temos essa sombra e sangue de fundo. Não vou falar sobre o sangue de fundo. Nós vamos falar sobre isso na próxima lição agora, nós vamos adicionar um pouco de sombra do dedo do pé este botão, e vocês podem ver que temos esta posição e este sangue. Então este é basicamente o raio do sangue. Até onde vai desfocar o sangue do raio. Esta sombra. Ok, então se eu definir para 20 você pode ver agora que a sombra está mais borrada nesta área. Se você olhar de perto, ok, por que a posição é estes dois machados? E por que a posição está fora da sua sombra? Ok, então se eu quiser dedo do pé, torná-lo um pouco mais abaixo da minha forma, eu vou adicionar mais de eu e você pode ver Não, é nesta área. - É. Eu não sei. Ok, então também, eu posso movê-lo horizontalmente na direção. Então, se eu adicionar 50 você pode ver agora ele está no lado direito. Então X é o momento da destruição. Você também pode colocar valores negativos aqui menos 10 e ele vai ser nesta área então você também pode usar menos nove. Se você quiser, ele vai se mover no topo. Então é assim que você vai definir a sua sombra? - Não. Se você quiser a cor fora da sua sombra, você pode clicar nesta área e você pode definir a cor fora da sua sombra. Talvez eu queira alguma sombra na gama de cervejas de cor azul. E essa é a opacidade da sua sombra. Eu queria o Toby com 20% de desconto, 30% transparente. Então você pode ver agora que a sombra é assim. Então é assim que você vai usar as sombras e coisas diferentes com sua forma, retângulo e ah, isso é tudo sobre esse retângulo. Você também pode alinhar o alinhamento deles. Vou falar sobre alinhamento em outra lição. E você também pode alcançá-lo. Mas normalmente não precisamos repetir assim. Mas se você quiser, você pode fazê-lo. Ok, então eu vou voltar. Vamos lá. Vê o teu controlo, Z E estas são todas as propriedades. Se você tem alguma pergunta para me fazer e tentar criar alguém assim, eu vou dar o pé. Ponha um texto sobre ele. Olá, querida. Certo, algo assim. E eu vou pressionar V e a exportá-lo no meio e mudar sua cor de preenchimento biqueira branca. Ok, então vamos mover um pouco para baixo. Ok, então 16 porcos estão no topo e 17 picaretas na parte inferior. Então, se você pode limpar algo assim, eu adoraria vê-lo e tentar o dedo do pé. Mostre-me os botões que você pode criar nele. E eu adoraria revisá-los e ver o que você pode inventar. Ok, Então isso é tudo sobre como você pode criar diferentes tipos de botões arredondados, arredondados , canto quadrado ou Bill salvo, mas ansf usando x d. Vamos passar para a próxima lição. 14. Fundo e desfoque para objeto: Vamos falar sobre objeto. Sangue e fundo borrão. Fato em Adobe X'd. Estes dois efeitos são muito legais. Um deles. Uso muito sangue de fundo. Ok, então eu vou mostrar exemplos fora, ambos fora deles como usá-los corretamente. Certo, então vamos começar a usar sangue de objeto ou isso de volta ao sangue. Precisamos de alguma imagem. Ok, então eu vou apenas arrastar e soltar a imagem neste quadro de arte, que é iPad, e eu vou alinhá-lo no meio e pressionar Shift. E embora eu vou torná-lo um pouco menor, obrigado. Então, algo assim. Certo, então temos essa imagem agora. Quero um sangue de fundo para isso. Preciso de qualquer forma. Talvez eu vou usar este retângulo e eu estou indo dedo do pé usar o todo rasgado fora desta tela pressione nós e não, este retângulo é selecionado. A imagem está para trás. Então não, vou usar meu passado. Assim que eu clicar neste sangue de Bagram, você pode ver que todo o fundo está desfocado. Vamos esconder esta fronteira e você pode mudar o valor do maldito desejo. Então talvez eu queira tanto sangue. Você quer que ele seja brilhante no lado vital? Ou você queria ser um negro no lado mais escuro. Você pode ver o efeito é diferente e também a opacidade. Eu não uso tanto assim. Vai mudar a opacidade deste efeito, por isso mantenha-o a 0%. Ok, então talvez algo assim e algo assim e eu vou estender para fora desta área. Ok? Ok. Então é assim que usamos sangue de fundo. Então, mesmo que você queira usá-lo no meio assim, talvez eu só queira que esta área fique desfocada. Posso usar isso da mesma forma. OK, então esta forma é basicamente a nossa principal área de sangue de fundo. Então essa forma vai definir qual área vai ser borrada. Então temos isto. Se fores a esta lista, temos este plano de objectos que vai ser sangue do dedo do pé. Este Onley este objeto. Então, se eu clicar no objeto que você pode ver agora nosso retângulo é basicamente sangue nem o fundo. Então, se eu mudar seu dedo do pé preto ou algo assim, ok? Então você pode ver agora esta forma está realmente se misturando no fundo nem no fundo. Ok, então esta é a diferença entre o borrão de objeto e um sangue de fundo que usei no meu aplicativo móvel. Você vai projetar no final deste curso, então fique atento, e este é um efeito muito legal. Você pode usar este borrão de fundo em muitos locais e ele está indo dedo do pé. Torne o texto e os botões visíveis se o plano de fundo estiver muito ocupado. Então isso é sobre a garota Bagram e sangue de objeto. Espero que tenham gostado desta lição. Vamos passar para a próxima lição. 15. Ferramenta Ellipse: hoje, eu vou falar sobre os lábios fezes e ah, seu objetivo principal. Por que o usamos. E é muito rápido, você sabe, você sabe, cortar a maioria das minhas imagens de avatar. OK, então nós vamos clicar e arrastar assim, e eu estou segurando Shift para fazê-lo em proporção. E se eu quisesse crescer a partir do centro, vou pressionar a tecla de opção artística junto com a tecla Shift. Ok, então eu estou segurando a tecla Shift, Art e Option agora mesmo para fazer isso assim. Ok, agora eu vou colocá-lo no meio assim. Eu vou esconder sua borda, e eu vou mudar sua cor de preenchimento para que você possa visualizá-la facilmente. Agora vou arrastar e soltar qualquer imagem para criar um avatar. Rápido. OK, agora você pode arrastar e soltar qualquer imagem nesta elipse que você pode ver ou ouvir para criar um avatar rapidamente. Então o que ele basicamente faz é que ele é cortado dentro deste círculo. Ok, o problema é que você não pode mudar ou mover esta imagem. Ok, então o que você pode fazer é apenas você pode aumentar o tamanho deste círculo. Está indo para o dedo do pé. Aumente a imagem. E também você pode mudar a forma que você pode ver aqui. Ok, agora é uma forma de ovo, e a imagem é que você pode ver ajustando com esta nave. Então, principalmente usamos a ferramenta Ellipse para este propósito. As outras opções que temos para um banquinho labial são quase as mesmas. Temos fronteira, preenchimento, preenchimento, opacidade, sombra e sangue de fundo. Não há nada muito sobre isso. Então, na maioria das vezes usamos isso para este propósito. Apenas arrastamos e soltamos qualquer imagem para criar um radar. Nossos ícones gostam disso. Então isso é tudo sobre o passeio deslizante. Se tiver alguma pergunta para me fazer, vamos para a próxima lição. 16. Noções básicas da ferramenta de caneta em XD: nesta lição, vamos criar esses três ícones. Um é este queijo. Um é este ícone de mapa, e outro é este ícone de bate-papo usando o Adobe Excuse. Então primeiro vamos aprender a usar gastar dois procurando. Eu não recomendo que você vá em frente e crie todos os tipos diferentes fora de ícones usando o Adobe Extra porque ele não é destinado para criar AARP. Ícones são ícones. Você pode simplesmente usar ícones SPG de todas as linhas. Existem muitos online gratuitos em bibliotecas. Off ícones SVZ são tão primeiro vamos ver como usar Bento. Então eu vou criar outra placa de arte expiração do iPhone X e assumir em um pouco. E primeiro estamos indo para o pé. Selecione esta ferramenta de caneta, e é assim que você pode criar formas simples. Clique, clique, clique, clique, clique ou clique em OK e clique novamente no primeiro ponto e ele vai fechar o navio. Você vai pressionar V, e agora você pode mover esta forma por aqui. Então é assim que você cria navios simples agora contra, como esta ferramenta caneta, clique e clique e arraste para obter alguns cantos arredondados e, em seguida, eu vou clicar, estavam aqui e, em seguida, clique de volta. Então aqui eu criei um arco aqui. Então, se você clicar duas vezes sobre esta forma, você pode ver que você pode clicar em qualquer off thes e há o guidão. Você pode ajustá-los depois que quiser, como quiser. Então eles estão se movendo enquanto eu mexo isso. Ok, então eu selecionei este. Então, se eu só quero mover este e isso não deve afetar este pressione você investir sua opção ou Archy. Ok, Então no seu teclado, se você pressionar sua tecla são e, em seguida, clicar e mover isso, ele vai se mover. Só este. Ok, então essas são as duas alças, então agora isso vai se mover independentemente. Então, se eu alinhar com isso, você pode ver que agora é uma linha reta. Então, se eu selecionei, esta é uma linha reta. Esta é uma linha curva. Então é assim que você controla e edita suas partes e, ah, diferentes pontos de ancoragem. Então, se eu clicar duas vezes nele, há três pontos de ancoragem aqui. Certo, então um é esse. Também posso usar algo assim. Então eu estou pressionando o dedo do pé, alinhe-o em algum ângulo perfeito. Então é agora, eu acho que 90 graus ou queria se formar. Então foi assim que criei essa colisão. Muito agradável. Bump suave. Ok, então é assim que usamos nosso pento. 17. Ferramenta para criem ícones: Certo, então eu vou deletar essa forma. E agora eu vou começar com o retângulo Tauqir, este primeiro ícone. Então vamos criar um retângulo. Certo, então, aperte V e agora temos o ângulo da seita. Clique duas vezes sobre ele. E nós temos esses quatro pontos de ancoragem. Agora vamos selecionar Ah, mental agora. Se você nem mesmo selecionar um lápis, você pode ver o local, Khobar. Nessas linhas onde você pode colocar alguns pontos de ancoragem, ele se tornou dedo do pé mental, Então basta clicar uma vez, mas aqui, uma vez aqui e um em algum lugar. Adicionamos mais três pontos de ancoragem a esta nave. Agora o que eu vou fazer é pressionar V, e eu vou movê-lo para baixo assim. Ok, então agora eu tenho esta nave básica, então se eu clicar duas vezes nela novamente, eu posso selecionar este ponto de ancoragem e eu posso movê-lo. Se você quer algo errado aqui, clique duas vezes nele. E você vai obter este arredondado em torno do ninho aqui e pontos de ancoragem mais guidão para controlar a redondeza fora de sua forma novamente para que você possa ver agora eu arredondei esta área assim. Então esta é uma maneira de criar várias formas diferentes a partir de navios básicos. Ok, agora vamos criar este queijo, OK? A maioria dos ratos vão adorar isto se estiverem a vigiar o meu pai, Dorian. Ok, então nós estamos indo, criar um clique uma vez, clique duas vezes, e eu tenho guidão aqui. Esta é outra maneira, e eu vou apenas clicar aqui, e então o que eu vou fazer é ir apenas para eles agora mesmo assim. E eu vou pressionar minha tecla de opção de arte para mover isso como, Ok, então, não, está endireitado. E vamos movê-lo para fazer um perfeito Ela é assim. Certo, então temos nossa nave. Vamos fazer a borda dois pixels. E durante o dedo do pé cor de preenchimento, este amarelo tudo pode ser um pouco mais leve, amarelo como este. Certo, então temos mais forma. Vamos adicionar mais algumas formas aqui com este banquinho de elipse. Então eu estou pressionando shift toe limpa, shift e drag para criar esses círculos como esse. Ok, então nós temos nossas formas agora podemos mudar a cor da garrafa para esta, que é um amarelo mais escuro e ah, nós temos um destino muito grande. Nossa, não é bom para chamar um passeio se você gosta de mim. Eu tenho colesterol alto, então não é bom para mim, mas ainda assim. Certo, então aqui temos nosso ícone de queijo. Então é assim que você cria formas personalizadas, Icon. Agora vou criar este. Isto é basicamente prefeito por milho. É muito fácil. Basta selecionar este banco de elipse criado, Ah, lábios aqui. E o que eu vou fazer é eu vou pressionar V DoubleClick e eu só quero mudar este guiador. Então eu apenas selecionei este, este ponto de ancoragem, e eu vou pressionar as teclas shift e seta para movê-lo para baixo assim. Ok, agora nossa forma básica está completa. O que eu vou fazer é clicar duas vezes aqui para obter o nosso canto afiado. Ok, então este é muito bom truque DoubleClick dedo obter cantos arredondados de forma diferente para obter cantos afiados . Ok, então eu tenho um canto afiado aqui. Agora eu vou criar outra pequena elipse forma dentro dele assim e basta selecionar a forma externa e, ah, basta remover a borda e usar a cor de preenchimento para algo como, Sim, eu vou Use este golpe. Vamos usar este azul. Ok, então para este, eu vou remover a borda, e eu vou adicionar alguma sombra aqui, que vai ser zero zero e seis. Ok, nenhum ofuscado é que ia saquear esta forma e apenas alinhá-la aqui assim . Selecione estes dois, e eu vou alinhá-lo no meio assim. Ok, então você pode ver aqui nosso ícone do mapa também foi construído. Você pode expandi-lo se quiser. Você pode torná-lo um pouco vital para torná-lo mais profissional. Está bem. Está bem. Então, é assim que você pode criar ícones diferentes usando mental. Eu não recomendo que você vá em frente e crie algo como este ou algo como este que você pode usar ícones SVG já construídos, criados profissionalmente. SPD significa gráficos vetoriais escaláveis e nas próximas lições, algumas lições ou nas últimas lições onde vamos criar nosso aplicativo. Vou mostrar-lhe como usar ícones SPG. Então, até lá, eu vou te ver em breve. Em outra lição, vamos passar para a próxima lista. 18. Ferramenta de linha: Agora, vamos falar sobre a ferramenta de linha. Se clicar aqui ou pressionar l é uma ferramenta de linha e você pode criar uma linha ou separador com ele. Ok, então esta é a nossa linha. Esta é a fronteira fora desta linha. Vamos criar uma borda de cinco pixels como esta. Ok? Então também, você pode ver que essas opções estão escondidas aqui. Eu não tenho certeza se eles estão habilitados ou não em primeiro lugar. Vamos criar na linha. Certo, então isso fora da fronteira não é opção para este. É só uma linha. E, ah, você pode mudar a cor se quiser. Oh, e também a opacidade, sombra e volta no sangue. Estas são as quatro opções que temos aqui. O único uso fora da ferramenta, que eu vejo é que ele vai ser usado para o texto do link. Então, se eu tiver um link aqui, eu posso colocar uma linha e assim. Ok, então esta é a única notícia que eu posso pensar fora. E você eu desenho para esta linha de olhar. Então isso é tudo sobre a ferramenta de linha. Se você tem alguma pergunta, você me fez. Vamos passar para a próxima lição onde vamos ver a ferramenta de texto 19. Ferramenta de texto no Adobe XD: Não. Vamos falar sobre essa ferramenta de texto, sabão, luxúria ou texto. E eu vou arrastar até aqui assim para criar um parágrafo. Tudo o que você pode simplesmente clicar em qualquer lugar para limpar. Apenas na linha do Dexter aqui. Então eu vou criar um parágrafo aqui. Ok, agora, eu tenho um texto no meu parágrafo. Eu posso apenas clicar em qualquer outro lugar para criar um parágrafo e seios V e eu posso estendido são contratados usando as alças do que você pode ver aqui. Ok, então eu vou usar isso assim e apenas movê-lo para cá assim. Ok? Agora, do lado direito, você pode ver que temos texto. Este é o telefone. Pode mudar o telefone, o que quiser, Toe. E aqui temos o forte. Tínhamos todos os estilos diferentes. E este Ford, este é o tamanho que eu quero 24. Posso selecionar 24. Agora está se escondendo. É torná-lo cheio. E, uh, que alguns para ver o tamanho real do corrector. Certo, então temos esse alinhamento. Este é o centro. Isto é tentado, alinhado, deixou uma linha. E esta é a diferença entre o texto da nossa ideia ou você pode ver parágrafo e um texto de ponto de linha . Certo, então aqui temos esse texto. É melhor para o alinhamento. Você pode ver agora que é um quadrado fixo. Ok, então se eu tentar mudá-lo. Não se trata basicamente de um parágrafo. Este é um parágrafo. Então este é apenas um novo recurso. Eles adicionaram nele. Então você pode sublinhar se quiser. E então nós temos esse espaçamento de linha que você pode definir o dedo do pé outra coisa se você quiser. Oh, como se eu tivesse definido para 32. E isso é cacto mijando quão grande o espaço deve ser dentro do diretor. Então, se eu, hum ele tinha 10 ou 25 anos, você pode ver agora que o espaço entre as letras é muito. Estes são os principais controles do que temos de novo. Os mesmos controles semelhantes, como todos os outros retângulos. Laura, as ferramentas. Temos uma passagem. Nós falhamos. Temos fronteiras, sombra e fundo, fundo sangue, sangue. Não vamos usar em nenhum lugar nesta sombra. Talvez vamos usar quando há um fundo escuro ou algo parecido com essa fronteira. Acho que não vamos usar o fundo. Então fique com o Phil e use a cor que quiser. Como este. E isso é tudo sobre isso. Ah, vídeo de texto. Agora há apenas um tubarão vindo para esta área, que é que seria ótimo se eu pudesse ver diferentes quatro estilos ou cabelos. E agora eu posso ver o nome do telefone da parte da força Nordea como ele se parece ou como se sente. Ok, então eu realmente tenho que mudar para isso para ver esse estilo de força. Então eu acho que talvez eles possam basicamente ter feito isso apenas para um grande processamento mais e torná-lo rápido. Ok, então talvez nas versões posteriores, eles podem adicionar algum material de pré-visualização aqui para força diferente. Então isso é tudo sobre a ferramenta de texto em adobe X t. Espero que tenham gostado desta lição. Vamos passar para a próxima lição. 20. Ferramenta de Polygon — UPDATE: De jeito nenhum vamos falar sobre uma ferramenta muito nova que foi introduzida no Adobe EC. Steve coça. Eles estão manchando na ferramenta e você pode mais por que, muito liso ou apenas clique aqui. E agora vamos desenhar um polígono. Então aqui estou eu secando. Se você pode segurar um turno de imprensa, ele vai ser em proporções e apenas deixá-lo assim. Agora você pode ver à direita aqui na facada de aparência, podemos controlar sua opacidade. Podemos mudar seu tamanho Conch, por exemplo, nos sites que queremos, como cinco lados e podemos mudá-lo para lutar. Também podemos mudar a cor preenchida. Por exemplo, se eu quiser tê-lo, talvez nesta cor e eu quero esconder a borda, eu posso esconder a borda, e eu também posso ter um raio de canto fora como 50 20 ou coisas assim, algo como isto. E eu também posso controlar o raio do canto a partir disso para que você possa ver que este é um pequeno círculo dentro dele. Se eu quiser mudar o raio do canto, posso usá-lo. Certo, então se eu quiser que o dedo do pé tenha oito cantos para admitir. Eu posso ter oito cantos, então esta é uma ferramenta muito útil. Se você quiser criar algumas setas ou coisas assim. Eu acho que esta é uma das formas básicas além do retângulo, elipse. E isso é polígono ou triângulo. Então precisávamos de algo assim. Tanques de espada em obedecer. Você adicionou algo assim, Senador B X d. Espero que você experimente e crie algumas formas usando esta ferramenta polígono. É quase semelhante a outro retângulo e elipse em. E isso é tudo sobre esta nova ferramenta polígono. Vamos passar para a próxima lição. 21. Cores e paletas: hoje, vou falar sobre cores e como podemos criar quem criar esquema de cores no Adobe X'd. Certo, então vamos começar. Começou com este quadro de arte, que é o iPhone 678 e o que vamos fazer é criar um canto muito bonito, redondo e aterrado. Bretanha. Vou pressionar a TV e movê-la e vamos criar uns seis porcos da injustiça. Ok, então está ótimo. Ok, então eu vou pisar, remover a borda. E quando eu for para esta cor de preenchimento, se você clicar aqui, você pode ver aqui que temos nossas cores. Certo, então aqui temos isso. Ah, você barra onde podemos mudar a cor que você quer. Quem é basicamente a cor média da cor. Ok, então talvez se eu gostar de ir nessa, você e eu queremos que seja aqui, ok? Então, quando eu subir em destruição e a tonalidade ou saturação fora, esta cor está realmente aumentando, Ok, Então, quando eu me mudei para descobrir área, está ficando mais escuro nesta área. Vai se tornar mais leve. Ok, adicione convite a ele. Então eu vou ficar quase no meio aqui. Ok? Agora, esta é a opacidade. Então, se você quiser ser transparente, você pode mover isso, eu acho. Ah, eu deveria mantê-lo aqui. Ok, então é assim que sua caixa de cor sólida, ok. Não. Aqui estão algumas opções que vamos discutir uma. Este é o valor decimal exato? Então é disso que seus web designers vão precisar. Dedo da cor dos bretões. Ok, então isso é para desenvolvedores. Então, se você quiser, você pode converter este rgb mais, que é vermelho, azul, verde e Alfa RGB. Ok. E, ah, normalmente nós designers, Eu normalmente uso essa tonalidade, saturação e brilho, que é mais fácil de controlar e mais fácil dedo do pé. Sabe, eu só suas cores criam esquemas de cores bonitos. Usando isso, é SB. Ok, então aqui temos você do que saturação. Quanta cor você quer colocar em saturação dessa cor. E este é o brilho. Ok, então quão brilhante deve ser o Jocular? Então, se eu reduzi-lo a 90% você pode ver agora que esta cor está olhando criado é uma cor azul um pouco mais escura . Certo, vamos de novo para este ano. Ok? Então não, você pode adicionar sua cor dedo do pé seu estiramento de cor. Então, basta pressionar este ícone de mais e você pode ver aqui temos $1 adicionado aqui. Certo, agora, se eu quiser adicionar uma circular, a melhor maneira é mudar isso. Ok, então eu quero que isso vai ser criado. E talvez apenas dois muito qualquer coisa. Eu estou indo para o pé. Ah, reduza o brilho do dedo do pé 80%. Vamos ver como essa cor aparece. Então eu vou adicionar este para então nós podemos ir para algo como este este preto escuro. Então você pode ver aqui. Eu criei uma paleta de cores muito agradável e você pode ver a maioria das cores que eu gerei aqui. Eles estão mesmo combinando. Ótimo. Ok, então estas são todas cores médicas, este Seong azul e esta cor azul. Agora, isto é tudo sobre este painel de cores. Como você pode ser um esquema de cores diferente por aqui, se movendo neste espaço 22. Gradientes de cores no XD: Agora vamos para este radiante linear. Tão branda. Brilhante é que temos uma e duas cores e este é o ângulo aqui de cima para baixo. Então 90 graus é o ângulo do seu ingrediente. Ok, então nós tivemos mistura juntos para que você possa ver Não, se eu mover o ângulo de como o ingrediente está mudando. Então, se eu mover assim, tudo bem. E, ah, vamos mudar as cores para outra coisa. Então você pode ver agora eu criei um muito agradável, botão int ganancioso aqui. E se eu quiser mudar o ângulo, eu posso mudar o ângulo assim, talvez movê-lo assim para que você possa ver agora como ele está ótimo. Agora, de novo, vou clicar nisto e dar o dedo do pé, Phil. E você pode ver aqui nós temos o nosso radiante Vamos tentar adicionar disco. Radiante. Por isso, não está a somar aqui. Então, isto é uma coisa. Eu acho que eles deveriam ter alguma coisa. Se eu apertar este botão, deve adicionar o meu ganancioso. E por aqui. Ok, então não está adicionando aqui, mas podemos adicioná-lo a algo em outro lugar. Certo? Clique e clique neste assassino de anúncios. Certo, assim que eu adicionar essa cor, vai estar nos meus assassinos de bens. Você pode ver por aqui. Este é o meu guia de estilo. Basicamente. Então, vou cobrir tudo mais tarde. Dois assassinos no Adobe Extra. Certo, então aqui temos essa cor. Então temos quatro cores. Neste momento, estes não são adicionados a isto. Então nós podemos fazer é apenas criar alguns retângulos que eu vou criar segunda-feira emaranhado. E eu vou duplicá-lo pressionando a tecla arte ou opção do que apenas arrastá-lo assim . E como essa garota agora, vou usar as mesmas cores que quero aqui. Apenas remova a borda e eu vou usar esta copa do que descolorir. Ok, então descobri agora aqui está o meu esquema de cores. Apenas criei isso instantaneamente, então não se preocupe muito com isso. Isso é o que é este esquema de cores? Ok, então eu estou indo dedo do pé como, selecionar todas essas cores e eu estou indo dedo do dedo do pé direito clique e adicionar cor. Está bem. Então você pode ver Não, eu tenho todas as minhas cores mudar para os meus bens. Está bem. Você também pode advi cor ou variações de branco ou pastar. Se você quiser adicioná-lo ao seu esquema de cores. Ok, então é assim que você pode adicionar INTs gananciosos e todo o colesterol, seu esquema de cores ou o guia de estilo. Está bem. Guia de estilo é basicamente o dedo guia para seus desenvolvedores e seus designers que as cores são usadas para que finalidade e como podemos construir esse sistema de design usando essas cores . Ok, então agora, chegando ao último ponto, que é um ingrediente Zadie, eles acabaram de adicionar este ingrediente realmente, que é um int ganancioso por dentro. Está se movendo em círculo, então vamos torná-lo um pouco maior assim. Certo, então vamos fazer disso um plano de fundo. Então eu vou criar um saco como este. É mais visível. Este tipo fora radiante é mais visível quando você tem um fundo. Está bem. Então você pode ver agora ele está olhando grade dentro de uma rodada saco. Vamos mudar nossas cores para este. Ok? Um é um pouco mais escuro. Um no 2º 1 é um pouco mais leve. Vamos remover estes. Certo, então vamos experimentar com isso. Vamos mudar esta cor mais escura com este azul. E, tudo bem, então está ótimo. Vamos movê-lo, adicionar mais alguns pontos a ele. Então eu só cliquei aqui e adicionei mais um ponto a ele. Ok, então aqui vou eu mudar a cor para preto. Ou talvez algo mais afiado do que isso não pode. Vou dizer-lhe com sinceridade estes pontos de ingredientes radiais. Ok, Então o único ponto que você pode excluir é o ponto que você criou até agora um ingrediente. Deve haver duas cores. Ok, então eles não são Ah, eu não sou capaz você pode dizer excluir esses dois pontos e isso é certo. A maioria ou 0% e 100%. E o ponto que eu criei no meio eu completei apenas pressionando excluir no meu teclado. Tudo o que posso movê-lo para longe assim e arrastá-lo para longe, e ele vai ser apagado. Ok, então essas duas cores, elas são, você sabe, necessárias para este int ganancioso, e você pode controlar o ingrediente a partir daqui. Ok, então se você quiser, é algo assim. Você pode ver agora isso está olhando um grande fundo. Ok, então vamos colocar uma mensagem aqui para que você possa ver o que eu fiz. Acabei de adicionar uma linha com a espessura de cinco. E não mandei um convite por SMS. Olá, Doutor. E isso está ótimo. Ok, então você pode ser esse tipo de fundos para suas telas de logon ou telas de inscrição. Está bem. Com algum ingrediente nele. Então isso é tudo sobre as cores e ingredientes de rádio em cores sólidas e ingredientes lineares . E estes três cores fora de Moore Hexi decimal RGB e ser normalmente vamos estar usando este ou Hexi decimal para Web principalmente, mas eu acho que este é perfeito para criar os esquemas de cores, ok? 23. Usando coolors.io como criar esquemas de cores: uma ferramenta que eu recomendo para geração de esquema de cores é este um coolers ponto ru? Acho que você pode pesquisar esse nome no Google. Eu vou compartilhar o u R l Então vá para isso. Gerar? Sim. Então eu vou para este gerado e ele vai começar com algumas cores aleatórias. Ok, então o que eu sugiro é que você primeiro tente usar uma cor que você já tem. Ok, então eu estou indo dedo do pé com base em uma cor azul do meu esquema de cores ou duas cores de lá para tirar o resto das cores. Certo, então vamos voltar ao X'd. Agora. O que eu vou fazer é copiar essa cor azul e isso Ah, veja, veja, em um dedo do pé, meu esquema de cores. Ok, então eu estou indo dedo do pé, copiar este valor de saída de valor valor decimal, e eu vou voltar para aqui. Ok, então eu corporativo uma cor, e eu vou trancá-la aqui. Ok, então aperte esta fechadura e ele vai mostrar a você fechadura fechada. Ok, então eu vou copiar a segunda garota aqui, e eu também vou trancar esta cor. Está bem? Agora, eu tenho que registrar cores. Agora eu vou pressionar barra de espaço para obter mais algumas cores. Colora a América para estes dois assassinos. Certo, então temos essa cor roxa. Isto está a parecer bom. Além disso, esta cor azul eu sou eu gosto desta cor azul. E também podemos usar algo assim que é um pouco laranja. Agora, no meu esquema de cores original, eu uso algo mais próximo do amarelo e ah, este roxo é um pouco roxo escuro para que você possa criar qualquer esquema de cores. Não, vou pressionar a barra de espaço de novo e gosto desta cor. Ok, então eu vou pressionar a barra de espaço novamente para que você possa bloquear qualquer cor que você quiser. Ok, então eu tranquei esses cabrões. Então este só vai mudar. Então eu não gosto dessa cor muito amarela. Talvez este seja bom, Onda. Talvez eu tente mais um pouco. Eu realmente gosto desta cor amarelada, embora seja um pouco maçante, mas eu acho que vai ir bem com esses fundos. Ok, assim que eu tiver esse esquema de cores gerado, eu posso tirar uma imagem ou foto disso ou Ah, eu posso exportá-la em um arquivo PDF ou PNG ou SVG cinco. Então vamos usar o arquivo SVG. Por isso, é claro criado este arquivo SVG. Agora eu vou importar este arquivo svg para o meu, hum X'd. Ok, então menos. Vamos movê-lo para cá. Não, você pode ver aqui que temos este esquema de cores, arquivo SVG, e, uh, uh, eu estou indo para o pé. Torná-lo um pouco menor assim. Vamos diluir este fundo e tudo o resto. Agora você pode ver que você tem esse esquema de cores e é inevitável. Você pode ver aqui nós temos 45 caixas e você pode mudar seu esquema de cores. Então é assim que aconselho você a aceitou. Esquemas de cores. Você deve ter pelo menos uma ou duas cores para começar. Você pode pegar essas cores no ícone do aplicativo ou logotipo da empresa e começar a partir daí. Então, isso é tudo sobre cores e como criar esquemas de cores. Instantaneamente com este banquinho e essas poucas dicas. Espero que gostem desta lição. Vamos passar para o próximo 24. Máscaras no XD: nesta lição, nós vamos aprender sobre mascaramento e como podemos fazê-lo em um não b x d. Há duas maneiras, e uma é ah, que eu realmente amo é como podemos controlar nossas mesquitas e a imagem dentro dela . Ok, então agora vamos criar este, e você pode ver se eu clicar duas vezes nele, eu posso mover a imagem assim. Então esta é uma mesquita controlável. Agora, se eu criar um simples elipse como este, ok, então eu vou mostrar a vocês dois. Mestre, este é o mais simples, e não é irritável. Então eu vou apenas arrastar e soltar esta linda imagem de menina neste aqui. Ok, então temos este clipe dentro desta elipse, e você pode ver que não podemos editá-lo. Então, se eu clicar duas vezes nele, ele vai editar a forma, mas eu não posso mover a imagem ao redor. Ok, então esta é a sua limitação. Então esta é uma maneira de criar mesquitas instantaneamente. Agora eu vou liderá-lo, e nós vamos criar esta mesquita. Está bem. Então, massa personalizada. Eu também vou deletar este. Então, primeiro, tudo o que vamos fazer é você pode usar qualquer retângulo na forma que quiser, ou você pode construir sua forma com um mental. Então eu estou indo dedo do pé aqui a forma com minha ferramenta de caneta, clique, arraste, clique, arraste. E eu vou criar algo assim. Apenas um navio personalizado. Então eu tenho esta forma personalizada sobrecarga, e eu tenho este retângulo aqui. Certo, isso é redondo deste retângulo. Píxeis. Ok, então nós temos duas formas aqui agora. Um é este. Ok, então este é outro. Ok, então nós temos essa parte, que é Ah, forma personalizada. Vamos dar um nome de forma personalizada. Então eu desenvolvi, tipo, essa área, e eu uso essa coisa e nós vamos criar Chamar este retângulo. Ok, então meu sexo ortográfico, então não se preocupe com isso. Ok, então agora o que nós vamos fazer é que você está indo para o pé. Arrastar e soltar qualquer imagem. Então eu vou arrastar e soltar uma imagem aqui assim. Ok, agora a imagem é muito grande, então você pode apenas encurtá-la com turno e arte Eu vou usá-la e vai torná-la curta . Basta diminuir o zoom, controle ou comando menos, e nós vamos usar este. Ok, então assim. Ok, então eu vou colocá-lo aqui para que você possa ver a forma. Está bem. Agora, o truque é que você vai usar Eu vou usar este retângulo. Então eu vou mover este retângulo acima desta imagem no meu painel de camadas. Ok, então agora eu estou nesta camada, e esta imagem está abaixo, e o ângulo da seita está no topo. Não, eu vou mudar o dedo do pé e clicar no porto fora deles para selecionar o barco de todos eles. Você pode selecionar ambos a partir daqui. Certo? Clique. E você pode ver que há uma mesquita opção com turno de navio. Controle em ou shift comando M é uma tecla de atalho, e você pode simplesmente pressionar isso e agora ele escorregou dentro desta caixa. Agora, o legal sobre isso é que se eu me desenvolver assim, eu posso mover a imagem assim. Então isso é muito legal. Então eu tenho mais controle sobre minha mesquita, e eu posso mudar a localização fora da imagem. Talvez eu queira me concentrar aqui. Posso usar algo assim. Ok, agora aqui temos a forma personalizada. E da mesma forma, vamos apenas torná-lo maior e vamos girá-lo para 30 como este. Ok, agora eu vou acreditar neste, e eu vou usar esta nave em vez disso. E eu vou importar esse arquivo, basta arrastar e soltar, e é muito grande. Então eu estou indo dedo do pé, torná-lo um pouco menor. Ok, então essa é a casa. Fora. Você pode ver que a imagem é muito grande para a nossa área de recorte. Agora eles são quase bons. OK, então eu vou mover esta forma personalizada acima desta imagem e ir para selecionar ambos fora deles pressionando Shift no meu teclado e clique direito e pode mesquita com navio. Então nós temos uma bela mesquita ou aqui e isso está apenas se movendo e ah, vá Algo assim faz com que seja mais interessante. E agora você pode ver que eu também posso mudar essa pergunta idiota nossas cabeças. Se eu fizer algo assim, você pode ver que eu posso mudar a área da mesquita, então clique duas vezes. E você também pode mudar esta mesquita na área e, em seguida, também esta imagem para que você possa ver a caixa delimitadora desta pergunta Índia é diferente e esta imagem é diferente. Para selecionar esta imagem que você pode ver Não, este é de selecionado para que eu possa mover isso ao redor assim e eu posso, em seguida, novamente clique em qualquer outro dedo do pé, ver minha mesquita. Ok, então é assim que você pode criar mesquitas em mesquitas personalizadas em Adobe X'd. Eles são realmente úteis em seu design. Espero que tenham gostado desta lição e vamos passar para a próxima. 25. Estilos de personagens em XD: Agora eu vou falar sobre azulejos de prática e como você pode reutilizar seus têxteis em todo o seu documento Um jogo. Agora, neste momento, eu estou nesta profundidade de ativos, que é por aqui. Ok, então você está indo toe pressione este, e você está indo toe Venha para este ativos então ou tudo em seus ativos passo se suas cores, corretor, estilos ou símbolos, eles são global. Então, se você mudar algo aqui, vai se refletir em todos os seus quadros de arte. Ok, então deixe-me ilustrar o exemplo fora do estilo trator e como podemos adicionar alguns. Este é o meu rumo. Ok, então eu criei um título Lex Changer, Sculler dedo do pé algo mais parecido com este aqui. E eu vou criá-lo em um parágrafo. Vamos movê-lo em duas linhas como esta. Ok, então este é o meu título, e então eu vou criar o dedo do pé. Ah, parágrafo aqui. Ele usava regular. Ok, então este é o meu parágrafo, ok? E também, vou mudar sua cor para outra coisa. Talvez eu queira um pouco. Ah, cor cinza claro preto aqui. Como este. Exceto ah, breu. Ok, então só para diferenciar entre o meu título no meu parágrafo. Ok, então esta é a minha pantagraph. Vamos adicionar outro link. Ok, então os links de casa serão clique aqui para seguir em frente. Então esta é a minha ligação. Eu vou usar cor, que é este para este link e eu vou usar um sublinhado. Ok, então esta é a minha ligação. Este é o meu parágrafo. Este é o meu rumo agora. O que eu vou fazer é eu quero que todos eles estejam no meu estilo de personagem. OK, então eu vou selecionar todos eles e ir dedo do pé Clique direito? Clique e adicione estilo de caractere. Ok, então agora você pode ver que temos três estilos. Está me mostrando o quarto nome. Já usei isto. Veja Goy, você I e também diferentes tamanhos e cores 48,20 pontos. É um pouco aborrecido, Grey. É uma cor escura e enegrecida e, em seguida, temos esta diversão para os nossos links dext. Ok, agora deixe-me mostrar qual é a energia para desligar isso? Ok, então eu vou pressionar nossa canela e eu vou duplicar isso para outro quadro de arte. Então nós não temos livros de arte Ok, então eu vou mudá-lo. Faça alguma coisa. Aqueles Ok. Ok. Agora o que vamos fazer é mudar a cor desses títulos simultaneamente . Ok? Agora podemos fazer isso daqui. Rachado de lado, certo? Como nisso. E eu estou indo para o pé. Use outra coisa. Outra coisa como esta. E vou usar outra cor. Talvez eu queira que essa cor seja descoberta. Ok. Agora você pode ver como eu mudei instantaneamente todos os estilos de diretor, que são basicamente meus quatro estilos. E eles são globais. Então, se eu mudá-lo em uma área, ele vai mudar em todos os outros lugares. Certo, isso é muito legal. Ok? Então, se eu quiser mudar meus parágrafos, sim. Então, onde está o meu parágrafo? Acho que este é o meu parágrafo. Vou editar a cor dele. Eu não sei. Eu queria ser mais licenciado. Posso mudar a cor daqui. Agora você pode ver que eu tenho mudando grau sculler dedo do pé e eu também posso mudar outro tapume. Então, se eu quiser mudar, o Ford é o espaçamento. Tudo vai ser mudado. Então, se eu quiser uma televisão, vá até aqui e eu quero que o espaçamento seja uma linha. Oi, Toby. 28. Posso mudar isso dela. Ok, então isso é muito útil. Você pode mudar qualquer coisa instantaneamente em todos os seus diferentes quadros de arte. Ok? Então, se você tem, tipo, 20 quadros de arte são telas e você quer mudar de direção, você pode fazê-lo instantaneamente. Ok? Vai salvar-te. Dunn está fora do tempo. Então é assim que você usa esses estilos correctores? Você pode adicioná-los e você pode excluí-los daqui. Você também pode excluir um estilo de texto, estilo diretor. E ah, é assim que você usa este desligamento estilos de diretor e será X t. Espero que você tenha gostado desta lição. Vamos passar para a próxima lição. 26. Como usar os guias no Adobe XD: ATUALIZAÇÃO no Adobe XD-: Agora. Recentemente, em maio de 2019, o Adobe X T introduziu um novo recurso, que é guias essenciais para qualquer ferramenta de design. E eu neste vídeo, eu vou mostrar a vocês como usá-los e como copiá-los dedo do pé e outro quadro de arte. Então agora você pode ver que eu tenho no nosso quadro. E se você for para o topo aqui, você pode ver que ela foi alterada para outra coisa. Então este espaço aqui, você vai pegar este e arrastá-lo e deixá-lo assim. OK, então você pode ver que temos a navegação top stop toe onde temos configurações de conta e botão Voltar . Então eu vou ter um guia aqui. Então eu vou voltar para o lado esquerdo e eu vou pegar outro e deixá-lo aqui, em seguida, um abaixo de um, e eu vou deixá-lo aqui assim. Vamos usar outro, e eu vou dar o pé. Fique do lado direito aqui. Ok, então nós temos margem direita e esquerda, parada, margem e nós também podemos definir nossa margem inferior aqui, e nós novamente precisamos arrastá-lo de cima e deixá-lo aqui logo abaixo do próximo botão. Ok, então nós fizemos sobre estes guias. Se quiser escondê-los, localize-os. O que vou fazer é criar um novo quadro de arte. Vamos criar outro quadro de arte X s e nós estamos indo para o pé. Copie todos esses caras clicando com o botão direito do mouse. E vamos ver onde temos guias, guias cópia. E aqui estamos indo controle de pressão do dedo do pé ou comando V, ou você pode basear nossos guias de cabelo ou cartões de lugar. Ok, então isso é tudo. Você também pode ocultar todos os caras por controle. E este semi cólon, este é, eu acho, eu acho, o mesmo atalho de teclado em todos os abdominais extras de adobe. Então, se eu quiser escondê-los rapidamente, eu posso ir para este, e eu posso controlar ou comandar semi dois-pontos. Certo, então aqui temos. Você pode ver que eles estão escondidos em todos os quadros de arte. Então este é outro novo recurso do Toby X. X. Espero que você goste, ame-o e experimente. Porque era muito necessário. Às vezes temos que ter algumas diretrizes para colocar nossos objetos rapidamente. Então, agora, se eu tenho essas diretrizes, eu sei que eu vou colocar o meu primário, mas um sem cabelo e assim. OK, então ele vai combinar perfeitamente com todas as outras telas. Então, isso é tudo sobre guias e como você pode copiá-los e como você pode excluí-los e como você pode usá-los. Espero que tenha gostado desta lição. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 27. Repetição: Até agora falamos sobre símbolos, estilos de personagens, cores e tudo mais. Agora vamos falar sobre o recurso mais poderoso fora de um B x d, que é cardo. Repita bruto. Ok, então o que ele faz é que nós temos este bloco de conteúdo como este aqui. Esta publicação de bloco, por exemplo. E quero criar uma repetição. Criar fora dele. Então eu vou chutar isso e apenas medicamente arrastar para o fundo assim e você pode criar várias instâncias cópias fora disso sexualmente nesta direção e também na destruição. Se quiser, pode usar algo assim. Certo, então é com você, Restrição. Você quer ir agora? A segunda grande parte é a distância entre eles, para que você possa alterar a distância entre eles. Então talvez eu queira essa distância de 48 pixels entre esses dois postes de bloco. E agora temos isto. E a terceira parte de criação é que você pode criar um arquivo de texto e em cada linha você está indo para o texto claro para diferentes títulos. Então nós temos este título, que é semelhante. Mude para outra coisa. Mude para outra coisa. Agora vamos criar um arquivo de texto e alterar esse cabeçalho instantaneamente. Todas essas rubricas facilmente. Ok, então este é o meu arquivo de texto. Então eu vou limpar este título um, e, em seguida, na próxima linha, eu vou ver o título fazer para você. E na terceira linha, vou dizer, número 34 Comey. Ok, então eu vou salvar este arquivo. E agora o truque é que você precisa arrastar e soltar esse arquivo na primeira instância dessa grade repetível. Ok, então aqui está o meu arquivo de texto. Então eu vou arrastar e soltar isso sobre isso. Ok, então este é o meu rumo. Então, na primeira cópia, esta é a minha primeira cópia fora da minha instância. Então, sempre arraste para cá. Não nesta área. É tão primeira cópia e eu fui dedo do pé, arrastá-lo e soltá-lo. Apenas solte isso. Ou aqui, assim, e você pode ver instantaneamente. Os três títulos são criados. Ok, então esta é a magia fora do crédito repetitivo. Da mesma forma, você pode fazer o mesmo com as imagens. Ok. Então, por exemplo, se eu apenas voltar e, uh, uh, apenas remover este parágrafo e eu estou indo para o pé, criar uma imagem. Uma ogiva. Ok, agora você pode ver que eu abri toda a coleção de imagens minhas pessoas da minha coleção de imagens grátis . E mantenho a minha colecção assim. Certo, então o que eu vou fazer é só arrastar uma imagem para essa. Ok, então agora você pode ver que eu tenho esta imagem que o deixa sair da fronteira e nada alto. Eu tenho esta imagem de cabeçalho e depois este link. OK, agora eu vou selecionar todos eles, e eu vou criar um hematócrito repetido e apenas limpar algo assim. Ok, então agora eu tenho três gabaritos de bloco e eu quero mudar essas três imagens instantaneamente. Ok, então o que eu vou fazer é eu vou arrastar essas três imagens, e eu vou deixá-las aqui em primeiro lugar. Agora você pode ver que todos os três foram alterados instantaneamente. Ok, então esta é a magia fora. Repita o credo. E eu acho que é um dos melhores recursos fora adobe extra você. Agora nós temos ah dominado isso. Repita criar. Você também pode estender sua batida Great aqui assim. Se você quiser. Oh, mas eu não recomendo agora. Nós não estamos nessa. Ok? Ninguém mais é que agora você pode ver aqui que temos algo cortado. Ok, então esse conteúdo está se movendo para fora. Agora, se nos movermos para este protótipo dab e ah, vamos ouvi-lo. Dois ecrãs só para aplacar este. Ok, então mova isso, reboce este protótipo, e quando eu clicar nesta área, esta será a minha tela inicial. Então, basta chegar em casa. Este clique aqui e eu vou me mover para este aqui. Só o olhar dele, então é isso. Ok, então vamos tentar executá-lo, e você pode ver que eu simplesmente não posso ir. O que é limpa. Parece que quando eu não sou capaz de ver a diferença de apenas mudar isso para outra coisa para que possamos instantaneamente ver a diferença. Algo como isto. Certo, então agora vamos fazer isso. Ok, então nós não temos na segunda tela aqui. Agora, o que vamos fazer é na tela. Agora temos o painel de visão esconder 667 Não, vamos movê-lo para outra coisa. Próximo. Mude isso para que possamos ver todo o conteúdo. Certo, então agora temos isso. E, uh, vamos para a hora. Tipo preferido e não, você pode ver que temos esta barra de rolagem barra. Não, é cruelmente. A primeira semana terá ar fresco? Apenas a rolagem vertical e poucos altura da placa vai ser a mesma. Certo, não mude isso. Caso contrário, ele vai para o pé aqui. Alguns problemas. A porta muda a altura da placa de visualização. Basta arrastar o seu clique no seu quadro de arte e arrastá-lo na parte inferior da tela. Ok, então tudo é visível. Então, essa é a parte mais baixa da área do painel de visualização de tela, você pode ver as linhas filhas. E agora temos isto. Se eu puder estender se eu quiser estender mais assim. E se eu estender isso para outra coisa você pode ver agora nós temos mais espaço aqui e nós podemos rolar um pouco mais para baixo. Agora, se eu executar esta pré-visualização novamente agora você pode ver que temos mais área de nível de rolagem. Ok? Agora, se você quiser remover esta repetição criar, OK, então eu vou clicar nele e no grupo Bom. Agora, por que eu preciso dele? Então, se você for para camadas, você pode ver aqui que não temos nada. Então, apenas um grupo chamado repetição. Ótima. Eu não posso editar ou alterar algo se eu quiser. Ok, então o que eu vou fazer é grade de grupo da ONU e eu vou mudar alguma coisa. Talvez. Vamos seguir em frente. Ok. E mais uma vez, vou criar uma batida. Ótima. Se todos esses grupos agora você pode ver Eu todos selecionei todos esses três grupos e claramente que pareceu grande novamente. Ok, então você pode ver agora eu criei isso e um deles. Acabei de editá-lo. Ok, Então, se você quiser personalizar sua leitura grande e editado assim, apenas Hoy fez você pode clicar com o botão direito e un grade de grupo ou usar isso no grupo criar e editar e, em seguida, contra, como, cada grupo que você separou. Então, se eu for grupo novamente, vocês podem ver que temos esse grupo agora e ah, dentro do Discover temos três grupos. Ok? Então você pode mudar o que quiser aqui. Talvez eu não mude este. Sim. Então eu vou para este grupo e eu vou para o Grupo Owen porque este é um grupo extra . Certo, agora temos três grupos. Um inverno demais outra vez. Vou criar o Beat Creed e posso criar um grande fora. Ok, então esta é a maneira que você pode, uh, em grupo sua nota e um grupo seu grande novamente e você pode atualizar instantaneamente seus valores, seu texto para suas imagens, qualquer coisa que você quiser. Apenas arraste e solte. Isso é tudo sobre este novo recurso, que é repetição grade. Espero que tenham gostado desta lição. Vamos passar para a próxima. 28. Componentes no Adobe XD no UPDATE no: Ontem. O Adobe X'd foi atualizado para a versão de maio de 2019 e eles lançaram uma atualização massiva. Então, nesta atualização, eles substituíram os símbolos pelos componentes. Então, ao invés de usar símbolos, que era minha lição antiga, estou substituindo-a por componentes de quê? Nossos componentes. Vou explicar todo esse conceito nesta lição. Então fique comigo e vamos começar. Então aqui temos apenas uma placa de arte com apenas alguns extras estavam aqui um botão e isso Você pode ver estes são separados Esta é uma camada de fundo e este é texto. Em seguida, novamente no fundo. Você pode ver que nós temos isso para isso esses quatro grupos em que nós temos? Ah, outro grupo, que é navegação inferior. Então todos esses quatro ícones que você pode ver aqui eles estão dentro disso e então nós temos o fundo. Então, hum agora o que nós vamos fazer é em todos os sentidos, design de sistema ou design de interface de usuário é algum. O melhor sistema é que você pode reutilizar seus componentes para componente é apenas como símbolos, Mas eles são um tratável. Você pode mudar as palavras deles. Você pode mudar seus tamanhos. Você pode mudar suas cores. Você pode substituir propriedades diferentes fora deles. Então você pode ver que estamos aqui para como podemos fazer um componente. Basta selecionar a camada de grupos que você deseja. Por exemplo, este aqui e eu vou pressionar o comando ou controle K ou E este vai ser um componente que você pode ver aqui nós temos componente von Dishman. Então você pode renomeá-lo como, hum, botão sublinhado primário. Ok, então nós temos este componente agora, há uma coisa a entender aqui. Você pode ver aqui que temos um pequeno macaco verde emaranhado em torno deste componente. Isso significa que este é o componente mestre. Então, se tentarmos o dedo do pé, vá para esses ativos e você pode ver aqui nós temos outra guia aqui, que é chamado Componente. Podemos renomeá-lo aqui prime re lendo algo assim. E agora o que eu vou fazer é arrastar o dedo do pé esta ogiva e eu estou alinhado assim e você pode ver ou ouvir neste botão que temos. Nós não temos nenhum tipo de coisa quadrada ou diamante aqui, então se eu selecionar este, vocês podem ver aqui que temos um diamante. E se eu selecionar este, esta é na verdade uma instância fora desse botão. Então este é o mestre disso é uma criança. Instância instantânea. E é Você pode mudá-lo sem mudar este. Então não tente mudar o mestre. Vamos editar este, então eu vou clicar duas vezes no dedo do pé para estas camadas para que você possa ver como isso foi aberto . Este componente está aberto. Podemos ver as camadas dentro dela. Podemos mudar a cor. Então eu vou com, uh, uh, esta cor e você pode ver que o componente mestre está lá. Certo, então estamos usando o mesmo componente. E se eu quiser reverter para o componente anterior, eu posso clicar com o botão direito e redefinir para Mars Master componente. Então ele vai redefinir minhas configurações para o componente mestre anterior, que era este. Ok, então, hum, isso é uma coisa. Nós também podemos mudar o tamanho fora dele sem você pode dizer, trocar o tamanho fora daqui. Então você pode ver agora eu estou selecionando o componente inteiro em vez de suas partes. Então eu estou indo caranguejo do dedo do pé aqui, e eu vou expandi-lo assim, hum, hum, dedo do pé toda a minha tela e você pode ver tudo da mesma forma. Não temos alterações no componente mestre. Mas se tentarmos mudar algo aqui, por exemplo, o julgamento da força, vamos mudar para outra coisa. Vamos mudá-lo para servir melhor. Então você pode ver uma vez que eu t e fazer uma mudança no componente marcial, ele vai refletir em todos os seus filhos. Então eu mudei meu tipo de letra, e agora isso se reflete em todas as Crianças. Então, isso é um ótimo eu acho, melhoria porque nós podemos editar, podemos criar diferentes instâncias fora do mesmo botão, talvez para seus quatro tipos diferentes de Putin Primary secundário, terciário adul diferente de Burton mensagens retas ou coisas assim. Então isso é ótimo. Ok, então eu acho que isso é tudo por este. Agora vou criar outro componente usando este. Ok, então você pode ver aqui nós temos essa navegação inferior e eu vou criar um componente. Você também pode clicar com o botão direito. E aqui temos fazer componente e ele vai ser um componente Ok, então agora você pode ver se eu vou placa de arte pressionando um e eu quero ir com esta tela iPhone seis emanar. Eu posso ir para a minha seção de componentes aqui, e eu posso arrastá-la assim. Então, agora, se eu quiser mudar o tamanho fora dele, por exemplo, foi iPhone X são tela de acesso e esta carta unicidade para que eu possa ir até aqui e eu posso viciado por aqui. Então isso é tudo sobre componentes nos detritos. Na verdade, espero que tenham gostado desta lição. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 29. : neste vídeo, vamos falar sobre um recurso muito novo que a Adobe acaba lançar há dois dias em maio de 2019. E isso é, na verdade, um sistema de design. Você pode manter um sistema de design no Adobe X T. E se você abrir qualquer arquivo novo que possa ver à esquerda, temos ativos de link. Então vamos ver como podemos desenvolver um sistema de design inteiro. E podemos vincular nosso sistema de design a qualquer novo projeto que estamos projetando. Por exemplo, , Airbnb ou uber você pode ver aqueles sites que eles têm todo o seu sistema de design lá finge que eles são ícones lá, Di biografia. Tudo está, você sabe, em um projeto com um sistema. Então o que eles fazem é usar todo o sistema de design e judeus esses componentes do sistema de design e usá-los para construir um novo design. Agora, antes de entrar em ativos vinculados, vamos fazer o download deste belo design uma semântica. Você acorda por mais de 60 semânticos. Você é realmente um framework para desenvolvedores de front-end para construir abs fabulosos e é um ótimo . Você pode visitar seu site. Vou mostrar o link. Então aqui está um kit gratuito e é muito detalhado. Você pode ver que temos botões. Temos passos. Nós temos que morrer. Cores de taxa de Bogra, formulários, espaços reservados, comando, procure tudo o que temos aqui. Então isso é realmente chamado de todo o sistema de design. Temos componentes. Temos fardos. Temos tipografia, escalas e todas as rubricas e todas essas coisas. Então, uma vez que você tenha baixado isso, você pode ver aqui. Descarregue Semantic. Você gosta? Vamos abrir este arquivo X T em nosso adobe X'd. Agora, onde você pode ver que eu abri Semantic. Você gosta e é um detalhado. Você gosta com muitas tábuas de arte. Você pode ver onde, se eu ampliar, você pode ver que estas são algumas mensagens de aviso. Algumas outras coisas que não se formos para aqui. Você pode ver que temos ícones. Temos fardos. Onda, Este documento você pode ver existir, componente mestre. Se você se lembra da minha última lição anterior, esse componente mestre é realmente aquele que você criou originalmente. E se você fizer alguma alteração ou aqui isso será refletido em todo o seu sistema de design . Então tudo o que eles têm aqui não é mestre. Estes estão em tantos. Temos fardos. Não são componentes mestres. Estas são apenas instâncias fora do mesmo botão. Provocar primário. Deixe-me ampliar. Você pode ver por aqui. Provocar o secundário primário. Estes não são componentes mestres, já que não temos nenhum diamante à esquerda. Então aqui temos descarte salvar. Certo, então temos botões coloridos. Então temos rotulado botão com gostos ou coisas assim. De qualquer forma, então o primeiro passo, se você quiser, se você desenvolveu todo o seu sistema de design Então, como você vai fazer isso? Você está indo dedo do pé, especifique algumas cores. Você vai ter alguma tipografia, assustadores e todas essas coisas e você também vai adicioná-los aqui no painel SX. Ok, então você criou este arquivo. Você pode ver que todas essas cores estão aqui. Eles são nomeados corretamente aviso, mensagem, fundo e todas essas coisas. Você tem que ter certeza de que tudo foi adicionado aqui e então nós vamos salvar este documento. Estamos indo para salvar como e vamos salvá-lo como nosso documento de nuvem. Então eu vou salvá-lo como meu documento na nuvem. Certo, então está salvando agora. Vai levar algum tempo porque ele está carregando para minha nuvem vários fora do Toby, e vamos ver quanto tempo leva. Ok, então agora ele foi salvo. Vamos fechá-lo. Vamos abrir um novo arquivo. Então eu vou abrir um novo arquivo. Vamos abrir esta web 1920 e vamos nos dar bem. Agora, se quisermos trazer todos esses componentes que salvamos em semântica você maneira nós estamos indo toe klik ou aqui link ativos e nós vamos toe ir para essas nuvens, documentos de nuvem, e nós vamos selecione este. Então agora você pode ver que trouxe todos os ativos do lado esquerdo. Você pode ver que eu tenho todas as afirmações. Tenho todo o sistema de tipografia, tudo aqui. Então, se eu quiser construir algo rapidamente Oops. Se eu quiser construir algo rápido, posso arrastar até aqui. E este é o meu botão. Você pode ver agora. Agora mesmo. Tem sido. Tem algum pequeno ícone aqui que é um ativo vinculado. Então também podemos desvincular este componente se quisermos saber se queremos ficar com o componente e usar este do mesmo modo que nosso semântico, Kate ou sistema de design, podemos fazer isso. Está bem. Então, também podemos redefinir para componente mestre. Se fizermos alguma alteração, também podemos adicionar este componente nos documentos de origem mestre. Então, se clicarmos aqui, ele vai abrir um documento de origem, e aqui nós temos e podemos editá-lo aqui. Então, há muitas coisas que você pode fazer aqui e vamos arrastar este fundo então temos Facebook , mas depois temos componentes básicos do cartão. Você vê, nós estamos aqui, e, hum, talvez eu possa adicionar este botão aqui assim. Mova acima de algo como este para que você possa ver dentro de apenas alguns arrastas e gotas. Eu criei este guarda para Christie e nós podemos, você sabe, usar este aqui. OK, então estes são na verdade componentes. Eles podem facilmente ir juntos um com o outro. Também podemos arrastar mais algumas coisas como temos aqui. Um bar escolar vertical manual. Então temos este menu de navegação de menu, então temos muitos verticais. Então, estes são construídos em componentes. Podemos reutilizá-los. Podemos ajustá-los se quisermos. Se quisermos ligá-los e mudá-los, podemos fazer isso também. Então, vamos substituí-lo aqui, e eu vou para você um pouco da minha caixa de entrada. Está bem. Tão simples. Simplesmente, este é, eu acho, o sistema perfeito que você pode fazer. E se formos até aqui, você pode ver que nós temos, hum, nós não temos ícones aqui. Está bem? Então, se você quiser Oh, use os ícones que estavam no outro documento. Nós estamos aqui. Você pode ver esses e todos os ícones necessários para adicioná-los aos seus ativos. Certo, então se tivermos essa ou talvez uma maneira, queremos adicioná-las a mais de ativos. Então eu vou escolher seus seletos. Icahn é este ícone e ah tinha que torná-lo um componente. Vou fazer disso um componente. Certo, então vamos dar um nome, tipo “Expandir”. Está bem. Então certifique-se que você está nomeando é perfeito. Você não precisa, você sabe, fazer algo como este jogo. Então, é uma visão. Não, guardando isso. O mesmo documento, que é o meu documento mestre. Eu mudo. Eu criei um recurso, que é o meu ícone aqui. Não, vamos voltar ao primeiro documento que estava ligado, que estávamos desenhando aqui. E você pode ver aqui nós temos um botão dizendo atualização. Então, isso significa que alguém atualizou nos documentos mestre. Eu vou pressionar após a palavra aqui ou se eu descer, você pode ver que eu vou pressionar a atualização e está indo para o pé Você pode ver. Mostre-me um novo como foi adicionado da semântica. Você gosta, então eu vou descer. E aqui está o componente. Acabei de adicionar Este é o ícone. Ok, então é assim que você pode integrar perfeitamente seu sistema de design no reboque. Qualquer projeto que você está fazendo, então o que você está designers estão fazendo, se nós já temos ah sistema feito, nós temos um sistema de design. Podemos usar isso e podemos aumentar suas mudanças nos componentes mestres ou arquivo mestre, que é a nossa semântica que você maneira malvada tem ligado aqui e vai ligar todos os componentes. Todos os estilos estavam aqui desde estilos de cabeçalho, todas as cores, tudo o que vai importar para o nosso novo documento. Então, isso é tudo sobre ativos vinculados. Eu acho que é uma grande característica. Nós geralmente podemos é que, Ah, Ah, e criar impressionantes You olhos interfaces de usuário. Espero que tenham gostado desta lição. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 30. Atalhos comuns: Se você quiser aprender qualquer software, qualquer aplicativo, qualquer software de design e software de acordo, se você quiser obter rápido nele. E se você quiser O tornar seu fluxo de trabalho muito rápido, você precisa aprender que são atalhos no atalho. As chaves são, ah, um pouco diferentes, não muito diferentes em Mac e Windows. Há muita semelhança, e eu realmente amo as teclas de atalho que são mapeadas neste software Adobe Exley porque eles são muito fáceis de lembrar. Certo, então vamos cobrir as chaves Crocker mais básicas ou mais usadas nesta lição. E na próxima lição, vamos explorar mais alguns que podem ajudá-lo a vamos explorar mais alguns que podem ajudá-lo a acelerar seu fluxo de trabalho no Adobe X'd. Certo, então vamos começar. Então, primeiro de tudo, vamos ver algumas das ferramentas à esquerda. Estes são muito fáceis. Selecionável é V como sempre tivemos em uma loja e eu acho que no ilustrador, em seguida, temos este ângulo seita, que é retângulo para o nosso e se você pressionar você está indo dedo do pé. Então eu vou selecionar isso e eu vou pressionar nosso e agora eu tenho um retângulo Vamos desenhar um retângulo aqui e remover sua borda. Certo, então temos um retângulo, então temos essa elipse e muito fácil e você vai pegar uma elipse. Você pode pressionar a tecla shift para torná-la proporcional assim. Então isso é muito fácil. Vou novamente pressionar v Saudi. Não por aqui. Eu vou pressionar V e eu vou clicar em qualquer lugar para de selecioná-lo. Ok. Certo, então temos essa ferramenta de linha, que é L. Isso também é muito fácil. Apenas uma linha que você pode controlá-la. As opções estavam aqui novamente. Vou pressionar V e clicar em outro lugar que não seja esse mental. Isto é ser muito fácil. Você pode arrastar e fazer algo assim. Então, esta é a nossa ferramenta de planta e eu estou novamente indo para pressionar escape para deixá-lo assim e v d selecionado e selecionado novamente. Além disso, você pode usar o preenchido se quiser. Então este é o Bendel. Então temos este texto sobre HST D é para a ferramenta de texto. Você pode usar qualquer tipo de texto. Ok, então estes são muito fáceis. Então temos este quadro de arte A e você terá mais as nossas tábuas. Vamos criar um iPhone X hardboard aqui, e eu vou pressionar barra de espaço, que também é uma chave muito comum para mover tudo e como. Ok, por quê? Você está projetando controles o e eu vou pressionar V, e eu vou pressionar barra de espaço para segurar esta tela, e eu vou mover para cima para focá-lo no meio. Ok, então este é outro cartão curto. Você pode pressionar a barra de espaço para mover essas coisas assim. Ok, então temos a ferramenta de zoom Z, e você pode usá-la presi, e você pode usá-la para ampliar um elemento. OK, agora, se você quiser voltar, você pode pressionar e segurar sua arte ou tecla de opção, e você pode diminuir o zoom assim. OK, então clique uma vez e você está indo para o pé. Reduza o zoom. Então esta é a nova loucura. Vai ser mais nisto. Se você quiser diminuir o zoom, você precisa pressionar a tecla arte ou opção e continuar pressionando e ele será ampliado para fora. Ok, Agora estamos Você pode ver ou ouvir na ampliação de zoom ferramenta que estamos em 75% ou 100% agora. Então, se eu diminuir o zoom, estamos agora 75 50%. Ok. Agora, se quisermos voltar com crianças de atalho, amplie e diminua o zoom. Isso também é muito comum, e vamos usá-lo muito tempo, que é controle ou comando. Além disso, assim. Então pressione controle ou comando e, em seguida, o esqui explosão do que o menos para zoom para fora. Isto vai ser usado muitas vezes. Então para um zoom 200% ou zoom toe esta janela, então vamos pressionar controle e zero. Ok, então agora você pode ver que ele pertence a 79.44% e é zoneado por respeito à área que eu tenho aqui com minha tela. Ok, então se ele estava usando, eu conheci as previsões do Rei 5K. Isso pode assumir mais de 200%. Você está agora, eu estou usando meu PC Windows. Então eu tenho menos espaço. Então ele é zoneado para 79,4%, o que é confortável para mim dedo do pé Faça o meu material de design gráfico. Agora, se você quiser ampliá-lo 200% você pode fazer isso para você pode comando ou comando ou controle Pressione um. Ok, agora você pode ver que está quase saindo. Fora do meu alcance estão minha tela e tela. É por isso que este software expandiu 79,4%. OK, então você pode pressionar zero para ampliar o ajuste. Você pode pressionar o controle ou o comando um, e ah, e controlar e comandar zero para encaixá-lo de volta à tela. Ok, então estas são algumas ferramentas. Vamos usá-los muito tempo. Amplie, diminua o zoom e diminuiu o zoom. Agora, na próxima lição, vamos cobrir algumas teclas de atalh