I'm a title. Click here to edit me

« Garde la boite, ça peut servir un jour »

L’exercice d’aujourd’hui aura donc pour thématique ma matière de prédilection, qui comme vous l’aurez certainement compris, et qui se définit comme étant le packaging-modding, ou plus précisément la création de boites de jeux vidéo. Boites de jeux endommagées, perdues, ou difficile à retrouver… Il est grandement l’heure de redonner un coup de jeune à votre collection n’est-ce-pas ? Que se soit pour reproduire, créer, customiser, ré-inventer ces boites qui vous ont fait aimer ce jeu avant même d’y avoir joué, je vous invite à révéler votre fibre artistique, au bénéfice de l’aspect esthétique de vos étagères.

Pour l’occasion et comme le choix m’est accordé, nous commencerons par habiller les jeux de la grande reine des 16 bit, j’ai nommé, la Super Nintendo ! Toutefois attention ! Je précise bien « post production », car oui ! enfin non, nous ne construirons pas de boite cette fois-ci, nous allons pour commencer apprendre à les concevoir numériquement, c’est-à-dire sur logiciels. Pour cela, ouvrez vos cartables et sortez votre photoshop ou autre Gimp, bref votre outils préféré de retouche numérique.
 

 

Minute papillon!

Voici quelques bases rudimentaires que vous vous devez de connaitre avant d’entamer votre première création :

Sachez qu’il existe plusieurs formats et plusieurs styles de boites Super Nintendo / Super Famicom. Notons que les packagings Japonais adoptent des dimensions différentes de celles des versions de boites européennes et américaines. Nous nous concentrerons sur le format Européen du style PAL, version Française (bande noire, logos et informations à gauche, fenêtre dédiée pour le visuel, fond en couleur). Cependant les techniques utilisées pourront être reproduites sur tout autre type de boites de jeux.

Certains sites spécialisés rassemblent déjà une grande quantité de boites de jeux de Super Nintendo prêtes à imprimer, auquel cas aucun travail de post production n’est nécessaire. Pour le reste, vous pourrez trouver différents Artworks, visuels et logos par le bais des plateformes de recherche d’images comme Google image, ou des sites plus spécialisés comme Deviantart.com, Giantbomb.com, filer etc…

Attention ce n’est pas le carnaval ! S’il s’agit d’une reproduction, le mieux sera de récupérer un fichier scanné de la boite d’origine, mais si vous décidez d’apporter votre touche personnelle, il y a des choses à ne pas faire ! Pour en savoir plus, reportez vous aux précautions d’usage détaillées à la fin de ce tuto.

Ce tutoriel est soumis à des consignes d’utilisations que vous retrouverez également dans les précautions d’usages.  Merci de les lire avant toute chose.

Bien ! Il est tant d’entrer dans le vif du sujet !
 

 

Click & save

Comme je me doute bien que vous n’avez pas tous fait les beaux arts option arts graphiques (moi non plus d’ailleurs), j’ai décidé de vous mâcher un peu le travail. Je mets donc à votre disposition des templates vierges de boites de jeux Snes. Vous trouverez une version imprimable au format A4 (sur 2 feuilles) et une version A3 (plutôt destinée à l’impression professionnelle, sauf pour les plus chanceux d’entre vous disposant d’une imprimante A3). Nan nan, c’est rien je vous en prie.

Commencez donc par télécharger le modèle adapté à vos besoins (en fonction du type d’impression choisi).

Lien templates A4 -     Lien templates A3

Et ne me laissez pas ça trainer sur le bureau, on range ses documents s’il vous plait !
 

Quand rouge et vert font jaune

Préparation du fichier :

Pour commencer, ouvrez le template dans votre logiciel.
Pour moi ça sera la démo de Photoshop CS4 (pour des raisons pratiques).

Bien, parlons en de ce fichier. Vous constaterez qu’il s’agit ici d’un fichier au format .png et ce petit détail a son importance. La bonne nouvelle c’est que le format PNG conserve les informations de transparence de l’image, ce qui nous sera bien utile puisque vous remarquerez que j’ai laissé la zone du visuel vide. Vous pourrez ainsi y placer le visuel de votre choix.

Mais avant cela il vous faut préparer le fichier. Car la mauvaise nouvelle, c’est que le format png ne supporte pas le mode de couleur CMJN, indispensable à la conception et à l’impression d’un document. Ce dernier est en « couleurs indexées », ce qui ne convient pas à votre imprimante qui utilise le cyan, le magenta, le jaune et le noir (voir les précautions d’usage). Configurez donc le mode colorimétrique en CMJN :

Dans image -> mode -> CMJN (variable selon les logiciels)
 

Une fois l’opération effectuée, enregistrez votre fichier en format natif : .psd ou .xcf selon le logiciel utilisé.

Enregistrer sous -> nommez le fichier -> utilisez l’extension du logiciel

Concernant la résolution et le format du document ne vous inquiétez pas, j’ai déjà fait le nécessaire. Et oui, on est comme ça chez scrolling !

Ah je vous sens impatients ! Ça en fait du blabla pour réaliser une simple boite hein ? Oui mais sachez que c’est dans le détails que l’on apprécie la qualité d’un produit… Allez j’arrête de surenchérir, passons à la partie intéressante, le coloriage !

Commençons donc par coloriser le fond de la boite. Pour cela, rien de plus simple : sélectionnez la couleur de votre choix dans le nuancier ou la palette de couleurs disponible dans votre logiciel et cliquez sur la zone en question, pour cela :

Sélectionnez : Outil « pot de peinture »

 

Une fois l’outil pot de peinture et la couleur sélectionnés, cliquez sur la zone grise pour appliquer la couleur.
Pof ! Votre boite a trouvé sa couleur, oh ! du rose… Félicitation, c’est une fille !
 

N’hésitez pas à faire plusieurs essais de teintes, plus clair, plus sombre, plus ou moins saturé etc.. jusqu’à obtenir « la » couleur parfaite.

Sachez que pour une impression parfaite la totalité des pourcentages de vos 4 couleurs ne doit pas dépasser 300%
Les plus débrouillards pourront y incruster des textures ou des motifs pour agrémenter l’arrière plan à l’aide d’un masque.

« PAUSE »

Donc… pour les plus téméraires, petite parenthèse pour la création d’un masque :

- Importez la texture ou les motifs sur votre document dans un nouveau calque.

- Retournez sur le calque de la boite et sélectionnez la zone colorée de la boite à l’aide de l’outil baguette magique.

- Tout en conservant la sélection, dirigez vous à nouveau vers le calque de votre texture (ou motifs) et cliquez sur l’icône « masque de fusion » en bas de votre palette de calques.

- Tout en conservant la sélection, dirigez vous à nouveau vers le calque de votre texture (ou motifs) et cliquez sur l’icône « masque de fusion » en bas de votre palette de calques.

Si vous ne maitrisez pas encore suffisamment l’usage des calques et l’importation des fichiers ne paniquez pas, ça vient ! »

« START »
 

 

Bien !
Nous allons maintenant insérer l’image principale. Que cela soit un scan, ou pour diverses illustrations récupérées sur la toile, la manipulation restera la même, et c’est là qu’intervient l’utilité de la fenêtre transparente du document. Nous allons travailler sur 2 niveaux de superposition grâce aux calques.

Commencez par ouvrir votre(vos) image(s) dans votre logiciel.

Puis à la manière d’un « glissé / déposé », importez les images sur votre template avec l’outil « flèche » (ou sélection)
 

Une fois cela fait, dirigez-vous dans la fenêtre des calques, et faîtes glisser le calque de l’image sous le calque du template.

Vos images apparaissent alors sous le patron de la boite mais sont visibles en transparence dans la zone vierge.
 

Vous pouvez à présent les re-dimensionner, re-cadrer, adapter et agencer à votre guise dans la zone conçue à cet effet.

Pour modifier la taille de l’image, allez dans : édition -> transformation manuelle. Ou [ ctrl + T ]. Maintenez la touche « shift » pendant cette manipulation afin de conserver les proportions de l’image.
Pour la re-cadrer, servez vous tout simplement de l’outil conçue à cet effet, sélectionnez la zone souhaitée, puis faites « entrée »

Je précise qu’il est souvent préalablement indispensable de détourer ou de nettoyer les images avant de passer à la composition.
Pour cela quelques outils très utiles seront là pour vous servir :

Le pinceau : Vous permet de colorier. Choisissez la couleur, faites varier sa forme, son diamètre, son opacité, et badigeonnez les zones à remplir en cliquant. Qui n’a jamais perdu quelques minutes sur Paint hein ?

La plume : Très utile pour le détourage, elle vous permet de créer un tracé (un contour), afin d’isoler un élément du reste de l’image.
Une fois le tracé effectué sur le calque de l’image à détourer, convertissez-le en sélection (en pointillé) : « ctrl + entrée« . Puis sélectionnez la partie à effacer grâce à l’option « intervertir la sélection » : « ctrl + shift + i ». Supprimez ensuite le reste de l’image en cliquant tout simplement sur la touche « supprimer ».

Le tampon de duplication : Il permet de reproduire une portion d’image. Alt+Clic pour définir la source, clic pour reproduire. Plusieurs clics sont souvent nécessaires. Une croix vous indiquera la portion recopiée. Cet outil permet par exemple de supprimer des détails indésirables tels que les déchirures, les taches ou autres aspérités.

L’outil pièce : Présent sur les logiciels les plus récents, cet outil vous permet de sélectionner une zone pour la reporter sur un autre endroit de l’image. Le tout parfaitement incrusté, sans démarcation. Très proche dans la théorie de l’outil « tampon, celui ci est beaucoup plus pratique pour les grandes zones, mais moins précis.

L’outil goute d’eau : Vous permettre de flouter certaines parties de l’image (trop pixélisées par exemple). Et bien d’autres outils que je vous invite à tester par la suite ! Nan c’est vrai quoi, je ne vais pas vous recopier la doc’ non plus !
 

Les images récupérées ne sont parfois plus très fidèles à leur source originale. Je parle ici des couleurs et contrastes, ravagés par les scans et multiples encodages. Pour remédier à cela réajuster les teintes et les niveaux afin de redonner la chaleur et l’intensité initiale de vos visuels.

Première étape, le rehaussement ! On redonne vie aux contrastes ! Que les blancs soient blanc ! et que les noirs soient noir !
Pour cela utilisez les niveaux dans :
Image -> réglages -> niveaux (ctrl+L)

Déplacez les courbes sans trop exagérer, l’important c’est que l’images retrouve son caractère d’antan avec de beaux aplats de noir et de blanc uniformes, que les contours noirs soient bien dessinés, sans pour autant dénaturer le reste du visuel et les couleurs alentour.

Seconde étape, le réajustement des couleurs. Dans Image -> réglages -> saturation (ctrl+U)
Faites varier les teintes, jouez avec la saturation jusqu’à ce que les couleurs vous paraissent les plus fidèles possible.

Vous pouvez régler les teintes indépendamment les une des autres. Par exemple, si les rouges vous paraissent trop vifs, sélectionnez le magenta, réduisez la saturation, puis faites de même avec le jaune.
 

Voilà que votre boite (du moins sa face recto) ressemble de plus en plus à une vraie de vraie ! On tiens le bon bout ! Mais ne relâchez rien, nous sommes encore loin d’en avoir fini !

Bon, nous allons parler des titres ou logo du jeu si vous préférez. Il va parfois falloir les retaper manuellement à l’aide de caractères de typographie.

Écoutez moi bien, le conseil que je m’apprête à vous donner est valable « à vie » dans n’importe quel cas de figure ! Voici les 2 typographies qui vous feront passer pour un gros naze trop beauf et donc à ne JAMAIS utiliser, même pour un simple courrier à la préfecture ! « COMIC sans MS » &  « Mistral » Vous pouvez tout de suite les effacer de votre ordinateur !

Ceci étant dit, vous pourrez facilement trouver la typographie se rapprochant le plus possible de celle du titre de votre jeu sur des sites grand publics tel que dafont.com qui répertorie et classe par thème des centaines de milliers de polices de caractère gratuites.

Bien, une fois la police de vos rêves installée, testez-la ! Direction outil Texte :

Ajustez le corps, la taille, la graisse, l’interlignage (l’espacement entre les lettres) etc, grâce à la fenêtre « caractère ».

Tentez la couleur, les dégradés, les contours grâce aux nuancier ou au effets applicables sur les calques bouton ou dans “Calque -> Style de calque”

Tout est permis : peaufinez votre jeu de typographie de façon à ce que votre titre soit crédible à souhait.
Toujours dans l’esprit « Super Nintendo années 90″. Bien sûr, n’abusez pas des effets !
 

Ajoutez (importez, détourez) quelques artifices si vous le souhaitez pour enjoliver et soutenir le titre. (tout est relatif, cela dépend du type de jeu et de son titre évidemment)

N’oubliez pas les mentions “Jeu entièrement Français”, « Jeu en Anglais »,  « Mode d’emploi en Français » etc…
 

 

Si il y a bien un élément qui peut vous faire savoir si un jeu va vous plaire et répondre à vos gouts, c’est bien l’emblème de l’éditeur arboré sur sa face avant (sauf rares exceptions), le logo ! Ne les négligez jamais, personnellement je me plais même à les rajouter quand ils n’y sont pas. Ouhou ! Que de folies ! Que ceux-ci proviennent de Nintendo, Rare, Konami, Namco, Banpresto ou autre, sélectionnez la version de meilleure facture que vous puissiez trouver sur la toile.

Importez vos logo sur le template comme vous l’avez fait avec le visuel.
 

Et bien les geeckos je crois qu’avec tout ça vous avez de quoi décrocher un poste comme maquettiste chez Nintendo non ? Non j’en doute, Mouahah ! Mais en tout cas je l’espère, suffisamment de connaissance pour satisfaire votre créativité et rénover votre collection !

Avec toutes les bases précédemment énoncées vous devriez logiquement n’avoir aucun problème pour finaliser la face arrière de votre packaging. Nous allons quand même faire un petit debriefing histoire de poser tout cela à plat.

J’ai optimisé le fichier de la même manière que le précédent, c’est à dire avec bandes noires, les logos Nintendo et d’autres fioritures. La résolution est également déjà optimisée pour de l’impression professionnelles ou personnelles. Vous retrouverez les petites fenêtre vides pour y placer les screenshots du jeu.

Les indications à suivre sont donc identiques:

- Pot de peinture pour coloriser le fond de la boite.

- Importer les visuels et screenshots récupérés sur internet ou capturés par le biais d’un émulateur, puis les faire glisser sous le calque du template pour les insérer sous les petites fenêtres transparentes.
 

- Agencer vos visuels pour meubler l’espace vierge et créer une belle mise en page.

- Saisir les textes et descriptions à l’aides des polices de caractères et des options de caractères/paragraphes.

- Et pour finir, replacer les logos si vous le souhaitez.

Voilà, n’allez pas croire que je bâcle cette partie, mais il s’agit tout simplement du même type d’opérations à effectuer. Cependant, je vous conseille de vous documenter sur les différents types de mises en page utilisées pour les face verso de boites afin de vous inspirer davantage dans vos compositions.
 

Les tranche arborent habituellement le titre du jeu et parfois une vignette de l’illustration principal.
Pour cela copiez collez votre titre (ou/et votre visuel) si vous l’avez réalisé manuellement et re-dimensionnez le tout en l’inclinant « à la verticale » toujours avec l’outils « transformation » ctrl+T

Si le titre de votre jeu fait partie du visuel principal, je vous conseil alors de le détourer afin de l’isoler du reste de l’image et de le dupliquer de la même façons sur chacune des tranches.

Pour dupliquer un élément : Une fois détouré et sélectionné en pointillé, déplacez le grâce à l’outil flèche tout en maintenant la touche « atl ». Relâchez votre clic à l’endroit ou vous souhaitez le dupliquer. Voilà c’est fait !
 

Votre boite est fin prête à être imprimée ! Enfin presque : veillez à bien la sauvegarder dans le format natif de votre logiciel afin de conserver toutes les paramétres et de ne pas écraser les calques. Donc oubliez le jpeg, png, gif ou autre format pour l’instant.

Une fois le/les fichier(s) enregistrés, vous pourrez alors le ré-ouvrir et le ré-enregistrer en copie en jpg qualité maximum (en prenant garde à bien conserver les informations colorimétrie CMJN, on appel ça un « profil ») pour l’imprimer à partir de votre interface d’imprimante par défaut.

Qu’elle soit personnelle ou professionnelle, l’impression et la construction de vos boites seront prochainement détaillées dans un prochain tuto, en attendant, bon travail,  et amusez vous bien !

Haruko
 

Concernant les visuels : Prenez garde à bien utiliser une illustration / un Artwork propre au jeu en question.
Par exemple : disons que la boite que vous souhaitez réaliser concerne le jeu « Street Fighter Alpha 2″, n’allez pas utiliser des images de Ken ou Ryu tirées des Artworks de la version 3 ou d’un Marvel vs Capcom. Sélectionnez les visuels avec justesse, n’utilisez que des illustrations conçues initialement pour ce jeu. Le but étant d’avoir une boite crédible, en accord avec son époque.

Concernant les logos : Les société de production et d’édition on parfois changées de logo, ou mutées, comme par exemple « Squaresoft » et « Enix » devenues « Square-Enix ». Veillez à bien utiliser le logo en vigueur à la date date ou à été développé le jeu.

Les adaptations : Si vous décidez d’adapter un format de boite Japonaise en Européenne n’abusez pas de la déformation. Une image aplatie ou déformée perd toute son charme. Agrandissez ou réduisez de manière homothétique (en conservant les proportions). Autre cas: si vous ne trouvez pas d’image suffisamment grande, préférez la recadrer, la détourer et la ré-agencer, quitte à ce qu’elle n’occupe pas toute la place, mais sans la distordre.

La résolution : Pour obtenir une qualité d’impression correcte, qu’elle soit maison ou professionnelle, une bonne optimisation de vos fichiers est indispensable. Il est important de travailler avec des images de qualité suffisante afin de ne pas se retrouver avec une bouillie de pixels sur le papier. La règle d’impression basique est de produire des images en environ 300 DPI pour l’impression, soit 118,11 pixels par centimètre. Si votre visuel doit mesurer 8 cm de large, votre image ne devra donc pas être inférieure à 945 pixel de large (118,11px X 8cm). Vous n’avez rien compris, n’est ce pas ? Tant pis pour vous, je ne le répéterai pas ! Wikipedia le fera pour moi : http://fr.wikipedia.org/wiki/Point_par_pouce

La colorimétrie : Votre document doit impérativement être enregistré en quadrichromie, soit en mode CMJN (c’est une information de réglages des couleurs placée en mémoire dans le fichier), Cyan Magenta Jaune Noir, les couleurs utilisées par votre imprimante ou les machines d’imprimerie. Et non pas en mode RVB destiné à l’affichage sur écrans. Pitié, ne m’en demandez pas plus, j’ai toujours détesté les cours de techno, je risque de ne pas être très pédagogue. Wikipedia s’en chargera encore une fois très bien: http://fr.wikipedia.org/wiki/Quadrichromie.
 

 

Termes et conditions

Attention, l’usage d’une boite réalisée avec ce tutoriel est exclusivement personnel. Il est formellement interdit et punissable par la loi d’utiliser une copie ou modification de packaging non officiel dans un but commercial ou pour en tirer quelconque bénéfice financier. En utilisant ce tutoriel pour concevoir une boite de jeu, vous assumez l’entière responsabilité de vos actes ultérieurs. Ce tutoriel est destiné à restaurer d’anciennes boites de jeu personnelles endommagées ou perdues de jeux dont vous aurez préalablement fait l’acquisition légalement. Le site scrolling.fr et l’auteur de ce tutoriel se déchargent de toute responsabilité