Советы по работе с Illustrator. Для веб-дизайнеров, предпочитающих Photoshop

Советы по работе с Illustrator. Вот безумная идея — спроектируйте свой следующий веб-проект в Illustrator. Если вы основной веб-дизайнер, скорее всего, вы не очень хорошо отреагируете на это предложение. Illustrator просто не может делать все, что умеет Photoshop, верно?

Не совсем так.

Хотя Photoshop де-факто превратился в инструмент веб-дизайна, Illustrator более чем способен удовлетворить ваши потребности. Благодаря своим инструментам верстки это часто лучшая и более подходящая программа для веб-дизайна.

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

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

1. Перво-наперво: установите для всех единиц значение Пиксели. Советы по работе с Illustrator

По умолчанию Illustrator использует метрические единицы для размеров объекта и точки для текста. Это отличные настройки для большинства случаев дизайна, но для веб-дизайна вы, вероятно, захотите видеть пиксели повсюду. Поэтому, прежде чем вы начнете работать над чем-либо еще, убедитесь, что ваши единицы правильно настроены.

Чтобы установить единицы измерения в пиксели:

1. Открыть в меню «Правка»
2. Выберите единицы измерения в подменю настроек.
3. Установите для всех параметров значение «пиксели»

2. Создавайте документы с помощью профиля веб-документа.

 

Когда вы хотите начать работу над новым дизайном, легко пролистайте окно «Новый документ» и пропустите некоторые важные детали — например, сообщить Illustrator, что вы планируете работать над веб-дизайном, чтобы не использовать цвета CMYK. и размытые края объекта. Просто не забудьте выбрать настройку профиля «Интернет» в окне «Новый документ», и все будет в порядке.

3. Включите выравнивание по пиксельной сетке для объектов. Советы по работе с Illustrator

Эта функция спасает жизнь, если у вас когда-либо возникала проблема с размытыми краями формы в Photoshop.

Выравнивание пиксельной сетки позволит отрегулировать прямые горизонтальные и вертикальные сегменты объекта так, чтобы они идеально соответствовали пиксельной сетке, сохраняя при этом изогнутые и наклонные сегменты сглаженными. В результате получаются четкие, точные до пикселя формы — то, что вам определенно нужно в веб-дизайне.

На верхней кнопке включено выравнивание по пиксельной сетке, что всегда приводит к четким границам.

Чтобы включить выравнивание пиксельной сетки на уровне объекта:

1. Выбрать объект
2. Откройте панель «Преобразование» («Окно»> «Преобразовать»).
3. Установите флажок «Выровнять по пиксельной сетке» в нижней части панели (если вы его не видите, дважды щелкните панель, чтобы отобразить параметры)

Примечание. Выравнивание по пиксельной сетке включено по умолчанию для всех новых объектов, созданных с помощью профиля веб-документа. Однако, если вы вставляете объекты из других файлов Illustrator, вам необходимо вручную настроить для них выравнивание пикселей. Советы по работе с Illustrator

4. Включите предварительный просмотр пикселей.

Функция Pixel-Preview заставит Illustrator вести себя так же, как Photoshop, при масштабировании вашего изображения выше 100% — вместо того, чтобы каждый раз получать идеальные векторы, вы фактически будете видеть пиксели, как если бы вы работали с растровым изображением.

Включив предварительный просмотр в пикселях, вы почувствуете, что находитесь в Photoshop.

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

Аккуратно, не правда ли?

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

1. Открыть меню просмотра
2. Выберите «Просмотр в пикселях».

5. Используйте окна Artwork. Советы по работе с Illustrator

Представьте, что на ваш проект наведены две видеокамеры.

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

Подобно хирургу, вы используете камеру с зумом, чтобы вносить крошечные изменения на уровне пикселей в значок, время от времени поглядывая на камеру со 100% зумом, чтобы увидеть, как она на самом деле выглядит в своем реальном размере.

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

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

Чтобы использовать окна Artwork:

1. Откройте меню «Окно», затем выберите «Новое окно». Illustrator создаст новую вкладку с тем же документом в поле зрения.
2. Снова перейдите в меню «Окно», выберите «Упорядочить»> «Переместить все в окно». Это позволит вам изменять размер и размещать окна рядом друг с другом так, как вы считаете нужным.
3. Поэкспериментируйте с различными уровнями масштабирования в окнах и начните вносить некоторые изменения, чтобы увидеть, как это работает. Советы по работе с Illustrator

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

Сколько раз вы создавали одну и ту же (или почти одну и ту же) кнопку, значок или виджет в Photoshop? Если вы увлекаетесь веб-дизайном, вы, вероятно, занимаетесь им каждый день.

Illustrator поможет вам сэкономить время и избежать этой повторяющейся работы с помощью символов.

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

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

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

 

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

Совет: если вы не хотите, чтобы это произошло с определенным экземпляром символа as, щелкните правой кнопкой мыши объект в своей иллюстрации и выберите «Разорвать ссылку на символ». Это исключит его из автоматических обновлений.

Вот хорошее видео, объясняющее, как использовать символы и управлять ими:

Использование символов в Adobe Illustrator из Adobe TV .

Чтобы использовать существующий символ:

1. Откройте панель «Символы» из меню «Окно».
2. Перетащите выбранный символ на свою работу

Создать новый символ:

1. Создайте изображение символа
2. Откройте панель «Символы» из меню «Окно».
3. Перетащите иллюстрацию на панель
4. Нажмите ОК в диалоговом окне для подтверждения.

Чтобы отредактировать символ:

1. Откройте панель «Символы» из меню «Окно».
2. Дважды щелкните символ, чтобы войти в режим редактирования.
3. По завершении дважды щелкните в любом месте за пределами изображения символа, чтобы выйти из режима редактирования.

7. Легко расширяйте объекты с помощью 9-сегментного масштабирования. Советы по работе с Illustrator

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

Слева: пример растянутой кнопки с настройкой 9-сегментного масштабирования и без нее. Справа: настройка 9-сегментного масштабирования включает перемещение 4 направляющих, которые сообщают Illustrator, какие части объекта защищены и какие части можно масштабировать.

 

Практический пример — кнопка с закругленными углами — если вы хотите сделать ее длиннее, вы не можете просто растянуть ее по горизонтали, потому что это исказит весь объект. Вместо этого вам придется вручную перемещать точки формы. При 9-сегментном масштабировании растяжка работает так, как вы задумали. Советы по работе с Illustrator

Чтобы по-настоящему понять, как это работает, послушайте этот отличный видеоурок от Adobe TV, чтобы быстро освоиться:

Использование 9-сегментного масштабирования с символами из Adobe TV .

8. Везде закругленные углы!

Вы можете создать прямоугольник с закругленными углами в Photoshop, но Illustrator позволяет применять неразрушающий эффект закругленных углов практически к любому объекту. Что такое неразрушающий эффект? Это означает, что вы можете включать, выключать или изменять его настройки, не затрагивая лежащий в основе исходный объект.

Практически к любому типу объекта можно применить эффект закругленных углов и при необходимости отрегулировать. Советы по работе с Illustrator

Чтобы применить эффект закругленного угла:

1. Создайте прямоугольник или любой другой объект с острыми углами
2. В меню «Эффекты» выберите «Стилизация»> «Закругленные углы».
3. Введите радиус угла и нажмите Предварительный просмотр, чтобы увидеть, как это выглядит.
4. Нажмите ОК, чтобы применить эффект.

Чтобы изменить эффект закругленного угла:

1. Выберите объект с закругленными углами
2. Откройте панель «Оформление» из меню «Окно».
3. Найдите эффект закругленных углов и дважды щелкните его, чтобы изменить его настройки, или щелкните значок глаза, чтобы включить или выключить его.

9. Создание быстрой заливки растровым узором. Советы по работе с Illustrator

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

Должен признать, это не интуитивно, но решение простое.

Чтобы создать узор растрового изображения:

1. Поместите изображение выкройки на свое произведение
2. Нажмите «Вставить» на верхней ленте (важно — без этого работать не будет!)
3. Перетащите узор на палитру образцов
4. Примените образец к любому объекту, чтобы заполнить его узором

10. Автоматическое размещение текста вокруг изображений и объектов.

Photoshop известен своими очень элементарными возможностями редактирования текста. Если вы хотите обернуть текст вокруг изображения, вам нужно создать два или три разных текстовых фрейма и имитировать эффект. Советы по работе с Illustrator

К счастью, Illustrator предоставил вам все необходимое.

Чтобы обернуть текст вокруг изображения:

1. Выберите изображение или объект, вокруг которого вы хотите обернуть текст
2. Откройте меню «Объект», выберите «Перенос текста»> «Создать».
3. Чтобы установить расстояние обтекания, снова откройте меню «Обтекание текстом» и выберите «Параметры обтекания текстом».
4. Переместите изображение по тексту, чтобы увидеть эффект обтекания

11. Создавайте богатые визуальные эффекты с помощью настроек внешнего вида объекта. Советы по работе с Illustrator

В Illustrator панель «Внешний вид» объекта работает так же, как эффекты слоя в Photoshop — вы можете добавить несколько заливок и штрихов к объекту, а затем поиграть с их режимами передачи, непрозрачностью и эффектами, чтобы получить интересные результаты.

Этот текст представляет собой всего лишь один объект векторной формы, стилизованный с помощью панели внешнего вида и эффектов.

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

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

Освоение панели внешнего вида из Adobe TV .

Вы готовы начать экспериментировать с Illustrator?

Создание веб-сайтов и пользовательских интерфейсов с помощью Photoshop теперь стало нормой, и большинство дизайнеров довольны этим решением. Советы по работе с Illustrator

Но то, что Photoshop стал настолько распространенным, не означает, что Illustrator нечего предложить — как раз наоборот. С такими инструментами, как выравнивание по пиксельной сетке, обтекание текстом и внешний вид объектов, он убедительно доказывает себя.

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