Фоновые рисунки

Как удалить фон на изображении

Шаг 1. Нажимаем кнопку «Выбрать» в левой верхней части сервиса. Открываем изображение или фотографию из которой нам необходимо удалить фон или его часть.

После успешной загрузки в левой части сервиса вы увидите выбранное изображение.

Шаг 2. Выбираем размер «Режущей кисти», чтобы наиболее оптимально очертить контуры разделяемого изображения. Выбрав значение от 1 до 3, можно приступать к выделению контура.

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

Шаг 3. Указав сервису границу разделения, необходимо уточнить какие части изображения будут удаляться, а какую часть (или части) нам необходимо оставить. Используя инструменты «Переднего» и «Заднего» плана (зеленая и красная точки соответственно) — делаем пометки для скрипта сервиса, какой из элементов изображения чем является.

Достаточно прочертить полоски, чтобы сервис смог верно распознать эти элементы. Зеленую полоску там, где оставляем область, красная полоска — удаляем область.

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

Шаг 5. Творим волшебство: нажимаем кнопку «Вырезать фон», немного ждем и вуаля!

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

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

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

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

2. Загрузите ваше изображение или фотографию, которую вы желаете обработать.

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

4. Нижняя панель редактора предлагает все доступные инструменты редактирования вашего фото изображения. Каждая иконка имеет соответствующую подпись и пиктограмму. Если вы работаете на планшете или мобильном смартфоне — смещайте панель влево-вправо, чтобы получить весь список доступных инструментов.

5. Меню «Обрезка» позволяет выбрать область на изображении, до которого вы хотите урезать ваше фото. В помощь пригодятся фиксированные размеры: квадрат, 4:3 и 16:9, позволяющие изменять размер обрезаемой области с фиксированным соотношением сторон.

6. Меню «Поворот» позволяет осуществить как разворот изображения на каждые 90 градусов, так и отобразить вертикально или горизонтально; отзеркалить ваше фото.

7. Меню «Фильтр» дает возможность применения к изображению некоторых базовых фильтров и эффектов. Бегунок «Сила» отвечает за силу применения выбранного эффекта от 0% до 100%.

Если вам недостаточно предоставленного количества фильтров, вы можете воспользоваться прекрасным инструментом Эффекты и фильтры для фото — он содержит порядка 100 великолепных фото-фильтров и эффектов к вашему изображению и не оставит равнодушным к результатам обработки.

8. Следующий пункт «Коррекция» предоставляет возможность при помощи выбранной опции и бегунка силы применить следующие инструменты: яркость, цветность, контраст, четкость, экспозиция, тени и свет. Нажимайте соответствующий элемент и выставляйте бегунком «Сила» требуемый процент изменений.

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

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

10. Пукт «Стикер» даст возможность нанести один из смешных изображений-стикеров на ваше фото. Вращайте, меняйте размер стикера, перетаскивайте на нужное место на вашей фото-карточке. Как мы и советовали ранее — воспользутейсь и другими инструментами на нашем сайте, чтобы получить больший выбор стикеров. В разных инструментах есть свои наборы.

11. Следующий пункт — «Кисть», простейший инструмент, позволяющий выбрать толщину и цвет кисти, которой вы будете рисовать по вашему изображению. Оставьте подпись, росчерк или подчеркните нужное на вашем фото.

Инструмент «Кисть» есть почти во всех онлайн-редакторах на нашем сайте. Выберите наиболее удобный, если вам недостаточно этого инструмента в простом редакторе.

12. Онлайн инструмент «Фокус» — это уникальный инструмент для размытия заднего плана на изображении в двух возможных направлениях: круговом и линейном. Выберите необходимый инструмент размытия фото и при помощи линий и бегунка — изменяйте его положение на фото. При помоще эффекта «Радиус» — задавайте силу размытия картинки

Инструмент позволяет прекрасно размывать задний план и акцентировать внимание зрителя на переднем плане вашей фотографии

13. Последний в списке инструмент «Рамка» даст возможность нанести на изображение простую угловую рамку нужного цвета и толщины. Это простой инструмент, с простыми настройками.

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

Приятной работы! Творите и созидайте!

Сделать задний фон в «Фотошоп»

Размытость получена, но в данный момент она накладывается на весь снимок в целом. Теперь необходимо в «Фотошопе» сделать задний фон, отделив человека от него. Для этого легче всего использовать маску. Вновь перейдите в панель «Слои». Слой-копия пусть остается выделенным. Взгляните на нижнюю часть панели, где имеется несколько кнопок. Нажмите ту, которая называется «Добавить слой-маску».
Раньше вы могли никогда не работать с масками в Photoshop, поэтому необходимо рассказать о сути их действия. Если вы рисуете на маске черным цветом, то в этих областях действие слоя (в нашем случае это размытость) будет удаляться. Если же рисовать белым цветом, то действие примененного фильтра восстановится. Задача ясна — необходимо полностью выделить белым цветом человека.

Для этого возьмите инструмент «Кисть» и выберите в палитре черный цвет. В качестве фонового задайте белый цвет.

В панели «Слои» кликните по пиктограмме маски, которая в данный момент полностью окрашена в белый цвет. Начните рисовать кистью по человеку, стартовав с его лица. Не забудьте отрегулировать величину кисти и степень её жесткости. Делается это в панели над изображением. Жесткость лучше ставить минимальную или на уровне 20%. Размер же зависит от разрешения снимка и близости сфотографированного человека. Также не лишним будет при помощи лупы задать 100-процентный масштаб отображения изображения. Перемещаться по нему можно путем зажатия клавиши «Пробел».

Добавление рисунка к тексту

С помощью фонового изображения можно автоматизировать процесс добавления рисунков
к определенному тексту, например, к заголовкам. Для этого используется универсальное свойство background, которое применяется к нужному
селектору. В качестве значения указывают путь к рисунку и, чтобы он не повторялся,
аргумент no-repeat (пример 4).

Пример 4. Добавление рисунка

Как показано в данном примере, рисунок можно сдвигать по горизонтали и вертикали
относительно своего исходного положения, по умолчанию это левый верхний угол
блочного элемента. Сдвиг фона позволяет установить изображение по отношению к тексту
желаемым образом. Чтобы текст не накладывался на рисунок, обязательно следует
добавить свойство padding-left, за счет него текст
смещается вправо на указанное расстояние. Оно в каждом случае индивидуально
и обычно равно ширине рисунка плюс желаемому отступу между изображением и текстом.

Фон на веб-странице

Установка фонового рисунка на веб-страницу традиционно происходит через атрибут
background тега <body>.
Такой рисунок повторяется по горизонтали и вертикали, заполняя таким способом
все окно браузера. Понятно, что особых вариантов для творчества здесь нет, поэтому
обратимся к стилям и посмотрим, что же можно делать с помощью CSS.

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

Добавление фонового рисунка

Добавление рисунка происходит путем установки адреса картинки через ключевое
слово url. Чтобы управлять повторением картинки
применяются аргументы no-repeat (нет повторения),
repeat-x (повторение по горизонтали) и repeat-y
(повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную
на рис. 1.

Рис. 1. Фоновая картинка без повторения

Чтобы установить картинку на веб-страницу, следует добавить стилевое свойство background
к селектору BODY, как показано в примере 1.

Пример 1. Фоновый рисунок

В данном примере графический рисунок target.gif определяется как фон веб-страницы
без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера,
она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного
положения.

Повторение рисунка

Благодаря тому, что можно задавать повторение фонового рисунка по горизонтали
или вертикали, доступно несколько вариантов оформления веб-страниц. Например,
для создания вертикальной полосы по левому краю (рис. 2) понадобится изображение,
показанное на рис. 3.

Рис. 2. Повторение рисунка по вертикали

Рис. 3. Картинка для создания фона

Рисунок должен быть таким, чтобы по вертикали он состыковывался между собой
без заметных швов, а также составлял единое целое с заданным цветом фона веб-страницы.
В примере 2 приводится создание такого фонового рисунка, опять же с помощью
свойства background и его значения repeat-y.

Пример 2. Повторение фона по вертикали

Аналогично можно делать повторение фона по горизонтали, например, создав градиент
и установив его в качестве фоновой картинки (рис. 4).

Рис. 4. Использование градиента в качестве фона

Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале
сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов,
а высота рисунка зависит от цели документа и предполагаемой высоты содержимого
веб-страницы. Не стоит также забывать, что рисунок большого размера приведет
к увеличению объема графического файла. А это отрицательно скажется на скорости
его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного
случая вполне подошла картинка размером 30х200 пикселов (рис. 5).

Рис. 5. Градиентное изображение для создания фона

В примере 3 показан код HTML для создания градиентного фона.

Пример 3. Повторение фона по горизонтали

Градиентный рисунок хорошо сочетается с одноцветным блоком, поэтому в данном
примере добавляется слой, в котором и отображается содержимое веб-страницы.

Поменять задний фон в «Фотошоп»

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

Первые шаги, касающиеся создания копии фонового слоя и его размытия, необходимо повторить. Вы можете использовать для этого новую фотографию или прежнюю. Только теперь не нужно создавать никаких масок. Вместо этого отключите на время отображение слоя-копии, нажав в панели «Слои» на изображение глаза. Нажмите на слой «Фон», теперь вы будете работать с ним.
Увеличьте масштаб отображения фотографии до 100-процентного и выберите инструмент «Магнитное лассо». Им необходимо выделить человека по его контуру, щелчок за щелчком. Если в какой-то момент линия выделения пойдет не по тому пути, то нажмите клавишу «Backspace», это отменит создание последней точки привязки. Когда вы последнюю точку свяжете с первой — по контуру человека побежит пунктирная линия, свидетельствующая о его выделении. При этом вы можете продолжать добавлять выделенные области, для этого необходимо зажать клавишу «Shift». Для вычитания выделенной области зажимается клавиша «Alt».
Щелкните по выделенной области правой кнопкой мыши. В отобразившемся контекстном меню выберите пункт «Скопировать на новый слой». Появившийся в панели «Слои» новый слой переместите на самый верх, чтобы он перекрывал собою копию фонового слоя, в данный момент отключенную.
Вот и всё, наши действия завершены. Включите отображение второго слоя. Слой «Фон» можно отключить, он теперь не нужен. Результат должен вас приятно порадовать. Нельзя сказать, что мы добились эффекта съемки при максимально раскрытой диафрагме. Но получилось очень неплохо. Не забывайте, что мы использовали «Размытие по Гауссу». Попробуйте задействовать другие виды размытия в качестве экспериментов.