Удаление фона на фотографии: Инструмент Фоновый ластик

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

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

Управление повтором фонового изображения

Как мы с вами установили из примера, фоновое изображение размещается по умолчанию в верхнем левом углу элемента и повторяется по вертикали и горизонтали. Давайте научимся изменять эти предопределенные значения и для начала рассмотрим, как управлять повтором изображения, а поможет нам в этом CSS свойство background-repeat.

Это свойство имеет следующие доступные значения:

Значение Описание
repeat Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию.
repeat-x Фоновое изображение будет повторяться по горизонтали (по оси x).
repeat-y Фоновое изображение будет повторяться по вертикали (по оси y).
no-repeat Фоновое изображение не будет повторяться.

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

Пример управления повтором фонового изображения
body
{ background-image: url(«main_bg.png»); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ }
div
{ display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */ background-image: url(«small_bg.png»); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ width: 200px; /* устанавливаем ширину элемента */ height: 200px; /* устанавливаем высоту элемента */ border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */ margin-right: 10px; /* устанавливаем внешние отступы справа */ text-align: center; /* выравниваем текст по центру */ line-height: 200px; /* задаем высоту строки */ background-color: azure; /* указываем цвет заднего фона*/ }
.noRepeat
{ background-repeat: no-repeat; /* фоновое изображение не будет повторяться. */ }
.repeatX
{ background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */ }
.repeatY
{ background-repeat: repeat-y; /* фоновое изображение будет повторяться по вертикали */ }

class = «noRepeat»>no-repeat

class = «repeatX»>repeat-x

class = «repeatY»>repeat-y

По аналогии с предыдущим примером для

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

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

Результат нашего примера:

Рис. 116 Пример управления повтором фонового изображения.

Как создать фон в фотошопе

Автор: Галина Соколова. Дата публикации: 16 октября 2019. Категория: Уроки фотошопа коллажи.

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

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

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

Итак, приступим к работе и создадим Новый документ CTRL+N со следующим размерами:

Установим основной цвет чёрный — D, затем создадим новый слой и с помощью инструмента Заливка зальём слой чёрным цветом:

Теперь будем создавать лучи и для этого создадим ещё один новый документ со следующими размерами:

Создадим в этом документе Новый слой и активизируем инструмент линейный Градиент от чёрного к белому. Затем удерживая клавишу SHIFT проведём Градиентом так, как показано на скриншоте:

Применим к слою фильтр Волна с настройками, которые указаны на скриншоте:

Теперь применим фильтр Полярные координаты:

В результате мы получили звезду, которую нужно перетащить на первый документ и вызвав трансформацию — CTRL+T увеличить звезду:

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

Теперь нажмём клавишу Delete, чтобы удалить выделенную часть изображения:

Теперь дублируем слой CTRL+J и передвинем слой немного вниз, предварительно понизив непрозрачность слоя:

Теперь удерживая клавишу CTRL кликнем по миниатюре слоя «Слой 2» и затем нажмём клавишу Delete, таким образом удалим верхнюю часть слоя «Слой 2 копия»:

Снимем выделение CTRL+D и поставим непрозрачность слоя 100%:

Теперь для двух верхних слоёв понизим непрозрачность до 40%:

Добавим к слоям с лучами маски и чёрной кистью непрозрачностью 20% прорисуем края лучей, чтобы они были более мягкими:

Теперь добавим цвета на изображение, для этого создадим Новый слой поверх всех слоёв. Активизируем инструмент Кисть и выберем синий цвет «372f79», затем нарисуем цвет на изображении:

Поставим режим наложения Мягкий свет для этого слоя:

Теперь создадим ещё один новый слой и выберем розовый цвет «ea108c» и нарисуем яркое пятно, при этом режим наложения установим Перекрытие:

Теперь поместим в нашу работу изображение девушки, которое у меня уже отделено от фона:

Добавим к девушке стили слоя:

Теперь для фона будем использовать различные кисти, такие кисти как Боке и кисти-блёстки. В конце урока вы можете скачать все материалы для урока, где есть как кисти так и девушка на прозрачном фоне. Рисовать боке нужно под слоем с девушкой. Каждую кисть я расположила на новом слое.

В результате такой работы у меня получился вот такой фон. У вас может получиться другой фон – всё дело в вашей фантазии и какие кисти из предложенного архива вы выберете:

Так же над слоем с девушкой можно немного нарисовать блики:

Затем нарисуем отражение от пола. Для этого выделим инструментом Лассо один сапог девушки и выполним команду CTRL+J. В результате сапог появится на отдельном слое, после чего его нужно отразить вертикально и состыковать подошвой с реальным сапогом. Затем к слою добавить маску и чёрной кистью сгладить дальний край отражения сапога. При необходимости можно уменьшить непрозрачность слоя:

На этом урок «Как создать фон в фотошопе» окончен.

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

0

Печать

  • Назад
  • Вперёд

Комментарии

0 nagjuha 09.06.2016 22:54 А как скачать материалы?

Ответить | Ответить с цитатой | Цитировать

+1 Галина 13.06.2016 13:36 В конце урока есть кнопка «Скачать исходники к уроку».

Ответить | Ответить с цитатой | Цитировать

0 юрий 11.03.2016 23:55 еще хотел добавить, девушка уж больно страшная))

Ответить | Ответить с цитатой | Цитировать

0 юрий 11.03.2016 23:48 «Теперь нажмём клавишу Delete, чтобы удалить выделенную часть изображения:» дальше не понял, только что удалили нижнюю часть и она далее появляется в виде пола с лучами, может не «УДАЛИЛИ» ее а ВЫРЕЗАЛИ?

Ответить | Ответить с цитатой | Цитировать

0 vale22 10.01.2016 08:28 СОС Пробовала брать полярные координаты и 50% и 33.3% и 25% «луч» не растягивается в ширину как показано до нижнего края и отсюда — когда сдвигаю слой — не получается как показано,лучи обрываются далеко от края ГДЕ ОШИБКА ? почему выделение перемещается в низ ? Над этими шагами сидела 3 часа Жду помощи , спасибо

Ответить | Ответить с цитатой | Цитировать

0 Ангелина 08.11.2015 21:18 С самого начала оказалась в тупике.Нет „бикубическая автоматическая” (Adobe Photoshop CC 2014) Может в настройках что то не так? Спасибо,урок замечательный и важный.

Ответить | Ответить с цитатой | Цитировать

0 Алекс 07.11.2015 22:09 Спасибо!Здорово!

Ответить | Ответить с цитатой | Цитировать

0 Елена 03.11.2015 23:19 Спасибо за интересный и полезный урок!

Ответить | Ответить с цитатой | Цитировать

0 Ирина 03.11.2015 22:51 Спасибо, Галина за урок. Урок понравился не только тем. что он понятен, но и тем, что получается очень эффектный результат.

Ответить | Ответить с цитатой | Цитировать

0 Наталья Алексеева 03.11.2015 14:09 Сделала этот урок! Получилось очень классно! Спасибо огромное!

Ответить | Ответить с цитатой | Цитировать

0 Наталья Алексеева 02.11.2015 15:13 Как классно! Буду пробовать обязательно! Спасибо!

Ответить | Ответить с цитатой | Цитировать

+1 Михаил 01.11.2015 19:39 Чудесный урок. Как всегда все понятно и доступно. Спасибо!

Ответить | Ответить с цитатой | Цитировать

Обновить список комментариев

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

Введите Ваше имя, или зарегистрируйтесь на сайте, что бы имя в ответах вставлялось автоматически: это займёт 2 минуты! После регистрации вы сможете редактировать свои сообщения и не придётся вводить подтверждение

. Для отображения
Аватара
(вашей картинки) необходимо на ту же почту иметь аккаунт на — Gravatar, это бесплатно.

JComments

Фиксированный задний фон

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

Давайте с Вами рассмотрим, как с помощью свойства background-attachment сделать «параллакс»

эффект.
Пример фиксированного фонового изображения div
{ height: 600px; /* устанавливаем высоту элемента */ }
.primerFixed
{ background-image: url(‘nich.jpg’); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ background-attachment: fixed; /* указываем, что задний фон будет зафиксирован */ background-position: center; /* центрируем задний фон */ background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */ }

class = «primerFixed»>

В данном примере для всех элементов

мы установили высоту равную 600px и разместили три таких блока

на странице.
Для среднего блока
мы создали класс
.primerFixed
, который задает для элемента фиксированный задний фон элемента, центрирует его и тиражирует по горизонтали (
ось x
). Для демонстрации эффекта
«параллакс»
откройте пример в
отдельном окне браузера и прокрутите страницу вниз.
Результат нашего примера:

Рис. 118 Пример фиксированного фонового изображения.

Настройка параметров Фонового ластика

Одним из самых важных параметров инструмента является то, каким образом инструмент выбирает образцы цвета для удаления.

В правой части панели параметров расположены три значка в виде пипеток — это и есть переключатели трёх разных режима сбора образцов. Режимы выбора образцов слева направо: — Непрерывный (Continuous) — Однократный (Once) — Образец фона (Background Swatch)

Из этих трех режимов наиболее часто используются первые два. Работу режима «Непрерывный», включенного по умолчанию, мы только что рассмотрели. В данном режиме хорошо работать, когда на изображении имеется всего несколько хорошо отличимых друг от друга цветов, но когда на картинке имеются плавные переходы из одного цвета в другой и цвета не слишком различаются между собой, как в случае с ветками деревьев, лучше подойдёт второй режим — Однократный (Once). Я включу его, нажав на среднюю иконку.

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

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

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

Если у вас возникли проблемы с выбором образца цвета для удаления (что само по себе случается довольно редко), попробуйте выбрать третий режим — Образец фона (Background Swatch). В этом режиме Вы самостоятельно можете выбрать цвет для удаления на цветовой палите, а потом переключить его с основного на фоновый. На рисунке я выбрал синий цвет для удаления:

Ограничения стираемых областей

Еще одним важным параметром для удаления фона является «Ограничения» (Limits). После того, как Photoshop узнаёт, какой цвет необходимо стереть, «Ограничения» задают установку, где выбирать пиксели для удаления. Два основных варианта выбора для опции «Ограничения» являются «Смежные пиксели» (Contiguous) и «Все пиксели» (Discontiguous):

Опция «Смежные» включена по умолчанию и означает, что Photoshop может стирать только пиксели в областях, которые физически соприкасаются с пикселями под перекрестьем курсора.

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

Чтобы обойти эту проблему, я переключил опцию в режим «Все пиксели».

«Все пиксели» означает, что Photoshop без ограничений будет стирать все пиксели в любом месте изображения, соответствующие цвету взятого образца. Как только я кликнул перекрестьем на голубое небо, я могу просто перетаскивать Фоновый ластик через ветки и при этом стирать небо (режим сбора образцов установлен на «Однократный» (Once):

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

Допуск (Tolerance)

Это подводит нас к третьей важной опции для удаления фона, которая сможет задать допуск различия оттенков удаляемого цвета, эта опция так и называется — «Допуск» (Tolerance):

Последним, третьим из трех основных параметров Фонового ластика является параметр «Допуск» (Tolerance), который определяет, до какой степени удаляемый цвет может отличаться от образца.

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

Я собираюсь отменить мои предыдущие шаги по удалению неба и попробую ещё раз, но теперь я увеличу значение «Допуска» до 70%, т.к. небо отличается по цвету от веток деревьев. Я нажмите чтобы попробовать площадью голубое небо с символом цели, и на этот раз, с более высокими значениями «Допуска», Фоновый ластик даёт гораздо лучший результат:

Свойства CSS 3 для работы с фоновыми изображениями

Настало время углубить свои знания в работе с задним фоном элементов и познакомиться с новыми свойствами CSS, которые были введены в стандарте CSS 3

.

И первое

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

Значение Описание
padding-box Фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
border-box Фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента).
content-box Фоновое изображение позиционируется от верхнего левого угла содержимого
элемента.

Рассмотрим применение этого свойства:

Пример использования свойства background-origin
div
{ width: 10em; /* устанавливаем ширину элемента */ height: 10em; /* устанавливаем высоту элемента */ border: 5px dashed orange; /* устанавливает пунктирную границу размером 5px оранжевого цвета */ background-image: url(manul.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ background-repeat: no-repeat; /* указываем, что фоновое изображение не будет повторяться */ display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */ margin-right: 15px; /* устанавливаем величину внешнего отступа от правого края элемента */ padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */ color: yellow; /* устанавливаем цвет шрифта желтый */ }
.test
{background-origin: padding-box;} /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон) */
.test2
{background-origin: border-box;} /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента) */
.test3
{background-origin: content-box;} /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла содержимого элемента */ class = «test»>padding-box

class = «test2»>border-box

class = «test3»>content-box

В данном примере мы разместили три блока

, задали для них задний фон в виде изображения и указали для них различные значения свойства background-origin:

  • Первый
    блок
    (padding-box) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
  • Второй
    блок
    (border-box) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента со всех сторон).
  • Третий
    блок
    (content-box) — фоновое изображение позиционируется от верхнего левого угла содержимого элемента (изображение не заходит под границу элемента с этих сторон).

Результат нашего примера:

Рис. 119 Пример использования свойства background-origin.

И так на очереди следующее CSS свойство — background-clip, оно определяет ту область элемента, для которой будет задан задний фон.

У Вас может возникнуть вопрос: — А в чем собственно заключается разница между свойством background-origin и background-clip?

Разница заключается в том, что свойство background-clip в отличие от background-origin обрезает ту часть фона, которая выходит из указанных рамок. Свойство background-origin лишь определяет, как позиционируется фоновое изображение.

В таблице представлены возможные значения этого свойства:

Значение Описание
border-box Фон элемента занимает все пространство (включая границы элемента). Это значение по умолчанию.
padding-box Фон элемента занимает все пространство (не включая границ элемента).
content-box Фон элемента занимает все содержимое
элемента (если у элемента установлены значения padding (внутренние отступы), то это пространство не будет окрашено).

Давайте рассмотрим следующий пример:

Пример использования свойства background-clip
div
{ width: 10em; /* устанавливаем ширину элемента */ height: 9em; /* устанавливаем высоту элемента */ background-image: url(medved.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ border: 5px dashed yellow; /* устанавливает пунктирную границу размером 5px черного цвета */ display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */ margin-right: 10px; /* устанавливаем величину внешнего отступа от правого края элемента */ padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */ }
.test
{background-clip: border-box;} /* устанавливаем, что фон элемента занимает все пространство (включая границы элемента) */
.test2
{background-clip: padding-box;} /* устанавливаем, что фон элемента занимает все пространство (не включая границы элемента) */
.test3
{background-clip: content-box;} /* устанавливаем, что фон элемента занимает все содержимое элемента */

class = «test»>border-box

class = «test2»>padding-box

class = «test3»>content-box

В этом примере мы разместили три

блока
, установили для них задний фон в виде изображения и указали различные значения свойства background-clip:

  • Первый
    блок
    (padding-box) — фон элемента занимает все пространство. Это значение по умолчанию.
  • Второй
    блок
    (border-box) — фон элемента занимает все пространство (не включая границы элемента).
  • Третий
    блок
    (content-box) — фон элемента занимает все содержимое элемента.

Результат нашего примера:

Рис. 120 Пример использования свойства background-clip.

Как вы могли заметить свойства background-origin и background-clip, имеет смысл применять только тогда, когда у элемента есть внутренние отступы, либо границы.

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

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

:

Значение Описание
auto Фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
length Устанавливает ширину и высоту фонового изображения. Первое
значение устанавливает ширину,
второе
значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
% Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое
значение устанавливает ширину,
второе
значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
cover Масштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения.
contain Масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Рассмотрим применение этого свойства:

Пример масштабирования фоновых изображений
div
{ width: 8em; /* устанавливаем ширину элемента */ height: 8em; /* устанавливаем высоту элемента */ border: 3px solid orange; /* устанваливаем сплошную границу размером 3 пикселя оранжевого цвета */ background-image: url(manul.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ background-repeat: no-repeat; /* указываем, что фоновое изображение не будет повторяться */ display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */ margin-right: 15px; /* устанавливаем внешний отступ с правой стороны */ margin-bottom: 15px; /* устанавливаем внешний отступ с нижней стороны */ color: yellow; /* устанавливаем цвет элемента */ }
.test
{background-size: auto;} /* фоновое изображение содержит свою ширину и высоту */
.test2
{background-size: 100px 100px;} /* устанавливаем ширину и высоту фонового изображения в пикселях */
.test3
{background-size: 70% 70%;} /* устанавливаем ширину и высоту фонового изображения в процентах от родительского элемента */
.test4
{background-size: cover;} /* масштабируем фоновое изображение под размеры элемента */
.test5
{background-size: contain;} /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */

class = «test»>auto

class = «test2»>100px 100px

class = «test3»>70% 70%

class = «test4»>cover

class = «test5»>contain

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

, задали для них задний фон в виде изображения и указали для них различные значения свойства background-size:

  • Первый
    блок
    (auto) — фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
  • Второй
    блок
    (100px 100px) — первое значение устанавливает ширину, второе значение задает высоту в пикселях.
  • Третий
    блок
    (70% 70%) — первое значение устанавливает ширину, второе значение задает высоту в процентах.
  • Четвертый
    блок
    (cover) – масштабирует фоновое изображение под размеры элемента (некоторые части фонового изображения скрываются из поля зрения).
  • Пятый
    блок
    (contain) – масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Результат нашего примера:

Рис. 121 Пример масштабирования фоновых изображений.

Работа с фоном в CSS

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

. Рассмотрим все свойства, которые связаны с заданием фона.

background-color

Задаёт цвет фона. Его можно применять как к отдельным элементам

, так и ко всему веб-сайту с помощью тега

.

Например:

/* белый фон заголовка и чёрный цвет шрифта h1 { color: #000; background-color: #fff }

background-image

Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.

Например:

body { background-image: url(“example_image.png”); }

Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.

background-repeat

Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.

Оно может иметь несколько значений:

  • background-repeat: repeat-x — повторение по горизонтали;
  • background-repeat: repeat-y — повторение по вертикали;
  • background-repeat: repeat — повторение и по горизонтали и по вертикали;
  • background-repeat: no-repeat — изображение не повторяется.

Например, повторение по горизонтали выглядит так:

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

  • background-attachment: scroll — фон прокручивается вместе со страницей;
  • background-attachment: fixed — фон остаётся неподвижным.

background-position

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

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left.

Например:

  • background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
  • background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

gradient

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

Использование градиента можно наглядно продемонстрировать в примере кода:

Градиент .gradient { background: #2639fa; /* Для устаревших браузеров */ background: linear-gradient(to top, #2639fa, #c9d1ff); padding: 40px; border: 1px solid #000; }

текст

Например:

background: #fff url(“example_image.png”) no-repeat fixed right bottom

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

Работа с размером фона в CSS

В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

Существует несколько способов, позволяющих определить размер:

Абсолютное изменение размера

Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.

Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

background-size: 150px 300px

Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.

Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

background-size: 100px

Относительное изменение размера

Если применять проценты, размер будет основываться не на изображении, а на элементе.

Например:

background-size: 50% auto;

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

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

Масштабирование до максимального размера

В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

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

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

background-size: contain;

Заполнение фоном

Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

В том случае, если соотношения сторон различаются, картинка обрежется:

background-size: cover;

Масштабирование сразу нескольких фонов

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

background: url(“example_image.png”) 70% 90% no-repeat, url(“example_image.png”) 30% 50% no-repeat, url(“example_image.png”) 15% 25% no-repeat #fff, url(“example_image.png”) 70% 90% no-repeat, background-size: 250px 200px, auto, 100 px;

Универсальное свойство background

Мы с Вами рассмотрели все свойства, которые предназначены для работы с фоновыми изображениями

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

Свойство background имеет следующий синтаксис:

background: «color image position/size repeat origin clip attachment;

Где значения соответствуют вышерассмотренным нами свойствам:

  • background-color (color | transparent).
  • background-image (url | none).
  • background-position (значение).
  • background-size (auto | length | cover | contain).
  • background-repeat (repeat | repeat-x |repeat-y | no-repeat).
  • background-origin (padding-box | border-box | content-box).
  • background-clip (border-box | padding-box | content-box).
  • background-attachment (scroll | fixed | local).

Давайте рассмотрим пример использования универсального свойства background:

Пример использования универсального свойства background
html, body
{ height: 100%; /* устанавливаем высоту элементов */ width: 100%; /* устанавливаем ширину элементов */ margin: 0; /* убираем внешние отступы элемента */ padding: 0; /* убираем внутренние отступы элемента */ }
header
{ width: 100%; /* устанавливаем ширину элемента */ min-height: 34%; /* устанавливаем минимальную высоту элемента */ background: white url(‘cat_g.jpg’) bottom/cover no-repeat; /* указываем цвет заднего фона, фоновое изображение, позицию/масштабируем под размеры элемента, фон не повторяется */ }
.primer2
{ width: 100%; /* устанавливаем ширину элемента */ min-height: 66%; /* устанавливаем минимальную высоту элемента */ background: url(‘lis.png’) top/contain no-repeat, url(‘cat_g.jpg’) bottom/cover no-repeat; /* Обратите внимание, что значения для различных изображений указываются через запятую */ /* Путь к изображению 1 позиция/масштаб повтор, Путь к изображению 2 позиция/масштаб повтор */ }

class = «primer2»>

И так, что мы сделали в этом примере:

  • Мы установили для элементов и высоту 100%, убрали внутренние и внешние отступы.
  • Для элемента задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение — url(‘cat_g.jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
  • Для элемента
    с классом .primer2

    задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается — значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

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

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

Фон в шаблоне презентации

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

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

Образец слайдов — это тип шаблонных слайдов PowerPoint, предназначенный для того, чтобы задать единое оформление презентации: фон, шрифты, колонтитулы и другое. «Макеты слайдов» наследуют все элементы, добавленные на «Образец слайдов».

Кликните правой кнопкой по «Образцу слайдов» и в открывшемся меню выберите последний пункт — «Формат фона»

В правой части окна PowerPoint откроется панель форматирования фона. Здесь вы можете выбрать между несколькими вариантами фона:

  • Сплошная заливка — вы просто выбираете сплошной цвет фона. Как мы писали выше, чем проще цвет фона, тем легче будут читаться ваши тексты и другая информация.
  • Градиентная заливка — это плавный переход от одного цвета к другому. В PowerPoint вы можете задать сразу несколько цветов градиента, но лучше этим не злоупотреблять. Градиенты часто использовались в дизайне в конце 80-хх — начале 90-хх годов прошлого века и поэтому сейчас многие считают этот прием устаревшим.
  • Рисунок или текстура — фоновое изображение, загруженное из файла фотографии.
  • Узорная заливка — узор или паттерн, генерируется самой программой по заданным вами параметрам.

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

Выберите вариант заливки Рисунок или текстура на панели форматирования фона и нажмите кнопку «Файл».

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

Для возврата к редактированию слайдов на вкладке «Вид» выберите «Обычный режим».

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

Как сделать заливку в Фотошопе

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

Заливка в Фотошопе

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

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

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

Подробнее: Как сделать градиент в Фотошопе

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

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

Работая с цветом в Фотошопе, важно принимать во внимание используемый вид заливки. Чтобы добиться желаемого результата, нужно правильно выбрать заливку и оптимально отрегулировать ее настройки.

«Заливка»

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

«Градиент»

Для настройки и применения инструмента «Градиент» в Фотошопе, нужно:

  1. Определить нуждающуюся в заливке область и выделить ее.

  2. Взять инструмент «Градиент».
  3. Подобрать нужный цвет для закрашивания фона, а также определиться с основным цветом.

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

    Степень цветового перехода будет зависеть от длины линии: чем она длиннее, тем меньше видно цветовой переход.

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

Мы рады, что смогли помочь Вам в решении проблемы.

Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

lumpics.ru

Как сделать заливку в Фотошопе

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

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

Разновидности заливки

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

Наиболее используемые инструменты для замены цвета элемента — заливка и градиент

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

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

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

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

С левой стороны, на боковой панели легко отыскать пиктограмму с изображением наклонённого ведра, из которого вытекает капля. Кликнув по данной пиктограмме правой клавишей мышки, появляется дополнительное окно, в котором предлагается выбрать тип заливки.

Первую позицию в списке выбора занимает непосредственно инструмент «Градиент», а вторую — «Заливка».

Используйте инструмент, отвечающий вашим задачам

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

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

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

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

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

Как изменить цвет при помощи заливки

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

Заливка выделенной области / заливка с учетом содержимого

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

Один из вариантов — выбрать команду меню Редактирование => Выполнить заливку (Edit => Fill) и подобрать цвет из раскрывающегося списка Использовать (Use) в появившемся диалоговом окне. Выберите цвет из открывшегося диалогового окна Палитра цветов (Color Picker), а затем дважды нажмите кнопку ОК, чтобы закрыть диалоговые окна. Фотошоп заполнит выделенную область указанным цветом.

Другой вариант более гибкий способ — это создать корректирующий слой с цветной заливкой (этот слой векторный, по сути, так что он не увеличит размер файла). Создав выделение с помощью инструмента Прямоугольная область, нажмите кнопку Создать новый корректирующий слой или слой-заливку (Create new fill or Adjustment layer), которая находится в нижней части палитры слоев (значок с изображением наполовину черного, наполовину белого круга) и выберите вариант Цвет (Solid Color). Затем подберите цвет из появившейся палитры и нажмите кнопку ОК. В примере ниже я инвертировал котанов в середине, чтобы заливка была с краев изображения. Для дополнительного шика можно добавить разные стили слоя, такие как тень, свечение и другие.

Использование заливки Content-Aware (С учетом содержимого)

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

Когда использовать каждый из вариантов, спросите вы? Если у вас много хороших пикселов с обеих сторон от пикселов, которые вы хотите удалить, попробуйте применить инструмент Точечная восстанавливающая кисть. Если вы хотите более точно убрать пикселы, скажем, если объект, который требуется удалить, находится совсем рядом с чем-то, что вы хотите сохранить, — создайте выделенную область, а затем примените заливку С учетом содержимого (если это возможно, лучше добавить немного фона).

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

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

Магия, используемая фотошопом для заполнения выделенной области, случайная и меняется при каждом использовании команды. Другими словами, если не получилось с первого раза, попробуйте выбрать команду меню Редактирование => Выполнить заливку повторно. Скорее всего, вы получите разные результаты.

Теперь то же самое, но подробно:

1. Откройте изображение и продублируйте фоновый слой, нажав сочетание клавиш Ctrl+J.

2. Выделите лисицу слева. Великолепно справится инструмент Магнитное лассо, так как между лисицей и фоном существует значительный контраст. Выберите его на панели инструментов или несколько раз нажав сочетание клавиш Shift+L. Установите указатель мыши на изображение и щелкните мышью один раз, чтобы установить отправную точку, а затем обведите вокруг лисы, щелкая кнопкой мыши для добавления опорных точек.

3. Выберите команду меню Редактирование => Выполнить заливку и укажите вариант С учетом содержимого в раскрывающемся списке Использовать, ЛИБО выберите инструмент Точечная восстанавливающая кисть, установите в параметрах соответствующий флажок, выберите размер кисти и закрасьте все что было выделено. Фотошоп заполнит все место соседними пикселами.

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

Заметили ошибку в тексте — выделите ее и нажмите Ctrl + Enter. Спасибо!

psand.ru

Как залить слой в Фотошопе

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

Заливка слоя в Photoshop

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

Способ 1: Меню программы

  1. Идем в меню «Редактирование — Выполнить заливку».

  2. В окне настройки заливки можно выбрать цвет, режим наложения и непрозрачность. Это же окно можно вызвать нажатием горячих клавиш SHIFT+F5. Нажатие кнопки ОК зальет слой выбранным цветом или применит специальные настройки к заливке.

Способ 2: Инструмент «Заливка»

В этом случае нам понадобится инструмент «Заливка» на левой панели инструментов.

Здесь же, на левой панели, можно настроить цвет заливки.

На верхней панели настраивается тип заливки (Основной цвет или Узор), режим наложения и непрозрачность.

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

  • Допуск определяет количество похожих оттенков в обе стороны по шкале яркости, которые будут заменены при клике по участку, этот оттенок содержащих.
  • Сглаживание устраняет зубчатые края.
  • Галка, установленная напротив «Смежных пикселей» позволит залить только тот участок, по которому совершен клик. Если галку снять, то будут залиты все участки, содержащие данный оттенок, учитывая Допуск.
  • Галка, установленная напротив «Всех слоев» применит заливку с заданными настройками ко всем слоям в палитре.

Подробнее: Как сделать заливку в Фотошопе

Способ 3: Горячие клавиши

Комбинация ALT+DEL заливает слой основным цветом, а CTRL+DEL – фоновым. В данном случае не важно, находится на слое какое-либо изображение или нет.

Таким образом, мы научились заливать слой в Фотошопе тремя разными способами.

Мы рады, что смогли помочь Вам в решении проблемы.

Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

lumpics.ru

Рейтинг
( 1 оценка, среднее 4 из 5 )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий