Совети за работа со Illustrator. За веб-дизајнерите кои претпочитаат Photoshop

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

Не секако на тој начин.

Иако Фотошоп стана де факто алатка веб дизајн, Illustrator е повеќе од способен да ги задоволи вашите потреби. Благодарение на неговите алатки за распоред, често е подобра и посоодветна програма за веб дизајн.

Бидејќи повеќето професионалци за веб дизајн не сакаат да талкаат низ Illustrator барајќи докази, составив листа на функции поврзани со веб што треба да ги знаете за да започнете да експериментирате со веб дизајн во Illustrator.

Пробајте неколку од нив и гарантирам дека ќе започнете да го користите Illustrator како стандардна алатка во вашиот работен тек на веб дизајн.

1. Првото нешто: поставете ги сите единици на Pixels. Совети за работа со Illustrator

Стандардно, Illustrator користи метрика единици за големини на објекти и точки за текст. Ова се одлични поставки за повеќето дизајнерски ситуации, но за Веб дизајн веројатно ќе сакате да видите пиксели насекаде. Затоа, пред да започнете да работите на било што друго, проверете дали вашите единици се правилно поставени.

За да ги поставите единиците на пиксели:

1. Отворете во менито Уреди
2. Изберете мерни единици од подменито за поставки.
3. Поставете ги сите опции на „пиксели“

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

 

Кога сакате да започнете да работите на нов дизајн, лесно скролувајте низ прозорецот Нов документ и прескокнете некои важни детали - како на пример да му кажете на Illustrator дека планирате да работите на веб дизајн за да не користите CMYK бои. и заматени рабови на објектот. Само не заборавајте да ја изберете поставката за Интернет профил во прозорецот Нов документ и ќе бидете во ред.

3. Овозможете порамнување на решетката на пиксели за објекти. Совети за работа со Illustrator

Оваа функција ви го спасува животот ако некогаш сте имале проблеми со заматените рабови на формата во Photoshop.

Порамнувањето на мрежата на пиксели ќе ги приспособи правите хоризонтални и вертикални сегменти на објектот за совршено да одговараат на решетката на пиксели, додека ги одржува заоблените и закосените сегменти мазни. Резултатот се јасни, совршени форми за пиксели - нешто што дефинитивно го сакате во веб дизајнот.

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

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

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

Забелешка. Порамнувањето на мрежата на пиксели е стандардно овозможено за сите нови објекти создадени со помош на профилот на веб-документот. Меѓутоа, ако ставате објекти од други датотеки на Illustrator, ќе треба рачно да го прилагодите порамнувањето на пикселите за нив. Совети за работа со Illustrator

4. Вклучете преглед на пиксели.

Функцијата Pixel-Preview ќе го натера Illustrator да се однесува исто како Photoshop кога ја скалира вашата слика над 100% - наместо секој пат да добивате совршени вектори, всушност ќе ги гледате пикселите како да работите со растерска слика.

Вклучувањето на преглед на пиксели ќе направи да се чувствувате како да сте во Photoshop.

Размислете колку е кул - ја имате целата моќ на векторската графика на вашите прсти и можете да видите како изгледа резултатот на ниво на пиксели.

Уредно, нели?

Овозможете или оневозможете преглед на пиксели

1. Отворете го менито за преглед
2. Изберете Pixel View.

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

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

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

Како хирург, ја користите камерата за зумирање за да направите мали промени на ниво на пиксели на иконата, повремено фрлајќи поглед на камерата со 100% зум за да видите како всушност изгледа во нејзината вистинска големина.

Покривните прозорци се одлични кога треба да работите со мали елементи како икони - не мора постојано да зумирате и одзумирате за да проверувате како изгледа сè.

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

За да користите прозорци со уметнички дела:

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

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

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

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

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

Но, има уште една причина зошто симболите се моќни, а тоа се нарекува инстанција.

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

 

Во суштина, секогаш кога правите промени на оригиналниот симбол, тие промени веднаш се рефлектираат во сите случаи на симболот што се наоѓа во вашето уметничко дело. Дали ви требаат поголеми копчиња на вашата веб-страница? Само сменете го симболот. Дали сакате вашите полиња за форма да изгледаат различно на секоја страница? Само сменете го симболот. Ја сфаќаш идејата.

Совет: Ако не сакате ова да се случи со одреден пример на симболот како, кликнете со десното копче на објектот во вашата илустрација и изберете Break Symbol Reference. Ова ќе го исклучи од автоматско ажурирање.

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

Користење на симболи во Adobe Illustrator на Adobe TV .

За да користите постоечки симбол:

1. Отворете го панелот Симболи од менито Прозорец.
2. Повлечете го избраниот симбол на вашата работа

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

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

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

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

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

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

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

 

Практичен пример е копче со заоблени агли - ако сакате да го направите подолго, не можете само да го истегнете хоризонтално бидејќи тоа ќе го искриви целиот објект. Наместо тоа, ќе мора рачно да ги преместувате точките на обликот. Со скалирање од 9 сегменти, истегнувањето функционира како што сте замислиле. Совети за работа со Illustrator

За навистина да разберете како функционира, слушнете го овој одличен видео туторијал од Adobe TV за брзо да се забрзате:

Користење на скалирање од 9 сегменти со симболи на Adobe TV .

8. Заоблени агли насекаде!

Можете да креирате заоблен правоаголник во Photoshop, но Illustrator ви овозможува да примените недеструктивен ефект на заоблен агол на речиси секој објект. Што е недеструктивен ефект? Ова значи дека можете да го вклучите, исклучите или да ги промените неговите поставки без да влијаете на основниот оригинален објект.

Можете да го примените ефектот на заоблени агли на речиси секој тип на објект и да го прилагодите по потреба. Совети за работа со Illustrator

За да го примените ефектот на заоблен агол:

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

За да го промените ефектот на заоблен агол:

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

9. Создавање брзо полнење со растерска шема. Совети за работа со Illustrator

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

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

За да креирате битмапа шема:

1. Ставете слика од моделот на вашето парче
2. Кликнете на „Вметни“ на горната лента (важно - нема да работи без неа!)
3. Повлечете шема во палетата Swatches
4. Нанесете примерок на кој било предмет за да го наполните со шема

10. Автоматско поставување на текст околу слики и предмети.

Photoshop е познат по своите многу основни способности за уредување текст. Ако сакате да завиткате текст околу слика, треба да креирате две или три различни текстуални рамки и да го симулирате ефектот. Совети за работа со Illustrator

За среќа, Illustrator ве опфати.

За да завиткате текст околу слика:

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

11. Создадете богати визуелни ефекти со поставките за изгледот на објектот. Совети за работа со Illustrator

Во Illustrator, панелот за изглед на објектот работи слично како ефектите на слоеви во Photoshop - можете да додадете повеќе пополнувања и потези на објектот, а потоа да играте со нивните режими на пренос, непроѕирност и ефекти за да добиете интересни резултати.

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

Игралиштето е доста големо - од паѓачки сенки, заматување и сјај до текстурирање, изобличување и 3D. На овој начин можете да ги рекреирате повеќето ефекти од Photoshop додека сеуште работите со векторска графика.

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

Совладување на панелот за изглед на Adobe TV .

Дали сте подготвени да започнете да експериментирате со Illustrator?

Креирањето веб-страници и кориснички интерфејси со помош на Photoshop сега стана норма и повеќето дизајнери се задоволни со ова решение. Совети за работа со Illustrator

Но, само затоа што Photoshop стана толку широко распространет не значи дека Illustrator нема што да понуди - токму спротивното. Со алатки како што се порамнување на мрежата на пиксели, обвивка на текст и изглед на објектот, тој прави силен случај.

Во комбинација со моќни алатки за распоред и векторска графика, сечење слики и извоз, Illustrator е дефинитивно очигледен избор за веб-дизајнерите кои сакаат брзо да развиваат веб-страници.