Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. UI Design

Como Criar um Conjunto de Botões UI de Player de Música no Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:

Portuguese (Português) translation by Adriana Takagi (you can also view the original English article)

Final product image
What You'll Be Creating

No tutorial de hoje, vamos aprender a como criar o nosso próprio conjunto de botões UI (User Interface) de controle de música, usando algumas das formas e ferramentas mais básicas que o Illustrator tem para oferecer.

E não se esqueça, você sempre pode expandir o pacote indo até o GraphicRiver, onde você vai encontrar uma ótima seleção de ícones temáticos de UI.

Dito isto, certifique-se de preencher essa caneca de café, já que vai ser uma longa e interessante!

1. Como Configurar um Novo Arquivo de Projeto

Supondo que você já tenha o Illustrator instalado e executando em segundo plano, abra ele e vamos configurar um Novo Documento (File > New ou Control-N) usando as seguintes configurações:

  • Number of Artboards (Número de Áreas de Trabalho): 16
  • Spacing (Espaçamento): 20 px
  • Width (Largura): 32 px 
  • Height (Altura): 32 px
  • Units (Unidades): Pixels

E da aba Advanced (Avançado):

  • Color Mode (Modo de cor): RGB
  • Raster Effects (Efeitos de Rasteirização): Screen(72ppi)
  • Preview Mode (Modo de Visualização): Default(Padrão)
setting up a new document

2. Como Configurar uma Grade Personalizada

Como vamos estar criando os ícones usando um fluxo de trabalho de pixel perfeito, vamos querer configurar uma boa pequena Grade, assim podemos ter total controle sobre as nossas formas.

Passo 1

Vá para o submenu Edit > Preferences > Guides & Grid, e ajuste as seguintes configurações:

  • Gridline every (Linha de grade a cada): 1 px
  • Subdivisions (Subdivisões): 1
setting up a custom grid

Dica rápida: você pode aprender mais sobre grades lendo esta parte detalhada em Como o Sistema de Grades do Illustrator Funciona

Passo 2

Depois de configurarmos nossa grade personalizada, tudo que precisamos fazer para garantir que as nossas formas pareçam nítidas é ativar as opções Snap to Grid e Snap to Pixel encontradas sob o menu View, que vai transformar em Snap to Pixel a cada momento que você entrar no modo de Visualização de Pixel (se você está utilizando uma versão anterior do software).

Agora, se você é novo em todo o "Fluxo de Trabalho de Pixel Perfeito", eu recomendo muito que você passe pelo meu tutorial Como Criar uma Arte de Pixel Perfeito, que vai ajudar você a ampliar a suas habilidades técnicas muito rápido.

3. Como Configurar as Camadas

Com o Novo Documento criado, seria uma boa ideia para estruturar nosso projeto usando algumas camadas para separar os ícones reais das grades de referência. Se você estiver familiarizado com meus tutoriais anteriores, você notará que com este levaremos uma abordagem ligeiramente diferente, já que nós estamos baseando o projeto em Pranchetas ao invés de Camadas devido à contagem elevada de ícone.

Dito isto, abra o painel Layers, e crie um total de duas camadas, que vamos renomear do seguinte modo:

  • camada 1: grades de referência (reference grids)
  • camada 2: ícones (icons)
setting up the layers

4. Como Criar as Grades de Referência

As grades de referência (ou grades de base) são um conjunto de superfícies de referência delimitadas com precisão, o que nos permite construir os nossos ícones focando no tamanho e na consistência.

Normalmente, o tamanho das grades determina o tamanho dos ícones reais, e eles devem sempre ser a primeira decisão que você faz ao iniciar um novo projeto, já que você sempre quer começar do menor tamanho possível e construir sobre isso.

Agora, em nosso caso, vamos estar criando o pacote de ícone usando apenas um tamanho, mais exatamente 32 x 32 px, que é a menor escala.

Passo 1

Certifique-se de que você está na camada certa (que seria a primeira) e depois pegue a Ferramenta Rectangle (M) e crie um quadrado laranja (#F15A24) de 32 x 32 px que vamos centralizar à primeira Prancheta e utilizar para definir o tamanho único dos nossos ícones.

creating the main shape for the reference grid

Passo 2

Adicione um menor de 28 x 28 px (#FFFFFF), que vamos posicionar no topo da forma anterior, já que vai atuar como a nossa área de desenho ativa, dando nos assim um padding completo de 2 px para trabalhar.

creating the main shape for the active drawing area

Passo 3

Selecione e agrupe os dois quadrados juntos utilizando o atalho de teclado Control-G e depois crie as grades restantes usando 15 cópias (Control-C > Control-F) que vamos posicionar em cada uma das Pranchetas vazias. Não tenha pressa, e assim que terminar, certifique-se de bloquear a camada atual antes de passar para a próxima parte.

adding the remaining reference grids

5. Como Criar o Botão de Play

Supondo que você tenha gerenciado com sucesso as pequenas grades de referência, vá para a próxima camada (que seria a segunda) e vamos começar o projeto criando o primeiro ícone do conjunto.

Passo 1

Comece criando o corpo principal do botão utilizando um retângulo de 20 x 24 px com um Traço de 4 px de espessura (#152730) com um Round Join, que vamos centralizar com a primeira Prancheta.

creating and positioning the main shape for the play button

Passo 2

Ajuste a forma do retângulo que acabamos de criar, adicionando um novo ponto de ancoragem ao centro de sua borda direita, usando a Ferramenta Add Anchor Point (+) e depois removendo seus superior e inferior direito utilizando a Ferramenta Delete Anchor Point (-).

finishing off the play button

6. Como Criar o Botão de Stop

O próximo botão é provavelmente um dos mais fáceis de criar, uma vez que é feito de uma única forma.

Pegue a Ferramenta Rectangle (M) e crie o corpo do botão utilizando um quadrado de 24 x 24 px com um Traço de 4 px de espessura  (#152730) com um Round Join, que vamos posicionar no centro da segunda prancheta.

creating and positioning the main shape for the stop button

7. Como Criar o Botão de Pause

Supondo que você se posicionou na terceira Prancheta, vamos começar a trabalhar em nosso próximo botão.

Passo 1

Crie a parte esquerda do botão utilizando um retângulo de 8 x 24 px com um Traço de 4 px de espessura (#152730) e um Round Join, que vamos centralizar à borda esquerda da área de desenho ativa, como visto na imagem de referência.

creating and positioning the main shape for the left section of the pause button

Passo 2

Finalize o botão adicionando a sua parte direita utilizando uma cópia (Control-C > Control-F) da forma que acabamos de criar, que vamos posicionar no lado oposto da área de desenho ativa. Depois de ter a cópia no lugar, certifique-se de selecionar e agrupar (Control-G) as duas formas juntas antes de passar para o próximo botão.

finishing off the pause button

8. Como Criar o Botão de Gravar

Vá para a próxima Prancheta (que seria a quarta) e vamos criar rapidamente o botão de gravação.

Passo 1

Pegue a Ferramenta Ellipse (L) e crie um círculo de 24 x 24 px com um Traço de 4 px de espessura (#152730), que vamos centralizar à área de desenho ativa subjacente.

creating and positioning the main shape for the record button

Passo 2

Termine o botão adicionando um círculo menor de 12 x 12 px com um Traço de 4 px de espessura (#EF815B) no centro da forma maior, certificando-se de selecionar e agrupar os dois juntos utilizando o atalho de teclado Control-G.

finishing off the record button

9. Como Criar o Botão Avanço Rápido

Supondo que você já tenha terminado o trabalho no botão anterior, avance para a segunda linha de Pranchetas, onde vamos começar o trabalho sobre o pequeno botão de avanço rápido.

Passo 1

Crie a forma principal para a seta para a direita utilizando um retângulo de 12 x 16 px com um Traço de 4 px de espessura (#EF815B) com um Round Join, que vamos centralizar à borda direita da área desenho ativa.

creating and positioning the main shape for the right arrow of the fast forward button

Passo 2

Transforme a forma que nós criamos em uma seta para a direita, utilizando o mesmo processo usado para o botão de play, adicionando um novo ponto de ancoragem para o centro da sua borda direita usando a Ferramenta Add Anchor Point (+) e depois removendo sua parte superior e inferior direita utilizando a Ferramenta Delete Anchor Point (-).

adjusting the shape of the right arrow of the fast forward button

Passo 3

Termine o botão adicionando a seta para a esquerda utilizando uma cópia (Control-C > Control-F) daquela que acabamos de trabalhar, que nós vamos ajustar definindo a cor do seu Traço para #152730, alinhando-a ao lado esquerdo da área de desenho ativa. Quando estiver pronto, selecione e agrupe as duas formas juntas usando o atalho de teclado Control-G.

finishing off the fast forward button

10. Como Criar o Botão de Retrocesso Rápido

Em seguida, vamos criar o botão de retrocesso rápido com a ajuda do que acabamos de trabalhar.

Faça uma cópia (Control-C > Control-F) das formas que nós acabamos de agrupar e posicionar na próxima Prancheta, certificando-se de refleti-la verticalmente utilizando a ferramenta Reflect (clique com botão direito do mouse > Transform > Reflect > Vertical).

creating the fast backward button

11. Como Criar o Botão Avançar

Posicione-se sobre a próxima Prancheta e vamos criar o botão de avançar.

Passo 1

Comece criando a parte direita do botão, utilizando um retângulo de 6 x 24 px com um Traço de 4 px de espessura (#EF815B) com um Round Join, que vamos centralizar à borda direita da área desenho ativa.

creating and positioning the main shape for the right section of the skip forward button

Passo 2

Adicione a forma principal para a seta voltada para a direita, utilizando um retângulo de 18 x 24 px com um Traço de 4 px de espessura (#152730) com um Round Join, que vamos posicionar no lado oposto da área de desenho ativa subjacente.

creating and positioning the main shape for the left section of the skip forward button

Passo 3

Termine o botão transformando a forma que acabamos de criar em uma seta virada para a direita, certificando-se de selecionar e agrupar (Control-G) todas as suas formas de composição, antes de passar para a próxima.

finishing off the skip forward button

12. Como Criar o Botão Retroceder

Em seguida, vamos criar rapidamente a versão espelhada do botão retroceder em questão de segundos.

Criar uma cópia (Control-C > Control-F) do botão que acabei de trabalhar e posicione-o sobre a próxima Prancheta, certificando-se de refletir ele verticalmente, utilizando a ferramenta Reflect (clique com botão direito do mouse > Transform > Reflect > Vertical).

creating the skip backward button

13. Como Criar o Botão Shuffle

Posicione-se sobre a terceira fila de Pranchetas e vamos começar a trabalhar no botão pequeno Shuffle.

Passo 1

Ligue o modo Pixel Preview (Alt-Control-Y) e depois desenhe um caminho em forma de z, utilizando um Traço de 4 px de espessura (#EF815B) com um Round Cap, utilizando a imagem de referência como seu guia principal. Não tenha pressa e assim que estiver pronto, vá para o próximo passo.

drawing the main shape for the upper section of the shuffle button

Passo 2

Ajuste a forma do caminho que nós acabamos de criar, suavizando a parte interna dos pontos de ancoragem utilizando a ferramenta Convert selected anchor points to smooth e depois reposicionando suas alças a uma distância de 6 px de seu centro.

adjusting the shape of the upper section of the shuffle button

Passo 3

Enquanto ainda está no modo Pixel Preview, desenhe a pequena seta para a direita utilizando a imagem de referência como seu guia principal. Assim que estiver pronto, selecione e agrupe (Control-G) os dois caminhos juntos certificando-se de voltar para o modo de visualização Padrão (Alt-Control-Y).

adding the arrowhead to the upper section of the shuffle button

Passo 4

Termine o botão adicionando sua parte inferior utilizando uma cópia (Control-C > Control-F) das formas que acabamos de trabalhar, que vamos refletir horizontalmente (clique com botão direito do mouse > Transforma > Reflect > Horizontal) e depois posicione para que os caminhos se sobreponham, como visto na imagem de referência.

finishing off the shuffle button

14. Como Criar o Botão Repetir

Supondo que você já tenha terminado o trabalho no botão shuffle, avance para a próxima Prancheta, onde vamos começar a trabalhar na repetição.

Passo 1

Comece criando a forma principal para a parte superior do botão, utilizando um retângulo de 18 x 8 px com um Traço de 4 px de espessura (#152730), que vamos alinhar para a área de desenho ativa da borda esquerda, posicionando-o a uma distância de 6 px da sua borda superior.

creating and positioning the main shape for the upper body of the repeat button

Passo 2

Ajuste a forma do retângulo que acabamos de criar, definindo o Raio do canto superior esquerdo para 8 px de dentro  de Rectangle Properties do painel Transform.

adjusting the shape of the upper section of the repeat button

Passo 3

Continue ajustando a forma, selecionando seu ponto de ancoragem inferior direita utilizando a Ferramenta Direct Selection (A) e depois removendo-o pressionando Delete, certificando-se de configurar o Cap para Round do caminho resultante.

removing the lower section from the upper body of the repeat button

Passo 4

Adicione a pequena flecha virada para a direita utilizando uma cópia (Control-C > Control-F) do botão anterior, que vamos posicionar no ponto de ancoragem superior direito do caminho ajustado, como visto na imagem de referência. Depois de terminar, selecione e agrupe os dois caminhos utilizando o atalho de teclado Control-G.

adding the arrowhead to the upper body of the repeat button

Passo 5

Termine o botão atual, criando sua parte inferior utilizando uma cópia (Control-C > Control-F) das formas que que acabamos de agrupar, que vamos refletir horizontalmente e verticalmente (clique com botão direito do mouse > Transform > Reflect > Horizontal e Vertical) e depois posicionar como visto na imagem de referência. Quando estiver pronto, selecione e agrupe (Control-G) as duas partes juntas, antes de passar para o próximo botão.

finishing off the repeat button

15. Como Criar o Botão Playlist

Em seguida, vamos um torque e criar o botão de playlist, então certifique-se de se posicionar em uma nova Prancheta, e vamos começar.

Passo 1

Crie as pequenas linhas horizontais de 14 px de largura e Traços de 4 px de espessura (#152730) com um Round Cap, posicionada 4 px acima de uma menor e 4 px de largura (#152730), que vamos agrupar (Control-G) e depois vamos alinhar à borda superior esquerda da área de desenho ativa.

Passo 2

Comece a trabalhar sobre a nota musical criando a sua parte inferior do corpo utilizando uma elipse de 10 x 8 px com um Traço de 4 px de espessura (#EF815B), que vamos alinhar à borda inferior da área de desenho ativa, posicionando-a a uma distância de 4 px de sua borda direita.

creating and positioning the main shape for the lower section of the musical note

Passo 3

Termine a nota, e com ela o próprio ícone, desenhando sua haste utilizando um Traço de 4 px de espessura (#EF815B) com um Round CapJoin utilizando a imagem de referência como guia principal. Não tenha pressa, e assim que terminar, selecione e agrupe (Control-G) todas as suas formas de composição antes de passar para a próxima.

finishing off the playlist button

16. Como Criar o Botão Adicionar ao Playlist

Supondo que você tenha terminado de trabalhar no botão anterior, faça o seu caminho para a próxima Prancheta e vamos começar a trabalhar no próximo item.

Passo 1

Dê pontapé criando as linhas de detalhe horizontal utilizando dois Traços de 24 px de largura e 4 px de espessura (#152730) com um Round Cap, verticalmente empilhados a 4 px acima de duas menores de 10 px (#152730), que vamos agrupar (Control-L) e depois centralize à borda esquerda da área de desenho ativa.

creating the main shapes for the left section of the add to playlist button

Passo 2

Comece a trabalhar no pequeno sinal de mais, criando o segmento vertical utilizando um Traço de 8 px de altura e 4 px de espessura (#EF815B) com um Round Cap, que vamos alinhar com a borda inferior da área de desenho ativa, posicionando-a a uma distância de 4 px da sua borda direita.

creating and positioning the main shape for the vertical section of the plus symbol

Passo 3

Termine o sinal de mais, e com ela o próprio botão, adicionando o segmento horizontal utilizando um Traço de 8 px de espessura (#EF815B) com um Round Cap, que vamos centralizar ao segmento criado anteriormente. Depois de terminar, selecione e agrupe (Control-G) os dois juntos, fazendo o mesmo para o botão inteiro depois.

finishing off the add to playlist button

17. Como Criar o Botão Download

Posicione-se na quarta e última linha de Pranchetas, e vamos começar a trabalhar no botão número 13.

Passo 1

Crie a forma principal para a caixa utilizando um retângulo de 24 x 6 px com um Traço de  4 px de espessura (#EF815B) com um Round Cap e Join, que vamos centralizar a borda inferior da área de desenho ativa.

creating and positioning the main shape for the bottom section of the download button

Passo 2

Abra o caminho da forma que acabamos de criar, adicionando um novo ponto de ancoragem ao centro de sua borda superior utilizando a Ferramenta Add Anchor Point (+), que vamos depois remover utilizando Ferramenta Delete Acnhor Point (-).

opening up the path of the bottom section of the download button

Passo 3

Comece a trabalhar na seta voltada para baixo, através da criação de seu corpo principal utilizando um Traço de 18 px de altura e 4 px de espessura (#152730) com um Round Cap, que vamos centralizar a borda superior da área de desenho ativa.

creating the main body for the down facing arrow of the download button

Passo 4

Termine a seta, e com ela o próprio botão, desenhando a ponta virada para baixo, utilizando um Traço de 4 px de espessura (#152730) com um Round Cap e Join. Depois de terminar, selecione e agrupe (Control-G) as formas de composição, certificando-se de fazer o mesmo para o botão inteiro depois.

finishing off the download button

18. Como Criar o Botão EQ

Próximo da nossa lista é o botão EQ, que como você verá, é bastante fácil de fazer.

Passo 1

Comece criando três colunas de Traços de 4 px de largura e 4 px de espessura (#152730), que vamos empilhar verticalmente 2 px um do outro, tanto verticalmente como horizontalmente.

creating and positioning the main shapes for the eq button

Passo 2

Selecione as três principais linhas de Traçado e depois ajuste-as mudando a cor para #EF815B.

adjusting the color of the eq button

Passo 3

Finalize o botão selecionando e removendo algumas linhas de segmento de composição como visto na imagem de referência. Depois de terminar, selecione e agrupe (Control-G) todos os restantes antes de passar para o próximo botão.

finishing off the eq button

19. Como Criar o Botão Cast

Supondo que você tenha terminado de trabalhar no botão anterior, vá para a próxima Prancheta, e vamos começar a trabalhar no pequeno símbolo do elenco.

Passo 1

Crie a forma principal do botão utilizando um retângulo de 24 x 20 px com Traço um de 4 px de espessura (#152730) e um Round Cap Join, que vamos centralizar à área de desenho ativa subjacente.

creating and positioning the main shape for the body of the cast button

Passo 2

Ajuste a forma que acabamos de criar, passando para o modo Pixel Preview (Alt-Control-Y) e depois adicionando um novo ponto de ancoragem a 4 px do canto superior esquerdo, seguido de um outro posicionado a 8 px de seu canto inferior direito utilizando a Ferramenta Add Anchor Point (+) .

adding a set of new anchor points to the body of the cast button

Passo 3

Abra o caminho que acabamos de ajustar, selecionando o ponto de ancoragem inferior esquerdo utilizando a Ferramenta Direct Selection (A) e depois remova-o pressionando Delete.

adjusting the shape of the body of the cast button

Passo 4

Comece a trabalhar na parte inferior esquerda através da criação de um círculo de 8 x 8 px com um Traço de 4 px de espessura (#EF815B), que vamos posicionar como pode ser visto na imagem de referência.

creating and positioning the smaller circle for the cast button

Passo 5

Crie um círculo um pouco maior de 20 x 20 px com o mesmo Traço de 4 px de espessura (#EF815B), o qual vamos alinhando com o do passo anterior.

creating and positioning the larger circle onto the cast button

Passo 6

Finalize o botão selecionando e removendo os pontos de ancoragem esquerdo e inferior dos dois círculos, agrupando as formas resultantes e o quadro maior utilizando o atalho de teclado Control-G.

finishing off the cast button

20. Como Criar o Botão Share

Estamos agora em nosso 16º e último botão, então certifique-se de se posicionar na Prancheta restante e vamos acabar com isto!

Passo 1

Comece criando o quadro utilizando um retângulo de 24 x 16 px com um Traço de 4 px de espessura (#152730) com um Round Cap e Join, que vamos centralizar a borda inferior da área de desenho ativa, posicionando-o a uma distância de apenas 2 px dele.

creating and positioning the main shape for the body of the share button

Passo 2

Ajuste a forma que acabamos de criar, adicionando um novo ponto de ancoragem a uma distância de 4 px do canto superior esquerdo do quadro, seguido por um outro a uma distância de 6 px de sua parte inferior direita. Abra o caminho da forma resultante, selecionando seu ponto de ancoragem superior direito utilizando a Ferramenta Direct Selection (A) e depois removendo-o pressionando Delete.

opening up the path of the body for the share button

Passo 3

Finalize o botão atual e, com ele, o projeto em si, adicionando a seta direta para a direita utilizando uma cópia (Control-C) do botão de repetição, que vamos colar (Control-F) na Prancheta atual e então ajuste reduzindo o comprimento do seu corpo de 18 px para 16 px.

Depois de terminar, posicione as formas resultantes como visto na imagem de referência, certificando-se de selecionar e agrupar (Control-G) todas as formas de composição do botão, antes de clicar nesse botão de salvar.

finishing off the share button

Está Terminado!

Aí você tem ele—um tutorial agradável e fácil sobre como criar seu próprio conjunto de botões de controle. Como sempre, espero que tenha conseguido seguir cada passo e, o mais importante, tenha aprendido um novo truque ou dois ao longo do caminho.

finished project preview
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.