Share
Photoshop har vært en del av webdesign i mange år, og det er veldig sannsynlig å fortsette som sådan i lang tid. Hvis du designer for nettet ved hjelp av Photoshop, eller du er en utvikler som håndterer koding av PSD-er, er det sannsynlig at det er noen problemer du løper inn på med jevne mellomrom.
Selv om du har overgått fra Photoshop til Sketch for designstrinnet i arbeidsflyten din, vil du fortsatt møte problemet med kodere som trenger tilgang til programvare de ellers ikke ville bruke. Med en av de to programmene er det sannsynlig at du vil treffe hastighetshull som bare er like for kurset når du bruker verktøy hvis primære formål er å designe, ikke genererer kode for nettet.
Gutta på Source har produsert utvidelser for Photoshop siden 2012. Deres plugins er designet for å lette noen av de vanligste problemene i design til kodeprosessen, for eksempel å skape CSS som nøyaktig representerer et design og eksporterer bilder effektivt.
Jeg har lenge vært fan av deres CSSHat-plugin, som genererer CSS eller preprocessorkode fra Photoshop-lag. Jeg bruker også deres PNGHat-plugin nesten hver gang jeg bruker Photoshop, for eksport av bilder til PNG, JPEG eller Base64. Du kan se begge disse pluginene i handlingen i min todelte opplæring:
Disse pluginene er fokusert på utviklerfasen av webstedsopprettingsprosessen; snu PSD-er til fullt funksjonelle nettsteder. Gitt mange utviklere trenger ikke engang Photoshop for noe annet formål enn å få tilgang til PSDer, det er et naturlig neste skritt for å se denne typen arbeidsflytforbedring tatt rett ut av Photoshop alt sammen.
Det er hva Kildes nye desktop og web-basert verktøy, Avocode, handler om.
Avocode er et program som er beregnet for prosessen med å gå fra PSD (eller Sketch) til kode. Det genererer ikke nettsteder automatisk for deg, men det gir deg et sett med verktøy som gjør det mulig å lage nettsteder på samme måte som du foretrekker, men mer effektivt enn når du arbeider direkte inne i Photoshop eller Sketch. Avocode tar sikte på å bygge bro over gapet mellom design og koding av webutvikling.
I denne artikkelen ser vi på hvordan du kan bruke Avocode til å:
Med Avocode deles PSDer mellom designere og utviklere via en automatisk synkroniseringsprosess. Hvis du er en designer, installerer du et Photoshop-plugin, og når designen er klar, vil du bare trykke på en "Synkroniser nå" -knapp for å gjøre PSD tilgjengelig for utvikleren.
Ytterligere måter å synkronisere er på vei, med Dropbox som et bekreftet alternativ som kommer i en fremtidig utgave. Å dømme etter dagens beta 0.5.0-grensesnitt, kan vi også se synkronisering via Layervault, direkte laste opp og trekke filer rett inn fra lokal lagring.
Hvis du er en utvikler, vil du motta et varsel gjennom Avocode at et nytt design er tilgjengelig, da du bare kan åpne den opp direkte via et enkelt klikk i PSD-nettleserpanelet. Dette eliminerer behovet for å sende mega-vedlegg eller på annen måte manuelt overføre PSD-filer.
Sammen med hvert design kommer et innebygd versjon styringssystem. Progressive iterasjoner av en PSD kan enkelt synkroniseres mellom designer og utvikler, igjen ved å trykke på Photoshop-plugin Synkroniser nå knappen, med hver versjon tilgjengelig gjennom PSD-nettleserpanelet. Avokode husker de tidligere eksportinnstillingene for bildene i designet, noe som betyr at oppgaver som eksportering av nyoppdaterte bilder kan automatiseres.
Når du har en PSD åpen i Avocode finner du interaksjon med det for å være ganske intuitivt. Som Photoshop har Avocode en Lagpanel hvor du kan se alle PSDs lag og grupper. Disse lagene og gruppene kan alle vises eller skjules, og du kan også klikke for å velge noen av dem.
I tillegg til å velge elementer i designet via Layers Panel, kan du velge Velg Verktøy fra verktøylinjen til venstre, klikk deretter et hvilket som helst element på scenen direkte. For å velge flere elementer, hold bare nede SKIFTE og fortsett å klikke på elementene du vil velge.
Multi-valg virker, enten du klikker direkte på scenen eller i lagpanelet.
For å panorere rundt designet velger du Håndverktøy klikk deretter og dra for å flytte.
Med hvert lag valgt og Kontrollpanel åpne vil du se CSS for det aktuelle elementet i panelets Kode underavdeling, enten i rå eller preprosessor, avhengig av dine preferanser. Dette bruker den samme CSS generasjonslogikken som CSSHat-pluginet, som fortsatt er den mest visuelt nøyaktige CSS-generatoren jeg har sett blant de tilgjengelige alternativene.
Å ta tak i CSS for varen er like enkelt som å klikke på Kopier CSS eller Kopier MINDRE knappen, slik at du kan lime inn i stilarket eller direkte markere linjene du vil bruke og kopiere dem derfra. Hvis du har preprosessorkode generert, vil den automatisk inkludere mixins fra ditt foretrukne mixin-bibliotek. De tilgjengelige tilgjengelige alternativene er:
Jeg er sikker på at jeg ikke er alene når jeg sier at det å finne layoutdimensjonene i Photoshop kan være litt vanskelig. Avocodes tilnærming til dette problemet er veldig rett frem. For å få høyde og bredde på et element:
1. Velg Velg Verktøy og velg et hvilket som helst element eller flere elementer.
2. Les verdiene i nederste venstre hjørne av det blå markeringsboksen.
3. Eller les verdiene til høyre for forhåndsvisningstommelen øverst på Kontrollpanel.
For å finne den horisontale og vertikale avstanden i piksler mellom noen to elementer:
1. Velg Måleverktøy og velg et hvilket som helst element.
2. Hold musepekeren over noe annet element og les verdiene ved siden av de horisontale og vertikale røde linjene.
Hvis du har et tekstlag valgt, vil du se en forhåndsvisning av innholdet i Kontrollpanel, samt bredde og høyde, og en rask Kopier tekst knappen du kan bruke til å ta tak i teksten deri for å lime inn i koden din.
1. Velg Color Picker Tool og flytt musen rundt scenen, se fargeforhåndsvisningen til du har den farge du vil ha.
2. Klikk på den plasseringen og fargen din vil bli lagt til i Farger underavsnitt i Kontrollpanel, med heksekoder som vises for hver.
1. Velg Velg Verktøy og velg et hvilket som helst element eller flere elementer.
2. I Kontrollpanel under panelets Eksport underavdeling klikk på det lille filikonet med det blå plustegnet på det for å angi ditt valg som en ressurs.
3. Navnet på eiendelen din blir hentet fra lagnavnet. Velg PNG, JPEG eller SVG eksport, og klikk deretter "Eksporter nå". Hvis det er den første eiendomseksporten av prosjektet, kan du velge en destinasjonsmappe, ellers vil filen bli eksportert med en gang.
Når du har valgt ditt valg som en ressurs, vises det også i aktivitetspanelet. Herfra kan du klikke på forstørrelsesglassikonet som skal hentes til mappen som lagrer aktivaeksporten din.
Du kan også klikke på knappen "Få kode" øverst på panelet eller på <> ikonet til høyre for aktivets navn, for å generere HTML, CSS eller MINDRE du kan bruke til å plassere aktiva i kode.
I PNGHat-pluginet for Photoshop er det også kontroll over eksakte JPEG- og PNG-eksportinnstillinger, så vel som skaleringsalternativer, så jeg antar at vi vil se de samme kontrollene overført til Avocode snart.
For å få en ide om hva du skal forvente i Avocodes bildeeksportprosesser, les mer om PNGHat her: Slik eksporterer du Photoshop-ressurser til Internett med PNGHat
Akkurat nå er Avocode i privat beta, så det er fortsatt flere veldig interessante utseende funksjoner på grunn av å komme ut i nær fremtid. Appen er planlagt å flytte til offentlig beta på et tidspunkt i sommer, hvoretter vi ser den offisielle lanseringen.
Etter hvert som utviklingen beveger seg, er det noen av tingene vi kan forutse:
Uansett hvilken OS du jobber med, eller om du er på en mobil enhet, kan du bruke Avocode. I øyeblikket er den lukkede beta-versjonen av Avocode satt gjennom sine skritt på Mac, men fullversjonen av den opprinnelige appen vil også kjøre på Windows og Linux, og webversjonen vil kjøre i en hvilken som helst moderne nettleser.
Kilderapporten har de allerede en fungerende prototype for å levere samme funksjonalitet til Skissebaserte design. Så hvis du er en designer ved hjelp av Sketch on Mac, er en designer som bruker Photoshop på Windows, en utviklerskode på Linux, eller hvis du bruker en hvilken som helst annen kombinasjon, vil du være like klar til å gå.
Avokode er faktisk bygget på toppen av Atom Code Editor, produsert av GitHub. Det som er veldig spennende om dette er det betyr at det vil være en fullverdig, robust og funksjonsrik kode redigeringsprogram tilgjengelig i Avocode ved offentlig utgivelse. Å være i stand til å håndtere hele kodingsprosessen rett innenfor en enkelt app, tar virkelig av seg det som allerede er å utforme som et kraftig funksjonssett.
I tillegg til å kunne hente heksekoder for fargene som er lagt til paletten din, kan du også tildele variabelnavn til hver farge for bruk i preprosessorkoden din.
Som med mange av de andre funksjonene på vei til Avocode, er muligheten til å laste opp direkte til CDN allerede til stede i en av Source plugins, PNGHat, så vi kan gjette at funksjonaliteten vil være mye den samme. Bilder kan eksporteres lokalt gjennom Avocode, eller alternativt kan du skyve dem direkte til en CDN og få filplasseringen lagt til CSS-utgangen. Du har også muligheten til å FTP bildene direkte til serveren din ved eksport.
De innledende videoene for Avocode nevner det vil være et alternativ å integrere med TypeKit og Google Fonts når du genererer fontinnstillings-koden. Dette er ennå ikke i den lukkede betaen eller noen av Source-pluginene, så jeg er ikke sikker på nøyaktig hvordan dette vil fungere, men jeg håper personlig at det vil strømline prosessen med å sette sammen de riktige nettadressene og koden som du skal ringe inn forskjellige fonter.
Den første fasen av bildeeksport i den nåværende lukkede beta-versjonen av Avocode er for JPEG, PNG og SVG. Imidlertid har Source allerede en prosess etablert for Base64-generasjon gjennom deres PNGHat-plugin for Photoshop, så jeg forventer at vi vil se dem tegne fra den kodebasen for å få den til Avocode. De har også til hensikt å støtte produksjon av sprite ark sammen med den nødvendige CSS.
Fokuset på Avocode vil være nettet til det har oppnådd full modenhet, men det er også planer i arbeidene slik at den kan brukes som en del av IOS-utviklingen.
Kilde har allerede et plugin kalt iOSHat som fungerer i Photoshop for å generere Objective-C eller Swift-kode fra Photoshop-lag for bruk i IOS-utvikling. Det er sannsynlig at støtten til iOS-kodeeksport innen Avocode vil fungere på omtrent samme måte.
Det er et spennende menyelement i Avocode; en som tyder på den fremtidige utvidbarheten av plattformen, med noen innledende pakker allerede på plass:
Kilde sier at de var inspirert av utgivelsen av Atom for å vedta en lignende metode for å tillate tilpassede "pakker" som skal opprettes og deles mellom fellesskapet. Vi ser frem til å se denne banen åpne opp når utviklingen beveger seg sammen.
For øyeblikket Kilde er stadig rullende funksjoner og arbeider i beta bruker tilbakemelding som de går sammen. Når programvaren er offentliggjort, vil den være tilgjengelig via en abonnementsmodell for $ 240 per år.
Men hvis du kommer tidlig på forhåndsbestilling, vil du låse på et sted med en 70% evigvarende rabatt, og bringe den ned til $ 69 per år i stedet. Du får også tilgang til den private betaen, og i løpet av denne perioden vil du kunne bruke programvaren gratis. Ditt faktiske abonnement starter bare når Avocode går til offentlig lansering.
Forordningspunkter er begrenset, og fra dette øyeblikket er det færre enn 230 plasser tilgjengelig. Forbestille: http://avocode.com/preorder.html
For ekstra informasjon besøk:
Jeg vil la tegningen av konklusjoner helt opp til deg! Hva tror du, er du overrasket over noen av funksjonene Kilde har annonsert? Vil Avocode utgjøre en del av din fremtidige arbeidsflyt? Gi oss beskjed i kommentarene!
Accentsconagua