Tutorial – criando um site simples usando psd (Photoshop), html e css – para iniciantes – Parte 4

(Continuação)

1. No photoshop Pressione Ctrl+alt+Z para desfazer o corte e transfira a imagem (nutrição, das cobras) para outro documento. Escolha no menu Image/Trim para que o conteúdo transparente ao redor da imagem desapareça e fique só ela no canvas.
( Dica: Para transferir uma layer para outro documento facilmente, escolha Window / Arrange/ Float all in Windows, para que todas as abas do Photoshop fiquem uma acima da outra e clique, segure o clique e arraste uma Layer para outro documento facilmente. A Layer será copiada. )



2. Escolha File / Save for web and devices e salve ela na pasta “images” (criada com o nome de nutrição.png) como PNG 24 para preservar a transparência. Faça o mesmo com a imagem de texto salvando com nome de titulo.jpg.

3. No arquivo CSS, em body, se agregarmos a url da imagem background.jpg e retirarmos as cores de todas as divs, salvarmos tudo e visualizarmos no navegador, já aparece a imagem como background.

4. Ela é fininha, tem apenas 1px de largura, mas como repete em x e y, ela já aparece. Deixamos a configuração na body do jeito que está, mas vamos precisar das cores ainda no restante, pois precisamos nos orientar sem que elas sejam invisíveis. Com isso, a figura background estará configurada, só não aparecendo porque as cores das outras divs estão por cima.

5. Note como está nosso arquivo index.html (corrigindo um pequeno erro. Coloquei a div menu para fora da div topo), nosso arquivo CSS e o index.html visualizado no navegador.

Olhando essa imagem ( a primeira imagem que representa index.html), faça a adição das duas figuras dentro de suas respectivas divs, no topo do index.html e acrescente suas regras CSS (agora na segunda imagem) na parte de baixo do arquivo CSS. Deixe tudo como está vendo acima que vamos partir para uma próxima etapa do treinamento.

Próximo

Este post é parte integrante de um tutorial sobre como criar um site simples usando PSD, html e CSS. São 7 partes.
Acompanhe abaixo.

Parte 1 / Parte 2 / Parte 3 / Parte 4 / Parte 5 / Parte 6 / Parte 7

Siga-me no Facebook

Comments

comments

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *