Как натянуть этикетку на банку в фотошопе
В этом уроке я покажу вам, как создать реалистичный мокап винной бутылки. Такой мокап пригодится, когда вам нужно продемонстрировать дизайн этикетки для бутылки красного вина, а настоящей стеклянной бутылки пока что не существует.
А благодаря смарт-объектам, который мы создадим в ходе работы, вы в любой момент сможете изменить картинку на этикетке!
Если вы не хотите тратить время, и вам сразу нужен готовый мокап, предлагаю посмотреть премиум-мокап винной бутылки по ссылке (платно). Этот мокап полностью готов к работе, вам всего лишь нужно при помощи пары кликов мышью заменить картинку на этикетке на свою.
1. Удаляем этикетку с бутылки
Шаг 1
Загружаем картинку с бутылкой красного вина с сайта Pixabay и открываем ее в Photoshop CS5 или более поздней версии.
Шаг 2
Для начала жмем Ctrl+J, чтобы дублировать слой. Обратите внимание на панель слоев. В данный момент там находится два слоя с одинаковым содержимым. Оригинальный снимок будет храниться на фоновом слое, а редактировать мы будем копию выше (Слой 1):
Дважды кликаем по названию копии на панели слоев и называем ее «Бутылка».
Шаг 3
Чтобы закончить выделение, возвращаемся к начальной точке и отпускаем кнопку мышки. На самом деле, вам необязательно доводить выделение до начальной точки. Но, если вы это не сделаете, Photoshop автоматически закроет выделение, дорисовав прямую линию от точки, где вы отпустили кнопку мышки, в точку начала выделения.
Шаг 4
В верхнем меню переходим Edit – Fill (Редактирование – Выполнить заливку). В выпадающем меню Contents (Содержание) выбираем Content-Aware (С учетом содержимого) и жмем ОК.
Этикетка исчезла! Photoshop автоматически удалил ее и заполнил пустое место деталями бутылки. Если результат использования заливки Content-Aware (С учетом содержимого) вас не устраивает, отмените последние действия нажатием клавиш Ctrl+Z и запустите процесс снова. Каждый раз у вас будет получаться другой результат. Закончив, не забываем снять выделение командой Select – Deselect (Выделение – Снять выделение) или нажатием клавиш Ctrl+D.
Шаг 5
В верхнем меню переходим Edit – Fill (Редактирование – Выполнить заливку), устанавливаем Contents (Содержимое) на Content-Aware (С учетом содержимого) и жмем ОК.
Нам удалось избавиться от лишнего элемента на горлышке бутылки! Не забываем снять выделение в меню Select – Deselect (Выделение – Снять выделение) или сочетанием клавиш Ctrl+D.
2. Удаляем фон
Шаг 1
Чтобы начать выделение, передвигаем курсор в левый верхний угол бутылки, кликаем левой кнопкой и проводим по тому месту, которое нужно выделить. С перемещением курсора, Photoshop непрерывно анализирует область, сопоставляет цвета, оттенки и текстуры, и пытается понять, что именно мы хотим выделить, чаще всего результат получается четким и качественным.
Если вы обратите внимание на верхнюю панель с параметрами инструмента, то увидите набор дополнительных иконок, которые позволяют переключаться между тремя режимами инструмента выделения (слева направо: новое выделение, добавить к выделению и вычесть из выделения). Параметр добавить к выделению (центральная иконка) уже активирован, поэтому наша следующая задача – продолжить добавление к выделенной области, пока мы не выделим все необходимое:
В конце аккуратно проводим инструментом у краев бутылки, чтобы полностью выделить белый фон:
Шаг 2
Выделив фон, удаляем его командой в главном меню Edit – Cut (Редактирование – Вырезать).
Не забывайте снять выделение командой Select – Deselect (Выделение – Снять выделение) или сочетанием клавиш Ctrl+D.
Чтобы оценить результат работы, не забудьте отключить видимость фонового слоя, кликнув по значку глаза на панели слоев.
Шаг 3
Закончив с удалением фона, займемся доработкой краев бутылки.
3. Создаем новый фон
Шаг 1
Шаг 2
Дважды кликаем по слою с прямоугольником, чтобы открыть окно Layer Style (Стиль слоя). Применяем Gradient Overlay (Наложение градиента), кликнув на соответствующий пункт в левой части окна.
Шаг 3
Жмем на клавиатуре U и добавляем еще один прямоугольник за бутылкой, заполнив весь фон.
Дважды кликаем по слою, чтобы открыть окно Layer Style (Стиль слоя) и добавляем новый эффект Gradient Overlay (Наложение градиента), кликнув на соответствующий пункт в левой части окна.
Выделяем оба созданных слоя, кликаем по ним правой кнопкой мыши и выбираем Group from Layers (Группа из слоев). Называем получившуюся группу «Фон» и жмем ОК.
Шаг 4
Ваш результат должен получиться примерно таким же:
Как вы видите, края бутылки выглядят ужасно. Давайте исправим это. Дважды кликаем по слою с бутылкой.
В открывшемся окне Layer Style (Стиль слоя) добавляем стиль слоя Inner Shadow (Внутренняя тень), как показано ниже:
4. Добавляем тени и отражение
Шаг 1
Хватаем левой кнопкой мышки слой «Бутылка» и перетаскиваем его на кнопку Createnew layer (Создать новый слой) в нижней части панели слоев, отпускаем кнопку, чтобы создать дубликат слоя:
Называем копию «Отражение» и перемещаем ее под бутылку. Кликаем правой кнопкой по слою и выбираем Rasterize Layer Style (Растрировать стиль слоя).
Шаг 2
В верхнем меню переходим Edit – Transform – Flip Vertical (Редактирование – Трансформация – Отразить по вертикали) и размещаем дубликат в нижней части бутылки:
Шаг 3
Теперь переходим Edit – Transform – Wrap (Редактирование – Трансформация – Деформация). Тянем за угловые точки, чтобы подогнать форму отражения под форму нижней части бутылки. Закончив, жмем клавишу Enter, чтобы применить изменения.
Активируем Eraser Tool (E) (Ластик), устанавливаем Size (Размер) на 500 пикселей, Hardness (Жесткость) – на 0% и аккуратно удаляем нижнюю часть отражения.
На панели слоев устанавливаем Opacity (Непрозрачность) на 35%.
Шаг 4
Убедитесь, что на панели слоев слой «Маленькая тень» находится под слоем с бутылкой. Донышко бутылки должно практически полностью перекрывать фигуру, оставив тонкую полоску тени, как показано ниже:
Мы закончили добавление первого слоя тени! Давайте добавим еще дополнительный слой.
Шаг 5
Переходим Filter – Blur – Gaussian Blur (Фильтр – Размытие – Размытие по Гауссу), чтобы добавить эффект размытия. Радиус размытия устанавливаем на 85 пикселей и жмем ОК, чтобы подтвердить изменения. На панели слоев устанавливаем Opacity (Непрозрачность) слоя на 30%.
Теперь панель слоев должна выглядеть вот так:
Выделяем слои «Большая тень», «Маленькая тень» и «Отражение». Чтобы выделить сразу несколько слоев, кликаем по первому и зажимаем клавишу Shift, затем кликаем по последнему слою, чтобы автоматически выделить все слои между первым и последним. Затем кликаем по ним правой кнопкой мыши и выбираем Group from Layers (Группа из слоев). Вводим название «Тень» для группы и жмем ОК.
5. Создаем этикетку
Шаг 1
Создаем новый документ размером 893 х 958 пикселей.
Шаг 2
Открываем изображение с рыбой. В верхнем меню переходим Select – Color Range (Выделение – Цветовой диапазон). Устанавливаем Fuzziness (Разброс) на 200, снимаем галочку с Localized Color Cluster (Локализованные наборы цветов) и жмем ОК.
Шаг 3
Шрифтом Open Sans пишем слово BLACK.
Загружаем и устанавливаем шрифт Berkshire Swash и пишем слово Marvin.
Продолжаем добавлять текст, используя шрифт Open Sans:
Загружаем и устанавливаем шрифт Black Jack, затем добавляем еще текст, как показано ниже:
Новая этикетка готова! Сохраняем этот файл на рабочем столе с именем Этикетка.psd. Позже он нам понадобится.
6. Деформируем этикетку
Шаг 1
Возвращаемся к документу с бутылкой и на панели слоев выбираем слой «Бутылка».
Кликаем правой кнопкой по слою «Этикетка» и выбираем Convert to Smart Object (Преобразовать в смарт-объект). Только что мы создали смарт-объект, который будет содержать картинку для этикетки.
Размещаем прямоугольник на бутылке и в верхнем меню переходим Edit – Transform – Wrap (Редактирование – Трансформация – Деформация) или жмем Ctrl+T, чтобы активировать свободную трансформацию, затем кликаем правой кнопкой по прямоугольнику и выбираем Wrap (Деформация).
На верхней панели параметров устанавливаем режим деформации на Custom (Заказная). Это позволит нам свободно редактировать фигуру и придать ей любую форму.
Чтобы изменить прямоугольник, тянем за опорные точки, любой из отрезков сетки или за внутреннюю часть сетки. Чтобы подкорректировать изгиб сетки, используем специальные направляющие на опорных точках. Принцип работы направляющих очень похож на процесс создания векторной фигуры, например, пером. Постарайтесь придать прямоугольнику такую же форму:
Я пытаюсь наложить супер-дизайн этикетки на этикетку банки. Но я устал использовать инструмент деформации, и мне нужно использовать инструменты 3D фотошопа.
На фотографии уже есть белая этикетка, а мой дизайн этикетки имеет белый фон.
Когда мой дизайн обернут вокруг трехмерного цилиндра для масштабирования, я хочу отключить все эффекты текстуры, тени и световые эффекты, оставив только мою трехмерную визуализированную этикетку. Затем я хочу иметь возможность наложить стиль Multiply слой с 3D-рендерингом, чтобы черная обложка метки идеально отображалась над банкой.
Я часто использую SketchUp, поэтому немного разбираюсь в 3D и знаю, как управлять плоскостью 3D, положением и объектами.
Чего я не могу понять, так это того, как управлять цилиндром для масштабирования и отключения эффектов в режиме Photoshop 3D.
Вот и моя банка с этикеткой.
Затем я измерил высоту этикетки и диаметр банки и рассчитал окружность.
Я создал это изображение этикетки (66 мм x 207 мм) в отдельном документе psd и поместил изображение в свой файл jar как смарт-объект.
Итак, я перехожу к .
Что затем создает эту умную обертку .
Но я не понимаю, откуда берутся размеры цилиндра, я понял, что он будет использовать размеры слоя для создания цилиндра на его основе.
Проблема в том, что если я масштабирую цилиндр вручную, потянув за переключатели, он просто сдавливает мои рисунки .
Итак, квестоны у меня есть .
Как мне контролировать высоту и диаметр цилиндра с помощью целых чисел, чтобы масштаб моего 3D-объекта был точно таким же, как у моей банки.
Как управлять масштабом цилиндра при создании сетки из слоя.
Как отключить все мои 3D-эффекты (тени, освещение и т. Д.).
Заранее благодарим за любые советы.
Решение, которое я нашел, - отредактировать Cylinder_Material.
Следуйте инструкциям ниже.
Предупреждение: я использую устаревшее программное обеспечение. В новом Photoshop явно кое-что исправлено.
Предустановленные 3D-формы, такие как цилиндр, имеют встроенные правила нанесения размеров и сопоставления. У вас очень тонкий контроль над ними. Попробуйте сначала начать с размера изображения = предполагаемой полосы ярлыка, я имею в виду следующее:
Создайте из него новую форму цилиндра. Результат будет растянут по вертикали примерно на 200% из-за внутренних правил определения размеров и отображения:
Вы можете либо вставить пустое пространство, увеличив высоту холста, либо изменить масштаб отображения. Это последний
Вы можете использовать половину этого изображения, чтобы закрыть банку. К сожалению, перспектива изображения, вероятно, сильно отличается от вашей фотографии в банке, поэтому не ожидайте точного совпадения, даже если масштаб окажется хорошим.
Бьюсь об заклад, это все выглядело чушью, и это так. В Photoshop 3D нет подходящих инструментов для моделирования или наложения текстурных изображений. Цилиндр имеет фиксированные пропорции, и вы должны принять его, если хотите его использовать.
Теоретически вы можете создать новое изображение текстуры, начиная с цилиндра, или, что более предпочтительно, импортированную 3D-модель вашей банки в формате OBJ. Но программа Photoshop 3D ничего не знает о многоматериальных 3D-моделях, поэтому модель банки нужно рассматривать только как способ получить правильную этикетку. Изображение этикетки будет также применено к стеклянным и металлическим деталям без какого-либо контроля со стороны пользователя. Это может быть приемлемо для довольно мелких текстур материала, но не для изображений. Пример (красный был добавлен, чтобы можно было заметить, если даже угол стал видимым)
Чтобы сделать это правильно в области надписи, вы должны выполнить некоторые вычисления или иметь невероятную удачу, потому что перспектива должна быть такой же, как на вашей фотографии.
Лучшие предложения:
Перейти к иллюстратору. Там вы можете 3D выдавить дугу, чтобы сделать наклейку на этикетке. 3D не обязательно, вы также можете исказить двухмерную этикетку. Результат можно импортировать в Photoshop с копированием и вставкой. Или вы можете скомпоновать все это в Illustrator.
См. Этот старый случай для справки. Речь шла о свечах:
Создаете реалистичный текст для редактирования?
Вы можете делать деформации в фотошопе, как вы уже знали (и устали). Пример
Белая этикетка с парой серых линий и черным текстом помещается на ваше изображение и перетаскивается до нужного размера (оно было слишком большим).
Его вручную сгибаем в перспективу с помощью Edit> Transform> Warp:
В режиме наложения multiply белый цвет заменяется базовой штриховкой метки:
Тогда что-то, что вы, возможно, не пробовали, потому что устали:
Если вы хотите, чтобы метка оставалась редактируемой, преобразуйте его в смарт-объект перед масштабированием и деформацией. Он может содержать несколько слоев (тексты, рисунки, растровые изображения). Photoshop автоматически создает интеллектуальный фильтр.
Не спрашивают: Вот эталонное изображение того, на что я и многие другие как минимум надеялись, когда начали работать с 3D в Photoshop - возможность легко создавать простые пользовательские 3D-формы и размещать на них изображения с надлежащим контролем.
Как было сказано выше, в Photoshop нет инструментов для моделирования. Но это можно легко сделать с нуля в Illustrator или почти в любой программе 3D-моделирования из-за его элементарной геометрии (= вращающейся формы). Этикетка подходит идеально.
На самом деле это сделано в бесплатной программе 3D CAD начального уровня, и у него есть повышение контрастности в Photoshop, потому что программа CAD плохо контролировала свет. Это не стекло, потому что нет фотореалистичных материалов, только заливки сплошным цветом.
Та же самая 3D-банка была использована выше при попытке сопоставить этикетку с 3D-моделью в Photoshop. Теперь картографирование выполнено в программе 3D. Этикетка была нарисована в Photoshop и наклеена в 3D-программу.
В Illustrator можно было сделать и банку, и этикетку. Но сделать его похожим на стекло не получится с 3D-эффектами Illustrator. Правдоподобный внешний вид стекла требует фотореалистичного 3D-рендеринга, который знает стекло и другие необходимые материалы. Никакое программное обеспечение начального уровня этого не сделает.
Сотни лет художники успешно вставляли стекло в свои картины. Его можно попробовать и в Photoshop без фотореалистичного 3D-рендеринга.
Этот кейс Photoshop: как сделать тень более реалистичной
на самом деле о тенях, но в Photoshop есть прозрачная стеклянная бутылка и несколько высококачественных фотореалистичных 3D-рендеров стекла.
В этом уроке Вы узнаете, как нарисовать фотореалистичную картонную бирку, используя базовые средства Adobe Photoshop CS6.
Сложность урока: Легкий
В этом уроке мы создадим фотореалистичную картонную бирку, используя базовые средства Adobe Photoshop CS6.
Шаг 1
Создайте новый документ в Фотошопе (Ctrl + N) размером 800х800 пикселей.
Шаг 2
Шаг 3
Добавьте якорные точки и закруглите правые углы.
Шаг 4
Шаг 5
Выберите оба слоя и перейдите в меню Слой > Объединить фигуры > Вычесть переднюю фигуру (Layer > Combine Shapes > Subtract Front Shape).
У Вас должна появиться дырка.
Шаг 6
Шаг 7
К бирке примените стиль Отбрасывание тени (Drop Shadow) через иконку fx в нижней части панели слоёв.
Шаг 8
Шаг 9
К пунктирной обводке примените стиль Отбрасывание тени (Drop Shadow).
Шаг 9
Шаг 10
Примените к кольцу следующие стили:
Тиснение (Bevel & Emboss):
Контур (Contour):
Обводка (Stroke):
В результате получится пластмассовое кольцо.
Шаг 11
Шаг 12
К верёвке примените следующие стили:
Тиснение (Bevel & Emboss):
Текстура (Texture):
Отбрасывание тени (Drop Shadow):
Шаг 13
Шаг 14
Шаг 15
Выберите шрифт «Calibri» и напишите цифры.
Шаг 16
Создайте множество вертикальных прямоугольников одинаковой высоты без заливки с чёрной обводкой. Все прямоугольники поместите в одну группу.
Шаг 17
В режиме Свободное трансформирование (Ctrl + T) поверните штрих-код и поместите его в предыдущий прямоугольник.
Есть Модель бутылки в блендере. Обычная пластиковая пивная бутылка на 0,5Л.
И есть 3 этикетки на бутылку. Сделаны отдельными моделями. Этикетки не прямоугольные, с фигурной вырубкой.
Верхняя этикетка, размещается на горлышке бутылки.
Кто хоть раз держал бутылку в руках, понимает.
Так вот, как этикетку "натянуть" на горлышко бутылки. и что бы геометрия этикетки не поехала т.е. размеры её (длинны, высота и т.п.) не поменялись .
Может какой модификатор есть?
П.С. Пробовал копирнуть полигоны горлышка бутылки, натянуть текстуру этикетки+текстуры "высечки". Выходит кривовасто. Сделано через микс-шейдер. Там где белое у текстуры высечки - сделан 100% транспарент. там где черное - текстура этикетки. В общем - результатом недоволен.
Ромка Долгов
Активный участник
Ну если этикетка геометрией - попробуй модификатором Shrinkwrap.
Spirit412
Активный участник
Пробовал. Не выходит. Даже простой прямоугольник натянуть не получается. Разные настройки. Он объект до середины радиуса накладывает, но частичное или полное "охватывание"/оборачивание делать не желает
Берем Круглый объект типа вазы/графина/бутылки. Пытаемся наложить на плоскость прямоугольный плоский объект, который не полностью охватывает окружность (360гр). ну а допустим на 200-260градусов. При этом длинна*ширина объекта после наложения должна сохраниться. У меня этикетка бумажная, она не растягивается.
Ромка Долгов
Активный участник
Должно было получиться. Ну как вариант тогда - выделяешь луп на горлышке бутылки, дублируешь его, выводишь как отдельный объект. Потом ковертируешь полученный луп в кривую. На этикетку кидаешь модификатор Curve и в качестве кривой выбери тот самый луп.А там если что поправь центр твоей этикетки.
Spirit412
Активный участник
Ромка Долгов
Активный участник
Spirit412
Активный участник
Надо что бы объект плотно облегал другой объект (все как выше описано)
Если делать методом выделения полигонов, преобразованием в отдельный объект и на него натягивания текстуры с альфаканалом для фигурной вырубки. При рендере бывает не очень получаются места где альфаканал над полупрозрачной бутылкой.
К этому нужно добавить головняк. с тем что нужно не на глазок выделить полигоны по кругу, а только заданный сектор, т.к. этикетка оборачивает бутылку не на 360градусов.
По поводу Shrinkwrap
Попробуйте прямоугольным плоским объектом "обхватить" цилиндр не на 180градусов, а например на 250. И что бы геометрия прямоугольника сохранилась. Не выйдет т.к. Shrinkwrap натягивает. т.е. растягивает как резинку прямоугольник.
У меня есть макет этикетки и мне надо ее посадить на бутылку, в ФШ я искажаю ее при помощи инструмента Деформация, но получается неровно и этикетка расплывается, теряет качество.
надо чтоб было вот какпотом еще подтянуть можно узлы
Этикетка расплывается либо от того, что ее пиксельный размер намного меньше бутылки и ты растягиваешь ее, как резинку (тут тебе никто не поможет), либо ты не нажал enter после деформации. В режиме деформации качество превьюшное и гадкое.
Неровности - это исключительно зависит от прямоты рук. Я стесняюсь спросить, чем выделялись объекты, но это явно не перо.
Помимо деформации надо еще учитывать форму бутылки, "создав" ее тенями. Это у Андрея Лакиенко пунктик про градиент.
И формообразование вообще никудышнее.
Если порезать бутылку на сечение - получим круги. В перспективе они будут постепенно "разворачиваться", чем больше угол наклона относительно глаз, тем больше развернуто сечение. Бутылка снята немного сверху, поэтому с увеличением расстояния сечение будет больше раскрываться. Нижнее сечение больше видно, чем верхнее, у тебя же с точность до наоборот. В худ. искусстве это назвали бы обратной перспективой, но в данном случае это попросту незнание законов
Читайте также: