Share
Photoshop har varit en del av webbdesign i flera år, och det är troligt att det kommer att fortsätta som sådant under lång tid. Om du designar på webben med Photoshop, eller du är en utvecklare som hanterar kodning av PSD-enheter, är det troligt att det finns några problem du regelbundet löper in..
Även om du har övergått från Photoshop till Sketch för designfasen i ditt arbetsflöde, kommer du fortfarande att möta problemet med kodare som behöver åtkomst till programvara som de annars inte skulle använda. Med något av de två programmen är det troligt att du kommer att slå hastighetsstötar som är lika stora för kursen när du använder verktyg vars primära syfte är att designa, inte generera kod för webben.
Killarna på Source har producerat tillägg för Photoshop sedan 2012. Deras plugins är utformade för att underlätta några av de vanligaste problemen i designen för att koda processen, till exempel att skapa CSS som korrekt representerar en design och exporterar bilder effektivt.
Jag har länge varit fan av deras CSSHat-plugin, vilket genererar CSS eller preprocessorkod från Photoshop-lager. Jag använder också deras PNGHat-plugin nästan varje gång jag använder Photoshop, för export av bilder till PNG, JPEG eller Base64. Du kan se båda dessa plugins i funktion i mina tvåhandledning:
Dessa plugins är inriktade på utvecklingsstadiet för webbplatsskapande processen. gör PSD till helt funktionella webbplatser. Med tanke på att många utvecklare inte ens behöver Photoshop för något annat ändamål än att komma åt PSD, är det ett naturligt nästa steg för att se den här typen av arbetsflödesförbättringar som tagits direkt från Photoshop tillsammans.
Det är vad Källans nya skrivbord och webbaserat verktyg, Avocode, handlar om.
Avocode är ett program som är avsedd för processen att gå från PSD (eller Sketch) till kod. Det skapar inte automatiskt webbplatser för dig, utan det ger dig en uppsättning verktyg som gör att du kan skapa webbplatser på det sätt du personligen föredrar, men mer effektivt än när du arbetar direkt inuti Photoshop eller Sketch. Avocode syftar till att överbrygga klyftan mellan design och kodning av webbutveckling.
I den här artikeln tittar vi på hur du kan använda Avocode till:
Med Avocode delas PSDs mellan designers och utvecklare via en automatisk synkroniseringsprocess. Om du är en designer installerar du ett Photoshop-plugin och när din design är klar kommer du bara att klicka på en "Synkronisera nu" -knapp för att göra din PSD tillgänglig för utvecklaren.
Ytterligare sätt att synkronisera är på väg, med Dropbox som ett bekräftat alternativ som kommer i en framtida release. Bedömning av det aktuella beta 0.5.0-gränssnittet ser vi också att synkronisera via Layervault, direkt ladda upp och dra filer direkt i det lokala lagret.
Om du är en utvecklare får du ett meddelande via Avocode om att en ny design är tillgänglig, då kan du bara öppna den direkt via ett enda klick i PSD-surfpanelen. Detta gör borta behovet av att skicka mega-bifogade filer eller på annat sätt manuellt överföra PSD-filer.
Tillsammans med varje design kommer ett inbyggt versionshanteringssystem. Progressiva iterationer av en PSD kan enkelt synkroniseras mellan designer och utvecklare, igen genom att trycka på Photoshop-plugin Synkronisera nu knappen, med varje version tillgänglig via PSD-surfpanelen. Avocode kommer ihåg de tidigare exportinställningarna för bilderna i designen, vilket innebär att uppgifter som att exportera nyuppdaterade bilder kan automatiseras.
När du har en PSD öppen i Avocode hittar du att interagera med det för att vara ganska intuitivt. Som Photoshop har Avocode en Lagerpanel där du kan se alla PSD: s lager och grupper. Dessa lager och grupper kan alla visas eller dolda, och du kan också klicka för att välja någon av dem.
Förutom att välja element i designen via panelen Lager, kan du välja Välj Verktyg från verktygspanelen till vänster, klicka sedan på något objekt på scenen direkt. För att välja flera objekt, håll bara ned FLYTTA och fortsätt klicka på de objekt du vill välja.
Multi-val fungerar om du klickar direkt på scenen eller i panelen Lager.
För att panorera runt designen väljer du Handverktyg klicka sedan och dra för att flytta.
Med valfritt lager och Kontrollpanel öppna ser du CSS för det objektet som visas i panelen Koda underavsnitt, antingen i rå eller preprocessorform beroende på vad du föredrar. Detta använder samma CSS-generationslogik som CSSHat-plugin, vilket fortfarande är den mest visuellt korrekta CSS-generatorn jag har sett bland de tillgängliga alternativen.
Att ta tag i CSS för objektet är lika enkelt som att klicka på Kopiera CSS eller Kopiera mindre knappen, så du kan klistra in i ditt stilark eller direkt markera de linjer du vill använda och kopiera dem därifrån. Om du har skapat förprocessorkod, kommer den automatiskt att inkludera mixins från ditt föredragna mixin-bibliotek. De tillgängliga alternativen är:
Jag är säker på att jag inte är ensam när jag säger att det är lite svårt att hitta layoutdimensionerna i Photoshop. Avokods tillvägagångssätt på detta problem är mycket rakt framåt. För att få höjd och bredd på ett objekt:
1. Välj den Välj Verktyg och välj något objekt eller flera objekt.
2. Läs värdena i det nedre vänstra hörnet av den blå markeringsmarkeringsrutan.
3. Eller läs värdena till höger om förhandsvisningsmenyn längst upp på sidan Kontrollpanel.
För att hitta det horisontella och vertikala avståndet i pixlar mellan två punkter:
1. Välj den Mätverktyg och välj något objekt.
2. Håll över något annat objekt och läs värdena bredvid de horisontella och vertikala röda linjerna.
Om du har valt ett textskikt ser du en förhandsgranskning av innehållet i Kontrollpanel, liksom dess bredd och höjd, och en snabb Kopiera text knapp som du kan använda för att fånga texten i det för att klistra in i din kod.
1. Välj den Color Picker Tool och flytta musen runt scenen, titta på färgförhandsgranskningen tills du har den färg du vill ha.
2. Klicka på den platsen och din färg kommer att läggas till i Färger underavsnitt i Kontrollpanel, med de hexekoder som visas för varje.
1. Välj den Välj Verktyg och välj något objekt eller flera objekt.
2. I Kontrollpanel under panelens Exportera underavsnitt klicka på den lilla filikonen med det blå plusteckenet på det för att ställa in ditt val som en tillgång.
3. Namnet på din tillgång kommer att dras från lagrets namn. Välj PNG, JPEG eller SVG-export och klicka sedan på "Exportera nu". Om det är den första tillgångsexporten av projektet kan du välja en destinationsmapp, annars kommer filen att exporteras direkt.
När du har ställt ditt val som en tillgång visas det också i aktivitetspanelen. Härifrån kan du klicka på förstoringsglasikonen som ska tas till mappen som lagrar din tillgångsexport.
Du kan också klicka på knappen "Hämta kod" längst upp på panelen eller på <> ikonen till höger om din tillgångs namn, för att generera HTML, CSS eller LESS du kan använda för att placera tillgången i kod.
I PNGHat-plugin för Photoshop finns också kontroll över exakta JPEG- och PNG-exportinställningar samt skalningsalternativ, så jag föreställer mig att vi kommer se samma kontroller överförda till Avocode snart.
För att få en uppfattning om vad man ska förutse i Avocodes bildexportprocesser läs mer om PNGHat här: Så här exporterar du Photoshop-tillgångar till webben med PNGHat
Just nu Avocode är i privat beta så det finns fortfarande flera mycket intressanta utseende på grund av att komma ut inom en snar framtid. Appen är planerad att flytta till offentlig beta någon gång i sommar, varefter vi ser den officiella lanseringen.
När utvecklingen går vidare, här är några av de saker vi kan förutse:
Oavsett vilket OS du arbetar med, eller ens om du är på en mobilenhet, kommer du att kunna använda Avocode. För tillfället läggs den slutna betaversionen av Avocode genom sina steg på Mac, men den fullständiga versionen av den inhemska appen kommer också att köras på Windows och Linux, och webbversionen kommer att köras i alla moderna webbläsare.
Källrapporten har redan en fungerande prototyp för att leverera samma funktionalitet för Sketch-baserade mönster. Så om du är en formgivare som använder Sketch on Mac, är en designer med Photoshop på Windows, en utvecklarskrivningskod på Linux, eller om du använder någon annan kombination så är du lika redo att gå.
Avocode är faktiskt byggt ovanför Atom Code Editor som produceras av GitHub. Vad som är väldigt spännande om det här betyder att det kommer att finnas en fullfjädrad, robust och funktionsrik kodredigerare som finns direkt inuti Avocode vid offentliggörandet. Att kunna hantera hela kodningsprocessen precis inuti en enda app klarar verkligen av det som redan formar sig som en kraftfull funktionssats.
Förutom att kunna ta tag i hexkodorna för de färger som läggs till i paletten kan du också tilldela variabla namn till varje färg för användning i din förprocessorkod.
Som med många av de andra funktionerna på vägen för Avocode är möjligheten att ladda upp direkt till CDN redan närvarande i en av Källans plugins, PNGHat, så vi kan gissa att funktionaliteten blir mycket densamma. Bilder kan exporteras lokalt via Avocode, eller alternativt kan du skicka dem direkt till en CDN och få filplatsen tillfogad i din CSS-utskrift. Du har också möjlighet att FTP bilderna direkt till din server vid export.
De inledande videoklippen för Avocode nämnde det kommer att finnas ett alternativ att integrera med TypeKit och Google Fonts när du skapar din typsnittskod. Det här är inte ännu i den stängda betaen eller någon av Källans plugin så jag är inte säker på exakt hur det kommer att fungera, men jag hoppas personligen att det kommer att effektivisera processen att sätta ihop de lämpliga webbadresserna och koden för att ringa in olika teckensnitt.
Det första steget med bildexport i den nuvarande slutna betaversionen av Avocode är för JPEG, PNG och SVG. Källa har dock redan en process upprättad för Base64-generationen genom deras PNGHat-plugin för Photoshop, så jag förväntar mig att vi kommer se dem teckna från den kodbasen för att få den till Avocode. De har också för avsikt att stödja produktionen av sprite sheets tillsammans med CSS.
Avocode fokuserar på nätet tills det har uppnått full mognad, men det finns också planer i arbetena så att den kan användas som en del av IOS-utvecklingen.
Källa har redan ett plugin som heter iOSHat som fungerar inom Photoshop för att generera Objective-C eller Swift-kod från Photoshop-lag för användning i IOS-utveckling. Det är troligt att stödet för export av iOS-kod inom Avocode kommer att fungera på ungefär samma sätt.
Det finns ett spännande menyalternativ i Avocode; en som tyder på plattformens framtida förlängbarhet, med några initiala paket redan på plats:
Källa säger att de inspirerades av att Atom släpptes för att anta en liknande metod för att tillåta anpassade "paket" som ska skapas och delas mellan samhället. Vi kan se fram emot att se den här vägen öppna när utvecklingen går vidare.
För närvarande är Source kontinuerligt rullande ut funktioner och arbetar i beta-användaråterkoppling när de går vidare. När programmet är offentligt släppt kommer det att finnas tillgängligt via en prenumerationsmodell för 240 dollar per år.
Men om du kommer tidigt på förbeställningen låser du i en plats med en 70% evig rabatt, vilket innebär att den går ner till $ 69 per år istället. Du får också tillgång till den privata betaversionen, och under den här perioden kan du kostnadsfritt använda programvaran. Din faktiska prenumeration börjar bara när Avocode går till offentlig lansering.
Förbeställningsplatser är begränsade, och för närvarande finns färre än 230 platser tillgängliga. Förbeställa: http://avocode.com/preorder.html
För extra information besök:
Jag lämnar slutsatserna helt upp till dig! Vad tycker du, är du förvånad över någon av de funktioner som Source har meddelat? Kommer Avocode att vara en del av ditt framtida arbetsflöde? Låt oss veta i kommentarerna!
Accentsconagua