Advertisement
  1. Design & Illustration
  2. Icon Design
Design

O Que Fazer e o que Não Fazer Quando Cria Ícones com Linhas

by
Difficulty:BeginnerLength:LongLanguages:

Portuguese (Português) translation by Tiago Leão (you can also view the original English article)

Final product image
What You'll Be Creating

No tutorial de hoje olharemos em pormenor para o processo de criação de ícones com linha tanto no Adobe Illustrator como no Affinity Designer. Verá como consegue criar um produto acabado utilizando apenas algumas formas básicas às quais faremos pequenos ajustes.

Então, se sempre quis saber o fazer e não fazer ao trabalhar com este estilo de ícones, deve definitivamente ler este texto!

Adicionalmente, não se esqueça que pode sempre expandir a sua biblioteca de assets consultando a GraphicRiver, onde encontrará uma grande seleção de pacotes de ícone vectorizados por onde escolher.

Há alguns anos, explorei os dois métodos principais que podem ser usados para criar ícones com linha e comparei-os para ver qual seria a opção que melhor se adapta ao seu caso.

Hoje, vamos analisar um desses métodos, mais exatamente o da linha, e perceber o que fazer e não fazer para que possa aperfeiçoar as suas skills quando se trata de criar este tipo de ícones.

Vamos criar exatamente o mesmo ícone, usando dois softwares diferentes, mais precisamente o Adobe Illustrator e o Affinity Designer, para que qualquer pessoa possa participar no projeto.

Posto isto, vamos começar!

Como criar ícones com linhas no Adobe Illustrator

1. Como configurar um novo ficheiro para um projecto

Tal como acontece com qualquer projeto novo, vamos começar por ver rapidamente o processo de criação de um novo documento. Então vá a ficheiro > novo (ou use o atalho de teclado Control-N) e depois ajuste-o da seguinte forma:

  • Perfile: Web
  • Número de Artboards: 1
  • Largura: 128 px
  • Altura: 128 px
  • Unidades: Píxeis

E no menu Avançado:

  • Esquema de cor: RGB
  • Efeitos de Rasterização: Ecrã (72 ppi)
  • Modo de Pré-visualização: Default
setting up a new document in ai

2. Como configurar as Camadas

Uma vez criado o nosso documento, precisamos perder algum tempo a estrutura o projeto através de um par de camadas, para que possamos implementar e manter um fluxo de trabalho claro e direto, separando a nossa grelha de referência do ícone.

Para isso, basta abrir o painel Camadas e em seguida, crie duas camadas usando o botão Criar Nova Camada, atribuindo-lhes os seguintes nomes:

  • Camada inferior: grelha de referência
  • Camada superior: icon
setting up the layers in ai

3. Como criar a Grelha de Referência

Assim que terminamos de criar as camadas do nosso documento, podemos focar a nossa atenção na grelha de referência, que nos ajudará a definir o tamanho real do ícone final, ao mesmo tempo que nos permite adicionar uma pequena margem de construção.

Passo 1

Selecione a camada inferior, crie a superfície de referência principal (o tamanho da base), usando um quadrado com 128x 128px, com a cor #F15A24 e posicione-o no centro do Artboard usando as opções Alinhamento Horizontal e Alinhamento Vertical Central do painel Alinhar.

creating the base grid in ai

Passo 2

Adicione a área de desenho ativa usando um quadrado menor com 112 x 112 px, que pintaremos de branco (#FFFFFF) e depois alinhamos ao centro com o quadrado maior que se encontra por baixo, o que resultará numa margem de 8px a toda a volta.

creating the active drawing area in ai

Passo 3

Assim que tiver as duas formas no sítio, selecione e agrupe-os juntos, usando o atalho de teclado Control-G, e certificando-se de bloquear a camada atual antes de passar para a próxima etapa.

locking the layers in ai

4. Como criar o ícone do jornal

Mal terminamos a configuração do nosso ficheiro do projeto, podemos começar a trabalhar no ícone, que gradualmente criaremos secção a secção.

Passo 1

Escolha a  Ferramenta da Elipse (L) e crie o plano de fundo usando um círculo com 112 x 112px, usando a cor #AEEDEA e depois alinhe pelo centro do artboard subjacente.

creating the background in ai

Passo 2

Crie a forma principal para a secção da frente do jornal usando um retângulo de 40 x 44px, de cor #FFFFFF e em seguida posicione a uma distância de 30 px da margem esquerda d0 desenho e 34 px da de cima.

Como deve ter notado, mesmo sendo os valores de diferença  números pares (uma vez que podem ser divididos por dois),apenas  podem apenas ser cortados ao meio uma vez antes de se tornar ímpares. Normalmente tento manter uma certa distância destes tipos de números, mas uma vez que estamos a criar ícones de linhas, é algo que vai ser corrigido assim que adicionamos os contornos, como verá em poucos momentos.

creating the front section in ai

Passo 3

Ajuste a forma que criamos, definindo o Raio do seu canto inferior esquerdo para 6 px através do painel da opção Transformar do painel das Propriedades do retângulo. Novamente, já temos um valor de número ímpar, mas tudo fará sentido quando adicionamos o contorno.

adjusting the corner of the front section in ai

Passo 4

Crie uma cópia (Control-C > Control-F) da forma resultante, que iremos posicionar do seu lado direito para que seus contornos se sobreponham como visto na imagem de referência.

creating a duplicate of the front section in ai

Passo 5

Abra os dois contornos individualmente selecionando cada um dos seus cantos usando a ferramenta Direct Selection Tool (A) e em seguida, remova-os imediatamente pressionando Delete.

opening up the paths of the front section in ai

Passo 6

Com os dois contornos ainda selecionados, una-os numa única forma maior pressionando o atalho de teclado Control-J (junção) duas vezes.

uniting the path segments in ai

Passo 7

Agora que terminamos de ajustar a forma principal para a secção da frente, podemos ver como adicionar o contorno. Esta parte é realmente mais importante do que pode pensar, uma vez que a Espessura do traço vai acabar por influenciar diretamente os valores do gap, bem como a seção visível do raio dos cantos, como verá em seguida.

Como regra geral, quererá ter ir um valor numérico par (por exemplo, 2, 4, 6, 8, etc.), já que vamos alinhar o Traço ao centro. Ao fazê-lo, iremos assegurar que as nossas formas permanecerão perfeitamente juntas à Grelha de Píxeis subjacente, uma vez que o alinhamento vai acabar por dividir igualmente o seu peso ao meio.

Para adicionar o contorno, comece por criar uma cópia (Control-C) da forma resultante, que colaremos na frente (Control-F) e em seguida, ajuste, alterando a sua cor para #43435B. Assim que estiver pronto, inverta o seu Preenchimento com o seu Contorno usando o atalho de teclado Shift-X,  depois abra o painel 'Contorno' e defina a sua largura para 4 px, certificando-se de que o Contorno está alinhado ao centro.

Uma vez que metade do contorno vai acabar por cair fora do preenchimento da forma, isto irá diminuir os valores do gap em 2 px, fazendo com que os cantos redondos pareçam menos arredondados.

adding the outline to the front section in ai

Se usássemos números ímpares (por exemplo, 3, 5, 7, 9, etc.), o nosso contorno acabaria submetido a algum antialiasing desagradável, que se torna claramente visível quando ativa o modo Pixel Preview (Alt-Control-Y). Isto acontece porque o software não encontra um centro perfeito, visto que uma vez divididos ao meio, números ímpares tornam-se decimais.

example of stroke using odd numbers

Para tornar as coisas ainda mais complicadas, se tentar usar a opção Pixel Perfect (clique direito > fazer Pixel Perfect), o traço vai acabar fora da grelha devido a esse alinhamento centralizado.

using the make pixel perfect option on odd strokes

Passo 8

Uma vez que queremos que o ícone tenha uma aparência mais amigável, vamos definir todos os Cantos dos seus Traços para arredondarem juntos, um pequeno truque que ajuda a fazer exatamente isso. No caso da forma atual, isso também corrige a aparência do vértice do canto inferior direito, que caso contrário ficaria como se ele tivesse sido cortado por engano.

setting the corner join to round in ai

Passo 9

Assim que terminamos de fazer todos os pequenos ajustes no contorno, precisamos de selecionar tanto ele como a forma de preenchimento subjacente e agrupá-los juntos usando o atalho de teclado Control-G ou o ligeiramente mais lento método clique direito > Grupo.

Geralmente acabo por agrupar o meu preenchimento e o contorno das formas juntos para que se mais tarde decidir mover um deles, o outro seguirá automaticamente. Também, se precisar de fazer ajustes em uma das duas, poderá facilmente fazê-lo isolando o grupo e levando-os para fora.

grouping the main shapes of the front section in ai

Passo 10

Crie a forma principal para a seção do lado usando um retângulo de 12 x 36px, com a cor #59C9C9 e posicione-o no lado direito das formas que acabamos de agrupar, certificando-se de que os seus contornos se sobrepõem. A parte da sobreposição é muito importante, pois ajuda a garantir que quando adicionar todos os contornos, eles cobrem uns aos outros perfeitamente, sem aumentar a espessura do design final.

creating the main shape for the side section in ai

Passo 11

Ajuste a forma que criamos, definindo o Raio dos seus cantos inferiores com 6 px, que é o mesmo valor usado para a seção da frente. Quando trabalhando com ícones de linha, a consistência desempenha um factor-chave quando se trata da sobreposição perfeita de seus contornos, portanto, fique sempre de olho nos seus valores, para que não tenha que voltar a corrigi-los mais tarde.

adjusting the shape of the side section in ai

Passo 12

Adicione a sombra subtil usando um quadrado de 6 x 36px, que nos posiciona no lado esquerdo da seção atual, preencha-o usando o mesmo valor usado para o contorno (#43435B) e certificando-se de reduzir sua opacidade para 24%. Este é outro truque que eu gosto de usar muitas vezes, onde em vez de escolher valores mais escuros para as sombras, basta usar a cor dos traços e baixar a opacidade até conseguir algo que funciona.

adding the shadow to the side section in ai

Passo 13

Mascare a sombra usando uma cópia (Control-C) da forma maior subjacente, que iremos colar na frente, e depois com os dois selecionados, simplesmente clique direito > fazer Clipping Mask.

masking the shadow in ai

Passo 14

Mal tenha mascarado a sombra, vá em frente e dê à seção atual um contorno de espessura 4 px, criando uma cópia (Control-C > Control-F), e depois faça uma amostragem do contorno existente usando a ferramenta Conta-gotas (I).

Este é outro truque que eu uso muitas vezes, uma vez que ajuda a copiar todos os atributos existentes do meu contorno (cor, espessura) para a minha forma atual. Além disso, também garante que o valor de cor a ser usado é sempre consistente, o  que é realmente importante ao desenhar ícones de linha, uma vez que ao adicionar volume, faz-lo usando cores mais escuras para o preenchimento das formas mas não dos seus contornos.

adding the outline to the side section in ai

Dica rápida: aqui está uma foto rápida do que aconteceria se fez algumas das coisas que desaconselhei (contornos sobrepostos impropriamente, raios dos cantos inconsistentes para as formas sobrepostas, valores de cores diferentes para os contornos).

example of bad shape overlapping in ai

Passo 15

Volte para trás e foque-se na secção da frente do jornal. Vamos começar a adicionar os seus pequenos detalhes, criando a moldura da foto usando um retângulo arredondado de 12 x 12px com 2 px de raio nos canto, que pintaremos com a cor #43435B e posicionaremos a uma distância de 4 px da margem direita frontal e 8 px da margem de cima.

positioning the main shape for the photo in ai

Neste caso, pode estar com dúvidas em relação a porquê que eu não incluí esses 2 px de contorno nos valores do espaçamento indicado e a resposta é que, uma vez que neste caso não podemos distribuir as formas usando o painel 'Alinhar', esses valores são irrelevantes. Sempre que colocamos as formas dentro de um contorno, faremos isso sempre em relação à margem interna do seu peso, ignorando, assim, a sua metade interna.

Posicionássemos as formas fora da superfície do contorno, então precisamos adicioná-las à distância final, visto que o software irá sempre posicioná-las em relação ao contorno, alinhado ao centro.

example of positioning shapes inside an outline in ai

Passo 16

Crie as primeiras linhas de texto usando uma linha com 8 px de largura e  4 px de espessura (#43435B) com uma terminação redonda, que iremos posicionar em consonância com a margem de cima da imagem, a uma distância de 4 px da sua margem esquerda.

Como pode ver, eu escolhi traçar linhas em vez de retângulos arredondados, que é algo que eu tento fazer muitas vezes quando a sua espessura é idêntica aos seus contornos, uma vez que se eu só preciso de mudar a sua cor, o que posso facilmente fazer usando Selecionar >Mesma> Espessura da Cor.

positioning the first text line in ai

Repare que usei a palavra "posição" em vez de "alinhamento", já que se fossemos usar o alinhamento topo vertical do painel 'Alinhar', o software faria o alinhamento para o objeto-chave indicado com base no centro do traço, que produziria um resultado diferente.

example of stroke aligning in ai

Passo 17

Adicione a segunda linha de texto, usando uma cópia (Control-C > Control-F) do que nós criamos, posicionando-a apenas 4 px abaixo da primeira.

Este é um grande exemplo de posicionamento de linha, uma vez que temos duas maneiras de o fazer. A primeira baseia-a no uso das setas direcionais para mover gradualmente a linha um pixel de cada vez, até a termos na posição desejada.

adding the second text line in ai

A segunda envolve o uso da opção Distribuição do Espaçamento Vertical do painel 'Alinhar', o que requer que ajuste o valor de espaçamento, visto que precisa de incluir as metades inferior e superior do peso dos dois traços. Então em vez de usar um valor de 4 px, acaba por usar de 8 px (2 + 4 + 2). Pessoalmente, eu recomendo que utilize o primeiro método quando se trata de distâncias menores,  e use o painel 'Alinhar' ao lidar com maiores, o que para ser sincero não acontece muitas vezes.

example of multiple stroke aligning in ai

Passo 18

Crie a linha de texto mais ampla, usando uma cópia (Control-C > Control-F) de uma da etapa anterior. Iremos posicioná-la 4 px abaixo dela e ajustar, aumentando a sua largura de 8 px para 24 px. Para fazer isso, abra o painel 'Transformar' e primeiro desmarque a opção de Redimensionamento de Traços & Efeitos, caso contrário aumentará o peso do traço ao ajustá-lo. Em seguida, defina o ponto de referência para o quadrado à esquerda e basta digitar o valor indicado (24 px) dentro do campo de entrada de largura.

example of increasing of the length of a stroke in ai

Passo 19

Adicione a linha de texto final usando uma cópia (Control-C > Control-F) da que nós já ajustamos, que iremos posicionar em baixo, utilizando a mesma distância de 4px. Uma vez que tenha todas as linhas no lugar, certifique-se que as seleciona e agrupa (Control G) juntas, fazendo o mesmo para o jornal inteiro depois.

adding the last text line in ai

Passo 20

Termine o ícone adicionando as pequenas linhas de movimento usando um traço de 8 px altura por 4 px de grossura (#43435B) para o central, e dois mais curtos com 4 px para os lados, posicionando-as como visto na imagem de referência. Demore o tempo necessário e assim que estiver pronto, não se esqueça de selecionar e agrupar (Control-G), todos as linhas juntas, fazendo o mesmo para todos os formas que compõe o icon depois.

finishing off the icon in ai

Como criar ícones de linhas no Affinity Designer

Agora que já temos uma ideia melhor, do que fazer e não fazer na criação de ícones com linha, vamos ver como podemos construir o mesmo produto no Affinity Designer.

1. Como configurar um novo ficheiro para o projeto

Tal como fizemos no Illustrator, vamos começar por criar um Novo Documento indo a Ficheiro>Novo (ou usando o atalho de teclado Control-N), que iremos configurar da seguinte forma:

  • Tipo: Web
  • Unidades do documento: Pixels
  • Criação do artboard: feito
  • Fundo Transparente: feito
  • Largura da Página: 128px
  • Altura da página: 128px
  • DPI: 72
setting up a new document in ad

2. Como configurar as camadas

Tire alguns momentos para estruturar o ficheiro do projeto abrindo o painel das Camadas e em seguida, crie duas camadas usando o botão Adicionar Camada, atribuindo-lhes os seguintes nomes:

  • camada debaixo: grelha de referência
  • camada de cima: icon
setting up the layers in ad

3. Como criar a grelha de referência

Uma vez terminadas as camadas do nosso documento, podemos continuar a construir a pequena grelha de referência.

Passo 1

Comece por selecionar a camada inferior e então crie a superfície de referência principal (o tamanho da base), usando um quadrado de 128 x 128px, usando a cor #F15A24 e posicione no centro do artboard subjacente, usando as opções Alinhar ao centro e Alinhar ao meio do painel de Alinhamento.

creating the base grid in ad

Passo 2

Adicione a área ativa do desenho usando um quadrado menor de 112 x 112px, que vamos pintar usando branco (#FFFFFF) e em seguida alinhe ao centro em relação à superfície de referência principal, o que nos dará os mesmos 8 px de margem protetora.

adding the active drawing area in ad

Passo 3

Com ambas as formas no lugar, certifique-se que as seleciona e agrupa juntas usando o atalho de teclado Control-G, bloqueando a camada atual usando a alavanca de Bloqueio/Desbloqueio, antes de passar para a próxima.

locking the layers in ad

4. Como criar o ícone do jornal

Posicione-se na camada superior e vamos começar a trabalhar no nosso pequeno ícone de jornal.

Passo 1

Comece por criar o fundo usando um circulo com 112 x 112px, que iremos colorir com a cor #AEEDEA e depois alinhar ao centro com o artboard subjacente.

creating the background in ad

Passo 2

Adicione a forma principal da seção da frente do jornal usando um retângulo de 40 x 44px, de cor branca (#FFFFFF) e em seguida posicione-o a uma distância de 30 px da borda esquerda da área de desenho ativa e 34 px da de cima.

creating the main shape for the front section in ad

Passo 3

Ajuste a forma primeiro desmarcando a opção Raio único, e em seguida, definindo o seu canto inferior esquerdo (BL) para arredondado, certificando-se de dar-lhe um valor absoluto de 6 px.

adjusting the corner of the front section in ad

Passo 4

Crie uma cópia (Control-C > Control-V) da forma resultante, que depois posicionará no lado direito da área do desenho ativo, para que os seus contornos se sobreponham.

creating a duplicate of the front section in ad

Passo 5

Com ambas as formas selecionadas, use a opção Converter para Curvas, para que possamos ajustar os seus contornos e em seguida individualmente abri-los, selecionando os seus nós direitos superiores usando a ferramenta de Nó (A) e, em seguida, a ação de Quebrar Curva. Uma vez que abertos os contornos, certifique-se que seleciona e remove todos os nós direitos usando a tecla Delete.

opening up the paths of the front section in ad

Passo 6

Una os segmentos resultantes numa única forma maior usando as ações Juntar Curvas e Fechar curvas da ferramenta de junção de nós.

uniting the paths of the front section in ad

Passo 7

Dê à forma resultante um contorno usando o método do Contorno, criando uma cópia (Ctrl-C) dela, que irá colar na frente (Control-V) e em seguida ajuste primeiro a sua cor para #43435B e depois inverta o preenchimento com o Contorno (Shift-X). Defina a sua largura para 4 pt. Assim que estiver concluído, certifique-se que seleciona e agrupa os dois juntos, usando o atalho de teclado Control-G.

adding the outline to the front section in ad

Dica rápida: em comparação com o Illustrator, onde tem que definir manualmente o arredondamento dos pontos de junção do contorno, o Affinity Designer faz isso automaticamente visto que é a opção padrão usada.

Passo 8

Crie a forma principal para a secção do lado do jornal usando um retângulo de 12 x 36 px (#59C9C9), que ajustaremos definindo o raio dos seus cantos inferiores para 6 px, e posicionando a forma resultante no lado direito da seção frontal, certificando-nos que os seus contornos se sobrepõem perfeitamente.

creating the main shape for the side section in ad

Passo 9

Adicione a sombra subtil usando um quadrado de 6 x 36 px (#43435B), que posicionaremos no lado esquerdo da seção atual, certificando-nos de reduzir sua Opacidade para 24%.

adding the shadow to the side section in ad

Passo 10

Mascare a sombra abrindo o painel Camadas e primeiro adicione uma cópia (Ctrl-C) da forma preenchida da secção do lado para a área de transferência, e depois simplesmente arraste a forma menor para cima dela.

masking the shadow in ad

Passo 11

Adicione o contorno colando a cópia da área de transferência no lugar usando o atalho de teclado Control-V, altere a sua cor para #43435B e inverta o seu preenchimento com o seu contorno (Shift-X), certificando-se de definir a largura para 4 pt. Quando terminar, não se esqueça de selecionar e agrupar (Control-G) todas as formas que compõe a secção do lado antes de passar para a próxima etapa.

adding the outline to the side section in ad

Passo 12

Volte a concentrar-se na secção dianteira do jornal e crie a moldura da foto usando um retângulo arredondado de 12 x 12px (#43435B) com um raio de canto com 2px, que posicionaremos a uma distância de 4 px da margem direita do contorno maior e 8 px da margem de cima.

positioning the main shape for the photo in ad

Passo 13

Adicione a primeira linha de texto usando um traço de 8 px de largura e 4 pt de grossura (#43435B), que posicionaremos em consonância com a margem de cima da foto, a uma distância de 4 px da sua margem esquerda.

positioning the first text line in ad

Passo 14

Crie a segunda linha de texto usando uma cópia (Control-C > Control-V) da linha do passo anterior, que posicionaremos 4 px por baixo dela.

adding the second text line in ad

Passo 15

Adicione a linha de texto mais ampla, usando uma cópia (Control-C > Control-V) da que criamos anteriormente. Iremos posicioná-la 4 px por baixo dela, e ajustando-a aumentando a sua largura para 24 px. Para fazer isso, abra o painel 'Transformar' e certifique-se que os ajustes são feitos em relação ao seletor do ponto esquerdo, e depois simplesmente insira o valor indicado (24 px) dentro do campo da largura.

example of increasing the length of a stroke in ad

Passo 16

Crie a linha de texto final usando uma cópia (Control-C > Control-V) daquela que acabamos de ajustar, garantindo que a posiciona por baixo, usando a mesmo distância de 4 px. Uma vez que tenha todas as linhas no sítio, garanta que seleciona e agrupa (Control-G) todas elas juntas, fazendo o mesmo para todo o jornal depois.

adding the last text line in ad

Passo 17

Termine o ícone adicionando as pequenas linhas de movimento usando um traço de 8 px altura e 4 pt de grossura (#43435B) para o centro de um e dois mais curtos com 4 px para os lados, posicionando-as como visto na imagem de referência. Demore o tempo necessário e assim que estiver pronto, não se esqueça de selecionar e agrupar (Control-G), todos elas juntas, fazendo o mesmo para todos as formas que o compõem depois.

finishing off the icon in ad

Recapitulando

Antes eu cavalgar até ao pôr do sol, queria recapitular um pouco os pontos-chave que aprendemos quando se trata de criação de ícones de linha, para o caso de alguém querer passar à frente a parte do projecto.

O que fazer:

  • Quando começar a ver as diferentes formas que compõem o seu ícone, faça sempre as contas e certifique-se de incluir o valor dos seus contornos (os seus traços) quando o fizer, visto que o ajudará a descobrir aspectos fundamentais no que diz respeito à sua posição em relação ao artboard e um ao outro.
  • Quando escolher o peso do seu traço, tente sempre escolher optar por números pares (por exemplo, 2, 4, 6, 8, etc.) em vez de ímpares (por exemplo, 3, 5, 7, 9, etc.), caso contrário os seus contornos vão acabar fora da grelha de píxeis.
  • Quando posicionar as suas formas, certifique-se de que os seus contornos se sobrepõem perfeitamente, especialmente quando está lidando com objetos que têm cantos arredondados ou linhas mais orgânicas.
  • Quando adicionar um contorno a uma forma, garanta que seleciona e agrupa todas as formas juntas para que se comportem como uma única unidade, o que tornará mais fácil reposicioná-las posteriormente se necessário.
  • Quando começar a construir o seu icon, garanta sempre que mantêm o mesmo valor para a cor e peso em todos os traços de forma a garantir consistência.
  • Ao posicionar as formas dentro de um contorno, faça-o sempre a partir das arestas interiores do seu traço e não do seu centro.
  • Quando alinhar os objetos com traço aos sem traço, certifique-se sempre que ajusta a sua posição final se usou o painel 'Alinhar', uma vez que o software fará sempre o alinhamento com base no centro do traço e não suas margens exteriores.
  • Quando posicionar múltiplo objetos com traço em relação uns aos outros, faça sempre as contas e inclua os valores das suas metades superior e/ou inferior ao usar o painel 'Alinhar', caso contrário não vai obter o resultado desejado.

O que não fazer:

  • Quando se trata do que não fazer, eles são praticamente exatos opostos dos itens da lista anterior, então se tiver em mente as noções-chave anteriores, poderá prosseguir sem problemas.

Como sempre, espero que se tenha realmente divertido a trabalhar neste projeto e o mais importante, tenha conseguido aprender uma ou duas coisas durante o processo.

Posto isto, se tiver alguma dúvida, sinta-se à vontade para publicá-las na secção de comentários e eu responderei assim que possível!

finished project preview

Expanda as suas habilidades de construção de ícones!

Quer saber mais sobre como criar ícones? Bem, tomei a liberdade de escolher pessoalmente alguns tutoriais incríveis que deverão ajudá-lo a fazer isso!

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.