E mãos ao trabalho..

Passo 1 – Photoshop

Vamos abrir o Photoshop e criar uma nova imagem com fundo transparente e com as dimensões do nosso emoticon. Eu quero fazer um idêntico aos que já vêm com o Windows Live Messeger, por isso escolho o mesmo tamanho, 19x19px.

Agora vamos buscar a Ellipse Tool (U) e vamos desenhar um círculo que ocupe praticamente todo o espaço disponível:

Agora vamos clicar duas vezes na layer para abrir a janela dos Layer Styles e vamos diminuir o Fill para 0%. Depois vamos a Stroke e vamos usar estes valores:

O gradiente que usei foi este:

E agora vamos adicionar um Gradient Overlay:

E desta vez é este gradiente:

E já só falta uma Inner Shadow para dar volume (#ECB01B):

E já temos a face do nosso emoticon. Podem mudar o nome desta layer para “Face” ou qualquer coisa que identifique.

Passo 2 – Olhos

Vamos criar um novo grupo acima da layer existente e vamos mudar o nome do grupo para “Olhos” e vamos criar uma nova layer dentro. Agora vamos buscar a Pencil Tool (B) – com o tamanho a 1px – e com a cor #AC904C vamos desenhar uns olhos esbugalhados na face do nosso emoticon:

Agora vamos buscar a for branca (#FFFFFF) e vamos preencher o interior dos olhos

E vamos de novo buscar a cor #AC904C e na barra superior do Photoshop, vamos diminuir a Opacity para 30% e pintar os cantos dentro e fora para parecerem mais arredondados do que realmente são.

Agora vamos mudar o nome desta layer para “Olhos – Base” e vamos criar 5 novas layers acima dela.

Na imediatamente acima vamos pintar as íris dos olhos dele normais nesta cor #6A2217 (não se esqueçam de voltar a por a Opacity a 100% antes de pintar):

E vamos deixar as outras quatro layers sem nada por enquanto (elas vão servir para a animação depois)

Passo 3 – Boca

Agora vamos criar um grupo para a boca. Podemos criar imediatamente acima do grupo dos olhos. E vamos mudar o nome para “Boca” para fácil orientação =D

Vamos criar uma layer lá dentro e com a Ellipse Tool (U), desenhem algo assim:

E vamos clicar duas vezes nesta layer para editar os Layer Styles. Vamos adicionar um Stroke com a cor #9f4021:

E agora vamos duplicar esta layer até termos 4 iguais e vamos pô-las todas invisíveis. E vamos criar uma nova layer vazia onde vamos com o pincel pintar uma boca simples para o início da animação – também com a mesma cor do stroke – #9f4021 – eu pus o pincel a 20% e pintei várias vezes nos mesmos pontos até ficar uma linha mais ou menos gradual:

E pronto.. Já só falta animar o nosso emoticon =D

Passo 4 – Animação

Vamos ao menu Window>Animation e vai aparecer uma barra no fundo do ecrã.. No canto superior direito dessa barra há um botão, cliquem lá e depois em Convert to Frame Animation – isto é para criarmos uma animação por frames, que é o que nós queremos (para mais informação em como fazer animações, vão dar uma vista de olhos pelo tutorial da userbar onde explico isto com mais pormenor)

Agora criem três novas Frames. A primeira vai ficar intacta. Na segunda, vamos ao grupo Olhos e vamos seleccionar a layer com as íris pintadas e com a Move Tool (V), vamos pressionar a tecla direccional para a direita do teclado uma vez (mover um pixel para a direita):

E vamos agora à terceira frame e vamos mover os olhos para a esquerda:

E a última vamos deixar normal como a primeira.

Agora vamos adicionar mais quatro frames à frente da última.

Vamos seleccionar as quatro novas frames e por a layer das íris do emoticon invisível e vamos mover os olhos 1px para cima:

Antes de alterarmos, temos que fazer outra coisa: Como há uma opção activada chamada Propagate Frame 1, todas as alterações feitas á frame 1 vão ser visíveis em todas as outras, por isso vamos para a frame 1 e vamos seleccionar as 4 layers vazias que já tínhamos criado e pô-las todas invisíveis para depois as pormos visíveis só na frame correcta em vez de todas.

E agora na frame 5, vamos usar a primeira daquelas 4 layers vazias. Vamos lá com o pincel (a 100%) e a cor #6A2217 pintar as novas íris dele da forma mais estranha possível:

Agora vamos á frame 6 e vamos activar a layer seguinte e lá vamos pintar as íris noutra posição qualquer:

E assim sucessivamente para as outras duas frames e layers.. O meu resultado foi este:

Agora que os olhos já estão, vamos tratar da boca.. Para isso temos de seleccionar as 4 últimas frames e desactivar a layer da boca “simples” que está visível.

Ok, agora vamos à frame 5 de novo e vamos activar a primeira layer da boca “aberta”:

Agora é só seleccionar a máscara desta layer e alterar o formato da elipse com a Pen Tool (P) para lhe dar o aspecto mais louco possível (com a Pen Tool e a máscara seleccionadas, pressionem a tecla Ctrl e depois cliquem na elipse para aparecerem os pontos alteráveis e depois Ctrl de novo para os mover de um lado para outro)

Que tal? He he. Agora vamos fazer o mesmo nas frames e layers seguintes: Em cada frame, activamos outra das layers e alteramos. O resultado deve ficar algo assim:

Passo 5 – Temporização

Já devem ter notado que por baixo de cada frame aparece escrito 10 sec. Isto é a duração daquela frame. Neste caso está a dizer que cada frame vai durar 10 segundos.. Claro que nós não queremos isso, por isso vamos alterar os tempos individualmente..

A primeira frame é a parte normal do emoticon, por isso vamos pôr uns 2 segundos.
A segunda, em que ele começa a olhar para os lados – para ver se ninguém o está a observar – tem que ficar bem menos.. uns 0,7 segundos (no menu escolham Other e escrevam os 0,7).
A terceira frame, onde ele olha para o outro lado, vamos pôr ainda menos – 0,5 segundos.
A quarta frame também pode ser 0,5.
As outras quatro têm que ser mesmo rápidas.. Pode ser 0,1 segundos para cada.

Agora é só diminuir o zoom da nossa imagem até 100% e pressionar o botão Play animation para vermos como ficou. Alterem também o Once para Forever para que a animação continue sempre em vez de parar ao chegar à última frame.

Passo 6 – Retoques

Agora é uma boa altura para retocar e aperfeiçoar a nossa animação.. Na minha opinião, as retinas não dão a sensação de se estarem a mover rápido o suficiente nas últimas 4 frames.. Por isso vou lá com o pincel a 30% pintar em cada frame a posição em que os olhos estavam antes, para parecer uma mudança gradual, em vez de repentina:

Frame 5. Os olhos antes estavam abaixo, vou por um pixel nos lugares onde antes estavam as retinas:

Frame 6:

Frame 7:

E última:

Ok, acho que já está tudo bem =D

Passo 7 – Guardar como Gif Animado

Agora que temos a nossa animação pronta, queremos guardá-la. Para isso vamos ao menu File>Save for Web & Devices.
Nota: não se esqueçam claro de guardar sempre também o ficheiro original do Photoshop como .psd para poderem editar posteriormente.

A janela que apareceu tem imensas opções editáveis.. Mas nós vamos ver as principais para o nosso emoticon.

1 – O formato de ficheiro tem que ser Gif, uma vez que é o único ali que permite animação – provavelmente até já estava escolhido.
2 – O algoritmo de redução de cores pode ser praticamente qualquer um, desde que não altere muito o aspecto – eu vou escolher o Perceptual.
3 – O número de cores.. Bem, o nosso emoticon tem muito poucas cores, é quase tudo tons diferentes de amarelo e vermelho, por isso 64 cores deve chegar e ainda diminui o tamanho do ficheiro.
4 – Tem que ter transparência.
5 – O Matte é a cor que ele usa para poder tornar a transparência mais gradual.. Ou seja, aqui ele vai tornar as arestas do emoticon de cada vez mais brancas para se poder misturar com o fundo bem.. Vejam este exemplo:

O emoticon da primeira coluna não tem matte, o da segunda tem matte branco e o da terceira tem preto. Notam como o que tem matte preto fica mesmo bem no fundo preto e o que tem matte branco fica bem no fundo branco? Eu vou escolher branco porque todos os originais do Messenger também têm matte branco.. Provavelmente eles acham que a maior parte das pessoas usa fundo branco no Messenger.
6 – Este aqui não vai fazer muita diferença, mas numa imagem maior, ele iria pôr poucos pixeis numa área muito transparente e muitos numa área pouco transparente para parecer gradual.. Mas no nosso caso vamos deixar desactivado.
7 – Agora que está tudo bem, vamos gravar =D

Passo 8 – Importar no Messenger

Agora abram a vossa janela do Messenger e uma janela de conversa com alguém. Depois cliquem no botão dos emoticons e vai aparecer esta janela:

Cliquem depois em Mostrar tudo… E vai aparecer esta janela:

Agora é só clicar em Criar e vai aparecer esta janela:

Escolham onde está o Gif que vocês guardaram e depois um atalho (frase que ao escreverem, faz aparecer o emoticon) e pressionar OK.. E pronto, já podem usar um emoticon criado por vocês nas vossas conversas, programas, etc.

Resultado final:  Webtutoriais:CA5E50C6

Espero que tenham gostado e que comentem com sugestões ou mostrem os que vocês criaram e que subscrevam o nosso site para passarem a receber todas as novidades =D

Artigos relacionados:

1. Como Fazer Uma UserBar Animada Vamos aprender a fazer uma userbar animada no Photoshop! Podem usar a mesma técnica para fazer outras animações, como banners...

Hoje vamos ver vários que são compatíveis com os mais populares sistemas de blog, como o WordPress (este mesmo site usa o WordPress), Blogger, Typepad, etc.

Podem ainda ver no fim do artigo, uma tabela com alguns detalhes dos vários programas, incluindo os links para as páginas oficiais.

Microsoft Office Word

O conhecido programa de escrita da Microsoft também serve para bloggar. É só ir a Novo>Novo Artigo do Blogue e depois fazer uma configuração muito simples. No caso do Blogger é só por o username e a password. Se for WordPress é só por o endereço do blog, o username e a password.

Este é uma boa opção para quem já tem o Office 2007 e está habituado a poder formatar texto, imagens e tabelas no Word. Não se esqueçam que Título 1, Título 2, Parágrafo, etc correspondem a estilos CSS que estão definidos no vosso tema do blog. Por isso se no Word, escolheram o Título 1 e aparece um texto azul na fonte Calibri, não é assim que vai aparecer no blog.

O sistema de correcção ortográfica é dos melhores que já vi.

É uma óptima ferramenta, mas se não usam para mais nada, talvez o alto preço seja demasiado para apenas uma ferramenta de blogging – principalmente devido à seguinte:

Windows Live Writer

Este é um dos programas do pack Windows Live, que também inclui o Messenger, Movie Maker, Mail, entre outros programas gratuitos para utilizadores de Windows.

Este programa tem uma interface muito simples de utilizar e muito agradável. Podemos rapidamente inserir as tags (marcas) e categorias do artigo (ele faz o download dessa informação do blog) e guardar o nosso rascunho localmente no pc ou online no blog e pré-visualizar o post com o tema do blog sem sair do programa. Permite também adicionar plugins que ainda simplificam mais a realização de algumas tarefas, como por exemplo colocar ficheiros para download, inserir código de programação na página com formatação para ficar visível aos leitores, etc.

O Live Writer permite formatar de forma muito intuitiva as imagens inseridas, podendo adicionar sombras, marcas de água, etc. Podemos também predefinir uma configuração para as imagens inseridas e assim ele passa a redimensionar todas as imagens ou adicionar um efeito qualquer da nossa vontade.

Outra grande vantagem do Windows Live Writer são os links automáticos. Imaginem que falam muito num certo programa ou site – como o Photoshop, no meu caso. Com esta opção, podem por a cada vez que se escrever a palavra Photoshop, ele pôr um link para o site oficial. Se não quiserem tudo cheio de links, podem por a aparecer apenas a primeira vez que a palavra aparece em cada post. Adorei isto.

Recomendo vivamente que experimentem este programa, porque além de ser muito bom e estar todo em português, também é gratuito =D

A minha única queixa é que o sistema de correcção ortográfica não é tão bom como o do Word, o que é pena. Mas mesmo assim é bastante bom.

BlogDesk

O BlogDesk é o que tem a interface mais simples de todos os que experimentei e é facílimo de usar e configurar. Tem algumas características interessantes, como o bloco de notas, onde podemos escrever coisas para vermos depois e que não faz parte do post. Ele grava automaticamente no intervalo de tempo que quisermos para que não aconteça de o pc ir abaixo e lá se foi um dia de escrita ao ar..

O BlogDesk tem ainda um importador de imagens com várias configurações e personalizações. Assim como o Live Writer, também permite por sombras e outros efeitos nas imagens.

Ele vem em inglês mas podem fazer no site oficial o download de packs de outras línguas – das quais português não faz parte – este só vai servir para quem não escreve em português =/

Qumana

O Qumana tem um sistema integrado de rentabilização do blog por publicidade inserida directamente através do programa.

É pena, mas por alguma razão não consegui por o programa a funcionar no meu pc (não deve ser compatível com o Windows 7) embora o programa mesmo sem abrir, gaste mais memória ram que o Photoshop aberto sem imagens. Por causa disso, não pude experimentar nem mostrar uma imagem (esta foi tirada do site) e não posso dar-vos a minha opinião.

w.bloggar

O w.bloggar é dos programas com maior compatibilidade de sistemas, gasta muito pouca memória ram, mas também tem o problema da língua – não tem português. Mas mesmo assim, não deixa de ser um programa simples de usar e tem a vantagem de existir uma versão portátil que podem ter instalada numa pen-drive já com as vossas configurações e rascunhos. Pode dar jeito quando forem em viagem e só tiverem o netbook e não tenham internet.

Post2Blog

O Post2Blog é o favorito de muita gente e vejo porquê: é muito fácil de configurar, é simples para quem tem vários blogs e várias contas em cada blog, o corrector ortográfico funciona bem e também tem uma versão para pen-drive. Este programa é também muito leve, gasta pouca ram e tem dicionários em várias línguas (não tem português de Portugal, mas tem do Brasil).

OpenOffice Writer

O conhecido Writer do OpenOffice tembém tem uma extensão para ganhar a capacidade de escrever para um blog. Basta ir aqui e instalar a extensão e ele fica logo com o menu Weblog na barra que lhe permite configurar as opções necessárias para blogs. Claro que o Writer também trás todas as vantagens que referi no Word: sistemas de tabelas e de edição de texto e de imagens muito melhores que os concorrentes.

Lista de Comparação Rápida

Aqui podem ver os vários programas, a sua compatibilidade quanto a sistemas operativos e ainda a sistemas de blog.

(1) – Vem com o Microsoft Office que custa a partir de 150€
(2) – É preciso instalar esta extensão para ele poder funcionar com blogs

Espero que isto vos tenha ajudado e até à próxima.

Nota: Este artigo foi escrito no Word, mas eu normalmente uso o Windows Live Writer =D

Artigos relacionados:

1. Como Fazer uma T-Shirt para Geeks no Inkscape Vamos aprender a criar uma imagem para uma t-shirt do princípio ao fim no Inkscape. Aprendam a vectorizar e a...

Agora vamos pintar o fundo com qualquer coisa e fazer imenso Blur para não ficarmos com um fundo plano básico. Para o blur, vão a Filter>Blur>Gaussian Blur e escolham um valor elevado.

Agora com a Type Tool (T), escrevam o vosso texto no meio da imagem. Eu usei a fonte Garamond, que vem com o Photoshop.

Agora é só clicar duas vezes na layer do texto para abrir a janela dos Layer Styles e pôr estes na Drop Shadow para ficar uma sombra interessante:

Agora Bevel and Emboss para dar o efeito metálico:

E agora vamos só adicionar um Gradient Overlay para tornar a cor do texto mais dinâmica:

E o gradiente que usei foi este:

Não têm que usar exactamente as mesmas cores, estas foram escolhidas à sorte só para dar o efeito de reflexos no metal. E o meu resultado final foi este:

Agora podem guardar este estilo para usar mais tarde. Com a layer do texto seleccionada, vão à janela Styles e cliquem no botão New e vão ficar lá com o estilo guardado.

Posteriormente, para usar o estilo, é só seleccionar uma layer e clicar no estilo pretendido. Espero que tenham gostado e até à próxima =D Webtutoriais:33613A8E

Artigos relacionados:

1. Como Fazer um Wallpaper Abstracto no Photoshop Vamos aprender a fazer um Wallpaper impressionante, mas também muito simples no Photoshop...

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...

Por isso, neste tutorial vamos aprender a dar mais interesse a uma foto fraca para a fazer parecer uma foto melhor =D

Passo 1 – Obter uma Foto

Bem, para este tutorial, vamos precisar de uma foto mesmo fraca, por isso aproveitei para tirar uma foto à praia de espinho com o telemóvel.

É uma foto de 5 Megapixéis, o que significa que a altura da imagem em pixéis multiplicada pela largura em pixéis dá um valor acima de 5 milhões de pixéis.. Neste caso, a foto tem 1.944 pixéis de altura e 2.592 de largura, o que dá 5.038.848..

Lembrem-se sempre que ao escolher uma câmara, não importa apenas o valor dos megapixéis.. No caso dos telemóveis, eles podem ter um sensor de 5MP, mas as lentes são muito fracas devido ao pouco espaço disponível e aos preços de lentes boas, por isso são fotos quase sempre de baixa qualidade e com muito ruído..

Ok, voltemos ao tutorial..

Esta é a foto que vamos usar:

Cliquem com o botão direito do rato e Guardar Destino Como para guardar a foto no tamanho original

Vêem como parece pálida e desinteressante?

Vamos agora abrir o nosso amigo Photoshop e arrastar a foto lá para dentro

Passo 2 – Eliminar Partes Indesejadas

Se notarem, vemos alguns objectos na imagem que não ficam bem, por isso vamos apagá-los, para isso pegamos na Clone Stamp Tool (S) e vamos com o botão direito do rato na imagem, escolher um pincel suave de 65px. Agora vamos copiar desta zona para esta:

Para isso, pressionem a tecla Alt e cliquem na zona que querem copiar e larguem o Alt. Agora é só pôr o rato no lugar certo da área a substituir (parem com o rato lá em cima e ele mostra como vai ficar) e cliquem e arrastem o rato de forma a substituir tudo o que estiver a mais. Se for preciso clicar várias vezes até apagar uma zona, não há problema. Vejam como ficou:

Até copiei a onda que está à direita para aquela zona não ficar tão monótona.

Agora vamos fazer isto para apagar todas as zonas indesejadas:

Cliquem na imagem para aumentar

E o resultado fica assim:

Passo 3 – Todos gostam de Contraste

Vamos agora ao menu Image>Adjustments>Brightness/Contrast e vamos aumentar o contraste da imagem. O contraste é a diferença entre as cores claras e as escuras na imagem.. Se nós aumentarmos, ele vai escurecer as partes escuras e clarear as claras para aumentar essa diferença.. Normalmente, ao aumentar o contraste, a imagem fica mais escura, por isso aumentamos o brilho (Brightness) para contrabalançar.. Usem a gosto. Eu pus assim:

O nosso cérebro adora contraste, se nós pusermos uma foto aborrecida (como a original) ao lado de uma com grande contraste (como esta) somos muito mais atraídos para esta =D

Passo 4 – Vignette

Bem, este passo é completamente opcional.. Algumas câmaras têm lentes que nas fotos, captam sombra dos suportes das lentes, o que faz ficar uma sombra nos quatro cantos da imagem, a esse efeito chama-se Vignetting.. Este efeito não fica bem em todas as imagens, mas esta bem que pode ganhar qualquer coisa com isto..

Vamos ao menu Filter>Distort>Lens Correction e abre uma janela nova com várias opções.. Este filtro serve para anular algumas distorções causadas pelas lentes das câmaras, mas podemos também usá-lo para adicionar essas distorções – incluindo a nossa vignette.

Podem clicar em baixo na opção de Show Grid para a esconder e vamos a Vignette e vamos diminuir o Amount até ao valor que gostarem mais.. Eu usei –54 no Amount e +27 no Midpoint.

Se quiserem brincar com as outras opções, estejam à vontade, é assim que se aprende =D

Passo 5 – Ajustar Cores

Este passo também é opcional uma vez que nesta foto não vai adiantar muito, mas em algumas fotos ajuda imenso.

Vamos à lista das Layers e vamos clicar no botão em baixo que diz Create New Fill or Adjustment Layer. No menu que aparece, escolham Hue/Saturation.

Nós podíamos fazer isto através do menu Image>Adjustments>Hue/Saturation, mas aí, as alterações que fizéssemos seriam definitivas, enquanto que assim, podemos voltar a editá-las ou apagá-las.

Na janela que apareceu, podemos alterar as cores da imagem, a sua intensidade e ainda a luminosidade. Podem alterar para ver os efeitos, mas o que normalmente é mais útil é alterar a opção Master para o grupo de cor que queremos alterar..

Neste caso podemos achar que a areia da praia está com a cor muito forte. então fazemos assim:

De que cor é a areia aqui na imagem?

Amarelo e um pouco Vermelho

Então alteramos o Master para Yellows (amarelos) e vamos diminuir a Saturation. Devem conseguir ver logo a areia a ficar mais cinzenta.. Escolham um valor que achem bem e vamos agora alterar o Yellows para Reds (vermelhos) e diminuir um pouco também. Podem fechar a janela do Hue/Saturation.

O que acham agora da imagem? Está muito mais desinteressante e deprimente que antes, não é? Então simplesmente seleccionamos a layer Hue/Saturation e diminuimos a sua Opacity ou apagamos mesmo a layer.

E voilá, já está a nossa foto digna de um álbum, vejam a diferença:

Foto Original

Foto Final

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

Artigos relacionados:

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

Para isto, precisamos de duas coisas: uma foto do carro que queremos e o logo da marca do carro.

Eu escolhi o Mazda Kazamai porque mostra de forma muito nítida a espectacular nova política de design Nagare da Mazda. Podem obter a foto que vamos usar aqui e o logo da Mazda obti no site BrandsOfTheWorld, mas vem em formato EPS, por isso converti-o para podermos usar no Inkscape e podem obter o ficheiro convertido aqui.

1 – Novo Ficheiro

Abram o Inkscape e pressionem Ctrl+Shift+D para abrir as configurações do ficheiro. Vamos alterar a dimensão da imagem para 1920x1200px:

Vamos agora fechar esta janela e arrastar a foto para a imagem..

Rodem a roda do rato para fazerem zoom e pressionem a roda enquanto movem o rato para se moverem pela imagem.

2 – Dar rodas ao nosso Mazda

Vamos pegar na ferramenta dos círculos:

E vamos criar um círculo que vai ser a roda traseira do carro (pressionem a tecla Ctrl para criarem um círculo perfeito em vez de uma elipse):

Assim não se percebe muito bem se a roda está bem feita ou não, por isso vamos tirar-lhe o preenchimento e adicionar-lhe um traço.

Vamos ao canto inferior esquerdo da janela do Inkscape e vamos clicar duas vezes no rectângulo preto que representa a cor do preenchimento da forma:

Isto vai abrir uma barra lateral com as opções de preenchimento do objecto seleccionado.. Cliquem no X para tirar o preenchimento.

E agora vamos a Pintura de Traço e vamos escolher a cor branca:

(É só pressionar o botão do rato no interior do triângulo e arrastar até à zona branca)

Vamos agora à secção Estilo de Traço e vamos alterar para as que tenho aqui (depois quando quiserem, aconselho a experimentarem as várias opções aqui para verem o que cada uma faz e vão ver a utilidade de cada uma delas):

Vamos agora buscar a ferramenta de selecção:

E vamos desactivar este botão na barra de cima do Inkscape do lado direito (só o primeiro):

Agora vou posicionar o círculo o melhor possível na roda e redimensioná-lo se necessário até combinar com a foto. E, com o círculo seleccionado, vamos pressionar o botão de duplicar:

E ao novo círculo vamos redimensionar pressionando Ctrl e Shift até ficar do tamanho da jante:

2.5 – Alinhar a foto

Agora vamos seleccionar os dois círculos, duplicá-los e mover os novos para a roda da frente pressionando Ctrl para ficarem perfeitamente horizontais (eu sei que não vão ficar bem com a foto, mas vamos já corrigir isso..)

Agora seleccionem a foto, arrastem-na um pouco para baixo e cliquem novamente no interior da foto para alterar os botões de redimensionamento nos cantos para botões de rotação e vamos rodar a foto e movê-la de forma a que as rodas do carro fiquem alinhadas o melhor possível com as que criamos agora:

Ok.. já temos a foto alinhada por isso já podemos passar ao próximo passo

3 – Vectorizar a imagem

Vamos buscar a Bezier Tool:

E vamos começar a traçar a linha exterior do carro.

Para começar é só clicar no local onde vai ficar o primeiro ponto, depois, para os pontos seguintes clica-se e mantém-se o botão pressionado enquanto se move o rato de forma a criarmos a curva pretendida. se quisermos criar um vértice com curva dos dois lados, é só desenhar a curva como fariam normalmente, mas depois de alinharem o primeiro lado da curva, pressionem a tecla Shift para mudar de direcção..

Experimentem já criar formas aleatórias para treinar e vamos começar com o carro =D

Vou começar pela janela de trás: clico para criar um ponto e adiciono outro ponto a meio da curvatura da janela e arrasto o rato para criar uma linha que acompanhe a curva:

Agora largo o botão do rato e clico para adicionar o próximo ponto da linha.

Como vêem, neste ponto arrastei o rato para a curva se aproximar o máximo possível à janela do carro, mas assim deixa de combinar com o formato do tecto do carro.. Por isso, antes de largar o botão do rato, pressiono a tecla Shift e a curva muda de direcção e já posso desenhar o resto.

Por agora já devem perceber mais ou menos como isto funciona.. Por isso é só seguir o formato do carro o melhor que for possível através da imagem.

Lembrem-se que podem sempre alterar os pontos e curvas depois, por isso se se enganarem, continuem o melhor possível e não pressionem Ctrl+Z porque isso vai-vos obrigar a começar do primeiro ponto de novo.. Assim que a vossa linha chegar à roda da frente, façam o traço tocar na roda e pressionem Enter para terminar o traço:

Agora, com a ferramenta de seleccionar, seleccionem um dos círculos das rodas e pressionem Ctrl+C e depois seleccionem o vosso novo traço e pressionem Ctrl+Shift+V para aplicar o mesmo estilo da roda ao novo traço.. E vamos de novo à secção de Estilo de Traço alterar a largura de traço para 3px em vez de 5. A partir de agora vamos aplicar este estilo a todos os traços para ficarem todos uniformes e depois vamos alterar alguns deles no fim para aumentar a dinâmica da imagem por isso quando criarem um novo traço, copiem o estilo destes (Ctrl+C) e colem no novo (Ctrl+Shift+C)

Vamos agora criar um novo traço que vai de uma roda até a outra por baixo do carro e depois um que começa na janela até à roda de trás e teremos toda a linha exterior do carro feita. Para continuarem um traço que já tinha sido terminado, é só seleccionarem-no e depois pegarem na ferramenta dos Bezier’s e automaticamente aparecerão os pontos iniciais e finais para se continuar o traço =D

O meu final ficou assim:

Agora vamos traçar a janela do carro (eu comecei no vértice do lado esquerdo):

E a janela de trás:

E o pára-brisas:

E os faróis traseiros (tive que diminuir ainda mais a largura do traço para 1px):

Aquela coisa de alumínio na lateral do carro em baixo..

E um traço a dividir a parte branca da carroçaria e as partes em plástico escuro:

E os dois traços da porta:

A partir de agora vamos fazer uns traços um pouco diferentes.. Vamos começar pelos das cavas das rodas:

Seleccionem um dos círculos da roda de trás e dupliquem-no.. Agora vamos aumentá-lo, pressionando Ctrl e Shift até o tamanho do círculo coincidir com a linha da cava das rodas:

Agora é melhor diminuir a largura do traço para 3px..

Agora, vamos buscar a ferramenta do Círculo e seleccionar este novo círculo.. Vão reparar que aparecem dois pontos quadrados no círculo.. um em cima e o outro à esquerda.. estes pontos ajustam a altura e largura do círculo.. Mas também está um circular à direita – que na verdade são dois – e que controla que ângulo do círculo é desenhado.. Vamos arrastar esse círculo a dar a volta toda no sentido dos ponteiros dos relógios até ao lado direito da linha da cava da roda:

E o outro círculo lá, vamos arrastar até ao lado esquerdo da linha da cava da roda:

Por vezes, acontece um bug e a linha é desenhada desde os dois pontos circulares até ao centro do círculo também.. Para corrigir isto, é só ir aos botões em cima e pressionar o botão que retira isso:

Agora, vamos alterar a cor da linha.. Como vêem, a linha original é muito ténue dos lados, enquanto que a nossa é exactamente igual em toda a sua extensão.. Para alterar isso, vamos à secção Pintura de Traço na barra lateral e vamos mudar a cor de Cor Lisa para Degradê Linear:

Agora pressionem o botão Editar.. e vai aparecer uma nova janela. Nesta janela pressionem o botão Acrescentar Parada. Como vêm, existe uma dropdown box para poderem escolher os pontos do gradiente:

Escolham o primeiro e na barra da transparência reduzam para completamente transparente:

Agora seleccionem o ponto do meio e ponham completamente visível e o terceiro ponto completamente invisível também..

Como ficou agora o traçado da cava da roda? Já podem fechar a janela dos degradês.

Vamos agora fazer o mesmo à roda da frente. Duplicar um dos círculos, aumentar até à linha, diminuir a largura do traço para 3px, alterar o ângulo e pintar com gradiente =D

Agora adicionar uma linha na grelha frontal para marcar a forma dessa parte do carro (pus com 2px de largura):

Agora vamos pôr um gradiente nesta também. Vamos à Pintura de Traço e escolhemos o gradiente linear. Agora, vamos buscar a ferramenta de alterar gradientes:

E vamos alterar os pontos do gradiente de forma a ficar a parte branca do gradiente do lado direito e a transparente do lado esquerdo:

Agora abaixo da janela de trás:

E:

E todas as outras zonas que precisam de mais definição:

Usem gradientes de 3 pontos se necessário como os das cavas das rodas.. Nem precisam de alterar a transparência de cada ponto outra vez, mal cliquem no botão de Gradiente, escolham logo um dos já usados na lista:

E já podem usar o de 3 pontos outra vez:

E novamente na arte lateral do carro:

Agora vamos duplicar novamente um dos círculos da roda de trás do carro, pôr a largura do traço a 2px e diminuí-lo (a pressionar Ctrl e Shift) até que seja do tamanho do centro da jante onde está o logo:

Claro que o centro não alinha devido à perspectiva.. Agora vamos arrastar o ficheiro com o logo da Mazda para a nossa imagem. Vamos desagrupar o logo:

E vamos duplicar o símbolo e trazer o duplicado para perto da roda de trás. Temos na parte inferior do programa uma barra cheia de cores, se clicarmos numa delas, ele aplica esse preenchimento aos objectos seleccionados. Se clicarmos numa cor premindo a tecla Shift, ele altera a cor do traço dos objectos seleccionados para essa cor. Vamos clicar na cor branca para pintar o nosso símbolo de branco.

Vamos diminuir o tamanho do símbolo até caber no pequeno círculo dentro da jante que criámos há pouco. Agora vamos clicar neste botão para aparecer na barra lateral, as ferramentas de alinhamento:

Alterem a opção em cima para Último Seleccionado (se ainda não estiver) e seleccionem o símbolo e depois o círculo e pressionem os botões de alinhar ao centro verticalmente e horizontalmente.

Agora com ambos seleccionados, dupliquem e seleccionem também um círculo da roda da frente e alinhem com esse para ficar um símbolo em cada roda.

Como o carro já está vectorizado, podemos apagar a foto de referência, já não vamos precisar mais dela.

4 – Alterar o fundo I

Vamos ao menu Ficheiro>Propriedades do Desenho e vamos alterar a cor do fundo da imagem.. Actualmente está transparente, vamos alterar para um azul assim:

5 – Alterar traços da imagem

Vamos verificar todas as linhas do carro e alterar os traços importantes para uma largura maior e os menos importantes para uma inferior:

Alterei a linha exterior para 5px, a das rodas para 6px, a das jantes para 4, e mais algumas alterações menores.

6 – Decorar o wallpaper

Vamos criar uma grelha para dar um estilo de blueprint ao wallpaper. Vão ao menu Ver>Grelha e deverá aparecer uma grelha na imagem..

Com a ferramenta de Bezier, criem um desenho assim:

Agora dupliquem este objecto, e com a ferramenta de seleccionar, rodem 90º para qualquer lado (pressionem Ctrl para rodar sempre num ângulo certo) de forma a ficar vertical em vez de horizontal:

Vamos agora esticar horizontalmente a nova grelha de forma a que ocupe o espaço todo do wallpaper. Também aproveitei e com a ferramenta de editar objectos:

Apaguei os pontos do path que estavam fora do wallpaper:

Agora se quiserem, podem fazer outro path com linhas mais estreitas:

E se fizeram, façam o mesmo a este que ao anterior: duplicar, rodar, alinhar com o outro, esticar e apagar pontos desnecessários. Apaguei a grelha e está assim:

Agora é só alterar um pouco o aspecto destas novas grelhas que fizemos..

Vamos seleccionar as duas grandes e alterar a largura do traço delas para 3px e das mais pequenas para 1px:

E vamos seleccionar as 4 e agrupá-las. E depois vamos aumentar a transparência do grupo para elas ficarem menos evidentes. É só ir ao canto inferior esquerdo e mudar o 100% que está lá para 40%.. deve chegar..

6 – Decorar a imagem

Agora vamos pôr a grid visível novamente e vamos criar um rectângulo à volta do wallpaper (eu, com o zoom a 111% pus os pontos a 3 quadrados de distância da borda da imagem):

Pus a largura do traço deste rectângulo a 5px. Agora vamos ao menu Caminho>Traço para caminho..

Já podem esconder a grelha novamente.

Agora vamos buscar o nosso logo da Mazda (só o texto) e vamos pô-lo no canto superior direito da imagem, o mais alinhado possível com o nosso novo traço e vamos diminuir um pouco o tamanho do logo (pressionando Shift e Ctrl) de forma a ficar mais proporcional. Ah, e pintem o logo de branco:

E vamos pegar na ferramenta de Texto e vamos escrever a palavra Kazamai em maiúsculas. Pintar a palavra de branco e pressionar o botão de Texto na barra superior do programa. Agora nessa janela escolham uma das vossas fontes que vocês achem que combine com a palavra e com o wallpaper.

Cliquem em Apply e alinhem o texto a um canto do símbolo da Mazda. E agora redimensionem a palavra Kazamai de forma a ter a mesma largura que a palavra Mazda (pressionando Ctrl):

Vamos deixar a palavra Mazda no lugar e vamos mover a palavra Kazamai para a parte inferior da imagem, alinhando-a o melhor possível com o rectângulo (pressionem Ctrl enquanto movem o objecto para ele se manter em linha):

Agora vamos buscar a ferramenta de desenhar rectângulos e vamos desenhar um à volta da palavra Kazamai com algum espaço a toda a volta da palavra:

E vamos seleccionar também a palavra Kazamai e vamos alinhar o rectângulo verticalmente e horizontalmente ao centro da palavra Kazamai.

Vamos agora duplicar o nosso rectângulo e alinhar o duplicado com a palavra Mazda também horizontalmente e verticalmente.

Agora vamos seleccionar o rectângulo branco que desenhámos à volta da imagem e um dos rectângulos novos e vamos ao menu Caminho>Diferença para subtrair o rectângulo em cima ao que estiver em baixo.. Depois é só fazer a mesma coisa para o outro rectângulo, de forma a criar um espaço vazio à volta das palavras que pusemos na imagem =D

Vamos agora seleccionar todo o carro (apenas o carro) e vamos agrupá-lo de forma a podermos manipulá-lo como a apenas um objecto.

Depois vamos alterar a configuração da barra Alinhar e Distribuir para “Página” e vamos alinhar o carro ao centro da página horizontalmente e verticalmente.

Vamos desenhar uma linha assim ao lado de uma das rodas:

Temos de pintar a linha de branco e afastá-la um pouco para longe do carro e com a ferramenta de texto, vamos escrever a dimensão das jantes (22″):

Vamos agora desenhar um para a altura do carro (1500mm):

E um para o comprimento do carro (4520mm):

Vamos agora abrir espaço para o texto nas linhas que fizemos. Seleccionamos uma delas com a ferramenta de editar beziers equando virmos os pontos da linha, clicamos duas vezes no local onde queremos criar um ponto. Adicionem um ponto de um lado do texto e o outro do outro e vamos fazer a linha desaparecer entre os dois pontos:

Vamos seleccionar os dois pontos que criamos e vamos clicar neste botão da barra superior:

E depois de clicar lá, deverá ter desaparecido a linha entre os dois pontos seleccionados. Agora só temos que fazer isto para os outros dois traços:

Agora só vou pegar no símbolo da Mazda que está do lado de fora da imagem e alinhá-lo com o centro horizontal da página e pintá-lo de branco:

Já só falta dar alguma dinâmica ao fundo, que actualmente está todo da mesma cor. Por isso desenhem um rectângulo a toda a volta da página e pintem-no de um azul mais escuro que o do fundo:

E na barra lateral do Preenchimento, escolham o Degradê Radial e cliquem em Editar.

Vamos alterar o ponto actual para transparente e o outro para completamente opaco. Alterem os pontos do gradiente a vosso gosto:

E com a ferramenta de selecção, e com o rectângulo seleccionado, vamos arrastá-lo para debaixo de todas as outras coisas na imagem, carregando neste botão:

E pronto, já está a nossa obra prima =D

É só gravar e ir ao menu Ficheiro>Exportar Bitmap, escolher Página e alterar as dimensões para 1920 e 1200 e exportar.

O meu resultado final: 

Espero que tenham gostado e até à próxima. Classifiquem e comentem =D

Artigos relacionados:

1. Como Fazer uma T-Shirt para Geeks no Inkscape Vamos aprender a criar uma imagem para uma t-shirt do princípio ao fim no Inkscape. Aprendam a vectorizar e a...

Só precisam do Photoshop..

Passo 1 – Obter uma Imagem

Precisamos de uma imagem que pode ser um logo ou uma foto.. Eu vou usar uma foto, por isso fui ao site www.sxc.hu e encontrei esta (cliquem na imagem para a abrir):

Esta imagem tem boa resolução, um objecto relativamente complicado e tem o fundo branco que nós precisamos..

Passo 2 – Photoshop FTW

Agora vamos abrir o Photoshop e arrastar a nossa imagem para lá..

Passo 3 – Correcções e Ajustes são sempre necessários

Vamos ter que apagar a fita da câmara no lado esquerdo.. Por isso, com a Brush Tool (B) e com um pincel circular duro com o tamanho perto de 250px vamos pintar de branco a fita da câmara até ficar assim:

Conseguiram? Não é precisa muita perfeição porque isto vai ficar praticamente irreconhecível..

Vamos também buscar a Burn Tool e com um pincel suave de cerca de 200px, vamos “queimar” um pouco nas zonas que eu mostro aqui em laranja:

Isto é apenas para se notar mais a silhueta da câmara no próximo passo..

A vossa imagem agora deve estar assim:

Passo 4 – Threshold faz Magia

Agora vamos ao menu Image>Adjustments>Threshold e vamos arrastar o ponteiro até termos algo que se pareça com uma câmara..

Se alguns detalhes da câmara não se notarem bem, é só cancelar e ir com a Burn Tool outra vez nas zonas que ainda não se notam.. Eu tive que passar várias vezes na parte de cima da câmara até essa zona se perceber..

Agora cliquem no OK e próximo passo:

Passo 5 – Nós queremos é Cor!

Vamos seleccionar a nossa layer e pressionando a tecla Alt, vamos clicar duas vezes na layer para a desbloquear..

Agora, vamos pressionar estes atalhos para remover o branco da imagem: Ctrl+A, Ctrl+C, Q, Ctrl+V, Q , Del.

Agora para tirar todo o cinzento também, vamos abrir os Levels (Ctrl+L) e vamos arrastar o ponteiro branco para o lado preto completamente..

Vamos criar uma nova Adjustment Layer:

E vamos escolher esta cor: #fff300.. É só inserir fff300 na caixa de texto que está na janela..

Vamos pressionar OK e agora vamos clicar com o botão direito do rato na máscara desta layer e escolher Delete Layer Mask para apagar a máscara.

Vamos agora adicionar uma layer normal e com o Paint Bucket pintá-la de branco.. Agora vamos mover esta layer para baixo da nossa câmara para ser o fundo.

Com o Ctrl pressionado, vamos clicar na miniatura da layer da câmara para criar uma selecção com os píxeis desta layer.. (Podem também clicar com o botão direito do rato na miniatura e escolher Select Pixels)

Agora vamos seleccionar a layer amarela e vamos pressionar o botão de criar máscara:

Deve agora estar amarelo só na zona da câmara..

Agora ponham a layer original da câmara invisível e mudem o Blending Mode da layer amarela para Linear Burn..

Vamos duplicar esta layer duas vezes e a uma delas deixamos desta cor, a outra mudamos para #00a0ea e a outra para #e5017a – é só clicar duas vezes no ícone amarelo da layer..

A câmara deve estar novamente em preto, certo? Para mudarmos isso, vamos com a Move Tool (V) seleccionar as layers uma a uma e mudá-las alguns píxeis de forma a não ficarem todas no mesmo lugar.. É só seleccionar e usar os botões direccionais do teclado para as mover.. Tentem ficar com algo assim:

O que fez a vossa imagem ficar assim (cliquem na imagem para aumentar):

E pronto, já aprenderam mais um estilo de imagem para os vossos projectos.. Vejam como fica aplicado a um logo:

Para usarem é só apagar o fundo branco, gravar como PNG com transparência e voilá

E já não falo mais por hoje.. Até à próxima =D

Artigos relacionados:

1. Como Fazer uma Montagem de uma T-Shirt no Photoshop Vamos aprender a fazer uma montagem super realista de uma t-shirt no Photoshop...

O tutorial vai ter quatro partes.. Na primeira parte, vamos fazer o fundo da imagem; na segunda vamos fazer o logo da imagem; na terceira vamos fazer o texto e na quarta vamos finalizar o logo e a imagem

Só é preciso o Photoshop para este tutorial.. Vamos começar:

Parte 1: O Fundo

Criem um novo documento no Photoshop.. Eu decidi fazer um wallpaper, por isso vou dar ao meu documento a dimensão 1920×1200..

Com a Paint Bucket Tool (G), preencham toda a layer com um cinzento à vossa escolha..

Agora, vão ao menu Filters>Render>Lighting Effects e brinquem com os parâmetros até obterem qualquer coisa que gostem.. Eu pus assim:

Aceitem as alterações e agora vamos a Filters>Blur>Gaussian Blur e vamos escolher um valor que ponha a imagem quase uniforme..

A minha ainda não ficou muito uniforme, por isso vou pressionar Ctrl+F para aplicar o último filtro usado novamente – que é o Gaussian Blur.

Podíamos agora aplicar uma textura ao nosso fundo ou uma cor, mas não vou fazer isso neste tutorial.. Mas vocês estejam à vontade para fazer o que quiserem..

Parte 2: O Logo

Agora vamos desenhar um foguetão com a Pen Tool (P).. Vamos criar um novo Grupo acima da nossa layer actual e criar uma nova layer lá dentro.

Certifiquem-se que a vossa Pen Tool está configurada para criar shapes.. É só clicar aqui:

Agora vamos ao menu View>Show>Grid e deve aparecer a grelha na vossa imagem.. Para a fazer aparecer e desaparecer, é só pressionar Ctrl+H..

Com a Grid visível vamos fazer zoom até cerca de 200% para se verem melhor os quadrados da grelha.. Agora com a Pen Tool vamos criar um ponto:

E agora vamos continuar a desenhar a estrutura do nosso foguetão com mais alguns pontos.. Ao pressionar prolongadamente, ele cria um ponto de Bezier, o qual permite desenhar uma curva.. Tentem obter qualquer coisa parecida com isto:

Podem sempre ajustar a posição dos pontos pressionando Ctrl e movendo-os para o novo local. E podem ajustar a curva deles com a tecla Alt..

Criem agora uma nova layer abaixo desta e vamos desenhar as.. mm.. como será que se chamam aquelas coisas que parecem asas?.. oh, que importa.. vocês sabem o que é..

Agora vamos buscar a Path Selection Tool (A) e vamos seleccionar esta “asa” e com a tecla Alt pressionada, vamos arrastar o path para o duplicarmos (depois de ter aparecido o clone, pressionem também a tecla Shift para o clone se deslocar alinhado com o original).

Com o clone ainda seleccionado vamos ao menu Edit>Transform Path>Flip Horizontal e movam o clone até parecer alinhado com a nave..

Com um dos paths ainda seleccionado, vamos desenhar com a Pen Tool o tubo por onde saem as chamas..

Lembrem-se, isto é uma ilustração, por isso não precisa de ser perfeita =D

Claro que se quiserem ser perfeccionistas, podem sempre criar os paths em layers separadas e alinhá-las com a Move Tool (V) e depois juntar tudo outra vez (Com a Path Selection Tool, seleccionem a máscara da layer a copiar e pressionem Ctrl+C e depois seleccionem a máscara da layer para onde querem copiar o path e pressionem Ctrl+V)..

Agora vamos alterar um pouco as cores do nosso foguetão porque não se percebe muito o que se passa ali.. É só clicar duas vezes no ícone da layer respectiva para mudar a cor..

Agora vamos criar uma nova layer abaixo das duas do foguetão e é nesta layer que vai ficar a parte amarela das chamas =D

Nesta layer, com a Pen Tool desenhem algo parecido com isto:

Com este objecto, vamos desenhar as nossas chamas =D

Com a Path Selection Tool posicionem a nossa chama logo a seguir ao tubo das chamas e se for preciso, redimensionem e rodem – é só pressionar Ctrl+T..

Para duplicar o objecto, já sabem: pressionar Alt e depois arrastar.. Para inverter, vão ao menu Edit>Transform Path>Flip Horizontal.

Tentem criar umas chamas assim:

Ok? Agora dupliquem esta layer – é só arrastá-la para o botão de nova layer -  e mudem a cor dela para vermelho..

Com a Move Tool, redimensionem o objecto para ficar numa posição realista e novamente com a Path Selection Tool mudem um pouco o aspecto dos nossos paths..

Que tal? Foi mais fácil do que o que pensavam, não foi?

Agora, numa nova layer acima de todas do foguetão, vamos desenhar a tão característica janela circular.. Com a Ellipse Tool (U)..

Como a janela não está muito interessante, vamos dar-lhe algum brilho.. Numa nova layer acima desta, de cor branca, vamos desenhar um círculo pequeno:

Com a Path Selection Tool, vamos duplicá-lo, e esticá-lo um pouco para ficar com bom aspecto..

Ok.. Quanto ao foguetão, acho que está tudo..

Parte 3: O Texto

Vamos fechar e esconder o Grupo do foguetão para não ocupar espaço na lista das layers e acima dele vamos criar uma nova layer e vamos escrever qualquer coisa com o tipo de letra Impact..

Vamos clicar com o botão direito do rato na layer do texto e escolher Convert to Shape.. Agora vamos seleccionar tudo (Ctrl+A) e vamos com a Move Tool centrar o texto na imagem:

Agora vamos aumentar o tamanho do texto para ocupar a maior parte do espaço.. Pressionem Shift e Alt enquanto aumentam para manter a relação altura-largura e redimensionar mantendo o centro da layer..

Vamos duplicar esta layer e na que estiver embaixo, vamos clicar com o botão direito do rato e escolher Rasterize Layer.. Isto transformou a nossa layer vectorial numa layer normal, que podemos editar.. Também mudei a cor da minha para preto pressionando Ctrl+I para inverter a cor, mas se a vossa for de outra cor, podem pressionar Ctrl+L para abrir os Levels e arrastar o node branco até ao lado preto.. Mudem o nome desta layer para SOMBRA.

Com a tecla Ctrl pressionada cliquem no ícone da layer sombra para criar uma selecção só com o conteúdo da layer, e vão ao menu Select>Modify>Contract e ponham 1px no valor e pressionem o Ok.. Isto fez diminuir toda a selecção em 1 pixel a toda a volta.. Agora vamos inverter a selecção – Ctrl+Shift+I – e vamos pressionar Del para apagarmos 1 pixel a toda a volta da nossa sombra..

Seleccionem a layer de texto que tem a máscara e diminuam a Opacity dela para 5%, de forma a quase não se ver.. E, pressionando Alt, arrastem a máscara para a nossa layer da sombra..

Com a Path Selection Tool seleccionem todas as letras na máscara da layer sombra e alterem o modo para Subtract:

Isto fez a layer desaparecer.. Mas não faz mal.. Agora, só vai aparecer o que sair para fora das letras, que é o que nós queremos =D

Agora vai começar a magia..

Seleccionem a layer sombra (não a máscara) e peguem na Rectangular Marquee Tool e seleccionem uma das letras do texto..

Com a Blur Tool a usar um pincel suave de cerca de 65px e com o Strength a 100%, vamos tentar criar uma sombra realista para parecer que a nossa imagem é uma folha de papel na qual cortamos algumas partes das letras com um x-acto e que as dobramos para fora da folha..

Lembrem-se, para uma sombra ser realista, tem que ficar menos visível e mais suave com a distância..

Tentem fazer assim:

Vamos agora fazer isto para cada letra.. Seleccionar e Blur.. Tentem aplicar mais blur nas zonas que fossem ficar mais afastadas do papel..

Depois de acabarem todas as letras, ponham a layer de cima completamente invisível para ver se as letras se percebem ou não..

O meu ficou assim:

Os que já tiverem feito clay renderings 3D vão achar este efeito muito semelhante ás sombras obtidas lá..

Ok.. Vamos agora dar alguma dimensão ao texto com iluminação..

Vamos duplicar a layer de texto que tem a máscara e vamos clicar com o botão direito do rato e escolher Rasterize Layer.. Depois vamos alterar a Opacity dela de volta para 100%..

Vamos alterar o Blending Mode desta layer para Overlay e pressionar Ctrl+L para abrir os Levels.. Lá, vamos arrastar o node branco até a layer ficar invisível..

Agora vamos buscar a Dodge Tool e vamos dar brilho ás partes das latras que estão mais afastadas do papel (as que têm mais sombra).. Temos de seleccionar novamente letra a letra e dar brilho onde for preciso com um pincel suave de cerca de 300px (aumentem ou diminuam conforme necessário)..

Vejam como as letras ganham logo um aspecto completamente novo..

Ok.. Agora o texto está pronto..

Parte 4: Finalizar

Vamos põr o Grupo do foguetão visivel e com a Move Tool vamos aumentá-lo e mudar a posição dele..

Vamos abrir o Grupo e vamos criar uma nova layer abaixo de todas.. Com a tecla Ctrl pressionada, vamos clicar na máscara da penúltima layer (a das chamas amarelas) para criar essa selecção e com a Paint Bucket Tool, vamos pintar essa selecção na nova layer de preto..

Agora com a Blur tool, vamos também criar as nossas sombras especiais aqui.. Lembrem-se, mais blur nas zonas que fiquem mais levantadas: pontas e tal..

E vamos agora fazer isto para cada layer do foguetão.. Criar nova layer abaixo da layer actual, criar selecção da layer actual, preencher com preto, blur..

Usem a Eraser Tool em algumas zonas em que seja preciso apagar um pouco de preto..

Agora vamos criar uma nova layer abaixo da layer do brilho e da respectiva sombra..

E vamos pressionar Ctrl e criar uma selecção com a layer das chamas do foguetão.. e depois com o Paint Bucket, preencher e nova layer na selecção com cinzento médio.. Agora vamos põr a layer a Overlay e pegar na Dodge Tool e dar algum volume ás chamas.. É só passar onde quisermos para dar brilho e pressionar Alt enquanto passamos para escurecer..

Agora vamos seleccionar a área das asas do foguetão, preencher a layer de cinzento aí e Dodge & Burn =D

Agora vamos fazer o mesmo para o centro do foguetão..

Agora vamos criar uma selecção com apenas a janela do foguetão e dar-lhe volume também.

E pronto.. Já está a nossa imagem..

Eu pus o fundo um pouco mais claro e gravei.. está aqui o resultado final:

Clicar na imagem para aumentar

Espero que tenham gostado e aprendido alguma 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...

Pode ser que não vos interesse muito fazer userbars, mas depois de aprenderem a fazer uma animação por frames no Photoshop, podem fazer todo o tipo de imagens GIF que quiserem =D

Para quem não souber, GIF é uma formato de imagem que, apesar de já ser antiguinho (última actualização do formato em 1989) ainda é muito utilizado pela internet devido a suportar animação e transparência.. Um dos problemas deste formato é o número de bits usado para as cores – apenas 8, ou seja 256 cores apenas.. – enquanto que os formatos actuais têm muito mais –  entre 16.777.216 e 79.228.162.514.264.337.593.543.950.336 cores =D

Claro que actualmente usa-se muito mais o Flash para animações, devido a ser um formato vectorial e não alterável sem o ficheiro original (bem.. com algum trabalho até se consegue.. – vocês não leram isto) e que dá muito mais possibilidades e com ficheiros de tamanhos razoáveis.. Mas para algumas coisinhas pequenas e simples como uma userbar, ou um emoticon para o messenger ou um avatar para um forum, o GIF serve perfeitamente

Parte 1 – Criar uma Userbar Estática

Ok, vamos lá começar.. Quanto ao texto da userbar.. As userbars todas usam fontes em que o texto é constituído por píxeis, sendo a mais usada a fonte Visitor, que podem obter gratuitamente aqui

Depois de instalarem a fonte (ficheiro visitor1.ttf ou visitor2.ttf de preferência), podem abrir o nosso amigo Photoshop e criar um novo documento com a resolução de 350x19px (tamanho normal das userbars) e preencher a layer existente com uma cor ou gradiente do vosso gosto.. Eu preenchi com um gradiente vertical com as cores #71dc00 e #82ff00, mas vocês podem usar qualquer outro fundo, incluindo uma imagem que arrastem para lá..

O meu ficou assim:

Agora que o fundo já está, vamos criar as scanlines, porque uma usarbar não é userbar sem scanlines.. Para isso, criem um novo documento no Photoshop com a dimensão de 3x3px e de preferência com fundo transparente..

Agora façam imenso zoom a esta nova imagem e vão buscar a Pencil Tool – pressionem o rato prolongadamente em cima da Brush Tool até aparecer o lápis e seleccionem esse..

A diferença do pincel para o lápis, é que o pincel tem arestas suaves, enquanto que o lápis desenha tudo sem anti-aliasing..

Agora com o lápis, pressionem a tecla D para  a cor principal mudar para preto e cliquem com o botão direito do rato na imagem e escolham o tamanho do traço do lápis a 1px

Agora desenhem 3 pontos na imagem assim:

Agora vão ao menu Edit>Define Pattern e escolham um nome para o padrão – eu pus scanlines –  e cliquem em OK

Já podem fechar este documento e voltar á imagem da userbar.. Criem uma nova layer e vamos preenchê-la com o padrão das scanlines que acabamos de criar.. Para isso, seleccionem a nova layer e vão ao menu Edit>Fill

Em Custom Pattern escolham a que acabaram de criar e depois cliquem no OK

Como podem ver, isto preencheu a layer seleccionada com o padrão.. Parabéns, têm agora scanlines na vossa imagem =D

No Photoshop podem criar vários padrões e gravá-los desta forma para depois usarem em qualquer das vossas imagens ;D

Como estão demasiado fortes, vamos pôr a Opacity desta layer a 30%

Agora, vamos criar outra layer e aqui é que vamos escrever o texto da nossa userbar..

Escolham a fonte Visitor e o tamanho 10px e se quiserem, mudem o modo de Anti-Aliasing para None (está ao lado do tamanho da letra)

Agora é só escrever qualquer coisa na userbar.. Eu escrevi “Design é escrever com píxeis – www.pixeis.net” =D

Agora aceitem as alterações e vão buscar a Move Tool (tecla V) para alinharmos o texto com a imagem.. Pressionem Ctrl+A para seleccione tudo e cliquem nos botões de alinhamento na barra abaixo dos menus para ficarem com o texto centrado verticalmente e horizontalmente na imagem..

Como o texto ainda não está ao estilo usual das userbars, vamos acrescentar-lhe uns Layer Styles.. Por isso, cliquem duas vezes na layer do texto na lista das layers até aparecer a janela dos Layer Styles e em Color Overlay, mudem a cor para branco e em Stroke, mudem o Size para 1px e a cor para preto (só se ainda não estiver)

Cliquem no OK para aceitar as alterações e vamos criar outra nova layer onde vamos adicionar algum brilho à imagem..

Seleccionem a Elipse Tool e por baixo do menu Edit, cliquem no botão que diz Shape Layers e desenhem uma elipse assim:

Agora Ctrl+A para seleccionar tudo e com a Move Tool (V), alinhem a elipse horizontalmente..

Pressionem agora Ctrl+D para apagar a selecção actual e transformem a elipse até ficar parecida com a da minha imagem

Na lista das layers, cliquem duas vezes na miniatura desta layer e mudem a cor para branco..

Agora mudem o Blending Mode desta layer de Normal para Overlay e a Opacity para 50%

Agora a vossa userbar deve estar algo assim:

Ou seja, está pronta.. Para quem quiser uma userbar estática.. Mas nós não.. Nós queremos uma animada =D

Parte 2 – Animar a Userbar Estática

Para animar alguma coisa no Photoshop, precisamos da janela de animação, por isso vamos ao menu Window>Animation..

A janela animação está em modo Timeline (para utilizadores de versões recentes do Photoshop) mas nós vamos usar o modo Frames, por isso cliquem no botão das opções da janela Animation e escolham Convert to Frame Animation:

Agora que já temos a janela de animação pronta, vamos aprender sobre alguns termos relevantes a animações no Photoshop..

Frames

Cada animação/vídeo é constituída por várias imagens que são mostradas sequêncialmente.. Em cada frame a imagem muda um bocado, de forma a que ao ver a sequência toda, pareça que é algo a movimentar-se..
Nos filmes e câmaras de filmar, é normal usar-se 30 ou 23,976 frames por segundo (fps).. Nos jogos modernos, costuma ser cerca de 60fps, que é o máximo habitual dos ecrâs dos PCs

Abaixo de 25fps, já se começa a notar um efeito de atraso na imagem, principalmente em vídeos em que são mostradas coisas que se movimentam muito rápido, como desportos.. Foi esse o problema das primeiras televisões de plasma.. Como ainda tinham uma taxa de actualização do ecrâ muito baixa, uma pessoa a ver desportos ou outra coisa muito rápida, notava algum atraso nos movimentos =D

Mas agora já não há esse problema ;D

Tween

Este botão na janela de animação do Photoshop serve para criar frames intermédias entre duas frames seleccionadas..

Por exemplo, se tivermos duas frames, e numa delas uma layer estiver transparente e no lado direito da imagem e na outra frame, a layer estiver completamente opaca e do lado esquerdo da imagem, ao pressionarmos este botão, escolhemos quantas frames queremos entre estas as duas e ele cria automaticamente as frames que quisermos e com a layer a aumentar a opacidade e a mover-se do lado direito para o esquerdo – Absolutamente útil =D

Frame Delay

Isto define quanto tempo uma frame vai demorar durante a animação.. Podemos põr várias frames a durarem tempos diferentes

Looping Options

Esta opção define o tipo de ciclo da animação assim que se termine a última frame.. Podemos põr a animação a aparecer apenas uma vez e ficar parada na última frame (mais usado nos banners de publicidade), aparecer outro número de vezes e parar depois na última frame ou repetir-se para sempre (o mais usado)

Ok, estes devem chegar =D

Vamos lá começar.. Criem um Grupo novo na lista das layers e pode ficar acima de todas as layers existentes

Vamos definir o Blending Mode deste grupo a Overlay e criar uma layer no grupo

Vamos buscar a Gradient Tool (pressionem prolongadamente no Paint Bucket e seleccionem esta) e vamos criar um gradiente novo.. Para isso, cliquem no gradiente que vos aparecer abaixo do menu Edit e vai aparecer a janela dos gradientes..

Escolham um dos gradientes que tem uma cor dos lados e outra diferente no meio e vamos alterá-lo um pouco..

Agora vamos eliminar o “stop” amarelo (o do meio) – é só arrastá-lo para baixo..

Agora vamos clicar num dos outros stop‘s laranjas e alterar a Color deles para branco e depois alterar também o outro para branco..

Por isso a cor já está, vamos agora alterar a transparência.. Vamos aos dois stop‘s pretos em cima e alterá-los aos dois para 0%

E vamos adicionar um stop mesmo no meio dos dois pretos.. É só clicar naquela zona e depois arrastar o stop até a posição dele ser 50% e alterar a Opacity dele para 100%..

Só falta clicar no botão New para gravar aquele gradiente e depois OK

Agora com a layer que está dentro do grupo seleccionada, vamos criar este gradiente lá dentro:

Vamos buscar a Move Tool (V) e esticar um pouco a layer para o lado e depois, clicar com o botão direito do rato na layer e escolher Skew.. E com o Skew activo, podemos ir ao quadrado de controlo superior da layer e arrastá-lo um pouco para a direita para a layer ficar inclinada:

Aceitamos as alterações e vamos mover a layer para o lado esquerdo até estar +/- metade de fora da imagem:

(pressionem a tecla Shift enquanto movem a imagem para a mover em linha recta)

Agora dupliquem a layer e coloquem a nova do lado direito, também metade de fora

Dupliquem novamente a layer que está do lado esquerdo e mudem o nome dela para “animada” para saberem depois qual é – esta vai ser a layer que vai andar de um lado para o outro =D

Vamos agora à janela de animação e vamos alterar as opções necessárias..

Temos lá a Frame1, por baixo dela tem escrito 10 sec.. cliquem nesse texto e escolham 0.1 seconds

Isto vai fazer com que aquela frame dure 0,1 segundos

Ainda abaixo disso tem um texto Once, cliquem nele e escolham Forever – isto vai fazer a animação repetir-se para sempre, em vez de uma única vez

Agora cliquem no botão para criar uma nova frame.. Com esta frame seleccionada, vão pegar na layer animada e movê-la para o lado direito da imagem..

Por enquanto o brilho animado da imagem só aparece num lado e outro da imagem.. Mas vamos usar o Tween para o fazer passar pelo meio também =D

Então seleccionem as duas frames e pressionem o botão Tween (está ao lado do botão da nova frame).. Na janela que apareceu, escolham assim:

Isto vai criar 4 frames entre as duas actuais.. Cliquem em OK

Agora, seleccionem e eliminem a última frame porque já não vamos precisar dela.. Só foi criada para fazer a layer andar para o lado certo

Seleccionem todas as frames excepto a primeira e na lista das layers, ponham as duas layers do grupo que não são a animada invisíveis.. Estas só são necessárias para a Frame1

Seleccionem agora a Frame1 e ponham a layer que está dentro do grupo e que está do lado esquerdo da imagem invisível também..

Agora podem clicar no Play Animation para ver como ficou a animação =D

Uma característica usual nas userbars é criar um risco preto de 1px a toda a volta de imagem.. Se quiserem pôr isso na vossa, é só criar uma layer acima de tudo o resto, preenchê-la com uma cor qualquer com o Paint Bucket Tool e clicar duas vezes na layer para abrir os Layer Styles e diminuir o Fill Opacity para 0% e em Stroke, mudar a cor para preto, o tamanho para 1px e a Position para Inside =D

Para gravar como GIF, vão ao menu File>Save for Web & Devices e lá escolham a tab que diz 4-Up, isto vai-vos mostrar a animação com vários níveis de cores e de gradientes.. Claro que quanto menor for o número de cores, mais pequena vai ser a imagem final e mais rápido será o download dela quando estiver numa página da net..

Cliquem em baixo no botão Play e vejam como fica a animação..

Cliquem na imagem para aumentar

Para mim, a melhor é a 3ª, porque é mais pequena em tamanho que as outras e a diferença em qualidade é imperceptivel =D

Então é só seleccionar a que preferimos e clicar no botão Save e gravem como ficheiro GIF

O meu resultado foi este:

Que tal?

Agora é só andarem a brincar com isto e fazer montes de userbars para os amigos todos =D

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

Artigos relacionados:

1. Como Fazer um Emoticon Animado Vamos aprender a fazer um emoticon animado no Photoshop e a importá-lo no Messenger...

Então decidi fazer este artigo a mostrar como fazer texturas de papel rasgado de boa qualidade em vez das simulações digitais no Photoshop que a maior parte usa..

Se quiserem fazer o download dos ficheiros, cliquem aqui para ir para o fundo do artigo onde está o link para o download

Mas para os que querem ver o que se passa nos bastidores, continuem a ler =D

Material Necessário:

- Papel de embrulho de uma cor sólida (eu comprei um vermelho por €0,40 e só usei um pouco)
- Papel A4 de uma cor que tenha muito contraste à do papel de embrulho (eu usei roxo)
- Régua e Tesoura/X-acto (todos facultativos)
- Scanner

Eu escolhi papel de embrulho por ser barato em relação a muitos tipos de papéis, por ser fácil de encontrar nas mais diversas cores e por ter cada lado da folha de uma cor (uma colorida e uma branca)

Aqui está o que eu usei:

Passo 1

Então vamos lá começar a rasgar..

Cortei uma fita de papel, dividi-a em quatro e experiementei rasgar os pedaços de 4 formas diferentes: com e sem régua e com a parte colorida virada para cima e para baixo

A técnica que resulta melhor é com a parte colorida virada para cima (sem comparação) e com régua faz uma parte rasgada demasiado perfeita, por isso mais vale rasgar á mão..

Então rasguei depois vários pedaços de vários tamanhos do papel e fui digitalizar tudo.. Para digitalizar, ponham o papel rasgado no meio do scanner com a parte colorida a ser digiralizada e depois coloquem a folha de cor contrastante por cima, para depois vermos a diferença entre a parte rasgada (branca) e o fundo (agora da cor da folha.. sem folha seria também branco)

Eu usei estas características na digitalização:

Então depois de digitalizar, obti isto que vou guardar para se poder usar nas imagens que quiser depois..

Passo 2

Normalmente este estilo é usado para simular papel normal branco  ou pautado de caderno.. Mas nós vamos mais longe e vamos usar uma imagem para parecer que está imprimida e que o papel está rasgado.. Por isso precisamos de uma imagem.. Eu vou usar esta:

Vou criar um novo documento do Photoshop que vai ser a imagem final.. Vamos imaginar que é a header de um site, por isso vou criá-lo com a resolução de 550×200..

Arrastem a imagem que querem usar (eu vou usar a dar ondas) para o novo documento..

Agora vamos ao documento do scanner e com a Rectangular Marquee Tool vou seleccionar uma zona com melhor aspecto e vou pressionar Ctrl+C para copiar..

No novo documento documento, pressiono Ctrl+V para colar e depois redimensionei e posicionei com a Move Tool:

Vou ao documento do scanner e copio uma parte para a zona de baixo da imagem e colo na nova imagem..

Passo 3

Agora vamos usar a Clone Stamp Tool para criar os lados e o centro da imagem =D

Junto as duas layers do papel numa só (seleccionem a de cima e pressionem Ctrl+E)

Então com a Clone Stamp Tool vamos escolher um pincel suave pequeno (cerca de 20px) e vamos escolher uma zona do lado da imagem e colar na parte que falta..  Para escolher o local de origem, Pressionem a tecla Alt e cliquem onde querem.. Depois é só clicar noutro local, e ele vai colar lá o que seleccionaram:

Fazemos então isto para os dois lados da imagem, e depois para o centro:

Agora temos que substituir a parte roxa pelo nosso fundo e a parte vermelha pela nossa imagem..

Fundo primeiro..

Passo 4

Vou criar uma layer com o findo final da imagem.. Vou preenchê-lo com azul, uma mancha de branco no meio, preto dos lados e imenso gaussian blur (Filter>Blur>Gaussian Blur) para ficar com um gradiente =D

Agora ponho esta layer abaixo de todas as outras, ponho a da imagem das ondas invisível e vamos tratar da de papel..

Com a Eyedropper Tool, vou seleccionar o roxo que está à volta do papel.. Agora vamos ao menu Select>Color Range e isto vai seleccionar todo o roxo na nossa imagem.. Quanto mais baixo for o valor que escolhermos, mais próximas do nosso roxo vão ser as cores que ele vai “aceitar” na selecção criada.. Vamos escolher um valor de forma a que a parte rasgada (branca) fique a cinzento escuro (se ficar branca, não se vai ver depois.. se ficar preta, vai ficar demasiado opaca – o que também não queremos uma vez que essa parte é apenas algumas fibras de papel e por isso é ligeiramente transparente)..

Aceitamos a selecção e com a layer do papel seleccionada, clicamos no botão de criar uma máscara para a layer:

Como seleccionamos a parte roxa, e a máscara depende da selecção, agora só vemos a parte roxa da imagem, por isso vamos clicar na máscara, e com ela seleccionada pressionar Ctrl+I para inverter.. Agora já deve aparecer o inverso.. Só a parte de papel =D

Agora a parte vermelha..

Passo 5

Mesma coisa: Eyedropper Tool, seleccionar o vermelho, ir ao menu Select>Color Range e seleccionar de forma a ficar todo o vermelho incluído:

Clicamos em Ok, e desta vez, seleccionamos a imagem que queremos que apareça no papel (a das ondas) e  criamos a máscara lá.. Temos de ter essa layer acima da que tem o papel obviamente, ou não se vai ver =P

Na minha imagem ainda se notavam alguns pixeis vermelhos, por isso seleccionei a máscara da imagem das ondas e pressionei Ctrl+L para editar os levels:

Que tal está o resultado final?

Claro que não está muito realista porque não tem sombras..

Passo 6

Podemos adicionar umas sombras e até algum Warp como no tutorial dos selos =D

E o resultado foi este:

Mm.. Talvez o Blur tenha sido demasiado..

De qualquer maneira, agora já sabem fazer imagens destas =D

Para fazerem o download do ficheiro com o papel já pronto a usar e com transparência e tudo, cliquem aqui.

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

Artigos relacionados:

1. Como Fazer Texturas: Impressões Digitais Vamos usar guache para pintarmos impressões digitais numa folha de papel e depois digitalizar e pôr no Photoshop.. Vão ver...