Flippe bakgrunn for hver repetisjon nedover?

[Keiseren av Grønland]

Jeg har en treplatebakgrunn på www.undervisningsbyrået.no som repeteres sideveis.

 

På skjermer med høyere oppløsning enn 1200px i høyden, vil den kappes brått av mot det hvite.

 

Problemet er ikek å repetere bakgrunnen nedover, men fordi bildet er så stort og komplisert, ser det ikke pent ut.

Hadde jeg derimot kunne snudd bildet opp ned, speilet det nedover, når det repeteres for andre gang, så hadde de identiske kantene møtt hverandre. Og dermed hadde bakgrunnen sett sømløs ut.

 

Er dette mulig?

[MiniGod]

Jeg har en treplatebakgrunn på www.undervisningsbyrået.no som repeteres sideveis.

 

På skjermer med høyere oppløsning enn 1200px i høyden, vil den kappes brått av mot det hvite.

 

Problemet er ikek å repetere bakgrunnen nedover, men fordi bildet er så stort og komplisert, ser det ikke pent ut.

Hadde jeg derimot kunne snudd bildet opp ned, speilet det nedover, når det repeteres for andre gang, så hadde de identiske kantene møtt hverandre. Og dermed hadde bakgrunnen sett sømløs ut.

 

Er dette mulig?

 

Det er ikke mulig å gjøre dette med HTML eller CSS. En mulighet er å lage bildet med dobbel høyde, og speilet bildet i nedre halvdel.

[agm]

Du kan flippe bilder, men neppe bakgrunnsbilder.

 

img {
       -moz-transform: scaleX(-1);
       -o-transform: scaleX(-1);
       -webkit-transform: scaleX(-1);
       transform: scaleX(-1);
       filter: FlipH;
       -ms-filter: "FlipH";
}

(Kilde: http://css-tricks.com/snippets/css/flip-an-image/)

[Keiseren av Grønland]

Da blir det et spørsmål om det lønner seg rent designmessig.

Skulle bildet vært dobbelt så høyt, snakker vi om en fil på over 300kb. Er det for mye for folk å laste ned den dag i dag?

 

 

Har folk kanskje noen forslag til andre kreative løsninger som kan brukes, for å gjøre overgangen fra bildet til bakgrunnsfargen mer gjevn?

[cbastus]

Bruk heller en sømløs bakgrunn ("tile pattern").

Prøv vedlagt bilde med:

 

html
{
   background-image: url("images/wood-pattern.jpg");
}

[Keiseren av Grønland]

Bruk heller en sømløs bakgrunn ("tile pattern").

Prøv vedlagt bilde med:

 

html
{
   background-image: url("images/wood-pattern.jpg");
}

Flisemønstere er ut.

Bakgrunner som dette er framtiden for all webdesign.

[cbastus]

Flisemønstere er ut.

Bakgrunner som dette er framtiden for all webdesign.

Regner med at du spøker, eller at jeg missforstår hva du mener.

 

Vedlegget er forøvrig ditt eget bakgrunnsbilde gjort om til en 1230x1100 sømløs bakgrunn.

Den erkomprimert til 100 Kb, om du vil optimere bildet ytterligere kan du gjøre H og B delelig med 4 (uten rest), dette har sammenheng med hvordan algoritmene brukt i bildekomprimering fungere.

[Keiseren av Grønland]

Flisemønstere er ut.

Bakgrunner som dette er framtiden for all webdesign.

Regner med at du spøker, eller at jeg missforstår hva du mener.

 

Vedlegget er forøvrig ditt eget bakgrunnsbilde gjort om til en 1230x1100 sømløs bakgrunn.

Den erkomprimert til 100 Kb, om du vil optimere bildet ytterligere kan du gjøre H og B delelig med 4 (uten rest), dette har sammenheng med hvordan algoritmene brukt i bildekomprimering fungere.

Jeg lurte på hvorfor du la bildet ved. Trodde det var en feil.

Hva er forskjellen på dette og det jeg bruker?

 

Hva har du gjort med det?

 

Edit:

 

Ser nå at det er foretatt noen endringer ja, men har du også vært ute med clone stamp tool her? Ser på planke to at det plutselig er en lys strek i midten blant annet.

 

Dette la jeg ikke merke til først, noe som kan være et godt tegn.

 

Edit 2:

 

Etter å ha sammenlignet nøye, ser plutselig ikke treverket naturlig ut lengre. Rillene kappes, fargene er ugjevne, og det ser voldtatt ut av photoshop.

Endret 18. januar 2011 av Ramius

[cbastus]

Ser nå at det er foretatt noen endringer ja, men har du også vært ute med clone stamp tool her? Ser på planke to at det plutselig er en lys strek i midten blant annet.

 

Dette la jeg ikke merke til først, noe som kan være et godt tegn.

 

Etter å ha sammenlignet nøye, ser plutselig ikke treverket naturlig ut lengre. Rillene kappes, fargene er ugjevne, og det ser voldtatt ut av photoshop.

Det var meningen å illustrere at hvilke som helst bakgrunn kan gjøres sømløs, og at dette er bedre enn å hacke til med diverse teknikker.

Husk forøvrig at bakgrunnen din ikke vil være det folk fokuserer på, den trenger altså ikke være perfekt så lenge den lager rett illusjon.

 

Helheten er mer enn summen av enkeltdelene.

 

Lykke til.

[Keiseren av Grønland]

Ser nå at det er foretatt noen endringer ja, men har du også vært ute med clone stamp tool her? Ser på planke to at det plutselig er en lys strek i midten blant annet.

 

Dette la jeg ikke merke til først, noe som kan være et godt tegn.

 

Etter å ha sammenlignet nøye, ser plutselig ikke treverket naturlig ut lengre. Rillene kappes, fargene er ugjevne, og det ser voldtatt ut av photoshop.

Det var meningen å illustrere at hvilke som helst bakgrunn kan gjøres sømløs, og at dette er bedre enn å hacke til med diverse teknikker.

Husk forøvrig at bakgrunnen din ikke vil være det folk fokuserer på, den trenger altså ikke være perfekt så lenge den lager rett illusjon.

 

Helheten er mer enn summen av enkeltdelene.

 

Lykke til.

 

Men hva slags metode brukte du for å gjøre den sømløs?

Hvis du forteller meg det, så kan jeg pusle med det selv, og bruke litt mer tid på å perfeksjonere resultatet.

[cruzader]

Da blir det et spørsmål om det lønner seg rent designmessig.

Skulle bildet vært dobbelt så høyt, snakker vi om en fil på over 300kb. Er det for mye for folk å laste ned den dag i dag?

Jeg bruker sette "fyfy" grensen på 150kb pr page-load, for mobil/ipad sider 50-70kb pr page-load.

Avhenger også av hvem siden er rettet mot, er det en helpdesk etc som brukers internt er ikke det så veldig nøye.

 

Men glorete sider lasset i unødvendig gfx lager jeg ikke.

Mange vil gjerne si kunden bør få hva (de mener) de vil ha, men skal være et produkt jeg kan sette navnet mitt bak også.

Endret 18. januar 2011 av cruzader

[Keiseren av Grønland]

Bruk heller en sømløs bakgrunn ("tile pattern").

Prøv vedlagt bilde med:

 

html
{
   background-image: url("images/wood-pattern.jpg");
}

Ønsker fortsatt å høre metoden du brukte for å få dette til.

[Merko]

Bakgrunner som dette er framtiden for all webdesign.

I lol'd :!:

 

Man kan vel delevis lett lage somløse 'tiles' i photoshop.

[weebl]

Bakgrunner som dette er framtiden for all webdesign.

 

 

Du mener støyete og uklare bilder?

 

 

[Keiseren av Grønland]

Bakgrunner som dette er framtiden for all webdesign.

 

 

Du mener støyete og uklare bilder?

 

Hvis du ser støy og uklarhet så må det nok være et problem på din side.

Bildet ble tatt med Canon L-optikk og på min Eizo-skjerm ser jeg ikke noe støy, og vertfall ingen uklarhet. Men JPG-kvaliteten er senket.

[weebl]

ja, komprimeringen av bildet spolerer det. du må oppe i 500-ish kb på et bilde før man får grei kvalitet i oppløsninger som det der, og da kan det lett laste treigt.

 

derfor vi framdeles tviholder på repeterende bakgrunner

[cbastus]

Bruk heller en sømløs bakgrunn ("tile pattern").

Prøv vedlagt bilde med:

 

html
{
   background-image: url("images/wood-pattern.jpg");
}

Ønsker fortsatt å høre metoden du brukte for å få dette til.

Heisann. Det var en blanding av en del forskjellige teknikker.

Normalt pleier jeg gjøre noe slikt:

1. Duplisere laget og speilvende det i retningen det skal repetere (slik at du faks får top-kanten av det nye laget i bunn)
   
2. Bruk en stor erasor med myke kanter og lav flow til å gradvis fjerne det speilede laget slik at overgangen blir jevn mellom de to lagene (nedre del av nytt lag beholdes slik at kantene kan speiles om dette)
   
3. Lapp over med history brush og clone tool der det trengs
   
4. Merg bildet og jevn over med en airbrush/clone tool/dodge/burn
   
5. Sjekk at bildet repeterer som ønskelig ved å duplisere laget i høyde/bredde
   
6. Jevn eventuelt over sømmen som i punkt 3-5
   

Det ligger en del toturials om dette på nett. Mye av det er egentlig prøv/feil. Ikke vær redd for å bruke history brush eller å gå tilbake noen steg i history panel. Jeg vil råde deg til å sette antall steg i history til maks i settings. Som regel er det sirkelformede lyse området blitsen gir det mest kompliserte å omgå.

 

Lykke til