Website com o Gimp

Hoje em dia os programas de edição de imagens podem ser usados para tarefas mais complexas, como a criação de websites inteiros. Porém pouca gente sabe como executar este tipo de coisa. Esse artigo visa ensinar ou ao menos ajudar nesta tarefa.

[ Hits: 90.836 ]

Por: Guilherme RazGriz em 10/10/2005 | Blog: http://razgrizbox.tumblr.com


Criando os botões do seu layout



Eles serão os principais responsáveis pela navegação pelo seu website e obviamente também serão peças fundamentais na composição do design do mesmo, por isso é muito importante que ele seja compatível com o header, mesmo assim isso não impede que o mesmo siga um padrão um pouco diferente e até mesmo ousado.

Como fizemos anteriormente, criaremos agora os nossos botões usando praticamente a mesma técnica usada na logomarca que criamos.

Começaremos definindo o tamanho que cada botão terá, recomendo a padronização do tamanho dos botões para facilitar a organização dos arquivos do website, assim para tornar mais rápido o processo, vamos primeiro colocar a "header logo" que criamos anteriormente no modelo de website. Crie uma imagem com tamanho de 1024x768 (esta é a resolução que está sendo usada no exercício, mas nada impede que você utilize outra).

Para tanto, utilize a ferramenta de seleção "quadrado" para selecionar a área do header do website na imagem em branco que criamos.


Agora copie esta área selecionada e cole no mesmo lugar da área selecionada, depois crie uma nova camada, com a mesma, para isto clique com o botão direito do mouse sobre a figura que acabamos de colar e selecione a opção "criar nova camada".

Agora, no menu principal do Gimp, aja como se fosse abrir uma nova imagem, ele mostrará o tamanho da área que você copiou anteriormente, aplique este mesmo tamanho na logomarca que criamos anteriormente, lembrando que deve ficar sempre do seu agrado.

Depois de aplicar o tamanho à logo e obter o resultado desejado, basta colar a logo na nova camada criada anteriormente na imagem em que montaremos o layout.


Agora definiremos o tamanho dos botões, isso depende muito da quantidade de links presentes no projeto, como este projeto possui poucos links, não é necessário criar muitos botões, apesar disso não se prenda ao projeto, crie quantos botões quiser e links, a sua imaginação é o único limite aqui.

Uma das maneiras mais práticas de se obter um padrão no tamanho dos botões em caso de layouts com header (nosso caso neste exercício), é dividir o comprimento do header pelo número de botões necessários, assim basta criar uma nova imagem com o resultado da conta e começar a trabalhar no design dos botões do website, como faremos agora.

Prefira sempre seguir a linha de cores e tons adotadas na logomarca, assim o resultado sairá bem melhor, aqui optamos pelo efeito espelho já usado anteriormente na logomarca, mas não juntamos as duas metades, colocamos texto simples para combinar com as linhas do projeto.


O procedimento como visto é simples, mas esta é apenas uma das milhares maneiras de se criar um botão para um website, para saber mais, consulte o website www.ogimp.com.br e busque/pesquise por novas formas de fazer botões, através desta pesquisa pode-se aprofundar o conhecimento sem nenhuma limitação técnica imposta pelo exercício que estamos fazendo.

Página anterior     Próxima página

Páginas do artigo
   1. Website com o GIMP
   2. Conteúdo
   3. Eu já tenho logomarca?
   4. Criando os botões do seu layout
   5. Resolução do Website
   6. Montando o projeto
   7. Acabamos tudo?
Outros artigos deste autor

Pequenas coleções (parte 2)

Pequenas coleções

Inkscape descomplicado - Parte III (criando e imprimindo objetos 3D)

Blender - Criando personagem 3D em menos de 10 minutos

Um pouco de pintura digital

Leitura recomendada

Gimp e o abstrato perspectivo

Edição pesada de imagens com o Gimp (parte 2)

Um método para a construção da interface gráfica MATE no Slackware

Convertendo de AVI para AMV nativamente

Blender - Como fazer um planeta 3D

  
Comentários
[1] Comentário enviado por lennon.jesus em 10/10/2005 - 10:26h

Muito show este artigo. Gostei e foi muito útil. Eu estava mesmo precisando de algum material sobre o gimp. Deu pra ter uma idéia.

[2] Comentário enviado por chronos em 10/10/2005 - 11:35h

Seus artigos sobre o GIMP estão sendo muito utéis.
Nunca aprendi a usar Photoshop, me apaixonei por linux e só uso windows hoje para jogar mesmo, por preguiça de emular os games no linux :).

Sou programador e tenho uma deficiência por não saber mecher com ferramentas de edição de imagens, layout de sites no linux, seus artigos estão cobrindo um grande buraco no meu curriculo e creio que também no de muita gente :).

Parabéns de novo razgriz!

[3] Comentário enviado por removido em 10/10/2005 - 13:06h

10!!!!!!!!!!!!!!!!!!

[4] Comentário enviado por jroliv em 10/10/2005 - 13:43h

Ótimo artigo!
Vou me especializar nessa parte de criação de layout no Gimp.
Chega de Emular o Fireworks =)

[]'s
jrOliv

[5] Comentário enviado por Marcelo_Reis em 10/10/2005 - 17:12h

muito bom artigo

[6] Comentário enviado por anjinhoo em 10/10/2005 - 22:40h

excelente artigo.
[]z

[7] Comentário enviado por limasala em 17/11/2005 - 19:13h

beleza pinguin

very good

[8] Comentário enviado por thigux em 10/07/2006 - 10:04h

cara prabens ficou show mesmo esse artigo...

[9] Comentário enviado por nagol em 23/08/2006 - 11:05h

Como sempre, seus artigos sobre o GIMP nos ajudam e muito a trabalhar com esse incrível editor de imagens!

Parabéns pelo belo trabalho!

[10] Comentário enviado por kandangoman em 26/07/2007 - 11:46h

pó cara eh mó facil fazer o site com o gimp

mais tem um pequeno problema como mando os links das imagens para um iframe eh muito foda fazer isso se vc souber me manda uma mensagem falow ai valeu

[11] Comentário enviado por razgriz em 26/07/2007 - 13:46h

olha, até onde eu saiba ainda não da pra por, só da pra recortar ele inteiro pra depois montar em editor html.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts