Защо всъщност да предпочетем ai пред psd файл?
Illustrator предлага всичко, което ни е нужно, за да конвертираме един файл към HTML и CSS код. Ако всъщност използваме Illustrator за slice-ване даже имаме множество предимства като:
- директна работа с векторни изображения (retina)
- export-ване на SVG-та, както и @2x и версии на растерни изображения с по-висока резолюция
- inspect-ване на border radius
Така че ако трябва да избирате между това кое да използвате – можете да бъдете сигурни, че взетите стойности директно от оригиналния (ai файл) са много по-точни.
Нека сега разгледаме по-важните неща, които ще са ни необходими когато слайсваме директно от Illustrator.
Липсващи “линкнати” файлове
Възможно е към .ai файла да няма приложени “линкнатите” (ембеднатите) изображения. В такъв случай на екрана ще ни се появи следното съобщение:

Както се прави и при конвертиране, така и тук трябва да се посочи пътя до тези файлове (ако имаме налични такива). В противен случай кликаме на “ignore”.
Важно уточнение ако отваряте PDF файл през Illustrator
Ако PDF файла съдържа няколко (повече от 1 на брой) страници на екрана ще ви се появи следния прозорец:

В този случай има леко неудобство (което го има и при Photoshop). Необходимо е да отваряте всяка страница по отделно. Когато обаче сте вече на дадена такава в Illustrator – използвайте F12, за да преминете на друга страница. Така няма да ви се налага всеки път при смяна на страница да затваряте програмата и да отваряте на ново.
Липсващи шрифтове
Често се случва, когато получим файл от клиент, да липсват шрифтове. В тази ситуация на екрана ще ни се появи следното:

За целта трябва или да ги потърсим и заместим със съответните или със системни такива ако нямаме достъп до тези.
Подготовка за слайсване
След като имаме вече отворен дизайна пред нас за улеснение нека отворим няколко прозореца, от които ще черпим информация на по-късен етап. Тогава и ще обясня защо са ви необходими. Това са:
- Window > Properties
- Window > Layers
- Window > Asset Export
- Window > Info

Инспектване на layer-и
След като вече предварително сме отворили Window > Layers панела, тук ще видите списък с всички слоеве.

Възможно е някои:
- да са заключени (при клик върху „катинарчето“ ще отключите за редактиране или разглеждане, както е при нас)
- да са скрити (при клик върху празното квадратче ще ви се появи „оченце“, което означава, че вече е видим дадения слой)
Смяна на мерните единици
За да сменим default-ните стойности на мерните единици, които използваме, е достатъчно да отидем на Illustrator > preferences > units (за mac os), съответно от Edit > Preferences > Units (за windows) и от там вече да изберете такива, които ще са ви необходими – в нашия случай px.


За да смените глобално тези опции изберете File > Document Setup.


помощни материали: Change the unit of measurement
Инспектване на font properties
Когато селектирате елемент (селекцията е активна) от панела вдясно ще можете да видите стойностите, които са ви необходими:
- width и height
- цвят на запълване (fill)
- на border-а ако има такъв (stroke)
- процент прозрачност (opacity)
- също ако има приложени градиент, pattern
- font-family
- font-weight
- font-size
- line-height
- letter-spacing
- alignment

Тук бих искала да вмъкна леко уточнение, че ако НЕ селектирате отделен елемент, а група такива, от Window > Info panel ще ви покаже единствено информация, кое е общото между елементите, а не цялата информация. В този случай можем да видим, че единствено font-family, opacity и alignment съвпадат:

Измерване на разстояние между елементи
Можете да използвате Measure tool, като самите резултати следва да са видими в Info panel. След като вече имате активирано advanced menu (от Window > toolbar) отидете на Eyedropper tool > кликнете и задръжте > изберете Measure tool.
Кликнете къдете искате да поставите началната точка, след това крайната точка > в info panel ще ви се покаже самото разстояние. Ако измервате от ляво надясно или от горе надолу ще забележите, че стойността е положителна. Ако обаче измервате наобратно съответно ще получите същите числени стойности, само че с отрицателен знак.

помощни материали: Measure distance between objects
Преди да завърша това бих искала да спомена, че ако случайно ви трябват ruler-и – можете да ги включите от View > Rulers > Show rulers (ctrl + r) или съответно hide rulers ако искате да ги деактивирате.

Измерване на border-radius
Когато изберете даден елемент ще видите запълнени кръгчета. При двоен клик ще се покаже прозорче, в което са описани стойностите. Съответно дали на всички ъгълчета или само на някои е зададен такъв, или изобщо няма.

Понеже съм попадала на проекти, в чиито дизайни има container-и, които са имали border-radius от сорта на 3-4px, в подобни случаи е възможно да бъде пропуснато. За това е важно да бъде измерен.
Експортване на скрийншоти на страниците
File > Export > Export for screens
Ще ви се отвори прозорец, на който трябва да сте на Artboards tab. Преименувайте страниците (в случай, че не са). От дясно изберете къде искате да запаметите и съответния формат > Export Artboard. За по-ясна представа може да видите тук стъпките:

Експортване на отделни елементи (изображения, иконки, лога)
Маркирайте елемента или множеството, ако са повече, и ги завлачете в Assets panel (можете да активирате през Windows). Само не забравяйте първо да разгрупирате тези, които не искате да обхванете.
След това изберете в какъв формат искате да ги екстракнете (можете да изберете и няколко варианта), маркирайте отново всички (click + shift) или само някои определени, изберете къде искате да се запамети и “export”.
