Interface Pixel’Art

Tutoriels Photoshop

De la conception graphique à la conception HTML, ce tutorial vous explique comment créer des menus ou des petites fenêtres dans un style Pixel’Art !

Publié il y a déjà trop longtemps…

Ouvrez un Nouveau Document avec un fond blanc.
Sur un nouveau calque, Sélectionnez un carré de la largeur qui vous plaît.
Remplissez la sélection de la couleur de votre choix.

Contractez la sélection de 5 pixels.
Et supprimez.

Appliquez un contour noir d’1 pixel en « extérieur »

Ensuite, sur un nouveau calque et avec l’outil Trait, tracez des traits blancs sur toute la largeur comme sur l’image à gauche.

Sélectionnez l’intérieur du carré, et sur un nouveau calque, remplissez la sélection d’un Gris plus clair que celui utilisé précédemment.
Placez ce calque en dessous de tout les autres, juste au-dessus du calque de fond (si vous en avez un !)

Faites apparaître les Règles (Ctrl + R) et placez-les comme ceci. Attention ! Elles doivent être placées au pixel près ! Zoomez jusqu’à 1600% ;-)
Ensuite, il faut découper les images… Aplatissez tout les calques, Sélectionnez un rectangle indiqué par une flèche bleu (cf. image) et Appuyez successivement sur Ctrl+C, Ctrl+N et Ctrl+V. Un nouveau document s’est ouvert et vous y avez collé votre rectangle…
Enregistrez cette nouvelle image au format GIF…
Recommencez l’opération pour le 2ème rectangle.

Maintenant, prenez l’outil de Sélection 1 rangée :
Cliquez vers le milieu de l’image et supprimez, à l’aide du rectangle de sélection, le blanc à gauche et à droite de l’image.
Puis, appuyez successivement sur Ctrl+C, Ctrl+N et Ctrl+V et Enregistrez cette nouvelle image au format GIF.

Passez maintenant à votre éditeur HTML
Créez un tableau d’1 colonne et 3 rangées et insérez vos images précedemment créee comme sur l’image de gauche. Attention ! l’image du centre doit être insérée en image de fond !
N’oubliez pas d’appliquer 0 en taille de bordure, marge interne et espacement entre les cellules !

Insérez une IFRAME dans la cellule du centre :

<iframe name="main" src="/wp-content/images/tutoriels-photoshop/interface-pixelart/iframe.htm" width="185" height="245" scrolling="auto" frameborder="0" marginwidth="0" marginheight="0"></iframe>

Insérez du CSS pour la barre de navigation :

<style type="text/css"> body { 	scrollbar-face-color: #b9b9b9; 	scrollbar-highlight-color: #ffffff; 	scrollbar-shadow-color: #000000; 	scrollbar-3dlight-color: #000000; 	scrollbar-arrow-color: #000000; 	scrollbar-track-color: #d9d9d9; 	scrollbar-darkshadow-color: #d9d9d9; 	overflow: auto; } </style>

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

hada46

c’ est plutot la 2 ème partie qui est interressante
bracor

Non, rien n’est interessant, ce tuto explique comment réaliser de manière inadaptée et avec un code imonde une boite inutile… Les tableaux doivent êtres réservés à des donées tabulairs, les frames sont la plus gande honte du web et les propriétés de barres de défilement sont propriétaire du navigateur Internet Explorer, 2ème honte du web.
Bref ce tuto est digne du web 0.2 … Je me dis parfois que certaines personnes devrait réaprendre à coder à partire de zéro quand on voit leur code source.

Shemu

J’espère que tu as noté que ce tuto à 3 ans, qu’à l’époque plus de 95% de gens utilisaient IE et que la mise en forme en tableaux était de rigueur.Cela dit, peut-être aurais-tu le courage de refaire ce tuto beaucoup plus simplement avec les CSS puisque tu m’as l’air d’être un super codeur ?

FREUD

LOL :D
Garreck

Bracor, si tu sais mieux faire, fais-le !
yasoft

bravoo!!
le seul probleme c’est que c’est avec les frame et que donc c’est pas tres ideale pour google
calao

Comment ont fait pour appliquer un contour? Je suis au 03. Merci!
ploko

bracor > La plupart des sites ayant un design de 2 ou 3 collonnes utilisent les tableaux… Et, je ne voudrais pas dire, mais si tu possèdes un forum et que tu es assez curieux pour ouvrir le code source, tu te diras : "Ah, mais c’est des gros nazes, ils utilisent les tableaux…" Ben oui, mon pote, maintenant, pratiquement tous les sites web à grands usages font leur deisgn avec les tableaux… Seul point positif que tu as dit : le frames, bof, bof… L’attribut "overflow" marche aussi pour les "divs"

Les commentaires sont clos.