Baggrundsdesigns

Det er meget nemt at skifte baggrundsdesignet på din mono-hjemmeside, helt ned på sideniveau. Og det faktum, at du kan uploade forskellige baggrundsdesigns til hver af dine sider, giver dig muligheden for at skabe unikke sider.

Der er dog nogle overvejelser, du bør gøre dig, før du går i gang. I denne sektion vil du finde forklaringer og tips til, hvordan du kan skabe gode resultater.

Baggrunde og topbilleder

Når du har valgt, hvilket design skin du vil bruge, vælg da et baggrundsbillede eller et mønster, der passer til. Hvis du har valgt et design med en lys tekst, bør din baggrund være mørk, så det er nemt at læse teksten. Og omvendt, hvis du har valgt et design med mørk tekst, bør du vælge en lys baggrund.

Du kan også arbejde med kompositionen på din side for at skabe en effekt. Prøv fx at placere baggrundsbilledet i den højre eller venstre side af siden, eller flyt dit indhold længere ned på siden for at give plads til et flot baggrundsbillede i toppen af siden. Prøv evt. at lade baggrundsbilledet falme ud i en baggrundsfarve for at give en blød overgang fra billedet til farven, som kan dække resten af siden (til dette skal du bruge et billedredigeringsprogram).

På dette eksempel kan du se et portræt, der er brugt som et stort baggrundsbillede (indstillingerne i værktøjet er sat til at placere billedet centreret i toppen af siden). Kompositionen af billedet holder dog motivet i højre side. Dette tillader, at sidens indhold kan placeres i venstre side uden at forstyrre motivet i billedet.

Før du starter med at designe din side, prøv da at skitsere den hurtigt på et stykke papir. Det vil spare dig tid og hjælpe dig til at undgå for mange unødvendige redigeringer i værktøjet. 

Vær opmærksom på skærmopløsningen

Det giver en fantastisk effekt at bruge fotografier som baggrundsbilleder. Men husk, at fotoet skal være stort nok til at se godt ud på skærme med høj opløsning (Baggrundsbilleder skallerer nemlig ikke lige som Jumbotron-modulet). Hvis dit foto ikke er stort nok til at fylde hele skærmen, er en anden mulighed at lade det falme ud i en matchende farve på fotoet i hver side af billedet (til dette skal du bruge et billedredigeringsprogram). Så sikrer du dig, at dit billede ikke kommer til at se grynet ud på skærme med høj opløsning.

I dette eksempel er baggrundsbilledet omkring 2500 pixels bredt og omkring 900 pixels højt. Billedet er komprimeret til at fylde ca 100k. Det er en fordel at komprimere dine billeder, da mange mennesker stadig har langsomme internetforbindelser, hvor billeder i høj opløsning på hjemmesiden kan sænke load-tiden (gøre siden langsom). Bemærk at i dette eksempel er der en sort menubar og et logo i baggrundsbilledet, og i bunden falmer billedet ud i en sort farve.

Mønstre og topgrafikker

Baggrundsbilleder kan gøre din hjemmeside langsom, hvis filen er for stor. Derfor kan det være en fordel at bruge mønstre, der falmer, i stedet. Så behøver du kun bruge én grafik, fordi den gentager sig selv som et mønster. Du kan også arbejde med grafiske elementer i toppen af en side. Dette gør ofte siden hurtigere, fordi det fylder mindre end et foto.

Nedenunder kan du se forskellige eksempler på baggrundsmønstre, falmende billeder og topgrafikker.

Ovenover kan du se en side med et baggrundsbillede, der minder om krøllet papir. Det giver siden lidt tekstur og liv. I toppen er Jumbotron-modulet brugt til at lave et banner.

I dette eksempel kan du se et baggrundsbillede med et træ-motiv. Baggrundsbilledet er centreret i toppen og falmer ud til baggrundsfarven i bunden.

Goodpeople (ovenover) bruger store blå grafikker som deres baggrundsbillede. Den lille nedadvendte pil er også en del af baggrundsbilledet, som flyder fint sammen med sidens baggrundsfarve. Den store tekst oven på den blå baggrund er lavet med Display-modulet.

Dette eksempel viser et baggrundsbillede, der stjæler meget opmærksomhed. I dette tilfælde er billedet valgt for at udtrykke Zenzezs brand og deres smykke-stil. Det du kan se på eksemplet er, at billedet falmer ud til en sort farve så det ser godt ud på både små og store skærme.