Como fazer ícones no Pixel Perfect | Margarita Ivanchikova | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Como fazer ícones no Pixel Perfect

teacher avatar Margarita Ivanchikova, Icon and Motion Designer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

9 aulas (11 min)
    • 1. Introdução

      1:21
    • 2. Por onde começar

      2:42
    • 3. Largura do traçado

      1:15
    • 4. Elementos interiores

      1:57
    • 5. Curvas de Bezier

      0:50
    • 6. Quantidade de detalhes

      1:19
    • 7. Perspectiva

      0:30
    • 8. Escala

      0:54
    • 9. Final

      0:32
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

904

Estudantes

7

Projetos

Sobre este curso

b604e43b

Desenhar um ícone de boa aparência Fazer a de de ícone de escalável, de resposta para muitos dispositivos é o que é importante se você quer que alguém a compra/usar seus ícones. Isso precisa de muito pensamento e experiência, e é exatamente o que vou ajudar você

Meu nome é Margarita e nos últimos dois anos E todos os 40.00de de ela é de pixel perfeito.

Então, a tune e veja como fazer seus belas ícones sem a perfeição.

Conheça seu professor

Teacher Profile Image

Margarita Ivanchikova

Icon and Motion Designer

Professor

I love creating animations, vector graphics, clean geometric shapes, and cute characters.

View my profile on Dribbble

Get printed artwork at Society6

 

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Oi, eu sou Margarita. Eu sou um designer que eu posso dizer ponto com Há muitos designers que fazem belos escritos vencedores e eles não sabem por que eles têm que ser grandes, tão perfeito ao mesmo tempo. Os vetores fora do curso são escaláveis. Eles ficarão ótimos e suaves quando eles são grandes. Mas e se você usar um ícone, não como administração? Se é um elemento de interface de usuário em um pequeno 16 a 50 imagem de vendas grandes pode se tornar apenas um florista. Por que nos importamos com o resto de vocês? Porque é assim que ele será realmente renderizado na tela do dispositivo. Todos os Aikens feitos em Victor ex-será descansado arised quando exibido em uma tela de laptop ou dispositivo móvel. Se você está fazendo Aikens esperando que outras pessoas vão usá-lo, então eles devem ser não só bonito na moda, eles devem ser úteis e você pode torná-los perfeitos. Bigs ajudar nesta lição, capaz diariamente cerca de seis suspeitos para ter em mente ao projetar. E Aiken, usarei o Adobe Illustrator. Mas isso realmente não depende do software. Você pode fazer pixel Aikens perfeito no esboço para outro gráfico redutor. Você escolhe 2. Por onde começar: vamos começar a partir da configuração e Adobe Illustrator Documento para criar uma grande venda Aiken perfeito para estes clique de novo e disse grandes Eus como sindicatos e, em seguida, um número inteiro fora grandes células também e esconder. Então iríamos para as preferências. Por isto. Você pode simplesmente pressionar o controle K em seu teclado e, em seguida, ir para guias e ganância. Vou definir um pixel para linha de ganância e outro para subdivisões. Clique em OK. Em seguida, você pode ir para o novo show vista grande, ou você pode usar um atalho e ele liga um porco acordado, e cada guia mostra as bordas de um pixel. Então você pode ir novamente para muitos de vocês. E há algumas opções. Blag estalou. Uma célula fotográfica estourou. Boyne surtou. Concordou. Vou apenas tirar uma ótima opção. Agora a configuração acabou, e todos os formulários que eu criar vão ser encaixados em células de pico. Seus pontos estão indo para ser colocado direito nas interseções fora das linhas da grade, a fim de verificar se o seu eu não posso falar tão perfeito e ele será descansar arised da melhor maneira possível que você pode virar conhecido pixel prevalecer para tais coisas. Eu costumo usar atalhos, e isso torna o meu trabalho muito mais rápido. Agora eu vou desligar, arrebentou os porcos e carregar e mostrar como os formulários seriam sem ele. Você pode ver como as imagens são borradas. Se você quiser ver mais algumas opções de ajuste para selecionar células, você pode ir para o canto superior direito da janela, e você pode brincar com todas as caixas de seleção para encontrar as melhores preferências para o seu trabalho . Então, como consertar o Victor Aiken que não é perfeito em primeiro lugar? Existem basicamente duas maneiras de tornar o Eiken mais afiado. Primeiro de tudo, eu vou ligar o saco de adoção estalado, concordo. Então eu vou para a verdade dedo seleção direta, e para consertar eu posso. Você pode selecionar os pontos e simplesmente arrastá-los para a grande interseção. Ou você pode selecionar o ponto e corrigir sua posição na parte superior da janela. Normalmente, é melhor manter seus números inteiros, então os fundamentos são tão simples quanto isso. Você só quer manter os pontos no grande prateado, e então você é Eu posso ser nítido e afiado nos restaurantes para você 3. Largura do traçado: A próxima coisa que vamos falar é sobre o derrame. Com aqui, você pode ver exemplos de traçados de 24 e seis pixels, e do outro lado, em 13 e cinco pixels, você pode ver que todas as linhas estão sentadas no grande tão grande. Mas o que acontece se descansarmos os criou? Você pode ver as linhas com o traçado com números pares são descansados perfeitamente. Mas os números ímpares nós os tornaríamos desfocados, então nós vamos fazer um deslocamento fora da linha em si. Basta traçar um pixel para um lado, então esta linha está bem no meio da grande venda. E como você pode ver, o derrame parece todo grande. E isso acontece com as outras linhas quando estão com um número ímpar. A pior coisa que você pode fazer ao acidente vascular cerebral é dizer não o número inteiro. Então não importa se é no grande, tão grande ou ligeiramente oferecido. Ele será desfocado de qualquer maneira, por isso é melhor quando seu traçado com é um número par para dar a linha na grade de pixels, e quando eles traçar com é um número ímpar para mantê-lo bem no meio do grande 4. Elementos interiores: Outra coisa que você pode querer considerar é como os elementos internos de uma Nikon podem afetar seu tamanho. Por exemplo, vamos ver um círculo e um ponto de exclamação nele. As versões corretas são o ombro no topo, e as incorretas estão abaixo. Quando a ICANN tem que traçar pixel e um ponto de exclamação está em com também para selecionar células, então o tamanho do círculo deve ser um número par. Então, o ponto de exclamação pode ser centrado no círculo e, ao mesmo tempo, ser afiado. Vamos ver o que acontece quando o mesmo círculo é feito um pixel maior e o ponto de exclamação é centrado na necessidade. Então é descanso. Ariised é uma confiança azul terrível, então não queríamos que isso acontecesse com o seu Aiken. Agora vamos ver o círculo com um traçado de pixel e um ponto de exclamação em com também um pixel. seu tamanho e a sua posição devem permitir que todos os detalhes sejam colocados no centro e que sejam bem descansados ao mesmo tempo, para que possamos ver o elemento, o golpe. Tudo está relacionado ao tamanho do próprio Eiken. há algo mais que você deve ter em mente ao projetar setas ou outros objetos afiados . Por exemplo, você faz uma flecha quando eles odeiam. Sua ponta de seta não é mesmo número, e seu ponto é colocado direito sobre a ganância em cada site fora. Este ponto metade de um pixel é transparente, então o árabe parece um pouco arredondado. Você pode preferir fazer uma seta, que é em altura e em número. Então o ponto da ponta da flecha vai estar no meio da grande venda, então a ponta de flecha vai ser mais afiada. Cada seta é melhor para o seu próprio contexto, por isso é definitivamente até você qual opção escolher. 5. Curvas de Bezier: Agora vamos ver como você faz pixel perfeito. Posso trabalhar em inglês, curas mais ocupadas, por exemplo. Vamos pegar o ícone escuro. Eu vou ligar o Greek, a grande revisão Soap, e então zoom em seu grande. Eu seleciono o formulário, então agora vemos as mudanças, todo o formulário em si. Ele vai um pouco fora dos pixels, então eles são um pouco transparentes. Não queremos tanta confusão. Então basicamente nós drogamos o ponto para o grego. E então ajustamos da maneira que a alça do ponto não sai da linha da grade que mostra a borda do formulário em si. Às vezes você pode adicionar um pouco mais. Tudo o que você quer fazer é respeitar a ganância. Então vamos ver como fica escuro em Victor. Na maioria dos casos, parece o mesmo que um vencedor. Eu posso, mas parece jogar muito melhor como uma grande revisão sabão 6. Quantidade de detalhes: quando você está projetando e eu posso. Tudo depende do seu tamanho, mesmo da quantidade de detalhes que você pode incluir nele. Eu encontrei este exemplo de belas ilustrações na Web. Ele foi distribuído como um conjunto de ícones e vamos escolher um ICA e vamos ver como ele fica quando descansar arized e dimensionado para baixo. Digamos que fazemos 30 células grandes do lado maior. Agora vamos ver como vai ser. Torná-lo mesmo que o maior que eu posso não é pixel perfeito? Você ainda pode ver um monte de detalhes que não são visíveis na versão menor do vagão. Então, quando você está fazendo algo detalhado e bonito, você tem que prever o tamanho do Eiken que será um colocado na interface ou no site. O que fizemos para um de nossos conjuntos é que nós previmos para diferentes tamanhos de uma Nikon, e nós incluímos diferentes quantidades de detalhes para cada um. Temos cada tamanho de Aiken 80 pixels, 40 grandes vendas, 30 pixels e 16 células de porco. A quantidade de pixels que você pode pagar em cada um deles é muito diferente, por isso incluímos diferentes quantidades de detalhes em todos os tamanhos 7. Perspectiva: A próxima coisa que depende do tamanho do que posso fazer é o uso da perspectiva. Por exemplo, você faz um grande Aiken isométrico do que parece bom. Renderize-o em alguma tela. Tem alguns pequenos detalhes, algumas linhas diagonais. Mas quando é um minúsculo que você pode fazer para um lugar muito particular toda a interface, em seguida, ele vai ser borrada em todos os detalhes apenas será perdido. Então, para tamanhos pequenos de Aiken, é melhor manter o estilo de ícone plano. 8. Escala: quando ele riken está pronto e você sabe que é tamanho básico, você vai enfrentar a escalabilidade ou o ícone. Por exemplo, você criou uma Nikon com 32 pixels de tamanho, então, se você quiser torná-la maior, a melhor maneira de fazê-lo é torná-la duas ou três vezes grande. O importante aqui é usar um número inteiro para multiplicar o tamanho nele. Este caso, quando a escala que eu puder, será levantada. Será tão afiado quanto o que você criou, e também será grande, tão perfeito. Vamos ver um exemplo da escala feita de forma incorreta. Vamos fazer o tamanho fora algum número aleatório aqui e você pode ver que o Eiken fica embaçado porque os pontos dele são reverberação. Mudou porque o tamanho não é em relação ao tamanho básico do Eiken. No entanto, como um vencedor, eu posso dormir todos parecem iguais 9. Final: Agora você tem todas as informações para criar Big auto perfeito Aikens. É um bom momento para aplicar tudo o que ainda é mente cristã o mais rápido possível. Tudo o que você precisa fazer é postar uma captura de tela do seu ícone no molde de revisão bigs up para a seção do projeto abaixo. Se você tiver alguma dúvida, você pode fazê-las na discussão da comunidade. Responderei assim que puder. Quero agradecer-lhe por fazer essas aulas, e se você gosta da aula, eu apreciaria suas críticas positivas e boa sorte com você que eu possa projetar.