html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

Многие дизайнеры создают Веб макеты в 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 - дневную пробную версию здесь...

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с vectorboom.com

1

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • sasa1975sasa
          • london
          • lines
          • adobe illustrator
          • домен ru.vectorboom.com
          • домен vectorboom.com

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции