Als er een aspect van het werken met Illustrator is waar ik echt niet van geniet, is het omzetten van lijntekeningen naar svg-afbeeldingen voor mobiel of internet. Gebruik makend van het Export> Exporteren-menu en, om eerlijk te zijn, waren de Save For Web-functie - Exporteren> Opslaan voor Web - niet echt eenvoudig te gebruiken.
Het converteren van een tekening naar het .svg-formaat opende een nogal intimiderend dialoogvenster dat, voor mensen die nieuw waren in deze workflow, een verwarrende reeks opties aanbood om niet te vermelden dat er een aantal .svg-indelingen waren en dat slechts één van de juiste formaat. Toen je eenmaal gewend was aan deze workflow was het geen groot probleem, maar de leercurve was steil.
Dat is allemaal veranderd met de nieuwe functie Exporteren voor schermen - Exporteren> Exporteren voor schermen - en het paneel Asset exporteren, die in juni 2016 werden geïntroduceerd in Illustrator CC 2015. In deze "How To" laat ik u zien hoe u beide kunt gebruiken Kenmerken. Laten we beginnen.
01 van 04
Toegang krijgen tot export voor schermen In Adobe Illustrator CC 2015
Ik ben Illustrator-gebruiker sinds Illustrator 88 en ik denk dat je mijn tegenzin begrijpt om Illustrator te beschouwen als een serieuze ontwerptool voor web- en mobiele interfaces en projecten.
Toen tekengebieden werden geïntroduceerd in de CS4-versie van 2008, vond ik dat een interessante aanvulling op de toepassing. Toen ik de nu afgekeurde Save For Web-functie voor het eerst zag in Illustrator, vond ik het interessant, maar ik vond dat dezelfde functie in Adobe Fireworks meer in lijn was met webafbeeldingen dan Illustrator.
Met de komst van een mobiel-eerst benadering van ontwerp en de toenemende afhankelijkheid van SVG-afbeeldingen voor mobiele projecten, was Illustrator mijn "go to" -tool voor SVG en werd het een belangrijke stop in de UI Design-workflow.
Toch, als ik assets voor mobiel moest exporteren, zijn Sketch 3 en Photoshop CC 2015 mijn favoriete tools. Illustrator kwam in juni 2016 op de lijst met het echt handige Export for Screens-menu.
In het bovenstaande voorbeeld heb ik twee schermen die bestemd zijn voor een iPhone en ze staan op afzonderlijke tekengebieden met de naam 'Thuis' en 'Plaatsen'. Om ze te exporteren, heb ik Bestand> Exporteren> Exporteren voor schermen geselecteerd. Het dialoogvenster Exporteren voor schermen wordt geopend.
02 van 04Hoe het dialoogvenster Exporteren voor schermen te gebruiken
Wanneer het dialoogvenster verschijnt, klikt u op elk tekengebied dat moet worden geselecteerd. Het heeft dan een vinkje. U kunt ook dubbelklikken op de naam van een tekengebied om deze te selecteren en te wijzigen. Dit is een goede zaak om te weten of uw tekengebieden de naam 'Artboard 1' en 'Artboard 2' hebben, wat u eerlijk gezegd niets zegt.
Je hebt drie keuzes in het selectiegebied:
- Allemaal: Met deze keuze exporteert u elk tekengebied in het document als een afzonderlijk bestand.
- bereik: Voer een reeks tekengebieden in die moeten worden geëxporteerd. Dit is vooral handig voor projecten met enkele tientallen tekengebieden.
- Volledig document: Selecteer dit en alle tekengebieden worden samengevoegd tot één document.
In het gebied Exporteren naar kunt u de doelmap voor de uitvoer kiezen. De standaardmap is de huidige locatie van het Illustrator-document.
Formaten is waar de "magie gebeurt. U zult merken dat er drie pictogrammen zijn: iOS. Android en een Gear. De eerste twee zijn vanzelfsprekend. Het tandwielpictogram opent de opmaakinstellingen waarmee u kunt bepalen hoe elk van de bestandsindelingen in de lijst zal worden geoptimaliseerd. Deze instellingen zijn "formaatspecifiek" en als u eenmaal uw wijzigingen hebt aangebracht, klikt u op de knop Instellingen opslaan en die wijzigingen worden toegepast op de uitvoerformaten.
Nadat u iOS of Android hebt gekozen, wordt de lijst gewijzigd in alle resoluties die beschikbaar zijn op dat platform. De iOS-lijst toont de schaalfactoren voor het Retina-display en de Android-selectie heeft een schaal van .75x tot 4x, die praktisch elk Android-apparaat biedt.
Als er een indeling is die u wilt verwijderen, klikt u op de "x". Als er een is die u wilt toevoegen, klikt u op de knop + Scale toevoegen.
Als u klaar bent, klikt u op de knop Artboard exporteren en een voortgangsbalk geeft aan wanneer het proces is voltooid.
03 of 04De exporteren voor schermbestanden gebruiken van Adobe Illustrator CC 2015.
Wanneer u de resultaten van Exporteren voor schermen bekijkt, zult u ontdekken dat Illustrator een afgeplatte versie van elk scherm heeft uitgevoerd. Op het eerste gezicht lijkt dit misschien wat zwak, vooral als je verwachtte dat Illustrator alle stukjes en beetjes als afbeeldingen had geëxporteerd.
Als je een stapje achteruit doet en er even over nadenkt, is dit eigenlijk precies wat je nodig hebt, omdat je deze uitvoer kunt gebruiken in een prototype-applicatie zoals Adobe Experience Design, Principleformac, Atomic.io, UXPin of andere prototyping-applicaties
In dit voorbeeld gebruik ik Adobe Experience Design (XD) om een eenvoudige click-thru te maken. De eerste stap in het proces was het selecteren van het formaat van de iPhone 6 dat overeenkwam met de afmetingen van de Illustrator-interface
Toen de interface werd geopend, heb ik de Artboard-tool geselecteerd en eenmaal op het plakbord geklikt om een nieuw tekengebied toe te voegen. Ik noemde ze vervolgens 'Thuis' en 'Plaatsen', selecteerde elk tekengebied en importeerde de png-afbeelding uit Illustrator in het tekengebied.
Om de "hotspots" voor de click-thru te maken, tekende ik een rechthoek over de knop Verkennen op het startscherm en stelde ik de vul- en randwaarden in op niets door die eigenschappen in het paneel Properties te deselecteren. Ik deed hetzelfde met de knop Vorige op de pagina Plaatsen.
Om de interactiviteit toe te voegen, heb ik de Prototype-modus geselecteerd en vervolgens op de "hotspot" geklikt. Vervolgens sleepte ik de pijl - een draad genaamd - naar de Places-pagina en stelde ik het Transitiedoel in op de plaatsen, de beweging om naar links te duwen, de versnelling om te ontspannen en de duur van de overgang naar .6 seconden.
Ik herhaalde deze stap met de hotspot op de pagina Plaatsen. Het enige verschil was dat de Transitie op Push Right was ingesteld. Toen ik op de knop Afspelen klikte, testte ik mijn prototype.
04 van 04Hoe het exportactivatievenster te gebruiken In Adobe Illustrator CC 2015
Samen met het menu Opslaan voor schermen heeft Adobe ook een nieuw panel toegevoegd - Asset Export - waarmee een enorm pijnpunt in de UI Design-workflow is verwijderd.
Het pijnpunt was pictogrammen. Illustrator is een geweldige vector-tekenapplicatie maar om, laten we zeggen 10 pictogrammen, uit te voeren op een pagina met 40 of 50 vereiste is elke afbeelding opgeslagen als een SVG-afbeelding. Dit had onvermijdelijk meer tijd nodig dan normaal, dankzij opeenvolgende reizen naar het SVG-panel. Dit pijnpunt is nu verleden tijd.
Dit nieuwe paneel is te vinden onder Venster> Activum exporteren. Wanneer het paneel wordt geopend, selecteert u het item dat u naar SVG of een andere indeling wilt converteren en sleept u naar het paneel. Wanneer u de muis loslaat, wordt een miniatuur van het item toegevoegd aan het paneel. Geef het activum een naam. Blijf objecten naar het paneel slepen totdat u klaar bent.
Selecteer elk item in het gebied Exportinstellingen of selecteer ze allemaal door de Shift-toets ingedrukt te houden en op elk item te klikken. Selecteer uw indeling - in dit voorbeeld kies ik SVG- en klik op de knop Exporteren. De geselecteerde items worden als SVG-bestanden uitgevoerd naar dezelfde locatie als het Illustrator-bestand.
Waar dit hele proces nog overzichtelijker wordt, hoeft u het paneel Asset export niet te gebruiken. Als u op de knop Opslaan voor schermen onder aan het paneel klikt, wordt het dialoogvenster geopend.
Omgekeerd kunt u klikken op het tabblad Activa in het deelvenster Opslaan voor schermen om toegang te krijgen tot het deelvenster Asset export. Als u bijvoorbeeld een aangepast pictogram op een tekengebied hebt, kunt u het paneel Asset export in het dialoogvenster Opslaan voor scherm openen en dat item naar het paneel Asset export slepen.
