Maitiro ekushandura yako Photoshop dhizaini kune CSS kodhi mune isingasviki miniti

css-photoshop

Kubva pakauya iyo CS6 vhezheni, Adobe yakaitwa muPhotohop sarudzo inobatsira kwazvo kuronga nekuvandudza zvigadzirwa zvewebhu. Iko kuvhiya kuri nyore chaizvo uye pamusoro pezvose nekukurumidza. Kubudikidza nechishandiso isu tinokwanisa kugadzira macascading mataira emahara achitora sereferenzi maumbirwo edu uye zvinyorwa zvemavara. Maitiro acho akareruka sekugadzira yedu mockup, kuteedzera iyo kodhi vhezheni yezvinhu zvedu uye kuinamatira pane yedu sheet.

Iyo sarudzo yakanaka kwazvo kunyanya nekuti inotibvumidza kuti tione shanduko yeyedu dhizaini mune zvinoonekwa mazwi uye munguva chaiyo. Heano mamwe matipi ekushandisa iyi sarudzo uye tora iyo performance yakakwira:

Edza kunyatso

Kuti uwane mhinduro yehunyanzvi, zvinokurudzirwa kuti utore zviyero uye zviyero zvesaiti yako. Seta iyo Hupamhi uye Kukwirira kukosha kweiyo template iwe yauri kugadzira uye woishandisa kune yako mockup. Paunoteedzera iyo CSS kodhi isu tichaisa yega yega chinhu kutora sereferenzi kureba mumapikisheni pakati pechimwe nechimwe chinhu uye nemipendero yetende. Zvakare funga nezve saizi uye zvikonzero zvepamusoro zvekuti iwe uchazosanganisira mune yako dhizaini kusanganisira kuenderana kwechinhu chimwe nechimwe uye nzvimbo pakati peumwe neumwe wavo kuti zvipe kuverenga kwakanyanya kune vashandisi vako.

Iko kushandiswa kwevatungamiriri nemitemo yeiyo interface ichakubatsira iwe kuvaka yakachena, yakachena template nezvayo zvese zvinhu zvakanyatsoenderana.

web-photoshop

Gadzira zvese hunhu hwechinhu chimwe nechimwe

Sarudzo yekuteedzera iyo CSS kodhi inotipa mukana wekugadzira yedu saiti nemazvo chaizvo kushandisa chimiro uye zvinyorwa zvemavara. Izvo zvemukati mega roga zvichateedzerwa kuClipboard uye tinogona kukurumidza kuzvinamatira mune yedu dhizaini sheet. Kubva pamatanho echimiro, tora iwo maitiro eanotevera marongero:

  • Size
  • Position
  • Stroke ruvara
  • Zadza ruvara (kusanganisira gradients)
  • Donha mumvuri

Kubva pane zvinyorwa zvemavara tinogona kutora anotevera maitiro.

  • Mhuri yemhando
  • Kukura kwemavara
  • Kukora kwefonti
  • Kureba kwetambo
  • Mutsetse
  • Kukunda
  • Chinyorwa
  • Subscript
  • Nongedzo yemavara

Chengeta izvo mundangariro uye gadza imwe neimwe yeaya makoshesera kuti upe chimiro chauri kutsvaga.

Shanda nemapoka akaturikidzana

Iri basa rinoshandura basa redu rakarongedzwa nemhando mbiri dzekirasi, imwe yeboka rega rega inounza pamwechete matanda echimiro kana zvinyorwa uye kirasi kune yega yega rukoko rweimwe yemhando idzi. Boka rega rega reboka rinomiririra mubereki div chinhu chichava nemwana div zvinhu izvo zvinoenderana nematanho akaiswa muboka rega rega. Nenzira iyi, iyo yepamusoro uye yekuruboshwe tsika yemidziyo yemwana inozoiswa nekureva kune mubereki mudziyo. Iwe unofanirwa kuziva kuti iyi sarudzo haiwanikwi nezvinhu zvine hungwaru uye haizoshandiswe kune anopfuura rimwe chete panguva imwe chete kunze kwekunge yaiswa mumapoka

Matanho ekushandura

Paunenge iwe waita yako mockup, iwe waita chimwe nechimwe chinhu uye iwe ukavaisa mumapoka, iwe uchafanirwa kungotevera matanho aya:

  • Enda kumatanho epaneru uye sarudza imwe yeiyi mbiri sarudzo:
    • Kona-kurudyi pane chimiro kana chinyorwa chinyorwa kana boka rematanho uye sarudza Kopa CSS mune zvinyorwa zvemukati.
    • Sarudza maumbirwo kana chinyorwa chinyorwa kana boka rematanda, uye sarudza sarudzo Kopa CSS mune iyo Layers pani menyu.
  • Namatira kodhi yacho mune rako remastaet gwaro uye riise kumapeji ako kuburikidza html5.

    CSS-Photoshop1

    CSS-Photoshop2


Siya yako yekutaura

Your kero e havazobvumirwi ichibudiswa. Raida minda anozivikanwa ne *

*

*

  1. Inotarisira iyo data: Miguel Ángel Gatón
  2. Chinangwa cheiyo data: Kudzora SPAM, manejimendi manejimendi.
  3. Legitimation: Kubvuma kwako
  4. Kutaurirana kwedata
  5. Dhata yekuchengetedza: Dhatabhesi inobatwa neOccentus Networks (EU)
  6. Kodzero: Panguva ipi neipi iwe unogona kudzora, kupora uye kudzima ruzivo rwako