Как сделать круглую наклейку в фотошопе

Обновлено: 02.07.2024

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

Решения для привлечения клиентов

Вам будет интересно

Выделение

Имеющийся в распоряжении файл с нужным графическим элементом открываем в программе Adobe Photoshop. Это приложение по праву позиционируется в сегменте профессионального дизайна, что не означает невозможность использования его в простых целях и не очень подготовленными людьми. Итак…

Активизируем инструмент «Овальная область». Он по умолчанию находится в одной вкладке с прямоугольником (клавиатурное сокращение М).

Зажимаем клавишу shift и от угла до угла формируем круглое выделение. Если требуется овал, делаем его без дополнительной кнопки. При необходимости корректировки положения созданного выделения, действуем стрелками, либо нажатием правой кнопки мыши внутри круга вызываем контекстное меню и выбираем строку «Трансформирование выделенной области».

В меню «Слой» находим позицию «Новый» и выбираем «Скопировать на новый слой». Или применяем клавиатурное сокращение ctrl+J.

В результате в панели слоёв появляется новая позиция – вырезанный в круг логотип.

Теперь здесь же выделяем нижнюю строку с исходным изображением и удаляем её, перетаскивая в корзину.

Оставшийся слой сохраняем в формате png, поддерживающем прозрачность. Теперь его можно использовать для дальнейшей работы.

Обтравочная маска

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

Шаг первый – открываем исходный документ в AdobePhotoshop.
Шаг второй – нажимаем клавиши ctrl и кликаем по иконке создания нового слоя. В панели он появится ниже уровня логотипа.

Шаг третий – на чистом нижнем слое создаём выделение нужной формы и заливаем его белым цветом.
Устанавливаем курсор мыши на границу между двумя слоями, нажимаем клавишу alt (при этом форма курсора превратится в повёрнутую вниз стрелку с небольшим квадратиком справа) и кликаем. В панели слоёв произойдёт изменение.

Теперь в поле видимости остаются лишь те фрагменты логотипа, которые попадают в размер белой заливки маски. Активизируем инструмент «Перемещение» (клавиатурное сокращение V) и ставим эмблему в нужное положение. При этом допускается изменять её размеры и производить вращение.

Обратите внимание, что к белому кругу можно применять растушёвку, стили слоя или другие визуальные эффекты. Завершив редактирование, объединяем слои (ctrl+E) и сохраняем проект в формате png. Круглый логотип на прозрачном фоне готов к дальнейшему использованию.

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

Начнем с основ. Для создания макета можно использовать любую графическую программу. Мы же покажем все на примере Adobe Photoshop и Adobe Illustrator.

Шаг первый. Создание Файла.

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

P.S. ВАЖНО, если вы используете растровую программу, такую как Adobe Photoshop, укажите разрешение в 300 PPI (пиксели/дюйм). Ни больше, ни меньше 300 (без шуток про фермерство пожалуйста)!

Шаг второй. Настройка цветового профиля.

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

Так как мы используем цифровое оборудование, мы принимаем обе цветовые системы: как RGB, так и CMYK. Но это не значит, что можно использовать любой профиль и ждать великолепных результатов. Коротко о каждом:

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

Шаг третий. Изображение.

Упустим момент создания иллюстрации/логотипа/коллажа, так как эта статья не об этом. Но не забываем о простых правилах:

1. Встроить сторонние изображения в файл.

2. Разобрать или растрировать шрифты и оформление (обводки, узоры и тд).

Шаг четвертый. Линии резки.

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

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

Мы накидали несколько основных вариантов резки стикера:

Стикер с белым полем. Классический и самый простой вариант. Отступ от края изображения должен быть не мене 1.5 мм. Иначе велика вероятность того что будет смещение и часть стикера просто зарежется.
Стикер без белого поля. Тут нужно вынести/добавить часть изображения за пределы резки, на случай смещения ножа. Важный момент! Если у вашего стикера есть рамка и вы хотите, чтобы наклейка была вырезана по ней, то рамка должна быть не менее 2-3мм. иначе ее просто зарежет/сместит и результат будет выглядеть не очень опрятно.
Любая другая форма наклейки, по которой нельзя понять, как вы хотите, чтобы она была вырезана. Мы взяли круг (одна из самых популярных категорий стикеров) и разместили наш логотип так, как мы хотели бы его видеть на готовой наклейке.

Шаг пятый. Сохранение файла и отправка в печать.

Мы принимаем к печати почти все основные форматы изображений: .pdf, .ai, .jpg, .jpg, .psd, .eps, .tiff

Но в данном случае используем только: .pdf, .ai и, если макет был сделан в Adobe Photoshop, .psd.

P.S. Мы не примем файлы форматов: .doc, .docx, .ppt, mp4 и др. Также мы не принимаем файлы формата .cdr (так как мы ненавидим не работаем с этой программой)

Далее, загружаем макет на наш и сайт и при необходимости пишем комментарий в соответствующем поле (никакую другую информацию в это поле писать не нужно!).

Результат.

Дожидаемся стикеров из печати и радуемся готовому результату. Ниже можно увидеть макет и готовый стикер.

4 Comments

Спасибо за публикацию, жаль только, что я ее увидела уже ПОСЛЕ отправки макета вам в печать!
И теперь я сомневаюсь, что на выходе получу то, что хочу. Ведь стикеры уже в печати, а выслала я вам обычное фото.

Хорошая, и вроде понятная статья. Сейчас буду применять на практике.

Огромное спасибо! Скажите, а можно рассчитывать, что это соблюдается в онлайн-редакторах? И если да, то во всех или в
каких-то конкретных из этих (ссылки удалены)
Можно ли кому-то из них доверять?

Мы никогда не работали с онлайн-редакторами. Но конечно можно поработать и в них. Хабру доверять точно можно.

Я пытаюсь наложить супер-дизайн этикетки на этикетку банки. Но я устал использовать инструмент деформации, и мне нужно использовать инструменты 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-рендеров стекла.

Читайте также: