Kif tikkonverti d-disinn tal-Photoshop tiegħek għal kodiċi CSS f'inqas minn minuta

css-photoshop

Mill-wasla tal-verżjoni CS6, Adobe implimentat fil-Photoshop għażla utli ħafna biex tqassam u tiżviluppa disinni tal-web. L-operazzjoni hija faċli ħafna u fuq kollox mgħaġġel. Permezz tal-applikazzjoni nkunu nistgħu niġġeneraw folji ta 'stil kaskati billi nieħdu bħala referenza l-forom u s-saffi tat-test tagħna. Il-proċedura hija sempliċi daqs li tiżviluppa l-mockup tagħna, tikkopja l-verżjoni tal-kodiċi tal-elementi tagħna u tpejpha fuq il-folja tagħna.

Hija għażla tajba ħafna speċjalment minħabba li tippermettilna naraw l-evoluzzjoni tad-disinn tagħna f'termini viżwali u f'ħin reali. Hawn huma xi suġġerimenti biex tuża din l-għażla u tikseb l- Prestazzjoni massima:

Ipprova kun preċiż

Biex tikseb riżultat professjonali, huwa rrakkomandat li tqis il-kejl u l-proporzjonijiet tas-sit tiegħek. Issettja l-valuri tal-Wisa 'u l-Għoli tal-mudell li qed tfassal u applikahom għall-mockup tiegħek. Meta tikkopja l-kodiċi CSS aħna npoġġu kull element billi nieħdu bħala referenza d-distanza f'pixels bejn kull element u t-truf tal-kanvas. Ikkunsidra wkoll id-daqsijiet u r-raġunijiet ġerarkiċi li ser tinkludi fid-disinn tiegħek inkluż l-allinjament ta 'kull element u l-ispazjar bejn kull wieħed minnhom biex tipprovdi l-qari massimu lill-utenti tiegħek.

L-użu ta 'gwidi u r-regoli ta' l-interface jgħinek tibni mudell nadif u nadif bl-elementi kollha allinjati perfettament.

web-photoshop

Ikkonfigura l-karatteristiċi kollha ta 'kull element

L-għażla li nikkupjaw il-kodiċi CSS tagħtina l-possibbiltà li niddisinjaw is-sit tagħna bi preċiżjoni kbira billi nużaw forma u saffi ta 'test. Il-kontenut ta 'kull saff jiġi kkupjat fil-Clipboard u nistgħu nwaħħluh malajr fil-folja tal-istil tagħna. Mis-saffi tal-forma, aqbad il-valuri għas-settings li ġejjin:

  • Daqs
  • Pożizzjoni
  • Kulur tal-puplesija
  • Imla l-kulur (inklużi l-gradjenti)
  • Qatra dell

Mis-saffi tat-test nistgħu niksbu l-valuri li ġejjin:

  • Familja tat-tipa
  • Daqs tal-font
  • Ħxuna tat-tipa
  • Għoli tal-linja
  • Issottolinjat
  • Strikethrough
  • Superskritt
  • Sottoskritt
  • Allinjament tat-test

Żomm dan f'moħħok u ssettja kull wieħed minn dawn il-valuri biex tipprovdi l-istil li qed tfittex.

Aħdem ma 'gruppi ta' saffi

Din il-funzjoni tittraduċi x-xogħol tagħna organizzat minn żewġ tipi ta 'klassi, wieħed għal kull grupp li jiġbor flimkien saffi ta' forom jew test u klassi għal kull saff ta 'wieħed minn dawn it-tipi. Kull klassi ta 'grupp tirrappreżenta element div ġenitur li jkun fih elementi div tat-tfal u li jikkorrispondu għas-saffi mdaħħla f'kull grupp. B'dan il-mod, il-valuri ta 'fuq u tax-xellug tal-kontenituri tat-tfal jiġu ssettjati b'referenza għall-kontenitur ġenitur. Trid iżżomm f'moħħok li din l-għażla mhijiex disponibbli b'oġġetti intelliġenti u mhux se tkun applikabbli għal aktar minn saff wieħed simultanjament sakemm ma jkunux raggruppati.

Passi biex tikkonverti

Ladarba tkun għamilt il-mockup tiegħek, tkun ippersonalizzat kull element u tkun ġabruhom fi gruppi, ikollok biss issegwi dawn il-passi:

 

  • Mur fil-pannell tas-saffi u agħżel waħda minn dawn iż-żewġ għażliet:
    • Ikklikkja bil-lemin fuq forma jew saff ta 'test jew fuq grupp ta' saffi u agħżel Ikkopja CSS fil-menu tal-kuntest.
    • Agħżel saff ta 'forom jew test jew grupp ta' saffi, imbagħad agħżel l-għażla Ikkopja CSS fil-menu tal-pannell Layers.
  • Ħoll il-kodiċi fid-dokument tal-iskeda tal-istil tiegħek u applikah għall-paġni tiegħek permezz tal-html5.

    CSS-Photoshop1

    CSS-Photoshop2


Il-kontenut tal-artikolu jaderixxi mal-prinċipji tagħna ta ' etika editorjali. Biex tirrapporta żball ikklikkja hawn.

Kun l-ewwel li tikkummenta

Ħalli l-kumment tiegħek

Your email address mhux se jkun ippubblikat.

*

*

  1. Responsabbli għad-dejta: Miguel Ángel Gatón
  2. Għan tad-dejta: Kontroll SPAM, ġestjoni tal-kummenti.
  3. Leġittimazzjoni: Il-kunsens tiegħek
  4. Komunikazzjoni tad-dejta: Id-dejta ma tiġix ikkomunikata lil partijiet terzi ħlief b'obbligu legali.
  5. Ħażna tad-dejta: Bażi tad-dejta ospitata minn Occentus Networks (UE)
  6. Drittijiet: Fi kwalunkwe ħin tista 'tillimita, tirkupra u tħassar l-informazzjoni tiegħek.