Share
De nieuwste versie van Photoshop heeft een aantal geweldige nieuwe functies die zeker de aandacht trekken van webontwerpers. U kunt de vorm en stijl van een laag nu converteren naar CSS met een enkele klik. In dit artikel zullen we uitleggen hoe dit werkt. Laten we kijken!
Deze nieuwe Photoshop-functie waar we naar gaan kijken, is er een waar ik best enthousiast over ben. De mogelijkheid om Photoshop-laagstijlen naar CSS te converteren, is al een tijdje beschikbaar via hulpprogramma's van derden, maar is nooit van nature uit de doos. Webontwikkelaars zijn constant belast met het converteren van Photoshop-illustraties naar live CSS3-aangedreven ontwerpen. Afhankelijk van de complexiteit van het object kan dit enige tijd in beslag nemen.
Zou het niet leuk zijn als Photoshop de conversie voor u kon doen? Goed nieuws: nu kan het. Laten we kijken hoe het werkt.
Laten we beginnen met het converteren van een standaardknop in Photoshop. Zoals je kunt zien, ben ik begonnen met een eenvoudige rechthoek met afgeronde hoeken, en vervolgens voeg ik een aantal laagstijlen toe. Ten eerste heb ik een gradient-overlay gebruikt. Vervolgens gebruik ik een innerlijke schaduwset om overlay te maken om een mooie highlight bovenaan te plaatsen. Uiteindelijk heb ik een subtiele slagschaduw gemaakt.
Nu we een goed idee hebben van hoe de knop in Photoshop is gebouwd, laten we het omzetten naar CSS. Er zijn twee manieren om dit te doen. De eerste is om de laag te selecteren en naar te gaan Laag> CSS kopiëren in de menubalk. De andere manier is om met de rechtermuisknop op de laag te klikken en de optie "CSS kopiëren" te selecteren in het menu dat verschijnt. Hiermee wordt de CSS-code naar ons klembord gekopieerd, zodat we deze in onze favoriete codebewerker kunnen invoegen.
Voordat we gaan kijken, let erop dat ik mijn laag-knop in kleine letters heb genoemd. Dit is belangrijk omdat dit in onze definitieve code zal worden omgezet naar een klassennaam.
Als we naar een code-editor springen, kunnen we onze knopcode uitproberen om te zien of het werkte. Eerst maak ik een div-bestand in mijn html en geef ik het een klasse van "knop". Nu ga ik naar de CSS en plak gewoon de code die Photoshop op mijn klembord heeft geplaatst.
.knop
grensradius: 10px;
achtergrondafbeelding: -moz-lineaire gradiënt (90 graden, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
achtergrondafbeelding: -webkit-lineaire gradiënt (90deg, rgb (42, 46, 53) 0%, rgb (104, 110, 118) 100%);
box-shadow: 0px 5px 4px 0px rgb (0, 0, 0);
positie: absoluut;
links: 249px;
top: 245 px;
breedte: 300 px;
hoogte: 100 px;
z-index: 2;
Zoals je kunt zien, is er voor ons een behoorlijk groot stuk code geschreven. Het lijkt erop dat de vorm en kleur perfect zijn met onze Photoshop-versie, maar niet alles is met succes gekopieerd.
Om te beginnen heeft de slagschaduw de volledige dekking, ondanks de verminderde dekking in onze Photoshop-versie. Ik had verwacht dat Photoshop RGBa zou gebruiken om dit effect te bereiken. Naast de problemen met slagschaduw, werd onze innerlijke schaduw gewoon genegeerd, dus er is geen hoogtepunt aan de bovenkant.
Al met al beginnen we echter sterk. Photoshop heeft ons behoorlijk wat codering bespaard en heeft zelfs extra moeite gedaan om een aantal browser-voorvoegsels op te nemen om maximale compatibiliteit te garanderen.
Laten we ter vergelijking gewoon de nieuwe ingebouwde CSS-functie van Photoshop vergelijken met een gratis Photoshop-plug-in genaamd CSS3P's, die in essentie dezelfde functionaliteit belooft.
Nogmaals, ik zal mijn laag selecteren, alleen deze keer zal ik de CSS3Ps-plugin raken. Dit lanceert een webpagina waar ik maar liefst 20 seconden moet wachten om mijn resultaten te zien. Dit is weliswaar super irritant, maar zodra de resultaten verschijnen, zijn ze eigenlijk beter dan de ingebouwde Photoshop-functie.
Zoals u kunt zien, zijn zowel de bovenste markering als de verminderde dekking van de doosschaduw aanwezig in deze versie. Om het nog een stapje verder te helpen, kunt u uw resultaten in Sass krijgen, een geweldige optie die ik in de toekomst graag wil zien vanuit Photoshop.
Om deze update te krijgen, kunnen klanten de volgende instructies volgen.
Gebruikt u de Creative Cloud niet? U kunt zich abonneren op de Creative Cloud en toegang krijgen tot al deze updates, evenals de rest van de Creative Suite voor slechts $ 49,99 per maand.
Accentsconagua