Jekyll2024-02-09T21:35:35+03:00https://super-mark.ru/feed.xmlSuperMarkТорговая марка Владимира Никишина. Веб-дизайн, разработка, digital-маркетинг.@supervovaAdobe Illustrator для веб-дизайнера 9.9) Сетчатые объекты (meshes)2024-01-02T00:00:00+03:002024-01-02T00:00:00+03:00https://super-mark.ru/ru/blog/2024/illustrator-meshes Содержание серии
Материалы цикла представляют собой мои личные конспекты. Нет времени превращать их в полноценные обучающие статьи, и поэтому свободное отношение к слову может расстроить граммар-наци. Также не исключено, что использование каких-то картинок нарушит авторские права. Это нехорошо, но давно не помню, где и что брал... Я предупредил.
При создании сетчатого объекта множество линий, так называемых линий сетки, пересекают объект, образуя решетку.
Редактировать решетку можно белой стрелкой или инструментом Mesh .
Переходы между цветами изменяются перемещением и изменением пересечения линий сетки — узлов (ромбовидные маркеры).
Кроме того, переходами цвета можно управлять, добавляя на линии и редактируя опорные точки (квадратный маркер).
A. Линия сетки B. Контур сетки C. Узел сетки D. Опорная точка
☝️🧐 К сожалению в SVG сетчатые объекты экспортируются, как растровые изображения.
Создание шаблонной сетки
Выбрать объект, векторную фигуру (нельзя добавлять сетки на текст и изображения).
Object ➜ Create Gradient Mesh.
В диалоге выбрать количество вертикалей и горизонталей сетки и осветление исходного цвета: Flat (не менять цвет), To Center (осветлять к центру), To Edge (к краям)
Выбрав узел с помощью белой стрелки, можно сменить его цвет, передвинуть, изменить направление кривизны маркерами, удалить.
Добавлять узлы, и перемещать вдоль линий сетки можно инструментом Mesh .
Цвета узлов можно настраивать в панели «Цвет», перетаскивать на них из образцов, выбирать пипеткой.
В панели свойств или «Оформление» можно менять прозрачность узлов.
Создание произвольной сетки
Выбрать объект.
Выбрать инструмент Mesh .
Кликнуть в месте первого узла.
Сменить цвет узла
Добавить и раскрасить столько узлов, сколько нужно.
Редактировать.
Преобразование градиента в сетчатый объект
Выбрать объект с градиентной заливкой.
Object ➜ Expand ➜ Gradient Mesh
☝️🧐Обработка сложных сетчатых объектов может притормаживать компьютер. Поэтому лучше создать несколько небольших простых сетчатых объектов вместо одного сложного.
]]>@supervovaAdobe Illustrator для веб-дизайнера 9.8) Cимволы2023-05-27T00:00:00+03:002023-05-27T00:00:00+03:00https://super-mark.ru/ru/blog/2023/illustrator-symbols Содержание серии
Материалы цикла представляют собой мои личные конспекты. Нет времени превращать их в полноценные обучающие статьи, и поэтому свободное отношение к слову может расстроить граммар-наци. Также не исключено, что использование каких-то картинок нарушит авторские права. Это нехорошо, но давно не помню, где и что брал... Я предупредил.
Symbol Sprayer Tool (Распыление символов). Предназначен для хаотичного распределения экземпляров выбранного символа.
Symbol Shifter Tool (Смещение символов). Предназначен для пакетного смещения экземпляров символа относительно их изначального положения.
Symbol Scruncher tool (Уплотнение символов). Предназначен для уплотнения и разрежения (c Alt’ом) экземпляров символа.
Symbol Sizer Tool (Размер символов). Предназначен для пакетного изменения размера экземпляров символа.
Symbol Spinner Tool (Вращение символов). Предназначен для пакетного поворота экземпляров символа.
Symbol Stainer Tool (Окрашивание символов). Предназначен для изменения окраски экземпляров символа. При использовании инструмента происходит постепенный переход цвета от исходного к цвету заливки.
Symbol Screener Tool (Прозрачность символов). Предназначен для изменения прозрачности экземпляров символа .
Symbol Styler Tool (Стили символов). Предназначен для пакетного присваивания стилей из палитры Graphic Styles экземплярам символа.
Символы можно наносить на плоскости фигур с 3-мерным эффектом
]]>@supervovaAdobe Illustrator для веб-дизайнера 9.7) Cтили графики2023-03-31T00:00:00+03:002023-03-31T00:00:00+03:00https://super-mark.ru/ru/blog/2023/illustrator-graphic-styles Содержание серии
Материалы цикла представляют собой мои личные конспекты. Нет времени превращать их в полноценные обучающие статьи, и поэтому свободное отношение к слову может расстроить граммар-наци. Также не исключено, что использование каких-то картинок нарушит авторские права. Это нехорошо, но давно не помню, где и что брал... Я предупредил.
Стили графики в Illustrator'е — это сохраненные для многократного использования наборы значений обводки, заливки и динамических эффектов. Аналогичны стилям других программах, доступны через палитру Graphic Styles
Как отправную точку для создания пользовательского стиля можно использовать либо уже готовую графику, либо библиотеки готовых стилей: 3D-эффекты, текстовые эффекты и т.д.
После применения стиля, его параметры можно отредактировать в палитре «Оформление»
ПКМ на образец в панели для предварительного просмотра эффекта.
Чтобы изменить стиль, нужно снять выделение со всех объектов и выделить только образец стиля в палитре.
Затем перейти в палитру «Оформление», внести необходимые изменения и по завершении выбрать в меню палитры Redefine Graphic Style…
]]>@supervovaAdobe Illustrator для веб-дизайнера 9.6) Перспектива2023-01-15T00:00:00+03:002023-01-15T00:00:00+03:00https://super-mark.ru/ru/blog/2023/perspective Содержание серии
Материалы цикла представляют собой мои личные конспекты. Нет времени превращать их в полноценные обучающие статьи, и поэтому свободное отношение к слову может расстроить граммар-наци. Также не исключено, что использование каких-то картинок нарушит авторские права. Это нехорошо, но давно не помню, где и что брал... Я предупредил.
За ручки в нижних углах сетки, можно ее передвигать.
Есть ручки перемещения горизонта, ручки независимого перемещения каждой плоскости — в целом, очень много ручек.
Чтобы восстановить сетку или сменить тип, нужно выбрать View ➜ Perspective Grid ➜ {One | Two | Three } Point Perspective ➜ [{1P- | 2P- | 3P-} Normal View]
View ➜ Perspective Grid ➜ Hide Grid
View ➜ Perspective Grid ➜ Define Grid...
View ➜ Perspective Grid ➜ Show Rulers...
По сетке можно рисовать.
На сетку можно накладывать готовые объекты: текст, фигуры, сборные контуры. Для этого объект нужно выделить и переместить на сетку инструментом Perspective Selection.
Плоскость, на которую будет спроецирован объект, можно выбрать на значке куба.
Чтобы отсоединить объект от сетке, надо выбрать Object ➜ Perspective ➜ Release with Perspective.
]]>@supervovaAdobe Illustrator для веб-дизайнера 9.5) Переходы (Blend)2022-01-02T00:00:00+03:002022-01-02T00:00:00+03:00https://super-mark.ru/ru/blog/2022/illustrator-blend Содержание серии
Материалы цикла представляют собой мои личные конспекты. Нет времени превращать их в полноценные обучающие статьи, и поэтому свободное отношение к слову может расстроить граммар-наци. Также не исключено, что использование каких-то картинок нарушит авторские права. Это нехорошо, но давно не помню, где и что брал... Я предупредил.
Переходы цвета — это, по сути, градиенты по сложному контуру и внутренние тени.
Создаются:
инструментом Blend — последовательно нажав каждый объект в любом месте, кроме опорных точек
или командой Object ➜ Blend ➜ Make.
🔵 Настройки
Диалог открывается, если выделить два исходных объекта и дважды кликнуть на инструменте.
Можно выбрать способ перехода:
Smooth Color — Illustrator автоматически вычислит число шагов перехода.
Specified Steps — Заданное число шагов
Specified Distance — Заданное расстояние между шагами перехода.
Также можно выбрать ориентацию:
перпендикулярно контуру исходного объекта
перпендикулярно оси Х страницы (см. рисунок).
У переходов есть свои настройки прозрачности.
Переходы можно делать последовательно через несколько объектов, чтобы контролировать направление перехода.
🔵 Изменение траектории переходов
Чтобы отредактировать траекторию переходов, надо выделить группу белой стрелкой, выбрать перо, или инструмент кривизны и отредактировать вектор.
☝️🧐 Чем длиннее ручка опорной точки, тем больше расстояние между экземплярами по ее направлению.
Также можно направить переход по заранее подготовленному контуру.
Выбрать начальный и конечный объекты и сделать переход: Object ➜ Blend ➜ Make.
Выбрать группу перехода и открыть настройки: Object ➜ Blend ➜ Blend options. Выбрать отступы: Specified Steps или Smooth Color. Выбрать ориентацию — в большинстве случаев подходит Align to Path.
На новом слое начертить контур траектории. Выбрать его и группу перехода и заменить траекторию: Object ➜ Blend ➜ Replace spine.
Перед экспортом разобрать группу перехода: Object ➜ Expand.
Один из основных способов применения переходов — искривленные градиенты.
🔵 Возможные ошибки
Переходы осуществляются от опорной точке к опорной точке. И если количество точек разное, или один из исходных объектов отзеркален, шаги перехода могут искажаться.
В этом случае можно заменить второй объект, дублировав первый и отредактировав имеющиеся опорные точки.
Или экспериментировать с инструментом «Перехода»: первый клик в начальную опорную точку, второй клик — в ее двойника на втором объекте. Если не получается, менять направление, пробовать другие точки или сегменты.
Иногда помогают изменения положения точек второго объекта — если их траектория прямая, без вращения, переход получается плавнее. Так, например, лучше получается squircle.
🔵 Эффекты трансформации
К переходам можно применять эффекты трансформации — для создания фоновых узоров.
Distort & Transform ➜ Tweak / Zig Zag / Roughen
]]>@supervovaКак моё детское увлечение превратилась в профессию2022-01-02T00:00:00+03:002022-01-02T00:00:00+03:00https://super-mark.ru/ru/blog/2022/information-designДело в том, что увлечение привело меня в информационный дизайн: мне нравилось не просто создавать изображения окружающего мира, но еще и делать к ним подписи крупным рубленым шрифтом... Наверное, из-за наклеек в Клубе интернациональной дружбы и в гараже дяди, водителя Совтрансавто.
Сначала хобби выросло в выпуск школьных стенгазет. Затем — в коллекционирование иностранных печатных изданий (доставались там же, где и наклейки). А, по окончании журфака, — в должности ответсека и редактора.
Из профессии я ушел больше 20 лет назад. Но только формально. Продолжаю заниматься любимым ремеслом: просто вместо школьных стенгазет и городских таблоидов рисую сайты и приложения.
]]>@supervovaAdobe Illustrator для веб-дизайнера 9.4) Направляющие и линейки2021-10-09T00:00:00+03:002021-10-09T00:00:00+03:00https://super-mark.ru/ru/blog/2021/illustrator-guides-and-rulers Содержание серии
Материалы цикла представляют собой мои личные конспекты. Нет времени превращать их в полноценные обучающие статьи, и поэтому свободное отношение к слову может расстроить граммар-наци. Также не исключено, что использование каких-то картинок нарушит авторские права. Это нехорошо, но давно не помню, где и что брал... Я предупредил.
🔵 Направляющие можно вращать и зеркально разворачивать — также как обычные фигуры с помощью инструментов Rotate и Reflex.
Для введения точного угла наклона, надо выделить направляющую с Rotate, нажать Enter и ввести угол в диалоге.
Направляющие с нужным углом наклона можно копировать, вставлять и передвигать на новое место.
☝️🧐 Если новая линия/контур не прилипает к нужной точке созданного объекта, нужно сделать направляющие из этого объекта и добавить еще одну направляющие с линейкой, чтобы получилось пересечение в нужной точке. К пересечению направляющих новый контур прилипнет.
Он содержит справочную монтажную область с готовыми направляющими для наклонных линий в иконках.
Чертить по направляющим нужные наклонные и переносить их в основную монтажную область.
Углы можно вводить и в диалоге инструмента «Вращение». Нарисовал линию, дважды щелкнул на вращалку — открыл диалог. Ввел нужный угол, нажал Enter — готово.
]]>@supervovaОтцу сегодня исполнилось бы 692021-07-30T00:00:00+03:002021-07-30T00:00:00+03:00https://super-mark.ru/ru/blog/2021/dad@supervovaХотел я было оттащить урну из кадра2021-07-03T00:00:00+03:002021-07-03T00:00:00+03:00https://super-mark.ru/ru/blog/2021/cat@supervovaКогда мне нужно что-то найти на компьютере или в интернете2021-07-03T00:00:00+03:002021-07-03T00:00:00+03:00https://super-mark.ru/ru/blog/2021/search-query@supervova