Hva er nytt for webdesignere i Illustrator CC
Den 6. mai annonserte Adobe sine nyeste oppdateringer til sin kreative programvare. Noen av disse oppdateringene har store implikasjoner på hvordan brukerne jobber med verktøyene sine. I denne artikkelen vil jeg gjerne vurdere hva Adobe har endret i Illustrator og spesifikt hvordan det påvirker webdesignere.
Selvfølgelig finnes det flere nye funksjoner, som AutoCAD-biblioteker, hvitt overtrykk, fyll og strekk proxy-bytte for tekst, automatisk hjørnegenerering, indikert støtte, pakkefiler, ubemerkede bilder, flere filer, berøringsverktøy, gratis transformeringsverktøy og bilder i børster. Hvis du er en Illustrator-junkie, er dette alle verdifulle funksjoner, men det jeg vil fokusere spesielt på, er kjernevennlige forbedringer som vil hjelpe alle som skaper kunstverk for levering på skjermen.
HiDPI-støtte
Med fremkomsten av høyoppløselige skjermer (som Macbook Pro med Retina-skjermbildet), så Illustrator CS6 og tidligere sløret. Illustrasjoner og ikoner så pikselert og tekst så anti-aliased. Illustratorens egenart gir skarp, rik kunstverk, så denne erfaringen var mindre enn ønskelig. Heldigvis har Adobe forbedret Illustrator CC for å utnytte disse høyoppløselige skjermene. Illustrasjonen vil se bedre ut, teksten vil se skarp ut, UI-elementer (ikoner, markører osv.) Vil se jevnere ut. De har også gjort noen forbedringer i gjengivelsesprosessen også. Det drar nå fordel av multi-core maskiner og bruker gjenget gjengivelse for å gjengi kunstverk. Du bør se noen forbedringer i oppgaver som zooming, panorering, kopiering lime, dra og slipp, etc.
Guider forbedringer
Guider er mye brukt når du planlegger og legger ut sider. Å lage mock-ups i Illustrator ved hjelp av guider lar deg plassere innhold på en presis måte. I Illustrator CC er det fire forbedringer som veileder:
- Dobbeltklikk på en linjal oppretter en guide på det bestemte stedet på linjalen.
- Når du holder Shift og deretter dobbeltklikker et bestemt sted på en linjal, klikker guiden som er opprettet ved punktet automatisk til nærmeste merke (divisjon) på linjalen.
- Hvis du skjuler guider (Ctrl / Cmd +;) og deretter velger å vise dem, blir støttelinjene ikke automatisk låst som de gjorde i tidligere versjoner.
- Lag horisontale og vertikale guider i en handling. Slik gjør du: i øverste venstre hjørne av Illustrator-vinduet klikker du krysset mellom linjalene og trykker på Ctrl (eller Cmd på en Mac), og drar musepekeren til et hvilket som helst sted i Illustrator-vinduet. musepekeren blir krysshår for å indikere hvor en horisontal og vertikal guide kan opprettes; slipp musepekeren til å lage veiledningene.
Skriftsøkforbedringer
Det typiske forutgående søket søker bare i det første ordet i skrifttypenavnet, som vanligvis ikke gir de beste resultatene umiddelbart. Det kan også være vanskelig å søke og bla gjennom et stort antall skrifter. Et nytt søkefunksjonsalternativ "Søk hele skriftnavn" er lagt til i kontroll- og tegnpanelene. I tillegg ble TypeKit-integrasjon for skrivebordsskrifter nylig annonsert ved MAX. Dette betyr at du enkelt kan designe mock-ups med de samme skriftene du har tenkt å bruke på nettet.
Fargesøkforbedringer
Å finne en bestemt farge fra en rekke tallrike farger kan være tidkrevende og frustrerende. I Illustrator CC er det gjort endringer for å gjøre oppgaven med å søke og finne en farge mye enklere. Dialogboksen Fargeplukker (dobbeltklikk på Fyll proxy på verktøylinjen) har nå en søkemodul i vinduet Fargeprøver. Når du klikker Fargeprøver, vises en søkefelt under den forhåndsdefinerte listen over farger. Skriv inn navnet på en farge eller en RGB-verdi (eller CMYK for utskrift). Hvis du skriver 'blå', vises alle fargestifter med ordet blå i navnet. Når du skriver R = 77, vises alle fargestifter med rød farge med en verdi på 77 i RGB-skalaen. Søke-widgeten er aktivert som standard.
Søkealternativet i fargepanelet har også blitt forbedret. Feltet håndhever ikke en automatisk fullført. Tegnene du skriver, blir ikke lenger automatisk erstattet med den nærmeste fargekampen som ble funnet. Du kan skrive inn et navn på en farge, eller bare skrive inn verdiene for RGB-farge (eller CMYK for utskrift) for å søke om det finnes en slik fargekombinasjon. Finn feltet er ikke aktivert som standard, og må aktiveres for første gang fra panelets undermeny.
Det er også verdt å merke seg at Kuler har blitt bakt inn i Illustrator. Så hvis du bruker denne Adobe-tjenesten til å lage farge temaer og grupper, kan du enkelt få tilgang til dette innholdet direkte inne i Illustrator CC.
CSS egenskaper panel
Selvfølgelig er den største funksjonen for nettet forbedringene til CSS og SVG-arbeidsflyter. Nå, hvis du er en hardcore Illustrator-bruker, kan du ha brukt noe i CS5 kalt HTML5-pakken, som var tilgjengelig fra AdobeLabs. Uansett grunnen til at den aldri ble vist i CS6, har mange av disse funksjonene returnert med denne CC-oppdateringen. Disse funksjonene minner om hva som allerede er gjort tilgjengelig for Photoshop CS6 gjennom Creative Cloud-oppdateringer og funksjoner som finnes i Fireworks CS6.
CSS-egenskapspanelet er hvordan du fjerner CSS fra Illustrator-dokumentet, og det gir flere måter å gjøre det på. Nøkkeltrinnet i å gjøre alt dette arbeidet er imidlertid ved å navngi lagene dine i lagpanelet. Sikkert Illustrator kan generere CSS uten at objektet har et navn i lagpanelet, men du åpner deg selv opp til en uorganisert og potensielt sløv måte å generere kode på. Dette er i hovedsak hvordan Illustrator vil navngi klassens regler det skaper for deg. CSS som genereres, kan ha nettleserprefikser for Webkit, Firefox, Opera og Internet Explorer. Det kan fange CSS-støttede fremtoninger som gradienter og avrundede hjørner.
Du kan styre hvordan CSS genereres ved å åpne dialogboksen CSS Exporteringsalternativer. Du kan få tilgang til dialogboksen ved å klikke på CSS Export Options-knappen, som er den første av fire knapper nederst til høyre på panelet. Panelet gir flere funksjoner for CSS-arbeidsflyter:
- Se CSS for en valgt objekt
- Kopier CSS-kode for et valgt objekt
- Eksporter valgte objekt til en CSS-fil sammen med bilder som brukes i CSS
- Eksporter CSS-kode for alle objekter i dokumentet til en CSS-fil
I tillegg kan du eksportere CSS-koden for alle objektene i dokumentet ved å gå til Fil-menyen og velge Eksporter. Det åpner en dialogboks, og derfra kan du velge CSS fra formatmenyen.
Hvis du har et objekt, velger du det, og sørg for at det heter riktig i Lagpanelet. Med den valgte vil du se CSS som trengs for å generere kunstverket i en nettleser i CSS Properties Panel.
SVG-kode
I tidligere versjoner av Illustrator må du lagre et dokument som SVG. Her i CC-oppdateringen har du muligheten til å kopiere noe i dokumentet, så gå til din favoritt HTML-editor og bare utføre en lim; Alle SVG-kodene blir plassert i dokumentet. Det er en overraskende fin arbeidsflyt. Hvis det ikke kutter det for deg, er den mer tradisjonelle metoden for å lagre dokumentet som en SVG fortsatt tilgjengelig.
I tillegg har Adobe lagt til støtte for eksport av ubrukte stiler. Når du designer, vil du ofte lage flere grafiske stiler mens du oppretter kunstverk. Du kan ikke bruke alle tilgjengelige stiler. Når du eksporterer kunstverk i SVG-format, blir ikke ubrukte stiler eksportert. I den eksporterte CSS-koden har grafiske stiler heller ikke navn knyttet til dem, og det kan være vanskelig å identifisere riktig grafisk stil.
Illustrator CC tilbyr to funksjoner som er lagt til for å forbedre opplevelsen av å jobbe med stilarter i SVG-format som adresserer disse problemene:
- Grafisk stilnavn. Når du velger å eksportere grafiske stiler, eksporteres navnet på hver stil med definisjonen av stilen i CSS-nomenklaturen.
- Eksporter ubrukte stiler. Når du eksporterer kunstverk i SVG-format, kan du nå velge å eksportere ubrukte stiler. Dette tillater en annen designer eller utvikler som importerer stilene til å bruke ubrukte grafikkstiler i andre kunstverk.
Slik bruker du den
Dette er absolutt ikke et verktøy for å kode komplette nettsider. Hva jeg ser bruker Illustrator til å lage mock-ups, og deretter kodes strukturen i HTML og layoutkoden i CSS. Når det er behov for en dråpeskygge, gradient, mønster eller logo, vil det være veldig praktisk å bruke disse nye CSS-ekstraksjonene og SVG-alternativene.
Hvis du er interessert i å lære mer om de nye funksjonene i Illustrator CC, gå til Illustrators produktside.
Er du en Illustrator aficionado? Hvilke funksjoner i Illustrator CC er du mest spent på? Gi oss beskjed i kommentarene.