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

Artigos relacionados:

1. Como fazer um wallpaper estilo blueprint no Inkscape Vamos aprender a fazer um wallpaper com um desenho técnico de um carro no Inkscape...

Neste tutorial, vamos usar uma imagem já feita e transformá-la num ícone para podermos usar nos nossos programas, ficheiros, pastas, sites, etc.

Material Necessário:

- Uma imagem ou logo para transformar em ícone, uma vez que não vamos criar o logo neste artigo
- Photoshop (se não tiverem, podem obter uma versão de demonstração que dura 30 dias aqui)
- IcoFX (se não tiverem, podem fazer o download aqui – é grátis e espectacular)

Ok, vamos lá falar de ícones.. São um tipo de ficheiro especialmente criado para representar um programa ou um site.. A sua extensão é .ico..

Eles são usados em tudo e de cada vez é dada maior importância aos ícones que vemos por todo o lado.. Todos os sistemas operativos desde o Windows 3.1 usam ícones para as aplicações.. e podemos ver também ícones nos sites e isto sem falar dos botões que vemos ainda mais abundantemente..

Informações relevantes: os ícones são sempre quadrados, com o tamanho a variar entre 16x16px a 128x128px ou mais.. Ah, eles podem ter um alpha channel que serve para representar transparência.. por isso a nossa imagem não precisa de ser um quadrado.. podemos usar a transparência para representarmos o que quisermos lá dentro, incluindo quadrados =D

Vamos lá ao que interessa..

Objectivo: vamos fazer um ícone 32×32 a partir de uma imagem (eu vou usar o logo do Pixeis.net, vocês podem usar qualquer outra imagem.. e qualquer outro tamanho do ícone (mas quadrado e normalmente as dimensões são potências de dois: 2, 4, 8, 16, 32, 64, 128, 256, 512, etc))

A imagem que vou usar vai ser esta:

Então vamos abrir o Photoshop e vamos criar um novo documento com a dimensão do ícone que queremos fazer.. Neste caso vou usar 32×32:

Clicamos em Ok e aparece o nosso documento.. Agora, podíamos andar a criar o nosso ícone como qualquer outra imagem, mas vou-vos dar uma dica para organizarem o espaço no Photoshop para ícones..

Redimensionem a janela do vosso documento actual até ocupar a maior parte do espaço disponível..

Agora, vamos ao menu Window>Arranje>New window for (nome do vosso documento)..

Isto vai-vos abrir uma nova janela com o mesmo documento.. Isto quer dizer que qualquer alteração que façam numa das janelas, aparece igual na outra.. A vantagem disto é podermos ter duas vezes a mesma imagem mas a tamanhos diferentes..

Na primeira, vamos ter a imagem gigantesca para podermos trabalhar, e na segunda, vamos pôr a imagem a 100%..

Ok, assim podemos ver sempre como vai ficar o ícone no tamanho final..

Agora já podemos importar a nossa imagem/logo para o documento actual =D

A minha imagem do logo tem a resolução de 256x256px, o que é bem maior que o nosso ícone, por isso vou usar a Move Tool (V) para a redimensionar até caber no ícone:

Ok.. É só isto que quero no meu ícone.. por isso vou já gravar..

Como devem ter notado, este ícone foi feito a partir de uma imagem já criada, por isso não foi muito útil a segunda janela com o ícone no tamanho real.. Eu aqui não precisava de ter feito aquilo, mas fiz para vos mostrar porque em ícones mais complexos e demorados, vão ver a utilidade de ter ali a janela com o ícone..

Vou gravar como ficheiro PNG, que apesar de ser um ficheiro com compressão, não tem perda de qualidade e também tem alpha channel, o que me interessa por causa da transparência à volta do logo..

Agora vamos abrir o IcoFX e vão ao menu File>Import Image e na nova janela, abram o ficheiro PNG que acabamos de criar no Photoshop e usem estas definições (ou outras dependendo do vosso ícone):

Agora o IcoFX vai-nos criar um novo documento com o nosso ícone.. Como já foi feito no Photoshop e não precisa de alterações, podemos já gravá-lo para um ficheiro Ico:

E que tal? Não foi simples?

Podem usar este processo para criarem ícones para os vossos programas ou para os vossos websites..

Para definirem o vosso ícone no como ícone do site, é só fazerem o upload do ícone para a vossa pasta principal do site no servidor e o ficheiro tem que se chamar favicon.ico.. Não funciona com outro nome.. Assim que fizerem isto, começa logo a aparecer o ícone no vosso browser =D

Espero que tenham gostado e aprendido qualquer coisa e até à próxima =D

Artigos relacionados:

1. Como desenhar um Ícone de Ficheiro Neste tutorial vamos aprender a desenhar um ícone de tipo de ficheiro no Photoshop...