Design de ícone de lançamento de aplicativos para dispositivos IOS (Iphone) e Android

1. O que vamos abordar neste curso?: Neste curso, você vai aprender a criar aplicativos incríveis e legais e ícones de aplicativos lançadores para dispositivos Android e iOS. Agora vamos criar todos os tamanhos diferentes de ícones de aplicativos a partir de pequenos dispositivos e dispositivos grandes e dispositivos tetra, 3x, 2x e 1x. Isto vai ser automaticamente. Você precisa aprender a usar os modelos que vou mostrar. Você precisa de alguma experiência com o uso do Photoshop e do Illustrator. Vamos ver o que vamos cobrir neste curso. Agora deixe-me mostrar-lhe o que realmente estaremos fazendo neste curso. Primeiro de tudo, vamos projetar o ícone do aplicativo iOS, que será o nosso ícone de caixa de correio e vamos gerar todos os seus diferentes tamanhos necessários para diferentes dispositivos iOS. Então vamos mudar para ícones do aplicativo Android e vamos gerar muito agradável e legal ícone do aplicativo de hidratação. Na verdade, estaremos projetando para diferentes temas para ele. Um é este coração um e o segundo é este ícone de aplicativo de vidro. Durante este curso eu também vou mostrar a vocês como eu vim com os primeiros esboços deste aplicativo de hidratação e como você vai usar a mesma técnica para obter algumas idéias em execução e sucos criativos fluindo. Então, no final, nós também vamos projetar algumas maquetes móveis para mostrar aos nossos clientes porque os clientes não vão gostar de ícones simples simples. Então vamos mostrar-lhes algo fixe. Agora a questão é, por que eu preciso aprender essa habilidade? Qual é a demanda do mercado dessa habilidade? A demanda do mercado é, deixe-me mostrar-lhe apenas dois sites e este é o site do concurso 99designs. Você pode ver lá diferentes concursos para o design do ícone do aplicativo variando de $200 a $999. Entre há $600 por apenas um ícone de aplicativo. Você pode ver aqui, eles são ícones simples e o preço é, você pode ver aqui $999. Então temos este Envato Studio e eles estão oferecendo diferentes designs de ícones de aplicativos com diferentes gamas de preços. Você pode ver aqui em $150, $65, $200, $300, $390. Então, a média é quase acima de $100. Você pode facilmente ganhar $100 em apenas uma ou duas horas. Não é muito difícil. Eu sei que você já está convencido e realmente precisa começar este curso, então vamos começar e projetar alguns ícones de aplicativos incríveis olhando. 2. Por que precisamos de ícones de aplicativos: Então vamos falar sobre por que realmente precisamos de um ícone de aplicativo. ícone do aplicativo é a primeira coisa que o usuário do aplicativo vai olhar. Então, se você quiser um bom impacto inicial em seus usuários, você deve ter um ícone de aplicativo muito bonito e elegante. Agora, ícones ruins é uma das três grandes razões para rejeições de aplicativos. Então nós realmente precisamos de um bom ícone de aplicativo para evitar qualquer rejeição. Agora, do ponto de vista de venda, um bom ícone de aplicativo é um must-have. Se você realmente quer vender o seu aplicativo, ninguém nunca vai se preocupar em baixar o seu aplicativo ou mesmo olhar para ele se o ícone do aplicativo é coxo e patético. Então isso foi tudo sobre por que nós realmente precisamos de um ícone de aplicativo de boa aparência. Vamos passar para a próxima palestra. 3. Qualidades de bons ícones de aplicativo: Agora, vamos falar sobre algumas qualidades de bons ícones de aplicativos. Agora, a primeira coisa é primeiro, seus ícones, ícones de aplicativos devem ser facilmente reconhecíveis. Qualquer um pode facilmente distingui-lo de qualquer outro ícone instantaneamente e facilmente. Saiba que seus ícones deve ser facilmente memorável, e se alguém joga um jogo ou baixar um aplicativo, eles instantaneamente ver e dizer, “Oh sim, eu usei este aplicativo uma vez, é um aplicativo muito bom.” Devem ser esteticamente atraentes. Se eles parecem horríveis e feios, acho que ninguém vai olhar para eles ou mesmo baixá-los. O ícone do aplicativo deve se destacar da multidão. Assim, as pessoas que navegam, a loja de aplicativos ou tentam baixar seu aplicativo, usam e baixam seu aplicativo em vez de outros aplicativos semelhantes. Este é um ponto muito importante, que é o ícone do seu aplicativo deve ser simples e deve usar um formas muito simples e cores. Isso é tudo sobre qualidades de um bom ícone de aplicativo. Agora, devemos passar para a próxima palestra. 4. Pontos do design de ícones de aplicativos: Vamos falar sobre alguns dos que não são do design App Icon. Eu listei algumas coisas aqui a partir de diretrizes IOS pela Apple, então vamos falar sobre eles. Regra Número 1; nunca tente colocar texto em seus Ícones, porque como seus ícones vão ficar menores, os textos ficaremos ilegíveis. Portanto, não há nenhum significado para colocar um monte de textos sobre seus ícones de aplicativo. Se você tentar usar um monte de objetos em um único pedaço de ícone de aplicativo pequeno, você está dando um monte de pontos de foco em um design. Ele só vai distrair seus olhos de usuários, e esta não é uma prática de design muito boa, então tente evitar isso. Não use cores sem brilho no design do ícone do aplicativo. Nossos olhos vão negligenciar essas cores maçantes, então tente evitá-las. Não crie ícones de aplicativo apenas para telas grandes ou dispositivos IOS mais recentes. Ao projetar ícones de aplicativos, sempre tenha em mente todos os outros dispositivos menores também. Nunca tente usar a foto do seu animal de estimação como um ícone de aplicativo, ou alguma foto que você tirou alguns anos atrás. Eles podem enganar seu usuário e não retratar o que seu aplicativo realmente faz. Evite criar ícones semelhantes aos ícones de aplicativos padrão do IOS. Isso criará muita confusão na mente do seu usuário. Este é um pouco técnico; evite a transparência em qualquer ícone de aplicativo IOS que você projetar, então você tenta carregar seus ícones de aplicativo para a loja de aplicativos. Não há suporte para PNG ou arquivos transparentes. Se você quiser ler mais sobre isso, incluirei o link nos recursos para as diretrizes de design do IOS. Tente ler essa diretriz Apple IOS detalhadamente sobre ícones de aplicativos, para que você possa projetar alguns ícones de aplicativos incríveis, e não repita os erros que muitos designers cometem nos dias de hoje. 5. Design de ícones de aplicativos: Vamos falar sobre o que você realmente precisa fazer ao projetar ícones de aplicativos. Cores vibrantes e nítidas agarram o olho do usuário e captam sua atenção. É uma obrigação. Use cores vibrantes e nítidas tanto quanto você puder. Use um único objeto dominante no meio para focar seus espectadores em direção a ele. Todos os aplicativos populares compartilham essa mesma qualidade, então use-o com sabedoria. Você também pode usar um símbolo de letra se você não pode pensar em mais nada. Às vezes acontece com todos os designers. Funciona muito bem se você é uma grande marca. Seu cérebro pode entender formas simples mais facilmente do que as complexas. Use-os nos ícones do seu aplicativo. Não tente ser um Picasso. É um ponto técnico. Os vetores são formas que podem se expandir ou se contrair sem perder qualquer qualidade. Tente usá-los ao projetar no Photoshop. Só usaremos formas vetoriais no Photoshop quando se trata de ícones de aplicativos de design. Estes são os pontos-chave que você precisa ter em mente ao projetar ícones de aplicativos ótimos e incríveis. 6. Especificações de de ícone de IOS (Iphe): Vamos falar sobre algumas especificações de tamanho de ícone. Aqui estão alguns dos poucos guias sobre tamanhos de ícone do aplicativo iOS e eu gostaria de compartilhá-los com você. Este é um deles do Ivo, não sei o nome completo dele. Também incluirei os links na Seção de Recursos, então certifique-se de verificá-los. Agora não se preocupe que você precisa memorizar esses tamanhos de ícones, você só tem que olhar para eles para que você saiba quais tamanhos de ícones são normalmente usados. Então este é um guia, então este é outro. Existem poucos tamanhos de ícones para iPhone. Não se preocupe com pontos e pt e isso à taxa de 2x e à taxa de 3x. Só usaremos esses tamanhos de pixel e usaremos um modelo para renderizar todos os tamanhos de ícones diferentes automaticamente. Não se preocupe com eles. Basta dar uma olhada neles para que você saiba quais tamanhos são comuns. Então, se você quiser entrar em um monte de detalhes, você pode ler este Apple iOS Human Interface Guideline em todos os tamanhos de ícones e imagens. Esta é uma lista muito grande. Isso tudo sobre tamanhos de ícones. Agora, vamos passar para a próxima palestra. 7. Sempre de design em quadrado para IOS: Sempre que você projetar um aplicativo iOS ícones, sempre pense em quadrado. Então, o que isso significa é que nunca tente usar essa forma como sua base de ícones porque os ícones do aplicativo iOS não suportam transparência ou PNG. Este recorte é aplicado automaticamente pelos sistemas operacionais iOS ou iOS. Portanto, não se preocupe com esta redondeza de seus ícones. Basta projetar em quadrado e sua redondeza será aplicada automaticamente. Esta é uma fita muito importante porque a maior parte da grandeza que eles tentam projetar nesta forma, que acaba muito feio, mostrando tela preta atrás do ícone do aplicativo. Então, apenas tenha isso em mente e vamos passar para a próxima palestra. 8. Como usar o espaço e ponto de foco do ícone: Deixe-me compartilhar uma outra dica com você, enquanto você está projetando ícone do aplicativo IOS. Certifique-se de que você está usando o máximo de espaço possível nesta tela. Quando você está projetando, se você tem um objeto principal como qualquer coisa aqui, tente usar o máximo que puder, porque quando tentamos ir para os tamanhos menores, ele ficará bom. Se o seu objeto é muito pequeno, como algo no meio, talvez como este círculo, assim. Deixe-me apenas movê-lo no meio. Quando tentamos chegar a tamanhos muito menores, o objeto principal do nosso design se tornará cada vez mais menor. Portanto, esta é uma dica muito importante, sempre tente usar o máximo de espaço que puder. Também pense sempre em tamanhos menores. Portanto, não crie apenas uma tela de 1024 pixels por 1024 pixels, tente sempre ver os tamanhos menores também ou diminua e amplie novamente para ver que seu design está perfeito em quase todos os tamanhos. Estas são algumas dicas sobre como criar os ícones do aplicativo IOS no Photoshop. Agora vamos passar para a próxima palestra. 9. Como usar ferramentas e a forma vetorial para ícones de aplicativos: Sempre tente usar formas vetoriais no Photoshop ao criar ícones de aplicativos iOS ou outros ícones de aplicativos. Agora, o que eu quero dizer com formas vetoriais, estaremos usando principalmente essas ferramentas, essas ferramentas de forma. Então, vamos usar esta seleção de barra e talvez esta ferramenta de caneta. Estas são as ferramentas que usaremos na maior parte do tempo. Se você não estiver fazendo uma ilustração ou um objeto 3D ou algo assim, só precisaremos dessas ferramentas. Vamos passar para a próxima palestra. 10. Tamanho e grade: Agora a pergunta é : “Com que tamanho começar seu design?” A resposta é que você tem que projetar no maior tamanho, que é este, 1024 pixels por 1024 pixels, que é um requisito para o ícone App-store, e deixe-me mostrar como eu configurá-lo no Photoshop. Agora, eu usei esta placa quadrada de 1024 por 1024 pixels, e é assim que eu configurou esta grade. Deixa-me mostrar-te. Vá para editar, preferências e, em seguida, guias de classificação e fatias, e vá para esta parte. O que eu usei é que eu usei esta linha de criação depois cada 64 pixels e subdivisões para duas subdivisões para isso. Cada caixa pequena tem 32 pixels e cada caixa grande tem 64 pixels. Esta é a minha configuração para o design de ícones de aplicativos e, independentemente de você usar o Illustrator ou o Photoshop, use sempre essa tela de 1024 pixels por 1024 pixels para seus designs de ícones de aplicativos. Agora sabemos sobre o tamanho que usaremos para o design. Vamos passar para a próxima palestra. 11. Configuração de ícones do iPhone do iOS: Eu queria mostrar minha configuração de arquivo para um ícone de aplicativo, que é 1024 por 1024 pixels e resolução definida como 72 pixels, modo de cor para RGB e plano de fundo deve ser transparente. Verifique se seu perfil de cor está definido como “Não gerencie este documento de cor”. Este é um ponto muito importante. Esta é a configuração dos meus documentos para o ícone do aplicativo. Você pode estar se perguntando o que eu usei em resolução ou perfil de cor, então esta é a resposta. Vamos passar para algumas das próximas palestras. 12. Como usar o modelo de aplicativo gratuito: Vamos ver o que está dentro deste modelo de ícone de aplicativo. Abra no Photoshop. Abri-o aqui no Photoshop. Ok, agora este é o arquivo principal, mas vamos usar isso. Editar-me e Salvar Photoshop Smart Object, clique duas vezes nele e você pode ver aqui é o nosso ícone quadrado. Basicamente, estas são poucas máscaras para a redondeza. Vamos usá-los para ajudar a nossa redondeza. Este é o arredondamento que será aplicado uma vez que o ícone do aplicativo é carregado para o site iOS. Esta é a máscara interna e esta é a máscara externa. Temos de esconder isto no final. Estes são alguns gradientes iOS e cores para os fundos. Se você quiser usar uma cor simples, você pode usar estas, qualquer uma dessas cores ou se você quiser usar um gradiente, você pode usar um gradiente aqui assim. Isso é tudo sobre este modelo de aplicativo de ícone, então estaremos usando este para realizar nossa tarefa de projetar o ícone ISFP no Photoshop. Vamos passar para a próxima palestra. 13. Atualização sobre modelos de ícones de aplicativos: Olá, todos os designers de ícones de aplicativos. Desde os últimos meses, muitos alunos estão reclamando que não podemos baixar modelos de ícones de aplicativos. Agora, o problema é que esse cara que possui o modelo de ícone do aplicativo o converteu para algum site pago. Você pode ver aqui ir para aplicar pixels. Se você vai para esse site, você pode ver que estes são todos os modelos de ícones de aplicativos e você precisa pagar pelo menos US $9 mensais ou anuais, US $60 para obter estes. Como meu curso era livre, então eu tendem a usar modelos gratuitos. Eu já tenho um modelo livre. Eu enviei no meu Dropbox e vou compartilhar um link com você, mas sua versão 5, eu não sei se este designer tem modelos mais atualizados. Mas para este curso você pode usar este ou você pode ir para esses sites, iosicontemplate.com. Você pode ver aqui, Eu mostrei o método então não se preocupe, todos esses modelos de ícone de aplicativo, eles têm quase a estrutura semelhante de trabalhar como você pode ver aqui há tamanhos diferentes do mesmo aplicativo. Então temos este, outro de everyinteraction.com. iOS 9 App Icon Template e foi atualizado em 12 de outubro de 2015 última atualização e este é o arquivo. Você pode baixar este arquivo e estes são todos os tamanhos de ícones que ele pode gerar. Ele também tem uma maquete com ele. Eu acho que todas as instruções estarão dentro destes PSDs então não se preocupe. O terceiro que quero mostrar é esse Bjango. Estes são, eu acho, caras muito geeky da perspectiva de design da interface do usuário. Eles têm muitas ações e recursos diferentes. Eles têm esse modelo de ícone de aplicativo no Illustrator, Sketch Affinity Designer e Photoshop. Android, iOS, macOS, Apple TV, Apple Watch, iMessage, um monte de modelos diferentes. Você pode baixar estes aqui e tentar usar estes. Eles podem ter as ações com ele porque eles têm um monte de ações. Você pode ver estas abaixo são as ações do Bjango. Esta é a atualização que eu queria transmitir a vocês. Vou fazer o upload deste modelo de ícone de aplicativo de link versão 5 vinculado ao meu Dropbox e vou compartilhar esse link. Tenha todas as opções em mente. Você pode, se você quiser pagar e obter esses ótimos atualizados, você pode ir a este site, se você quiser ficar com fontes gratuitas, você pode usar esses três sites e o antigo modelo que eu vou fazer upload agora. Esta é a atualização que eu queria dar a vocês, então continuem projetando. Mostra-me o teu trabalho. Carregue-o para este URL, bit.ly/uistudents. Carregue seus ícones aqui, carregue-os nesta página e eu vou rever seus ícones do aplicativo. Você pode ver aqui, esta é a minha foto, lembre-se sempre de colocar seu nome no final do seu arquivo, como ícone do aplicativo sublinhar o nome do aluno. Seu nome, navegue e carregue seu arquivo. Estas são as coisas que você pode fazer aqui. Eu vou olhar para a frente para ver seus designs criativos e impressionantes. Fique ligado e me avise se precisar de algo de mim ou de qualquer pergunta que queira fazer. Vamos passar para a próxima lição. 14. Como criar base elevada em 3D de IOS: Nesta lição, vamos criar esta base deste ícone primeiro. Esta é basicamente essa forma retangular e sua elevação e sombras e tudo mais. Vamos começar e criar um novo arquivo de 1124 pixels por 1124 pixels. Deixe o resto das configurações como esta, resolução 72, não gerencie cores este documento. Tenha sempre em mente que quando você estiver projetando para aplicativos móveis ou web design, nunca use nenhum perfil de cor, basta usar isso. Não Color Gerenciar este documento. Ok? Aperte “Ok”. Esta é a nossa camada de fundo, vamos torná-la uma camada de fundo, Nova camada, Fundo da camada. Esta camada é transformada em plano de fundo agora. Vamos mudar a cor pressionando “Alt Del”. Isso vai mudar para esta cor de primeiro plano, que é branco, e então vamos criar um retângulo arredondado. Selecione o “Retângulo arredondado” clique em qualquer lugar, clique único, e escolha a altura e largura para 1024 por 1024 pixels e a arredondamento, você estará usando será este 232 pixels. Quase e 32, 32 e 32. Pressione “Ok” e vamos mudar sua cor para E, C, F0, F1. Ok. Este é um pouco de cor azul acinzentado. Selecione “Ok” e, em seguida, vamos selecionar ambos e linha central. Então vamos criar rapidamente guias em torno da nossa forma, assim. Isto é, estou usando um guia rápido plug-in. Agora definimos nossa forma e guias. Vamos adicionar alguns estilos a esta camada. Para o estilo que estaremos adicionando vai ser Bisel e Emboss. Agora deixe-me mostrar as configurações que estou usando. Use o estilo como chanfro interno, Técnicas, profundidade suave, mover a profundidade para 100 por cento. Use uma direção para cima. O tamanho deve ser de 16 por 16 pixels. Sempre use números pares porque vamos reduzir os nossos ícones, que os números pares funcionem melhor. Portanto, sempre use números pares em seus estilos. Então vamos usar este ângulo para 90 e esta altitude para 21 por cento ou grau. Ok, este modo de realce deve ser definido como tela e a cor deve ser branca, e mover o controle deslizante para 55 por cento. Ok, agora para a cor da sombra eu estou usando esta cor B, D, C, 3C, 7. Definir esta cor como modo de sombra para chanfro interno e modo de sombra deve ser normal não multiplicar e deslizar sua opacidade 200 por cento. Ok, é isso. Agora vamos adicionar alguma sombra interna a esta camada. Vá para Camada. Passo 2 é Inner Shadow. interna, sombra interna e sombra interna. Sombra interna, a cor será a mesma que este chanfro e sombra em relevo. Então eu estou usando a mesma cor B, D, C, três, C, sete. Aperte “Ok”. A opacidade deve ser 100 por cento e ângulo será menos 90. Tenha sempre em mente que estamos produzindo sombra de baixo para cima. Então este ângulo é menos 90 graus, está vindo do fundo. A luz está na parte inferior, então a sombra deve estar aqui Ok, então a distância deve ser 32 pixels, o que também é um número par. Tenha sempre em mente por que estou usando números pares porque nossos ícones serão produzidos em tamanhos menores, então não queremos nenhum problema em nossos cálculos. Então use números pares. Aperte “Ok”. Vamos tentar adicionar alguma sobreposição de gradiente a esta camada. Vá para Estilo de camada, Sobreposição de gradiente. Você pode ver assim que eu tiver ativado isso em Gradient Overlay, nós temos algumas sombras aqui, sombras internas são muito sutis. Então esta é a razão pela qual eu estou usando este estilo de camada de sobreposição de gradiente. Deixe-me mostrar-lhe as configurações deste estilo de camada. modo de mesclagem deve ser normal, opacidade deve ser 60 por cento, e este gradiente é basicamente, deixe-me mostrar a cor que estou usando para este gradiente. A cor é B, quatro, B, D, C, seis. É no período esquerdo desta cor é quase 19 por cento ou 18 por cento. Estamos usando esta cor branca mais e esta cor azul acinzentada e menos. Isto é basicamente cor branca e sua opacidade é 100 por cento. Clique em “Ok” e certifique-se de que você pressionou este reverso. Estamos usando esse reverso aqui. Em seguida, o estilo que estamos usando estilo radial, nosso ângulo desses gradientes radiais é 140 e a escala é ajustada para 121 por cento. Estas são as configurações para este estilo de camada de sobreposição de gradiente e essa foi a última etapa do nosso exercício de criação de base. Isso é tudo sobre base para este ícone do aplicativo. Vamos passar para a próxima palestra. 15. Como criar uma base plana do ícone do aplicativo: Nós também vamos criar outro plano de fundo para este ícone que será plano de fundo. Então duplique este retângulo soado e esconda este e vamos usar zero pixels para a redondeza. Não vamos usar nenhuma redondeza. Esconda este efeito de chanfro e também esta sombra interna. Então, vamos usar apenas esta forma de plano para o gradiente e a aparência do ícone. Vou explicar esta técnica no ambiente quando vamos exportar todos os ícones porque iOS não usar ou aplicar qualquer PNG. Basicamente, precisamos de um ícone quadrado. Então vamos usar ambos para criar nossos ícones. Isso será para o efeito arredondado e também criaremos, use este para um ícone simples. Então isto é tudo sobre esta criação de base deste ícone. Criamos duas bases nesta palestra, esta e esta. Também podemos mudar o ângulo deste neste fundo quadrado. Talvez assim. Podemos mudá-lo para o modo linear talvez, e mudar o ângulo para 90 por cento e torná-lo normal assim. Está bem, está melhor agora. Então, para a forma quadrada, estamos usando gradiente diferente, que é este. Gradiente linear com a eliminação deste reverso, será do branco ao escuro. Então escala, se você quiser mudar a escala, eu acho que 130 por cento é bom. Não queremos muita cor aqui porque a nossa forma principal estará aqui. Aperte “Ok” e isto é tudo para esta palestra. Vamos passar para a próxima palestra. 16. Como criar a forma de Envelop no Photoshop: Na última palestra, criamos nossa forma de base. Vamos criar nossa forma de ícone principal agora. Vou começar com o retângulo arredondado. Indo pressionar “U” para selecionar a ferramenta de forma e retângulo arredondado. Agora vou definir o raio para 24 pixels e clicar uma vez nesta tela. Agora o tamanho para isso é 736 pixels de largura e a altura é 444 pixels. Então defina este tamanho e clique bem e sua cor é esta. O valor é 242d36 ou 242d36. Defina a cor. Deixe-me trazê-lo para que você possa vê-lo. Vou alinhá-lo no meio. Estou usando teclas de atalho personalizadas. Você pode usar este aqui. Pressione a ferramenta Mover e você pode usar esses alinhamentos para baixar aqui. Eu o alinhei no meio e para a parte superior do envelope não vou usar Photoshop porque não é uma ferramenta precisa para criar tal forma de triângulo, triângulo arredondado. Vamos usar o Illustrator para isso. Mas para o resto das formas e as formas inferiores, usaremos o Photoshop. Vamos desenhar algumas outras formas como 2 barras aqui, assim. Vou usar esta cor, que é 3498db para a cor azul. Eu acho que o primeiro era mais escuro e replicá-lo, “Controle J”. Vou usar o mais leve e vamos separá-los 1020 pixels. Eu só movo 20 pixels do primeiro. Agora vamos selecionar os dois e vamos agrupá-los em barras. Então vamos alinhá-lo na parte inferior desta forma assim. Agora vamos fazer outra forma que era basicamente a forma do selo. Use sua ferramenta de forma personalizada do Photoshop padrão. Se você não vir todas as formas, clique aqui e clique neste “tudo”. Você será capaz de ver todas as formas aqui. Para o selo, se você quiser o carimbo redondo, você pode usar o carimbo redondo aqui assim e colori-lo. Este, sua cor é 34495e. Se você quiser usar este, você pode usar este. Ou você pode selecionar o outro que era um pouco de forma retangular. Acho que é por aqui. - Sim. Este. Você pode selecionar este e ocultar este. Estamos quase terminando com nossas formas para o nosso ícone principal, estamos quase completamente feitos no Photoshop agora. Para a próxima forma do envelope, vamos usar o Illustrator para isso. Vamos ver na próxima palestra como vamos usar Illustrator para projetar a parte superior do nosso envelope. 17. Como usar o Illustrator para forma de envelo: Ok, agora, antes de começar nosso design no Illustrator, precisamos fazer algumas mudanças. Vá para Editar preferências e, em seguida, vá para guias e notas. Eu defini minha linha de grade após cada 24 pixels e subdivisão para 12. É basicamente cada pequenas caixas dois pixels, e cada grandes caixas 24 pixels. Também vamos definir nossas unidades em pixels, traçado, geral e tipo. Tipo deve estar em pontos e não importa porque nós não vamos usar nenhuma fonte agora, ou texto agora. Estas são duas unidades de configuração. Converta suas unidades em pixels porque estamos projetando em pixels, em seguida, sua grade, em seguida, guias, configuração, algum guia em números pares. Clique em OK. Vou abrir um novo arquivo, novo e então vamos usar pixels nas unidades 1024 por 1024. O modo de cor é RGB. Alinhe novos objetos à grade de pixels, ok e esta é a nossa tela. Vou ligar minha grade agora clicando em controle e aspas no meu teclado. Agora vamos projetar nossa forma principal e gostaríamos de moldar aqui. Para combiná-los perfeitamente primeiro vamos desenhar um retângulo arredondado apenas para alinhá-lo melhor, então 736 foi a largura e altura 444 pixels e a redondeza foi de 24 pixels. Nossa forma, a forma principal é feita aqui. Remova este contorno daqui. Este é basicamente o contorno do traçado. Eu removi e dou a este um pouco de cor, talvez branco está bem, eu acho. Agora, esta é a nossa forma principal e minha arte de laptop para isso, vamos usar a ferramenta de polígono. Clique na ferramenta polígono e clique nas que estão aqui. Digite três lados no polígono e clique em OK. Nosso triângulo está aqui, vamos girá-lo. Pressione Shift, por isso é girado em alguns ângulos específicos. Vamos esconder o guia agora, e vamos colorir outra coisa para que possamos vê-lo corretamente e também este. Agora vamos transformar este triângulo, clicar nele e ir para este painel Transformar. Vamos usar 736 pixels para a largura e 224 pixels para a altura. Colocá-lo assim e movê-lo por aqui. Agora, o que vamos usar é basicamente cantos ao vivo. Para acessá-los, vamos usar esta Ferramenta de Seleção Trek. Você pode ver agora estes cantos ao vivo estão ativos aqui. Você pode ver pequenos círculos dentro deste triângulo. Você pode clicar duas vezes em qualquer um deles e inserir seu valor de pixel para o seu canto em torno de nós. Eu inseri este 24 pixels e pressione ok. Assim que você pressionar ok, isso é basicamente reduzido a algum outro tamanho. primeiro passo é fazermos uma vantagem para este canto. Para fazer isso, vamos selecionar qualquer ponto âncora aqui para tornar isso ativo, em seguida, clique e arraste isso neste canto. Assim que vermos o pixel zero, solte-o. Agora, para dimensioná-lo, vamos usar nossa ferramenta Mover e, em seguida, transformar. Vamos usar 736 pixels. Certifique-se de alinhar à escala de Grade de pixel e todos estes estão desativados. Agora pressione Enter e teremos a nossa forma. Vamos alinhá-lo de acordo com a nossa forma de fundo. Movê-lo um pouco para cima assim e é quase perfeitamente definido sobre isso. Eu pressionei o controle via para vir este neste modo de contorno, então tenha em mente pressionando o controle via novamente. Agora vou copiar esta forma. Copie e vamos colá-lo na loja de fotos. Vamos usar Shape Layer. Pressione Ok e temos nossa camada de forma aqui, assim. Você pode ver que está perfeitamente em forma. Vamos criar um galpão aqui. Agora, para a sombra, vamos usar alguns valores que são um pouco como a distância é 42, tamanho é algo como 764 talvez. O ângulo é 90 e modo de mistura é multiplicar Opacidade. Você pode usar a opacidade, o que quiser. Se você quer uma sombra dura, você pode defini-la para 55 ou talvez mais do que isso. Este é o tamanho do borrão, quanto ele vai borrar em torno desta sombra e esta é basicamente a distância do topo. Mantenha-os um pouco mais perto para que as sombras não vazem desta área. As sombras devem estar aqui. Pressione Ok e nossa forma de ícone principal é feito. Usamos a loja de fotos e o Illustrator para criar essa forma. Agora vamos agrupá-los em um grupo para gerenciá-los facilmente. Temos esta forma e depois temos isto e aqui estão as barras. Selecione-os todos pressionando o controle e o controle G para agrupá-los. Vou nomeá-lo ícone de e-mail e, em seguida, também precisamos alinhar um pouco no meio, controle clique em ambos. Alinhe-os no meio. Está quase no meio agora, então não está alinhado ou movido quando pressionei minhas ferramentas de alinhamento. Isto é perfeito. Completamos nosso design para este ícone. Vamos passar para a seção onde estaremos exportando nossos ícones em tamanhos diferentes e quais os problemas que a maioria dos designers e novos designers enfrentam ao exportar seus ícones. 18. Tons de design final: Agora, vamos usar o aplicativo modelo ícone. Nós baixamos em nossas últimas palestras, e vamos usá-lo para exportar ícone do aplicativo em tamanhos diferentes para iPhone e iPad. Eu abri meu modelo de ícone de aplicativo, arquivo psd. Vá para este “Editar me” e salve. Clique em “Ok” se houver incompatibilidade de perfil de cor. Não se preocupe com isso. Agora, eu vou para esta janela, e organizar, e azulejo tudo verticalmente. Agora, para isso, a forma do meu ícone, vá para isto. Eu vou agrupar todos eles, e eu vou arrastá-los para aqui neste arquivo Icon 1.psd. Agora, eu vou fechar este, e nós vamos novamente ladrilhá-los para abas. Agora, primeiro de tudo, vamos excluir este ícone de aplicativo superior Glifo de modelo, e então vamos converter este ícone de e-mail aplicativo para Objeto Inteligente, alt F5, ou você pode clicar com o botão direito do mouse e converter para Objeto Inteligente assim. Converta para Objeto Inteligente e, em seguida, vamos fazer mais algumas alterações, esconder esses gradientes agora, e ativar esse plano de fundo, e alinhar todos eles no meio, assim. Ctrl D para desmarcar. Agora, deixe-me mostrar como vamos usar isso. Primeiro de tudo, vamos apenas salvá-lo Ctrl S e ver o que está acontecendo em nosso ícone de aplicativo enquanto nosso ícone de aplicativo está aqui. Você pode ver como nossos cantos arredondados estão funcionando aqui. Mas só para consertá-los, deixe-me mostrar-lhe o truque. Vamos ocultar nosso plano de fundo gradiente, fundo de escala completa, e ir para esta máscara externa. A máscara exterior está perfeita. Pegue esta camada de máscara interna e mova-a para baixo do Retângulo arredondado, que é o seu plano de fundo. Esta base elevada 3D. Mova esta máscara interior para baixo. Máscara interna é basicamente esta forma para este ícone, então o que nós vamos fazer é, nós vamos cortar nossa forma nesta máscara interior. Clique nisto. Agora, nossa forma está aparecendo no topo da arte da máscara interna, e nós vamos cortar esses dois assim. Este será um ícone de aplicativo perfeitamente arredondado porque nós o cortamos na forma interna como sabemos que este formato de ícone do aplicativo do iOS não é basicamente uma forma arredondada simples, então temos que cortá-lo assim. Ctrl S, e estamos quase terminando com isso. Agora, se você quiser a outra versão do ícone do seu aplicativo, você pode facilmente ocultar esses dois, e você tem esse fundo aqui. Você também pode alterar o gradiente de Radial para Linear assim e remover este Inverso e usar este controle deslizante para um valor um pouco maior, como 145. Se salvarmos agora assim, você pode ver ainda nosso ícone do aplicativo está na forma arredondada, e ele está olhando realmente incrível. É por isso que eu criei este fundo de gradiente simples em primeiro lugar porque eu acho que é mais, você pode ver, ao longo das linhas dessa diferença, e é mais moderno do que o outro, o elevado. Ainda assim, nosso ícone do aplicativo está olhando muito incrível. Vamos passar para a próxima palestra onde estaremos usando ação para exportar todos esses ícones em tamanhos diferentes. 19. Como exportar de aplicativos de IOS de todos os tamanhos: Vamos exportar nosso ícone para diferentes tamanhos de ícone de aplicativo. Para fazer isso, vamos usar nosso arquivo de ação de modelo de ícone de aplicativo. Se você não vir ações aqui, este botão estilo lugar, você pode ir para “Windows” e clicar em “Ações” e ele aparecerá aqui. Então, o que vamos fazer é, eu já carregei minhas ações aqui. Se você não os vir aqui, clique em [inaudível] e vá para “Carregar ações” e vamos navegar para essas ações de modelo de ícone de aplicativo e clicar em “Carregar”. Como isso. Você pode ver o segundo carregado aqui agora. O que vamos fazer agora é usar este modelo de ícone de aplicativo, arquivo de ação, e clicar neste ícone “Exportar Praça” porque, nós vamos exportar ícones quadrados porque iOS não suporta transparência. Primeiro de tudo, vamos exportar os ícones quadrados, clicar nele, jogá-lo, assim. Ele irá mostrar-lhe a caixa de diálogo salvar para Web. Aguarde e clique no botão “Salvar”. Vou guardá-lo na área de trabalho agora mesmo. Clique em “Salvar” assim. Ele criará uma nova pasta para salvar todos esses tamanhos. Deixe-me ir a esta pasta. Você pode ver que todos os nossos ícones de tamanhos diferentes são gerados e nosso ícone de aplicativo de e-mail está mesmo bonito em tamanhos pequenos também. Você pode reconhecer instantaneamente este símbolo. Então esta é a qualidade de um bom ícone de aplicativo. Nossos tamanhos quadrados foram gerados. Vamos gerar os arredondados. Ok, clique neste “Arredondado” e jogar esta ação. Aguarde até que a caixa de diálogo conclua a ação. Está a demorar algum tempo. Mais uma coisa, basta desligar esta conversão para SRGB. É melhor quando você está exportando. Recebi uma dica muito boa. Caso contrário, será um problema quando você tentar vê-lo em outros dispositivos. Agora, vamos ver como nossos ícones arredondados estão parecendo. Estes são os nossos ícones arredondados. Estes são basicamente ícones quando estamos usando sobreposição gradiente ou fundo gradiente. Este fundo simples. Se você quiser ver como seus ícones estão olhando neste fundo, plano fundo elevado 3D, oculte este, ou se algum de vocês quiser mostrá-lo, mostre-o assim e “Salvar”. Agora vamos exportar nossos ícones neste estilo 3D. Agora clique neste “Arredondado” e clique neste botão “Exportar”. Jogue esta ação e nós vamos salvá-la em nosso visual elevado 3D. Vamos usar a transparência, embora o iOS não a ofereça suporte. Mas queremos mostrar aos nossos clientes. Então eles ficam impressionados com nossos projetos. Então este é o truque, só para mostrar-lhes os elevados. Agora deixe-me ver como esses elevados estão parecendo. Eles estão parecendo incríveis. Então este é o processo de geração de ícones do aplicativo que eu uso. Se você realmente quer usar este [inaudível] ou elevado em seu design final, apenas certifique-se de que você gire este outro fundo também e gere seus ícones neste ícone quadrado. Não tente executar sua ação quando você estiver neste arquivo ou ícone PSP. Primeiro vá para este modelo de ícone de aplicativo e tente pressioná-lo. Não aperte dentro disso. Vou desmarcar isto; converter para SRGB. Agora, eu estou usando uma máscara para mostrar esses cantos arredondados, então eu acho que estes serão perfeitos, não se preocupe com eles. Clique em “Salvar”, “Substituir”. Deixe-me ver como nossos ícones vão ficar. Nossos ícones terão a mesma aparência porque o iOS aplicará a redondeza no seu próprio lado e no seu sistema operacional. Então vamos ver os ícones quadrados. Para a saída final, se você quiser esse efeito elevado, use sempre a saída quadrada. Para carregar seus ícones, você deve sempre usar extração quadrada. Então use a ação de exportação que é quadrado ícones do aplicativo. Não use os arredondados. Isto é tudo sobre o meu curso. Se você quiser um fundo simples atrás dele, você pode ocultar este e você pode usar qualquer outro gradiente. Tente também ocultar essa grade. Não precisamos desta grade. As cores do iOS vão para “Cores do iOS”. Eu acho que se você quiser este elevado, você pode esconder todas essas cores e apenas deixar o cinza e clique nele para movê-lo para a cor branca, assim e gerar, exportar seus ícones. Então, nesta lição, o que aprendemos, exportamos nossos ícones com redondeza e em quadrados. No final, usaremos apenas os ícones quadrados exportados. Esta palestra conclui meu curso para este design de ícones de aplicativo. Espero que tenham gostado desta lição e deste curso. Não se esqueça de rever este curso. Ou se você quiser adicionar algo a ele para tentar usar discussões. Você sempre pode me enviar uma mensagem diretamente. Estou aqui para ajudá-los de todas as maneiras. Então cuide-se e tchau. 20. Introdução ao design de ícones do Android: Bem-vindo à nova seção deste curso, que vai ser Android Launcher App Design, e nós vamos criar um monte de opções de design diferentes para o mesmo ícone do aplicativo, que é basicamente Hydration App, ou verificar seu níveis de água corporal. Então deixe-me mostrar-lhe e apresentar-lhe o que eu vou cobrir nesta seção inteira. Então vamos ver o que tem dentro. Aqui você pode ver a tela principal do Google Nexus e você pode ver aqui nós criamos três ícones, este Liquimeter, e os outros dois são este Hydration e Dropify. Estes são o mesmo ícone do aplicativo, ideias diferentes. Estão todos parecendo legais. Eu amo o coração. Você também pode usar este Liquimeter, que é um ícone de vidro, e eu acho que todos eles se encaixam bem. Então deixe-me mostrar-lhe o que vamos cobrir nesta seção inteira. Você pode ver aqui nós vamos usar este modelo que vai gerar tamanhos diferentes, que são basicamente seis tamanhos para todos os requisitos do aplicativo Android e dispositivos diferentes, e nós vamos criar três temas diferentes . Um é este copo, e depois temos este coração, e depois temos este ícone de soltar. No processo de criação desses três ícones, eu criei um monte de ícones flop como você pode dizer, que nós não somos muito bons. Então este é um deles. Este é um dos fracassados. Eu não gostei. Tinha algumas barras para medir o nível da água, mas parecia, não sei, talvez não estivesse muito bem. Então deixei cair. Deixe-me mostrar-lhe algumas das opções mais cedo que tentei. Estas são mais algumas opções. Você pode ver aqui eu desenhei esta forma de vidro no Illustrator, mas no final, as bordas eram muito bruscas quando o ícone era muito pequeno, então eu deixei ir e eu não usei. Esta é uma outra ideia e eu apenas rejeitei. Então você pode ver se você está indo para projetar um ícone de aplicativo muito bom ou algo legal, você precisa passar por todo um processo. Esboçar, melhorar, gerar novas ideias, tentar ver qual delas está melhorando ou escolher a final. Então, vamos cobrir tudo isso nessas sete ou oito próximas lições, então deixe-me mostrar-lhe como vamos criar esses três ícones legais para Hydration App. Então vamos começar e passar para a próxima lição. 21. Especificações e tamanhos de ícones para Android: Agora, nesta lição vamos discutir as especificações do ícone do aplicativo, como quais são os diferentes tamanhos desses ícones do aplicativo lançador para a plataforma Android. Então vamos discutir o tamanho que precisamos enviar para a App Store ou Google App Store. Então vamos ver se podemos usar transparência e canais alfa nesses ícones. Como podemos usar apenas duas ou três formas ou podemos usar qualquer transparência ou fundo transparente nesses ícones. Vamos começar. Basicamente, cada aplicativo Android precisa de seis tamanhos de ícones diferentes, 512 pixels, que é o maior que você pode ver aqui. É basicamente para Google App Store. Os outros são para outras resoluções do Google Android. Se você quiser saber mais sobre essas densidades, resoluções de tela, você precisa fazer meu curso Tipográfico. Há uma seção completa sobre todas essas coisas Android e iOS e eles são diferentes tamanhos de tela e como projetar para eles. Neste curso você não precisa se preocupar muito com eles se você está apenas focando em projetar ícones. Estes são seis tamanhos. Deixe-me mostrar-lhe alguns recursos online como este. Vou compartilhar essas ligações com você. Estes são os tamanhos de ícones do aplicativo, 48 por 48 pixels e todos eles estarão em formato PNG, formato transparente. Isto é para hdpi 72 pixels por 72 pixels. Estes são todos os tamanhos quadrados e 144 por 144, 192, 512 para o Google Play Store. Ok? Estes são todos os tamanhos de ícones. Uma coisa que você precisa lembrar é que estes são chamados de ícones lançadores. Ok? Estes não são outros ícones como você pode ver o que o diálogo da barra de ação e nossos ícones de guia. Estes são chamados de ícones de lançador ou ícones de aplicativos. Tenha em mente que precisamos de seis tamanhos diferentes para eles. Eu também vou compartilhar este documento e ele tem todos os tamanhos para todos os ícones de aplicativos diferentes, iOS, Android, BlackBerry, até mesmo sistema operacional web, Windows phone. Você precisa manter isso em seus URLs e salvar este documento. Agora, a coisa mais legal sobre esses ícones do aplicativo Android é que eles lhe dão total autoridade de que você pode usar transparência em torno do ícone. Você pode criar qualquer forma de ícone como você pode ver aqui. Acabei de criar este ícone de vidro e não há nada em torno dele. Estamos livres para usar canais alfa, PNG. No caso de designs iOS, você sabe que não podemos usar esses truques lá. Você pode ver aqui no ícone do coração, ele está olhando muito legal porque é transparente dos lados e estamos usando essa forma. Você pode ver aqui no canto esquerdo este ícone do telefone, ícone do telefone Android é realmente legal porque ele tem transparência em torno dele e podemos apenas ver a configuração do ícone neste fundo. Estas são algumas diferenças do ícone do aplicativo iOS. Estes são tamanhos diferentes, podemos usar transparência e você pode ver aqui que somos livres para usar transparência em torno dela. Esta é a coisa mais legal sobre esses ícones do aplicativo Android. Acho que é isso. Devemos passar para a próxima lição agora. 22. Faça e dons de ícones para Android: Agora, nesta lição, eu vou discutir alguns dos fazer e não fazer do ícone do aplicativo Android. Eles são quase os mesmos que discutimos nos ícones do aplicativo iOS, mas alguns deles são diferentes. Google Material Design e suas diretrizes de design são realmente criar e o elaborado tudo em detalhes. Vamos ver quais são as diretrizes e fazer e não fazer desses ícones de aplicativos. Agora primeiro vamos ler sobre esses ícones do lançador e há um guia de API no fórum de desenvolvedores do Google, Android.com. Ele vai mostrar-lhe algumas das melhores práticas. Agora você pode ver à direita você está indo para ver as escolas do ícone do lançador, fazer e não fazer, tamanho e formatos. Tamanho e formato que já discutimos é PNG e existem seis tamanhos diferentes. Vamos para as escolas do ícone do aplicativo iniciador. É o mesmo que o ícone do seu aplicativo vai contar a história do seu aplicativo. Certifique-se de que você projetá-lo em um sentido que é como a capa de um livro. Se você pegar uma capa final do livro é muito bonito e quando você abre, há uma história diferente do que você está indo para não gostar dele. mesmo é o problema com esses ícones do lançador. Certifique-se de que o ícone do aplicativo Google Play ou ícone do aplicativo Android contarão a história do que o aplicativo é. Principalmente, também trazemos o esquema de cores mais perto do aplicativo. Se o ícone do aplicativo tem cores muito estranhas e quando você abre o aplicativo e é muito diferente, ou é 3D e o ícone do aplicativo é plano, ou o aplicativo é plano e o ícone do aplicativo é 3D. É um pouco de incompatibilidade. Poucas coisas que você precisa ter em mente é que você vai alinhar seu ícone de aplicativo com sua marca. Deve estar muito mais próximo das diretrizes de design da sua marca ou das cores da marca. Em seguida, ele deve ser facilmente descoberto por diferentes usuários no Google Play. É a mesma coisa que eu mostrei em lições anteriores, que deve ser perceptível entre diferentes ícones. As mesmas coisas que eles estão repetindo aqui você pode ver promover a história da marca, criar um ícone que é único e memorável. Aplica-se a todos os ícones do aplicativo, é fato universal. Também o esquema de cores que está alinhado com sua marca. Então não tentamos nos comunicar muito com o ícone. Significa que não o torna muito complexo. Muitas formas diferentes não tentam usar muitas formas. Ícone simples será mais impactante e mais respeito e mais memorável. Tenha em mente, é por isso que eu uso formas muito simples, como temos usado gota e um coração e um copo. Isso é muito simples, simplicidade vai ganhar no final. Então a mesma coisa que eles repetiram aqui, não tente usar o nome do aplicativo ou texto em seu Pycon, isso é o mesmo que discutimos anteriormente. Mais algumas coisas que já discutimos esta função bem no slot no lançador, tentou ler isso. Agora, comunique-se [inaudível] em tamanhos pequenos. Este é o principal problema, maior parte do tempo que temos. Eu descartei um monte de ícones quando eu estava projetando os ícones do aplicativo Glass porque eles foram irregulares em tamanhos pequenos. É por isso que eu fui para formas inteiras como vidro cheio ou coração ou talvez uma gota. Aqui está um ponto muito bom, trabalhar em grande variedade de fundos. Tenha em mente que seus usuários vão criar um monte de diferentes tipos de fundos e seus papéis de parede móveis serão diferentes. Tenha em mente que suas cores são tão vibrantes e que podem ser usadas em qualquer plano de fundo. Esta é a dica principal. Aqui está mais uma coisa, refletir o modelo de iluminação implícita do lançador. É basicamente que a luz no ícone do aplicativo vai ser do topo, por isso deve gerar sombra na parte inferior. Esta linha significa que, a luz estará vindo no ângulo de 90 graus a partir do topo. Se o ícone for 3D use perspectiva. Não tente usar muito prospectivo, caso contrário, não será reconhecível. Você pode ver aqui este ícone de telefone é um pouco em perspectiva e este ícone de aplicativo de filme. Eu normalmente vou com os ícones simples. Não sou muito bom em perspectiva. Eu tentei projetar ícones simples, eu acho que se você está limitado com como eu, você deve tentar projetar assim. Agora, o último ponto é que, tentou pesar o seu ícone e usar todo o espaço. Agora sobre isso vamos abordar na próxima lição, que é sobre diretrizes de design de material desses ícones do aplicativo Android. Vamos discutir sua grade, para que você possa ver à direita, este é o grande, vamos discutir isso em detalhes na próxima lição. Estas são todas as coisas a fazer e não fazer. Você pode ver aqui que eles mostraram algumas das coisas. Como se você criar detalhes muito pequenos, como você pode ver aqui em tamanhos pequenos, eles não serão visíveis. Você pode ver aqui eles acabaram de criar três, estas barras e eles são facilmente visíveis. Além disso, você pode ver tentou não tentar ocultar a forma do ícone principal. Use esse e deixe o resto. Não precisamos disso. Não tente usar linhas finas. Você pode ver aqui, linha muito fina não vai mostrar muito bem. Este é o problema que eu estava tendo com o ícone de vidro. É desenhado com linhas nos lados, eu tive que fazer as linhas muito grossas. Além disso, a coisa é que se você pode usar algum efeito de papel ou efeito curvo com canais alfa, você pode ver aqui tentou obter o benefício total de seus canais alfa e transparência. Vamos passar para a próxima lição onde vamos discutir o design de materiais. 23. Diretrizes de design de materiais: Agora vamos ver o que os designers do Google estão dizendo sobre suas diretrizes de design e como podemos segui-los para melhorar nosso processo de design de ícones de aplicativos, vamos começar. Agora, se formos a este material.io/guidelines, eles chamam de ícones de produtos. Agora, o principal é que você pode ver no lado direito há uma grade completa sobre como colocar para fora este ícone do aplicativo, então vamos ver o que eles têm. Agora, primeiro eu vou dizer a vocês qual é a abordagem de design deles. Abordagem de design significa, o que é o pensamento ou design thinking ou diretriz por trás de seu Google Material Design. O design do material é basicamente papel em cima de outro papel. Todo o seu design é baseado em papéis empilhados, um papel está lançando sombra no outro papel como você pode ver aqui no estudo de iluminação, que este papel elevado está lançando sombra aqui. Além disso, há luz nesta área aqui. Você pode ver que esta área é um pouco mais brilhante e iluminada pela luz. Além disso, eles têm dois ângulos de luz 90 graus e 45 graus, então tenha isso em mente também. Você pode ver aqui há o protótipo de material, então eles adicionaram cores a ele. É assim que sua filosofia ou abordagem projetada está funcionando especificamente. Para mim, eu acho que sua abordagem de design é semelhante à arte origami do japonês. Eles criam muitas formas diferentes de papel. Agora, chegando à grade, como vamos usar essa grade. Essa grade é basicamente são divididos em quatro patas. Eu acho que, agora a principal coisa que você precisa ter em mente são essas linhas chave. Você pode ver, não tenha medo de todo esse projeto ou de toda essa grade. Basicamente, o que ele diz é que, se você vai permanecer em qualquer uma dessas formas. Agora, se você estiver projetando um ícone de aplicativo arredondado, você precisa permanecer nesta área. Se você estiver projetando um retângulo um, você precisa seguir essas formas que são retângulo, este retângulo superior, talvez você possa projetar um aplicativo de documento, ou ícone de aplicativo de documento, você estará usando este retângulo. Além disso, há um quadrado dentro, então isso não é muito de uma preocupação. Este meio é basicamente ponto focal se você estiver usando algo que você pode usar esta área aqui. Estes são chamados de chaveiros, manter o seu design de acordo com estas linhas principais. Você pode ver aqui eles estão mostrando suas formas de linhas principais separadamente. Este é o quadrado, este é o círculo, este é o retângulo, este é o outro lado do retângulo. Então eles estão mostrando que seu grau de unidade DP, não se preocupe com os DPs, basicamente é tudo em números pares multiplicado principalmente por quatro ou dois, divisível por quatro ou dois. Então aqui é o seu estudo de geometria, você pode ver que existem diferentes ícones lá mostrando que, como este é ícone Chrome, Ele é construído sobre esta geometria. Semelhantes são essas geometrias, elas estão usando formas retangulares. Agora, vamos discutir alguns ícones do produto anatomia, anatomia basicamente existem diferentes porções que eles deram que você precisa usá-los desta maneira e o único número é basicamente o brilho que você pode ver aqui. O brilho do acabamento, que é basicamente o brilho do ícone do aplicativo ou talvez alguma luz, ou talvez algumas sombras na parte superior, ou talvez algum acabamento brilhante. Alguns brilham sobre o seu ícone, então dois e três são fundo material e primeiro plano. Você não precisa se preocupar com eles, isso é fundo, isso é primeiro plano. Quatro é basicamente sua área focal ou sua cor principal que você está usando para o objeto principal, cinco é basicamente sua sombra. Não se preocupe com estes, É muito simples, eles estão mostrando tudo, sua diretriz de design de material é muito elaborada, muito detalhada., você precisa lê-lo com cuidado. Mas eu acho que para o design de ícones, as únicas preocupações principais são comandar essas sombras, e como vamos usar toda a área de forma, essa grade efetivamente. Se você quiser ler tudo isso, você pode ler toda essa diretriz, eu acho que é melhor se você lê-lo cuidadosamente e eles têm um monte de diretrizes de design de materiais diferentes. Mais uma coisa que eu quero mostrar a vocês é a métrica Drop Shadow. Agora, as sombras Drop são muito calculadas, você pode ver aqui elas estão mostrando opacidade 20 por cento. X offset é basicamente do eixo x, por isso não vai se mover para a direita ou para a esquerda. Será de cima para baixo, então ele vai se mover no eixo y 4dp, e desfoque vai ser 4dp. Se você estiver projetando 512 por 512 pixels, então este 4dp significa 16 pixels ou oito pixels. Deixe-me mostrar-lhe com um exemplo em Photo shop. Você pode ver aqui, neste exemplo, eu estou usando a mesma técnica. Agora, se você selecionar esse círculo, você pode ver que eu vou aplicar uma nova sombra aqui, então vamos remover esse efeito e aplicar uma nova sombra. Agora vocês podem ver que estou usando apenas 20% de opacidade, oito de distância e oito pixels de tamanho, então você pode aumentar o tamanho em oitos como esse, 16, você pode ver que está custando uma sombra muito agradável e sutil, como uma sombra de design de material. Além disso, há mais estudos de design de material que você pode ver aqui. Existem estilos diferentes, eu vou compartilhar os links para esses recursos. Você pode simplesmente pegar estes, você pode ver aqui, há diferentes camadas de sombras. Se um elemento é mais elevado ou mais acima na pilha, ele vai custar mais sombra como essa. É assim que esses materiais de design basicamente funciona, É basicamente sombras e luzes e papéis empilhados em cima um do outro. Eu acho que isso é tudo sobre este ícone do aplicativo, Se você quiser ler um todo este documento, você pode lê-lo completamente. Além disso, você pode ver que eles deram algumas cores, nós também podemos escolher as cores a partir daqui, mas eu escolhi de outro lugar, eu vou mostrar-lhe isso também. Isso é tudo sobre diretrizes de design de materiais, eu vou compartilhar com vocês esta sombra de design material, estudo e você pode baixar o PST deste cara e aplicar sombras diferentes. Vamos passar para a próxima lição. 24. Ideia e esboços para ícone de aplicativos: A primeira parte de qualquer design, seja uma ilustração ou ícone de aplicativo ou web design é esboçar. Então pegue papel e lápis e experimente alguns esboços. Então, vou mostrar-lhe os meus esboços aqui. Então vamos vê-los. Aqui estão meus poucos esboços iniciais, Eu usei algumas coisas relacionadas à hidratação, que era vidro ou água, gota de água, uma folha cheia de ondas de água e um copo com alguns, você pode ver aqui, eu usei alguns marcadores ou marcas sobre ele para medir os níveis de água. Estas são as poucas idéias iniciais que eu tinha em minha mente, eu apenas as coloquei no papel. Então, se você não tem qualquer idéia ou sua mente está vazia, então há outra técnica que é pesquisar no Google e obter inspiração ou idéias relacionadas a este conceito. Então o que vamos fazer é ir ao Google e procurar por diferentes ondas de água e aplicativos de água, aplicativos semelhantes. Agora você pode ver aqui temos no Google, Eu procurei por aplicativo de água e você pode ver que há um monte de diferentes aplicativos de água. Seus ícones também estão aparecendo, também como eles se parecem e seu quadro de humor. Você pode preparar um quadro de humor para isso. Então temos gotas de água, algumas garrafas aqui, um copo, e se formos para baixo, há mais gotas de água, e há uma gota de água engraçada aqui. Esta é outra idéia de que a ilustração de um homem ou uma mulher ou uma pessoa está enchendo de água. Mas eu acho que para um ícone de aplicativo que é uma imagem muito pequena, você não pode usar algo assim. Eu tive essa idéia, mas eu descartei porque precisamos de idéias muito simples e básicas, então apenas olhando para o ícone, o usuário deve ser capaz de adivinhar o que vai ser. Estas são poucas ideias. Eu realmente gosto deste hidrato e seu nível de água, então esta é uma nova onda boa. Outra coisa agora sobre o esquema de cores. Se você quiser projetar em apenas uma cor ou duas cores, isso depende de você. Mas eu gosto de boas cores, boas cores vibrantes para atrair o usuário para o ícone, então você pode ver aqui eles têm apenas usar uma cor aqui. Também neste ícone do aplicativo, você pode ver quase um gradiente de cor, e então temos outro que branco e azul, apenas uma cor basicamente. Eu fui e procurei no Google Play por alguns aplicativos de água para idéias que você pode ver que estamos aqui lembrete bebida água e, em seguida, temos no lado direito um monte de outros aplicativos semelhantes, então a maioria deles estão usando algum vidro talvez temporizador, eu não gosto a idéia de temporizador, Eu acho que ele deve estar relacionado com a saúde. É por isso que minha idéia inicial tinha esse coração nele, porque está relacionado à saúde. Então a água é boa para a sua saúde, é por isso que eu uso o símbolo do coração. Agora, se você vai para este iTunes, Há um monte de aplicativos na Apple e você pode ver aqui eles ainda têm a garrafa, Eu acho que é o mesmo, então nós temos gotas, gotas garrafa. Assim, os principais conceitos são todos em torno dos níveis de água e gotas de água, copos e algumas garrafas. Acho que a garrafa precisa de muitos detalhes. Você pode ver aqui algumas curvas outra coisa e eles já têm isso e eu acho que vai se adequar melhor a eles porque seu aplicativo também está mostrando uma garrafa. Então, para cores, você precisa procurar ondas de água. Quando você está indo para procurar por vetores de ondas de água, você vai ver um monte de grandes cores como você pode ver aqui. pouco de água de sombra púrpura e nós temos um monte de salpicos então nós temos outras idéias como você pode ver aqui alguns gradientes de escuro para azul, então um pouco de uma cor roxada com azul, eles estão olhando grande. Então eu tentei escolher cores dessas imagens. Eu selecionei talvez uma, duas ou três cores daqui, e uma cor de talvez esta cor roxa, e usá-los como minhas quatro cores, ok, para o ícone do aplicativo. Para as ondas, você vai obter algumas cores e idéias daqui, como você pode ver esta também é uma onda muito boa, onda oceânica. Este muito único, eu acho, eu não acho que é muito facilmente reconhecível. Então você pode ver que há mais idéias sobre ondas, tipos de ondas, um, dois, três e quatro tipos diferentes e então nós também temos essa idéia, ondas em cima de [inaudível]. Este é o que eu usei no ícone do meu aplicativo, então para ideação e esboço, você precisa ver as idéias de outros aplicativos e outros designers, é assim que o mundo funciona, você olha para o carro de outra pessoa e desenha o seu próprio, ou talvez o projetou melhor do que eles, então é assim que vamos obter nosso esquema de cores e nossos símbolos principais. Agora, na próxima lição, vamos projetar nossos principais símbolos no Illustrator. Então vamos passar para a próxima lição. 25. Como usar ativos de ícones de aplicativos e modelos: Nesta lição, vou compartilhar vocês e mostrar os recursos que vamos usar neste curso e neste modelo de ícone de produto Android que vamos usar. Há apenas alguns deles. Eu encontrei dados realmente profissional e ajuda você a gerar ícones de aplicativos facilmente e economiza seu tempo. Se você quiser economizar seu tempo, você precisa usar esses modelos. Você também pode criar todos esses tamanhos, mesmo no Adobe Illustrator e até no Photoshop. Basta criar um deles e exportá-los para tamanhos diferentes. Mas eu acho que é melhor que você use esses tipos de modelos. Eles podem gerar esses ícones em nenhum momento. Além disso, eles podem mostrar-lhe esta pré-visualização que é muito útil. Dois deles, eu realmente gosto, Eu vou compartilhar os URLs desses modelos de ícone de aplicativo. Vamos para o nosso navegador. Note que o primeiro, o melhor profissional é este applypixels.com. Anteriormente, era um modelo passado, antes de ser gratuito, agora é pago. Você precisa pagar US $9 por mês para obter esses incríveis modelos de ícone de aplicativo. Eu sou um fã de ferramentas gratuitas como essa, então eu tenho a versão 2 para este ícone do produto Android. Neste momento, a versão atual é três e há algumas mudanças nele. Como mais uma edição de tamanho que é 114 pixels, que é para a Amazon que você pode ver aqui. Você também pode vê-lo no log de alterações adicionado um novo tamanho. Este é um deles se você estiver indo para ganhar usando esses modelos e você precisa projetar ícones de aplicativo para ganhar e é a sua profissão, então eu acho que você deve comprar a licença para ele. Vou compartilhar a versão gratuita com vocês, então não se esqueçam de baixá-la, é a versão 2.0. O segundo é deste tipo. Estes são vários proprietários é de Behance e este também é muito bom modelo, muito fácil de usar. Tem algumas falhas, então vou discutir isso em um minuto. Aqui está, você pode ver aqui tamanhos diferentes. Um monte de grandes visualizações, até mesmo Google App Store. Em seguida, ele está nesses aplicativos e está na trabalho ou seja lá o que você chama de tela de desktop móvel. O terceiro que eu vou mostrar é a partir deste Android developer.android.com. Se você for para esta área aqui, no lado direito, você pode ver aqui nos downloads “Android Icon Template Pack”. Se você clicar aqui, ele vai baixar o modelo. É basicamente dos caras de Bjango, eu acho. Eu não gosto muito, mas se você quiser baixá-lo de cima, você pode usar isso. Todos esses modelos de ícones, eles têm personalidades semelhantes. Suas técnicas são quase as mesmas. Você apenas desenha um tamanho e eles vão extrair todos os outros. Não se confunda que, se você baixar algum outro modelo, você não vai trabalhar com ele. Agora vou mudar para o meu Photoshop e vamos ver o que temos nesses modelos. Você pode ver o que aqui, este é o modelo de ícone do produto Android do modelo de ícone do aplicativo Pixelresort. O site que eu mostrei a você, é a versão 2 que é gratuito, e você pode ver aqui há tamanhos diferentes, uma pré-visualização, e muito claramente é mostrado aqui 512 tamanho e “Editar me e salvar”. Basicamente, você vai clicar duas vezes nisso e editar tudo aqui. Ele tem grade de ícone, ícone de círculo, e retângulo vertical, retângulo horizontal. É apenas um ícone de aplicativo simples agora. Então, se você quiser usar qualquer um deles e você pode ligar e desligar a grade muito bom. Acho que esse cara tornou isso muito profissional. Temos sombra superior aqui, que é se clicado aqui, você pode ver que é “Edge Indigo 900", então é a borda. Se você quiser mudar a cor da borda, você pode ir para cinza ou algo assim. Sempre que você usar qualquer uma desta escolha como quadrado ou círculo, você precisa editar tudo aqui. Se você quiser trazer seu design para um ícone de aplicativo baseado em círculo, você precisa arrastar seus designs até aqui. Se você quiser ocultar isso, você pode ocultar isso e começar a criar o ícone do aplicativo aqui, ou normalmente eu sugiro que você desenhe a forma do ícone do aplicativo principal no Illustrator e, em seguida, trazê-lo aqui. Isto é basicamente uma atomia desses modelos de ícone de aplicativo. Existem diferentes tipos e você pode ver aqui, há sombras e você também pode ativar a versão alfa e versões beta, estas são tags diferentes. Isto é tudo sobre estes. Deixe-me ir para o outro. O outro que eu gosto é este. Ele tem este tamanho 1080, então se você clicar duas vezes é basicamente em 1080. Ele também tem, você pode ver aqui, esta é a máscara de grade, então esta é basicamente a grade de ícones. Então temos este ícone aqui. Eu só arrastei este ícone de aplicativo que eu fiz no Illustrator para aqui, é basicamente formas de ilustrador. Este é um que eu tentei antes, é feio, foi um dos rejeitados. momento eu estou usando este círculo, há uma falha com isso, que é basicamente, que se eu tentar virar o “Drop Shadow” aqui, então se eu salvá-lo com uma sombra, você pode ver no, deixe me ampliar, você pode ver para os tamanhos muito pequenos como este, 96 e 72 pixels por 72 pixels, há uma linha irregular em torno do meu design. Não está mostrando corretamente minha sombra. Se você quiser usar este modelo de ícone de aplicativo, eu sugiro que você nunca use sombra sobre esta forma aqui. Se você quiser usar AVC, isso é com você. Vai realmente funcionar muito bem. Você pode ver aqui, ainda tem algumas bordas irregulares. Eu acho que você deve apenas ficar com este aqui e não usar qualquer forma ou sombra em torno desta forma maior. Se a forma do ícone do aplicativo, e se eu salvá-lo, você pode ver a visualização aqui. Deixa-me mostrar-te a pré-visualização. Aqui está. Deixe-me reduzir para 100 por cento. Esta é a aparência do ícone do seu aplicativo. Tem prévias muito agradáveis, mas a extração, quando você extrair seus ícones do aplicativo, eles vão parecer feios se você estiver usando alguma sombra aqui. Não tente usar sombras aqui. Estes são os dois modelos que eu recomendo. Um é este modelo de ícone do produto Android do site eu acho applypixel, este é o cara Michael Flarup, eu acho. Esse é o cara que criou isso, e eu acho que eles são melhores que qualquer um deles. Você pode ver que há poucos erros e falhas neste como sombras que não saem muito bem, então é isso. Se você quiser usar apenas o livre, vá para este modelo de ícone Material Design e use este. Se você quiser usar o pago, a versão mais atualizada 3.0 para este, então você vai e paga por ele. Eu vou compartilhar este 2.0. e todos esses modelos com você, então não se preocupe com isso. Eu só vou fazer este curso com recursos gratuitos. Na próxima lição, criaremos as formas básicas do ícone do aplicativo no Illustrator. Vamos passar para a próxima lição. 26. Como criar forma de vidro no Adobe Illustrator: Vamos começar a projetar nosso ícone de aplicativo. Primeiro, vamos desenhar esta forma de gota. Essa forma de gotícula já está disponível nas formas básicas do Photoshop. Você pode clicar aqui. Você pode ver no painel Formas, se você seguir em frente e selecionar todas as formas que você vai ver. Há uma gota aqui. Deixa-me mostrar-te. Aqui está. Além disso, temos este coração aqui. Para essas duas formas, não vamos desenhá-las no Illustrator porque acredito que se você já tem uma carta, você não deve construí-la novamente. Então temos essas ondas. Ficamos com estas ondas e este ícone de vidro ou recipiente. Esta forma de vidro e esta forma de onda, estas ondas de água, vamos desenhá-las no Illustrator. Vamos para o Illustrator e vou configurar algumas configurações do Illustrator de acordo com essas diretrizes de design e nosso sistema de grade. Então vamos projetá-lo. Vamos mudar para o Illustrator. Agora, eu abri o Illustrator. Se você for para Editar e Preferências, vá para Geral. O que eu fiz aqui está nas Preferências, eu defini esse incremento para dois pixels e Raio de Canto para 16 pixels. Tudo está em números pares, ou você pode ver que esta grade é construída em 16 pixels. É muito bom porque seu ícone principal vai ser convertido em um monte de tamanhos menores. 16 é divisível por 2 muitas vezes. Isto é uma coisa. Em seguida, vá para Guias e Grade e grade a cada 32 pixels e subdivisões quatro. É assim que eu defini minhas grades e meus incrementos de pixel do teclado. Estas são as configurações que você precisa fazer para o seu Illustrator. Vou pressionar “Ok”. Agora, vamos abrir um novo arquivo, “Novo”. O tamanho será de 512 pixels, porque é o tamanho principal. É o maior tamanho, e usar o modo RGB. Vamos projetar para dispositivos digitais RGB. Modo de Visualização deve estar em pixels, os Efeitos de Raster devem ser uma tela. Alinhar Novos Objetos à Grade de Pixel é melhor se você verificar este porque seus itens ou seus elementos de design vão ficar com as linhas da grade. Então, isso é melhor para um melhor alinhamento. Além disso, vamos mudar para Pixels, porque estamos projetando tudo em pixels. Aperte “Ok”. Aqui temos a nossa tela. Vamos ampliar e diminuir o zoom. Como você pode ver aqui nós temos nossa grade definida, é mais fácil projetar desta maneira. Agora, vamos desenhar nossa forma de vidro. Vamos pegar nossa ferramenta de caneta. Primeiro, vamos desenhar apenas uma forma simples, linhas retas. Então vamos expandi-lo aqui. Linhas retas, assim. Clique aqui, clique aqui, e depois clique ali. Temos apenas um quadrado, ou como você pode ver um retângulo. Vamos pressionar a tecla “A” no seu teclado para selecionar esta Ferramenta de Seleção Direta. Vamos selecionar primeiro este. Vou movê-lo 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Então, 10 vezes por aqui. Acho que moveu 20 pixels, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Como isso. Se você quiser movê-lo mais, você pode movê-lo mais. 1, 2, 3, 4, 5, 6, 7, e 1, 2, 3, 4, 5, 6, 7. Temos quase uma forma muito agradável deste copo aqui. O que vamos fazer é arredondar estas duas curvas. Se você quiser arredondá-los, você pode contorná-los. Apenas uma forma de vidro simples e reta, você pode deixá-lo assim. O que eu vou fazer é apertar “A” de novo, e eu vou selecionar este canto aqui. Você pode ver aqui, há um pequeno ícone aqui que é este. Sempre que eu passar o mouse sobre este ponto, eu posso arrastá-lo assim ou clicar nele. Se você clicar duas vezes sobre ele, você pode ver aqui é o raio. Vou ajustá-lo para 32. Além disso, vou clicar duas vezes e defini-la para 32. Tudo está em números pares. Há mais uma coisa. Vá para o Traçado e faça com que seja pelo menos 32 pixels. Assim, muito grosso. Ou, se você quiser, você pode ir para os 24 pixels, mas não inferior a 20 pixels. Também mantenha isso em números pares. Esta é a nossa forma principal. Se você quiser, você pode apenas remover esta cor interior aqui e manter este golpe aqui. Temos este derrame. Se você quiser mover o traço para dentro ou para fora, você pode movê-lo para cá assim. Está parecendo bom. Se você quiser fazer algo assim, alinhe o traço no exterior, no meio ou em qualquer posição que você quiser. Eu o desenhei aqui assim, então vou mantê-lo assim. Nossa forma de vidro principal está pronta. Por que eu fiz isso em tela de 512 e 512 pixels? Porque o nosso ícone principal será 512 por 512. Preciso ver quanto espaço vai demorar. Se eu precisar eu posso expandi-lo pressionando “Shift” e “Alt” ou “Option key”, e ver onde eu posso torná-lo muito maior. Além disso, posso remover o derrame se eu quiser, assim. É para ver quanto espaço vai ocupar. Esta é realmente boa forma. Uma forma é feita. Nós criamos esta forma aqui. Vou guardá-lo na área de trabalho. Eu já o construí, então não se preocupe com isso. Forma de vidro. Por que construí essas formas no Illustrator? Porque o Illustrator é basicamente a ferramenta real para todos esses objetos vetoriais e cantos agradáveis, nítidos e realmente bons. Photoshop é um software raster, por isso vai mostrar alguns problemas. Como bordas irregulares ou algo assim. Além disso, você pode ver aqui o golpe é um pouco nem mesmo então eu vou torná-lo um número par, talvez 32. Tenha em mente que tudo é sempre design em números pares, por isso é um ajuste perfeito. Vamos passar para a próxima lição. Nós vamos projetar nossas formas de água ou ondas. 27. Como criar água no Illustrator: Nesta lição vamos criar essas belas ondas de água no Illustrator. Então vamos entrar no ilustrador e começar a construir essa forma. Agora, novamente, vou criar um novo arquivo com as mesmas dimensões, 512 pixels por 512, RGB, tela de 72 pixels e modo de visualização de pixels e pressionar “Ok”. Vou ligar a minha grelha aqui. Não importa muito da grade, mas ajuda você a usar a ferramenta de dobra com muita facilidade. É muito fácil usar ferramenta de dobra como esta. Vou arrastar o meu esquema de cores até aqui. Eu vou abrir e você pode ver o que aqui, ondas de água deformadas. Tenho um esquema de cores. Se você for a este “Amostras”, você pode ver ali que eu carreguei-o aqui. Se não o tiver aqui, pode carregá-lo aqui. Você pressiona “Outra Biblioteca” e vai para “Desktop” ou onde quer que você tenha salvo este arquivo, e Water Waves e “Open” e ele será carregado aqui assim. Você pode arrastá-lo até aqui assim. Eu todos pronto tê-lo aqui, então eu vou usar essas quatro cores. Coloquei estas quatro cores nas minhas amostras. Se você não sabe carregar, eu já te mostrei que você precisa carregar isso. Você pode ver aqui Ondas de Água deformadas. Se eu clicar aqui você pode ver, ele vai carregar minha biblioteca. Vou compartilhar esse arquivo de esquema de cores com você, então não se preocupe com isso. Aqui estão as minhas cores organizadas e este é o meu arquivo ou tela principal. Vou pegar minha ferramenta de caneta. Basta pensar que este é o seu ícone principal do aplicativo. Vou começar a desenhar aqui, talvez a partir deste ponto ou deste ponto. Se você quiser ser muito preciso, você pode desenhar a partir daqui e clicar aqui assim. Arraste e certifique-se de arrastar até as extremidades dessas caixas pequenas. Você pode ver que ambos são iguais em ambos os lados e sair e então eu vou clicar uma vez aqui ou aqui. Aqui faz sentido. É realmente simétrico, então eu vou clicar aqui. Vou repetir isso de novo e de novo. Desculpe. “Controle Z” ou “Command Z” para voltar. Então eu vou fazer isso de novo e vou clicar aqui. Agora, nós vamos clicar fora desta tela como esta apenas para preenchê-la porque nós vamos cortar esta forma em outra forma, que é o nosso ícone principal, ou talvez vidro ou algo assim ou até mesmo coração. Não precisamos de precisão aqui. Vou clicar nisto. Vamos remover o derrame. Não precisamos de nenhum derrame aqui, então certifique-se de que não tenha nenhum derrame. Agora selecione esta camada e vamos para Amostras, e vamos usar essa cor. Na verdade, o acidente vascular cerebral foi selecionado, então vou mudar para este. É a nossa cor de primeiro plano e remover o traço novamente e vamos usar esta cor aqui. Vou pressionar minha tecla “Option” ou “Alt” para duplicá-la assim. Basta arrastá-lo até aqui, arrastá-lo para baixo. Você também pode pressionar “Shift” para alinhá-lo na mesma linha. Aqui temos o segundo. Mova para a segunda cor e repita isso novamente e novamente. Vamos selecionar a terceira cor, que é essa cor nítida. Vamos criar outra cópia, que é a última, e vamos selecionar essa cor mais escura. Você pode ver que criamos nossas ondas. Eles são um pouco pontudos. Se você quer alguma mudança nele ou algum drama adicionado a esta forma, você vai distorcê-lo. Para distorção, há muitos efeitos. Como você pode ir para “Distorcer & Transformar” e você pode usar este ziguezague. Ativar a visualização e torná-lo suave e reduzir os cumes de tamanho por segmento zero, porque todos nós prontos têm cumes. Você pode ver aqui, essas ondas são totalmente diferentes. Você pode brincar com o tamanho. Seja qual for o tamanho que você quiser, você pode ir em frente com ele. Posso ir com dois ou talvez um ponto. Cabe a você. Estas ondas são totalmente diferentes. Há mais um efeito que eu usei é ir para “Transformar” e ir para “Cisalhar”. Eu usei cisalhamento porque eu vou deformá-los. Vou mostrar que estão se movendo. Eu uso este ângulo. Eu uso este ângulo junto com, eu acho, 60 para este eixo. Vamos ver a prévia. Minhas ondas cortaram ou se moveram, deformaram. Este é o objetivo principal, enquanto você está criando seus elementos de ícone, você pode deformá-los ou usá-los. Crie algum interesse nele. Clique aqui assim. Tente experimentar com ele, se você gosta de algum ângulo aqui, você pode usar isso. Também podemos movê-lo para o lugar assim. Veja o efeito que o efeito está vindo basicamente. Há mais algumas coisas como se você quiser cantos arredondados ou algo assim, você pode ir para este “Stylize”, e você pode arredondar os cantos. Pré-visualização. Então dez pontos ou talvez 20 pontos ou o que você pode ver aqui. Agora os cantos são arredondados e eles estão olhando muito suave e muito agradável. Há muitas maneiras de usar essas ondas de água e tentar arredondá-las ou tentar criar variações com deformá-las ou usar outros efeitos como este. Eu te mostrei este ziguezague. Você também pode usar esses outros efeitos como este “Wave”. Se eu for para esta onda, desculpe, eu não selecionei nenhuma camada ou objeto. Eu vou para este “Wave”. Vamos ver o que nos vai mostrar. Agora você pode ver que há mais drama nisso. Poucas ondas são altas e poucas são muito baixas. Você pode usá-los assim. Você também pode selecionar camadas únicas. Se você quiser obter alguma variação para este ou este, você pode selecionar este e ir para este efeito de onda e tentar dobrá-lo aqui. Talvez você possa usar algo assim. Agora você pode ver aqui que temos uma diferença muito mais como esta. Além disso, você pode selecionar este e usar o mesmo aplicar. Temos alguns efeitos diferentes aplicados aqui. Você pode salvar o formulário desta onda e podemos usá-lo em nosso ícone final do aplicativo. Vamos cortar estas quatro ondas na forma do nosso coração e gotículas ou até mesmo no nosso copo. Isso encerra nossa criação de formas principais, nossa principal parte do Illustrator deste exercício. Eu vou salvá-lo e vamos passar para a próxima lição. Vamos ver o que podemos fazer no Photoshop finalmente, para converter estes e clipá-los em ícones de aplicativos agradáveis. Fique ligado e se tiver alguma pergunta, não hesite em me perguntar. Estou sempre aqui. Eu vou te ajudar em tudo. Se você não sabe muito sobre o Illustrator, posso orientá-lo para onde obter tutoriais ou talvez bons cursos sobre o básico do ilustrador. Vamos passar para a próxima lição. 28. Como criar o ícone do coração: Agora vamos entrar em ação e vamos pegar essas ondas e vamos trazê-las para o Photoshop. Vamos criar primeiro o ícone do coração e depois o da gota. Ambos são basicamente iguais. Eu vou criar o coração um, então eu vou dar-lhe o gotícula um, ícone de gota, ícone de aplicativo para o exercício. O que vamos fazer é selecionar tudo. Controle A e nós vamos copiá-lo e, em seguida, vamos mudar para o Photoshop. Aqui temos este modelo de ícone de produto Android. Estou usando este 2.0 que é livre de aplicar pixels. Anteriormente, era appicontemplate.com. no lado direito você pode ver aqui temos 512 e editar-me e salvar. Clique duas vezes sobre isso. É camada inteligente. Se você não sabe o que é um objeto inteligente ou uma camada inteligente, então você precisa ver meu outro curso. Primeiro vamos a esta praça. Ligue a grade e nós vamos esconder tudo essa glifia e também eu vou esconder este fundo, e com estas bordas, e este também. O que eu vou fazer é selecionar esta ferramenta, esta ferramenta em forma personalizada, e eu vou selecionar meu coração aqui. Não é o meu coração, mas é de um cara do Photoshop. Ele deixou aqui. Nós vamos, se você não vir este coração aqui, você pode selecionar todos estes e eles vão mostrar todas as formas. Essas são as formas padrão com o Photoshop. Vou clicar neste coração e vamos usá-lo aqui. Pressione “Shift” enquanto o arrasta até aqui. Se você quiser um pouco mais, eu acho que eu também posso deixá-lo se eu quiser expandi-lo ou fazê-lo fora de proporção. Como isso. Isto parece bom. Agora vou usar esta grade. Eu vou dimensioná-lo, Controle t ou Comando T, e eu vou dimensioná-lo para os cantos desses círculos. Está parecendo muito bom, boas proporções. Essas grades vão basicamente nos ajudar a construir um ícone proporcional. Ele está olhando muito bem equilibrado e agradável. Vou alinhá-lo ao centro. Este é o nosso principal ícone ou forma do coração. Então vamos movê-lo para branco, cor branca. Agora o próximo passo é que vamos desmarcá-lo e vamos colar nossa camada copiamos nosso objeto, copiamos do Illustrator. Quando pressionamos “Colar” ou “Control v” ou “Command v”, vamos usar este objeto inteligente. Assim, e vamos alinhá-lo aqui, assim. Agora você pode ver no lado direito o ícone do coração está aqui, e objeto inteligente, nosso objeto inteligente vetorial transportado do Illustrator está aqui. Truque simples é que vamos pressionar “Opção” ou “tecla Alt” e entrar entre essas duas camadas e clicar uma vez, e ele vai clipar dentro deste. Agora é assim que vamos cortar esconder esta grade. Você pode ver que nosso ícone do coração está quase pronto agora. Mais algumas coisas que podemos fazer. Agora está cortado. Podemos movê-lo, como talvez precisemos, desculpe, Controle T e podemos girá-lo assim. Talvez assim. Também podemos redimensioná-lo assim. Parece muito bom, talvez algo assim. Essas ondas estão parecendo muito legais. A parte divertida é deixar tudo aqui. Agora, se eu vir algum problema, como se eu quiser, obter mais distância entre essas camadas, eu vou clicar duas vezes nele e ele vai abrir no Illustrator. Posso consertá-lo assim. Eu vou movê-lo assim, mover este um pouco para baixo como este e Control s, fechar e ele vai ser atualizado no Photoshop instantaneamente. Isso é muito legal que você possa trabalhar com o Illustrator e o Photoshop ao mesmo tempo. Vou voltar a clicar duas vezes e vou melhorar essa distância. Está parecendo um pouco estranho para mim. Vamos ao Photoshop. É muito fixe. Se você quiser movê-lo mais para baixo, você pode usar algo assim. Além disso, você pode reduzir o tamanho, tamanho das ondas, assim. Agora acho que nosso ícone principal está quase completo. Feche-o e clique em “Sim” para salvar. Se você voltar para este modelo de ícone de produto do Illustrator, desculpe , você pode ver o ícone do aplicativo aqui. Ele está realmente ótimo em todos os tamanhos. Muito crocante, muito bom. Você pode ver aqui algo dentro desta coisa, nós vamos removê-lo. Acho que é uma camada acabada. Estas são camadas acabadas e brilha. Se você quiser usá-los, você precisa arrastar seu design. Vou agrupá-lo. Este é o meu projeto, e eu vou pegá-lo e removê-lo para baixo aqui, onde tínhamos isso. Vou clicar nele e assim. Talvez acima disso ou abaixo disso, assim. Vou removê-lo, não sei se está entrando nesta glifia. Vou movê-lo para cá. Eu não sei por que ele está usando algum tipo de quadrado por aqui. Talvez eu precise movê-lo para fora deste cuidado. Não estamos usando esse cuidado, mas estamos usando basicamente o círculo aqui. Se você quiser, você pode movê-lo para a área circular aqui assim. Vou usar o círculo em vez deste quadrado. Eu me mudei por projeto para cá e preciso que meu projeto seja movido para cá assim, e eu vou esconder a base. É perfeito, e eu vou esconder a grade. Isso está ótimo. Não sei por que estava mostrando algo no fundo. Havia algumas camadas, muitas camadas. Certifique-se de que tudo está perfeito. Se você quer o alfa e o beta aqui, você pode usá-lo. Se você abrir esta pasta, poderá usar versões beta ou alfa, se desejar. Em seguida, o ícone do seu aplicativo será assim. Prefiro sem nada. Este é o nosso ícone principal. Nós projetamos nosso ícone principal. Agora, para extrair todos esses ícones, vou mostrar tudo na última lição. Fique atento. Na próxima lição vamos criar o ícone do aplicativo desse copo com a água, e vamos usar outro modelo. Vamos passar para a próxima lição. 29. Como finalizar o ícone de vidro no modelo no Photoshop: Agora nesta lição vamos usar nosso ícone de forma de vidro que criamos no Illustrator, e vamos trazê-lo no Photoshop e vamos usar outro modelo de ícone de aplicativo, que é Material Design Icon Template e é totalmente gratuito. Há muito poucos problemas com ele, mas ainda acho que é um dos melhores e é gratuito. Então nós vamos começar com este ícone em branco e agora se você abrir o painel de camadas laterais direito e ir para esses ícones na parte inferior, você vai ver este 1080 e ele diz, editar. Nós vamos fazer tudo nesta área clique duas vezes neste “Editar” e, basicamente, é um objeto inteligente. Agora vamos criar este. Nós vamos para o Illustrator e nós vamos pegar esta camada, nós projetamos esta forma de vidro e copiá-lo. Vamos colá-lo aqui no Photoshop como objeto inteligente “Control A” e também podemos usar essa grade com precisão como esta. Então eu estou realmente amando essa grade. Você pode ver tudo aqui eu uso essas linhas internas para alinhar este ícone do aplicativo e este vidro. Vou esconder esta grelha. Se eu estiver certo, vou usar meu pequeno eclipse, desculpe. Vou usar o meu grande eclipse e se a cor é outra coisa, clique duas vezes nele e use a cor branca. Remova todos os efeitos sobre ele. Então, se ele tiver traçado ou a sobreposição de cor ou sombra, basta removê-los. Além disso, se você vir aqui as cores não estão funcionando, certifique-se de que tanto a opacidade quanto o preenchimento estão definidos para 100%. Então é isso e já usamos este. Agora vamos para este Illustrator novamente, e vamos abrir nossas ondas de água, copiar estas. Nós também vamos importá-los no Photoshop, colá-los aqui e nós já colamos todos eles aqui assim. O que vamos fazer é que eles vão ficar atrás desta forma vetorial, assim. Agora selecione este objeto inteligente vetorial e pressione “W” para selecionar a fonte mágica no Photoshop e selecione esta seção interna deste objeto inteligente vetorial. Vá para selecionar, modificar e expandir a seleção em um pixels. Eu vou criar outra camada aqui como esta camada um. Pressione “G” e nós vamos ter um pouco de cor aqui, que vai ser branco. Então, assim, nós temos cor branca dentro disso e o que basicamente, eu estou tentando fazer é eu vou cortar isso dentro desta camada interna. Então eu vou cortar isso com a tecla de opção Alt e é assim que ele foi cortado. Realmente parece ótimo. Então, se você quiser usar algumas ondas de água, você pode contratá-lo e expandi-lo o que quiser. Você pode ver aqui, agora estou usando algo assim. Além disso, se você ver no meu design original do ícone, eu removi a quarta cor aqui. Então o que eu fiz foi clicar duas vezes sobre isso e remover esta quarta camada e “Control S” ou “Command S” e eu vou voltar. Você pode ver que temos apenas três cores. Se você quiser movê-los mais, você pode movê-los junto assim. Torne a distância um pouco maior, assim. Porque é um copo vai parecer muito legal se tivermos mais distância. Além disso, você pode girá-lo talvez para criar alguma atração ou algo assim. Então, talvez algo mais perto disso, movê-lo assim ou algo assim aqui. Então, essas afinações finas, eles vão levar mais tempo. Para mim, pelo menos isso leva mais vezes até o momento em que eu não estou satisfeito. Por isso continuo a mover estes por aí. Então é assim que nosso ícone de aplicativo vai ser. Agora você também pode usar transparência neste grande eclipse. Então eu vou definir essa opacidade para 50 por cento, assim. Então, mais uma coisa eu acho que é um pouco acima, então eu vou movê-lo um pouco para baixo. Aqui estão as minhas três camadas. Então vou tentar agrupá-los. É melhor que seu design esteja em um grupo e você possa movê-lo para baixo assim e “Control S” tente usar a grade, ver onde ele está na grade. Talvez possamos expandi-lo um pouco mais. Use mais área ao redor. Vamos esconder essa coisa “Control S” e vamos ver como está. Então vamos ampliar e ele está realmente ótimo em todos os tamanhos. Você pode ver aqui, este é o ícone do nosso aplicativo. Temos este ponto de vista. Então temos como este em nossa MyApp Store no Google App Store e ele está olhando muito legal em nossa tela principal e eu acho que é isso. Agora, para vocês, eu vou dar a vocês o desafio de criar o ícone de soltar usando a mesma técnica. Você pode enviar esses designs no URL que vou compartilhar com você. Então faça o upload do seu trabalho aqui. Eu vou avaliar o seu trabalho e vamos ver como você vai se apresentar. Então, que o desafio comece. 30. Como extrair todos os tamanhos de ícone para dispositivos Android: Ok, agora nesta última lição, eu vou mostrar a vocês como extrair todos esses ícones, de ambos os modelos. Então eu usei este modelo de ícone de design de material e modelo de ícone de aplicativo Android 2.0. Você também pode baixar a versão 3.0., mas o método será o mesmo, para este cara, Michael Flarup, ele projetou arquivo de ação. Se você acessar essas ações, se não vir ações aqui, você pode ir para Janela e ativar essas ações. Nas ações, copiei essas ações aqui. Se você não vir essas ações, você pode clicar nele e carregar ações. Vá para essas ações de carregamento e navegue pelo arquivo. Eu tenho este modelo de ícone do produto Android 2.0. Arquivo ATN. Os arquivos de ação têm essa extensão ATN. Você precisa carregá-lo e será assim. Depois de carregar isto, certifique-se de que tem o seu ícone. Não há nada em torno dele ou nada extra em torno dele como este criar desligá-lo ou quaisquer sombras ou problemas. Certifique-se de que está tudo bem. Então vamos usá-lo neste arquivo. Então vá para este arquivo e basta clicar sobre isso e, vá para isso. O primeiro é exportar todos os tamanhos, esta é a ação básica. Esta é a pasta de ação, se você clicar aqui, você pode ver que a pasta está fechando e abrindo. Agora clique nele e pressione play e vamos ver esse diálogo e vamos salvá-lo assim. Vou guardá-lo na área de trabalho. Vejamos, tenho muitas pastas abertas. Estes são os tamanhos que gerou 512, 192, 144, 96, 72, 48. Agora falta um tamanho, que é 114. Se você quiser gerá-lo. Não se preocupe com isso. Eu vou usar este 512 e eu vou importá-lo aqui assim e eu vou exportar o tamanho, que vai ser 114, assim e salvar. É assim que você vai criar o tamanho 114, que está faltando neste modelo. Agora eu vou arrastá-lo para dentro disso e eu tenho um conjunto completo, 114, 512, 192, 144, 96. Então este é 114. Então é assim que você vai criar o tamanho que falta aqui. É só um pouco de dor de cabeça, mas acho que vale a pena se você não precisa gastar $10 por mês. Agora chegando a este modelo de ícone Material Design, ele é construído sobre a mesma tecnologia. Então o que vamos fazer é que vamos apenas usar Arquivo Exportar, Salvar para web e ele vai carregar da mesma forma que vamos salvá-lo assim, salvar e estes são todos os arquivos. Vou substituí-los e vamos ver as imagens. Então temos este ícone 512, acho que acabei de selecionar o quadrado. Eu não sei. Deixe-me ir a isto. Então o que diz é que escondem este fundo. Então tente ocultar esse fundo antes de exportar, assim. Isto é muito bom se souberes como fazê-lo. Salve, salve e substitua. Então agora você pode ver que eu tenho esses ícones e eles são transparentes dos lados. Então, se eu arrastá-lo no Photoshop, ele vai ser transparente de todos os lados. Eu realmente amo essa área transparente em torno desta área branca. Está parecendo muito legal mesmo na captura de tela aqui. Eu acho que se eu fiz isso para um dos meus clientes, eu poderia ter cobrado pelo menos US $200 para este ícone de aplicativo ou talvez mais. Agora esta é a última lição para este curso. Seu desafio é criar ícone de aplicativo semelhante com uma gota usando a forma de gotícula. Se tiver algum problema, me avise. Esta é uma escala realmente sólida. Eu acho que normalmente, quantidade mínima para um ícone de aplicativo você deve cobrar pelo menos um $100 para criar um ícone de aplicativo, porque vamos criar como cinco ou seis tamanhos para todas as diferentes plataformas ou resoluções para Android ou até mesmo para iOS, você vai criar para três ou quatro tamanhos. Então eu vou tentar atualizar vocês ou se eu tiver algo novo, eu vou adicioná-lo a este curso. Esta é a última lição. Estou ansioso para ver seus projetos e estarei esperando. Vamos passar para algumas novas habilidades incríveis. Não confira meus outros cursos e adeus, cuide-se e tenha um bom dia.