Dark Wood

Webdesignul ultimilor ani presupune, in mare parte, o atentie sporita pentru detaliu.
Spre exemplu,  butoanele simple, care doar te trimiteau pe o alta pagina, sunt acum
de domeniul trecutului, ele fiind inlocuite de cele cu efecte. Cel mai cunoscut dintre
aceste efecte este cel de roll-over.
Roll-overul se manifesta, in principal, la trecerea cursorului peste un buton sau link,
acestea schimbandu-si “aspectul” grafic. Acest lucru se poate realiza prin mai multe
metode: cu ajutorul flash-ului, java, etc.

In cazul de fata avem de-a face cu o metoda mai simpla, si anume cu ajutorul
CSS-ului. Sa presupunem ca avem un meniu cu mai multe butoane:
<div id=”header_meniu”>
</div>
<a href=”index.php”><object><h3>HOME</h3></object></a>
</div>
<div>
<a href=”istoric.php”><object><h3>ISTORIC</h3></object></a>
</div>
<div>
<a href=”galerie.php”><object><h3>GALERIE FOTO</h3></object></a>
</div>
<div>
<a href=”contact.php”><object><h3>CONTACT</h3></object></a>
</div>
</div>
Toate aceste butoane sunt definite prin clasa “buttons”, deci vor avea aceleasi
propietati dictate de CSS.
La aceste butoane vrem sa adaugam efectul de roll-over: in mod normal ele vor fi, sa zicem, de culoare neagra, iar la trecerea cursorului pe deasupra lor, vor avea culoarea rosie. Codul pentru culoarea neagra va arata asa:

.buttons a{color:#000000;}
Litera “a” din fata acoladei ne spune ca aceasta linie de cod CSS
se va aplica doar linkurilor cuprinse de divrile din clasa “buttons”.

Pentru a obtine efectul dorit, scriem:

.buttons a:hover{color:#F00000;}
Toate linkurile din clasa “buttons” isi vor schimba culoarea in rosu, la trecerea
cu mouse-ul pe deasupra lor. In acelasi mod se poate proceda si cu butoanele ce au ca fundal
o imagine.

Spor la treaba si la web design!

Cu totii stim ca web designul lucreaza cu poze in format RGB (paleta de culori a monitoarelor), in timp ce tipografiile lucreaza cu Formatul CMYK (paleta de culori a imprimantelor). Uneori se intampla sa ne placa o poza anume, pe care am dori sa o implementam in grafica siteului nostru, dar imaginea respectiva este format cmyk, si cand o optimizam pentru web isi pierde semnificativ din calitate. Pentru a evita acest lucru, va voi prezenta un tutorial simplu, de convertire a pozelor din cmyk in rgb, fara pierderea semnificativa a calitatii.

Pentru inceput, vom deschide in Photoshop o poza format cmyk.  Al doilea pas ar fi accesarea meniului “Edit” , urmat de selectarea optiuni “Convert to Profile”. Se va deschide urmatoarea fereastra:

Din meniul drop-down “profile” vom selecta primul profil din lista, si anume “Working RGB” apasam “Ok” si treaba-i gata. Poza noastra cmyk s-a transformat in RGB fara pierderea substantiala a calitatii culorilor.

Spor la treaba si la web design!