Avez-vous déjà créé un thème enfant, ou bien avez-vous déjà utilisé celui fourni dans le pack d’un thème premium ?

Si c’est votre cas, vous avez certainement dû voir que dans votre back-office de WordPress (à Apparence > Themes), se trouvent tous vos thèmes représentés par une illustration propre à chacun.

Cela peut-être frustrant de se retrouver alors avec un child-theme qui utilise la même image que son parent ou pire encore, un écran sans image… bien tristounet !

Je vous propose alors de réaliser votre propre screenshot pour illustrer votre thème enfant dans Affinity Designer.

Retrouvez dans cet article un tuto détaillé pour créer une image sous Affinity Designer ainsi que son fichier à télécharger gratuitement !

Les règles du screenshot

Les règles sont très faciles, il faut :

  • une image de 880px * 660px, pas un pixel de plus ni de moins !
  • au format .png
  • nommée « screenshot.png » et pas autres choses

Comment créer son screenshot avec AFFINITY DESIGNER

Comme photoshop et illustrator commencent à me coûter très cher, je me suis auto-formée sur AFFINITY DESIGNER et AFFINITY PHOTO qui sont des logiciels concurrents et extrêmement à la pointe mais dont on achète le logiciel une fois seulement (plutôt que de payer tous les mois du côté de chez ADOBE)…

Je vous propose alors un tuto qui vous montrera, pas à pas, la manière pour créer ce screenshot :

screenshot

Étape 1 – Ouvrir Affinity Designer

af-etape-1

Étape 2 – Ouvrir une nouvelle aire de travail : FICHIER > NOUVEAU

af-etape-2

Étape 3 – Configurer la page : PRÉRÉGLAGE DE LA PAGE > WEB

af-etape-2-1

Étape 4 – Renseigner les dimensions de l’image : DIMENSIONS > LARGEUR 880px / HAUTEUR 660px / 72 DPI > puis OK

af-etape-2-2

Étape 5 – L’aire de travail est maintenant créée.

À droite, dans l’onglet CALQUES, l’espace est vierge.

af-etape-3

Étape 6 – Dessiner un rectangle de la même taille que l’aire de travail.

Grâce à l’outil dédié. Cela fera office de background.

etape-4-bis

Le calque du rectangle apparaît à droite. On peut le cocher ou le décocher afin qu’il soit visible ou non.

af-etape-4

Étape 7 – Définir le fond : choisir la couleur du REMPLISSAGE

af-etape-5

Étape 8 – À l’aide de l’outil TEXTE ARTISTIQUE, écrire le message désiré.

af-etape-6

Étape 9 – Le calque du texte apparaît dans le menu de droite (CALQUES).

af-etape-7

Étape 10 – Paramétrer le texte grâce à l’éditeur : choisir la police, la taille, l’alignement …

af-etape-8

Étape 11 – Ajouter un cadre

Outil RECTANGLE puis lui donner la dimension désirée soit en tirant sur les angles (manière grossière) ou soit en définissant une largeur (L:) et une hauteur (T:) tout en bas de la fenêtre à droite (manière plus précise).

af-etape-9

Étape 12 – Paramétrer le cadre

Pas de REMPLISSAGE, épaisseur du trait, types de coins etc…

af-etape-10

Étape 13 – Ajouter un fond

FICHIER > OUVRIR > choisir le fichier sur votre ordinateur > cliquer sur OUVRIR.

af-etape-11

Étape 14 – Un nouvel onglet apparaît dans le navigateur d’AFFINITY DESIGNER.

Le déverrouiller en cliquant sur le cadenas puis le copier grâce au raccourci « cmd+c »

af-etape-12

Étape 15 – Retourner à l’onglet de l’image en cours de création (<sans titre>) puis coller le fond grâce au raccourci cmd+v.

Le calque apparait dans l’onglet CALQUES

af-etape-13

Étape 16 – Donner une ombre au texte en cliquant sur son calque puis se rendre à l’onglet EFFETS

af-etape-14

Étape 17 – Dans l’onglet EFFETS, cocher le style OMBRE EXTERNE

af-etape-15

Étape 18 – Glisser les curseurs RAYON et DÉCALAGE et changer la COULEUR si besoin.

af-etape-15-1

Étape 19 – Une fois l’image terminée, aller à FICHIER > EXPORTER

af-etape-16

Étape 20 – Choisir le format PNG, vérifier la TAILLE, la ZONE (doit être sur « document entier » puis cliquer sur EXPORTER

af-etape-17

Téléchargez le fichier Affinity Designer

Voilà le résultat final, et comme LA WEBEUSE pense à vous, je vous propose de télécharger gratuitement mon fichier AFFINITY DESIGNER qui a permis de faire ce tuto… Vous trouverez chacun des calques prêts à être modifiés…

commodo quis, accumsan et, tempus ut dapibus commodo eleifend ultricies

Pin It on Pinterest

Shares
Share This