Illustrator менен иштөө боюнча кеңештер. Фотошопту жактырган веб-дизайнерлер үчүн

Illustrator менен иштөө боюнча кеңештер. Мына жинди идея - Illustrator программасында кийинки веб-долбооруңузду иштеп чыгуу. Эгер сиз негизги веб-дизайнер болсоңуз, бул сунушка жакшы жооп бербей калышыңыз мүмкүн. Иллюстратор Photoshop жасай ала турган нерселердин баарын жасай албайт, туурабы?

Албетте, андай эмес.

да Photoshop де-факто куралы болуп калды веб-дизайн, Illustrator сиздин муктаждыктарыңызды канааттандырууга жөндөмдүү эмес. Анын жайгашуу куралдарынын аркасында ал көбүнчө веб-дизайн үчүн жакшыраак жана ылайыктуу программа болуп саналат.

Көпчүлүк веб-дизайн адистери Иллюстратордун айланасында тентип, далил издеп көргүсү келбегендиктен, мен Illustratorдо веб-дизайн менен эксперимент жүргүзүү үчүн сиз билишиңиз керек болгон интернетке тиешелүү функциялардын тизмесин түздүм.

Булардын бир нечесин байкап көрүңүз, мен сизге Illustratorду веб-дизайн иш процессиңизде стандарттуу курал катары колдоно баштайсыз деп кепилдик берем.

1. Биринчиден, бардык бирдиктерди Пикселге коюңуз. Illustrator менен иштөө боюнча кеңештер

Демейки боюнча, Illustrator метриканы колдонот объект жана чекит өлчөмдөрү үчүн бирдиктер текст үчүн. Бул көпчүлүк дизайн кырдаалдар үчүн сонун орнотуулар, бирок веб дизайн сиз бардык жерде пикселдерди көргүңүз келет. Андыктан, башка нерсенин үстүндө иштей баштоодон мурун, агрегаттарыңыз туура орнотулганын текшериңиз.

Бирдиктерди пикселге коюу үчүн:

1. Түзөтүү менюсунда ачуу
2. Орнотуулар субменюсунан өлчөө бирдиктерин тандаңыз.
3. Бардык параметрлерди "пикселдерге" коюу

2. Веб документ профилин колдонуу менен документтерди түзүңүз.

 

Жаңы дизайндын үстүндө иштей баштагыңыз келгенде, Жаңы Документ терезеси аркылуу оңой жылдырып, айрым маанилүү деталдарды өткөрүп жибериңиз, мисалы, CMYK түстөрүн колдонбоо үчүн Illustrator менен веб-дизайн менен иштөөнү пландаштырып жатканыңызды айтыңыз. жана объекттин бүдөмүк четтери. Болгону Жаңы Документ терезесинде Интернет профилинин жөндөөсүн тандоону унутпаңыз, ошондо сиз жакшы болосуз.

3. Объекттер үчүн пикселдик тордун тегиздөөсүн иштетүү. Illustrator менен иштөө боюнча кеңештер

Бул өзгөчөлүк, эгерде сиз качандыр бир кезде Photoshop программасында бүдөмүк форманын четтери менен кыйынчылыктарга туш болгон болсоңуз, өмүрдү сактап калат.

Pixel Grid Alignment объекттин түз горизонталдык жана вертикалдык сегменттерин пикселдик торго эң сонун туура келтирүү үчүн тууралап, ийри жана жантайган сегменттерди жылмакай кармап турат. Натыйжада, так, пикселдик идеалдуу формалар - сиз веб-дизайнда сөзсүз каалаган нерсе.

Үстүнкү баскычта пикселдик торду тегиздөө иштетилген, бул ар дайым кырлары тактайт.

Объект деңгээлиндеги пикселдик торду тегиздөө үчүн:

1. Объектти тандоо
2. Трансформация панелин ачыңыз (Терезе > Трансформация).
3. Панелдин ылдый жагындагы "Пиксел торуна тегиздөө" кутучасын белгилеңиз (эгерде сиз аны көрбөй жатсаңыз, параметрлерди көрсөтүү үчүн панелди эки жолу чыкылдатыңыз)

Эскертүү. Пикселдик торду тегиздөө демейки боюнча веб документ профили аркылуу түзүлгөн бардык жаңы объекттер үчүн иштетилген. Бирок, башка Illustrator файлдарынан объекттерди чаптап жатсаңыз, алар үчүн пикселдик тегиздөөнү кол менен тууралашыңыз керек болот. Illustrator менен иштөө боюнча кеңештер

4. Пикселди алдын ала көрүүнү күйгүзүңүз.

Pixel-Preview функциясы сүрөтүңүздү 100%дан жогору масштабдаганда Иллюстратордун өзүн Photoshop сыяктуу алып жүрүүгө мажбурлайт — ар бир жолу идеалдуу векторлорду алуунун ордуна, чындыгында растр сүрөтү менен иштеп жаткандай пикселдерди көрөсүз.

Пикселди алдын ала көрүүнү күйгүзсөңүз, сиз өзүңүздү Photoshopто жүргөндөй сезесиз.

Бул канчалык сонун экенин ойлонуп көрүңүз - сизде вектордук графиканын бардык күчү бар, жана сиз пиксел деңгээлинде натыйжа кандай болорун көрө аласыз.

Тыкан, туурабы?

Пикселди алдын ала көрүүнү иштетүү же өчүрүү

1. Көрүү менюсун ачыңыз
2. Пиксел көрүнүшүн тандаңыз.

5. Artwork терезелерин колдонуңуз. Illustrator менен иштөө боюнча кеңештер

Долбооруңузга эки видеокамера бурулуп турганын элестетиңиз.

Бир камера ишиңиздин 100%ын көрсөткөн кадимки масштабдуу деңгээлге ээ. Башка камера 400% масштабдуу деңгээлге ээ жана сиз иштеп жаткан белгилүү бир белгиге багытталган.

Хирург сыяктуу, сиз чоңойтуу камерасын колдонуп, сүрөтчөгө кичинекей пиксел деңгээлинде өзгөртүүлөрдү киргизесиз, анда-санда 100% масштабдуу камерага көз чаптырып, анын чыныгы өлчөмү боюнча кандай экенин көрөсүз.

Капкак терезелери иконалар сыяктуу кичинекей элементтер менен иштөө керек болгондо сонун болот — баары кандай экенин текшерүү үчүн дайыма чоңойтуп-кичирейтүүнүн кереги жок.

Булар Artwork терезелери — алар сиздин дизайныңызды бир эле учурда ар кандай масштабдуу деңгээлдер, түс орнотуулары жана башка вариациялар менен көрүүгө мүмкүндүк берет. Бул веб-дизайн үчүн абдан пайдалуу, айрыкча пиксел деңгээлиндеги деталдар менен иштеп жатканыңызда.

Artwork терезелерин колдонуу үчүн:

1. Терезе менюсун ачып, андан кийин Жаңы терезе тандаңыз. Illustrator ошол эле документ менен жаңы өтмөктү түзөт.
2. Терезе менюсуна кайра барып, Орнатуу > Баарын терезеге жылдыруу тандаңыз. Бул өзгөртүүгө мүмкүндүк берет терезелердин өлчөмү жана жайгаштыруу өзүңүз каалагандай жаныңызда.
3. Терезелерде ар кандай масштабдуу деңгээлдер менен эксперимент жасап, анын кантип иштээрин көрүү үчүн бир аз өзгөртүүлөрдү киргизип баштаңыз. Illustrator менен иштөө боюнча кеңештер

6. Тез баскычтарды, иконаларды жана башкаларды түзүү үчүн символдорду колдонуңуз.

Фотошопто бир эле (же дээрлик бирдей) баскычты, иконканы же виджетти канча жолу түздүңүз? Эгер сиз веб-дизайн менен алектенсеңиз, аны күн сайын жасайсыз.

Illustrator сизге убакытты үнөмдөөгө жана символдор менен кайталануучу иштен качууга жардам берет.

Түпкүлүгүндө, символдор даяр болгон чексиз жыйындысы дизайн элементтери, аны жөн гана сүйрөп жана таштоо аркылуу ишке кошуп, андан кийин зарылчылыкка жараша өзгөртүүгө болот. Бул нөлдөн баштап түзүүнү талап кылбаган баскычтар, иконалар жана башка стандарттуу объекттер үчүн идеалдуу.

Бирок символдордун күчтүү болушунун дагы бир себеби бар жана ал инстанция деп аталат.

Символдор ыңгайлуу гана эмес, ошондой эле кайталануучу дизайн элементтерин жаңыртууну жеңилдетет.

 

Негизи, сиз баштапкы символго өзгөртүү киргизген сайын, ал өзгөртүүлөр сиздин чыгармаңызда табылган символдун бардык учурларында дароо чагылдырылат. Вебсайтыңызга чоңураак баскычтар керекпи? Жөн гана символду өзгөртүңүз. Форма талааларыңыз ар бир баракта башкача көрүнүшүн каалайсызбы? Жөн гана символду өзгөртүңүз. Сиз идеяны түшүнөсүз.

Ишара: Эгер сиз бул белгинин белгилүү бир мисалы менен болушун каалабасаңыз, иллюстрацияңыздагы объектти оң баскыч менен чыкылдатып, Символ шилтемесин үзүүнү тандаңыз. Бул аны автоматтык жаңыртуулардан чыгарат.

Бул жерде символдорду кантип колдонууну жана манипуляциялоону түшүндүргөн жакшы видео:

Adobe Illustrator программасында символдорду колдонуу чейин Adobe TV .

Учурдагы символду колдонуу үчүн:

1. Терезе менюсунан Символдор панелин ачыңыз.
2. Тандалган символду жумушуңузга сүйрөңүз

Жаңы символ түзүү:

1. Символдун сүрөтүн түзүү
2. Терезе менюсунан Символдор панелин ачыңыз.
3. Иллюстрацияны панелге сүйрөңүз
4. Ырастоо үчүн диалог терезесинде OK баскычын басыңыз.

Символду түзөтүү үчүн:

1. Терезе менюсунан Символдор панелин ачыңыз.
2. Түзөтүү режимине өтүү үчүн символду эки жолу басыңыз.
3. Бүткөндөн кийин, түзөтүү режиминен чыгуу үчүн символдун сүрөтүнүн сыртындагы каалаган жерди эки жолу чыкылдатыңыз.

7. 9 сегменттүү масштабдоо менен объекттерди оңой кеңейтиңиз. Illustrator менен иштөө боюнча кеңештер

Бул масштабдоо учурунда объекттин кайсы бөлүктөрү чоюлуп, кайсынысы өзгөрүүсүз калганын аныктоого мүмкүндүк берген өркүндөтүлгөн символогиянын өзгөчөлүгү.

Солдо: 9-сегменттүү чоңойтуу жөндөөлөрү бар жана жок сунулган баскычтын мисалы. Оңдо: 9-сегменттүү масштабдоо жөндөөсү Illustrator'га объекттин кайсы бөлүктөрү корголгондугун жана кайсы бөлүктөрүн масштабдаса болорун айтып турган 4 жол көрсөткүчтү жылдырууну камтыйт.

 

Практикалык мисал - бурчтары тегеректелген баскыч - эгер сиз аны узунураак кылгыңыз келсе, аны жөн эле туурасынан суна албайсыз, анткени бул бүт объектти бурмалайт. Анын ордуна форма чекиттерин кол менен жылдырууга туура келет. 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 эффекттеринин көбүн кайра жарата аласыз.

Сырткы көрүнүш панели күчтүү жана кызыктуу – мен аны дароо сынап көрүүгө же анын кантип иштээрин түшүнүү үчүн төмөндөгү окуу куралына көңүл бурууну сунуштайм:

Сырткы көрүнүш панелин өздөштүрүү чейин Adobe TV .

Illustrator менен эксперимент баштоого даярсызбы?

Photoshop аркылуу веб-сайттарды жана колдонуучу интерфейстерин түзүү азыр нормага айланды жана көпчүлүк дизайнерлер бул чечимге ыраазы. Illustrator менен иштөө боюнча кеңештер

Бирок Photoshop ушунчалык кеңири таралгандыктан, бул Illustrator сунуш кыла турган эч нерсеси жок дегенди билдирбейт — тескерисинче. Пикселдик торду тегиздөө, текстти таңуу жана объекттин көрүнүшү сыяктуу куралдардын жардамы менен ал күчтүү ишти түзөт.

Күчтүү менен айкалышкан жайгаштыруу куралдары жана вектордук графика, сүрөттөрдү кесүү жана экспорттоо, Illustrator, албетте, веб-сайттарды тез өнүктүрүүнү каалаган веб-дизайнерлер үчүн ачык тандоо.