Подготовка Иллюстратора к работе над сайтом

Подготовка Иллюстратора к работе над сайтом

Привет. Сегодня обсудим вопрос затачивания Иллюстратора под проектирование сайтов. В общем-то, суть дела состоит в трех вещах — настройке шаблона, расположении панелей и шоткатах (горящих клавишах).

Настройкой шаблона, впрочем, заниматься не придется. Потому что я его уже настроил, осталось только взять и использовать. Остальное тоже не на много сложнее.

Шаблон

Я использую шаблон (template), в котором уже заданы стили текста, размер документа 1200×2000 px, пиксели в качестве единицы измерения, сетка на каждые сто и десять пикселей. Ну что еще? А, конечно! Там уже лежат кнопочки, текстовые поля, ну кое-какие иконки. Практика показала, что часто применяемые вещи удобнее держать на полях, чтобы на виду были. За это я кстати очень люблю векторные редакторы — у них есть поля, на которых просто замечательно раскладывать всякий хлам:


Рабочее поле, а справа от него полезные в работе куски

Если не париться подробностями, то начать использовать все это дело очень просто: качаете шаблон, открываете в Иллюстраторе ЦС4, и сохраняете, простите уж за тавталогию, как шаблон:

Теперь, если мы начинаем делать сайт, просто открываем заготовленный шаблончик:


Кстати, шаблон этот будет лежать и слева — в колонке Open a Recent Item.


Сюда еще можно попасть по сочетанию клавиш Ctrl+Shift+N

Увы, заставить Иллюстратор показывать линейку с десятками и сотнями пикселей, как Фотошоп, нельзя. Даже если выбрать пофиль документа Web, он продолжит мыслить по-печатному — семидесятидвушками :-( Хотя, некоторе время назад я с удивлением обнаружил, что это мне практически не мешает, но все равно сознание несовершенства несколько тяготит.

Тут уж ничего не поделаешь. Хорошо хоть сетку можно поставить на сотни и десятки пикселей (это уже сделано в шаблоне):

Горячие клавиши

Есть и такие штуки, которые в темплейт не запихнешь. Например, удивительное для меня отсутствие горячих клавиш на Flip horisontal и Flip Vertical. Ничего, из этого затруднения выйдем с помощью двух экшенов, повешенных на Shift+F6 и Shift+F7 соответственно.

Вот вам файл с ними.

Заодно там же есть экшены включения и выключения настройки Scale strokes & effects. Ее тоже периодически приходится менять. Shift+F2 — вкл., Shift+F3 — выкл. От нее зависит, будет ли масштабировать закругленность углов, например. Или отбрасываемая объектом тень. В седьмом выпуске каллиграфии и типографики, в пункте «Масштабирование» было видео на тему этой настройки.

 

Кстати, для Фотошопа существует забавное приложение Сonfigurator, которое позволяет создавать свои панельки. Не то чтобы безграничные возможности, но кое-что можно.

Впрочем, эта штука пока запросто заменяется экшенами.

 

Но продолжим, осталось не много. На какую-нибудь удобную клавишу сразу сажайте панельку Appearance. У меня она на F11. Это важнейший интрумент, который позволит вам быстро изменять свойства объекта, начиная от заливок и обводок, заканчивая примененными к объекту эффектами (тени, скругление углов, blur)

F12 у меня всегда оставлена под мимолетные экшены (и в Иллюстраторе, и в Фотошопе). На нее я забиваю те действия, которые мне нужно часто выполнять в текущем проекте.

Вообще я за то, чтобы весь ряд функциональных клавиш затачивать под себя. Ну F1 понятно, пусть остается. Она все-таки периодически нужна. Но вот функция Revert (отмена всех изменений, внесенных в документ с момента его открытия), стоящая по умолчанию на F12 — просто странность. Это что, для тех дизайнеров, которые вечно в сомнении? Или для тех, кто паталогически делает что-то неправильно и возвращается к исходному состоянию в своей работе?

На F10 забито отображение Paragraph styles. Они часто нужны при проектировани сайтов. К ним прилеплены Character styles, но для нее у меня есть и отдельный шоткат — Ctrl+F10.

Таким же макаром к Color цепляю Swatches, Gradient, Transparansy (все, что про цвет). Теперь они дружно появляются по F6

Align забита на F9 и к ней прилеплены Transform, Pathfinder и Stroke, то есть все, что связано с формой.

Swatches, кстати, вдобавок забита на Ctrl+F6.

Группировка панелей позволит держать в голове меньше горячих клавиш. Но есть и неприятность. Если вы нажали Tab и отключили тем самым все панели, а потом решили показать, например, блок работы с цветом, то вот хрен вам. Появится только палитра Color, а все остальное — нет. Ни Gradient, ни Swatches... Как победить этот недуг, я пока не знаю. Поэтому для часто используемых палитр пока приходится делать отдельные шоткаты.

Я решил для себя так, для важных палитр и добавочных к ним (Color / Swatches; Paragraph Styles / Character Styles) использую функциональные клавиши и сочетания функциональных клавиш с контролом (Ctrl+F*):
Color — F6, Swatches — Ctrl+F6;
Paragraph Styles — F10, Character Styles — Ctrl+F10.

Для экшенов использую Shift+Ctrl+F*.

Для разных эффектиков — Alt+Ctrl+Shift+буквы.

 

Закругленные уголки, тени и Rasterize

Очень часто приходится иметь дело с закруглением уголков и деланием тенюшек. Поэтому, на соответсвующие эффекты у меня в Иллюстраторе стоят свои клавиши:
Alt+Ctrl+Shift+R — Effect Stylize Round Corners;
Alt+Ctrl+Shift+W — Effect Stylize Drop Shaddows.

Нередко хочется увидеть набранный текст несглаженным. Тогда я пользуюсь
Alt+Ctrl+Shift+E — Effect Rasterize.

Хотел бы экспортнуть для вас сет горячих клавиш, но почему-то ничего похожего на Export Keyboard Profile там нету. Видимо, в Adobe считают, что люди не пересаживаются с одного компьютера на другой. А может, считают, что нечего тут клавиши горячие менять да еще и раздавать друг другу.

В общем, жмите Alt+Ctrl+Shift+K и настраивайте ручками. Благо, настраивать не так уж и много.

 

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

Тем не менее, даже этот зародыш здорово помогает мне работать.

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 21

Сашко
Чо та у меня сетка в ИЛе не появилася даже в шаблоне :(
#
Сашко
satantx
Пару клавишь записал, но хотелось бы больше, хотя можно порыться на других сайтах, но всё же. Спасибо
#
satantx
Саша Кириллов
Ну я сначала думал, дать больше клавиш.
Но потом понял, что по клавишам удобнее
сделать отдельную памятку. Просто чтобы
не скидывать все в одну кучу.

Скоро напишу.

Вот есть неплохая шпаргалка:
The Best Illustrator Shortcuts and Time Saving Tricks

При беглом осмотре выяснил, что там нету
чудовищно полезных клавиш Ctrl+2 — скрыть
объект (показать обратно Shift+Ctrl+2)
и Ctrl+3 — запереть объект, то есть его видно,
но схватить его нельзя.
Анатолий
ммм... Не забывайте с комбинациями клавиш не забывать про Маководов.
WearyMax
На DevArt видел шаблон поболее, там были все элементы основных браузеров (ФФ, Сафари, Хром, Опера).. кому интересно погуглите.

Америку не открыли, новичков если только наставили на нужный путь, а так статьи у вас становятся все жиже и пустыми...

ИМХО

***
Лицензионный то хоть иллюстратор? :)
Сашко
Мне понравилась статья :) Спасибо автору
#
Сашко
Grin
>> а так статьи у вас становятся все жиже и пустыми...
А вы все эволюционируете? Без обид, но для чего постоянные наезды на нас?
WearyMax
А вы все эволюционируете? Без обид, но для чего постоянные наезды на нас?
Это не наезды, а выражения мнения, и не о вас, а о материале на этом сайте, который публикуется в последнее время.

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

Без обид :)
kix
Не знаю, неуютно мне в Иллюстраторе рисовать сайты. Фотошоп и кривые держит, и думает в пикселях.
Еще, кстати, где-то советовали Файруокс использовать для этого дела, но он тоже показался не сильно удобным.
Типовые элементы на полях держать, конечно, удобно, но можно их и в отдельный слой прятать.
#
kix  
Hentony
Спасибо за статью. Я правда еще морально кажется не готова перейти с фотошопа на иллюстратор (оба CS4). Наверно, потому что часто рисую шапку кисточками, а бегать между двумя прогами не хочется.

Насчет шоткатов: это лично мое, никому не навязвыю, но я считаю, что help нафиг не нужен ) или повесить его на какую-нибудь длинную комбинацию. А на F1 я повесила "Сохранить для веб" - которой часто пользуюсь при нарезке сайта. Очень удобно стало.

А вот такой ламерский вопрос, поскольку ИЛЛ я почти не открывала — нарезаете вы сайты в нём или в фотошопе? Как например кусочек градиента сохранить и вырезать в картинке прозрачную дыру? Так же как в фотошопе?
Саша Кириллов
Hentony, привет.

Насчет нарезки
Вообще у меня в последнее время так складивается работа,
что я нарезкой занимаюсь очень редко. Только рисую,
а верстку делают другие люди. Но для них я всегда
конвертирую иллюстраторовские файлы в PSD.

Если же верстаю сам, то нарезаю из иллюстратора, там есть
тот же самый Slice Tool, которым можно указать желаемый
кусок. Это к вопросу о кусочке градиента.

А прозрачную дырку в картинке... Так как я не совсем
понял, что ты имеешь в виду, то отвечу на примере. Возьмем
сохранение какой-нибудь надписи с тенюшками в PNG-24.
Так же как и в Фотошопе скрываешь все, что лежит на фоне,
потом Save for Web и сохраняешь в ПНГ твой текст и тенюшки.
Про это спрашивала?
Hentony
Спс.
Слайсом не пользуюсь по причине не умения - мне легче самой выделить, скопировать/вставить в новый док/ сохранить, чем пользоваться слайсами... у меня они не получаются = )

Про дырку: я хочу сохранить гиф. Например у меня есть слоган на цветастом фоне. Когда я сохраняю этот прямоугольник с текстом на фоне, я хочу срезать весь лишний фон вокруг, но оставлю около букв по паре пикселей фона, чтобы сам фотошоп за меня не додумывал цвет при сохранении. В шопе я просто выделяю куски фона и вырезаю. А в Илле такого же нельзя сделать, если фон отдельной скажем векторной плашкой? Т.е. тока фотошопом.

Но я все равно попробую на каком-нибудь не сложном новом проекте сесть - сделаю его в ИЛЛЕ. И ваш шаблончик пригодится ;)
Саша Кириллов
Ну такие гифы (а лучше все-таки ПНГшки — они весят меньше)
придется, конечно, делать фотошопом. В векторе ведь довольно
по-другому действует. Поэтому доводка картинок в плане вот
всяких таких пикселечувствительных местах остается за фотошопом.

А Иллюстратор удобнее в верстальном планет. В нем ловчее можно
манипулировать объектами. Поэтому если навостриться, то получается
быстрей и удобней, чем в растровом редакторе.
Саша Кириллов
Довольно по-другому действует выделение, я хотел сказать.
Hentony
Спасибо за комментарии. Стало понятнее.
Макс
При создании макета очень выручает люстровская привязка к сетке)))
Просто выравнивать элементы даже без гайдлайнов.
Mitra
Есть вопрос, а какие значения использовались для несглаженого текста? А то, настраиваю - настраиваю, а так же душевно как у вас в примере не получается.

Спасибо за статью)
#
Mitra
Lemetriss
Век живи - век учись! Полезная статья, хотя шаблон - вата, но автор и предупредил об этом :)
#
Lemetriss
sllxxe
и это всё? за последние 2 года продолжения нет? ничего об настройке сетки по пиксельно, про слайсинг, ничего про какой анти-алиасинг использовать для текста и обводки, а какой для скруглённых объектов. А также, самое главное, об самом экспорте в фотошоп! Илл ведь не все объекты нормально экспортирует в шоп, точнее из-за некоторых фич, тупо сливает в один слой. негодую откровенно.
#
sllxxe

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler