Jag har en smutsig liten hemlighet, jag hatar skivning av Photoshop-filer. Därmed menar jag inte att jag hatar att göra PSD comps till webbplatser, jag menar att jag hatar Photoshops skivverktyg. Hela processen gör min PSD upptagen, rörig och alltför komplicerad så jag brukar hoppa över det hela och istället välja att manuellt beskära och spara bilder individuellt efter behov.
För att bekämpa denna tendens och försöka se den verkliga användbarheten av Photoshops skivverktyg startade jag ett uppdrag för att lära mig alla invecklingar av hur skivning fungerar. Nedan följer en samling tips och tricks som härrörde från denna resa. Förhoppningsvis lär du dig en sak eller två som du aldrig visste!
Det finns tre typer av skivor i Photoshop
Tre typer skivor !? Detta var en av de mest intressanta och överraskande sakerna jag lärde mig. Har inte riktigt experimenterat med skivfunktionerna för mycket, tänkte jag bara att det bara var ett sätt att gå om det. Jag hade fel.
De tre olika typerna av skivor är User Skivor, Auto Skivor och Skivor baserat Skivor. Till att börja med, låt oss prata om de två som du förmodligen är bekanta med: Användarsnitt och Auto Skivor. Dessa är mycket nära besläktade, i själva verket skapar man den andra.
Som du vet, att skära en PSD börjar du genom att ta tag i skivverktyget (C) och rita en ruta runt det område som du vill exportera som en fristående bild. Genom att lägga till skivor till alla delar av din kompis som du vill göra så kan du snabbt och enkelt optimera och exportera flera bilder samtidigt.
När du utför en skiva borde du få något som resultatet nedan.
Vad jag har gjort här är att dra en ruta runt logotypen högst upp på sidan. Den här åtgärden skapade både en användarsnitt och flera automatiska skivor. När du skapar en skiva, förutsätter Photoshop att ditt slutmål är att göra hela PSD till en serie skivor. Jag tycker personligen att detta antagande är ganska irriterande, och vi kommer senare att diskutera hur man ska komma runt det. För tillfället vet du bara att på grund av detta antagande, utökar Photoshop kanterna på din skiva hela vägen över PSD, vilket skapar flera andra avsnitt automatiskt. Detta illustreras i bilden ovan.
Tricks för att arbeta med användare och auto skivor
Medan vi är på ämnet User and Auto Slices, låt oss gå över några av de uppenbara och inte så uppenbara funktionerna så att du verkligen kan få en känsla för vilka verktyg och alternativ du har till ditt förfogande.
Flytta och redigera skivor
När du har gjort en skiva borde du se kontroller som liknar det för en fri transform som tillåter dig att flytta och redigera den. Du kan också använda skärverktyget för att se till att du bara redigerar nuvarande skivor och inte skapar nya. Det här verktyget finns under skivverktyget i menyn Fly-out.
Konvertera automatisk skivor till användarsnitt
Under hela skärningsprocessen skapas och uppdateras automatiskt skivor och de skiljer sig från användarskivor. Senare tittar vi på hur man exporterar dem som filer eller ignorerar dem vid export, men för nu kan vi titta på hur man gör en automatisk skiva till en användarsnitt.
Processen är extremt enkel. Först måste du välja Auto Slice med Slice Select Tool. Välj sedan Auto Slice som du vill konvertera och klicka på? Markera? knappen nära toppen.
Det är allt! Nu ska Auto Slice ändra färg, vilket indikerar att det nu är en användarsnitt. Nu har du större kontroll över dess storlek och hur den exporterar.
Skivor med automatisk uppdelning
När du har en serie objekt som distribueras horisontellt, vertikalt eller till och med i ett galler, behöver du inte ta dig tid att gå igenom och göra en skiva kring varje enskild enhet. I stället kan du skapa en skiva som täcker alla objekt och berätta för Photoshop att resten ska göras.
För att göra detta, först gör din stora skiva genom att rita en låda runt alla föremål. Sedan, med Slice Select Tool aktiverat, klicka på? Divide? knappen högst upp på sidan.
Detta borde hämta upp? Divide Slice? dialogrutan ovan. Med det här fönstret kan du snabbt infoga extra vertikala och horisontella skivor. Om de inte riktar sig rätt, kan du justera dem manuellt efter att ha tryckt på? OK-knappen.?
Skivor från guider
Många av er är förmodligen mycket bekvämare att arbeta med guider än skivor inuti Photoshop. Verkligheten är att de båda fungerar väldigt likartade, men styrsystemet känns visserligen lite jämnare.
Om det här är hur du rullar passar detta perfekt i ett enkelt arbetsflöde för att skapa skivor. Dra bara ut guider för att skära upp din PSD och ignorera skivverktygen helt och hållet. När du är färdig, välj sedan skivverktyget och klicka på skivorna från guiderna? knappen högst upp.
Namngivning av skivor
En av de irriterande sakerna som kommer att göra dig första gången du jobbar med skivor är att när du exporterar dem kommer de resulterande filerna upp med stora fula namn som inte alls är meningsfulla. För att åtgärda detta måste du se till att du har gått in och namngiven varje skiva på lämpligt sätt. Vilket namn du tilldelas kommer då att överföras som filnamn vid export.
För att namnge en skiva, dubbelklicka på innehållet med det skivverktyget som valts. Detta kommer att hämta dialogrutan nedan.
Observera att du har flera alternativ här, inklusive inställning av färgen för skivan, manuellt inmatning av dimensionerna och tilldelning av ett namn. Det finns också en massa HTML-material som URL, Target, etc. Det visar sig att Photoshop kan ta din skivade PSD och skriva ut den som en webbsida. En del bash denna funktion eftersom standardinställningarna skapar en tabellbaserad layout, men du kan byta dessa för att använda CSS.
Nu, bli inte för upphetsad. Även med de CSS-alternativ som valts är Photoshop fortfarande ganska rutt på att bygga en webbplats för dig.Du är mycket bättre att göra det för hand eller åtminstone ta det över till Dreamweaver, vilket innebär att du borde ignorera alla dessa andra alternativ helt.
Lagbaserade skivor och varför de är bättre
En av de viktigaste egenskaperna som gjorde att skivning suger mycket mindre för mig är lagerbaserade skivor. Dessa är ett särskilt märke av användarsnitt som är överlägsna på flera sätt.
Som namnet antyder är dessa skivor inte baserade på en låda som du ritar manuellt utan i stället följer automatiskt lagens gränser. För att skapa en lagerbaserad skiva, välj ett lager i lagerpaletten, gå till menyn och välj Layer> New Layer Based Slice. Observera att detta även fungerar om du har flera lager valt, varje lager kommer helt enkelt att omvandlas till sin egen skiva!
Självklart, för att detta ska fungera korrekt måste du verkligen vara bra om hur du strukturerar dina lager. Du borde bygga dina mockups som fullständigt lagrade och organiserade filer ändå så det borde inte vara ett problem.
Fördelen
En av de främsta orsakerna till att vanliga skivor är så lama är att det skapar mycket extra arbete om du vill gå tillbaka och justera dina mönster. När du har blandat konstverket runt måste du gå tillbaka och flytta alla dina skivor för att anpassa dig till den nya layouten. Denna irriterande är varför jag alltid bara manuellt räddar de enskilda bitarna genom beskärning.
Lagbaserade skivor är dock ganska intelligenta. När du flyttar runt dina lager följer dina skivor automatiskt. Om du lägger till en effekt som ändrar gränserna, till exempel ett yttre glöd, expanderar segmentet för att inkludera det. Om du omvandlar skiktet till 30% av sin ursprungliga storlek, uppdateras skivan automatiskt automatiskt!
Det är uppenbart att det finns ett tydligt argument här för att använda lagbaserade skivor när det är möjligt, eftersom det sparar dig en otrolig mängd tid i det oundvikliga re-designstadiet.
Att döda rotan
En annan av mina största störningar med skivning är att det kan skapa en riktigt rörig utseende PSD. Detta gör oftast Auto Slicing-bieffekten.
Till exempel, ta en titt på bilden nedan (det är lite överforenklat här men du får poängen). Här ville jag bara bara skapa tre skivor, men Photoshop har automatiskt gått in och gjort det tolv skivor!
Jag vet inte om dig, men jag bygger inte webbsidor som en stor samling av bilder, som alla klämde ihop. Så jag vill helt enkelt inte ha alla dessa extra skivor! Jag kommer inte att exportera dessa områden till bilder, så allt de gör är att lägga till ljud i mitt gränssnitt. När jag ser ett sådant dokument, slutar skivorna vara ett meningsfullt verktyg för mig.
För att åtgärda detta kan vi ta tag i Slice Select Tool och klicka på? Dölj Auto Slices? knappen längst upp på skärmen. Detta gör precis vad namnet antyder, dike alla dessa otäcka Auto Skivor från vyn.
Titta på hur mycket enklare vårt dokument blir! De få skivor som vi använde är tydligt identifierbara och behåller därför deras användbarhet. Enligt min åsikt är denna metod att betrakta dina skivor mycket föredragen. Det här är ett av de fall där Photoshop helt enkelt försöker förutspå mitt föredragna arbetsflöde och slutar att överdriva funktionerna.
Exportera skivor
Det är här användbarheten av skivning verkligen kommer i spel. Utan skivning måste du spara varje del av din kompis åt gången. Arbetsflödet skulle vara något av följande: göra ett urval, skörda, optimera i Spara för webben, spara, ångra grödor och upprepa. Det är många onödiga steg! Låt oss se hur det fungerar med skivning.
När du äntligen har bestämt alla insatserna för skivning och har din PSD redo att gå, är det dags att gå till Arkiv-menyn och välj? Spara för webb och enheter.? Du är förmodligen bekant med den här dialogen redan, men det är lite annorlunda när du har skivor i ditt dokument.
Om du har några skivor visar förhandsgranskningen av ditt dokument i det här fönstret dem alla (tyvärr inkluderar detta de irriterande autosnitt). Härifrån kan du enkelt klicka för att välja varje skiva och optimera inställningarna för var och en för sig. Detta inkluderar filtyp, kvalitet etc. Så i en session kan du ställa in en export av tre JPG och en PNG, varje med en kvalitet som du anser vara lämplig.
När du har justerat allt efter eget tycke, slår du på? Spara? knapp. En dialogruta ska dyka upp som låter dig välja en mapp för att placera alla bilder i. Kom ihåg att vi redan har skapat namngivningskonventionen så att du bara lämnar det som det är. Nyckeln här är att se till att du bara exporterar antingen? Alla användarsnitt? eller? Valda skivor ?.
Beroende på önskat arbetsflöde fungerar något av dessa alternativ bra. Standardalternativet är helt enkelt? Alla skivor ?, som inte bara omfattar dina användar- och lagerbaserade skivor, utan också de helt värdelösa Auto Skivorna som du bara behöver kasta in iväg ändå. Spara själv besväret och gräva dessa här innan den faktiska rädningen sker.
Slutsats
Vi gick över en massa vackra tekniska Photoshop-saker idag så jag försöker summera det bra. Först kan skivning av en PSD verkligen känna sig som en klumpig process om du inte vet vad du gör. Se till att du verkligen tittar runt i Photoshop och experimenterar med tipsen ovan för att du ska få ut det mesta av de verktyg som är tillgängliga för dig.
För det andra, kom ihåg att det finns tre typer av skivor: Auto Skivor, Användarskivor och Skiktbaserade Skivor. Auto skivor är ganska lama och är mer av en olycklig bieffekt än att skära än en bra funktion. Du behöver inte hålla med mig på det här, men om du gör det, göm dem så att de inte är så distraherande. Användarsnitt är helt enkelt de som du avsiktligt skapar. Du kan justera dem med Slice Select Tool och namnge dem genom att dubbelklicka på innehållet.Lagbaserade skivor är precis som användarskivor, bara de är mycket smartare eftersom de automatiskt följer ett visst lags gränser. Du kan flytta, ändra storlek och lägga till effekter i ett lager och skivan uppdateras kontinuerligt på egen hand.
När du exporterar ett dokument med skivor väljer du slutligen kommandot Spara för webb och optimerar varje skiva som sin egen fil. Se även till att endast exportera användarsnitt eller valda skivor, annars kommer alla bildskivor som skapats av Photoshop att fylla i bildmappen.
Det här är nog mer än vad du någonsin ville veta om skivning i Photoshop, men det har förhoppningsvis hjälpt dig att upptäcka ineffektiviteten i systemet, så att du kan anpassa och fortfarande utnyttja den här användbara uppsättningen verktyg utan att hindras av dess besvär.
Lämna en kommentar nedan och berätta hur du skar en PSD. Arbetsflödet som jag har satt upp här är bara en av många möjliga lösningar och jag är angelägen att höra och lära av er!