Vectorboom
Уроки / Web дизайн / Comments: 2

Как использовать функции плагина Rasterino и Adobe Illustrator при создании веб шаблонов

Ярослав Лазунов
25.07.2013

Многие дизайнеры создают Веб макеты в Adobe Illustrator и, конечно, им приходится работать с растровыми изображениями. Новый плагин Rasterino от известного разработчика Astute Graphics предлагает набор инструментов и функций, которые позволяют решать разнообразные задачи при обработке растровых изображений, включая Crop Image, Trim Image, Set Resolution, Re-link Embedded Images, In-line Edit Embedded Images. В сегодняшнем уроке мы познакомимся с функциями Rasterino в процессе создания Web дизайна и рассмотрим случаи, где эти функции могут вам понадобиться.

Шаг 1

При создании веб дизайна в Adobe Illustrator удобно воспользоваться шаблоном, который поможет вам правильно размещать элементы дизайна. Я использовал бесплатные шаблоны для Illustrator от 960 grid system. Эти шаблоны представляют собой набор направляющих и прямоугольников, которые служат разметкой вашей рабочей области.

Плоский дизайн является трендом сегодня, поэтому я создал веб дизайн в таком стиле. Не будем останавливаться на процессе создания его элементов. Как вы можете видеть, в этом нет ничего сложного. Блоки дизайна были созданы при помощи Rectangle Tool и Rounded Rectangle Tool. Для создания текста я использовал Type Tool.

Шаг 2

В качестве иллюстрации для слайдера я буду использовать изображение Planet London с Shutterstock. Вставим ее в наш документ (File > Place…)

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

Шаг 3

Сначала изменим размер изображения так, чтобы его ширина соответствовала размеру рабочей области, в моем случае это 960 px. Установить точные размеры можно, используя панель Control в панели Transform.

Теперь создадим прямоугольник, размер которого соответствует размеру слайдера.

Выделяем изображение и прямоугольник, затем переходим Object > Clipping Mask > Make или используем комбинацию горячих клавиш Cmd / Ctrl + 7. Как вы понимаете, лишние пиксели изображения не были удалены, а только спрятаны при помощи Clipping Mask.

Шаг 4

Кроме того, изображение имеет слишком высокое пазрешение (375 ppi) для web.

Лишние пиксели и высокое разрешение, конечно, увеличивают размер файла и, в конечном счете, повлияют на скорость загрузки страницы. Для уменьшения разрешения переходим Object > Rasterize…, затем устанавливаем Screen Resolution (72ppi). Это действие приведет к снижению разрешения, но лишние пиксели останутся. Они могут быть белыми или прозрачными в зависимости от того, какую опцию вы выберите для фона.

Шаг 5

Я думаю, настало время познакомиться с функциями Rasterino, которые смогут упростить наш рабочий процесс. Открываем его панель (Window > Rasterino > Rasterino panel). Теперь для удаления лишних белых или прозрачных площадей нам просто нужно нажать на кнопку Trim Image, затем выбрать опции команды в диалоговом окне и нажать на OK.

Кстати, не только растеризация группы Clipping Mask ведет к появлению лишних пикселей. Растеризация любых растровых эффектов и применение команды Expand Appearance к растровым эффектам приведут к образованию пустых белых или прозрачных областей. Теперь у вас есть возможность очень просто удалить лишнюю информацию при помощи функции Trim Image плагина Rasterino. Перед использованием функции Trim Image изображение должно быть Embedded в текущий документ. Это функция может быть применена одновременно к нескольким изображениям.

Шаг 6

Используя в работе Rasterino, вам больше не нужно использовать Clipping Mask для сокрытия части изображения. Вы просто можете удалить часть изображения, применив Crop Image Tool. Давайте посмотрим, как это делается. После того, как мы вставили изображение в текущий документ, нажимаем на кнопку Embed в панели Control.

Берем Crop Image Tool, который находится в одной группе с Eraser Tool в панели Tools.

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

Как вы можете видеть, изображение было обрезано непосредственно в Adobe Illustrator.

Альтернативный метод обрезки изображений при помощи Rasterino это использование кнопки Crop Image в панели Rasterino. После нажатия этой кнопки открывается диалоговое окно, в котором вы можете указать размеры области обрезки.

Шаг 7

Часто изображения, с которыми мы работаем, нуждаются в редактировании или добавлении каких-либо эффектов. Rasterino дает нам возможность редактировать встроенные изображения, открывая его прямо в Photoshop, как временный файл. Для того чтобы сделать это, выделяем изображение и нажимаем на кнопку Edit Image в панели Rasterino.

Теперь вы можете редактировать изображение так, как считаете нужным. Например, я применил Mosaic filter (Filter > Pixelate > Mosaic…) к краям изображения.

Cохраняем файл в Photoshop (File > Save), затем возвращаемся назад в Illustrator и нажимаем на кнопку Update Image в панели Rasterino.

Как вы можете видеть, все изменения были обновлены автоматически.

Шаг 8

При помощи Rasterino мы можем перелинковать embedded изображения. Для этого выделяем одно или несколько изображений, затем нажимаем на Link Image button в панеле Rasterino.

В открывшемся диалоговом окне мы можем переименовать изображение и изменить место, где оно будет сохранено. Изображение будет сохранено в PSD формате. Здесь мы также видим информацию об изображении такую, как цветовая модель, размер, разрешение and наличие прозрачного канала.

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

Шаг 9

Если вы импортируете изображение (особенно TIFF и PSD) в Adobe Illustrator, оно может иметь странное разрешение, которуе необходимо исправить. Теперь вы можете изменить разрешение изображение, введя нужное значение в числовое поле в панеле Rasterino или выбрав одно из стандартных значений из выпадающего меню.

Эта функция работает с Linked и Embedded изображениями.

Надеемся, вы убедились в том, что Rasterino дает полный контроль над Linked и Embedded изображениями непосредственно в Adobe Illustrator. Вы также можете посмотреть обучающее видeо для получения более подробной информации о плагине и скачать бесплатно 14 - дневную пробную версию здесь...

Всего комментариев: 2
0
1  
Добрый день. так я понял, он сохраняет не векторный файл?

0
2  
Плагин предназначен для работы с растром в Люстре. Немного пространный вопрос. Если вам для стоков, то он не нужен. Разве что использовать для быстрой обрезки референсов, что я и делаю. Если для нормального (не стокового) дизайна то очень даже нужен

Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.