Нетрадиционная обрезка в Illustrator

http://i.imgur.com/mEWzQ16.jpg

Мне нужно обрезать это изображение таким образом, чтобы внизу было поле «отправьте сюда свое изображение!» удалено, потому что я собираюсь использовать это место для формы «выбрать файл» на своем веб-сайте. Я пытался создать собственную монтажную область, но Illustrator позволяет использовать в качестве монтажной области только традиционный прямоугольник или квадрат. По сути, мне нужно векторное изображение, но я не знаю, как это сделать, поскольку есть три отдельных изображения. Любые предложения о том, как это сделать? Спасибо!

Ответы (1)

Все цифровые изображения имеют прямоугольную форму . Все изображения. Не существует такого понятия, как непрямоугольное цифровое изображение.

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

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

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

Here is a very quick and dirty sample of this method.

введите описание изображения здесь

Я бы рекомендовал использовать псевдоэлементы, чтобы разместить их вокруг формы. Это позволит им быть более отзывчивыми и даст больше контроля в целом.
Я согласен @ZachSaucier. Было бы лучше использовать 2 элемента изображения слева и справа и установить заголовок в виде живого HTML.
Проблема в том, что если я размещу форму поверх изображения, все это будет белым прямоугольником, и у меня есть фон, который я хотел бы показать за формой. На самом деле я пытался решить эту проблему, разбив текст и две стрелки вверх на отдельные компоненты, но я недостаточно продвинут в html, чтобы знать, как избавиться от пробела между изображениями и текстом i.imgur.com/jLUYyxa.jpg , поэтому я просто попытался сделать все это одним изображением. Вот почему знание того, как создать прозрачную область, может помочь.
Предполагая, что в файлах Illustrator нет белого поля, просто сохраните монтажную область как файл PNG24. Будет прозрачно там, где ничего нет. Возможно, вам придется заполнить стрелки белым цветом, если они еще этого не сделали.