Како веб девелопер, работам со дизајнер и заедно креираме одлични (барем така мислиме) сајтови за нашите клиенти. Употребуваме многу алатки за правење концепти, жичени модели, креирање содржина, генерирање код, и сето она што е неопходно за нашиот работен тек на веб. Се чини дека секогаш се враќаме на истите алатки, а Adobe Illustrator е една од нив. Зошто? Нели прилагодливот дизајн го уби процесот на статичкиот дизајн? Не целосно. Дали го направи потежок? Да. Но, Illustrator има алатки и опции кои ние ги употребуваме од различни причини, од креирање на едноставни модели (правење жичени модели) или содржина, до целосно прилагодливи дизајни.
Не се обидувам да ве убедам да си ги смените алатките кои ги употребувате. Можеби вашиот работен тек е најдобар за вас. Можеби е подобар и од мојот, но содржината на веб еволуира, станува појасна, помодерна и нуди оптимизација за мобилни. Ние навистина размислувавме што е она што ни е потребно од алатки за да ги добиеме најдобрите работи за она што треба да го направиме.
Illustrator е дел од нашиот алатник заради следниве главни причини:
- Независност од резолуција
- SVG, PNG, GIF, JPG—нема проблем
- Хостирани фонтови и фонтови со икони
- Совршено до пиксел (работење со мрежи)
- Жичен модел или целосен дизајн – вие одлучете
- Одлично работи со растер
- Симболи и други опции кои ќе ви го заштедат времето
- Интеграција со постоечки работни рамки
- Генерира интерактивни прототипи
- Извлекува CSS
Ајде подетално да ја разгледаме секоја од овие десет причини.
1. Независност од резолуција
Кога ќе почнете да работите во светот на печатењето, една од првите работи кои ќе ги научите е “растер наспроти вектор.” Долго време овој проблем не се однесуваше на веб. Главно стануваше збор или за растерска содржина, или за текст, а векторската содржина немаше свое место на повеќето веб сајтови. (Да, знам за видео, аудио, итн.), Ситуацијата дефинитивно се смени со појавата на фонтовите за икони, скалабилните вексторски графики и друго.
Illustrator е векторски ориентиран, односно се базира на “точки и математика,” како што јас сакам да кажам. Ви дозволува да креирате уметност која може бесконечно да се зголемува, а сепак да изгледа одлично. На веб, имаме содржина со различна големина на уреди, и содржината мора да се оптимизира за секоја големина, т.е содржината мора да изгледа одлично на секоја големина (или најмалку генеричките големини-телефон, таблет и десктоп).
2. SVG, PNG, GIF, JPG—нема проблем
Бидејќи Illustrator е векторска алатка, тој може да генерира оптимизирана веб содржина во форма на SVG, PNG, GIF, или JPG графички формат. SVG лесно се креира (File > Save As) и има цела серија на опции за зачувување кои вие можете да ги прилагодите за да ја подобрите графиката.
Вебот постојано се развива, па скалабилната векторска графичка содржина се употребува сé почесто, на сé повеќе сајтови. SVG е вектор за на веб. Во Illustrator, File > Save As ги нуди најголемиот дел од стандардните прилагодувања кои ви се потребни. (погледнете ја Илустрација 1). Како и со повеќето формати на датотеки, ако SVG ја поддржува содржината која е на вашиот простор за цртање, тогаш оваа опција ќе функционира, а во спротивно, нема. Овој лесен процес на креирање е одличен за дизајнирање на прилагодливи сајтови и содржина за истите.
3. Хостирани фонтови и фонтови со икони
Откако Adobe Illustrator е дел од Creative Cloud, претплатниците имаат пристап до библиотеката Typekit (види Илустрација 2). Тоа подразбира целосна датотека на хостирани фонтови кои можете да ги употребите во вашите дизајни во Illustrator и на вашите веб сајтови.
Многу од нас употребуваат и фонтови за икони за социјални икони, копчиња и друго. Постојат многу сајтови за вакви фонтови, меѓу кои Font Awesome и Genericons. Повеќето од нив ви дозволуваат да ги превземете фонтовите за икони кои ги нудат, што обично вклучува десктоп фонт кој можете да го инсталирате за да ги употребувате фонтовите во Illustrator. Во Illustrator, на повеќето-ако не и на сите- икони во фонтовите за икони, можете да им пристапите преку панелот за глифи (Type > Glyphs), како што е прикажано на Илустрација 3.
4. Совршено до пиксел (работење со мрежи)
Повеќето од нас дизајнираат на мрежа, бидејќи почнуваме со креирање на сајтовите употребувајќи работни рамки кои содржат флуидни мрежи (CSS). Совпаѓањето на дизајнот со мрежата може да ви е од голема полза кога се обидувате да развивате сајт од дизајн содржината во Illustrator (погледнете ја Илустрација 4).
Дизајнирањето по мрежа значи и дека сакаме да постигнеме совршенство до пиксел. Во Illustrator, ова значи порамнување кон вградена мрежа со пиксели. Кога креирате нов документ, (File > New), Illustrator ви нуди серија на профили за веб и различни уреди за да го започнете дизајнот. Овој процес ви дозволува да го прилагодите просторот на боја како RGB и мерките како пиксели, ви дава различни големини на документ, и ја овозможува опцијата за порамнување на новите објекти кон мрежата со пиксели – “Align New Objects to Pixel Grid” (погледнете ја Илустрација 5).
Со опцијата за порамнување на објектите кон мрежата со пиксели, “Align New Objects to Pixel Grid”, секоја нова содржина која ќе ја креирате ќе се прикачи на мрежата, која стандардно се прикажува кога зумирате на најмалку 600% со вклучено View > Pixel Preview. Оваа опција ги прави хоризонталните и вертикалните рабови на објектите појасни и поостри. Ако сликата во моментот на ви е порамнета со мрежата, може да ја селектирате, и потоа да изберете Align to Pixel Grid во панелот за трансформирање (Window > Transform), како што е прикажано на Илустрација 6.
Би сакале да ја прилагодите мрежата за распоред во Illustrator на 12, 16, или друг број на колони. Сигурен сум дека на веб има AI образци кои можете да ги превземете и употребувате, но може да си креирате и сопсвена мрежа, како што е покажано на Илустрација 7. (Процесот можете да го погледнете на ова YouTube видео.)
5. Жичен модел или целосен дизајн – вие одлучете
За некои веб проекти употребувам Illustrator само за да ги направам концептите, како на пр. креирам жичени модели или содржина како елементи на страница, икони, итн. Но, ако проектот одговара, тогаш употребувам Illustrator и за да поставам совршен распоред на прилагодливите страници (погледнете на Илустрација 8). За мене, една од најдобрите работи на Illustrator е неговата многустраност. Некогаш одлично одговара, а некогаш не. Дали е веб алаткла? Не. Но, затоа има одлични адаптации.
6. Одлично работи со растер
Кога дизајнирате сајт, векторскиот аспект на Illustrator е одличен заради неговата прилагодливост. Но, голема е веројатноста дека ќе ви требаат и растерски слики на сајтот. Иако Illustrator не е најдобрата опција за уредување на растерски слики, тој нативно поставува PSD датотеки и поддржува слоеви и композиции на слоеви од Photoshop (погледнете ја Илустрација 9).
Оваа содржина може да се оптимизира за употреба на веб преку File > Save for Web. Illustrator ја нема способноста на Photoshop да генерира средства, но може да го употребиме она што го знаеме.
Една дополнителна информација за вас: Многумина од нас креираат ретина слики за сајтовите. Тоа значи повеќе верзии на секоја слика со два пати поголема густина на пиксели (генерички). Illustrator нема лесен начин на кој може да произведе повеќе верзии од секоја слика, и најверојатно не е најдобар избор за растерски слики, но еден супер ефтин додаток, под името Smart Layer Export може да генерира повеќе верзии (ретина) за секој слој за вас.
7. Симболи и други опции кои ќе ви го заштедат времето
Illustrator има многу опции кои ќе ви го заштедат времето, како симболи (со опцијата 9-slice scaling), стилови за текст и графика, активни (живи) форми, глобални мостри на боја, динамички копчиња и повеќе. Да ги погледнеме:
Симболи (со опцијата 9-slice scaling)
Симболите ви нудат одличен начин на повторно употребување на сликите и задржување на конзистентноста. Кога ќе зачувате слика како симбол, истата можете да ја употребите неограничен број на пати во еден документ. Ако оригиналниот симбол претрпи измени, симболите во вашиот документ (наречени инстанци на симболот) се ажурираат (погледнете ја Илустрација 10).
Ако ја вклучите опцијата 9-slice scaling кога креирате симболи, сликата ќе се подели во 9 секции со приказ на мрежа, и секоја од тие 9 области се скалира независно. Одличната работа кај оваа опција е тоа што кога ја менувате големината на сликата, аглите нема да се скалираат, а останатите области ќе се скалираат по потреба. Ако го уредувате симболот, повторно ќе ви се појават помошните ленти. (погледнете на Илустрација 11).
Стилови за текст и графика
За да ја здржите конзистентноста и за да работите побрзо, може да употребите секаков вид на стилови во Illustrator. Од типичните стилови за текст, како стилови на карактери и пасуси (погледнете на Илустрација 12), Illustrator ви обезбедува многу начини на кои можете да работите помалку, но попаметно.
Активни (живи) форми
Претходните неколку верзии на Illustrator CC можеа да креираат и уредуваат заоблени агли. Аглите моеа да се скалираат заедно со сликата или да не се скалираат. Овие активни форми, го олеснија креирањето на овие сеприсутни заоблени агли (погледнете ја Илустрација 14). Аглите на активните форми може да се уредуваат на различни места, меѓу кои и панелот за трансформирање.
Глобални мостри
Уште една одлична опција за заштедување на време е креирањето и работата со глобални мостри. Ако зачувате боја во Illustrator, може да селектирате Global во опциите Swatch (погледнете ја Илустрација 15). Потоа, ако ја смените некоја од опциите (како комбинација на бои), истата ќе се ажурира секаде каде што сте ја употребиле таа мостра на боја во документот.
8. Интеграција со постоечки работни рамки
Како и што споменав претходно, многумина од нас започнуваат со развојот имајќи работна рамка или платформа на ум, нешто што обично има длуидна мрежа. Ако дизајнирате со поголеми работни рамки како Bootstrap на Twitter или Zurb Foundation, може да ги додадете библиотеките за компонентите на вашиот дизајн.
9. Генерира интерактивни прототипи
Ако употребувате Illustrator за да креирате модел за веб дизајн, би било добро кога би додале малку интерактивност во вашиот дизајн и потоа би го споделисле со други (вашите клиенти, на пример). На тој начин ќе добиете подобро чувство за корисничкото искуство и ќе направите измени во кориснилкиот интерфејс пред да напишете било каков код. Можете да изберете од многуте алатки за правење прототипи. Оние две кои јас ги имам употребувано се MarvelApp и Prototyping on Paper (POP). Кога употребувате MarvelApp, на пример, може да ја зачувате AI содржината како PNG и ги прикачувате сликите на MarvelApp (Илустрација 16). Потоа можете да додадете едноставна интеракција која вие и вашиот клиент би ја тестирале. (Илустрација 17).
По мое мислење, една лошите работа при дизајнирањето за веб во апликација како Illustrator е тоа што таа не ви дозволува да ја прикажете прилагодливата природа на дизајнот, и не нуди интерактивност. Токму затоа употребата на услуги како MarvelApp или POP може да го премости јазот (или барем да го скрие).
10. Извлекува CSS
Една од опциите на Illustrator која јас ретко ја употребувам (но ги препознавам нејзините можности) е опцијата за извлекување CSS. Пред неколку верзии, Illustrator додаде панел за CSS својства (Window > CSS Properties), кој можете да го употребите за да извлечете CSS од текст, графика или друга содржина (Илустрација 18), и потоа да го експортирате како CSS датотека или да го копирате и вметнете во вашиот омилен уредувач. Оваа техника би им била од полза на дизајнери кои треба да предадат front-end CSS на програмер, или како почетна точка за форматирање кога креирате сајт.
Една од опциите која ми се допаѓа мене во панелот на CSS својства е тоа што можете да зачувате PNG датотеки од слики. Ако Illustrator верува дека сликата е премногу комплицирана за да се креира со поле или текст и форматирање (да речеме, група објекти за лого), тогаш тој ќе ја направи сликата растерска, зачувувајќи ја како PNG кога ќе го експортирате CSS-от. Во панелот за CSS својства, креираниот CSS created ќе биде за слика во позадина (Илустрација 19).
извор AdobePress
Заклучок
Со сите овие одлични алатки и опции кои ги имаме на располагање, се надевам дека може да видите зошто мислам дека Adobe Illustrator CC треба да е дел од работниот тек за веб. Можеби не е совршена алатка за веб дизајн, но сепак има многу корисни опции (за мене, а се надевам и за вас).
Illustrator можете да го совладате како поединечен курс или во рамки на студиските програми за веб дизајн и UX дизајн на веб академијата Еверест.
Највредниот дар кој го поседуваат луѓето е грижата и споделувањето.
Споделете го тоа што го имате, грижете се за тие кои ги имате.
Ако ти се допадна статијава, сподели ја со своите пријатели.
Ќе ги израдуваш и нив и нас.
