Como Criar um Ícone RSS

Pessoal,

Neste tutorial veremos que, aplicando ferramentas simples do Fireworks, conseguimos criar um ícone bacana do RSS.

Pré-Requisitos

Familiaridade com o Fireworks CS3 ou CS4.

Objetivos

Criar um ícone RSS utilizando o Fireworks

1º Passo – Criando a Base

Para começar, criaremos um arquivo com as dimensões 300 x 300 pixel e um retângulo de 250 x 250 pixel.

Em seguida, aplicaremos uma textura (linhas verticais) e um preenchimento gradiente radial como na imagem abaixo:

: Fig.01: Dimensões

2º – Criando o Símbolo do RSS

Existem várias técnicas para criarmos o logo, o símbolo do RSS. Como meu intuito é usar algumas ferramentas

“escondidas” do Fireworks, vamos lá.

A ferramenta é a Doughnut, popularmente conhecida como “rosquinha”. Por que será? rsrs

: Fig. 02: Tool Doughnut

Ela cria um círculo vazado, ou seja, com um vão, um buraco no meio. mas aí você se pergunta como a gente fará para criar os 1/4 de arcos que representam o símbolo do RSS?

Vejamos a imagem sequencial a seguir:

: Fig. 03: Criação do círculo

No nosso caso faremos dois círculos, um maior que o outro.

O detalhe é que faremos em um arquivo separado e depois inseriremos no arquivo do ícone, ok?!

: Fig. 04: Círculo vazado

Uma dica boa para centralizar tudo, Seleciona os círculos (CTRL + A) e preciona, CTRL + 2 para centralizar horizontalmente e CTRL + 5, verticalmente

Agora, vamos fazer os devidos “cortes” para deixarmos apenas 1/4 de círculo visível. Para isso utilizaremos as linhas-guias e retângulos.

: Fig. 05: Primeiro corte

E, selecionando o retângulo e os círculos, vamos aplicar um corte, acessando o menu Modify > Combine Paths > Punsh, e o resultado será este:

: Fig. 06: Resultado do 1º corte

IMPORTANTE!

O retângulo deve estar acima dos círculos senão o tipo de corte será diferente.

E o mesmo procedimento faremos com o restante, deixando apenas o que desejamos.

: Fig. 07: Resultado do 2º corte

3º – Inserindo o Símbolo do RSS

Agora, para finalizar, basta copiarmos e colarmos o resultado dos cortes acima, deixarmos com a cor branca, colocarmos um círculo menor, o texto e aplicarmos uma leve sombra.

E eis o resultado final: