Как сделать круглую фотографию

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

В Figma у любого изображения можно изменить свойства заливки и сделать минимальную коррекцию цвета. Чтобы открыть эти настройки, выделите любую иллюстрацию на макете, затем в блоке Fill нажмите на её миниатюру.

Свойства заливки:

Fill — изображение полностью заполняет собой доступное пространство, в котором находится.

Fit — изображение заполняет пространство так, чтобы его было видно целиком.

Crop — обрезает изображение и фиксирует его видимую часть. При изменении размера оно может растянуться.

Tile — всё свободное пространство заполняется копиями изображения. Это свойство очень удобно использовать с паттернами.

Хотя в Figma можно сделать минимальную цветокоррекцию, качественно отредактировать фотографию не получится — для этого лучше идти в Photoshop.

Настройки цветокоррекции в Figma:

• Exposure — экспозиция.
• Contrast — контраст.
• Saturation — насыщенность.
• Temperature — температура.
• Tint — оттенок.
• Highlights — интенсивность света.
• Shadows — интенсивность тени.

Как обрезать кругом в «Фотошоп»

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

Откройте фотографию, которую вы хотите превратить из прямоугольной в круглую. Теперь перейдите к инструменту «Овальная область».
Как и в прошлом случае, сейчас нужно нарисовать своеобразный круг. Не забудьте и в этот раз зажать клавишу «Shift». Изначально вы можете круглую выделенную область расположить не совсем правильно. Наведите курсор на неё и зажмите левую кнопку мыши — это позволит свободно перетаскивать круг выделения по изображению. Так вы легко выделите нужный объект. Осталось понять, что же нужно делать с ним дальше.
Теперь можно вырезать круг в «Фотошопе», скопировав выделенную область на совершенно новое изображение. Для этого нажмите комбинацию клавиш «Ctrl+C» или перейдите по пути «Редактирование>>Копировать». Затем создайте новое изображение при помощи сочетания клавиш «Ctrl+N». В его свойствах ничего не меняйте, так как разрешение будет подобрано под размер скопированной области. Можете только сменить имя изображения. В поле «Содержимое фона» выберите пункт «Прозрачный». В открывшемся пустом изображении произведите нажатие комбинации клавиш «Ctrl+V». Или же перейдите по пути «Редактирование>>Вставить». Так вы получите требуемый результат — круглую фотографию на прозрачном фоне. Её можно использовать в оформлении сайта, текстового документа или в качестве аватарки.

Фото в круге в «Фотошоп»

Дополнительно вы можете поиграться со стилями слоя, добавив обводку (положение должно быть внутренним), свечение, тень или всё вместе. Может получиться очень красивое фото в круге. «Фотошоп» способен на многое, кроме обрамления вы можете исказить и само изображение при помощи фильтров. Но это уже не тема данного урока. Сохранять изображение необходимо в формате PNG, в противном случае прозрачная область заменится на белую.
Похожим образом в «Фотошопе» создаются круги на воде. Но этот процесс уже более продолжительный. Для получения подобных кругов используются фильтры «Зигзаг» и «Размытие по Гауссу».

Как убрать пиксели с фото в Фотошопе

Инструмент для растушевки

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

Будьте внимательны и аккуратны

Убрать пиксели на фото в Фотошопе таким образом несложно и достаточно быстро, метод рабочий, но чреват потерей резкости. Вернем детализацию, используя удобный инструмент «Умная резкость», который находится во вкладке «Фильтры».

Для лучшего эффекта поработаем с резкостью

Опытным путем подберите числовые значения для параметров «Эффект» и «Радиус». Первый отвечает за силу воздействия фильтра, то есть, чем выше его показатели, тем контрастнее и четче будет выглядеть картинка. «Радиус» увеличивает количество пикселей, затронутых эффектом. Не делайте его значения слишком большими — это повлияет на возникновение ореолов, шумов и приведет к избыточной резкости.

Высокие значения не означают лучший результат

Вот такой получился результат.

Картинка стала значительно четче

Второй способ также достаточно прост. Неплохо сгладить пиксели в фотошопе можно при помощи фильтра «Шум». Здесь нам понадобится опция «Пыль и царапины».

Опция способна сгладить снимок

Просто подберите необходимый радиус, а «Порог» оставьте нулевым. Снимок будет мгновенно сглажен, поэтому не забывайте о резкости.

В любом случае нужно добавить резкости

Убрать пиксельную лесенку по краям объекта можно с помощью инструмента «Перо». Найдите его на панели инструментов с левой стороны экрана.

Пиксельную лесенку можно просто обрезать по контуру

Обведите объект по контуру, расставляя опорные точки. «Перо» может показаться капризным, но это самый лучший инструмент выделения в Фотошопе, потому что с его помощью можно создать очень точную обводку. Замкните контур нажатием левой кнопкой мыши на первую опорную точку. После этого кликните правой кнопкой на любом участке изображения и выберите пункт «Образовать выделенную область».

Освойте этот инструмент и он поможет во многих ситуациях

Не забудьте отметить галочкой пункт «Сглаживание» и установите радиус растушевки – чем он выше, тем более размытыми станут края. Это отличный способ, демонстрирующий как убрать пикселизацию в Фотошопе по контуру объекта при замене фона, например. После того как проделаете вышеописанные манипуляции, сплошная линия обводки заменится на «бегущих муравьев». Инвертируйте выделение комбинацией клавиш «Ctrl+Shift+I». Нажмите «Delete». Так вы получите не только сглаженный контур объекта, но и сможете заменить фон на снимке.

Импортируйте любую картинку для нового фона

Эффект лупа, три варианта

Эффект лупы в программе PicPickЭффект лупы в программе FastStoneЭффект лупа в Windows 10

В программе PicPick лупа имеет хороший потенциал для детализации фрагмента изображения

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

В программе FastStone эффект лупы имеет скорее художественную направленность.

Лупа в Windows 10 имеет прямоугольный размер с возможностью настроек, а также изменяемый процент увеличения. Как и в FastStone изображение лупы перекрывает ту часть изображения, которую мы рассматриваем через увеличительное стекло.

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

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

В PicPick на фото получается два изображения интересующего нас фрагмента.

• Первое — в натуральную величину.
• Второе — в увеличенном виде.

Как включить эффект линзы в PicPick

На закладке «Главное» в панели инструментов найдите значек в виде окружности со знаком «+» внутри. Это эффект лупы.

Панель инструментов PicPick

Теперь удерживая левую кнопку мыши захватите фрагмент изображения. Фрагмент можно изменять и перемещать.

Как включить эффект линзы в FastStone

В панели главного меню FastStone кликните «Эффекты». В открывшемся меню выберите «Линза».

Панель инструментов FastStone

У линзы можно изменять кривизну стекла, размер самой линзы. Ее также можно перемещать по изображению.

Самый простой способ: В ФотоМАСТЕРе

Для начала необходимо скачать фоторедактор. Процесс установки упрощен до крайности: программа попросит вас лишь несколько раз подтвердить распаковку.

Перетяните фотографию в рабочую область. Самое простое, что мы можем сделать для избавления от пикселизации — это сначала немного размыть снимок, а потом прибавить ему резкости. Для этого зайдите во вкладку «Инструменты» —> «Устранение шума».

Устранение шума в ФотоМАСТЕРе

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

Эффект позволит сгладить фото

Теперь фото кажется слишком смазанным, значит самое время обратиться к «Резкости». Этот инструмент вы найдете в «Улучшениях». Здесь же вы можете также размыть кадр до нужного состояния, не прибегая к опции устранения шума. Главное при повышении резкости не вывести картинку на прежний уровень, поскольку резкость вытаскивает на снимок все его артефакты. А именно от них мы так тщательно стараемся избавиться.

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

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

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

Доводим результат до идеала

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

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

Вставить нужную картинку в Figma можно 4 разными способами.

С компьютера:

Выберете нужное изображение на вашем компьютере и поместите картинку в фигму простым перетаскиванием в ваш проект (зажав левую клавишу мыши).

С интерента:

Вы можете скопировать нужную картинку с любого сайта. Для этого наведите на нужную картинку и нажмите правую клавиши мыши. Выберите пункт «Копировать изображение». Перейдите в фигму и нажмите на клавиатуре 2 клавиши «Ctrl + V», чтобы его вставить.

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

Сделать скриншот:

Можно вставить снимок экрана в Figma. Для этого нужно сделать скриншот. Это легко реализовать с помощью различных программ, таких как: «Lightshot», «Joxi».

Через плагины:

Чтобы не искать изображения можно воспользоваться плагинами. Один из популярных плагинов для вставки фотографий — Unsplash. C его помощью можно вставлять фотографии с популярного сайта unsplash.com. На нём размещены тысячи изображений, которые можно использовать в любых ваших целях.

Полезные приёмы

Отразить изображение по вертикали можно с помощью горячих клавиш Shift + H. По горизонтали — Shift + V.

Скопировать SVG-иконку с любого сайта в Figma можно через браузер:

1. Зайдите на сайт с нужной иконкой, нажмите правую кнопку и выберите «Посмотреть код». Справа откроется панель с HTML-кодом сайта.
2. В окне с кодом на панели сверху нажмите на иконку  и выберите нужную иконку на сайте.
3. В HTML-коде выделится тег <path>, прямо над ним будет <svg> — нажмите на него и скопируйте с помощью сочетания Ctrl (⌘) + C на клавиатуре.
4. Зайдите в Figma и нажмите Ctrl (⌘) + V — иконка встанет на макет.

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

Как установить плагин Remove BG:

1. Зайдите на страницу плагина и установите его, нажав Install.
2. Зарегистрируйтесь на сайте remove.bg.
3. На сайте нажмите на иконку профиля и зайдите в панель управления. В панели нажмите на «Ключ API», затем ― на кнопку «Показать» и скопируйте полученный код.
4. Зайдите в Figma, нажмите на иконку , перейдите, затем в Remove BG, нажмите на Set API key. В появившееся окно вставьте ключ, который вы взяли с сайта, и нажмите OK.
5. Добавьте на макет любую иллюстрацию, нажмите на неё правой кнопкой мыши, перейдите в Plugins → Remove BG → Run. Фон из иллюстрации удалится.

Учтите, что этот способ не подойдёт для финального удаления фона, так как плагин работает не идеально. Но если вам нужно просто показать идею, то Remove BG поможет сэкономить кучу времени.

Больше о Figma

• Как упростить работу в Figma
• Выравнивание в Figma: Auto Layout
• Что такое Figma Overlays и как его использовать при создании интерфейса

Экранная лупа в Windows 10

В Windows 10 в числе Специальных возможностей есть инструмент «Лупа». Найти его не сложно. Два самых простых варианта:

Через нажатие кнопки «Пуск», с последующим поиском в списке установленных программ.

Через встроенный поиск. Просто начните набирать слово «лупа» и приложение появится в списке найденных соответствий.

Когда Вы включите приложение, то поверх всех открытых окон появятся два рабочих элемента.

1. Панель управления лупой.
2. Лупа.

Непосредственно в панели управления кнопками «-» и «+» можно изменить процент увеличения. В нашем случае он установлен 200%.

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

Поместите лупу поверх изображения в нужном месте  и сделайте скриншот экрана. Эффект сохранится на скриншоте.

Пока это все простые решения, которые мне известны. Может у Вас найдется еще какой-нибудь хороший вариант для создания эффекта лупы или другого интересного эффекта?

Цветовой круг в «Фотошоп»

Теперь нужно определиться с внешним видом окружности

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

Также программа позволяет создать заливку в виде градиента или узора. Затем выберите цвет контура. Он задается в поле «Штрих». Вы можете сделать его прозрачным, в этом случае изображение ограничится цветом заливки, обводки оно иметь не будет. Правее в данной панели выбирается тип контурной линии (она может быть даже пунктирной) и её толщину. На следующие поля внимание уже не обращайте, они необходимы для задания точных размеров фигуры и её выравнивания относительно других объектов.

Немного теории

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

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

Вставка изображений в фигуру (прямоугольник, круг)

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

3 способа вставить изображение в любую фигуру в Figma.

Через правую панель:

Чтобы вставить изображение в фигуру через правую панель сделайте следующее:

1. Выберите нужную фигуру.
2. В правой панели нажмите на цвет.
3. Кликните на «Fill» и выберите из списка «Image».
4. Нажмите на кнопку «Place image».
5. Выберите изображение для вставки на компьютере.

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

Через инструмент «Place images»:

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

1. Выберите в панели сверху, слева инструмент «Place images». Он находится во вкладке с фигурами (Shape tools).
2. Найдите на рабочем столе нужные изображения и выделите их для вставки.
3. Рядом с курсором появится количество вставляемых изображений. Вставьте их в нужные фигуры кликнув на них левой клавишей мыши.

Заключение

Теперь вы знаете как убрать пиксели с картинки различными методами. Две упомянутые нами программы: Фотошоп и Лайтрум рассчитаны на подготовленного пользователя. Особенно сложно разобраться в интерфейсе последней. Даже загрузка снимка в программу вызовет у новичка трудности, ведь картинку невозможно просто перетащить в окно рабочей области или открыть иным привычным способом. Обе программы сильно нагружают систему ПК.

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