Criando um HotSite com GIMP

Share

O Gimp, GNU Image Program, é o editor de imagens principal do projeto GNU. Além de uso em design gráfico ele também pode ser uma mão na roda na hora de desenvolver projetos para a Web.

Para demonstrar alguns recursos interessantes deste excelente Software Livre, vamos criar um hotsite, um tipo de página muito comum em ações de propaganda e excelente modelo para página de aterrissagem – aquelas que recebem visitantes que acabaram de clicar em um anúncio. Os hotsites são essencialmente visuais, por isso boas imagens, um editor gráfico profissional e muito talento fazem grande diferença na hora de produzir este tipo de trabalho. Como nosso objetivo é aprender recursos do Gimp, vamos usar um layout bem minimalista.

Em primeiro lugar, abra o Gimp e inicie a criação de um novo arquivo através do menu Arquivo – Novo ou através do atalho de teclado CTRL + N. Na caixa de diálogo informe a largura = 800 px e altura = 1200 px e dê OK, conforme a imagem abaixo:

hotsite1

Com a imagem aberta vamos marcar a metade da imagem. O nosso Hotsite terá apenas 2 páginas, mas você pode criar layouts maiores e dividi-los em partes iguais definindo mais páginas.

Clique na ferramenta Seleção Retangular e selecione apenas a parte superior do layout. Vamos utilizar a ferramenta Gradiente para preencher a seleção. Podemos conseguir um efeito semelhante à iluminação de utilizarmos duas cores próximas, como 2 tons de azul próximos, por exemplo. Modifique o gradiente para o tipo radial, clique e arraste para produzir um raio maior.

hotsite2

hotsite3

Como a parte superior está completamente selecionada use o atalho CTRL + I para selecionar a parte inferior do layout. Isso é a mesma coisa que usar o menu Selecionar – Inverter. Agora aplique um gradiente de outra cor para a segunda página, podem ser 2 tons de verde. O resultado é esse:

hotsite4

Agora que as imagens de fundo estão prontas, vamos marcar as margens para finalizar o layout e ter uma idéia de como ficará o site. Para isso clique e arraste o cursor a partir das réguas para marcar margens esquerda, direita, superior e inferior. Tente criar margens de aproximadamente 50 px de cada borda. Para isso use as réguas como referência. Se não conseguir enxergar as medidas, pressione a tecla “ + ” ou “ – ” do teclado numérico. Elas são os atalhos de zoom do Gimp.

Usando a ferramenta texto, digite o menu e o título. Eles não serão exportados diretamente mas servem como referência de como ficará o trabalho depois que você terminar. Veja:

hotsite5

Caso você queira acrescentar mais imagens ou efeitos para incrementar o Hotsite, combine todos eles em uma única camada que irá compor a imagem de fundo do site. Para combinar duas camadas, mova uma camada para cima da outra e depois clique com o botão direito sobre a camada que está acima. Depois clique em combinar abaixo. Repita o processo até combinar todas as imagens, não precisa combinar camadas de texto.

Remova todas as guias arrastando-as para fora da imagem. Deixe apenas a guia que divide o nosso layout ao meio. As guias são utilizadas pelo Gimp para “fatiar” o layout em uma tabela HTML. Embora não seja a estrutura ideal em tempos de tableless e telas de diversos tamanhos, a tabela vai definir a estrutura do nosso site e adiantar o nosso trabalho.

Agora vamos exportar para o HTML. Para isso clique sobre a camada com a imagem de fundo e vá até o menu Filtros – Web – Fatiar. Escolha uma pasta para exportação (pode ser Desktop, para facilitar). Mude o nome do arquivo para hotsite.html e escolha jpg como formato das imagens. Clique em OK e aguarde a exportação.

hotsite6

O Gimp automaticamente cria uma página HTML com a tabela e as imagens de fundo cortadas no ponto onde passam as guias. Diferente do Fireworks, as tabelas do Gimp devem ser usadas para estruturar o site e não criar todo o layout. Para o estilo e o layout use CSS.

Agora vamos editar o HTML. Abra a página exportada em algum editor de texto ou HTML. Pode ser Gedit (no Linux) ou o bloco de notas (no Windows).

Primeiro vamos definir os estilos. No arquivo HTML, digite o código abaixo acima da tag <table>:

————————————————————————————-

<html>

<head>

<title>Hotsite feito com Gimp!</title>

</head>

<style type=”text/css”>

/* coloca as imagens no fundo */

.img {

z-index:1;

}

/* Estilo e posição dos menus */

#menu {

position:absolute;

background-color:transparent;

text-align:left;

color:#FFFFFF;

font-size:28px;

font-family:Arial, Helvetica, sans-serif;

font-weight:bold;

top:50px;

left:50px;

z-index:6;

}

 

#menu2 {

position:absolute;

background-color:transparent;

text-align:left;

color:#FFFFFF;

font-size:28px;

font-family:Arial, Helvetica, sans-serif;

font-weight:bold;

top:650px;

left:50px;

z-index:6;

}

 

/* Estilo dos links */

a{

color:#FFFFFF;

text-decoration:none;

}

 

a:hover {

color:#FF9900;

text-decoration:none;

}

 

/* estilo e posição dos títulos */

#titulo {

position:absolute;

background-color:transparent;

font-family:Arial, Helvetica, sans-serif;

text-align:left;

color:#FFFFFF;

font-size:66px;

font-weight:bold;

top:100px;

left:50px;

z-index:2;

}

 

/* Estilo e posição dos textos */

#texto-home {

position:absolute;

background-color:transparent;

font-family:Arial, Helvetica, sans-serif;

text-align:right;

color:#FFFFFF;

font-size:30px;

top:350px;

left:300px;

z-index:3;

}

 

#texto-contato {

position:absolute;

font-family:Arial, Helvetica, sans-serif;

text-align:right;

color:#FFFFFF;

font-size:30px;

top:950px;

left:360px;

z-index:4;

}

</style>

 

<body bgcolor=”#003366″>

<!– Conteúdo –>

<div id=”menu”><a href=”#menu”>Home</a> <a href=”#menu2″>Contato</a></div>

<div id=”menu2″><a href=”#menu”>Home</a> <a href=”#menu2″>Contato</a></div>

<div id=”titulo”>Seja Livre, use Linux!</div>

<div id=”texto-home”>Conheça o sistema operacional<br/> que mais cresce em número<br/> de usuários em<br/>todo o mundo!</div>

<div id=”texto-contato”>Entre em contato conosco<br/>e saiba mais!</div>

 

————————————————————————————-

 

Depois salve o arquivo. Observe os comentários explicando a função de cada trecho do código. Eles aparecem entre /* */ no CSS ou entre <!– –> no HTML.

 

Abaixo da tag </table> digite:

 

-----------------------------------------------------------------------------------

</body>
</html>

-------------------------------------------------------------------------------------

 

Abra o arquivo hotsite.html no navegador e observe o resultado. Se houver algum erro, volte ao editor de textos, corrija e salve o arquivo. Atualize a página no navegador e veja o resultado.

Você pode utilizar layouts maiores, com 1200 X 800px em cada página, por exemplo, para que o site seja melhor visualizado em monitores grandes.

[button color=”blue” link=”http://cdn.sejalivre.org/uploads/2013/10/Hotsite_Pronto.zip”]Baixe o site pronto aqui![/button]

Com ajuda de alguns plugins o Gimp pode auxiliar em diversas funções corriqueiras para Webdesigner. Você já usa algum destes plugins? Você acha que é possível trabalhar com design para a Web apenas usando Software Livre?

Quer continuar por dentro das novidades do Blog Seja Livre? Siga o nosso perfil no TWITTER, curta a nossa página no FACEBOOK ou adicione o Blog Seja Livre nos seus círculos do GOOGLE+.