AddThis Social Bookmark Button

marți, august 07, 2007

GIMP si Py-Slice: impartirea in bucati (slicing) a unei imagini pentru web

O problema posibila este incadrarea unui paragraf intr-un chenar, de forma urmatoare:

border

Intr-un asemenea caz se creaza chenarul intr-o aplicatie de grafica (sa zicem The GIMP sau Inkscape, dar la fel de bine poate fi Photoshop sau Illustrator), dupa care imaginea se sparge in bucati (slices) si acestea se asambleaza foosind CSS/HTML.

Pentru slicing vom folosi unplug-in al GIMP, Py-Slice. Acesta este scris in Python si s-ar putea sa nu fie disponibil implicit in versiunea de Windows (articolul a fost scris sub Linux, unde este disponibil implicit).
Se importa imaginea in GIMP. Am adaugat un layer transparent pentru a avea ghidajele mai vizibile in pasul urmator:
border border

Se adauga ghidaje care vor delimita toate modificarile de forma ale imaginii, precum si toate portiunule repetitive (muchiile):
border

Dupa care se foloseste filtrul Py-Slice (Filters > Web > Py-Slice...):
slice

Se pot alege destinatiile in care se salveaza imaginile taiate, un HTML autogenerat precum si formatul de imagine dorit.

Iata cum arata HTML-ul generat:

Transformati layout-ul intr-unul bazat pe CSS, eliminati elementele care nu sint necesare, puneti imaginile ca background, pe cele repetitive le repetati, pe celelalte nu, scopul acestui articol este limitat la slicing, nu isi propune sa intre in HTML/CSS.

Niciun comentariu: