Share
Med denne opplæringen vil vi opprette en høyteknologisk stilknapp som kan brukes i splash-sider, applikasjoner eller Powerpoint-presentasjoner. Vi vil bruke Illustrator til å lage komplekse vektorer og Photoshop for å utvikle realistiske effekter.
Ved hjelp av Illustrator lager vi et rektangel med størrelsen som vises. Med rektangulærverktøyet klikker vi på arbeidsområdet og et vindu vil vises som gjør at vi kan bestemme nøyaktige størrelser for objektet. Jeg anbefaler å angi Illustrator-innstillinger ved å bruke piksler som måleenhet.
Vi legger en veiledning som referanse for horisontal justering. Ved hjelp av Plus-pennverktøyet (for å legge til ankerpunkter til en eksisterende vektor) legger vi til ett ekstra ankerpunkt i rektangelens overkant.
Nå velger vi dette nye ankerpunktet og tar det høyere enn linjen, og vi skiller det nedre ankerpunktet fra hverandre for å skaffe et objekt med denne tilnærmede formen.
Med ankerpunktshåndtakene bruker vi øvre punkt som en akse for en myk kurve.
Nå må vi få to gjenstander som vil integrere et trepunktsobjekt. Vi roterer denne vektoren ved hjelp av sin sentrale bunndel som rotasjonsakse. For å starte velger vi rotasjonsverktøyet og klikker på nederste del. Da vil vi se markørendringen til en liten svart pil.
Ved å trykke på Alt-tasten (som den brukes til å duplisere - du vil se den svarte pilen sammen med en hvit pil), drar vi objektet. Vi bruker informasjonsvinduet til å rotere duplisert objekt i en viss grad. Med tanke på dette er et trepunktsobjekt, må vi dele 360 ° for dette nummeret (3), så vår dupliserte vektor må rotere 120 °. Dra den til du ser dette tilnærmede tallet i Info-vinduet.
Ved å trykke Ctrl + D (Windows) kopierer vi automatisk det vi har gjort. Så denne vektoren blir duplisert igjen ved 120 °.
Vi forener disse objektene i en. I Pathfinder-vinduet forener vi vektorer: klikk på Unite-alternativet og klikk på Utvid-knappen for å konvertere gruppen til en solid gjenstand.
Nå runder vi hjørner av dette objektet. Gå til Effekt> Stylize> Round Corners.
Angi en radius på 10 piksler, og forhåndsvisning av resultatet ved å merke av for forhåndsvisningsboksen. Radius avhenger av kurvamplitude du har trukket i hovedobjektet. Med Forhåndsvisning-alternativet vil du innse om Radius bløder riktig hjørner: Hvis mengden piksler er overdreven, ser objektet seg forvrengt og ikke mykt avrundet.
La oss nå skille utseendet (den opprettede effekten) fra den opprinnelige vektoren. Gå til Objekt> Utvid Utseende og få den endelige vektoren.
Dette er resultatet av vårt arbeid med vektorer i Illustrator. Det er et komplekst objekt som skal gjøres manuelt, og derfor bruker vi noen teknikker for å oppnå en symmetrisk og ergonomisk vektor.
Siden vår knapp vil ha en indre innføring - en slags montert gjenstand i frontpartiet - vi gjentar de forrige trinnene, men denne gangen med en mye mindre og kortere gjenstand.
Etter nøyaktig samme trinn fra trinn 1 til trinn 12, oppretter vi dette nye objektet. Resten av vektorene kan opprettes manuelt eller på en automatisk måte uten så mye kompleksitet.
Vi lager bare en halvdel av et nytt objekt, og så reflekterer vi det for å gjøre det symmetrisk. Vennligst følg forsiktig trinnene du ser på denne grafikken.
Ved hjelp av Reflect-verktøyet dupliserer vi objektet som holder Shift + Alt-tastene trykket inn.
Nå forener vi begge halvdelene ved hjelp av Pathfinder-verktøyet. Du kan slette de resterende ankerpunktene i denne foreningen med Minus Pen-verktøyet.
Vi bruker samme dupliseringsmetode som beskrevet tidligere, roterer objektet 120 ° for å oppnå også 3 identiske objekter og jevnt fordelt.
Til slutt lager vi en enkel sirkel, en vektor som vil bli brukt som lysdioder som vil lyse opp knappen i sin svingestatus. Vi vil fullføre redigeringen i Photoshop for å legge til maskindeteknikker med formaterte lag.
Nå velger vi alle vektorer og trykker Ctrl + C (Windows) vi kopierer dem til systemutklippstavlen.
Vi lukker Illustrator og vi åpner Photoshop. Vi lager en .PSD på 1024x768 piksler og denne innledende konfigurasjonen.
Vi maler det første laget i svart. Deretter bruker vi en lagestil for å lage en bakgrunnsgradient.
Ved å bruke mørkegrå og svarte farger, oppretter vi en radial gradient og tar den til sin maksimale skala (130-150%). Husk at i dette lagestilvinduet kan du dra gradienten for å ta sitt senter til stedet på skjermen du ønsker.
Nå limer vi vektorer som formlag. Ctrl + V eller Rediger> Lim inn.
Vi har vektorer i ett formlag, og vi må skille dem i forskjellige lag. La oss duplisere så mye lag som deler vi har -4 i dette tilfellet - og eliminere unødvendige objekter på hver av dem som forlater formen vi er interessert i.
Ordren på lagene er den du ser på bildet, og ikke glem å nevne hvert lag for å organisere arbeidet ditt bedre. Noen lag vil bli lagt til disse som vil bli opprettet helt i Photoshop. Vi legger til lagstiler på hovedknappen vår.
Gjør et dobbeltklikk på laget ved hovedknappvinduet, vi åpner redigeringsvinduet for denne lagestilen. På "Blandingsalternativer: Standard" tar vi opaktheten til dette laget til null for å se bare våre lageffekter. Vi starter med å legge til en sirkulær gradient med samme bakgrunnsfarger # 333333 (mørkegrå) og # 000000 (svart). Pass på at denne gradienten er myk fra midten til kanten, og øker størrelsen på opptil 120%.
Med en indre skygge og unclicking Bruk Global Light-alternativet (som vi alltid vil bruke ved 90 °), reverserer vi denne skyggen og drar vinkelredigereren av skyggen til -90 °. Dette vil hjelpe oss å forsterke de nedre områdeskyggene ...
Vi har avsluttet den første delen av knappredigeringsprosessen. Vi har nå klar den frontale delen av den som har en ugjennomsiktig overflate som vi senere vil legge til glans og pseudo 3D-ekstruderinger.
Nå lager vi et kromset slag rundt knappen. Vi legger til en 3 pikslet Stroke med Gradient type fyll. Vi legger til noen flere detaljer til denne gradienten inne i strekningen. Vi reproduserer en forkromet metallreflekterende overflate der vi bruker ressursen til å reflektere horisonten og himmelen til et utendørs scene.
Vi bruker den Reflekterte stilen til gradienten for å forstørre mengden av kromte refleksjoner. Ved å vri gradientens vinkel plasserer vi de lettere områdene der vi ønsker. I dette tilfellet bør maksimal lysstyrke sees i øvre område av streken.
Nå gjør vi den forkromede overflaten mer kompleks ved å legge til flere lys og skygger detaljer til metallet. Med Bevel & Emboss og Gloss Contour ser du på dette bildet legger vi til flere små detaljer på overflaten.
Med Inner Glød legger vi en innvendig skråkant til knappen som om den var 3D, og prøvde å skarpere fusjonere med objektets bakgrunn.
Nå trenger vi et valg for å male noen detaljer manuelt over knappen. Det første trinnet er å bruke formlaget på knappen og få et valg som skal brukes som en maske for å bli malt. Gå til Stier vindu og velg knappelaget for å lage et utvalg med samme form.
Nå avtaler vi størrelsen på dette valget ved å gå til Velg> Endre> Kontrakt. Vi reduserer 10 piksler utvalget fra sin opprinnelige størrelse.
Nå bløtter vi valget. Gå til Velg> Endre> Fjær eller Alt + Ctrl + D (Windows). Vi bruker 1 pikselfjær og trykker på OK.
Vi gjemmer valget med Ctrl + H for å visualisere bedre hva vi skal gjøre. Med penselverktøyet, ved hjelp av en 35 piksler pensel og en 10% Flow, maler vi i et nytt lag noen lysrefleksjoner over knappen, ved hjelp av hvit farge. Som lyset fra scenen kommer ovenfra, vil vi bruke mer lysstyrke til knappens øvre område, og vi vil forbedre med små lyspunkter noen mørke områder i bunnen av objektet.
Fortsatt holder valget vårt (som vil bli synlig igjen med Ctrl + H) vi reduserer det noen piksler for å slette litt av arbeidet vi har gjort med børsten og oppnå en mer sofistikert effekt. Denne gangen avtaler vi 3 piksler utvalget.
Vi gjemmer dette valget igjen ved å bruke Ctrl + H og trykke på Slett-tasten. Vi sletter noen deler av våre tidligere børstespor. Dette tillot oss å male manuelt og deretter polere arbeidet vårt med å skape et faset kantområde som forsterker 3D-aspektet på knappen og gir en plastikk tekstur til overflaten.
Vi avsluttet knappestrukturen. Nå må vi lage en innføring i sentrum. Det første trinnet er å bringe formlagets opasitet til null (0%).
La oss lage en ny innerskygge i invertert vinkel, akkurat som vi gjorde før hovedknappen. Sørg for å legge til verdiene du ser på dette bildet.
Nå representerer et lite slag en skrå mellom begge objekter.
Det følgende trinnet er en Drop Shadow som brukes som lysende overflate ved Blend Mode-skjermen og den hvite fargen. Størrelsen på dette lyset må være 2 piksler for å gjøre det veldig skarpt, som om det var en skrå kant som mottar noe lys ovenfra.
Til slutt med Inner Glow gjenskaper vi den avskårne kanten på den indre knappen. Dette gjør observatøren til å tolke dette objektet som et lite faset kantet panel som er spisset inne i hovedknappen.
Vi er ferdige med hovedknappen. Faktisk er det ikke en knapp plassert på bakgrunn: gjennom noen ekstra effekter blir det sett på som et innskudd på bakgrunnsflaten, som har et metallslag rundt og som inneholder en knapp inne som kan trykkes ned.
Nå lager vi Power-ikonet til knappen. Last ned denne gratis fonten: http://www.dafont.com/guifx-v2-transports.font. Du vil kunne opprette dette objektet ved å bruke "q" -tasten og denne skrifttypen i 48 poeng.
På dette bildet ser du hvordan vi kan legge til en ekstern skråkant på ikonet, ved å bruke et trepunkts slag i samme farge enn knappens overflate og deretter bruke Stroke Emboss-effekten med disse verdiene.
Stroke Emboss-effekten som et alternativ for å lage en skrå kant vil tillate oss å lage ikonets fasade effekt på bakgrunnen.
Til slutt legger vi til en metallisk tekstur til ikonet ved hjelp av en gradient som du kan se på dette bildet.
Nå lager vi 3 leds som vil lyse opp knappen når vi legger musen over den. Det første trinnet er å gi Shape Layer fargen # 06B9FB, dobbeltklikk på den for å redigere fargen.
Ved å bruke formlaget på hovedknappen lager vi et utvalg.
Vi utvider størrelsen på dette valget ved å gå til Velg> Endre> Utvid.
Vi setter en 8 piksler ut og vi trykker på OK.
Vi omverter dette valget ved å bruke Velg> Inverse.
Med dette inverterte valget lager vi en maske for å få den endelige formen og størrelsen på lysbildene rundt knappen.
Med et slag med samme farge på knappoverflaten (bruk fargeplukker for å få den) skaper vi en liten skråstilling rundt disse lysene. Dette vil tillate oss å gi ideen om en innsatt gjenstand på bakgrunnsflaten.
Med Bevel og Emboss gir vi en øvre skygge og et bunnlys til vår Stroke (som om lyset ovenfra ville påvirke disse fasade kantene).
Med en invertert Inner Skygge og Multiply skapes en akrylrefleksjon over det øvre området av disse LEDene.
Vi fullfører utgaven av disse objektene med en Drop Shadow som lar oss gi ideen om at disse detaljene i knappedesignet endrer bakgrunnsoverflaten, trykker den ned og lager skyggete områder rundt dem.
Slik ser vår knapp ut nå, men det mangler fortsatt noen effekter.
Vi vil duplisere laget av de tidligere lysdiodene og male dette nye formlaget i hvitt. Vi begynner å skape lys-ledet effekt med ytre glød og disse verdiene.
Vi legger til belysningen av området i nærheten av lysbildene ved hjelp av Drop Shadow on Screen Blend-modus.
Rollover-tilstanden til knappen den er ferdig. Nå, ved å bruke et utvalg med 20 piksler Feather inne i det nye laget, gjør vi bakgrunnen til å ha et konveks utseende bak knappen, som om bakgrunnen skulle komme ut fra midten, og skape en myk 3D-ball som vil reagere på lyset ovenfor.
Vi maler dette valget i hvitt, tidligere mykt med en 20 piksler fjær. Du kan bruke Paint-verktøyet eller tastatursnarveien Alt + Backspace som maler laget med fargen du bruker som Forgrunn.
Vi setter opaciteten til denne sfæren på null (0%) i Layer Styles edition-vinduet.
Nå med en gradient med 50% gjennomsiktighet og Blend Overlay (ved hjelp av hvite og sorte farger som er angitt som standard i gradientereditoren) kommer vi til denne sfæriske sensasjonen på knappens bakgrunn.
Nå er vi ferdige med knappen og alle detaljer. Vi trenger bare å lage noen fasade kanter på bakgrunnen ved hjelp av de symmetriske vektorene som er opprettet i Illustrator.
Som alltid tar vi opaciteten til null.
Med et slag og disse verdiene skaper vi grunnleggende avlastning av disse fasene i bakgrunnen.
Med hvit Drop Shadow og Blend Screen, oppretter vi det opplyste området av disse fasade kantene.
Til slutt skjuler vi en del av disse fasade kantene med en 20 piksler myknet maske. Tanken er at disse vil slå seg sammen med bakgrunnen og forsvinne mot hjørnene.
Det var en lang tur, men resultatene var verdt det. Den endelige berøringen er en liten linseflamme over det øvre, lyse området av den forkromede kanten. Lag alltid en .PSD-fil med disse ressursene som gir en realistisk og fotografisk effekt til reflekterende objekter. Du kan se det siste bildet under eller se en større versjon her.
Accentsconagua