[Resolvido] como fazer degrade com stripes para site

[Andrézone's 0]

Galera é o seguinte, não sei se a sessão correta é essa, se não for desculpe.

 

to fazendo um site e ele vai ter um degrade na parte de cima escura e na de baixo mais clara, só q na parte de cima tem uns stripes e na borda do site um sombreamento... vide imagem abaixo. Eu ja tenho as imagens prontas, mas o cabeçalho novo é menor e na hora de cortar eu não to conseguindo acertar os degrades, vide segunda imagem.

 

Alguem pode me auxiliar?

 

IMAGEM PERFEITA

 

 

MINHA IMAGEM QUEBRANDO

http://img243.imagevenue.com/img.php?image...eu_122_32lo.jpg

[coxao 5]

você montou no Photoshop.. usou slice e exportou ???

pelo que eu entendi esse "erro" está acontecendo depois de exportar e não dentro do PS ..certo ???

 

não recomendo esse tipo de método, o Photoshop polui o código e algumas vezes por serem tabelas acontecer algum tipo de erro !!

 

seria isso ?

[Progress 2]

Então, se você quer ajustar as tonalidades do gradiente basta você customizar no arquivo em que o criou, deixando certa parte mais escura ou mais clara, arrastando os baldinhos.

 

Agora com relação a sobreposição de imagens, se você está exportando o site pronto do Photoshop, não tenha dúvidas que aí está o problema, o código exportado do Photoshop é super poluído, cheio de coisas inúteis que acabam atrapalhando o site todo, neste caso recomendo que apenas exporte as imagens do Photoshop, e monte o código na "unha". Caso você esteja montando o site na "unha" mesmo, você precisa ajustar essa imagem que está sendo sobreposta através dos códigos.

 

Falou. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Andrézone's 0]

não gente eu não to exportando pelo photoshop, eu peguei uma imagem em jpg pronta com dimensões maiores e queria diminuir pra ajustar ao meu site.

eu até diminui como vcs viram, mas eu "cortei" a imagem por isso q quebrou

 

imaginem o seguinte, a imagem tem 200px de altura com o degrade e ta tudo certo, ai eu vou la e corto pra 100px de altura, qdo eu juntar vcs vão concordar comigo q vai faltar ai 100px de degrade pra ficar certinho né? eu poderia ao invés de cortar, simplesmente "achatar" mas ai o stripe vai ficar distorcido...

 

será q entenderam agora?

obrigado pela ajuda

[JohwMatos 4]

acho q intendi...

 

Só q dai nesse caso é melhor fazer um stripe menor que depois no dreamweaver você irá repití-lo inúmeras vezes (q nãos ei como o fazer)

 

 

Basta você fazer um novo documento de 5 x 5 px, e com a ferramenta Pencil Tool (Lápis) no tamanho de 1px fazer uma linha diagonal como na imagem:

 

 

e então basta salvar a imagem em .gif e depois repití-la no fundo com o dreamweaver.

 

 

O degradê você faz uma imagem por trás dos stripes, só com o degradê mesmo...

 

 

____________________________

 

 

Ou então você faz o seguinte:

 

 

Você faz o processo anterior, pórem após fazer a linha em diagonal, você vai em Edit > Define Pattern e salva com o nome que você quiser.

 

 

 

 

Agora você abre um novo arquivo com 5 pixels de largura, e da altura que você quer seu site (Ex.: 600 px).

 

Então você faz o seu degradê com a ferramenta Gradient Tool, e então com a ferramenta Pattern Stamp Tool ( Fica por trás da Clone Stamp Tool, basta clicar com o botão direito na clone, para achá-la) e com as configurações selecionando o sprite que você acabou de salvar,

 

 

Você pinta toda a imagem com este pattern e então salva em .jpg ou .gif e depois repete a imagem horizontalmente com o dreamweaver...

 

 

Espero que ajude.

[Progress 2]

Veja este tópico amigo:

http://forum.imasters.com.br/index.php?showtopic=310741

 

Veja também este tutorial:

http://guilemos.wordpress.com/2008/10/13/t...fundo-listrado/

 

No caso do gradiente do background, basta deixar uma imagem separada, apenas de background do site, e faça as linhas diagonais separadas, exportando com transparência (.png ou .gif).

 

Falou, qualquer dúvida é só postar ae. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Andrézone's 0]

a questão não é só fazer o degrade e os stripes tem tb a sombra da borda q não sei como faz essa fininha...

 

pra ficar melhor vejam o q acontece na real:

 

Site Aqui

[JohwMatos 4]

Você pode postar o link deste site q tem a "imagem perfeita" que você se refere para eu ver uma coisa?

 

 

[Progress 2]

Cara, acredito eu que não seja mais problemas relacionado com Photoshop, aquela parte sendo sobreposta é falta de ajustes no código.

 

Não estou entendendo direito o que você quer, o que está acontecendo, sua imagem está se repetindo normalmente, o problema é que alguma parte ali de dentro do site está invadindo e sobrepondo o background.

 

Se for a parte branca que está faltando do background é só repetir a imagem no código.

[JohwMatos 4]

Cara o problema é q esta sua imagem

 

 

está mal posicionada, fazendo com q os sprites dela não batam com a outra imagem que está sendo repetida no fundo.

 

 

além do que não é bom que você faça uma imagem assim inteira, faça duas, uma para a esquerda e outra para a direita, sem esse branco no meio...assim será mais fácil de você posicioná-las no local correto...