Siden ankomsten av CS6-versjonen implementerte Adobe i Photoshop et veldig nyttig alternativ for layout og utvikling av webdesign. Operasjonen er meget lett og særlig rask. Gjennom applikasjonen vil vi være i stand til å generere cascading stilark med referanser til figurer og tekstlag. Prosedyren er så enkel som å utvikle mockupen vår, kopiere kodeversjonen av elementene våre og lime den inn på arket vårt.
Det er et veldig godt alternativ, spesielt fordi det lar oss se utviklingen av designet vårt i visuelle termer og i sanntid. Her er noen tips for å bruke dette alternativet og få tak i maksimal ytelse:
Prøv å være presis
For å oppnå et profesjonelt resultat anbefales det at du tar hensyn til målingene og proporsjonene til nettstedet ditt. Still inn verdiene for bredde og høyde til malen du designer, og bruk dem på din mockup. Når du kopierer CSS-koden, plasserer vi hvert element med referanse til avstanden i piksler mellom hvert element og kantene på lerretet. Ta også hensyn til størrelsene og de hierarkiske grunnene du skal inkludere i designet ditt, inkludert justeringen av hvert element og avstanden mellom hver av dem for å gi brukerne maksimal lesbarhet.
Bruken av guider og reglene i grensesnittet vil hjelpe deg med å bygge en pen, ren mal med alle elementene perfekt justert.
Konfigurer alle egenskapene til hvert element
Muligheten til å kopiere CSS-koden gir oss muligheten til å designe nettstedet vårt med stor presisjon gjennom bruk av skjema- og tekstlag. Innholdet i hvert lag blir kopiert til utklippstavlen, og vi kan raskt lime det inn i stilarket vårt. Fra formlag kan du fange opp verdiene til følgende innstillinger:
- Størrelse
- Stilling
- Slagfarge
- Fyllfarge (inkludert stigninger)
- Skygg
Fra tekstlagene kan vi fange følgende verdier:
- Fontfamilie
- Skriftstørrelse
- Skrifttykkelse
- Linjehøyde
- Understreket
- gjennomstreking
- Overskrift
- Abonnement
- Tekstjustering
Husk det og sett hver av disse verdiene for å gi stilen du leter etter.
Arbeid med laggrupper
Denne funksjonen oversetter arbeidet vårt organisert av to typer klasser, en for hver gruppe som samler lag med former eller tekst og en klasse for hvert lag av en av disse typene. Hver gruppeklasse representerer et overordnet div-element som vil inneholde underordnede div-elementer, og som vil svare til lagene som er satt inn i hver gruppe. På denne måten vil topp- og venstreverdiene til underbeholdere bli angitt ved å referere til den overordnede beholderen. Du bør huske på at dette alternativet ikke er tilgjengelig med smarte objekter, og at det ikke vil være aktuelt for mer enn ett lag samtidig med mindre de er gruppert.
Fremgangsmåte for å konvertere
Når du har laget din mockup, har du tilpasset hvert element, og du har gruppert dem etter grupper, du trenger bare å følge disse trinnene:
- Gå til lagpanelet og velg ett av disse to alternativene:
- Høyreklikk på et form- eller tekstlag eller en gruppe lag og velg Kopier CSS i hurtigmenyen.
- Velg et form- eller tekstlag eller en gruppe lag, og velg deretter alternativet Kopier CSS i Lagpanel-menyen.
-
Lim inn koden i stilarkdokumentet og bruk den på sidene dine via html5.
