Tout le monde a surement entendu parler du nouveau produit d’Apple, baptisé iPad. Cette tablette est en fait une version maxi costaud du maintenant célèbre iPhone. La tablette pourra se connecter à Internet mais également se connecter à l’Appstore, vous permettant de télécharger et d’utiliser un catalogue composé aujourd’hui de plus de 150.000 titres différents ! L’iPad pourra se connecter via un réseau Wifi ou directement en 3G, elle bénéfice comme tous les produits Apple d’un design sobre, épuré et glossy, c’est surtout à ce dernier point que nous allons nous intéresser aujourd’hui puisque je vous propose un tutoriel pour reproduire ce fameux iPad et d’en faire une icône. Vous pourrez ensuite l’utiliser sur votre site internet ou directement en tant que .ico sur votre ordinateur !

Mais avant de commencer, laissez moi vous présenter l’image finale, vous devriez tous obtenir ceci :

Les étapes ne sont pas compliquées mais nécessites une attention particulière, je ne classe donc pas ce tutoriel Photoshop dans la catégorie débutant mais plutôt intermédiaire !

Bon courage à tous pour la réussite de ce tutoriel Photoshop.

ETAPE 1 : Créer l’image

Ouvrez le logiciel Photoshop puis créez un nouveau document (Fichier> Nouveau) nommez-le puis, modifiez la largeur à 422 pixels et la hauteur à 540 pixels. Je vous conseille d’enregistrer-sous votre fichier directement dans cette première étape, vous éviterez les problèmes liés aux pannes et aux pertes appuyez sur les touches Ctrl/Cmd + S pour activer l’enregistrement de votre image.

Lorsque votre fichier n’est pas enregistré, la combinaison Ctrl/Cmd + S suffit, ensuite vous devrez ajouter la touche Maj pour pouvoir à nouveau activer la fonction enregistrer-sous !

ETAPE 2 Créer des repères

Créez maintenant des repères qui vous aideront à créer votre iPad, pour se faire commencez par appuyer sur les touches Ctrl/Cmd + R pour activer les règles puis créez un repère sur le côté haut, le côté bas, le côté gauche et enfin le côté droit.

Zoomez ensuite sur le côté haut gauche de votre image puis créez une sélection (en utilisant l’outil Rectangle de sélection (M)) passant par les côtés haut et gauche. Puis, déplacez cette sélection de 5 px sur la droite et de 5 px vers le bas. Enfin créez deux nouveaux repères en suivant les côtés haut et gauche de cette sélection. Faites la même chose sur le côté haut droit, bas gauche et bas droit.

Pour créer un repère, il suffit de cliquer sur la règle puis de glisser/ déposer la souris sur votre image à l’endroit où le repère doit être créé.

ETAPE 3 Redimensionner l’image

Pour pouvoir travailler, vous allez libérer une marge tout autour de ce qui sera prochainement la base de votre iPad. Modifiez la couleur d’arrière plan par le blanc puis appuyez sur les touches Ctrl/Cmd + Alt + C pour ouvrir la fenêtre de la taille de l’image. Modifiez la largeur à 482 pixels et la hauteur à 600 pixels, enfin cliquez sur le bouton Ok pour valider la transformation.

ETAPE 4 Créer la base de l’icône

Sélectionnez l’outil Rectangle arrondi (U) puis modifiez dans la barre de configuration (en haut de l’écran) le rayon à 30 pixels. Enfin, utilisez les repères les plus extérieurs pour créer un rectangle arrondi. Cette forme permet de créer la base de l’iPad, enfin allez dans le menu Calque> Style de calque> Lueur interne, et configurez la lueur comme ceci : couleur gris foncé #7a7a7a, Taille 3 px, le reste est inchangé. Cliquez ensuite sur le cas incrustation de couleur (à gauche de la fenêtre styles) et choisissez le blanc.

ETAPE 5 Créer la base de l’icône 2

Modifiez la couleur d’avant plan par le noir, puis toujours avec l’outil Rectangle arrondi, créez un second rectangle en utilisant les repères les plus à l’intérieur ; cela permet de créer l’écran noir de l’iPad. Enfin renommez les deux calques : le premier « Contour » et le second « Base ».

Pour renommer un calque, il suffit de double cliquer sur son nom, le nom devient éditable, pour valider le changement, appuyez sur Entrée.

ETAPE 6 Créer d’autres repères

Pour créer dans l’étape prochaine le fond d’écran, vous avez besoin de nouveaux repères. Pour se faire, utilisez la même technique qu’à l’étape 2 et créez un repère vertical à 44 pixels du bord gauche, puis un autre à 44 pixels du bord droit, encore un autre à 44 pixels en partant du haut (repère horizontal) et pour terminer, un autre en partant du bas mais cette fois à 50 pixels (commencez sur le bord du rectangle noir).

ETAPE 7 Créer le background

Utilisez l’outil Rectangle de sélection pour créer une sélection suivant les repères précédemment créés. Modifiez la couleur d’avant plan par le blanc, puis créez un nouveau calque (Ctrl/Cmd + Maj + N ou menu Calque> Nouveau> Calque), nommez-le « Screen » puis placez-le au dessus des autres (voir dans la fenêtre Calques). Enfin allez dans le menu Edition> Remplir. La sélection se remplit de blanc. Appuyez sur Ctrl/Cmd + D pour désélectionner.

ETAPE 8 Créer le « vrai » background

Vous allez reproduire le background présent sur l’iPad en démonstration (vu sur le site d’Apple) il s’agit d’un paysage avec une chaîne de montagnes en fond d’horizon. Le point fort de ce background ce sont ces couleurs, elles sont étonnantes mais facilement réalisables grâce à un simple dégradé. Ajoutez donc un dégradé à votre calque « Screen », allez dans le menu Calque> Style de calque> Incrustation de dégradé, puis ne modifiez pas la configuration mais changez les couleurs, voyez l’image ci-dessous pour vous aider.

ETAPE 9 Importer les montagnes

Il serait normalement possible de recréer également ces montagnes en utilisant le Pinceau par exemple, mais dans un souci de facilité j’ai utilisé la photo telle qu’elle a été trouvée sur le site d’Apple. Remarque : cette manipulation est possible car aucun élément s’y trouve (ni icône, ni bouton etc.) j’ai ajouté un fichier .psd appelé montagnes dans le fichier zip lié à ce tutoriel, téléchargez-le, ouvrez le fichier montagnes puis copier/coller le calque montagnes sur votre image.

ETAPE 10 Finition du background 1/2

Vous avez sûrement remarqué qu’il manque une partie du paysage sur la zone du bas. Pour recréer cette zone, il faut simplement utiliser un nouveau calque et le remplir d’un dégradé. Pour faire ceci commencez donc par créer un nouveau calque (Ctrl/Cmd + Maj + N ou menu Calque> Nouveau> Calque), nommez-le « Lac » et placez-le au dessus des autres. Sélectionnez l’outil Rectangle de sélection (M) et créez une sélection sur la partie basse du backgroud. Enfin allez dans le menu Edition> Remplir, puis dans le menu Calque> Style de calque> Incrustation de dégradé.

ETAPE 11 Finition du background 2/2

Pour finir d’intégrer le rajout au lac, vous allez créer un fondu, pour se faire utilisez un masque de fusion. Vérifiez que le calque « Lac » soit bien sélectionné puis allez dans le menu Calque> Masque de fusion> Tout faire apparaître, sélectionnez l’outil Dégradé (G) puis choisissez dans le sélecteur le second dégradé (Premier plan -> Transparent), enfin modifiez la couleur d’avant plan par le noir puis sur le masque de fusion créer un dégradé partant du haut vers le bas sur le lac.

ETAPE 12 Créer la partie haute

Sur l’iPad comme sur l’iPhone il y a une bande en haut contenant l’état du réseau, puis l’heure, et enfin sur la droite l’état de la batterie. Pour reproduire cette bande sur votre image il suffit de créer un rectangle noir et d’y disposer les différentes icônes. Pour se faire commencez par créer un nouveau groupe (menu Calque> Nouveau> Groupe) puis nommez-le « Top » et placez-le au dessus des calques. Créez ensuite un nouveau calque dans ce groupe (Ctrl/Cmd + Maj + N ou menu Calque> Nouveau> Calque), nommez-le « Bande ». Enfin zoomez sur le partie haute de l’image et créez un nouveau repère à 12 pixels en dessous du repère servant à créer le background.

ETAPE 13 Créer la bande

Pour créer la bande noire, utilisez l’outil Rectangle de sélection (M), aidez vous de ce repère pour créer une bande sur le partie haute du background. Vérifiez que le calque « Bande » soit bien sélectionné puis modifiez la couleur d’avant plan par le noir et allez dans le menu Edition> Remplir. Appuyez sur les touches Ctrl/Cmd + D pour désélectionner.

ETAPE 14 Ajouter les icônes

Commencez par créer l’heure qui se trouve au milieu de la bande. Pour se faire sélectionnez l’outil Texte (T) puis créez une zone de saisie par-dessus la bande. Choisissez la police de caractères Myriad pro, changez la couleur du texte en blanc et enfin centrez-le. Avec le même outil, écrivez iPad sur la gauche. Pour terminer, ouvrez le fichier (disponible dans l’archive de ce tutoriel) et copier/coller le calque « Pile » sur votre image (sur la droite de la bande).

ETAPE 15 Finition de la partie haute

Pour terminer il faut juste diminuer l’opacité de la bande, pour se faire utilisez un masque de fusion. Sélectionnez le calque « Bande » puis ajoutez un masque de fusion, allez dans le menu Calque> Masque de fusion> Tout faire apparaître, sélectionnez l’outil Dégradé (G) puis choisissez dans le sélecteur le second dégradé (Premier plan -> Transparent), enfin modifiez la couleur d’avant plan par le noir, puis créez un dégradé noir diagonal sur le masque de fusion, du bas droit vers le haut gauche.

ETAPE 16 Création de la partie basse

Maintenant il faut attaquer la partie basse. Celle-ci est un peu plus compliquée car composée de plusieurs éléments graphiques : une table, les icônes, les titres et les reflets. Etape par étape voici comment créer chacun de ces éléments graphiques. Concernant la table il faut en premier lieu placer encore une fois plusieurs repères. Créer un premier repère vertical à 14 pixels du bord gauche, et un second à 14 pixels du bord droit. Pour terminer cette étape, réduisez le groupe « Top » et créez un nouveau groupe (menu Calque> Nouveau> Groupe) nommez-le « Bottom », placez le au dessus du groupe « Top ».

ETAPE 17 Créer la table 1/4

Modifiez la couleur d’avant plan par le blanc puis sélectionnez l’outil Rectangle pour créer un rectangle blanc sur votre image partant du côté gauche jusqu’au côté droit. Enfin allez dans le menu Edition> Transformation> Perspective. La transformation est active, glisser/déposer le côté haut gauche vers le repère situé à sa droite. Appuyez sur Entrée pour valider la transformation.

ETAPE 18 Créer la table 2/4

Pour créer l’effet de dégradé, il faut utiliser allez dans le menu Calque> Masque de fusion> Tout faire apparaître. Utilisez le dégradé noir premier plan -> transparent pour créer un dégradé sur le masque de fusion du bas vers le haut. Enfin récupérez la sélection de la table (Ctrl/Cmd + clic sur la vignette du masque vectoriel du calque Forme 1), puis créez un nouveau calque (Ctrl/Cmd + Maj + N ou menu Calque> Nouveau> Calque), renommez-le « Trait », renommez également le calque « Forme 1 » en « Table ». Enfin changez la couleur d’avant plan par le blanc puis allez dans le menu Edition> Remplir. Déplacez la sélection de 1px vers le haut et appuyez sur Suppr. Pour terminer, diminuez l’opacité du calque « Trait » à 20% (voir en haut à droite de la fenêtre Calques).

ETAPE 19 Créer la table 3/4

La création de la table se termine par l’ajout d’un reflet. Créez une forme de vague sur toute la largeur de la table. Pour se faire modifiez la couleur d’avant plan par le blanc puis sélectionnez l’outil Plume (P) enfin créez la forme (voir l’image ci-dessous) sur la table. Pour terminer, diminuez l’opacité du calque ainsi créé à 20%.

ETAPE 20 Créer la table 4/4

Enfin pour intégrer le reflet il faut créer une fusion sur les côtés gauche, droit et haut, pour se faire utilisez un masque de fusion sur le reflet. Sélectionnez le calque du reflet puis allez dans le menu Calque> Masque de fusion> Tout faire apparaître. Enfin, sélectionnez l’outil dégradé (G) puis choisissez dans le sélecteur le second dégradé (Premier plan -> Transparent), enfin modifiez la couleur d’avant plan par le noir, puis créez un dégradé noir sur la gauche (de la gauche vers la droite), puis sur la droite (de la droite vers la gauche) et enfin sur le haut (du haut vers le bas).

ETAPE 21 Importer une icône

Ouvrez le fichier icônes.psd (présent dans l’archive), le fichier s’ouvre, copier/coller le calque Safari dans votre image, puis utilisez l’outil Déplacement (V) pour placer l’icône sur la partie gauche de la table. Utilisez ensuite l’outil Texte (T) pour ajouter le libellé en dessous de l’icône « Safari » (l’icône se trouve à 25 pixels du côté haut gauche de la table, et le haut de l’icône se trouve à 15 pixels du haut de la table). Pour terminer cette étape créez un nouveau groupe (menu Calque> Nouveau> Groupe) nommez-le « Safari » puis placez les deux calques ‘icônes’ et ‘texte’ dans ce groupe.

ETAPE 22 Créer le reflet

Pour créer le reflet en dessous de l’icône, cliquez avec le bouton droit de la souris sur le calque « Safari » et sélectionnez Dupliquer le calque. Maintenant allez dans le menu Edition> Transformation> Symétrie verticale. Enfin utilisez l’outil Déplacement pour le placer sur le bas de l’icône. Pour créer la fusion, vous devez vous douter qu’il faut utiliser un masque de fusion ajoutez donc un masque de fusion sur la copie de l’icône (Calque> Masque de fusion> Tout faire apparaître) puis sélectionnez le dégradé premier plan -> transparent, modifiez la couleur d’avant plan par le noir et créez un dégradé du bas vers le haut.

ETAPE 23 Les autres icônes

Répétez les étapes 22 et 23 pour ajouter toutes les icônes sur la table. Bien entendu, n’oubliez pas d’adapter les noms des calques, des groupes Remarque : pour une cohérence dans les reflets vous pouvez créer un calque qui contiendra tous les reflets en même temps, le masque de fusion sera donc le même pour tous !

ETAPE 24 Créer le contenu

Dernière ligne droite pour terminer ce tutoriel, la création du contenu, cela devrait se passer assez rapidement, en effet vous avez déjà incrusté des icônes sur le bas de l’iPad, le contenu est la même chose, icône + reflet + texte. La seule chose qui change, c’est qu’une ombre a été ajoutée derrière chaque icône ! Pour commencer, créez un nouveau dossier au premier niveau et nommez-le « Middle ». Créez un sous dossiez et appelez-le « Calendrier ». Enfin copier puis coller l’icône Calendrier. Créez deux repères sur les côtés gauche et droit de la première icône se trouvant sur la table. Placez l’icône Calendrier dans ce canal, laissez une marge de 30 pixels entre le bas de la bande noir (en haut) et le haut de l’icône.

ETAPE 25 Ajouter les icônes

Créez un repère sur le haut et le bas de l’icône Calendrier. Puis sur les côtés gauche et droit des icônes du bas. Ces repères vous aideront à disposer chaque icône. Copier/coller donc toutes les icônes nécessaires pour remplir l’écran de l’iPad. Utilisez l’outil Texte (T) pour créer un titre à chaque icône.

ETAPE 26 Créer des reflets

Je vais vous donner une technique pour créer les reflets rapidement. Sélectionnez le calque « Calendrier », puis appuyez sur Ctrl/Cmd et cliquez sur le calque « SMS », puis « Météo » et enfin « Téléphone ». Cliquez maintenant avec le bouton droit de la souris sur le calque « Téléphone » et sélectionnez Dupliquer les calques. Quatre nouveaux calques apparaissent. Cliquez dessus avec le bouton droit et sélectionnez Fusionner les calques. Placez ce calque tout en haut du dossier « Middle », enfin utilisez la technique du masque de fusion pour créer le reflet (voir l’étape 2). Faites la même chose pour les autres lignes. Appuyez sur Cltr/Cmd + : pour cacher provisoirement les repères.

ETAPE 27 Créer une ombre sous les icônes

Pour créer une ombre derrière chaque icône, vous devez en créer une derrière une seule et ensuite dupliquer l’ombre autant de fois qu’il y a d’icônes. Voici la technique : commencez par créer un nouveau calque, nommez-le « Ombre » et placez-le juste au dessus du calque « Calendrier ». Récupérez la sélection du calque « Calendrier », changez la couleur d’avant plan par le noir, puis allez dans le menu Edition> Remplir. Enfin sélectionnez l’outil Ellipse de sélection puis créez une ellipse en dessous du carré noir. Allez à nouveau dans le menu Edition> Remplir.

ETAPE 28 Dupliquer l’ombre

Cliquez avec le bouton droit de la souris sur le calque « Ombre » et placez cette copie sous la seconde icône. Ainsi de suite pour ajouter une ombre en dessous de chaque icône. Sélectionnez tous les calques copie puis cliquez dessus avec le bouton droit de la souris et sélectionnez Fusionner les calques. Enfin placez l’icône « Ombre » sous le calque « Calendrier ».

ETAPE 29 Ombres diminuées

Vérifiez que le calque « Ombre » soit bien sélectionné, puis allez dans le menu Filtres> Atténuation> Flou gaussien, entrez la valeur de 8 puis appuyez sur le bouton Ok. Enfin passez le mode de fusion en Incrustation et diminuez l’opacité à 40%.

ETAPE 30 Un dernier reflet

Créez un nouveau calque (Ctrl/Cmd + Maj + N ou menu Calque> Nouveau> Calque), nommez-le « Reflet » et placez-le tout à fait en haut dans la fenêtre Calques. Récupérez la sélection du calque « Base », réduisez ensuite la sélection de 3 pixels (allez dans le menu Sélection> Modifier> Contracter et entrez la valeur de 3px). Sélectionnez l’outil Pinceau (B) et modifiez la forme en Arrondi flou, la taille à 700 pixels, la couleur d’avant plan en blanc. Maintenant, en haut à droite de votre image, cliquez une fois pour créer une lueur blanche diffuse. Pour terminer diminuez l’opacité à 30%.

ETAPE 31 Création du bouton

La dernière étape de ce tutorial Photoshop est la création du bouton se trouvant en bas de l’iPad. Pour le faire rien de plus facile, il suffit de créer un rond que vous remplirez d’un dégradé et d’une ombre interne. Ensuite disposé par-dessus un rectangle arrondi sur lequel vous appliquerez un contour. Voici maintenant la technique expliquée :

Commencez par créer un nouveau groupe, nommez le « Bouton » et placez le dans le dossier « Bottom ».

Sélectionnez l’outil Ellipse puis créer un rond sur la partie basse de votre iPad.

Lorsque vous créé une forme, gardez la touche Maj enfoncée pour garder les proportions, pour l’ellipse cela fera un rond, pour le rectangle un carré etc.)

Ensuite allez dans le menu Calque> Style de calque> Incrustation de dégradé, configurez comme suit (voir l’image ci-dessous) puis cliquez sur Ombre interne et configurez comme suit (voir l’image ci-dessous).

Pour terminer sélectionnez l’outil Rectangle arrondie et créé un rectangle (rayon 4 pas plus). Allez dans le menu Calque> Style de calque> Option de fusion. Modifiez l’opacité du fond à 0% et ajouter un contour blanc de 1 px et d’opacité 20%.

ETAPE 32

L’icône est maintenant terminée. Vous pouvez bien entendu continuer votre composition graphique en ajoutant un reflet ou une ombre sous le reflet, en ajoutant d’autres icônes etc.

Merci à tous d’avoir suivi ce nouveau tutoriel Photoshop qui permet de créer une icône iPad sur wks.fr ! N’hésitez pas à poster vos images dans la galerie de ce tutoriel ou de poster des commentaires pour poser des questions ou juste dire merci cela fait toujours plaisir à lire.