Papel de Parede 2009
Olá, pessoal
2009 está batendo à nossa porta e que tal criarmos um papel de parede bem bacana para “enfeitar” nosso desktop?
Para você visualizar o resultado final e fazer o download da imagem, clique aqui.
Pré-Requisitos
- Facilidade quanto ao manuseio do Fireworks CS3
Objetivo
- Criar um papel de parede para desktop nas dimensões 1024×768 pixel
Conteúdo
1º Passo – Criação do Background (fundo)
De início, vamos criar um novo documento no Fireworks com as dimensões 1024×768 pixel e com fundo branco (Canvas color)
Em seguida, criaremos um retângulo com as mesmas dimensões, sem borda e com preenchimento Gradient Radial de acordo com a imagem a seguir:

Fig. 01: Fundo Gradient Radial
2º Passo – Criação da Textura para o Background
Agora vamos criar um efeito realístico inserindo uma textura grungy ao nosso background. A imagem está disponível para download clicando AQUI!
Feito o download, vamos importá-la e colocá-la sobre o fundo verde com as mesmas dimensões, 1024×768 pixel.
Com a imagem selecionada, vamos aplicar um filtro para deixá-la em escala de cinza. Para isso, acessemos a opção Filters > Adjust Color > Hue/Saturation… e configuremos da seguinte maneira:

Fig. 02: Efeito Gray Scale (Escala de Cinza)
Em seguida, aplicaremos 70% de opacidade e com o Bland Mode Overlay.

Fig. 03 – Aplicação do filtro Overlay
Vamos agora aumentar a sensação de “peso” da imagem, duplicando-a, rotacionando em 180º e colocando sua opacidade em 20% para chegarmos a este resultado:

Fig. 04: Rotação e aplicação de opacidade
Para termos um resultado mais aprimorado, podemos inserir outras texturas e trabalhando-as com sua opacidade e filtros.
Tomei como base outra textura. Clique AQUI e faça o download.

Fig. 05: Inserção de nova textura
O importante aqui é ir duplicando as camadas, rotacionando, aplicando opacidades até que cheguemos a um ponto que nos agrade.
Baixe AQUI o background com todas ações aplicadas acima.
3º Passo – Criação de Textura para o Texto
Bom, vamos criar um texto diferente com uma textura de grama. Então, clique AQUI, baixe a imagem que utilizaremos e a importe para o palco.
Em seguida, utilizando uma fonte “cheia” como Arial Black, Swis721 BlkEx BT ou alguma similar, escrevamos 2009 (cada número em uma camada) sobre a grama com 50% de opacidade e cor branca.

Fig. 06: Texto sobre a grama
Agora vem a parte mais trabalhosa. Para ficar um efeito bacana, precisamos contornar com a ferramenta Pen tool, todos os números de uma maneira não-uniforme.
4º Passo – Organizando os Layers (Camadas)
Para entendermos melhor, a idéia é a seguinte: estilizar cada numeral para que possamos fazer uma colagem da grama sobre cada um e aplicarmos alguns efeitos de sobra, 3D, etc. Portanto, precisamos criar no painel Layers (Camadas), pastas individualizadas para cada número, onde deverão conter 1 número e uma cópia da grama, como na imagem abaixo:

Fig. 07: Organização das camadas
Perceberam que eu gosto de organizar, dando nomes às camadas. Assim fica mais fácil de trabalhar.
5º Passo – Utilizando a Ferramenta Pen Tool
Vamos à transpiração agora…hehehe
Selecionando a camada Nº 2, o layer 2, com a ferramenta Pen tool iremos criar um contorno “pontiagudo”, ou seja, fazer uma vetorização do numeral, mas criando algumas pontas, o que fará com que pareça mais real. Veja como ficou na imagem abaixo:

Fig. 08: Contorno com Pen tool
Agora vem a mágica, rsrsrs…
Primeiramente, devemos ocultar o numeral 2 (clicando no olho ao lado da camada); em seguida, recortar a imagem da grama; posteriormente, selecionar o vetor criado com a Pen tool e fazer uma colagem especial (CTRL+SHIFT+V).
Para podermos visualizar o efeito, é preciso ocultar as outras imagens de grama nas outras camadas, ok?!
E teremos isto:

Fig. 09: Resultado do contorno
Agora, na camada foi criada um junção entre o contorno e a imagem. Sendo assim, para retirarmos a borda deste contorno, devemos clicar na grama (que ficará com um contorno verde) e acessar o Painel Properties e retirarmos a cor da borda.

Fig. 10: Retirando a borda
6º Passo – Aplicando Efeitos
Pessoal, precisamos agora, criar um efeito tridimensional e começaremos com a aplicação de uma sombra e outros efeitos, ok?!
Primeiro, dupliquemos a camada que contém o número com a grama. Esta deverá ficar sobre a original e exatamente na mesma posição sobre ela.
Agora, vamos aos efeitos. Com a cópia selecionada, no Painel Properties, acionemos em Filters, a opção Photoshop Live Effects e façamos os ajustes a seguir:

Fig. 11: Aplicação de filtros do Photoshop
Duplicando novamente a camada original, vamos aplicar mais alguns efeitos. Esta nova cópia deve ficar sobre as demais.

Fig. 12: Aplicação de novos filtros
E pra fecharmos esta etapa, no Painel Properties, vamos colocar a opacidade em 55%. O resultado até agora é este:

Fig. 13: Resultado até aqui
7º Passo – Criando um Efeito 3D
Nesta etapa, faremos um efeito tridimensional. Então, novamente, vamos duplicar a camada original e colocá-la abaixo de todas as outras. Com ela selecionada, vamos desagrupar a imagem (CTRL+SHIFT+G), apagando a grama e deixando o contorno.
Com o contorno selecionado, vamos preenchê-lo com a cor preta e, com as teclas direcionais do teclado, vamos movendo-o para a direita e para baixo até ficar como a imagem a seguir:

Fig. 14: Deslocamento de sombra
Agora, vamos aplicar um filtro especial acessando Filters > Blur > Motion Blur e aplicar a seguinte formatação: Angle: 135º | Distance: 30.
E pra encerrar esta etapa, coloquemos a opacidade em 50%.

Fig. 15: Efeito Motion Blur
E pra finalizarmos esta etapa, devemos fazer mais duas cópias da sombra e para cada cópia, devemos deslocá-la mais para “dentro”, isto é, para esquerda e para cima. Deixando a opacidade em 40% e 30%, respectivamente para cada cópia e uma Blend Mode > Multiply.
8º Passo – Aprimorando o Efeito 3D
Até aqui nosso trabalho está indo bem, mas logicamente que dá pra melhorar ainda mais um “cadim”…rsrs
Vamos duplicar então, a camada que recebeu o último efeito (ela está sobre todas as outras) de Drop Shadow e Bevel and Emboss, lembram? Com a cópia dela, vamos posicioná-la abaixo de todas as sombras e aplicar o filtro em Filters > Adjust Color > Color Fillna cor Preta e Blend Mode > Multiply.
Feito isso, fazendo alguns deslocamentos para direita e para baixo, teremos, finalmente, um belo exemplo imagem 3D.
9º Passo – Aplicação da Técnica Novamente
Trabalhoso? Que nada!
Agora só falta aplicar a mesma técnica para os outros números…hehehe
Mãos à obra!
O resultado final é este:
Agora é só fazer o donwload ABAIXO e colocar em seu desktop. =D
Papel de Parede: Feliz 2009
(979,4 KiB, 2.686 downloads)
Um abraço e até a próxima.
CarlosHPS Webdesigner
Baseado no tutorial do http://psd.tutsplus.com
- Tutorials and Resources for Adobe Fireworks | Tutorials | Smashing Magazine
- The Ultimate Round-Up of Fireworks Tutorials and Resources « Tech7.Net
- The Ultimate Round-Up of Fireworks Tutorials and Resources – Programming Blog
- top five tutorial Fireworks « Garimpo Web
- 34 High Quality Adobe Fireworks Tutorials and PNGs « 68Design – (68ds.com) Creative Design Transmitor
- Web Önerilerimiz » Adobe Fireworks Tutorials
























há 1 ano atrás
Só uma coisa.
Depois que aplica o efeito de gray scale e seguida, aplica 70% de opacidade e com o Bland Mode Overlay, ele fica branco… eu não consegui fazer.
Abraços
há 1 ano atrás
Olá, Rodrigo
Ele fica branco sim, ou melhor, transparente. A aplicação dessa ação é para que ele dê uma claridade para quem está abaixo dele, preservando as deformações da imagem.
CarlosHPS
há 1 ano atrás
Eu tenho uma dúvida com relaçao ao zero. Quando vou seguir o 5o passo e tentar colar a imagem grama no Path Zero.. ela cola sobre toda a seleçao, e a seleçao feita no meio com a ferramenta pen tool é coberta junto..
Tem alguma maneira de nao ocorrer isso? Pois vi que ai nao detalha muito bem.
Agradeço desde já e muito obrigado pelo tutorial.. ficou maravilhoso!
há 1 ano atrás
Oi, Eduardo
1º – Faça o contorno do zero com o pen tool
2º – Bloqueie o zero “original” para não atrapalhar na colagem
3º – Recorte a grama
4º – Selecione o contorno criado no 1º tópico
5º – Faça a colagem especial, CTRL+SHIFT+V
6º – Clique sobre o contorno na camada dos layers e no painel properties, retire-o
Se você conseguiu fazer com o número 2, por que não com o restante
Tentaí.
CarlosHPS Webdesigner
há 1 ano atrás
Seguinte, foi tudo tranquilo com o 2. O problema é o zero mesmo. Eu tirei um print e o link segue abaixo:
http://img511.imageshack.us/img511/1166/fireworksscreenxp2.gif
A dificuldade está em colocar a imagem “grama” apenas na área que ficou entre os 2 paths feitos no zero (uma na parte externa e outro na parte interna), como mostra no print que tirei… Porém, ela cobre o outro path que circula a parte interna do zero e a imagem da grama fica inteira dentro do zero.
Teria alguma forma de fazer com que a imagem “grama” seja colada apenas entre os 2 paths criados que contornam o zero?
Dede já agradeço a atençao!!
há 1 ano atrás
Ah! Agora entendi, Eduardo.
O problema é o fato de que você precisa transformar os dois contornos criados, em uma imagem “vazada” (com um furo no meio).
Então, faça assim:
1º – Selecione os dois contornos
2º – E acesse o menu Modify > Combine Paths > Join
ou pelo atalho CTRL+SHIFT+J
Agora sim, você terá um objeto só e não dois, como antes.
Abração.
CarlosHPS Webdesigner
há 1 ano atrás
Cara estou com problemas no passo 5 do seu tuto
enpaquei geral mesmo
, ainda estou engatinhando na parte do fireworks, eu não entendi a parte em que vc tem fazer as jogas dos numeros para recortar pra deixar somente a letra, tem como passar uma parte mais mastigada de como se faz o processo todo, desde a criação do nome, assim ajudará não só a mim que estou começando mais como várias outras pessoas também.
Fico no aguardo de um HELP assim que possível.
Abrs e belo tuto.
há 1 ano atrás
Olá, Wesley
Como coloquei nos pré-requisitos, é preciso ter facilidade quanto ao manuseio das ferramentas do Fireworks, o que inclui a ferramenta Pen Tool
Mas não se “aveche”, acesse este outro tutorial de um colega do MXStudio. Ele utiliza justamente a ferramenta base para você concluir a etapa 5, ok?!
http://www.mxstudio.com.br/fireworks/video-desenhando-com-pen-tool/
Qualquer coisa, retorna pra gente ver como ficou.
Abração.
CarlosHPS Webdesigner
há 1 ano atrás
há 1 ano atrás
Glad you like.
CarlosHPS Webdesigner
há 1 ano atrás
há 1 ano atrás
Thanks, Sky
CarlosHPS Webdesigner
há 1 ano atrás
Seu blog tem sido de grande importancia para meus conhecimentos em web design & developer, você faz coisas tão incriveis e explica de uma maneira que fica tudo tão simples, atrávez de tudo que tenho absorvido aqui, minhas ideias estão fluindo melhor, e os resultados estão com um ar mais profissionail, parabéns pelo trabalho, e o meu muito obrigado.
byFranklin
há 1 ano atrás
Olá, Franklin
Eu fico extremamente feliz quando recebo um comentário como este. Eu é que agradeço pelo seu empenho e dedicação em se tornar cada vez melhor naquilo que faz. Minha parte é só dar um empurrãozinho
Sucesso!
CarlosHPS Webdesigner
há 1 ano atrás
Usei Quase Tudo o Que Você Mostrou !
Mais Aprimorei UmasCoisinhas Minhas !
Se Puder De Uma Olhada e Depois Fala Ae o Que Acho !

Link: http://img150.imageshack.us/img150/2487/cpiadethiago.jpg
Obs: Imagem Está Menor Para Ser Hospedada o Tamanho Real é 1440 x 900
Abração !
há 9 meses atrás