Share
Det er ganske utrolig hvor mye farge og bakgrunn som kan endre utseendet på et nettsted. I denne opplæringen skal vi sette sammen et raskt, enkelt, men effektivt layout og deretter opprette variasjoner ved hjelp av bakgrunner, bilder og mønstre. Vi vil også se på hvordan du lager sømløse flislagte bakgrunner ut av et bilde, metoder for å avslutte et enkelt bilde og enkle måter å lage pikselmønstre på. Kort sagt er det en syltetøy fylt opplæring!
Dette innlegget er første dag i vår webdesignsession. Creative Sessions Session Day 2 "
Så vår første oppgave er å designe en layout for vår side. Vi skal ikke gjøre alt for fancy fordi opplæringen handler om bakgrunner mer enn oppsett. Likevel skal det se bra ut og være en faktisk brukbar layout. Så i bildet ovenfor kan du se min plan med tøffe komponenter på siden. Jeg har planlagt i en meny og undermeny, et panel for å introdusere seksjonen og et innholdsområde. Jeg har også planlagt at den skal være mindre enn 1000px, slik at når en person på en liten skjerm ser på nettstedet, ser de fortsatt bakgrunnen riktig (siden det kommer til å være en stor funksjon i designet).
Nå skal jeg påpeke i virkeligheten jeg faktisk ikke tegnet dette settet av bokser, akkurat som dette. Det var mer som bare å knuse rundt til jeg tenkte "oooh det er en fin layout". Men i denne veiledningens mening er det bedre fornuftig å forklare det på denne måten!
Slik at layoutet er våre bein, nå må vi kutte det ut med noe dummyinnhold og et fargevalg.
Som du kan se, har jeg ikke gjort noe helt fantastisk her, bare plassert elementene på siden ganske pent og jevnt. Legg merke til avstanden. På bildet har jeg forsøkt å vise hvordan forskjellige elementer står opp (gule linjer), hvor avstanden er omtrent like vertikalt og horisontalt så vel som over og under elementer.
Vær oppmerksom på at disse bare er grove guider, og jeg jobber egentlig bare med øye til det ser riktig ut. Men hvis du er usikker på avstand, er det ikke dårlig å gjøre ting ganske jevnt. Når du blir mer komfortabel med avstand, kan du variere ting og spille med ujevne balanser.
I bildet ovenfor kan du se at jeg har valgt et hovedvisningstegn, kalt Rockwell, som vi skal bruke i overskriftspanelet for å gi siden litt tegn. Hvis jeg bygde dette nettstedet som kan være et bilde eller satt inn ved hjelp av sIFR. Resten av teksten er Helvetica og Arial som selvfølgelig passer til HTML-bruk. Også kastet jeg inn en vektorillustrasjon av et papirfly som jeg tegnet år siden og selger som lager. Selvfølgelig i et ekte prosjekt, ville dette bildet være noe å gjøre med nettstedet i stedet for bare tilfeldig kastet inn som jeg har her.
Til slutt har jeg brukt en fargepalett med varm, jordfarget fargetone. Jeg er faktisk en fan av beige og jordfarger, og du finner at jeg bruker dem mye. Jeg tror de går langt for å få nettsteder til å se vennligere og mer tilnærmet.
Så siden ser OK ut, men det er ikke noe veldig minneverdig om det ennå, og det er litt grunnleggende. I neste trinn legger vi litt polsk.
OK så her kan du se nøyaktig samme layout, men jeg har polert det opp og lagt til to visuelle elementer for å gi det litt stil. Det første elementet er pilen kuttet ut av sidemenyen. Dette gjør at midtpanelet ser ut som en slags overgrodd taleboble. Den andre visningen som du ser når du ser nærmere på er en slags punkttema.
Så i det hele tatt har vi brukt tre visuelle elementer for å gi siden litt stil: en illustrasjon, en interessant rutenettform og en subtil tema basert på en enkel form. Senere legger vi til et fjerde visuelt element - en bakgrunn - for å fullføre nettstedets stil.
I bildet ovenfor har jeg pekt på alle biter av polering som jeg la til. Det er alt bare små høydepunkter og graderinger i farge, prikker og selvfølgelig kutt ut pilen. Du kan også være interessert i en tidligere artikkel jeg skrev for et år siden om polering av webdesign her på Psdtuts+.
Så med det har vi vår grunnleggende layout!
Så den første bakgrunnen vi skal bytte inn er et flislagt bilde. I dette tilfellet bruker vi et gressbilde som jeg brukte på den gressteksten opplæringen (en serie som jeg ennå ikke har til slutt :-) Du kan få det opprinnelige gressbildet på Flickr.
Selvfølgelig, hvis du prøver å flette det opprinnelige bildet, kommer det ikke til å se veldig bra ut, og det vil være åpenbart at du bare gjentar det samme bildet om og om igjen. I stedet må du endre bildet slik at det fliser sømløst. Heldigvis legger jeg bare opp en veiledning om dette emnet, så gå over og les:
Sammen med endringen i bakgrunnen selvfølgelig har jeg oppdatert fargen som passer til det nye utseendet. Legg merke til at jeg har unngått å bruke den samme skyggen av lys, lysegrønn som gresset - det ville vært overveldende. I stedet plukker nyanser av dullere greens mørkere og lettere utfyller bakgrunnen.
Nå bakgrunner som dette er perfekte for å legge til gjennomsiktige lag over toppen. Her både Om-panelet og menyen har litt gjennomsiktighet, og det ser fantastisk ut, fordi du kan se at noe av gresset kommer gjennom og det legger til litt dybde. Selv om du bare kan dimme opaciteten til riktig lag ned, er et annet alternativ å legge til et par flere lag på toppen - en med en svak gradient fading til ingenting og den andre med en 1px høydepunkt.
I bildet ovenfor kan du se for eksempel på menyen at jeg har en blokk med hvitt som er satt til 70% opacity, i tillegg er det en gradient fra hvitt til ingenting, og på toppen av det er en 1px hvit linje på nederste kant. Disse ekstra lagene understreker gjennomsiktigheten og gir bildedybden.
Så all denne gjennomsiktigheten er lett å gjøre i Photoshop, men du lurer kanskje på hvor mulig det er å bygge et slikt design.
Heldigvis er det mulig takket være .PNG-filformatet som lar deg bruke gjennomsiktighet i bildene dine. En ting å være oppmerksom på er at mens du kan gjøre gjennomsiktighet (for eksempel 60% opacity), kan du ikke gjøre lagblandingsmoduser (for eksempel Multiply eller Overlay). Siden i et Photoshop-design er det viktig å ikke gjøre noe som egentlig ikke kan bygges, alt jeg har brukt er ugjennomsiktighetsinnstillinger. Det er mer begrenset, men du kan fortsatt få gode effekter.
Så la oss lage en rask HTML-test bare for å sikre at alt virkelig fungerer, slik vi forestiller oss det vil. For å lage en gjennomsiktig PNG, vil vi først fusjonere lagene for vår store panelform til en. Fordi alle lagene har litt gjennomsiktighet, er sluttresultatet etter sammenslåing også semi-transparent.
Bare kopier det til et nytt Photoshop-dokument, og slå av bakgrunnslaget (se bildet ovenfor), og du bør se gjennomsiktigheten som vises gjennom.
Gå nå til Fil> Lagre for web og enheter og velg PNG-24 fra alternativene. Du bør se samme gjennomsiktighet vises i forhåndsvisningsvinduet.
Deretter vil jeg gjøre det samme for noen flere bildeelementer, fordi vi i vår test vil vise at det er mulig å sette en gjennomsiktig PNG på toppen av en gjennomsiktig PNG på toppen av en bakgrunn.
Med alle bildene våre opprettet, handler det nå bare om å sette sammen HTML:
Bakgrunn / gjennomsiktighetstest
Så alt vi gjør her er å sette bakgrunnsbildet til vår flislagt JPG. Deretter plasserer du en
Det vil gjøre for å bevise at dette designet er byggbart. Faktisk trenger du å gjøre noe fest for å få det til å fungere i IE6, a Google-søk avslører mange artikler om emnet, men siden dette er Psdtuts + og ikke NETTUTS, avslutter vi det her :-)
Hva gjøres lett med en tøff teksturbakgrunn som gress er enda enklere å gjøre med enklere teksturer som denne papirstrukturen fra Bittbox. Fordi kildebildet er bedre, kan du lage mye større fliser for bakgrunnen som er mye mindre sannsynlig å se gjentatte ganger.
Et annet alternativ for bakgrunn er enkle pikselmønstre som ved gjentagelse gir en bakgrunn litt tekstur. Mønsteret vist i denne varianten av oppsettet er det jeg brukte på Creattica Daily.
Du kan skape mønstre som dette veldig enkelt. For å gjøre denne effekten må du bare opprette et nytt bilde 4px bredt ved 5px høyt og zoome inn så langt du kan, og deretter tegne disse pikslene:
Deretter trykker du på CTRL-A å velge alt og gå til Rediger> Definer mønster, gi det et navn så kan du bruke mønsteret med a Mønsteroverlegg gjennom et lags blandingsalternativer. Så tilbake på hoved PSD-filen, høyreklikker du laget du vil legge til mønsteret til, og velg deretter Blandingsalternativer velg deretter Mønsteroverlegg. I bildet ovenfor har jeg satt mønsteret til Multiplisere på en mørk grå bakgrunn.
Det er faktisk ganske morsomt å leke med disse typer pikselmønstre. Pixel-kjærlighetsfolk på K10K har et bibliotek med Pixel Patterns, du kan også sjekke ut for langt mer avanserte design.
Den siste varianten vi ser på, bruker et enkelt, innløst bilde. Her bruker jeg et fint bilde av West Bay Cliffs av Cristiano Betta som jeg fant på Flickr:
Det er et fint stort bilde, og det har laget en fin fargevalg. Så her er noen få raske skritt jeg tok for å plassere bildet.
Her sitter det bare i bakgrunnen av vårt design. Med litt gjennomsiktighet ser det allerede ganske pent ut, men det som skjer øverst til venstre?
Flytter bildet opp ca 50px skyver de rare, misfarvede delene av siden. Det neste problemet er at vi ikke kan ha en endeløs fotobakgrunn, så vi vil fade det til en farge.
Når vi velger en mørkere farge fra sjøen, lager vi et nytt lag og tegner en gradient som fading fra fargen til gjennomsiktig. Dette sitter over havets bakgrunn pent og blander det ut.
Nå ser bakgrunnen faktisk litt flatt ut, så det vil være fint å lyse opp fargene litt. For å gjøre dette overlegger vi bildet med en gradient av farger som er matchet av bildet.
I bildet ovenfor kan du se at jeg har trukket en gradient med purpurene og appelsiner av det opprinnelige bildet.
Setter gradientlaget til overlegg og 70% virkelig lyser opp solnedgangen og gjør det ser mye mer levende ut.
Nå er det neste problemet at vi må få bildet til å blande seg på sidene. Dette kommer til å være vanskelig fordi på den ene siden vi har et fjell og på den andre er det bare himmel. Så sannsynligvis er den beste løsningen å blande seg inn i de mørke farger. For de fleste vil de ikke se dette, det er bare for alle de som bruker en gigantisk skjerm og åpner nettleserne helt oppe.
Så det første vi skal gjøre er å ta et 1px vertikalt utvalg fra hver ytre kant av bildet og treffe CTRL-T å forvandle den over. Grunnen til at vi gjør dette er at hvis noen av bakgrunnen viser gjennom fargen jeg skal legge til, vil den ikke se rar ut.
Så neste legger vi til et nytt lag og tegner i en gigantisk ellipse i bakgrunnen, trykker du på Ctrl-Shift-I å invertere utvalget og fylle det med den samme mørke fargen vi brukte tidligere.
Nå avvelger vi laget og går til Filter> Uklarhet> Gaussisk uskarphet å fargelegge fargen vår, ved hjelp av en radius på 80 px. Så dupliser dette laget og slør det igjen med en radius på 120px, deretter en tredje gang med en radius på 160px. Dette bør gi en fin myk oppgradering.
Så vårt siste design med en fotobakgrunn for de fleste vil se ut som bildet vist ovenfor. Men vi kan være sikre på at selv et stort nettleservindu ikke vil avsløre noe dumt.
Du kan lære mer om å designe med store bakgrunnsbilder ved å lese disse tre gode artiklene:
Som du kan se har vi fått mye kjørelengde ut av vårt enkle layout og forhåpentligvis underveis har du fått noe nyttig ut av prosessen!
Dette innlegget er første dag i vår webdesignsession. Creative Sessions Session Day 2 "
Accentsconagua
