Website com Gimp.

No exercício anterior vimos como criar um projeto bem simples mas atraente para a web.

Neste novo exercício vamos desenhar um website mais complexo baseado inteiramente em Brushes e fontes sem o uso de imagens adicionais.

Como este exercício vai trabalhar mais intensamente a parte conceitual, é necessário que se tenha noções básicas sobre o comportamento e domínio da ferramenta (Gimp), assim sendo caso você não esteja nessa situação, leia com atenção os documentos da minha autoria publicados no OGIMP.

A primeira coisa a se fazer é mentalizar na mente o que desejamos fazer : Passar uma mensagem ? Entreter a nós mesmos ? Apenas deixar os traços definirem ?

Pense nisso antes de iniciar qualquer trabalho e escolha uma dessas propostas, assim a velocidade do trabalho almentara consideravelmente e a sua satisfação também.

Todos sabemos que os Pinceis padrão das ferramentas de edição de imagem são em grande maioria inexpressivos e ou “manjados”… é por esse motivo que precisamos de novos ! =] vá até o web site http://www.deviantart.com e no campo “Search” digite : “GIMP BRUSHES”, escolha quantos quiser e baixe os para o seu computador. Para instala-los no Gimp, o procedimento é o seguinte: descompacte o conteúdo dos arquivos na pasta : /home/naraosgaeminharainha/.gimp-2.2/brushes . Pronto, agora sempre que você abrir o Gimp os novos pincéis estarão disponíveis.

Agora que já temos os Pinceis podemos começar. Crie uma nova imagem de tamanho 1024×768 pixels.

Perfeito já temos o nosso campo de trabalho. Crie uma nova camada transparente na imagem de trabalho e comece a desenhar o header do web site com os Brushes, utilize a valioza técnica do espelhamento aprendida no exercício anterior caso deseje passar a ideia de um cenário vetorial- futurista, como podemos ver no exemplo de montagem abaixo:

Também é possivel completar o header encaixando já a logomarca do projeto que será feita dentro do header utilizando apenas a ferramenta de texto e os pinceis, como veremos durante a sua fabricação.

Selecione a ferramenta de texto no menu principal do Gimp e clique no meio do header que acabamos de montar. Digite uma palavra ou o nome do seu projeto como visto no exemplo abaixo:

Repare que a fonte utilizada combina com o Header. Agora vamos incrementar a nossa logo fazendo algums efeitos com os pinceis.

Selecione um pincel de sua preferência e faça um desenho que não torne a logo ilegivel como no exemplo abaixo

Agora selecione a ferramenta de Degradê no menu principal do Gimp e diminua a sua opacidade, escolha o que mais lhe agrada e aplique sobre o Header ou sobre parte dele. Abaixo temos uma sugestão de aplicação:

Você pode dar diversos efeitos a este trabalho utilizando a ferramenta de degradê bastanto modificar o seu angulo de ação, como podemos ver no exemplo abaixo :

Agora que fizemos o Header que tal aproveitar e fazer o menu incorporado ao mesmo combinando com os efeitos do header ?

Como estamos trabalhando com o abstrato para que tudo combine é recomendável que o menu siga o mesmo padrão do header em matéria de harmonia então criamos várias camadas para facilitar a criação do menu com uma padronização dos botões :

Construa o seu menu em uma imagem separada da que estamos trabalhando isso evita erros e danos além de podermos reaproveitar este menu mais tarde.

Montagem do menu:

Existem diversas maneiras de montarmos o menu , como o efeito utilizado no exemplo foi uma curva o menu teve de segui-la e em seguida foi usada a técnica do espelhamento para alongar o menu.

O resultado do exemplo é este :

Fizemos aqui o desenho de um website totalmente feito com texto e brushes sem o uso de imagems adicionais. Sim os efeitos fazem com que o site fique pesado caso você não tome cuidado na hora de cortar as imagems, mas o resultado é muito agradável e limpo, podendo ser combinado a alguns efeitos bem padrões em java de forma original quando terminado o website.

O mais importante é desenvolver a sua criatividade, o exercício que nós fizemos teve esta finalidade. Espero que este seja apenas a ignição para o motor criativo de muita gente por ai.

Tutorial testado no Gimp 2.0

Autor: Guilherme (Razgriz) – (hellcomdevØgmail·com)