[Photoshop] Seamless Noise background website

[johan2009]

Beste allemaal,

Ik ben bezig met m'n portfolio-website. Nu kom niet uit het volgende;

Ik heb verschillende achtergronden via CSS toegekend. Ik wil de verschillende achtergronden in Photoshop slicen naar een kleine/smalle slice. In de browser ziet het er niet uit. Ik kan duidelijk zien dat een achtergrond een patroon is. Heb al verschillende breedtes/ lengtes als slices gebruikt maar het blijft er niet uitzien.

Afbeelding van ontwerp. Website op Test-server.

Hoe kan ik het best deze achtergrond in Photshop slicen zodat het geen patroin in Browser lijkt?!

Trouwens iets totaal off-topic, maar ik wil het delen met Mac-gebruikers. Imageoptim is een goede tool om png-, jpg-, gif-afbeeldingen zonder kwaliteitsverlies in bestandsgrootte te verkleinen. (Bij mij soms wel tot 40% van Photoshop slice

[Gizz]

Als ik je background pak en 10x naast elkaar zet in PS wordt het ook lelijk. Er lijkt me gewoon rotzooi in je slice te zitten. Het is ook een beetje alsof het eerst als jpeg opgeslagen is en daarna als png, rare vlekken/compressie.

Maak eens een nieuwe 8-bits gradient in PS en sla die meteen als png op?

Je ontwerpafbeelding ziet er iets beter uit, maar die heeft ook vlekken voor de jpeg-compressie.

[cellcote]

Ik zou inderdaad oppassen met je tool te gebruiken. Het geeft zichtbaar kwaliteitsverlies.

[johan2009]

Haha, ik denk dat jullie de Noise-filter bedoelen! Ik heb gaussian-noise er opzettelijk inzitten. Deze wil ik er juist in. Ik wil die korrelige achtergrond, maar deze is moeilijk te slicen. Heb al gezocht op technieken voor "seamless pattern" nog niet iets bruikbaars gevonden.

[ Voor 12% gewijzigd door johan2009 op 31-12-2010 17:20 ]

[Gizz]

Kies eens uniforme noise in plaats van gaussian? Uniform is, zoals de naam al zegt, gelijkmatig verspreidt zodat je geen gekke banding krijgt als je een stukje uitsnijdt en herhaalt. Als de ruis niet gelijk verdeeld is krijg je ophopingen of juist leegtes van ruis die heel erg opvallen als je het 50x naast elkaar ziet.

Ik vind het verder lelijk trouwens, maar het is jouw site

[ Voor 21% gewijzigd door Gizz op 31-12-2010 17:29 ]

[Dark Blue]

Nadat je de slice hebt gemaakt, kun je die ook nog een keer openen en dan met het filter > Other > Offset het plaatje opschuiven tot je het begin en het eind in beeld hebt staan. Daar kun je de storende herhaling dan goed zien. Daarna pas je het filter nog een keer toe zodat je weer 50% opschuift naar de originele positie

[johan2009]

Allemaal gelukkig nieuwjaar!

@Dark Blue en Gizz; Bedankt voor jullie advies. Filter > Offset werkt het best.

Ik heb een erg omslachtige methode om het toch goed voor elkaar te krijgen. Eerst in Pixelmator gradients met Noise maken, dan Offset 50% in Pixelmator. Opslaan als TIFF inporteren in Fireworks, slicen, exporteren naar PNG24, openen in ImageOptim, comprimeren in ImageOptim en klaar is Clara.

[Dark Blue]

Wow, dat klinkt als een flinke workflow. Weet je zeker dat je het effect niet kunt doorzien, en dat je het gewoon zelf in Photoshop kunt bereiken? Dan kun je nog meer finetunen ook.