How å lage et sett med Rubber Band Corner Banner behandlinger i Illustrator
Dette innlegget er en del av en serie kalt Web og Interface Design Med Vector.Quick Tips: Hvordan lage en Enkelt BannerQuick Tips: Hvordan lage en enkel Web Badge

I denne opplæringen vil jeg vise deg hvordan du bruker Pen Tool (P) og utseende panelet for å opprette et sett med gummistrikk hjørne banner behandlinger med Adobe Illustrator. Dette er perfekt for å bringe oppmerksomhet til bilder på nettet. Så la oss begynne!

Trinn 1

La oss starte med å forberede vår dokumentet. Åpne Illustrator og trykke Command + N for å opprette et nytt dokument. Skriv inn 500 i bredden boksen og 500 i høyden boksen og klikk på knappen Avansert. Velg RGB, Screen (72ppi) og sørg for at " Juster nye objekter til Pixel Grid " boksen ikke er krysset før din klikker OK.

Når du arbeider for web pixel perfeksjon er et must, og for å skape strikken forme det ville være lettere å ha rutenettvisning satt opp og pixel snapping aktivert så vi ' ll gjøre det nå. La oss gjøre det mulig Grid (View > Vis rutenett) og Fest til rutenett (View > Fest til rutenett). Etter de er på, trenger du et rutenett hver 1px. Bare gå til Illustrator > Preferanser > Guides & Grid, skriver en i linjenettet hver boks og en i underinndelinger boksen. Nå la oss sette måleenhet til piksler fra Illustrator > Preferanser > Unit > General. Etter fullført dokumentet skal se ut bildene nedenfor.

Trinn 2

Bruke Zoom Tool (Z) la oss øke størrelsen på vår art brettet til du kan se den enkelte pixel grid vi satt opp tidligere. Mine screenshots nedenfor er zoomet inn til 600%. Hvis du ønsker kan du bruke Navigator vinduet (Vindu > Navigator) for å skrive inn en numerisk verdi for staten zoom i dokumentet. Dette pixel grid vil være hopping av punkt for hvor du skal klikke og dra for å gjøre vår banner form.

Når du har zoomet inn til et komfortabelt nivå velger du Pen Tool (P) og gjør ditt første klikk og Dra på rutenettet. Med Fest til rutenett aktivert ditt første klikk skal plassere et punkt direkte i krysset på rutenettet. Vi vil gjenta dette sju ganger før vi får formen beskrevet nedenfor.

Trinn 3

Når vi har formen vår smak må vi Kopier den (Kommando + C) og deretter Lim i Front (Command + F). Når dupliseres vi vil høyreklikke på objektet og velg Transform > Reflektere å åpne reflektere dialogboksen. Når åpnet angi alternativene som er skissert i skjermbildet nedenfor og klikk på OK for å sette endringene. Når reflekterte vi kan velge Selection Tool (V) og flytt den nye formen til det linjer opp på kanten av det andre som sett i skjermbildet nedenfor. Vi må nå Shift + Klikk på andre objektet slik at begge velges samtidig da i Pathfinder-panelet (Vindu > Pathfinder) vi vil klikke den første enheten under Shape moduser som vil forene de to objektene i ett. På dette punktet la oss fylle også formen med en fin blå farge som beskrevet nedenfor og bruke Utseende panelet (Vindu > Utseende) vi kan bruke en ekstra gradient fylle vinklet 45 grader på toppen av flat farge angir deretter Blending Mode til Multipliser og Opacity til 75%. Vi vil også legge til en Drop Shadow effekt (Effect > Stylize > Drop Shadow) som beskrevet nedenfor

Vi rotere gradient og utligne skyggen nå, slik at senere når vi rotere figuren. alt vil være på plass.

Trinn 4

Når vår form er i ett stykke vi kan nå begynne å legge litt dybde til det. La oss begynne med å lage bunnen skygget del. Nok en gang la oss velge formen (hvis det ikke allerede er) og kopiere den ved å kopiere den (Kommando + C) så limer i Front (Command + F). Gjenta denne Kopier og lim prosessen en gang til slik at vi bør ha tre figurer som sitter oppå den andre. Med den øverste formen er valgt vi vil dytte den ved hjelp av pilene på tastaturet opp to piksler. Etter at det er blitt dyttet vi vil velge formen nedenfor ved hjelp av Selection Tool (V). Mens begge former er valgt la oss gå til Pathfinder-panelet igjen (Vindu > Pathfinder), og denne gangen velger andre alternativ under Shape moduser som vil trekke toppform fra formen under slik at du med en snev av forrige form.

Med denne sliver valgt la oss fjerne gradient og Skygge deretter endre Blending Mode til Multipliser og Opacity til 45% ved bruk av Transparency vinduet (Vindu > Transparency).

Trinn 5

Nå skal vi gjøre høydepunkt for bandet. La oss velge det store bandet form ved hjelp av Selection Tool (V) og kopiere den ved å kopiere den (Kommando + C) så limer i Front (Command + F). Gjenta denne Kopier og lim prosessen en gang til. Med Selection Tool (V) er aktivert, og den øverste formen er valgt vi vil dytte formen ved å bruke piltastene på tastaturet. Holder Skift-tasten på tastaturet trykker du på venstre piltast to ganger for å flytte formen over 20 piksler raskt. Da slipper Shift og trykk på pil ned 5 ganger for å dytte den ned 5 ganger. Når toppform er på plass kan vi trykke skift-tasten på nytt klikk deretter det andre bandet form og bruke Pathfinder-panelet (Vindu > Pathfinder) vil vi velge andre alternativ under Shape moduser som vil trekke toppform fra formen nedenfor.

Dette vil forlate oss med to figurer som vi trenger for å rette opp. Vårt mål er å holde den større formen så la oss opp gruppe figurer (Object > opp gruppe). Når ugrupperte vi må velge den mindre formen vi ikke lenger vil ha og trykk på slettetasten på tastaturet for å fjerne den formen. Etter den mindre formen har blitt fjernet vil vi endre større figurens farge som beskrevet nedenfor, og også sin Blending Mode til Screen og Opacity til 10% ved bruk av Transparency vinduet (Vindu > Transparency). Sørg for å fjerne gradient og skygge.

Trinn 6

Nå som vi har bandet ganske mye gjort vil vi legge vår tekst. Dette kan være alt du vil, men for denne opplæringen vi skal bruke teksten " • NYHET • ". Velg Type Tool (T) og klikk noen under bandet skriver inn teksten. Etter fullført vil vi legge til en blå farge og en ekstra gradient overlay med Utseende panelet (Vindu > Utseende) og sett Blending Mode til flere og Opacity til 60%. Vi vil også legge en skygge i Utseende panel som beskrevet nedenfor.

Når du har det satt opp som skjermbildene nedenfor kan du aktivere Selection Tool (V) deretter flytte teksten til midten av bandet. Med pixel snapping aktivert dette bør være ganske lett å finne.

Trinn 7

Med Selection Tool (V) fortsatt aktivert vi kan klikke og dra over alle våre objekter å velge dem alle. Når du har valgt hvis du beveger musen til kanten av markeringsrammen for objektet musen vil endre til en Rotate Tool. Mens du trykker Shift på tastaturet klikke og dra objektet slik at det roterer 45 grader. Det skal se ut som den gjør under.

Trinn 8

Nå la oss lage bretteelementene bak bandet som gir den en 3D sjal rundt følelse. Velg Pen Tool (P) og opprette en tåre dråpe form som beskrevet nedenfor. Vi vil også bruke en gradient til denne formen og velge å bruke Selection Tool (V). Mens valgt høyreklikk på form og under Ordne-menyen velger Send til Back. Du kan justere den nøyaktige plasseringen av form ved hjelp av Selection Tool (V) til du føler deg komfortabel. På grunn av pixel snapping dette skal være enkelt.

Trinn 9

Med tåre dråpe formen fortsatt valgte vi kan kopiere det (Command + C) og lim den (Kommando + V) hvor som helst på borde. Vi vil da rotere det igjen ved å bringe musen til slutten av markeringsrammen og mens du holder Shift rotere objektet 90 grader så den avrundede enden det nederst. Deretter høyreklikker du på objektet og velg Transform > Reflektere og inngangs innstillingene som beskrevet nedenfor.

Vi kan da dra objektet i til posisjon på bunnen av bandet form så det linjer som den annen tåre dråpe bare på motsatt ende.
< p> Med bandet gjort la oss velge alle elementene og Group (Object > Group). dem sammen

Trinn 10

Med bandet komplett vi kan gjøre bildet plassholder. La oss velge rektangel Tool (M) og mens du holder Skift-tasten på tastaturet vil vi tegne en perfekt firkant som er på linje med de teardrop figurer fra bandet selv. Pass på å bruke nettet til å stille opp dine figurer. Nå la oss bruke en gradient, en Drop Shadow, og et strøk med Utseende panel som beskrevet nedenfor.

Step 11

Med sletten formen ut av veien la oss gjøre høydepunktet for stedet holding. Med Selection Tool (V) aktivert velge firkantet form og kopiere den (Kommando + C) deretter Lim inn i Front (Command + F). Vi vil deretter velge Ellipse Tool (L) og tegne en stor oval form over den nederste delen av firkantet form. Bruke Selection Tool (V) trykker du Shift-tasten og velge både torget og oval form. Deretter bruker Pathfinder-panelet (Vindu > Pathfinder) vil vi velge andre alternativ under Shape moduser som vil trekke toppform fra formen under. Vi kan nå legge en vanlig hvit ugjennomsiktig til 75% gjennomsiktig gradient fra Utseende panelet (Vindu > Utseende). Og en Drop Shadow som beskrevet nedenfor

Trinn 12

Nå med Selection Tool (V) fortsatt aktivert klikk høydepunktet og stedet holder under og trykk Command + G på tastaturet for å konsernet de to figurene sammen. Deretter høyreklikker du på gruppert objekt og under Ordne-menyen velger lengst bak.

Trinn 13

Nå som vi har alle våre elementer i stedet la oss kopiere dem og arbeide på noen alternative farger

Med banner og sted holder plassen valgte vi kan kopiere det (Command + C) og lim den (Kommando + V), gjør dette to ganger så det bør være tre ulike plassholdere og bannere på siden. Du kan dra dem til den posisjonen du vil ha dem og stable dem i den rekkefølgen du ønsker.

Trinn 14

Når du har alle tre i stedet vi kan dobbeltklikke bandet å gå inn i gruppen isolasjon modus for at bandet. Dette vil la deg velge de enkelte elementene i den gruppen uten å løse opp dem. Nå la oss justere stigninger og flate farger som beskrevet nedenfor.

Når du har justert fargene kan du bruke brød smule funksjon som dukket opp på toppen av Illustrator-vinduet, eller du kan dobbeltklikke hvor som helst i tomrom rundt formen du arbeidet med å gå tilbake til vanlig visning. Her er innstillingene for den gule versjonen av bandet.

Trinn 15

Her er innstillingene for den røde versjonen av bandet. Å ha et utvalg av farger klar til bruk kan spare tid i det lange løp.

Trinn 16

Med farger i stedet la oss avslutte sammensetningen ved å legge en fin strukturert bakgrunn. Med vår rektangel Tool (M) valgt la oss holde Skift-tasten og dra en firkant slik at den omfatter hele artboard. Når den er laget velge torget med markeringsverktøyet (V) høyreklikk og under Ordne-menyen velger Send til Back. Når det er på plass bak elementene vil vi legge til en radial gradient og en kornethet som beskrevet nedenfor.

Konklusjon

Du skal nå ha noen gode jakt strikken hjørne behandlinger perfekte for å importere til neste bilde utstillingsvindu prosjekt. Anmeldelser