Share
I leserforslagene nylig fant jeg en forespørsel om hvordan å produsere hyllegrensesnittet på det utrolig kule nettstedet til Dragon Interactive, et Los Angeles-basert reklamebyrå. Så her er en metode for å produsere hylleffekten.
Redaktørens merknad: Dragon Interactive ba oss om å merke seg at denne opplæringen faktisk ikke er skrevet eller støttet av Dragon selv.
Bruk pennverktøyet (P) til å lage en bane som vist nedenfor. Ikke bekymre deg for bakgrunnsfargen. Jeg valgte denne fargen slik at du kan se banen. Deretter går du til Path Palette og klikker Create the New Path-knappen. Dette vil opprette et nytt banelag og lagre eksisterende vei til laget under det. Jeg heter min "Separator".
Merk: Hvis du til enhver tid mister valget av banen, går du til banebanen og velger separatorlaget. Dette er viktig for de kommende trinnene.
Opprett et nytt lag, velg børsteverktøyet (B), og velg en 1px, hard børste. Bytt forgrunnsfargen til en svart og velg deretter Pennverktøyet igjen. Høyreklikk på banen og velg Stroke Path. I boksen som dukker opp, kontroller at Brush Tool er valgt, og at Simulate Pressure er slått av. Ring dette laget "svart separator". Trykk Enter hvis banen blokkerer visningen av den svarte linjen. Og ikke bekymre deg, som jeg tidligere nevnte, kan du velge denne banen i Paths Palette på nytt.
Dupliser "svarte separator" -laget, kontroller at Move Tool (V) er valgt, og trykk deretter på venstre piltast en gang. Dette vil knyke den linjen en piksel til venstre, nå treffer du Ctrl + I for å invertere fargene. Navngi dette laget "hvit separator" og plasser dem i et lagsett som heter "separator". Merk at knappen Create a New Group er rett ved siden av knappen Lag et nytt lag. For nå, hold modusen til dette laget satt til Normal Selv om vi vil endre det senere i opplæringen.
Velg Paint Bucket Tool (G) og bruk innstillingene som vises på skjermbildet nedenfor. Deretter lager du et lag under separatorsettet og fyller venstre side av separatoren med # 3d3d3d.
Lag et lag over det og gjør det samme til høyre side, unntatt denne gangen bruker # 111111. Nudge "mørk grå" fyll, en piksel til venstre (ved hjelp av piltastene!) Og "lys grå" fyll, en til høyre. Du bør være oppmerksom på at hvis du er i 100% zoomvisning, vil du trykke 1px på venstre / høyre piltast, men hvis du zoomer ut lenger, vil den flytte et annet antall piksler. For eksempel, hvis du er på 66% visning, så trykker du piltasten en gang vil flytte 2px, med 50% se det vil flytte 3px, og så videre. Så sørg for at du er 100% :-)
Etter dette, bør du bruke børsteverktøyet eller blyantverktøyet, børste langs sidene av lerretet for å fylle den ene gjennomsiktige pikselbacken med riktig farge. Slipp disse to i et sett som heter "bakgrunn".
Vi har vår grunnleggende oppsett klar. Nå er det på tide å legge til høydepunktene og skyggene. Opprett en gradient med fargen # 707070 som vist under og deretter gradientfyll et nytt lag med den gradienten. Pass på at størrelsen på gradienten er omtrent den samme som min. Hvis du har problemer med gradienter, kan du enten utvide dem vertikalt ved å trykke Ctrl + T og dra dem ut vertikalt, eller du kan bruke Filter> Blur> Motion Blur-filteret (jeg foretrekker den frie transformasjonen).
På toppen av det, på et nytt lag, lag en lignende smal gradient fylt med hvitt. Sett det til Overlegg og slipp Opacity til 40%. Jeg legger disse to lagene i et sett som heter "høydepunkter".
Skyggene ble opprettet på en lignende måte. Først en "stor skygge" gradient som bruker svart med laget og satt til Soft Light og 80% Opacity, ble en utstrakt gradient opprettet. Deretter ble det lagt til en "liten skygge", igjen ved å bruke svart, men denne gangen ble laget satt til Overlay og Opacity falt ned til 40. Disse to lagene ble satt i et sett som heter "skygger".
Høydepunktene og skyggene er altfor definerte på det mørke grå området-tiden for å fikse det.
Sett "skyggene" og "høydepunktene" inn i et nytt sett. Jeg ringte min S / H. Sørg for at høydepunktene som er angitt under skyggene er satt. Legg til en lagmaske på S / H-settet.
Nå Ctrl-klikk på ditt "mørkegrå" lag. Denne gangen bruker du en svak børste med lav opasitet over det maskerte området innenfor utvalget. Med hvert slag slår skyggene og høydepunktene bort. Reguler opaciteten til din svarte børste for å få større kontroll over gjennomsiktigheten.
Jo mer ugjennomsiktig børsten, jo mer gjennomsiktig blir skyggene og høydepunktene. Hvis du fortsatt føler at du trenger enda mer kontroll, kan du legge til masker til lagene selv. Hvis du for eksempel legger til en maske på "høydepunktet", lar du deg bare redigere opaciteten til laget. Bruk dette til din fordel.
Nå kommer den harde delen. Avhengig av din smak og dyktighet, må du nå pusse inn flere skygger og høydepunkter. Jeg foreslår at du legger hele penselarbeidet inn i et separat sett kalt "Pensel" øverst i dokumentet. Bruk svake børster med lav opasitet for å legge til skygger. Tålmodighet er nøkkelen her. Det er ingen fast måte å gjøre det på. Jeg brukte en stor (180px), myk, svart pensel satt til 10% Opacity og tappet langs kantene.
Dupliser "bakgrunn" lagsettet og trykk Ctrl + E. Dette vil rasterisere det i et enkelt lag. Bruk Dodge og Burn Tools for å legge til flere høydepunkter og skygger om nødvendig. Fremhevsmodus fungerer best her, med lav eksponering (rundt 15-20%).
Hittil har vi brukt separatoren for å hjelpe oss i prosessen med skyggene / høydepunktene etc., slik at vi har en klar oppdeling mellom lys og mørkt område. Nå skal vi fullføre dette designet. Sett "separatoren" satt til Overlay. Wow, et inntrykk vises! Hvis du ikke er fornøyd med det, dupliserer du både de "hvite separatorene" og "svarte separator" -lagene og knyter dem en piksel til høyre. Det skaper et mindre fremtredende utseende.
Effekten er ikke for vanskelig å oppnå. Da jeg først analyserte nettsiden, forsto jeg at formen kunne opprettes med banenverktøyet, og resten var bare en haug med skygger og høydepunkter som kunne opprettes takket være en kombinasjon av børsting og gradienter. Jo mer arbeid du legger inn i disse skyggene, jo bedre sluttresultatet.
Men vent, dette ser ikke ut som Dragon Interactive Web-siden!
Nei det gjør det ikke. Denne opplæringen ble skrevet for å vise deg hvordan denne 3D-effekten er opprettet. Dragon Interactive-nettstedet har mye mer til det enn dette grensesnittelementet, og du kan lære mye ved å studere hvordan de har plassert, farget og størrelse objekter. Generelt er det ikke en dårlig ide å analysere noe design du kommer over og tenk på hvorfor designeren har gjort det de har gjort, så vel som hvordan de gjorde det.
Accentsconagua