Содержание
Обнаружил данный урок на одном канале youtube. Очень полезная фишка для веб-дизайнера на мой взгляд.
Иногда ширины оригинального изображения недостаточно для какой-либо дизайнерской задумки, а его растягивание по ширине искажает нужные объекты. Чтобы сохранить эти объекты в целости и при этом растянуть фон изображения, PhotoShop предоставляет нам определенные инструменты. И так, в конечном итоге у нас из оригинального изображения:
-
Должно получиться вот что:
-
- Приступим. Открываем наше изображение в 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.
Теперь вы знаете, как растянуть изображение в Фотошопе так, чтоб не потерять качество.
Как сделать изображение адаптивным, масштабируемым, чтобы растягивалось (под любое устройство)
Сегодня вы узнаете как можно очень просто сделать любое изображение адаптивным и масштабируемым, то есть чтобы оно растягивалось на весь экран. К примеру если вы делаете для своего сайта фото обложку или фоновое изображение, то вы должны учитывать, что сайт будет открываться на разных устройствах, разных размеров. Изображение должно подстраиваться под любой размер экрана.
Давайте для примера добавим на один черновой сайт (wordpress) фото обложку. Открываем любую запись или страницу, загружаем туда уже подготовленную фото обложку для сайта, переходим на вкладку “Текст”, копируем код который мы будем вставлять в файл header.php.
Вставляем код фото обложки перед закрывающимся тегом head. Обратите внимание как по умолчанию указаны размеры изображения, они конкретные.
То есть, вы делаете обложку под свой размер экрана, а если на ваш сайт зайдёт человек, у которого размер экрана больше вашего, то обложка будет у него отображаться не на весь экран.
Заходим на сайт, обложка отображается. Если у вас адаптивный шаблон, то обложка будет адаптироваться под более маленькие экраны, а вот под экраны которые больше ширины изображения, обложка не будет подстраиваться.
Чтобы убедиться в том что обложка не будет адаптироваться на больших экранах, заходим на сайт сервиса “quirKtools”, в инструмент “Screenfly”. Вводим в поле адрес нашего сайта, жмём кнопку GO. Вверху страницы выбираем самый большой размер экрана и видим, что обложка не растягивается, то есть не масштабируется, так как в коде указаны конкретные размеры.
Адаптивное изображение на любом экране
Чтобы сделать изображение адаптивным и масштабируемым, чтобы оно адаптировалось под любой размер экрана, нужно внести в код одно простое изменение. В коде изображения обложки, убираем обозначение высоты (height), а для ширины указываем значение – “100%” (смотри скриншот). Сохраняем код.
Снова заходим в сервис “quirKtools”, выбираем самый большой размер экрана и смотрим что теперь обложка сайта адаптируется под самый большой размер экрана.
Ширина изображения будет отображаться на любом устройстве на 100%, то есть на весь экран, а высота изображения будет вычисляться автоматически пропорционально ширине изображения. Если бы вы указали конкретный размер высоты изображения, то изображение отображалось бы искажённым, то есть не пропорциональным.
Вот как выглядит размер любого адаптивного изображения:
Всё просто ! Главное разобраться.
https://info-effect.ru/
Масштабируем картинку в Фотошопе
Сегодня мы поговорим о том, как растянуть картинку в Фотошопе путем масштабирования.
Скачать последнюю версию Photoshop
- В том случае, если требуется изменить не размер, а разрешение изображения, то рекомендуем изучить вот этот материал:
- Урок: Меняем разрешение изображения в Фотошопе
- Для начала поговорим о вариантах вызова функции «Масштабирование», при помощи которой мы и будем производить действия над изображением.
Первый вариант вызова функции – через меню программы. Необходимо перейти в меню «Редактирование» и навести курсор на пункт «Трансформирование». Там, в выпадающем контекстном меню и находится нужная нам функция.
После активирования функции на изображении должна появиться рамка с маркерами по углам и серединам сторон.
Потянув за эти маркеры, можно трансформировать картинку.
Второй вариант вызова функции «Масштабирование» является использование горячих клавиш CTRL+T. Эта комбинация позволяет не только масштабировать, но и вращать изображение, и трансформировать его. Строго говоря, функция называется не «Масштабирование», а «Свободное трансформирование».
Со способами вызова функции мы разобрались, теперь попрактикуемся.
После вызова функции нужно навести курсор на маркер и потянуть его в нужную сторону. В нашем случае в сторону увеличения.
Как видим, яблоко увеличилось, но исказилось, то есть пропорции нашего объекта (соотношение ширины и высоты) изменились.
Если пропорции необходимо сохранить, то во время растягивания нужно просто зажать клавишу SHIFT.
Также функция позволяет задать точное значение требуемых размеров в процентах. Настройка находится на верхней панели.
Для сохранения пропорций достаточно ввести в поля одинаковые значения, либо активировать кнопочку с цепочкой.
Как видим, если кнопка активирована, то в соседнее поле прописывается то же значение, что мы вносим в исходное.
Растягивание (масштабирование) объектов это тот навык, без которого Вам не стать настоящим мастером Фотошопа, поэтому тренируйтесь и удачи!
Мы рады, что смогли помочь Вам в решении проблемы. Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
ДА НЕТ
Растянуть фото пример, программы
Начнем с первопричины! Откуда взялась вообще тема – «растянуть фото»? В одном очень популярном сериале (След), там, якобы спецы криминалистики (я уж молчу, что о них думают реальные спецы криминалистики) заявляют, что у подозреваемого не было фотошопа, поэтому. Он не мог растянуть фото!
Если бы они сказали какую-то фразу о чем-то в чем я совсем ничего не смыслю, а с обработкой фото я немного знаком и поэтому, эта фраза, что без фотошопа нельзя растянуть фото резануло ухо! И мы сегодня я буду тем чуваком, который немного знает больше, чем тот, кто писал текст данным спецам!
- Для растягивания фото будем использовать две программы:
- 1. Paint
- 2. Photoshop
Растягиваем фото в Paint
Программу &Paint скачивать не нужно, она в виндовс идет вместе с ОСью
Не устаю повторять, что возможности Paint недооценены! И нам понадобится эта маленькая программка. Запустим её. Откроем в ней любое фото..
Нажимаем «ctrl + a» – либо «выделить» и у вас появится кайма вокруг фото! Ну и как говорится дело в шляпе! Отсеется потянуть мышкой за эту кайму вправо, либо вниз, либо и вправо и вниз одновременно взяв за кайму в углу.
К сожалению растянуть фото влево таким образом не получится, потому, что в программе Paint сделать нельзя!
НО!
Всегда есть выход! Вы можете перевернуть фото зеркально, и левая сторона станет у вас справа.
Заходим в повернуть – отразить по горизонтали – теперь вы можете потянуть за правую сторону и фото растянется влево… естественно, что после растягивания нужно повернуть фото еще раз по горизонтали!
Как растянуть фото в Фотошопе?
Естественно, что в фотошопе растянуть фото будет намного легче – это же проф инструмент.
Идем – «редактирования –трансформирование – масштабирование.
И далее появится канва, как и в программе Paint потянув мышкой за которую фото растянется в том направлении куда вы потяните…
Это интересно…
И в самом конце немного интересного, для создания страницы и превью, мне приходится искать интересные фото, которые можно применить! И вот что я нашел, когда забил в поисковик слово растянуть.
Это просто срывает башню! Как такое возможно….
Как растянуть фон, изображение на всю ширину блока, экрана
Помню перерыл много информации и испробовал не мало способов, пока не нашел именного того решения, что нужно было именно в тот момент.
Ниже я покажу 3 способа, которые растягивают фон на всю ширину экрана.
Способ №1
Первый способ использует чистый CSS3. Все получается благодаря свойству background-size. В моем случаи я буду растягивать картинку на всю ширину экрана, то есть присвою свойства к тегу body. Вы можете применить по надобности к блоку например.
Растягивать на весь экран будем вот эту картинку с милой девушкой
Как растянуть фоновое изображение, чтобы заполнить веб-страницу
Изображения – важная часть привлекательного дизайна сайта. Фоновые изображения могут прибавить визуального интереса странице. 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 растянуть:
Добавьте приведенный ниже код в таблицу стилей:
img#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;}
All your content here – including headers, paragraphs, etc.
Примечание: сейчас пришло время взглянуть на страницу. Изображение должно выглядеть растянутым, но содержимое пропало. Почему? Фоновое изображение 100% в высоту, а раздел содержимого располагается в потоке документа после изображения – большинство браузеров не отобразят его.
#content {
position: relative;
z-index: 1;}
Немногим сайтам необходимо поддерживать IE 7 или 8, а IE6 – еще меньше! Как таковой, этот подход устарел. Я оставляю это как любопытный пример того, насколько было трудно до того, как все браузеры стали работать сообща!
Можно применить похожую технику, чтобы имитировать растянутое фоновое изображение на HTML div background image или другом элементе веб-страницы. Это сложнее, так как нужно либо использовать абсолютное позиционирование.
img#bg {
width: 20em;
height: 30em;}
div#content {
width: 20em;
height: 30em;}
#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» , подготовленной дружной командой проекта Интернет-технологии.ру
