Ilustratora pamācība: asu darbplūsmu un dizaina receptes

Izveidojiet lietotnes ikonu programmai Adobe Illustrator.

Visi pamācības video Ilustratora pamācība: asu darbplūsmas un dizaina receptes

Tā izskatīsies mūsu lietotnes ikona. Bet tagad pietiks runāts. Sāksim darbu tieši ar Adobe Illustrator …

Adobe Illustrator - Programmas ikonas izveide

Solījums 1: Pamatu izveide

darba plakni caur Faila>Jauns. Nākamajā logā izvēlieties formātu 70x70mm. Apstipriniet logu ar OK.
Adobe Illustrator - Programmas ikonas izveide

Pieņemiet Taisnstūra rīku no Rīku paletes un uzklikšķiniet uz jebkuras vietas jūsu darba plaknē. Pēc tam parādīsies dialoglodziņš, kurā varat ievadīt savu taisnstūra izmēru. Šeit ņemiet izmēru 35x35mm un apstipriniet visu ar OK. Tas tagad ir mūsu ikonas pamats.

Adobe Illustrator - Programmas ikonas izveide

Tā kā Apple ikonas nekad nav leņķīgas, tagad mums jānodrošina, lai stūri būtu noapaļoti. Izvēlieties taisnstūri un tad dodieties uz augšējo izvēlni Efekts>Stilizācijas filtrs>Stūri noapaļošana …

Adobe Illustrator - Programmas ikonas izveide
OK.
Adobe Illustrator - Programmas ikonas izveide

Apstiprinot šo efektu, stūri tiek parādīti noapaļoti, taču ceļš joprojām ir leņķains. Lai to mainītu, tagad dodieties uz Objekts>Pārvērst izskatu. Tagad efekts ir pārvērsts par objektu (ceļš tagad norit paapaļotajiem stūriem).

Adobe Illustrator - Programmas ikonas izveide
Gradienta palle. Ja tā vēl nav atvērta, atradīsiet to caur Logs>Gradienta palle.
Adobe Illustrator - Programmas ikonas izveide
Gradienta paletē, lai aizpildītu savu noapaļoto taisnstūri ar standarta melnbaltu gradientu. (Ja jūsu taisnstūris joprojām ir kontūra, tieši tagad ir laiks to noņemt).
Adobe Illustrator - Programmas ikonas izveide
Adobe Illustrator - Programmas ikonas izveide

tejš zils - 28/57/145
gaismas zils - 84/244/255

Gradienta palle. Pēc tam jums būs iespēja ievadīt RGB vērtības.

Gradienta palle, lai izvēlētos pareizo krāsu režīmu).

Adobe Illustrator - Programmas ikonas izveide
Adobe Illustrator - Programmas ikonas izveide
Gradientu vēl padarītu daudz gludāku, dodieties uz Efekts>Stilizācijas filtrs>Iekšējais spīdums … Piepildījuma metodes režīmā iestatiet Pārklāšana, caurredzamībai ņemiet vērtību 75% un nomiglotajam iestatiet 8,8mm. Tā kā šo efektu vēlamies pielietot tikai ārējajā apgabalā, iestatiet izvēles punktu uz Mala. Apstipriniet logu ar OK.
Adobe Illustrator - Programmas ikonas izveide
Ēnu. Tas notiek arī caur Efekts>Stilizācijas filtrs>Ēna … Izvēlieties šī filtra iestatījumus aptuveni kā attēlā 13. Tomēr šeit varat droši nedaudz variēt.
Adobe Illustrator - Programmas ikonas izveide

Nākamajā solī jums jākopē attēlota kārtiņa ar Command+C un jāievieto tā pašā vietā ar Command+F. (Datorā visas darbības var veikt, lietojot Strg+C un Strg+F).

Tā kā mums vairs nav nepieciešama virspusējā attēlota kārtiņa, jums šīs jādzēš. Kā daži no jums jau varbūt zina, visi efekti un filtri, kas tiek pielietoti Illustrator programmā, tiek uzskaitīti Parādīšanas paletē. Ja šī paleta jums nav redzama, to varat atgriezt caur Logs>Parādīšanas.

Adobe Illustrator - Programmas ikonas izveide

Tagad dzēsiet Absēnu. To varat darīt ļoti vienkārši, turēdami Absēnu Parādīšanas palētē nospiežot un velkot ar peles palīdzību uz mazgātavas simbolu paletē pa labi apakšējā malā.

Adobe Illustrator - Programmas ikonas izveide

Neņemiet vērā iekšējo spīdumu, jo mums tas jāpielāgo nedaudz. Bet vispirms mainiet savas attēlota kārtiņas platumkrāsu uz balto.

Adobe Illustrator - Programmas ikonas izveide

Tad Parādīšanas palētē noklikšķiniet uz iekšējā spīduma, tur iestatiet režīmu uz Parasts un izvēlieties dziļu melnu krāsu. Blīvumu iestatiet uz 100% un Mīkstināšanu varat iestatīt uz 10mm vērtību (sk. attēlu 17).

Adobe Illustrator - Programmas ikonas izveide

Lai šo kopiju apvienotu ar zemāk esošo oriģinālu ar zilu pāreju, vienkārši samaziniet Blīvumu līdz 50% un iestatiet aizpildes režīmu uz Mīksts gaisma. To varat izdarīt, izmantojot Caurredzamības palēti. (Šo paleti arī varat atvērt caur Logs>Caurredzamība).

Šādā veidā kontrasts tiks nedaudz palielināts un mūsu lietotnes ikona iegūs dziļumu.

Adobe Illustrator - Programmas ikonas izveide

Solījums 2: Radīt zvaigznes cirklus

Šajā solī mēs apskatīsim, kā jūs varat izveidot zvaigznes cirklus lietotnes ikonai. Vissliktāk ir pagaidām paslēpt abus kārtiņas, ko izveidojāt 1.solī, lai atkal iegūtu vietu darba zonā.

Paņemiet Līniju rīku no Rīku joslas un iestatiet Kontūras krāsu uz melno un Kontūras biezumu uz 0,5pt.

Tagad no vidus vilkt pa kreisi līdz augšu līniju un turiet peles taustiņu nospiestu. Kad esat vīna līniju (turpiniet turēt peles taustiņu spiestu), nospiediet Ctrl taustiņu + šo divu iekavu taustiņu < >.

Tagad ar turēto peles taustiņu veiciet apļveida kustību. Šī taustiņu kombinācija radīs dažādu līniju skaitu, atkarībā no jūsu peles kustības ātruma.

Kad esat veicis apļveida kustību, jums tas vajadzētu izskatīties aptuveni tāpat kā attēlā 19. (Droši jūs varat to izmēģināt dažas reizes, jo arī šeit derēs teiciens "Prakse dara cēlu").

Adobe Illustrator - Programmas ikonas izveide

Atzīmējiet visas līnijas un grupējiet tās ar Command+G (uz datora: Strg+G). Ar Command+C un Command+F (uz datora: Strg+C un Strg+F) nokopējiet visu un ielīmējiet to pašā vietā. Šim kopijā iestatiet kontūras krāsu uz balto un nedaudz pagrieziet pa labi vai pa kreisi, lai daļa no melnajām līnijām atkal būtu redzama.

Visam tam vajadzētu izskatīties aptuveni tāpat kā jums. (Attēls 20):

Adobe Illustrator - Programmas ikonas izveide

Atzīmējiet visus līnijas atkārtoti un vēlreiz grupējiet tās, izmantojot Command+G (uz datora: Strg+G).

Tagad varat atkal parādīt 1.solī izveidotos četrstūrus. Pārliecinieties, ka jūsu zvaigžņu apkārtmērķa centrs ir aptuveni jūsu četrstūra centrā.

Adobe Illustrator - Programmas ikonas izveide

Tagad nokopējiet sev pelēko apaļoto taisnstūri, ko jūs 1. solī saredzējāt ar zilu gradientu. (Command+C vai uz datora - Strg+C).

Adobe Illustrator - Programmas ikonas izveide

Tagad noklikšķiniet uz jūsu grupas ar stariem un skatieties Pārredzamības palleti. Šeit jums tagad ir iespēja (līdzīgi kā Photoshopā) izveidot masku. Divreiz noklikšķiniet uz tās jomas, ko redzat 23. attēlā. Ar šo dubultklikšķi tiks radīta tā saucamā pārklājas maska.

Adobe Illustrator - Programmas ikonas izveide

Kad jums ir izveidota šī, jūs pamanīsiet, ka jūsu Slāņu paliets mainījies, kamēr atrodaties maskā. Ar Command+F (uz PC: Strg+F) jūs tagad ielīmējat iepriekš nokopēto taisnstūri maskā. Tagad jums vienīgi jāsamazina pārklājuma no 50% līdz 10%.

Adobe Illustrator - Programmas ikonas izveide

Tagad jums jāiziet no maskas, lai atgrieztos normālā skatījumā. To varat darīt, noklikšķinot vienu reizi uz balta lauciņa blakus maskas simbolam. (25. attēls).

Adobe Illustrator - Programmas ikonas izveide

3. solis: Pamata izveide ikonas iekļaušanai

Tagad esam gandrīz pabeiguši lielāko daļu un gatavi iekļaut ikonā vai simbolā mūsu lietotnes ikonā. Tomēr jums jāizveido pamats vai neliela platforma, lai viss izskatītos labāk.

Pieņemiet Elipses rīku un vidū uzzīmējiet elipsi. (Skatiet 26. attēlu).

Adobe Illustrator - Programmas ikonas izveide

Šo elipsi aizpilda ar tumši zilu krāsu. Es esmu izmantojis šādus krāsu vērtības. RGB - 0/0/255.

Adobe Illustrator - Programmas ikonas izveide

Samaziniet pārklājumu līdz aptuveni 70% un tad dodieties uz Effektu>Mīkstināšanas filtrs>Gausa mīkstinātājs …

Adobe Illustrator - Programmas ikonas izveide

Mīkstinātājam esmu izvēlējies Rādiusu 28 pikseļus. Jūs varat šo vērtību brīvi mainīt. Apstipriniet to ar Labi.

Adobe Illustrator - Programmas ikonas izveide

4. solis: Ievietot piktogrammu

Pēc tam, kad pamats tagad ir izveidots, ir pienācis laiks. Mums praktiski vienmēr jāievieto piktogramma mūsu lietotnes ikonā. Kā papildinājumu es jums darba failos ieliku dažus dažādus piktogrammus. Jūs varat arī labprāt izmantot savus.

Iet augšējā izvēlnē uz Failu>Ievietot un izvēlieties tur piktogrammu pēc savas izvēles. Manā gadījumā tas ir dators no darba datiem.

Adobe Illustrator - Programmas ikonas izveide

... gatavs! ... varētu domāt ...

Adobe Illustrator - Programmas ikonas izveide

Taču ir vēl dažas lietas, kas jāpaveic. Piktogrammai jāiegūst ēna.. Dodieties uz Effekts>Stilizācijas filtrs>Ēna. Šajā ēnai vērtības rūpniecībās orientējieties pēc 32. attēla.

Adobe Illustrator - Programmas ikonas izveide

5. solis: Gaismas atstarojums

Pēdējā solī vēl pievienosim gaismas atstarojumu, lai viss būtu jauki. Paņemiet Elipses rīku un uzzīmējiet balto elipsi kā 33. attēlā.

Adobe Illustrator - Programmas ikonas izveide

Beigās jums vien jāiestata elipses pildījuma metode uz Mīksta gaismē. Jūsu lietotnes ikona ir gatava.

Adobe Illustrator - Programmas ikonas izveide

Noslēguma vārdi:

Ceru, ka jums patika šis pamācību materiāls un tagad varat izveidot dažas skaistas lietotnes ikonas. Failu komplektā atradīsiet arī manu sākotnējo darba failu, lai jūs varētu ielūkoties tur, ja jums kaut kur kaut kas netiek.

Ja jums ir jautājumi par šo tēmu, vienkārši uzrakstiet tos komentāros. Es centīšos tās atbildēt iespējami drīz.

Lielisks

Jūsu Juliāns