Veel van de meest ingrijpende veranderingen in de manier waarop Illustrator wordt gebruikt , vinden plaats op het gebied van het vertalen van vectorafbeeldingen naar het web, en het onderschatte SVG-formaat is de belangrijkste schakel in dat proces. SVG-bestanden behouden de gekoesterde schaalbaarheidsfuncties van vectorillustraties en worden bijna universeel ondersteund in websites en webontwikkelingsomgevingen. Wanneer u vectorillustraties voor het web voorbereidt, is het belangrijk om de standaardeffecten van Illustrator te vermijden en in plaats daarvan SVG-filters te gebruiken.
Illustrator wordt geleverd met een degelijke maar minimalistische set SVG-filters, maar hier zijn enkele tips voor het vinden en toevoegen van SVG-filters, evenals bronnen voor het maken van uw eigen SVG-filters. Voor degenen die met web- en app-ontwikkelaars werken: maak hun leven gemakkelijker en productiever door de spiekbrief te bekijken voor het overhandigen van SVG-code.
Wanneer u SVG-bestanden voor schermen in Illustrator maakt en u effecten (zoals slagschaduwen) wilt toepassen, moet u deze toepassen als SVG-filters. Op die manier behouden uw SVG-bestanden oneindige schaalbaarheid zonder vervorming.
De volgende stappen helpen u bij het toepassen van een SVG-filter op afbeeldingen in Illustrator:
Selecteer de object(en) waarop u het filter toepast.
Kies Effect → SVG-filters.
Selecteer een filter in de lijst die verschijnt.
De meeste filters hebben beschrijvende namen. Degenen met schaduw in de naam zijn bijvoorbeeld slagschaduwen, degenen met gaussiaans in de naam zijn gaussiaanse vervagingen. De workflow is een beetje vreemd en omslachtig, maar je moet eerst een filter selecteren om toegang te krijgen tot alle beschikbare opties om er een toe te passen.
Om het geselecteerde filter te wijzigen:
Nadat u een filter hebt gekozen, klikt u op OK in het deelvenster SVG-filter toepassen.
De set SVG-filters van Illustrator is minimalistisch, maar u kunt deze verbeteren door uw eigen filters te ontwerpen of voorverpakte sets SVG-filters van online bronnen te downloaden. Het ontwerpen van filters omvat codering, maar het is te doen als u vertrouwd bent met HTML. Ik raad de tutorial op w3Schools aan voor het maken van SVG-filters. Of je kunt sets filters online kopen en zelfs een aantal mooie sets gratis SVG-filters vinden bij Creatingo .
Nadat u uw eigen SVG-filters hebt gekocht of gemaakt, installeert u ze als volgt in Illustrator:
Kies Effect → SVG-filters → SVG-filter importeren.
Navigeer in het dialoogvenster dat wordt geopend naar en dubbelklik op het SVG-filterbestand dat u gratis hebt gemaakt of gedownload.
Het bestand dat u zoekt, moet een SVG-bestand zijn (meerdere filters zijn gebundeld in één SVG-bestand).
Uw nieuwe filters zijn nu beschikbaar in het submenu SVG-filters.
Kies Effect → SVG-filters om uw nieuwe filters op geselecteerde objecten toe te passen.
Vaak worden de SVG-afbeeldingen die u in Illustrator maakt, overgedragen aan game-ontwerpers, animators, infographics of andere uitvoer, waar ontwikkelaars zullen werken met de code achter de SVG-afbeelding. Als illustrator hoeft u niet te weten hoe u die code moet maken, maar u moet misschien wel weten hoe u deze kunt verkrijgen en overdragen aan een ontwikkelaar. Hier is hoe.
De weg naar het exporteren van uw SVG-afbeeldingen als code loopt via de Save-functies van Illustrator. Het menu Opslaan heeft opties (niet gemakkelijk te vinden) die uw bestand exporteren als SVG-code. U wilt waarschijnlijk in realtime communiceren met uw schermontwikkelaar terwijl u die code genereert, omdat verschillende opties worden bepaald door hoe die code zal worden gebruikt:
Kies Bestand → Opslaan (of Opslaan als als u een bestand opnieuw opslaat).
In het dialoogvenster dat wordt geopend, selecteert u SVG in het menu Opmaak.
Negeer de SVGZ-bestandsoptie, die bedoeld is voor een gecomprimeerd bestand dat niet in browsers wordt weergegeven.
Klik op Opslaan om het dialoogvenster SVG-opties te openen.
Kies altijd SVG 1.1 in de vervolgkeuzelijst SVG-profielen. Andere versies zijn verouderd.
Als u afbeeldingen hebt ingesloten of gekoppeld in uw SVG-bestand, kiest u Insluiten in de vervolgkeuzelijst Afbeeldingslocaties. Overleg echter eerst met uw webontwikkelaar over deze keuze.
Selecteer Bewerkingsmogelijkheden van Illustrator behouden om het bestand bewerkbaar te maken in Illustrator.
Deze keuze vergroot de bestandsgrootte, maar stelt u in staat met één enkel SVG-bestand te werken dat u kunt bewerken, bijwerken en delen met webontwikkelaars.
Als de knop Meer opties wordt weergegeven, klikt u erop om toegang te krijgen tot geavanceerde opties. en maak je keuzes.
In wezen genereren de verschillende opties CSS met uw bestand dat eigenschappen op de volgende manieren definieert. Overleg met uw teamgenoot van webontwikkelaars hoe u deze CSS-eigenschappen kunt definiëren:
Schakel de vijf selectievakjes onder aan het dialoogvenster SVG-opties uit, tenzij uw ontwikkelaar-partner u vraagt om ze te selecteren.
Deze opties zijn voor zeer gespecialiseerde toepassingen.
Om SVG-code te genereren op basis van de selecties die u maakt in het dialoogvenster SVG-optie, klikt u op de knop SVG-code .
De gegenereerde SVG-code wordt weergegeven in de teksteditor van uw besturingssysteem. U kunt die code opslaan als een tekstbestand met behulp van de teksteditor van uw besturingssysteem en het bestand aan een ontwikkelaar overhandigen.
Nadat u de code heeft gegenereerd, klikt u op OK om uw bestand op te slaan.
U kunt dit bestand opnieuw openen en bewerken in Illustrator.
U kunt de tool Momentopname in Adobe Acrobat CS5 gebruiken om zowel tekst als afbeeldingen te selecteren en een afbeelding van een bepaald gebied in een PDF-bestand te maken. Het resultaat wordt gewoonlijk een schermopname van een sectie in een PDF-bestand genoemd. Het resultaat is een afbeelding en je tekst is geen […]
Ontworpen voor onderzoekers en wetenschappers, zijn de meetmogelijkheden in Photoshop CC behoorlijk krachtig. Je kunt zo ongeveer alles meten en het aantal dingen in een technisch beeld tellen, misschien van een microscoop of telescoop. Als je de exacte grootte van een element in een afbeelding weet, kun je zo ongeveer alles ontdekken […]
Wanneer u de hulpmiddelen voor Uitvloeien in Adobe Creative Suite 5 (Adobe CS5) Illustrator gebruikt, kunt u objecten buigen - ze golvend, kleverig of stekelig maken - door eenvoudige tot complexe vervormingen te creëren. De Liquify-tools kunnen allerlei creatieve of gekke (afhankelijk van hoe je het bekijkt) vervormingen aan je objecten bewerkstelligen. Jij […]
Wanneer u tekst in uw Adobe XD-project heeft, kunt u beginnen met het wijzigen van de teksteigenschappen. Deze eigenschappen omvatten Lettertypefamilie, Lettergrootte, Lettertypegewicht, Uitlijning, Tekenafstand (spatiëring en tracking), Regelafstand (voorloop), Opvulling, Rand (lijn), Schaduw (slagschaduw) en Achtergrondvervaging. Dus laten we eens kijken hoe die eigenschappen worden toegepast. Over leesbaarheid en lettertype […]
U kunt InDesign gebruiken om afbeeldingen met QR-codes te maken en te wijzigen. QR-codes zijn een vorm van streepjescodes waarin informatie kan worden opgeslagen, zoals woorden, cijfers, URL's of andere vormen van gegevens. De gebruiker scant de QR-code met haar camera en software op een apparaat, zoals een smartphone, en de software maakt gebruik van […]
Net als in Adobe Illustrator bieden Photoshop-tekengebieden de mogelijkheid om afzonderlijke pagina's of schermen binnen één document te bouwen. Dit kan vooral handig zijn als u schermen maakt voor een mobiele applicatie of kleine brochure. U kunt een tekengebied zien als een speciaal type laaggroep die is gemaakt met behulp van het deelvenster Lagen. Zijn […]
Tekst inpakken in Adobe Illustrator CC is niet helemaal hetzelfde als een cadeautje inpakken - het is makkelijker! Een tekstomloop dwingt tekst om rond een afbeelding te lopen, zoals weergegeven in deze afbeelding. Deze functie kan een beetje creativiteit toevoegen aan elk stuk. De afbeelding dwingt de tekst eromheen te wikkelen. Maak eerst […]
Bij het ontwerpen in Adobe Illustrator CC heb je vaak een vorm nodig met een exacte grootte (bijvoorbeeld 2 x 3 inch). Nadat u een vorm hebt gemaakt, kunt u het formaat het beste aanpassen aan exacte afmetingen door het deelvenster Transformeren te gebruiken, dat in deze afbeelding wordt weergegeven. Laat het object selecteren en kies vervolgens Venster → Transformeren naar […]
Leer hoe u transparantie toepast op SVG-afbeeldingen in Illustrator. Ontdek hoe u SVG's met transparante achtergronden kunt uitvoeren en transparantie-effecten kunt toepassen.
Nadat u uw afbeeldingen in Adobe XD hebt geïmporteerd, heeft u niet veel controle over het bewerken, maar u kunt afbeeldingen vergroten of verkleinen en roteren, net zoals u bij elke andere vorm zou doen. U kunt ook eenvoudig de hoeken van een geïmporteerde afbeelding afronden met behulp van de hoekwidgets. Uw afbeeldingen maskeren Door een gesloten vorm te definiëren […]
