De la sosirea versiunii CS6, Adobe a implementat în Photoshop o opțiune foarte utilă pentru aspectul și dezvoltarea proiectelor web. Operațiunea este foarte usor și mai ales rapid. Prin intermediul aplicației vom putea genera foi de stil în cascadă luând ca referință formele și straturile noastre de text. Procedura este la fel de simplă ca dezvoltarea mașinii noastre, copierea versiunii de cod a elementelor noastre și lipirea ei pe foaia noastră.
Este o opțiune foarte bună mai ales pentru că ne permite să vedem evoluția designului nostru în termeni vizuali și în timp real. Iată câteva sfaturi pentru a utiliza această opțiune și pentru a obține performanță maximă:
Încearcă să fii precis
Pentru a obține un rezultat profesional, este recomandat să luați în considerare măsurătorile și proporțiile site-ului dvs. Setați valorile Lățime și Înălțime ale șablonului pe care îl proiectați și aplicați-le în macheta dvs. Când copiați codul CSS, vom plasa fiecare element luând ca referință distanța în pixeli între fiecare element și marginile pânzei. De asemenea, luați în considerare dimensiunile și motivele ierarhice pe care urmează să le includeți în proiectarea dvs., inclusiv alinierea fiecărui element și spațiul dintre fiecare dintre ele pentru a oferi lizibilitate maximă utilizatorilor dvs.
Utilizarea ghidurilor și regulile interfeței vă va ajuta să construiți un șablon curat, curat, cu toate elementele sale perfect aliniate.
Configurați toate caracteristicile fiecărui element
Opțiunea de a copia codul CSS ne oferă posibilitatea de a proiecta site-ul nostru cu mare precizie folosind straturi de formă și text. Conținutul fiecărui strat va fi copiat în Clipboard și îl putem lipi rapid în foaia noastră de stil. Din straturile de formă, capturați valorile următoarelor setări:
- Dimensiune
- Poziție
- Culoarea cursei
- Culoare de umplere (inclusiv degradeuri)
- Umbra
Din straturile de text putem capta următoarele valori:
- Familie de fonturi
- Dimensiunea fontului
- Grosimea fontului
- Inaltimea liniei
- Subliniat
- strikethrough
- Superscript
- Indice
- Aliniere text
Rețineți acest lucru și setați fiecare dintre aceste valori pentru a oferi stilul pe care îl căutați.
Lucrați cu grupuri de straturi
Această funcție traduce munca noastră organizată în două tipuri de clase, unul pentru fiecare grup care reunește straturi de forme sau text și o clasă pentru fiecare strat al unuia dintre aceste tipuri. Fiecare clasă de grup va reprezenta un element div părinte care va conține elemente div copil care vor corespunde straturilor inserate în fiecare grup. În acest fel, valorile din partea de sus și din stânga a containerelor copil vor fi setate făcând referire la containerul părinte. Trebuie să rețineți că această opțiune nu este disponibilă cu obiectele inteligente și nu va fi aplicabilă mai multor niveluri simultan decât dacă sunt grupate.
Pași pentru a converti
Odată ce v-ați realizat macheta, ați personalizat fiecare element și le-ați grupat pe grupuri, va trebui doar să urmați acești pași:
- Accesați panoul de straturi și alegeți una dintre aceste două opțiuni:
- Faceți clic dreapta pe o formă sau un strat de text sau pe un grup de straturi și alegeți Copiați CSS în meniul contextual.
- Selectați o formă sau un strat de text sau un grup de straturi, apoi alegeți opțiunea Copiați CSS în meniul panoului Straturi.
-
Lipiți codul în documentul dvs. de foaie de stil și aplicați-l pe paginile dvs. prin html5.
