Inkscape – isečci za web

Početak
Pre početka je uvek dobro imati jasan koncept i skicu sa što više detalja. Zatim u Inkscape-u definišite Grid, iz menia izaberite File > Inkscape Preferences ili (Shift+Ctrl+P) pa kartica Grid, a nakon toga na osnovu koncepta i skice kreirajte layout web strane.

Layout (raspored, pozicioniranje)
U toku kreiranja layout uključite „lepljenje“ za Grid izborom ikonice u Snap Control Bar-u (kao na slici) i trudite se da budete precizni, jasno definisani i dobro organizovani tj. tačno odredite razmake,
stilove fonta, veličine objekata, a grupe elemenata rasporedite po slojevima i sl.

Isečci (prvi način)

Sada kada ste kreirali layout web strane možete je izdeliti-iseći pomoću alata Slicer. Upotreba je krajnje jednostavna. Pokrenite slicer, Extensions > Web > Slicer > Create slicer rectangle i definišite ime isečka, format, HTML, id i sl. Nakon toga u uglu strane pojaviće se transparetni crveni kvadrat koji treba da preklopite (postavite) preko objekta za isecanje. Primetićete da je Inkscape automatski kreirao sloj Web slicer.

Ukoliko želite možete od nekoliko isečaka kreireti grupi ili isečcima dodeliti JAVA atribute. Kada sve to definišete izaberite Extensions > Web > Slicer > Export layout pieces and HTML+CSS code... I u plutajućoj paleti upišite tačnu putanju do foldera, a zatim pritisnite Apply. Nakon toga u izabranom folderu Inkscape će generisati HTML, CSS i slike isečaka. Verovatno kada budete otvorili HTML u nekom browser-u nećete biti zadovoljni krajnjim rezultatom. Dobijeni rezultat je samo HTML skica. No, ni to nije loše za početak. smile

Isečci (drugi način)

Drugi način i meni mnogo draži, a služi samo za kreirane isečaka, kodiranje će te morati „peške“(mada se i u predhodnom sve svodi na isto). Prvo kreirajte sloj Slicer i zatim mu postavite providnost (opacity) na 50%. Nakon toga ucrtajte objekte koji određuju veličinu isečaka (kao na slici). Zatim izaberite jedan isečak i otvorite plutajuću paletu Object Properties, Object > Object Properties... ili (Shift+Ctr+O) i definišite id, Labels i Title, pa sve to ponovite sa svim ostalim formama isečaka.

Nako toga izaberite oblik isečaka i File > Export Bitmap... ili (Shift+Ctrl+E) isključite sloj Slicer i export-ujte isečak. Inkscape će automatski imenovati PNG fajl onako kako ste ga definisali u Object Properties. Ukoliko želite da isečak bude transparentan morate isključti sve slojeve ispod slike za isečak. Naravno, sa svim ovim morate eksperimentisati dok ne razvijete neki svoj sistem za brži rad.

Krajnji rezultat mojih isečaka možete pogledati na web stranu ili kako je ona nastala.