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

Sign in to follow this  
Weasel

Desenhar um layout no photoshop

Recommended Posts

Weasel

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


Knowledge to the masses


Share this post


Link to post
Share on other sites
LuPereira

É 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.

Share this post


Link to post
Share on other sites
Weasel

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...


Knowledge to the masses


Share this post


Link to post
Share on other sites
LuPereira

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

Cumps.

Share this post


Link to post
Share on other sites
Weasel

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.


Knowledge to the masses


Share this post


Link to post
Share on other sites
djthyrax

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.


Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Share this post


Link to post
Share on other sites
magal

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...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.