Dark Wood

In webdesign decupatul pozelor ocupa un loc destul de important, pentru simplul motiv ca pozele sunt un element de baza al paginilor web, si cum nu toate imaginile sunt cum ne-am dori noi, ele trebuiesc prelucrate intr-un program de grafica. Decuparea pozelor cu ajutorul Photoshop-ului se poate face in mai multe feluri, totul depinzand de ceea ce dorim sa facem cu decupajul ulterior. Cea mai precisa metoda de decupare, dupa parerea mea, este cea cu cai – sau paths.
Pentru inceput vom aduce o poza in Photoshop, poza din care vrem sa decupam ceva; dupa ce am importat poza trebuie sa setam tool-ul pentru decupat: acest tool se numeste “pen tool” si se poate activa apasand tasta “p” sau din meniul din stanga al programului. Odata ce avem pen-tool selectat veti observa in partea de sus setarile tool-ului, dupa cum urmeaza in imaginea de mai jos:

Indata ce am facut setarile pentru decupare, putem incepe. De obicei aleg ca loc de start, un punct pe o linie dreapta. Trebuie retinut ca linia pe care o vom trasa va reprezenta decupajul dorit de noi.
Vom avea de a face cu doua situatii: linii drepte si linii curbe.
Pentru a trasa linii drepte, plasam “penita” deasupra punctului de pornire, dam click, apoi dam urmatorul click la celalalt capat al liniei drepte.

In continuare, va trebui sa trasam o linie curba: pentru a realiza acest lucru, dam click in urmatorul punct de pe poza si tinand apasat pe tasta stanga a mouse-ului “tragem” de “ancore” pana cand calea se aliniaza cu decupajul.

Dupa ce trasati o linie curba aveti doua optiuni: sa trasati in continuare printr-un simplu click, si atunci calea se va “mula” singura dupa un contur rotund, sau sa tineti apasat tasta “ALT” si apoi sa dati click pe ultimul nod pus; acest lucru va “reseta” nodul, putand continua decupajul in mod normal.

Odata terminat decupajul, va trebui sa salvati calea. In partea dreapta a programului veti gasi meniul “Paths”

care poate fi activat si din meniul “window”. Odata intrati in acest meniu, vom observa un “Work Path”

Un dublu-click pe el si calea este salvata (sub ce nume vrem noi). Acum numai ramane decat sa facem decupajul in sine. Selectam calea abia facuta prin comanda “Ctrl+Click” apoi mergem in meniul “Layers” selectam imaginea ce trebuie decupata si tastam “Ctrl+J” (sau mergem in meniul “Layer” de sus si click-am pe “New” si apoi “Layer via Copy”)

Layer-ul nou obtinut este chiar decupajul nostru. Pentru al vizualiza mai usor, putem dezactiva layer-ul cu imaginea initiala, dupa cum puteti vedea si mai sus.

Spor la treba si la web design!

In articolul anterior va aratam cum poate fi “hack-uit” css-ul pentru Internet Explorer (6 si 7);  astazi va voi arata cam ce trebuie facut pentru a nu ajunge in situatia de a folosi astfel de artificii tehnice.

Diversele browsere folosite azi de navigatori pe internet (Mozilla, IE, Chrome, Safari, etc.) interpreteaza si afiseaza unele proprietati html sau css in mod diferit. Pentru a le aduce la un numitor comun avem nevoie de o bucata de cod css numita reset css.

Acest reset css se va insera in fisierul .css pe care il folositi pentru siteurile voastre, de preferat chiar la inceputul lui, si va fi ceva de forma:

/* reset CSS */

*{margin:0;  padding:0;  font-family: Tahoma, Arial, Verdana, sans-serif;  font-style:normal !important;}
body{line-height: 1; background: url(../images/home/background.jpg) repeat;}
img{border:0 !important;}
a {text-decoration:none; color:#000000;}
:focus {outline:none;}
textarea {overflow:auto}
ol,ul {list-style:none;}
input{margin:0;}

Acum sa va explic cam ce face codul de mai sus:

• prima linie incepe cu semnul *, ceea ce in css inseamna ca se adreseaza tuturor tagurilor html din script; aceasta linie reseteaza la zero propietati ca margin si padding, propietati ce sunt puse automat in unele browsere. De asemenea, aici se specifica si familia de fonturi ce va fi folosita in site, si stilul acestuia.
• a doua linie face referire la tagul ‘body’ , caruia i se da proprietatea line-height: 1; aceasta proprietate este foarte utila in cazul divurilor goale, care in IE (6) iau default line-height: 10px;
• a treia linie de cod se refera strict la cazul in care avem link pe o poza si browserul ne pune un border albastru de jur imprejurul acesteia.
• a patra linie formateaza toate linkurile din site;
• a cincea linie elimina acel border punctat ce apare (mai ales in Mozilla)  cand apasam un buton/link;
• a sasea linie reseteaza campurile ‘textarea’, dandu-le posibilitatea de a pune scroll atunci can continutul “da pe-afara”;
• a saptea linie reseteaza listele, scotand acele bullet-uri default care de cele mai multe ori ne incurca la design;
• a opta linie se refera la toate formele de inputuri, carora le reseteaza margin-ul la zero. Puteti completa aceasta linie si cu un reset de padding (chiar daca a mai fost resetat mai sus). Cele mai dificil de formatat inputuri sunt cele de tip ‘checkbox’ si ‘radio’, pe care le putem pacali declarandu-le un width si un height (de obicei de 12px amandoua);

Odata resetul inserat in fisierul css, va trebui sa tinem cont de el, in sensul ca, de exemplu, pentru IE (6 si 7) va trebui sa declaram “line-height” de fiecare data cand avem de a face cu texte.

Acest reset il puteti modifica si adapta stilului vostru de lucru (va puteti crea mai multe variante), in functie de ceea ce doriti sa faceti intr-un site.

Spor la treaba si la web design!