layouts no photoshop

                                                                 layouts no phatoshop
Tudo bem pessoal? Apesar da falta de tempo para escrever devido a administração do Portal, estou de volta para tentar passar para vocês dicas para criação de layouts de site pelo Photoshop. Iremos durante as próximas semanas criar um layout completo e exporta-lo para html trabalhando somente com DIVS e CSS.
Espero que curtam o trabalho.
Bom para começar iremos criar um novo documento com 778px x 600px. Após iremos criar um quadrado com cantos arredondados. Este quadrado deverá ter 23px por 23px conforme a imagem abaixo. Escolha uma cor de preferência para fazer o preenchimento.

Após iremos duplicar a layer do quadrado acima e deixaremos um espaço duplo entre um quadrado e outro, faça isto até ter 16 quadrados conforme a figura abaixo:

Agora iremos utilizar algumas imagens para criar um efeito legal no nosso layout.
Utilize as imagens abaixo:




Agora voltaremos ao arquivo. Vamos selecionar os quatro primeiros objetos e agruparemos em um só conforme a figura abaixo:

Repita a operação para os outros grupos de quadrados, sempre de 4 em 4.
Agora, iremos inserir a primeira imagem no nosso layout. Após colocaremos ela em cima da layer onde se encontra o nosso primeiro grupo de objetos conforme a figura abaixo.

Vamos colocar a imagem em cima dos quatro primeiros quadrados para criar uma máscara e assim termos um efeito bem legal. Para criar uma máscara clique com o botão direito na layer da imagem e clique em criate clipping mask:

A imagem ficará assim:

Repita a operação para todas as figuras até chegar ao resultado abaixo:

Agora vamos para o passo final desta primeira parte que é a criação de um menu lateral.
Para começar crie um retângulo conforme a figura abaixo (com os cantos arredondados) após vamos preencher ele com a cor #CACACA.

Vamos então colocar uns efeitos nele, para não ficar este cinza chapado.
Para começar vamos colocar um pequeno gradiente.
Trabalhei neste gradiente com um angulo de 51º para dar um efeito mais interessante.
A primeira cor é #A3A0A0, a segunda e a terceira são #CACACA:

Agora vamos inserir o logotipo, no caso deste layout eu inseri o logotipo do MXSTUDIO, mas vocês podem inserir qualquer um.

Vamos criar o menu, escrevam o seguinte texto conforme a imagem abaixo
HOME
SERVIÇOS
CLIENTES
DICAS
LINKS
CONTATO

A cor escolhida foi #143C8F, a fonte SWISS721CNBT e um espaçamento de 24pt entre as palavras.
Para terminar vamos criar um efeito para separar as linhas. Crie um retângulo branco conforme a figura abaixo:

Após vamos colocar uma transparência de 15% no retângulo, copie a operação para todos os itens do menu até chegar ao resultado abaixo:

Segue o PDS para download, espero que vocês tenham gostado. Na próxima etapa estaremos fazendo o corpo do site e a exportação para montagem do arquivo em HTML no Dreamweaver.
Link para o PDS
Abraços e até a próxima.

Autor: Juliano Haussen- Administrador do Portal MXSTUDIO

photoshop

                                                              photoshop

Adobe Photoshop é um software caracterizado como editor de imagens bidimensionais do tipo raster (possuindo ainda algumas capacidades de edição típicas dos editores vectoriais) desenvolvido pela Adobe Systems. É considerado o líder no mercado dos editores de imagem profissionais, assim como o programa de facto para edição profissional de imagens digitais e trabalhos de pré-impressão.
Sua mais recente versão é apelidada como Adobe Photoshop CS5 (sigla cujo significado é Creative Suite 5, correspondente à décima segunda edição desde seu lançamento), disponível para os sistemas operativos Microsoft Windows e Mac OS X. Pode ser rodado também no Linux, através da camada de compatibilidade Wine. Algumas versões anteriores foram lançadas também para IRIX, mas o suporte a esta versão foi descontinuado após a versão

                                             Grandezas vetoriais

Para serem caracterizadas, além de um módulo (um valor algébrico), seguido de uma unidade de medida, necessitam de direção e sentido (definido pelo sinal - ou + ). Exemplos: força, aceleração, velocidade, torque, quantidade de movimento, deslocamento, indutância, campo elétrico, campo magnético.

                                                O  CorelDraw


O CorelDRAW é um programa de desenho vetorial bidimensional para design gráfico desenvolvido pela Corel Corporation, Canadá. É um aplicativo de ilustração vetorial e layout de página que possibilita a criação e a manipulação de vários produtos, como por exemplo: desenhos artísticos, publicitários, logotipos, capas de revistas, livros, CDs, imagens de objetos para aplicação nas páginas de Internet (botões, ícones, animações gráficas, etc) confecção de cartazes, etc.