Небесный фон с использованием тега HTML

Распространенная ошибка: фон становиться обрезанным .

Взгляните на demo . При разрешении по ширине до 1280px все выглядит безупречно. Однако при большем разрешении видно, как фон обрезается по бокам.

Одно изображение

Быстрое решение упомянутой ранее проблемы: сделайте края изображения того же цвета, что и фон (background) тега BODY или наоборот. В качестве примера я воспользуюсь Web Designer Wall. Взгляните на представленное ниже изображение и заметьте, что края разного цвета.

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

Body { padding: 0; margin: 0; background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; width: 100%; display: table; }

Заметьте две дополнительные линии у селектора BODY . Они предотвращают перемещение фонового изображения в случае, если размеры браузера становятся меньше ширины контента. Jт переводчика: Могу ошибаться, но скорее всего автор статьи добавил две линиии, ширина которых равно ширине фонового изображения.

Два изображения

Для этого примера я использую дизайн доски объявлений о вакансиях, (jobs.webdesignerwall.com). Мы имеем шаблон пробковой плиты, повторяющийся в теге BODY , и фоновое изображение (в блоке с id=wrapper) расположенное по центру.

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

Небесный фон

В этом примере мы имеем 1px градиент, повторяющийся горизонтально, для тега BODY . Далее я добавил фон облаков в центр тега #wrapper .

Небесный фон с использованием тега HTML

Ниже представлен пример небесного фона с использованием селектора HTML для отображения фона с градиентом, благодаря чему необходимость в блоке (#wrapper) отпадает. Данный подход немного проще предыдущего метода.

По материалам сайта www.webdesignerwall.com

Приветствую, друзья! 🙋🏻

Магазины AppStore и Google Play просто кишат огромным количеством приложений на любой вкус и цвет, а программки, позволяющие пользуются особенной популярностью.

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

Так что, приложения, о которых пойдёт речь ниже - абсолютный must-have для любителей мобильной фотосъёмки.

Приложения для размытия фона на Android

Bokeh (Background defocus)

AfterFocus

Приложения для размытия фона на iOS

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

Slør

Цена: 299 руб.

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

Когда любители фотографии говорят о боке, то они подразумевают размытость фона на снимке. Если вы делаете фото с этим эффектом, то фокус остаётся только на главном элементе фотографии, будь то человек или какой-то объект. Используя функцию «Портрет» на Айфоне, вы также сможете добиться этого самого эффекта боке, не прибегая к профессиональной камере DSLR, но для получения реально классного снимка этого будет маловато. Тут-то вам и пригодится приложение Slør ! Эта программка улучшит любой портрет и позволит вывести вашу мобильную съёмку на новый уровень!

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

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

В приложении также имеются два других эффекта. Эффект «Macro» создаёт впечатление, что объект вашей съемки был небольшой и вы использовали увеличение (зум), чтобы приблизиться к нему. А вот эффект «Tilt», наоборот, «отодвинет» главный объект портрета «вглубь» фотографии.

Примерно вот такого эффекта размытого фона вы сможете добиться с помощью приложения Slør .

Focos (только для iOS, нужна двойная камера)

Цена: бесплатно, но есть встроенные покупки

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

Отличных вам фотографий! 📷

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

Начнем с того, что в фотографии, для размытого фона существует термин Боке (ударение на последний слог). Не смотря на то, что слово звучит на французский манер, корни его лежат в японском языке. Правда термином Боке обычно называют не просто размытие, а художественную составляющую размытия. Например — «Этот объектив дает красивое боке, а тот очень простенькое».

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

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

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

Правило 1. Открытая диафрагма и малая глубина резкости

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

Собственно ГРИП — ключевой момент в получении размытого фона на снимке. Для размытия, нам надо получить небольшую ГРИП.

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

Значение диафрагмы — характеризуется числом F. Чем меньше F — тем сильнее раскрыто отверстие диафрагмы. Чем больше F тем сильнее зажата диафрагма.

Чем меньше раскрыто отверстие (большое F) — тем больше глубина резкости относительно объекта съемки. Чем шире открыта диафрагма — тем ГРИП меньше.

Зависимость ГРИП от диафрагмы и расстояния

Посмотрите на иллюстрацию выше. Точка фокусировки находится на расстоянии 6.1 метра. Чем меньше значение F- тем меньше объектов попадет в зону резкости. При f/1.8 — в зону резкости попадет только то, что находится в полуметре от объекта съемки и в метре за ним, все остальное будет размыто. При f/16 — достаточно резкими окажутся предметы на расстоянии даже 6 метров за точкой фокусировки.

Таким образом первое правило получения размытого фона на фотографии — чем меньше значение F (и соответственно чем больше открыта диафрагма), тем сильнее размываются объекты на заднем плане. Как вы можете понять, на переднем плане, если он есть, мы так же получим размытие.

Слева — F22, справа f2.8 при неизменных других параметрах

Правило 2. Фокусное расстояние

Фокусное расстояние одна из характеристик объектива и второй фактор, влияющий на ГРИП и на размытие фона. Не будем сейчас вдаваться в техническое объяснение того, что такое фокусное расстояние. На бытовом уровне можно сказать, что фокусное расстояние, это то насколько ваш объектив «приближает» объект. Стандартный диапазон фокусных расстояний «китовых» объективов у зеркалок 18-55мм. То есть на 18мм, наш объектив охватывает большое пространство, а на 55мм мы «приближаем» объект.

Одна сцена при разном фокусном расстоянии

Из-за особенностей оптических схем, ГРИП зависит от фокусного расстояния. При одном и том же значении F — на большом фокусном расстоянии, глубина резкости будет меньше. То есть чем сильнее «приближает» объектив, тем меньше будет глубина резкости. Что нам и требуется.

Отсюда второе правило. Если хотите размыть задний план — используйте длиннофокусные объективы или выдвигайте зум вашего объектива на максимальное «приближение».

При изменении фокусного расстояния и неизменном F — получаем разное размытие

Правило 3. Реальное расстояние

Третий фактор, который влияет на глубину резкости, расстояние до предмета съемки и до фона. Чем ближе предмет в реальности к объективу — тем меньше ГРИП.

Для размытия фона нужно, чтобы расстояние от вашей камеры до предмета съемки было многократно меньше, чем расстояние до фона. Допустим вы делаете портрет. Хорошее размытие будет в том случае, если от вас до модели всего 2-3 метра, а до фона за ней — метров 10-15.

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

игрушка сфотографирована при одном и том же F, но на разных фокусных расстояниях и разном реальном расстоянии от камеры до предмета

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

Пробуем. Симулятор зеркалки

Побалуйтесь с глубиной резкости и размытием фона, используя программу-симулятор от CameraSim .

  1. Включите галочку «штатив»
  2. Переведите режим на ручной или приоритет диафрагмы
  3. Меняйте комбинации параметров — расстояние, фокусное расстояние, диафрагма
  4. Жмите на «Сделай фото!», так как влияние значения диафрагмы на размытие фона фото, можно оценить только по результату. В видоискателе вы его не заметите.

Подводим итог

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

  1. Максимально открыть диафрагму
  2. Выдвинуть зум на максимальное приближение или использовать длиннофокусный объектив
  3. Находиться как можно ближе к объекту съемки и как можно дальше отодвинуть от него задний план.

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

Если у вас нет дорогого светосильного объектива, где можно поставить f/2.8 и менее, попробуйте компенсировать это двумя другими параметрами — снимайте с более близкого расстояния, при максимальном зуме.



Енвд