Иллюстратор. УРОКИ от feola.

[feola]

В последнее время заинтересовалась Adobe Illustrator. Знаю очень немного, но может кому пригодится.
Как в Photoshop перенести любую векторную иллюстрацию, сохранив слои.
Если кратко:
1. Выделяем слой (если несколько слоев, то объединяем их в один во вкладке СЛОИ), чтобы выделись все элементы в объекте;
2. В панели ОБЪЕКТ находим "Разгруппировать" и жмём до тех пор, пока слои не разгруппируются;
3. Когда слои разгруппируются, опять выделяем весь вектор, идём в закладку СЛОИ - распределить по слоям (упорядочить);
4. Всё. Далее Файл - ЭКСПОРТ, сохранение в формате PSD для Photoshop (в табличке параметров активировать кнопку "Сохранить слои";
5. Открываем Photoshop, загружаем файл. Получился многослойный документ, с которым делайте что хотите.
6.По желанию можете поменять CMYK на RGB/

Если подробно, то

Свёрнутый текст: развернуть

1. Картинка. Тип файла Eps, Ai



2. Открываем программу Adobe Illustrator. Файл – Открыть



3. Выделяем персонаж. Или в слоях, нажимая на нужный слой, чтобы кружочек на слое «активировался», или инструментом «Лассо», «Стрелка». Создаём новый документ Ctrl+N, копируем персонаж Ctrl+C и вставляем его в новый документ Ctrl+V.



4. Обрезаем документ. Объект – Монтажные области – Обрезать по границам выделенной иллюстрации.



5. Смотрим какого размера у нас рисунок. Файл – Сохранить для Интернета.



6. Внимание! Надо учитывать, что при открытии в Photoshop, с родными размерами из Иллюстратора, файл увеличится примерно в два раза. Поэтому решайте сами, какого размера файл вам нужен.



7. Если это необходимо, то увеличьте масштаб. Объект – Трансформировать – Масштабировать.



8. В окошке меняете масштаб на нужный вам.





9. Выделяем объект и повторяем действие Объект – Монтажные области – Подогнать по границам выделенной иллюстрации



10. А, теперь главное, ради чего этот урок. Из Иллюстратора ПОСЛОЙНО в Photoshop. Выделяем слой так, чтобы справа увеличился кружок, при этом у вас выделится весь объект. Объект – Разгруппировать или сочетанием клавиш Shift + Ctrl +G. Это действие повторяем, пока кнопка не станет активной и слои, соответственно разгруппируются.



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



12. Переходим во вкладку Слои (см скрин). Нажимаем на треугольник, раскроется меню Слои – Распределить по слоям (упорядочить)


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






14. Сохраняем файл для фотошопа. Файл - Экспорт



ПАРАМЕТРЫ выставляем , как на табличке.



15. Открываем Photoshop и загружаем в него наш файл. Персонаж разделен на элементы.
Инструментом СТРЕЛКА, которая должна быть активирована, выбираем нужные элементы, например для глаз, собираем их в группы. Ненужные – удаляем, нужные объединяем. Всё в ваших силах!



Примечание. При загрузке в Photoshop, персонаж объединён в группу. Для работы лучше её разгруппировать. Если захотите, то потом создадите свою группу.
Ещё. С Иллюстратора персонаж пришёл со цветовой схемой CMYK. При желании – режим поменяйте на RGB

Доп.материал. Исходники к уроку https://yadi.sk/d/f4IwyhensHZzb
Скрины в архиве https://yadi.sk/d/IlHiXkM8sHV42
Урок в формате PDF https://yadi.sk/i/SSklVV6BsHrJH

КАК в многослойном документе ИЛЛЮСТРАТОРА найти нужный слой

Превью

Свёрнутый текст: развернуть

P.S. Могла напутать при вставке скринов. Если что не так, то напишите. Исправлю.

[feola]

Иногда, просто необходим небольшой цветок, самой простой формы, без всяких наворотов.
Применение ему можно найти везде. Просто цветок, без искажения, стеблей, листьев. Например, для фона, узоров, кистей...
Как его нарисовать в Иллюстраторе, сохранить в разных форматах (PNG, PSD), а так же как перенести рисунок со слоями из Иллюстратора в Photoshop, чтобы применить к нему различные эффекты, этот урок.

РИСУЕМ простой стилизованный ЦВЕТОК в Иллюстраторе


Оглавление:
1 - 15. Рисование векторного цветка.
16 - 18. Сохранение на прозрачном фоне в формате PNG
19 - 25. Сохранение в формате PSD (Photoshop) для последующего редактирования
27. Рисование стебля, листьев в иллюстраторе
28. Рисование цветка в Photoshop с помощью градиента. Ссылка на урок

Кратко, как рисовать цветок. Многоугольник (кол-во граней); Эффекты - исказить/трансформировать - Втягивание раздувание; Оъект - Разобрать оформление.

Свёрнутый текст: развернуть

P.S. Если кликнуть по картинке, то она увеличивается.


1. Открываем новый документ. Файл - Новый. Размеры произвольные.



2. В правой боковой панели, в инструменте "Прямоугольник", открываем подменю (маленький треугольничек) , выбираем "Многоугольник".



3. Кликаем посредине документа, откроется окошко, в котором заполняем число сторон 3..., 6..., 12... (любое), а так же радиус - это будет размер цветка, который при желании можно будет изменить (или увеличить или уменьшить)


4. Я выбрала 12, R=100 px, цвет голубой.



5. Выделяем слой (черная стрелка - V), кликнув на фигуре.
6. Далее идём в Эффекты - Исказить и трансформировать - Втягивание и раздувание.



7. Появится окошко. Обязательно поставьте галочку "Просмотр" и начинайте двигать ползунок вправо. Результат вас удивит и вдохновит!



8. Полюбовавшись своим творением, нажимаем ОК и идём Объект - Разобрать оформление.



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



В принципе, цветок готов. Добавить сердцевинку и сохранить в формате PNG.

10. Давайте теперь его исказим!

Переходим опять в Эффекты - Исказить трансформировать - Произвольное искажение



11. Появится небольшое окошко с контурами нашего цветка. Манипулируя точками, искажаем форму, как вам хочется. Не понравилось, нажмите "Восстановить". Или, если случайно закрыли окошко, то CTRL+Z всегда поможет, отменить операцию (как в фотошопе) или Редактирование - откат.



12. После завершения всех манипуляций - Объект - Разобрать оформление (обязательно!)



13. Получится примерно так



14. Добавляем к цветку сердцевину . Инструмент "Овал", цвет жёлтый.



15. Уменьшаем размер файла, отрезаем лишнее. Объект - Монтажные области - Подогнать по границам иллюстрации



16. Сохранение в формате PNG

Файл - Сохранить для интернета



17. Появится окно "Сохранить для WEB". Размер выставляйте такой, какой вам необходим.
Чтобы размеры менялись пропорционально, замочек должен быть включен.



18. Далее обычные, привычные операции по сохранению



19. Сохранение в формате PSD (Photoshop)

Есть некоторые ньюансы. Смотрите внимательней. Первое, что мы делаем, выделяем главный слой. Если нет значка слои в панельке или не знаете где они, найти легко Окно - Слои



20. В правом верхнем углу, есть треугольник , нажимаем на него, откроется меню окна Слои - Распределить по слоям (упорядочить)



21. Слои разделились на подслои



22.Выделяем (опять) главный слой. У каждого слоя, появилось своё цветовое обозначение



23. Теперь переходим к сохранению в формат PSD (Photoshop).

Файл - Экспорт



24.


25. Появится окно. Обязательно выделите строчку "Сохранить слои" . Жмём ОК.



26. Переходим в Photoshop. Открываем сохранённый файл. Во вкладке слое появилась группа, раскрываем её. Теперь можно редактировать. Можно перекрасить, добавить тени, стили и т.д.



27. Рисование стебля, листьев в иллюстраторе

1. Рисуем пером будущий стебель. Заливка отключена. Контур - цвет. Обводка (Окно - обводка) - толщина контура, профиль контура.



2. Рисуем листья. Овал. Заостряем уголки. Заливка включена. Трансформируем, масштабируем. При желании, листья также можно исказить с помощью Эффекты - Исказить трансформировать - Произвольное искажение. После чего, обязательно, Объект - Разобрать оформление.



Вот и всё. Написано много, а делается очень-очень быстро. Надеюсь, что кому-нибудь пригодится.
Старалась сделать скриншоты и описание максимально подробно, чтобы даже первому открывшему Иллюстратор, было понятно, где какую кнопочку нажать. Если, что непонятно ( или вдруг пропустила нечаянно ) спрашивайте - отвечу.

28. Как нарисовать в фотошопе цветок. Есть неплохой урок https://drive.google.com/file/d/0B9gOsM ... ZiNkk/view

[cvejiiveter]

Оль, какая же ты молодчинка!
Уроки по Иллюстратору - это очень актуально.

[калина]

Оленька,большое спасибо за нужный урок!

[Inina]

feola, спасибо большое за такой полезный урок. Рисовала цветок и повизгивала от удовольствия. А стебель нарисовать не могу. Выбрала все настройки как у Вас. Но наверное что-то делаю не правильно. У меня получается или прямая линия или кривая, но не то что надо. Заданный профиль не получается. Ой, пока писала как-то получилось. Повторить не могу... Подскажите, пожалуйста, что я делаю не так.

[feola]

стебель нарисовать не могу

Всё получится!
Алгоритм действий:
1. Заливка 0, обводка - цвет ;
2. Выбираем инстр. Перо;
3. Рисуем Пером профиль (дуга, прямая линия...), как в фотошопе;

Свёрнутый текст: развернуть

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

Свёрнутый текст: развернуть

[Inina]

Оля, спасибо большое, все получилось!
Я хотела сначала выставить размер обводки и профиль, а потом провести линию нужного профиля. А надо было все наоборот делать. Вот у меня и получалась только линия. Теперь все поняла.
Еще уроки будут? Очень интересно!

[feola]

Я хотела сначала выставить размер обводки и профиль

Нина! Молодец! Всё получается!
Если вы сделали обводку на цветке, то, по идее, нужно и на стебле с листьями её применить! После того, как вы нарисовали контур пером, применили профиль, идём в Объект - разобрать оформление. Ваш контур станет просто фигурой с кривыми линиями и теперь можете применить обводку той же толщины, как и на цветке
Насчёт уроков постараюсь, что-нибудь придумать. Я сама в процессе изучения иллюстратора и он мне нравится

[feola]

Как нарисовать пасхальное яйцо в иллюстраторе

(Урок для начинающих изучать иллюстратор)

В уроке создадим изображение 3d яйца, научимся создавать и редактировать символы, а так же редактировать узоры из программы "под себя".



Если кратко:
1. Рисуем профиль предмета;
2. Выбираем рисунок/узор/символ для проецирования на предмет (пункт не обязателен для применения), но можно обойтись без него;
3. Эффекты - Объёмное изображение - Вращение;
4. Параметры вращения 3d изображения - Проецирование;
5. Добавление теней, бликов к предмету.

Содержание:
Шаг 1. Создание документа;
Шаг 2. Подготовка. Рисовка контура будущего 3d предмета;
ШАГ 3. Палитра объёмное изображение;
ШАГ 4. Создание символа;
ШАГ 5. Раскраска яйца. Проецирование картинки на предмет. Тень;
ШАГ 6. Создание символа из узоров программы. Редактирование узоров;
ШАГ 7. Редактирование символов. Восстановление рисунка.


ШАГ 1. Создание документа

Свёрнутый текст: развернуть

Создать новый документ. Размер 500*500 px, режим RGB



1.1 Выбираем инструмент "Эллипс"

заливка (активная), контур - отключен

ШАГ 2. Подготовка. Рисовка контура будущего 3d предмета.

Свёрнутый текст: развернуть

Рисуем, с зажатой клавишей Shift , правильный круг


Выделяем верхнюю точку, зажимаем клавишу Shift, вытягиваем вверх, формируя форму яйца.



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

2.1 Далее выбираем инструмент ножницы ( С) и удаляем половину яйца.

ШАГ 3. Объёмное изображение

Свёрнутый текст: развернуть

3.1 Меняем местами заливку и контур



Получится так.



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

3.2 Переходим, собственно, к рисованию яйца!
В верхней панели Эффект - Объёмное изображение - Вращение



3.3 Появится окно "Параметры вращения 3d изображения" . Обязательно ставим галку Просмотр.



Значения выставляем, как на скрине. (Впоследствии, можно и самим подвигать ползунки, посмотреть, какой вариант лучше).
Не забудьте про источники света. Добавляется второй источник просто, нажимая на иконку (удалить - корзина).

На втором источнике ( по желанию) меняем значение "Интенсивности освещения" - ведь от поверхности, на которой лежит яйцо, так же идёт свечение. Пр включенном "Просмотре", можно видеть , как изменилось наше яйцо!
Жмём ОК.



3.4 Давайте отредактируем контур. Можно подвигать манипуляторы. Вдруг вас что-то не устраивает!
Помните, что манипуляторы, должны быть или строго горизонтальны или вертикальны!

У нас, до сих пор, только одна половинка контура. так сказать виртуальное яйцо. Яйцо, вроде есть, но его нет! Проверить легко, нажав сочетание клавиш CTRL + Y . Это окно контуров, без заливок и прочего. Вернуть прежнее состояние - те же клавиши CTRL + Y.
Если не нравится цвет - меняем цвет. Я сделала посветлее.



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

ШАГ 4. Создание символа.

Свёрнутый текст: развернуть

Цветок мы умеем рисовать. Если есть в запасе, сохранённый в AI формате, открываем файл, копируем из него цветок и вставляем в наш документ.
Или быстро что-нибудь рисуем.

Напомню, как рисуется быстро цветок . Многоугольник (кол-во граней); Эффекты - исказить/трансформировать - Втягивание раздувание; Оъект - Разобрать оформление.
Для работы понадобится или один цветок, или группа. Скопируйте или Редактирование - Копировать (CTRL +C) - Вставить (CTRL+ V); или путём перетягивания с нажатой клавишей ALT, масштабируем. Получаем несколько. Выделяем их, группируем CTRL + G



4.1 Открываем вкладку "Символы". Окно-Символы.



4.2 Перетягиваем в него группу цветов. В окне "Параметры символа" пишем только имя, более ничего не меняем!



В палитре символов появился новый символ (со знаком +).

Примечание. С рабочего стола удаляем цветы, они больше не нужны!

ШАГ 5. Раскраска яйца. Проецирование картинки на предмет

Свёрнутый текст: развернуть

Чтобы вернуться к редактированию 3d яйца, открываем палитру Оформление. Окно - Оформление .
Это окно просто великолепно! Запомните его! Здесь отражаются все действия, эффекты, которые вы выполняли на определенном слое. Главное, чтобы слой был активен!


5.1 Выделяем слой с яйцом. В окне "Оформление" находим строчку "Вращение 3d изображения" , нажимаем на неё.



5.2 Открывается знакомое окно "Параметры 3d вращения". Включить "Просмотр"! Нажимаем на кнопку "Проецирование".



5.3 Вкладка "Проецирование"


5.4 В строчке Символ выбираем Цветок.


5.5 Поверхность, на которую можно спроецировать цветок (она , находим, нажимая на переключатели (треугольники влево/вправо). В моём случае , 6 поверхностей (может быть и 3, 4...). На рабочем столе, активные поверхности выделяются красным цветом


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



5.6 Добавляем тень.
Открываем сохранённую копию (шаг 2). При необходимости подкорректируйте, двигая манипуляторами.
Открываем вкладку "Оформление". Окно - Оформление.
Активный слой с простой копией и выше слоя с яйцом. Находим значок F/x , раскрываем меню.



Применяем режим наложения к слою (или умножение или перекрытие), прозрачность 35%. Окно - Прозрачность.



Подвигайте ползунки, выберите своё значение.
Примечание. Иногда ни в какую не получается наложить символ на поверхность. Закройте окно "Редактирования 3d изображения" и подвигайте (чуть чуть) манипуляторы . Часто причина бывает, что произошёл перекос осей, потому что манипуляторы мы двинули под углом - надо двигать с нажатой SHIFT строго вертикально/горизонтально.

ШАГ 6. Создание символа из узоров программы. Редактирование узоров

Свёрнутый текст: развернуть

Окно - Образцы



6.1 Открыть библиотеку узоров. Например, Узоры - узоры декоративный - декоративные образцы для прежних версий.



6.2 Нарисуйте прямоугольник и примените образец, например Diamond Harlequin Color (название подсвечивается при наведении мыши).



6.3 Редактирование узора. Выделите слой с прямоугольником, на котором вы применили образец. Правой кнопкой мыши (ПКМ) кликнуть по прямоугольнику - Трансформировать - Трансформировать каждый. Включите просмотр! Двигайте в какую-либо сторону, рисунок не меняется! Это и есть бесшовная текстура. Я уменьшила масштаб. Как изменился рисунок, можно понаблюдать "онлайн"! Внимание! Не забудьте поставить галочку "Трансформировать узоры" (скрин).



6.3.1. Далее перетягиваем этот прямоугольник в окно символов, чтобы применить к нашему образцу. Далее Шаг 5

6.4 Допустим, выбрали Узоры - Базовая графика - базовая графика (точки). Выбираем Узор 6dpi 50%. Он, как видите, чёрного цвета.



6.5 Меняем цвет кружочков (линий).
Как только вы выбрали образец, он появляется в палитре "Образцов".


6.6 Щёлкните по появившемуся квадратику в палитре "Образцы". Появится окно редактирования узора.



Инструментом "выделение" (А) - белая стрелка, выделяем весь участок или каждую фигуру по-отдельности, меняем цвет (см. скрин). Даём имя. Готово. В палитре появился новый узор.



6.7 Редактирование узора по схеме, описанной выше ( п/п 6.3).
ПКМ - трансформирование - трансформировать каждый
6.8 Перетягиваем узор в окно символов. Далее ШАГ 5.

ШАГ 7. Редактирование символов. Восстановление рисунка.

Свёрнутый текст: развернуть

Иногда бывает ситуация, что вы создали рисунок, перевели его в символ, исходник удалили, а вам надо изменить, например, форму, цвет. Как это сделать? Перетягиваем символ на рабочий стол, идём Объект - Разобрать оформление. Всё! Перед нами - наш исходник, с которого сделан символ - перекрашивайте, изменяйте формы и т.д.
Вот и пошёл к концу длинный урок. Но выполнение намного короче - 2-5 минут.
Если кратко:
1. Рисуем профиль предмета;
2. Выбираем рисунок/узор/символ для проецирования на предмет (пункт не обязателен для применения), но можно обойтись без него;
3. Эффекты - Объёмное изображение - Вращение;
4. Параметры вращения 3d изображения - Проецирование;
5. Добавление теней, бликов к предмету.

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

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

[гвоздик]

Очень уважаю людей которые, не жалея времени, делятся с остальными знаниями!
Спасибо!

[Inina]

Оля, я опять со своими непонятками. Пытаюсь нарисовать пасхальное яйцо. Не получается сохранить новый символ как в шаге 4. У меня окно "Параметры символа" выглядит не совсем так у Вас. Нет строчки "Тип символа".

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

Добавлено спустя 4 часа 29 минут 13 секунд:
Оля, все получилось. Я очень не внимательна. Цветы надо было нарисовать в том же документе что и яйцо. А я рисовала в другом документе. Думаю, что по этому и не получалось. Но новый символ без знака +.

Добавлено спустя 1 час 1 минуту 55 секунд:
Вот первый опыт. Получилось ли?

Хотела у цветочков сделать листочки, такие как у Вас. Подумала, что их надо делать так же как цветок. Попробовала, не получилось. Оставила эту затею.

[feola]

Вот первый опыт. Получилось ли?

Получилось! Вы, молодец! Приятно, что не зря сделала урок.

Свёрнутый текст: развернуть

А в чём "закавыка" с листочками? Можно, просто пером нарисовать любые формы листочков. Клавишами CTRL+C (копировать) / CTRL+V (вставить) или, выделив объект (V), нажимая на ALT (появляется двойная стрелочка),копируем. Если не получится, распишу более подробно.

А я рисовала в другом документе.

Как сохранить символ и перенести его из одного документа в другой

Свёрнутый текст: развернуть

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



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

Как определить, что вы работаете с символом?
В самом верху рабочего стола, отображена вся характеристика объекта с которым вы в данный момент работаете.

[Inina]

Добрый день. Это снова я. Оля, застряла на шаге 6.6 урока "Как нарисовать пасхальное яйцо в иллюстраторе". Не получается поменять цвет кружочков. У меня меняется цвет всего квадрата. И не вижу кнопку "Готово".

[feola]

У меня меняется цвет всего квадрата.

Нина! Для редактирования образца, нужно кликнуть на него в Окне Образцов (окно с разноцветными квадратиками), выйдет Окно редактирования образцов. Область редактирования заполнена узором, посредине - сам образец (выделен синим квадратом - у меня).
;
Далее, белое стрелкой - прямое выделение (А), выделяем этот синий квадрат или в нём, какой-либо объект. Цвет выбираем или в самом окне образцов или, щелкнув 2 раза по объекту, в цветовой палитре. Кнопка "Готово" находится в самом вверху, я её обозначила цифрой 4 (скрин 2).

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

[Inina]

Спасибо, Оля. Все так и делала. Ну как-то получилось. За уроки огромное спасибо!

[feola]

Урок "Как нарисовать звезду в иллюстраторе"

[от Людмилы]

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

[feola]

Георгиевская лента

Свёрнутый текст: развернуть

Прошу простить за озвучку