Adobe XD Intermediário: Personalização de Marca

Name: Adobe XD Intermediário: Personalização de Marca
Author: Jessica Henley

Personalize a sua marca com iconografia e tokens de design

Preview the first lesson free — get full access to all 4 lessons.

Curso: sob demanda

Olá, meu nome é Jessica Henley, e nestas lições você aprenderá ícones de marca, introdução aos tokens de design e Personalizando tokens de página da web. Nesta lição, mostrarei ícones de marcas. Para começar, quero mostrar como criar um novo arquivo. Você pode navegar até Arquivo e clicar em Novo. Você também pode navegar para um novo arquivo clicando em Comando ou Ctrl N para Novo. Aqui temos a janela pop-up. Existem vários tamanhos para escolher, que incluem iPhone 14, e seu tamanho é 430 por 932 pixels. Também temos um menu suspenso. Então temos o iPhone 14, iPhone 14 novamente, mas observe que tem um tamanho diferente. Também tem opção para versão iPhone mini 13, iPhone XR, XS Máx. 11, até mesmo Google Pixel e iPad. Em seguida temos a página da Web, que tem tamanho de 1920 por 1080 pixels. Se eu clicar nele, você verá que ele é iniciado. Se esse não for o tamanho que você deseja, basta ir em frente e X. Deixe-me voltar para Arquivo, Novo. Clicando aqui no ícone para baixo, temos vários tamanhos também. Então, novamente para a Web, tivemos 1920 por 1080. Então, se você está procurando alta definição, você quer ir com esse tamanho de arquivo. Você tem Web 1366 por 768 e Web 1280 por 800. Também temos Instagram Story. Para o Instagram Story, temos alta definição em 1080 em 1920. Tem até postagem no Twitter, que é 1024 por 512, e também tem opções de Facebook e opções de YouTube. Se nenhuma dessas opções funcionar para você, você também pode colocar um tamanho personalizado. Aqui vou escolher a página da Web 1920 por 1080, que eu já tem aberto. Agora, para os ícones, se você quiser ícones pré-fabricados, você pode navegue até os plug-ins. Novamente, para plug-ins, certifique-se de estar em Design. E aqui abaixo temos Bibliotecas. Temos camadas. Observe que o atalho para camadas é Ctrl ou Command Y. E temos plug-ins. O atalho para Plugins é Shift Command P ou Shift Ctrl P. Aqui em Plugins, tenho ícones EOS. Para obter este plugin, você deseja navegar até o topo. Vá para Plugins e clique em Procurar Plugins. Quando estiver aqui, você poderá ver Gerenciar plug-ins e logo abaixo temos Pesquisar todos os plug-ins. Você pode colocar em uma palavra-chave. Neste caso, vou colocar ícones. Como você pode ver, tenho dois instalados, IconScout, que você terá que criar uma conta e fazer login para usar seus ícones. No entanto, se você quiser pular essa parte, você pode baixar Ícones EOS. Então aqui para os ícones, eles têm tantos ícones para escolher de. Como você pode ver, diz que tem mais de 1.000 ícones gratuitos disponível. Também possui 24 categorias diferentes e dois diferentes temas disponíveis. E eles oferecem suporte para seus ícones. Se desejar este plugin de ícone, você pode pressionar Obter. Como você pode ver, não está disponível para mim porque Eu já instalei. Observe que ao pesquisar por plug-ins, há muito o que fazer escolha. Portanto, eu recomendo dar uma olhada neles. Por exemplo, temos ícones MDI disponíveis. Também temos o Open Icon, que possui um acervo de 70.000 ícones gratuitos disponíveis. Existem tantas opções para escolher. No topo, este é o que eu instalei. Eu vou sair. Vamos nos aprofundar no que este plugin tem disponível para nós. Então aqui temos ícones EOS. E diz que podemos procurar ícones da coleção EOS. Ou copie e cole uma das opções abaixo. Quando clico em um ícone, ele é copiado. E olha também, temos categorias, o que é muito legal. Agora, primeiro vou continuar com tudo e depois voltarei e então darei uma prévia de como é quando você escolhe uma das categorias. E também tem temas reais. Em Ação, que é novamente Tudo, então está começando do topo. Não vamos olhar para todos eles, é claro. Vamos apenas navegar rapidamente. Então aqui, vou seguir em frente e me aproximar do meu tela rolando para dentro. Para rolar, estou segurando Command ou Control e com meu scroller, posso rolar ao mesmo tempo. Por exemplo, este ícone bancário. Lembre-se, diz que quando você clicar nele, ele será copiado. Então preciso clicar com o botão direito e colar. Você também pode usar o atalho Control ou Command V. E aqui está o ícone do banco. Antes de personalizarmos este ícone, porque você pode querer usar alguns desses ícones para o seu determinada marca. Vamos em frente e falar sobre categorias. Nas categorias, temos Ação, Alertas, Artificiais Inteligência. Temos até Comunicação e Design. Vamos dar uma olhada em Locais. Então, se eu clicar em Lugares, tenho até esse guarda-chuva bem aqui. Então, se eu clicar nele, ele será copiado. Clique com o botão direito e cole. Deixe-me dar uma olhada em Hardware. Então, para Hardware, posso prosseguir e rolar. Eles têm esse fone de ouvido. Então, se eu clicar nele, ele o copiará automaticamente. Clique com o botão direito e cole. Então esses são os nossos ícones que escolhi. Vou prosseguir e centralizar isso. Agora vamos dar uma olhada em como você pode personalizá-los para sua marca específica. É super simples. Ao clicar no ícone real que você escolheu, você pode ir para Aparência. Observe que você pode diminuir a opacidade se quiser. Mas para o preenchimento, você pode clicar aqui e role para cima assim e mude as cores. E você também pode ficar de olho no código de cores real. Então aqui eu poderia copiar o código e clique com o botão direito e copie-o. Agora diga se eu queria a mesma cor. Como você pode ver, você também pode salvar amostras. Mas eu poderia clicar com o botão direito, colar, e pressione Enter. Também posso pressionar este sinal de mais para armazenar esta cor Para a próxima vez. E posso clicar neste fone de ouvido e fazer a mesma coisa. Na próxima lição continuarei falando sobre marca ícones. Obrigado por assistir.

Intermediário Fornecedor : Jessica Henley 4 lições · 31m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

O Adobe XD oferece uma variedade de tamanhos de documentos para iPhones, sites, plataformas de redes sociais e outros tamanhos personalizados. Estas lições mostrarão como escolher os tamanhos adequados para atender às suas necessidades de design. Ficará a conhecer o papel que os ícones desempenham no seu design, como procurar plug-ins para encontrar ícones pré-fabricados, categorias e temas para ícones e como alterar as cores dos ícones pré-fabricados. Também irá explorar a forma de utilizar as ferramentas do Adobe XD para criar ícones personalizados para a sua marca, incluindo a modificação de formas em ícones personalizados, alterando o seu aspeto e adicionando efeitos. Esta lição também inclui tutoriais sobre como usar plug-ins para procurar modelos de sites e criar tokens de design para sua marca. Receberá sugestões sobre como se manter organizado adicionando cores e estilos de caracteres aos seus activos de design. Quando estiver pronto para pré-visualizar o seu design, pode fazê-lo num navegador da Web e adicionar comentários, ver especificações e visualizar variáveis nos designs.

Nestas lições, será apresentado aos tokens de design e aprenderá a personalizar os seus designs explorando a iconografia e os tokens de design para marcas comerciais.

O Que Você Vai Aprender

Designar cores e estilos de caracteres para ícones em seus designs
Procurar plugins para encontrar ícones pré-fabricados e alterar suas cores, categorias e temas
Criar ícones de marca personalizados modificando formas, alterando sua aparência e adicionando efeitos
Usar design tokens para personalizar sites e tokens de página web para marcas comerciais
Visualizar designs em um navegador web para adicionar comentários, visualizar especificações e inspecionar variáveis
Escolher tamanhos de documento adequados no Adobe XD para iPhones, sites, mídia social e necessidades personalizadas

Principais Conclusões

O Adobe XD oferece uma variedade de tamanhos de documento para iPhones, sites, plataformas de mídia social e outros tamanhos personalizados para atender a diferentes necessidades de design.
Ícones desempenham um papel no design, e plugins podem ser consultados para encontrar ícones pré-fabricados organizados por categorias e temas cujas cores podem ser alteradas.
Ferramentas do Adobe XD permitem criar ícones de marca personalizados modificando formas, alterando sua aparência e adicionando efeitos.
Design tokens podem ser criados para uma marca, e plugins podem ser usados para consultar templates de sites.
Designs podem ser visualizados em um navegador web, onde você pode adicionar comentários, consultar especificações e visualizar variáveis dentro dos designs.

Perguntas Frequentes

O que vou aprender neste curso intermediário do Adobe XD?

Você aprenderá a designar cores e estilos de caracteres para ícones, compreender ferramentas de design de ícones e utilizar design tokens para sites, enquanto explora iconografia e design tokens para marcas comerciais.

Quais lições este curso inclui?

O curso inclui quatro lições: Ícones de Marca (Parte 1), Ícones de Marca (Parte 2), Introdução aos Design Tokens e Personalizando Tokens de Página Web.

Como trabalho com ícones pré-fabricados no Adobe XD?

Você aprenderá como procurar plugins para encontrar ícones pré-fabricados, trabalhar com suas categorias e temas, e alterar as cores de ícones pré-fabricados, bem como criar ícones personalizados usando ferramentas do Adobe XD.

Como posso visualizar meu design?

Quando estiver pronto, você pode visualizar seu design em um navegador web, onde pode adicionar comentários, consultar especificações e visualizar variáveis dentro dos designs.

Quais habilidades este curso cobre?

Este curso cobre Adobe XD, Aprimoramento de Marca, Design de Marca e Aprendizado de Design.