Pour inclure un contour extérieur tout en conservant les dimensions PNG d’un élément de jeu, réservez de l’espace pour le contour à l’intérieur d’un plan de travail de taille fixe. Dans Affinity sur Mac, faites tenir l’illustration complète avec son contour dans cette limite, puis exportez le plan de travail nommé à la taille en pixels requise.

Ce processus s’adresse à une personne qui prépare un petit élément vectoriel de jeu, comme une icône géométrique de 32 × 32 px. Il utilise les commandes du Centre d’aide actuel d’Affinity pour ordinateur. Affinity Designer 2 possède un espace de travail d’exportation distinct appelé Export Persona ; la documentation actuelle d’Affinity l’appelle Slice Studio. Le processus principal ci-dessous utilise la boîte de dialogue d’exportation actuelle pour ordinateur. Documentation actuelle sur l’exportation dans Affinity, Documentation sur Export Persona de Designer 2.

Que peut-on conserver inchangé lorsqu’on ajoute un contour extérieur ?

Avant toute modification, distinguez trois mesures : les dimensions de la forme, l’illustration visible avec son contour et les dimensions en pixels de l’image exportée. Dans Affinity, le panneau Contour place le contour centré sur le bord de l’objet, à l’intérieur ou à l’extérieur. Ces options d’alignement déterminent l’espace occupé par le contour. Panneau Contour.

Un contour extérieur nécessite de l’espace au-delà de la forme d’origine. Si la forme occupe déjà toute la limite de sortie, conserver le contour complet implique une modification quelque part : réduire ou remodeler l’illustration, utiliser l’espace transparent disponible ou mettre à l’échelle la composition entière pour qu’elle tienne dans la taille de sortie requise. Il est géométriquement impossible de conserver les positions originales des bords, le contour extérieur complet et les mêmes limites d’image si le contour dépasse ces limites.

Affinity indique une limite stricte pour les plans de travail : les objets qui dépassent d’un plan de travail sont coupés à son bord. Un plan de travail permet donc de maintenir la taille de l’exportation, mais ne peut pas préserver le contenu du contour situé hors de cette limite. À propos des plans de travail.

La documentation officielle sur l’exportation décrit le choix d’une zone d’exportation et la modification de la largeur et de la hauteur de sortie. Elle ne décrit pas d’option permettant d’inclure les contours extérieurs qui débordent tout en conservant à la fois l’échelle originale de l’illustration et une limite d’image fixe. La méthode prise en charge consiste à faire tenir l’illustration visible dans la zone d’exportation choisie. Boîte de dialogue d’exportation, Paramètres d’exportation.

Votre exigence Approche adaptée Élément modifié
Conserver un vrai contour extérieur et des dimensions PNG exactes Rentrer la forme dans un plan de travail fixe Taille de la forme ou marge disponible
Conserver la limite existante de la forme comme limite extérieure visible Utiliser, si nécessaire, un contour aligné à l’intérieur Position du contour et surface de remplissage visible
Conserver les proportions de la composition entière et imposer une taille de sortie cible Redimensionner l’image exportée Échelle de l’illustration dans les pixels exportés
Conserver toute l’illustration à son échelle d’origine sans espace disponible Augmenter la zone de sortie Dimensions de l’exportation ; cela ne respecte pas l’exigence de taille fixe

Comment faire tenir un contour extérieur dans un export de 32 × 32 px ?

L’exemple ci-dessous utilise un carré illustratif aligné sur les axes, avec un contour extérieur uniforme de 2 px. Il exclut volontairement les effets, les contours de largeur variable et les détails de coins saillants afin de clarifier le calcul de l’espace nécessaire.

Pour ce carré, la largeur visible correspond à la largeur de la forme plus une largeur de contour de chaque côté. Une sortie de 32 px permet donc une forme de 32 − 2 − 2 = 28 px de large. Le même calcul donne une hauteur de 28 px. En centrant cette forme, on laisse 2 px entre son bord sous-jacent et chaque bord du plan de travail ; le contour extérieur occupe cet espace.

1. Définir la zone de sortie fixe

Dans Vector Studio, choisissez Fichier > Nouveau. Définissez Unités du document sur pixels, Largeur de page et Hauteur de page sur 32 px, puis activez Plans de travail. Activez Arrière-plan transparent si l’élément doit être entouré de zones transparentes. Pour cet exemple, utilisez 72 DPI, puis cliquez sur Créer le document. Ces commandes du document sont décrites dans l’aide d’Affinity sur la création de documents. Créer des documents.

Si vous ajoutez un plan de travail d’exportation dédié à un document existant, l’outil Plan de travail propose les commandes L et H pour créer un nouveau plan de travail, puis Insérer un plan de travail. Saisissez explicitement les dimensions en pixels requises au lieu de définir la taille du plan de travail en fonction de l’illustration sélectionnée. Outil Plan de travail.

2. Définir la taille de la forme sous-jacente et régler le contour

Créez ou sélectionnez le carré. Ouvrez Fenêtre > Général > Transformation et saisissez L : 28 px et H : 28 px. Le panneau permet de définir des dimensions précises ainsi qu’un point d’ancrage pour les transformations. Placez le carré au centre, avec ses bords sous-jacents à 2 px à l’intérieur du plan de travail. Panneau Transformation.

Ouvrez Fenêtre > Vectoriel > Contour. Choisissez un contour uni, saisissez Largeur : 2 px, puis choisissez Aligner le contour à l’extérieur. Pour cet exemple simple, utilisez une jointure arrondie. Affinity décrit les commandes d’alignement, de largeur et de jointure du panneau Contour. Panneau Contour.

Lorsque vous redimensionnez une illustration existante, vérifiez comment son contour est mis à l’échelle. Mettre à l’échelle avec l’objet détermine si la largeur du contour change avec une forme fermée. Le panneau Transformation comporte également Remplacement d’échelle, qui peut forcer la mise à l’échelle de propriétés, notamment les largeurs de contour. Après le redimensionnement, vérifiez à nouveau que la largeur souhaitée est de 2 px au lieu de supposer qu’elle est restée constante. Commandes de mise à l’échelle du contour, Remplacement d’échelle dans Transformation.

3. Vérifier toute l’étendue visible

Le carré de 28 px et son contour extérieur occupent maintenant 32 px dans chaque direction. Il s’agit d’un calcul géométrique pour l’exemple donné, et non d’un résultat d’exportation mesuré. Si vous souhaitez une marge transparente autour du contour, réservez aussi cet espace : une marge de 1 px de chaque côté réduit la taille possible du carré à 26 × 26 px.

N’appliquez pas cette soustraction sans discernement à tous les éléments. Les jointures en pointe d’Affinity peuvent dépasser aux angles aigus, tandis que les extrémités affectent les bouts des lignes. Une silhouette complexe nécessite de vérifier l’ensemble de son contour, en particulier aux angles et aux extrémités. Le calcul simple de largeur constitue un point de départ pour les formes régulières. Jointures et extrémités du contour.

Comment exporter le plan de travail sans modifier ses dimensions ?

Choisissez Fichier > Exporter > Exporter, puis sélectionnez un préréglage PNG. Définissez Zone sur le plan de travail nommé. Affinity distingue cette option de Zone de sélection, qui inclut les calques superposés, et de Sélection uniquement, qui exclut les calques superposés non sélectionnés. Choisir le plan de travail nommé rend explicite la zone d’exportation voulue. Boîte de dialogue d’exportation.

Vérifiez la largeur et la hauteur de sortie : elles doivent toutes deux être de 32 px dans cet exemple. Affinity permet de définir d’autres dimensions et propose l’option Verrouiller le rapport L/H. Évitez de modifier la taille de sortie pour compenser une illustration qui dépasse encore du plan de travail ; faites d’abord tenir le contour dans ses limites. Paramètres d’exportation.

Examinez l’aperçu de l’exportation avant l’enregistrement. Sur Mac, ⌘1 affiche l’aperçu à 100 % ; ⌘2 l’affiche à 200 %. Vérifiez les quatre bords pour repérer les parties du contour coupées et confirmer toute marge transparente souhaitée. Choisissez ensuite Demander l’emplacement, cliquez sur Exporter, nommez le fichier, choisissez son emplacement et cliquez sur Enregistrer. Boîte de dialogue d’exportation et raccourcis d’aperçu sur Mac.

Pour finir, ouvrez le PNG enregistré et vérifiez ses dimensions en pixels ainsi que sa silhouette complète. Une largeur et une hauteur correctes ne suffisent pas à établir que le contour tient dans l’image : une image coupée peut tout de même mesurer exactement 32 × 32 px.

Les tranches permettent-elles d’obtenir le même résultat de taille fixe ?

Oui, à condition de définir soigneusement la zone d’exportation. Affinity décrit deux comportements différents des tranches : une tranche créée à partir d’un élément du panneau Exporter les calques s’adapte automatiquement à l’étendue de cet élément et exporte le contenu de son calque ; une tranche dessinée manuellement inclut le contenu de tous les calques visibles dans sa zone. Exporter à l’aide de Slice Studio.

Pour définir une zone d’exportation fixe, sélectionnez l’outil Tranche dans Slice Studio et faites glisser le curseur pour délimiter la zone autour de l’illustration préparée. Utilisez le panneau Transformation associé pour définir précisément la taille et la position de la tranche. Choisissez PNG dans ses options d’exportation, puis exportez la tranche requise. Faites tenir tout le contour dans le rectangle de la tranche, comme vous le feriez dans un plan de travail. Exporter des tranches.

Vérifiez la résolution d’exportation affichée au lieu de supposer que 1x correspond toujours aux dimensions en pixels du document. Affinity décrit le lien entre l’échelle de la tranche et la résolution du document : dans son exemple de 64 × 64 px, l’exportation fait 64 × 64 px à 1x avec une résolution de 72 DPI, mais 32 × 32 px à 1x avec une résolution de 144 DPI. Il s’agit d’un problème distinct de définition de la taille, sans rapport avec le positionnement du contour. Dimensions des tranches et résolution DPI.

Que faut-il modifier si le résultat ne convient toujours pas ?

Choisissez la prochaine modification en fonction du symptôme :

  • Le PNG a les bonnes dimensions, mais son contour est coupé : déplacez ou réduisez l’illustration jusqu’à ce que tout le contour tienne dans le plan de travail ou la tranche.
  • Les dimensions du PNG varient avec les modifications de l’illustration : vérifiez si vous exportez une sélection ou une tranche d’objet dimensionnée automatiquement. Pour obtenir une limite fixe, utilisez le plan de travail nommé ou une tranche manuelle de dimensions précises.
  • L’épaisseur du contour change après le redimensionnement : vérifiez les options Mettre à l’échelle avec l’objet et Remplacement d’échelle dans Transformation, puis rétablissez la largeur de contour souhaitée.
  • Le contour tient dans l’image, mais l’élément paraît plus petit : vérifiez si la largeur et la hauteur d’exportation ont servi à mettre à l’échelle une composition plus grande pour qu’elle corresponde à la taille cible.
  • Seuls les angles aigus sont coupés : vérifiez le style de jointure et le dépassement de la pointe avant de modifier la taille de la composition entière.

Ces vérifications s’appuient sur les distinctions documentées entre le rognage des plans de travail, l’étendue des tranches, la mise à l’échelle des contours et le redimensionnement à l’exportation. Elles répondent à différentes causes ; modifier uniquement l’alignement du contour ne résoudra pas tous les problèmes de taille d’exportation. Limites des plans de travail, Comportement des tranches, Commandes du contour, Dimensions d’exportation.

Pour obtenir un processus reproductible de création d’éléments de jeu, définissez d’abord la limite requise en pixels et prévoyez la place du contour à l’intérieur. Conservez l’alignement extérieur si cet aspect est important, ajustez l’illustration sous-jacente pour faire de la place, puis exportez la zone fixe. Vous garderez ainsi les dimensions de fichier demandées tout en laissant au contour complet l’espace nécessaire pour s’afficher.

Sources