Вы когда-либо представленных графических файлов для команды разработчиков для производства и спустя несколько недель получил что-то вернуть, что не имеет ничего общего с исходной работе?Многие дизайнеры и проектные группы делают ошибку, думая, что их работа делается, когда они закончили визуальное этап проектирования .

Дизайн более чем простой рисунок на canvas В Illustrator Fireworks или Photoshop;это представление функции.”Форма следует за функцией” является хорошо известный принцип, Первый coined ¹ в 1896 году по проекту архитектора Луи Салливана.Как сайт работает?Как это раздел раза?Что происходит, когда вы наведите курсор мыши на этой кнопке?Как это функции меню

Дизайнеры также знаем, что подробности будут сделать перерыв или удобство продукта.Но дизайнеры также несут ответственность за не давая эти детали попадают через трещины в производстве. Да, эти 5 пикселей имеют значение! Разработок или производства команда также должен понимать, как продукт будет работать и сколько это будет выглядеть в каждом сценарии и изменения использования продукта.Комментирование все из этих сценариев может быть кошмаром, но это где Specctr может помочь .

Specctr является плагин для приложений Adobe.(В настоящее время версии доступны для Fireworks, Illustrator и Photoshop, первый из которых вы можете прочитать в “ Чертежи для Web: Specctr Adobe Fireworks Plugin ² “). Specctr переходы визуальныйпроектирования до производства, позволяя указать вид (расстояние, ширину и высоту, цвета, шрифты и т.д.) и функции (наведите состояния, переходы, пользователь потоков и т.д.).Он автоматически генерирует спецификацию и создает план для проектирования, что позволяет экономить время .

Note: плагин Specctr для Adobe Illustrator имеет две версии, Lite и Pro. Версия Lite является бесплатной для everyone ³ , но имеет некоторые ограничения.Pro версия является более мощным, платное и имеет функцию “Развернуть Холст”, и вы можете изменить шрифт, в котором отображается спецификация.Specctr Pro имеет другие дополнительные параметры, которые можно настроить на вкладке “Спец Options” на панели, в том числе опций для цветов в трех типов спецификаций, в цветном режиме (RGB, CMYK, HSL, HSB) и др .

Обзор Из Specctr Для Illustrator

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

• Ширина и высота элементов;
• Характеристики текст (семейство шрифтов, размер шрифта, цвет шрифта) .

⁴
Главная вкладка панели, “Выбор Подробности” на вкладке панели и “СПЕЦ Параметры” на вкладке панели в версии Specctr Lite.( Увидеть большую preview ⁵ )

Ширина и высота элементов, а также текста спецификации способности являются наиболее распространенными, как в программе дизайнера, который является, почему мы включили их в бесплатной версии.Только эти две функции должны сохранить вам много времени.Кроме того, бесплатная версия имеет “Развернуть Холст” функцию и возможность изменить шрифт спецификаций .

Потребности и Installation

Specctr Lite может быть скачать для free ⁶ с нашего сайта (поиск “ Попробуйте Specctr Lite”).Чтобы использовать Specctr для Illustrator, вам понадобятся:

• В Mac или Windows, машины;
• Копия Adobe Illustrator CS5, CS5.1, CS6 или CC (Creative Cloud версия) .

Процесс установки довольно straightforward:

1. Скачать инсталлятор Specctr .
2. Дважды щелкните загруженный ZXP файл.Adobe Extension Manager откроется.Нажмите на
3. Restart Illustrator .
4. В Illustrator, перейдите к Window → Extensions → Specctr в меню, чтобы открыть панель Specctr .

Note: Если вы используете Windows Vista, вам может понадобиться для запуска Adobe Extension Manager в качестве администратора, либо расширение может не установить (это известное ограничение на Adobe Extension Manager) .

Быстрый How-To Guide

После установки Specctr, вы можете спец документ в несколько простых шагов:

1. Настройте параметры в «Спец параметры” на вкладке .
2. Выберите параметры, которые нужно отобразить .
3. Сделать комнату для ваших спецификаций (по желанию) .
4. Spec от

Процесс работы с Specctr Lite и Pro очень похожа.Единственное отличие состоит в функциональности (Lite имеет меньше возможностей,) .

1. Отрегулируйте настройки “Спец Options” Tab

Во-первых, это хорошая идея, чтобы настроить, как спецификации будут смотреть.Вы можете сделать это на вкладке “Спец Options” вПанель Specctr.Там, вы можете сделать следующее:

• Управление как ваши спецификации будет выглядеть, регулируя шрифта, цвет, размер и толщину линии .
• Цветовой режим, в котором вы хотите Spec: RGB (оба rgb() и HEX режимы), CMYK, HSL или HSB .
• Назначение различных цветов в зависимости от типа Технические характеристики: Тип объекта, объект формы, и расстояния между и размеров .

2. Выберите параметры для Display

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

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

3. Убедитесь в номере для вашего Specifications

По желанию, вы можете увеличить размер монтажной области (или холсте), чтобы освободить больше места для генерируемых спецификаций.Используйте числовое поле рядом с кнопкой “Развернуть”, чтобы увеличить размер (в пикселях) .

4. Spec Away

Просто выберите любой объект (ы) на монтажной области, а затем использовать один из спецификации кнопок:. “Форма / Текст”, “Ширина & Высота” или “Размер” Технические характеристики будет сгенерирован автоматически для элементов, выбранных намонтажной области .

Вы можете выбрать один из двух объектов (удерживая Shift ключ) к спекуляции пространство между ними.Если только один объект и нажатии на кнопку “Размер”, затем расстояние от объекта до краев монтажной области будет отображаться .

Вот краткий демо-ролик этого процесса:

Другое Features

Для максимальной экономии времени, вы можете спец multiple текст и формы объектов с одним щелчком мыши.Просто выберите несколько (или все) объекты и нажмите кнопку спецификации .

Для лучшего readability, окончания строк в Specctr будет меняться в зависимости от того, что вы spec’ing: заполненную точкой для текста, контурным круг для формы, и кронштейны для расстояния .

Окончаниях строк автоматически регулировать на основе формы, текста и расстояние .

Ваши характеристики автоматически organized и сгруппированы в слоях, так что вы можете быстро превратить их видимость выключен или удалить их .

Технические характеристики, организованные в слоях .

Если многие объекты находятся близко друг к другу, то есть шанс, что характеристики могут совпадать.Чтобы устранить эту проблему, просто move и распространять спецификации из.Рука, которая соединяет их в объект всегда оставаться на связи с объектом, независимо от того, где вы перемещаете их на монтажной области .

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

Примечание О Units

Specctr будет использовать единицы расстояния, опирающихся на настройках пользователя в Illustrator (Edit → Preferences → Units).Для веб-документов, Specctr всегда будет использовать пиксели .

⁷ Диалоговое Иллюстратора “Настройки”: Агрегаты .

Различная спецификация Scenarios

Веб Design

Есть много причин, чтобы использовать Illustrator для веб-дизайна.(Читать статью Vincent Le Moign в “? Производственные веб-дизайна с … Adobe Illustrator ⁸ “, чтобы услышать некоторые из аргументов). Иллюстратор является быстрым, надежным, многоразовые и особенно полезна для дизайнеров, которые создаютоба каркасы и окончательный дизайн .

Specctr была создана с веб-дизайнеров в виду из-за множества экранов потоков, которые должны быть созданы и билд.Хотя spec’ing, как правило, проце� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров