Как превратить квадратное изображение в круглое в Sketch?

Это на самом деле довольно легко. Есть два способа сделать это:

1. Используйте маску

Лучший способ, ИМХО, так как он дает вам больше возможностей для гибкости/редактирования.

1. Импортируйте свое изображение:

   

2. Нарисуйте круг, который будет маскировать ваше изображение:

   

3. Переместите круг за растровое изображение с помощью Backwardзначка на панели инструментов:

   

4. Используйте круг, чтобы замаскировать растровое изображение, выделив его и выбрав Layer › Use as Maskв меню:

   

5. Та-да!

   

6. В качестве дополнительного шага вы можете сгруппировать растровое изображение и маску круга, чтобы круг не маскировал другие фигуры:

   

7. Чтобы добавить рамку: добавьте еще одну круглую форму, расположенную над замаскированным изображением.

2. Используйте заливку узором

1. Нарисуйте круг, где вы хотите, чтобы ваше изображение появилось:

   

2. Select Fill › Pattern Fillв инспекторе:

   

3. Нажмите Choose Image…и выберите растровое изображение:

   

4. Установите параметры заливки Fillв раскрывающемся списке:

   

5. Добавьте границу к кругу, как обычно.

6. Та-да!

Надеюсь, поможет!

вы можете использовать метод маскирования через Photoshop.

Вот шаги, я буду использовать образец прямоугольного изображения.

1* Добавьте свое прямоугольное изображение в Photoshop, поместите его в новый документ, и он создаст новый слой только для изображения.

2* Создайте круглую форму нужного размера с помощью инструмента «Круг». Он создаст слой для объекта, и этот слой будет размещен поверх прямоугольного изображения.

3* Теперь поместите слой с кругом под слой с прямоугольным изображением. Затем щелкните слой прямоугольного изображения, щелкните правой кнопкой мыши и выберите «Создать обтравочную маску».

4* в этот момент вы можете перетаскивать прямоугольный слой изображения, чтобы подогнать его под окружность. вы можете настроить, какую часть прямоугольного изображения должен захватывать круг.

5* когда вас устраивает положение изображения в круге, вы можете выбрать оба слоя и объединить их вместе, чтобы создать круглое изображение. Вы можете щелкнуть правой кнопкой мыши после выбора обоих слоев и выбрать объединение слоев или использовать сочетание клавиш Cmd+ Eна Mac или Ctrl+ E, если вы используете Windows.

6* Наконец, вы можете добавлять эффекты, такие как штрихи или тени, с помощью кнопки эффекта в нижней части панели слоев. на нем должен быть символ fx. Выберите обводку, и вы сможете добавить обводку любого цвета на свое новое круглое изображение.

Надеюсь, это поможет.

Это идея, как подойти к проблеме по-другому. Не вырезайте и не маскируйте, а трансформируйте изображение, чтобы оно соответствовало круглому пространству. Вам нужен плагин, который преобразует прямоугольные координаты в полярные: