Nola bihurtu zure Photoshop diseinua CSS kodea minutu gutxian

css-photoshop

CS6 bertsioa iritsi zenetik, Adobe-k Photoshop-en oso aukera erabilgarria ezarri zuen web diseinuak diseinatu eta garatzeko. Operazioa da oso erraza eta, bereziki, azkarra. Aplikazioaren bidez kaskadako estilo orriak sortuko ditugu gure formak eta testu geruzak erreferentzia gisa hartuta. Prozedura gure maketa garatzea, gure elementuen kodearen bertsioa kopiatzea eta gure orrian itsastea bezain erraza da.

Aukera oso ona da batez ere, gure diseinuaren bilakaera termino bisualetan eta denbora errealean ikusteko aukera ematen digulako. Hemen dituzu zenbait aukera aukera hau erabiltzeko eta errendimendu maximoa:

Saiatu zehatza izaten

Emaitza profesionala lortzeko, zure webgunearen neurriak eta proportzioak kontuan hartzea gomendatzen da. Ezarri diseinatzen ari zaren txantiloiaren zabalera eta altuera balioak eta aplikatu zure maketan. CSS kodea kopiatzerakoan elementu bakoitza elementu bakoitzaren eta mihisearen ertzen artean pixeletan dagoen distantzia erreferentzia gisa kokatuko dugu. Gainera, kontuan hartu tamainan eta zure diseinuan sartuko dituzun arrazoi hierarkikoak, elementu bakoitzaren lerrokadura eta bakoitzaren arteko tartea, erabiltzaileei irakurgarritasun maximoa emateko.

Gidak eta interfazearen arauak erabiltzeak txantiloi txukuna eta garbia eraikitzen lagunduko dizu, elementu guztiak primeran lerrokatuta.

web-photoshop

Konfiguratu elementu bakoitzaren ezaugarri guztiak

CSS kodea kopiatzeko aukerak gure webgunea inprimaki eta testu geruzen erabileratik zehaztasun handiz diseinatzeko aukera ematen digu. Geruza bakoitzaren edukia arbelean kopiatuko da eta azkar itsatsi ahal izango dugu gure estilo orrian. Forma geruzetatik, harrapatu ezarpen hauetako balioak:

  • tamaina
  • Kargua
  • Trazuaren kolorea
  • Bete kolorea (gradienteak barne)
  • Itzala

Testu geruzetatik honako balioak har ditzakegu:

  • Letra-tipoen familia
  • Letra-tamaina
  • Letra lodiera
  • Lerroaren altuera
  • Azpimarrauta
  • marratu
  • Indizea
  • Azpiindizea
  • Testuaren lerrokatzea

Gogoan izan eta ezarri balio horietako bakoitza bilatzen ari zaren estiloa emateko.

Lan egin geruza taldeekin

Funtzio honek bi klase motak antolatutako gure lana itzultzen du, forma edo testu geruzak biltzen dituen talde bakoitzeko bat eta mota horietako baten geruza bakoitzeko klase bat. Talde klase bakoitzak seme div elementuak izango dituen eta talde bakoitzean txertatutako geruzekin bat etorriko den div elementu nagusi bat irudikatuko du. Horrela, haurren edukiontzien goiko eta ezkerreko balioak ezarriko dira edukiontzi nagusia erreferentzia hartuta. Kontuan izan behar duzu aukera hau objektu adimendunekin ez dagoela erabilgarri eta ezin izango dela geruza bat baino gehiagotan aplikatu aldi berean multzokatuta egon ezean.

Bihurtu beharreko urratsak

Maketa egin ondoren, elementu bakoitza pertsonalizatu eta taldeen arabera sailkatu dituzunean, urrats hauek jarraitu beharko dituzu:

 

  • Joan geruzen panelera eta aukeratu bi aukera hauetako bat:
    • Egin klik eskuineko botoiaz forma edo testu geruza batean edo geruza talde batean eta aukeratu Kopiatu CSS testuinguruko menuan.
    • Aukeratu forma edo testu geruza edo geruza talde bat eta ondoren aukeratu aukera Kopiatu CSS Geruzak paneleko menuan.
  • Itsatsi kodea estilo-orriko dokumentuan eta aplikatu orrietara html5 bidez.

    CSS-Photoshop1

    CSS-Photoshop2


Artikuluaren edukia gure printzipioekin bat dator etika editoriala. Akats baten berri emateko egin klik hemen.

Idatzi lehenengo iruzkina

Utzi zure iruzkina

Zure helbide elektronikoa ez da argitaratuko. Beharrezko eremuak markatuta daude *

*

*

  1. Datuen arduraduna: Miguel Ángel Gatón
  2. Datuen xedea: SPAM kontrolatzea, iruzkinen kudeaketa.
  3. Legitimazioa: Zure baimena
  4. Datuen komunikazioa: datuak ez zaizkie hirugarrenei jakinaraziko legezko betebeharrez izan ezik.
  5. Datuak biltegiratzea: Occentus Networks-ek (EB) ostatatutako datu-basea
  6. Eskubideak: Edonoiz zure informazioa mugatu, berreskuratu eta ezabatu dezakezu.