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; este artigo visa ensinar ou ao menos ajudar nesta tarefa.
A primeira coisa que se deve fazer é imaginar o projeto na cabeça, definir os links, o que será escrito no website e como você deseja que o conteúdo fique disponível.
Para seguir os passos deste artigo é necessário um superficial domínio sobre o GIMP, para um ótimo aproveitamento. Para isto, caso você não tenha base é extremamente recomendada a leitura dos documentos abaixo:
* Edição pesada de imagens com o GIMP (parte 1) (http://www.ogimp.com.br/tutoriais/intermediario/edicao-pesada-de-imagens-com-o-gimp-parte-1/)
* Edição pesada de imagens com o GIMP (parte 2) (http://www.ogimp.com.br/tutoriais/intermediario/edicao-pesada-de-imagens-com-o-gimp-parte-2/)
* Edição pesada de imagens com o GIMP (parte 3) (http://www.ogimp.com.br/tutoriais/intermediario/edicao-pesada-de-imagens-com-o-gimp-parte-3/)
Prosseguindo, vamos agora organizar cada tarefa por etapas. Assim o entendimento fica mais simples e rápido
1 Website como 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?
Conteúdo
O primeiro passo é definir o conteúdo do seu site. O design (layout) deve seguir o mesmo tema do conteúdo, isso por questão de bom gosto e bom senso, a menos que se deseje inovar. Digite os seus textos no seu programa favorito (abiword, writer, etc), não importando a linguagem do site. Procure revisar muito bem a ortografia, a sua forma de escrever diz muito sobre você. Procure sempre evitar usar cores muito vivas, a não ser que seja estritamente necessário, pois isto dificulta a leitura do website e sua navegação,
Eu já tenho logomarca?
Caso você já tenha feito uma para você, sinta-se a vontade para proseguir 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, agora vamos aplicar na logomarca a ser criada.
Na imagem abaixo é possivel 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 proseguir com a criação da logomarca.
Abaixo podemos ver o resultado da linha que eu adotei, no caso utulizei as letras do meu apelido em pares.Salve a sua logo no formato padrão do gimp e em psd, assim fica mais facil trabalhar com ela depois. Lembre-se que a imagen foi reduzida por tanto pode ocorrer “serrilhado” em algumas imagens.
Agora que já temos a nossa logo, repare que neste caso espesífico ela foi projetada para já servir como header do website, esta prática é pouco comun mas nada impede que esta técnica seja usada em outras situações.
Criando os botões do seu layout
Eles serão os principais responsaveis pela navegação pelo seu website e obviamente também serão peças fundamentais na composição do design do mesmo, por isso é muito importante que ele seja compativel com o header, mesmo assim isso não impede que o mesmo siga um padrão um pouco diferente, e até mesmo ousado.
Como fizemos anteriormente criaremos agora os nossos botões usando praticamente a mesma técnica usada na logomarca que criamos.
Começaremos definindo o tamanho que cada botão terá, eu recomendo a padronização do tamanho dos botões para facilitar a organização dos arquivos do website, assim para tornar mais rápido o processo, vamos primeiro colocar a “header logo” que criamos anteriormente no modelo de website. Crie uma imagem com tamanho de 1024×768 ( esta é a resolução que está sendo usada no exercício mas nada impede que você utilize outra.)
para tanto, utulize a ferramenta de seleção “quadrado” para selecionar a area do header do website na imagem em branco que criamos.
Agora copie esta area selecionada e cole no mesmo lugar da area selecionada, depois crie uma nova camada, com a mesma, para isto clique com o botão direito do mouse sobre a figura que acabamos de colar e selecione a opção “criar nova camada”.
agora, no menu principal do gimp, aja como se fosse abrir uma nova imagen, ele mostrará o tamanho da area que você copiou anteriormente, aplique este mesmo tamanho na logomarca que criamos anteriormente, lembrando que deve ficar sempre do seu agrado.
Depois de aplicar o tamanho a logo e obter o resultado desejado, basta colar a logo na nova camada criada anteriormente na imagem em que montaremos o layout.
Agora definiremos o tamanho dos botões, isso depende muito da quantidade de links presentes no projeto, como este projeto possui poucos links não é necessário criar muitos botões, apesar disso não se prenda ao projeto, crie quantos botões quizer, e links, a sua imaginação é o unico limite aqui.
Uma das maneiras mais práticas de se obter um padrão no tamanho dos botões em caso de layouts com header ( nosso caso neste exercicio) é dividir o comprimento do header pelo numero de botões necessários, assim basta criar uma nova imagem com o resultado da conta e começar a trabalhar no design dos botôes do website, como faremos agora.
Prefira sempre seguir a linha de cores e tons adotadas na logomarca, assim o resultado sairá bem melhor, aqui optmamos pelo efeito espelho já usado anteriormente na logomarca mas não juntamos as duas metades, colocamos texto simples para combinar com as linhas do projeto.
o procedimento como visto é simples, mas esta é apenas uma das milhares maneiras de se criar um botão para um website, para saber mais, consulte o website www.ogimp.com.br e busque pesquise por novas formas de fazer botões, através desta pesquisa pode-se aprofundar o conhecimento sem nenhuma limitação técnica imposta pelo exercicio que estamos fazendo.
Resolução do Website
Resolução não se resume a tamanho em pixels mas também ao tamanho das imagens, lembre-se que o arquivo que estamos fazendo ser para apenas o design do website, ou seja será um arquivo grande, é fato que você terá de reduzir um pouco a qualidade das imagens, nada que afete a beleza do projeto mas que se não for feita com cuidado pode comprometer o seu trabalho por completo, uma redução de qualidade que não afete o projeto é de 15% ou seja salve o jpg com qualidade entre 85 e 92, e o png com qualidade 8. Esse procedimento reduz o tamanho do arquivo tornando o site mais veloz e não prejudica a qualidade do seu trabalho, lembrando que é importantisssimo quardar cópias das imagens do projeto como backup.
Montando o Projeto
Agora que já confecsionamos os botões e todo o resto, vem a parte “facil”, a montagem do projeto.
Para tanto, posicione o menu de forma que o mesmo obtenha o efeito que você idealizou quando o começou o projeto, lembre-se de criar uma camada nova a cada imagem colada ao layout, assim fica mais facil corrigir erros sem prejudicar o conjunto todo.
se você tentou seguir a risca o exercicio, pode ter notado qe as letras do menu estão propositalmente invertidas, isto aconteceu por falta do que escrever mesmo =] então não há com o que se preocupar.
evite colocar muitas imagens no layout, o texto digitado no layout deve ser usado como referencia apenas, a menos que ele seja um truque preparado por você, prefira digita-lo manualmente quando for mesmo montar o website no seu editor html.
Acabamos tudo?
Não, apenas terminamos o design do website,mas como salvamos o projeto separado em diversas camadas ele já está cortado e praticamente pronto para o uso, no próximo exercício veremos como cortar o website de forma que ele possa ser revisado no seu editor html favorito e montado de novo assim ficando pronto para ser publicado na web.
Tutorial testado no Gimp 2.0
Autor: Guilherme (Razgriz) – (hellcomdevØgmail·com)
Nenhum comentário:
Postar um comentário