Konvertera Photoshop Mockups för att leva webbkod är en extremt vanlig praxis bland webbdesigners. Vi har alla gjort det en miljon gånger för hand, så det är ganska spännande när vi börjar se lösningar som dyker upp som hjälper oss att automatisera denna process.
Den senaste versionen av Creative Cloud Photoshop CS6 har en inbyggd funktion för att konvertera Photoshop-stilar till CSS, och om du behöver en annan lösning finns det två solida tillägg som du kan kolla in. Idag jämför vi resultaten från alla tre metoderna: Photoshop, CSS3P och CSSHat för att se vilket som är bäst.
Våra tre kandidater
Denna artikel handlar om att jämföra resultaten från tre olika metoder för att uppnå samma mål. Vi har en design i Photoshop och vi vill se den byggd i HTML och CSS.
Våra tre metoder inkluderar Photoshop själv (version 13.1) samt två extensions CSS3Ps och CSSHat. Jag har nyligen skapat en screencast för Psdtuts + som introducerar och gör en viss jämförelse mellan Photoshop och CSS3Ps, som du hittar här.
Jag täckte inte laggruppsfunktionalitet i den handledningen men så tyckte jag att det var värt en annan go och bestämde sig för att kasta i CSSHat också så att vi verkligen täcker baserna bra.
Vårt testfall
Vi behöver något för att testa de olika konverteringsmetoderna på, så jag visade upp en generell användargränssnitt som kunde rymma allt du vill ha:
Detta består i grunden av tre olika lager: textlagret, toppraden och bakgrunden. Här skilde jag dem lite ut så att du kunde få en uppfattning om hur de byggdes.
Nedan kan du titta på vår lagerpalett. Observera att det här objektet är avsiktligt uppbyggt. Alla tre metoderna vi ser på idag konverterar lagnamn till klassnamn i CSS, så du vill vara säker på att du är mycket försiktig med hur du heter dina olika bitar. Observera också att formerna är gjorda av vektorformslag.
Några av de metoder som vi kommer att försöka stöda lagrupper, vilket innebär att vi vill konvertera strukturen här till en div-struktur i vår HTML.
html
Photoshop kan ta hand om CSS för oss, men vi är fortfarande ensamma med HTML. Här är ett snabbt försök till en HTML-struktur som kommer att fungera med koden som Photoshop ska generera. Utan detta i din HTML, kommer CSS inte göra någonting!
Photoshop
Låt oss börja med den inbyggda Photoshop-funktionaliteten. Processen här är extremt lätt, allt vi behöver göra är att välja vår lagergrupp i panelen Lager och gå till Layer> Kopiera CSS (du kan också komma åt det här kommandot med ett högerklick).
Photoshop ger ganska mycket nollkoppling om att någonting har hänt just nu. Det finns inga alternativ att tweak, inga paneler att inspektera, bara det menykommando som vi klickade på ovanför, vilket placerar en stor bit av kod i vårt urklipp. Här är utmatningen direkt från Photoshop.
Resultatet
Om vi kasta detta till en kodredigerare och titta på resultatet, är resultaten lite nedslående. Photoshop gjorde inte ett bra jobb med konverteringen. Till att börja med har toppfältet inte rundade hörn. Skuggan verkar också vara fullständig opacitet (för mörk) och typplaceringen är avstängd. Om ger oss en stark start och verkligen sparar oss mycket tid, men det är nog inte den magiska lösningen du hoppades på från Photoshop.
Se det live: Klicka här
För att göra saken värre, om vi hoppar tillbaka och tittar på koden, finns det mycket att klaga på. Det finns några väldigt otroliga saker som händer här, som onödig omformning på texten. Det verkar som om du kan låt Photoshop skriva CSS för dig, men jag är inte övertygad om att du borde.
CSS3Ps
Vår nästa kandidat är CSS3Ps, ett helt gratis Photoshop-plugin som predated den inbyggda Photoshop-funktionaliteten. Webbplatsen visar några ganska komplexa exempel så förhoppningsvis kommer det att ta itu med vårt projekt lite bättre.
Med CSS3Ps förlängning installerad, gå till Fönster> Tillägg> CSS3Ps. Välj sedan laggruppen och klicka på logotypen som dyker upp inuti CSS3P-panelen.
När du trycker på den knappen öppnas en webbsida och presenterar en timer. Du är tvungen att vänta tjugo sekunder och titta på en annons, vilket suger men med tanke på att förlängningen är ledig är det förståeligt.
Härifrån tas du till en sida som innehåller koden, som jag kopierade och klistrade in nedan. Observera att denna gång jag var tvungen att lägga till i perioder före klassnamnen. CSS3Ps tar lagrets namn exakt som det visas i Photoshop, så lägger du till i?.? eller? #? symboler där.
Resultatet
Det finns mycket att tycka om CSS3Ps utdata. Till att börja med behandlar det varje enskilt lager som sitt eget objekt och försöker inte placera dem över varandra. Jag föredrar det faktiskt och alltid omedelbart ta bort den absoluta positioneringskoden som den inbyggda metoden använder. Detta håller fokus för omvandlingen där den borde vara: på stil.
Se det live: Klicka här
Med tanke på stil förbättras också resultaten i det området. Lägg märke till hur toppraden faktiskt har en radie med radius denna gång och hur boxskuggan använder ett alfavärde för att minska opaciteten. Den här versionen kan vara lite prefix tung på saker som inte längre kräver prefix, men annars är koden inte halv dålig.
Även det faktum att du kan få produktionen omformaterad i Sass eller SCSS är en killerfunktion som enkelt gör den här metoden bättre än standard Photoshop-funktionen.
CSSHat
Den tredje och sista metoden som vi ska kolla är CSSHat. Liksom CSS3P, det är en Photoshop-förlängning, men den här kommer att köra dig om $ 30.
För att använda CSSHat, välj enkelt det lager som du vill konvertera och öppna panelen CSSHat (hitta det i menyn för tillägg som med CSS3Ps ovan). Tyvärr stöder CSSHat för närvarande inte lagergrupper, så du måste göra det på varje enskilt lager. Det här är en allvarlig strejk mot CSSHat, men det gör det till sin mångsidighet.
Jag älskar att jag äntligen har några alternativ att tweak. De andra två metoderna var enkla, men om du inte gillar något, tufft! Här kan jag växla mellan fyra olika alternativ: kommenteringsförklaringar, webbläsarprefix, lagdimensioner och huruvida koden går in i en regel som heter lagret.
Observera också att du kan få utdata i en imponerande mängd olika format: CSS, SCSS, Sass, LESS, Stylus och Stylus CSS. Här är resultatet för den vanliga CSS-versionen:
Resultatet
Som du kan se ovan är knippen av kod den här tiden ganska stor, främst på grund av att gradienten konverteras till en data-URL. Nedan är resultatet om vi klistrar in direkt i vår kodredigerare.
Se det live: Klicka här
Som du kan se, precis som med CSSP, är elementen bara stylade, inte placerade, vi skulle behöva skjuta dem på plats själva. På den fronten ser stilen ut perfekt med undantag för texten, vilket är liten. Jag förväntar mig att det här har att göra med det faktum att jag byggde Photoshop-versionen på en näthinneskärm men så du kanske inte upplever det här felet (CSS3Ps gjorde faktiskt samma sak).
Vem vinner?
? Jag rekommenderar både CSSHat och CSS3P över vad du kommer in i Photoshop 13.1.?Ingen av metoderna för att konvertera Photoshop-stilar till CSS som beskrivs ovan är perfekta. Photoshop-versionen fungerar, men koden är ganska ful och resultaten utnyttjar inte de avancerade CSS3-teknikerna som du behöver matcha saker som opacitet och komplexa gränserna. CSS3Ps är gratis och fungerar bättre än Photoshop, men metoden att skicka dig till en webbsida som är dold bakom en fördröjning på tjugo sekunder är ganska irriterande.
CSSHat är det bästa i gänget när det gäller anpassning, men det stöder inte laggrupper. Standard Photoshop-metoden är den enda som placerar dina flera objekt på ett sätt som matchar din duk, vilket kan vara en bra eller dålig sak (jag önskar att det var en valfri funktion). I slutändan kommer ingenting att ge dig noggrannhet, kraft och mångsidighet av kodning för hand, men de här verktygen kan ta dig till en stark start och spara dig en seriös tid.
Personligen tenderar jag att favorera CSSHat i denna grupp. Det är lite pricy, men funktionaliteten är stellar. Det är uppriktigt mycket närmare det jag ville se från Adobe. Jag tror att de verkligen släppte bollen på den här funktionen och jag rekommenderar både CSSHat och CSS3P över vad du kommer in i Photoshop 13.1.
Vad tror du?
Nu när du har sett min bedömning av dessa tre verktyg är det dags för dig att chime in. Vilken av ovanstående metoder har du försökt? Vilken tycker du är bäst? Låt oss veta i kommentarerna nedan!