&lt;p&gt;&lt;a&gt;&lt;/a&gt;&lt;a&gt;&lt;/a&gt;&lt;a href=&quot;http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Fsejalivre.org%2Fcriando-hotsite-gimp%2F&amp;amp;linkname=Criando%20um%20HotSite%20com%20GIMP&quot; title=&quot;Google+&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a&gt;&lt;/a&gt;&lt;a href=&quot;http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fsejalivre.org%2Fcriando-hotsite-gimp%2F&amp;amp;linkname=Criando%20um%20HotSite%20com%20GIMP&quot; title=&quot;Twitter&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fsejalivre.org%2Fcriando-hotsite-gimp%2F&amp;amp;linkname=Criando%20um%20HotSite%20com%20GIMP&quot; title=&quot;Facebook&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://www.addtoany.com/add_to/orkut?linkurl=http%3A%2F%2Fsejalivre.org%2Fcriando-hotsite-gimp%2F&amp;amp;linkname=Criando%20um%20HotSite%20com%20GIMP&quot; title=&quot;Orkut&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://www.addtoany.com/add_to/linkedin?linkurl=http%3A%2F%2Fsejalivre.org%2Fcriando-hotsite-gimp%2F&amp;amp;linkname=Criando%20um%20HotSite%20com%20GIMP&quot; title=&quot;LinkedIn&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://www.addtoany.com/add_to/email?linkurl=http%3A%2F%2Fsejalivre.org%2Fcriando-hotsite-gimp%2F&amp;amp;linkname=Criando%20um%20HotSite%20com%20GIMP&quot; title=&quot;Email&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://www.addtoany.com/add_to/reddit?linkurl=http%3A%2F%2Fsejalivre.org%2Fcriando-hotsite-gimp%2F&amp;amp;linkname=Criando%20um%20HotSite%20com%20GIMP&quot; title=&quot;Reddit&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://www.addtoany.com/add_to/dihitt?linkurl=http%3A%2F%2Fsejalivre.org%2Fcriando-hotsite-gimp%2F&amp;amp;linkname=Criando%20um%20HotSite%20com%20GIMP&quot; title=&quot;diHITT&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://www.addtoany.com/add_to/printfriendly?linkurl=http%3A%2F%2Fsejalivre.org%2Fcriando-hotsite-gimp%2F&amp;amp;linkname=Criando%20um%20HotSite%20com%20GIMP&quot; title=&quot;PrintFriendly&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://www.addtoany.com/share_save#url=http%3A%2F%2Fsejalivre.org%2Fcriando-hotsite-gimp%2F&amp;amp;title=Criando%20um%20HotSite%20com%20GIMP&quot;&gt;&lt;img src=&quot;http://sejalivre.org/wp-content/uploads/2011/09/botao_compartilhe.jpg&quot; alt=&quot;Share&quot; /&gt;&lt;/a&gt;&lt;/p&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;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:&lt;/p&gt; &lt;p&gt;&lt;img src=&quot;http://cdn.sejalivre.org/uploads/2013/10/hotsite1.jpg&quot; height=&quot;229&quot; alt=&quot;hotsite1&quot; width=&quot;376&quot; /&gt;&lt;/p&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;&lt;img src=&quot;http://cdn.sejalivre.org/uploads/2013/10/hotsite2.jpg&quot; height=&quot;216&quot; alt=&quot;hotsite2&quot; width=&quot;550&quot; /&gt;&lt;/p&gt; &lt;p&gt;&lt;img src=&quot;http://cdn.sejalivre.org/uploads/2013/10/hotsite3.jpg&quot; height=&quot;305&quot; alt=&quot;hotsite3&quot; width=&quot;525&quot; /&gt;&lt;/p&gt; &lt;p&gt;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:&lt;/p&gt; &lt;p&gt;&lt;img src=&quot;http://cdn.sejalivre.org/uploads/2013/10/hotsite4.jpg&quot; height=&quot;435&quot; alt=&quot;hotsite4&quot; width=&quot;531&quot; /&gt;&lt;/p&gt; &lt;p&gt;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 “ &amp;#8211; ” do teclado numérico. Elas são os atalhos de zoom do Gimp.&lt;/p&gt; &lt;p&gt;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:&lt;/p&gt; &lt;p&gt;&lt;img src=&quot;http://cdn.sejalivre.org/uploads/2013/10/hotsite5.jpg&quot; height=&quot;696&quot; alt=&quot;hotsite5&quot; width=&quot;501&quot; /&gt;&lt;/p&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;&lt;img src=&quot;http://cdn.sejalivre.org/uploads/2013/10/hotsite6.png&quot; height=&quot;465&quot; alt=&quot;hotsite6&quot; width=&quot;477&quot; /&gt;&lt;/p&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;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).&lt;/p&gt; &lt;p&gt;Primeiro vamos definir os estilos. No arquivo HTML, digite o código abaixo acima da tag &amp;lt;table&amp;gt;:&lt;/p&gt; &lt;p&gt;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;-&lt;/p&gt; &lt;p&gt;&amp;lt;html&amp;gt;&lt;/p&gt; &lt;p&gt;&amp;lt;head&amp;gt;&lt;/p&gt; &lt;p&gt;&amp;lt;title&amp;gt;Hotsite feito com Gimp!&amp;lt;/title&amp;gt;&lt;/p&gt; &lt;p&gt;&amp;lt;/head&amp;gt;&lt;/p&gt; &lt;p&gt;&amp;lt;style type=&amp;#8221;text/css&amp;#8221;&amp;gt;&lt;/p&gt; &lt;p&gt;/* coloca as imagens no fundo */&lt;/p&gt; &lt;p&gt;.img {&lt;/p&gt; &lt;p&gt;z-index:1;&lt;/p&gt; &lt;p&gt;}&lt;/p&gt; &lt;p&gt;/* Estilo e posição dos menus */&lt;/p&gt; &lt;p&gt;#menu {&lt;/p&gt; &lt;p&gt;position:absolute;&lt;/p&gt; &lt;p&gt;background-color:transparent;&lt;/p&gt; &lt;p&gt;text-align:left;&lt;/p&gt; &lt;p&gt;color:#FFFFFF;&lt;/p&gt; &lt;p&gt;font-size:28px;&lt;/p&gt; &lt;p&gt;font-family:Arial, Helvetica, sans-serif;&lt;/p&gt; &lt;p&gt;font-weight:bold;&lt;/p&gt; &lt;p&gt;top:50px;&lt;/p&gt; &lt;p&gt;left:50px;&lt;/p&gt; &lt;p&gt;z-index:6;&lt;/p&gt; &lt;p&gt;}&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;#menu2 {&lt;/p&gt; &lt;p&gt;position:absolute;&lt;/p&gt; &lt;p&gt;background-color:transparent;&lt;/p&gt; &lt;p&gt;text-align:left;&lt;/p&gt; &lt;p&gt;color:#FFFFFF;&lt;/p&gt; &lt;p&gt;font-size:28px;&lt;/p&gt; &lt;p&gt;font-family:Arial, Helvetica, sans-serif;&lt;/p&gt; &lt;p&gt;font-weight:bold;&lt;/p&gt; &lt;p&gt;top:650px;&lt;/p&gt; &lt;p&gt;left:50px;&lt;/p&gt; &lt;p&gt;z-index:6;&lt;/p&gt; &lt;p&gt;}&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;/* Estilo dos links */&lt;/p&gt; &lt;p&gt;a{&lt;/p&gt; &lt;p&gt;color:#FFFFFF;&lt;/p&gt; &lt;p&gt;text-decoration:none;&lt;/p&gt; &lt;p&gt;}&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;a:hover {&lt;/p&gt; &lt;p&gt;color:#FF9900;&lt;/p&gt; &lt;p&gt;text-decoration:none;&lt;/p&gt; &lt;p&gt;}&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;/* estilo e posição dos títulos */&lt;/p&gt; &lt;p&gt;#titulo {&lt;/p&gt; &lt;p&gt;position:absolute;&lt;/p&gt; &lt;p&gt;background-color:transparent;&lt;/p&gt; &lt;p&gt;font-family:Arial, Helvetica, sans-serif;&lt;/p&gt; &lt;p&gt;text-align:left;&lt;/p&gt; &lt;p&gt;color:#FFFFFF;&lt;/p&gt; &lt;p&gt;font-size:66px;&lt;/p&gt; &lt;p&gt;font-weight:bold;&lt;/p&gt; &lt;p&gt;top:100px;&lt;/p&gt; &lt;p&gt;left:50px;&lt;/p&gt; &lt;p&gt;z-index:2;&lt;/p&gt; &lt;p&gt;}&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;/* Estilo e posição dos textos */&lt;/p&gt; &lt;p&gt;#texto-home {&lt;/p&gt; &lt;p&gt;position:absolute;&lt;/p&gt; &lt;p&gt;background-color:transparent;&lt;/p&gt; &lt;p&gt;font-family:Arial, Helvetica, sans-serif;&lt;/p&gt; &lt;p&gt;text-align:right;&lt;/p&gt; &lt;p&gt;color:#FFFFFF;&lt;/p&gt; &lt;p&gt;font-size:30px;&lt;/p&gt; &lt;p&gt;top:350px;&lt;/p&gt; &lt;p&gt;left:300px;&lt;/p&gt; &lt;p&gt;z-index:3;&lt;/p&gt; &lt;p&gt;}&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;#texto-contato {&lt;/p&gt; &lt;p&gt;position:absolute;&lt;/p&gt; &lt;p&gt;font-family:Arial, Helvetica, sans-serif;&lt;/p&gt; &lt;p&gt;text-align:right;&lt;/p&gt; &lt;p&gt;color:#FFFFFF;&lt;/p&gt; &lt;p&gt;font-size:30px;&lt;/p&gt; &lt;p&gt;top:950px;&lt;/p&gt; &lt;p&gt;left:360px;&lt;/p&gt; &lt;p&gt;z-index:4;&lt;/p&gt; &lt;p&gt;}&lt;/p&gt; &lt;p&gt;&amp;lt;/style&amp;gt;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;lt;body bgcolor=&amp;#8221;#003366&amp;#8243;&amp;gt;&lt;/p&gt; &lt;p&gt;<!&amp;#8211; Conteúdo &amp;#8211;&amp;gt;&lt;/p&gt; &lt;p&gt;&amp;lt;div id=&amp;#8221;menu&amp;#8221;&amp;gt;&amp;lt;a href=&amp;#8221;#menu&amp;#8221;&amp;gt;Home&amp;lt;/a&amp;gt; &amp;lt;a href=&amp;#8221;#menu2&amp;#8243;&amp;gt;Contato&amp;lt;/a&amp;gt;&amp;lt;/div&amp;gt;&lt;/p&gt; &lt;p&gt;&amp;lt;div id=&amp;#8221;menu2&amp;#8243;&amp;gt;&amp;lt;a href=&amp;#8221;#menu&amp;#8221;&amp;gt;Home&amp;lt;/a&amp;gt; &amp;lt;a href=&amp;#8221;#menu2&amp;#8243;&amp;gt;Contato&amp;lt;/a&amp;gt;&amp;lt;/div&amp;gt;&lt;/p&gt; &lt;p&gt;&amp;lt;div id=&amp;#8221;titulo&amp;#8221;&amp;gt;Seja Livre, use Linux!&amp;lt;/div&amp;gt;&lt;/p&gt; &lt;p&gt;&amp;lt;div id=&amp;#8221;texto-home&amp;#8221;&amp;gt;Conheça o sistema operacional&amp;lt;br/&amp;gt; que mais cresce em número&amp;lt;br/&amp;gt; de usuários em&amp;lt;br/&amp;gt;todo o mundo!&amp;lt;/div&amp;gt;&lt;/p&gt; &lt;p&gt;&amp;lt;div id=&amp;#8221;texto-contato&amp;#8221;&amp;gt;Entre em contato conosco&amp;lt;br/&amp;gt;e saiba mais!&amp;lt;/div&amp;gt;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;-&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;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 <!&amp;#8211; &amp;#8211;&amp;gt; no HTML.&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;Abaixo da tag &amp;lt;/table&amp;gt; digite:&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;pre&gt;-----------------------------------------------------------------------------------&lt;/pre&gt; &lt;pre&gt;&lt;/pre&gt; &lt;pre&gt;&amp;lt;/body&amp;gt;&lt;/pre&gt; &lt;pre&gt;&amp;lt;/html&amp;gt;&lt;/pre&gt; &lt;pre&gt;&lt;/pre&gt; &lt;pre&gt;-------------------------------------------------------------------------------------&lt;/pre&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt;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.&lt;/p&gt; &lt;p&gt; &lt;span&gt;&lt;a href=&quot;http://cdn.sejalivre.org/uploads/2013/10/Hotsite_Pronto.zip&quot;&gt;Baixe o site pronto aqui!&lt;/a&gt;&lt;/span&gt;&lt;/p&gt; &lt;p&gt;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?&lt;/p&gt; &lt;div&gt;&lt;/div&gt; &lt;p&gt;&lt;br /&gt; &lt;br /&gt; &lt;br /&gt; &lt;iframe scrolling=&quot;no&quot; src=&quot;http://www.facebook.com/plugins/comments.php?href=http%3A%2F%2Fsejalivre.org%2Fcriando-hotsite-gimp%2F&amp;amp;#038;permalink=1&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt; &lt;/p&gt;