Siden ankomsten af CS6-versionen implementerede Adobe i Photoshop en meget nyttig mulighed for at layout og udvikle webdesign. Operationen er meget let og frem for alt hurtigt. Gennem applikationen vil vi være i stand til at generere kaskade stilark, der tager vores figurer og tekstlag som reference. Proceduren er så enkel som at udvikle vores mockup, kopiere kodeversionen af vores elementer og indsætte den på vores ark.
Det er en meget god mulighed, især fordi det giver os mulighed for at se udviklingen af vores design i visuelle termer og i realtid. Her er nogle tip til at bruge denne mulighed og få maksimal ydelse:
Prøv at være præcis
For at opnå et professionelt resultat anbefales det, at du tager højde for målingerne og proportionerne på dit websted. Indstil bredde- og højdeværdierne for den skabelon, du designer, og anvend dem på din mockup. Når du kopierer CSS-koden, placerer vi hvert element under henvisning til afstanden i pixels mellem hvert element og kanterne på lærredet. Tag også højde for størrelserne og de hierarkiske grunde, som du skal medtage i dit design, herunder justeringen af hvert element og afstanden mellem hver af dem for at give dine brugere maksimal læsbarhed.
Brug af guider og reglerne for grænsefladen hjælper dig med at opbygge en pæn, ren skabelon med alle dens elementer perfekt justeret.
Konfigurer alle karakteristika for hvert element
Muligheden for at kopiere CSS-koden giver os muligheden for at designe vores websted med stor præcision ved hjælp af form- og tekstlag. Indholdet af hvert lag kopieres til udklipsholderen, og vi kan hurtigt indsætte det i vores stilark. Fra formlagene kan du fange værdierne for følgende indstillinger:
- størrelse
- Position
- Slagfarve
- Fyldfarve (inklusive stigninger)
- Skygge
Fra tekstlagene kan vi registrere følgende værdier:
- Skrifttypefamilie
- Skriftstørrelse
- Skrifttykkelse
- Linjehøjde
- Understreget
- gennemstregning
- Overskrift
- Abonnement
- Tekstjustering
Husk det, og indstil hver af disse værdier for at give den stil, du leder efter.
Arbejd med laggrupper
Denne funktion oversætter vores arbejde organiseret af to typer klasser, en for hver gruppe, der samler lag af figurer eller tekst og en klasse for hvert lag af en af disse typer. Hver gruppeklasse repræsenterer et overordnet div-element, der vil indeholde underordnede div-elementer, og som svarer til de lag, der er indsat i hver gruppe. På denne måde indstilles de øverste og venstre værdier for de underordnede containere ved at henvise til den overordnede container. Du skal huske på, at denne mulighed ikke er tilgængelig med smarte objekter, og at den ikke kan anvendes på mere end et lag samtidigt, medmindre de er grupperet.
Skridt til at konvertere
Når du har lavet din model, har du tilpasset hvert element, og du har grupperet dem efter grupper, du skal kun følge disse trin:
- Gå til lagpanelet, og vælg en af disse to muligheder:
- Højreklik på et form- eller tekstlag eller en gruppe lag, og vælg Kopier CSS i genvejsmenuen.
- Vælg et figur- eller tekstlag eller en gruppe lag, og vælg derefter indstillingen Kopier CSS i lagpanelets menu.
-
Indsæt koden i dit typografiark, og anvend den på dine sider via html5.
