Si ta ktheni modelin tuaj Photoshop në kodin CSS në më pak se një minutë

css-photoshop

Që nga mbërritja e versionit CS6, Adobe implementoi në Photoshop një mundësi shumë të dobishme për paraqitjen dhe zhvillimin e dizenjove në internet. Operacioni është shumë e lehtë dhe mbi të gjitha shpejt. Përmes aplikacionit ne do të jemi në gjendje të gjenerojmë fletë stili kaskadë duke marrë si referencë format dhe shtresat e tekstit tonë. Procedura është aq e thjeshtë sa zhvillimi i modelit tonë, kopjimi i versionit të kodit të elementeve tona dhe ngjitja e tij në fletën tonë.

Isshtë një opsion shumë i mirë, veçanërisht sepse na lejon të shohim evolucionin e dizajnit tonë në terma vizualë dhe në kohë reale. Këtu janë disa këshilla për të përdorur këtë opsion dhe për të marrë performanca maksimale:

Mundohuni të jeni preciz

Për të marrë një rezultat profesional, rekomandohet që të merrni parasysh matjet dhe proporcionet e faqes tuaj. Vendosni vlerat e Gjerësisë dhe Lartësisë së shabllonit që po modeloni dhe zbatojini ato në modelin tuaj. Kur kopjoni kodin CSS, ne do të vendosim secilin element duke marrë si referencë distancën në piksel midis secilit element dhe skajeve të kanavacës. Merrni gjithashtu parasysh madhësitë dhe arsyet hierarkike që do të përfshini në modelin tuaj, përfshirë shtrirjen e secilit element dhe hapësirën ndërmjet secilit prej tyre për të siguruar lexueshmërinë maksimale për përdoruesit tuaj.

Përdorimi i udhëzuesve dhe rregullave të ndërfaqes do t'ju ndihmojnë të ndërtoni një model të pastër, të pastër, me të gjithë elementët e tij të rreshtuar në mënyrë të përsosur.

ueb-fotoshop

Konfiguroni të gjitha karakteristikat e secilit element

Mundësia e kopjimit të kodit CSS na jep mundësinë për të hartuar faqen tonë me saktësi të madhe duke përdorur shtresat e formës dhe tekstit. Përmbajtja e secilës shtresë do të kopjohet në Clipboard dhe ne mund ta ngjisim shpejt në fletën tonë të stilit. Nga shtresat e formës, kapni vlerat e cilësimeve të mëposhtme:

  • Madhësi
  • Pozicion
  • Ngjyra e goditjes
  • Plotësoni ngjyrën (përfshirë gradientët)
  • Hija e rënies

Nga shtresat e tekstit mund të kapim vlerat e mëposhtme:

  • Familja e shkronjave
  • Madhësia e shkronjave
  • Trashësia e shkronjave
  • Vija e gjatesise
  • Nënvizuar
  • gërmave
  • Mbishkrim
  • Nënshkrimi
  • Rreshtimi i tekstit

Mbani në mend këtë dhe caktoni secilën prej këtyre vlerave për të siguruar stilin që ju po kërkoni.

Punoni me grupe shtresash

Ky funksion përkthen punën tonë të organizuar nga dy lloje klasash, një për secilin grup që bashkon shtresa formash ose teksti dhe një klasë për secilën shtresë të njërit prej këtyre llojeve. Çdo klasë e grupit do të përfaqësojë një element div prind që do të përmbajë elemente div fëmijë dhe që do të korrespondojë me shtresat e futura në secilin grup. Në këtë mënyrë, vlerat e sipërme dhe të majta të kontejnerëve për fëmijë do të vendosen duke iu referuar kontejnerit prind. Duhet të keni parasysh se ky opsion nuk është i disponueshëm me objekte inteligjente dhe nuk do të jetë i zbatueshëm për më shumë se një shtresë njëkohësisht nëse nuk janë grupuar.

Hapat për tu kthyer

Pasi të keni bërë talljen tuaj, ju keni personalizuar secilin element dhe i keni grupuar ato sipas grupeve, do të duhet të ndiqni vetëm këto hapa:

  • Shkoni në panelin e shtresave dhe zgjidhni një nga këto dy opsione:
    • Kliko me të djathtën mbi një formë ose shtresë teksti ose një grup shtresash dhe zgjidh Kopjoni CSS në menynë e kontekstit.
    • Zgjidhni një formë ose shtresë teksti ose një grup shtresash, pastaj zgjidhni opsionin Kopjoni CSS në menunë e panelit Layers.
  • Vendosni kodin në dokumentin tuaj të stilit dhe zbatojeni atë në faqet tuaja përmes html5.

    CSS-Photoshop1

    CSS-Photoshop2


Lini komentin tuaj

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar me *

*

*

  1. Përgjegjës për të dhënat: Miguel Ángel Gatón
  2. Qëllimi i të dhënave: Kontrolloni SPAM, menaxhimin e komenteve.
  3. Legjitimimi: Pëlqimi juaj
  4. Komunikimi i të dhënave: Të dhënat nuk do t'u komunikohen palëve të treta përveç me detyrim ligjor.
  5. Ruajtja e të dhënave: Baza e të dhënave e organizuar nga Occentus Networks (BE)
  6. Të drejtat: Në çdo kohë mund të kufizoni, rikuperoni dhe fshini informacionin tuaj.