Animēt ikonas ar Sketch un SVG

Digitālā pasaule kļūst arvien dinamiskāka, reaģējošāka un animētāka - sākot ar visu tīmekļa lapas izkārtojumu un beidzot ar mazāko lietotnes ikonu. Šajā apmācībā mēs izmantosim Sketch, lai izveidotu ikonu, kas attēlo failu kolekciju lejupielādes pogai vietnē. Pēc tam mēs eksportēsim savu ikonu kā SVG un animēsim to, izmantojot CSS.

Pat visvienkāršākajai animētajai ikonai ir nepieciešami daudzi tehniski apsvērumi, tāpēc katrs šīs apmācības solis ir paredzēts, lai sagatavotu jūs daudz sarežģītākiem projektiem. Lai sekotu līdzi, lasītājiem vajadzētu būt pamata izpratnei par Sketch izmantošanu, kā arī CodePen, HTML un CSS pārveidojumiem un pārejām. Iepriekšēja pieredze ar SVG nav nepieciešama.



Mani pāršalca tas, cik entuziasma pilni izstrādātāji ir Sketch pieņemšanā - un tas ir loģiski, ņemot vērā, ka programmatūra ir veidota īpaši uz ekrāna balstītai projektēšanai un izstrādei. Tā vienkāršā lietotāja saskarne un ērti lietojamie rīki nodod tās ievērojamo spēku zem pārsega.

Tā kā viss, kas ir izveidots Sketch, izmanto vektoru formas, tas ir ideāls rīks dizainu eksportēšanai kā SVG.

Ja esat aizkavējies, izmantojot SVG, vairs negaidiet. Šis formāts ir stingrs, pārlūkprogrammas to ļoti labi atbalsta un pilnībā balstīts uz vektoriem (piešķirot grafikai bezgalīgu izšķirtspēju). Turklāt katru SVG slāni var manipulēt ar CSS vai JavaScript, tāpat kā visu citu DOM. Nopietni - ko vēl jūs varētu prasīt?

01. solis

Iegūstiet 60 x 60 pikseļu artboard skicē

Iegūstiet 60 x 60 pikseļu artboard skicē

Sāciet, ieslēdzot Sketch un izveidojot jaunu projektu ar 60x60x60x artboard. Tajā būs ikona, kuru mēs izveidosim.

02. solis

Pamata formas, kas veido ikonu

ko vilkt pie grafiskā dizaina intervijas
Pamata formas, kas veido ikonu

Mūsu ikona apzīmē failu kolekciju, ko kāds var lejupielādēt. Tajā ir trīs objekti - divas fotogrāfijas un dokuments, kuri visi savu formu iegūst no taisnstūriem. Vispirms ievietojiet taisnstūrus katram objektam, izmantojot īsinājumtaustiņu R. Pēc tam piešķiriet formām baltas krāsas aizpildījuma krāsu un 1 pikseļu zilu apmali.

Robežai jābūt centrētai pretstatā formas iekšpusē vai ārpusē, jo pašreizējā SVG versija atbalsta tikai centrētas robežas (vai “insultus”, kā tos sauc). Nākotnē SVG 2 atbalstīs visus trīs robežu veidus.

03. solis

Pievieno sīkāku informāciju

Pievieno sīkāku informāciju

Lai dokumenta stūrī izveidotu trīsstūrveida locījumu, ievietojiet citu taisnstūri (12 pikseļu kvadrāts) ar tādu pašu zilo apmali, bet bez aizpildījuma krāsas. Pēc tā novietošanas lielā dokumenta taisnstūra augšējā labajā stūrī atveriet rediģēšanas režīmu, lai atklātu vektora punktus. Noklikšķiniet uz augšējā labā vektora punkta un pēc tam nospiediet dzēst, lai to noņemtu.

04 solis

Papīra krokas

Papīra krokas

Tagad mēs izdarīsim līdzīgu lietu uz lielā taisnstūra. Atlasiet šo formu un ievadiet rediģēšanas režīmu, pēc tam pārbaudiet, vai inspektorā ir atlasīta opcija “Noapaļot līdz pilnām pikseļu malām”. Pievienojiet vektora punktu figūras augšdaļā un labajā pusē, noklikšķinot uz robežlīnijām.

Visiem punktiem jābūt taisniem (nav viens no izliektajiem variantiem ar Bézier rokturiem). Novietojiet šos jaunos punktus 12 pikseļu attālumā no augšējā labā stūra, lai tie sakristu ar trīsstūrveida locījumu. Dzēsiet augšējo labo stūra punktu.

05. solis

Izmantojot rīku Šķēres

Izmantojot rīku Šķēres

Noklikšķiniet uz trīsstūrveida locījuma formas, pēc tam izmantojiet rīku Šķēres (Slānis> Ceļi> Šķēres), lai noņemtu 45 grādu leņķisko pusi. Plašāku informāciju par rīku Šķēres sk Šis raksts .

06. solis

Teksta ievietošana dokumentos

Teksta ievietošana dokumentos

Ievietojiet vairākus 1 pikseļus augstus taisnstūrus, lai attēlotu dokumenta teksta rindas. Es izmantoju dažādus platumus, lai atdarinātu kreisi pamatota teksta izskatu.

07. solis

Robežu risināšana

Robežu risināšana

Ievērojiet, kā galīgajā ikonu dizainā katram objektam ap to ir atstarpe? Parasti mēs to varētu panākt, pievienojot biezu baltu apmali zem zilās uz katra objekta pamatnes formas.

Tomēr SVG atbalsta tikai vienu apmali katrā slānī (līdz SVG 2), tāpēc tā vietā mēs dublēsim katra objekta pamatformu, pēc tam nomainīsim apakšējo formu apmali uz 4 pikseļu baltu. Grupējiet katru fotoattēlu slāni ar tā balto fonu un sagrupējiet visus dokumentu slāņus kopā.

08. solis

Piešķiriet slāņiem nosaukumu

Piešķiriet slāņiem nosaukumu

Piešķiriet visiem slāņiem nosaukumu. Tas faktiski ir svarīgs solis, jo tas ietekmē SVG, kuru mēs eksportēsim. Skice izmantos katra slāņa nosaukumu, lai piešķirtu tam ID, un tāpēc katram slānim ir nepieciešams unikāls nosaukums, un ideālā gadījumā tāds, kurā atstarpes vietā (vai camelCase) tiek izmantotas defises.

09. solis

Novietojiet un pagrieziet grupas

Novietojiet un pagrieziet grupas

Novietojiet un pagrieziet grupas pēc savas gaumes. Pēc tam izmantojiet Sketch funkciju Rādīt pikseļus (ctrl + P), lai novērtētu ikonas skaidrību. Tā kā mēs rotējam figūras ar tik plānām apmalēm, tās nekad netiks perfekti saskaņotas ar pikseļu režģi, bet man patīk dūkt ar inspektora pozicionēšanas vērtībām, lai pagrieztās formas izskatās pēc iespējas asākas. Pilnīgi veseli skaitļi vai puspikseļu X un Y vērtības ir lieliska vieta, kur sākt.

10. solis

Nosakot ārējā stāvokļa izskatu

Nosakot ārējā stāvokļa izskatu

Lai noformētu, kā ikona parādīsies kursora stāvokļa laikā, vienkārši dublējiet ikonas artboard un sakārtojiet objektus tā, lai tie būtu tuvāk viens otram un nedaudz atšķirīgi pagriezti. Pierakstiet katra objekta rotācijas vērtības normālam (neaktīvam) stāvoklim un tā kursora stāvoklim - tās mums būs vajadzīgas vēlāk.

11. solis

Ikonas sagatavošana eksportēšanai

Ikonas sagatavošana eksportēšanai

Mēs esam izveidojuši ikonu, tagad ir pienācis laiks to sagatavot eksportēšanai. Sāciet, dublējot gan neaktīvos, gan kursora stāvokļa mākslas paneļus, pēc tam atlasot katru grupu un atiestatot rotācijas vērtības līdz 0 grādiem. Mēs vēlāk izveidosim šīs rotācijas ar CSS, izmantojot pierakstītās vērtības.

galaktikas tālruņi tiek pārdoti walmart

12. solis

X un Y vērtību reģistrēšana

X un Y vērtību reģistrēšana

Apskatot X un Y vērtības inspektorā, aprēķiniet starpību starp katra objekta neaktīvo un kursora stāvokļa X, Y pozīciju (cik tālu grupa pārvietojas X un Y virzienā starp abiem stāvokļiem). Pierakstiet šos skaitļus.

13. solis

Grupēšanas atcelšana

Grupēšanas atcelšana

No diviem artartiem ar 0 grādu rotācijas slāņiem dublējiet neaktīvo stāvokļa artboard. Sarakstu Slāņi atlasiet katru grupu un atgrupējiet tās. Mēs no jauna izveidosim šīs grupas, izmantojot SVG marķējumu, daudz vieglāk nekā pēc Skices noklusējuma.

14. solis

Faila eksportēšana

Faila eksportēšana

Sarakstā Audekls vai slāņi noklikšķiniet uz artboard nosaukuma un inspektora apakšējā labajā stūrī noklikšķiniet uz pogas Padarīt eksportējamu. Atlasiet “SVG” un eksportējiet failu.

15. solis

Notīriet failu

Notīriet failu

Tagad ir pienācis laiks iztīrīt mūsu SVG failu. Zem pārsega SVG izmanto tādu pašu marķējumu kā HTML, tāpēc jebkurš tīmekļa izstrādātājs būs tieši mājās. Atverot SVG vēlamajā kodu redaktorā, pamanīsit daudz svešu marķējumu. Es bieži noņemu konteinerus, kas saistīti ar Sketch faila lapu un kartonu, saīsinu garās decimālvērtības līdz simtajai vietai un noņemu Sketch pielāgotos atribūtus.

Es iesaku kopēt / ielīmēt visu SVG marķējumu CodePen kā HTML, lai jūs varētu noņemt liekos atribūtus un elementus, vienlaikus pārliecinoties, ka rezultāts nemainās. Cik daudz jūs iztīrīsit uzcenojumu, atkarīgs no jums, bet jo vairāk jūs darīsit, jo vieglāk būs lasīt, un mazāks būs faila lielums.

16. solis

Grupu atjaunošana katram objektam

Grupu atjaunošana katram objektam

Tagad mēs atjaunosim katra objekta grupas (foto-1, foto-2, dokuments), attiecīgos elementus iesaiņojot ar ... tagiem, tāpat kā jūs esat pieradis darīt ar HTML HTML. Piešķiriet klasi katrai no grupām, piemēram:.

17. solis

CSS deklarāciju veidošana

CSS deklarāciju veidošana

Pietiekami daudz sagatavošanās darbu; ir laiks atdzīvināt ikonu! Izmantojiet klases, kuras esat piešķīris katrai grupai, lai izveidotu deklarāciju CSS. Atsaucoties uz jūsu pierakstītajām neaktīvās stāvokļa rotācijas vērtībām, izveidojiet katras grupas rotāciju, izmantojot transform: rotate (__ deg) un transform-origin: centra centrs ;.

Parasti pārveidošanas un pārejas rekvizītiem ir nepieciešami pārdevēja prefiksi, taču, spēlējoties CodePen, varat balstīties uz vienu no automātiskajām pārdevēja prefiksu opcijām, kas pieejamas, izmantojot pildspalvas iestatījumus.

Piezīme: Firefox neatbalsta pārveidošanas izcelsmes rekvizītu SVG elementos, tāpēc rotācijas vienmēr griežas ap elementa augšējo kreiso stūri. Apsveriet iespēju izveidot citu animāciju bez rotācijas pārveidojumiem, īpaši Firefox.

18. solis

Pārejas rekvizīta pievienošana

Pārejas rekvizīta pievienošana

Pievienojiet katra objekta deklarācijai pārejas rekvizītu (piemēram: pāreja: visi .4s atvieglo;). Tas ļauj objektiem animēt, kad mainām to stilu uz kursora.

19. solis

Deklarācijas lidojošajām valstīm

Deklarācijas lidojošajām valstīm

Tagad izveidosim CSS deklarācijas katram objektam tā kursora stāvoklī. Ja pievienojat šo ikonu lielākai pogai, kā man ir piemērs CodePen - jūs vēlaties, lai pogai, nevis ikonai tiktu pievienots povera selektors.

Ja ikonu veidojat neatkarīgi, pievienojiet: hover pašai SVG ikonai. Jūsu deklarācijai vajadzētu izskatīties šādi: .attachments- button: hover .document-icon {} vai .attachments-icon: hover .document-icon {}.

20. solis

Apvienojot to visu kopā

Apvienojot to visu kopā

Tas ir tad, kad notiek burvība. Atsaucoties uz vērtībām, kuras pierakstījāt, cik daudz objekti pārvietojas un rotē kursora stāvēšanas stāvoklī, atjaunojiet tos, kuri izmanto CSS pārveidojumus, kā mēs to darījām iepriekš ar neaktīvajiem stāvokļiem. Īpašība transformācija var pieņemt vairākas funkcijas (atdalītas ar atstarpi), tāpēc mēs izmantosim translate (x, y), lai pārvietotu grupas, un pagrieziet (_deg), lai tās pagrieztu. Rakstot CSS, ir daži svarīgi apsvērumi.

Pirmkārt, neaizmirstiet pēc X un Y vērtībām rakstīt px. Otrkārt, pārveidošanas funkciju secība ietekmēs rezultātu - šeit tulkojumam jānonāk pirms pagriešanas. Treškārt, atšķirībām katras grupas X un Y pozīcijās (kuras jūs pierakstījāt), iespējams, būs jākļūst pozitīvām vai negatīvām, izmantojot tulkošanas funkciju. Negatīvās X vērtības pārvietos to pa kreisi, un negatīvās Y vērtības virzīs to uz augšu. Visbeidzot, jums būs jāpielāgo jūsu pierakstītās rotācijas vērtības - negatīvās rotācijas vērtības Skicē kļūst pozitīvas, izmantojot CSS transformācijas, un otrādi.

Kad esat pabeidzis pārveidošanas vērtību pielāgošanu, esat pabeidzis! Ikona ir gatava iepriecināt jūsu vietnes apmeklētājus.

Vārdi : Pīters Tagadels

Pīters Tagadels projektē lietotnes, vietnes, grāmatas, zīmola identitāti un daudz ko citu. Viņš atrodas Sanfrancisko. Šis raksts sākotnēji tika parādīts 270 net žurnāls .

Patika tas? Izlasiet šos!