Animirajte ikone pomoću Skice i SVG-a

Digitalni svijet je sve dinamičniji, reaktivniji i animiraniji - od cijelog izgleda web stranice do najmanje ikone u aplikaciji. U ovom uputstvu koristit ćemo Sketch za izgradnju ikone koja predstavlja zbirku datoteka za gumb za preuzimanje na web mjestu. Zatim ćemo izvesti našu ikonu kao SVG i animirati je pomoću CSS-a.

Čak i najjednostavnija animirana ikona zahtijeva brojna tehnička razmatranja, pa je svaki korak ovog vodiča osmišljen kako bi vas pripremio za daleko složenije projekte. Da bi nastavili dalje, čitatelji bi trebali imati osnovno razumijevanje upotrebe Sketcha, kao i CodePen, HTML i CSS transformacije i prijelaze. Nije potrebno prethodno iskustvo sa SVG-om.



Zanosilo me koliko su entuzijastični programeri usvojili Sketch - i to ima smisla s obzirom na to da je softver izrađen posebno za dizajn i razvoj zasnovan na ekranu. Jednostavno korisničko sučelje i jednostavni alati odaju njegovu znatnu snagu ispod haube.

A budući da sve što je stvoreno u programu Sketch koristi vektorske oblike, to je savršen alat za izvoz dizajna kao SVG-ove.

Ako ste zadržali upotrebu SVG-a, pričekajte više. Format je čvrst, preglednici ga izuzetno dobro podržavaju i u potpunosti se temelji na vektorima (dajući beskonačnu razlučivost grafikama). Štoviše, svakim slojem u SVG-u može se manipulirati CSS-om ili JavaScript-om, baš kao i bilo čime drugim u DOM-u. Ozbiljno - što biste više mogli tražiti?

Korak 01

Nabavite svoju umjetničku ploču od 60 x 60 piksela u programu Sketch

Nabavite svoju umjetničku ploču od 60 x 60 piksela u programu Sketch

Započnite paljenjem Sketcha i izradom novog projekta s umjetničkom pločom veličine 60 x 60 piksela. Sadržat će ikonu koju ćemo stvoriti.

Korak 02

Osnovni oblici koji čine ikonu

Osnovni oblici koji čine ikonu

Naša ikona predstavlja zbirku datoteka koje netko može preuzeti. Sadrži tri predmeta - dvije fotografije i dokument koji svi svoj oblik izvode iz pravokutnika. Prvo umetnite pravokutnike za svaki od objekata pomoću tipkovne prečice R. Zatim oblicima dajte bijelu boju ispune i 1px plavi obrub.

Obrub bi trebao biti centriran za razliku od oblika ili izvan njega, jer trenutna verzija SVG podržava samo centrirane obrube (ili 'poteze' kako ih nazivaju). U budućnosti će SVG 2 podržavati sve tri vrste granica.

Korak 03

Dodavanje detalja

Dodavanje detalja

Da biste stvorili trokutasti nabor u kutu dokumenta, umetnite drugi pravokutnik (kvadrat od 12 piksela) s istim plavim obrubom, ali bez boje ispune. Nakon što ga postavite u gornji desni kut pravokutnika velikog dokumenta, uđite u način uređivanja kako biste otkrili vektorske točke. Kliknite gornju desnu vektorsku točku, a zatim pritisnite Delete da biste je uklonili.

Korak 04

Nabori papira

Nabori papira

Sad ćemo napraviti sličnu stvar na velikom pravokutniku. Odaberite taj oblik i uđite u način uređivanja, a zatim provjerite je li u Inspectoru odabrano 'Round to Full Pixel Edges'. Dodajte vektorsku točku na gornju i desnu stranu oblika klikom na rubne crte.

Sve točke trebaju biti ravne (ne jedna od zakrivljenih opcija s Bézierovim ručkama). Postavite ove nove točke 12 piksela iz gornjeg desnog kuta, tako da se poravnaju s trokutastim pregibom. Izbrišite gornju desnu kutnu točku.

Korak 05

Korištenje alata Škare

Korištenje alata Škare

Kliknite oblik trokutastog nabora, a zatim alatom Škare (Sloj> Putovi> Škare) uklonite kutnu stranu od 45 stupnjeva. Više o alatu Škare potražite u ovaj članak .

iphone 8 plus ponude za crni petak

Korak 06

Stavljanje teksta na vaše dokumente

Stavljanje teksta na vaše dokumente

Umetnite nekoliko pravokutnika visokih 1 piksela da predstavljaju retke teksta u dokumentu. Koristio sam različite širine kako bih oponašao izgled teksta koji je poravnat s lijeve strane.

Korak 07

Suočavanje s granicama

Suočavanje s granicama

Primijetite kako u konačnom dizajnu ikona svaki objekt ima bijeli prostor oko sebe? Obično bismo to mogli postići dodavanjem debelog bijelog obruba ispod plavog na osnovni oblik svakog predmeta.

Međutim, SVG podržava samo jedan obrub po sloju (do SVG 2), pa ćemo umjesto toga duplicirati osnovni oblik svakog objekta, a zatim promijeniti obrub na najdonjim oblicima u bijelu 4px. Grupirajte svaki sloj fotografije s bijelom pozadinom i grupirajte sve slojeve dokumenta zajedno.

Korak 08

Naslovite svoje slojeve

Naslovite svoje slojeve

Naslovite sve svoje slojeve. Ovo je zapravo važan korak, jer utječe na SVG koji ćemo izvoziti. Sketch će koristiti ime svakog sloja kako bi mu dao ID, pa stoga svaki sloj zahtijeva jedinstveno ime, a idealno je da koristi crtice umjesto razmaka (ili u camelCase).

Korak 09

Postavite i rotirajte grupe

Postavite i rotirajte grupe

Postavite i rotirajte grupe prema svom ukusu. Zatim upotrijebite značajku 'Pokaži piksele' na skici (ctrl + P) za procjenu jasnoće ikone. Budući da rotiramo oblike s tako tankim obrubima, oni se nikada neće savršeno poravnati s pikselskom rešetkom, ali volim se petljati s vrijednostima pozicioniranja u Inspektoru tako da zaokrenuti oblici izgledaju što oštrije. Pune cijele vrijednosti ili vrijednosti X i Y vrijednosti od pola piksela izvrsno su mjesto za početak.

Korak 10

Definiranje izgleda za stanje lebdenja

Definiranje izgleda za stanje lebdenja

Da biste dizajnirali kako će se ikona pojaviti tijekom stanja lebdenja, jednostavno duplicirajte umjetničku ploču ikone i poredajte objekte tako da budu bliže i da imaju malo drugačije rotacije. Zapišite vrijednosti rotacije svakog objekta za normalno (neaktivno) stanje i njegovo stanje lebdenja - trebat će nam kasnije.

11. korak

Priprema ikone za izvoz

Priprema ikone za izvoz

Dizajnirali smo ikonu, vrijeme je da je pripremimo za izvoz. Započnite dupliciranjem neaktivnih i lebdenja stanja stanja miša, a zatim odaberite svaku skupinu i resetirajte vrijednosti rotacije na 0 stupnjeva. Kasnije ćemo ponovno stvoriti te rotacije pomoću CSS-a, koristeći vrijednosti koje smo zapisali.

Korak 12

Snimanje X i Y vrijednosti

Snimanje X i Y vrijednosti

Gledajući vrijednosti X i Y u Inspektoru, izračunajte razliku između neaktivnih i lebdećih položaja X, Y svakog objekta (koliko se skupina kreće u smjerovima X i Y između dva stanja). Zapiši te brojeve.

Korak 13

Razdruživanje

Razdruživanje

Od dvije umjetničke ploče s slojevima rotacije od 0 stupnjeva duplicirajte neaktivnu državnu umjetničku ploču. Odaberite svaku skupinu s popisa Slojevi i razdvojite ih. Ponovno ćemo stvoriti te grupe koristeći SVG oznake na daleko lakši način od zadanih zadataka Sketcha.

14. korak

Izvoz datoteke

Izvoz datoteke

Kliknite naslov umjetničke ploče na popisu Canvas ili Layers, a zatim kliknite gumb 'Učini izvoznim' u donjem desnom kutu Inspektora. Odaberite 'SVG' i izvezite datoteku.

Korak 15

Čišćenje datoteke

Čišćenje datoteke

Sada je vrijeme da očistimo našu SVG datoteku. Ispod haube, SVG koristi istu vrstu označavanja kao i HTML, tako da će svaki web programer biti kod kuće. Otvarajući SVG u željenom uređivaču koda, primijetit ćete puno tuđih oznaka. Često uklanjam spremnike povezane sa stranicom datoteke i umjetničkom pločom datoteke Sketch, skraćujem duge decimalne vrijednosti na stoto mjesto i uklanjam prilagođene atribute Sketcha.

Predlažem kopiranje / lijepljenje svih SVG oznaka u CodePen kao HTML, tako da možete ukloniti suvišne atribute i elemente, a pritom biti sigurni da se rezultat neće promijeniti. Koliko ćete očistiti oznake, ovisi o vama, ali što više učinite, lakše će se čitati i manja će biti veličina datoteke.

Korak 16

Ponovno stvaranje skupina za svaki objekt

Ponovno stvaranje skupina za svaki objekt

Sada ćemo ponovno stvoriti grupe za svaki objekt (fotografija-1, fotografija-2, dokument) omotavanjem odgovarajućih elemenata s… oznakama, baš kao što ste navikli raditi s ... u HTML-u. Dodijelite razred svakoj od grupa, na primjer:.

Korak 17

Izrada CSS deklaracija

Izrada CSS deklaracija

Dosta pripremnog rada; vrijeme je da ikonu oživite! Koristite klase koje ste dodijelili svakoj grupi za izradu deklaracije u CSS-u. Pozivajući se na vrijednosti neaktivnog stanja rotacije koje ste zapisali, ponovno stvorite rotaciju na svakoj grupi pomoću transform: rotate (__ stupnjeva) i transform-origin: center center ;.

Svojstva pretvorbe i prijelaza obično zahtijevaju prefikse dobavljača, no tijekom igranja u CodePenu možete se osloniti na jednu od opcija automatskog prefiksa dobavljača dostupnu kroz postavke olovke.

Napomena: Firefox ne podržava svojstvo transform-origin na SVG elementima, pa se rotacije uvijek vrte oko gornjeg lijevog kuta elementa. Možete razmisliti o dizajniranju drugačije animacije bez transformacija rotacije, posebno za Firefox.

Korak 18

Dodavanje svojstva prijelaza

Dodavanje svojstva prijelaza

Dodajte svojstvo prijelaza u deklaraciju svakog objekta (na primjer: prijelaz: sva jednostavnost .4s;). To omogućuje animiranje objekata kada promijenimo njihov stil kad zadržite pokazivač miša.

Korak 19

Izjave za države lebdenja

odlazak u umjetničku školu nakon fakulteta
Izjave za države lebdenja

Sada izradimo CSS deklaracije za svaki objekt u njegovom lebdjelom stanju. Ako ovu ikonu dodajete većem gumbu - kao što sam to učinio u primjer CodePen - željet ćete da pseudo-selektor: hover bude pričvršćen na gumb, a ne na ikonu.

Ako ikonu konstruirate samostalno, pričvrstite: hover na samu SVG ikonu. Vaša izjava trebala bi izgledati otprilike ovako: .attachments- button: hover .document-icon {} ili .attachments-icon: hover .document-icon {}.

Korak 20

Sve zajedno

Sve zajedno

Tada se dogodi magija. Pozivajući se na vrijednosti koje ste zapisali za to koliko se objekti pomiču i okreću u lebdjećem stanju, ponovno stvorite one koji koriste CSS transformacije kao što smo to činili prije s neaktivnim stanjima. Svojstvo pretvorbe može prihvatiti više funkcija (odvojenih razmakom), pa ćemo koristiti prevesti (x, y) za pomicanje grupa i rotiranje (_deg) za njihovo okretanje. Tijekom pisanja CSS-a postoje neka važna razmatranja.

Prvo, ne zaboravite napisati px nakon vrijednosti X i Y. Drugo, redoslijed funkcija pretvorbe utjecati će na rezultat - ovdje prijevod mora doći prije rotacije. Treće, razlike u pozicijama X i Y svake skupine (koje ste zapisali) možda će trebati postati pozitivne ili negativne kada se koristi funkcija prevođenja. Negativne X vrijednosti pomaknut će ga ulijevo, a negativne Y vrijednosti prema gore. I na kraju, morat ćete podesiti vrijednosti rotacije koje ste zapisali - negativne vrijednosti okretanja u programu Sketch postaju pozitivne kada se koriste CSS transformacije i obrnuto.

Nakon što završite s podešavanjem vrijednosti pretvorbe, gotovi ste! Ikona je spremna da obraduje posjetitelje na vašoj web stranici.

Riječi : Peter Nowell

Peter Nowell dizajnira aplikacije, web stranice, knjige, identitete marki i još mnogo toga. Sjedište mu je u San Franciscu. Ovaj se članak izvorno pojavio u izdanju 270 od neto magazin .

Sviđa li vam se ovo? Pročitajte ovo!