Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Огненные иконки для форума UCOZ Граффити Шаблон для софт портала Шаблон для онлайн кинотеатра скачать Как сделать шапку сайта в фотошопе (PhotoShop) Иконки групп для ucoz by CкРиПтЕг Скачать кнопки для UCOZ Рисуем дизайн сайта в Photoshop Красивый шаблон для ucoz Скачать автомобильный шаблон Скачать шаблон для СОФТПОРТАЛА Как сделать Анимированный аватар в PhotoShop Шаблон для укоз by EVILMAN (бесплатно) Иконки для форума UCOZ - Круглые янтарные иконки Шаблон на тему кино Как сделать оригинальный логотип в PhotoShop? Шаблон на тему CS black by AleX Текст на жидкости Скачать голубой шаблон для сайта Шаблон для uCoz в стиле "VISTA" Скачать шаблон для ВАРЕЗА Soft Portal By avdey =) Скачать шаблон бесплатно Скачать бесплатно шаблон для UCOZ от STEAM GAME by eKa Как менять цвет глаз в Photoshop Меняем цвет автомобиля в фотошопе
Главная » Статьи » Уроки Adobe Photoshop » Спецэффекты

Как в PhotoShop нарисовать 3D иконку коробки (упаковки)?

« Иконка в фотошопе (урок) »

Как в PhotoShop нарисовать красивую иконку коробки (упаковки) какого-нибудь продукта...

Сегодня в своём уроке по PhotoShop я вам расскажу как в фотошопе можно нарисовать очень красивую, стильную, элегантную иконку коробки (упаковки), которую часто используют для рекламы какого-либо продукта.

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

Как рисуются иконки в PhotoShop

1. Создаём новое изображение. Выбираем инструмент Paint Bucket Tool и заливаем фон серым цветом (#a6a6a6):

иконка в фотошопе

2. Создаём новый слой. Выбираем Elliptical Marquee Tool и рисуем авал, за тем заливаем его белым цветом с помощью Paint Bucket Tool:

иконка в PhotoShop

3. Размоем изображение, применив фильтр Filter —> Blur —> Gaussian Blur... со следующими параметрами:

иконка коробки в фотошопе

Получим следующий фон:

иконка упаковки в фотошопе

4. Начнём рисовать коробку. С нуля рисовать трёхмерные объекты может быть непривычно, по этому мы сразу нарисуем «каркас», для чего будем использовать фильтр 3D Transform (Filter —> Render —> 3D Transform), если у вас такого нету, то скачать его можно в конце урока.

В окошке фильтра выберите инструмент Cube Tool и нарисуйте параллелепипед:

иконка коробки в PhotoShop

5. Выбираем Direct Selection Tool и трансформируем наш параллелепипед следующим образом (при этом увеличте параметр Field):

иконка упаковки в PhotoShop

6. Нажмите кнопку Options... и там выставьте следующие параметры:

как нарисовать иконку

7. Выберите TrackBall Tool, если после этого фигура стала большой и не помещается в окошко просмотра, то уменьшите её изменив параметры Field и Dolly:

как нарисовать иконку в фотошопе

8. Поверните фигуру следующим образом:

как нарисовать иконку в фотошоп

Вои и всё — каркас коробки готов. Жмите Ok. Должно получиться примерно вот так:

как нарисовать иконку в PhotoShop

9. Создайте новый слой. Выберите инструмент Rectangle Tool и нарисуйте прямоугольник любого цвета:

как рисуют иконки

10. Выбирите Direct Selection Tool и, перемещая точки в углах фигуры, трансформируйте её следующим образом:

как рисуются иконки

11. Начнём добавлять эффекты. Для этого зайдите в Layer Style (на панели слоёв Layers кликните правой клавишей на слое и там выберите пункт Blendint Options) на вкладку Gradient Overlay и выставьте следующие параметры градиента:

как рисуются в фотошопе иконки

А ниже показаны подробные настройки градиента (чтобы их открыть, кликните по полосе с градиентом, справа от надписи Gradient), красным цветом я написал шестнадцатеричные значения цветов:

как в фотошопе рисуются иконки

12. Теперь добавим обводку (вкладка Stroke):

как в PhotoShop рисуются иконки

Обводку я использовал градиентную, вот подробные настройки этого градиента:

как рисуются иконки в фотошоп

Жмём везде Ok и получаем переднюю (фронтальную) сторону коробки:

как рисуются иконки в PhotoShop

13. Создадим новый слой и таким же образом нарисуем левую сторону:

в чём рисуют иконки

14. Применим к ней некоторые эффекты. Сразу градиент (заметьте, что угол Angle может отличаться от того, что я показал на примере — его нужно сделать таким, чтобы светлая часть градиента была сверху коробки):

как рисуют иконки

С такими подробностями:

в какой программе рисуют иконки

15. А за тем градиентную обводку (здесь так же параметр Angle будет у каждого свой — он зависит от формы нарисованного вами каркаса коробки):

где рисуют иконки

Вот подробные параметры градиента:

нарисовать иконку

Жмём Ok и получаем левую сторону коробки:

как можно нарисовать иконку

16. Сейчас уже можно отключить слой с каркасом коробки (или удалить его) — он нам будет только мешать.

Теперь создайте новый слой под слоями с передней и левой сторонами и нарисуйте на нём заднюю сторону коробки (с помощью всё того же Rectangle Tool):

в фотошопе нарисовать иконку

17. Ну и начинаем добавлять эффекты. Зайдите в Layer Style на вкладку Gradient Overlay и настройте градиент следующим образом:

в фотошоп нарисовать иконку

Вот так выглядять подробные настройки градиента:

нарисовать иконку в фотошоп

18. Перейдите на вкладку Stroke и настройте параметры обводки:

фотошоп, рисование иконок

Теперь можно нажать Ok и глянуть что там у нас вышло:

иконка продукта

19. Снова создаём новый слой и рисуем правую сторону коробки:

иконка коробки

20. Как и ранее, применяем к ней эффекты в окошке Layer Style. Начнём снова с градиента (Gradient Overlay):

иконка упаковки

Со следующими настройками цвета:

иконка коробки в фотошопе

21. Закончим настройкой обводки (Stroke):

иконка коробки в фотошоп

Если вы всё сделали точно так, как и я, то и получиться у вас должна такая же коробка, как и у меня (а если вы подключили свою фантазию, то это ещё лучше; но для новичка лучше точно следовать моим действиям):

иконка коробки в PhotoShop

22. Создадим новый слой ниже всех слоёв, составляющих стороны коробки. Нарисуем на нём нижнюю сторону коробки (она не будет видна, но нужна она для создания эффекта тени):

иконка упаковки в фотошопе

23. Зайдём в Layer Style на вкладку Drop Shadow и настроим параметры тени следующим образом:

иконка упаковки в фотошоп

24. Жмём Ok и получаем такую-вот тень:

иконка упаковки в PhotoShop

25. Коробка готова. Теперь осталось её украсить. Сразу добавим блики.

Выше всех слоёв создайте новый слой. Зажмите клавишу Ctrl и кликните по слою с левой стороной коробки для того, чтобы создать выделение:

как рисуется иконка упаковки

26. Выберите Elliptical Marque Tool, зажмите клавишу Alt и создайте выделение такого-вот вида:

как нарисовать иконку упоковки

27. Выбирите Paint Bucket Tool и залейте выделение белым цветом:

иконка

28. Непрозрачность заливки слоя (Fill) уменьшите до 0% (данный параметр настраивается на панели слоёв Layers, сверху).

За тем зайдите в Layer Style на вкладку Gradient Overlay и настройте там всё следующим образом:

красивая иконка

Вот подробные настройки градиента (красным цветом я написал значения непрозрачности для каждой точки градиента):

иконка коробки или упаковки

29. Жмём везде Ok и получаем довольно красивый блик:

красивая иконка в фотошопе

30. Таким же методом рисуем блик на передней стороне коробки:

красивая иконка в фотошоп

31. Сверху коробки нарисуем небольшое свечение. Выберите инструмент Line Tool, толщину линии (Weight) выставьте равной 3 px и нарисуйте такую линию:

красивая иконка в PhotoShop

32. Теперь нужно сделать эту линию прозрачной в начале и в конце. Для этого к слою добавьте маску (нажмите на кнопку Add layer mask..., которая находится на панели слоёв снизу):

модная иконка

33. Залейте маску с обеих сторон чёрным градиентом, переходящим в прозрачный:

стильная иконка

34. Вот что должно получиться:

модная иконка в фотошопе

35. Теперь зайдите в Layer Style на вкладку Outer Glow и настройте параметры свечения:

модная иконка в фотошоп

36. Должна получиться светящаяся линия:

модная иконка в PhotoShop

37. Теперь создайте новый слой, нарисуйте с помощью Rectangle Tool прямоугольник и с помощью Direct Selection Tool трансформируйте его следующим образом:

стильная иконка в фотошопе

38. Непрозрачность заливки слоя Fill выставьте в 0%. Потом заходите в Layer Style на вкладку Gradient Overlay и настройте все параметры:

стильная иконка в фотошоп

Ниже представлены подробные настройки градиента:

стильная иконка в PhotoShop

39. Жмите Ok, получиться должно вот что:

иконки

40. Таким же образом рисуем ещё один прямоугольник:

иконки в фотошопе

41. Начнём наносить рисунки на нашу упаковку. Сразу добавим надпись — название продукта.

Создайте новый слой и напишите короткий текст:

как рисуются иконки

42. Растрируйте слой с текстом (кликните на слое правой клавишей и выберите пункт Resterize Layer), а за тем трансформируйте его применив следующую трансформацию: Edit —> Transform —> Distort:

программа для создания иконок

43. Расположите надпись следующим образом:

программа для иконок

44. Добавим еле-еле заметное свечение. Для чего зайдите в Layer Style на вкладку Outer Glow и выставьте следующие значения параметров:

программа для рисования иконок

Вот что должно получиться:

в какой программе делают иконки

45. Теперь снова создайте новый слой, нарисуйте на нём что-нибудь понравившимися вам кисточками (не обязательно кисточками, это может быть логотип или ещё что-то; кисточки из примера можно скачать в конце урока) и трансформируйте таким же образом, как мы это делали ранее:

в какой программе рисуют иконки

46. Для придания «живости» картинке нарисуем ещё что-нибудь, например шарик.

Выберите инструмент Ellipse Tool, зажмите Shift и нарисуйте небольшой кружок:

как в фотошопе делают иконки

47. Начнём из кружка делать шарик. Для этого применим несколько эффектов.

Зайдите в Layer Style на вкладку Gradient Overlay и настройте градиент:

как в фотошоп делают иконки

Вот его подробные настройки:

как в PhotoShop делают иконки

Жмите Ok — получиться должен такой-вот шарик:

как делают иконки в фотошопе

48. Под слоем с шариком создайте ещё один слой и нарисуйте с помощью Ellipse Tool кружок чёрного цвета:

урок по созданию иконок

49. Растрируйте слой с кружком (кликните правой клавишей на слое и выберите пункт Rasterize Layer) и примените на нём фильтр: Filter —> Blur —> Gaussian Blur:

урок по созданию иконок в фотошопе

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

урок по созданию иконок в фотошоп

50. Нарисуем на шарике блик. Для этого нарисуйте такой-вот авал белого цвета (с помощью Ellipse Tool):

урок по созданию иконок в PhotoShop

51. Добавьте маску слоя (нажав на кнопку Add Layer Mask...) и залейте её чёрно-белым градиентом (как показано ниже):

иконки в PhotoShope

Получиться должен такой блик:

красивые стильные иконки

52. Продолжим украшать нашу коробку. Неплохо бы создать отражение шарика в коробке.

Для этого отключите отображение всех слоёв кроме слоёв, составляющих наш шар (чтобы отключить отображение слоя, нажмите слева от слоя на изображение глаза), потом с помощью Rectangular Marque Tool выделите шарик и скопируйте его в буфер обмена (Edit —> Copy Merged):

красивые модные иконки

53. Включите отображение отключенных в прошлом пункте слоёв и вставьте изображение шарика (Edit —> Paste), разместите его на коробке как показано ниже:

модные иконки

54. Отразите копию шарика по горизонтали (Edit —> Transform —> Flip Horizontal):

стильные иконки

55. Уменьшите непрозрачность слоя Opacity до 15%:

иконки коробок и упаковок

Ну вот и всё. Мы изготовили красивую, элегантную коробку:

иконка упаковки в фотошопе


.: Дополнительно :.

Скачать полноразмерную работу | JPG, 1024x768 px, 54,9 КБ

Скачать фильтр « 3D Transform » | ZIP, 117 КБ



Категория: Спецэффекты | Добавил: cinemania (20.12.2008)
Просмотров: 1599 | Рейтинг: 0.0/0 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма Входа
Воскресенье, 07.06.2020, 04:05
-й день

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
 
Логин:
Пароль:
Друзья сайта
Статистика
Рейтинг сайтов
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Лучшие фильмы | Уроки Adobe Photoshop | Шаблоны для uCoz | Онлайн-TV | Кнопки для сайта UCOZ | Иконки для сайтов UCOZ | Скрипты для uCoz