Background image растянуть: Как растянуть фон на всю ширину окна?

Как растянуть изображение в фотошопе?

Редактирование картинок в фотошопе может потребовать изменения их масштабов. В частности – растяжения. Какими способами это можно сделать? Как растянуть изображение в фотошопе?

Рассмотрим способы решения данной задачи в Photoshop версии CS6 с англоязычным интерфейсом.

Содержание статьи

• Растяжение картинки, являющейся фоном
• Растяжение картинки, являющейся слоем
• Растяжение картинки на холсте с помощью группы опций Free Transform
• Растяжение картинки с помощью опции Transform Controls

Картинки, редактируемые с помощью фотошопа, могут быть представлены в формате:

• фонового слоя – Background;
• изображения (в виде самостоятельного слоя) – Layer.

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

Реклама

Второй вариант предполагает следующее размещение картинки:

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

Картинка может размещаться и так – в виде слоя, полностью независимого от холста.

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

В каждом случае особенности «растяжения» рисунка – разные. Изучим их.

Растяжение картинки, являющейся фоном

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

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

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

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

к содержанию ↑

Растяжение картинки, являющейся слоем

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

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

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

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

После этого слой переименуется из Background в Layer. Теперь рисунок может редактироваться отдельно от холста.

Можно свободно перемещать картинку по рабочей области проекта, используя инструмент Move Tool. Холст, в свою очередь, может быть залит цветом – с помощью инструмента Paint Bucket Tool.

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

Это легко пронаблюдать, если вновь взять инструмент Move Tool и попытаться переместить редактируемую картинку – она начнет передвигаться вместе с окрашенным холстом.

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

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

Фактически работа должна вестись с 2 слоями – тем, который «объединен» с холстом, и тем, который является самостоятельным графическим элементом.

Способность свободно перемещаться по экрану картинки – в виде слоя, размещенного на холсте, либо в виде полностью независимого слоя – предопределяет возможность задействования следующих методов ее растяжения (не считая рассмотренного нами выше):

• использование группы опций Free Transform;
• задействование инструмента Transform Controls.

Изучим их особенности подробнее.

к содержанию ↑

Растяжение картинки на холсте с помощью группы опций Free Transform

Для наглядности предлагается увеличить холст – чтобы картинка имела меньшую, чем он, площадь, и ее можно было растягивать. Для этого нужно выбрать пункт меню Image, затем – Canvas Size. В открывшемся окне следует ввести значение величины холста, соответствующее примерно 120 %. При этом галочку напротив Relative желательно снять.

В результате на холсте появится достаточное пространство для растяжения изображения.

Далее нужно выбрать инструмент Rectangular Marquee Tool либо любой другой, что располагается в соответствующей группе. После – кликнуть правой кнопкой мыши на изображении и выбрать пункт Free Transform. Затем сразу же надо щелкнуть на картинке правой кнопкой еще раз – после этого откроется требуемая группа опций.

За растяжение картинки отвечают первые 6.

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

Чтобы изменить размер картинки, нужно потянуть за ползунки, которые появляются сразу же после активации опции Scale. Если тянуть за угловые – меняется величина изображения в целом. При удержании клавиши Shift – пропорционально исходному размеру.

Если тянуть только за верхние и нижние ползунки – изменится высота рисунка, если за боковые – ширина.

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

Следующая опция – Rotate. С ее помощью можно поворачивать картинку – в любую сторону.

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

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

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

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

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

Соответственно, непосредственно за растяжение (тем или иным способом) картинок отвечают такие опции, как:

• Scale;
• Skew;
• Distort;
• Perspective;
• Warp.

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

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

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

к содержанию ↑

Растяжение картинки с помощью опции Transform Controls

Изучим теперь то, как растянуть изображение в Photoshop, задействуя другой инструмент – Transform Controls. Он считается, с одной стороны, менее функциональным, чем группа опций Free Transform, с другой – простым в использовании.

Активируется он очень просто. Нужно выбрать инструмент Move Tool, после – поставить галочку напротив открывшегося чуть ниже меню пункта Show Transform Controls.

В результате на картинке появятся ползунки – подобные тем, что активируются при задействовании опций Free Transform. Применяя их, можно:

• регулировать размер изображения в целом, размер его сторон;
• поворачивать картинку.

Как и в случае с инструментами Free Transform, при использовании опции Show Transform Controls в верхней части интерфейса фотошопа открывается дополнительная панель настроек точных значений размеров рисунка либо его элементов.
Рассматриваемый метод растяжения картинок особенно удобен при работе с несколькими изображениями – как раз в тех случаях, когда они являются полностью независимыми от холста слоями. Так, менять их размер с помощью опции Transform Controls становится возможным сразу же после щелчка по соответствующему слою мышкой – не нужно активировать каких-либо дополнительных функций фотошопа.

Закрепление результатов редактирования картинок осуществляется, как и при использовании предыдущего метода, с помощью клавиши Enter.

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

В этой статье познакомимся с классами фреймворка Bootstrap 3 и 4, предназначенными для оформления изображений.

Класс для придания изображениям гибкости

Так как Bootstrap предназначен для создания адаптивных сайтов, то изображения при построении такой сетки не должны выходить за пределы своего блока (элемента, в который каждое из них помещено).

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

• img-responsive в Bootstrap 3;
• img-fluid в Bootstrap 4.

После этого, размеры изображения будут уменьшаться, если его ширина будет больше ширины элемента, в котором оно находится.

<!-- Bootstrap 3 -->
<img src="...">

<!-- Bootstrap 4 -->
<img src="...">

Эти классы на самом деле выполняют очень простые действия, они применяют к изображению CSS-свойства max-width:100% и height:auto.

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

/* 1 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались как строчно-блочные элементы (inline-block) */
img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

/* 2 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались на странице как блочные элементы (block) */
img {
  display: block;
  height: auto;
  max-width: 100%;
}

Если необходимо сделать не все изображения на странице гибкими, а только те, которые расположены в определённом блоке, то в этом случае это необходимо определить с помощью CSS-селекторов:

/* например, сделаем гибкими только те изображения, которые расположены в элементе с классом main */
. main img {
  display: block;
  height: auto;
  max-width: 100%;
  /* дополнительно их выровняем по центру */
  margin-left: auto;
  margin-right: auto;
  /* и добавим внешний нижний отступ */
  margin-bottom: 15px;
}

При необходимости изображениям можно задать определённый размер. Осуществляется это с помощью стандартных атрибутов width и height:

<!-- Гибкое изображение, имеющее ширину 600 пикселей (Bootstrap 3) -->
<img src="...">

<!-- Гибкое изображение, имеющее размер 600x800 пикселей (Bootstrap 4) -->
<img src="...">

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

Классы для изменения формы изображения и задания тени

В Bootstrap 3 и 4 имеются классы, с помощью которых изображение можно заключить в рамку (img-thumbnail), скруглить ему углы (в Bootstrap 3: img-rounded, в Bootstrap 4: rounded), или представить его в форме круга (в Bootstrap 3: img-circle, в Bootstrap 4: rounded-circle

).

<!-- Bootstrap 3 -->
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">

<!-- Bootstrap 4 -->
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">

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

<!-- Bootstrap 4 -->
<!-- маленький размер тени -->
<img src="..." alt="...">
<!-- средний размер тени -->
<img src="..." alt="...">
<!-- большой размер тени -->
<img src="..." alt="...">

Классы для выравнивания изображений

Изменить положение изображения в Bootstrap можно с помощью утилитных классов:

• в Bootstrap 3: pull-left, pull-right, center-block, text-left, text-center и text-right;
• в Bootstrap 4: float-left, float-right, mx-auto d-block, text-left, text-center и text-right.

Первые два класса как в первом, так и во втором списке предназначены для выравнивания изображения посредством задания ему CSS-свойства

float со значением left или right.

<!-- Bootstrap 3 -->
<div>
  <!-- выравниваем изображение по левому краю с помощью float: left -->
  <img src="..." alt="...">
  <!-- выравниваем изображение по правому краю с помощью float: right -->
  <img src="..." alt="...">
</div>

<!-- Bootstrap 4 -->
<div>
  <!-- выравниваем изображение по левому краю с помощью float: left -->
  <img src="..." alt="...">
  <!-- выравниваем изображение по правому краю с помощью float: right -->
  <img src="..." alt="...">
</div>

Установка изображению center-block (Bootstrap 3) или mx-auto d-block (Bootstrap 4) предназначено для выравнивания изображения по центру. Эти классы задают изображению блочное отображение, а затем выравнивают его через margin-left: auto и margin-right: auto.

<!-- Bootstrap 3 -->
<img src="..." alt="...">

<!-- Bootstrap 4 -->
<img src="..." alt="...">

Классы

text-left, text-center и text-right предназначены для выравнивания изображений, которые отображаются на странице только как строчно-блочные (display: inline-block) элементы. Для этого изображение необходимо поместить в элемент, например, div и добавить к нему один из этих классов.

Всегда растягивать фоновое изображение тела до полного покрытия — Общее — Forum

loewenkunst (Мириам) 13 ноября 2020 г., 13:10

1

Привет всем,

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

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

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

Ссылкой поделиться не могу так как проект еще не официальный — надеюсь мои пояснения достаточно понятны.

Кто-нибудь знает, как настроить изображение так, как я хочу, не обращая внимания на соотношение сторон?

Спасибо

Стэн (просто другой разработчик) 13 ноября 2020 г.

, 18:40

2

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

левенкунст (Мириам) 17 ноября 2020 г., 7:43

3

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

Стэн (просто другой разработчик) 17 ноября 2020 г.

, 8:52

4

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

университет.webflow.com

Адаптивные изображения в Webflow | Университет Вебфлоу

Адаптивные изображения — это функция по умолчанию, автоматически включенная в Webflow.

webflow.com

Подставка для объекта | Функции веб-потока

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

Удачи

1 Нравится

(iDatus) 17 ноября 2020 г., 9:39

5

Мириам, хороший вопрос для тех, кто читает это настройки для фона

Я немного поиграл, и вы правы, он сохраняет форму объекта.
Это не похоже на атрибут заполнения элемента изображения.
Я предполагаю, что это сделано с помощью html, чтобы уменьшить нагрузку на процессор.
Теперь вы можете попробовать использовать изображение и позиционирование.

1 Нравится

(Мириам) 20 ноября 2020 г., 9:40

6

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

ИДАТУС (iDatus) 20 ноября 2020 г., 10:35

7

Только что попробовал, и вот предложение

Скриншот 20. 11.2020 1033401332×819 200 КБ

Скриншот 20.11.2020 1034251306×713 905 КБ 1 Нравится

(Мириам) 29 января 2021 г., 16:54

8

Эй, iDATUS, спасибо за помощь. Я думаю, что наконец нашел решение, которое работает для меня. Я сделал, как вы предложили, и поместил все в обтекание страницы, но затем я поместил изображение не как элемент, а как фоновое изображение обтекания страницы с опцией «обложка», и это отлично работает. Я думаю, что проблема с телом заключается в том, что он, кажется, учитывает только область просмотра, поэтому, если высота фона установлена ​​​​на 100%, это 100vh. Обычный div не делает этого, как кажется.

ИДАТУС (iDatus) 30 января 2021 г. , 5:31

9

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

Просто дополнительная информация общего характера.

1 Нравится

Как растянуть фон в GIMP | Малый бизнес

Дэвид Видмарк

GIMP, бесплатная программа Gnu Image Manipulation, является отличным ресурсом для любого малого бизнеса с ограниченным бюджетом, которому требуется профессионально выглядящая графика. Если у вас есть изображение, которое вы хотите использовать в качестве фона для своей работы, растянуть его до нужного размера — это простой двухэтапный процесс. Первый шаг — указать, какой размер должно занимать изображение, а второй шаг — просто масштабировать изображение до этого размера.

Изменение размера холста

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

2. Выберите «Размер холста» в меню «Изображение». Откроется панель «Задать размер холста изображения».

3. Щелкните значок «Цепочка» рядом с шириной и высотой, чтобы разблокировать пропорции высоты и ширины. Когда звено в цепи разорвано, пропорции не скованы. Если вы измените высоту или ширину, когда ссылка не повреждена, другой размер автоматически подстроится, чтобы сохранить те же пропорции.

4. Щелкните меню «Пиксели», чтобы изменить единицу измерения на «Дюймы» или любую другую общепринятую единицу измерения.

5. Введите нужные значения в текстовые поля «Ширина» и «Высота», затем нажмите кнопку «Изменить размер». Размер холста автоматически изменяется, и изображение теперь находится в верхнем левом углу холста.

Растягивание изображения

1. Выберите инструмент «Масштаб» на панели инструментов. Этот значок представляет собой квадрат со стрелкой, указывающей вниз из одного угла.

2. Щелкните изображение. Откроется панель «Масштаб», и вдоль границы изображения появятся восемь квадратных маркеров.

3. Щелкните значок «Цепочка» на панели «Масштаб», если вы хотите ограничить пропорции. Ограничиваете ли вы пропорции изображения или нет, зависит от того, насколько сильно вам нужно растянуться и что изображено на изображении. Даже человеческое лицо часто можно растянуть на пять процентов без искажения.

4. Перетащите правый нижний угол изображения в правый нижний угол холста, чтобы заполнить холст изображением. Либо перетащите правый или нижний «манипулятор» на краю изображения. Вы также можете указать точные пропорции изображения в текстовых полях «Ширина» и «Высота» на панели «Масштаб».

5. Нажмите «Ввод» на клавиатуре, чтобы принять изменения, внесенные в изображение.

6. При необходимости переместите изображение, выбрав инструмент «Переместить» и перетащив изображение на место. В этом нет необходимости, если вы не заблокировали пропорции при изменении размера изображения.

7. Сохраните изображение под новым именем, выбрав «Сохранить как» в меню «Файл». Это не позволит вам писать поверх оригинала.

Список литературы

• GIMP: Canvas Size
• GIMP: Scale Image

Ресурсы

• GIMP: Скачать

. технологий, средств массовой информации и маркетинга более 20 лет. Он преподавал информатику в Алгонкинском колледже, основал три успешных предприятия и написал сотни статей для газет и журналов Канады и США.