Comment puis-je transformer une image carrée en une image circulaire dans Sketch?

15

Je veux prendre une image rectangulaire dans Sketch et lui donner un style cercle / rayon.

Par exemple:

entrez la description de l'image ici

Daniel Fischer
la source
2
Alors ... vous voulez mettre une cheville carrée dans un trou rond?
Lauren-Reinstate-Monica-Ipsum
Cela vous dérange de nous faire savoir ce que vous avez essayé?
DᴀʀᴛʜVᴀᴅᴇʀ
@ale est celui que j'ai fini par utiliser. A bien fonctionné!
Daniel Fischer

Réponses:

22

C'est en fait assez simple. Il y a deux façons de procéder:

1. Utilisez un masque

Meilleur moyen à mon humble avis, car il vous donne plus de flexibilité / options d'édition.

  1. Importez votre image:

    Importation

  2. Tracez un cercle qui masquera votre image:

    Masque

  3. Déplacez le cercle derrière le bitmap à l'aide de l' Backwardicône de la barre d'outils:

    Retour

  4. Utilisez le cercle pour masquer le bitmap, en le sélectionnant et en choisissant Layer › Use as Maskdans le menu:

    Masque

  5. Ta-da!

    Terminé

  6. Comme étape supplémentaire, vous pouvez regrouper votre bitmap et le masque de cercle, pour empêcher le cercle de masquer d'autres formes:

    Groupe

  7. Pour ajouter une bordure: ajoutez une autre forme de cercle placée au-dessus de l'image masquée.


2. Utilisez un motif de remplissage

  1. Dessinez le cercle où vous souhaitez que votre image apparaisse:

    Cercle

  2. Select Fill › Pattern Fill dans l'inspecteur:

    Modèle

  3. Cliquez Choose Image…et sélectionnez votre bitmap:

    Bitmap

  4. Définissez les options de remplissage Filldans le menu déroulant:

    Remplir

  5. Ajoutez une bordure au cercle comme vous le feriez normalement.

  6. Ta-da!

J'espère que cela aide!

Ale Muñoz
la source
2

vous pouvez utiliser une méthode de masquage via Photoshop.

Voici les étapes, je vais utiliser un exemple d'image rectangulaire.

1 * Ajoutez votre image rectangulaire dans Photoshop, placez-la dans un nouveau document et cela créera un nouveau calque juste pour l'image.

Image rectangulaire d'un ciel étoilé, comme vous pouvez le voir, il y a une couche de fond blanc en dessous.

2 * Créez une forme circulaire à la taille souhaitée à l'aide de l'outil cercle, cela créera un calque pour l'objet et le calque sera placé au-dessus de l'image rectangulaire.

Objet cercle au-dessus du calque d'image rectangulaire

3 * Placez maintenant le calque du cercle sous le calque d'image rectangulaire. Cliquez ensuite sur le calque de l'image rectangulaire, cliquez avec le bouton droit et choisissez Créer un masque d'écrêtage.

faites un clic droit sur le calque de l'image rectangulaire et choisissez créer un masque d'écrêtage.  assurez-vous que le calque est au-dessus de l'objet cercle

4 * à ce stade, vous pouvez faire glisser le calque d'image rectangulaire pour l'adapter au cercle. vous pouvez ajuster la partie de l'image rectangulaire que le cercle doit capturer. faites glisser autour du calque d'image rectangulaire pour ajuster le cercle

5 * une fois que vous êtes satisfait de la position de l'image dans le cercle, vous pouvez sélectionner les deux calques et les fusionner pour créer l'image circulaire. Vous pouvez soit cliquer avec le bouton droit après avoir choisi les deux calques et choisir fusionner les calques, soit utiliser le raccourci Cmd+ Esur Mac ou Ctrl+ Esi vous utilisez Windows.

sélectionner les deux calques et les fusionner

Après les avoir fusionnés, le calque devrait ressembler à ceci, ne contenant que la nouvelle image circulaire.

6 * Enfin, vous pouvez ajouter des effets tels que des traits ou des ombres portées à l'aide du bouton d'effet en bas du panneau des calques. il devrait y avoir le symbole fxdessus. Choisissez un trait et vous pouvez ajouter un trait de n'importe quelle couleur à votre nouvelle image circulaire.

utilisez le bouton d'effet au bas du panneau des calques pour créer un effet tel que des traits ou des ombres portées

ajustez les tailles de traits que vous aimez

le résultat final devrait ressembler à ceci, j'ai juste utilisé un trait de couleur verte pour montrer à quoi ressemblerait le trait puisque mon calque de couleur d'arrière-plan est blanc.

J'espère que ça aide.

Warren.W
la source
3
Je pense que l'OP demande une solution dans Sketch.
benteh
Bien que cela puisse aider quelqu'un dans Photoshop, veuillez comprendre que votre réponse pourrait être déclassée car l'OP l'a demandée dans Sketch.
DᴀʀᴛʜVᴀᴅᴇʀ
1

C'est une idée sur la façon d'aborder le problème différemment. Ne coupez pas et ne masquez pas, mais transformez l'image pour qu'elle tienne dans l'espace circulaire. Vous avez besoin d'un plugin qui transforme les coordonnées rectangulaires en coordonnées polaires:

entrez la description de l'image ici

user287001
la source