Как сделать коробку в фотошопе

Бусинка

Бусинка – сообщество бисерных мастеров

У нас вы можете создать бесплатное портфолио своих бисерных работ, научиться делать украшение с нуля, или задать вопрос об интересующей технике/материале

Создание шаблона для коробочки с помощью Photoshop (приложение к МК по созданию коробочки)

• Мастер-классы
• 15 ноября 2015, 00:28

Я сама себя избаловала — делаю коробочки под каждое украшение подбирая размеры. Поэтому приходится чертить много шаблонов для коробочек с различным соотношением сторон. И вот тут возникла проблема — меня напрягает черчение карандашом пусть и по линейке. Получается долго и всё равно криво.
Я вышла из положения таким образом: для создания шаблонов стала пользоваться программой Photoshop. Расскажу как я это делаю — есть смутная надежда, что кому-то это тоже пригодится)))
Букв и картинок будет много, но делается на самом деле всё просто и быстро, и справится с этим сможет даже новичок.

Итак, открываем Photoshop. Версия не важна. Единственное, не уверена на счёт Portable. А CS2 или CS6, CC2014 — это неважно.

Создаём документ.
На верхней панели выбираем Файл->Создать Или сочетание клавиш Ctrl+N (картинки кликабельны)

Появляется панель с параметрами. Т.к. у нас для печати используется формат А4, то и выбирать будем его. В верхней части появившейся таблички в строчке параметра «Набор» выбираем «Международный формат бумаги».

Жмём «Enter» на клавиатуре

Все параметры меняются с параметров по умолчанию на параметры для формата А4. Жмём ОК
На рабочем пространстве появляется белый лист. Далее нам нужен будет такой инструмент как линейки. Если они есть, хорошо, если нет, жмём на клавиатуре сочетание клавиш Ctrl+R и они появятся.

Далее будем работать с направляющими, по которым мы потом начертим наш шаблон. Их можно просто «доставать» из линейки (горизонтальной или вертикальной), просто зажав левую кнопку мыши на линейке и переместить курсор на лист на нужное место. Но так мы долго будем примеряться. Куда проще задать направляющей координату. Т.к. они бывают вертикальные и горизонтальные, то указать потребуется только один параметр. Итак. Где можно задать параметр для направляющей?
На панели меню (над рабочей поверхностью) выбираем Просмотр->Новая направляющая, попутно обращая внимание на то, чтобы чуть выше пункта «новая направляющая» рядом с пунктом привязка стояла галочка. Если её нет, ставим…

Когда мы нажмём на пункт «Новая направляющая», появится такая табличка:

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

Если хотим вертикальную, в той же табличке ставим точечку напротив «вертикальная»

И получим вертикальную направляющую.

И вот тут очень важный момент — каждый раз выбирать пункт меню Просмотр->Новая направляющая не знаю как вам, а для меня слишком муторно. Ведь нам для создания шаблона потребуется аж 20 направляющих — 10 для крышки и 10 для нижней части коробки. Поэтому мы можем настроить вызов таблички с параметрами направляющей с помощью клавиатурных сокращений. Сделать это надо будет один раз. При следующем запуске Фотошопа это сокращение так же будет работать.
Как его настроить?
Выбираем в меню (над рабочей областью) Редактирование->Клавиатурные сокращения

Во всплывающем окошке находим наш «Просмотр» и нажимаем его

Прокручиваем вниз всплывающий список пока не найдём тот же пункт «Новая направляющая»

Выбираем эту строчку. Правее пункта возникнет пустое окошко. И дальше просто зажимаем на клавиатуре любое удобное нам сочетание клавиш. Если таковое занято под другую функцию, программа скажет вам об этом. Я зажала Ctrl+Shift+/. Вроде бы сложно, но после третьего-четвёртого раза сочетание нажимается уже автоматически.

Итак, теперь табличка с параметрами для направляющей будет вызываться с клавиатуры, и дело пойдёт намного быстрее.
Создаём все необходимые направляющие, не забывая про их ориентацию. И можем начинать чертить сам шаблон. Прелесть в том, что если галочка напротив пункта «Привязка» у нас стоит, то рисуемые нами прямые будут как бы магнититься к направляющим, и при небольшом отклонении мыши не будут сдвигаться. В этом вторая помимо точности прелесть такого способа
Чтобы нарисовать прямую слева на панели инструментов выбираем инструмент «Линия» (если у вас там по умолчанию стоит другая фигура нажатием правой кнопки мыши меняем на линию)
Задаём вверху толщину линии. Заливка левее параметра толщины должна быть чёрной, штрих можно убрать.

Зажимаем левую кнопку мыши в начале линии и ведём до её конца не отпуская кнопки. Отпускаем только в конце. Рисуем так по направляющим все нужные нам линии. Скрыть направляющие, чтобы посмотреть всё ли линии на месте, можно нажатием Ctrl+H.

Тем же сочетанием клавиш возвращаем их назад.

В общем-то всё) Дальше по окончании рисования можно отправлять наши линии на печать нажатием Ctrl+P и рисовать вторую часть коробки.

Маленькое уточнение для тех, у кого принтер лазерный. Лазерники обычно не печатают поля — где-то по пол сантиметра по краям не пропечатываются. Поэтому при печати на превью лучше чуть отодвинуть наши линии от краёв за заштрихованные поля. Они будут двигаться одним рисунком.
Теперь точно всё)

→ BlogGood.ru ←

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Рисование 3d коробки в Photoshop (фотошоп)

В этом уроке мы попробуем нарисовать с нуля 3D коробку (упаковку) для будущего интернет-товара.

○ Шаг 1. Прежде, чем начать работу с 3D коробкой, нужно нарисовать переднюю и боковую часть упаковки.
– Создайте документ размером 600х500 пикселей.
– Создайте переднюю часть коробки размером 352х412 пикселей. Когда вы закончите прорисовку всех тонкостей передней части упаковки, объедините эти слои в один.
– Создайте боковую часть упаковки размером 88х412 пикселей. Когда вы закончите прорисовку всех тонкостей боковой части упаковки, объедините эти слои в один.
– Обязательно передняя и боковая части должны быть на разных слоях так, как на примере снизу.

У вас должно быть 3-и слоя.

Я не буду углубляться, как рисовать в фотошопе, так как моя задача научить вас создавать 3D коробку в фотошопе. Поэтому приступим к следующему шагу.

○ Шаг 2. Вот у меня есть такие две замечательные картинки: передняя и боковая часть упаковки.

Теперь приступим к 3D моделированию коробки.
– Сведите две картинки вместе, но ни в коем случае не объединяйте слои.

– Я буду работать со слоем, где нарисованная передняя коробка. Нажмите на этот слой мышкой (активируйте слой).
– В меню в фотошопе перейдите на “Редактирование” => “Трансформирование” => “Перспектива” и регулировкой выстройте объект.

– Согласен, выглядит немного уродливо, вытянуто и не правдоподобно.
Давайте сделаем следующее.
В меню в фотошопе перейдите на “Редактирование” => “Свободное Трансформирование” или .
Двигайте переднюю часть так, как я показал в примере.

Вот теперь другое дело.

○ Шаг 3. Теперь приступим к боковой части упаковки.
– Нажмите на слой мышкой, где нарисованная боковая часть коробки (активируйте слой).
– В меню в фотошопе перейдите на “Редактирование” => “Трансформирование” => “Перспектива” и регулировкой выстраиваем объект.

– Дальше перейдите на “Редактирование” => “Свободное Трансформирование” или .
Двигайте боковую часть так, как я показал в примере.

Вы можете добавить тень и отражение коробки.
Все, сохраните картинку в любом формате (JEPG, GIF или PNG).

Вот и результат проделанной работы.

С уважением WebMasterok2009

Автор статьи: Степан => автор блога · Опубликовано в 02.04.2013 – Photoshop

Как сделать коробку в фотошопе

Хотите узнать, как можно самим создать реалистичную упаковку продукта (Mockup Box) в Photoshop? Тогда этот урок для вас.

Данный урок был сделан, чтобы помочь моим читателям создать свой собственный макет коробки для продукта. Для начала мы начнем с того, что сделаем форму коробки. Далее, мы добавим некоторые дополнительные элементы конструкции к коробке. И, наконец, мы закончим наш урок добавив тени и блики, чтобы сделать нашу работу более реалистичной. Для этого урока вам понадобится Photoshop CS3 или более новая версия.

Из дополнительных материалов, которые нам потребуются для урока – это парочка бесплатных шрифтов, если же у вас есть свои, то можете использовать их.
Non – Dafont
Antipasto – Dafont

Создание и настройка документа

Давайте начнем создав в Photoshop холст размером 1588×1191 пикселей, затем, изменим цвет фона на #d2d3d5;

Для удобства и обеспечения более аккуратного вида в работе над уроком, нам нужны линейки и сетка. Вы можете получить доступ к вспомогательным линейкам, перейдя в View> Rulers (или нажмите Ctrl + R), а для включения сетки выберите View> Show> Grids (или нажмите Ctrl + ,). Ниже вы можете посмотреть на мои настройки для сетки:

Рисуем коробку

Создайте новую группу и назовите ее «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 (На рисунке ниже я обозначил ее белой линией):

Вот, что должно получится в конечном результате:

А вот еще одна вариация:

У нас все получилось! Не стесняйтесь и пишите в комментариях, если вы столкнулись с проблемами на каких-либо этапах.

Источники:

https://businka.org/MK/2015/11/15/sozdanie-shablona-dlya-korobochki-s-pomoschyu-photoshop-prilozhenie-k-mk-po-sozdaniyu-korobochki.html
https://bloggood.ru/photoshop/risovanie-3d-korobki-v-photoshop-fotoshop.html/
https://photodrum.com/kak-sozdat-mockup-upakovku-v-photoshop/