Kuidas teisendada oma Photoshopi kujundus CSS-koodiks vähem kui minutiga

CSS-Photoshop

Alates CS6 versiooni saabumisest rakendas Adobe Photoshopis veebidisainide paigutamiseks ja arendamiseks väga kasuliku võimaluse. Operatsioon on väga lihtne ja ennekõike kiiresti. Rakenduse kaudu on meil võimalik luua kaskaadseid stiililehti, võttes aluseks meie kuju ja tekstikihid. Protseduur on sama lihtne kui maketi väljatöötamine, elementide koodiversiooni kopeerimine ja lehele kleepimine.

See on väga hea võimalus eelkõige seetõttu, et see võimaldab meil näha oma disaini arengut visuaalselt ja reaalajas. Siin on mõned näpunäited selle võimaluse kasutamiseks ja maksimaalne jõudlus:

Püüa olla täpne

Professionaalse tulemuse saamiseks on soovitatav arvestada oma saidi mõõtmete ja proportsioonidega. Määrake kujundatava malli laius ja kõrgus ja rakendage need oma maketile. Kui kopeerite CSS-koodi, asetame iga elemendi võrdluseks iga elemendi ja lõuendi servade vaheline kaugus pikslites. Kasutajate maksimaalse loetavuse tagamiseks võtke arvesse ka suurusi ja hierarhilisi põhjuseid, mille kavatsete oma kujundusse lisada, sealhulgas iga elemendi joondamine ja nende vaheline kaugus.

Juhendite ja liidese reeglite kasutamine aitab teil luua korraliku ja puhta malli, mille kõik elemendid on ideaalselt joondatud.

veebi-photoshop

Konfigureerige iga elemendi kõik omadused

CSS-koodi kopeerimise võimalus annab meile võimaluse kujundada oma sait vormi- ja tekstikihtide kasutamise abil väga täpselt. Iga kihi sisu kopeeritakse lõikelauale ja saame selle kiiresti oma stiililehele kleepida. Kujundage kujundikihtidest järgmiste seadete väärtused:

  • tamaño
  • Asukoht
  • Löögi värv
  • Täitevärv (ka gradient)
  • Varju langemine

Tekstikihtidest saame lüüa järgmised väärtused:

  • Fontide perekond
  • Fondi suurus
  • Fondi paksus
  • Reakõrgus
  • Allajoonitud
  • Läbikriipsutamine
  • Ülaindeks
  • Alaindeks
  • Teksti joondamine

Pidage seda meeles ja määrake kõik need väärtused otsitava stiili pakkumiseks.

Töö kihtgruppidega

See funktsioon tõlgib meie tööd, mis on korraldatud kahte tüüpi klasside kaupa: üks igale rühmale, mis koondab kujundi- või tekstikihte, ja klass nende tüüpide iga kihi jaoks. Iga rühmaklass esindab vanema div elementi, mis sisaldab alam div elemente, mis vastavad igasse rühma sisestatud kihtidele. Sel viisil määratakse alamkonteinerite ülemine ja vasak väärtus, lähtudes vanemkonteinerist. Peaksite meeles pidama, et see valik pole nutikate objektidega saadaval ja see ei kehti korraga rohkem kui ühe kihi jaoks, kui need pole rühmitatud.

Teisendamise sammud

Kui olete oma maketi teinud, olete iga elemendi kohandanud ja grupeerinud, peate järgima ainult neid samme:

 

  • Minge kihtide paneelile ja valige üks kahest võimalusest.
    • Paremklõpsake kuju või tekstikihil või kihtide rühmal ja valige Kopeeri CSS kontekstimenüüs.
    • Valige kujundid või tekstikiht või kihtide rühm ja seejärel suvand Kopeeri CSS paneeli menüüs Kihid.
  • Kleepige kood oma stiililehe dokumenti ja rakendage seda oma lehtedele html5 kaudu.

    CSS-Photoshop1

    CSS-Photoshop2


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

Ole esimene kommentaar

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.