Share
Den nyeste byggingen av Photoshop har noen flotte nye funksjoner som er sikker på å få oppmerksomheten til webdesignere. Du kan nå konvertere et lags form og stil til CSS med ett enkelt klikk. I denne artikkelen vil vi forklare hvordan dette virker. La oss ta en titt!
Denne nye Photoshop-funksjonen som vi skal se på, er en som jeg er ganske spent på. Evnen til å konvertere Photoshop-lagestiler til CSS har eksistert en stund gjennom tredjepartsverktøy, men aldri nativt ut av boksen. Webutviklere har kontinuerlig oppgave å konvertere Photoshop-kunstverk til å leve CSS3-drevne design. Avhengig av objektets kompleksitet kan dette ta litt alvorlig 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 grunnleggende knapp i Photoshop. Som du kan se begynte jeg med et enkelt rektangel med avrundede hjørner, så legger jeg til noen lagstiler. Først brukte jeg gradientoverlegg. Deretter bruker jeg en indre skygge satt til overlegg for å sette et fint høydepunkt over toppen. Endelig opprettet jeg en subtil dropshadow.
Nå som vi har en anstendig ide om hvordan knappen er bygget i Photoshop, la oss konvertere den til CSS. Det er to måter å gjøre om dette. Den første er å velge laget og gå til Lag> Kopier CSS i menylinjen. Den andre måten er å høyreklikke på laget og velg "Kopier CSS" -alternativet fra menyen som vises. Dette vil kopiere CSS-koden til utklippstavlen, slik at vi kan sette den inn i vår favoritt kodeditor.
Før vi går sjekke det ut, merk at jeg har kalt lag-knappen min i alle små bokstaver. Dette er viktig fordi dette blir konvertert til et klassenavn i vår endelige kode.
Hvis vi hopper over til en kodeditor, kan vi prøve vår knappekode for å se om det virket. Først skal jeg opprette en div i min HTML og gi den en klasse av "knapp". Nå skal jeg hoppe over til CSS og bare lime inn koden som Photoshop plasserte i utklippstavlen.
.knapp
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%);
boks-skygge: 0px 5px 4px 0px rgb (0, 0, 0);
posisjon: absolutt;
igjen: 249px;
topp: 245px;
bredde: 300px;
høyde: 100px;
z-indeks: 2;
Som du kan se, har det blitt skrevet en ganske stor del av koden for oss. Det ser ut til at formen og fargen er flink på med vår Photoshop-versjon, men ikke alt ble kopiert med hell.
For det første er dropshadowen på full ugjennomtrengelighet til tross for den reduserte opaciteten i vår Photoshop-versjon. Jeg hadde forventet at Photoshop skulle bruke RGBa til å trekke av denne effekten. I tillegg til drop shadow problemer, ble vår indre skygge bare ignorert, så det er ikke noe høydepunkt over toppen.
Alt i alt er vi på en sterk start. Photoshop lagret oss ganske mye av koding og til og med gikk den ekstra milen for å inkludere noen nettleserprefikser for å sikre maksimal kompatibilitet.
Bare for sammenligningens skyld, la oss sammenligne Photoshops nye innebygde Copy CSS-funksjon til et gratis Photoshop-plugin kalt CSS3Ps, som i hovedsak lover samme funksjonalitet.
Nok en gang velger jeg laget mitt, bare denne gangen treffer jeg CSS3Ps-plugin. Dette lanserer en nettside der jeg må vente en hel 20s for å se resultatene mine. Dette er ganske vist super irriterende, men når resultatene oppstår, er de faktisk bedre enn den innebygde Photoshop-funksjonen.
Som du ser, er både topphøydepunktet og den reduserte opaciteten til bokseskyggen til stede i denne versjonen. For å ta ting enda lenger, kan du få resultatene dine i Sass, et fantastisk alternativ som jeg vil gjerne se fra Photoshop i fremtiden.
For å få denne oppdateringen kan kundene følge disse instruksjonene.
Bruker du ikke 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..
Accentsconagua