Iconuri web pentu evenimente

Puteti descarca liber un set de iconuri creat pentru WorldLabel.com ce acoperta diverse evenimente, sarbatori si ocazii, cum ar fi craciun, aniversare, ziua mamei, anul nou chinezesc etc.

Imaginile sint distribuite ca Domeniu Public, deci pt fi folosaite care nicio restrictie.

Carcalaci Pac-Man cu Inkscape

Saptamina trecuta am pacatuit cu un tutorial Inkscape offtopic, despre desenarea unui set de grafica pentru jocuri RPG, mai pacatuiesc o data acum vorbind despre jocuri, in speta Pac-Man, dar promit ca voi ispasi, saptamina viitoare sau cel mult in doua saptamini voi reveni cu un tutorial GIMP care sa se incadreze coerent cu celelalte tutoriale si cit de curind vor apare si niste postari in topicul blogului.

Tutorialul e simplu: prezinta modul cum se poate desena (folosind putina editare de noduri, elipse, gradienti si blur) un carcalac pentru jocul Pac-Man (unul dintre jocurile care au facut istoria).

De data asta vine insotit si de un screencast (din pacate Flash si cu calitate slaba, fiind gazduit la YouTube):

Urmind pasii din tutorial a fost create un numar de imagini, disponibile ca Public Domain in colectia de clipart, iata o mostra:


Si la final o provocare: uitati-va la colectie, vedeti cu ce ticalos sau ticaloasa va identificati, daca nu gasiti nici unul cititi tutorialul si creati-va propria imagine de ticalos (sau ticaloasa, dupa caz).

Cum se fabrica: Crearea unor elemente pentru harti RPG cu Inkscape

Nu numai ca sint offtopic vorbind din nou despre setul de grafica pentru harti RPG dar de data asta bat si cimpii despre cit de dificila a fost decizia de a scrie tutorialul Inkscape pentru realizarea unor asemnea elemente.
Chiar a fost o decizie dificila, articolul vine in contradictie cu mai tot restul paginii de tutoriale, o directie spre care nu ma voi indrepta, doar o abatere minora mai apare din cind in cind. Voi reveni pe calea cea dreapta cit de curind :p

Pe scurt, pentru cei care nu vor sa citeasca intregul articol iata o schema descriptiva:

Dar recomand totusi sa cititi si chiar sa descarcati imaginile clipart.

Mockup (macheta)

Zilele trecute am publicat citeva borduri pentru web si/sau jocuri, azi voi face un pas mai departe: arat tuturor macheta preliminara a interfetei a ceea ce poate fi in viitor un joc (MMORPG) pe web (daca va intrebati, nu programat de mine).
Este o prima macheta, facuta cu scop orientativ, rezultatul final ar trebui sa fie mult diferit:

Multi designeri prefera sa faca asemenea machete (dupa care se implementeaza mai tirziu codul HTML) in Photoshop sau GIMP, eu lucrez cu Inkscape nu numai pentru ca este editorul meu grafic preferat, dar consider ca grafica vectoriala se preteaza mult mai bine pentru aceasta sarcina, diversele elemente sint disponibile ca obiecte pe care le poti edita/reutiliza cu multa usurinta.
Simpatic nu? De cind nu ati mai omorit niste orci? La mine a trecut multa vreme...

Borduri (chenare) pentru web si pentru jocuri

Bordurile astea mozaicate (tileable) au fost facute ca variante alternative pentru un joc pazat pe web, un model (nu preferatul meu) a fost ales pentru a fi utilizat, asa ca iata-le aici eliberate (fiind publicate pe blog intra automat sub incidenta licentei libere CreativeCommons Attribution ShareAlike), pot fi folosite liber fie pentru jocuri, fie pentru web, fie pentru ambele:

Pentru a le folosi le puteti taia in bucati cu GIMP si Py-Slice si daca tot sinteti in GIMP le puteti indexa pentru a mai reduce din dimensiunea fisierelor (cu o pierdere de calitate nu foarte mare).

Bineinteles ca cunoscatorii pot merge la sursa, in galeria de clipart si obtine de acolo nu numai originalul editabil in SVG dar si o licenta chiar si mai permisiva.

Si daca tot am vorbit de borduri, iata si vreo doua cu dimensiune fixa (cu putina munca ce pot face si ele sa aiba dimensiune variabila):


Existau idei pentru si mai multe variante numai ca s-a terminat entuziasmul, ar mai trebui muncit putin la partea motivationala...

Text 3D in Inkscape

Asa cum am promis intr-un post anterior, iata traducerea, adaptarea si completarea tutorialului despre text 3D in Inkscape folosind Blur, in care se creaza un logo in stilul celui folosit de Google.

Globuri de cristal cu Inkscape

Nu e vorba de un totorial nou, ci de unul mai vechi publicat cu luni in urma in limba engleza in Red Hat Magazine care intre timp a devenit liber si a putut fi tradus si republicat, deci Globuri de cristal in Inkscape folosind blur.

Nota: traducerea cuprinde numai partea despre globuri, cea cu text 3D va fi probabil adaptata si completata in viitorul apropiat.

Actualizare: continuarea articolului este acum disponibila.

Amuzament cu sticla si umbre in Inkscape

Ma jucam cu citeva zile in urma cu o varianta proprie a schitei pentru tema GDM facuta de Martin folosind suprafete sticloase (cu transparente si umbre), care sint tare la moze zilele astea.

Deci jucindu-ma cu chestiile astea am avut de folosit un truc simplu dar nu foarte cunoscut privind folosirea mastilor, ceea ce mi-a dat ideea de a-l dezvolta intr-un tutorial Inkscape despre sticla si umbre.

O privire rapida asupra uneltei SIOX in Inkscape 0.46 si GIMP 2.4

Cu apropape doi ani in urma cind a inceput sa se vorbeasca despre SIOX (Simple Interactive Object Extraction) s-a generat mult entuziasm si asteptatile create au fost inalte. Acum avind aplicatii publicate sau aproape publicate folosind unealta, putem arunca o privire obiectiva si trage concluzii practice, nu numai vorbi despre demonstratii care pot fi (cel putin partial) aranjate.

Avind cicluri de publicare rapide (doua noi versiuni in fiecare an) Inkscape a fost prima aplicatie cu o unealta SIOX functionala intr-o versiune publicata, incepind cu in Inkscape 0.44.
Inkscape este o aplicatie pentru grafica vectoriala, asadar a implementat algoritmul in modul sau specific, si anume ca parte a uneltei pentru tracing, care realizeaza conversia din raster in vector, deci rezultatul nu este "pixel-perfect", dar nici nu isi propune asa ceva.
Un alt minus este ca Inkscape va folosi numai fotografia initiala si o singura forma ce defineste regiunea de interes (fara a marca si subiectul sigur), deci rezultatul este departe de a fi perfect iar unealta nu lucreaza cu adevarat interactiv.

Reteta e simpla: se importa fotografia, se deseneaza liber o forma care sa o acopere, se selecteaza ambele si se efectueaza o trasare (trace) dupa culoare:

In GIMP unealta a ajuns chiar mai devreme in ramura de development, dar abia GIMP 2.4 care urmeaza sa fie lansat in curind o va pune la dispozitia unei audiente largi.
Aici exista o multime de optiuni: dimensiuni pentru pensule, margini adaptabile, nivelare si posibilitatea de a marca atit fundalul sigur cit si subiectul sigur, dar dupa ce SIOX si-a facut treaba tot mai trebuie aduse mici ajustari cu uneltele traditionale pentru selectie.

Reteta e ceva mai complexa: se deschide fotografia si apoi se foloseste unealta pentru extragerea subiectului, aceasta va oferi mai intii o unealta te tip lasou pentru marcarea regiunii de interes din jurul subiectului si apoi o pensula pentru mostrele din subiect. Se poate modifica dimensiunea pensulei, se poate mari sau micsora (zoom in/out) imaginea sau chiar deselecta prin stergere. Cind marcarea e gata se apasa Enter pentru a obtine selectarea subiectului, dar tot va fi nevoie de mici ajustari cu uneltele de selectie traditionale:


Avind experienta destul de solida cu ambele aplicatii, concluzia pe care o voi trage este evident partinitoare: folosirea SIOX poate arata ca un mare citig de timp pentru unele operatii, dar in final va trebui depusa destul de multa munca pentru a ii imbunatati rezultatele incit timpul cistigat nu e chiar atit de semnificativ, deci pentru mine poate fi considerata mai degraba un truc amuzant.
In ceea ce priveste aplicatiile particulare, la Inkscape chiar s-ar simti nevoia de a putea defini subiectul sigur, altfel rezultate satisfacatoare se vor obtine numai pentru unele imagini, pe cind in GIMP se poate mari/micsora, folosi pensule mai mici (ca la clasica metoda de a folosi Quick Mask) si practic se poate selecta orice se doreste.
Poate pentru vectorizarea imaginilor complexe e mai bine sa se extraga subiectul folosind GIMP si apoi in Inkscape sa se vectorizeze subiectul deja etras.

Reflectare imagini cu Inkscape: continuare

Recent a fost prezentat un tutorial despre creare de reflexii cu Inkscape.
Intre timp autorul a descoperit un truc foarte interesant care simplifica procesul si permite realizare unor imagini de foarte buna calitate, iata o diagrama simplificata a procesului:

Artcolul original a fost actualizat pentru a include si acest truc.

Truc grafica: Timbre postale in Inkscape

Un nou truc Inkscape in colectia de ghiduri de grafica, de data asta despre crearea de timbre postale cu Inkscape.
Nu este direct legat de designul web, dar un truc grafic oricind poate face diferenta intre o pagina plictisitoare siuna atractiva iar tehnicile descrise in tutorial pot fi utile si in alte ocazii.

Se pot obtine timbre te toate tipurile, culorile si dimensiunile vrute:

Reflectare imagini cu Inkscape si GIMP

Efectele de reflexie dau un aspect de perspectiva imaginilor carora le sint aplicate, pot fi folosite la logo-uri, la titluri, la previzualizari, la butoane si in mute alte cazuri. Iata un scurt tutorial despre realizarea unor asemenea efecte.




Actualizare: un nou truc a fost adaugat, permitind crearea de reflexii mult mai bune cu Inkscape.

Grafica web: un buton, doua butoane, trei butoane...

Butoanele reprezinta un element grafic regasit pe aproape orice site, si cu cit arata mai spectaculor, cu atit autorii considera (nu neaparat corect) ca e mai bine. Asa ca am pus cap la cap ceea ce in mod autoironic numesc un ghid definitiv pentru crearea de butoane pentru web cu Inkscape, incluzing butoane simple cu aspect 3D, in stilul Aqua sau cristaline, cu sau fara umbre si de diverse culori.

Site bilingv si steaguri

Nota: imaginile cu steaguri incluse in acest articol sint distribuite ca Domeniu Public (Public Domain) deci pot fi folosite fara nici o restrictie.

In functie de destinatia unui site poate fi nevoie ca acesta sa ofere continut unei categorii mai largi de cititori, vorbitori de limbi diferite, deci se impune ca paginile sa fie scrise in limbi diferite.
Pentru siteurile din Romania cazul cel mai des intilnit este cel bilingv, scris in limba romana si limba engleza, caz simplificat la care ma voi rezuma in continuare. Pentru un site scris in mai multe limbi, sau in alte doua decit romana si engleza, consideratiile ramin valabile si se poate proceda identic.

Specificarea limbii prin text

Cea mai simpla metoda este ca in paginile in limba romana sa se adauge (de preferinta in partea superioara, pentru a fi usor vizibil) un link textual catre varianta in limba englea a paginii, iar in paginile in limba engleza un link catre corespondentele lor in romana.

Este neprofesional si ar fi bine sa evitati sa puneti link numai catre radacina siteului in cealalta limba in loc de pagina corespondenta. In cazul unui site dinamic puteti refolosi variabilele de sesiune sau cookies pentru a identifica pagina corespondenta.

Un amanunt mic dar important este limba in care scrieti aceste linkuri: in pagina in romana trebuie sa puneti "English" iar in vea engleza "Romana;", deci de fiecare data sa folositi limba cealata, pentru a usura accestul celor care nu inteleg limba curenta a paginii.

La un site multilingv, cu mai mult de 3 limbi pentru fiecare pagina, pentru a cistiga spatiu putei folosi un element Select:

Versiune in limba:RomanaEnglishFrancais

Specificarea limbii prin imagini, folosind steaguri

Din dorinta de a crea un aspect mai placut dar si pentru ca o imagine poate fi mai usor identificata decit un text, de multe ori se foosesc si iconuri cu steaguri reprezentind limba, ca de exemplu:

Romana

sau:

English

Este foarte important sa nu folositi numai steagurile, fara text, este posibil ca acestea sa nu fie indeajuns din diverse motive: vizitatorii sufera de o boala a vederii si nu pot distinge culorile, vizitatorii sint nevazatori si folosesc un cititor de text, vizitatorii folosesc un browser text si nu unul grafic, vizitatorii nu cunosc steagurile diverselor tari. Daca din cauza layoutului sinteti nevoiti sa nu puneti si text, aveti mare grija la etichetele ALT si TITLE, care nu trebuie sa lipseasca.

O alta problema a folosirii steagurilor este de natura politica: steagurile nu reprezinta limbi sau natiuni, ci state, care sint entitati politice. Un exemplu elocvent este limba engleza, ce veti folosi: steagul SUA, tara vorbitoare de limba engleza din care veti avea probabil cei mai multi vizitatori? Steagul Marii Britanii, tara din care provine limba engleza (dar in care se vorbesc si alte limbi - galeza, scotiana, irlandeza)? Steagul Angliei, locul de origine al limbii, dar care nu este o tara ci o parte din Marea Britanie? O combinatie intre acestea (voi vorbi putin mai tirziu despre combinatii)?
Pentru a adinci si mai tare problema, exista cazul in care limba (engleza, de exemplu) este limba unui fost stat colonialist si identificarea limbii cu steagul poate provoca resentimente politice in fostele colonii ce o folosesc ca limba oficiala.
Un alt exemplu, de care este mult mai putin probabil sa va loviti in practica, este dat de China si Taiwan. China nu recunoaste existenta statului Taiwan si va va interzice folosirea steagului acestuia intr-un produs destinat publicului chinez (va trebui sa bazati distinctia in functie scrierea in limba chineza in mod simplificat si respectiv traditional).

Sa trecem la partea colorata, la imagini, iata steagul Romaniei, care este unic si nu ar trebui sa ridice probleme:

Pentru limba engleza iata trei steaguri - britanic, american si englez:

In incercarea de a evita problema politica, uneori se prefera folosirea unei cobinatii de steaguri, fie jumatate britanic si jumatate american, fie jumatate englez si jumatate american:

Puteti descarca sursele imaginilor in format vectorial (SVG), pentru a putea face modificari, a schimba dimensiunea sau chiar a crea steaguri noi: Romania, Anglia, Marea Britanie, SUA si combinatiile UK/USA si Anglia/USA. (pentru editarea SVG recomand Inkscape)

Se observa ca steagurile au fost simplificate (la cel al SUA am redus numarul de stele si de dungi) pentru lizibilitate mai buna si am facut culorile mai stralucitoare pentru a iesi mai bine in evidenta. Puteti edita si inlocui cu culori mai apropiate de cele oficiale daca doriti.

Puteti folosi sursele in format vectorial pentru a obtine imagini de alte dimensiuni, dar la miscorare rezultatul va arata foarte incetosat si va trebui optimizat la nivel de pixel (intr-un program de grafica raster cum ar fi Gimp). Iata aici un set de imagini optimizate pentru dimensiunea de 16x11 pixeli (steagurile combinate sint mai greu de identificat in aceasta forma):

Optimizarea la nivel de pixel este o operatie migaloasa, voi face disponibile imagini optimizate si pentru alte dimensiuni daca cititorii vor fi interesati de acestea in functie de comentariile la articol.

Dincolo de steaguri

Poata sa apara si ideea combinarii textului cu steagurile, pentru a crea niste iconuri mai putin incarcate politic, dar din pacate rezultatul nu este foarte usor de identificat:


In incheiere voi aminti inca o data necesitatea adaugarii textului pe linga imagini si a etichetelor ALT si TITLE.

Nota: imaginile cu steaguri incluse in acest articol sint distribuite ca Domeniu Public (Public Domain) deci pot fi folosite fara nici o restrictie.

Nota: articol sindicalizat si la Dioanad Webdesign.