Créer un joli background Mac OSX

Voici un tutoriel assez simple utilisant les dégradés pour créer le logo d’un système d’exploitation made in Mac (enfin il me semble). Vous allez le voir, les étapes sont assez simples et le résultat final est vraiment intéressant, un bel effet de métal lumineux.

Bien entendu vous pouvez télécharger le fichier source Photoshop utilisé dans ce tutoriel.

Photoshop - 1.3 Mo

A la dernière étape nous redimensionnerons notre image pour qu’elle s’adapte au fond d’écran de notre iPhone, histoire de créer un joli background.

ETAPE 1

J’ouvre Photoshop puis je crée un nouveau document de 500 pixels de côtés (un beau carré) puis j’utilise l’outil texte pour créer un énorme X au milieu de mon image. Ensuite, je crée deux repères, l’un horizontal qui coupe ma croix en deux, et un second vertical qui lui aussi coupe la croix en deux.

Ensuite j’utilise l’outil recadrage pour couper mon image ; voir ci-dessous. Pour l’astuce : lorsque vous utilisez l’outil recadrage un petit rond apparaît au milieu de la zone à recadrer, placez ce petit rond à l’intersection des deux repéres pour recadrer parfaitement votre image en gardant les bonnes dimensions.

JPG - 71 ko

ETAPE 2

Une fois recardé, je crée un nouveau calque juste au dessus de mon X puis je remplis la croix avec le pot de peinture de cette couleur : #86a0b8.

ETAPE 3

Puis je récupère la sélection de ma croix en faisant Ctrl + 1 Clic sur le calque, et en utilisant le dégradé je crée une zone d’ombre sur l’une de mes branches (j’utilise bien entendu une couleur plus foncée comme #314965).

ETAPE 4

Je fais la même chose pour les quatre branches de mon X.

ETAPE 5

Je crée un nouveau calque (j’ai toujours la sélection de ma croix) que je place juste au dessus des dégradés créés durant les étapes 3 et 4. Puis, avec un pinceau diffus de 300 pixels puis deux de 200 pixels, je crée une lumière vive en faisant un Clic au centre de mon X pour chaque taille de pinceau.

ETAPE 6

Je crée un nouveau calque que je place sous mon X juste au dessus de l’arrière plan. Et avec un pinceau diffus de 400 pixels (très large) je crée une lueur gris-claire sous mon X.

ETAPE 7

Avec l’outil polygone de sélection, je crée une forme comme ci-dessous puis je remplis la sélection de noir avec le pot de peinture.

Je place ce calque en dessous de mon X et j’applique un flou gaussien (menu > filtre > atténuation > flou gaussien > configuration 4 pixels) et enfin je diminue l’opacité de ce calque à 80%.

ETAPE 8

Je duplique le calque de l’ombre (créée juste avant) et j’applique une symétrie horizontale ce qui me permet de le placer de l’autre côté de mon X pour créer la seconde ombre.

ETAPE 9

Je crée un nouveau calque, je récupére la sélection de mon X que je remplis de noir avec le pot de peinture. Je supprime la partie basse pour ne garder que le haut.

J’applique à nouveau un flou gaussien de 4 pixels.

Puis je place le calque sous mon X.

ETAPE 10

Je crée un nouveau calque, je récupére la sélection de mon X que je remplis de noir avec le pot de peinture. Je supprime la partie basse pour ne garder que le bas.

J’applique à nouveau un flou gaussien de 4 pixels.

Puis je place le calque sous mon X. Pour terminer je descends mon ombre de 10 voir 20 px selon la taille de votre image.

ETAPE 11

Je duplique la lueur grise que j’ai créée à l’étape 6 pour renforcer le volume du X.

ETAPE 12

Je vais créer deux zones d’ombres en bas à gauche et en bas à droite. Pour cela je crée un nouveau calque, je récupère la sélection de mon X et avec un pinceau diffus de 100 px (couleur bleu foncé) je crée deux points (à gauche et à droite).

ETAPE 13

Pour terminer je peux ajouter discrètement mon petit Copyright, et voilà, mon image déjà terminée !

Bien entendu, je peux créer cette même image avec des styles différents, des couleurs différentes. A vous de faire marcher votre imagination.

Concernant le background iPhone il suffit de réduire l’image avec les dimensions : 320 x 480.

Si vous avez des questions ou des problèmes, merci d’utiliser le forum ci-dessous. Si vous avez réussi ce tutoriel jusqu’au bout, bravo, faites partager votre talent en publiant votre image grâce à la galerie (formulaire en haut de page).

Merci d’avoir lu ce nouveau tutoriel sur Wks ;)

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 !

Publiez une nouvelle image

Vous avez réussis à créer une belle image grâce à ce tutorial ? Soyez sympa, partagez la avec la communauté. Utilisez simplement ce formulaire :

Vous devez être connecté pour activer le bouton de validation !

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 8 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.

  • 14 janvier 2009 15:46, par Galford

    franchement tes tuto tombe de plus en plus en niveau wonka , c’etait bo avant des chose interessantes, si je dit cela c po pour te critiquer mais pour te pousser a devenir comme avant ;). quand meme merci pour tes efforts.

    Répondre
  • 15 janvier 2009 12:47, par razhen

    GG !! j’adore !

    Répondre
  • 15 janvier 2009 15:48, par kom1dune

    Pour s’amuser avec les ombres et les dégradés, c’est parfait pour un jour de pluie... ;)

    Répondre
  • 15 janvier 2009 19:10, par Air’

    Hello ! Ça faisait un petit bout de temps que je n’avais pas posté de créations sur WKS. ;)

    Tout d’abord Wonka, permet-moi de te féliciter pour ce tutoriel, c’est encore une fois très réussi et très bien reproduit. :)

    En ce qui concerne le style, tu avais un petit doute je crois ... En fait, l’image « originale » vient bien d’Apple. Cette illustration fut utilisée pour Tiger, la version 4 de Mac OS X (packagin ...). Vous pouvez voir l’original ici.

    Mais depuis octobre 2007, Tiger à laissé place à la nouvelle version de Mac OS X : Leopard. L’illustration a donc été changé, pour laisser place au « X » noir avec un reflet glossy sur un fond étoilé.

    Alors rien que pour vous, j’ai reproduit celui de Tiger et celui de Leopard :)

    J’ai ajouté quelques effets supplémentaires par rapport à celui de tutoriel, avec des bords biseautés. J’ai aussi mis un gris qui tire moins sur le bleu.

    Merci encore Wonka, et bravo pour ce très très bon tutoriel !

    Répondre
    • 15 janvier 2009 19:54, par Wonka

      Et comme d’habitude très réussis, j’aime beaucoup le rendu que donne tes deux images. L’image de tiger est vraiment époustouflante ! Thank you pour ces précisions !

      Répondre
      • 15 janvier 2009 20:27, par Air’

        Un grand grand merci Wonka pour ton message :) Je pense tout de même quand sans ton tutoriel, je ne serais pas allé bien loin. ;)

        Répondre

Laissez un commentaire

Remplissez correctement le formulaire puis appuyez sur Validez.