Share
Oppdatering: Kodingstut nå tilgjengelig! I dag skal vi gå igjennom hvordan du lager din egen "saftige tabbe-glidebryter". Dette er en fin måte å legge til litt ekstra dybde og dimensjonalitet til dine egne motiver - og det er den perfekte løsningen for en bildeskytter!
Kodende oppdatering: Du kan nå hente den fulle kodende delen av denne opplæringen på Nettuts! Du spurte, og så mottar du :)
Og nå, for alle som vil ha en spill-for-spill, her er den komplette skriftlige versjonen av opplæringen. Du vil legge merke til små endringer fra videoen (videoen er ferdig på fluen), men de samme grunnleggende teknikkene gjelder for både walkthroughs.
Bildet som brukes til demoen, er et eksklusivt Envato Marketplace-tapet fra reAdactor. Du kan finne flere av disse kule tapetbildene her!
Vi skal starte på et 600x400 px dokument. Jeg har lagt til en lys grå bakgrunn med et subtilt rutenettmønster, slik at vi kan se vårt element pop av dokumentet litt bedre når vi lager det.
Start med å tegne et enkelt rektangel (ca. 450x270 px) på tavlen. Vi legger til et veldig lite slag rundt rektangelet gjennom lagalternativerpanelet (Stroke = 1px Outside, # c8c8c8). Grunnen til at vi legger til dette slag er å legge til litt adskillelse mellom rammen og bakgrunnen? Dette vil være spesielt viktig hvis du jobber på en hvit bakgrunn.
Deretter begynner vi vår "skygge" under rammen. Start med å bare ta tak i det grunnleggende børsteverktøyet og sett størrelsen til 40% og hardheten til 0%. Start et nytt lag, hold deretter nede Skift nøkkelen (for å holde linjen din rett) og tegne en kort linje (omtrent halvparten av rammens bredde). Å få dette perfekt spiller ingen rolle? Vi justerer størrelsen ved hjelp av transformeringsverktøyet i de neste trinnene.
La oss nå rotere det nylig børstede laget veldig mye; Vinkelen jeg brukte var 2,5, men du kan rote med den på egen hånd. Jo dypere vinkelen, jo mer "bøyde" skyggen vil virke senere. Du kan bruke enten Rotate eller Free Transform (Ctrl + T) for å gjøre trikset.
Dupliser det første børstet i "skygge" -laget (Ctrl + J) og vri det horisontalt (Rediger> Transform> Vend horisontalt). Resultatet skal være en skygge som er motsatt av den første.
Flytt begge skyggelagene bak rammen "Ramme" og skala dem (velg begge lagene og trykk Ctrl + T) slik at de passer like innenfor rammenes rektangel.
Til slutt flettes begge skyggelagene sammen (Ctrl + E), og skygger skyggelaget til riktig sted (bruk det grunnleggende utvalgsverktøyet [V] og bruk tastaturet til å knuse). Du kan også justere skyggelagets opasitet slik at det passer dine egne personlige preferanser. Jeg brukte omtrent 50%, du kan gjøre mer eller mindre i henhold til hva du er ute etter.
Bonustrinn: Hvis du vil, kan du tinker med skyggen enda mer ved hjelp av disse grunnleggende teknikkene samt "Gaussion Blur" -filteret. Jo mer uskarpt ut skyggen, desto mer spredt vil det vises. Du kan også tinker rundt med hvordan skyggen bøyer ut med verktøyet.
Ok, nå har vi vår grunnleggende bakgrunn og skygge. Det neste trinnet er å lage det indre "bildet" laget. Gjør dette ved å enten opprette et nytt rektangel (bruk samme slaglagsstil som den første) eller bare duplisere det opprinnelige laget, og bruk konverteringspunktet verktøyet til å knuse i hver side om lag 10px.
Du kan selvsagt justere avstanden i henhold til dine egne preferanser. Jo mer plass, jo større rammens polstring vises senere. Du kan også legge til en stor nederst polstring for å spare plass til en bildetittel og beskrivelse.
Deretter slipper du bildet du vil bruke på dokumentet (du kan dra det fra en mappe eller bruke Importverktøyet). Du vil skalere og plassere bildet over det indre bildeformslaget - og deretter gjøre bildet ditt til en Clipping Mask over det samme indre formlaget. Du kan gjøre det til en kappemaske ved å høyreklikke på bildelaget og trykke på "Create Clipping Mask".
Legg til en lys innerskygge ved hjelp av Layer Styles-panelet (Dobbeltklikk Formlag). Demoen bruker følgende innstillinger:
Igjen, dette er et tilfelle hvor du kan tinker med effekten for å få de resultatene du vil ha. En mørkere skygge vil gjøre bildet virke mer dramatisk og dypt innsett. En lysere skygge (eller ingen skygge i det hele tatt) vil gjøre bildet til å virke flattere.
Whallah!
Venstre og høyre flippeknappene på siden er en del av hovedappellen til denne typen glidebryter fordi de bryter utenfor rammen bare litt og skaper en mer interessant form for glideren vår.
Begynn med å tegne en sirkel (hold nede Skift-tasten for å holde den en perfekt sirkel når du bruker Ellipse-verktøyet). Størrelsen skal være omtrent 60px (du kan se på Info-panelet mens du tegner sirkelen for å se størrelsen som vises i teksten der).
Deretter legger du til 1px slag ved hjelp av samme farge som vi brukte til bakgrunnsrammen.
Som en bonus - legg til en lys dråpe skygge for å etterligne skyggen som vi trakk i under rammen. Drop Shadow som vi brukte var ca 15% opacity, Distance 3 og Size 4. Vinkelen skal reflektere vår lyskilde i midten av rammen - så i dette tilfellet er det omtrent 130 grader.
Legg nå våre piler. Du kan bruke en vanlig Photoshop Shape eller en ">>" tekstversjon av pilene ved hjelp av favorittfonten din. Du kan til og med tegne din egen i Illustrator hvis du foretrekker å få en virkelig unik form. I vårt tilfelle brukte vi «>>» ved hjelp av skriften Lucida Sans.
Deretter grupperer du sirkelformelaget og pillaget ved å velge dem begge og trykke Ctrl + G.
Tegn nå en maske over gruppen for å få det til å virke som om det bare knapt overlapper rammen vår. For å gjøre dette: Tegn et rektangulært Marquee-valg, og trykk deretter på "Legg til lagmask" -knappen når du har valgt gruppemappen.
Den gode tingen om denne "gruppen" masken er at den også maskerer alle lagstilene. Hvis vi bare prøvde å maske selve sirkelen, ble streken og skyggen også beskåret, noe som gjorde dem synlige over rammen (som vi ikke vil ha).
Til slutt, dupliser bare knappegruppen og vri den horisontalt. Vi flytter den til posisjon over til venstre side av dokumentet. Det eneste virkelige tipset her er at vi også må justere dropshadowens vinkel til omtrent 50 grader for å matche vår lyskilde i midten av rammen. Sørg for at du slår av Global Light-viften for å sikre at du ikke justerer den andre skyggen.
Det siste elementet i denne skyveknappen er den lille "sirkelknappmodulen" som viser hvor mange bilder du har i lysbildet.
Begynn med å lage en enkel 13px sirkel (igjen, hold Shift for å få den perfekt). Vi vil legge til en annen 1px-stroke rundt utsiden, med samme farge som alle tidligere streker (# c8c8c8 for demoen).
Til slutt legger du til en veldig subtil gradient over sirkelen (Lys grå [# D9D9D9] blanding til hvit øverst). Du kan justere fargingen av graden for å passe dine preferanser, men ideen her er å få sirkelen til å føles mer som en knapp som brukeren kan trykke ned på.
Dupliser den opprinnelige sirkelen et par flere ganger og knyt dem over til siden (du bør ha så mange sirkler som du har bilder i lysbilde).
Disse kretsene er veldig vanskelig å se nå? så la oss legge til en bakgrunn for at de skal være litt mer synlige på lysbilder.
Start med å tegne et avrundet rektangel med en radius på 10 px (du kan justere radiusen til dine egne ønsker). Sett deretter fyllet til 50% for å gjøre det litt gjennom.
Sist, sett en 2px Stroke (# a7a7a7) med en opasitet rundt 50% for å gjøre den også gjennomsiktig. Den endelige effekten skal være et gjennomsiktig avrundet rektangel med en subtil grense.
Endelig skritt! Legg til en mindre sirkel over en av de opprinnelige sirkler og plasser den i midten. Juster fargen (du kan bruke en gradient eller solid farge) for å passe dine egne merkevarefarger. Du vil merke at i demoen brukte vi de samme fargene som vi bruker i Webdesigntuts-logoen.
Fantastisk arbeid! Nå som du har grunnleggende skyveoppsett, kan du enkelt justere størrelsen som passer dine egne prosjekter. Du kan også reskin dette for å bruke forskjellige farger bakgrunner, restyled knapper, eller til og med legge til teksturer til rammen selv. Grensen er virkelig opp til deg - bare husk de grunnleggende prinsippene som vi installerer her, og du vil gjøre det bra.
Accentsconagua