Introducing Avocode -. PSD til kode Uten Photoshop
Sponset Innhold
Dette sponset post har et produkt som er relevant for våre lesere mens møte våre redaksjonelle retningslinjer for å være objektiv og pedagogisk
Photoshop har vært en del av web design for år, og det er svært sannsynlig til å fortsette slik i lang tid. Hvis du designe for web ved hjelp av Photoshop, eller du er en utvikler som håndterer koding opp PSD, er det sannsynlig at det er noen problemer du kjører inn på en jevnlig basis.
Selv om du har gått fra Photoshop over til Sketch for design fasen av arbeidsflyten, vil du fortsatt står overfor spørsmålet om programmerere som trenger tilgang til programvare de ellers ikke ville bruke. Med en av de to programmene, er det sannsynlig at du vil treffe fartsdumper som er bare pari for kurset ved bruk av verktøy hvis primære formål er design, ikke genererer kode for web.
Made by Kilde
Gutta på Source har produsert utvidelser for Photoshop siden 2012. Deres plugins er utformet for å lette noen av de vanligste problemene i design til kodeprosessen, som å opprette CSS som nøyaktig representerer et design, og eksportere bilder effektivt.
Jeg har vært en lang tid fan av deres CSSHat plugin, som genererer CSS eller preprocessor koden fra Photoshop-lag. Jeg bruker også sin PNGHat plugin nesten hver gang jeg bruker Photoshop, for å eksportere bilder til PNG, JPEG eller Base64. Du kan se begge disse plugins i aksjon i min to deler tutorial:
Hvordan forbedre Photoshop arbeidsflyt med CSSHat og PNGHat
Hvordan kode en Photoshop layout med CSSHat, LESSHat og PNGHat
Disse plugins er fokusert på utvikleren scenen av nettstedet prosessen; snu PSDs inn fullt funksjonelle nettsider. Gitt mange utviklere trenger ikke engang Photoshop for noe annet formål enn å få tilgang PSDs, det er et naturlig neste steg for å se denne type arbeidsflyt ekstrautstyr tatt rett ut av Photoshop alle sammen.
Det er det Kilde nye desktop og web-basert verktøy, Avocode, handler om.
Avocode er et program som er spesialbygd for prosessen med å gå fra PSD (eller skisse) til koden. Det betyr ikke automatisk generere nettsteder for deg, heller det gir deg et sett med verktøy som lar deg opprette områder i måten du personlig foretrekker, men mer effektivt enn når du arbeider direkte i Photoshop eller Sketch. Avocode mål å bygge bro over gapet mellom design og koding stadier av webutvikling
Comin 'opp
I denne artikkelen skal vi se på hvordan du kan bruke Avocode til:.
Åpne opp PSDs for koding uten Photoshop, og uten e-post eller laste opp filer.
Velg lag, grupper og bevege seg rundt i et design.
generere CSS eller preprocessor kode for elementer i design.
Få nøyaktige dimensjon målinger med å bygge din layout.
Kopier ut tekstinnhold for enkel plassering i kode.
Extract fargepaletter og hexcodes fra PSDs .
Eksport av bilder, selv fra flere lag, uten å måtte forholde seg til kutting prosessen.
Åpne PSDs Uten Photoshop
Med Avocode, PSDs er delt mellom designere og utviklere via en automatisert synkronisering prosess. Hvis du er en designer du vil installere en Photoshop plugin, og når design er klar, vil du bare trykke en "Synkroniser nå" -knappen for å lage din PSD tilgjengelig til utvikleren.
Andre måter å sync er på vei, med Dropbox som en bekreftet alternativ kommer i en fremtidig utgave. Dømme etter den nåværende beta 0.5.0 grensesnitt vi kan også se synkronisering via Layervault, direkte opplasting og trekke filer rett fra lokal lagring.
Hvis du er en utvikler vil du motta en melding via Avocode at en ny design er tilgjengelig, og da kan du bare åpne den opp direkte via et enkelt klikk i PSD surfing panel. Dette gjør unna med behovet for e-post mega-vedlegg eller på annen måte manuell overføring av PSD-filer.
Sammen med hver design kommer en innebygd versjon styringssystem. Progressive gjentakelser av en PSD kan enkelt synkroniseres mellom designer og utvikler, igjen ved å trykke på Photoshop plugin Synkroniser nå
knapp, med hver versjon tilgjengelig gjennom PSD surfing panel. Avocode husker de tidligere eksportinnstillinger av bildene i design, noe som betyr at oppgaver som eksporterer nylig oppdaterte bilder kan automatiseres.
Velge og Navigere
Når du har en PSD åpent i Avocode du ' vil finne i samspill med det å være ganske intuitiv. Som Photoshop, har Avocode en Layers Panel der du kan se alle PSD sin lag og grupper. Disse lag og grupper kan alle bli vist eller skjult, og du kan også klikke for å velge noen av dem.
I tillegg til å velge elementer i design via Lag-panelet, kan du velge Select Tool fra verktøy panelet til venstre, og klikk deretter på et element på scenen direkte. For å velge flere elementer, bare hold nede SKIFT og fortsette å klikke på de elementene du ønsker å velge.
Multi utvalgte verker enten klikke direkte på scenen eller i Lag-panelet.
Hvis du vil panorere rundt utformingen velge Hand Tool klikk deretter og dra for å flytte.
< h2> generere CSS og Preprocessor Kode
Med noen lag valgt og Inspection Panel åpner du vil se CSS for dette elementet utgang i panelet kodeks ledd, enten rå eller preprocessor skjema avhengig av din preferanse. Dette bruker samme CSS generasjon logikk som CSSHat plugin, som fortsatt er den mest visuelt nøyaktig CSS generator jeg har sett blant de tilgjengelige alternativene.
Griper CSS for elementet er like enkelt som å klikke på < b> Kopier CSS
eller Kopier LESS
knapp, slik at du kan lime inn i din stilark eller direkte markere linjene du vil bruke, og kopiere dem derfra. Hvis du har preprocessor kode genereres, vil det automatisk inkludere mixins fra din foretrukne mixin biblioteket. De nåværende tilgjengelige alternativer er:
LESS + LESSHat
Sass + Compass
SCSS + Compass
Sass + Bourbon
SCSS + Bourbon
Stylus + Nib
få nøyaktige oppsett Målinger
Jeg er sikker på at jeg ikke er alene når jeg sier at å finne dimensjonene layout inne Photoshop kan være litt krevende. Avocode tilnærming til dette problemet er veldig rett frem. For å få den høyden og bredden på et element:..
1
Velg markeringsverktøyet og velge et element, eller flere elementer
2.
Les verdiene nederst i venstre hjørne av det blå velge i menyene boksen.
3 Eller
., lese verdiene til høyre for forhåndsvisnings tommelen på toppen av Inspection Panel.
For å finne den horisontale og vertikale avstanden i piksler mellom to elementer:.
1
Velg Mål Tool
og velge hvilken som helst elementet.
2.
Hold markøren over alle andre element og lese verdiene ved siden av de horisontale og vertikale røde linjer.
Kopier Out Tekst Innhold
Hvis du har et tekstlag valgt vil du se en avkuttet forhåndsvisning av innholdet i Kontroll- Panel, så vel som dens bredde og høyde, og en rask Kopier tekst
knapp du kan bruke til å ta tak i teksten der for å lime inn koden din.
generere en fargepalett
1.
Velg fargevelgeren Tool og flytte musen rundt på scenen, ser fargen forhåndsvisning før du har den fargen du ønsker.
2.
Klikk på denne plasseringen, og fargen vil bli lagt til de Colors ledd i Kontroll Panel
, med hexcodes vises for hver .
Eksporter Images
1.
Velg markeringsverktøyet og velge et element, eller flere elementer.
2. Anmeldelser I Inspection Panel under panelets Export ledd klikk den lille filen ikonet med blå plusstegnet på den for å bekrefte valget som en eiendel.
3.
navnet på eiendelen vil være trekkes fra navnet lag. Velg PNG, JPEG eller SVG eksport, klikk deretter "Export nå". Hvis det er den første eiendelen eksport av prosjektet vil du være i stand til å velge en målmappe, ellers filen vil bli eksportert med en gang.
Etter at du har satt ditt valg som en eiendel det vil også dukke opp i eiendeler panel. Herfra kan du klikke på forstørrelsesglasset for å bli tatt til mappen lagring aktiva eksporten
Du kan også klikke på "Get Code" -knappen øverst i panelet, eller den. ≪ > ikonet til høyre for eiendelenes navn, for å generere HTML, CSS eller mindre kan du bruke til å plassere eiendelen i kode.
I PNGHat plugin for Photoshop er det også kontroll over de nøyaktige JPEG og PNG eksportinnstillinger samt skalering alternativer, så jeg antar vi vil se de samme kontrollene portet over til Avocode snart
For å få en idé om hva du forventer i Avocode bilde eksporterer prosesser lese mer om PNGHat her. Slik eksporterer Photoshop eiendeler for Internett Med PNGHat
Ekstra funksjoner i Development
Akkurat nå Avocode er i privat beta, så er det fortsatt flere svært interessante ser egenskaper grunn til å komme ut i nær fremtid. Appen er planlagt å flytte inn i offentlig beta på et tidspunkt i sommer, etter som vi får se den offisielle lanseringen
Som utviklingen beveger seg langs, her er noen av de tingene vi kan forutse.
Full Multi-Platform og web-basert støtte
Uansett hva OS du jobber med, eller selv om du er på en mobil enhet, vil du kunne bruke Avocode. I øyeblikket er lukket betaversjonen av Avocode blir satt gjennom sine skritt på Mac, men hele utgivelsen av de innfødte app vil også kjøre på Windows og Linux, og web-versjonen vil kjøre i alle moderne nettleser.
Bruk med Sketch Basert Design
Kilde rapport de allerede har en fungerende prototype for å levere alle de samme funksjonene for Sketch basert design. Så hvis du er en designer bruker Sketch på Mac, en designer å bruke Photoshop på Windows, en utvikler å skrive kode på Linux, eller hvis du bruker en annen kombinasjon vil være like klar til å gå.
Atom Kode Editor Inside Avocode
Avocode er faktisk bygget på toppen av Atom-koden Editor produsert av GitHub. Hva er egentlig spennende med dette er det betyr at det vil være en fullverdig, robust og funksjonsrikt kode editor tilgjengelig akkurat inne Avocode på sin offentlige versjonen. Å kunne håndtere hele kodingsprosess rett innenfor en enkelt app virkelig bokstaver av det som allerede forme seg som en kraftig funksjon sett.
Farge Variabler
I tillegg til å være i stand til å ta tak i hexcodes for fargene lagt til paletten, vil du også være i stand til å tildele variabelnavn til hver farge for bruk i preprocessor kode.
I Bygd FTP og CDN opp
Som med mange av de andre funksjonene på vei for Avocode, er muligheten til å laste opp direkte til CDN allerede er til stede i en av kildens plugins, PNGHat, så vi kan gjette at funksjonaliteten vil være mye det samme. Bilder kan eksporteres lokalt gjennom Avocode, eller alternativt vil du være i stand til å presse dem direkte til en CDN og har filplasseringen lagt til CSS utgang. Du vil også ha muligheten til FTP bildene direkte til serveren din på eksport.
Koble til med Typekit og Google Fonts
De innledende videoer for Avocode nevne det vil være et alternativ til å integrere med Typekit og Google Fonts når du genererer skriftinnstillinger kode. Dette er ennå ikke i den lukkede beta eller noen av kildens plugins så jeg er ikke sikker på nøyaktig hvordan dette vil fungere, men jeg personlig håper det vil effektivisere prosessen med å sette sammen de aktuelle nettadresser og kode som å kalle inn ulike fonter.
Base64 og Sprite Sheet Export
Den første fasen av eksport av bilete i dagens lukkede betaversjonen av Avocode er for JPEG, PNG og SVG. Men Source har allerede en prosess etablert for Base64 generasjon gjennom deres PNGHat plugin for Photoshop, så jeg forventer at vi får se dem tegning fra at kodebasen for å bringe det inn Avocode. De har tenkt også å støtte produksjon av sprite ark sammen med den nødvendige CSS.
Eksporter Kode for iOS
Fokus for Avocode vil være på nettet før den har nådd full modenhet, men det er også planer i verk for å gjøre det mulig at den kan brukes som en del av iOS utvikling.
Source allerede har en plugin som heter iOSHat som arbeider i Photoshop for å generere Objective-C eller Swift kode fra Photoshop-lag til bruk i iOS utvikling. Det er sannsynlig støtte for iOS-kode eksport innen Avocode vil fungere på samme måte
Pakker for Custom Extensions
Det er et spennende menypunkt i Avocode.; en som antyder fremtiden utvidelses av plattformen, med noen innledende pakker allerede på plass:
Kilde si de var inspirert av utgivelsen av Atom å vedta en lignende metode for å tillate egendefinerte "pakker" som skal opprettes og delt mellom samfunnet. Vi kan se frem til å se denne veien åpne opp så utviklingen beveger seg langs.
Preorder å låse inn en 70% rabatt
I øyeblikket Source er stadig ruller ut funksjoner og arbeide i beta tilbakemeldinger fra brukere som de går sammen. Når programvaren er offentliggjort den vil være tilgjengelig via en abonnementsmodell for $ 240 per år.
Men hvis du kommer tidlig på preorder du vil låse i en flekk med en 70% evigvarende rabatt, og bringer det ned til $ 69 per år i stedet. Du vil også få tilgang til privat beta, og i denne perioden vil du være i stand til å bruke programvaren gratis. Abonnementet ditt bare begynner når Avocode går til offentlig lansering.
forhåndsbestille plasser er begrenset, og som i dette øyeblikk er det færre enn 230 ledige plasser. Å forhåndsbestille: http://avocode.com/preorder.html
Nyttige linker
For ekstra informasjon besøk:
Avocode Hoved Side
Bak kulissene av Avocode
5 ting du vil elske Om Avocode
Avocode i 1 minutt
Konklusjon
Jeg vil forlate tegning av konklusjonene helt opp til deg! Hva tror du, er du overrasket over noen av funksjonene Source har annonsert? Vil Avocode danne en del av din fremtid arbeidsflyt? Gi oss beskjed i kommentarfeltet! Anmeldelser