Дизайн 3D-коробки для ПО » Уроки Photoshop CS2 :: Уроки фотошопа :: Уроки adobe photoshop :: Регулярные пополнения базы уроков

Важно! Создание прибыльных веб сайтов и поисковое продвижение сайтов в Москве: веб-компания StudioForYou!

Дизайн 3D-коробки для ПО

21.10.2008Категория урока: Веб-графика

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

Перед началом урока вам понадобится то, что вы поместите на коробку.

designing-a-software-box6_3.jpg

Приблизительное время выполнения: 10 минут

Шаг 1

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

designing-a-software-box1.jpg

Шаг 2

Теперь нам нужно трансформировать фигуру для передней стороны. Выберите все слои, которые для неё нужны, лучше расположите их группой. Если там есть какие-то текстовые слои, вам нужно растеризовать (Layer > Rasterize > Type)

Когда у вас будут выбраны все слои, используйте Move Tool (V) и убедитесь, что выбрана опция “Show Transform Controls”.

Зайдите в Edit > Transform > Distort, чтобы начать трансформацию изображения. Выберите верхнюю правую угловую точку контроля и, зажав Shift, тяните вниз. Проделайте то же самое с нижним правым углом, но тяните вверх. Должно выйти как на рисунке внизу.

(Совет: Если вы хотите настроить перспективу так, чтобы верхний и нижний правые углы были одинаковыми, зажмите Ctrl + Alt + Shift, когда перетаскиваете)

designing-a-software-box2_1.jpg

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

designing-a-software-box2_2.jpg

Шаг 3

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

designing-a-software-box3.jpg

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

Теперь, когда коробка почти готова, остались лишь финальные штрихи.

Шаг 4

Коробку нужно поместить куда-то, чтобы она выглядела лучше, я сделаю для этого простую вещь. Давайте начнем с фона.

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

designing-a-software-box4.jpg

Шаг 5

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

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

designing-a-software-box5.jpg

Шаг 6

В этом шаге мы создадим отражение коробки.

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

designing-a-software-box6_1.jpg

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

designing-a-software-box6_2.jpg

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

designing-a-software-box6_3.jpg

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

designing-a-software-box6_4.jpg

Источник: http://www.tutorial9.net/photoshop/designing-a-software-box/

Популярность: 53%

+news2.ru +ВааУ.ru +newsland.ru +СМИ2.ru +del.icio.us +bobrdobr.ru +memori.ru +RUmarkz +Mister Wong +Мое Место

Похожие уроки photoshop:


ВНИМАНИЕ! Столкнулись с трудностями при выполнении данного урока? Осталось что-то, что Вам непонятно? Забыли основы работы в Adobe Photoshop? Не расстраивайтесь! Решение всех Ваших проблем находится прямо здесь: "Начальный Курс Photoshop!" - Это Бесплатный Мультимедиа-Курс от Авторов Данного Сайта, пройдя который Вы сможете назвать себя мастером качественной работы в известнейшем графическом редакторе! Узнать о курсе подробнее, а также подписаться на него можно, перейдя на страницу курса: Начальный Курс Photoshop! Подпишитесь и пусть все завидуют тому, как легко и быстро Вы создаете шедевры в Adobe Photoshop! Ждем Вас!




22 комментария(-ев) к уроку “Дизайн 3D-коробки для ПО”

  1. Ну все вроде бы как и не сложно и просто, но есть же готовое ПО которому даешь скрин и на выходе получаешь объемную каробку, благодоря этой проге экономиться куча времени.

    Александр

  2. Александр, там, на мой взгляд, не очень интересно получается.
    А тут - полный полет фантазиии (при ее наличии, разумеется)

    Fiesta

  3. А можно пример такой программы, ато с фотошопом не так быстро выходит, может спец программки облегчат работу.

    Анна

  4. Да согласен другая программа не сможет сделать это как фотошоп:)урок очень полезен спасибо за перевод

    Los Maniacos

  5. Собственно, я так все и делаю.
    На последней картинке отражение неправильно сделано. Так как взгляд на книгу сверху идет, и книга как бы сужается, то и отражение будет сужаться. Нижняя его часть будет уже верхней.

    Коллекционер бизнес-идей

  6. Согласен с Коллекционером :) Отражение странно как то смотрится

    Alexander

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

    ЗЫ. Урок класный!

    Nataly

  8. За исключением отражения всё классно смотрится. Вот только проще воспользоваться готовыми программами.

    Омский студент

  9. Xara Xtreme Pro 4

  10. Нельзя попроще :?: Шаг 2 - тяните вниз - сколько тянуть и куда :?: :twisted:
    Я делаю коробочки так:
    Создаешь два слоя, верхний слой заливаешь белым потом идёшь в Фильтр > Рендеринг > 3D Трансформирование. Конструрируешь там коробку, нажимаешь параметры, снимаешь галочку с background color, потом жмёшь ок. Перед вами коробочка которую осталось напихать изображениями(любого размера).Чтобы точно вставить картинку нужно перейти в Редактирование > Трансформирование > Масшатбирование (для того чтобы картинку подогнать к размеру коробки) и Редактирование > Трансформирование > Наклон чтобы загнать картинку точно в углы

    Андрей

  11. а не легче вобще найти и скачать экшен!

    константин

  12. 2Константин
    Так экшн Вам будет создавать каждый раз одинаковые коробочки, а тут Вы сами можете ее повернуть/наклонить в любую сторону, что намного интереснее.

    З.Ы. Выполнил за 7 минут :cool:

    Михаил

  13. Новых уроков побольше бы.

    FosFer

  14. Коробка вышла похоже. С отражением, что то не то.

    ephoto

  15. также существует хороший trity? котрый урезает много гемороя

    System of a Down

  16. гМ! а у меня получилось все! :) Спасибо!

    Алекс

  17. Хороший урок, придется программное обеспечение разрабатывать :)

    сонник

  18. Супер, очень профессиональная коробка, я бы пожалуй купил :))

    недвижимость

  19. Красивая коробка получилась. Спасибо за материал.

    недвижимость Запорожье

  20. ооо.. мне пригодилась на сайте данная статья

    лечение заболеваний уха, горла, нос

  21. Туториал неплохой, ток мне кажется, что целесообразнее использовать специально созданное для этих целей ПО, там и возможностей больше, и конечный результат получается быстрее! :wink:

    kitlo

  22. Можно конечно и так, но проще воспользоваться экшеном. Экономия времени однозначно.

    Grand

Прокомментировать урок

 


Rambler's Top100