Opplæring: Legg siste hånd på minimalistisk webdesign ved hjelp av Photoshop

Dette er den andre delen av opplæringen vår; i det første segmentet etablerte vi hva som definerer og utgjør et minimalistisk webdesign, og så begynte vi med å lage et lerret, et bakgrunnslag, overskriftsseksjon, navigasjon, søke og sende inn knapper, og pakket inn med et bannerbildeareal.

I dette segmentet 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.

Bannerbildeområde

Det omhandlede bannerbildet er der vi slapp i vårt forrige segment; nå, la oss legge til et bilde.

# 1 Vi vil legge til et bilde ved å gå til File og deretter Place, og velge et bakgrunnsbilde; Når du er valgt, klikker du på Plass-knappen, og plasserer deretter bildet.

# 2 Neste, sørg for at bildelaget er rett over bakgrunnslaget, og høyreklikk deretter over bildelaget og velg Lag klippemaske.

Figur A

# 3 Velg Move Tool (V) og dytt bildet til stedet du ønsker å utheve i det klippede maskelaget.

Figur B

Funksjoner for innholdsblokkering

# 4 Neste, vil vi legge til ytterligere to horisontale guider før vi oppretter områdene våre med innholdsblokkering. Den ene horisontale guiden blir satt til 650 px, og den andre horisontale guiden blir satt til 900 px. Det kjennetegnede innholdet vil være inneholdt i dette området 250px med 725px.

# 5 Etter det vil vi legge til et titteltekstområde ved å bruke følgende innstillinger med området på lerretet fra øverste venstre hjørne av innholdsblokken:

  • Fontfamilie: Tahoma
  • Skriftstørrelse: 22
  • Skriftvekt: Vanlig
  • Anti-aliasing: Sterk
  • Farge: # 4b6262

Og legg til følgende styling:

  • Drop Shadow
  • Blandingsmodus: Multipliser
  • Opacitet: 27%
  • Vinkel: 125 grader
  • Avstand: 3px
  • Spredning: 0%
  • Størrelse: 2px
  • Indre skygge
  • Blandingsmodus: Multipliser
  • Opacitet: 75%
  • Vinkel: 125 grader
  • Avstand: 5px
  • Choke: 0%
  • Størrelse: 5px

Figur C

# 6 Neste, vil vi legge til et avsnitt innholdsområde rett under tittelområdet med følgende innstillinger:

  • Fontfamilie: Veranda
  • Skriftstørrelse: 14
  • Skriftvekt: Vanlig
  • Anti-aliasing: Glatt
  • Farge: # 091414

Figur D

# 7 Neste gang vil vi kopiere (Ctrl + C) begge tekstområdene og lime inn (Ctrl + V) dem til høyre for gjeldende tekstområder. Du kan også høyreklikke over hvert tekstområde-lag og velge Duplicate Layer; gi nytt navn til det andre området til tittel på Featured Content og bruk deretter Move Tool (V) til å skyve begge duplikatene over som vist i figur E.

Figur E

Lag bunntekst

# 8 Neste vil vi legge til i bunntekstområdet og lage en siste horisontale guide satt til 1000px.

Figur F

# 9 Ved hjelp av det rektangulære markeringsverktøyet (M) lager du et område hele bredden på lerretet og følg de to horisontale føringene for topp og bunn, og fyll det deretter med hvit bakgrunn som vist i figur G.

Figur G

# 10 Lag deretter en gradientstil med følgende innstillinger som vist nedenfor.

  • Forgrunnsfarge: # 63706f
  • Bakgrunnsfarge: # 748f8f

Figur H

# 11 Neste, vil vi legge til bunntekstinnholdet med flere tekstområder og ikoner for sosiale nettverk og typisk ansvarsfraskrivelse og copyrightinformasjon ved å bruke følgende styling:

  • Fontfamilie: Lucinda Sans Unicode
  • Skriftstørrelse: 12
  • Skriftvekt: Vanlig
  • Anti-aliasing: Ingen
  • Farge: #ffffff
Den første tekstblokken vil bli tegnet som vist nedenfor i figur I :

Figur I

# 12 Deretter legger vi til flere ikoner for sosiale medier, et sett med interaksjonsikoner sammen med tekstlige overskrifter i alle koder med de samme innstillingene for bunntekstfelt for bunntekstområdet, sammen med et deltakerparagraf, og copyright- og ansvarsfraskrivelsesnotater som vist i figur J nedenfor.

Figur J

Den endelige minimale hjemmesideoppsettet vises i figur K nedenfor med guidene fjernet. Figur K

Hvis du ønsket å ta designet til bare bein og lage et ekstremt minimalistisk nettsted, kan du eliminere områdene med omtalt innhold og bringe bunntekstseksjonene opp til rett under den delte bildeseksjonen, og beskjære lerretet for å eliminere den ekstra plassen fra bunnen. Mal-PSD-filen er inkludert i nedlastingen sammen med PSD-bildefilene som ble brukt i denne opplæringen. Bruk gjerne malen som utgangspunkt og modifiser den for å passe dine behov og krav.

© Copyright 2021 | pepebotifarra.com