Créer des icônes au Matériel de Conception avec l'application PS Touch Photoshop pour Android

  • Auteur de la discussion Meclot Yoann
  • Date de début
Meclot Yoann

Meclot Yoann

Member
Inscrit
12 Juillet 2013
Messages
364
Points
16
Créer des icônes au Matériel de Conception avec l'application PS Touch [Photoshop pour Android]

Bonjour à tous et à toutes :hello:
Ce tutoriel vous montrera comment créer des icônes au Matériel de Conception

Ce tutoriel est en quelque sorte la partie 2 du précédent tutoriel vous montrant comment créer des Icônes Flat Désigne.

Toujours avec l'application PS Touch (Photoshop pour Android), suivez ce tutoriel dans sont intégralité pour avoir un résultat similaire =>



Cette icône est basique (je vous l'accorde :happy1: ), mais sachez que vous pouvez faire de nombreuses choses avec PS Touch :super:

Avant de commencer sachez que l'application PS Touch a était supprimée du Google Play Store (il y a de ce là très longtemps (en tant que grand chanceux j'ai bien fait d'en faire une sauvegarde hahaha :frime: )).


CE TUTORIEL SERA EXTRÊMEMENT LONG
donc Veuillez prendre plusieurs pause s'il vous plaît, prenez votre temps (j'ai moi-même pris beaucoup de mon temps juste pour rédiger ce tutoriel), surtout que la batterie de votre smartphone va se déchargé assez vite (pensez à avoir au moins 95% (ce n'est pas obligatoire mais n'utilisez pas souvent cette application en pleine charge du smartphone, n'oubliez pas qu'une grande chaleur du smartphone abîme grandement la vie de la batterie et du chargeur compris)).

Autre message qui a aussi sont importance LISEZ TOUT LES spoiler !! Merci d'avance !! (Bon après il y en a que 1.... :gene: )

Bon commençons

1- Ouvrez PS Touch
(Acceptez les terme de patati et patata et j'en passe... :super: )


2- Appuyez en bas sur le "carré" avec un "+" dessus et Appuyez sur "Document Vierge"

Comme ceci



3- Choisissez la dimension que vous souhaitez
(Moi j'ai pris du 1000x1000), puis Appuyez sur "OK"

Comme ceci



4- Là vous aurez un magnifique calque vierge (HD)

Comme ceci



5- Appuyez en bas à gauche sur le petit "pinceau", un menu déroulant apparaîtra et appuyez sur le "carré" en pointillé

6- Ensuite tracez un carré en faisant glisser votre doigt en diagonal sur le calque vierge

Comme ceci



7- Ensuite appuyez sur "&" en haut à droite et appuyez sur "contour/rempliss"

Comme ceci



8- Là....Bahh choisissez une couleur (celle que vous voulez)

Comme ceci



9- Ensuite appuyez n'importe où sur l'écran pour que la sélection du carré disparaisse

10- Ensuite appuyez sur "&" en haut à droite, appuyez sur "Transformer"

11- Appuyez sur "Extras" en bas à droite, puis appuyez sur "Verrouiller le format des pixels" (ceci désactivera cette fonction)

12- Appuyez sur la petite "flèche" pointant vers le haut en bas à gauche

13- Observez bien le petit menu qui vient de apparaître...
X et Y sont égale au placement de votre figure, L et H sont égale à la dimension de votre figure
... (Si vous ne lisez pas le spoiler vous allez rien comprendre à ce qui suit).

Comme ceci



14- Appuyez sur "L" et choisissez une dimension de 790, puis appuyez sur "H" et choisissez une dimension de 790 (790x790), puis déplacez le carré avec votre doigt pour le placer au milieu du calque ou sinon vous pouvez mettre les chiffres 105 dans "X" et "Y" (C'est à vous de voir), puis appuyez sur la petite "encoche" en bas à droite

Comme ceci



15- Une fois que votre carré à était redimensionner, appuyez en haut à gauche sur "fermer" et enregistrez le projet, puis télécharger la grille que je vous met à disposition (ceci est indispensable pour continuer), une fois que vous l'aurez téléchargé, retournez sur PS Touch et ouvrez votre projet, dès que vous l'aurez ouvert appuyez en bas à droite sur les "2 feuilles qui se superpose avec un petit "+" dessus, puis appuyez sur le petit "+" apparent, ensuite appuyez sur "calque de photo" puis "bibliothèque de photos" et sélectionnez l'image (la grille) que je vous ai fait téléchargée

S'il vous plaît, Connexion ou S'inscrire pour voir le contenu ou les urls !
HostingPics

Comme ceci


16- Ensuite Zoomer le carré avec votre doigt vers n'importe quel cote du carré
(Moi je commence part en haut à gauche), puis sélectionnez un léger petit morceau du carré en faisant glissé votre doigt, de sorte à ce que la sélection soir bien aligné avec la grille

Comme ceci



17- Puis appuyez en haut à gauche sur le petit "carré pointillé" avec un petit "crayon" dessus, puis appuyez sur "effacer" Attention : Assurez-vous que le calque où le carré réside soit sélectionnée !!

Comme ceci



18- Faite la même chose avec les autres coins du carré. La vue obtenu doit être comme ceci



19- Ensuite nous allons créer des nouveaux calques, pour cela appuyez en bas à droite sur les "2 feuilles qui se superpose" avec un petit "+" dessus, puis appuyez sur le petit "+" qui apparaît

Comme ceci



20- Ensuite appuyez 2 fois sur "Calque vierge" de sorte à ce que vous ayez 2 calques vierges (#ironie - Nooon sérieux !!)

Comme ceci



21- Ensuite appuyez en bas à gauche sur le "carré pointillé", un petit menu déroulant apparaîtra puis faites un appui long sur le "carré pointillé" qui apparaitra, puis faites glissé votre doigt sur le "cercle pointillé"

Comme ceci



Important :
Assurez-vous que un calque vierge soit bien sélectionnée
et aussi décoché le calque où la grille réside




22- Ensuite tracez un cercle en faisant glisser votre doigt en diagonal (un cercle plus ou moins gros et grand, car la redimension sera mieux effectuée)

Comme ceci



23- Ensuite appuyez sur "&" en haut à droite puis appuyez sur "Transformer"

24- Comme à l'étape 14 appuyez sur "L" et "H" pour redimensionner notre cercle, un 120x120 sera parfait

24- Ensuite nous allons colorié le cercle de la même couleur que notre carré, appuyez sur "&" en haut à droite puis sur "contour/rempliss"

25- Ensuite appuyez n'importe où sur l'écran pour que la sélection du cercle disparaisse

26- Ensuite appuyez sur "&" en haut à droite puis appuyez sur "Transformer", puis faites glisser votre doigt sur l'écran pour déplacé le cercle de sorte à ce qu'il soit placer sur un angle du carré (Moi je l'ai fait en haut à gauche)

Comme ceci



27- Ensuite continuez de déplacer le cercle de sorte à ce que le côté haut du cercle et le côté gauche du cercle soit aligné avec le côté haut du carré et sont côté gauche (enfin cela dépend de l'emplacement où réside votre cercle...etc)

Comme ceci



Final


28- Faites de même avec tout les angles du carré

Comme ceci



29- N'oubliez pas de fusionner les calques entre eux de temps en temps, pour les fusionnés appuyez en bas à droite sur les "2 feuilles qui se superpose" avec un petit "+" dessus, puis appuyez à gauche sur les "2 feuilles qui se superpose" apparent, puis appuyez sur les "2 feuilles qui se superpose" avec une "flèche" par-dessus sur le menu apparent

Comme ceci


Puis appuyez sur "fusionner les calques visibles"

Comme ceci



30- Appuyez en bas à droite sur les "2 feuilles qui se superpose" avec un petit "+" dessus, puis appuyez sur le petit "+" apparent, puis appuyez 2 fois sur "Dupliquer le calque"

Comme ceci



31- Appuyez sur le calque le plus bas, puis appuyez en haut a gauche sur le "carré pointillé" avec un petit "crayon" dessus puis sur "Selec. Pixels", là votre carre sera sélectionnée

32- Ensuite appuyez sur "&" en haut à droite puis appuyez sur "Contour/Rempliss"

33- Ensuite sélectionnez la couleur noir puis appuyez sur "100%" pour réglé cette opacité à "20%", puis appuyez sur l'encoche en bas à droite pour confirmer

Comme ceci



Attention : une fois que la couleur sera appliquée, vous ne verrez aucun changement (c'est tout à fait normal, car le calque sur lequel ont à attribuée la couleur, est placée en dessous de touts les autres calques

34- Ensuite sélectionnez le calque plus haut (pas celui de tout en haut) pour lui attribué la même couleur mais au lieux d'appuyer sur du noir, appuyez sur du blanc (laissez l'opacité à "20%")

Comme ceci



35- Ensuite appuyez n'importe où sur l'écran pour que la sélection du carré disparaisse

36- Là vous pouvez constater que vous avez 3 carrés verts de différentes teintes, maintenant nous allons les déplacés, appuyez en haut à droite sur "&" puis appuyez sur "Transformer"

37- Ensuite appuyez sur "Extras" puis "Décalage pixels"

38- 4 boutons fléchés apparaîtront (en haut, en bas, à gauche et à droite), appuyez sur le boutons fléché pointent vers le haut 12 fois, puis sélectionnez le calque de tout en bas et fait la même chose mais en appuyant sur le boutons fléché pointent vers le bas

Important : Seul les calques de vert clair et vert foncé doivent-être déplacer, le calque clair doit toujours être déplacer vers le haut et le calque foncé doit toujours être déplacer vers le bas

Et n'oubliez jamais que le calque principal doit toujours être placer au dessus des autres calques (carré foncé et carré clair)


Comme ceci


39- Fusionnez les 3 calques (carrés) entre eux
Pour fusionner les calques jeté un œil à l'étape 29

Comme ceci



40- Une fois les calques fusionnée sélectionnez ou créer un nouveau calque, pour cela appuyez en bas à droite sur les "2 feuilles qui se superpose" avec un petit "+" dessus, puis appuyez sur le petit "+" qui apparaît et appuyez sur "Calque vierge"

41- Une fois le calque créée procurez vous une image, une figure (n'importe laquel), puis ajouter la sur votre projet, appuyez en bas à droite sur les "2 feuilles qui se superpose" avec un petit "+" dessus, puis appuyez sur le petit "+" apparent, puis appuyez sur "Calque de photo" puis "Bibliothèque de photos" et sélectionnez l'image ou la figure que vous souhaitez (moi j'ai pris un tout petit bonhomme)

Comme ceci



42- Ensuite sélectionnez le calque vierge (on y dessinera l'ombre trainante (ombre trainante... :pasdrole: ...est-ce la bonne expression ?! Bref !!))

L'ombre trainante est exactement le même principe qu'avec le premier tutoriel sur PS Touch
S'il vous plaît, Connexion ou S'inscrire pour voir le contenu ou les urls !


43- Une fois que vous avez sélectionnez le calque vierge faites glisser votre doigt sur l'écran de sorte à ce que vous obtenez une rectangle

Comme ceci



44- Appuyez en haut à droite sur "&" puis appuyez sur "Contour/rempliss", puis coloriez ce rectangle en noir

Comme ceci



45- Appuyez n'importe où sur le calque pour que la sélection du rectangle disparaisse

46- Ensuite appuyez en haut à droite sur "&" puis appuyez sur "Transformer", puis regardez bien votre rectangle et vous pourrez voir (à sa droite) une petite flèche en arc-de-cercle

Comme ceci



47- Puis faites un appui long sur cette flèche et faites glisser votre doigt sur l'écran pour faire pivoter votre figure (faites glissés votre figure pour un obtenir un angle de 45°)

Comme ceci



48- Ensuite appuyez en haut à droite sur "&" puis appuyez sur "Transformer", puis agrandissez monstrueusement votre figure

Important : ce n'est pas obligatoire de agrandir monstrueusement votre figure, vous pouvez aussi appuyez sur "Extras" puis "Verrouiller le format des pixels" et transformer votre figure pour que ses côtés s'adapte à votre figure (manuellement) (n'hésitez pas à utiliser plusieurs calque (comme ce qui est dans mon cas))

Comme ceci



49- Ensuite il ne vous reste plus qu'à colorié en noir les morceaux manquants et effacer les morceaux en trop

50- Le résultat final doit être comme ceci


51- Ensuite sélectionnez la calque avec le carré vert puis sélectionnez les pixels (je pense que vous savez le faire maintenant, je n'ai plus besoin vous l'expliquer)

52- Une fois la sélection du pixels faite, sélectionnez de nouveau le calque avec votre figure noire

53- Puis appuyez en haut à gauche sur le petit "carré" avec un petit "crayon" dessus puis appuyez sur "Interverti" puis appuyez sur "Effacer"

Résultats de la manip.



54- Ensuite faite "selec/pixels" sur votre figure noir, puis décochée la pour la faire disparaitre

55- Ensuite créez un nouveau calque vierge, puis sélectionnez ce nouveau calque, puis faite "contour/rempliss" pour le coloré en noir en y mettent l'opacité de "100%" à "20%"

56- Ensuite appuyez sur "&" en haut à droite puis "Fondus"

57- À partir de là c'est a vous de voir quel emplacement doit avoir la droite (diagonal ou droite) apparente

Comme ceci



58- Ensuite sélectionnez votre figure principal

Comme ceci



59- Ensuite appuyez sur "fx" en haut juste à coter de "&", puis appuyez sur "Ombre portée"

60- Réglez l'ombre en suivant ces instructions

Direction : noir
Flou : 32
Distance : 4
Intensité : 15%
(Faite glissez la vue du bas pour affiché "Intensité")

Résultat



61- Puis fusionnez les calques visibles, puis appliquez une "Ombre portée" au calque fusionnée

Réglez l'ombre en suivant ces instructions

Direction : 90°
Couleur : noir
Flou : 24
Distance : 18
Intensité : 20%

Résultat



Voilà c'est fini MAIS...pour une icône optimal pour un Lanceur (nova, apex, evie...etc) vous allez devoir réglé la taille de l'image à 192x192

Appuyez sur "&" en haut à droite, puis appuyez sur "Taille de l'image" (l'image deviendra toute petite !!!).

Avec beaucoup (énormément) de pratique vous arriverez à ce genre de résultats



Important : pour enregistrer votre image appuyez sur le petit carré avec une flèche dessus



Puis appuyez sur "Enregistrer dans la galerie", appuyez sur votre projet (pour le sélectionné), puis appuyez sur "jpg" et sélectionnez "png"

Et.....Voilà le tutoriel est fini (était long aussi :happy1: ) j'ai voulu détailler au maximum pour éviter que vous, vous perdez, cette manipulation ce fait (Plus ou moins) très longuement, je met à peut près 45 minutes à 1H30 :? (bon après 1H30 c'est pour des Icônes très complexes, ça peut même allé plus loin)


Pour me remercier rien de plus simple, un petit Merci ça fait toujours plaisir

@+ ....lina
:cote:
 
Fred

Fred

Admin suppléant
Inscrit
19 Juin 2011
Messages
56 644
Points
83
Salut et merci pour ce beau et long tuto. :lol: :super:
 
Meclot Yoann

Meclot Yoann

Member
Inscrit
12 Juillet 2013
Messages
364
Points
16
Fred a dit:
Salut et merci pour ce beau et long tuto. :lol: :super:
:gene: salut Fred merci et de rien :smile:
 
Haut Bas