Apresentação
Olá, pessoal
No tutorial de hoje veremos como criar um cartão de visitas profissional, com dimensões, formatos, tipografia e ilustrações voltadas aos profissionais freelancer’s da web espalhados por este “mundão” a fora, ok?! 
O detalhe aqui é que não utilizaremos uma ferramenta específica para produções impressas como o Corel Draw ou o Indesign, mas sim, nosso velho e multi-uso Fireworks e, ao final, exportaremos o cartão em um formato compatível, tudo bem?!
Pré-Requisitos
- Facilidade quanto ao manuseio do Fireworks.
Objetivos
- Criar um cartão de visitas profissional utilizando o Fireworks.
Conteúdo
1º Passo – Configurando as Dimensões
Inicialmente, aqui no Brasil, as gráficas trabalham com diversos formatos e dimensões para cartões de visitas, mas o padrão são os de 9.5cm x 5.5cm. E como estamos utilizando o Fireworks, devemos configurar sua resolução para 300 pixel/Inch afim de melhorar no momento da impressão do cartão.
Fig. 01: Dimensões e resolução do cartão
Só para ressaltar, mesmo colocando as dimensões em centímetros no momento da criação do novo arquivo, automaticamente o Fireworks converte para pixel. Sendo assim, 9.5 x 5.5 cm é a mesma coisa que 1122 x 649 pxiel.
2º Passo – Configurando as Linhas-Guias
Para os “novatos” com o Fireworks, é preciso ativar as réguas pelo menu View > Rulers (Ctrl + Alt +R). E para criar as linhas-guias, basta clicar sobre a régua, segurar e arrastar para a área de desenho.
Em um processo de criação de um cartão de visitas em uma gráfica, é preciso que definamos duas áreas: a de corte e a de segurança. Estas áreas são delimitadas pelas linhas-guias. Uma área de corte ideal, fica entre 3mm a 5mm da área de segurança. Portanto, faremos aqui com de 3mm, ok?!
Fig. 02: Linhas-Guia
Para deixarmos as linhas-guia exatamente onde queremos, basta darmos dois cliques sobre as mesmas e determinarmos suas posições. Sendo assim, criemos as seguintes marcações:
Horizontal
0 – 35 – 1087 – 1122
Vertical
0 – 35 – 614 – 649
Fig. 03: Posicionamento das linhas-guia.
3º Passo – Configuração do Background (fundo): Textura
Criaremos um fundo meio estilo Windows Vista para este cartão. Para isso, as imagens utilizadas estão disponíveis logo abaixo:
Importemos (Ctrl + R) a Textura-1.jpg e a alinhemos como na imagem abaixo:
-
Fig. 04: Alinhamento da imagem
Agora, para desfocá-la, vamos utilizar o filtro Blur, acessado em Filters > Blur > Gaussian Blur.
-
Fig. 05: Filtro Gaussian Blur
O resultado obtido é este:
-
Fig. 06: Aplicação do Gaussian Blur
Em seguida, vamos criar um retângulo com as mesmas dimensões do cartão para refinarmos o background, aplicando em seguida, um preenchimento gradient radial nos tons de azul:
-
Fig. 07: Retângulo com preenchimento Gradient Radial
Atenção!
A camada (layer) que contém o retângulo azul deve estar sobre a imagem inserida anteriormente.
E para concluirmos esta parte, aplicaremos um Blend mode > Hard Light neste retângulo e com Opacidade (opacity) 85%, obtendo o seguinte resultado:
-
Fig. 08: Aplicação do Blend mode.
4º Passo – Configuração do Background: Curvas
Pronto! Já preparamos a textura do nosso cartão. Agora iremos criar e estilizar algumas linhas curvas, resultando em um efeito bem moderno e diferenciado.
Com a ferramenta Pen Tool, façamos uma curva como mostrada a seguir:
-
Fig. 09: Criação de um linha curva
Em seguida, apliquemos um preenchimento grandiente, retiremos a borda e incluamos mais um Blend mode como na imagem abaixo:
Fig. 10: Formatação da curva
E com isso, teremos o seguinte efeito:
-
Fig. 11: Resultado da aplicação de efeitos à curva
E, utilizando esta mesma técnica, alternando as opacidades e Blends modes, façamos várias curvas e distribuamos pelo cartão. Minha distribuição ficou assim:
-
Fig. 12: Resultado das curvas
5º Passo – Inserindo o Logotipo
Façamos agora um retângulo que servirá de “cercadura” para a inserção do logotipo. Utilizei o meu. Fique à vontade para usar o seu ou outro.
Neste retângulo (rotacionado), apliquemos as seguintes formatações:
-
Fig. 13: Inserção do logotipo
6º Passo – Inserção dos Textos
E para finalizarmos, basta inserirmos os dados que conterão no cartão de visitas, mandar para a gráfica e começar a distribuir 
E como resultado final, vejamos:
Fig. 14: Resultado final
7º Passo: Download
CADASTRE-SE no blog e faça o download do arquivo final em PNG:
Um grande abraço e até a próxima.
CarlosHPS Webdesigner 
Autor: CarlosHPS Webdesigner – Colunista Fireworks do Portal MXSTUDIO
Não deixem de me fazer uma visita:
- BLOG: www.carloshps.com.br/blog
- CURSOS ONLINE: www.carloshps.com.br/cursos
- PORTFÓLIO: www.carloshps.com.br/
Artigos Relacionados
ShareThis
Muito bom….
Estilo WinVista
Bom dia Carlos!!
A arte está de muito bom gosto, diria eu Excelente! Só temos um pequeno problema quanto a produção de cartões de visita no Fireworks!
Se mandarmos para impressão, vai sair totalmente diferente, já que o Fireworks trabalha com padrão de cor RGB, e as gráficas, em CMYK!!!
O desenvolvedor vai ter um prejuízo grande com essa produção. A não ser que, envie a uma “gráfica rápida” para que seja impresso em impressora digital.
O programa mais indicado, para se trabalhar com gráficas, infelizmente, é o quadrado Corel, que não nos permite tais efeitos lindos como esses que vc criou. Ou até permitem, mas necessitam de um grande conhecimento no Corel.
Abraços, e espero ter ajudado!
brother muito irado seus tutorias simples e facil de entender e praticar quando eu crescer quero ser q nem vc kkkkkkkk!!
so zuando
flw ! valeu abraço
nossa gostei d+,eu entrei nesse site p/ saber + sobre como fazer um cartão de visita por que eu faço curso de photoshop é manero!!!!!
SALVE,!!!!!
By:ana cristina
Parabéns pelo tutorial simples e fácil de entender. A arte criada foi muito atenta a detalhes como tipografia e jogada de cores. Realmente como foi dito pelo André, as gráficas trabalham com impressão em CMYK e não em RGB, tendo assim um problema no envio do arquivo para as gráficas que trabalham com Corel.
Parabéns pelo tutorial simples e fácil de entender. A arte criada foi muito atenta a detalhes como tipografia e jogada de cores. Realmente como foi dito pelo André, as gráficas trabalham com impressão em CMYK e não em RGB, tendo assim um problema no envio do arquivo para as gráficas que trabalham com Corel.
Mais uma vez parabéns pelo design.
Não sei se é devido a versão do FW, utilizo CS3 ou pela minha falta de familiaridade com a ferramenta, mas não consegui desenvolver a parte do Gradiente e também aquela parte que simula o efeito do windows, ou seja, não fiz nada rsrs, mas gostaria de saber se os colegas tem ou sabem de algum lugar que eu possa obter um manual para iniciante para que eu possa concluir.
Grato,
Muito boa e prática a idéia apresentada, me ajudou muito em meus trabalhos de arte de cartões e folhetos.
Obrigado e até mais.