Als je een buitenlijn wilt opnemen zonder de PNG-afmetingen van een gameasset te wijzigen, reserveer dan ruimte voor de lijn binnen een tekengebied met vaste afmetingen. Zorg in Affinity op de Mac dat het volledige ontwerp met lijn binnen die grens past en exporteer vervolgens het benoemde tekengebied op het vereiste aantal pixels.

Deze workflow is bedoeld voor iemand die een kleine vectorgameasset voorbereidt, zoals een geometrisch pictogram van 32 × 32 px. Hierbij gebruik je de bedieningselementen uit het huidige Affinity Helpcentrum voor desktop. Affinity Designer 2 heeft een aparte exportwerkruimte genaamd Export Persona; in de huidige Affinity-documentatie heet deze Slice Studio. De hoofdworkflow hieronder gebruikt het huidige dialoogvenster Exporteren voor desktop. Huidige documentatie over exporteren met Affinity, Documentatie over Export Persona in Designer 2.

Wat kan ongewijzigd blijven wanneer je een buitenlijn toevoegt?

Houd vóór het bewerken drie afmetingen uit elkaar: de afmetingen van de vorm, het zichtbare ontwerp inclusief de lijn en de pixelafmetingen van de geëxporteerde afbeelding. In het deelvenster Lijn van Affinity kun je een lijn gecentreerd op, binnen of buiten de rand van het object plaatsen. Die uitlijnopties bepalen hoeveel ruimte de omtreklijn inneemt. Deelvenster Lijn.

Een buitenlijn heeft ruimte buiten de oorspronkelijke vorm nodig. Als de vorm de uitvoergrens al vult, moet er iets veranderen om de volledige lijn te behouden: verklein of wijzig de vorm, gebruik de beschikbare transparante ruimte of schaal de volledige compositie zodat deze binnen het vereiste uitvoerformaat past. De oorspronkelijke randposities, de volledige buitenlijn en identieke uitvoergrenzen behouden is geometrisch onmogelijk wanneer de lijn die grenzen overschrijdt.

Affinity documenteert een duidelijke grens voor tekengebieden: objecten die buiten een tekengebied uitsteken, worden bij de rand ervan afgeknipt. Een tekengebied kan de exportgrootte dus constant houden, maar kan geen lijndelen behouden die buiten die grens vallen. Over tekengebieden.

De officiële exportdocumentatie beschrijft hoe je een exportgebied kiest en de uitvoerbreedte en -hoogte wijzigt. Er wordt geen schakelaar beschreven waarmee overlopende buitenlijnen worden opgenomen terwijl zowel de oorspronkelijke schaal van het ontwerp als een vaste afbeeldingsgrens behouden blijft. De ondersteunde aanpak is om het zichtbare ontwerp binnen het gekozen exportgebied te laten passen. Dialoogvenster Exporteren, Exportinstellingen.

Je vereiste Geschikte aanpak Wat verandert
Een echte buitenlijn en exacte PNG-afmetingen behouden Plaats de vorm binnen een tekengebied met vaste afmetingen De grootte van de vorm of de beschikbare opvulruimte
De bestaande vormrand als zichtbare buitenrand behouden Gebruik waar passend een naar binnen uitgelijnde lijn De plaatsing van de omtreklijn en het zichtbare vulgebied
De verhoudingen van de volledige compositie behouden en een specifieke uitvoergrootte afdwingen Wijzig de grootte van de geëxporteerde afbeelding De schaal van het ontwerp in de geëxporteerde pixels
Het volledige ontwerp op de oorspronkelijke schaal behouden zonder beschikbare ruimte Vergroot het uitvoergebied De exportafmetingen; hiermee voldoe je niet aan de vereiste voor een vaste grootte

Hoe laat je een buitenlijn binnen een export van 32 × 32 px passen?

In het uitgewerkte voorbeeld hieronder gebruiken we een illustratief, uitgelijnd vierkant met een uniforme buitenlijn van 2 px. Effecten, lijnen met variabele breedte en uitstekende hoekdetails zijn bewust weggelaten, zodat de ruimteberekening duidelijk is.

Bij dit vierkant is de zichtbare breedte gelijk aan de breedte van de vorm plus aan beide zijden één lijnbreedte. Een uitvoer van 32 px laat daarom een vormbreedte toe van 32 − 2 − 2 = 28 px. Dezelfde berekening geeft een hoogte van 28 px. Als je die vorm centreert, blijft er 2 px tussen de onderliggende rand en elke rand van het tekengebied; die ruimte wordt ingenomen door de buitenlijn.

1. Stel het uitvoergebied met vaste afmetingen in

Kies in Vector Studio Bestand > Nieuw. Stel Documenteenheden in op pixels, Paginabreedte en Paginahoogte op 32 px en schakel Tekengebieden in. Schakel Transparante achtergrond in als de asset een transparante omgeving nodig heeft. Gebruik voor dit voorbeeld 72 DPI en klik vervolgens op Document maken. Deze documentinstellingen worden beschreven in de Affinity-help voor nieuwe documenten. Nieuwe documenten maken.

Als je een afzonderlijk exporttekengebied aan een bestaand document toevoegt, kun je met het Tekengebiedgereedschap de waarden B en H instellen voor een nieuw tekengebied. Klik daarna op Tekengebied invoegen. Voer de vereiste pixelafmetingen expliciet in, in plaats van het tekengebied af te stemmen op het geselecteerde ontwerp. Tekengebiedgereedschap.

2. Stel de grootte van de onderliggende vorm en de lijn in

Maak of selecteer het vierkant. Open Venster > Algemeen > Transformeren en voer B: 28 px en H: 28 px in. Het deelvenster ondersteunt exacte afmetingen en een ankerpunt voor transformaties. Plaats het vierkant in het midden, met de onderliggende randen 2 px binnen het tekengebied. Deelvenster Transformeren.

Open Venster > Vector > Lijn. Kies een ononderbroken lijn, voer Breedte: 2 px in en kies Lijn buiten uitlijnen. Gebruik voor dit eenvoudige voorbeeld een afgeronde hoek. Affinity documenteert de uitlijn-, breedte- en hoekinstellingen in het deelvenster Lijn. Deelvenster Lijn.

Controleer bij het vergroten of verkleinen van bestaand ontwerp hoe de lijn mee wordt geschaald. Schalen met object bepaalt of de lijnbreedte mee verandert met een gesloten vorm. In het deelvenster Transformeren staat ook Schaaloverschrijving, waarmee je eigenschappen zoals lijnbreedtes kunt dwingen mee te schalen. Controleer na het schalen opnieuw of de breedte de beoogde 2 px is; ga er niet van uit dat deze gelijk is gebleven. Instellingen voor het schalen van lijnen, Schaaloverschrijving in Transformeren.

3. Controleer de volledige zichtbare omvang

Het vierkant van 28 px en de buitenlijn nemen nu in beide richtingen 32 px in. Dit is een geometrische berekening voor het beschreven voorbeeld, geen gemeten exportresultaat. Als je een transparante marge rond de omtreklijn wilt, reserveer daar dan ook ruimte voor: een marge van 1 px aan elke zijde verkleint het vierkant tot 26 × 26 px.

Pas deze aftreksom niet zonder meer toe op elke asset. Verstekkingen in Affinity kunnen bij scherpe hoeken uitsteken, terwijl lijnuiteinden invloed hebben op de uiteinden van lijnen. Controleer bij een complexe vorm de volledige omtrek, vooral bij hoeken en uiteinden. De eenvoudige berekening van de breedte is een startpunt voor regelmatige vormen. Lijnhoeken en lijnuiteinden.

Hoe exporteer je het tekengebied zonder de afmetingen te wijzigen?

Kies Bestand > Exporteren > Exporteren en selecteer vervolgens een PNG-voorinstelling. Stel Gebied in op het benoemde tekengebied. Affinity onderscheidt dit van Selectiegebied, dat overlappende lagen bevat, en Alleen selectie, dat overlappende, niet-geselecteerde lagen uitsluit. Door het benoemde tekengebied te kiezen, maak je het beoogde exportgebied expliciet. Dialoogvenster Exporteren.

Controleer de uitvoerbreedte en -hoogte: beide moeten voor dit voorbeeld 32 px zijn. Affinity staat andere afmetingen toe en biedt Beeldverhouding vergrendelen. Wijzig de uitvoergrootte niet om te compenseren voor ontwerp dat nog buiten het tekengebied valt; laat de omtreklijn eerst binnen de grens passen. Exportinstellingen.

Bekijk het exportvoorbeeld voordat je het opslaat. Gebruik op de Mac ⌘1 om het voorbeeld op 100% weer te geven en ⌘2 voor 200%. Controleer alle vier de randen op afgeknipte delen van de omtreklijn en bevestig dat eventuele transparante marges aanwezig zijn. Kies daarna Locatie vragen, klik op Exporteren, geef het bestand een naam, kies de bestemming en klik op Bewaar. Dialoogvenster Exporteren en sneltoetsen voor het voorbeeld op de Mac.

Open de opgeslagen PNG als laatste praktische controle en inspecteer de pixelafmetingen en de volledige vorm. De juiste breedte en hoogte bewijzen op zichzelf niet dat de lijn past: een afgeknipte afbeelding kan nog steeds precies 32 × 32 px zijn.

Kun je slices gebruiken om dezelfde vaste grootte te behouden?

Ja, als je het exportgebied bewust instelt. Affinity beschrijft twee verschillende gedragingen van slices: een slice die is gemaakt op basis van een item in het deelvenster Exportlagen, krijgt automatisch de afmetingen van dat item en exporteert de inhoud van die laag; een handmatig getekende slice bevat de inhoud van alle zichtbare lagen binnen het gebied. Exporteren met Slice Studio.

Selecteer voor een exportgebied met vaste afmetingen het Slicegereedschap in Slice Studio en sleep een gebied rond het voorbereide ontwerp. Gebruik het ondersteunende deelvenster Transformeren om de exacte grootte en positie van de slice in te stellen. Kies PNG bij de exportopties van de slice en exporteer de gewenste slice. Zorg dat de volledige lijn binnen de rechthoek van de slice valt, net zoals je dat bij een tekengebied zou doen. Slices exporteren.

Controleer de weergegeven exportresolutie; ga er niet van uit dat 1x altijd overeenkomt met de pixelafmetingen van het document. Affinity beschrijft een verband tussen de schaal van een slice en de DPI van het document: het voorbeeld van 64 × 64 px wordt bij 72 DPI op 1x geëxporteerd als 64 × 64 px, maar bij 144 DPI op 1x als 32 × 32 px. Dit is een afzonderlijke instelling voor de grootte en staat los van de plaatsing van de lijn. Afmetingen van slices en DPI.

Wat moet je wijzigen als het resultaat nog steeds niet klopt?

Kies aan de hand van het verschijnsel welke bewerking je hierna uitvoert:

  • De PNG heeft de juiste afmetingen, maar de omtreklijn is afgeknipt: verplaats of verklein het ontwerp zodat de volledige lijn binnen het tekengebied of de slice past.
  • De PNG-afmetingen veranderen wanneer het ontwerp verandert: controleer of je een selectie of een automatisch op maat gemaakte objectslice exporteert. Gebruik het benoemde tekengebied of een nauwkeurig ingestelde handmatige slice voor een vaste grens.
  • De dikte van de omtreklijn verandert na het schalen: controleer Schalen met object en Schaaloverschrijving in Transformeren en stel vervolgens de gewenste lijnbreedte opnieuw in.
  • De omtreklijn past, maar de asset lijkt kleiner: controleer of de uitvoerbreedte en -hoogte zijn gebruikt om een grotere compositie naar de gewenste grootte te schalen.
  • Alleen scherpe hoeken zijn afgeknipt: controleer het hoektype en de verstekuitloop voordat je de grootte van de volledige compositie wijzigt.

Deze controles volgen de gedocumenteerde verschillen tussen het afknippen bij tekengebiedranden, de afmetingen van slices, het schalen van lijnen en het wijzigen van exportafmetingen. Ze hebben betrekking op verschillende oorzaken; alleen de uitlijning van de lijn wijzigen lost niet elk probleem met de exportgrootte op. Grenzen van tekengebieden, Gedrag van slices, Instellingen voor lijnen, Exportafmetingen.

Voor een herhaalbare workflow voor gameassets stel je eerst de vereiste pixelgrens in en reserveer je daarbinnen ruimte voor de omtreklijn. Behoud de buitenuitlijning als dat uiterlijk belangrijk is, pas het onderliggende ontwerp aan om ruimte te maken en exporteer het vaste gebied. Zo behoud je de vereiste bestandsafmetingen en krijgt de volledige lijn ruimte om te worden weergegeven.

Bronnen