Ghid definitiv pentru crearea de butoane pentru web cu Inkscape

Voi parcurge citeva metode de creare a unor diverse modele de butoane web cu Inkscape: simple, aqua, cristal, cu si fara umbre, de diferite culori si in diferite stari.

Butoane simple cu aspect 3D

Voi incepe cu cel mai simplu buton, care va fi folosit apoi ca baza pentru celelalte.

Folosind unealta pentru dreptunghiuri am desenat un dreptunghi si l-am umplut cu culoarea dorita. Am rotunjit colturile (am folosit petru rotunjire o raza de 16px):
Copiez dreptunghiul, folosesc pentru copie ca si culoare de umplere un gradient de la negru cu transparenta partiala la negru cu transparenta totala. Pun copia cu gradientul deasupra originalului (am folosit doua dreptunghiuri pentru a putea mai apoi schimba cu usurinta culoarea butonului si a obtine derivate)
Copiez inca o data dreptunghiul de baza, il deplasea putin in dreapta-jos, il colorez in negru, ii aplic un usor efect Gaussian Blur si il mut in fundal, sub restul elementelor. Am obtinut baza butonului:
Folosind unealta pentru text adaug eticheta dorita pe buton. Aleg fontul, dimensiunea si culoarea dorite pentru acesta. Copiez textul, il colorez in negru, aplic un usor blur, il desplasez in dreapta-jos si il mut sub textul initial pentru a obtine un efect 3D:
Fac citeva derivate: schimb culoarea dreptunghiului initial si am instantaneu butoane de culori diverse:

Butoane Aqua

Trec la butoane in stilul Aqua, pentru a simula un efect de lichid sau de gel.

Pornesc de la dreptunghiul de baza de la butonul simplu caruia ii rotunjesc si mai tare colturile. Fac o copie si o colorez in gradient de la negru cu transparenta partiala la negru cu transparenta totala, dar orientat invers (de jos in sus) fata de cazul precedent. Pentru zona iluminata fac inca o copie a dreptunghiului, il colorez in alb si il micsorez, dupa care il plasez in zona superioara:
Colorez dreptunghiul alb cu un gradient de la alb cu transparenta partiala la alb cu transparenta totala. Mai fac inca o zona luminoasa, o alta copie colorata in alb, de data asta solid. O fac mult mai subtire, o plasez in partea inferioara a butonului si ii aplic un foarte puternic filtru Gaussian Blur:
Aplic o umbra usoara si eventual putin blur pe zona iluminata superioara:
De data asta voi pune o eticheta mai complexa pe buton: nu numai text dar si o imagine. Textul il pun cu unealta pentru text iar imaginea este un PNG pe care l-am importat si redimensionat. Folosesc Trace Bitmap dupa Brightness pentru a obtine o versiune vectoriala a conturului imaginii, fac o copie a textului, si le transform in umbra pentru aspect 3D colorindu-le pe ambele in negru, deplasindu-le putin in dreapta-jos si aplicind un usor blur:

Butoane de cristal

Se ataseaza un efect de cristal sau sticla butonului simplu creat initial.

Pornesc de la butonul simplu, schimb orientarea gradientului pe verticala:
Fac o copie a dreptunghiului de baza pe care il umplu cu alb. Cu linii Bézier desenez un poligon care se suprapune peste buton in portiunea din stinga-sus apoi fac o operatie de intersectie intre poligon si copia alba a dreptunghiului de baza pentru a obtine o portiune iluminata:
Ajustez curbura muchiei inferioare a suprafetei iluminte si apoi o colorez cu un gradient de la alb partial transaprent la alb total transparent:

Umbra la baza

Voi explora un alt tip de umbra, la baza butonului, care creeaza o perspectiva complet diferita a butonului.

Folosesc butonul Aqua, fara nici un fel de umbra. Fac o copie a dreptunghiului cu colturi rotunjite, il colorez in negru, ii modific inaltimea si il deplasez la baza butonului. Ii aplic filtru Gaussian Blur, ii modific transparenta si il mut sub buton:

Efect de reflexie

Un alt efect cu care voi experimena este cel de reflexie (oglinda).

Aqua

Colorez reflexia cu un gradient de la culoarea de baza cu opacitate totala pina la culoarea e baza cu transparenta totala. Pot adauga apoi unul dintre cele doua tipuri de umbra descrise inainte:
Mult mai multe despre reflexii se pot citi intr-un ghid dedicat acestei operatii.

Roll-over, butoane active si inactive

Pentru un site web este nevoie uneori de diverse stari ale unui buton: activ, inactiv si chair efect de roll-over, atunci cind se trece cu mouse-ul pe deasupra lui.

Pornesc de la versiunea finala a butonului Aqua. caruia ii schimb culoarea de fundal intr-o nuanta mai deschisa. Selectez umbra etichetei butonului si o transform in stralucire schimbindu-i culoarea din negru in alb si amplificind intensitatea filtrului blur:
Am trei stari ale butonului: normal, iluminat si inactiv. Pe cel inactiv l-am obtinind folosind o nuanta de gri pentru fundal si un alt gri mai deschis pentru textul etichetei:

Aici se termina deocamdata ghidul "definitiv" pentru creare butoane web cu Inkscape. Daca mi-au scapat unele cazuri necesare, atrageti-mi atentia si voi adauga noi sectiuni.
Va puteti face propriile butoane urmind instructiunile sau chiar folosind sursele in format SVG ale butoanelor realizate de mine in cadrul acestui tutorial.

Actualizare: Acest tutorial Inkscape a fost tradus si in limba engleza pentru Nicu's How-to.

Aceasta lucrare este licentiata sub Creative Commons Attribution-Share Alike 2.5 License.