O estado atual do layout deve parecer assim:
Até agora, um logotipo e o menu superior foram inseridos. Continua com um gráfico um pouco maior, que deve ser visto diretamente abaixo da navegação.
O princípio de criar novas camadas já foi descrito no tutorial anterior. Por isso, gostaria de mostrar algo diferente agora. Diretamente abaixo do menu superior, um imagem maior deve ser exibida. O resultado será o seguinte:
A imagem deve estar nas dimensões corretas quando inserida. Portanto, edite-a, se necessário. Em seguida, acesse Arquivo>Abrir e selecione a imagem. A imagem selecionada será então exibida em uma nova janela. Pressione Ctrl+C para copiar a imagem para a área de transferência. Para inserir a imagem como uma nova camada, com o tamanho correto, acesse Editar>Inserir como>Nova camada. A nova camada automaticamente terá as dimensões da imagem e poderá movê-la facilmente para o lugar desejado. Desta forma, todas as imagens que deseja inserir podem ser transferidas para o layout e posicionadas lá.
Em seguida, insira os textos nos locais onde devem ser visualizados posteriormente. Na fase de design, normalmente se usa um texto fictício. Antes de começar a digitar aleatoriamente "teste, teste, teste", recomendo que visite o site http://www.blindtextgenerator.de/.
Ali, você pode gerar automaticamente textos fictícios - de diferentes tipos. Os textos podem então ser copiados e colados facilmente no layout de design. Nesse contexto, recomendo também o site http://dummyimage.com/. Nesse site, é possível gerar imagens fictícias de qualquer tamanho. Essas imagens fictícias podem servir como espaços reservados para gráficos originais ainda não criados em seus layouts.
O problema com camadas transparentes
Ao inserir textos, estes serão compostos por vários elementos como títulos, parágrafos, etc. Portanto, deve-se agrupar textos relacionados em camadas separadas. Assim, você poderá movê-los juntos como um bloco. Acesse Camadas>Nova camada para fazer isso. Em seguida, atribua o tamanho desejado e, se necessário, a cor de fundo da camada. Geralmente, uma camada transparente é configurada/necessária. O problema é que camadas transparentes são difíceis de mover. Muitas vezes, você acaba movendo uma camada subjacente. No entanto, é muito simples contornar esse problema. As configurações na janela da caixa de ferramentas são essenciais para isso. Ative a ferramenta de mover nela. Em seguida, ative a opção Mover camada ativa na parte inferior da janela.
Assim, é possível mover camadas transparentes para qualquer posição desejada.
Recortar elementos
Se estiver satisfeito com o layout, é hora de colocá-lo em prática como um site HTML. Neste ponto, entra em jogo o slicing, ou seja, o recorte. Esse recorte nada mais é do que dividir o layout em partes que serão posteriormente reunidas usando HTML e CSS. Você deve cortar todos os elementos que devem ser exibidos separadamente mais tarde. Exceto, é claro, os elementos de imagem que já estão separados. Primeiro, gostaria de mostrar como se pode recortar elementos. Desenhe linhas guias ao redor do elemento em questão. As linhas guias, no final, formam as arestas de corte. Portanto, certifique-se de posicioná-las corretamente.
Agora, selecione a área desejada e pressione a combinação de teclas Ctrl+Shift+C. (Isso também é válido tanto para o GIMP quanto para o Photoshop). Em seguida, crie um novo arquivo. No Photoshop, ele terá imediatamente o tamanho correto. No GIMP, não é tão simples. Aqui, você simplesmente cria um arquivo com dimensões adequadas. Use Ctrl+V para colar o conteúdo da área de transferência.
Agora, use a ferramenta de corte. Defina a área a ser cortada sobre ela e pressione a tecla Enter. A imagem será cortada para a área desejada. Use Arquivo>Salvar como para salvar a imagem.
Um elemento estilístico importante para muitos sites é um degradê. Também no layout de exemplo mostrado aqui, há um degradê. Para cortar um degradê, selecione uma área estreita do degradê correspondente. De fato, basta ajustar uma área com a largura de um pixel. No entanto, a altura deve corresponder à altura real do elemento. Com CSS, você pode garantir que esta imagem seja repetida horizontalmente até que todo o elemento esteja preenchido. Claro, você também poderia usar uma área de imagem mais larga. No entanto, isso reduziria o desempenho do site. Portanto, ao criar degradês, escolha um pixel como largura.
Com Ctrl+Shift+C, copie a imagem com um pixel de largura para a área de transferência e cole-a como uma nova imagem. Em seguida, salve a nova imagem depois de ajustá-la para a área relevante.
Este é o princípio básico de cortar. Ou seja, recorte tudo do layout que fará parte do site. Se você já tiver elementos individuais da página que não precisam ser recortados, você pode usá-los diretamente, sem a etapa de recorte.
O resultado deve ser o seguinte: você terá todas as imagens que deseja inserir no site. Isso inclui, por exemplo, o logotipo, planos de fundo, degradês etc. Já que estamos falando sobre degradês: É claro que sei que é possível criar degradês facilmente com CSS3. No entanto, isso ainda não é suportado por todos os navegadores. Além disso, cortar um degradê é uma boa maneira de ilustrar o conceito de recorte, por isso optei por usar uma imagem para mostrar como realizar degradês neste tutorial.
