Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Graphisme > Divers > Les boites de vos logiciels sur votre site > Lecture du tutoriel

Les boites de vos logiciels sur votre site

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avatar
Auteur : TD
Note : 19 / 20 (7 votes)
Visualisations : 6 895

Plus d'informations Plus d'informations
Avez-vous déjà remarqué que certains sites exposent leurs logiciels avec des boites en 3D ? Si vous êtes développeur, vous avez sans doute voulu présenter vos programmes de façon plus professionnelle qu'un simple logo ou une bête capture d'écran...
Mais les logiciels permettant de le faire ne sont pas gratuits, comme True BoxShot (ce qui est dommage car il peut aussi faire les images de manuels, de disques, de boites DVD, de cartes de crédit, de capture d'écran en perspective...).

La solution présentée ici, bien que ne gérant que les boites, les sphères et les cylindres (pour les CD, par exemple), ne nécessite qu'un logiciel : Paint.NET.

Voici ce que vous saurez faire à la fin du tuto :
Image utilisateur
Sommaire du chapitre :
Icône du chapitre

Le logiciel

Bien. Si vous n'avez pas encore Paint.NET, téléchargez-le et installez-le. Il vous faut IMPERATIVEMENT Windows XP avec le SP 2 et le Framework .NET 2.0. Si vous êtes sous Linux, sous Mac ou que vous n'avez pas la configuration minimum requise, utilisez le tuto sur Framasoft (pour GIMP, donne de moins bons résultats à mon goût).


Il va sous falloir aussi 2 plug-ins :

Vous placerez ces fichiers dans le dossier "Effects" du répertoire d'installation du logiciel. Procéder de même pour tous les plug-ins.

Si vous ne le connaissez pas, voici comment se présente Paint.NET :
Image utilisateur
Ca change de ce bon vieux Paint, hein ? :p

Dessinez, pliez, collez !

Le packaging



Pour le moment, vous n'êtes pas obligé d'ouvrir Paint.NET.

Vous allez devoir créer les faces de votre boite selon le schéma suivant :
Image utilisateur

La hauteur du rectangle de dessus, de dessous, ainsi que la largeur des tranches doivent être égales. Les faces doivent aussi avoir les mêmes dimensions.

Sachez que j'utiliserai cette image pour ce tuto, mais vous pouvez utiliser n'importe quelle image.

Encore une chose : pensez à relever les dimensions (en pixels) des différentes parties de la boite.


La commande à l'usine



Maintenant, ouvrez votre image avec Paint.NET. Vous devez avoir installé les plug-ins décrits plus haut dans le tuto.

L'effet 3D



Cliquez sur Effets, puis sur Render et enfin sur Shape3D.
Vous devriez avoir la fenêtre ci-dessous et une sphère sur l'image.
Image utilisateur


Rendez-vous dans l'onglet Box pour remplacer la sphère par une boite.

Dans le groupe Texture map, sélectionnez Dice map (float).

Dans le groupe Box size, entrez les paramètres comme suit :
Vous pouvez bien entendu faire ça au pif, c'est ce que j'ai fait.

Vous pouvez augmenter la valeur de Rounded Edges pour plus de réalisme. Je l'ai mis à 0,9 mais c'est vous qui voyez.


Effets sur la boite

Dans la deuxième partie de la fenêtre, cherchez les 3 cercles. Il doit y en avoir un avec la valeur Y sélectionnée.
Faites bouger la barre horizontale pour orienter votre boite différemment.

Je vous conseille d'activer l'anti-aliasing. Cela vous évitera d'avoir du crénelage. En effet, les arrêtes seront lissées au lieu de ressembler à un escalier (Allez ici pur plus d'informations)

Vous pouvez régler la lumière comme bon vous semble. Je ne vous l'expliquerai pas, ça dépend du goût de chacun.

Cliquez maintenant sur OK et attendez un peu.


Vous avez terminé votre boite !


Voilà ce que j'ai obtenu :
Image utilisateur

N'oubliez pas d'enregistrer en PNG, c'est important pour ce qui va suivre.

Idées d'amélioration

Pour améliorer vos images de boites, vous pouvez y ajouter des objets comme des disques, un arrière-plan, etc...

Le reflet


Vous devez normalement posséder le plug-in Wet Floor Effect.

Avant toute chose, dupliquez le calque en cliquant sur la première icone de la fenêtre des calques.
Ceci fait, renommez ce nouveau calque en Reflet (double clic sur le calque). Cliquez ensuite sur Effets, Déformer puis Reflecion. Cliquez sur OK et c'est fini !
J'obtiens ceci :
Image utilisateur


En ce qui concerne les objets ajoutés comme des CD, vous pouvez télécharger le pack de PNG de Crystalxp, Crystal Project (900 images classées par taille puis par thème). Vous pouvez le télécharger sur cette page.

Voilà ! Ce tuto est fini. J'espère qu'il vous à plu et que vous me mettrez 20/20 :-° .
Pour tout problème, envoyez-moi un MP.

Voici l'image finale du tuto :
Image utilisateur
Retour en haut Retour en haut


Créé : le 30/09/2007 à 15:04:50
Modifié : le 22/08/2008 à 16:08:54
Avancement : 100%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | Fil RSS | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 465 Zéros connectés | Requêtes SQL 9 requêtes | Temps de génération de la page : Total (SQL) 0.0644s (0.0485s)