Pixel Frame: palikkareunus minkÀ tahansa kuvan ympÀrille

takaisin töihin
Ramos The Dachshund Framed In Pixel Frame Blocks: Irtileikattu MĂ€yrĂ€koira SinisellĂ€, Pilkullisella LiukuvĂ€rillĂ€, Ja ÄÀriviivaa KiertÀÀ Sana RAMOS Toistuvina SinisinĂ€ Palikoina.
Julkaistu Tagit: illustration, personal project, tutorial, typography

Palasin yhÀ uudelleen samaan efektiin, mutta helppoa tapaa tehdÀ sitÀ ei ollut: sana pilkottuna neliöpalikoihin, kiedottuna tiiviisti kohteen ympÀrille, osa kirjaimista edessÀ, osa piiloutuneena taakse. Pixel Frame on työkalu, jonka rakensin sitÀ varten. Se toimii selaimessa ja on ilmainen.

YlhÀÀllÀ oleva koira on Ramos. Pudotin hÀnen kuvansa työkaluun, kirjoitin nimen, ja palikat asettuivat hÀnen ympÀrilleen sinisinÀ ja kirjoittivat RAMOS kerta toisensa jÀlkeen, kirjain kutakin palikkaa kohti. Pilkullinen tausta on taso, jonka asetin viedyn kuvan taakse; irtileikkaus ja palikat tulivat suoraan työkalusta.

Pinnan alla on muutama vaihe. Työkalu leikkaa kohteen irti taustastaan: sen omalla lÀpinÀkyvyydellÀ, jos tiedostossa sellaista on, tai tÀyttÀmÀllÀ sitÀ ympÀröivÀn valkoisen, kun kuva on tasaisella taustalla. Sitten se asettaa ruudukon siluetin pÀÀlle, sÀilyttÀÀ ne ruudut, joiden lÀpi reuna kulkee, ja kiertÀÀ ne jÀrjestyksessÀ muodon ympÀri. Tekstisi tippuu tÀhÀn ruuturenkaaseen, kirjain palikkaa kohti, ja jokainen palikka voi piiloutua kohteen taakse tai asettua sen pÀÀlle.

Ennen palikat myötÀilivÀt pelkkÀÀ reunaa. TÀssÀ versiossa on uutena Distance-sÀÀdin: kun kasvatat sitÀ, kankaan ympÀrille syntyy tyhjÀ marginaali, jolloin rengas irtoaa siluetista ja kiertÀÀ valitsemasi vÀlimatkan pÀÀssÀ.

Sama Harmaa Möykky Ajettuna Pixel Framen LÀpi Kahdesti: Vasemmalla Palikat MyötÀilevÀt Reunaa, Oikealla Ne KiertÀvÀt EtÀÀmpÀnÀ.

Vertailussa on yksi harmaa möykky ajettuna lÀpi kahdesti: Distance nollassa vasemmalla, jossa palikat myötÀilevÀt reunaa ja pari livahtaa sen taakse, ja kuudessakymmenessÀ oikealla, jossa koko rengas irtoaa muodosta.

Kokeile sitÀ omalla kuvallasi Pixel Frame -työkalussa. Se vie ulos PNG:n ja SVG:n, ja SVG:ssÀ palikat ja kirjaimet sÀilyvÀt aitoina vektorimuotoina; kaikki pyörii selaimessasi, joten mikÀÀn pudottamasi tiedosto ei poistu koneeltasi. Ramos-render syntyy pienestÀ siemennetystÀ skriptistÀ tÀmÀn sivuston repositoriossa, joten se osuu samoihin palikoihin joka ajolla.