Opplæring: Lag et minimalistisk nettdesignoppsett ved hjelp av Photoshop

Minimalismen innen kunst og design begynte etter andre verdenskrig, og var særlig fruktbar i amerikansk billedkunst, design og arkitektur med rask vekst sett på 1960- og begynnelsen av 1970-tallet. Når det gjelder webdesign, finner vi mange eksempler på minimalistisk bruk, og trenden ser ut til å vokse hver dag. I denne opplæringen bruker jeg Photoshop CS5 Extended; alle trinnene kan imidlertid brukes i de fleste versjoner av Adobe Photoshop-serien.

Hva definerer et minimalistisk nettsted?

Et minimalistisk nettsted vil være preget av mangel på unødvendige farger, bilder, former, teksturer eller andre distraherende elementer. Snarere er fokuset på funksjon, der kvalitet i en enkel design overstyrer mengden innhold. Den ofte uttalte setningen "less is more" har forrang, der webdesignen er redusert til et begrenset sett med nødvendige elementer.

Hva er "nødvendige elementer?"

Har du noen gang handlet og spør deg selv: "Må jeg ha denne gjenstanden, eller vil jeg ha denne gjenstanden?" Du må først skille "ønsker" fra "behov", og når du først har "behov" -listen parert ned, blir dette den korte listen og er et godt utgangspunkt for de nødvendige elementene.

De nødvendige elementene kan omfatte:

  • Navnet på nettstedet eller organisasjonen
  • Kort navigasjonsområde med bare fire eller fem lenker til undersider
  • Enkelt grafikk, bilde og muligens en gradient bakgrunn
  • Ett eller to korte avsnitt av nylig innhold
  • Bunntekst med copyright, navigasjon, lenke til ansvarsfraskrivelse, koblinger til sosiale nettverk.

Åpne et nytt dokument i Photoshop

# 1 Lag et nytt Photoshop-dokument med dimensjoner på 1020px bredde og 1020px høyde som vist i figur A :

Lag bakgrunnssjiktet

# 2 Lås deretter opp bakgrunnen ved å dobbeltklikke over det aktive laget og gi det navnet "Bakgrunn" og klikk deretter OK; Dette vil gjøre det mulig å redigere laget, som vist i figur B nedenfor:

# 3 Velg deretter Gradientverktøyet og sett deretter forgrunnen farge til # b9c7c7 og bakgrunnsfargen til # e0e9e9. Deretter setter du gradienttypen som Radial og drar gradientverktøyet på lerretet som vist i figur C :

Start plasseringen av linjen nede til venstre i øverste høyre kvadrant og beveg deg mot øverste høyre hjørne, og slipp for å produsere gradienten som vist i figur D :

Opprett overskriftsseksjonen

# 4 Sett en vertikal og horisontal guide på 50px fra henholdsvis venstre og øvre kant, som vist i figur E. Dette vil være vår guide for innstilling av tekstområdene.

# 5 Neste vi oppretter overskriften tekstinnhold ved hjelp av Horizontal Type Tool, og skriver deretter inn nettstedets navn og et underordnet slagord eller fangstfrase. Følgende innstillinger ble brukt for å lage to uavhengige Horizontal Type Tool-lag for overskriftsteksten:

"Navn på nettstedet"
  • Font: Campbell
  • Skriftstørrelse: 32px
  • Skriftvekt: Vanlig
  • Anti-aliasing: Sterk
  • Farge: # 333939
" Slagordet eller fangstfrasen under overskriften "
  • Font: Tahoma
  • Skriftstørrelse: 18px
  • Skriftvekt: Vanlig
  • Anti-aliasing: Sterk
  • Farge: # 466d6d
# 6 Nå, med Nudge Tool, juster du de to tekstlagsområdene til øverste og venstre guider for riktig plassering på lerretet, som vist i figur F :

Legger til i navigasjon

# 8 Legg i en ny horisontal guide på 150px fra toppen som vist i figur G :

# 9 Deretter oppretter du et tredje verktøy for horisontaltype-tekst, som starter ved den 150px horisontale guiden, og deretter legger du til følgende navigasjonstekst: "Om", "Blogg", "Produkter", "Tjenester" og "Kontakt", slipper du to linjer mellom hvert teksttillegg, med følgende innstillinger:

  • Fontfamilie: Tahoma
  • Skriftstørrelse: 22px
  • Skriftvekt: Vanlig
  • Anti-aliasing: Sterk
  • Farge: # 4b6262
# 10 Stikk det nye tekstlaget for å samkjøre med den vertikale guiden til venstre og den horisontale guiden på 150px; resultatet vises i figur H :

Legger til i søkefeltet og send knappen

# 11 Når vi oppretter en søkelinje, bruker vi Rounded Rectangle Tool med en radius på 7px og lager en form som er omtrent 160px bred og 25px høy. Men først, la oss slippe inn en vertikal linje plassert 100px på innsiden av høyre kant av lerretet, eller på 920px på lerretet. Vi vil justere søkefeltet slik at den nedre kanten berører den horisontale 150px-guiden og den høyre kanten på linje med den 100px vertikale justeringen. Vi vil også legge til en indre skygge med følgende innstillinger:

  • Blanding: Multipliser
  • Opacitet: 35%
  • Vinkel: 30%
  • Bruk Global Light: Sjekket
  • Avstand: 1px
  • Choke: 2px
  • Størrelse: 3px
  • Kontur: Standard
  • Støy: 0%
Avrundet rektangel i søkefeltet er vist i figur I :

# 12 Neste, vil vi lage innsending "Søk" -knappen, bruke Rounded Rectangle Tool igjen med følgende innstillinger:

  • Høyde: 25px
  • Bredde: 40px
  • Radius: 7px

Legg deretter til en gradientoverlay med følgende innstillinger:

  • Blend Mode: Overlay
  • Opacitet: 100%
  • Stil: Lineær
  • Vinkel: -90%
  • Målestokk: 100%
  • Tilpassede fargeinnstillinger for gradient
  • Forgrunnsfarge: # 598181
  • Bakgrunnsfarge: # b0e9e7
Forsikre deg om at knappelaget er over søkefeltet, og dytt justeringen som vist i figur J :

# 13 Neste, vil vi legge til det tekstlige innholdsjiktet ved hjelp av verktøyet Horisontal type (T) og justere det over søkefeltet med følgende innstillinger:

  • Tekstsøk..."
  • Font: Tahoma
  • Skriftstørrelse: 18px
  • Skriftvekt: Vanlig
  • Farge: # e0e9e9
# 14 Legg i en hvit pilform ved hjelp av Custom Shape Tool (U) og plasser den over innsenderknapplaget; Jeg valgte pil 6. Deretter sentrer du den innover knappområdet som vist i figur L :

Bannerbildeområde

# 15 Neste, vi vil konstruere et bakgrunnsbilde for bannerebilde som vil definere plass på designen for enten et statisk bilde eller et sett med roterende bilder, som kan fremheve aktuell, relevant innhold. Vi vil kalle det "Image Bg". La oss legge inn noen flere retningslinjer før vi lager formen. Den første er et vertikalt styresett til 200px, og det andre er et horisontalt styresett til 200px. Velg deretter Rounded Rectangle Tool (U) og opprett et rektangel med følgende innstillinger:

  • Bredde: 600px
  • Høyde: 400px
  • Radius: 7px

Deretter bruker du et slaggradientlag på det avrundede rektangelet med følgende innstillinger:

  • Slagstruktur:
  • Størrelse: 3px
  • Posisjon: Innvendig
  • Blend Mode: Normal
  • Opacitet: 100%
  • Fylltype: Gradient

Fargestopp:

  • Forgrunn: # 90a9a9
  • Bakgrunn: # e7ebef
  • Stil: Lineær
  • Juster med lag: Sjekket
  • Vinkel: 0%
  • Målestokk: 100%
Den øverste delen av lerretet skal se ut som vist i figur M :

I neste del av opplæringen vil vi legge til et eksempel på et funksjonsbilde for å fullføre bannerbildets område. Vi vil også legge til flere tittelfunksjoner og avsnittblokkeringsområder rett under funksjonsbildeområdet, og avslutte med å lage et bunntekstområde nederst på lerretet.

© Copyright 2020 | mobilegn.com