BLOTOINGS!

Bem, eu não sou o do tipo que gosta de coisas “bonitinhas”(a não ser mulheres…sobretudo a minha esposa hehe) e também confesso que não tenho interesse na criação de interfaces*(ops hehe ai depende para que ela vai servir hehe) e ou quando se fala em layouts para a Web, porém, alguns aprendizes que acessam a documentação com freqüência e que são “blogueiros” assíduos*(pois é, se todos resolvessem escrever documentação eu ficaria bem feliz =]) , me pediram pra falar sobre isso, então, hoje nós vamos falar sobre a criação de layouts para blogs, então, é hora de parar de teclar e colocar a mão na massa=], vamos lá:

IPC: O tema que nós vamos ver hoje foi projetado para ser portado para o wordpress, mas nada o impede que você o adapte para rodar onde você desejar é claro.

Comecemos criando uma imagem com o tamanho 1024×900 pixels.

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.

vdx

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:

rect

arreb

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:

fgh
muiv

dff

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:

cdcdf

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 :

gfgfd

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

ght

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:

deft

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:

erfvc

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 :

ferv

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

jyg

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:

cvcd

fgtv

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).:

grrrrd

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

cft

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!

Uma resposta to “BLOTOINGS!”

  1. Olá Razgris.

    Você me ajudou muito.

    Muito Origado !

    Me ensinou mais do eu esperava, porque e não entendia as camadas transparentes e a onde eu as usaria.

    E com respeiro ao conteúdo parabéns não tenho nenhuam critica, você foi direto na explicação e mostrou ótimos exemplos.

    Obrigado mesmo !

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: