7 Photoshop Tips for å designe rene og moderne nettsteder
Rent, elegant og vakkert webdesign er ofte et spørsmål om personlig perspektiv. Jeg ser på hundrevis av nettsteder hver uke, og flere av dem skiller meg ut, men ikke alle er nødvendigvis effektive.
Alt for ofte koker designere et konsept ned for langt, produserer en endelig design som ikke er noe mer enn tekst og et rutenett. Selv om disse minimal designene har sin estetiske appell, særlig når de er parret med utmerket typografi, risikerer de å bli utsatt for varsel.
Personlige meninger til side, det er visse funksjoner i et design som gjør at den stolt kan merkes som ren eller moderne og forbedrer brukbarheten og likheten på universelt nivå. Enkelhet er ikke en design trend, men heller et attributt for god design.
Photoshop gir oss et allsidig sett med verktøy for å skape dybde og interesse, og inviterer oss til å integrere subtile detaljer hvor vi ville legge et tomt mellomrom. Du trenger bare en håndfull av disse verktøyene for å infisere egenskapene til moderne design i et layout. Ved å mestre dem, kan du lage rene design som uttrykker funksjonalitet klart og effektivt.
1. plass
Hvit plass muliggjør visuell adskillelse av designelementer uten bruk av bokser, linjer eller ekstra grafikk og er muligens det viktigste aspektet av moderne design. Det er viktig å presentere innhold og lesbarhet. Når det brukes riktig, gir det hvite rommet ditt layout sin rene og elegante følelse.
Guider og grids er tilgjengelig i Photoshop for å hjelpe deg med å plassere elementer nøyaktig. Gitteret overlegger hele dokumentet mens styrene kan stilles inn manuelt. Bruk retningslinjer tidlig for å angi usynlige grenser, marginer og polstring som brukes til å definere den hvite plassen.
Opprett en veiledning ved å trykke på Ctrl + R (Win) eller Cmd + R (Mac) for å aktivere linjalen, og klikk deretter øverste eller venstre linjal for å dra en veiledning til ønsket posisjon. Her er noen flere snarveier som hjelper deg med å administrere guider mens du arbeider:
- For å flytte en retningslinje: Ctrl (Win) eller Cmd (Mac) og klikk på guiden
- Vis / skjul guider: Hit Ctrl +; (Win) eller Cmd +; (Mac)
- Vis / skjul rutenettet: Hit Ctrl + '(Win) eller Cmd +' (Mac)
Aktiver dine Smart Guides under Vis> Vis> Smart Guides . Smart Guides vises automatisk når du tegner en form, justerer tekst, eller lager et utvalg eller lysbilde og vil lagre arbeidet med å sette opp retningslinjer for disse elementene på forhånd.
Justering av objekter ved hjelp av guider og rister gjør utformingen enklere å fordøye, og gir samlet resultat et mer polert utseende.
2. Dybde
Dybde opprettet med lys og skygge gjør elementene dine skarpe og virkelige. Skyggeeffekter kan brukes på ethvert objekt, utvalg eller tekstlag, men trikset er å velge en farge som samsvarer med bakgrunnen og avstå fra standard svart.
Ikke alle skyggene må være mørke. Kombiner Inner-skygge-effekten med en hvit eller lyst dropshadow for å lage en nedsunket eller "letterpress" -følelse med tekst- eller skjemafelter.
3. Detalj
Både gradientverktøyet og gradientlagseffektene spiller en stor rolle i ren og moderne design. Gradienter er tilstede i alle aspekter av moderne styling, fra skygger og høydepunkter til bakgrunn og knapper.
For å få tilgang til gradientverktøyet, trykk Shift + G. For å opprette en gradient, klikk på lerretet, dra og slipp. Dette verktøyet brukes best til store områder som bakgrunner, lys eller radiale skygger. Når du arbeider med individuelle elementer som seksjoner, knapper eller ikoner, er Gradient Overlay-lag-effekten et mer effektivt middel for å etablere overflateformater eller teksturer. Dette verktøyet åpnes ved å dobbeltklikke på elementlaget og velge avmerkingsboksen "Gradient Overlay".
Bruk denne effekten til å gi subtile dimensjoner til knappene og navigasjonsfeltene, eller for å etterligne stil og tekstur av papir eller metaller.
4. Definisjon
Ved overdefinerte kanter og grenser sørger du for at elementene har riktig kontrast.
Stroke-lagseffekten vil skissere elementer som tekst eller knapper der du trenger en likevektt omriss på alle sider. Ved å bruke denne effekten frigjør du Inner- og Drop-skyggene for å utvide alternativene dine.
Det er fristende å hente pennverktøyet for å tegne rette linjer og horisontale regler, men hvis du vil bruke gradienter eller skygger på linjen, er det enklere å bruke Single Row Marquee Tool, som er gjemt diskret bak Rektangulært Marquee Tool . Bruk Single Row-verktøyet på et nytt lag og en hvit eller lysfargede dropshadow for å lage fremhevingslinjer langs delgrenser eller separatorer der du ikke kan bruke en effekt på selve elementet.
5. Renter
Ren og moderne trenger ikke å være kjedelig, hvit eller minimal. Enkel bruk av tekstur og mønster vil gjøre at designet ditt skiller seg ut, mens du kommuniserer stil og merkevare. Bruk subtile teknikker som å legge til støy (Filter> Add Noise) eller Texture Overlay-lag-effekten på bakgrunnsområder eller grensesnittelementer for å hjelpe dem å skille dem fra hverandre. Jo mer virkelige og klare et element dukker opp, desto mer fristende er det for seeren.
6. Perspektiv
Perspektiv er den mest underutnyttede teknikken i moderne webdesign, bare fordi pågående trender fokuserer konsekvent på symmetri og grid. Ved å bruke perspektiv på bilder og elementer i ditt design, kan du introdusere dybde, dimensjon, modernisme og interesse for designet ditt i ett enkelt trinn.
Perspektiv kan gis til hvilken som helst form eller et bilde ved å velge alternativet "Free Transform Path" i høyreklikkmenyen og klikke på "Warp" -knappen i verktøylinjen.
Illusjonen om perspektiv kan også produseres ved å lage asymmetriske former eller rammer og bruke gradienter og skygger på riktig måte for å plassere objektene fra hverandre.
7. Lesbarhet
Sterk type er godt elsket i design samfunnet, og en enda sterkere komponent i ren design. Det kan erstatte bilder og grafikk som ellers kan overkomplisere et design og formidle den totale essensen av de ovennevnte teknikkene på en enkel og grei måte.
Hvis du vil legge til teksturer i tekst, konverterer du tekstlaget til et smart objekt først ved å høyreklikke på laget og velge "Konverter til smart objekt." Du er begrenset til lageffekter som standard, med mindre teksten rasteriseres, en praksis du vil unngå, selv når du designer for skjermen. Konvertering til Smart Objects lar deg bruke filtre og andre teknikker til teksten mens du beholder redigeringsfunksjonene dine i tilfelle du må endre hva teksten sier senere.
Husk at du har sporings- og kerning-alternativer tilgjengelig når du konfigurerer tekstelementer. Selv om teksten din er bestemt til å bli reprodusert i CSS, bør du eksperimentere med linje- og brevavstand tidlig, for bedre å visualisere hvordan innholdet ditt vil vises innenfor det rommet du har gitt det. Husk også å bruke "skarp" eller "skarp" tekst for å beholde definisjon og klarhet.
Hvordan du presenterer innholdet ditt i ren design er viktigere enn noen annen stil, bare fordi det er mindre å gå visuelt for å distrahere seeren. Ved å bruke tipsene ovenfor til å plassere tekst og objekter på riktig måte, legg til definisjon og interesse, og sett innholdet bortsett fra grensesnittet, vil designen oppnå optimal effektivitet.
Hva synes du om disse tipsene og har du andre du bruker regelmessig? Vennligst del under ...