Share
Adobe Photoshop utvecklas ständigt; Nya funktioner läggs till med varje utgåva, medan befintliga funktioner förbättras. Det finns dock ett område som fortfarande är ganska föråldrat; Det sätt på vilket vi delar våra mönster i Photoshop har inte ändrats sedan webben var tabellbaserad.
Gryningen av upplösningsoberoende (Tänk Retina) har inneburit att vi lita mindre och mindre på bitmappar för våra webbplatser. Webfonter, CSS3 och Scalable Vector Graphics är alla exempel på moderna tekniker som flyttar oss från att oroa dig för pixlar. Ibland behöver vi fortfarande skära upp våra PSD och använda de resulterande bilderna, men det är dags för oss att göra det på ett mer ansvarsfullt sätt.
Ange Cut & Slice me, ett CS6-plugin utvecklat av Daniel Peruho. Cut & Slice mig syftar till att påskynda den moderna skivprocessen och erbjuder många kraftfulla funktioner. Det är gratis, det är lätt att använda och det fungerar.
Några av de saker som erbjuds inkluderar att ta en grupp lager och behandla den som ett enda objekt. Det trimmer sedan alla onödiga pixlar och exporterar gruppen som en bildfil. När du utformar knappar, så snart lagren har namngivits enligt det format som krävs av pluginet, kan det automatiskt styra de flera tillstånden för den knappen. Intressant att lära sig mer? Låt oss dyka in.
För att komma igång måste du först köra Photoshop CS6. Du måste då ha plugin installerat på din maskin. Gå vidare till Cut & Slice me hemsidan och hämta den senaste versionen av plugin. Ladda ner också den provfil som vi ska använda för att visa hur plugin fungerar.
När du är nedladdad dubbelklickar du på CutAndSliceMe.zxp-filen för att utlösa installationsprogrammet för plugin. När Adobe Extension Manager dyker upp följer du bara instruktionerna.
Starta Photoshop och välj Fönster> Extensions> Cut and Slice me. Du borde nu kunna se "Cut & Slice me" -panelen.
Därefter extraherar du CutAndSliceMe_sample.zip-filen och öppnar provfilen. Du bör se följande:
Det här är en mobil design med ordentligt angivna lager enligt plugins krav. I korthet ser vi hur det fungerar, men innan vi gör det finns det några saker du bör vara medveten om:
Kontrollera att knappen med iPhone-ikonen är markerad och klicka sedan på Klipp alla tillgångar. När skivningen är klar naviger du till samplingsfilkatalogen och öppnar mappen "CutAndSlice_sample_iPhone_assets" som skapas automatiskt av plugin.
Du kommer att se varje tillgång i två storlekar; en för retina (vilket är faktiskt den fulla upplösningsstorleken som används i din PSD-fil) och en annan som är den nedskalade versionen av originalet.
Låt oss nu upprepa vår övning, den här gången att exportera till Android. Byt pluginläget genom att klicka på knappen med Android-ikonen och klicka sedan på Klipp alla tillgångar igen. Den här gången skapas mappen "CutAndSlice_sample_Android_assets" med fyra undermappar; en för varje tillgångstorlek. Den storlek vi ursprungligen konstruerade finns i xhdpi mapp, alla andra tillgångar är nedskalade versioner av dessa.
Nu har vi sett mer eller mindre vad plugin gör, det är dags att ta reda på hur det fungerar.
Den viktigaste aspekten att överväga är att organisera lag, när det gäller namngivning och gruppering. Organisera dina element i grupper, som om de var föremål. Lägg sedan till @ till slutet av alla gruppnamn du vill exporteras och slutligen klicka på Klipp alla tillgångar. Innehållet i varje grupp exporteras som en PNG-fil, trimning av alla transparenta pixlar.
Notera: För prestationens skull kontrollerar Cut & Slice mig bara gruppnamn, så för att kunna exporteras måste dina lager vara i en grupp.
Ibland kanske du inte vill exportera alla tillgångar. du kanske vill exportera endast de tillgångar du har lagt in i en viss grupp. Om så är fallet klicka bara på Klipp undergrupper och Cut & Slice mig exporterar alla dina @ lager i den valda gruppen.
När du vill segmentera en enda grupp eller ett enda lager, välj det och klicka på Klipp ut vald.
Slutligen, när man arbetar med knappar har vi ofta flera stater för dem. För att kunna exportera dem ordentligt måste du lägga till grupper som innehåller dina olika knapptillstånd och namnge dem enligt följande:
Accentsconagua
vanligtsvävaklickade / pressadevaldInaktiveradLägg sedan dessa grupper in i en annan grupp med _BTN bifogas till sitt namn. Observera att _BTN suffix kan användas med något element som har tillstånd.
Exempel på knappar med olika tillstånd. Som redan nämnts, klippa och skiv mig grödor bitmaps tätt, ta bort alla omgivande transparenta pixlar du inte vill ha. Men vad händer när du vill att alla dina knopps stater ska vara lika stora? I det här fallet kan du använda ett rektangulärt vektorlager som heter #, högst upp i din grupp, som representerar det område du vill exportera. Din grupp exporteras med storleken på vektorns form utan att exportera själva vektorgradet. Detta gäller alla grupper, inte bara för knappar. Pluggen använder ett vektorkikt för denna funktion eftersom om Snap Vector Tools och Transforms till Pixel Grid Alternativet är markerat, som jag nämnde ovan, kommer din vektorform att bli pixel perfekt utan några suddiga kanter.
För att testa den här processen, välj lagret omedelbart nedan login_BTN grupp. Ställ sedan in Opacitet till 100% och Fylla till 40%. Nu kan du se formen ovanför knappen. Ändra dess storlek som du önskar och exportera den. Öppna nu tillgångsmappen och kontrollera storleken på den exporterade knappen. Det ska vara den storlek du just definierat.
Vi har nu en gedigen förståelse för hur vi kan använda plugin, så det är dags att testa det i den verkliga världen. Här kommer jag inte att lära dig hur du utformar en webbplatskabel från början, istället använder jag en färdig mall för att visa hur du namnger och organiserar dina lager ordentligt.
Låt oss börja med att ladda ner den här gratis webbplatsmallen från CSS Author. Mallen har en webbversion och en mobilversion. Ladda ner båda, öppna sedan webbversionen av mallen.
Du kanske redan märker att skiktets namn och struktur är långt ifrån vad vi behöver. Vi måste utföra några omarrangeringar och byta namn för att kunna uppfylla plugins krav. I följande skärmdump kan du se en jämförelse mellan lagstrukturen före och efter våra ändringar. Ändra dina lager (i rött) för att matcha dem till höger (grön).
Lager jämförelse före (röd) och efter (grön) Vid detta tillfälle vill vi exportera till webben, så byt läge genom att klicka på knappen med Monitor-ikonen och klicka sedan på Klipp alla tillgångar. Följande skärmdump visar vad du ska se. Om din uppfattning skiljer sig, kolla dina lager för eventuella fel och försök igen.
grattis! Du har just skivat din första design framgångsrikt. För ytterligare övning, öppna och skiv mobilversionen av mallen.
I det här fallet, när du redigerar filen, exporterar du till iPhone och Android och kontrollerar om allt är korrekt. Om så är fallet, är du redo att ta det här till nästa nivå och skära din egen design.
Du har nog lagt märke till att när du exporterar våra tillgångar har vi slutat med många PNG-filer. Och, som vi vet, innebär det att fler individuella bildfiler från en webbserver innebär fler HTTP-förfrågningar, vilket gör att dina webbsidor blir sämre. För att lösa problemet kan du överväga att vända alla dina PNG-filer (eller några av dem) till en enda bildspritefil.
Lyckligtvis är det här en lätt uppgift idag och det finns många sätt att närma sig det. Det finns många onlineverktyg som kan hjälpa till med processen. Ta en titt på följande spritgeneratorer:
... se vilka passar bäst dina behov.
Hittills så bra, men det finns en sak vi behöver påpeka. Med tekniker som CSS3 och SVG litar vi inte längre på bilder längre. Vi kan nu enkelt använda SVG-ikoner eller CSS3-knappar i våra konstruktioner. Den största fördelen med att använda SVG- och CSS3-grafik är att de är upplösningsoberoende och fungerar mycket bra inom en lyhörd design. Du kan också ändra och justera dem direkt i din kod utan att behöva använda bildredigeraren. Men vänta! Det betyder inte att bilderna är helt olämpliga. De kan fortfarande användas för foton, komplexa grafik och grafiska element, och så vidare. CSS3 och SVG är bra, men webbläsarsupport är inte helt tillförlitligt ännu, så du måste vara uppmärksam när du använder dem.
Möjligheten att automatisera våra designuppgifter är oerhört viktigt i dagens snabbväxande webbvärld. Lyckligtvis ger verktyg som Cut & Slice mig oss bara sådan automatisering och sparar en enorm mängd av vår tid. Som du kan se, med lite disciplin när vi heter och organiserar våra lager, kan vi snabbt och enkelt skära komplexa mönster. Med några få klick har vi alla tillgångar vi behöver ordentligt klippt och redo att användas.
