Vetorizando escudo da Seleção


Coluna Fireworks – Vetorizando escudo da Seleção

Prontos para mais uma coluna?

Fireworkers de plantão, hoje nós vamos trabalhar com vetorização no Fireworks, para ser mais claro, vetorização do escudo da Seleção Brasileira de Futebol.

Introdução

Em época de Copa o mundo gira em torno deste evento, e na web não é diferente, quantos
profissionais não precisam do escudo da seleção para criar hotsites, wallpapers, cartões virtuais, etc.

Pré-requisitos

Ter noção de ferramentas vetoriais, abaixo acompanhe os tutorias que abordam o tema:

Vetor – Parte 1
Vetor – Parte 2

Imagem base

Objetivo

Vetorizar escudo da Seleção Brasileira de Futebol.


Após abrir a imagem base, vamos preparar alguns detalhes que irão ajudar para obter resultado perto do perfeito.

– Abilite as réguas (atalho = ctrl + alt + r) ou através do menu > view > rulers.
Para quem não sabe, através das réguas podemos puxar guias de ajuste. Estas guias funcionam como se fosse um imã, à medida que você aproxima um objeto a ela, ele se auto ajusta a posição da mesma.

– Como a cor padrão das guias é verde claro, no “menu > view > guides > edit guides” altere-a para preto.

*Facilita o contraste entre elas e a imagem base.

O motivo pelo qual iremos fazer uso das guias, é de posicionarmos uma a uma em áreas curvas da imagem base, pois ao adicionarmos pontos através da Pen tool, elas (como citado), irão auxiliar em um posicionamento exato.

Veja abaixo: cada ponto corresponde a um que será criado com a Pen tool.

Copie e cole diretamente na imagem base, os pontos abaixo:

*Eles estão em gif transparent

– Clique na régua e traga as guias para o palco, posicionando-as de acordo com a imagem acima.

Repare que trouxe cinco guias horizontais e uma vertical.

*Se desejar, oculte no painel Layers os pontos copiados.

– Selecione a Pen tool e inicie o contorno no sentido horário:

*Para facilitar magnifique (zoom) o palco em 400% (atalho = ctrl + 4).

Crie o primeiro ponto e posicione em linha reta para criar o segundo

Ao adicionar o segundo ponto, traga para baixo em diagonal sua alça, traçando a curva:

Para criar linhas retas com a Pen tool após uma curva, basta clicar em seu último ponto.

Repare o terceiro ponto em linha reta.

Abaixo continuarei com as imagens do passo-a-passo sem grandes citações, afinal, algumas imagens valem mais que mil palavras…
Apenas atentem para as legendas:

Para fechar o contorno, posicione a pen tool ao ponto inicial, não esquecendo de puxar a alça para esquerda com base na curva que deve ser criada nesta área.

Ufa… Vejam como ficou:

– Em propriedades, elimine os traços e defina o preenchimento em azul (#003399).
*No menu > view > guides > show guides, desabilite a opção para melhor visualização.

– Através do painel layers, oculte a imagem base e defina o canvas (cor do fundo) em branco.

Ficou satisfatório, mas sempre é preciso fazer ajustes.

*Para aperfeiçoar eventuais contornos, magnifique o palco e utilize a ferramenta subselection tool (atalho = a) em seus pontos.

– Em layers, nomei este vetor como ?vetor azul? para facilitar a continuação.

*Para nomear basta clicar duas vezes no campo de digitação.

– Duplique o vetor azul (ctrl + c = copia, ctrl + v = colar) ou menu > edit > clone (ctrl + shift + d), e escolha um traço escuro no painel de propriedades sem preenchimento.

*Nós iremos trabalhar em torno da parte amarela do escudo.

– Com a ferramenta scale tool diminua o vetor, e através da subselection tool ajuste os pontos, veja abaixo:

*Para manter a proporção do vetor ao diminuí-lo, mantenha a tecla shift pressionada.

Veja como ficou após ajuste, e já definido em amarelo (#FFE324).

10º – Duplique um dos vetores (amarelo de preferência), e faça o mesmo que o passo anterior, agora contornando a área azul interior do escudo. Aliás, área “azul interior” foi o nome que dei a este vetor.

Veja abaixo pós ajuste:

11º – Oculte todos os vetores, e utilizando a imagem base, selecione a ferramenta rectangle tool (atalho = u), e crie estas faixas.

Estas faixas servirão para perfurar o vetor “azul interior”, através de modify > combine paths >punch, selecionando o vetor e uma faixa por vez. Vide imagem:

Veja o resultado:

O que precisamos fazer agora?

Logicamente criar a cruz, posicionar as letras e… Definir o preenchimento verde, das faixas.

Quem sabe fazer isso, sem criar um novo vetor levanta a mão…

12º – Deixando a brincadeira de lado, selecione o vetor interior, vá em menu > modify > combine paths > split (ctrl + shift + j)

Pronto, agora você pode selecionar faixa por faixa, e definir a cor em verde (#009933).

Olha só que patriotismo, estamos quase lá…

13º – Com a ferramenta rectangle tool crie um quadrado branco do mesmo tamanho da cruz.

*Utilize a imagem base para posicionar e posteriormente moldar.

14º - Para moldar a ponto de criar a cruz, selecione o quadrado e desagrupe (ctrl + shift + g), assim utilizando a pen tool, poderemos adicionar pontos.

*Deixe o quadrado opaco (transparente) em 40%.

Repare que foi criado dois pontos, o que está na ponta, traga para dentro.

Crie mais dois pontos no interior, eles servirão para adequar a cruz.

Faça o mesmo no outro lado e abaixo. Veja o resultado:

Reparou que há um pequeno vazado, entre a cruz e as faixas.

Nada que seja tão preocupante. Basta criar quatro quadrados azuis (#003399), e posicioná-los atrás da cruz (ctrl + down) control + seta para baixo.

Olha que bacana, só faltam às letras.

15º – Com a ferramenta text (atalho = t) crie as inicias CBF utilizando a fonte Arial Black tamanho 24, em azul (#003399).

*Faça uso da imagem base para posicionar

Esta fonte tem um corte diagonal que a original do escudo não possue. Com o texto selecionado, vá em text > convert to paths (ctrl + shift + p).

Utilizando a ferramenta subselection tool, remova alguns pontos e molde para deixar idêntica a letra original.

Finalizamos!

Vejam o resultado:

Detalhe: Eventuais falhas tanto neste vetor quanto no seu, são inerentes ao trabalho que é feito. Porém, um pouco de paciência e coordenação, permitirá que elas sejam perfeitamente corrigidas, vale tentar.


Considerações Finais

Aprendemos nesta coluna a vetorizar o escudo da Seleção Brasileira de Futebol, utilizando técnicas já conhecidas, e fazendo uso de réguas e guias para facilitar em todo processo.

Autor: Rafael Silva Vaz – Colunista de Fireworks do MXStudio.

Dúvidas, acesse nosso fórum ou meu blog pessoal, onde mostro esta e outras colunas sobre Fireworks = Fireblog

Grande abraço e até a próxima

Escrito por Rsv on maio 30, 2006. Arquivado em Fireworks. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

1 resposta a Vetorizando escudo da Seleção

  1. Muito bem feito cara!!! mas eu quero as estrelas também :D

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>