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: 92.217 ]

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


Eu já tenho logomarca?



Caso você já tenha feito uma para você, sinta-se a vontade para prosseguir sem ler esta parte, caso contrário leia com atenção.

Esta é uma pergunta simples, o seu site já tem "identidade"? Isto nada mais é do que a imagem que levará o nome do seu site e a partir dela é que desenvolveremos a programação visual do website. A sua criatividade será a peça chave neste projeto, portanto não tente fazer com que o seu projeto fique "idêntico" ao do artigo, o seu projeto deve ficar no mínimo parecido com o que você imaginou.

Aqui um exemplo de como criar uma logomarca:

Primeiro, crie uma imagem em branco de tamanho grande, 2000 por 2000 pixels já está bom. O tamanho deve ser grande para o caso de você precisar usá-la em aplicações gráficas diversas, como plotters, banners e afins. Agora que criamos a imagem em branco, vamos colocar alguns conceitos importantes:
  • a logomarca deve ser acima de qualquer coisa legível e de fácil compreensão;
  • também não podemos esquecer de passar a mensagem desejada de forma criativa e objetiva.

Agora que já temos a receita, vamos aplicá-la na logomarca a ser criada.

Na imagem abaixo é possível ver as linhas adotadas no projeto.


Reparem que é uma imagem com o efeito "espelho" já aplicado. Se obtém este efeito refazendo o procedimento executado com a primeira metade, como pode ser visto na figura abaixo, mas com pequenas alterações. Depois de colar a nova figura, idêntica a primeira, se deve aplicar a ferramenta que inverte os lados da figura e por fim colocá-la no lugar correto de forma que o efeito fique satisfatório.






Agora que já aprendemos mais um efeito interessante, podemos prosseguir com a criação da logomarca.

Abaixo podemos ver o resultado da linha que adotei, no caso utilizei as letras do meu apelido em pares. Salve a sua logo no formato padrão do Gimp e em PSD, assim fica mais fácil trabalhar com ela depois. Lembre-se que a imagem foi reduzida, portanto pode ocorrer "serrilhado" em algumas imagens.

Agora que já temos a nossa logo, repare que neste caso específico ela foi projetada para já servir como header do website, esta prática é pouco comum, mas nada impede que esta técnica seja usada em outras situações.

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

Construindo Somando e Subtraindo

Filamentos para Impressão 3d: Um Teste a Toda Prova

Modelagem realista com o Blender

Inkscape descomplicado - Parte II

Blender para todos! - Parte III

Leitura recomendada

Mencoder - Convertentdo vídeos de webcam para divx

OpenSmiles - Criando imagens e figuras de moléculas químicas em formato de qualidade

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

Desenhando os vilões do Pac-Man com Inkscape

Instalando o Inkscape no Slackware

  
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

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts