Créer des Flat Ui Icônes avec Photoshop

Changeant un peu en faisant du webdesign cette fois-ci dans TutsPS, dans ce dernier tutoriel nous allons créer des Flat Ui Icônes en quelques étapes avec Adobe Photoshop sans utiliser illustrator.

Créer des Flat Ui Icônes avec Photoshop

Bienvenu dans ce nouveau tuto dans la catégorie webdesign, puis que beaucoup de personnes ont demandés comment réaliser ce genre d’icône avec Photoshop en quelques étapes.

Et voilà un aperçu du résultat final

Pour commencer, ouvrez un nouveau document de 1000×1000 pixels , résolution 72Dpi , couleurs RVB8bits .

Ajoutez un calque de remplissage dégradé en allant dans Menu > Calque > Nouveau calque de remplissage > Dégradé.

Prenez l’outil rectangle arrondi (U) avec un rayon de 10px et dessinez un rectangle rouge #de393e .

Puis rendez-vous dans les options de fusion

Toujours avec l’outil Rectangle arrondi dessinez un rectangle avec un rayon de 30px .

Puis appliquez dessus une ombre portée dans les options de fusion

Puis prenez l’outil forme personnalisée (U) et dessinez un triangle rouge #d22222 et ajustez-le comme ceci.

Maintenant, prenez l’outil plume (P) en mode calque de forme et la couleur Rouge #961817 et dessinez un autre triangle comme ceci pour obtenir l’effet d’ombre portée.

Après, mettez-vous juste au-dessus du premier rectangle arrondi rouge, prenez l’outil plume (P) en mode calque de forme et la couleur rouge #ad2629. Puis dessinez la forme suivante.

Maintenant, suivez la même méthode utilisée dans le tutoriel suivant pour effacez le bout de la forme qui dépasse (la méthode du masque de fusion ) ou bien utilisez l’outil gomme (E) .

Pour finir, mettez le calque en écrêtage, en allant dans Menu > Calque > Créer un masque d’écrêtage.

Et voilà le résultat final

Et avec la même méthode vous pouvez créer toute sorte d’icônes Flat UI en quelques étapes.