Как растянуть изображение

Обнаружил данный урок на одном канале youtube. Очень полезная фишка для веб-дизайнера на мой взгляд.

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

  • Как растянуть изображение
    Должно получиться вот что:
  • Как растянуть изображение
  • Приступим. Открываем наше изображение в PhotoShop и выделяем необходимый нам объект:
  • Как растянуть изображение
    Далее переходим на вкладку Выделение >> Сохранить выделенную область
  • Как растянуть изображение
    И задаем какое-нибудь произвольное имя для данного выделения:
  • Как растянуть изображение
    Таким образом, мы создали область, которая в последствии будет защищена от изменений. Следующим шагом переходим в Редактирование >> Масштаб с учетом содержимого:
  • Как растянуть изображение
    И обязательно указываем защищаемый объект:

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

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

Источник: https://blogo-daru.ru/2015/09/11/rastyagivanie-izobrazheniya-s-soxraneniem-proporcii-opredelennogo-obekta-v-photoshop/

Как растянуть изображение в Фотошопе? — Templatemonster | Вопросы и ответы. Все о дизайне и создании сайтов

Взгляните на фотографию ниже. Вы видите что-то странное? Не стоит переживать, если не увидели! Просто на фото все идеально! Это благодаря мощному инструменту Adobe Photoshop, который называется Content-Aware Scale.

Из статьи вы узнаете:

Как растянуть изображение

Важно! Нужно уметь работать с Фотошоп, если планируете использовать psd шаблоны сайтов.

Content-Aware Scale позволяет масштабировать фотографии в Photoshop без потери качества, искажения изображения людей, зданий, животных и т.д.

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

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

Как изменить размер картинки в Фотошопе?

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

Как растянуть изображение

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

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

С чего начать?

Чтоб начать работу с фотографией, откройте ее в Photoshop, а затем выберите инструмент Crop Tool в левой вертикальной панели инструментов. На сегодняшний день, это пятый по счету инструмент сверху. Вы можете либо выбрать его на панели инструментов, либо просто нажать C на клавиатуре.

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

Как растянуть изображение

После этого нажимаете Image на панели настроек, далее Crop, который находится в верхней части рабочей области, и выберите Crop Tool. Щелкните мышкой внутри изображения и перетащите курсор влево, пока напиток не будет отцентрирован на фотографии.

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

Как растянуть изображение

Выбор части изображения

Следующий шаг — выбрать часть фотографии, которая похожа на пустующую область. Это легко выполнимо с помощью инструмента Rectangular Marquee Tool.

Как растянуть изображение

Инструмент Content-Aware Scale

На данном этапе и начинается настоящее волшебство. Теперь, когда есть выбранная область, нужно перейти Edit > Content-Aware Scale.

Как растянуть изображение

Далее необходимо выбрать функцию Free Transform. Нажмите на центрально-правое разделение и перетащить его вправо, чтоб оно совпадало с краем фотографии. И вот, изображение приобретает новый вид. Ответ на вопрос: “Как изменить размер картинки в Фотошопе?” — найден!

Как растянуть изображение

Осталось только нажать Enter на клавиатуре и сохранить изменения, а затем в главном меню (сверху) выбрать Select > Deselect menu item, чтоб удалить пунктирное выделение.

Читайте также:  Как сделать мороженое дома

Как растянуть изображение

Согласитесь, результат выглядит неплохо!? Глядя на фотографию, трудно представить, что она редактировалась с помощью Photoshop.

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

Источник: https://www.TemplateMonster.com/ru/faq/kak-rastyanyt-izobragenie-v-fotoshop/

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

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

 Давайте для примера добавим на один черновой сайт (wordpress) фото обложку. Открываем любую запись или страницу, загружаем туда уже подготовленную фото обложку для сайта, переходим на вкладку “Текст”, копируем код который мы будем вставлять в файл header.php.

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

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

Как растянуть изображение

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

Как растянуть изображение

 Чтобы убедиться в том что обложка не будет адаптироваться на больших экранах, заходим на сайт сервиса “quirKtools”, в инструмент “Screenfly”. Вводим в поле адрес нашего сайта, жмём кнопку GO. Вверху страницы выбираем самый большой размер экрана и видим, что обложка не растягивается, то есть не масштабируется, так как в коде указаны конкретные размеры.

Как растянуть изображение

Адаптивное изображение на любом экране

 Чтобы сделать изображение адаптивным и масштабируемым, чтобы оно адаптировалось под любой размер экрана, нужно внести в код одно простое изменение. В коде изображения обложки, убираем обозначение высоты (height), а для ширины указываем значение – “100%” (смотри скриншот). Сохраняем код.

Как растянуть изображение

 Снова заходим в сервис “quirKtools”, выбираем самый большой размер экрана и смотрим что теперь обложка сайта адаптируется под самый большой размер экрана.

Как растянуть изображение

 Ширина изображения будет отображаться на любом устройстве на 100%, то есть на весь экран, а высота изображения будет вычисляться автоматически пропорционально ширине изображения. Если бы вы указали конкретный размер высоты изображения, то изображение отображалось бы искажённым, то есть не пропорциональным.

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

Как растянуть изображение

 Всё просто ! Главное разобраться.

https://info-effect.ru/ Как растянуть изображение

Источник: https://info-effect.ru/kak-sdelat-izobrazhenie-adaptivnym-masshtabiruemym-chtoby-rastyagivalos.html

Масштабируем картинку в Фотошопе

Как растянуть изображение

Сегодня мы поговорим о том, как растянуть картинку в Фотошопе путем масштабирования.

Скачать последнюю версию Photoshop

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

Первый вариант вызова функции – через меню программы. Необходимо перейти в меню «Редактирование» и навести курсор на пункт «Трансформирование». Там, в выпадающем контекстном меню и находится нужная нам функция.

Как растянуть изображение

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

Как растянуть изображение

Потянув за эти маркеры, можно трансформировать картинку.

Второй вариант вызова функции «Масштабирование» является использование горячих клавиш CTRL+T. Эта комбинация позволяет не только масштабировать, но и вращать изображение, и трансформировать его. Строго говоря, функция называется не «Масштабирование», а «Свободное трансформирование».

Со способами вызова функции мы разобрались, теперь попрактикуемся.

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

Как растянуть изображение

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

Читайте также:  Как сделать свечи своими руками

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

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

Как растянуть изображение

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

Как растянуть изображение

Как видим, если кнопка активирована, то в соседнее поле прописывается то же значение, что мы вносим в исходное.

Растягивание (масштабирование) объектов это тот навык, без которого Вам не стать настоящим мастером Фотошопа, поэтому тренируйтесь и удачи!

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

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

ДА НЕТ

Источник: http://lumpics.ru/how-to-stretch-the-image-in-photoshop/

Растянуть фото пример, программы

Начнем с первопричины! Откуда взялась вообще тема – «растянуть фото»? В одном очень популярном сериале (След), там, якобы спецы криминалистики (я уж молчу, что о них думают реальные спецы криминалистики) заявляют, что у подозреваемого не было фотошопа, поэтому. Он не мог растянуть фото!

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

  • Для растягивания фото будем использовать две программы:
  • 1. Paint
  • 2. Photoshop

Растягиваем фото в Paint

Программу &Paint скачивать не нужно, она в виндовс идет вместе с ОСью

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

Нажимаем «ctrl + a» — либо «выделить» и у вас появится кайма вокруг фото! Ну и как говорится дело в шляпе! Отсеется потянуть мышкой за эту кайму вправо, либо вниз, либо и вправо и вниз одновременно взяв за кайму в углу.

Как растянуть изображение

К сожалению растянуть фото влево таким образом не получится, потому, что в программе Paint сделать нельзя!

НО!

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

Заходим в повернуть – отразить по горизонтали – теперь вы можете потянуть за правую сторону и фото растянется влево… естественно, что после растягивания нужно повернуть фото еще раз по горизонтали!

Как растянуть изображение

Как растянуть фото в Фотошопе?

Естественно, что в фотошопе растянуть фото будет намного легче – это же проф инструмент.

Идем — «редактирования –трансформирование – масштабирование.

Как растянуть изображение

И далее появится канва, как и в программе Paint потянув мышкой за которую фото растянется в том направлении куда вы потяните…

Это интересно…

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

Это просто срывает башню! Как такое возможно….

Источник: http://marrex.ru/Programs/Paint/1_rastyanut-foto.html

Как растянуть фон, изображение на всю ширину блока, экрана

Помню перерыл много информации и испробовал не мало способов, пока не нашел именного того решения, что нужно было именно в тот момент.

Ниже я покажу 3 способа, которые растягивают фон на всю ширину экрана.

Способ №1

Как растянуть изображение

Первый способ использует чистый CSS3. Все получается благодаря свойству background-size. В моем случаи я буду растягивать картинку на всю ширину экрана, то есть присвою свойства к тегу body. Вы можете применить по надобности к блоку например.

Растягивать на весь экран будем вот эту картинку с милой девушкой

Источник: http://gnatkovsky.com.ua/kak-rastyanut-fon-izobrazhenie-na-vsyu-shirinu-bloka-ekrana.html

Как растянуть фоновое изображение, чтобы заполнить веб-страницу

Изображения – важная часть привлекательного дизайна сайта. Фоновые изображения могут прибавить визуального интереса странице. background image HTML поможет получить тот визуальный дизайн, который вы ищете.

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

Читайте также:  Как хорошо выглядеть на фото

Лучший способ растянуть изображение — это использовать свойство CSS3 «background-size». Вот пример, который использует фоновое изображение для body страницы, и устанавливает размер в «100%«. Поэтому рисунок всегда растянется и заполнит весь экран.

body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}

Это свойство работает в IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ и во всех популярных мобильных браузерах.

Маловероятно, что понадобится обеспечивать поддержку HTML body background image браузерам старше IE9. Но предположим, что вас беспокоит, будет ли сайт корректно отображаться в IE8. В этом случае нужно имитировать растянутый фон. Можно использовать префиксы браузеров для Firefox 3.6 (-moz-background-size) и Opera 10.0 (-o-background-size).

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

  1. Добавьте изображение для фона как первый элемент веб-страницы, и назначьте ему id равное «bg»:
  1. Расположите фоновое изображение так, чтобы оно было зафиксировано сверху и слева, было 100% в ширину и 100% в высоту.
    Добавьте приведенный ниже код в таблицу стилей:

img#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;}

  1. Поместите все содержимое страницы внутрь элемента DIV с id «content». Добавьте DIV под изображением:

All your content here — including headers, paragraphs, etc.

Примечание: сейчас пришло время взглянуть на страницу. Изображение должно выглядеть растянутым, но содержимое пропало. Почему? Фоновое изображение 100% в высоту, а раздел содержимого располагается в потоке документа после изображения – большинство браузеров не отобразят его.

  1. Задайте содержимому относительное позиционирование и задайте z-index, равный 1. Это поднимет его над фоновым изображением в браузерах. Добавьте приведенный ниже код в таблицу стилей:

#content {
position: relative;
z-index: 1;}

  1. Свойство HTML CSS background image в Internet Explorer 6 несовместимо с современными стандартами. Есть много способов спрятать CSS от любого браузера, кроме IE6, но самое это использовать условные комментарии.
  2. Обязательно проверьте это в IE 7 и IE 8. Возможно, понадобится откорректировать комментарии.

Немногим сайтам необходимо поддерживать IE 7 или 8, а IE6 – еще меньше! Как таковой, этот подход устарел. Я оставляю это как любопытный пример того, насколько было трудно до того, как все браузеры стали работать сообща!

Можно применить похожую технику, чтобы имитировать растянутое фоновое изображение на HTML div background image или другом элементе веб-страницы. Это сложнее, так как нужно либо использовать абсолютное позиционирование.

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

img#bg {
width: 20em;
height: 30em;}

  1. Поместите содержимое в div с id «content», как мы делали раньше.
  2. Задайте div с содержимым ширину и высоту, соответствующую размерам фонового изображения:

div#content {
width: 20em;
height: 30em;}

  1. После этого разместите содержимое на той же высоте, что и фоновое изображение. Не забудьте добавить для содержимого z-index, равный 1.

#content {
position: relative;
top: -30em;
z-index: 1;
width: 20em;
height: 30em;}

Свойства background-size и background image HTML широко поддерживаются браузерами, и этот подход, скорее всего, можно расценивать как продукт прошедшей эпохи. Если вы захотите использовать такой подход, обязательно проверьте его в как можно большем количестве браузеров. И если содержимое поменяет размер, нужно будет изменить размеры контейнера и фонового изображения.

Данная публикация представляет собой перевод статьи «How to Stretch a Background Image to Fit a Web Page» , подготовленной дружной командой проекта Интернет-технологии.ру

Источник: https://www.internet-technologies.ru/articles/kak-rastyanut-fonovoe-izobrazhenie-chtoby-zapolnit-veb-stranicu.html

Ссылка на основную публикацию