Share
Vad du ska skapaIdag ska vi titta på de olika sätten att exportera ikoner med hjälp av ett verktyg som ofta är rädd, men tar produktiviteten till en annan nivå när du förstår det. Det verktyget är ingen annan än Skär verktyg, och tro mig, om du aldrig har använt det tidigare, vill du läsa den här artikeln, eftersom jag förklarar allt det finns att veta om det när det gäller att exportera ikoner.
Oavsett om du väljer att använda ett premade ikonpaket eller börja från början, lär vi dig i dag några viktiga överväganden att tänka på när du exporterar dina värdefulla tillgångar.
Innan vi får alla tekniska, vill jag ta några sekunder och förklara orsaken till att du skriver denna del.
Så i en tidigare handledning talade jag om att använda ritytor och Skikten som metoder för att exportera våra värdefulla ikoner, men för att vara ärliga kan dessa metoder sakta ner dig när du har ett större paket. Tanken var att jag ville / behövde presentera en process lämpad för nybörjare som skulle vara lätt att förstå, förutsatt att de visste hur man använder de mest grundläggande Illustrators verktyg.
Nu, medan de metoderna kanske inte hade varit det bästa av produktiviteten, var de ganska enkla att följa och tillämpa, vilket ger dig exakt samma resultat.
Eftersom några av er trodde att processen var alltför långsam och smärtsam, bestämde jag mig för att spela upp mitt spel och visa dig det snabbaste sättet att exportera ett ikonpaket med en lite mer avancerad metod.
Tja, jag kanske har sagt avancerat, men för att vara ärlig är det inte så svårt när du leker med det ett par gånger.
Låt oss återgå till vårt huvudämne och prata lite om skivor och hur Illustrator använder dem.
Du kan tänka på en "skiva" som en definierad del av ett konstverk som du kan skapa för att individuellt exportera i stället för att exportera hela biten.
Ursprungligen skapades skivor för webbdesigners, men som med de flesta Illustrators verktyg hittade den snabbt en ny användning: exporterande ikoner.
Det är ganska enkelt faktiskt. Låt oss först tänka på Artboard som en bit papper på vilken du lägger ner ditt konstverk. Nu när du skapar en "skiva" avgränsar du faktiskt ett segment av det papperet genom att skapa en utklipp som du sedan kan ta bort fritt från den större kompositionen.
Jag kan tänka mig att processen liknar den att ta en skärare och skära de spårade marginalerna i det segmentet, skilja den från pappersarket.
Med varje skapad skiva tilldelas Illustrator ett nummer, från början till vänster till höger längst ner till höger. Först kanske du inte bryr dig för mycket om den här åtgärden, men med tiden kommer du att uppskatta det, eftersom du får en bättre förståelse av vad som händer med ditt konstverk.
Om du aldrig har skapat en skiva tidigare, oroa dig inte eftersom det är ganska lätt att göra. Det finns tre sätt att skapa skivor som du bör vara medveten om:
Det här första alternativet är verkligen lätt att förstå, eftersom det låter dig skapa skivor runt gränserna för ett eller flera objekt.
Så, låt oss säga att vi har ett par ikoner, och vi vill skära ut den första.
För att göra det väljer vi ikonen och går sedan till Objekt> Skiva> Gör.
Detta skiljer omedelbart den ikonen från resten genom att skapa en avgränsande linje runt den.
Även om vi har skapat en skiva för en enda ikon har Illustrator delat de övriga delarna av Artboard i större skivor, en för varje sida av ikonens skiva. Vi har en stor en för toppsidan, en smalare för vänster sida, en ganska bred en till höger och en jämnare smalare för bottensidan.
Nu, om du tittar närmare på din Artboard kan du se att dessa skivor numreras, på ett ganska enkelt sätt, från det övre vänstra hörnet till den nedre högra. Illustrator tilldelar siffror till dess skivor för att låta dig välja vilken av de skivor du vill exportera, och vilken som inte. Jag ska prata mer om detta i exportprocessen.
Snabbtips: Som du kan se har den skapade segmentgränsen en rektangulär form, eftersom Illustrator skapar avgränsningen genom att titta på ikonens totala bredd och höjd och inte dens form. Det här är ganska förståeligt eftersom om du utformade en webbsida skulle det vara ganska svårt att bryta ner din komposition med hjälp av fler organiska linjer, och sedan sätta den samman igen perfekt.
Det finns ett par saker som du bör vara medveten om när du använder den här metoden. Om du öppnar Objekt> Skiva menyn ser du att du har Göra alternativ som vi tidigare använt och a Skapa från urval en några rader ner ner. Medan de två gör samma sak när du bara har ett objekt valt, uppför de sig helt annorlunda när du har valt flera objekt.
Den viktigaste skillnaden mellan de två är den med Göra Du kan skapa skivor runt vart och ett av de markerade objekten, medan du använder Skapa från urval alternativet kommer du att instruera Illustrator att skapa skivor runt den totala ytan av alla valda objekt.
Om du skulle skapa ett webbprojekt (webbsida), så skulle Skapa från urval alternativet skulle vara helt bra att använda, men om du skapar ett ikonpaket, vill du alltid gå med Göra eftersom du vill exportera var och en av dina ikoner individuellt.
Jämfört med föregående metod, den guider en är mer noggrann, eftersom processen kräver att du manuellt lägger till vertikala och horisontella guider till var sida om sektionen av det konstverk som du vill avgränsa.
Först måste du aktivera linjalerna genom att trycka på Control-R (högerklicka> Visa linjaler) och dra sedan dina guider och placera dem där du vill att snittlinjerna ska falla. När du har avgränsat ditt avsnitt med hjälp av guiderna kan du gå till Objekt> Skiva> Skapa från guider att skapa de faktiska skivorna.
Om du tittar på hur Illustrator lägger till siffror i skivorna ser du att när en sektion är avgränsad och tilldelad, kommer den att tvinga de andra att få tag i följande talvärde oavsett storlek de har. Det är också ganska intressant att se att skivorna skapas runt objektens avgränsade yta och inte skärningarnas skärningspunkt.
Den tredje metoden är förmodligen den "bästa hunden" när det gäller noggrannhet, eftersom det låter dig klicka och dra för att skapa ett 100% manuellt segment. För att vara ärlig kommer det att finnas situationer när du vill ha mer kontroll över dina skivor, men jag tycker inte att det är allt som är användbart när det gäller att skära ett stort ikonpaket eftersom det skulle ta lång tid att göra det.
Men, om du någonsin behöver använda den, borde du veta hur man gör det. Först måste du ta tag i Skär verktyg, som som standard ligger på vänster sidofält mot sin nedre del, strax ovanför Handverktyg. När du väl har valt verktyget kan du positionera dig själv över den sektion av ditt konstverk som du vill avgränsa och klicka sedan enkelt och dra för att skapa ett urval som automatiskt kommer att bli en skiva när du släpper musknappen.
Jämfört med ett regelbundet urval, är Skär verktyg låter dig hålla ner Rymden nyckeln för att flytta / omplacera ditt val, vilket är ganska användbart eftersom ibland kan det hända att du har startat på fel fot.
Nu är det häftigt med den här metoden att skivorna skapas direkt, utan att behöva gå över till Objekt> Skiva undermenyn för att Göra eller Skapa en skiva från en Urval.
Dess enda nackdel som jag kan tänka på är att du kanske inte har 100% noggrannhet tills du slår på Pixel Preview läge (Visa> Pixel Preview eller Alt-Control-Y), så att du kan skapa pixel-perfekta val, vilket för dagens designers är ett måste.
Så här har jag pratat om de tre olika metoderna som du kan använda för att skapa skivor. Nu är det dags att se vilken metod som är bäst när det gäller att exportera våra dyrbara lilla ikoner.
Låt oss börja med den första metoden. Som du påminner om beror du på att använda ett eller flera objekt för att skapa skivorna.
Låt oss nu säga att vi har samma lilla ikonpaket som tidigare, bara den här gången vill vi skära och exportera alla ikoner, inte bara en.
Tja, normalt skulle du bara välja alla tillgångar genom att trycka på Kontroll-A och sedan gå till Objekt> Skiva> Gör.
Då skulle du gå till Fil> Spara för webben, välja PNG som önskat format,ställa in din Exportera alternativ till Valda skivor och äntligen slog Spara.
Saken är att först du kanske tror att allt gick bra, men så snart du tittar på dina ikoner (mer exakt deras storlek) kanske du tycker att något gick fel.
Det beror på att även om du använde en anpassning Rutnät att storlekarna på dina ikoner, kan tillgångarna inte gå hela vägen när det gäller bredd och höjd, och eftersom du använde ikonerna som de valda objekten och inte själva gridarna, borde det inte vara en överraskning.
Tricket är att använda de faktiska rutorna istället för ikonerna och skapa skivorna runt dem. På så vis blir dina exporterade ikoner exakt som du vill ha dem.
Nu, till exempel, använder jag en 48 x 48 px rutnät, men jag har en allround 2 px fyllning tillsatt. För att inte nämna att mina ikoner är något kortare, med en höjd av bara 40 px. Det betyder att om jag skulle skapa skivorna med ikonen själva och sedan exportera dem, skulle mina ikoner vara lite mindre (44 x 40 px), sedan Illustrator använde Bredd och Höjd av mina tillgångar istället för mina nät48 x 48 px).
Med det sagt bör du alltid ha ett andra lager med bara dina nät och använda dem för att skapa skivorna för att korrekt exportera dina tillgångar.
Nu är det häftigt det när du skapar skivorna och går till Arkiv> Spara för webben, Illustrator ger dig möjlighet att manuellt välja eller ta bort vilka ikoner du exporterar. Så till exempel om jag bestämmer mig för att jag inte vill välja den sista ikonen, kan jag helt enkelt gå över den och vänster klicka en gång medan du håller nere Flytta, och sålunda ta bort den från min slutliga export.
Som standard om du väljer alla dina ikoner och sedan sparar dem, kommer Illustrator att behålla alla skivor som valts. Du kan se om en skiva väljs genom att titta på dess avgränsning. Om raden runt din tillgång är röd (allt utom den första ikonen) läggs ditt objekt till det slutliga valet. om det är blått och något blekat så är det inte (den första ikonen).
Du kan avmarkera delar av ditt ikonpaket genom att hålla ned Flytta nyckel och vänster klicka på dem. Du kanske undrar varför vi använder Flytta nyckel. Det beror på att eftersom Illustrator redan har alla valt, måste du hålla nyckeln trycker för att hålla resten av tillgångarna markerade, annars kommer du att sluta med bara en ikon aktiv.
För att vara ärlig ser jag inte varför du skulle, eftersom när du är klar med ditt paket är jag ganska säker på att du vill exportera alla tillgångar, inte bara några, men jag tyckte det var trevligt att peka på det ut.
Så fort du slår på Spara knappen, kommer Illustrator att be dig om en plats att lagra dina filer, vilket ger dig möjlighet att namnge dina tillgångar. Denna del är lite knepig eftersom namnet du tilldelar kommer att överföras till alla ikonerna, vilket är vad vi ville ha, men tillgångarna själva kommer att bära antalet skivor.
Du kan bara exportera filerna och sedan byta namn på dem, eller du kan göra det direkt inuti Spara för webben popup genom att dubbelklicka på varje ikonval och ge det önskade namnet.
Oavsett vilken metod du väljer, måste du fortfarande ta dig tid och gå igenom dem alla för att kunna namnge dem ordentligt.
För att vara ärlig tycker jag att det här alternativet är det bästa av de tre eftersom det är super-snabbt, och det exporterar bara dina ikoner, så inga tomma Artboard-skivor som måste raderas efteråt.
Precis som med föregående metod är det ganska enkelt. Först skapar du skivorna med hjälp av guiderna (Objekt> Skiva> Skapa från guider), och sedan går du till Arkiv> Spara för webben.
Här finns ett par saker som du bör vara medveten om. Om du lämnar Exportera alternativet inställt på Valda skivor Som vi gjorde för den första metoden kommer Illustrator att exportera dina ikoner, men det exporterar också de tomma skivorna mellan dem. Om du inte har en stor uppsättning, kan du bara avmarkera de här skivorna, men om du har något större, kan det visa sig vara en väldigt smärtsam process.
Å andra sidan kan du bara exportera ikonerna och sedan radera de oönskade skivorna, men igen kan det ta lite tid.
Om du nu tar hänsyn till att du manuellt måste lägga till guiderna på varje sida av dina ikoner är det ganska uppenbart att den första metoden är mer lämplig eftersom det är problemfritt och mycket snabbare.
Om du trodde att Guides-metoden var långsam och smärtsam, så kommer den här att sätta den sista spiken i kistan, eftersom det kommer att ta dig tid att avsluta.
Nu vet du förmodligen att du manuellt måste skapa skivorna för var och en av dina ikoner och gå direkt till Arkiv> Spara för webben.
Här kommer du bli frestad att använda Valda skivor exportera alternativ, men i jämförelse med de andra två metoderna exporteras det bara den sista skivan från din Artboard. Det betyder att du måste använda Alla skivor alternativ, vilket givetvis kommer att exportera alla skivor om de är fyllda med ikoner eller bara tomt utrymme.
Slutligen måste du gå igenom hela mappen och radera alla onödiga ikoner och byta namn på dem som du behöver.
Så rekommenderar jag den här metoden alls? Nej. Varför nämnde jag det ens? Tja, jag gillar att vara så tydlig som möjligt när du pratar om sådana verktyg och metoder.
Så jag hoppas verkligen att du vet vilka skivor som är, och ännu viktigare hur de görs, så att du kan dra nytta av det här verktyget och göra processen att exportera dina ikoner snabbt och smärtfritt.
Nu brukar jag oftast lämna beslutet som gör dig, men den här gången måste jag vara grov och berätta att du går med den första metoden, objektet, eftersom det är ganska uppenbart att det är den enda bra jobbat.
Med detta sagt vill jag tacka för din tid och uppmärksamhet, och som alltid ska jag prata med dig nästa gång.
Accentsconagua