Aquelas nos Quinze

Tutoo* De Fazer Png's

1) Vou começar exemplificando como criar uma PNG a partir de um bitmap qualquer. A primeira coisa é abrir a imagem no editor de imagens, no nosso caso, o Photoshop, em seguida como quero fundo transparente na minha imagem e posteriormente no meu ícone, vou começa a selecionar o que me interessa, a ferramenta de seleção que vão usar fica por conta de cada um, eu usei o laço poligonal. Uma boa é ajusta o Feather ou Difusão para suavizar a seleção para que o corte não fique muito "duro", recomendo Feather de 1 a 1,5 px:


2) Notem que após a seleção do elemento que nos interessam, vamos eliminar o fundo e deixá-lo transparente, genericamente vamos inverter a seleção feita e deletar. Se a imagem aparecer como Background na janela Layers conforme o destaque abaixo, temos que transformá-la em camada pois do contrário não conseguiremos um fundo transparente. Vamos clicar duas vezes no background (em destaque), vai abrir a janela de New Layer conforme abaixo e clicamos em OK, transformamos o background em camada.

3) Agora que temos a camada, vamos inverter a seleção feita desde o começo e deletá-la. No Photoshop pressionamos Shift+Crtl+I para inverter a seleção e pressionamos Del para deletá-la. Feito isso, vamos cortar a imagem para tamanho de ícone, recomendo 128 px, mesmo que o ícone a ser criado depois não seja grande assim. No Photoshop vamos na ferramenta Crop Size ou Corte Demarcado. Vamos ajustar as medidas para 128px X 128 px com 72 dpi de resolução como o detaque abaixo mostra. Procurem centralizar o elemento desejado no corte, para que não fique torto ou corte algum pedaço deste.

 

 

4) Feito o corte, já podemos dar efeitos à nossa imagem, que efeitos dar, vai da imaginação de cada um. No meu caso só vou aplicar uma sombra. No Photoshop vamos clicar no primeiro ícone à esquerda do rodapé da janela layers conforme destaque, podemos também ir ao menu Layer>Layer Style, dá no mesmo.

 

 

5) Seja no menu Layers>Layers Style ou clicando no botão da janela Layers, vamos selecionar sombra externa ou Drop Shadow, porém todo o menu em destaque abaixo possue uma quantidade razoável de efeitos, experimentem e brinquem com eles e suas combinações, o resto a imaginação manda. Mas eu vou aplicar só uma sombra básica mesmo.

 

 

6) Agora estamos prontos para salvar e gerar o PNG, podemos salvar no tradicional File>Save As... Agora para quem pretende transformar em ícone, podemos e vamos tranferir esse arquivo para o IconWorkshop 5 diretamente do Photoshop, para isso temos que habilitar esse recurso. Vamos abrir o IconWorkshop e clicar no menu File>Install Photoshop® Plugin...como mostrado abaixo:

 

 

7) De volta ao Photoshop, vamos ao menu Filters e avistaremos o filtro instalado como Axialis>Transfer To Axialis IconWorkshop...como mostrado abaixo. Pra quem não usa o Photoshop, calma que vou ensinar um método alternativo.

 

 

8) Quem tranferiu direto do Photoshop para o IconWorkshop, relaxa um pouco e espera quem não tem o Photoshop e não pôde transferir diretamente. Aos não-usuários do Photoshop, após terem salvo sua PNG lá atrás, vão abrir o IconWorkshop e clicar em File>Open e abrir sua PNG. Agora todos estamos com nossa PNG na tela do Icon Workshop, vamos em frente.

Obs: Vale a pena ressaltar, que usando esse comando abrimos praticamente qualquer formato de imagem, incluindo PSD, muito útil para o caso da imagem já estar na forma desejada, pois não existe a necessidade de editá-la em outros programas, pois o IconWorkshop irá redimensioná-la automaticamente. Mas fundo transparente só se o original tiver, ok? Na realidade existe uma forma de dar transparência ao fundo no próprio Iconwokshop, mas é meio complicado, tipo uma máscara do Photoshop, por isso vamos nos ater a sua capacidade de conversão ao invés de edição.

 

 

9) Agora como estamos todos com nossas imagens na tela, vamos tratar de criar os ícones, vamos clicar no Botão azul, à esquerda superior da janela da imagem conforme o destaque, o no menu Image>Create New Icon for Selection... ou simplesmente pressionar a tecla "i":

 

 

10) Bom, feito qualquer um destes 3 comandos, vamos nos deparar com a tela abaixo, composta por Icon Project Name:, onde obviamente vamos nomear o nosso ícone, o que não é importante visto que podemos renomeá-lo também quando salvarmos. Logo abaixo temos, Image Formats, onde vamos selecionar os tamanhos para o ícone, cada um com um preview, recomendo 48x48, 32x32 e 16x16 XP, o restante desmarquem. Em Extras Formats temos mais alguns tamanhos, só recomendo o 128x128, isso dará qualidade ao ícone qaundo ele for mostrado nesse tamanho. Logo abaixo uma espécie de filtro onde você pode optar por suavização(smooth), nitidez (sharpen) e none que não aplica nenhum efeito. Feito tudo isso, clicamos em OK.

 

 

11) Bom, agora será mostrada à esquerda da janela as prévias dos tamanhos criados para o ícone como no destaque abaixo, podemos conferir um por um clicando em cada prévia. Para salvar clicamos em File>Save ou o tradicional Ctrl+S, damos outro nome se assim desejarmos e fim de papo. Pra quem quiser extrair PNG's dos ícones ainda não acabou, já vamos falar disso:

 

 

12) Para os interessados em extrair PNG's de seus ícones, abrimos o ícone no IconWorkshop, no menu File>Open, e em seguida voltamos ao mesmo menu File e clicamos em Export>PNG with Transparency...e pronto! Podemos exportar também em Bitmap em Export>Image... e PSD para Photoshop em Export>Photoshop with Transparency(PSD)...

 

 

Bem galera, chegamos ao fim de mais um tutorial e se você leu até aqui, já está apto a modificar seu Windows com seus ícones e PNG's personalizados, recomendo meu outro tutorial sobre o Reshacker, pois poderão fazer uso de seus ícones com ele de forma fácil e descomplicada, não esqueçam de postar dúvidas e também suas criações. Pra encerrar gostaria de fazer uma apelo, a todos que de certa forma tem um conhecimento ou dica, que poste ou faça um tutorial, vamos incentivar o aparecimento de cada vez mais tutoriais pois conhecimento não compartilhado é conhecimento perdido, ok?