В этом уроке мы создадим 3D коробку, используя Photoshop. Это
довольно просто, но результаты могут быть довольно реалистичными и дать
пищу для размышлений перед тем, как вы будете создавать коробки для
ваших собственных продуктов.
Перед началом урока вам понадобится то, что вы поместите на коробку.

Приблизительное время выполнения: 10 минут
Шаг 1
Создавая коробочный дизайн, помните, что вы должны изобразить все
стороны, которые хотите показать. Лучший способ сделать это – создать
по слою для каждой стороны.

Шаг 2
Теперь нам нужно трансформировать фигуру для передней стороны.
Выберите все слои, которые для неё нужны, лучше расположите их группой.
Если там есть какие-то текстовые слои, вам нужно растеризовать (Layer > Rasterize > Type)
Когда у вас будут выбраны все слои, используйте Move Tool (V) и убедитесь, что выбрана опция “Show Transform Controls”.
Зайдите в Edit > Transform > Distort, чтобы начать трансформацию изображения. Выберите верхнюю правую угловую точку контроля и, зажав Shift, тяните вниз. Проделайте то же самое с нижним правым углом, но тяните вверх. Должно выйти как на рисунке внизу.
(Совет: Если вы хотите настроить перспективу так, чтобы верхний и нижний правые углы были одинаковыми, зажмите Ctrl + Alt + Shift, когда перетаскиваете)

Перспектива выглядит немного не такой, если вы сравните переднюю
сторону с той, что на плоском изображении, теперь она выглядит
вытянутой. Чтобы исправить эту иллюзию, нам нужно укоротить переднюю
часть. Зайдите в Edit > Transform > Scale и
выберите средний правый ползунок, чтобы перетащить правую сторону
влево, пока вы не будете довольны результатом. У меня получилось так:

Шаг 3
Закончив переднюю сторону, двигаемся дальше. Используйте тот же
способ, чтобы изменить углы и ширину сторон. Это будет сложно, мой
совет – посмотрите на коробку в реальной жизни и как она выглядит с
разных сторон. Это очень важно в дизайне в общем, сравнивайте с
реальностью, даже если вы создаете что-то нереальное.

Из-за угла, который я выбрал, моя сторона выглядит довольно узкой.
Если вы хотите, чтобы у вас было шире, вам нужно поменять угол обзора,
что отразится на углах передней стороны.
Теперь, когда коробка почти готова, остались лишь финальные штрихи.
Шаг 4
Коробку нужно поместить куда-то, чтобы она выглядела лучше, я сделаю для этого простую вещь. Давайте начнем с фона.
Создайте новый слой и расположите его над фоновым. Выберите нижнюю треть изображения, используя Rectangular Marquee Tool (M). Используя Gradient Tool (G), выберите тип - Radial Gradient.
Отредактируйте градиент, нажав на превью градиента вверху слева и
поставьте цвет слева более светлого оттенка, а справа – прозрачный.
Тащите gradient tool из центра изображения донизу. Попробуйте несколько раз прежде, чем вы будете довольны результатом. У меня вот что вышло:

Шаг 5
Добавив легкий градиент сбоку, мы придадим изображению глубину.
Зажмите Ctrl и кликните на вашем боковом слое,
чтобы загрузить выделенную область. Создайте новый слой и убедитесь,
что у вас всё ещё выбрана сторона. Используйте Gradient Tool, в верхней панели выберите Linear Gradient.
Выберите цвет темнее, чем ваша сторона, и потяните снаружи в сторону
примерно посередине, чтобы создать мягкий градиент. Это должно добавить
коробке ощущения глубины.

Шаг 6
В этом шаге мы создадим отражение коробки.
Продублируйте слои, использованные для коробки. Выберите все продублированные слои и зайдите в Edit > Transform > Flip Vertical. Переместите их так, чтобы верхняя часть перевернутого слоя была внизу коробки, вот так:

Теперь, используя Transform > Skew (каждая сторона книги отдельно), перетащите уголки так, чтобы все стороны выглядели правильно. Снизьте opacity обоих слоев до 50%.

Отражение выглядит хорошо, но нам нужно его сделать более тусклым.
Существует много способов сделать это, использование маски – это один
из них. Я выбрал использовать стиль слоя и применение градиента с
фоновым цветом в качестве одного из цветов, а другой поставил
прозрачным. Измените значение Location % в фоновом цвете, пока вы не обнаружите подходящее значение. Для этого изображения я использовал 65%.

Коробка готова — попробуйте разные углы. Внизу я использовал другой
угол и более светлый фон с более темным фоновым градиентом, чтобы
показать, как можно ещё сделать.

|