Wat is er nieuw voor webontwerpers in Illustrator CC
Op 6 mei heeft Adobe de nieuwste updates voor zijn creatieve software aangekondigd. Sommige van deze updates hebben grote gevolgen voor de manier waarop gebruikers met hun hulpmiddelen werken. In dit artikel wil ik graag bekijken wat Adobe in Illustrator heeft gewijzigd en in het bijzonder hoe het webontwerpers beïnvloedt.
Natuurlijk zijn er een aantal nieuwe functies, zoals AutoCAD-bibliotheken, witte overdruk, fill en stroke proxy swap voor tekst, automatische hoekgeneratie, indic-ondersteuning, pakketbestanden, niet-bijgevoegde afbeeldingen, meerdere bestandslocaties, aanraaktype-tools, gratis transformatiehulpmiddelen en afbeeldingen in penselen. Als je een Illustrator-junkie bent, zijn dit allemaal waardevolle functies, maar waar ik me specifiek op wil richten, zijn de belangrijkste verbeteringen die iedereen helpen bij het maken van illustraties voor de levering op het scherm.
HiDPI-ondersteuning
Met de opkomst van displays met hoge resolutie (zoals de Macbook Pro met Retina-display), zagen Illustrator CS6 en eerder er wazig uit. Illustraties en pictogrammen zagen er korrelig uit en de tekst leek anti-aliased. De aard van Illustrator is dat het rijke, rijke kunstwerken oplevert, dus deze ervaring was minder dan wenselijk. Gelukkig heeft Adobe Illustrator CC verbeterd om te profiteren van deze hoge resolutiedisplays. Het artwork ziet er beter uit, de tekst ziet er strak uit, UI-elementen (pictogrammen, cursors, enz.) Zien er vloeiender uit. Ze hebben ook enkele verbeteringen aan het weergaveproces aangebracht. Het maakt nu gebruik van multi-coreapparaten en maakt gebruik van threaded rendering om kunstwerken weer te geven. U zou wat verbetering in taken moeten zien zoals zoomen, pannen, kopiëren, slepen en neerzetten, enz.
Gidsenuitbreidingen
Gidsen worden veel gebruikt bij het plannen en indelen van pagina's. Door mock-ups in Illustrator te maken met behulp van handleidingen, kunt u inhoud op een nauwkeurige manier plaatsen. In Illustrator CC zijn er vier verbeteringen aan hulplijnen:
- Dubbelklikken op een liniaal maakt een gids op die specifieke locatie op de liniaal.
- Wanneer u Shift ingedrukt houdt en vervolgens dubbelklikt op een specifieke locatie op een liniaal, springt de gids die op het punt is gemaakt automatisch naar het dichtstbijzijnde teken (divisie) op de liniaal.
- Als u hulplijnen (Ctrl / Cmd +;) verbergt en vervolgens kiest om ze weer te geven, worden de hulplijnen niet automatisch vergrendeld zoals in eerdere versies.
- Maak horizontale en verticale hulplijnen in één actie. Zo ziet u het volgende: klik in de linkerbovenhoek van het Illustrator-venster op de kruising van de linialen en druk op Ctrl (of Cmd op een Mac) en sleep de muisaanwijzer naar een willekeurige locatie in het Illustrator-venster; de muisaanwijzer wordt een kruishaar om aan te geven waar een horizontale en verticale gids kan worden gemaakt; laat de muisaanwijzer los om de hulplijnen te maken.
Verbetering van lettertypen
Het typerende type-vooruit zoeken doorzoekt alleen het eerste woord in de naam van het lettertype, wat over het algemeen niet meteen de beste resultaten oplevert. Ook kan zoeken en bladeren door een groot aantal lettertypen moeilijk zijn. Een nieuwe zoekfunctieoptie "Volledige lettertype zoeken" is toegevoegd aan de besturings- en tekenpanelen. Bovendien is onlangs bij MAX de integratie van TypeKit voor desktoplettertypen aangekondigd. Dit betekent dat u eenvoudig mock-ups kunt ontwerpen met dezelfde lettertypen die u op internet wilt gebruiken.
Verbeterde kleuren
Het vinden van een bepaalde kleur uit een reeks van verschillende kleuren kan tijdrovend en frustrerend zijn. In Illustrator CC zijn wijzigingen aangebracht om het zoeken en vinden van een kleur veel gemakkelijker te maken. Het dialoogvenster Kleurkiezer (dubbelklik op de proxy voor vulling in de werkbalk) heeft nu een zoekwidget in het venster Kleurstalen. Wanneer u op Kleurstalen klikt, verschijnt een zoekbalk onder de vooraf gedefinieerde lijst met kleuren. Typ de naam van een kleur of een RGB-waarde (of CMYK voor afdrukken). Als u 'blauw' typt, worden alle kleurstalen weergegeven met het woord blauw in hun naam. Als u R = 77 typt, worden alle kleurstalen weergegeven die een rode kleur hebben met een waarde van 77 in de RGB-schaal. De zoekwidget is standaard ingeschakeld.
De zoekoptie in het deelvenster Stalen is ook verbeterd. Het veld dwingt een automatisch aanvullen niet af. De tekens die u typt, worden niet langer automatisch vervangen door de gevonden meest overeenkomende kleurovereenkomst. U kunt een naam van een kleur typen of gewoon de RGB-kleur (of CMYK voor afdrukken) -waarden invoeren om te zoeken als een dergelijke kleurencombinatie bestaat. Het zoekveld is standaard niet ingeschakeld en moet voor de eerste keer worden ingeschakeld via het submenu van het paneel.
Het is ook vermeldenswaard dat Kuler is ingebakken in Illustrator. Dus als u deze Adobe-service gebruikt om kleurenthema's en -groepen te maken, kunt u eenvoudig deze inhoud rechtstreeks binnen Illustrator CC openen.
CSS eigenschappen paneel
Natuurlijk zijn de grootste verbeteringen voor het web de verbeteringen aan CSS- en SVG-workflows. Als je nu een hardcore Illustrator-gebruiker bent, heb je mogelijk iets in CS5 gebruikt, het HTML5-pakket, dat beschikbaar was bij AdobeLabs. Om welke reden dan ook is het nooit in CS6 verschenen, maar veel van deze functies zijn teruggekomen met deze CC-update. Deze functies doen denken aan wat al beschikbaar is gemaakt voor Photoshop CS6 via Creative Cloud-updates en functies die te vinden zijn in Fireworks CS6.
In het deelvenster CSS-eigenschappen kunt u de CSS uit het Illustrator-document extraheren en het biedt verschillende manieren om dat te doen. De belangrijkste stap bij het maken van dit alles is door uw lagen in het lagenpaneel te benoemen. Zeker, Illustrator kan CSS genereren zonder dat het object een naam heeft in het deelvenster Lagen, maar je opent jezelf voor een ongeorganiseerde en potentieel slordige manier om code te genereren. Dit is in feite de manier waarop Illustrator de klassenregels benoemt die voor u worden gemaakt. De CSS die wordt gegenereerd, kan browser-voorvoegsels hebben voor Webkit, Firefox, Opera en Internet Explorer. Het kan CSS-ondersteunde verschijningen zoals verlopen en afgeronde hoeken vastleggen.
U kunt bepalen hoe de CSS wordt gegenereerd door het dialoogvenster CSS Exportopties te openen. U kunt het dialoogvenster openen door op de knop CSS Export Options te klikken. Dit is de eerste van de vier knoppen rechtsonder in het paneel. Het paneel biedt verschillende functies voor CSS-workflows:
- Bekijk de CSS voor een geselecteerd object
- Kopieer CSS-code voor een geselecteerd object
- Exporteer geselecteerde objecten naar een CSS-bestand samen met afbeeldingen die in CSS worden gebruikt
- Exporteer CSS-code voor alle objecten in het document naar een CSS-bestand
Bovendien kunt u de CSS-code voor alle objecten in het document exporteren door naar het menu Bestand te gaan en Exporteren te selecteren. Dat opent een dialoogvenster en van daaruit kunt u CSS kiezen in het menu Indeling.
Als u een object hebt, selecteert u het en zorgt u ervoor dat het de juiste naam heeft in het deelvenster Lagen. Als u deze hebt geselecteerd, ziet u de CSS die nodig is om de illustratie in een browser te genereren in het deelvenster CSS-eigenschappen.
SVG-code
In eerdere versies van Illustrator moest u een document opslaan als SVG. Hier in de CC-update heb je de mogelijkheid om iets in het document te kopiëren, ga dan naar je favoriete HTML-editor en voer eenvoudig een plak uit; alle SVG-code wordt in het document geplaatst. Het is een verrassend leuke workflow. Als dat niet voor u snijdt, is de meer traditionele methode om het document op te slaan als een SVG nog steeds beschikbaar.
Bovendien heeft Adobe ondersteuning toegevoegd voor het exporteren van ongebruikte stijlen. Tijdens het ontwerpen maakt u vaak meerdere grafische stijlen terwijl u illustraties maakt. Je mag niet alle beschikbare stijlen gebruiken. Wanneer u illustraties in SVG-indeling exporteert, worden ongebruikte stijlen niet geëxporteerd. Ook in de geëxporteerde CSS-code hebben grafische stijlen geen bijbehorende namen en is het misschien moeilijk om de juiste grafische stijl te identificeren.
Illustrator CC biedt twee functies die zijn toegevoegd om de ervaring te verbeteren van het werken met stijlen in SVG-indeling die op deze problemen zijn gericht:
- Naam grafische stijl. Wanneer u grafische stijlen exporteert, wordt de naam van elke stijl geëxporteerd met de definitie van de stijl in CSS-naamgeving.
- Ongebruikte stijlen exporteren. Wanneer u illustraties exporteert in SVG-indeling, kunt u er nu voor kiezen om ongebruikte stijlen te exporteren. Hiermee kan een andere ontwerper of ontwikkelaar die de stijlen importeert, de ongebruikte grafische stijlen in andere illustraties gebruiken.
Hoe je het zult gebruiken
Dit is zeker geen hulpmiddel om volledige webpagina's te coderen. Wat ik zie, is Illustrator gebruiken om mock-ups te maken, dan de code met de hand coderen in HTML en de layoutcode in CSS. Wanneer een slagschaduw, verloop, patroon of zelfs logo nodig is, zal het gebruik van deze nieuwe CSS-extractie en SVG-opties erg handig zijn en een grote tijdwinst opleveren.
Als u meer wilt weten over de nieuwe functies in Illustrator CC, bezoek de productpagina van Illustrator.
Ben je een Illustrator-liefhebber? Van welke functies van Illustrator CC ben je het meest enthousiast? Laat het ons weten in de comments.