1. Design & Illustration
  2. Theory
  3. Global Influences

Создайте обложку для музыкальных дорожек используемых в танце живота в Adobe Illustrator

Scroll to top
Read Time: 10 min

() translation by (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Танец живота имеет долгую историю в ближневосточной культуре, и, по мнению некоторых экспертов, ее следует рассматривать как праздник торжества, исполнительского искусства или народного танца, а не развлечение соблазнительной или провокационной природы. Его корни довольно непонятны, но он присутствовал в истории Египта, Турции, Ливана, Сирии, Греции,и в регионе «Халеджи».

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

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

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

В этом уроке я расскажу вам о творческом процессе создания обложки альбома, от иллюстрированного эскиза до финального формата EPS. Научитесь создавать обложки, которые вы можете загрузить в свой список воспроизведения. Мы начнем с рисования на Adobe Sketch, перейдем к некоторым удобным инструментам в Adobe Illustrator CC (выпуск 2014) и включим Adobe Color CC в работу.

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

1. Настройка Adobe Sketch и Illustrator

Шаг 1

Одним из моих часто используемых компонентов программного обеспечения готовому к работе является Adobe Sketch, который вы можете скачать прямо на свой iPad. Это отличный инструмент для наброса ваших идей, где бы вы ни находились, его инструменты ведут себя реалистично, и вы можете загружать законченную работу прямо в ваше облако Creative и автоматически отправлять в Adobe Illustrator / Photoshop CC.

Давай начнем. Откройте Adobe Sketch, переименуйте свой проект как «Искусство обложки Танца живота» и начните рисовать пальцем, или если у вас есть стилус, совместимый с iPad, это тоже сработает. Я работаю с Intuos Creative Stylus, который вы также можете приобрести у Wacom.

Выберите первый инструмент Карандаш в верхнем меню, синий оттенок и начните рисование.

Сначала касайтесь очень легко. Карандаш чувствителен к нажатию, поэтому чем сильнее вы нажмете тем толще будет штрих. С помощью инструмента «Ластик» удалите все ошибки. После того, как вы удовлетворены, убедитесь, что вы вошли в свое облако Creative Cloud. Теперь мы можем поделиться этой работой, щелкнув меню Share и Send to Illustrator.

using adobe sketch to sketch your drawing and share adobe sketch creative stylus pen illustrate share send to illustrator photoshop behance bellydance middle east cover artusing adobe sketch to sketch your drawing and share adobe sketch creative stylus pen illustrate share send to illustrator photoshop behance bellydance middle east cover artusing adobe sketch to sketch your drawing and share adobe sketch creative stylus pen illustrate share send to illustrator photoshop behance bellydance middle east cover art

Шаг 2

Ваша иллюстрация откроется сама на Adobe Illustrator CC (2014), как «Искусство обложки Bellydance - Sketch 1.sket».

Теперь мы хотим создать обложку альбома, поэтому нам нужно настроить декоративную панель как квадратную форму. File > Document Setup и выберите Edit Artboards.

  • Имя: Обложка Танца живота
  • Ширина 22 см
  • Высота 22 см

Нажмите OK.

editing artboard on adobe illustrator cc name bellydance cover adjust width and height 22cm square artboardediting artboard on adobe illustrator cc name bellydance cover adjust width and height 22cm square artboardediting artboard on adobe illustrator cc name bellydance cover adjust width and height 22cm square artboard

File > Save As, Bellydance_Player_Cover_Art.ai.

Нам нужно переименовать и заблокировать слой, чтобы мы могли проследить наш рисунок сверху, поэтому откройте Windows > Layers. Переименуйте слой как «Эскиз».

Дважды щелкните слой, чтобы открыть меню Layer Options, и установите флажок Lock  и размер изображения на: 25% и «ОК».

locking layers and creating new layers layer options panel sketch lock print dim images 25 trace percentage illustrator adobe locking layers and creating new layers layer options panel sketch lock print dim images 25 trace percentage illustrator adobe locking layers and creating new layers layer options panel sketch lock print dim images 25 trace percentage illustrator adobe

Наверх слоя Sketch, создайте новый слой и назовите его «художественная работа», чтобы мы могли начать отслеживать работу над этим слоем.

Одна интересная функция нового Adobe Illustrator CC (2014) заключается в том, что вы можете создать свою собственную панель «Инструменты», чтобы объединить все инструменты, которые вы обычно используете для рисования.

Перейдите в раздел Windows > Tools > New Tools Panel, назовите его «Инструменты для работы с изображениями» и нажмите «ОК». Появится новая панель инструментов. Вы можете просто перетащить любой инструмент из исходной панели Tools на пользовательскую панель, а затем закрыть панель инструментов, чтобы сохранить только нужные инструменты.

Create layers and customize tool panel on adobe illustrator CC 2014 release new tools create new layer workspacesCreate layers and customize tool panel on adobe illustrator CC 2014 release new tools create new layer workspacesCreate layers and customize tool panel on adobe illustrator CC 2014 release new tools create new layer workspaces

Вы можете впоследствии сохранить пользовательские панели инструментов в своих рабочих пространствах, создав рабочую область, предназначенную для рисования. Windows > Workspace > New Workspace.

File > Save (Command-S).

2. Tracing Tools

Шаг 1

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

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

Pen Tool (P) - один из самых важных инструментов в Adobe Illustrator. В выпуске Illustrator CC в 2014 году новые обновления инструмента дают вам больше точности и гибкости при создании вашего искусства. Одной из основных особенностей Pen Tool Preview является предварительный просмотр, который позволяет вам увидеть ваш путь (красная линия), прежде чем вы разместите свои опорные точки, и затем сохранит вас от путей очистки.

Pen Tool preview option in adobe illustrator CC tracing points Pen Tool preview option in adobe illustrator CC tracing points Pen Tool preview option in adobe illustrator CC tracing points

Ещё одна классная функция - способность перемещать неправильные указатели точек. 

В предыдущих версиях, когда вы добавляли точку, создавались соответствующие опорные указатели. Теперь, при добавлении новой точки и удерживании клавиш Command и Alt, вы можете изменять длину новых указателей опорных точек и лучше контролировать изгибы, не создавая деформации.

adobe illustrator cc creating control unequal paired anchor points hold down command control keys in adobe illustrator cc 2014 releaseadobe illustrator cc creating control unequal paired anchor points hold down command control keys in adobe illustrator cc 2014 releaseadobe illustrator cc creating control unequal paired anchor points hold down command control keys in adobe illustrator cc 2014 release

Ещё один интересный инструмент - Инструмент "Изгиб"(Shift-~). Это Инструмент "Перо" (Р) с опцией создания изгиба. Он помогает рисовать кривые линии более плавно и быстро.

В первое время может быть сложно разобраться, поэтому не спешите. При помощи этого инструмента можно рисовать идеальные круги.  Возьмите Инструмент "Изгиб" (Shift-~) и один раз кликните в центре каждой круглой направляющей. Кликами можно создать круг. 

curvature tool shift creating perfect circle in adobe illustrator cc 2014 releasecurvature tool shift creating perfect circle in adobe illustrator cc 2014 releasecurvature tool shift creating perfect circle in adobe illustrator cc 2014 release

Если хотите провести прямую линию между точками, дважды кликните в центре каждой направляющей. 

using the curvature tool sfift to create smooth curves and straight linesusing the curvature tool sfift to create smooth curves and straight linesusing the curvature tool sfift to create smooth curves and straight lines

Если вы хотите закрепить готовый контур, выделите фигуру Инструментом "Выделение"(V), возьмите Инструмент "Изгиб" (Shift-~) и выделите контур, чтобы превратить его в плавную кривую линию. 

selection tool and curvature tool to convert straight path to smooth curve on illustrator cc 2014 releaseselection tool and curvature tool to convert straight path to smooth curve on illustrator cc 2014 releaseselection tool and curvature tool to convert straight path to smooth curve on illustrator cc 2014 release

Если сначала вам будет сложно, возьмите Инструмент "Эллипс" (Е), особенно если хотите нарисовать эллипсы монеток. 

Когда освоитесь с новыми функциями, для обводки рисунка вам понадобятся Инструмент "Перо" (Р), Инструмент "Изгиб" (Shift-~) и Инструмент "Эллипс" (Е). Установите чёрный цвет обводки без заливки и начните обводить.

tracing using the pen tool P curvature tool Shift and ellipse tool E on adobe illustrator cctracing using the pen tool P curvature tool Shift and ellipse tool E on adobe illustrator cctracing using the pen tool P curvature tool Shift and ellipse tool E on adobe illustrator cc

Шаг 2

Для создания хорошего дизайна, важен цвет, поэтому вам нужно выбрать правильные оттенки. Есть несколько приложений для выбора правильной цветовой схемы. Я использовала Adobe Color CC. Здесь я решила взять огненные красные тона.

Создайте свои цветовые схемы, назовите их и сохраните.

Adobe Color CC color scheme generator hot reds blood redAdobe Color CC color scheme generator hot reds blood redAdobe Color CC color scheme generator hot reds blood red

Adobe Color CC создаёт темы, которые можно синхронизировать с настольными приложениями Adobe, такими как Photoshop и Illustrator, а также с мобильными приложениями Illustrator Line, Illustrator Draw, и Photoshop Sketch.

Откройте Окна > Цветовые темы.

Если вы подсоединены к Creative Cloud, кликните на кнопку обновления и все ваши темы будут синхронизированы с Illustrator.

Refresh color themesRefresh color themesRefresh color themes

Давайте раскрашивать!

Организуйте порядок размещения фигур согласно нужным слоям.

Чтобы переместить объект в верхнюю или нижнюю позицию в соответствующей группе или слое, выделите нужный объект и перейдите в Объект > Монтаж > На передний план (Shift-Command-]) или Объект > Монтаж > На задний план (Shift-Command-[).

Чтобы отправлять фигуры на задний или передний план по одной, выделите нужный объект и перейдите в Объект > Монтаж > Переложить вперёд (Command-]) или Объект > Монтаж > Переложить назад (Command-[).

color shapes using color scheme saved adobe color cc onto illustrator cc 2014color shapes using color scheme saved adobe color cc onto illustrator cc 2014color shapes using color scheme saved adobe color cc onto illustrator cc 2014

Шаг 3

Далее обведите части тела теми же инструментами с установленной чёрной Обводкой и без Заливки.

use the pen tool p curvature tool shift and ellipse tool to trace on adobe illustrator ccuse the pen tool p curvature tool shift and ellipse tool to trace on adobe illustrator ccuse the pen tool p curvature tool shift and ellipse tool to trace on adobe illustrator cc

На панели Слоёв Создайте новый слой под "Рисунком" и назовите его "Фон".

Обведите одну часть дыма на бёдрах танцовщицы Инструментом "Изгиб"(Shift-~) на слое с Рисунком. Затем на слое с Фоном обведите остальной дым.

Файл > Изменить(Command-S).

artwork tracing drawing pen tool curcature tool and ellipse tool bellydance cover artartwork tracing drawing pen tool curcature tool and ellipse tool bellydance cover artartwork tracing drawing pen tool curcature tool and ellipse tool bellydance cover art

Шаг 4

Заблокируйте слои "Рисунок" и "Фон", Создайте новый слой над "Рисунком" и назовите его "Текст".

Откройте Окно > Кисти. В подменю панели Кистей перейдите в Открыть библиотеку кистей > Художественный > Худож_калиграф.

Open Window Brushes In Brushes panel submenu Open Brush Library Artistic Artistic_Calligraphic adobe illustratorOpen Window Brushes In Brushes panel submenu Open Brush Library Artistic Artistic_Calligraphic adobe illustratorOpen Window Brushes In Brushes panel submenu Open Brush Library Artistic Artistic_Calligraphic adobe illustrator

Откроется панель Худож_калиграф. Найдите кисть 40pt.flat. Перетащите её на панель Кистей, затем закройте панель Худож_калиграф.

Дважды кликните на кисти 40pt.flat, появится панель с Настройками кисти. Настройте следующие параметры:

  • Угол: 62 градуса/Случайный
  • Округлость: 35 процентов/ Копировальное колёсико
  • Размер: 46 точек/ Случайный

Нажмите ОК.

40pt flat brush setting adjust degrees percentage size random stylus wheel pressure40pt flat brush setting adjust degrees percentage size random stylus wheel pressure40pt flat brush setting adjust degrees percentage size random stylus wheel pressure

Кликните на горячую клавишу Инструмента "Кисть" - В - и изменённой кистью обведите арабский текст "Ya Habibi", что означает "Моя любовь". Не у всех есть ближневосточная версия Illustrator, поэтому на этом этапе проще нарисовать текст.

tracing arabic text with 40t adjust brush settingstracing arabic text with 40t adjust brush settingstracing arabic text with 40t adjust brush settings

Далее давайте вставим английский текст. Нажмите Т - горячую клавишу Инструмента "Текст".

В верхней вкладке меню вы найдёте:

  • Символ: Здесь вы можете выбрать шрифт. Я выбрала Brody.
  • Размер шрифта: 59 точек.

Убедитесь, что Параграф Выровнен по левому краю и Направление параграфа слева направо.

Теперь поверните текст Инструментом "Поворот" (R), чтобы он был выровнен с арабской надписью.

character align left paragraph direction ya habibi text rotate tool type toolcharacter align left paragraph direction ya habibi text rotate tool type toolcharacter align left paragraph direction ya habibi text rotate tool type tool

Далее снова возьмите Инструмент "Текст" (Т), шрифт Brody, 32 точки, Параграф: Выравнивание по левому краю и Направление параграфа слева направо и введите название "Музыка для танцев живота с Ближнего востока".

Файл > Сохранить (Command-S).

Type tool align left align right bellydance music from the Middle East paragraph Type tool align left align right bellydance music from the Middle East paragraph Type tool align left align right bellydance music from the Middle East paragraph

Шаг 5

Заблокируйте слой "Текст" и разблокируйте "Рисунок".

Перейдите в Adobe Color CC и выберите оттенки кожи, волос, дыма и фона.

После этого перейдите в Illustrator, к панели Синхронизации цветовых тем.

adobe color cc to adobe illustrator cc export color themes saved sync artboardadobe color cc to adobe illustrator cc export color themes saved sync artboardadobe color cc to adobe illustrator cc export color themes saved sync artboard

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

Выделите объект, который хотите переместить, и выберите между:

  • Объект > Монтаж > Переложить вперёд (Command-])
  • Объект > Монтаж > Переложить назад (Command-[)
  • Объект > Монтаж > Отправить на передний план (Shift-Command-])
  • Объект > Монтаж > Отправить на задний план (Shift-Command-[).

Если нужно будет добавить или удалить элементы, импровизируйте.

artwork color palette bellydance illustration cover arrange back front backward forwardartwork color palette bellydance illustration cover arrange back front backward forwardartwork color palette bellydance illustration cover arrange back front backward forward

Окно > Обводка, откройте Настройки панели обводки. Выберите Толщину: 2 точки и Скруглённые концы: Скруглённые стыки.

Поставьте флажок на Наклонной линии и установите Наклон 0 точек и Зазор 5 точек. Появится жемчужина. Изменяйте размеры точек, чтобы получилось разнообразие.

dash and gap effects beads on dress embellisment bellydancerdash and gap effects beads on dress embellisment bellydancerdash and gap effects beads on dress embellisment bellydancer

Файл > Сохранить (Command-S).

Возьмите Инструмент "Карандаш" (N) и добавьте больше украшений с теми же настройками жемчужин.

Pencil tool N sketch bead effect embellishment adobe illustrator ccPencil tool N sketch bead effect embellishment adobe illustrator ccPencil tool N sketch bead effect embellishment adobe illustrator cc

Шаг 6

Разблокируйте слой "Фон" и раскрасьте дым.

Откройте Окна > Градиент. Возьмите Инструмент "Прямоугольник" (М) и заполните фоновый цвет огненным (от жёлтого к красному) Радиальным градиентом.

Разблокируйте слой "Текст" и раскрасьте его.

Для создания иллюстрированного арабского шрифта перейдите в Объект > Разобрать оформление. Для английского текста перейдите в Текст > Преобразовать в контуры.

Expand appearance of fonts and outline type to fill color adobe Illustrator CC gradient backgroundExpand appearance of fonts and outline type to fill color adobe Illustrator CC gradient backgroundExpand appearance of fonts and outline type to fill color adobe Illustrator CC gradient background

Расположите текст в нужной области.

Затем Инструментом "Выделение" (V) выделите весь текст и Сгруппируйте его (Command-G). Перетащите немного вниз, удерживая Alt, чтобы Скопировать текст.

Окна > Прозрачность. Переведите новую группу в режим прозрачности "Умножение". Затем перейдите в Объект > Монтаж > Переложить назад (Command-[) и Файл > Сохранить (Command-S).

using group and direct selection tool to arrange and duplicate text with transparency multiply adobe illustratorusing group and direct selection tool to arrange and duplicate text with transparency multiply adobe illustratorusing group and direct selection tool to arrange and duplicate text with transparency multiply adobe illustrator

3. Узор и эффекты

Шаг 1

Заблокируйте слои "Текст" и "Рисунок" и перейдите на слой "Фон".

Давайте добавим узор на фон. 

Возьмите Инструмент "Многоугольник" на панели Инструментов: Окно > Инструменты > По умолчанию (при помощи нижней части пользовательской панели инструментов можно перетащить всё подменю инструментов с каждым инструментом).

Выделите всё (Command-A) и нажмите Command-2, чтобы Заблокировать выделенное. Нам нужно заблокировать все элементы, чтобы они не мешали узору.

Создайте оранжевый многоугольник.

Выделите фигуру, удерживайте Shift, и вы заметите, что фигура будет двигаться только в горизонтальной или вертикальной плоскости. Если вы будете удерживать Option/Alt и перетаскивать с нажатой Shift, появится выровненная по горизонтали копия.

Теперь нажмите Command-D, чтобы скопировать действие, и введите параметры монтажной области.

polygon tool duplicate shift alt drag selection copy polygon tool duplicate shift alt drag selection copy polygon tool duplicate shift alt drag selection copy

Сгруппируйте (Command-G) многоугольники и, удерживая Option/Alt, Перетащите для создания копии. Выровняйте вторую группу под углом к верхним многоугольникам и перетащите с нажатой Shift, чтобы скопировать последний многоугольник для заполнения пустого пространства в конце.

shift alt drag vertically to copy polygon groupshift alt drag vertically to copy polygon groupshift alt drag vertically to copy polygon group

Выделите обе группы и, удерживая Option/Alt, Перетащите, чтобы сделать вертикальную копию. Затем нажмите Command-D, чтобы Скопировать и ввести параметры монтажной области.

Select both groups and hold down OptionAlt and Drag to make a Copy vertically Then Command D to Duplicate and fill artboard dimensionsSelect both groups and hold down OptionAlt and Drag to make a Copy vertically Then Command D to Duplicate and fill artboard dimensionsSelect both groups and hold down OptionAlt and Drag to make a Copy vertically Then Command D to Duplicate and fill artboard dimensions

Файл > Сохранить (Command-S).

<Выделите всё (Command-A) и Сгруппируйте (Command-G). Затем кликните на Объект > Монтаж > Отправить на задний план (Shift-Command-[), чтобы расположить его за дымом.

Установите Прозрачность на "Осветление" 80%.

Select All Command A Group Command G Object Arrange Send To Back ShiftCtrl behind smoke Set transparency to Screen mode at 80Select All Command A Group Command G Object Arrange Send To Back ShiftCtrl behind smoke Set transparency to Screen mode at 80Select All Command A Group Command G Object Arrange Send To Back ShiftCtrl behind smoke Set transparency to Screen mode at 80

Объект > Разблокировать всё (Command-Option-2).

Разблокируйте слои "Рисунок" и "Текст".

Выделите все фигуры дыма Инструментом "Прямое выделение" (V) и переведите их в режим прозрачности "Осветление", настроив на 50-85%.

Файл > Сохранить (Command-S).

screen transparency mode and percentage to smoke effectscreen transparency mode and percentage to smoke effectscreen transparency mode and percentage to smoke effect

Настройте прозрачность слоя и измените все не очень точные цвета или прозрачности на композиции.

Я вернулась и изменила оттенки кожи на более светлые тона, настроила прозрачность узора на Перекрытие 43%, добавила цвет градиентному фону и настроила тень текста.

Шаг 2

Наконец, вам нужно экспортировать картинку.

Файл > Сохранить (Command-S).

Файл > Экспортировать, формат JPEG, отметить флажком "Использовать монтажные области" и нажать "Экспортировать".

В открывшемся окне Настроек JPEG выберите Цветовой режим RGB с Разрешением экрана 72 точек на дюйм и нажмите ОК.

JPEG options box color mode rgb screen resolution 72ppi okJPEG options box color mode rgb screen resolution 72ppi okJPEG options box color mode rgb screen resolution 72ppi ok

Наконец, откройте любой музыкальный плеер и добавьте рисунок в свой плейлист.

Playlist display artwork music playerPlaylist display artwork music playerPlaylist display artwork music player

Поздравляю! Ваша обложка плейлиста готова!

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

Мы научились создавать эскизы с Adobe Sketch и делиться работой через Creative Cloud, а также узнали о некоторых полезных инструментах в Adobe Illustrator CC (2014), таких как Предпросмотр пера, Инструмент "Изгиб", создание своей Панели инструментов, применение кистей в создании текста, внедрение функций Adobe Color CC и многое другое.

Надеюсь, вам понравилось это руководство, и вам не терпится увидеть свою версию рисунка.

Давайте посмотрим!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
One subscription. Unlimited Downloads.
Get unlimited downloads