Vad är nytt för webbdesigners i Illustrator CC
Den 6 maj meddelade Adobe sina senaste uppdateringar av sin kreativa programvara. Några av dessa uppdateringar har stora konsekvenser för hur användarna arbetar med sina verktyg. I den här artikeln skulle jag vilja granska vad Adobe har ändrats i Illustrator och specifikt hur det påverkar webbdesigners.
Självklart finns det flera nya funktioner, som AutoCAD-bibliotek, white overprint, fill-och stroke-proxy-byte för text, automatisk hörngenerering, indikerat stöd, paketfiler, obehandlade bilder, flera filer, touch-verktyg, gratis transformverktyg och bilder i borstar. Om du är en Illustrator-skräp, är det alla värda funktioner, men det jag vill fokusera specifikt på är kärnan förbättringar som hjälper alla att skapa konstverk för leverans på skärmen.
HiDPI stöd
Med uppkomsten av högupplösta bildskärmar (som Macbook Pro med retina-displayen) såg Illustrator CS6 och tidigare blur ut. Konstverk och ikoner såg pixelerade och text såg anti-aliased. Illustrators karaktär är skarp rikt konstverk, så denna erfarenhet var mindre än önskvärt. Tack och lov har Adobe förbättrat Illustrator CC för att dra nytta av dessa högupplösta skärmar. Konstverket kommer att se bättre ut, texten kommer att se skarp ut, UI-element (ikoner, markörer osv) kommer att se bättre ut. De gjorde också några förbättringar av rendering processen också. Det utnyttjar nu flera kärnmaskiner och använder gängad rendering för att ge konstverk. Du bör se några förbättringar i uppgifter som zoomning, panorering, kopiering klistra in, dra och släpp, etc.
Guider förbättringar
Guider används ofta när du planerar och lägger ut sidor. Skapa mock-ups i Illustrator med hjälp av guider gör att du kan placera innehåll på ett exakt sätt. I Illustrator CC finns det fyra förbättringar som vägleder:
- Dubbelklicka på en linjal skapar en guide på den specifika platsen på linjalen.
- När du håller Shift och dubbelklickar du på en viss plats på en linjal, styrs guiden som skapats vid punkten automatiskt till det närmaste märket (division) på linjalen.
- Om du döljer guider (Ctrl / Cmd +;) och sedan väljer att visa dem, blir guiderna inte automatiskt låsta som de gjorde i tidigare versioner.
- Skapa horisontella och vertikala guider i en åtgärd. Så här: Klicka på skärmpunkten för linjalerna längst upp till vänster i Illustrator-fönstret och tryck på Ctrl (eller Cmd på en Mac) och dra muspekaren till vilken plats som helst i Illustrator-fönstret. muspekaren blir korshår för att indikera var en horisontell och vertikal guide kan skapas; släpp muspekaren för att skapa guiderna.
Förbättringar av teckensök
Den typiska sökningen söker bara på det första ordet i typsnittet, vilket generellt inte ger de bästa resultaten omedelbart. Det kan också vara svårt att söka och surfa på ett stort antal teckensnitt. Ett nytt sökfunktionsalternativ "Sök hela teckensnamn" har lagts till i kontroll- och teckenfälten. Dessutom har TypeKit-integration för skrivbordsskrifter meddelats nyligen vid MAX. Det innebär att du enkelt kan designa mock-ups med samma teckensnitt som du tänker använda på webben.
Färgsökningsförbättringar
Att hitta en viss färg från en rad olika färger kan vara tidskrävande och frustrerande. I Illustrator CC har ändringar gjorts för att göra uppgiften att söka och hitta en färg mycket enklare. Dialogrutan Färgplockare (dubbelklicka på Fyll proxy i verktygsfältet) har nu en sök widget i fönstret Färgfärger. När du klickar på Färgfärger visas en sökfält under den fördefinierade listan med färger. Skriv namnet på en färg eller ett RGB-värde (eller CMYK för utskrift). Om du skriver "blå", visas alla färgstämplar med ordet blått i deras namn. Att skriva R = 77 kommer att visa alla färgstickor som har röd färg med ett värde på 77 i RGB-skalan. Sök widgeten är som standard aktiverad.
Sökalternativet i fönstret Färger har också förbättrats. Fältet verkställer inte en automatisk slutförd. De tecken du skriver inte längre automatiskt ersätts med den närmsta färgkampen som hittades. Du kan skriva ett namn på en färg eller helt enkelt skriva in värdena RGB-färg (eller CMYK för utskrift) för att söka om en sådan färgkombination existerar. Sökfältet är inte aktiverat som standard och måste aktiveras för första gången från panelens undermeny.
Det är också värt att notera att Kuler har blivit bakad i Illustrator. Så om du använder denna Adobe-tjänst för att skapa färgteman och grupper, kan du enkelt komma åt det här innehållet direkt inuti Illustrator CC.
CSS egenskaper panel
Naturligtvis är den största funktionen för webben förbättringarna av CSS och SVG-arbetsflöden. Nu om du är en hardcore Illustrator-användare kan du ha använt något i CS5 kallat HTML5-paketet, som var tillgängligt från AdobeLabs. Oavsett anledning sågs det aldrig i CS6 men många av dessa funktioner har återvänt med denna CC-uppdatering. Dessa funktioner påminner om vad som redan har gjorts tillgängligt för Photoshop CS6 via Creative Cloud-uppdateringar och funktioner som finns i Fireworks CS6.
CSS-egenskapspanelen är hur du tar ut CSS från Illustrator-dokumentet, och det ger flera sätt att göra det. Det viktigaste steget i att göra allt detta arbete är dock att namnge dina lager i lagerpanelen. Visst Illustrator kan generera CSS utan att objektet har ett namn i lagpanelen, men du öppnar dig själv till ett oorganiserat och potentiellt slarvigt sätt att generera kod. Det här är i huvudsak hur Illustrator kommer att namnge klassreglerna som skapas för dig. Den CSS som genereras kan ha webbläsarprefix för Webkit, Firefox, Opera och Internet Explorer. Det kan fånga CSS-stödja utseenden som gradienter och avrundade hörn.
Du kan styra hur CSS genereras genom att öppna dialogrutan CSS Exporteringsalternativ. Du kan komma åt dialogrutan genom att klicka på CSS Export Options-knappen, vilken är den första av fyra knappar längst ner till höger om panelen. Panelen innehåller flera funktioner för CSS-arbetsflöden:
- Visa CSS för ett valt objekt
- Kopiera CSS-kod för ett valt objekt
- Exportera valt objekt till en CSS-fil tillsammans med bilder som används i CSS
- Exportera CSS-kod för alla objekt i dokumentet till en CSS-fil
Dessutom kan du exportera CSS-koden för alla objekt i dokumentet genom att gå till Arkiv-menyn och välja Exportera. Det öppnar en dialogruta, och därifrån kan du välja CSS från formatmenyn.
Om du har ett objekt markerar du det och ser till att det heter korrekt i panelen Lager. Med det valda ser du CSS som behövs för att skapa konstverket i en webbläsare i CSS Properties Panel.
SVG-kod
I tidigare versioner av Illustrator måste du spara ett dokument som SVG. Här i CC-uppdateringen har du möjlighet att kopiera något i dokumentet, gå till din favorit HTML-editor och enkelt utföra en klistra in. Alla SVG-koder kommer att placeras i dokumentet. Det är ett överraskande trevligt arbetsflöde. Om det inte klipper det för dig, är den mer traditionella metoden att spara dokumentet som en SVG fortfarande tillgänglig.
Dessutom har Adobe lagt till stöd för att exportera oanvända format. När du utformar, skapar du ofta flera grafiska stilar samtidigt som du skapar konstverk. Du får inte använda alla tillgängliga stilar. När du exporterar konstverk i SVG-format exporteras oanvända format inte. I den exporterade CSS-koden har grafiska format inte namnen associerade med dem och det kan vara svårt att identifiera rätt grafisk stil.
Illustrator CC erbjuder två funktioner som har lagts till för att förbättra erfarenheten av att arbeta med stilar i SVG-format som hanterar dessa problem:
- Grafiskt stilnamn. När du väljer att exportera grafiska format exporteras namnet på varje stil med definitionen av stilen i CSS-nomenklaturen.
- Exportera oanvända stilar. När du exporterar konstverk i SVG-format kan du nu välja att exportera oanvända format. Detta tillåter en annan formgivare eller utvecklare som importerar stilar för att använda de oanvända grafikstilarna i andra konstverk.
Hur du använder den
Det här är verkligen inte ett verktyg för att koda fullständiga webbsidor. Vad jag ser använder Illustrator för att skapa mock-ups, sedan hand kod strukturen i HTML och layoutkoden i CSS. När en droppskugga, gradient, mönster eller logotyp behövs, använder den här nya CSS-extraktionen och SVG-alternativen kommer att vara mycket praktiska och vara en stor tidsbesparare.
Om du är intresserad av att lära dig mer om de nya funktionerna i Illustrator CC, besök Illustrators produktsida.
Är du en Illustrator aficionado? Vilka funktioner i Illustrator CC är du mest glada över? Låt oss veta i kommentarerna.