Бесплатный
графический редактор


Сайт Родителям о детях








Система Orphus



Создаем 3D-коробочку

Автор: Андрей Пожарко

Добавлено: 2009-02-07


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

Как правило процесс создания коробочек состоит из следующих этапов:

  • подготовка исходного изображения
  • разрезание изображения на несколько частей, которые в последствии станут гранями нашей коробочки
  • объединение нарезанных заготовок в готовую коробочку
  • придание большей реалистичности сглаживанием очень острых углов, добавлением тени

Сейчас же мы не будем тратить много времени на предварительную подготовку изображение, а возьмем уже заранее подготовленную картинку и сосредоточимся на главном - на самом процессе превращения плоской картинки в 3D-изображение. Думаю, проделав один раз эту операцию, вы поймете все тонкости предложенного способа, и сможете сами понять в чем состоит суть предварительной подготовки.

Итак начнем с того, что откроем подготовленное мной заранее изображение развертки будущей коробочки.

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

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

Установка направляющих

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

Чтобы наша коробочка смотрелась более реалистично, давайте чуть затеним ее нижнюю часть. Для этого создадим новый слой (Shift+Ctrl+N) и назовем его например shadow.

В списке слоев наш новый слой перетянем поверх слоя с картинкой, если он вдруг окажется внизу, и зададим ему Непрозрачность около 40% и Режим наложения - Умножение.

Теперь выделим нижнюю часть картинки прямоугольным выделением  (R), как показано тут:

и зальем ее градиентом  (L) снизу вверх от нижней границы выделения до верхней. Тип градиента выберем От черного к прозрачному.

Должно  получиться как показано на картинке:

Тень снизу создали, переходим к тени на ребрах коробки. Дело в том, что если с ребрами ничего не сделать заранее, при стыковке граней они будут выглядеть очень острыми и не реалистичными. Чтобы этого избежать, мы проделаем несложную операцию. Добавим еще один слой (Shift+Ctrl+N) и также зададим ему Режим наложения - Умножение, а Непрозрачность - 50%.

Теперь, правее от вертикальной направляющей, выделим небольшую часть будущей передней грани коробочки. Ширину выделения мы поставили 8 пикселей. Ее можно установить "на глаз", а потом подправить значение в свойствах выделения.

Заливаем наше выделение тем же градиентом слева на право.

Должно получиться как здесь:

Проделаем то же самое около горизонтальной направляющей. На этот раз можно не создавать новый слой, а работать с тем же слоем.

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

Итак оставаясь на том же слое выделяем верхнюю часть.

Далее нужно выбрать инструмент Эллиптическое выделение  (E) и в настройках выделения выбрать Режим добавления - пересечение или же просто при выделении удерживать клавиши Shift+Ctrl.

Теперь не снимая предыдущего выделения нужно выделить вот эту часть изображения.

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

Полученное выделение зальем инструментом Плоская заливка  (Shift+B) каким-нибудь серым цветом, чтобы получилось где-то как на рисунке.

 

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

Хоть это может показаться странным, но для того того чтобы приступить к сборке коробочки, мы сначала разрежем картинку на три отдельных части: Перед, Верх, Бок. Это можно сделать разными способами, я же выбрал простейший. Выделяем верхнюю часть и вырезаем через меню Правка - Вырезать  или клавишами Ctrl+X.

Затем вставляем через меню Правка - Вставить как - Новый слой и перемещаем на свое место.

То же самое проделаем с боковой и передней гранями.

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

Переходим в меню Фильтры - Карта - Проекция объекта. Тут на самой первой вкладке Параметры нужно сразу выбрать Проекция на - Параллелепипед. Далее переходим на последнюю вкладку и начнем разбираться с нее. Выставим для для каждой грани соответствующий слой с заготовкой, как показано на рисунке. Ниже нужно изменить значение масштаба проекции на указанные на рисунке значения, иначе получим коробочку в форме куба, потому что по умолчанию, вопреки названию Параллелепипед, изображения проецируются на поверхность куба. Хотя некоторые математики могут тут со мной поспорить smile.

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

Далее переходим на предпоследнюю вкладку Ориентация, выставляем соответствующие значения и снова нажимаем Просмотреть.

На следующей вкладке Материал я практически ничего не менял, привожу на всякий случай значения. На данном этапе эти значения не играют важной роли. В будущем сможете с ними поэкспериментировать.

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

Вот снова мы добрались до первой вкладки Параметры. На ней я также поставил галочку напротив параметра Прозрачный фон, т.к. при белом фоне в готовой картинке иногда проглядываются белые лини между гранями. Также я включил сглаживание, но Глубину его поставил на минимум, т.к. от этого параметра очень зависит скорость обработки. Для наших целей вполне хватит и этих значений. Еще раз нажимаем Просмотреть и если нам все нравится - нажимаем ОК и немного подождем. Если на последнем этапе вы поставили большое значение для сглаживания, то у вас еще и будет достаточно времени подумать над производительностью вашего компьютера smile .

И вот оно! Долгожданное чудо, в котором мы сразу заметим некоторые недостатки и постараемся от них избавится. Мне, например, бросились в глаза очень острые углы коробки. Не долго думая возьмем какой-нибудь Ластик  (Shift+E) и чуть сгладим углы.

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

Создаем новый слой shadow с прозрачным фоном для тени под коробочкой, ну и поместим его соответственно под слой с коробочкой.

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

Вернемся на слой shadow и начнем рисовать контуры будущей тени инструментом Свободное выделение  (F) приблизительно как показано здесь:

Замкнув контур выбираем все тот же Градиент (L) и заливаем им выделение как показано тут:

Должно получиться так:

Для слоя с тенью подберем Непрозрачность на уровне 60%.

Далее размываем тень, для этого отменяем выделение (Shift+Ctrl+A) и идем в меню Фильтры - Размывание - Гауссово размывание и поставим величину размывания около 20.

И вот он готовый результат!

 

 

 

 

Просмотров: 25752




 

 

Ваши комментарии     



Любкинс       11.02.2009 - 11:28       Ссылка      

Оригинальная идея распространения мух, автору респект! Спасибо за урок, настроение приподнялось. Немного смущает тень, так ли она должна выглядеть, но не суть.


Андрей Пожарко       11.02.2009 - 11:36       Ссылка      

Мне тоже тень не очень нравится. Пока не придумал простого способа изобразить реалистичную тень. Если кто-то покажет такой способ буду использовать с указанием на автора идеи wink


Любкинс       11.02.2009 - 12:35       Ссылка      

Можно поиграть в Фильтры - Свет и тень - Перспектива, меняя параметры.


Рустем       17.02.2009 - 11:58       Ссылка      

Зацените


Рустем       17.02.2009 - 11:59       Ссылка      

Вообще не знал, что такое Gimp, вот показали ваш сайт, очень очень доволен, это плод вашего сайта!!!!


Рустем       17.02.2009 - 12:15       Ссылка      

А нельзя ли несколько уроков про текст, в смысле я даже не смог его искривить (((( Спасибо....


Андрей Пожарко       17.02.2009 - 14:52       Ссылка      

Ничего себе, коктейль из уроков! smile Несколько уроков про текст поставил в очередь.


ingvar       17.02.2009 - 18:49       Ссылка      

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


Андрей Пожарко       17.02.2009 - 19:00       Ссылка      

Если ставить большое значение для сглаживания, то "сборка" будет идти очень долго, можно подумать что завис GIMP. Но в окне с изображением внизу виден прогресс выполнения операции, и должны быть движения. У меня зависаний не наблюдалось, но бывало на долго задумывался GIMP, тогда я просто прерывал операцию и уменьшал сглаживание.


ingvar       17.02.2009 - 21:59       Ссылка      

Спасибо, я этого не знал. И еще я не мог понять, как Вы с помощью лассо делали прямолинейные выделения. У меня рука дрожала smile и я просто создал контур и перевел его в выделение.


Владимир       06.03.2009 - 10:33       Ссылка      

Интересный урок. Надо попробовать


Юра       10.03.2009 - 15:17       Ссылка      

Спасибо за урок.Я расширил свои слабенькие познания GIMP и уважаю его еще больше!!!


Андрей Пожарко       10.03.2009 - 17:21       Ссылка      

Юра, оставляйте и свои работы тут. Интересно посмотреть, как у вас получается.


Softwayer       29.03.2009 - 10:04       Ссылка      

У меня коробочка почему-то получается сплюснутая, 80 пикселей в высоту sad. В чем тут дело?


Андрей Пожарко       29.03.2009 - 10:09       Ссылка      

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


екатерина       05.04.2009 - 02:54       Ссылка      

у меня тоже пока не получилось))но я стараюсь))


екатерина       05.04.2009 - 03:40       Ссылка      

уура!!!!! у мну получилось))спасибо автору.АГРОМНОЕ


ekaterina       06.04.2009 - 05:46       Ссылка      

vot)))


Андрей Пожарко       06.04.2009 - 08:40       Ссылка      

Тень получилась не хай-фай, но коробочка очень красивая smile


Андрей       09.04.2009 - 22:38       Ссылка      

вот моя smile


Андрей Пожарко       09.04.2009 - 23:22       Ссылка      

Здорово!Особенно +Аттестат в подарок big_smile


Андрей       10.04.2009 - 00:07       Ссылка      

Спасибо. Твои уроки просто супер! Интересно, только у меня, когда изменяешь масштаб коробки в превьюшке выглядит совсем по другому чем конечный результат?


Андрей Пожарко       10.04.2009 - 00:14       Ссылка      

Гм. Я такого не наблюдал.


Юра       04.06.2009 - 20:39       Ссылка      

Я знаю,почему у Softwayer коробочка получается сплюснутая,80 пикселей в высоту - необходимо перед использованием фильтра удалять направляющие.Я на те же грабли наступил...Я прав,Андрей?


Андрей Пожарко       04.06.2009 - 23:57       Ссылка      

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


helur       31.10.2009 - 17:58       Ссылка      

помогите, пожалуйста, на этапе перехода к "сборке" выделяю верхнюю часть, нажимаю "вырезать" и ничего не происходит, т.е. картинка такой же остается, не вырезается sad если потом нажимаю "вставить как слой", то появляется прозрачный слой без ничего sad что где не так в настройках?


helur       31.10.2009 - 18:14       Ссылка      

а когда пробую подвигать выделение - двигается весь слой помогите нубу (


helur       31.10.2009 - 18:47       Ссылка      

попробовала заново без теней, начиная с пункта сборки - он берет за лицевую часть не картинку, а весь слой, т.е. получается картинка с пустыми прямоугольниками в качестве лицевой стороны (


helur       31.10.2009 - 19:09       Ссылка      

получается чертишо. помогите разобраться, пожалста!


helur       01.11.2009 - 21:15       Ссылка      

получилось, только пришлось размер слоя делать по размеру передней части.для меня загадка, как Вам удалось сделать коробку описанным способом


akvilegia       15.11.2009 - 23:55       Ссылка      

Просто, прежде чем делать выделение,надо перейти на слой с основной картинкой...


akvilegia       18.11.2009 - 01:13       Ссылка      

Добрый вечер,Андрей!Очень хочется получить вашу оценку этой открытки(возможно,что-то надо исправить).Это,конечно,не коробочка,но рамку по этому уроку делала...


Андрей Пожарко       18.11.2009 - 07:47       Ссылка      

В общем получилось довольно прилично. Есть несколько мелочей, изложу в порядке замечаемости. Первое, что бросилось в глаза - какой-то непонятный свет на кубке (показал на рисунке). Второе - немного не нравится тень за картиной. Судя по общему виду, свет падает спереди (со стороны наблюдателя), и тень чуть-чуть не соответствует. Третье - рамка на картине. Она, вроде, блестящая, но почему тогда на ней не видно бликов (как например на краю стола). Уж слишком равномерно она блестит, нужно бы "вручную" добавить блики в нужных местах. Остальное вроде нормально.


akvilegia       18.11.2009 - 12:46       Ссылка      

Спасибо!Буду дорабатывать...


юлия       14.12.2009 - 12:04       Ссылка      

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


*       05.02.2010 - 11:21       Ссылка      

почему то у меня ничего не собирается..жаль..


seagull       16.02.2010 - 15:58       Ссылка      

Очень ценный и нужный урок. Одно замечание - нельзя ли архив с исходной картинкой паковать не в RAR (это, все-таки, коммерческий формат). Мне под линуксом надоедает распаковывать в терминале. Но это просто пожелание.


Андрей Пожарко       16.02.2010 - 16:06       Ссылка      

Толковое замечание. Это я случайно, т.к. сам сижу в Linux smile.


Екатерина       20.05.2010 - 23:18       Ссылка      

Здравствуйте, Андрей. У меня нижняя сторона (грань) параллелепипеда меньше верхней на 1 см, а главное они не параллельны, это очень бросается в глаза. Это можно как-то скорректировать? То же самое и на вашем изображении с пчелкой.


Андрей Пожарко       21.05.2010 - 18:03       Ссылка      

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


glucagen       24.07.2010 - 15:43       Ссылка      

Я из начинающих.Можете подсказать с чего начинать , а то по Вашим урокам у меня не получается - не очень подробно -не хватает промежуточных операций , например "продублируем слой", а как? Или может есть сайт для чайников? А по руководству тоже не очень ,перемешано, то на русском ,то на английском. Помогите пожалуйста кто нибудь.


Андрей Пожарко       24.07.2010 - 18:40       Ссылка      

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


Натулька       04.08.2010 - 13:28       Ссылка      

Нужна помощь, Андрей, у меня совсем туповатый вопрос smile Уж простите smile Как буквы развернуть на 90 градусов, как у вас на боковой стороне коробочки? Никак не могу выполнить такое элементарное действие roll Заранее спа smile


Андрей Пожарко       04.08.2010 - 14:49       Ссылка      

Не иначе как инструментом Вращение (Shift+R).


Натулька       04.08.2010 - 18:33       Ссылка      

ЭЭэххх... значит где-то в другом месте напортачила... Спасиб smile Бум делать сначала smile


Татьяна       22.09.2010 - 11:45       Ссылка      

Гимпом пользуюсь уже около двух лет. Вот решила узнать что-то новенькое. Очень интересно, спасибо вам за сайт и уроки))) При обработке "коробочки" использован эффект ЛОМО прикладываю превьюшку, потому что при сжатии вся красота пропала((


Андрей Пожарко       22.09.2010 - 17:25       Ссылка      

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


ilyxasan       08.11.2010 - 09:47       Ссылка      

Сделал все как доктор прописал,4 слоя:перед,бок,верх, back. Заполнил,как надо,вкладку Параллелепипед,а бок и верх не рисует, ни на предворительном просмотре, ни на законченной проекции.Если возможно поставьте диагноз пожолуйста.


вика       13.11.2010 - 06:47       Ссылка      

спасибо за урок! А возможно ли в gimp создание к примеру трех подобных коробочек, расположенных близко друг к другу, соприкасающихся друг к другу???


Андрей Пожарко       14.11.2010 - 19:19       Ссылка      

Можно. Рисуйте по отдельности коробочки, а потом перетяните все в один документ и там уже совмещайте.


Игорь       23.11.2010 - 12:50       Ссылка      

Помогите, тоже самое как и у helur Вот только он разобрался и не написал как он это сделал. ПОМОГИТЕ


Андрей Пожарко       23.11.2010 - 13:08       Ссылка      

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


Игорь       23.11.2010 - 13:18       Ссылка      

А теперь получилось это(


Андрей Пожарко       23.11.2010 - 13:27       Ссылка      

Игорь, а вы по уроку готовили грани для сборки? Кажется понял в чем дело. У вас боковушки не правильно подготовлены. Посмотрите еще раз, так ли у вас выглядит список слоев.


Игорь       23.11.2010 - 13:41       Ссылка      

Да все делаю по уроку, правда как вы и сказали, я вместо Бекгроунд сделал копию передней части


Андрей Пожарко       23.11.2010 - 13:54       Ссылка      

Может быть у вас не открыты еще какие-то подобные файлы, и вы не из того файла берете боковушки для проекции? Не знаю даже что еще предположить. А какая версия программы?


Игорь       23.11.2010 - 13:58       Ссылка      

2.6 ВСЕ ДЕЛАЮ ПО УРОКУ поэтапно, никогда ни с какими уроками не возникало проблем, даже на англ.


Андрей Пожарко       23.11.2010 - 14:12       Ссылка      

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


Игорь       23.11.2010 - 14:17       Ссылка      

увеличить размер передней грани до размера слоя какого слоя?


Игорь       23.11.2010 - 14:18       Ссылка      

АААА, все тупанул, ща попробуем, спасибо за помощь)


Андрей Пожарко       23.11.2010 - 14:21       Ссылка      

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


Андрей Пожарко       23.11.2010 - 14:31       Ссылка      

Сейчас урок заметно упрощается! В самом начале урока нужно "разрубить" изображение по направляющим через Изображение - Преобразования - Гильотина. Затем из полученных частей уже можно собирать проекцию.


Игорь       23.11.2010 - 14:34       Ссылка      

Получилось. Тогда внесите поправочку для версии 2.6 увеличить переднюю панель до размера слоя.


*StepL2*       14.12.2010 - 19:05       Ссылка      

Вот фигня) какае-то Урок легкий


Евгений       28.01.2011 - 13:49       Ссылка      

Зацените ;-) Сделал для сайта PodariMenja.ru


Darina       31.03.2011 - 00:45       Ссылка      

Такая коробочка получилась у меня


Андрей Пожарко       01.04.2011 - 17:06       Ссылка      

Класс! Отличная работа, мне очень понравилось.


Alex       28.04.2011 - 17:18       Ссылка      

Урок класс, но меня немного смутило, что муха на коробке больше похожа на осу)


Влад       30.06.2011 - 20:37       Ссылка      

Класс!!!))))))


Геннадий       22.08.2011 - 11:09       Ссылка      

Не могли бы вы предложить другой способ "собрать" коробку. а то гимп не хочет проецировать neutral


Екатерина       11.09.2011 - 17:03       Ссылка      

Андрей здравствуйте. Спасибо за то, что вы есть))) У меня вопрос, почему при заливке текстурой у меня всегда одна и та же текстура?


Екатерина       11.09.2011 - 20:11       Ссылка      

Еще вопрос, не по этому уроку правда. Хочу сделать фото, которое выглядывает из конверта. Но конверт у меня получается нереалистичный. Подскажите пожалуйста как это исправить.


Дімон       21.09.2013 - 20:15       Ссылка      

cool Очень благодарю вас за урок


Дімон       21.09.2013 - 20:32       Ссылка      

neutral У меня есть только пару примечаний: ето больше смахивает на пчелу, и почему то вертикальные ребра не паралельные, а в принцыпе все хорошо


Вячеслав       14.04.2014 - 22:36       Ссылка      

Это то, что я искал! Автору респект. Жаль только, что в поиске это было аж на шестой странице smile Недоработочка smile


Super Loh       27.12.2016 - 10:08       Ссылка      

что за бред вы делаете?? hmm hmm hmm ??


Miheich       19.06.2017 - 12:26       Ссылка      

А как отражение сделать есть урок?


Добавить комментарий:

[b] [i] [u] [quote]     :) :| :( :D :o ;) :/ :P :lol: :mad: :rolleyes: :cool:


Введите результат =    








Проект OpenNET © 2008-2017 Андрей Пожарко Деньги владельцам сайтов