Créer le tout dernier téléphone tactile de Samsung le Giorgio Armani

Voici un tutorial pour créer le tout dernier téléphone tactile de Samsung le Giorgio Armani. Attention je tiens à préciser que ce tutorial est en rubrique professionnelle donc ne s’adresse absolument pas aux débutants, voir aux initiés. Les étapes sont peut détaillées, et certains s’apparentent plus à du paint art numérique qu’a l’utilisation basique d’outils de graphisme. En plus il est plutôt long …

Mais le résultat est à mon sens tout à fait intéressant, n’hésitez pas à vous lancer ;)

Photoshop - 1.1 Mo
Fichier source Photoshop
clic pour télécharger le fichier source Photoshop utilisé dans ce tutorial
Adobe Illustrator - 31.4 ko
Logo giorgio armani

ETAPE 1

Je crée un nouveau document sur fond blanc, et avec l’outil des formes personnalisées je crée un rectangle arrondi noir.

ETAPE 2

Je crée un nouveau dossier que j’appel bas gauche, puis je crée un nouveau calque dans ce dossier.

Je crée la bordure blanche :

Pour cela je récupère la sélection de mon rectangle, je la contracte de 2 pixels, je la remplis de blanc, puis la déplace de 2 pixels à droite puis en haut et j’appuie sur suppr. Enfin j’utilise un masque de fusion pour camoufler le haut et le bas. J’utilise la sélection pour utiliser deux dégradés différents sur le masque de fusion pour séparer ma bordure blanche en deux.

Et voila je viens de perdre 60% de mes lecteurs avec cette bordure blanche, il en reste 40% c’est déjà pas mal !

Maintenant je crée la lueur :

Je crée un nouveau calque par-dessous ma bordure, et simplement avec un pinceau diffus je crée la lueur grise que vous voyez en bas à gauche. Je peux utiliser un masque de fusion pour diluer tout cela, ou le flou gaussien à vous de voir !

ETAPE 3

C’est le bon moment pour aller me cherche un café ;) Bien noir SVP !

ETAPE 4

Hors du dossier, je crée un rectangle arrondi que je place au centre de mon premier rectangle, pour bien le positionner j’utilise l’outil d’alignement : calque > aligner les calques sur la sélection > Centrer dans le sens vertical puis dans le sens horizontale.

Enfin je lui ajoute un petit dégradé : calque > style de calque > incrustation de dégradé. Je peux télécharger le fichier source en haut de cette page pour récupérer les styles de calques.

ETAPE 5

Je vais créer ici une fine bordure gris clair sur la gauche de mon second rectangle. Rien de plus simple je récupère la sélection de mon rectangle puis je contracte de 1 pixel, je remplis de gris re contracte de 1 pixel puis j’appuie sur suppr. J’utilise maintenant un masque de fusion pour camoufler le haut puis le bas.

ETAPE 6

Je crée un nouveau calque juste au dessus de mon second rectangle, je récupère la sélection de mon second rectangle et le remplie de noir. Je supprime ensuite toute la partie haute pour ne garder que le bas.

Je crée ensuite une bordure gris clair en haut et en bas (remarque sur la bordure grise du haut je crée en plus une bordure noir juste au dessus de 1px).

ETAPE 7

Je crée un nouveau dossier que je nomme haut. Je crée un nouveau calque, je récupère la sélection de mon premier rectangle arrondie puis je contracte de 2 px je remplie en blanc puis je contracte de 1 px et enfin j’appuie sur suppr. J’utilise enfin un masque de fusion pour camoufler la gauche et la droite.

Je crée un autre calque, et avec la même technique je crée un bordure plus épaisse.

ETAPE 8

Dans un dossier que j’appelle haut gauche.

Alors la je crois que je vais perdre les derniers irréductibles graphistes qui lisent ce tutoriel. Tout ce que je peux vous dire pour la réalisation de cette étape c’est :

J’utilise un peu la même méthode qu’a l’étape 7 et j’utilise beaucoup le masque de fusion avec le pinceau.

J’y vais vraiment au taton, et je crée les formes nécessaires au rendu 3d petit à petit.

ETAPE 9

Je reviens maintenant à mon second rectangle arrondie. Je récupère sa sélection et crée un nouveau calque par-dessus. Avec un très large pinceau diffus je crée une lueur grise en haut à gauche.

ETAPE 10

Je ne perds pas de temps, je finis mon café et je crée un nouveau rectangle dans un dossier que j’appelle écran. Je le positionne grâce à l’outil alignement. En bas de cet écran je crée un pad (sur un nouveau calque) et je lui applique une incrustation de dégradé.

ETAPE 11

Je crée une grande ellipse de sélection par-dessus mon écran, je la remplis de blanc, puis j’utilise un masque de fusion pour la camoufler légèrement du bas droit vers le haut gauche.

Je n’oublie pas de supprimer les pixels se trouvant en dehors de mon écran.

ETAPE 12

Même chose qu’a l’étape 9.

ETAPE 13

Le but est de créer une bordure noir à coté de ma bordure grise à gauche de mon second rectangle. J’utilise la même technique que d’habitude, rien de bien compliqué ici ;) je passe donc les détails.

Il faut également créer la partie droite et ajouter une bordure gris sur la droite de mon écran.

ETAPE 14

Je télécharge ci-dessous le logo de la marque que j’insére dans le bas de mon second rectangle. Et tout en bas j’ajoute deux icones, que je crée moi-même évidemment ;) Autrement je peux les piquer dans le psd !

ETAPE 15

Euh … il y a encore quelqu’un qui me lit ? Oui, alors je continue. Je récupère la sélection de mon écran et je clique sur le calque reflet. Je fais ctrl + x pour couper les pixels puis au dessus de mon écran je fais ctrl + v pour coller mon reflet. Mon reflet se trouve ainsi par-dessus mon écran, je peux maintenant lui affecter un masque de fusion différent pour camoufler juste le bas.

ETAPE 16

Je vais maintenant créer le petit bloc qui sert à écouter. Pour cela je crée un rectangle arrondi avec un fort radius. Je luis ajoute une couleur (noir) puis par-dessus un motif en grille. Je lui ajoute également un contour en dégradé et une lueur interne noire.

ETAPE 17

Sur le pad noir j’ajoute trois icones, que je crée évidemment moi-même !

ETAPE 18

Sur l’écran j’ajoute un dossier que j’appelle icône, et je crée 12 carrés qui vont m’aider à positionner les icônes de navigation.

ETAPE 19

J’ajoute mes icones, que je crée moi-même !

ETAPE 20

Je retire les carrés de couleurs.

ETAPE 21

J’affiche le carré de couleur se trouvant sous l’icône mail en lui donnant la couleur : 192 171 128.

ETAPE 22

Je fais la même chose sur la gauche, sur le haut, sur la droite, et sur le bas. Je sépare bien chacun sur un calque différent et j’utilise un masque de fusion pour camoufler les cotés extérieurs de chaque carré de couleur.

J’obtiens ce résultat. Alors plutôt pas mal non ?

Bon oui je sais, ce n’est absolument pas bien expliqué, c’est très compliqué, c’est gnagna gnagna mais bon le résultat est tellement sympa que je suis pardonné non ?

Allez faite fumer Photoshop et publiez moi dans la galerie un résultat encore meilleur ;)

Bonne chance à tous !

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

Laissez un commentaire

Remplissez correctement le formulaire puis appuyez sur Validez.