Bakgrunner innen webdesign: Lage et tema

Tilpassende bakgrunner, illustrasjoner, bilder, grafikk og tekstinnhold er viktig for total look og følelse av webdesign og visuell appell. Hvis du bruker bakgrunner for kropp og innhold og deretter blander dem inn med den virkelige betydningen og budskapet på nettstedet, og bruker grafikkdesign til dets potensiale, kan du ta nettstedet ditt fra ho-hum til fantastisk.

Merk: PSD-filen er tilgjengelig for nedlasting. Du kan også se ledsagergalleriet, "Opprette et tema for nettstedet ditt med Photoshop."

Ta en titt på utviklingen av nettsteder og deres design, så ser du at tidlige eksempler kun inkluderte statisk innhold med grunnleggende fargebakgrunner, om noen annen bakgrunnsfarge enn vanlig hvit. Sammenlignet med det dynamiske innholdet på nettsteder i dag, som bruker stort sett stilisert bakgrunn med grafikk, teksturer, forløpninger, illustrasjoner, diagrammer og tabeller, og du vil se en sterk forskjell.

Så mange designvalg

Det finnes en rekke eksempler på nettsteder og beste praksis der ute for å gi deg mange alternativer med bakgrunn og innhold. Du kan velge å slå sammen både bakgrunn og innhold; legg til topptekst og bunntekst eller flytende illustrasjonspapir; kombinere tekstur med illustrasjon, faste bilder, gjentatte fliser; eller hva med blekner og grenser? Det er mange alternativer og mange valg å ta når du bruker bakgrunn på webdesign.

Lag et eksempel på bakgrunnsbakgrunn

I eksemplet vil jeg lage en elegant, men grei layout med Photoshop.

Jeg vil bruke bildet som er vist i figur A av gammelt papir; den er tilgjengelig i png-filformat fra Playingwithbrushes på Flickr. Det gamle papirbildet vil ende opp med å bli vår viktigste innholdsinndeling, og jeg vil bruke dette som kilde for utdrag for å lage menyknapper. Men før det, skal jeg gjøre noen endringer i bildefilen i Photoshop.

Figur A

Jeg vil først gjøre bildet litt lysere, og den enkle måten å gjøre dette på er med fargetone / metning:

Når filen er åpen i Photoshop, legger jeg til et nytt lag med menybanen Layer | Nytt justeringslag | Fargetone / metning klikker du deretter OK, og dialogboksen Fargetone / metning åpnes og innstillingene endres som vist i figur B:

Figur B

Forsikre deg om at Colorize er merket, innstillingene er fargetone: 43, Saturation: 28 og Lightness: +16. Selvfølgelig kan du justere disse innstillingene slik du ser passende for applikasjonen din. Nå ser det gamle papirbildet litt lysere ut enn originalen, og ikke så gammel. Jeg veksler også fargetone / metningslaget og fortsetter for å sammenligne forskjellen.

Deretter skal jeg legge til et nytt lag med litt slippskygge til bildet, etter menybanen Lag | Lagstil | Drop Shadow med følgende innstillinger - Blend Mode: Multiply, Opacity: 65%, Angle: 120 °, Distance: 5px, Spread: 2%, and Size: 5px, som vist i figur C.

Figur C

Ingenting for dekorativt, bare fine detaljer som gir bedre resultater. Det resulterende bildet er vist i figur D.

Figur D

Deretter skal jeg lage noen knappebakgrunner med samme bakgrunnsstruktur. Med bakgrunnslaget aktivt og bruker Polygon Lasso-verktøyet, skal jeg gjøre et valg fra bunnen av bildet som ligner det som er vist i figur E.

Figur E

Så lager vi et nytt lag via Copy (Ctrl + J), og lager et nytt lag av det valgte stykket. Jeg vil gi nytt navn til det nye laget "Button", som vist i figur F.

Figur F

Velg dette knappelaget og endre posisjoner og retning ved å justere fra menylinjen Rediger | Transform | Drei 180 °. Deretter bruker du Flyttverktøyet, plasserer du knapplaget øverst i bakgrunnen og på venstre side som vist i figur G :

Figur G

Flytt nå knappelaget under bakgrunnslaget slik at det blir plassert bak som vist i figur H.

Figur H

Fortsett med disse trinnene for å lage så mange forskjellige knapper du ønsker for din spesielle layout. Jeg brukte også Rediger | Transform | Rotere og skje alternativer for å manipulere flere av knappplasseringene; ha det gøy med innstillingene for å lage din egen knapplayout. Når alle knappene er på plass, går jeg også til hvert knappelag hver for seg og legger til en dråpeskygge som jeg gjorde med bakgrunnslaget tidligere. Jeg har lagt fem sammen, og de vises i figur I.

Figur I

Nå skal jeg justere hver knapps fargetone og metning, det samme som jeg gjorde med hovedbakgrunnslaget, slik at de kan skilles fra hverandre litt mer enn de gjeldende innstillingene. Velg knappelaget du trenger å justere, og deretter CTRL + U for å gjøre justeringene av fargetone / metning. Innstillingene for hvert av knapplagene er listet opp i tabell 1 nedenfor.

Dette er de justerte knappene som vises i figur J. Knapplagene vises nå mer som en lagdelt skifertekstur bak hovedbakgrunnen.

Figur J

Deretter skal jeg endre fargene på hver knapp individuelt for å skille dem ytterligere bak bakgrunnen. Men før jeg gjør det, skal jeg slå sammen bakgrunnslaget med det originale fargetone / metningslaget. Ved å utheve de to lagene og deretter høyreklikke over markeringen, klikker du på Flett lag som vist i figur K slik at fargeutskiftninger for knappene blir synlige.

Figur K

Når det første knappelaget knapp 1 er valgt, vil jeg bruke alternativene Erstatt farge fra menybanen Bilde | Justeringer | Erstatt farge, resulterer i dialogboksen Erstatt farge som vist i figur L, og fremhev innstillingene for knapp 2.

Figur L

Jeg fortsetter med alle de andre knappene, og resultatene vises i figur M.

Figur M

Nå som knappefargene er byttet ut individuelt, kan vi legge til tekstlag for hver. (De vil vises i PSD-filen bare som et eksempel; i del to av serien kommer vi til kodingen i HTML og CSS vil håndtere knappeteksten.) Her bruker jeg skrifttypen Viner Hand ITC, Vanlig, 48px og sterk svart. Forsikre deg om at knappelaget er valgt og aktivt, velg deretter tekstverktøyet og skriv inn ønsket tekst. Jeg har lagt til "Hjem" på den første knappen som illustrert i figur N.

Figur N

Dette er en enkel oppgave og bør ikke ta mye arbeid for å fullføre. Jeg fortsetter med å legge til andre tekstelementer gjennom de gjenværende knappene og bakgrunnsinnholdet, og lager innhold basert på et restaurantnettsted for eksempel. Deretter la jeg inn noen bilder på oppsettet også, som sett i figur O.

Figur O

Men vent, vi er ikke ferdige; Jeg må legge til et nytt bakgrunnslag bak innholdsdelen for å fylle resten av siden. Jeg tror at noen trekorn eller steinbrudd flisetype vil være passende, hvilken som helst kornete overflate for å gi en viss kontrasteffekt på det generelle utseendet, som vist i figur P. Enhver tekstur med ulikhet som hjelper til å skille et skille fra hovedinnholdet vil gjøre, kan du velge online fra mange tilgjengelige strukturer.

Figur P

Jeg har lagt til et nytt lag helt nederst i lagpallets rekkefølge og lagt 1600px x 1600px tretekstur. Hva om den bestemte tekstur ikke har den virkelige avvikende kvaliteten som jeg hadde håpet? Ved å gjøre noen justeringer med Shadows and Highlights, kan jeg oppnå en mørkere rikere kontrasterende kroppsbakgrunn; innstillingene vises i figur Q. Gå gjennom menystien: Bilde | Justeringer | Shadow / Highlight ... du kan justere dialogboksinnstillingene.

Figur Q

Jeg gjorde bare noen få mindre justeringer med matbildene øverst til venstre for å spre dem ut litt mer og overlappe dem i kroppsbakgrunnen; den endelige utformingen sees i figur R.

Figur R

kommende

Dette er del av en firedelt serie som også vil omfatte, gå fra PSD-filen til HTML, legge til navigasjon ved hjelp av CSS, og avslutte med å formatere teksten ved hjelp av CSS og html. I del to av Bakgrunner i webdesign- serien skal jeg gå inn i fasen med å overføre denne PSD-filen til koding med CSS og HTML.

© Copyright 2021 | pepebotifarra.com