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

Este tutorial destina-se a pessoas que ainda estão iniciando na produção de sites. Vamos criar um Layout no Photoshop e depois transformar esse layout em html para colocar no servidor. Note que o layout não ficou muito bom, visto que ele foi criado de maneira simples. Criei o tutorial com o objetivo de ensiná-los a usar o CSS e html. Depois de acompanhar todo o tutorial, você já estará sabendo os princípios de CSS e html, e poderá fazer um site personalizado, do jeito que quer, podendo avançar nos estudos pela web.

Antes de seguir, talvez você se interesse por este post Fatiando um Layout de um site no Photoshop.

São 7 partes, mas eu garanto que é muito fácil e rápido acompanhar, pois é todo ilustrado com prints do processo de criação.

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

Vamos criar este site simples:



Se quiser, clique aqui e o visite antes de seguir o tutorial

 

1. Abra o Photoshop, escolha no menu File / New e preencha a janela que aparecer como você vê abaixo. 1024 px de largura, 768 px de altura, resolução 72 pixels por polegada, modo de cor RGB 8bits e background transparente. Não se esqueça de nomear o seu layout. Dê OK!

2. Selecione a layer, e pressione (G) ou clique em Gradiente, para ativá-lo. Clique duas vezes nas opções do gradiente.

3. Aparecerá a imagem abaixo. Defina como na imagem e dê ok. Você pode escolher a cor que quiser. (Uma dica: para escolher uma combinação de cores eficaz para seu site, para que ele fique bem profissional: use o Color Schemer.)

4. Com a layer do gradiente selecionada, clique, segure o clique e arraste de cima para baixo. (Certifique-se de que a opção LINEAR de gradiente esteja selecionada).

5. Agora começaremos a ilustrar o Header (cabeçalho do site). Como vai ser um site de uma profissional de nutrição, vamos importar para o Photoshop uma foto que escolhi em um banco de imagens gratuito. Você pode estar usando qualquer imagem. Escolhi File / Place e selecionei a imagem. Ela é uma imagem Png, por isso conservou a transparência. (Se você quiser aprender a transformar uma imagem Jpg em Png com fundo transparente clique aqui.) Selecionei ela e coloquei ela em cima de nosso documento.

6. Pressionando (T) ou escolhendo Text, no menu, clicamos uma vez na área de trabalho do Photoshop e digitamos o título do site. Com a layer de texto selecionada e a ferramenta Text também, escolheremos uma cor verde para ele. Fonte de tamanho 72, a família da fonte você escolhe. Estou usando Maassslicer. Coloque um estilo para o texto. ( Não sabe? Clique aqui e aprenda este efeito.)

7. Depois de estilizado, vamos aplicar um Warp no texto, para deixá-lo em forma de arco.

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

Comments

  1. says

    Olá, tudo bem?
    Muito bom esse tutorial!
    Gostaria de esclarecer algumas dúvidas com relação aos formatos de sites.
    Estou iniciando na criação de site e os no formato em psd,pode-se definir como site? Pois os formatos Htm e flash são muitos utilizados. Onde posso manter esse formato em psd? teria algum problema se criar um site nesse formato para cliente?
    Estou enviando um site e gostaria que analizasse, está todo em psd, modfiquei alguns texto no photoshop,
    Muito obrigado pelas dicas!

Deixe uma resposta

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