9

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 2e 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 :
9

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 1re forme et changez l’opacité du satin à 81% et désactivez l’ombre portée,
cela vous donne ceci :
9

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 :
9

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 :
9

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 :
9

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 :
9

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 :
9

Créez une 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 :
9

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 :
9

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 :
9

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 :
9

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 :
9

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 :
9

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