Dessin de formes personnalisées

Les formes ont parcouru un long chemin dans Photoshop et savoir comment les utiliser dans votre application peut faire toute la différence entre succès et échec. Les formes peuvent apporter de la profondeur, de l'équilibre et de l'unité à vos applications. Ce didacticiel présente l'outil de forme de Photoshop et vous apprend à dessiner des formes personnalisées de base. Ce faisant, vous serez prêt pour le prochain tutoriel de cette série: créer des boutons..

Avant de commencer, laissez-moi vous montrer ce que je veux dire lorsque je parle de la relation entre les formes, la profondeur, l’équilibre et l’unité..

Utilisons par exemple l'interface par défaut pour les téléphones iPhone et Android. Les boutons, icônes ou raccourcis des deux téléphones apparaissent comme s’ils se trouvaient au-dessus de l’arrière-plan, ce qui correspond à la profondeur. Les téléphones commencent à différer, cependant, en ce qui concerne l’équilibre et l’unité..


Icônes iPhone

Apple est fier de son design (comme il se doit) et tandis que les deux téléphones fixent les icônes en place, l'iPhone conserve les icônes dans un ordre spécifique. Les téléphones Android peuvent avoir des icônes en haut et des icônes en bas, ce qui peut gâcher massivement l’équilibre de votre écran. Cela change-t-il les fonctionnalités? Est-ce que c'est utilisable? C'est la coutume, donc si cela fonctionne pour vous, alors oui. Est-ce que ça a l'air le meilleur? Non, ça n'a pas l'air bien parce que ce n'est pas équilibré.


Icônes Android

La même chose pourrait être dite pour l'unité. L'iPhone a une taille et une forme standard pour les icônes. Le contenu de la taille et de la forme peut varier et varie. Android a juste une taille standard, mais pas de forme standard. En limitant toutes les icônes à la même taille et surtout à la même forme, Apple crée une unité parfaite. Rien ne semble à sa place. Mais ce n’est pas le cas et le débat entre Apple et Android, et bien que je sois un utilisateur de Mac, j’ai choisi d’utiliser un téléphone Android par rapport à l’iPhone, je ne suis donc pas partisan..


Passons maintenant à l'apprentissage de l'outil de forme Photoshop:

  1. Ouvrez Photoshop et créez un nouveau document.
  2. Je vais utiliser les préréglages suivants pour rester simple.
  3. Sélectionnez l'outil Forme (U) dans la barre d'outils..
    Cliquez pour développer les options de forme. Vous pouvez aussi simplement regarder la barre d'options pour voir les différentes formes disponibles.
  4. Il y a plus d'options dans la barre d'options que ce que nous allons couvrir, nous allons donc nous concentrer sur les six options de formes réelles que nous avons. Nous allons entrer davantage dans l'outil stylo dans un prochain tutoriel.

  5. Pour dessiner une forme, sélectionnez la forme dont vous avez besoin dans la barre d'options, j'ai choisi un cercle.
  6. Cliquez et faites glisser sur la toile pour créer la forme.
  7. Remarquez comment nous n'avons pas encore choisi la couleur souhaitée. Ne vous inquiétez pas, nous pouvons changer la couleur assez facilement une fois la forme dessinée. Dans la palette Calques, recherchez le nouveau calque nommé "Shape-1".

  8. Double-cliquez sur la nuance colorée du calque Shape-1 dans la palette des calques pour ouvrir le sélecteur de couleur..
  9. Choisissez une couleur et cliquez sur OK.

C'était donc la vue de 30 000 pieds pour créer une forme. Dans cet exemple, je viens d'utiliser la forme ovale mais il y a tellement plus que vous pouvez faire avec d'autres formes.


Voici quelques astuces qui rendraient le travail sur les formes un peu plus efficace et plus simple..

  1. Options de forme
  2. Barre d'espace
  3. touche Alt
  4. Majuscule (sans forme existante)
  5. Shift (avec forme existante)
  6. Alt (avec forme existante)
  7. Ctrl + T

Options de forme

Par défaut, sans modifier les paramètres prédéfinis, Photoshop vous donnera des formes qui ressemblent à celles-ci. L'outil de formes personnalisées contient également tout un sous-ensemble de formes de la liste déroulante, ce qui vous donne plus de liberté de création..

Chaque forme, personnalisée ou non, comporte des paramètres vous permettant de personnaliser ces formes et de vous simplifier la vie..

L'option "Non contraint" vous permet de créer une forme à la taille souhaitée sans conserver les proportions (c'est la valeur par défaut). Pour les formes rectangulaires, l'option "Carré" vous permet de créer un carré parfait. Vous pouvez également définir une taille et une proportion fixes. Si vous connaissez exactement la taille dont vous avez besoin, précisez-la ici et cela vous facilitera la vie! Ensuite, il y a quelques cases à cocher. La case à cocher "Depuis le centre" dessine la forme autour de l'origine de la souris au lieu de la direction dans laquelle la souris se dirige et l'option "Aligner sur les pixels" fait exactement cela..


Honnêtement, je n'utilise pas beaucoup ces deux options car j'aime mieux utiliser les raccourcis expliqués ci-dessous. C'est juste plus rapide!

Barre d'espace

Ahh, c'est l'un de mes favoris. Si vous maintenez la barre d'espace enfoncée lorsque vous dessinez une forme, vous pouvez la repositionner pendant que vous dessinez. Peu importe si vous le maintenez enfoncé avant ou après avoir cliqué pour commencer à dessiner la forme.

REMARQUE: Si vous avez déjà relâché votre souris, il est trop tard. Vous devrez juste le déplacer manuellement.

Cliquez pour commencer à dessiner, maintenez la barre d'espace enfoncée, puis déplacez simplement votre souris. La forme doit bouger avec vous. Cela aide à bien aligner tout, même après avoir commencé à dessiner la forme.

SHIFT (sans forme existante)

Avant de dessiner des formes dans le calque, vous pouvez maintenir la touche MAJ enfoncée pour que tout soit parfait. Cercles parfaits, carrés parfaits, lignes droites parfaites et même lignes parfaitement inclinées à 45 degrés. Cela ressemble beaucoup à ce que nous avons vu avec l'outil Marquee il y a quelques semaines. Si vous maintenez la touche SHIFT enfoncée, tout est proportionné et vous pouvez remplacer la sélection du bouton radio Carré dans les options de forme..

SHIFT (avec forme existante)

Une fois que vous avez déjà une forme sur la toile, la touche SHIFT fonctionne un peu différemment. Si vous avez déjà une forme sur le canevas et que vous l'avez également sélectionnée dans la palette des calques, maintenez la touche MAJ enfoncée pour pouvoir ajouter dynamiquement à la forme existante..

Maintenez SHIFT enfoncé et vous verrez apparaître un petit symbole plus (+) à côté du curseur. Ajoutez à la forme en faisant glisser une nouvelle forme sur la forme existante. Remarquez dans la capture d’écran que j’ai cadré la fin de notre rectangle arrondi. J'aurais pu le faire de différentes manières, mais cela impliquerait d'ajouter beaucoup plus d'étapes.

Qu'allons-nous faire avec quelque chose comme ça? Créez un couple de formes supplémentaires à l'aide de l'outil Rectangle et terminez la dernière de la même manière que vous avez utilisée la première pour créer un joli petit ensemble de boutons de navigation simples:

ALT (avec forme existante)

En maintenant enfoncée la touche ALT avec une forme existante, une partie sera supprimée. Avec une forme existante sur la toile et sélectionnée, maintenez la touche ALT enfoncée et un symbole moins (-) à côté du curseur apparaîtra. Cela indique que vous êtes sur le point de supprimer une partie de la forme. Dans la capture d'écran, j'ai pris la forme personnalisée de l'enveloppe et enlevé cette partie du rectangle. Il ne nous reste plus qu'à ajouter du texte et nous avons un bouton de messagerie très simple pour notre application.!

CTRL + T

C'est le moyen le plus rapide et le plus efficace de redimensionner une forme existante. Assurez-vous que la forme est sélectionnée dans la palette des calques et utilisez le raccourci clavier CTRL + T. Vous devriez voir les poignées sur la forme qui vous permettront de redimensionner à votre guise. Rapide et facile, cela fonctionne pour toutes les couches, pas seulement avec les formes. J'utilise ça une tonne!


Apprendre à utiliser l'outil Forme n'est qu'un début. Le vrai truc consiste à apprendre à appliquer des formes de base de manière unique et intéressante. Vous pouvez certainement utiliser ces formes pour plus que des boutons!

Pour stimuler votre créativité, voici quelques exemples uniques et créatifs de l'outil de forme en action.!

Les horloges

Dia Carta

Dropbox

Boîte Domino