Савети за рад са Иллустратор-ом. Ево једне луде идеје - дизајнирајте свој следећи веб пројекат у Иллустратор-у. Ако сте примарни веб дизајнер, велике су шансе да нећете добро одговорити на овај предлог. Илустратор једноставно не може све што Пхотосхоп може, зар не?

Не сигурно на тај начин.

Мада Пхотосхоп је постао де фацто алат веб дизајн, Иллустратор је више него способан да задовољи ваше потребе. Захваљујући својим алатима за распоред, често је бољи и погоднији програм за веб дизајн.

Пошто већина професионалаца за веб дизајн не жели да лута Иллустратор-ом тражећи доказе, саставио сам листу функција везаних за веб које треба да знате да бисте почели да експериментишете са веб дизајном у Иллустратору.

Испробајте неколико од ових и гарантујем вам да ћете почети да користите Иллустратор као стандардни алат у свом радном току веб дизајна.

1. Прво прво: подесите све јединице на Пикселе. Савети за рад са Иллустратор-ом

Иллустратор подразумевано користи метрику јединице за величину објеката и тачака за текст. Ово су одлична подешавања за већину дизајнерских ситуација, али за веб дизајн вероватно ћете желети да видите пикселе свуда. Дакле, пре него што почнете да радите на било чему другом, уверите се да су ваше јединице исправно подешене.

јединице вредности су пиксели. Савети за рад са Иллустратор-ом

Да бисте подесили јединице на пикселе:

  1. Отворите у менију Уреди
  2. Изаберите мерне јединице из подменија подешавања.
  3. Поставите све опције на "пиксели"

2. Креирајте документе користећи профил веб докумената.

 

Када желите да почнете да радите на новом дизајну, лако се померајте кроз прозор Нови документ и прескочите неке важне детаље — на пример, да кажете Иллустратору да планирате да радите на веб дизајну тако да не користите ЦМИК боје. и замућене ивице објекта. Само запамтите да изаберете подешавање Интернет профила у прозору Нови документ и бићете у реду.

3. Омогућите поравнање мреже пиксела за објекте. Савети за рад са Иллустратор-ом

Ова функција вам штеди живот ако сте икада имали проблема са замућеним ивицама облика у Пхотосхопу.

Поравнање мреже пиксела ће подесити равне хоризонталне и вертикалне сегменте објекта како би се савршено уклапале у мрежу пиксела, док ће закривљени и коси сегменти бити глатки. Резултат су оштри, пикселски савршени облици—нешто што свакако желите у веб дизајну.

Савети за рад са Иллустратор-ом

Горње дугме има омогућено поравнање мреже пиксела, што увек резултира оштрим ивицама.

Да бисте омогућили поравнање пиксела мреже на нивоу објекта:

  1. Изаберите објекат
  2. Отворите таблу Трансформ (Прозор > Трансформација).
  3. Означите поље за потврду „Поравнај са мрежом пиксела“ на дну панела (ако га не видите, двапут кликните на таблу да бисте приказали опције)

Белешка. Поравнање мреже пиксела је подразумевано омогућено за све нове објекте креиране помоћу профила веб документа. Међутим, ако лепите објекте из других Иллустратор датотека, мораћете ручно да прилагодите поравнање пиксела за њих. Савети за рад са Иллустратор-ом

4. Укључите преглед пиксела.

Функција Пикел-Превиев ће учинити да се Иллустратор понаша баш као Пхотосхоп када скалира вашу слику изнад 100% — уместо да сваки пут добијате савршене векторе, заправо ћете видети пикселе као да радите са растерском сликом.

Ако укључите преглед пиксела, осећаћете се као да сте у Пхотосхопу.

Размислите о томе како је то супер – имате сву моћ векторске графике на дохват руке и можете видети како резултат изгледа на нивоу пиксела.

Уредно, зар не?

Омогућите или онемогућите преглед пиксела

  1. Отворите мени за приказ
  2. Изаберите Пикел Виев.

5. Користите прозоре са уметничким делима. Савети за рад са Иллустратор-ом

Замислите да су две видео камере уперене у ваш пројекат.

Једна камера има нормалан ниво зумирања и приказује 100% вашег рада. Друга камера има ниво зума од 400% и усмерена је на једну специфичну икону на којој сте радили.

Попут хирурга, користите камеру за зумирање да направите мале промене на нивоу пиксела на икони, повремено баците поглед на камеру са 100% зумом да видите како она заправо изгледа у својој стварној величини.

Савети за рад са Иллустратором 12

Прозори на поклопцу су одлични када треба да радите са малим елементима као што су иконе — не морате стално да увећавате и умањујете да бисте проверили како све изгледа.

Ово су прозори Артворк—они вам омогућавају да истовремено видите свој дизајн са различитим нивоима зумирања, поставкама боја и другим варијацијама. Ово је веома корисно за веб дизајн, посебно када радите са детаљима на нивоу пиксела.

Да бисте користили прозоре Артворк:

  1. Отворите мени Прозор, а затим изаберите Нови прозор. Иллустратор ће креирати нову картицу са истим документом у виду.
  2. Идите поново у мени Прозор, изаберите Распореди > Премести све у прозор. Ово ће вам омогућити да се промените величина и распоред прозора један поред другог како ти одговара.
  3. Експериментишите са различитим нивоима зумирања у прозорима и почните да правите неке промене да бисте видели како то функционише. Савети за рад са Иллустратор-ом

6. Користите симболе да бисте брзо креирали дугмад, иконе и још много тога.

Колико пута сте креирали исто (или скоро исто) дугме, икону или виџет у Пхотосхопу? Ако се бавите веб дизајном, вероватно то радите сваки дан.

Иллустратор вам може помоћи да уштедите време и избегнете овај понављајући рад са симболима.

У суштини, симболи су бесконачан скуп готових производа елементи дизајна, који се може додати у рад једноставним превлачењем и отпуштањем, а затим модификован по потреби. Ово је идеално за дугмад, иконе и друге стандардне објекте које није потребно креирати од нуле.

Али постоји још један разлог зашто су симболи моћни, а зове се инстанција.

Симболи нису само згодни, већ и олакшавају ажурирање елемената дизајна који се понављају.

Симболи нису само згодни, већ и олакшавају ажурирање елемената дизајна који се понављају.

 

У суштини, кад год промените оригинални симбол, те промене се одмах одражавају у свим инстанцама симбола који се налазе у вашем уметничком делу. Да ли су вам потребна већа дугмад на вашој веб локацији? Само промените симбол. Да ли желите да ваша поља обрасца изгледају другачије на свакој страници? Само промените симбол. Схватили сте идеју.

Савет: Ако не желите да се то догоди одређеној инстанци симбола ас, кликните десним тастером миша на објекат на илустрацији и изаберите Прекини референцу симбола. Ово ће га искључити из аутоматских ажурирања.

Ево доброг видео снимка који објашњава како да користите и манипулишете симболима:

Коришћење симбола у Адобе Иллустратору од Адобе ТВ .

Да бисте користили постојећи симбол:

  1. Отворите таблу Симболи из менија Прозор.
  2. Превуците изабрани симбол на свој рад

Направите нови симбол:

  1. Направите слику симбола
  2. Отворите таблу Симболи из менија Прозор.
  3. Превуците илустрацију на таблу
  4. Кликните ОК у дијалогу да бисте потврдили.

Да бисте уредили симбол:

  1. Отворите таблу Симболи из менија Прозор.
  2. Двапут кликните на симбол да бисте ушли у режим уређивања.
  3. Када завршите, двапут кликните било где изван слике симбола да бисте изашли из режима за уређивање.

7. Лако проширите објекте помоћу скалирања од 9 сегмената. Савети за рад са Иллустратор-ом

Ово је напредна функција симбологије која вам омогућава да дефинишете који делови објекта се растежу током скалирања, а који остају непромењени.

Лево: Пример растегнутог дугмета са и без подешавања зумирања од 9 сегмената. Десно: Поставка скалирања од 9 сегмената укључује померање 4 водича који говоре Иллустратору који делови објекта су заштићени и који делови могу да се скалирају.

 

Практични пример је дугме са заобљеним угловима – ако желите да га учините дужим, не можете га само хоризонтално развући јер ће то изобличити цео објекат. Уместо тога, мораћете ручно да померате тачке облика. Са скалирањем од 9 сегмената, растезање ради како сте намеравали. Савети за рад са Иллустратор-ом

Да бисте заиста разумели како то функционише, послушајте овај сјајан видео водич са Адобе ТВ-а да бисте брзо сазнали:

Коришћење 9-сегментног скалирања са симболима од Адобе ТВ .

8. Заобљени углови свуда!

Можете да креирате заобљени правоугаоник у Пхотосхопу, али Иллустратор вам омогућава да примените недеструктивни ефекат заобљеног угла на скоро сваки објекат. Шта је недеструктивни ефекат? То значи да можете да га укључите, искључите или промените његова подешавања без утицаја на основни оригинални објекат.

Савети за рад са Иллустратором 23

Можете применити ефекат заобљених углова на скоро било коју врсту објекта и прилагодити га по потреби. Савети за рад са Иллустратор-ом

Да бисте применили ефекат заобљеног угла:

  1. Направите правоугаоник или било који други објекат са оштрим угловима
  2. У менију Ефекти изаберите Стилизујте > Заобљени углови.
  3. Унесите радијус угла и кликните на Преглед да бисте видели како изгледа.
  4. Кликните ОК да примените ефекат.

Да бисте променили ефекат заобљеног угла:

  1. Изаберите објекат са заобљеним угловима
  2. Отворите таблу Изглед из менија Прозор.
  3. Пронађите ефекат заобљених углова и двапут кликните на њега да бисте променили подешавања или кликните на икону ока да бисте га укључили или искључили.

9. Креирање брзе испуне помоћу растерског узорка. Савети за рад са Иллустратор-ом

Суптилни обрасци позадине су велики хит у веб дизајну, али многи дизајнери мисле да их није лако применити у Иллустратору.

Морам признати, није интуитивно, али решење је једноставно.

Креирање брзог попуњавања са битмап узорком

Да бисте креирали битмап образац:

  1. Поставите слику узорка на свој комад
  2. Кликните на "Убаци" на горњој траци (важно - неће радити без тога!)
  3. Превуците шаблон на палету Сватцхеви
  4. Нанесите узорак на било који објекат да бисте га испунили узорком

10. Аутоматско постављање текста око слика и објеката.

Пхотосхоп је познат по својим врло основним могућностима за уређивање текста. Ако желите да обмотате текст око слике, потребно је да направите два или три различита оквира текста и симулирате ефекат. Савети за рад са Иллустратор-ом

Срећом, Иллустратор вас је покрио.

Да бисте премотали текст око слике:

  1. Изаберите слику или објекат око којег желите да премотате текст
  2. Отворите мени Објекат, изаберите Преломи текст > Ново.
  3. Да бисте подесили раздаљину преламања, поново отворите мени преламања текста и изаберите Опције преламања текста.
  4. Померите слику преко текста да бисте видели ефекат премотавања

11. Креирајте богате визуелне ефекте са подешавањима изгледа објеката. Савети за рад са Иллустратор-ом

У Иллустратор-у, панел за изглед објекта функционише слично као ефекти слојева у Пхотосхопу — објекту можете додати више испуна и потеза, а затим се играти са њиховим начинима преноса, непрозирношћу и ефектима да бисте добили занимљиве резултате.

Овај текст је само један векторски објекат, стилизован помоћу панела Изглед и ефекти.

Игралиште је прилично велико - од падајућих сенки, замућења и сјаја до текстурирања, изобличења и 3Д. На овај начин можете поново креирати већину ефеката из Пхотосхопа док и даље радите са векторском графиком.

Панел за изглед је моћан и забаван - охрабрујем вас да га одмах испробате или погледате водич у наставку да бисте разумели како функционише:

Овладавање панелом за изглед од Адобе ТВ .

Да ли сте спремни да почнете да експериментишете са Иллустратором?

Креирање веб локација и корисничких интерфејса помоћу Пхотосхопа је сада постало норма и већина дизајнера је задовољна овим решењем. Савети за рад са Иллустратор-ом

Али само зато што је Пхотосхоп постао толико раширен не значи да Иллустратор нема шта да понуди — управо супротно. Уз алате као што су поравнање мреже пиксела, преламање текста и изглед објеката, то је јак случај.

У комбинацији са моћним алати за распоред и векторске графике, сечења и извоза слика, Иллустратор је дефинитивно очигледан избор за веб дизајнере који желе да брзо развију веб странице.