Quickly Konverter Objekter til CSS Bruke Photoshop CS6.1
Dette innlegget er en del av en serie kalt Innføring i Photoshop CS6.Import fargeprøver fra CSS til PhotoshopAdobe annonserer nye spesifiseringer beskjære verktøyet i Photoshop CS6 0,1
Den siste versjonen av Photoshop har noen flotte nye funksjoner som er sikker på å fange oppmerksomheten til web-designere. Nå kan du konvertere et lag form og stil til CSS med et enkelt klikk. I denne artikkelen vil vi forklare hvordan dette fungerer. La oss ta en titt!
Kopier til CSS
Denne nye Photoshop funksjon som vi skal se på er en som jeg er ganske spent på. Muligheten til å konvertere Photoshop lagstiler til CSS har eksistert en stund gjennom tredjeparts verktøy, men aldri opprinnelig ut av boksen. Webutviklere stadig oppgave med å konvertere Photoshop kunstverk å leve CSS3-drevet design. Avhengig av kompleksiteten av objektet, kan dette ta noen alvorlige tid.
Ville det ikke vært fint om Photoshop bare kunne gjøre konverteringen for deg? Gode nyheter: Nå kan det. La oss se hvordan det fungerer.
For å begynne, la oss prøve å konvertere en enkel knapp i Photoshop. Som du kan se, jeg begynte med en enkel rektangel med avrundede hjørner, så jeg legge på noen lag stiler. Først brukte jeg gradient overlay. Deretter vil jeg brukte en indre skygge sett å overlappe å sette et fint høydepunkt øverst. Til slutt lagde jeg en subtil skygge.
Vår Photoshop CSS test.
Nå som vi har en grei oversikt over hvor knappen er bygget i Photoshop, la oss konvertere den til CSS. Det er to måter å gjøre er å gå om dette. Den første er å velge lag og gå til Layer > Kopier CSS i menylinjen. Den andre måten er å høyreklikke på laget og velg "Kopier CSS" fra menyen som vises. Dette vil kopiere CSS-koden til vår utklippstavlen slik at vi kan sette det inn i vår favoritt kode editor.
Du finner Kopier CSS kommandoen under Lag-menyen.
Før vi gå sjekke det ut, merk at jeg har kalt min laget "knapp" i små bokstaver. Dette er viktig fordi dette vil bli konvertert til en klasse navn i vår endelige koden.
Teste Omregnet Kode
Hvis vi hopper over til en kode editor, kan vi prøve ut vår knappekoden på se om det fungerte. Først vil jeg lage en div i min html og gi det en klasse for "knapp". Nå skal jeg hoppe over til CSS og bare lime inn koden som Photoshop plassert inn i min utklippstavlen
.button {border-radius:. 10px; bakgrunnsbilde: -moz-lineær-gradient (90deg, RGB (42, 46, 53) 0%, RGB (104, 110, 118) 100%); bakgrunnsbilde: -webkit-lineær-gradient (90deg, RGB (42, 46, 53) 0%, RGB (104, 110, 118) 100%); box-shadow: 0px 5px 4px 0px rgb (0, 0, 0); position: absolute; venstre: 249px; top: 245px; width: 300px; høyde: 100px; z-index: 2;}
Som du ser, en ganske stor del av koden er skrevet for oss. Det ser ut som formen og fargen er midt i blinken med våre Photoshop-versjonen, men ikke alt var kopiert.
Opprinnelige knappen vs. CSS versjon.
For det første, er det skygge på full dekkevne til tross for reduserte opasitet i vår Photoshop versjon. Jeg ville har ventet Photoshop å bruke RGBA å trekke av denne effekten. I tillegg til skyggen problemer, ble vår indre skygge rett og slett ignorert så det er ingen høydepunkt øverst.
Alt i alt skjønt, er vi av til en sterk start. Photoshop reddet oss ganske mye koding og selv gikk den ekstra mile å inkludere noen leser prefikser for å sikre maksimal kompatibilitet.
Konkurranse
Bare for sammenligningens skyld, la oss sammenligne Photoshop nye bygget -i Kopier CSS-funksjonen til en gratis Photoshop plugin som heter CSS3Ps, som i hovedsak lover den samme funksjonaliteten.
gratis CSS3Ps Photoshop plugin konverterer lagstiler til CSS
Nok en gang, vil jeg velge mitt lag, men denne gangen skal jeg treffe CSS3Ps plugin. Dette starter en nettside der jeg må vente en heidundrende 20-årene for å se mine resultater. Dette er riktignok super irriterende, men når resultatene ikke dukker opp, er de faktisk bedre enn den innebygde Photoshop funksjonen.
Resultatet fra CSS3Ps
Som du kan se, både toppen høydepunkt og redusert opacity av box-shadow er til stede i denne versjonen. Å ta ting enda lenger, kan du få resultatene i Sass, en fantastisk mulighet som jeg har lyst til å se fra Photoshop i fremtiden. .
Hvordan få denne oppdateringen
For å få denne oppdateringen, kan kundene følge følgende instruksjoner
I Photoshop, velger du Hjelp > Oppdateringer
Adobe Application Manager vil lansere. Velg Adobe Photoshop eller og velg "Update."
Oppgrader til Creative Cloud
Ikke bruke Creative Cloud? Du kan abonnere på Creative Cloud og få tilgang til alle disse oppdateringene, samt resten av Creative Suite for bare $ 49,99 /måned.