Share
Uklare bakgrunnsbilder er en varm trend i webdesign for øyeblikket og kan legge til dybde og interesse for ethvert webdesign. I denne opplæringen vil jeg gå gjennom alle trinnene for å lage en slående visuell heltenhet (les: din viktige markedsføringsmelding) perfekt for en lysbildeserie eller et bannerområde på din neste nettside.
I denne opplæringen vil vi fokusere på å bruke ikke-destruktiv, redigerbar og skalerbar fotoshopteknikk hvor vi kan inkludere smarte filtre, maskering og vektorformer. Selv om det kan være litt mer arbeid, tar deg tid til å sikre at ditt endelige produkt kan redigeres fullt ut for å svare på fremtidige endringer, er vel verdt innsatsen..
Klar til å hoppe inn? Brann opp Photoshop og la oss komme i gang.
Vi bruker flere ressurser som ikke er inkludert i kildefilene.
Merk: Photoshop CS6 ble brukt til å lage denne opplæringen, men det er ikke nødvendig å oppnå det endelige resultatet, du kan bruke tidligere versjoner uten problem.
Jeg er også på et Windows OS, så jeg holder fast med Ctrl og Alt for å beskrive hurtigtaster. På en Mac, Ctrl → Kommando og Alt → Alternativ.
La oss starte med å sette opp et nytt dokument og sette vårt globale lys for alle lagseffekter.
Sett det globale lyset i en vinkel på 90 ° og en høyde på 45 ° (Lag → Lagstil → Globalt lys).
Merk: I brukergrensesnittdesign finner du at Global Light ofte er satt til 90 °, slik at de globale innstillingene forandres før du starter med et nytt brukerprosjekt, en god vane å komme inn i!
Opprett et nytt dokument med dimensjoner på 960px x 568px (et 16: 9-forhold) og Bakgrunnsinnhold av gjennomsiktig.
Deretter skal vi importere vårt bakgrunnsbilde og endre størrelsen på det for å passe det nye dokumentet.
Åpne Toronto City Hall-bildet i et nytt dokument og endre bildestørrelsen til 960px x 720px (Bilde → Bildestørrelse).
Velg hele bildet (Ctrl + A), og kopier det til utklippstavlen (Ctrl + C). Gå tilbake til vårt nye dokument og lim inn bildet i et nytt lag (Ctrl + V).
Bruk flytteverktøyet (V), dra bildet opp for å justere den nederste kanten av bildet til bunnen av dokumentet.
Gi navn på dette laget 'rådhuset'
Dupliser "rådhuset" -laget ved å høyreklikke på laget i lagpanelet og velg 'Duplicate Layer'. Gi nytt navn til dette nye laget "rådhuset uskarphet"
Deretter legges vi til et smart filter til laget. For å gjøre dette, må vi konvertere "rådhussløring" -laget til en smart gjenstand.
Høyreklikk på "rådhuset uskarphet" lag og velg 'Konverter til smart objekt' fra menyen.
La oss legge til en Gaussian Blur til vårt bakgrunnsbilde for å gi det som "gjennom kaffebutikkvinduet" se: (Filter → Blur → Gaussian Blur). Gi den en radius på 14,0 piksler.
Merk: Dette er den første av våre ikke-destruktive teknikker som vi skal bruke i dag. Du vil notere fra bildet over at Gaussian Blur har blitt lagt til som et "Smartfilter", og brukes ikke på selve bildet. Det betyr at vi kan endre innstillingene, legge til flere smarte filtre eller fjerne effekten helt - alt uten å skade det opprinnelige bildet.
En annen ting å merke seg er at hvis du bytter synligheten til rådhuset, vil du legge merke til at noe gjennomsiktighet skinner gjennom på kanten av bildet på grunn av uskarphetens effekt på "rådhusets uskarphet" -lag. Å forlate "rådhuset" laget synlig glatter ut kantene pent.
Som det er, er bildet litt mørkt. La oss lette opp ting og gi det en luminescerende følelse ved å legge til et nytt kurvesjusteringslag (Lag → Nytt justeringslag → Kurver) og dra midthåndtaket opp og litt til venstre, som vist ovenfor.
Flott arbeid - det er bakgrunnen som er ferdig. La oss ta et øyeblikk for å flytte disse lagene til en ny gruppe (Ctrl + G) kalt "Bakgrunn" for å holde Photoshop-dokumentet pent og pent.
Lag et nytt lag kalt "nederste glasspanel" og bruk markeringsverktøyet (M) å skape et rektangulært utvalg 960px bredt og 120px høyt. Fyll utvalget med hvitt (#ffffff) (Ctrl + Bkspace).
Dobbeltklikk laget for å åpne lageffekter og bruk følgende innstillinger:
I Blending-alternativer angir du Opacity til 27% og Fyll Opacity til 0%
Sett en innside 1px slag, farge #cecece.
Angi en hvit (#ffffff) indre skygge med en Blend Mode satt til Lineær Dodge (add) og en opacity på 15%. Still inn avstanden til 1px og størrelsen til 6px.
Sett en 90 ° lineær gradientoverlegg som varierer fra # 787878 ved 0% til #ebebeb ved 100%. Bytt blandemodus til lysstyrke og sett opaciteten ved 55%.
Glassplaten ser bra ut, men vi trenger å ta en del vekk fra toppen for å gi plass til vår Call-to-Action-knapp. For å gjøre dette, skal vi bruke en vektormaske - en annen ikke-destruktiv og redigerbar Photoshop-teknikk.
Åpne sti-vinduet (Vindu → Baner) og klikk på 'Opprett ny sti' ikonet nederst på panelet.
Gi nytt navn til den nye banen 'panelmask'.
Bruk formverktøyet (U) sett til banen, opprett et rektangel 960px x 120px nederst i dokumentet, som dekker vår "nederste glasspanel" -lag.
Nå sett formverktøyet til 'Trekk forfra' og tegne et avrundet rektangel 420px x 100px med en radius på 50px.
Når du har de to banene, velg dem begge med direkte valgverktøyet (EN) og hold Shift mens du klikker på hver bane. Bruk justeringsverktøyet til å justere de horisontale sentrene, og luk det avrundede rektangelet på plass slik at dets vertikale senterpunkter møter rektangelens øverste kant som vist ovenfor.
Pass på at både "nederste glasspanel" -laget er valgt i lagpanelet, og vår "panermask" -bane er valgt i banepanelet.
På bunnen av banepanelet klikker du på 'Opprett ny maske' ikon en gang for å lage en lagmaske, og klikk deretter på den igjen for å lage en vektormask som tar en scoop ut av vår nedre glasspanel. Lagpanelet ditt bør se ut som bildet ovenfor.
Merk: Fordi vi har tatt deg tid til å bruke vektorbaner for å lage vår maske i stedet for å bruke et rasterbilde, har vi gitt oss muligheten til å endre, redigere, legge til, slette og skala masken når som helst uten å miste kvalitet på noe stadium.
Hvis alt har gått i plan, bør arbeidet ditt i fremtiden se ut som bildet ovenfor.
Deretter lager vi en bakgrunn for vår knapp.
Lag et nytt lag (Ctrl + Shift + N) og nevn det 'knapp bakgrunn'. Bruk formverktøyet til 'Shape', og opprett et avrundet rektangel 410px x 90px med en hjørne radius på 45px. Sett fyllet til #ffffff.
Senter formen midt på "scoop" - etterlater 6px mellom bunnen av formen og den øvre kanten av "nederste glasspanelet".
Åpne lag-effekter-panelet for "knappen bakgrunns" -laget og sett inn følgende lagstiler:
I Blending-alternativer angir du Opacity på 20%, blandemodus til Normal og Fyll Opacity til 30%.
Sett den indre skyggen til en Linear Burn-blandingstilstand (# 000000) med en dekning på 9%. Still inn Avstanden til 1px og størrelsen til 0px.
Sett en dråpe skygge med en blanding av Linear Dodge (Add), (#ffffff) og Opacity på 34%. Still inn avstanden ved 1px og størrelsen på 0px.
Deretter begynner vi å jobbe på knappen selv.
Opprett et nytt lag kalt 'knappen hoved'. Tegn et avrundet rektangel ved hjelp av formverktøysettet til 'Shape' 390px bredt med 70px høyt og en hjørne radius på 35px. Sett fyllet til # 007dba.
Juster de vertikale og horisontale sentrene til "knappens hoved" og "knappens bakgrunn" -lagene.
Åpne lagvirkningspanelet og bruk følgende innstillinger:
Sett en 1 px innvendig strekk med en blandingstilstand og en 90 ° lineær gradient som går fra # 000000 ved 0% til #ffffff ved 100%
Sett en innerskygge (#ffffff) med en blendmodus for lineær dodge (add) og en opacity på 7%. Still avstanden til 2px og størrelsen til 1px.
Legg til en #ffffff Color Overaly satt til en Linear Dodge (Add) Blend Mode og ring opakten ned til 13%.
Sett graderingsoverlegget med en blandingstilstand for lineær brenn, en opasitet på 24% og en 90 ° lineær gradient med # 000000 ved 0% og #ffffff ved 100%.
Sett Drop Shadow med Blend Mode of Multiply, en opacity på 30%, # 000000 og sett avstanden ved 2px og størrelsen på 4px.
Merk: Du har kanskje lagt merke til at vi ikke satte gradientoverlegget som mørkblått til lyseblått (noe som ville ha resultert i en lignende effekt). Grunnen til at du bruker en form og den svarte til hvite lineære brenngradienten er at vi nå kan endre fargen på knappen veldig enkelt ved å endre fyllingen. Prøv det nå, og prøv å endre fyllingen til en annen farge.
For å legge til litt tekstur på knappen, legger vi til et støyoverlegg.
Lag et nytt lag og nev det "støy".
Velg hele dokumentet (Ctrl + A) og fyll bakgrunnen med #ffffff (Ctrl + Bkspace).
Forsikre deg om at forgrunnen din er satt til svart og forgrunnen din er satt til hvit (D), legg til 200% Uniform støy, slik at avkryssingsboksen 'Monochromatic' er merket (Filter → Støy → Legg til støy ...).
Velg "Støy" -laget og sett det som en klippermaske (Lag → Lag Clipping Mask), som begrenser støyen bare til knappformen.
Still blandemodus på klipping masken til Multiply og Opacity til 5%.
Det neste trinnet er å legge til et lite høydepunkt øverst på knappen (det er de små tingene som teller).
Dupliser "hovedknappen" og dra den over støyeklippermasken. Still fyllingen til 0%.
Høyreklikk på det nye "høydepunktet" -laget og fjern lagstilene ved å velge 'Clear Layer Style'.
Åpne lagvirkningspanelet og bruk følgende innstillinger:
På skjermbildet Blandingsalternativer merker du av for "Layer Mask Hide Effects".
Sett inn et 2px innvendig slag satt til 0% opacity.
Merk: Dette effektivt "innspiller" følgende lagestil vekk fra kanten av knappen.
Angi en indre skygge med en Linear Dodge (Add) Blend Mode, sett til 18% Opacity og bruk #ffffff.
Still avstanden på 4px og størrelsen på 4px.
Velg «høyde» -laget og legg til en ny maske (Lag → Lagmaske → Avslør alt).
Bruk gradientverktøyet, tegne en lineær gradient over knappen, som vist ovenfor. Still inn gradienten ved hjelp av tre # 000000 stopp, med 50% stopp satt til 0% opacity.
Hvis du har fulgt nøye, må knappen din nå se slik ut:
Uten en lyskilde ser vårt høydepunkt litt ut av sted. Vi legger til en fin glød effekt for å løfte knappen og bakgrunnen.
Lag et nytt lag og nev det "glød".
Bruk av gradientverktøyet (G) sett til radial og hvit til gjennomsiktig, tegne en stor hvit gradient over knappen som vist på bildet over.
Lag et markeringsvalg med Ctrl + klikke på miniatyrbildet "Bakgrunnsbakgrunn" i lagpanelet.
Lag en lagmaske (Lag → Lagmaske; → Skjul alt).
Endelig endrer du blandingsmodusen for "glød" -laget til Linear Dodge og 50% opacity.
Nå som knappformen har blitt opprettet, la vi legge til noen handlingstekst.
Bruk håndtakene til knappformen som referansepunkter, dra ut tre guider som vist for å hjelpe deg med å plassere tekst og ikonformer på knappen.
Bruk verktøyet Type (T), skriv inn i teksten din i den gigantiske fonten med en kerning på 60, skriftstørrelse på 14pt og en farge på # dce2e5
Sett teksten til venstre og juster teksten til det vertikale midten av knappformen.
Åpne lageffekter-vinduet og bruk følgende effekter:
Sett en hvit innerskygge (#ffffff) med en blendmodus av "lysere" og en oppakthet på 100%. Still inn avstanden ved 1px og størrelsen på 0px.
Angi drop shadow til Blend Mode av 'Color Burn', en farge på # 00022a og en Opacity på 24%.
Still avstanden ved 2px og størrelsen på 1px.
For å fullføre knappen må vi legge til ikonet og en skillelinje. La oss starte med ikonet.
Velg det egendefinerte formverktøyet (U), klikk på innstillinger knappen og velg "Legg inn figurer".
Naviger til filen 'retro_hand.csh' som er levert i ressursene, og legg den inn i din nåværende figurliste.
Opprett et nytt lag og kaller det 'håndikon'.
Når håndformen er valgt, og sørger for at innstillingen 'Definerte proporsjoner' brukes, tegner du en form på 19px høy og 34px bred.
Fyll formen med fargen # dce2e5.
Åpne lageffekterpanelet og bruk følgende effekter:
Sett en indre skygge med en blanding av Lighten (#ffffff) med en 100% opasitet. Still inn avstanden ved 1px og størrelsen på 0px.
Sett Drop Shadow med Blend Mode of Color Burn med en farge på # 00022a og en opasitet på 24%. Still avstanden til 2px og størrelsen på 1px.
Det neste trinnet er å legge til en linje som skiller ikonet fra teksten.
Tegn en 1px x 70px svart linje ved hjelp av formverktøyet (U) og plasser den i midten av mellomrommet mellom teksten og håndikonet (bruk informasjonspanelet for å hjelpe deg her).
Bruk følgende lagstiler:
Still fyllformen på formen på 0% og merk av 'Layer Mask Hides Effects' avkrysnings.
Angi fargekoverlegget til en farge på # 044b71, en blandingsmodus for overlegg og en opasitet på 73%.
Sett Gradient Overlay til en 90 ° lineær gradient med # 000000 ved 0% og #ffffff ved 100%. Still Blend-modusen til Lineær brenning og reduser Opacity til 9%,
Sett det ytre glødet til #ffffff, blendmodus til skjerm, opaciteten til 26% og størrelsen til 1px.
Deretter trenger vi en lagmaske for å fade ut de harde kantene på linjen.
Legg til en lagmaske på linjeskiltet ved å klikke på ikonet "Lag maske" nederst på lagpanelet.
Bruk en myk svart børste (Størrelse ~ 55px og 0% hardhet), maling bort begge ender av linjen. Du vil se for å lage en subtil fade-effekt. Områdene i rødt i bildet ovenfor kan brukes som referanse.
Flott! Vi har nå fullført knappen vår. La oss ta en titt på det vi har laget så langt:
Før vi går videre til prosjektets endelige skritt, la oss ta et øyeblikk for å sikre at alle våre lag er pent oppkalt og gruppert.
Lagpanelet ditt bør se slik ut:
Raskt tips: Vil du ha en enkel måte å kollapse alle lagseffekter for hvert lag? Grupper lagene og på det øverste laget, Alt + Klikk pilen ved siden av fx-ikonet. Alle lagene effekter under det vil også kollapse - en flott måte å holde lagpanelet ditt håndterbart!
La oss gå videre til typografikkomponenten i prosjektet.
Bruk verktøyet Type (T), skriv inn teksten som to separate lag med innstillingene som vises ovenfor.
Tegn to guider, en ved 130px fra toppen av dokumentet og den andre ved 258px. Plasser tekstlinjens øvre kant på støttelinjene.
Velg begge lagene i Lagpanelet (Ctrl + Click), velg et utvalg av hele dokumentet (Ctrl + A) og juster de horisontale sentrene (Lag → Juster lag til utvalg → Horisontale sentre).
Nå åpner du fx-panelet for "Professional Services" -laget og legger til følgende effekter:
Angi den innvendige skyggen med en blandingsmodus for Multiply, en farge på # 585858 og en Opacity på 54%.
Angi vinkelen til 135 ° (sørg for at Global Light er unticked), og still inn Avstanden ved 1px, Choke til 100% og størrelsen til 0px.
Sett en innvendig glød med en blanding av skjerm, en opasitet på 59% og en farge på #ffffff. Sett Choke til 100% og størrelsen til 1px.
Sett overtoningsoverlegget med en blendmodus for lineær brenn, en opasitet på 18% og en vinkel på 90 °. Graden selv er svart → gjennomsiktig svart.
Sett en Drop Shadow med en blanding av Linear Burn, en farge på # 000000 og en Opacity på 24%. Still inn avstanden til 2px, spred til 8% og størrelsen til 3px.
I lagpanelet holder du inne i fx-ikonet for "profesjonelle tjenester" -laget Alt + klikk og dra ikonet på laget "eksepsjonelle priser" for å kopiere lagestilen.
Vi er på strekningen nå! La oss fullføre det typografiske elementet i prosjektet.
Lag et nytt lag og legg til ordet "At" med Type-verktøyet. I tegn-panelet angir du skrifttypen til Visdomskript AI, skriftstørrelsen til 12pt og fargen til hvit.
Velg alle tre tekstlagene i lagpanelet (Ctrl + Click), bytt til Flytt-verktøyet (V), og bruk justeringsalternativene i egenskapslinjen for å sentrere lagene (Juster horisontale lag) og legg deretter til en jevn mengde mellomrom mellom de tre linjene med tekst (Distribuere vertikale sentre).
Åpne lagvirkningspanelet og bruk følgende effekter:
Endre fyllbarhet i panelet Blandingsalternativer til 42%.
Legg til en hvit (#ffffff) Innerskygge med en blendmodus satt til skjerm og en opacitet på 22%. Still inn avstanden til 1px og størrelsen til 0px.
Legg til en 90 ° lineær gradientoverlegg (#ffffff → #dedede) med en blendmodus satt til Linear Dodge (Add). Vind ned opaciteten til 16%.
Legg til en svart dråpe skygge sett Linear Burn og en opasitet på 8%. Still inn avstanden til 1px og størrelsen til 0px.
Nå, la oss legge til noen dekorative figurer i tekstdelen av prosjektet for å knytte sammen alle elementene.
Dra ut fire nye guider fra linjalen (Hvis du ikke kan se linjalen, velger du Se → Linjaler) og juster dem til kantene på teksten, som vist ovenfor.
Disse vil hjelpe oss å justere våre barer i følgende trinn.
Opprett et nytt lag kalt "left bars".
Senterlinjert til tverrstangen av 'A' i 'At' tekstlaget, tegne et avrundet rektangel 275px bredt ved 4px høyt med en hjørneradius på 4px. Sett fyllet til hvitt (#ffffff).
Kontroller at innstillingen for formkomponenter er satt til 'Kombinere figurer', tegne ut to identiske figurer og sett en over og en under det første avrundede rektangel som vist ovenfor.
Koble formene til posisjon med piltasten for å sette et 2px mellomrom mellom hver av figurene. Bruk zoomeverktøyet (Z) og pikselrutenettet (Vis → Vis → Pikselrutenett) for å hjelpe deg her.
Kontroller at gruppen av figurer er plassert 10px til venstre for guiden på venstre kant av 'At'-laget, som vist ovenfor.
Zoom inn i nærheten av venstre kant av vår formgruppe (Z). Bruk Direct Selection-verktøyet (EN), velg de tre endehåndtakene til midtre rektangelet, og hold nede Skift, trykk på venstre pilknapp to ganger for å redusere formens bredde med 20px (Skift + Pil nøkkelen beveger ethvert element i 10px trinn).
Gjenta denne prosessen for bunnrektangel, denne gangen reduserer formens bredde med 30px.
Tips: Den enkleste måten å velge håndtak på er å dra en boks rundt enden av formen med det direkte utvalgsverktøyet, som vist på bildet over.
Åpne lagvirkningspanelet for "left bars" -formen og bruk følgende innstillinger:
I blendingsalternativer-panelet må du sette fyllbarhet til 20%.
Sett en innerskygge med hvit farge (#ffffff), en blendmodus på skjermen og en opasitet på 22%. Still inn avstanden til 1px og størrelsen til 0px.
Legg til en 0 ° lineær gradient sett til Lineær Dodge (Add) og en opasitet på 16%. Angi gradienten med verdiene #ffffff ved 0% og #dedede ved 100%.
Legg til en Drop Shadow med en avstand på 1px, en farge på # 000000 og en Blend Mode of Linear Burn. Still Opacity til 9%.
Dupliser "left bars" laget (Høyreklikk → Dupliser Layer ...) og navnet på det nye laget "høyre barer".
Vend laget horisontalt (Rediger → Overfør → Flip Horizontal) og plasser laget til høyre side av 'At'-laget som vist ovenfor.
Gratulerer med å gjøre det hele veien gjennom denne opplæringen! Slå av guider (Ctrl + H), endre størrelsen på zoom til 100% (Ctrl + 1) og beundre arbeidet ditt:
La oss ta et øyeblikk til å gjennomgå noen av de viktigste teknikkene som vi dekket i denne opplæringen:
Takk for at du bodde hos meg helt til slutten, og jeg håper at du har hentet opp noen photoshop-triks og arbeidsflyttips som vil hjelpe deg med ditt neste prosjekt. Hvis noen av trinnene har forlatt deg med å skrape hodet ditt, vennligst legg igjen en kommentar nedenfor - Jeg vil være sikker på å ta opp eventuelle spørsmål du måtte ha.
Accentsconagua