Вопрос: Как сделать круговую диаграмму в Adobe Illustrator?
Создание диаграмм и графиков Adobe ILLUSTRATOR CC Построить Начертить Сделать Курс Обучение �� Уроки
�� Все уроки КУРСА с 1-40+ Illustrator «��КУРС С нуля до профи Быстрый старт» https://www.youtube.com/playlist?list=PLmaZf_calrAaMS-qjbdW8WmvoPVr4phtU.
⛹ Остальные уроки https://24navo.ru/.
100 150.
200 202.
250 180.
350 422.
300 622.
400 511.
380 633.
512 601.
649 488.
711 555.
822 950.
построить,начертить,сделать
Видео взято с канала: IT-PLANET
Уроки Adobe Illustrator. Урок №70: Как создавать инфографику в Adobe Illustrator. Часть 2
В этом уроке мы продолжим создавать элементы инфографики. Разберемся, какие элементы используются в инфографике и создадим еще один вариант инфографики на основе полученных знаний..
Ссылка для скачивания файла с шаблоном (Adobe Illustrator CC):.
https://drive.google.com/open?id=0B1vThPiGBLYKTUFORFNjcEFOOFU.
Ссылка для скачивания шрифта Poiret One:
https://drive.google.com/file/d/0B1vThPiGBLYKWTRDeW5RUlNqdWs/view?usp=sharing.
Ссылка для скачивания Adobe Illustrator CC: https://drive.google.com/open?id=0B1vThPiGBLYKWFZ6cjVGUlYzdkk.
Присоединяйтесь:
Instagram: dima3gub.
Группа ВК: http://vk.com/club18724635.
Twitter: https://twitter.com/dimatrygub.
Сайт: http://vectorguide.in.ua.
Регистрация на Shutterstock и Skrill:
http://submit.shutterstock.com/?ref=541585.
https://account.skrill.com/signup?rid=16097210
Видео взято с канала: vectorguide
Элементы инфографики: создаем круговую диаграмму
Освойте базовые навыки в веб-дизайне за 9 дней и научитесь создавать сочные элементы интерфейса в Figma и Photoshop https://wdi.design/webdesign_testdrive.
_
Материал курса WDI по веб-дизайну https://vk.com/wdi_webdesign.
Как создать круговую диаграмму в Photoshop CC.
ОБУЧАЮЩИЕ КУРСЫ:
Курс по Webflow → https://vk.com/intensive.webflow.
Учимся за 3 недели создавать адаптивные сайты.
Веб-дизайн Интенсив → https://vk.com/wdi_webdesign.
Освойте дизайн-процесс за 2 месяца, создайте портфолио из 10 работ и получите первые заказы или сильно прокачайте качество своих работ и уровень дохода, как веб-дизайнер..
О НАС:
За 5 лет существования школы провели 56 обучающих проектов, из них 28 Интенсивов по веб-дизайну. Выпустили 1000+ веб-дизайнеров. Кто-то из них открыл свои студии. Кто-то начал фрилансить, а кто-то устроился в крутые команды..
Отзывы учеников: http://vk.cc/5ly8HI.
Портфолио учеников: http://vk.cc/5m0Vtn.
ПОДПИСЫВАЙТЕСЬ!
ВКонтакте: https://vk.com/wdi.design.
Facebook: https://www.facebook.com/wdi.design/.
YouTube: https://www.youtube.com/channel/UCZ0aG61gdQT-I7ngy5nqPFQ
Видео взято с канала: WDI Design School
#25 Инструмент Круговая диаграмма / Pie chart in illustrator
Стань дизайнером мирового уровня.
Пошаговые действия здесь:.
http://sovisart.com/vill25.
Тема: Простые коллажи.
Программа: Adobe Illustrator.
Продолжительность: 12:45.
Сложность: ***.
В этом уроке создаем круговую диаграмму (Pie chart) и делаем для нее интересное оформление. Для этих задач в Illustrrator есть целая группа инструментов с различными версиями графиков и диаграмм, причем настраиваются они именно как математические (статистические) инструменты проценты, доли и тд. В том числе эти данные можно подгружать из внешних файлов. В этом уроке разбираем статическое оформление (разбираем диаграмму на элементы и работаем с ними по-отдельности). Возможна так же динамическая настройка диаграмм..
_
SOVISART в социальных сетях:
TELEGRAM.
http://t-do.ru/sovisartofficial.
YOUTUBE.
https://www.youtube.com/sovisart?sub_confirmation=1.
PINTEREST.
https://www.pinterest.ru/sovisart/.
FACEBOOK.
https://www.facebook.com/sovisart/.
VK.
https://vk.com/sovisart.
Tiktok.
tiktok.com/@sovisart.
_
Графический дизайн, UI/UX дизайн, анимация, фотография и ретушь, видео и монтаж, 3D моделирование интерьеров, создание сайтов, Pinblogger: стратегия продвижения в Pinterest
Adobe Illustrator круговая диаграмма
Создание псевдо объемной круговой диаграммы в Adobe Illustrator с использованием градиента.
Видео взято с канала: Desinjection
Уроки Adobe Illustrator. Урок №69: Как создавать инфографику в Adobe Illustrator. Часть 1
В этом уроке мы начнем создавать элементы инфографики. А также рассмотрим вопросы, какие использовать цвета и текст. Также создадим 5 иконок, которые будем использовать и в последующих уроках..
Ссылка для скачивания файла с шаблоном (Adobe Illustrator CC):.
https://drive.google.com/open?id=0B1vThPiGBLYKU2h3U3ZHcEM1d0k.
Ссылка для скачивания Adobe Illustrator CC: https://drive.google.com/open?id=0B1vThPiGBLYKWFZ6cjVGUlYzdkk.
Присоединяйтесь:
Instagram: dima3gub.
Группа ВК: http://vk.com/club18724635.
Twitter: https://twitter.com/dimatrygub.
Сайт: http://vectorguide.in.ua.
Регистрация на Shutterstock и Skrill:
http://submit.shutterstock.com/?ref=541585.
https://account.skrill.com/signup?rid=16097210
Видео взято с канала: vectorguide
Нет похожих статей
Вам также может понравиться
Вопрос: Как убрать белый фон в Microsoft Paint?
Вопрос: Как общаться только с девушками на Omegle?
Вопрос: Как объединить два изображения в Adobe Photoshop?
7 комментариев
Отменить ответ
Вот никогда не устану это повторять (чес.слово;)) ну просто обожаю Ваши уроки, Дмитрий:)! Учиться по ним одно удовольствие:)! Вот и этот урок тому подтверждение поймала себя на том, что ещё толком-то не просмотрела его до конца, я уже хочу поработать по нему, предвкушая отличное времяпрепровождение:)!
ОГРОМНОЕ СПАСИБО ВАМ, ДМИТРИЙ:).
Народ, этот и предыдущий пример показывают как сделать графику иллюстрационную, но не информационную. В примере как минимум нарушена пара законов Тафти. Главный из них «фактор лжи»: чем значение больше, тем линия длиннее. Здесь же пользователь должен сравнивать длины дуг, где две переменных радиус и градусы. Кроме того, нарушена непрерывность получения информации: сначала (слава направо) крупные цифры, затем назад к легенде и, наконец, через номера к линиям дуг. Самое простое и очевидное решение заменить порядковые номера на значение данных. При этом сделать увеличение от внутреннего к внешнему. Таким образом заставить «фактор лжи» работать на нас (длина дуги при этом будет математически лгать, но визуально становиться правдивой). В итоге иллюстрация станет инфографикой.
Мой комментарий нисколько не умаляет ни умения автора, ни -главное методики обучения. Это лишь уточнение.
Автор, если ты это читаешь то хочу предложить тебе изменить оформление канала, ведь оно какое то… простое что ли. Так как ты занимаешься вектором тебе думаю не будет сложно. Ведь смотря на оформление канала может меняться впечатление, если ты понимаешь о чём я. У тебя очень хорошо получается, удачи!
И снова отличный урок, Дмитрий:)! Смотреть+слушать+запоминать=удовольствие да и только:)! Однако…кое-что расстроило меня сильно:( вместо того, чтобы дать мне возможность скачать доп.файл к этому уроку, мой чудной браузер (Google Chrom) выдал следующее: «Требуется разрешение…Нет доступа. Свяжитесь с владельцем или войдите в аккаунт, у которого есть доступ». Предложил запросить разрешение ну я кнопочку «Запросить…» нажала и…теперь вот жду, то же будет дальше ;/…
Честно говоря, впервые за всё время с таким сталкиваюсь ;(!
Спасибо большое за очередной урок.
Дмитрий, подскажите, пожалуйста, можно ли использовать шрифт «Poiret One» в своих работах, которые впоследствии выкладываются на Шаттерсток? Не получит ли человек бан за использование данного шрифта?
И еще один вопрос о шрифте: есть ли где-нибудь список, скажем так, легальных шрифтов, на которые Шаттерсток не будет ругаться из-за авторских прав, или как узнать, что этот можно использовать, а этот нельзя?
Знаю, что были прецеденты, когда авторы использовали шрифт и получали бан из-за жалобы автора шрифта.
Отличный урок по созданию диаграмм. Приемы автоматического создания и использование ручного ввода параметров. Разгруппировка и колорирование).
https://drive.google.com/open?id=1xIc1E-YNLAVPT-53JzBiTTTXWCEX-UeE
Задания курса составлены очень удачно позволяют изучить и применить на практике базовые инструменты и основные эффекты программы: инструменты свободного рисования, текстовой редактор, работа с цветом, использование шаблонов и векторных эффектов а так же работа с растровой графикой.
Отличная база для дальнейшего самостоятельнго изучения и работы в программе.
Диаграммы
В Illustrator можно создавать диаграммы разных типов и настраивать их в соответствии со своими требованиями. Для просмотра всех типов диаграмм, которые можно создать, нажмите и удерживайте инструмент «Диаграмма» (
) на панели «Инструменты».
Создание диаграмм
Выберите инструмент «Диаграмма».
В инструменте «Диаграмма» сначала определите тип диаграммы для создания в Illustrator. Например, чтобы создать столбцовую диаграмму, выберите инструмент «Вертикальные полосы». Изменить тип диаграммы можно будет позже. Дополнительные сведения представлены в разделе Изменение типа диаграммы.
Определите размеры диаграммы одним из следующих способов:
Перетащите курсор по диагонали от угла, в котором должна начинаться диаграмма, до противоположного угла. Удерживая нажатой клавишу Alt (Windows) или Option (macOS), перетащите курсор, чтобы нарисовать диаграмму от ее центра. Удерживайте клавишу Shift, чтобы ограничить диаграмму квадратом.
Щелкните в том месте, где следует поместить диаграмму. Введите значения ширины и высоты диаграммы, затем нажмите кнопку ОК .
Примечание. Заданные размеры относятся к основной области диаграммы и не включают области меток и условные обозначения.
Введите данные для диаграммы в окне «Данные диаграмм». Дополнительные сведения представлены в разделе Ввод данных диаграммы.
Данные диаграммы должны быть организованы определенным образом в зависимости от типа диаграммы.
Нажмите кнопку «Применить» и нажмите клавишу Enter на цифровой клавиатуре, чтобы создать диаграмму.
Окно «Данные диаграмм» останется открытым, пока вы его не закроете. Это позволяет легко переключаться между редактированием данных диаграммы и работой в монтажной области.
Ввод данных диаграммы
Для ввода данных используется окно «Данные диаграмм». Это окно автоматически выводится на экран при использовании инструмента «Диаграммы» и остается открытым до принудительного закрытия.
Текстовое поле ввода
Импорт данных, сохраненных, как текстовый файл
Поменять местами столбцы и строки
Поменять местами оси X и Y
Отмена изменений, внесенных в данные диаграммы
Применение изменений, внесенных в данные диаграммы
Чтобы вывести окно «Данные диаграмм» для существующей диаграммы, выделите всю диаграмму с помощью инструмента «Выделение» и выберите команду Объект > Диаграмма > Данные .
Введите данные одним из способов.
Выберите ячейку таблицы и введите данные в текстовое поле вверху окна. Нажмите клавишу Tab , чтобы ввести данные и выбрать следующую ячейку в строке. Нажмите клавишу Enter или Return , чтобы ввести данные и выбрать следующую ячейку в столбце. Пользуйтесь клавишами со стрелками для перехода от ячейки к ячейке или просто нажмите другую ячейку, чтобы ее выбрать.
Скопируйте данные из электронных таблиц, например Lotus® 1‑2‑3 или Microsoft Excel. В окне «Данные диаграмм» нажмите ячейку, чтобы сделать ее левой верхней ячейкой для вставляемых данных, и выберите команду Редактирование > Вставить .
Создайте текстовый файл с помощью текстового редактора. При вводе разделяйте данные, содержащиеся в разных ячейках, символом табуляции, и разделяйте строки знаком конца абзаца. Данные должны содержать только десятичные точки или десятичные запятые, в противном случае они не будут отображаться на диаграмме. (Например, следует вводить 732000, а не 732,000.) В окне «Данные диаграмм» нажмите ячейку, чтобы сделать ее левой верхней ячейкой для импортированных данных, нажмите кнопку «Импорт данных» ( 
) и выберите текстовый файл.
- Если данные диаграммы случайно были введены в обратном порядке (то есть строки вместо столбцов или наоборот), нажмите кнопку «Поменять местами» (
), чтобы поменять местами столбцы и строки данных. - Чтобы поменять местами оси X и Y на точечной диаграмме, нажмите кнопку «Поменять местами» (
) .
Нажмите кнопку «Применить» или нажмите клавишу Enter на цифровой клавиатуре, чтобы создать диаграмму.
Использование меток диаграммы и наборов данных
Метки — это слова или числа, описывающие следующее:
- наборы данных, которые требуется сравнить,
- категории, в рамках которых следует производить сравнение.
A. Метки набора данных наборов данных B. Пустая ячейка C. Метки категорий
Метки наборов данных
Введите метки для разных наборов данных в верхнюю строку. Эти метки появятся в условных обозначениях.
Чтобы создать условные обозначения для диаграммы, оставьте пустой левую верхнюю ячейку.
Введите метки для категорий в ячейки самого левого столбца.
Ввод меток
Для диаграмм «вертикальные полосы», «вертикальный стек», «горизонтальные полосы», «горизонтальный стек», «радар», линейных и комбинированных гистограмм метки следует вводить в таблицу следующим образом.
Для создания условных обозначений к диаграмме в программе Illustrator удалите содержимое левой верхней ячейки и оставьте ее пустой.
Введите метки для разных наборов данных в верхнюю строку. Эти метки будут использованы в условных обозначениях. Если не требуется создавать условные обозначения к диаграмме с помощью программы Illustrator, не вводите метки для наборов данных.
Введите метки для категорий в ячейки самого левого столбца. В качестве категорий часто выбираются единицы времени, например дни, месяцы или годы. Эти метки располагаются вдоль горизонтальной или вертикальной оси диаграммы, за исключением диаграммы «радар», на которой эти метки расположены на отдельной оси.
Для создания меток, состоящих только из чисел, заключите числа в прямые кавычки. Например, чтобы использовать в качестве метки 2013 год, введите «2013».
Для включения в метки разрывов строк используйте для разделения строк вертикальную черту. Например, введите Все|продажи|2013 для получения следующей метки диаграммы:
Ввод наборов данных
После ввода меток диаграммы можно ввести каждый набор данных в соответствующий столбец.
Высота столбца соответствует сравниваемому значению. Можно совместно использовать положительные и отрицательные значения. Отрицательные значения изображаются в виде столбцов ниже горизонтальной оси.
Высота столбца соответствует сравниваемому значению. Для вертикального стека все числа должны быть или положительными, или отрицательными.
Длина полосы соответствует сравниваемому значению. Можно сочетать положительные и отрицательные значения. Отрицательные значения изображаются в виде столбцов ниже горизонтальной оси.
Длина полосы соответствует сравниваемому значению. Для горизонтального стека все числа должны быть или положительными, или отрицательными.
Каждый столбец данных соответствует одной линии линейной диаграммы. Для линейной диаграммы можно совместно использовать положительные и отрицательные значения.
Значения должны быть или положительными, или отрицательными. Каждая строка данных соответствует заполненной области диаграммы с областями. На диаграмме с областями значения каждого столбца добавляются к сумме предыдущих столбцов. Таким образом, даже если диаграмма с областями и линейная диаграмма содержат одинаковые данные, они сильно отличаются.
Точечная диаграмма отличается от других типов диаграмм тем, что обе оси служат мерами значений, а категории отсутствуют.
- Введите метки наборов данных в каждую ячейку верхней строки таблицы, начиная с первой ячейки. Эти метки будут использованы в условных обозначениях.
- Введите данные для оси Y в первом столбце, а данные для оси X во втором столбце.
Примечание. Отключите режим Соединить точки , чтобы удалить соединительные линии.
Наборы данных для круговых диаграмм можно организовать аналогично данным для других диаграмм. Однако каждая строка данных в таблице создает отдельную диаграмму.
- Введите метки наборов данных, как для диаграммы «вертикальные полосы», «вертикальный стек», «горизонтальные полосы», «горизонтальный стек», «радар», линейной диаграммы и диаграммы с областями. Чтобы создать имена диаграмм, введите метки категорий.
- Чтобы создать одиночную круговую диаграмму, выведите одну строку данных, содержащую только положительные или только отрицательные значения.
- Чтобы создать несколько круговых диаграмм, выведите дополнительные строки данных, содержащие только положительные или только отрицательные значения. По умолчанию размер отдельных круговых диаграмм пропорционален сумме всех данных диаграммы.
Каждое число выводится по оси и соединяется с другими значениями на той же оси, образуя «паутину». Для диаграммы «радар» можно совместно использовать положительные и отрицательные значения.
Настройка ширины столбца или количества знаков после запятой
Настройте ширину столбца, чтобы просматривать больше или меньше цифр в столбце. Это изменение не влияет на ширину столбцов в диаграмме.
Настройка ширины столбца
Выполните одно из следующих действий:
Нажмите кнопку «Стиль ячейки» (
) и введите значение от 0 до 20 в текстовом поле «Ширина столбца».
Установите курсор на границу столбца, ширину которого следует изменить. Курсор превратится в двойную стрелку . Затем перетащите маркер в нужное место.
Настройка в текстовом поле «Ширина столбца», чтобы в столбце отображалось меньше цифр
Настройка в текстовом поле «Ширина столбца», чтобы в столбце отображалось больше цифр
Настройка количества знаков после запятой
Нажмите кнопку «Стиль ячейки» () и введите в текстовое поле «Количество знаков после запятой» значение от 0 до 10.
Если по умолчанию задано 4 десятичных знака, введенное в ячейке число 2000 появляется в окне «Данные диаграмм», как 2000.00.
Если по умолчанию задано 2 десятичных знака, введенное в ячейке число 2000 появляется в окне «Данные диаграмм», как 2000.0000.
Комбинирование разных типов диаграмм
Диаграммы разных типов можно сочетать в одной диаграмме. Например, можно отображать один набор данных в виде столбцовой диаграммы, а другие наборы данных в виде линейных диаграмм. Можно совместно использовать любые типы диаграмм, за исключением точечных. Точечные диаграммы не комбинируются с диаграммами других типов.
Выберите инструмент «Групповое выделение» (
).
Выполните одно из следующих действий:
- Выберите Объект > Диаграмма > Тип .
- Дважды нажмите инструмент «Диаграмма» на панели «Инструменты».
- Если используется несколько типов диаграмм, можно расположить один набор данных вдоль правой оси, а остальные наборы данных вдоль левой оси. Таким образом на каждой оси будут откладываться значения своих данных.
- При использовании вертикального стека совместно с другими типами диаграмм убедитесь, что используете одну ось для всех наборов данных, отображаемых на вертикальных стеках. Если одни наборы данных используют левую ось, а другие правую, высота столбцов может быть неправильной или перекрываться.
Форматирование и настройка диаграмм
Диаграммы можно форматировать разными способами. Например, можно изменять внешний вид и положение осей диаграммы, добавлять падающие тени и перемещать условные обозначения.
Кроме того, можно изменить цвет теней, гарнитуру и вид шрифта, переместить, зеркально отразить, наклонить, повернуть или изменить масштаб любой части диаграммы или всех частей, а также настроить вид столбцов и отметок. В диаграммах можно использовать прозрачность, градиенты, переходы, мазки кистью, стили графики и другие эффекты. Такие настройки следует применять в конце работы, потому что перерисовка диаграммы приводит к их удалению.
Диаграмма — это сгруппированный объект, связанный со своими данными. Может оказаться, что, разгруппировав диаграмму, не удастся внести необходимые изменения. Для редактирования выберите ту часть диаграммы, которую следует изменить, не разгруппировывая диаграмму. Используйте инструмент «Прямое выделение» (
) или «Групповое выделение» ().
Элементы диаграммы связаны друг с другом. Вся диаграмма вместе с условными обозначениями представляет собой одну группу. Все наборы данных являются подгруппой диаграммы. В свою очередь каждый набор данных вместе со своим полем условных обозначений является подгруппой всех наборов данных. Каждое значение является подгруппой своего набора данных и т. д. Никогда не разгруппировывайте и не перегруппировывайте объекты в диаграмме.
Выберите инструмент «Групповое выделение» ().
Как разобрать диаграмму в иллюстраторе
- 6 591
В этом уроке вы узнаете, как нарисовать круговую диаграмму в Illustrator. Для работы мы будем использовать специальный инструмент – Pie Graph Tool (Круговая диаграмма), благодаря которому полученный результат можно будет легко настроить под свои нужды. Также вы узнаете, как изменить внешний вид диаграммы, создать легенду и простой фон.
На сайте GraphicRiver вы можете найти множество дополнительных ресурсов для работы, в том числе различные графики и диаграммы.
Создаем новый документ и график
Шаг 1
Жмем сочетание клавиш Ctrl+N, чтобы создать новый документ. В выпадающем меню Units (Единицы измерения) выбираем Pixels (Пикселы), затем вводим ширину 850 пикселей и высоту – 980, затем нажимаем на кнопку Advanced (Дополнительно). Color Mode (Цветовой режим) устанавливаем на RGB, Raster Effects (Растровые эффекты) – на Screen (72 ppi) (Экранное) и жмем кнопку Create Document (Создать документ).
Далее активируем сетку View – Show Grid (Просмотр – Показать сетку) и привязку View – Snap to Grid (Просмотр – Привязать к сетке). Чтобы настроить сетку, переходим в меню Edit – Preferences – Guides & Grid (Редактирование – Установки – Направляющие и сетка). В поле Gridline every (Линия через каждые) вводим 10, а в Subdivision (Внутреннее деление на) – 1. Сетка облегчит нам работу, а если вы хотите ее отключить/включить, то воспользуйтесь комбинацией клавиш Ctrl+”.
Также нам нужно открыть панель Window – Info (Окно – Информация), чтобы в реальном времени видеть размеры и положение объектов композиции. Не забудьте установить единицы измерения на пикселы Edit – Preferences – Units (Редактирование – Установки – Единицы измерения). Все эти параметры необязательны, но они значительно ускорят рабочий процесс.
Шаг 2
Переходим на панель инструментов и дважды кликаем по Pie Graph Tool (Круговая диаграмма), чтобы открыть диалоговое окно Graph Type (Тип диаграммы). Выбираем значения, указанные ниже, и жмем ОК.
Ставим галочку напротив First Column in Front (Первый столбец на переднем плане)
В меню Legend (Легенда) выбираем Legends in Wedges (Легенды на врезках)
Шаг 3
Проверяем, чтобы инструмент Pie Graph Tool (Круговая диаграмма) был выбран и просто кликаем по рабочей области мышкой, чтобы открыть окно Graph (Диаграмма). Устанавливаем Width/Height (Ширина/Высота) на 450 пикселей и жмем ОК.
Появится следующее окно, в котором нам нужно ввести данные. Для примера вписываем туда цифры со скриншота ниже. Закончив, нажимаем кнопку с галочкой в правом верхнем углу. Размещаем созданную диаграмму примерно, как показано ниже.
Как настроить диаграмму
Шаг 1
Активируем Direct Selection Tool (A) (Прямое выделение), выделяем часть диаграмма, показанную ниже на скриншоте, и переходим на панель Window – Appearance (Окно – Оформление).
Удаляем обводку и выбираем заливку. Устанавливаем ее цвет на R=255 G=190 B=123 и переходим Effect – Distort & Transform – Transform (Эффект – Исказить и трансформировать – Трансформировать). Передвигаем ползунок Move – Vertical (Перемещение – По вертикали) на -1 пиксель и в поле Copies (Копии) вводим 15. Жмем ОК, чтобы применить изменения. Возвращаемся на панель Appearance (Оформление) и нажимаем на кнопку Add New Fill (Добавить новую заливку), чтобы добавить новую заливку. Выбираем ее, меняем цвет на R=255 G=223 B=153 и переходим Effect – Distort & Transform – Transform (Эффект – Исказить и трансформировать – Трансформировать). Передвигаем ползунок Move – Vertical (Перемещение – По вертикали) на -15 пиксель. Закончив, жмем ОК.
Шаг 2
С помощью Direct Selection Tool (A) (Прямое выделение) поочередно выбираем каждую часть диаграммы и меняем их цвета, как показано ниже на скриншоте. Также не забываем удалить обводку.
Шаг 3
Активируем инструмент Group Selection Tool (Групповое выделение) и выбираем одну из цифр на диаграмме. Затем снова кликаем по той же цифре, чтобы выбрать все цифры одновременно.
Открываем панель Window – Type – Character (Окно – Текст – Символ) и выбираем шрифт Alma Mono Heavy. Устанавливаем размер на 25 пикселей и выбираем белый цвет R=255 G=255 B=255.
Как нарисовать круговую диаграмму: оформляем фон
Шаг 1
Берем Move Tool (V) (Перемещение), выбираем всю диаграмму и переходим на панель Appearance (Оформление).
Добавляем новую заливку, выбираем ее и проверяем, чтобы она находился ниже раздела Contents (Содержимое). Устанавливаем цвет заливки на R=255 G=242 B=236 и переходим Effect – Convert to Shape – Ellipse (Эффект – Преобразовать в фигуру – Эллипс). Ставим галочку напротив Absolute (Абсолютная), устанавливаем Width/Height (Ширина/Высота) на 500 пикселей и жмем ОК. После этого переходим Effect – Distort & Transform – Transform (Эффект – Исказить и трансформировать – Трансформировать). Передвигаем ползунок Move – Vertical (Перемещение – По вертикали) на 7 пикселей. После этого добавляем тень Effect – Stylize – Drop Shadow (Эффект – Стилизация – Тень). Вводим значения, как показано ниже, и жмем ОК.
- Mode (Режим): Normal (Нормальный)
- Opacity (Непрозрачность): 100%
- X Offset (Сдвиг по оси X): 0
- Y Offset (Сдвиг по оси Y): 1
- Blur (Размытие): 0
- Цвет: R=255 G=255 B=255
Шаг 2
Проверяем, чтобы была выбрана вся диаграмма и продолжаем работу на панели Appearance (Оформление). Добавляем вторую заливку и размещаем ее под первой.
Переключаем цвет новой заливки на R=255 G=82 B=119, уменьшаем Opacity (Непрозрачность) до 30% и переходим Effect – Convert to Shape – Ellipse (Эффект – Преобразовать в фигуру – Эллипс). Ставим галочку напротив Absolute (Абсолютная), устанавливаем Width/Height (Ширина/Высота) на 440 пикселей и жмем ОК. После этого переходим Effect – Distort & Transform – Transform (Эффект – Исказить и трансформировать – Трансформировать). Передвигаем ползунок Move – Vertical (Перемещение – По вертикали) на 45 пикселей. После этого добавляем размытие Effect – Blur – Gaussian Blur (Эффект – Размытие – Размытие по Гауссу). Устанавливаем Radius (Радиус) на 15 пикселей и жмем ОК.
Шаг 3
Проверяем, чтобы была выбрана вся диаграмма и продолжаем работу на панели Appearance (Оформление). Добавляем третью заливку и размещаем ее над первой.
Переключаем цвет новой заливки на R=255 G=82 B=119, уменьшаем Opacity (Непрозрачность) до 50% и переходим Effect – Convert to Shape – Ellipse (Эффект – Преобразовать в фигуру – Эллипс). Ставим галочку напротив Absolute (Абсолютная), устанавливаем Width/Height (Ширина/Высота) на 350 пикселей и жмем ОК. После этого переходим Effect – Distort & Transform – Transform (Эффект – Исказить и трансформировать – Трансформировать). Передвигаем ползунок Move – Vertical (Перемещение – По вертикали) на 35 пикселей. После этого добавляем размытие Effect – Blur – Gaussian Blur (Эффект – Размытие – Размытие по Гауссу). Устанавливаем Radius (Радиус) на 15 пикселей и жмем ОК.
Создаем легенду
Шаг 1
Берем Rectangle Tool (M) (Прямоугольник), создаем прямоугольник размером 510 х 80 пикселей и размещаем его под диаграммой. Проверяем, чтобы фигура была выбрана, и переходим на панель Appearance (Оформление).
Выбираем заливку, меняем ее цвет на R=255 G=242 B=236 и переходим Effect – Stylize – Rounded Corners (Эффект – Стилизация – Скругленные углы). Устанавливаем Radius (Радиус) на 40 пикселей и жмем ОК. После этого переходит Effect – Stylize – Drop Shadow (Эффект – Стилизация – Тень), вводим значения, как на скриншоте ниже, и жмем ОК.
Шаг 2
Проверяем, чтобы фигура была выбрана, и переходим на панель Appearance (Оформление). Добавляем вторую заливку и размещаем ее под первой.
Меняем ее цвет на R=255 G=82 B=119 и уменьшаем непрозрачность до 30%. Затем переходим Effect – Stylize – Rounded Corners (Эффект – Стилизация – Скругленные углы) и устанавливаем Radius (Радиус) на 40 пикселей. После этого применяем Effect – Distort & Transform – Transform (Эффект – Исказить и трансформировать – Трансформировать). Вводим значения, показанные ниже. В конце добавляем размытие Effect – Blur – Gaussian Blur (Эффект – Размытие – Размытие по Гауссу). Устанавливаем Radius (Радиус) на 15 пикселей и жмем ОК.
Шаг 3
Для данного шага нам нужно изменить настройки сетки. Переходим Edit – Preferences – Guides & Grid (Редактирование – Установки – Направляющие и сетка) и устанавливаем Gridline every (Линия через каждые) на 5.
Берем Ellipse Tool (L) (Эллипс) и создаем окружность диаметром 60 пикселей (цвет не имеет значение). Затем активируем Rectangle Tool (M) (Прямоугольник) и создаем квадрат шириной 30 пикселей. Размещаем квадрат поверх окружности, как показано ниже. Меняем его цвет на R=255 G=190 B=123. Выбираем обе фигуры и на панели Window – Pathfinder (Окно – Обработка контуров) нажимаем на кнопку Intersect (Пересечение).
Шаг 4
Выбираем четвертинку окружности и размещаем ее на прямоугольнике, как показано ниже.
Шаг 5
Три раза дублируем фигуру, распределяем копии, как показано ниже, и меняем их цвета.
Шаг 6
Переходим на панель инструментов и устанавливаем цвет переднего плана на R=178 G=70 B=116. Затем на панели Character (Символ) выбираем шрифт Auro и устанавливаем размер текста на 16 пикселей.
Берем Type Tool (T) (Текст), кликаем по рабочей области и пишем название цвета рядом с первой четвертинкой. Добавляем подписи к другим фигурам.
Шаг 7
Выбираем все четыре фигуры и переходим Effect – Stylize – Drop Shadow (Эффект – Стилизация – Тень). Устанавливаем значения, как показано ниже, и жмем ОК.
Создаем простой фон
Берем Rectangle Tool (M) (Прямоугольник) и создаем фигуру размером 870 х 1000 пикселей. Заливаем ее цветом R=255 G=255 B=250. Проверяем, чтобы она покрывало всю монтажную область, и переносим на задний план (Shift+Ctrl+[).
Поздравляю, мы закончили!
Ниже можете посмотреть финальный результат. Теперь вы знаете, как нарисовать круговую диаграмму в Illustrator. Надеюсь, вам понравился этот урок, и вы найдете применение полученным знаниям. Делитесь своими результатами ниже в комментариях.
Не бойтесь экспериментировать и менять настройки диаграммы, чтобы получить свой авторский дизайн. Больше ресурсов для работы вы найдете на сайте GraphicRiver. Приятного творчества!
Создаем объемную диаграмму в иллюстраторе
Share this.
Если в вашей работе вы используете диаграммы и другие графики, то вам будет полезно научится создавать собственную диаграмму.
Больших познаний при создании диаграммы не потребуется, с этим может справится и новичок.
Выбираем инструмент «Круговая диаграмма». Устанавливаем ее размер. В открывшейся таблице указываем значение для каждой части диаграммы.
Разгруппируем нашу диаграмму что бы была возможность редактировать каждый сегмент по отдельности.
Сперва соглашаемся с условиями в окне, а после еще раз разгруппируем.
Применяем эффект вытягивания и скоса со следующими параметрами.
Сохраним наши параметры как новый графический стиль. Для этого не снимая выделения переходим в панель «Стили графики» и создаем новый стиль.
После можем применить наш стиль к остальным частям диаграммы.Так же размещаем каждый кусок на расстоянии друг от друга для лучшего эффекта.
Вот потратив буквально за несколько минут, мы смогли создать собственную объемную диаграмму.