Kaip per mažiau nei minutę konvertuoti „Photoshop“ dizainą į CSS kodą

CSS-Photoshop

Nuo CS6 versijos pasirodymo „Adobe“ įdiegė „Photoshop“ labai naudingą parinktį išdėstyti ir kurti interneto dizainą. Operacija yra labai lengva ir visų pirma greitai. Naudodamiesi programa galėsime sukurti pakopinius stiliaus lapus, atsižvelgdami į mūsų formas ir teksto sluoksnius. Procedūra yra tokia paprasta, kaip sukurti maketą, nukopijuoti kodo versijos elementus ir įklijuoti į mūsų lapą.

Tai labai geras variantas, ypač todėl, kad tai leidžia mums pamatyti savo dizaino raidą vizualiai ir realiu laiku. Čia yra keletas patarimų, kaip naudoti šią parinktį ir gauti maksimalus našumas:

Pasistenkite būti tikslūs

Norėdami gauti profesionalų rezultatą, rekomenduojama atsižvelgti į jūsų svetainės matmenis ir proporcijas. Nustatykite kuriamo šablono pločio ir aukščio vertes ir pritaikykite jas savo makete. Kai nukopijuosite CSS kodą, kiekvieną elementą įdėsime kaip atstumą pikseliais tarp kiekvieno elemento ir drobės kraštų. Taip pat atsižvelkite į dydžius ir hierarchines priežastis, kurias ketinate įtraukti į savo dizainą, įskaitant kiekvieno elemento išlygiavimą ir tarpus tarp jų, kad jūsų vartotojai galėtų kuo geriau įskaityti.

Vadovų ir sąsajos taisyklių naudojimas padės jums sukurti tvarkingą ir švarų šabloną, kurio visi elementai būtų visiškai sulygiuoti.

internetinis fotošopas

Konfigūruokite visas kiekvieno elemento charakteristikas

Galimybė nukopijuoti CSS kodą suteikia mums galimybę labai tiksliai suprojektuoti savo svetainę naudojant formos ir teksto sluoksnius. Kiekvieno sluoksnio turinys bus nukopijuotas į mainų sritį ir mes galime greitai jį įklijuoti į savo stiliaus lapą. Iš formos sluoksnių užfiksuokite šių parametrų reikšmes:

  • Dydis
  • Pozicija
  • Insulto spalva
  • Užpildymo spalva (įskaitant gradientus)
  • Mesti šešėlį

Iš teksto sluoksnių galime užfiksuoti šias reikšmes:

  • Šrifto šeima
  • Šrifto dydis
  • Šrifto storis
  • Linijos aukštis
  • Pabraukta
  • Perbraukimas
  • Viršutinis indeksas
  • Abonementas
  • Teksto lygiavimas

Turėkite tai omenyje ir nustatykite kiekvieną iš šių verčių, kad pateiktų jūsų ieškomą stilių.

Darbas su sluoksnių grupėmis

Ši funkcija verčia mūsų darbą, suskirstytą pagal dviejų tipų klases, po vieną kiekvienai grupei, sujungiančiai figūrų ar teksto sluoksnius, ir klasę kiekvienam iš šių tipų. Kiekviena grupės klasė atstovaus pagrindiniam div elementui, kuriame bus antrojo div elementai, kurie atitiks kiekvienoje grupėje įterptus sluoksnius. Tokiu būdu viršutinės ir kairiosios vaikų talpyklų vertės bus nustatomos atsižvelgiant į pirminį sudėtinį rodinį. Turite nepamiršti, kad ši parinktis negalima naudojant išmaniuosius objektus ir ji nebus taikoma daugiau nei vienam sluoksniui vienu metu, nebent jie būtų sugrupuoti.

Veiksmai konvertuoti

Sukūrę modelį, suasmeninote kiekvieną elementą ir sugrupavote juos pagal grupes, turėsite atlikti tik šiuos veiksmus:

 

  • Eikite į sluoksnių skydą ir pasirinkite vieną iš šių dviejų parinkčių:
    • Dešiniuoju pelės mygtuku spustelėkite formos ar teksto sluoksnį arba sluoksnių grupę ir pasirinkite Kopijuoti CSS kontekstiniame meniu.
    • Pasirinkite formos ar teksto sluoksnį arba sluoksnių grupę, tada pasirinkite parinktį Kopijuoti CSS skydo meniu Sluoksniai.
  • Įklijuokite kodą į savo stiliaus lapo dokumentą ir pritaikykite jį savo puslapiams naudodami HTML5.

    CSS-Photoshop1

    CSS-Photoshop2


Straipsnio turinys atitinka mūsų principus redakcijos etika. Norėdami pranešti apie klaidą, spustelėkite čia.

Būkite pirmas, kuris pakomentuos

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.