• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Weasel

Desenhar um layout no photoshop

8 mensagens neste tópico

Pessoal já vi montes de tutoriais e explicar como fazer um weblayout no photoshop e os resultados são muito bons devo dizer, mas a minha dúvida é, como passamos depois do photoshot para html ?!

Por exemplo este é feito em Photoshop:

56.jpg

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

É bastante fácil mas trabalhoso.

Como tens muitas imagens cujo efeito não pode ser simulado em css, tens de copiar todas as imagens cujo efeito não possa de forma alguma ser feito em css ou outra linguagem de programação.

Quando já tens as imagens, é só colocá-las a repetirem-se ou não, nas posições que queres, etc.

Isso é programação básica....

Espero ter-te esclarecido a tua dúvida ;)

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu acho que sim, mas a minha dúvida principal era, isto não vái deixar o site muito pesado ? é que é (quase) tudo na base de imagens...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Vai mas tu é que escolhes o layout que queres fazer, e tens de ter em conta o número de imagens....

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Por exemplo, a imagem que apresentei em cima, tem aquela parte de cima enorme (que deve demorar uma eternidade a carregar) e depois temos as borders e aquelas imagens em baixo...vai ficar pesado...acho eu, ou existe maneira de menorizar isso ?

Cortar as imagens ás fatias? talvez... nem sei nunca fiz disto, mas gostava de começar pq os layouts ficam outra coisa.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Como diz aqui (@work) um gajo, é "jpegML"! Ahah

ROFL!

Em relação ao tópico, o Photoshop tem qq coisa para exportar para HTML. No entanto, não sou muito adepto desses designs.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Para tirar as teimas e dúvidas aqui vai:

Photoshop

1) crias o teu projecto com as layers que quiseres

2) com a slice tool recorta toda as áreas a q correspondem botoes, menus, imagens, etc.

3) file > save for web

4) no quadro que surge, podes aqui comprimir em tamanho de memória o tamanho de cada slice.

    por exemplo:

    selecionas uma slice que é uma imagem q ocupa 1000kb em .jpg

    e no quadro de opcções que tens ao lado direito podes reduzir de 0-100% a qualidade,

    ou o tipo de formato (.jpg, .gif, .png),

    ou aplicar um blur de 0-100%

    ou aplicar uma cor na Matte (fundo) de cada slice (por exemplo queres branco por baixo de um .png)

    podes ir sempre pre-visualizando o resultado no IE ou FF

    Feito isto ---> Edit in Image Ready

Image Ready

    aqui teras acesso ao .psd como se tivesses no photoshopa

    a diferença é que aqui manipulas as slices

    podes criar acções sobre as slices que criaste no photoshop, elas irão todas aparecer agora, já

    compridas, no imageready. vais selecionando cada slice e é aqui que se aplica acções às slices,

    o que isto se traduz em botoes, menus, hyperlinks, animações, etc...

    no final de tudo, tens de ir a file > Output Settings

    onde te aparece o quadro que envio como anexo "output settings.jpg"

    ...onde te gera XHTML e/ou CSS !!

    Experimenta. Não ficará pesado e realmente há imensos sites assim.

   

    http://www.poopinmymouth.com/ 

   

   

   

   

ImageReady - trabalhas sobre as slices, onde crias acções para os botões, hiperligações, animações, etc. No final vais a Output Settings...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora