Главная » Файлы » Дизайн [ Добавить материал ]

Дизайн подарочной коробки в форме сердца
03.02.2015, 08:56

Дизайн подарочной коробки в форме сердца

 

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

Превью финального изображения.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 1.

 

Создаем в Фотошоп новый документ (Ctrl+N или File-New) размером 600х600 рх с черным фоном. Прежде чем мы приступим к основной работе, посмотрим на макет нашей будущей упаковки. Каждую сторону коробки мы будем размещать на отдельных слоях.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 2.

 

Создаем новый слой (Ctrl+Shift+N) «Сердце вверху». Рисуем на нем фигуру сердца инструментом «Произвольная фигура»(Custom Shape tool) в режиме контуров (иконка пера в рамке в верхнем меню), выбрав из набора фигур программы сердечко.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 3.

 

Нажимаем Ctrl+T (или идем в меню Edit-Transform) на клавиатуре, чтобы трансформировать фигуру, как на изображении ниже. После появления рамки трансформации, нажмите пр.кн.мыши по ней и выберите опцию – Искажение(Distort). Потяните за узлы рамки так, чтобы сердечко приобрело вид перспективы. Далее, нажмите Ctrl+Enter, чтобы загрузить выделение фигуры. Заполните (Edit-Fill или Shift+F5) сердце белым цветом.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 4.

 

Дублируем предыдущий слой (Ctrl+J), чтобы создать боковую часть коробки. Переименовываем дубликат в «Сердце впереди», дважды нажав по названию миниатюры слоя, и перемещаем этот слой под слой «Сердце вверху». Активируем инструмент «Перемещение» (Move Tool) и, используя стрелки клавиатуры, сдвигаем дубликат вниз точно под оригинал на расстояние высоты крышки. Загрузите выделение дубликата (Ctrl+клик по иконке этого слоя) и залейте его (Shift+F5)красным цветом.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 5.

 

Активируем Перо (Pen Tool) в режиме контуров и объединяем края двух сердец четырехугольной фигурой. После закрытия контура нажимаем пр.кн.мыши по нему и выбираем из меню – Образовать выделенную область (Select Path) с радиусом растушевки (Feather) 0рх. Заливаем (Shift+F5) выделение таким же красным цветом, какой использовали в заливке дубликата. Снимаем выделение (Ctrl+D).

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

На новом слое (Ctrl+Shift+N), созданном ниже слоя «Сердце вверху» создаем фигуру прямоугольника Пером (Pen Tool)и, образуя выделение, заливаем ее синим цветом. Называем слой «Сердце позади». Объединяем все слои с частями коробки в группу, предварительно выделив их (Ctrl+клик по миниатюрам слоев, затем Ctrl+G). Называем группу «Сердце».

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Шаг 7.

 

Теперь, добавим деталей для сердца, создав красивый фон. Разблокируйте фон двойным кликом по его миниатюре, преобразуя в слой. Добавьте на него стиль «Наложение градиента» (Gradient Overlay), открыв окно «Стилей слоя»(Layer-Layer Style или иконка «fx» внизу панели слоев) и выбрав нужное. Выполните настройки со скриншота: стиль радиальный (Radial), угол 90, направление цвета от светлого #e5e1c4 к бежевому #9e9067.

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Далее, выше градиентного слоя создаем Новый слой (Ctrl+Shift+N) и заполняем его любым цветом. Снижаем уровень заливки ((Fill) поле заливки находится под полем непрозрачности в панели слоев) до 0% и снова добавляем на данный слой эффект «Наложение градиента» (Gradient Overlay), открыв «стили слоя». Выполняем настройки опции: режим смешивания Осветление основы (Color Dodge), непрозрачность (Opacity) 15%, стиль линейный (Linear), угол(Angle) 99.

 

Дизайн подарочной коробки в форме сердца

 

Вводим цвета для градиента, открыв редактор (Gradient Editor). Устанавливаем направление цвета от черного (000000)к серому (#b8bebe). Непрозрачность (верхний ползунок) серого цвета уменьшаем до 0%.

 

Дизайн подарочной коробки в форме сердца

 

Открываем в Фотошоп диагональный узор из ресурсов урока и вставляем его в наш документ. Размещаем текстуру выше предыдущего слоя и снижаем ее непрозрачность (Opacity) до 8%.

 

Получился оригинальный фон:

 

Дизайн подарочной коробки в форме сердца

 

Шаг 8.

 

Далее, добавим стили на слой «Сердце вверху», открыв окно «Стилей слоя» (Layer-Layer Style или двойной клик по миниатюре слоя) и выполним следующие настройки для опции «Тень» (Drop shadow): режим смешивания Перекрытие(Overlay), цвет тени белый (000000), угол 90, смещение (distance) 1 рх, размер 2 рх.

 

Дизайн подарочной коробки в форме сердца

 

Следующий стиль «Внутренняя тень» (Inner Shadow): режим смешивания Умножение (Muliply), цвет тени черный, непрозрачность (Opacity) 40%, угол 120, смещение 1рх, размер 2 рх.

 

Дизайн подарочной коробки в форме сердца

 

Добавляем параметр «Внутреннее свечение» (Inner Glow) с такими значениями:

 

Дизайн подарочной коробки в форме сердца

 

И последний стиль «Наложение градиента» (Gradient Overlay). Выполняем настройки опции со скриншота:

 

Дизайн подарочной коробки в форме сердца

 

Результат:

 

Дизайн подарочной коробки в форме сердца

 

Шаг 9.

 

Теперь добавляем стили для слоя «Сердце впереди». Двойным кликом по миниатюре открываем «стили слоя» (Layer Style) и находим следующие параметры:
Внутренняя тень (Inner Shadow):

 

Дизайн подарочной коробки в форме сердца

 

Далее стиль «Наложение градиента» (Gradient Overlay):

 

Дизайн подарочной коробки в форме сердца

 

Результат преобразований:

 

Дизайн подарочной коробки в форме сердца

 

Шаг 10.

 

И, наконец, добавим «Наложение градиента» (Gradient Overlay) для слоя «Сердце позади». Открываем стили слоя и выполняем настройки для градиента:

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Шаг 11.

 

Верхняя часть коробки готова, создадим нижнюю половину. Дублируем (Ctrl+J) слой «Сердце спереди» и переименовываем слой в «Сердце внизу». Инструментом «Перемещение» (Move Tool) сдвигаем дубликат точно под оригинал, как на изображении ниже.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 12.

 

Нижняя часть коробки должна быть немного меньше верхней, поэтому применяем к ней Трансформирование (Edit-Transform или Ctrl+T), уменьшая ее в ширину.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 13.

 

На слое «Сердце внизу» оставляем все стили неизменными, кроме параметра «Внутренняя тень» (Inner Shadow). Выполняем настройки опции, открыв «Стили слоя» (Layer Style).

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Шаг 14.

 

Теперь приступаем к оформлению золотой коробочки. Открываем цветочный узор из материалов урока и загружаем его в наш документ выше всех слоев. Уменьшаем размер текстуры, используя Трансформирование (Ctrl+T) так, чтобы она покрывала полностью все части коробки. Загружаем выделение всех четырех слоев сердца (Сtrl+Shift+клик по иконкам слоев), затем инвертируем выделение (Select-Inverse или Ctrl+Shift+I) и, находясь на узорном слое, удаляем лишнее, нажав Delete.

 

Изменяем режим смешивания (Blend Mode) узорного слоя на Мягкий свет (Soft Light) и снижаем его непрозрачность(Opacity) до 20%.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 15.

 

Чтобы коробка выглядела реалистично, создадим тень для ее верхней и нижней крышки. Создаем Новый слой(Ctrl+Shift+N) под слоем «Сердце впереди» и загружаем выделение передней стороны коробки (Ctrl+клик по иконке этого слоя). Заполняем (Edit-Fill) выделение на новом слое черным цветом (000000). Далее переходим в меню Фильтр-Размытие-Размытие+ (Filter > Blur > Blur More).

 

Теперь, загружаем выделение слоя «Сердце внизу» (Ctrl+клик по иконке слоя), затем инвертируем выделение(Ctrl+Shift+I) и на слое с тенью удаляем лишнее клавишей Delete.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 16.

 

Выше группы «Сердце» создаем еще одну группу (клик по иконке папки внизу панели слоев) и называем ее «Золотая лента». В этой группе создаем новый слой (Ctrl+Shift+N) под названием «Лента». Инструментом Перо (Pen Tool) в режиме контуров создаем фигуру поверх коробки.

 

Дизайн подарочной коробки в форме сердца

 

После закрытия контура нажимаем пр.кн.мыши и выбираем из меню – Выполнить заливку контура (Fill Path). Заполняем ленту любым цветом и удаляем контур, снова нажав пр.кн.мыши по нему и выбрав опцию – Удалить контур (Delete Path).

 

Дизайн подарочной коробки в форме сердца

 

Шаг 17.

 

На слое «Лента» снижаем уровень заливки (поле Fill) до 0%. Открываем окно «Стилей слоя» (Layer-Layer Style) и выбираем параметр «Наложение цвета» (Color Overlay).

Вводим значения со скриншота:

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Шаг 18.

 

Создаем Новый слой (Ctrl+Shift+N) выше слоя «Лента» и называем его «Окантовка ленты». Загружаем выделение слоя с лентой и заливаем его (Shift+F5) любым цветом на созданном слое. Используя Перо (Pen Tool), создаем поверх заливки фигуру чуть уже ленты. Выделяем контур (Ctrl+Enter), затем удаляем выделенную область, нажав Delete и получаем белую обводку ленты.

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Шаг 19.

 

Добавляем следующие стили слоя (Layer Style) на окантовку: Тень (Drop Shadow), Наложение градиента (Gradient Overlay). Выполняем настройки для этих параметров со скриншота:

 

Дизайн подарочной коробки в форме сердца

 

В результате получаем золотистую окантовку:

 

Дизайн подарочной коробки в форме сердца

 

Шаг 20.

 

Создаем Новый слой (Ctrl+Shift+N) под слоем «Лента» и называем его «Сетка на ленте». Узор сетки вы можете скачать из ресурсов урока. Загрузите узор сетки в Фотошоп и вставьте его на новый слой «Сетка на ленте» (Ctrl+C, затем Ctrl+V). Загрузите выделение слоя «Лента» (Ctrl+клик по иконке слоя), затем инвертируйте его (Ctrl+Shif+I) и удалите лишнее на слое с узором клавишей Delete. Снимите выделение (Ctrl+D).

 

Дизайн подарочной коробки в форме сердца

 

Шаг 21.

 

Добавляем «Наложение градиента» (Gradient Overlay) для узора в стилях слоя (иконка «fx» внизу панели слоев). Выполняем настройки со скриншота:

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Шаг 22.

 

Теперь создаем тень от ленты на Новом слое (Ctrl+Shift+N) ниже слоя «Сетка ленты». Называем слой «Тень ленты». Используя Перо (Pen Tool), рисуем контур вдоль правого края ленты.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 23.

 

Настроим Кисть (Brush) для обводки нашего контура: размер 1 рх, жесткость (hardness) 100%, цвет черный. Нажимаем пр.кн.мыши по контуру и выбираем пункт - Выполнить обводку контура (Stroke Path). В диалоговом окне указываем инструмент Кисть (Brush) и нажимаем Ок. У нас получилась тоненькая аккуратная тень.

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Шаг 24.

 

Снижаем непрозрачность (opacity) слоя с тенью до 50%.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 25.

 

Создаем Новый слой (Ctrl+Shift+N) выше слоя с окантовкой и называем его «Свет ленты». Кистью (Brush) белого цвета с жесткими краями рисуем на месте сгиба ленты по краю крышки. Снижаем непрозрачность белой полосы (Opacity) до 60%.

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Шаг 26.

 

Пришло время добавить отражение коробочки на стеклянной поверхности. Чтобы сделать это, выделяем в панели слоев группы «Сердце» и «Лента» (Ctrl+клик по миниатюрам групп), а затем нажимаем пр.кн.мыши на выделенных миниатюрах слоев и выбираем пункт из меню – Создать дубликат слоев (Duplicate Layers). Затем, объединяем две группы копий («Сердце» и «Лента») в один слой, предварительно выделив их (Ctrl+клик по миниатюрам, затем Ctrl+E). Называем полученный слой «Отражение».
Инструментом «Перемещение» (Move Tool) сдвигаем дубликат коробки точно под оригинал и размещаем его ниже слоя «Сердце внизу».

 

Дизайн подарочной коробки в форме сердца

 

Шаг 27.

 

Активируем инструмент Полигональное Лассо (Polygonal Lasso) и выделяем им нижнюю часть коробки на слое «Отражение», как показано ниже. Удаляем выделенную область (Delete).

 

Дизайн подарочной коробки в форме сердца

 

Получаем такой результат:

 

Дизайн подарочной коробки в форме сердца

 

Шаг 28.

 

Теперь на слое «Отражение» переходим в меню Фильтр-Размытие-Размытие по Гауссу (Filter > Blur > Gaussian Blur) и устанавливаем радиус на 3 рх.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 29.

 

Трансформируем (Ctrl+T) отражение и снижаем его непрозрачность (Opacity) до 30%.

 

Дизайн подарочной коробки в форме сердца

 

Получаем вот такое матовое отражение на поверхности:

 

Дизайн подарочной коробки в форме сердца

 

Шаг 30.

 

Чтобы отражение выглядело более натуральным, скроем его нижнюю часть, используя Маску слоя (Layer Mask). На слое «Отражение» нажимаем на иконку маски (круга в квадрате) внизу панели слоев и мягкой Кистью (Brush) черного цвета закрашиваем нижний край коробки.

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Шаг 31.

 

Создаем Новый слой (Ctrl+Shift+N) под слоем «Сердце внизу» и называем его «Тень коробки». Загружаем выделение слоя «Сердце вверху» (Ctrl+клик по иконке слоя) и заливаем (Fill-Edit) выделение черным цветом (000000). Сдвигаем теневой слой точно под коробку инструментом «Перемещение» (Move Tool), как показано ниже.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 32.

 

Далее, размоем тень при помощи фильтра «Размытие по Гауссу» (Filter > Blur > Gaussian Blur), установив радиус в 10 рх.

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Шаг 33.

 

Уменьшаем тень при помощи Трансформирования (Ctrl+T) и снижаем ее непрозрачность (Opacity) до 40%.

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Шаг 34.

 

Создаем Новую группу (клик по иконке папки внизу панели слоев) между группой «Сердце» и «Лента», называем ее «Белая Открытка». Создаем новый слой (Ctrl+Shift+N) в данной группе под названием «Открытка». Выбираем инструмент «Прямоугольник со скругленными углами» (Rounded Rectangular tool) в режиме заливки пикселей (третья иконка в верхнем меню), установив цвет переднего плана на белый (ffffff). В верхнем меню указываем радиус скругления углов на 3рх. Рисуем небольшой прямоугольник.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 35.

 

Добавляем на слой «Открытка» стили слоя «Внутренняя тень» (Inner Shadow) и «Наложение градиента» (Gradient Overlay). Выполняем настройки внизу:

 

Дизайн подарочной коробки в форме сердца

 

Дизайн подарочной коробки в форме сердца

 

Шаг 36.

 

Открываем в Фотошоп диагональную текстуру из материалов урока и вставляем ее в наш документ выше слоя с открыткой. Загружаем выделение открытки (Ctrl+клик по иконке слоя), затем инвертируем его (Select-Inverse или Ctrl+Shift+I)и удаляем лишнее (Delete). Снижаем непрозрачность (Opacity) текстуры до 8%.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 37.

 

Осталось только сделать поздравительную надпись на открытке. Для этого, активируйте инструмент «Горизонтальный текст» (Horizontal Type tool) размером 18pt, цветом #5c4c093 и расположением по центру. Если необходимо, то для редактирования текста можете воспользоваться панелью «Символ» (Window-Character) и выполните нужные вам установки.

 

Дизайн подарочной коробки в форме сердца

 

Шаг 38.

 

Объедините все слои с открыткой в один слой (выделите их, затем Ctrl+E). Трансформируем открытку (Ctrl+T), уменьшив ее, затем размещаем на коробке под лентой, создав впечатления перспективы, используя Искажение (Edit-Transform-Distort).

 

Дизайн подарочной коробки в форме сердца

 

Шаг 39.

 

Ну, и напоследок, создадим тень для открытки, открыв «Стили слоя» (Layer-Layer Style) и выполняя настройки для параметра «Тень» (Drop Shadow).

 

Дизайн подарочной коробки в форме сердца

 

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

 

Желаем творческих успехов!

 

Дизайн подарочной коробки в форме сердца

 

Используемые материалы:



Цветочный паттерн
Узор сетки
Диагональный узор
Категория: Дизайн | Добавил: Льоша | Теги: подарочной, дизайн, коробки, в форме, Сердца
Просмотров: 623 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0