Перейти к содержимому

Как картинку вставить в круг

  • автор:

Как картинку вставить в круг

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

Снимок экрана с коллажем из рисунков разного размера в Publisher

Вставка рисунка в фигуру

Щелкните фигуру, в которую вы хотите добавить рисунок.

На вкладке Форматв группе Стили фигур щелкните стрелку Заливка фигуры.

Снимок экрана: команда "Заливка рисунком" в группе "Заливка фигуры" на вкладке "Формат" в Publisher.

В папке или расположении с рисунком, который вы хотите вставить, щелкните файл рисунка и нажмите кнопку Вставить.

Примечание: Рисунок невозможно перемещать внутри фигуры.

Ниже вы найдете советы и рекомендации по вставке рисунков в фигуры.

Подумайте над тем, какая фигура подойдет для рисунка. Если рисунок квадратный, то его лучше вставить в круг. Если рисунок прямоугольный, овальная форма будет смотреться интересно и привлекательно с эстетической точки зрения. Если вы хотите привлечь внимание к центру рисунка, может подойти форма звезды.

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

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

Вставка рисунка в фигуру

Выделите фигуру, щелкните Автофигура в меню Формат, а затем откройте вкладку Цвета и линии.

В списке Цвет в разделе Заливка щелкните Эффекты заливки, откройте вкладку Рисунок и нажмите кнопку Выбрать рисунок.

В диалоговом окне Выбор рисунка найдите папку, содержащую рисунок для вставки, выберите файл и нажмите кнопку Вставить.

Чтобы сохранить пропорции рисунка при вставке в фигуру (для предотвращения искажения), установите флажок Сохранить пропорции рисунка и нажмите кнопку ОК.

В диалоговом окне Формат автофигуры откройте вкладку Размер и установите флажок Сохранить пропорции, чтобы сохранять пропорции фигуры при изменении ее размера. Нажмите кнопку ОК.

Ниже вы найдете советы и рекомендации по вставке рисунков в фигуры.

Подумайте над тем, какая фигура подойдет для рисунка. Если рисунок квадратный, то его лучше вставить в круг. Если рисунок прямоугольный, овальная форма будет смотреться интересно и привлекательно с эстетической точки зрения. Если вы хотите привлечь внимание к центру рисунка, может подойти форма звезды.

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

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

Совет: Если вы установили флажок Сохранить пропорции, чтобы сохранить положение рисунка внутри фигуры относительно размеров фигуры, то для изменения размера рисунка можно воспользоваться одним из угловых маркеров.

Как в Фотошопе вставить картинку в фигуру (форму)

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

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

Окончательное изображение, вставленное в фигуру

В этом уроке для вставки картинки в форму я буду использовать Фотошоп 2022 года.

Видеоурок у меня на канале:

Создайте новый документ

Начните с создания нового документа Photoshop. Если вы находитесь на главном экране, нажмите кнопку Новый файл.

Нажав кнопку Новый файл на главном экране Photoshop

Или можете подняться в меню Файл на панели и выбрать Новый.

Переходим в Файл Создать

В любом случае откроется диалоговое окно Новый документ, где можно ввести необходимые параметры в колонке справа. Я создам документ квадратной формы, установив ширину и высоту на 2000 пикселей.

Поскольку мы будем помещать в форму изображение, а изображения обычно сохраняются с большим разрешением, я изменю значение Разрешение на 300 пикселей на дюйм. А для параметра Содержимое фона я оставлю значение Белый.

Новые настройки документа

Затем нажмите кнопку Создать.

Нажмите Создать

Photoshop создаст новый документ.

Новый документ

Откройте панель Фигуры

Самый быстрый способ рисования пользовательских фигур в Photoshop — это добавление их из панели Shapes. Чтобы открыть Фигуры, перейдите меню Окно и выберите пункт Фигуры.

Перейдите в Окно Фигуры

Панель Фигуры открывается в колонке вторичных панелей (слева от основных). Показать или скрыть панель можно, щелкнув на ее значок.

Панель Фигуры открывается в узкой панели столбцов

Сначала видны только фигуры по умолчанию, разделены на группы.

Пользовательские группы фигур по умолчанию

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

Просмотр фигур внутри группы

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

Расширение панели фигур

Загрузка недостающих фигур

Чтобы загрузить все недостающие фигуры, входящие в состав Photoshop, щелкните значок меню панели Фигуры.

Щелкните значок меню

Затем выберите Legacy Shapes and More.

Загрузка группы Legacy Shapes and More

Новая группа Legacy Shapes and More появится под группами по умолчанию.

Новая группа Legacy Shapes and More

Внутри группы находятся еще две группы. 2019 Shapes содержит сотни новых фигур, которые были добавлены в Photoshop 2020. А в группе All Legacy Default Shapes содержатся классические фигуры из старых версий Photoshop.

Группы 2019 Shapes и All Legacy Default Shapes

Выберите фигуру

Для этого урока будем использовать одну из классических фигур. Откроем группу All Legacy Default Shapes.

Открытие всех устаревших форм по умолчанию

Затем прокручиваем вниз до набора Природа и раскрываем его.

Открытие группы Природа

В наборе Природа выбираем форму Бабочка.

Выбор фигуры бабочки

Перетащите фигуру на холст

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

Перетаскивание фигуры с панели Фигуры на холст

Photoshop рисует фигуру, когда вы отпускаете кнопку мыши.

Фотошоп рисует фигуру

Изменение размера и центрирование фигуры

Перед изменением размера фигуры перейдите на панель параметров и убедитесь, что между полями Ширина и Высота выбран значок ссылки для фиксации соотношения сторон.

Убедитесь, что ширина и высота связаны друг с другом

Затем измените размер фигуры, щелкнув и перетащив любую из ручек трансформации. Если во время перетаскивания удерживать клавишу Alt (Win) / Option (Mac) на клавиатуре, размер фигуры будет изменяться относительно центра.

Перетащите точку, чтобы изменить размер фигуры

Щелкните и перетащите фигуру в центр холста. Когда вы приблизитесь к центру, она должна закрепиться на месте.

Перетаскивание фигуры в центр

Затем нажмите галочку на панели параметров, чтобы принять изменения.

Кликните на галочку

На панели слоев фигура появляется на собственном слое-фигуре. Мы знаем, что это слой-фигура, по значку в правом нижнем углу миниатюры.

Новый слой фигура на панели Слои

Проверьте параметры заливки и обводки на панели свойств

Когда слой фигуры выбран, панель свойств дает нам доступ ко всем параметрам фигуры, включая заливку и обводку.

Параметры заливки и обводки на панели Свойства

По умолчанию Photoshop использует черный цвет для заливки, что вполне нормально, поскольку мы все равно не увидим цвет, когда заполним фигуру изображением.

Но Photoshop также добавляет черную обводку размером 1 пиксель вокруг фигуры.

Заливка и обводка по умолчанию

Мы можем добавить обводку позже, если она нам понадобится. Но пока отключите обводку, щелкнув по цвету границы:

Щелкните образец цвета обводки

Щелкните значок Нет цвета в верхней левой части панели. Затем кликните за пределами панели, чтобы закрыть ее, или нажмите Enter (Win) / Return (Mac) на клавиатуре.

Установка обводки на Без цвета

Поместите изображение в документ

Поскольку мы хотим, чтобы изображение появилось в том же документе, что и наша фигура, то воспользуемся командой Photoshop Поместить в документ.

Поднимитесь в меню Файл и выберите команду Поместить в документ.

Перейдите в Файл Поместить встроенный

Перейдите к месту сохранения изображения на компьютере. В моем случае оно находится в папке на рабочем столе. Нажмите на картинку, чтобы выбрать ее, а затем кликните кнопку Поместить.

Выбираем изображение и нажимаем Place

Photoshop добавляет изображение сверху фигуры. Если картинка больше, чем размер документа, Photoshop изменит ее размер.

Изображение помещается перед фигурой

Мы изменим размер изображения после его вставки в форму. А пока нажимаем галочку на панели параметров.

Кликните по галочке

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

Photoshop помещает изображение как смарт объект

Создайте обтравочную маску

В данный момент фотография находится перед фигурой. Чтобы поместить фото в фигуру, щелкните значок меню панели слоев.

Щелкните значок меню панели Слои

Затем выберите Создать обтравочную маску.

Выбор команды Создать обтравочную маску

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

Результат после обрезки изображения по форме

Вернувшись на панель слоев, обратите внимание, что слой изображения теперь смещен вправо, а маленькая стрелка указывает вниз на слой фигуры под ним. Так Photoshop сообщает нам, что мы создали обтравочную маску.

Панель Слои с обтравочной маской

Изменение размера и положения изображения с помощью Свободного трансформирования

Чтобы изменить размер и положение изображения в пределах фигуры, откройте меню Edit и выберите Free Transform.

Свободное преобразование

В панели параметров убедитесь, что значок ссылки выбран между полями Ширина и Высота.

Убедитесь, что значок ссылки выбран

Измените размер изображения, перетащив любую из точек трансформации. При перетаскивании точки можно удерживать клавишу Alt (Win) / Option (Mac) на клавиатуре, чтобы изменить размер изображения относительно его центра.

Изменение размера изображения внутри фигуры

Перетащите фотографию, чтобы расположить объект съемки в пределах формы. Возможно, придется снова и снова изменять размер и положение изображения, пока вы не добьетесь нужного результата.

Позиционирование изображения в форме

Когда закончите, нажмите галочку на панели параметров.

Клик по галочке

Как изменить цвет фона

На данный момент мы поместили изображение в форму, и основной эффект достигнут. Далее можно сделать несколько вещей:

  • добавить обводку вокруг фигуры
  • изменить цвет фона за фигурой
  • полностью удалить фон.

Для начала я покажу, как изменить цвет фона. И самый простой способ сделать это — использовать слой заливки Solid Color.

Добавьте слой заливки Solid Color

Мы хотим, чтобы слой заливки Solid Color располагался непосредственно над слоем Background. Поэтому на панели слоев щелкните на слое Background, чтобы выбрать его.

Выбор фонового слоя

Затем нажмите значок Новый слой заливки или Корректирующий слой в нижней части панели слоев:

Щелкните значок Новая заливка или Корректирующий слой

Выберите Solid Color в верхней части списка.

Добавление слоя заливки сплошным цветом

Выберите новый цвет фона

Photoshop открывает Color Picker, чтобы мы могли выбрать новый цвет для фона. По умолчанию используется черный цвет, который определенно подчеркивает детали формы. В нашем случае черный цвет слишком темный для бабочки.

Эффект с черным цветом фона

Вы можете выбрать другой цвет в Color Picker. Но вы также можете выбрать цвет непосредственно из изображения внутри формы. Просто наведите курсор мыши на картинку, и курсор превратится в пипетку. Затем нажмите на цвет, который хотите выбрать.

Я выберу светлый тон кожи на лбу девушки, и он мгновенно станет новым цветом фона.

Выборка нового цвета фона из изображения внутри фигуры

Когда найдете цвет, который вам нравится, нажмите OK, чтобы закрыть Color Picker. Вернувшись на панель слоев, мы видим, что слой заливки Solid Color был добавлен между фоновым слоем и расположенным над ним слоем фигуры.

Панель Слои с новым слоем заливки Сплошной цвет

Как добавить обводку вокруг фигуры

Еще один способ усилить эффект — добавить обводку вокруг фигуры.

Выберите слой с фигурой

Сначала на панели слоев щелкните по слою с фигурой, чтобы выбрать его.

Выбор слоя фигуры

Добавление эффекта слоя с обводкой

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

Щелкните значок эффектов слоя

И выберите Stroke.

Добавление эффекта слоя Обводка

Photoshop открывает диалоговое окно Стиль слоя с параметрами Обводка в средней колонке. Чтобы изменить цвет обводки, щелкните образец цвета.

Затем выберите новый цвет в Color Picker. Я выберу белый цвет, установив значения R, G и B равными 255. Нажмите OK, когда закончите, чтобы закрыть Color Picker (Выбор цвета).

Вернувшись в диалоговое окно Стиль слоя, установите для параметра Положение значение Снаружи, чтобы обводка появилась вокруг внешней стороны фигуры. Затем увеличьте значение Size, чтобы отрегулировать толщину обводки. Для моего изображения хорошо подходит размер около 18 px.

Установка положения и размера штриха

Нажмите OK, чтобы закрыть диалоговое окно Стиль слоя. А вот мой результат с обводкой вокруг фигуры.

Результат с обводкой, добавленной вокруг формы

Если обводка вам не нравится, можете отключить ее на панели слоев, нажав на значок видимости рядом со словом Stroke.

Включите или выключите обводку, щелкнув значок видимости

Как удалить фон за фигурой

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

Выключите фоновый слой и слой заливки Solid Color

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

Отключение фонового слоя

А если в предыдущем разделе был добавлен слой заливки Solid Color, щелкните значок видимости, чтобы отключить его.

Отключение слоя заливки сплошным цветом

В результате у нас остается прозрачность позади формы, которую Photoshop представляет в виде шашечного узора.

Фон теперь прозрачный

Обрежьте прозрачные пиксели

Нам не нужно все лишнее пространство вокруг фигуры. Чтобы обрезать его, откройте меню Изображение и выберите пункт Обрезка.

Идем в Изображение Обрезать

В диалоговом окне Обрезка убедитесь, что в верхней части выбран параметр Прозрачные пиксели, а в нижней — Сверху, Снизу, Слева и Справа. Затем нажмите кнопку OK.

Настройки обрезки

Photoshop обрежет области вокруг фигуры.

Окружающие пиксели были обрезаны

Сохраните результат в файле PNG

Наконец, чтобы сохранить результат, поднимитесь в меню Файл и вместо выбора Сохранить или Сохранить как выберите Сохранить копию.

Переходим в Файл Сохранить копию

Сохранить можно на ПК или в облаке.

Выбор опции Сохранить на вашем компьютере

Чтобы сохранить прозрачность фигуры, мы не можем сохранить ее как файл JPEG, поскольку JPEG не поддерживает прозрачность. Вместо этого нам нужно сохранить его как файл PNG. Щелкните поле Save as type box на компьютере с Windows или Format box на Макбуке и выберите PNG.

Установка типа файла в PNG

Затем дайте файлу имя. Я назову его image-in-shape.png.

Имя файла

Перейдите к месту сохранения файла на компьютере. Я сохраню его в той же папке на рабочем столе, где сохранено мое изображение. Затем нажмите кнопку Сохранить.

Нажмите кнопку Сохранить

Наконец, в диалоговом окне Параметры формата PNG выберите внизу опцию Наименьший размер файла и нажмите OK.

Выбор наименьшего размера файла

Вот и все! Загляните в раздел Фотоэффекты в Фотошопе, чтобы найти еще больше уроков по эффектам Photoshop!

Как вставить фото в круг в Канве и обрезать его до нужной формы

BY

Интересно узнать, как вставить фото в круг в Канве и скруглить его? В процессе создания разнообразных дизайнов вам может пригодиться этот навык – ведь некоторые форматы просто нельзя представить без круглой формы!

Есть один проверенный способ, позволяющий быстро добиться нужного результата – вам остаётся только внимательно прочитать инструкции и попробовать скруглить картинку на практике.

Давайте для начала откроем нужный шаблон – выбрать его можно на главной странице сервиса (не забудьте авторизоваться!). Здесь представлено много разных шаблонов — резюме, пост в VK, логотип, даже можно разработать инфографику в сервисе Канва. Или нажмите на кнопку «Настраиваемый размер» , если вы хотите создать что-то совершенно уникальное.

Далее вы можете приступать непосредственно к дизайну – а в процессе мы разберемся, как в Канве сделать фото круглым.

Работаем с рамками

Очень простой способ, который совершенно бесплатен и доступен каждому пользователю. Сделать круглую фотографию в Канве можно с помощью встроенных рамок, которые уже имеют нужную форму. При этом модификаций множество – только успевай выбирать!

Давайте же поработаем с ними и подробно разберемся, что нужно сделать и как в Канве вставить фото в фигуру, чтобы получился круг?

Загрузить фото

Предварительно вам нужно открыть вкладку «Загрузки» и загрузить в сервис свое изображение или видео:

  • находим на панели слева значок загрузок;
  • кликаем по кнопке «Загрузить медиа» ;

  • выбираем изображение из папки на рабочем столе (или из другой директории) и открываем его.

Готово, мы приближаемся к ответу на вопрос, как в Канве обрезать фото по кругу! Теперь просто зажмите картинку курсором и перетащите ее в правую часть экрана. Отредактируйте снимок, если это необходимо, изменив размер, растянув его за углы или перевернув. Также вы можете поработать с яркостью, контрастностью и другими показателями.

Где найти рамки

Самое время переходить к следующему этапу – как в Канве вырезать изображение по контуру и сделать картинку в круге?

  • Находим на панели слева вкладку «Элементы» ;
  • пролистываем до блока «Рамки» ;

  • выбираем нужную форму – она сразу появится на шаблоне;
  • меняем размер и двигаем ее по листу в нужное место.

Обратите внимание – круг будет в самом начале списка, но не стоит на нем останавливаться. Если вы прокрутите все варианты, увидите массу других скруглённых форм и овалов. Есть круглые формы, уже украшенные разнообразными рамочками и узорами – почему бы не поэкспериментировать?

Скруглить фото

Что делать дальше, чтобы обрезать фото по контуру в Канве? Ваша рамка уже на шаблоне:

  • открываем вкладку загрузок и просто перетягиваем фотографию в круг;
  • двигаем снимок внутри рамки так, чтобы отображалась определённая часть.

Вот и все, картинка приобретёт круглую форму автоматически, группировать элементы не нужно.

По сути, мы разобрались, как обрезать фото по кругу в Canva.

Ещё рамки

Можно воспользоваться и дополнительными опциями, чтобы сделать дизайн еще более привлекательным!

  • Во вкладке «Элементы» наверху есть поисковая строка;
  • Впишите туда запрос «Круглые рамки» и нажмите на кнопку ввода.

На экране появится подборка кругов, узоров и других композиций – вы можете добавить круглую рамочку к вашему снимку. Просто выберите понравившийся элемент и перетащите его на экран – уменьшите или увеличьте размер. Чтобы рамка не перекрывала снимок, нажмите на неё правой кнопкой мышки и выберите «На задний план» .

Только посмотрите, сколько классных украшений уже ждёт вас! На любой вкус и цвет.

Обратите внимание, что в Канве встречаются премиум-элементы, доступные только в подписке PRO. После покупки платного аккаунта вы сможете отказаться от подписки Канва.

Смогли разобраться, как сделать фото в круге в Канве? Поделитесь, какой из способов показался вам наиболее простым, какие инструменты вы применяете в свой работе? Может быть, у вас есть свои секреты и хитрости – расскажите в комментариях, как можно упростить процесс создания нужных форм!

КАК В ФИГМЕ ВСТАВИТЬ ИЗОБРАЖЕНИЕ В КРУГ

Чтобы вставить изображение в круг в Figma, можно использовать форму с открытым контуром и заливкой изображением. Сначала необходимо выбрать инструмент «Круг» и создать круговую фигуру.

Затем нужно зайти в панель свойств и выбрать «Заливка». Далее необходимо выбрать «Изображение» и загрузить нужное изображение. После загрузки изображения его нужно масштабировать так, чтобы оно заполнило весь круг. Для этого можно использовать инструмент «Масштабирование».

Если в выбранной картинке нет доступного пространства для заполнения всего круга, можно зафиксировать центр изображения в центре круга, используя инструмент «Центрирование».

Также, можно добавить обводку к круговой форме, чтобы сделать изображение более выразительным. Для этого нужно выбрать инструмент «Обводка», выбрать толщину и цвет обводки и применить на круговую форму.

В итоге, вставка изображения в круг в Figma может быть осуществлена за считанные минуты и без особых трудностей при помощи доступных инструментов.

Как обрезать фигуру в ФИГМА │ 3 СПОСОБА

2 способа как обрезать картинку в Figma. #figma​ #фигма​ #курсы​

КРУГ В FIGMA. Как делать круговые диаграммы. Как обрезать фото в форме круга. Инструмент Ellipse.

FIGMA: ОБРЕЗАЕМ ФОТО ВНИЗУ В ФОРМЕ КРУГА. Используем маску — Уроки фигма на русском

Как вставить картинку в фигуру (круг) с выходом за границы в Фигме

Как в Фигме вставить картинку в фигуру — коротко и по делу!

Дизайн главного экрана сайта в Figma. Практический урок по Фигаме

Как вырезать объект в Figma — Простое действие по удалению фона

Как в иллюстраторе вставить картинку в круг и вынести нужные части из круга

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *