Como desenhar um Ícone de Ficheiro

Muitas vezes, quando estamos a programar uma aplicação ou a desenhar um site ou interface, precisamos de ícones. Podemos obter ícones gratuitos na internet ou comprá-los, mas a opção melhor para que o ícone seja mesmo apropriado ao nosso projecto é fazermos os nossos próprios ícones.

Neste tutorial vamos aprender a desenhar um ícone muito simples no Photoshop – um ícone de tipo de ficheiro:

Cliquem na imagem para aumentar

Sim, estes ícones, além de mostrarem rapidamente qual o tipo de ficheiro em causa (e por vezes o programa), são também atractivos visualmente e legíveis em tamanhos pequenos quando têm o pequeno rectângulo com o nome do tipo de ficheiro escrito a branco.

Como eu já disse, isto é muito simples para quem já costuma usar o Photoshop, por isso este tutorial é mais para os principiantes.

Passo 1 – Novo Documento

Vamos começar por abrir o Photoshop e criar um documento com 256px de altura e largura (este é o tamanho máximo de um ícone do Windows – e mesmo este tamanho só é suportado no Windows Vista e seguintes.. Se o vosso projecto requer que o ícone seja usado em versões anteriores do Windows ou em tamanhos inferiores, não se preocupem: ao converter de imagem para ícone no final, vamos criar um com as várias resoluções permitidas)

Para podermos ver como o ícone está a ficar no tamanho final dele, vamos ao menu Window>Arrange>New window for [o nosso ficheiro].. Isto vai abrir uma nova janela no Photoshop com a mesma imagem.. Vamos colocá-la num canto do ecrâ onde não vá perturbar e podemos trabalhar na imagem principal com zoom e ver como está a ficar nesta =D

Nota: Não se esqueçam de seleccionar a imagem principal, para que as alterações todas que fizerem sejam feitas nessa

Passo 2 – Página do Ficheiro

Criem uma nova layer e vamos pegar na Pen Tool (P), no modo Shape Layers:

Vamos ao menu View>Show>Grid para aparecer a grelha e podermos desenhar melhor a nossa página..

Agora vamos criar um ponto na imagem que vai ser o canto inferior esquerdo da nossa página e depois o direito e depois o superior direito:

E agora vamos colocar o ponto seguinte de forma a ficar com a dobra no canto da página e o canto superior esquerdo e finalizar a shape:

Agora podemos esconder a grelha, porque já não vai ser necessária. Vamos pressionar Ctrl+A para seleccionar tudo e usar os botões na barra de cima para centrar a nossa layer na imagem:

Ok.. Se acharem que a vossa página precisa de alguma alteração, é melhor alterarem agora. Se quiserem tornar a página mais larga ou mais alta, usem a Direct Selection Tool para editar os pontos da shape e não “estiquem” a imagem, porque o canto ia ficar distorcido em cima. Façam a página ocupar quase todo o espaço da imagem, mas não se esqueçam que vai haver uma sombra a toda a volta:

Agora dupliquem esta layer e criem uma nova layer por baixo das duas e preencham com branco.

Agora seleccionem a layer que está acima de todas, e diminuam a sua Opacity para cerca de 30% e depois seleccionem a que está abaixo dessa e pressionem Ctrl+E para misturar a layer actual com a inferior:

Agora com a layer do meio seleccionada, vamos ao menu Filters>Blur>Gaussian Blur e vamos usar um valor de cerca de 9px:

Agora vamos abrir os Levels (Ctrl+L) e vamos arrastar os nodes branco e preto para o centro de modo que a nossa forma fique o mais próxima à original possivel (do lado de dentro):

Quando estiver assim, pressionem Ok.. Vamos agora usar uma sequência de atalhos para remover o branco desta layer e ficarmos apenas com o preto:

Ctrl+A > Ctrl+C > Q > Ctrl+V > Q >Del

Normalmente ainda fica um pouco de cinzento depois de usar estes atalhos, por isso vamos abrir os Levels outra vez e alterar o node branco do Output Levels para o lado esquerdo para transformar todo o branco na imagem em preto:

Ok.. O canto da folha já está credível, mas os outros três cantos estão redondos, por isso, vamos clicar na máscara da layer de cima enquanto pressionamos Ctrl para criar uma selecção com aquela forma. Agora seleccionamos de novo a layer do meio, e com um pincel, vamos pintar de preto os cantos da página dentro da selecção para ficarem quadrados (excepto o superior direito, claro):

Ok, agora, quem quiser, pode transformar os pontos da layer de cima para ficar igual à de baixo, o que ia tornar a imagem melhor para redimensionamentos, mas eu vou só eliminar a de cima e ficar com a do canto redondo.

Vamos agora alterar o nome da layer para “Página” e vamos clicar duas vezes nela para abrir a janela dos Layer Styles e adicionar um Gradient Overlay. Cliquem na barra do gradiente para abrir a janela de editar gradientes e alterem os valores para as cores que quiserem.. eu escolhi #7da600 e #bbf900:

E as propriedades do gradiente (ponham a cor mais clara no canto superior esquerdo):

Agora vamos adicionar uma Drop Shadow à folha:

E pronto.. A nossa página já está =D

Passo 3 – Canto dobrado

Agora vamos desenhar o canto dobrado da folha..

Com a Pen Tool, criamos outra layer e vamos criar esta forma (diminuam a Opacity para poderem ver onde estão os pontos):

Agora vamos, na mesma com a Pen Tool e pressionando Alt clicar nos pontos e arrastar para os transformar em curvas. Vamos usar isto nos dois pontos que estão mais próximos das extremidades da folha:

Se for necessário, movam os pontos até ficarem da melhor forma possível.. Eu acho que preciso de alinhar mais os pontos com a curva da folha. Lembrem-se que a curva tem que ser contínua assim (não façam como nos da Adobe, que não se percebe se a folha de papel está dobrada ou não..):

Depois de ajustar ficou assim:

Agora vamos clicar na layer Página a pressionar Ctrl para ficarmos com a selecção e depois com a layer do canto seleccionada, vamos pressionar o botão Add Layer Mask (está na lista das Layers em baixo). Isto vai fazer com que a forma que criamos só seja visível dentro da página.

Pressionem o botão direito do rato na layer e pressionem Rasterize Layer e depois novamente botão direito do rato na máscara e Apply Layer Mask.

Agora vamos aumentar de volta a Opacity para 100% e vamos clicar duas vezes na layer para abrir os Layer Styles e vamos também adicionar um Gradient Overlay..

Desta vez, vamos pôr o Angle a –151º e vamos abrir o Gradient para alterarmos as cores para cores mais parecidas com as da página. Eu usei para a parte mais clara a cor mais clara da página (canto superior esquerdo) e no gráfico clareei um pouco, e para a cor mais escura, fiz o mesmo: fui buscar a cor mais escura da página e escureci até ficar óptimo.

Agora é só pressionar Ok e alterar o Scale até ficar realista:

Vamos agora ao Bevel and Emboss:

Cliquem na imagem para aumentar

E vamos aceitar as alterações. Que tal? Já só falta a sombra. Temos que nos dedicar sempre ás sombras, porque elas é que tornam uma coisa realista ou não.

Se notarem, nas imagens 3D, quase sempre nota-se que é falsa porque as sombras não são realistas o suficiente. As sombras são nítidas e escuras perto no objecto que causa a sombra e desfocadas e transparentes longe.

Vamos duplicar a layer e à que ficar em baixo, vamos pressionar o botão direito do rato e Clear Layer Styles. Agora com a Move Tool (V) vamos clicar num dos pontos que estão nos cantos do rectângulo e depois pressionar o botão direito do rato dentro do rectângulo e escolher Warp. Esta é a minha forma favorita de criar sombras no Photoshop e se vocês já viram outros dos meus tutoriais, verão que já usei isto várias vezes =D

Agora, sabendo que a fonte de luz é acima do canto superior esquerdo, vamos alterar esta layer para passar a ser a sombra:

Agora vamos aceitar as alterações na barra em cima e vamos buscar a Blur Tool. Usem um pincel suave de cerca de 35px e desfoquem só a ponta da sombra (cliquem várias vezes com o pincel ligeiramente afastado do local a desfocar):

E agora vamos clicar no botão de Add Layer Mask e vamos premir Ctrl+I para inverter a máscara e pô-la a preto e vamos com um pincel suave de cerca de 65px e com cor branca, cliquem uma vez nesta zona, para a imagem ficar assim:

E pronto, a sombra está (apaguem qualquer defeito na sombra que esteja a mais). Próximo passo:

Passo 4 – Etiqueta

Vamos agora fazer o rectângulo com o texto.

Criem uma nova layer acima de todas e com a Text Tool, escrevam o tipo de ficheiro para o qual querem o ícone. Eu vou usar o ícone para os meus SVG’s, por isso escrevi SVG na fonte Arial em Bold, tamanho 40 e a branco:

Vamos agora criar uma nova layer abaixo do texto e buscar a Rounded Rectangle Tool para desenhar um rectângulo que vai ficar atrás do texto:

Agora vamos alterar os Layer Styles deste rectângulo. Podem usar qualquer estilo e cor que gostem, mas lembrem-se: a intenção aqui é que o texto branco seja legível mesmo em pequeno, por isso a cor deste rectângulo tem que dar contraste.

Eu pus um pouco de Bevel e um Gradient Overlay:

E Vou também adicionar uma Drop Shadow parecida com a da página:

E está pronto.

Passo 5 – Conteúdo da página

Agora é só inserir algum conteúdo no centro da página.. Pode ser o logo do programa que vai usar o ficheiro, algum ícone relativo ao tipo de ficheiro ou outra coisa. Eu para o meu, desenhei uma coisa rápida no Inkscape:

Foi só o texto SVG igual ao do Photoshop e vários traços distribuídos para dar estilo =D

Adicionem a imagem que vão usar ao centro da página e adaptem até ficar o melhor possível:

Agora, é só gravar o ficheiro como .PNG (não se esqueçam de esconder o fundo para não aparecer o fundo em branco) e abri-lo no IcoFX para converter para ícone, podem ver como fazer isso aqui.

Espero que tenham gostado e até à próxima =D Webtutoriais:3F9C5F0A