Oprettelse af et vektorbillede i Photoshop. Konvertering af et rasterbillede til et vektorbillede ved hjælp af Adobe Illustrator

1. Billede. Nedenfor er et billede af en minibil, der skal arbejdes på for at give den et vektorlook. Billedkvaliteten i dette tilfælde er ikke så vigtig, så længe der er detaljer til sporing.

2. Proces. For at komme i gang skal du højreklikke og gøre en af ​​to ting: a) Kopiér. Derefter i Photoshops Rediger - Indsæt [Redigering - Indsæt]. I denne metode lader Photoshop baggrundslaget være låst og indsætter billedet på nyt lag Lag 1 over baggrunden. Dobbeltklik på ordet Layer 1 for at fremhæve teksten og give laget et mere passende navn. For eksempel "billedet".

b) Gem billede som på skruen. Gå derefter til Photoshop File - Open og find, hvor du har gemt billedet. Måske på skrivebordet?.. Bemærk, at i lagpaletten viser billedikonet, at billedet er "indeks" [kort sagt er det en gif]. Bemærk også, at den er låst. For at rette dette skal du bare gå til Billede - Tilstand - RGB farve[Billede - Model - RGB] og overfører derved det låste lag til baggrundslaget. Dobbeltklik på baggrundslaget vil gøre det til et redigerbart lag. [Omdøb lag 0 til noget mere venligt... For eksempel "billedet".]

Lad os nu oprette en duplikat af billedlaget. Hvis du bruger Photoshop 7 eller CS, skal du oprette et nyt lagsæt for at bevare alle de individuelle objekter. Bare klik på mappeikonet i bunden af ​​lagpaletten, dobbeltklik på Sæt 1 og navngiv det som mit.

3. Et kraftfuldt værktøj er pennen. Lad os starte med at lave en kontur rundt om hele bilens omkreds. Indstil forgrundsfarven ved hjælp af pipetten, og tag farven fra den mørkeste del af billedet. I I dette tilfælde, meget tæt på sort. Vælg nu penværktøjet fra værktøjslinjen. Sørg for, at indstillingen Shape Layers er aktiveret [øverst på indstillingslinjen], jeg har sat en cirkel om den med orange.

Tilføj nu bare ankerpunkter, hvor du tror, ​​at konturen skal redigeres.
Tip: Ctrl + [Plus på det numeriske tastatur på højre side af dit tastatur] for at zoome ind. Derfor er Ctrl den modsatte handling. Jeg anbefaler at bruge disse funktioner til at forbedre dit billede.

4. Forbindelse af ankerpunkter. Når du har oprettet en sti rundt om bilen, skal du forbinde til det første ankerpunkt for at skabe en solid form. Skjul nu billedkopilaget for at se, hvad der skete [Som jeg gjorde på billedet nedenfor.] Lad os nu begynde at manipulere ankerpunkterne for at give vores bil en mere slank form.

Sådan ser Layers-paletten ud nu med det nye Vector Shape-lag fremhævet i blåt. Hvis du også klikker på fanen Stier på lagpaletten, vil du se en "sti"-version af dette lag.

5. Konvertering af ankerpunkter. Vælg værktøjet til konvertering af ankerpunkt, og manipuler de områder, der skal transformeres, for at give bilen en klar grænse.

Sørg for, at Shape 2-laget er valgt.
Jeg begyndte at konvertere point fra hjulet. Klik på ankerpunktet og flyt i retningen af ​​den sorte pil [se. Fig.] indtil stien begyndte at følge hjulets konturer.

Tip: Konverteringsværktøjet opretter 2 Bezier-punkter for at justere krumningen.

Manipuler Bezier-kurver for at sikre, at konturerne er så nøjagtige som muligt.

Tip: Efter at have konverteret nogle få ankerpunkter [eller ankerpunkter], vil du indse, at nogle af de originale punkter slet ikke er nødvendige. Faktum er, at jo færre ankerpunkter, desto jævnere vil valget være. Brug derfor værktøjet til fjernelse af ankerpunkter.

Dette er, hvad der skete for mig. Vi vil bruge denne form som base.

Dernæst lavede jeg en kopi af Shape 2-laget og manipulerede punkterne for at tegne bilens dominerende farve [blå, i dette tilfælde]. Klik på ikonet for dette lag, tag pipetten og skift den sorte farve til blå #3672BD.

Sådan ser bilen ud nu.

Lad os nu arbejde på vinduerne.
Tænd for billedet kopi [sort] lag igen og skjul Shape 2 kopi [blå] laget.
Tag penværktøjet og slå indstillingen Træk fra områdeform til i indstillingslinjen [Jeg har skitseret det i orange].

Skjul Shape 2-kopilaget. Vælg laget Shape 2. Lad os starte med at spore vinduerne på den modsatte side af bilen.

Sluk synligheden af ​​billedkopilaget og se på resultatet.
Subtraktion fra den sorte form skabte en illusion af gennemsigtighed.

For at anvende denne effekt på de to andre vinduer uden at tilføje et nyt lag, skal du blot holde Ctrl+Alt nede og klikke og trække denne subtraktive kopisti. [Gør dette to gange.] Placer nu dubletterne på deres plads. Brug Anchor Point Conversion Tool igen til at udglatte hjørnerne og skabe præcise former.

Anvend den samme teknik på Shape 2-kopilaget for at få et billede som mit.

Nu hvor vi har det grundlæggende vektor form bil, er der kun tilbage at tilføje nye former, linjer og et par teksturer. Vi fylder vinduerne op senere!

Brug nu Ellipseværktøjet i Værktøjspanelet, tegn midten af ​​baghjulet, hold derefter Shift nede og gør det samme for forhjulet.
For præcis positionering, Ctrl plus klik på den nye ellipse, højreklik derefter på den simple ellipse og vælg Free Transform Path. Højreklik igen og vælg Forvræng. Jeg begyndte også at arbejde på forlygterne [på et nyt lag], ved hjælp af samme teknik: Ellipse - Fri transformation - Forvrængning - Indstil til position.

Siden nye lag blev tilføjet, kan de have akkumuleret, det er rimeligt at navngive dem korrekt. [Jeg tænkte, at det måske var muligt at bruge så få lag som muligt, men...]

Dernæst tilføjede jeg kofangeren. Igen, ved at bruge penneværktøjet til at spore, ankerpunktkonverteringsværktøjet til at udglatte hjørnerne og forme det nøjagtigt i forhold til originalen. [Alt dette er en veletableret og accepteret praksis for sporing, ærligt talt!]

Jeg påførte derefter en lagstil på kofangeren for at give den en kromeffekt. Højreklik på bumperlaget og anvend følgende indstillinger.

Opret et nyt lag og navngiv det Lines. Dette lag skal være det højeste. Så penværktøjet er valgt på værktøjslinjen, indstillingerne svarer til de angivne på indstillingspanelet, vi begynder at tilføje ankerpunkter i retning af den hvide pil.

Indstil nu den aktive farve til sort [eller tryk bare på D], tryk på B for at vælge børsteværktøjet, indstil nu børsteforudvalgsvælgeren i indstillingslinjen og vælg en lille pensel med bløde kanter på ca. 3. Men skift diameteren til 2 pixels [prøv selv 1], da selv 3 kan være for mange.

For at genvælge pennen skal du trykke på P, aktivere laget Linjer, højreklikke og vælge indstillingen Stregsti.

Du bliver bedt om at vælge et værktøj til at oprette et nyt streg. Vælg Pensel i rullemenuen, og klik på OK.

Jeg ændrede Lines-lagets opacitet til 54% for at blødgøre det op.

Så fortsatte jeg i samme ånd og brugte samme teknik til at tilføje andre linjer.
Tilføjet et spejl, vinduesviskere og et emblem på motorhjelmen.
Tip: Til områder, der er for små til at håndtere med penneværktøjet, skal du bruge polygon-lassoen. Klik og tilføj også ankerpunkter, som du ville gøre med en pen, og når du er færdig, højreklik på markeringen og vælg enten "Opret arbejdssti" eller "Fyld".

For strukturer som f.eks. highlights, brug Polygonal Lasso [L] til at spore rundt i sådanne områder, højreklik og Fyld med en blød blå farve [Jeg brugte #86A9D7].

Det eneste, der er tilbage at gøre nu, er at tilføje detaljerne. Detaljen er op til dig. Nedenfor er resultatet af mit arbejde efter tilføjelse af detaljer til forlygter, hjul osv.
Jeg håber, du nød lektionen.

Værktøjer til at arbejde med vektorer i Photoshop dukkede op for ganske lang tid siden, men de begyndte at blive brugt i arbejde relativt for nylig. Dette skyldes, at det er meget i lang tid de var "rå" osv. en vektor i Photoshop er ikke et specialiseret værktøj til arbejde, og det er ikke blevet ændret. Men alt ændrede sig med udgivelsen af ​​Photoshop CC.

Hvorfor har du brug for en vektor i Photoshop?

Først vil jeg fortælle dig, hvorfor jeg bruger en vektor i Photoshop. Der er mange dokumenterede vektoreditorer. De mest almindelige er Illustrator, CorelDraw, Xara. Oftest laver jeg webdesign, hvilket betyder, at mit arbejde ikke er slutresultatet. De der. Inden det bliver en hjemmeside, grænseflade eller applikation, vil layoutet blive sendt til layoutdesigneren. De fleste layoutdesignere er flydende i Photoshop, men er meget overfladisk fortrolige med Illustrator. Derfor er ønsket om at "proppe" alt i én fil ret logisk. Det er fantastisk, når layoutdesigneren modtager én PSD, der indeholder et komplet layout og endda med mulighed for at redigere elementer. Skift farven på en knap, skift radius af en menuform, øg eller mindsk en blok uden at miste kvalitet - på 2 klik og 1 minut! Vector i Photoshop giver dig mulighed for at gøre dette uden særlige færdigheder.

Funktioner ved at arbejde med vektorer i Photoshop

Hvis du tidligere har arbejdet i evt vektor editor, så vil en masse ting virke bekendt. Men du skal vænne dig til meget. Alt arbejde i Photoshop er bygget med lag, dette gælder også alle vektorværktøjer.
1. For nemt at redigere en vektor i Photoshop, skal du placere hver form på et separat lag.
2. Operationer med "fletning", "fradrag", "overlejring" anvendes bedst på ikke mere end to objekter.
3. Efter operationen "sammenflette", "fratrække", "overlejring", forbliver konturerne af de originale objekter tilgængelige for redigering.
4. Rasterstile kan nemt anvendes på alle vektorobjekter. Det er meget behageligt.
5. Du kan anvende gennemsigtighed på vektorobjekter og anvende filtre på dem.
6. Individuelle lag og grupper af lag med vektorobjekter kan nemt klones i et dokument eller kopieres til et andet PSD-dokument.
7. Mærk hvert lag og gruppelag - dette vil spare en masse tid.

Grundlæggende primitiver

Som i enhver vektoreditor har en vektor i Photoshop færdige primitiver. Grundlæggende primitiver:
“Rektangel”, “Rektangel med afrundede hjørner”, “Ellipse”, “Polygon”, “Linje”, “ Gratis figur" For hver form (til enhver tid) kan du indstille tykkelsen/typen/farven på streg og fyld. Tilgængelig for specifikke primitiver yderligere ejendomme. For eksempel kan du for en polygon indstille antallet af hjørner, og for et rektangel med afrundede hjørner kan du indstille radius for afrundingen.

Grundlæggende værktøjer

For at tegne en vilkårlig vektor eller redigere en eksisterende (inklusive omridset af primitiver), skal du bruge "Pen"-værktøjerne (tegne en vilkårlig omrids), "Pen+" (tilføj nye ankerpunkter til den færdige kontur), "Pen". -“ (slet ankerpunkter fra den færdige kontur), "Fri pen" (tegn en vilkårlig kontur i hånden), "Vinkel" (ændre bøjningerne af konturkurverne, indstil typer af forbindelser mellem ankerpunkter).

For at illustrere processen, en kort video, hvorfra du lærer:
1. Hvordan man skaber en primitiv
2. Sådan tegner du en fri vektorform
3. Hvordan man redigerer omridset af en primitiv
4. Sådan redigeres konturen af ​​en vilkårlig vektorform

Grundlæggende handlinger med vektorer i Photoshop

Der er 4 tilgængelige operationer i alt: "Flet figurer", "Stræk forreste form fra", "Flet figurer i overlejring", "Træk figurer fra i overlejring". Alle disse operationer er tilgængelige via de vigtigste Topmenu Lag > Flet former, eller gennem værktøjslinjen "Egenskaber" (øverste menu Vindue > Egenskaber).
Opmærksomhed! Før du begynder nogen operationer for at kombinere vektorformer, skal du sørge for, at lagene af disse figurer er valgt på værktøjslinjen "Layers" (slå den til F7 eller Vindue > Lag).

En kort video, der illustrerer de grundlæggende funktioner ved at "sammenflette former" i Photoshop.

Skift farve, størrelse og anvend stilarter

Nu kommer vi til den mest interessante del. En vektor i Photoshop giver dig mulighed for at ændre størrelsen både op og ned uden at miste kvalitet. For at gøre dette skal du vælge de ønskede lag på værktøjslinjen "lag", tryk på Ctrl+T (eller Command+T, hvis du har en MAC) og træk markørerne for den valgte kontur med musen for at justere størrelsen. For at ændre størrelsen proportionalt skal du holde Shift-tasten nede.


Kort video:
1. Ændr størrelsen på vektorformen
2. Skift fyldfarven på vektorformen
3. Tilføj stil til vektorformen

Download eksempel PSD (gratis)

For at gøre det nemmere for dig at finde ud af, hvordan du bruger en vektor i Photoshop og se, hvordan disse værktøjer kan bruges i praksis, poster jeg en infografisk fil lavet af mig udelukkende ved hjælp af vektorværktøjer.

Stil et spørgsmål

Hvis noget ikke fungerer for dig, eller du har spørgsmål, så skriv i kommentarerne, så hjælper jeg dig med at finde ud af det. Du kan også se videoen ved hjælp af vektorværktøjer.

Vektortegninger er meget populære, men deres skabelse kræver meget tålmodighed og udholdenhed for en begynder. Photoshop bruges til at forberede sådanne illustrationer; det kan bruges til at konvertere et fotografi til et vektorbillede. I denne artikel vil vi fortælle dig, hvordan en sådan tegning adskiller sig fra en raster, og hvordan man laver et vektorbillede i Photoshop.

Vektor

Når du opretter nyt dokument i Photoshop, skriv et hvilket som helst ord på et hvidt ark og vælg en passende størrelse (brug "Tekst"-funktionerne - ikonet med bogstavet "T" på værktøjslinjen).

Zoom ind med lupværktøjet - du vil se, at bogstaverne er lavet af pixels. Faktisk er udseendet angivet af formler, kun visningen i programmet udføres i pixels.

Vi vender tilbage normal størrelse ved at dobbeltklikke på håndikonet. Vi reducerer størrelsen som følger: "Redigering" - "Transformer" - "Skalering". Når størrelserne reduceres, bibeholdes kvaliteten af ​​bogstaverne. På samme måde forstørrer vi teksten så meget som muligt, kvaliteten forbliver også god, da formlerne fungerer godt i enhver skala.

Raster

For at konvertere et vektorbillede i Photoshop til et rasterbillede skal du reducere færdigt billede. Gå derefter til fanen "Layers", der vælg "Rasterize" - "Text". Vi fik bogstaver, der virkelig består af pixels.

Når du forstørrer et rasterbillede/tekst ved at bruge funktionerne "Redigering" - "Transformering" - "Skalering", forringes kvaliteten betydeligt. Efterhånden som proceduren gentages, bliver kvaliteten dårligere for hver gang – bogstaverne bliver slørede.

I sådanne illustrationer, når de forstørres i henhold til programmets algoritme, er nye pixels fyldt med farve. Dette sker mindre præcist, end når man arbejder med formler.

Oprettelse af vektorgrafik

Du kan lave en tegning ved hjælp af ethvert fotografi. Hvis du ikke vidste, hvordan du konverterer et foto til en vektor i Photoshop, konverter det, følg følgende procedure:

1. Åbn et foto/illustration. Opret et nyt lag.
2. Brug penneværktøjet til at tegne omridset af et af elementerne (f.eks. et ansigt). Indstil gennemsigtigheden til 20–30 % for at undgå at forstyrre baggrunden. Vælg en fyld- og konturfarve.
3. Tegn derefter konturerne af andre dele på samme måde, fyld dem med den ønskede farve.
4. Til kompleks farvepåføring på modellens ansigt kan du bruge "Filtre". Gå til "Filter Gallery", lav "Posterization" der på flere niveauer, bekvemt på 3 niveauer. Photoshop vil fortælle dig, hvordan skyggerne påføres; alt du skal gøre er at skitsere deres konturer. Du kan desaturere yderligere, gøre billedet sort/hvidt og justere skarpheden for at se niveauerne tydeligere. Når du fylder, skal du vælge gradvist lysere/mørkere farver til lagene. Du får farveovergange.

Lad os sige, at vi har nogle rasterbillede og vi ønsker at få det i vektorform (eller i kurver). Hvad skal vi gøre for dette? Først og fremmest har du brug for et program Adobe Illustrator.

Udgaven er ligegyldig.

Procedure

Åbn vores rasterbillede i Adobe Illustrator. For at gøre dette kan du klikke på billedet Højreklik musen og vælg Åbn med... > Adobe Illustrator fra rullemenuen, eller start Illustrator og træk tegningen til arbejdsområdet.

Originalt billede

På værktøjslinjen skal du vælge værktøjet " Udvælgelse"(sort pil) og klik på vores billede med denne pil. I dette tilfælde skal tegningen skille sig ud. For at kontrollere dette kan du prøve at flytte den lidt ved at holde nede venstre knap musen, når markøren er over billedet (ved hjælp af træk-og-slip-princippet).

Over arbejdsområde find knappen" Hurtigt spor» og klik på pilen ved siden af. Den viser alle de tilgængelige muligheder for denne handling. Vi har brug for varen" Sporingsmuligheder...". Når vi klikker på det, åbnes et vindue med parametre.

I højre side af indstillingsvinduet skal du vælge " Udsigt". Dette vil hjælpe dig med at få mere godt resultat og finde ud af, hvad hver af parametrene er ansvarlige for.

1) gør det videnskabeligt, det vil sige, du bliver nødt til at læse i værktøjstipsene, hvilke af parametrene der påvirker hvad og indstille de nødvendige værdier;

2) eksperimenter selv med parametrene ved hjælp af den såkaldte "scientific poking method".

Jeg foretrækker den anden metode: For det første giver den russiske oversættelse af et ord ikke altid den betydning, der er iboende i originalen, og for det andet er det ofte hurtigere og lettere at huske. Skift parameteren. Se, hvad det påvirker (visuelt). Kombiner flere parametre. Og så videre indtil et mere eller mindre acceptabelt resultat er opnået.

Det resulterende vektorbillede.

Når billedet allerede ligner sandheden, skal du i vinduet med sporingsparametre klikke på " Sporing" og i menuen over arbejdsområdet knappen " Skille ad". På denne måde får vi det originale billede, men i kurver.

Hvis du ikke er tilfreds med det opnåede resultat, kan du ændre det. For at gøre dette skal du bruge " Udvælgelse» du skal vælge alle de oprettede kurver (tryk på venstre museknap, og hold den nede, cirk om hele tegningen). Gå til menupunktet " Et objekt» > « Transformation» > « Skalering” og ændre størrelsen på billedet, så det er stort nok til nem redigering. Vælg derefter værktøjet " Direkte valg"(hvid pil). Ved hjælp af denne hvide pil klikker vi på hver node en efter en og justerer splines efter behov: når du vælger et toppunkt, vises knurhår i nærheden, ved at trække i dem, kan du ændre krumningen af ​​spline.

Resultat i gittertilstand

Du kan også få et bedre resultat, hvis du i første omgang tager et stort billede god kvalitet. Derfor, hvis du ikke ønsker at spilde tid på at fifle med spline-knuder i fremtiden, så brug billeder af høj kvalitet som råmateriale til sporing!

Endeligt resultat

Som du ved, er vektorillustrationer i øjeblikket meget populære i webgrafik. Professionelle designere kan skabe sådanne illustrationer i løbet af få timer. Hvis du er nybegynder eller amatør, vil lektioner i webgrafik helt sikkert være yderst nyttige for dig. Mål denne lektion- kaste lys over processen med at skabe det valgte billede. Jeg vil demonstrere hele processen trin for trin og forklare alle trinene ved hjælp af mine kommentarer.

For virkelig at skabe fedt billede, Du skal vælge det ønskede program og følg visse regler. Hvis du vil tegne en vektorillustration, skal du huske på, at redaktører som f.eks Adobe Illustrator eller CorelDraw. På samme tid, Photoshop har tilstrækkelige midler til at udvikle vektorillustrationer. Jeg vil tydeligt vise dette i min lektion om, hvordan man konverterer en tegning til en vektor. Jeg valgte en skitse af en kat som grundlag for illustrationen. Jeg besluttede at afbilde en blå kat med lyserøde blomster i poterne.

Trin 1

Lad os starte med at skabe baggrunden. Lad os tegne en form ved hjælp af markeringsværktøjet () (i tilstand Formlag(Formlag)). Indstillinger - (Fyldopacitet) = 0% . Brug nu en gradientoverlay: ((Layer Style - Gradient Overlay)) til at udfylde den oprettede form. Alle indstillinger er standard, du skal bare ændre vinklen (jeg vil angive graden) og gradienten. Tilføje Slag(Stroke) ( (Layer Style - Stroke)). Vi bruger alle standardindstillingerne, undtagen bredden i 1 px og farver.