32
Créer un tableau stylé pixel art pour son site internet
Voici un petit tutorial très simple pour créer un tableau tout joli pour son site internet.
- Fichier PSD : tutorial 212
- clic pour télécharger le fichier source Photoshop utilisé dans ce tutorial
ETAPE 1 Je crée un nouveau document, sur fond blanc, je crée un rectangle avec l’outil sélection et je vais dans le menu édition et contour.
Je crée un contour de 1 pixel avec la couleur : #a6a09d.
ETAPE 2
Je crée un nouveau calque et je crée toujours avec la sélection un rectangle contenu dans mon contour. Je le remplis de noir puis j’ajoute un style de calque : calque > style de calque > incrustation de dégradé.
Avec l’outil déplacement je descends mon calque de 1 pixel pour créer une ligne blanche en haut (voir l’image ci-dessous).
Pour voir la configuration de mon dégradé, je vous invite à télécharger le fichier source présent en téléchargement en haut de cette page.
ETAPE 3
Je crée un nouveau calque et je remplis une autre bande de gris.
ETAPE 4
Je supprime le contour à droite, à gauche ainsi qu’en bas.
ETAPE 5
Je crée un nouveau calque et je vais créer des séparations, elles sont composées d’une ligne grise et juste à côté d’une ligne blanche. Etudiez bien le placement des pixels en zoomant l’image ci-dessous.
ETAPE 6
Je descends ma composition et je crée un nouveau calque. Avec la sélection je crée une bande en haut de mon image que je remplis de noir. J’applique ensuite un style de calque : calque > style de calque > incrustation de dégradé.
Pour voir la configuration de mon dégradé je vous invite à télécharger le fichier source présent en téléchargement en haut de cette page.
ETAPE 7
Je crée un nouveau calque et j’ajoute une ligne en haut, Composée de trois lignes de 1 pixel de hauteur chacune : Une ligne grise, une gris-claire et enfin une blanche.
ETAPE 8
Une fois rempli, notre joli tableau peut ressembler à ceci … Pas mal non ?
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 7 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
5 octobre 2007 13:04, par Valck
Très joli ! Mais il faut y aller pour voir la différence entre le blanc et la couleur que tu as mis en haut et en bas ! Mais très bonne idée quand même, tu as une imagination de folie ! ^^ Bonne continuation, grand frère WKS
Répondre
-
-
30 novembre 2008 14:17, par Moonlight-Angel
Très bon tutorial, mais j’aurais juste une petite question :
Comment fait-on pour ajouter du texte sur ce tableau ??? CSS ?
Merci d’avance
Moonlight-Angel
Répondre-
1er décembre 2008 10:17, par Wonka
La mise en page en utilisant le CSS les données en utilisant HTML !
Répondre
-
