How å opprette en godt Detaljert Hi-Tech-knapp

Med denne opplæringen vil vi skape en hi-tech-stil knapp som kan brukes i splash-sider, applikasjoner eller Powerpoint presentasjoner. Vi vil bruke Illustrator til å lage komplekse vektorer og Photoshop for å utvikle realistiske effekter.

Trinn 1

Ved hjelp av Illustrator vi skape et rektangel med størrelsen vist. Med rektangelverktøyet klikker vi på arbeidsområdet og et vindu vil dukke opp som vil tillate oss å determinate de eksakte størrelser for objektet. Jeg anbefaler å sette Illustrator preferanser ved hjelp av piksler som måleenhet.

Trinn 2

Vi legger en guide som en referanse for horisontal justering. Bruke Plus penneverktøyet (for å legge festepunkter til en eksisterende vektor) vi legge til en ekstra forankringspunkt i øvre side av rektangelet.

Trinn 3

Nå velger vi denne nye ankerpunkt og ta den høyere enn den linje, og vi skille det nedre festepunkt fra hverandre for å få en gjenstand med dette tilnærmes formen.

Trinn 4

med forankringspunktet håndterer bruker vi det øvre punktet som en akse for en myk kurve.

Trinn 5

nå må vi få to flere objekter som vil integrere en trepunkts objekt. Vi roter denne vektoren ved hjelp av sin sentrale nederste delen som rotasjonsakse. Slik starter vi velge Rotasjon verktøyet og klikk på den nederste delen. Så får vi se markøren endre i en liten svart pil

Trinn 6

Ved å trykke Alt-tasten (at den brukes til å kopiere –. Vil du se den svarte pilen sammen med en hvit pil ), drar vi objektet. Vi bruker informasjonsvinduet for å rotere duplisert objekt en viss grad. Vurderer dette er en trepunkts objekt, må vi dele 360-graders for dette nummer (3), slik at våre dupliseres Vektoren må rotere 120 grader &;. Dra den til du ser dette tilnærmet nummeret i Info-vinduet.

Trinn 7

Ved å trykke Ctrl + D (Windows) vi automatisk duplisere hva vi har gjort. Så dette vektor vil bli duplisert igjen ved 120 grader;.

Trinn 8

Vi forene disse objektene til én. I Pathfinder vinduet forene vi vektorene: klikk på alternativet Unite og klikk på Utvid-knappen for å konvertere gruppen inn i en solid objekt.

Trinn 9

Nå avrunder vi hjørnene av dette objektet. Gå til Effect > Stylize > Runde hjørner.

Trinn 10

Angi en 10 pixel Radius og forhåndsvise resultatet ved å sjekke Forhåndsvisning alternativet boksen. Radius avhenger kurvene amplitude du har tegnet i hovedobjektet. Med alternativet Forhåndsvisning vil du innse hvis Radius myker korrekt hjørnene: Hvis mengden av piksler er overdreven objektet vil se forvrengt og ikke mykt avrundet

Trinn 11

Nå la ’ s. skille utseende (det opprettet effekt) fra den opprinnelige vektor. Gå til Object > Utvid Utseende og få den endelige vektor.

Step 12

Dette er et resultat av vårt arbeid med vektorer i Illustrator. Det er et komplekst objekt gjøres manuelt, og dette er grunnen til at vi bruker noen teknikker for å oppnå en symmetrisk og ergonomisk vektor

Trinn 13

Som vår knappen vil ha en indre innsetting –. Noen slags montert objekt i frontal partner- vi vil gjenta de forrige trinnene, men denne gangen med en mye mindre og kortere objekt.

Step 14

Etter nøyaktig de samme trinnene fra trinn 1 til trinn 12, skaper vi dette nye objektet. Resten av vektorene kan opprettes manuelt eller i en automatisk måte uten så mye kompleksitet.

Trinn 15

Vi skaper bare halvparten av et nytt objekt, og deretter vi reflektere det å gjøre det symmetrisk. Følg nøye trinnene du ser på denne grafikken.

Trinn 16

Bruke Nødvendigvis verktøyet vi kopiere objektet holde Shift + Alt tastene trykkes.

Trinn 17

nå forener vi begge omganger ved hjelp av Pathfinder-verktøyet. Du kan slette de resterende ankerpunktene med unionen med minuspenneverktøyet.

Step 18

Vi bruker samme duplisering metoden beskrevet før, rotere objektet 120-graders å få også tre identiske objekter og jevnt fordelt.

Trinn 19

Til slutt lager vi en enkel sirkel, en vektor som vil bli brukt som lysdioder som lyser opp knappen i sin hover tilstand. Vi vil sluttføre redigering i Photoshop for å legge formede lag maskeringsteknikker.

Trinn 20

Nå velger vi alle vektorer og trykke Ctrl + C (Windows) vi kopiere dem inn i systemet utklippstavlen.

Trinn 21

Vi stenger Illustrator og vi åpner Photoshop. Vi skaper en PSD på 1024x768 piksler, og denne innledende konfigurasjonen.

Trinn 22

male første laget i svart. Da vi bruker et lag stil for å skape en bakgrunn gradient.

Trinn 23

Ved hjelp av mørk grå og svarte farger, skaper vi en Radial gradient og ta det til sin maksimale skalaen (130-150% ). Husk at i dette laget stil vinduet kan du dra gradient å ta sitt senter til stedet på skjermen som du ønsker.

Trinn 24

Nå limer vi vektorene som formlag. Ctrl + V eller Rediger > Lim inn.

Trinn 25

Vi har vektorene i en form Layer og vi må skille dem i forskjellige lag. La ’ s. Duplisere så mye lag som deler vi har fått -4 i dette tilfelle-og eliminere unødvendige objekter på hver av dem slik at formen vi er interessert i

Trinn 26

rekkefølgen på lagene er den du ser i bildet, og ikke glem å nevne alle lag til å organisere bedre arbeidet. Noen lag vil bli lagt til disse de som vil bli opprettet helt i Photoshop. Vi vil legge til lag stiler til vår hovedknappen.

Trinn 27

Å gjøre et dobbeltklikk på laget på hovedknappen vinduet åpner vi redigeringsvinduet for dette laget stiler. On “ Blending Options: Standard ” vi tar tettheten av dette laget til null for å se bare våre lag effekter. Vi starter med å legge en sirkulær gradient med de samme bakgrunnsfarger # 333333 (mørk grå) og # 000000 (svart). Sørg for at denne gradienten er myk fra sentrum til kanten, og øker sin størrelse opp til 120%.

Trinn 28

Med en indre skygge og fjerne markeringen for alternativet Bruk globale Lys alternativet (som vi vil ALLTID bruke ved 90 grader;) vi snu denne skyggen, dra vinkelen redaktør av skyggen til -90 &grader;. Dette vil hjelpe oss til å forsterke de nederste området skygger. .

Trinn 29

Vi har konkludert med den første delen av knappen redigeringsprosessen. Vi har nå klart den fremre delen av det som har en ugjennomsiktig overflate som vi senere vil legge glans og pseudo 3D-profiler.

Trinn 30

Nå skaper vi en forkrommet slag rundt knappen. Vi legger en tre piksel Stroke med Gradient typen fyll. Vi legger til noen flere detaljer på denne gradienten inne i slag. Vi gjengir en forkrommet metall reflekterende overflate der vi bruke ressursen reflektere horisonten og himmelen av en utendørs scene.

Trinn 31

Vi bruker de reflekterte stil til gradient for å forstørre det beløpet av forkrommede refleksjoner. Ved å vri vinkelen på graderingen vi plasserer de lysere områdene hvor vi ønsker å. I dette tilfellet er den maksimale lysstyrke bør sees i det øvre område av slag.

Trinn 32

Nå gjør vi den forkrommede overflaten mer komplisert ved å legge mer lys og skygger detaljer i metall. Med Bevel & Relieff og Gloss Contour du ser i dette bildet vi legge til flere små detaljer på overflaten.

Trinn 33

Med indre glød vi legge til en indre skrå kant til knappen som om det var 3D , prøver å gjøre skarpere flettingen med objektet ’ s bakgrunn.

Trinn 34

Nå trenger vi et utvalg til å male noen detaljer manuelt over knappen. Det første trinnet er å bruke formlag på knappen og få et utvalg som skal brukes som en maske for å bli malt. Gå til Paths vinduet og velg knappen lag å opprette et utvalg med samme form.

Trinn 35

Nå vi kontrakt på størrelse med dette valget ved å gå til Velg > Endre > Kontrakt. Vi reduserer 10 piksler utvalgs fra sin opprinnelige størrelse.

Trinn 36

Nå myker vi utvalget. Gå til Velg > Endre > Fjær eller Alt + Ctrl + D (Windows). Vi bruker en piksel fjær og trykk OK.

Trinn 37

Vi skjule valg med Ctrl + H for å visualisere bedre hva vi vil gjøre. Med penselverktøyet, ved hjelp av en 35 pixel pensel og en 10% Flow, maling vi inne i et nytt lag noen lysrefleksjoner over knappen, ved hjelp av hvit farge. Som lys av vår scene kommer ovenfra, vil vi bruke mer lysstyrke til den øvre delen av knappen, og vi vil forsterke med små lyse flekker noen mørke områder i den nederste delen av objektet.

Trinn 38

Fremdeles holder vårt utvalg (som vil bli synlig igjen med Ctrl + H) vi reduserer det noen piksler til å slette litt av det arbeidet vi har gjort med pensel og oppnå en mer sofistikert effekt. Denne gangen vi kontrakts 3 piksler valget.

Trinn 39

Vi skjule dette valget på nytt ved hjelp av Ctrl + H og trykke på slettetasten vi slette noen deler av våre tidligere pensel spor. Dette tillot oss å male manuelt og deretter polere vårt arbeid å lage en skrå kant område som forsterker 3D-aspektet av knappen og gi en plast tekstur til overflaten.

Trinn 40

Vi avsluttet knappen struktur. Nå må vi sette inn et innsettings på midten. Det første trinnet er å bringe formlag opacity til null (0%)

Trinn 41

La ’ s. Opprette en ny Indre skygge i den omvendte vinkel akkurat som vi gjorde før for hovedknappen. Sørg for å legge verdiene du ser i dette bildet.

Step 42

Nå litt Stroke vil representere en skråkant mellom begge stedene.

Trinn 43

Det neste trinnet er en Drop Shadow brukes som en opplyste overflaten ved Blend Mode Screen og den hvite fargen. Størrelsen på dette lyset må være 2 piksler for å gjøre det veldig skarp, som om det var en skrå kant som mottar lys ovenfra.

Trinn 44

Til slutt med en indre glød vi gjenskape den skrå kant av det indre knapp. Dette gjør betrakteren tolke dette objektet som en litt skrå kanter panel som er i inngrep inne i hovedknappen.

Trinn 45

Vi er ferdig med hovedknappen. Egentlig er det ikke en knapp plassert på en bakgrunn: gjennom noen tilleggseffekter vil det bli sett på som en innfelt av bakgrunnen overflaten, som har en metallisk slag rundt og som inneholder en knapp inne som kan trykkes ned.

Trinn 46

Nå skaper vi strømikonet på knappen. Last ned denne gratis font: http://www.dafont.com/guifx-v2-transports.font. Du vil være i stand til å lage dette objektet ved hjelp av “ q ” nøkkel, og dette skrift i 48 punkter.

Trinn 47

På dette bildet ser du hvordan vi kan legge til en ekstern skrå kant til ikonet, ved hjelp av en 3 piksel strøk av samme farge enn knappen overflaten og deretter bruke Stroke preg effekt med disse verdiene.

Trinn 48

Stroke preg virkning som en mulighet til å opprette en skrå kant vil tillate oss å lage skrå effekten av ikonet på bakgrunnen.

Trinn 49

til slutt legger vi en metallisk tekstur til ikonet ved hjelp av en gradient som du kan se i dette bildet.

Trinn 50
< p> nå skaper vi 3 leds som vil lyse opp knappen når vi plasserer musepekeren over den. Det første trinnet er å gi Shape Layer fargen # 06B9FB, gjør dobbeltklikk på den for å redigere fargen.

Trinn 51

Bruke Shape Layer av hovedknappen skaper vi et utvalg .

Trinn 52

Vi utvider størrelsen på dette valget ved å gå til Velg > Endre > Utvide.

Step 53

Vi setter en 8 piksler utvide og vi trykker OK

Trinn 54

Vi invertere dette valget ved å bruke Select >.; Inverse.

Trinn 55

Med denne invertert utvalget vi lage en maske for å få den endelige formen og størrelsen på lysdioder rundt knappen.

Trinn 56
< p> med en Stroke med samme farge på knappen overflaten (bruk fargevelgeren til å få det) vi lage en liten fas rundt disse lysene. Dette vil gi oss mulighet til å gi inntrykk av en innsatt objekt på bakgrunn overflaten.

Trinn 57

Med Skråkant og preg gir vi en øvre skygge og en bunn lys til vår Stroke (som om lys ovenfra ville påvirke disse skrå kanter).

Step 58

med en omvendt Indre skygge og Multipliser vi skape en akryl refleksjon over den øvre delen av disse lysdioder.
< h2> Trinn 59

sluttføre utgaven av disse objektene med en Drop Shadow som tillater oss å gi ideen om at disse detaljene i knappen utformingen endre bakgrunns overflaten, trykke den ned og skape skygge områder rundt dem.

Step 60

Dette er hvordan vår knappen ser ut nå, men det er fortsatt noen effekter mangler.

Trinn 61

Vi vil duplisere lag av de tidligere lysdioder og male denne nye Shape Layer i hvitt. Vi begynner å lage den lyse opp ledet effekt med Ytre glød og disse verdiene.

Trinn 62

Vi legger til belysning av området i nærheten av lysdioder som bruker Drop Shadow på skjermen Blend mode.

Trinn 63

Rolltoppknappen det ’ s gjort. Nå, ved hjelp av et utvalg med 20 bildeelementer fjær inne i den nye lag danner vi bakgrunnen for å ha en konveks utseende bak knappen som om bakgrunn ville komme ut fra dens sentrum og skaper en myk 3D-ball som vil reagere på den ovenfor lys.

Step 64

male dette valget i hvitt, tidligere myknet 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.

Trinn 65

Vi setter tettheten for denne sfæren på null ( 0%) i Layer Styles utgaven vinduet.

Trinn 66

nå med en gradient på 50% gjennomsiktighet og Blend Overlay (ved hjelp av hvite og svarte farger som er satt som standard i gradienter editor ) vi når dette sfærisk sensasjon på knappen bakgrunnen.

Trinn 67

nå er vi ferdig med knappen og alle detaljer. Vi trenger bare å lage noen skrå kanter på bakgrunnen hjelp av symmetriske vektorer som er opprettet i Illustrator.

Trinn 68

Som alltid tar vi opacity til null.

Trinn 69

med en Stroke og disse verdiene vi skaper relieff av disse bevels i bakgrunnen.

Trinn 70

med hvit skygge og Blend Screen, skaper vi tent opp området av disse skrå kanter.

Trinn 71

til slutt gjemme vi en del av disse skrå kanter med en 20 piksler myknet maske. Tanken er at disse ville fusjonere mykt med bakgrunnen og forsvinner mot hjørnene.

Konklusjon

Det var en lang tur, men resultatene var verdt det. Den siste finpussen er litt lysskjær over den øvre lyse delen av forkrommet kant. Alltid lagre en PSD-fil med disse ressurser som gir en realistisk og fotografisk effekt til reflekterende gjenstander. Du kan se det endelige bildet nedenfor eller se en større versjon her.