Hvordan man bygger en flislagt bakgrunn for HTML5 og CSS3-siden - dummies

Ofte vil du ha et bakgrunnsbilde som dekker hele siden på HTML5 og CSS3-nettstedet ditt. Dette kan være vanskeligere enn det virker fordi du ikke vet hvor stor siden vil være i brukerens nettleser.

Verre, store bilder kan ta mye plass og redusere brukerens opplevelse. Den vanlige løsningen er å bruke et flislagt bilde som er utformet for å gjenta i bakgrunnen. Gimp har noen veldig nyttige verktøy for å bygge flislagt bilder.

Husk at CSS-egenskapen med bakgrunnsrepetisjon lar deg spesifisere hvordan en bakgrunn gjentar. Standardinnstillingen gjentar bakgrunnen uendelig i både X- og Y-aksene. Du kan også sette bakgrunnen til å gjenta horisontalt (gjenta-x), vertikalt (gjenta-y), eller slet ikke (ikke gjenta).

Målet med en flislagt bakgrunn er å lage en relativt liten grafisk fylle hele siden og se ut som et større bilde. Hemmeligheten er å lage bildet slik at det er vanskelig å se hvor bildet gjentas. Her er en måte å lage en flislagt bakgrunn i Gimp. Selvfølgelig kan du tilpasse denne teknikken til eget bruk.

1. Opprett et nytt bilde.

   Størrelsen på bildet ditt er viktig. Mindre bilder er mye mer effektive å laste ned, men mønsteret er mye tydeligere. Start med 256 x 256 piksler.

2. Bygg et tilfeldig mønster.

   Du kan bruke plasmafilterteknikken eller prøve en lignende teknikk ved å velge Filer → Render → Clouds → Differanse Clouds. Difference Clouds-filteret lager et gråtonebilde, men med en rekke interessante alternativer. Alternativet Tileable lager et mønster som er klare til fliser. Spill med disse alternativene til du får noe interessant.

3. Juster kontrasten.

   For den beste effekten, vil du ha en relativt jevn fordeling av verdier fra lys til mørk. Den enkleste måten å gjøre dette på er via det automatiske normaliseringsverktøyet (Farger → Auto → Normaliser).

4. Velg en gradient.

   Du legger til farger i mønsteret ditt ved hjelp av en teknikk som heter gradient mapping . Bruk dialogboksen Gradient (Windows → Dockable Dialogs → Gradients) for å velge en gradient. Mørkere farger på bilde kartet til farger til venstre for gradienten, og lysere farger kart til venstre. Du kan justere farger, så vær ikke bekymret hvis fargene ikke er akkurat det du vil.

5. Bruk Gradient Map-verktøyet (Farger ➪ Map ➪ Gradient Map) for å kartlegge fargene til gradienten til skymønsteret.

6. Forskyv bildet for å se etter flislegging.

   Den enkleste måten å se om bildene fliser godt er å kompensere for bildet.Dette setter kantene i midten slik at du kan se hvordan bildet vil se ut når flere kopier er ved siden av hverandre. Åpne Offset-dialogboksen ved å velge Lag → Transform → Offset. Offset-dialogboksen har en praktisk x / 2, y / 2-knapp. Klikk på knappen for å se hvordan bildet ser ut.

7. Rengjør bildet om nødvendig.

   Hvis du valgte alternativet Tileable når du bygger skybildet, ser det nye bildet ut. Hvis ikke, kan du ha noen synlige sømmer. Bruk Smudge and Clone-verktøyene til å rydde opp disse sømmer om nødvendig. Bruk Offset-verktøyet en gang til for å sjekke om sømene dine ser bra ut.

8. Bruk filtre for å få effekten du vil ha.

   Du vil kanskje fargelegge bildet eller uklare det for å dekke eventuelle gjenstander av opprydding. Husk at bakgrunnsbilder skal være ekstremt mørke eller ekstremt lyse med svært lav kontrast hvis du vil ha lesbar tekst.

9. Test bildet ved å lagre bildet i XCF-format og et nettvennlig format (som PNG), bygg en enkel side ved hjelp av bildet som bakgrunn, og last siden inn i nettleseren din for å sikre at den fliser som du forventer.