Как установить и забыть (часть) вашего дизайна иконки
Недавно я заново открыл для себя Adobe Creative Cloud (и под «открытием заново» я подразумеваю, что благодаря своей работе я получил лицензию, которая доставляет мне бесконечную радость), поэтому я заново изучаю некоторые программы Creative Suite. . Последний раз, когда я близко знакомился с Illustrator, был в CS… может быть? Я предположил, что с тех пор Adobe сделала эффекты, подобные CSI, возможными нажатием одной кнопки, поэтому мне не терпелось превратить этого ребенка с нуля в целую кучу значков за 60 секунд.
Часть моей работы связана с созданием значков, и у значка никогда не бывает одного цвета — есть состояния покоя, состояния наведения, активные состояния, открытые состояния, закрытые состояния… поэтому мне всегда нужно сделать одну и ту же иконку в нескольких разных цветах.
Я создал один файл Illustrator и поместил каждый цвет в отдельный слой, потому что я понял, что где-то есть функция, которая сохранит каждый слой в отдельном файле. Открыв каждое меню и погуглив, я обнаружил, что этой функции не существует. Но! Я также обнаружил, что JavaScript очень хорошо работает с Illustrator — кто бы мог подумать?! Написав (или позаимствовав, давайте будем честными) несколько не слишком сложных сценариев, вы можете практически сохранить свое произведение искусства!
Есть несколько скриптов, которые встроены в ваш Illustrator, но настоящий секрет владения этим скриптом — это расширение, которое Adobe называет ESTK — ExtendScript Toolkit — которое позволяет вам писать свои собственные скрипты. Я понимаю, что раньше он был в комплекте с AI, но начиная с CC его нужно скачивать отдельно. Его можно найти в разделе Расширения на панели инструментов Creative Cloud.
После того, как вы установили ESTK, откройте его. Выберите Adobe Illustrator и свою версию в раскрывающемся списке в верхнем левом углу. И вот тут начинается самое интересное!
Вы можете написать свои собственные сценарии, используя доступную документацию (всегда читайте документы!), или вы можете поблагодарить звезды за удивительное сообщество разработчиков программного обеспечения с открытым исходным кодом и найти себе хорошо написанный сценарий, который уже делает то, что вы потратили. весь день пытаюсь сделать. Я нашел несколько различных вариантов в Интернете, и это тот, который я использовал:
#target Illustrator
// script.name = exportLayersAsCSS_PNGs.jsx;
// script.description = mimics the Save for Web, export images as CSS Layers (images only);
// script.requirements = an open document; tested with CS5 on Windows.
// script.parent = carlos canto // 05/24/13; All rights reseved
// script.elegant = false;
/**
* export layers as PNG
* @author Niels Bosma
*/
// Adapted to export images as CSS Layers by CarlosCanto
if (app.documents.length>0) {
main();
}
else alert('Cancelled by user');
function main() {
var document = app.activeDocument;
var afile = document.fullName;
var filename = afile.name.split('.')[0];
var folder = afile.parent.selectDlg("Export as CSS Layers (images only)...");
if(folder != null)
{
var activeABidx = document.artboards.getActiveArtboardIndex();
var activeAB = document.artboards[activeABidx]; // get active AB
var abBounds = activeAB.artboardRect;// left, top, right, bottom
showAllLayers();
var docBounds = document.visibleBounds;
activeAB.artboardRect = docBounds;
var options = new ExportOptionsPNG24();
options.antiAliasing = true;
options.transparency = true;
options.artBoardClipping = true;
var n = document.layers.length;
hideAllLayers ();
for(var i=n-1, k=0; i>=0; i--, k++)
{
//hideAllLayers();
var layer = document.layers[i];
layer.visible = true;
var file = new File(folder.fsName + '/' +filename+ '-' + k +".png");
document.exportFile(file,ExportType.PNG24,options);
layer.visible = false;
}
showAllLayers();
activeAB.artboardRect = abBounds;
}
function hideAllLayers()
{
forEach(document.layers, function(layer) {
layer.visible = false;
});
}
function showAllLayers()
{
forEach(document.layers, function(layer) {
layer.visible = true;
});
}
function forEach(collection, fn)
{
var n = collection.length;
for(var i=0; i<n; ++i)
{
fn(collection[i]);
}
}
}Я хотел бы присвоить себе этот гениальный сценарий, но есть несколько волшебников, которые проделали тяжелую работу задолго до того, как я узнал о существовании такой силы. Это конкретное произведение искусства было написано CarlosCanto и размещено на форумах Adobe.
В духе того, чтобы никогда не просто копировать и вставлять вещи, которые мы не понимаем: скрипт в основном выполняет цикл forEach через ваш файл. Каждый раз, когда скрипт попадает на слой, создается новый файл. Каждому новому файлу присваивается имя исходного файла, номер, соответствующий номеру слоя, и он сохраняется в формате .png.
Вот как можно увидеть это волшебство в действии:
- Скопируйте скрипт и вставьте его в новый файл в ESTK. Сохраните скрипт с расширением .jsx.
- Убедитесь, что у вас открыт Illustrator с файлом, который вы хотите сохранить. (Если Illustrator не открыт, сценарий автоматически отменяется.)
- В ESTK убедитесь, что ваша версия Illustrator выбрана в верхнем левом раскрывающемся списке.
- Нажмите кнопку «Выполнить» в ESTK — она находится в меню вверху и представляет собой зеленую стрелку, похожую на кнопку «Воспроизвести».
- Вы увидите, что Illustrator появится на переднем плане экрана, и вас спросят, где вы хотите сохранить свои файлы.
- Когда сценарий будет проходить через слои вашего файла, будет своего рода волновой эффект.
- Готово! Откройте папку, в которой вы сохранили все файлы, и вы увидите, что у вас есть один новый файл .png для каждого слоя!
Если вы супер-скриптум, вы можете прочитать документы и настроить скрипт, чтобы называть файлы именами слоев, или вы можете изменить порядок сохранения слоев или, возможно, множество других вещей. На данный момент я очень доволен этим (относительно) базовым скриптом — он экономит мне массу времени. Надеюсь, вы получите от этого столько же пользы и удовольствия, сколько и я!
