Créez votre IPHONE avec photoshop

Télécharger le fichier PSD source :

Fichier source photoshop

clic pour télécharger le fichier source photoshop utilisé dans ce tutorial

Nous allons voir ensemble comment créer un Iphone grâce à Photoshop !! J’ai réalisé ce tuto à l’aide d’un fichier PSD téléchargé depuis deviantART. J’ai décortiqué les étapes et je vous donne la recette pour créer votre Iphone. Commençons tout de suite :

ÉTAPE 1 : MISE EN PLACE

Créez un nouveau document de 493 pixels sur 590 pixels avec une résolution de 72 pixels par pouce et d’une couleur de fond blanche (ou transparente, c’est selon.)

Nous allons tout de suite nous organiser, pour cela rien de plus simple : créez 3 dossiers, le premier va s’appeler Texte, le deuxième Interface et le troisième Iphone.

ÉTAPE 2 : L’IPHONE

Nous allons au cours de cette 2^e partie nous attaquer à l’Iphone en lui même. Commencez par créer un nouveau calque dans le dossier Iphone, créez une forme rectangle arrondie dans ce calque, cette forme doit être de couleur gris-noire, le code couleur est : 494949 et doit avoir un rayon de 35 pixels. Allez dans les styles de calques et activez Satin, réglé comme suit : Mode de fusion Densité couleur - !! de couleur blanche !! Opacité 100% Angle 19° Distance 11 px Taille 14 px Contour Gaussian inversé comme sur cette capture :

Allez dans biseautage estampage et entrez ces paramètres : Style biseau interne technique lisse profondeur 431% direction haut taille 4px flou 0px angle 90° cochez « utiliser l’éclairage global » élévation 30° contour brillant linéaire non lissé Mode des tons clairs, superposition couleur blanche opacité 75% Mode des tons foncés Produit couleur noire Opacité 75% aussi comme sur cette image :

Allez maintenant dans ombre portée et entrez ces paramètres : Opacité 61% angle 90° éclairage global coché distance 4 px grossi 10 px taille 10 px contour linéaire non lissé bruit 0%

Dupliquez cette forme et faites une transformation manuelle pour que la forme copiée entre parfaitement dans la 1^re forme et changez l’opacité du satin à 81% et désactivez l’ombre portée, cela vous donne ceci :

Dupliquez la forme que nous avons dupliquée précédemment et changez l’opacité de satin à 14% et changez la couleur de la forme, mettez le code bbbbbb puis faites une transformation manuellle en haut et en bas ce qui doit vous donnez ça :

Dupliquez le calque de couleur grise et changez la pour le code couleur : 0d0d0d puis changez l’opacité du satin à 58% avec une distance de 30% et une taille de 76% puis utilisez encore une fois la transformation manuelle pour le rétrécir comme sur cette capture :

L’Iphone commence à prendre forme. Créez un nouveau calque et faites un rond parfait en bas de l’Iphone, faites un petit rond assez grand auquel vous allez incruster un dégradé noir vers blanc, mais décalez le noir vers le milieu du dégradé et mettez une échelle de 150% et un angle de -90%. Faites un rectangle rempli de blanc en haut de l’Iphone, affichez les règles et mettez le en cm, partez de 8cm vers 10cm et décendez de 4 mm en partant de 3,4cm. Activez un dégradé en incrustation dans cette forme, ce dégradé partira du noir vers le blanc et aura une échelle de 86% et un angle de -90% voilà le résultat :

Pour gagnez de la place, fusionnez ces deux calques avec une forme

Créez un rectangle arrondi de rayon 2 px sur la forme ronde et appliquez un contour de 1 px avec une opacité 35% et de couleur blanche !!

Nous avons fini l’Iphone en lui même, passons maintenant à l’interface.

Jusqu’ici vous devez obtenir cela :

je vous conseille d’enregistrer le travail, on ne sait jamais ce qui peut arriver

ÉTAPE 2 : L’INTERFACE DE L’IPHONE

Vous pouvez fermer ce dossier grâce à la flèche et ouvrir le dossier Interface. Nous allons commencer par créer une nouveau calque qui s’appellera Masque. Vous créez donc un rectangle de couleur noire qui va frôlé les bords de l’Iphone comme ceci :

Allez dans ses styles de calques et choisissez un contour de 1px intérieur et une opacité de 100%, sa couleur sera : code couleur 535353 Nous avons créé l’écran de l’Iphone. Il nous faut maintenant mettre une image dans celui-ci : je prends donc une image et je la place dans le dossier Interface au dessus de l’écran, je fais tout simplement un clic droit sur l’image et je mets créer un masque d’écrétage, je peux bouger mon image pour bien la cadrer ce qui me donne ceci :

Il nous faut maintenant peaufiner l’aspect Iphone en ajoutant des détails. Commencez par créer un nouveau calque et sélectionnez l’outil rectangle arrondi de rayon 10px. Faites une forme vers le bas de l’écran puis affichez les styles de calques, allez dans options de fusion puis mettez : Opacité 97% Opacité du fond 14% Activez alors l’incrustation dégradé, mode de fusion normal opacité 17% et choisissez le dégradé du noir vers le blanc avec un angle de -90% et une échelle de 96% Activez biseautage estampage choisissez profondeur 62% direction bas taille 0 flou 0 dans ombrage, mettez les deux opacités à 33% Activez ombre interne et mettez : opacité 31% angle 90° Distance 5% maigri 0% taille 13% faites OK Vous devez obtenir ça :

Créez un nouvelle forme rectangle vers le haut, affichez les styles du calque et dans option de fusion choisissez : Opacité 92% Opacité du fond 10% Allez dans incrustation dégradé, choisissez opacité 35%. Comme dégradé, prenez celui qui va du noir vers un noir plus clair puis brusquement d’un gris vers un gris plus clair, vous trouverez ce dégradé dans les dégradés Web 2 que vous pouvez télécharger là :

Fichier style de calque photoshop

....et une échelle de 100% Activez ombre interne, mettez les paramètres suivants : Mode incrustation couleur 535353 angle 90° distance 100 px maigri 0 px Taille 0 px Faites OK Vous allez maintenant devoir dupliquer ce calque puis le descendre en dessous du rectangle arrondi puis glisser l’image vers le bas. Faites clic-droit « créer masque d’écrétage ». Vous devez obtenir ceci :

Il ne nous reste plus que les petits détails. Commençons par créer un nouveau calque que nous appellerons « Bouton ». Faites une forme arrondie de 10 px de rayon juste dans l’autre rectangle arrondi. Affichez les styles du calque et créez un nouveau dégradé partant de la couleur b5b5b5 vers la couleur e2e2e2, mais vous rapprochez les deux dégradés vers le milieux comme sur cette capture :

Vous choisissez angle 90° et échelle 100% Activez biseautage estampage et entrez ces valeurs : Profondeur 760% direction haut taille 0 et flou 0 opacité des tons clairs 11% opacité des tons foncés 33% Faites OK Peaufinez le bouton en faisant une flèche dessus grâce à l’outil forme personnalisée Vous faites donc la flèche de la couleur 949494. Si vous avez déjà tracé la flèche vous pouvez en double cliquant sur le cadre avec la couleur, la modifier !! Vous affichez les styles du calque et vous mettez : Dans biseautage estampage profondeur 100% Direction bas taille 0 et flou 0 opacité des tons clairs 100% opacité des tons foncés 71% Faites OK ce qui vous donne ça :

Tous va aller assez vite maintenant !! Créez un nouveau claque que vous appellerez Reflet et faites avec l’outil plume un triangle qui part du bas à gauche de l’Iphone vers le haut à droite, mais un peu décalé de la droite, il doit être rempli de blanc, vous faites donc cette forme comme sur cette capture :

Vous récupérez la sélection de l’Iphone mais seulement la partie noire. Vous pixélisez le calque avec le triangle et vous supprimez la sélection intervertie. Vous désélectionnez et vous réduisez l’opacité du fond à 10% puis vous créez un masque de fusion dans lequel vous masquerez le bas du reflet grâce au dégradé du noir 100% opacité vers le noir 0% d’opacité ce qui me donne cela :

Nous allons maintenant créer de petites icônes en haut à gauche, pour cela créez un nouveau calque que vous appelez Icone 1 Vous choisissez la couleur blanche (ou noire, cela dépend si votre image est claire ou foncée, mais normalement c’est blanc mais moi je choisi noir...) et vous affichez les formes personnalisées Web. Vous prenez alors le + entouré et vous faites cette forme en haut à gauche entre notre forme transparente et la fin de l’écran. Juste à côté, vous créez une autre forme mais cette fois-ci, avec le + entouré. Vous écrivez maintenant iphone à coté des deux icônes avec la police Myriad Pro semiblod et enfin vous créez un petit i grâce aux formes personnalisées en haut à droite (pour voir le i, sélectionnez tout quand vous cliquez sur la petite flèche à côté des formes)

ÉTAPE 3 : LES TEXTES

Voilà l’Iphone est bientôt terminé, il ne nous reste que des textes à mettre, pour rappel vous devez avoir quelque chose comme ça à présent :

Vous fermez donc le dossier Interface et ouvrez le dossier texte si ce n’est pas déjà fait. Vous allez maintenant écrire ce que vous voulez en haut sur la bande transparente que nous avons créé, moi ici je mets Toinousp, normalement vous devez écrire avec myriad pro light mais je ne l’ai pas, alors j’ai pris myriad pro regular. En dessous de ce gros titre, vous inscrivez la date du jour, pour moi c’est le vendredi 15 février 2008 de la police myriad pro régular taille 10,5 ou 10 et pour faire le vrai de vrai, écrivez à côté du bouton : déverrouillez EN MYRIAD pro regular avec méthode de lissage légère

VOILÀ le tuto est terminé, il était assez long mais bien illustré. Si vous rencontrez des problèmes, c’est simple écrivez vos questions !!

PS : j’ai oublié voici mon rendu final :

UN GRAND MERCI À TOUT LE MONDE