Sinds de komst van de CS6-versie heeft Adobe in Photoshop een zeer nuttige optie geïmplementeerd om webontwerpen op te maken en te ontwikkelen. De operatie is erg makkelijk met name snel Door de applicatie zullen we in staat zijn om trapsgewijze style sheets te genereren met als referentie onze vormen en tekstlagen. De procedure is net zo eenvoudig als het ontwikkelen van onze mockup, het kopiëren van de codeversie van onze elementen en deze op ons blad plakken.
Het is een zeer goede optie, vooral omdat het ons in staat stelt om de evolutie van ons ontwerp in visuele termen en in realtime te zien. Hier zijn enkele tips om deze optie te gebruiken en het maximale prestaties:
Probeer precies te zijn
Om een professioneel resultaat te bekomen, is het raadzaam rekening te houden met de afmetingen en verhoudingen van uw site. Stel de waarden voor Breedte en Hoogte in van de sjabloon die u ontwerpt en pas deze toe op uw mockup. Wanneer u de CSS-code kopieert, zullen we elk element plaatsen met als referentie de afstand in pixels tussen elk element en de randen van het canvas. Houd ook rekening met de formaten en de hiërarchische redenen die u in uw ontwerp gaat opnemen, inclusief de uitlijning van elk element en de afstand tussen elk van hen om maximale leesbaarheid voor uw gebruikers te bieden.
Het gebruik van hulplijnen en de regels van de interface zullen u helpen om een nette, schone sjabloon te bouwen met al zijn elementen perfect uitgelijnd.
Configureer alle kenmerken van elk element
De mogelijkheid om de CSS-code te kopiëren geeft ons de mogelijkheid om onze site met grote precisie te ontwerpen met behulp van vorm- en tekstlagen. De inhoud van elke laag wordt naar het klembord gekopieerd en we kunnen deze snel in ons stylesheet plakken. Leg vanuit de vormlagen de waarden vast voor de volgende instellingen:
- Omvang
- Positie
- Lijnkleur
- Opvulkleur (inclusief verlopen)
- Slagschaduw
Uit de tekstlagen kunnen we de volgende waarden vastleggen:
- Lettertypefamilie
- Lettergrootte
- Dikte lettertype
- Lijnhoogte
- Onderstreept
- Doorhalen
- Superscript
- Abonnement
- Tekstuitlijning
Houd dat in gedachten en stel elk van deze waarden in om de stijl te bieden waarnaar u op zoek bent.
Werk met laaggroepen
Deze functie vertaalt ons werk georganiseerd door twee soorten klassen, één voor elke groep die lagen met vormen of tekst samenbrengt en een klasse voor elke laag van een van deze typen. Elke groepsklasse vertegenwoordigt een bovenliggend div-element dat onderliggende div-elementen bevat en dat overeenkomt met de lagen die in elke groep zijn ingevoegd. Op deze manier worden de waarden boven en links van de kindcontainers ingesteld met verwijzing naar de bovenliggende container. Houd er rekening mee dat deze optie niet beschikbaar is bij slimme objecten en niet op meer dan één laag tegelijk toepasbaar is, tenzij ze gegroepeerd zijn.
Stappen om te converteren
Nadat je je mockup hebt gemaakt, je hebt elk element gepersonaliseerd en je hebt ze gegroepeerd in groepen, je hoeft alleen maar deze stappen te volgen:
- Ga naar het lagenpaneel en kies een van deze twee opties:
- Klik met de rechtermuisknop op een vorm of tekstlaag of op een groep lagen en kies Kopieer CSS in het contextmenu.
- Selecteer een vormen- of tekstlaag of een groep lagen en kies vervolgens de optie Kopieer CSS in het menu van het deelvenster Lagen.
-
Plak de code in je stylesheet-document en pas deze via html5 toe op je pagina's.
