Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Kay_

[Resolvido] Transparência em imagens PNG e GIF

Recommended Posts

Galera é o seguinte, tou fazendo um site, e tou precisando salvar quase que exclusivamente imagens transparentes, porém todas as imagens que salvo, da mais simples a mais complexa, a gif fica com borda serrilhada, só a png que fica boa. Realmente a gif não presta para imagem transparente. Ou eu que tou fazendo algo errado.

 

É o seguinte, tenho a imagem no photoshop, aí tem só a imagem na layer e o fundo nao tem nada, é transparente, Aí eu aperto ctrl+shit+s, aí abre a caixa lá para salvar, eu só coloco como .gif e pronto salvo. Nem mecho em configuração nenhuma. Ta certo?? Vlwsss

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi Kay_ ;)

 

Tente usar o mínimo possível de imagem transparente em seus sites, por alguns navegadores mais antigos (embora muito usados ainda) não suportarem a transparência (como o IE6).

Mas se você vai optar por uma transparente, aperta Alt+Shift+Ctrl+S (Save for Web) e escolha as opções que achar melhor, com a qualidade da sua preferência. Geralmente imagens complexas em gif ficarão serrilhadas, já em PNG não, por isso a melhor qualidade. Acredito que em GIF você consegue um melhor resultado usando Fireworks, mas não sei exatamente como. Qualquer coisa eu te mando uma mensagem falando :)

 

Uma dica: veja se não dá para fazer um JPEG simples mesmo, é bem mais leve e suportado por todos navegadores, com o fundo na cor que estará no background do seu site. Mesmo que seja um degradê, vai de posicionamento no CSS mesmo :)

 

Um abraço

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa camila vlws. Eu já tentei fazer por jpg ;/ mais infelizmente iria sair muito grande, pois se trata de menus com fundo sem ser uniforme, e muitos detalhes. Para ser por jpg eu teria que recortar inteiro, já por png eu recortei somente as correntes, 1 parte do menu e pedaço da madeira. Ficou muito menor. Falando assim não dá para intender, mais depois eu posto aqui o link do layout para você intender o que eu tou falando.

 

Mais o unico navegador que nao suporta transparencia de png é o ie6 né? e para ele tem um hack que arruma isso.

 

Mais vlwss aí pela resposta. Me tira uma outra dúvida, eu fiz o layout menus, um monte de coisas com a letra arial no photoshop, pensando que ia ficar igual no html. Porém o arial do html tá diferente do do photoshop. Tem como deixar o arial do html igual ao do photoshop?

 

no photoshop eu usei uma arial, regular, 12pt, strong.

 

Vlws tou no aguardo ;)

 

 

Opa, acabei de testar com o save for web, porém nao ta saindo transparente, o fundo ta saindo branco agora

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ois!

- No Save For Web você tem que escolher a opção Gif ou PNG (o que preferir) e deixar marcada a checkbox Transparency, senão vai ficar com fundo branco mesmo.

 

- Sobre a fonte: Existe uma opção no photoshop onde você seleciona o chamado anti-aliasing method. Segue a imagem abaixo para você ver onde ela fica.

Imagem Postada

No caso, até onde eu sei você consegue deixar as fontes no Photoshop igual a do html, e não o contrário.

Se você deixar em None, os textos ficarão exatamente como serão mostrados no html.

Se deixar Sharp ou qualquer outro, ficará diferente mesmo! O único browser que você poderá ver os textos em "Sharp" será o IE8, que lê os textos assim, mais "cheinhos". Não conheço hack que faça a fonte ficar em Sharp nos navegadores em geral, talvez seja bom você dar uma pesquisada nas sessões de css/html. Mas o padrão é None mesmo ;) Acredito que deixar o seu texto no layout sempre em None, no Photoshop, é o melhor caminho pois você vê exatamente como irá ficar

 

Um abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ahh simmm, vlwss camila ;)

então é isso mesmo, pq eu tinha colocado como strong. Como none fica igual ao html mesmo.

 

Ajudou muito ;) até mais

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.