Как сделать фон для сайта?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сорви овации

Будьте самыми стильными! Используйте суперэффекты:

1. Маски для инстаграма.
2. Обложки для актуальных историй.
3. Красивые шрифты.
4. Топ-20 лучших фильтров VSCO.
5. Анонимно смотреть истории.
6. Видеоредакторы.
7. Как убрать предмет с фото.
8. Рамки (большая коллекция).
9. Мемоджи.
10. Акварельные мазки.
11. Flat Lay раскладка.
12. Надпись в круге на фото.
13. Двойная экспозиция.
14. Снимки в стиле Полароид.
15. Красивый инстаграм в маленьком городе.

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

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

Спасибо за ваше потраченное время

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

Установка фонового рисунка на веб-страницу традиционно происходит через атрибут
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. Повторение фона по горизонтали

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

Деревянный

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

Всё довольно просто: едете в Леруа Мерлен или любой строительный магазин. Покупаете 5-6 досок одного размера, 2 дощечки, чтобы их всех соединить, и гвозди. Сколачиваете доски, получаете фон.

Почему он?

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

Цена: 1 доска стоит 60-100 рублей, 1 узкая (скрепляющая) доска стоит 110 рублей, гвозди стоят 30 рублей за штуку. Итого: около 1000 рублей + краска рублей 100-150.

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

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

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

Кристально чистый

Идеальный белый бэкграунд – это классический фотон для фото, который удачно подойдет для 80% снимков. К тому же, под универсальный фон можно наложить любую текстуру в фото- и видеоредакторе, какую вы только захотите. Из материалов можно выбирать что-то из этого:

• простыня;
• одеяло;
• марля;
• длинноворсовый шерстяной ковер;
• выкрашенная фанера;
• ламинат;
• недорогие столешницы из IKEA.

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