Da li znate šta je Inkscape? Ok. Verovatno dosta vas i zna, a za one koji to ne znaju, to je besplatan program otvorenog koda za izradu vektorskih crteža. Da pređem na temu.
Ja sam ljubitelj vektora, obožavam da ih ubacujem u HTML i CSS, kao ikonice, pozadine…

Evo i za Vas jednog tutorijala, kako da napravite vektorski isečak u Inkscape-u.

korak 1

Otvorite inkscape, kliknite na File > Document properties (na tastaturi prečica je CTRL + Shift +D). U sekciji Orientation postavite da želite da bude Landscape. Dimenzije sami odredite.

Evo slika primera:

inkscape-1

 

korak 2

Sa leve strane imamo izabran izbor paleta alatki. Pronađite i kliknite na ikonicu sa zvezdom i poligonom ili jednostavno kliknite na Shift + 8 ili na numeričkoj tastaturi * . U gornjem delu imamo opciju da biramo da li želimo zvezdu ili poligon. Za ovaj tutorijal uzeću primer poligon, i izabraću da ima 4 ugla.

Evo primera gde se nalazi:

 

inkscape-2

 

korak 3

Da bi nam kvadrat bio istih dimenzija, potrebno je držati na tastaturi dugme Ctrl.

 

inkscape-3

 

korak 4

Sada kada smo formirali kvadrat, potrebno je da ga konvertujemo u krive. Prvo kliknite na kvadrat, a potom u meniju sa leve strane drugu ikonicu tj. na tastaturi prečicu dugme F2, a potom u gornjem meniju kliknite ikonicu da konvertujete.

inkscape-4

 korak 5

Da bi poligonu gonji i donji levi ugao bio u istoj liniji, iskoristiću vodiče ( Guidelines ). Oni se nalaze sa leve strane i gore. Potrebno je samo da prislonimo kursor miša na lenjir, u ovom primeru sa leve strane i da držimo levi klik miša, a potom da privučemo do poligona, sve vreme držimo levi klik miša. Puštamo ga kada ga privučemo do poligona.

 

inkscape-5

korak 6

Sada zahvatamo gornji levi ugao i spuštamo ga po želji dole. Ako želite da ga postavite na web sajt kao SVG, potrebno je da prvo prislonite kursor na Guidelines i na tastaturi kliknite Delete. Potom kliknite F1 ili prvu ikonicu, a potom na poligon. Sada treba da poravnamo. Kliknete Shift + Ctrl + A i sa desne strane treba da se pojavi prozor kao na slici.

inkscape-6

 

korak 7

U sekciji Align postavimo na Page – ovde podešavamo kakvo poravnanje želimo. Kliknimo da hoćemo da poravnamo prema levoj strani i dnu. To je druga ikonica u prvom redu i četvrta ikonica u drugom redu.

inkscape-7

 

korak 8

Sada treba da smanjimo stranu tj kanvas. Za ovo savetujem da iskoritite Guidelines. Postavite ih tako da se gornji nalazi na najvišoj tački poligona, a drugi na desnim uglovima poligona. Ako treba da uveličate, kliknite dugme Z i uveličajte koliko vam je potrebno. Kada sve fino poravnate, da bi smanjili potrebno je da kliknete na dugme Z, a potom držite dugme Shift. Postoji i druga opcija, ali o tome ću pisati neki drugi put.

inkscape-8

 

korak 9

Sada kliknemo na gornji Guidelines, dobijamo informacije na osi Y. To kopiramo, a potom izađemo odatle (klikom na Cancel ), kliknemo Ctrl + Shift + D i prekopiramo u polje za visinu. Isto to uradimo i sa vodičem sa strane ( desni uglovi poligona ), samo što ovde dobijamo informaciju za X osu i to prekopiramo u polje za širinu. Ako je potrebno iscentrirajte poligon. Izbrišite vodiče i kliknite na File > Save as . U desnom donjem uglu imamo opciju da biramo ekstenziju. Izabraćemo kao Optimized SVG. Vaš poligon nazovite kako god želite i sačuvajte ga.

korak 10

Što se tiče podešavanja, da ne bih sve pisao evo pojedinačnih slika. Možete tako da uradite, ali i ne morate, na vama je.

 

Sledeći i završni korak je da fajl otvorite sa nekim text editorom, prekopirate kod i postavite ga gde želite u vaš kod HTML/PHP fajla.

Čestitam! Upravo ste samostalno napravili poligon i postavili ga na web sajt.