Photoshop

Pixel Art

Pixel Art, c'est quoi ce nom barbare ? Un tutorial enfantin permettant de réaliser des boutons et des interfaces avec un rendu très fin et très léger à l'export. Un courant suivi par de nombreux sites (dont celui-ci). Il vous faudra quand même un peu de patience pour créer une interface complète.

 
1 Inutile de connaître tous les filtres et raccourcis de Photoshop, pour ce tutorial, vous aurez simplement besoin de l'outil "crayon" et la plus petite taille de brosse.
2 Nous allons donc commencer par créer un bouton de forme rectangulaire très simple. Créez un nouveau document (ctrl+N) de taille assez petite (50*50) et zoomez a 300%. Tapez votre texte en utilisant une des mini typos de la section download. N'oubliez pas de décocher l'option lissé et de choisir la taille minimum (6 ou 8 suivant la typo utilisé).
3 Créez un nouveau calque que vous placez sous votre texte, choisissez la couleur générale de votre bouton et dessinez un rectangle autour de votre texte. La taille du rectangle doit faire un pixel de plus que vos lettres. Pour être plus précis, vous pouvez afficher la grille (ctrl+#). Ici, j'ai zoomé à 500%.
4 Maintenant le relief. Voici d'abord comment choisir vos couleurs claires et sombres. Vérifier que vous avez bien votre orange en couleur de premier plan et cliquez sur le sélecteur de couleur. Vous pouvez maintenant choisir vos teintes de relief.
5 Avec l'outil crayon et la plus petite brosse, dessinnez votre relief en prenant toujours en compte que la lumière vient du haut à gauche. En effet sur toutes les interfaces Windows ou Mac, il en est ainsi. Le fait de modifier l'orientation de la lumière perturbe l'oeil et le relief n'est pas convaincant. Comme vous pouvez le remarquer sur l'exemple, J'ai utilisé le orange original pour les pixels de chaque coin. Le résultat est plus esthétique de cette manière.
6 Voila, il vous reste à ajouter un contour noir de 1 pixel. Zoomez pour revenir à une taille standard. Votre bouton est terminé. C'est relativemnt simpliste mais cette technique peut être déclinée à l'infini. Les blocs "interview" et "site du mois" ainsi que l'interface de ce site ont été dessinés de cette manière. Gardez toujours à l'esprit que votre lumière doit venir du même endroit. Essayez aussi avec des formes biseautées comme dans l'image ci dessous qui vous montre quelques exemples de cette utilisation.

 

 

copyright .:lmdk:. 2000

   download pc mac