Share
Under årens lopp har jag utvecklat några metoder och tricks för att förbättra min produktivitet och arbetskonsistens. Denna handledning kommer att omfatta hur man tar emot modulärt tänkande i ditt arbetsflöde när du bygger flexibla och lätta användargränssnitt med Adobe Illustrator CS5 (eller högre) tillsammans med några lediga resurser. Låt oss börja.
Gridcalculator.dk erbjuder de alternativ du behöver för att enkelt skapa ett flexibelt nät. Detta kan spara tid på experiment och beräkningar.
Galler bör separeras från objekt så att du kan växla sin synlighet självständigt och återanvända dem när du utformar flera sidor eller skärmar.
Placera dina guider som de översta lagren i ditt dokument, framför allt ditt innehåll.
Om ditt rutnät har flera kolumner är det bäst att separera dem i oberoende lager eller det kan bli för trångt. Vissa sidor kan behöva fyra kolumner andra kanske bara behöver två. Detta gör att du kan hantera nätets synlighet enligt dina behov.
Att använda en helt skalbar webbläsare kommer att vara till hjälp för att exportera högupplösta bilder och bygga lyhörda mönster.
Placera din webbläsare under alla dina innehållsskikt.
Notera: I bilagorna till denna handledning kan du ladda ner mitt lyhörda Illustrator-inställning som innehåller vektorversioner av både Chrome-skrivbordet och Safari-mobilen.
Anpassa arbetsytor (Fönster> Arbetsyta) för att passa dina personliga eller projektbehov är avgörande för ditt arbetsflöde. Jag vet vilka verktyg jag brukar oftast, så att stänga / öppna paneler, och flytta fönster runt, är tråkigt och oproduktivt. Jag arbetar för närvarande med tre arbetsytor beroende på skärmstorlek:
Att använda Workspaces är verkligen snyggt: Jag kan enkelt återställa gränssnittet till mina standardinställningar genom att klicka Återställ (namnet på ditt Artboard).
När du skapar ett nytt dokument, lämna Justera nya objekt till pixelnätet okontrollerat. Ja, ej markerad.
Om du kontrollerar det här alternativet kommer vissa användargränssnitt, som skisserad (utökad) text, att snedvrängas och du kommer inte att kunna dra några former fritt när dina punkter ständigt snappar till pixelnätet.
Du bör välja vilka objekt som behöver anpassas till pixel genom att välja Rikta mot Pixel Grid alternativ från Omvandla panel.
Notera: När du ansöker Rikta mot Pixel Grid till ett objekt kan du inte återställa det valda objektet till det ursprungliga "oanpassade" tillståndet. Avmarkera den rutan kommer inte att spara dig.
När du zoomar på ditt konstverk över 100% kan du faktiskt se pixlarna som om du arbetar med en bitmapbild. Aktivera det genom att gå till Visa> Pixel Preview. Detta gör att du kan upptäcka vilka pixlar som kan orsaka fuzzy kanter så att du kan fixa dem på flugan.
Notera: Pixelnätet är känsligt för linjalets ursprung (0,0). Flyttning av linjalen kommer att ändra hur Illustrator "rasteriserar" konstverk. Se också till att objektets X- och Y-koordinater är avrundade.
Illustratorn har viss grundläggande matematisk funktionalitet för att justera objekt inom paneler och dialoger. Detta är användbart när du vill lägga till (+), subtrahera (-), dela (/) eller multiplicera (*) värden. Dessa operationer kan användas i objekt, streck, genomskinlighet och i många andra saker.
Tyvärr kan du bara göra en operation i taget. Något som "260/3 * 2" är inte möjligt.
Vanligtvis används samma användargränssnittskomponent om och om igen, bara ändra storlek och färg. Tänk modulär, planera fram och bygga icke-destruktiva komponenter som lätt kan återvinnas. Undvik att kontrollera varje skärm för att se om du har glömt att uppdatera ett element. Symboler kan vara väldigt mäktiga när de är bra men ute.
När du ändrar den ursprungliga symbolen, blir ändringarna omedelbart återspeglad i alla fall som finns i ditt dokument. Detta är särskilt användbart för återkommande regioner, till exempel knappar, sidfot, paginationselement, navigering, bakgrunder, etc..
Du kan även använda symboler inom symboler ("combos"). Detta sparar tid och säkerställer konsistens i hela användargränssnittet.
9-skivans skalning är ett avancerat symbolalternativ som gör att du kan definiera vilka områden av en symbol som inte kommer att sträckas medan du ändrar storlek.
Om du ändrar bredden på en symbol utan att använda den här funktionen kommer du att få deformerade former. Detta kan vara speciellt användbart för knappar när du bara behöver ett segment av en symbol som ska sträckas.
Notera: Du kan när som helst aktivera 9-skalning i en symbol. Men för bättre resultat, se till att du kontrollerar alternativet 9-skala när du skapar symbolen för första gången.
Utseende attribut påverkar inte den underliggande strukturen för ett objekt eller en grupp av objekt. Det är ganska användbart att använda effekter som rundade hörn eller staplar färgfyllningar som kan ändras eller tas bort hela tiden.
Det finns ett sätt att skapa knappar som anpassar sig till din textlängd. Detta är hur:
Spela runt med det. Du kan spara det som en Grafisk stil för framtida användning.
Notera: Detta rekommenderas endast för trådinramning eftersom pixeljustering är svår med denna metod.
Detta är en av de mest underrated funktionerna, men det är mycket kraftfullt. Varje gång du ändrar en global färg uppdateras alla objekt som använder den swatchen. Du kan direkt finjustera dussintals objekt.
Färggrupper är en stor tidsbesparare när man arbetar med stora färgscheman eller flera märken samtidigt. Att ge dem tydliga namn gör det enkelt för personer att söka och arbeta från samma fil.
Om du är villig att experimentera kan du ladda ner paletter och färgscheman från källor som Kuler och Colourlovers. Leka också med Recolor konstverk hjul för att prova olika färgteman: Redigera> Redigera färger> Recolor Artwork.
Teckenstorleken kan tillämpas på vilken mängd text som helst: från stora bitar till enskilda ord. De är mer flexibla och trumpa styckeformat. Eftersom vi inte gör utskriftsarbete, använder du bara teckenformat för att säkerställa att din typografi är konsekvent.
Du bör beställa din karaktärsstilar lista efter storlek: från större till mindre text, genom layoutordning: från topp till botten eller alfabetiskt. Det här hjälper dig att behålla en bättre hierarki och enkelt söka igenom din lista.
Finjustera och använd dina stilar så mycket som möjligt för att undvika att skapa alltför många undantag. Detta kommer att förenkla utvecklingen och förbättra konsistensen.
Varje text utan sammanhang eller relevans för ämnet är värdelös. Inte abstrakta dig från den verkliga upplevelsen. "Lorem ipsum" ger dig en form, men det ger dig inte mening. Skriva din egen kopia för rubriker eller navigering hjälper till att förklara deras användning och den värdefulla informationen de kan ge. Om din webbplats eller program kräver dataingång anger du reella och relevanta ord. Skriv ett riktigt namn eller en stad.
När du använder riktig text upptäcker du problem som annars annars skulle bli obemärkt: kolumnerna är för breda / smala, fälten måste vara större / mindre, vissa saker fungerar på ett språk men fungerar inte på andra osv..
Att använda representativa data är en bra uppgift för vad slutprodukten kommer att bli.
Med Illustrator är du inte begränsad till en specifik upplösning. I ett enda dokument och med hjälp av teckensnitt kan du simulera hur ett användargränssnitt ska svara på olika skärmupplösningar och redigera dem samtidigt med hjälp av globala färger, symboler och teckenformat. Även med dussin olika skärmar kommer filen att vara liten och lätt att hantera.
Namn varje Artboard enligt enhet / skärmstorlek. Detta namn kommer automatiskt att namnge dessa skärmar vid lagring. Jag delar några sparnings- och namngivningstips vidare i handledningen.
Notera: I bilagorna till den här handledningen kan du ladda ner den responsiva illustratörsinstallationen som ses ovan.
Detta låter dig se hur en enskild sida ser ut i varje skärmstorlek och exporterar alla lager (sidor) från en välj Artboard (skärmstorlek) självständigt.
Rengöring är verkligen viktigt för att hålla dina filer i god form och påskynda prestanda. För att uppnå det, använd Illustrators inbyggda alternativ.
Windows> Åtgärder> Ta bort oanvända panelföremål
Den här åtgärden går automatiskt igenom varje panel, väljer innehållet som inte används och tar bort dem på några sekunder.
Denna standardåtgärd omfattar inte att städa upp oanvända teckenformat. Du kan lägga till det steget eller du kan manuellt Välj alla oanvända, sedan skräp dem.
Om du vill bli av med omedelbara punkter, ommålade föremål och tomma textvägar, så är det här:
När du använder lager, dölja alla grupper eller objekt i Layoutpanelalternativ. Så här ska det se ut:
Namn varje lager med ett sidnamn. Ange nummer till varje lager namn för att hålla dem beställda när de exporteras. Använda kepsar och icke-avståndsnamn gör det ibland lätt att läsa.
De 59 lager / sidor vikt bara 2,5mb (inga bilder inbäddade), vilket möjliggör hög prestanda och mycket snabba spara tider.
Om du vill inkludera stilguider för utveckling i dina filer borde du skapa ett "underlag" som är associerat med varje sida / lager. Så här gör du det:
Accentsconagua
STIL GUIDE Dessa guider kommer att ligga på toppen av ditt innehåll och eftersom de är placerade i ett "underlag", kan du enkelt hantera deras synlighet.
När du placerar bitmappsbilder, bädda inte in dem i din fil. Välja Länk istället.
Detta minskar din filstorlek, förbättrar illustratorns prestanda och ger möjlighet att redigera bilderna separat. Illustrator upptäcker automatiskt när en fil uppdateras.
Om du följer alla steg ovan måste dina filer vara lätta. Även om du kontrollerar Skapa PDF-kompatibel fil medan du sparar, kommer detta att uppblåsa din filstorlek och öka sparar tiden. Eftersom vi bara handlar om skärmgrafik med flera lager och tavlor, är det ingen verklig fördel att lämna den här rutan.
För bättre kontroll över exportalternativen hämta detta Multi Export-skript. Att använda det är ganska enkelt, men ta en titt på dokumentationen så att du kan dra full nytta av det.
Enhetsstorlek / upplösningsfragmentering gör att exporterande mobiltillgångar kräver mycket tid. Jo, skript kan också hjälpa till med det. Ladda ner detta Illustrator-skript för mobil design.
Mobila tillgångar krävde specifik filnamn beroende på operativsystemet. För att följa deras namngivningskonventioner är det lättare att skapa separerade Illustrator-filer för varje OS. Om några tillgångar är gemensamma för plattformarna du jobbar med, skapa en fil med namnet "vanligt" eller vad som passar dig.
I webb- och mobilmiljöer är prestanda viktig och varje byte räknas. Illustratorn saknar PNG / JPG-optimering, så använd ImageOptim (Mac OS X) efter att ha exporterat ditt innehåll.
Vi är på väg mot en lyhörd och smidig webb, där våra användargränssnitt behöver vara immun mot pixeldensitet och konsekvent i många olika storlekar. Oändlig skalbarhet är ovärderlig, och vektorer är en viktig del av upplösningsoberoende.
Illustrators modulära arbetsflöde står upp mot skala och tid och det är ett solidt alternativ ur produktivitets- och flexibilitetssynpunkt. Jag håller fast vid det. Hur är det med dig?
