Цель Урока

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

Создание абстрактного фона из стандартных форм Шаг 1

В начале этого урока давайте вкратце рассмотрим, как создать абстрактный фон, используя стандартные формы в Adobe Illustrator. Создаем прямоугольник при помощи Rectangle Tool (M), величина которого соответствует рабочей области и зальем его линейным градиентом, передающим распределение света на нашей сцене.

При помощи Ellipse Tool (L) создадим две окружности, центры которых совпадают.

Шаг 2

Выделяем обе окружности, затем нажимаем на Minus Front в панели Pathfinder.

Заливаем полученный составной путь линейным градиентом от белого к светло-серому цвету.

Добавим новую заливку к форме, нажав на соответствующую кнопку в панели Appearance.

Выделяем нижнюю заливку в панели, затем переходим Effect > Distort & Transform > Transform … и устанавливаем значения для опции Scale.

Изменим направление градиента нижней заливки на противоположное.

Шаг 3

Теперь создадим падающие тени от созданного абстрактного объекта. Нарисуем новую окружность, которую расположим ниже Compound path. Заливаем ее радиальным градиентом, который содержит белый цвет и два оттенка серого цвета.

Нарисуем окружность белого цвета и расположим ее так, как показано на рисунке ниже.

Выделяем окружности, созданные в этом шаге, затем переходим Object > Blend > Make. После чего переходим Object > Blend > Blend Options… и устанавливаем требуемое число шагов.

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

Шаг 4

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

Создадим из этих окружностей бленд объект, способом, указанным в предыдущем шаге.

Этот бленд объект очень скоро станет внешней тенью от кольца.

Шаг 5

Группируем оба бленд объекта.

Установим для созданной группы режим смешивания Multiplyв панели Transparency. Теперь падающие тени стали полупрозрачными.

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

Преобразование стандартных форм в динамические формы Шаг 6

Преобразование стандартных форм в динамические теперь возможно при помощи новой версии плагина VectorScribe v2 . Он имеет функцию узнавания фигур, которая осуществляет такое преобразование. Давайте возьмем Dynamic Shape Tool и наведем указатель на путь одной из стандартных форм.

Как вы можете видеть, появилась аннотация, говорящая о том, что плагин узнал форму. Если мы кликнем по форме, то она немедленно преобразуется в динамическую. Это означает, что мы можем управлять ее параметрами в панели Dynamic Shapes и даже преобразовать ее в другую форму.

Шаг 7

Мы также можем преобразовать все имеющиеся формы в динамические, если, конечно, они имеют правильную форму. Для этого открываем выпадающее меню панели Dynamic Shapes и выбираем Convert to Dynamic Shape.

Плагин сообщает нам, что 61 путь был конвертирован, нажимаем OK.

Шаг 8

Давайте попробуем изменить форму всех существующих объектов. Выбираем Dynamic Polygon и устанавливаем количество сторон.

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

Похоже на фокус, но это реально работает!

Шаг 9

В заключении я хочу сказать, что VectorScribe v2 умеет также узнавать округленные углы и трансформировать их в динамические. Создадим скругленный прямоугольник при помощи Rounded Rectangle Tool.

Берем Dynamic Corners Tool и подводим указатель к одному из скругленных углов. Как вы можете видеть, появилась аннотация, указывающая на то, что распознавание осуществлено.

После клика по пути формы, угол будет конвертирован в динамический и его радиусом можно управлять перетаскиванием маркера или в панели Dynamic Corners.

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

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

Одним из направлений такого улучшения может быть реализация возможности интерактивно, без перезагрузки страницы, управлять количеством полей для ввода данных, как в сторону увеличения, так и в сторону уменьшения. Это может быть очень удобно если необходимо добавить в базу данных приложения не одну, а сразу несколько записей; или если заранее не известно количество однотипных данных, каждое из которых требует отдельного поля для ввода (например, несколько телефонов или кредитных карт пользователя). В этой статье разберем одну из простых реализаций такой возможности через использование javascript библиотеки jQuery.

В самом низу, вы можете скачать архив с примерами, которые разбираются в этой статье.

Добавление нового поля в форму.

Создавать новое поле формы будем с помощью метода.append():

$("селектор" ) .append ("строка" ) ;

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

Если рассматривать конкретный пример, то это может быть примерно так:

Поле №1 "/> Добавить новое поле

Сама функция addField() может быть реализована следующим образом:

< script type= "text/javascript" > function addField () { var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .append (" Поле №" telnum "" ) ; }

Сначала, как обычно, подключаем библиотеку jQuery и далее объявляем функцию addField(). Функция сначала вычисляет номер, который необходимо вставить в добавляемый элемент - по этому номеру, мы в последствии будем удалять ненужные поля. Затем addField() добавляет в div#add_field_area код блока div#add№ с полем формы внутри, код которого полностью аналогичен коду “Поле №1”, указанному чуть выше. Теперь при нажатии на кнопку “Добавить”, мы можем видеть как мгновенно появляется новое поле.

Удаление конкретного поля формы.

Для удаления элементов DOM-дерева можно пользоваться методом remove():

$("селектор" ) .remove () ;

который применяется к элементу с указанным “селектором”. Будем считать, что по умолчанию одно поле всегда должно оставаться, все дополнительные можно удалять. Для этого в функции addField(), в строке параметра метода.append() мы добавим код кнопки удаления поля, при нажатии на которую будет идти обращение к функции deleteField (id), при этом в функцию будет передаваться номер поля, которое нужно удалить.

function addField () { var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .append (" Поле №" telnum " " ) ; }

Сама функция deleteField() может быть устроена предельно просто:

function deleteField (id) { $("div#add" id) .remove () ; }

Собственно все. Теперь при нажатии на кнопку (красный крестик) напротив выбранного поля - оно исчезнет, а вместе с ним и та информация, которая была записана в нем.

Обработка данных на сервере (php).

Когда форма содержит множественные поля, с однотипными данными, то естественно встает вопрос обработки данных, например перед отправкой в базу данных. В примере выше, этот вопрос решается указанием у поля формы атрибута name с параметром val. Это означает, что после отправки данных этой формы методом POST, значения этих полей будут помещены в массив $_POST[‘val’], элементы которого можно перебрать в цикле foreach (...) {...}, например:

foreach ($_POST [ "val" ] as $value ) { // ваш код.... }

Или, если необходимо, все данные этих однотипных полей “склеить” в одну строку с помощью функции implode():

$str = implode ("|" , $_POST [ "val" ] ) ;

Тогда все значения полей с name=”val” - будут объединены в строку с разделителем “вертикальная черта”.

Но, это обработка на стороне сервера, которая кстати говоря - более предпочтительна по соображениям безопасности. Но, могут возникнуть обстоятельства вынуждающие вас выполнять обработку таких полей на клиентской стороне: например у вас нет доступа к скриптам сервера (используется какой-то удаленный обработчик формы), или вы не можете по каким-то причинам изменить работу обработчика формы на вашем сервере. В таком случае можно так же пользоваться средствами языка javascript, а так как мы уже работаем с библиотекой jQuery - то и продолжим работать в ней.

Обработка данных на клиентской стороне.

Допустим наша задача, все данные этого множественного поля, объединить в строку с разделителем вертикальная черта “|”. На самом деле реализуется это достаточно просто.

Для начала, нам необходимо несколько модифицировать саму форму, а именно добавить одно скрытое поле: