Mula nang dumating ang bersyon ng CS6, ipinatupad ng Adobe sa Photoshop ang isang napaka kapaki-pakinabang na pagpipilian upang mag-layout at bumuo ng mga disenyo ng web. Ang operasyon ay Napakadaling at higit sa lahat mabilis. Sa pamamagitan ng application magagawa naming makabuo ng mga sheet ng style na cascading na kumukuha bilang sanggunian sa aming mga hugis at layer ng teksto. Ang pamamaraan ay kasing simple ng pagbuo ng aming mockup, pagkopya ng bersyon ng code ng aming mga elemento at i-paste ito sa aming sheet.
Ito ay isang napakahusay na pagpipilian lalo na dahil pinapayagan kaming makita ang ebolusyon ng aming disenyo sa mga visual na termino at sa real time. Narito ang ilang mga tip upang magamit ang pagpipiliang ito at makuha ang maximum na pagganap:
Subukan na maging tumpak
Upang makakuha ng isang propesyonal na resulta, inirerekumenda na isaalang-alang mo ang mga sukat at sukat ng iyong site. Itakda ang mga halaga ng Width at Heigh ng template na iyong dinidisenyo at ilapat ang mga ito sa iyong mockup. Kapag kinopya mo ang CSS code ilalagay namin ang bawat elemento na kumukuha bilang sanggunian sa distansya sa mga pixel sa pagitan ng bawat elemento at mga gilid ng canvas. Isaalang-alang din ang mga laki at mga hierarchical na kadahilanan na isasama mo sa iyong disenyo kasama ang pagkakahanay ng bawat elemento at ang puwang sa pagitan ng bawat isa sa kanila upang magbigay ng maximum na kakayahang mabasa sa iyong mga gumagamit.
Ang paggamit ng mga gabay at patakaran ng interface ay makakatulong sa iyo na bumuo ng isang maayos at malinis na template kasama ang lahat ng mga elemento na perpektong nakahanay.
I-configure ang lahat ng mga katangian ng bawat elemento
Ang pagpipiliang kopyahin ang CSS code ay nagbibigay sa amin ng posibilidad na magdisenyo ng aming site na may mahusay na katumpakan mula sa paggamit ng mga layer ng form at teksto. Ang nilalaman ng bawat layer ay makopya sa Clipboard at maaari naming mabilis itong i-paste sa aming style sheet. Mula sa mga layer ng hugis, kunin ang mga halaga para sa mga sumusunod na setting:
- Laki
- Posisyon
- Kulay ng stroke
- Punan ang kulay (kabilang ang mga gradient)
- Drop anino
Mula sa mga layer ng teksto maaari nating makuha ang mga sumusunod na halaga:
- Font pamilya
- Laki ng font
- Kapal ng font
- Taas ng linya
- Nakasalungguhit
- Strikethrough
- Superscript
- Subscript
- Pagkahanay ng teksto
Isaisip iyon at itakda ang bawat isa sa mga halagang ito upang maibigay ang istilong iyong hinahanap.
Makipagtulungan sa mga pangkat ng layer
Isinasalin ng pagpapaandar na ito ang aming gawain na inayos ayon sa dalawang uri ng klase, isa para sa bawat pangkat na pinagsasama-sama ang mga layer ng mga hugis o teksto at isang klase para sa bawat layer ng isa sa mga ganitong uri. Ang bawat klase ng pangkat ay kumakatawan sa isang elemento ng div ng magulang na maglalaman ng mga elemento ng div ng bata na tumutugma sa mga layer na ipinasok sa bawat pangkat. Sa ganitong paraan, ang mga nangungunang at kaliwang halaga ng mga lalagyan ng bata ay maitatakda na may sanggunian sa lalagyan ng magulang. Dapat mong tandaan na ang pagpipiliang ito ay hindi magagamit sa mga matalinong bagay at hindi ito mailalapat sa higit sa isang layer nang sabay-sabay maliban kung sila ay naka-grupo.
Mga hakbang upang mag-convert
Kapag nagawa mo na ang iyong pag-mockup, na-customize mo ang bawat elemento at pinagsama mo ang mga ito ayon sa mga pangkat, sundin mo lang ang mga hakbang na ito:
- Pumunta sa panel ng mga layer at pumili ng isa sa dalawang pagpipiliang ito:
- Mag-right click sa isang hugis o layer ng teksto o isang pangkat ng mga layer at pumili Kopyahin ang CSS sa menu ng konteksto.
- Pumili ng isang hugis o layer ng teksto o isang pangkat ng mga layer, pagkatapos ay piliin ang pagpipilian Kopyahin ang CSS sa menu ng Layers panel.
-
I-paste ang code sa iyong dokumento ng mga styleheet at ilapat ito sa iyong mga pahina sa pamamagitan ng html5.
