Diretor editorial: Alessio Fon Melozo Coordenador editorial: Hudson de Almeida Coordenador multimídia: Tiago Reis REDAÇÃO Editor-chefe: Heinar Maracy Editor: Sérgio Miranda Editor de arte: Luciano Hagge Assistente de Arte: Stella Dauer (estagiária) Revisão e checagem: Sirlene Farias Capa e embalagem: Núcleo de arte MULTIMÍDIA Seleção de conteúdo: André Ricardo COLABOROU NESTA EDIÇÃO Juliano Haussen, Rafael Tatu PUBLICIDADE Cassetari Assessoria em Comunicação ATENDIMENTO AO LEITOR – SUPORTE Horário de atendimento: das 9 às 18h e-mail: atendimento@digerati.com.br, suporte@digerati.com.br tel.: (11) 3217-2626 EDIÇÕES ANTERIORES Atendimento a jornaleiros: (11) 3217-2606 Canais de vendas: (11) 3217-2600 e-mail: vendas@digerati.com.br fax: (11) 3217-2647 Site: www.lojadigerati.com.br CONTATO Redação: R. Haddock Lobo, 347, 12º andar São Paulo – SP, CEP 01414-001 tel.: (11) 3217-2600, fax: (11) 3217-2617 Publicidade: (11) 3217-2719 e-mail: publicidade@digerati.com.br Representante comercial nos EUA: USA-Multimedia tel.: +1-407-903-50000, Ramal: 222 e-mail: info@multimediausa.com Marketing: (11) 3217-2600 e-mail: marketing@digerati.com.br Circulação: (11) 3217-2654 e-mail: circulacao@digerati.com.br
Editorial O Photoshop é considerado o melhor software de edição de imagens no mercado. Seu poder de edição vai desde trabalho em imagens digitais até trabalhos de pré impressão. Originalmente criado para ser utilizado somente no Mac, logo começou a também rodar em outros sistemas operacionais, sendo compativel também com Microsoft Windows. Apesar de outras ferramentas facilitarem a criação de layouts para web o Photoshop se mostra uma ferramenta poderosa e nas últimas versões se candidatou a principal ferramenta para esta função. A facilidade de criação aliada ao poder dos efeitos criados pelo Photoshop permitem aos usuários criações elaboradas, modernas e dinâmicas, que aliadas a outras ferramentas da Adobe (Flash, Fireworks, Dreamweaver) podem chegar a resultados excelentes. Nesta revista, procuramos em duas matérias mostrar esta capacidade do Photoshop. Na primeira delas, trabalhamos com a criação completa de um layout utilizando esta ferramenta. A criação de um site passa por diversas etapas, desde entrevista com o cliente, elaboração de briefing, até a criação de um layout em si. Para a criação do layout devemos sempre levar em conta alguns aspectos fundamentais, como fontes, cores, etc, nesta matéria mostraremos como desenvolver um layout com harmonia e sempre tomando muito cuidado nas escolhas destes elementos. Além disto estaremos vendo nesta revista uma ferramenta muito importante do Photoshop: o Brush. Nesta matéria veremos como utilizar os brushes, suas funcionalidades, caracteristicas e como criar seus proprios brushes. Então, bom divertimento e estudo, vamos nesta edição especial entrar com tudo no maravilhoso mundo do Photoshop.
Juliano Haussen é um dos criadores do site MXStudio www.mxstudio.com.br DESIGN MAGAZINE ISSN 1679-2211 é uma publicação da Editora Digerati. Distribuidor exclusivo para todo o Brasil: Fernando Chinaglia Distribuidora S.A. Tel.: (21) 3879-7766. Distribuidor para Europa e América Latina: Malta Internacional Tel.: +55 11 3284-6444 Impressão: Anhanguera LTDA DIGERATI É UMA EDITORA DO GRUPO DOMO
Presidente: Alessandro Gerardi Conselho editorial: Alessandro Gerardi, Luís Afonso G. Neira, Alessio Fon Melozo, William Nakamura
Índice
04……Fazendo seu site no Photoshop 10……Aprenda a trabalhar com brushes 14……O que tem no CD 3 Design Magazine Especial - Photoshop
DESIGN#004_photoshop.indd 3
03.04.07 19:54:03
Fazendo seu site no Photoshop A
criação de layouts de sites implica em vários conhecimentos. Encontramos na internet milhares de micreiros que trabalham com a idéia de que, entendendo somente de ferramentas, já podemos sair vendendo sites. Não é bem assim que funciona. Para criação de um site, antes de mais nada, devemos ter conhecimentos sobre design, sobre as principais teorias em montagem de endereços web e sobre etapas de criação. Além disso é importante ter noções de marketing e publicidade.
Bom, então vamos começar. Vamos criar um arquivo novo, que deverá ter 778px x 430px (tamanho geralmente utilizado para serem visualizados em monitores com 800px x 600px).
As etapas de criação de um site são:
1
2
3 4 5 6 7
Briefing – No atendimento ao cliente é feito o briefing, onde todos os dados relativos à empresa e à execução do site serão coletados. Esta etapa é muito importante, pois, com os dados coletados corretamente, poderemos ter uma noção geral das necessidades do cliente, do perfil da empresa, da função do site, da concorrência, etc. Análise/Proposta – Etapa em que analisamos o briefing, as necessidades do cliente, as pesquisas, etc., e assim montamos uma proposta para entregar ao cliente. Nesta proposta, colocamos o conteúdo do site, horas a serem gastas no desenvolvimento, programação a ser utilizada, enfim, descrevemos o projeto passo a passo. Além disso, a proposta é onde colocamos o preço do serviço e o prazo para entrega do site.
Agora, iremos fazer a primeira parte. Para começar, vamos criar duas barras laterais. A primeira será um pouco maior e será da cor #3366cc. A segunda terá um tom cinza fraco #cccccc.
Protótipo – Nesta etapa, apresentamos um protótipo do site, que pode ser somente um wireframe (um esqueleto do site, simplificado) ou um layout inicial. Produção – Etapa de desenvolvimento do trabalho em si. Produção do site, imagens, textos, programação e navegação do mesmo. Testes – Esta etapa é fundamental, pois analisamos os erros do endereço, checamos se está tudo funcionando, se as funções estão de acordo com as necessidades do cliente, etc. Publicação na internet – Agora, é só colocar o site no ar. E.... – Agora, podemos analisar vários fatores com o cliente, como manutenção do site, divulgação, etc.
A seguir, vamos inserir a imagem do topo. Deixe a imagem do topo com um tamanho agradável. Para ficar como a figura abaixo, use 51,5px x 77,3px.
Nesta matéria, iremos criar o layout de um site utilizando a ferramenta Photoshop, e passaremos diretamente à terceira etapa através de um passo a passo muito simples, que finalizará com a exportação do layout final para HTML, formato em que poderá ser editado em ferramentas especificas. Nesta matéria, utilizaremos o Dreamweaver para fazer a edição. 4 Design Magazine Especial - Photoshop
DESIGN#004_photoshop.indd 4
03.04.07 19:54:07
p
por Juliano Haussen
Agora, iremos começar a dividir o conteúdo do nosso layout. Vamos criar mais uma barra lateral cinza do mesmo tamanho da anterior, para colocar depois da foto, e uma barra horizontal em que a altura tenha o mesmo tamanho da largura da barra vertical.
Vamos criar um efeito legal nesta foto, para ela ficar em um tom azul seguindo o padrão da barra lateral. A primeira coisa a fazer é criar um retângulo da mesma cor da barra e do mesmo tamanho da foto.
Agora, vamos criar um menu. Neste layout, estamos usando um menu vertical, muito simples e fácil de ser editado. A fonte utilizada será FUTURA MD BT (em anexo no CD desta edição), de cor #003366 e tamanho 15pt.
Em seguida, iremos colocar a layer da foto para cima da layer deste retângulo criado. Depois disso, trocaremos o blending da foto de normal para overlay. O resultado será o da imagem abaixo. Observe na camada da foto que trocamos para overlay ao lado do painel opacity.
Vamos criar uma linha lateral fina de cor cinza #cccccc. Esta linha será utilizada para fazer a separação dos itens do menu – vamos organizá-lo de uma maneira linear, para que fique em harmonia com o restante do site. Esta linha após a criação dos outros itens do menu será duplicada. É importante que elas fiquem bem alinhadas e com a mesma distância entre elas. Um dos elementos mais importantes para a criação de um bom layout é a boa distribuição dos itens. 5 Design Magazine Especial - Photoshop
DESIGN#004_photoshop.indd 5
03.04.07 19:54:13
Fazendo sites
Agora, vamos criar o restante do menu. A maneira mais fácil de fazer isto é duplicando as layers. Vamos criar o menu com os seguintes links: • • • • • • • •
Vamos colocar o logotipo e um texto de boas-vindas no topo do site. Os textos estão com a mesma fonte do menu, porém o tamanho da primeira frase é de 30pt, e o da segunda parte é de 40pt.
HOME QUEM SOMOS SERVIÇOS PRODUTOS CLIENTES NOTÍCIAS LINKS CONTATO
É importante alinhar todo o menu para ficar organizado.
Vamos criar um texto de apresentação que irá embaixo do texto de boas vindas. Uma dica utilizada para criação de textos aleatórios (ou seja, para serem substituídos depois) é o site www.lipsum.com, que é utilizado para criação rápida de textos.
Vamos criar uma barra da mesma cor abaixo do menu, para fecharmos esse campo e separá-lo do restante do layout. Iremos diminuir um pouco a largura da linha para ficar um pouco mais elegante. Não podemos esquecer de dar o mesmo espaço no fim das linhas do menu para continuar mantendo a harmonia. Estamos com metade do layout pronto, falta pouco agora. 6 Design Magazine Especial - Photoshop
DESIGN#004_photoshop.indd 6
03.04.07 19:54:19
A fonte utilizada foi Verdana, com tamanho 10pt e cor cinza. #cccccc. Um elemento importante que devemos sempre colocar em nosso layout é um campo de busca. Vamos criar um retângulo para inserir este campo de busca rápida.
Pronto, terminamos o que pode ser considerado o topo do site. Agora, vamos começar a trabalhar no corpo dele, separando o conteúdo em três grupos distintos. Para começar, é preciso criar a área onde serão postadas as notícias. Vamos definir um padrão para os títulos, que será usado ainda nos outros dois campos do site.
Com o retângulo criado, vamos inserir o espaço para busca, de uma maneira bem rápida. Primeiro, criamos um texto chamado busca. Em seguida, inserimos um retângulo branco para dar uma idéia de onde será o campo de busca e um botão de OK.
Utilizamos a mesma fonte (Futura MD BT) tamanho 15pt para este título, colocamos-na centralizada e inserimos duas linhas, uma em cima, outra embaixo, para determinar o local do titulo. O próximo passo é definir o texto que irá no espaço de notícias. Mamos novamente recorrer ao texto falso para isto.
v
7 Design Magazine Especial - Photoshop
DESIGN#004_photoshop.indd 7
03.04.07 19:54:25