Como criar sua própria textura com o Fireworks CS5.1

Criando textura

Olá, galerinha!

Este é o meu primeiro contributo, em matéria de tutoriais e espero, sinceramente, que dê asas à imaginação de quem gosta de trabalhar com Fireworks.

A matéria que trago nesta minha estréia tem a ver com a criação de texturas.

Como nós sabemos, o Fireworks nos traz por padrão, várias texturas, mas nem sempre encontramos uma que realmente nos agrade ou que seja a mais apropriada para o projeto que estamos desenvolvendo.

Pensando nisso, resolvi escrever este tutorial e quero mostrar a vocês, que nós também podemos desenvolver nossas próprias texturas.

Vamos lá!

1° – Passo:

Abriremos um novo documento (Atalho = ctrl + n), no tamanho 100px width por 100px height, com a cor de fundo em branco.

O Fireworks CS5 possui algumas texturas prontas no formato .png que ficam armazenadas em C: >> Arquivos de Programas >> Adobe Fireworks CS5.1 >> Configuration >> Textures e nesta pasta, verifiquei que os arquivos padrão disponibilizados variam de tamanho, sendo a textura Sandpaper, por exemplo nas dimensões de 96px por 93px e a textura Grain nas dimensões de 128px por 128px.

Sendo assim, o tamanho e a cor proposta para este tutorial, servem como sugestão, pois você pode trabalhar com o padrão que for mais conveniente para o seu projeto.

2° – Passo:

Para um trabalho 100%, iremos utilizar a régua e a grade.

Então, na aba superior, clique em Exibir e habilite a visualização da régua e edite sua grade. Editarei a minha grade para ser visualizada com espessura 25px para width e height, na cor cinza (#666666).

3° – Passo:

Selecione a ferramenta Polígono (Atalho = U).

Repare que na caixa de propriedades você tem a possibilidade de configurar as propriedades da ferramenta Polígono. Então, defina-o com 6 pontas.

4° – Passo:

Bom, agora selecione a ferramenta Polígono (atalho = U), na caixa de propriedades, escolha a cor preto (#000000) ou de sua preferência para o preenchimento desta forma e, segurando o shift, crie uma forma no palco no tamanho 70px width por 70px height e centralize-a na horizontal e na vertical para perfeita visualização no centro da tela.

Note que para este trabalho, estou utilizando a visualização de 400% para trabalhar com mais precisão e visão da minha forma e das grades.

5° – Passo:

O nosso polígono está pronto, mas e agora?Agora vamos duplicar a nossa camada atual (Atalho = Ctrl + Shift + D), para podermos começar as separar as partes da figura polígono e montarmos a nossa textura.

6° – Passo:

Bom, agora nós vamos começar a dividir a nossa figura polígono.Selecione a ferramenta Faca (Atalho = Y), e faça um corte na imagem polígono, no sentido horizontal como segue.

7° – Passo:

Observe que dividimos a figura polígono ao meio pela horizontal e obtivemos a visualização desta divisão no painel “Camadas”.

8° – Passo:

Agora vamos marcar somente a primeira camada para podermos juntar os pontos que ficaram abertos com o corte.

9° – Passo:

Para juntar os pontos abertos, utilizaremos a ferramenta Subseleção (Atalhos = A, 1). Vamos marcar estes pontos e em seguida, no painel “Caminhos”, e em “Editar Pontos”, vamos selecionar a opção “Juntar Pontos”.

10° – Passo:

Vamos fazer o mesmo procedimento dos passos 7° e 8° , porém na camada inferior, marcando-a para visualização e desmarcando a camada que utilizamos.

11° – Passo:

Pronto! Agora temos duas camadas prontas para serem separadas novamente!

Para isso, utilizaremos a ferramenta Faca (Atalho = Y) e faremos o corte no sentido vertical, mas isso com as duas partes da imagem Polígono sendo visualizadas e selecionadas (pode-se apertar Ctrl e clicar nas camadas para selecioná-las juntas), no painel “Camadas”.

12° – Passo:

O resultado será um total de cinco camadas:

13° – Passo:

Para finalizarmos a visualização do nosso trabalho de textura, precisaremos apenas selecionar uma camada por vez e posicionar os elementos de acordo com a montagem da textura. Utilizei o painel “Alinhar” para posicionar todas as partes corretamente.

14° – Passo:

Vamos habilitar a visualização da última camada onde está nossa figura base e exportar nossa imagem através do menu “Arquivo” na aba superior, opção “Exportar”.

Você pode exportar para a pasta de sua preferência ou instalar a textura diretamente na pasta específica do Fireworks (C: >> Arquivos de Programas >> Adobe Fireworks CS5.1 >> Configuration >> Textures), para que se torne textura padrão.

15° – Passo:

Para testarmos nossa textura, vamos criar um novo documento (Atalho = ctrl + n), no tamanho e cor de sua preferência.

Vou criar meu novo documento no tamanho de 500px width por 500px height, com a cor de fundo em branco e vou utilizar a ferramenta Retângulo (Atalho = U) para teste da textura.

No painel de Texturas, você deverá escolher a textura polígono se tiver instalado o arquivo na pasta de Texturas do Fireworks, ou se em uma pasta diferente, deverá selecionar a opção outro e apontar o caminho da sua textura.

16° – Passo:

Pronto! Aplicamos a textura!

Agora você pode finalizar a edição da sua textura fazendo alterações de cores e transparência.

Bye bye:

Bom, por hoje é só pessoal 🙂

Agradeço muito pela atenção e espero que tenham gostado deste tutorial e que eu realmente tenha ajudado na criação de vocês!

Brevemente postarei outros tutoriais com novidades para todos.

Beijos,

Marta Roberta Teles

 

P.S.: 

Este post foi publicado por mim também no grupo Adobe FireworksBR. Conheçam e cadastrem-se!

Temos encontros, tutoriais, fórum, vídeo aulas e sorteio de brindes da Adobe (sorteio somente para usuários cadastrados).

Aqui vai o link deste post no grupo:

http://fireworksbr.groups.adobe.com/index.cfm?event=post.display&postid=42888