Hoe u u Photoshop-ontwerp binne minder as 'n minuut na CSS-kode kan omskakel

css-photoshop

Sedert die CS6-weergawe, het Adobe 'n baie nuttige opsie geïmplementeer om webontwerpe uit te lê en te ontwikkel. Die operasie is baie maklik en bowenal vinnig. Deur middel van die toepassing sal ons in staat wees om waterval stylvelle te genereer, met verwysing na vorms en tekslae. Die prosedure is so eenvoudig soos om ons model te ontwikkel, die kodeweergawe van ons elemente te kopieer en op ons blad te plak.

Dit is 'n baie goeie opsie, veral omdat dit ons in staat stel om die ontwikkeling van ons ontwerp in visuele terme en in reële tyd te sien. Hier is 'n paar wenke om hierdie opsie te gebruik en die maksimum prestasie:

Probeer om presies te wees

Om 'n professionele resultaat te behaal, word aanbeveel dat u die afmetings en verhoudings van u webwerf in ag neem. Stel die Breedte- en Hoogwaardes van die sjabloon wat u ontwerp, en pas dit toe op u model. Wanneer u die CSS-kode kopieer, plaas ons elke element as verwysing na die afstand in pixels tussen elke element en die rande van die doek. Neem ook rekening met die groottes en die hiërargiese redes wat u in u ontwerp gaan insluit, insluitend die belyning van elke element en die spasiëring tussen elkeen om u gebruikers maksimum leesbaarheid te gee.

Die gebruik van gidse en die reëls van die koppelvlak sal u help om 'n netjiese, skoon sjabloon te bou met al sy elemente perfek in lyn.

web-fotoshop

Stel al die eienskappe van elke element op

Die opsie om die CSS-kode te kopieer, gee ons die moontlikheid om ons webwerf met groot presisie te ontwerp deur gebruik te maak van vorm- en tekslae. Die inhoud van elke laag sal na die knipbord gekopieër word en ons kan dit vinnig in ons stylblad plak. Vang die waardes vir die volgende instellings uit die vormlae:

  • Tamano
  • posisie
  • Slagkleur
  • Vul kleur (gradiënte ingesluit)
  • Valskadu

Uit die tekslae kan ons die volgende waardes vaslê:

  • Font familie
  • Lettergrootte
  • Lettertipe dikte
  • Lyn hoogte
  • Onderstreep
  • deurhaal
  • Opskrif
  • Inteken
  • Teksbelyning

Hou dit in gedagte en stel elkeen van hierdie waardes om die styl te voorsien waarna u op soek is.

Werk met laaggroepe

Hierdie funksie vertaal ons werk georganiseer deur twee soorte klas, een vir elke groep wat lae vorms of teks bymekaarbring en 'n klas vir elke laag van een van hierdie soorte. Elke groepklas sal 'n ouer-div-element voorstel wat kind-div-elemente sal bevat en wat ooreenstem met die lae wat in elke groep ingevoeg is. Op hierdie manier sal die boonste en linker waardes van die kinderhouers gestel word, met verwysing na die ouerhouer. U moet onthou dat hierdie opsie nie by slim voorwerpe beskikbaar is nie en dat dit nie op meer as een laag gelyktydig van toepassing sal wees nie, tensy dit gegroepeer is.

Stappe om te skakel

Nadat u 'n model gemaak het, u elke element gepersonaliseer het en dit volgens groepe gegroepeer het, hoef u slegs die volgende stappe te volg:

 

  • Gaan na die laagpaneel en kies een van die twee opsies:
    • Regskliek op 'n vorm of tekslaag of op 'n groep lae en kies Kopieer CSS in die konteksmenu.
    • Kies 'n vorm of tekslaag of 'n groep lae en kies dan die opsie Kopieer CSS in die Layers-paneelmenu.
  • Plak die kode in u stylbladdokument en pas dit via html5 op u bladsye toe.

    CSS-Photoshop 1

    CSS-Photoshop 2


Die inhoud van die artikel voldoen aan ons beginsels van redaksionele etiek. Klik op om 'n fout te rapporteer hier.

Wees die eerste om te kommentaar lewer

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie.

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.