Sedan ankomsten av CS6-versionen implementerade Adobe i Photoshop ett mycket användbart alternativ för layout och utveckling av webbdesign. Operationen är väldigt lätt och speciellt snabb. Genom applikationen kommer vi att kunna generera kaskad stilark med referenser till våra former och textlager. Förfarandet är så enkelt som att utveckla vår mockup, kopiera kodversionen av våra element och klistra in den på vårt ark.
Det är ett mycket bra alternativ, särskilt för att det låter oss se utvecklingen av vår design i visuella termer och i realtid. Här är några tips för att använda detta alternativ och få maximal prestanda:
Försök att vara exakt
För att få ett professionellt resultat rekommenderas att du tar hänsyn till mätningarna och proportionerna på din webbplats. Ställ in bredd- och höjdvärdena för mallen du utformar och tillämpa dem på din mockup. När du kopierar CSS-koden placerar vi varje element med referens avståndet i pixlar mellan varje element och kanfas kanter. Tänk också på storlekarna och de hierarkiska orsakerna som du ska inkludera i din design inklusive inriktningen av varje element och avståndet mellan var och en av dem för att ge maximal läsbarhet för dina användare.
Användningen av guider och reglerna för gränssnittet hjälper dig att bygga en snygg, ren mall med alla dess element perfekt anpassade.
Konfigurera alla egenskaper hos varje element
Alternativet att kopiera CSS-koden ger oss möjlighet att designa vår webbplats med stor precision med hjälp av formulär- och textlager. Innehållet i varje lager kopieras till Urklipp och vi kan snabbt klistra in det i vårt stilark. Från formlagren, fånga värdena för följande inställningar:
- tamaño
- Position
- Stroke färg
- Fyllfärg (inklusive lutningar)
- Skugga
Från textlagren kan vi fånga följande värden:
- Typsnittsfamilj
- Teckenstorlek
- Teckensnittstjocklek
- Radavstånd
- Understräckt
- strykning
- Exponent
- Index
- Textjustering
Tänk på det och ställ in var och en av dessa värden för att ge den stil du letar efter.
Arbeta med lagergrupper
Denna funktion översätter vårt arbete organiserat av två typer av klasser, en för varje grupp som samlar lager av former eller text och en klass för varje lager av en av dessa typer. Varje gruppklass representerar ett överordnat div-element som kommer att innehålla underordnade div-element och som kommer att motsvara lagren som har infogats i varje grupp. På detta sätt kommer de övre och vänstra värdena för underbehållarna att ställas in med hänvisning till den överordnade behållaren. Du måste komma ihåg att det här alternativet inte är tillgängligt för smarta objekt och att det inte kommer att vara tillämpligt på mer än ett lager samtidigt om de inte är grupperade.
Steg för att konvertera
När du har gjort din modell har du anpassat varje element och grupperat dem efter grupper, du behöver bara följa dessa steg:
- Gå till lagerpanelen och välj ett av dessa två alternativ:
- Högerklicka på en form eller ett textlager eller en grupp lager och välj Kopiera CSS i snabbmenyn.
- Välj ett former eller textlager eller en grupp lager och välj sedan alternativet Kopiera CSS i menyn på panelen Lager.
-
Klistra in koden i ditt formatmallsdokument och tillämpa den på dina sidor via html5.
