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 (dans 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

Etape 1
Ouvrir Affinity Designer af-etape-1
Etape 2
Ouvrir une nouvelle aire de travail : FICHIER > NOUVEAUaf-etape-2
Etape 3
Configurer la page : PRÉRÉGLAGE DE LA PAGE > WEBaf-etape-2-1
Etape 4
Renseigner les dimensions de l’image : DIMENSIONS > LARGEUR 880px / HAUTEUR 660px / 72 DPI > puis OKaf-etape-2-2
Etape 5
L’aire de travail est maintenant créée. À droite, dans l’onglet CALQUES, l’espace est vierge.af-etape-3
Etape 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

Etape 7
Définir le fond : choisir la couleur du REMPLISSAGEaf-etape-5
Etape 8
À l’aide de l’outil TEXTE ARTISTIQUE, écrire le message désiré.af-etape-6
Etape 9
Le calque du texte apparaît dans le menu de droite (CALQUES).af-etape-7
Etape 10
Paramétrer le texte grâce à l’éditeur : choisir la police, la taille, l’alignement …af-etape-8
Etape 11
Ajouter un cadre : outil RECTANGLE puis lui donner la dimmension 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
Etape 12
Paramétrer le cadre : pas de REMPLISSAGE, épaisseur du trait, types de coins etc…af-etape-10
Etape 13
Ajouter un fond : FICHIER > OUVRIR > choisir le fichier sur votre ordinateur > cliquer sur OUVRIR.af-etape-11
Etape 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
Etape 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 CALQUESaf-etape-13
Etape 16
Donner une ombre au texte en cliquant sur son calque puis se rendre à l’onglet EFFETSaf-etape-14
Etape 17
Dans l’onglet EFFETS, cocher le style OMBRE EXTERNEaf-etape-15
Etape 18
Glisser les curseurs RAYON et DÉCALAGE et changer la COULEUR si besoin.af-etape-15-1
Etape 19
Une fois l’image terminée, aller à FICHIER > EXPORTERaf-etape-16
Etape 20
Choisir le format PNG, vérifier la TAILLE, la ZONE (doit être sur « document entier » puis cliquer sur EXPORTERaf-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…

 

Direction les Freebies pour obtenir le fichier Affinity Designer

 

Créer son screenshot pour Child Theme WordPress avec Affinity Designer
5 pour 1 vote

Ne partez pas ! Ça pourrait vous intéresser :