LAYOUT DE SITES

BLOTOINGS!

Feito isso, vamos agora escolher a cor que iremos adotar para o plano de fundo geral do nosso layout, como já disse milhares de vezes, você pode optar pela que melhor lhe convier uma vez que o trabalho é SEU.

Muito bem, depois de escolhida e aplicada a cor, crie uma nova camada transparente e selecione a ferramenta de seleção retangular, presente na interface principal do Gimp e com ela, crie um retângulo com tamanho o tamanho 590×695 pixels, e depois vá para a aba “opções de ferramentas presente na interface principal do Gimp e ou na sua janela caso você tenha feito isso na customização da sua interface de trabalho e arredonde as bordas da seleção. A imagem abaixo ilustra esse processo:


IPC: é claro que você não precisa e nem deve seguir o exemplo, então se o seu layout não incluir bordas arredondadas não o faça.
Muito bem, agora preencha a area de seleção com a ferramenta balde de tinta, utilizando uma cor aditiva, para o exemplo, optei por algo convencional, o branco sólido. Depois, reduza a opacidade da camada na qual estamos trabalhando para cerca de 50%.
Ainda com a seleção ativa, vamos reduzir proporcionalmente o tamanho da seleção, para criar um efeito de moldura no exemplo,para tal procedimento clique com o botão direito dentro da seleção e clique no campo “diminuir seleção”, reduza a mesma entre 5 e 8 pixels, dependendo da borda que se queira formar e clique em ok. Agora, crie uma nova camada transparente e preencha a seleção reduzida com uma cor clara novamente, e reduza um pouco a opacidade a seu gosto, as imagems abaixo ilustram o que foi dito:



Muito bem, agora vamos criar a box do campo de pesquisa, para tanto, crie uma nova camada transparente e dentro dela, faça um novo retangulo utilizando novamente a ferramenta de seleção retangular, sendo que o tamanho do mesmo deverá ser de 229×65 pixels, sem se esquecer de realizar o mesmo procedimento de criação de borda que vimos anteriormente:

Agora para que possamos criar a box que acondicionará o menu, novamente utilize os mesmos procedimentos só alterando o tamanho do retângulo para 296×360 pixels :

Agora para a segunda caixa do menu, faça o mesmo procedimento com tamanho proporcionalmente menor a da primeira caixa de menu:

Bacana, agora que já temos as caixas prontas, vamos enfeitar a nossa brincadeira utilizando uma composição com pincéis =], para isso, crie uma camada transparente localizada apenas acima da camada BASE*(background) e realizando o procedimento sobre ela, mas cuidado, não utilize muitos pincéis, de a preferência por pincéis “duros” (sem esvaecimento) , aplique principalmente nos espaços entre as bordas das caixas como no exemplo abaixo:

Agora, vamos criar os botôes superiores (também podemos chama-los de abas, mas isso fica a seu critério), para tanto, crie retângulos com o tamanho 140×62 pixels e pocisione os sobre a caixa de texto do layout:

Porém, como se pode notar, ainda existem pequenas interseções entre a caixa de texto e as novas abas, para eliminar esse pequeno obstáculo, basta que apaguemos os referidos trechos das camadas que levam as bordas para que cada aba possa se integrar perfeitamente a caixa de texto, para tal procedimento, basta utilizarmos a ferramenta “Borracha” que está presente na interface principal do Gimp, em conjunto com um pincel de raio curto, para facilitar essa tarefa, procure ampliar o zoom da imagem afim de que você possa apagar apenas os trechos realmente necessários :

Não fica muito melhor sem as intersecções?=]

Agora, vamos criar os botôes da caixa de menu que criamos próxima a caixa de texto, para isto, crie um retângulo* (apenas em conceito, crie o botão que desejar) com tamanho 240×30 pixels e pinte-o com a cor que desejar, lembrando que essa será a cor do mesmo para o item que for selecionado. Depois duplique o botão mais algumas vezes e aplique tonalidade acinzentada para definir que os mesmos são intens inativos no momento:


Agora, vamos criar as linhas separadoras de seções da caixa de texto para isto, crie um retangulo com o tamanho da largura da caixa de texto e a altura exata a de 01 pixel (isso mesmo, 01 Pixel, ou seja, uma linha MESMO).:

Agora, duplique a linha a fim de que a caixa de texto seja dividida em quantos seguimentos forem necessários:

Muito bem, agora basta que você termine o seu exemplo como achar melhor=] *(faltou um ícone para o Rss, outro para o campo de busca, ,decorativos pormenores e afragmentação do tema para que o mesmo possa ser portado para o seu sistema favorito) , pois o caminho das pedras eu já deixei aqui =]!
Vejo vocês no nosso próximo assunto!