Как сделать упаковку в фотошопе
Как сделать собственную коробочку в Photoshop
Добрый день, уважаемые жители Ярмарки матеров. Думаю каждый уважающий себя мастер хоть раз задумывался над тем, как лучше преподнести работу покупателю. Изначально я хотела использовать в качестве упаковки пластиковые пакетики, со вложенной визиткой магазина, но вспомнила об одной замечательной статье, где говорилось: «Относись к покупателю так, как хочешь, чтоб к тебе относились в магазинах!» (с) (да простит меня автор за не точную формулировку и память девичью, ибо не помню я имя автора). Тут я поняла, что не хочу получать покупки в прозрачных пластиковых пакетиках, и уж тем более в китайских коробочках. Нужно что-то особенное, отличительное. чтоб покупатель не забыл где он приобрел ту или иную вещь! Чтоб упаковка была универсальной!
Итак, задача сводилась к следующему:
1. Коробочка должна носить отличительные черты
2. Коробочка может быть разноразмерной.
3. На создание коробочки должно уходить минимум времени. (3-5 мин./шт).
Вот тогда и пришла в мою блондинистую голову идея: почему бы не нарисовать и не распечатать нужную коробочку?
Предупреждаю: МК рассчитан прежде всего на тех людей, у кого большие обороты продаж и некогда заниматься коробочками, кто не любит возиться с клеем, множеством бумаги, ленточками и пр. (это про меня). или для тех, кто любит простоту!
Что нам потребуется:
Для начала задачей было определиться с размером коробочки. В МК будет предоставлен размер: 9*8*3 (ширина*высота*глубина). А потом уже определиться с формой. Вот что я предлагаю:
Думаю все встречались с такими коробочками. Суть в том, что их просто собирать.
Укажем правильные размеры нашего холста: вместо пикселей выберем сантиметры, и укажем размеры листа А4:
ширина:21, высота: 29
Вот, имеем чистый лист:
Для облегчения работы откроем вспомогающие линии:
Получается следующее (примерное фото, сетка у всех разная):
ШАГ 2. Вставка фона
Откроем интересующий нас фон коробочки:
Жмем «Открыть» и получаем:
Переходим на наш созданный белый лист, жмем
ШАГ 3. Правильно расположение схем, примочек и пр.
Теперь нам требуется загрузить на нашу картинку-макет коробочки. Повторяем процедуру из шага 2. Как видите, на картинке ниже в правом окне со слоями мы получили 3 слоя: Задний план (основной слой), Слой 1 (слой с фоном коробочки), Слой 2 (Слой со схемой коробочки).
Как видите, схема коробки значительно больше фона. Жмем сочетание клавиш Ctrl+T, уменьшаем картинку под наши размеры, т.е. наводим мышку на уголок с квадратиком и тянем вниз. Для того, чтоб выровнять картинку по центру, просто переводим мышку на серединку, зажимаем левую кнопку мыши и тянем картинку в нужное нам место.
Перетаскиваем картинку в нужное нам место.
Не забывайте про ширину и высоту коробочки.
Далее возвращаемся в окно со слоями. Правой кнопкой мыши жмем по слою со схемой коробочки и выбираем «Создать дубликат слоя»
Поскольку это будет та же коробка, просто назовем его «Слой 2 (копия)«
Располагаем наши коробочки друг под другом.
После этого нам требуется уменьшить прозрачность слоев. Возвращаемся на поле со слоями, жмем на интересующий нас слой (он просто выделится), находим пункт «Заливка» или «Непрозрачность» и уменьшаем любой из этих пунктов примерно на половину, чтоб было видно и фон, и контур коробочки.
Вот так выглядят два полупрозрачных слоя.
Теперь требуется разместить на коробочке ваш логотип и ссылку на сайт. В этом МК я подразумеваю, что логотип у вас в виде картинки. Повторяем предыдущие шаги, загружая логотип и правильно размещая его на коробочке:
Как видите создается новый слой (Слой 3) с вашим логотипом. Дублируем его, размещаем на второй коробочке, аналогично вставляем QR-code вашего магазина (здесь просто черный квадрат) или просто ссылку на магазин (я использую и код и ссылку). Благодаря сетке вы можете более точно и ровно разместить все примочки, которые пожелаете. Размещать логотип нужно внутри этох самых квадратиков, т.е. между линиями сгиба:
Далее возвращаемся к окошку со слоями и убираем глаз со Слоя 2 и Слоя 2 (копия). (просто щелкните по ним мышкой)
Загружаем бумагу в принтер, печатаем получившийся фон с примочками:
Напечатали, порадовались, перевернули лист изнаночной стороной, заправили его в принтер, вернулись к компьютеру.
Теперь убираем глаза со всех слоем, и возвращаем глаза нашим Слою 2 и Слою 2 (копия). В общем, должны остаться только схемы. Возвращаем им должный цвет (помните про заливку и прозрачность) и печатаем саму схему:
А теперь вырежем и соберем нашу коробочку. Предлагаю небольшую схемку, найденную в интернете. Думаю многие из вас знают о такой схеме:
Фото готовой коробочки:
Сторону с QR-codom и ссылку не показываю намеренно, ибо правила запрещают это делать.
Плюсы такой электронной схемы:
Минусы такой коробочки:
-Во-первых, возможно такая коробочка не понравится ценителям прекрасного, которые крайне хлопотно относятся к оформлению.
-Во-вторых, некоторым может не понравится, что на начальной стадии изготовления коробочки придется серьезно потрудиться.
— В-третьих. Я не знаю что может быть в-третьих, ибо меня все устраивает в этом варианте. Буду благодарна, если вы напишете еще какие-то минусы такого способа.
Создание упаковки с изображением в Photoshop
Теперь попробуйте сами
1. Скачайте материалы к уроку и откройте файл 3d-model-wrapping.psd в Photoshop.
Оформление продукта
2. Выбрав слой под названием Packaging graphic, перейдите к 3D > Новая сетка из слоя > Стиль сетки > Газированная вода, чтобы разместить на 3D-упаковке изображение. Photoshop спросит, хотите ли вы переключиться в трехмерное рабочее пространство. Нажмите Да, чтобы продолжить.
3. Переключитесь с панели слоев в 3D. Если панель 3D не отображается, выберите Окно > 3D.
4. Установите для сцены Текущий вид на панели 3D.
5. Выберите Переместить 3D-камеру по дуге на верхней панели. Курсор примет вид миниатюрной орбиты, с помощью которой вы сможете вращать трехмерную модель. Теперь можно вращать экран в разных направлениях, чтобы изменить вид банки в пространстве. Выберите вид, при котором частично видны верхняя часть банки и отбрасываемая ею тень.
6. Теперь поверните банку так, чтобы этикетка была обращена на зрителя. Для этого нажмите на банку, чтобы отобразить ось 3D. Наведите курсор на красный маркер оси y, так чтобы отобразился желтый круг.
7. Вращайте банку перетаскиванием до тех пор, пока этикетка не окажется посередине.
Применение реалистичного материала
8. В качестве финального штриха на макете можно настроить параметры материала банки. Выберите Label_Material в категории Газированная вода на панели 3D и настройте свойства на панели выше. Установите Свечение на 9%, а Металлические свойства — на 16%.
9. Нажмите на значок трехмерного куба в нижней части панели 3D для рендеринга макета. Рендеринг может занять некоторое время — в зависимости от мощности компьютера. После завершения рендеринга можно сохранить макет.
Вот и всё! Теперь ваша очередь. Разместите 2D-изображение на 3D-макете продукта в Photoshop. Скачайте наши материалы или используйте собственные. Опубликуйте готовую работу в Facebook, Twitter или Instagram с хештегом #MadewithPhotoshop. Получайте отзывы и общайтесь с другими творческими людьми.
Дизайн упаковки для продукции
Прототипирование имеет важное значение, когда дело доходит до проектирования. Благодаря таким программам, как Blender, Photoshop и множество подобных программ можно спроектировать весьма детальные, легко редактируемые концепции дизайна без дополнительных затрат и обязательств, возникающих при создании материальных моделей.
Прототипирование дизайна упаковки не только позволяет исследовать различные возможности дизайна, но и получить обратную связь на начальном этапе проектирования. Это хороший способ, чтобы определить лучший бренд и дизайн для своей продукции.
В этом уроке я покажу вам, как создать упаковку для продукции в Photoshop, используя основные инструменты и методы.
Программное обеспечение таких программ, как Cinema 4D или Blender используется как для создания каркасных и 3D моделей упаковок, так и для создания оболочки или этикетки продукта. Я покажу вам как такую же 3D модель можно создать в Photoshop.
Откройте Photoshop и создайте новый холст размером 1000х700 пикселей и нажмите OK.
Установите цвета переднего плана и фонового белый и чёрный соответственно. Выберите инструмент Градиент (G), тип Radial (Радиальный) и создайте градиент, как показано ниже. Для этого слоя задайте уровень непрозрачности до 25%.
Выберите серый цвет и инструментом Прямоугольник (U) создайте прямоугольную форму. Мы создали переднюю сторону для упаковки.
Продублируйте этот слой и передвиньте копию в правую сторону при помощи стрелочки на клавиатуре, чтобы полученные две формы находились на одном уровне. Вторая форма послужит нам боковой стороной для упаковки. Заполните её серым цветом, на несколько тонов темнее передней стороны.
Вызовите команду свободное трансформирование Ctrl + T, затем нажмите клик правой кнопкой мыши на холсте и из меню выберите Distort (Исказить). Исказите вторую форму, чтобы создать боковую сторону для упаковки. Опирайтесь на изображение ниже.
Создайте ещё один прямоугольник равный одной четвёртой высоты передней стороны упаковки. Измените его цвет на несколько тонов темнее и поместите выше передней стороны. Мы создали верхнюю переднюю часть для упаковки. Убедитесь, что ширина верхней части такая же, как и у передней стороны упаковки.
Слой с верхней передней частью продублируйте и поместите чуть дальше. Для копии цвет измените на несколько тонов темнее. Мы создали верхнюю заднюю часть для упаковки. Смотрите изображение ниже.
При помощи команды искажения исказите верхнюю переднюю часть упаковки, переместив верхние маркеры друг к другу.
Повторите те же действия и для верхней задней части упаковки. Совместите две вершины, как при создании крыши дома.
Теперь нам нужно создать верхнюю боковую часть. Создайте маленький треугольник, установив цвет на несколько тонов темнее. Опирайтесь на изображение ниже.
Основа для упаковки готова, теперь переходим к дизайну обёртки.
Используя цвет #8bdadd, я создал шаблон для обёртки. Для передней и боковой сторон упаковки я создал общую форму, а затем создал отдельно верхнюю часть, размеры этих форм должны соответствовать основе упаковки. Для ясности смотрите изображение ниже.
Установите цвет переднего плана #8bdadd и фоновый #8c8c8c. Откройте окно стилей слоя, выберите Наложение градиента, когда вы откроете редактор градиентов, то увидите в наборах градиент с выбранными вами цветами.
Для передней и боковой сторон (общая форма) установите такие настройки:
Для верхней части установите такие параметры:
Возьмите инструмент Овальная область (M) и создайте выделение в виде эллипса на левой стороне общей формы. К созданному выделению добавьте обводку шириной 10 пикселей, белого цвета.
Добавьте прямоугольные полоски на общую форму передней и боковой сторон, для ясности смотрите изображение ниже.
Проявите свою фантазию и создайте логотип внутри эллипса. Я создал силуэт деревни.
И в завершении создания дизайна обёртки я добавил дополнительные элементы. Вот мой результат:
Пришло время обернуть основу упаковки созданной обёрткой. От общей формы выделите часть обёртки для передней стороны.
Переместите её на переднюю сторону основы упаковки. Смотрите изображение ниже.
Переместите вторую часть обёртки на боковую сторону упаковки и при помощи искажения подгоните её к основе упаковки. Для удобства уменьшите непрозрачность обёртки.
Таким образом оберните всю упаковку. После этого вы можете удалить слои с основой упаковки.
Теперь создадим откидную часть в верху упаковки. В этих целях я использовал инструмент Лассо (L), чтобы создать форму, как показано ниже.
Откидную часть заполните белым цветом и для реалистичности добавьте тени.
И в завершающем шаге нам осталось добавить тени для всей упаковки. На изображении ниже созданную в этом шаге упаковку я представил в двух цветовых вариациях.
Как сделать упаковку в фотошопе
Хотите узнать, как можно самим создать реалистичную упаковку продукта (Mockup Box) в Photoshop? Тогда этот урок для вас.
Данный урок был сделан, чтобы помочь моим читателям создать свой собственный макет коробки для продукта. Для начала мы начнем с того, что сделаем форму коробки. Далее, мы добавим некоторые дополнительные элементы конструкции к коробке. И, наконец, мы закончим наш урок добавив тени и блики, чтобы сделать нашу работу более реалистичной. Для этого урока вам понадобится Photoshop CS3 или более новая версия.
Из дополнительных материалов, которые нам потребуются для урока – это парочка бесплатных шрифтов, если же у вас есть свои, то можете использовать их.
Non – Dafont
Antipasto – Dafont
Создание и настройка документа
Давайте начнем создав в Photoshop холст размером 1588×1191 пикселей, затем, изменим цвет фона на #d2d3d5;
Рисуем коробку
Создайте новую группу и назовите ее “Right Side / Правая сторона”. Создайте в этой группе новый слой и назовите его как “Right Side / Правая сторона”, а также, используя инструмент Rectangular Marquee Tool, создайте выделенный диапазон 795×1078 пикселей. После того, как вы это сделали – залейте выделенную область любым цветом. Я сделал его белым (#ffffff).
Затем, переведите этот слой в смарт-объект (сделать это можно щелкнув правой кнопкой мыши на слой и выбрав “Make A Smart Object“). Это позволит нам вносить изменения в слой без необратимой деградации.
Создать еще одну группу, но на этот раз назовите ее “Left Side / Левая сторона”. Создайте новый слой с таким же именем (Left Side). Так же, как мы делали ранее, нужно сделать выделение области и заливку любым цветом. На этот раз сделайте выделенную область размером приблизительно 483×1078 пикселей. Преобразуйте слой в смарт-объект.
Перед тем как приступить к непосредственному дизайну, давайте настроим слои и приведем их в 3D вид. И начнем мы с правой стороны коробки. Выберите этот слой и нажмите Ctrl + T, нам необходимо немного уменьшить этот слой (примерно на 75%). Убедитесь, что вы не забыли нажать на иконку цепочки, чтобы сохранить пропорции объекта. Затем перейдите к Edit> Transform> Perspective и трансформировать его так, как показано на картинке ниже: (изменяя положение узлов правой стороны):
Нажав Ctrl + T, и удерживая клавишу Ctrl вы будете изменять положение только выделенного узла.
Что касается левой части коробки, то мы сделаем следующее: Во-первых, уменьшаем слой на 75%. Удерживая клавишу Ctrl – трансформируйте его так, чтобы он стал выглядит как 3D. У вас должно получится что-то вроде этого:
Создаем оформление коробки
Теперь, когда сделана форма коробки, мы наконец можем начать делать дизайн. Начнем с правой стороны коробки. Выберите слой и дважды щелкните мышью на смарт-объекте в панели слоев, чтобы открыть его в новом документе и начать редактировать. В этой части урока, вы можете создать свой собственный дизайн или следовать за мной.
Для своего дизайна я сделал небесно-синюю цветовую схему. Так что если вы хотите сделать как у меня – измените цвет фона на #e1ebe4. После того мы создали задний план, давайте продолжим, и сделаем заголовок (размещенный сверху и по центру). Я использовал для этого следующие шрифты и настройки (цвет #1f1f20):
Чтобы не было слишком скучно я решил добавить больше деталей и вставил символ “галка” (#009a81). А также символ зарегистрированного товарного знака, используя Custom Shape Tool.
Затем, я добавил текст под заголовком, используя Paragraph Tool. Я использовал следующие параметры:
Закончим, добавив еще один текстовый блок внизу по-центру.
После того, как вы сделали свой дизайн и сохранили его, то можно закрыть этот документ. Вы увидите, что дизайн, который вы только что сделали – появится в нашем оригинальном документе с коробкой.
Теперь давайте продолжим с левой частью. Так же, как и прежде, выберите и дважды щелкните значок смарт-объекта в панели слоев, чтобы открыть его, а затем создайте для него свой дизайн. Для тех, кто решил последовать за моим уроком до конца – измените цвет фона на #a5dfda, а затем просто скопируйте и поместите название и описание, которые мы делали на правой части коробки, но с одним только изменением – поверните текст на 90 градусов (как показано на картинке ниже). Изменение цвета символа “галки” на белый и добавьте еще два дополнительных символа (все символы, которые я здесь использовал, можно найти во вкладке Custom Shape Tool).
Затем так же, как и прежде, добавьте произвольный текст в нижней части.
После того, как вы будете довольны вашим дизайном, сохраните его и закройте документ с редактируемым слоем. Вот, что у нас должно получится на текущем этапе:
Дополнительные детали
Теперь, когда мы закончили с основным дизайном, мы будем придавать картинке реалистичность – добавляя тени.
Давайте начнем этот этап с создания новой группы и на этот раз назовем ее “Shadows / Тени”. В этой группе создайте новый слой и назовите его “Back”. Продолжим, сделайте выбор, размер которого должен быть примерно как наша коробка, и залейте его черным цветом. После того, как вы сделали это, удерживая клавишу Ctrl, сделаем его искажение, как показано ниже. После, сделайте размытие слоя с помощью фильтра Gaussian Blur, затем, измените режим смешивания этого слоя с тенью на Soft Light.
Создайте новый слой и назовите его “Bottom“. Измените цвет переднего плана на #000000, и с помощью инструмента кисти (относительно большого размера, и твердости 0%), случайным образом сделайте несколько мазков в нижней части окна, затем измените режим смешивания на Soft Light и измените непрозрачность слоя до 85%.
Создайте новый слой и на этот раз назовите его “Light“. Изменение цвета фона на #ffffff. Сделайте размер кисти немного больше и сделайте три мазка в центре коробки. Измените режим смешивания слоя на Soft Light.
Создайте новый слой и назовите его “Bottom 2“. Затем выберите инструмент кисть и измените для его настройки следующим образом:
Выберите инструмент Pen Tool и сделайте путь вдоль нижней части коробки, которая соприкасается с полом, а затем нажмите правой кнопкой мыши и выберите Stroke Path. Убедитесь, что у вас выставлена галочка рядом с настройкой Stimulate Preassure. Далее, измените непрозрачность и заполнение (Opacasity / Fill) соответственно до 50% и 55%.
Откройте группу “Right Side” и создайте два новых слоя и назовите их “Shadows / Тени” и “Shadows 2 / Тени 2”. Сделайте эти оба слоя маскированными по базовому (Ctrl+Alt+G). Используйте мягкую кисть с твердостью 0% и установив режим смешивания для обоих слоев на Soft Light. На первом слое “Shadows” нарисуйте большую форму “U” по краям коробки. На втором слое “Shadows 2”, используя ту же самую кисть, но с небольшой непрозрачностью, сделайте несколько мазков вокруг текста, чтобы придать ему больше глубины.
Создайте два новых слоя и назовите их “details:shadows / детали:тени” и “details:highlights / детали:свет».
Повторите два последних шага для левой части коробки.
Создайте новую группу и назовите ее “Details / Детали”. Далее, создайте новый слой и назовите его “Left Flap / Левый клапан”. Используя инструмент Pen Tool, вам нужно создать фигуру похожую на треугольник, но плоской формы и со сглаженным верхним углом. Затем щелкните правой кнопкой мыши и залейте его # 767676 цветом. Затем, добавьте внутреннюю тень (Inner Shadow):
А также добавьте внутреннего свечения (Inner Glow):
Создайте новый слой и назовите его “Shadow / Тень”. Повторим сделанные ранее манипуляции, но с немного большим размером кисти (размер 4-6px), нарисуйте линию вдоль грани, которая разделяет левую и правую часть коробки (разместите ее чуть правее). Затем, немного размойте ее с помощью Gaussian Blur и измените режим смешивания на Soft Light (на рисунке ниже она изображена красной линией):
Повторите предыдущий шаг, но на этот раз назовите слой “Highlights” и используйте цвет #ffffff. Сместите этот слой немного левее (как на изображении ниже синяя линия):
Создайте еще один слой и назовите его “Line / Линия”, и используя инструмент Line Tool проведите линию (примерно 2-3px и цветом #000000) между нарисованными ранее линиями. Измените ее режим смешивания на Soft Light (На рисунке ниже я обозначил ее белой линией):
Вот, что должно получится в конечном результате:
А вот еще одна вариация:
У нас все получилось! Не стесняйтесь и пишите в комментариях, если вы столкнулись с проблемами на каких-либо этапах.