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

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

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é.

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

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

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

Puis rendez-vous dans les options de fusion

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

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

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

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

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

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

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

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.

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

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.

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

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) .

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

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

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

Et voilà le résultat final

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

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

tuto photoshop webdesign Créer des Flat Ui Icônes avec Photoshop sans illustrator

8 COMMENTAIRES

  1. Je pense que pour l’ombre ce serait mieux de mettre du noir avec une opacité faible (10%), comme ça pas de soucis pour changer la couleur du fond sans devoir changer la couleur de l’ombre

LAISSER UNE RÉPONSE