Criando layouts no Photoshop Parte 2
E ai galera, com o novo portal a gente se empolga e começa a escrever sem parar. Quero retomar um artigo que foi feito o ano passado, faz mais de um ano que foi ao ar mas que não foi finalizado. Peço desculpas pela demora, mas agora vamos retomar o trabalho.
Este era o link do artigo: http://www.mxstudio.com.br/photoshop/criando_layouts_no_photoshop_parte_1/
A primeira parte do layout terminou desta maneira:
Agora vamos recomeçar o trabalho criando o conteúdo do corpo para após fazer a exportação.
Bom para começar peguei uma imagem qualquer da internet.
Após criei um retângulo com o mesmo tamanho da imagem, utilizando o rounded rectangle tool, e com cantos arredondados com radius 5px.
Vamos aplicar o efeito para colar a imagem dentro do retângulo e deixar ela com os cantos arredondados, para isso precisamos colocar a layer da imagem sobre a layer do retângulo.
Agora vamos clicar com o botão direito sobre a imagem e aplicar a máscara.
Pronto, o resultado da imagem é este:
Agora vamos inserir um texto no lado, para criar o texto, utilizei o site www.lipsum.com
Criamos um título e inserimos o texto, assim preenchemos uma parte de nosso layout.
Agora vamos para parte final antes de exportarmos nosso layout. Vamos criar algo para a parte de baixo do site, simplesmente vou inserir três imagens e colocar um texto de serviços nelas.
Bom, o primeiro passo foi inserir uma das imagens, após eu criei um retângulo azul no topo e escrevi um dos textos, também criei um retângulo na base pois a imagem ficou meio solta. No topo da imagem eu coloque o canto arredondado para acompanhar o layout.
Agora vou inserir as outras imagens, colocar no mesmo tamanho mudando somente o texto. No final o resultado será este:
Pronto, o layout tá pronto, não ficou muito bonito, mas a idéia do artigo é mostrar a exportação para o Dreamweaver.
Então vamos lá.
Primeiro vamos pegar a ferramenta Slice Tool 
Vamos começar a fatiar de acordo com o layout do site, procure fatias as partes do site de maneira uniforme, respeitando todos os aspectos do site.
Veja na imagem que cuidei para fatiar a parte do logotipo e todos os menus individualmente assim faremos com toda a estrutura do layout.
Finalizando o fatiamento, ele ficará assim:
Agora vamos a exportação. Primeiro vamos em file/save for web:
Na tela nova que abriu temos todas as definições de otimização do site, podemos por exemplo pegar determinados slices e escolher se eles serão exportados como GIF ou JPG, podemos também aumentar a qualidade de imagem de determinados slices e diminuir os que não tem tanta importância.
Repare na imagem que selecionei somente o logotipo.
Conseguimos assim editar o que vai ser GIF e o que vai ser JPG bem como a qualidade.
Agora antes de exportar vamos configurar algumas coisas, não deixe nada selecionado e clique na seta que se encontra no canto direito.
Clicando na seta vá em edit output settings.
Irá abrir uma outra tela onde vamos fazer umas configurações para facilitar o trabalho do site. Vamos conseguir já padronizar com estilos e trabalhar com DIVS ao invés de tabelas! Isso mesmo, fica tudo pronto para facilitar nossa edição em um editor de html.
Nesta primeira tela vamos marcar output XHTML e indent: none.
Na segunda tela vamos marcar para gerar um CSS por ID, no editor de html isso será muito útil para edição.
Nesta terceira tela, seria somente para inserir um background no layout, o que não é nosso caso, então vamos passar para próxima tela.
Na tela de cima, podemos criar um nome para os arquivos de imagens que vão ser exportados. Neste caso, não vou dar nome.
Pronto, agora é só dar um ok e salvar.
Não esqueça de marcar para salvar html e imagens, o Photoshop criará uma pasta para as imagens e um arquivo html.
Algumas considerações:
É interessante tirar os nomes dos botões e todos os textos e colocar eles no editor de html com as imagens como background. Fazendo todas as edições de texto no editor de html.
Abrindo o editor de html, vocês verão que o Photoshop criou todas as divs e ids para elas, com um css interno no html. O aconselhável é transforma em css externo e trabalhar com ele em todas as páginas.
Arquivo do tutorial para download.
Bom, espero que tenham gostado do artigo, nos próximos estarei mostrando alguns outros efeitos do Photoshop para otimizar a criação de layouts.
Abraços
Juliano Haussen
Administrador e colunista do Portal MXSTUDIO.
Dúvidas, acessem nosso fórum.
Escrito por Juliano Haussen
on abril 14, 2008. Arquivado em Photoshop.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Oi..
A minha duvida a respeito do photoshop e de quaismsão os primeiros passos as primeiras mudanças que posso começar a fazer com as fotos, e quero saber tambem se posso usar imagem feitas em photoshop no cOrel Draw ja que estão relacionados com imagens.
Olá Rafaela, você pode sim usar imagens do Photoshop no Corel Draw, formatos PSD são importados facilmente no Corel Draw e em camadas ainda por cima, caso você queira, é você que escolhe na hora de importar e exportar pelo Corel.
O Corel importa e exportas em várias extensões, breve um artigo sobre sua dúvida.
Abraços, até a próxima.
e muito legal nao tenho palavras para dizer
BjO
em primeiro lugar sou sua fa, a minha duvida eh vou fazer um banner com imagens com formatos difenciados, como devo fatiar.
Muito legal, ficou bem estilosinho.
Agora, poderia me passar o site aonde pega estas imagens legais? :] xau
Antes de mais nada, obrigado por ensinar esta tecnica. O problema procede quando eu tenho criar “Rollover Image” no menu ele não funciona, mas porque?
Bem legal!
@Gian: Procura no Google Images, usando a palavra-chave: “Business”
como eu faço isso nas minhas fts?
sadofksdokf;;,muito bommmmmmmm
Eu fiz tudinho, só que não apareceu o HTML, eu salvei como imagens e arquivo html
Parabéns pelo tutorial, Juliano.
Me ajudou muito. Eu tenho bons conhecimentos em HTML e CSS nos padrões Tableless, mas tinha muitas dúvidas quanto à transformar uma imagem com o layout do photoshop, transformando-a no site final. Gostei muito.
Parabéns pelo site, Não o conhecia, mas a partir de agora, serei visitante constante.
Abraço
Primeiramente gostaria de dizer que o tutorial foi show! Mas estou com um probleminha… No final da 1ª aula, ele fala assim “Na próxima etapa estaremos fazendo o corpo do site e a exportação para montagem do arquivo em HTML no Dreamweaver.”. No final da segunda aula ele não mostra como montar o arquivo em HTML do Dreamweaver… Agora, estou me batendo com o dreamweaver… Eu já upei em um site para ver o resultado, mas quando eu clico nas abas que criei não aparece nada… Não dá pra clicar… Alguem faz um tuto de como montar o arquivo em HTML do dreamweaver por favor!
achei muito bom o tutorial! aprendi muitas coisas novas que me serão úteis futuramente.
beijo!
cade a terceira parte?