Illustrator bilan ishlash bo'yicha maslahatlar. Photoshop-ni afzal ko'rgan veb-dizaynerlar uchun

Illustrator bilan ishlash bo'yicha maslahatlar. Mana aqldan ozgan g'oya - Illustrator-da keyingi veb-loyihangizni loyihalash. Agar siz asosiy veb-dizayner bo'lsangiz, ehtimol siz bu taklifga unchalik yaxshi javob bermaysiz. Illustrator Photoshop qila oladigan hamma narsani qila olmaydi, to'g'rimi?

Albatta, bunday emas.

Garchi Photoshop de-fakto vositaga aylandi veb-dizayn, Illustrator sizning ehtiyojlaringizni qondirishga qodir. Tartibga solish vositalari tufayli u ko'pincha veb-dizayn uchun yaxshiroq va mosroq dastur hisoblanadi.

Aksariyat veb-dizayn mutaxassislari dalil izlab Illustrator atrofida aylanib yurishni istamagani uchun men Illustrator-da veb-dizayn bilan tajriba qilishni boshlash uchun bilishingiz kerak bo'lgan veb bilan bog'liq xususiyatlar ro'yxatini tuzdim.

Ulardan bir nechtasini sinab ko'ring va men sizga Illustrator-dan veb-dizayn ish jarayonida standart vosita sifatida foydalanishni boshlashingizga kafolat beraman.

1. Birinchi navbatda: barcha birliklarni Pikselga o'rnating. Illustrator bilan ishlash bo'yicha maslahatlar

Odatiy bo'lib, Illustrator metrikani ishlatadi ob'ekt va nuqta o'lchamlari uchun birliklar matn uchun. Bu ko'pgina dizayn holatlari uchun ajoyib sozlamalar, ammo ular uchun veb-dizayn Ehtimol, siz hamma joyda piksellarni ko'rishni xohlaysiz. Shunday qilib, boshqa biror narsa ustida ishlashni boshlashdan oldin, birliklaringiz to'g'ri sozlanganligiga ishonch hosil qiling.

Birliklarni pikselga o'rnatish uchun:

1. Tahrirlash menyusida oching
2. Sozlamalar pastki menyusidan o'lchov birliklarini tanlang.
3. Barcha parametrlarni "piksel" ga o'rnating

2. Veb-hujjat profilidan foydalanib hujjatlar yaratish.

 

Yangi dizayn ustida ishlashni boshlamoqchi boʻlsangiz, “Yangi hujjat” oynasini osongina aylantiring va baʼzi muhim tafsilotlarni oʻtkazib yuboring, masalan, Illustrator-ga CMYK ranglarini ishlatmaslik uchun veb-dizayn ustida ishlashni rejalashtirayotganingizni ayting. va ob'ektning loyqa qirralari. Yangi hujjat oynasida Internet profili sozlamalarini tanlashni unutmang va siz yaxshi bo'lasiz.

3. Ob'ektlar uchun piksellar panjarasini tekislashni yoqing. Illustrator bilan ishlash bo'yicha maslahatlar

Agar siz Photoshop-da noaniq shakl qirralari bilan bog'liq muammolarga duch kelgan bo'lsangiz, bu xususiyat hayotni saqlab qoladi.

Pixel Grid Alignment ob'ektning to'g'ri gorizontal va vertikal segmentlarini piksellar tarmog'iga to'liq moslash uchun moslashtiradi, shu bilan birga egri va qiya segmentlarni silliq saqlaydi. Natijada aniq, pikselli mukammal shakllar - veb-dizaynda siz albatta xohlagan narsadir.

Yuqori tugmada piksellar to'plamini tekislash yoqilgan, bu har doim aniq qirralarga olib keladi.

Ob'ekt darajasidagi piksellar panjarasini tekislashni yoqish uchun:

1. Ob'ektni tanlang
2. Transform panelini oching (Oyna > Transform).
3. Panelning pastki qismidagi "Pixel Gridga tekislang" katagiga belgi qo'ying (agar uni ko'rmasangiz, variantlarni ko'rsatish uchun panelni ikki marta bosing)

Eslatma. Veb-hujjat profili yordamida yaratilgan barcha yangi ob'ektlar uchun piksellar tarmog'ini tekislash sukut bo'yicha yoqilgan. Biroq, agar siz boshqa Illustrator fayllaridan ob'ektlarni joylashtirayotgan bo'lsangiz, ular uchun piksellar hizalanishini qo'lda sozlashingiz kerak bo'ladi. Illustrator bilan ishlash bo'yicha maslahatlar

4. Pikselni oldindan ko'rishni yoqing.

Pixel-Preview xususiyati Illustrator-ni rasmingizni 100% dan kattaroq hajmda o'tkazishda xuddi Photoshop-ga o'xshatib qo'yadi - har safar mukammal vektorlarni olish o'rniga, siz piksellarni xuddi rastr tasvir bilan ishlayotgandek ko'rasiz.

Pikselni oldindan koʻrish funksiyasini yoqsangiz, oʻzingizni Photoshop dasturida boʻlgandek his qilasiz.

Bu qanchalik ajoyib ekanligini o'ylab ko'ring - vektor grafikasining barcha kuchi sizning qo'lingizda va natijaning piksel darajasida qanday ko'rinishini ko'rishingiz mumkin.

Toza, shunday emasmi?

Pikselni oldindan ko'rishni yoqish yoki o'chirish

1. Ko'rish menyusini oching
2. Pixel View-ni tanlang.

5. Artwork oynalaridan foydalaning. Illustrator bilan ishlash bo'yicha maslahatlar

Tasavvur qiling-a, ikkita videokamera sizning loyihangizga qaratilgan.

Bitta kamera oddiy masshtab darajasiga ega bo‘lib, ishingizni 100% ko‘rsatadi. Boshqa kamera 400% masshtablash darajasiga ega va siz ishlayotgan aniq belgiga qaratilgan.

Jarroh kabi siz kattalashtirish kamerasidan piktogrammadagi kichik o'zgarishlarni amalga oshirish uchun foydalanasiz, vaqti-vaqti bilan 100% masshtablash kamerasiga qarab, uning haqiqiy o'lchamida qanday ko'rinishini ko'rasiz.

Qopqoq oynalar piktogramma kabi kichik elementlar bilan ishlash kerak bo'lganda juda yaxshi - hamma narsa qanday ko'rinishini tekshirish uchun doimiy ravishda kattalashtirish va kichraytirish shart emas.

Bular Artwork oynalari — ular turli masshtab darajalari, rang sozlamalari va boshqa oʻzgarishlar bilan bir vaqtda dizayningizni koʻrish imkonini beradi. Bu veb-dizayn uchun juda foydali, ayniqsa siz piksel darajasidagi tafsilotlar bilan ishlayotganingizda.

Artwork oynalaridan foydalanish uchun:

1. Oyna menyusini oching, so'ng "Yangi oyna" ni tanlang. Illustrator xuddi shu hujjat ko'rinishida yangi yorliq yaratadi.
2. Yana Oyna menyusiga o'ting, Tartibga solish > Hammasini oynaga ko'chirish-ni tanlang. Bu sizga o'zgartirish imkonini beradi derazalarning o'lchamlari va joylashishi o'zingizga mos keladigan tarzda bir-birining yonida.
3. Windowsda turli masshtab darajalari bilan tajriba o'tkazing va uning qanday ishlashini ko'rish uchun ba'zi o'zgarishlarni boshlang. Illustrator bilan ishlash bo'yicha maslahatlar

6. Tezda tugmalar, piktogrammalar va boshqalarni yaratish uchun belgilardan foydalaning.

Photoshop-da bir xil (yoki deyarli bir xil) tugma, belgi yoki vidjetni necha marta yaratgansiz? Agar siz veb-dizayn bilan shug'ullansangiz, ehtimol buni har kuni qilasiz.

Illustrator sizga vaqtni tejashga va belgilar bilan takrorlanadigan ishdan qochishga yordam beradi.

Aslini olganda, ramzlar tayyorlarning cheksiz to'plamidir dizayn elementlari, bu shunchaki sudrab olib tashlash orqali ishga qo'shilishi va keyin kerak bo'lganda o'zgartirilishi mumkin. Bu noldan yaratilishi shart bo'lmagan tugmalar, piktogrammalar va boshqa standart ob'ektlar uchun juda mos keladi.

Ammo ramzlar kuchli bo‘lishining yana bir sababi bor va u instantsiya deb ataladi.

Belgilar nafaqat qulay, balki ular takrorlanuvchi dizayn elementlarini yangilashni ham osonlashtiradi.

 

Aslini olganda, har safar asl belgiga o'zgartirish kiritganingizda, bu o'zgarishlar darhol san'at asaringizda topilgan belgining barcha nusxalarida aks etadi. Veb-saytingizda kattaroq tugmalar kerakmi? Faqat belgini o'zgartiring. Shakl maydonlaringiz har bir sahifada boshqacha ko'rinishini xohlaysizmi? Faqat belgini o'zgartiring. Siz fikrni tushunasiz.

Maslahat: Agar bu as belgisining ma'lum bir misolida sodir bo'lishini xohlamasangiz, rasmingizdagi ob'ektni sichqonchaning o'ng tugmasi bilan bosing va Belgini buzish ni tanlang. Bu uni avtomatik yangilanishlardan istisno qiladi.

Belgilardan qanday foydalanish va ularni boshqarishni tushuntiruvchi yaxshi video:

Adobe Illustrator dasturida ramzlardan foydalanish dan Adobe TV .

Mavjud belgidan foydalanish uchun:

1. Oyna menyusidan Belgilar panelini oching.
2. Tanlangan belgini ishingizga torting

Yangi belgi yarating:

1. Belgilar tasvirini yarating
2. Oyna menyusidan Belgilar panelini oching.
3. Rasmni panelga torting
4. Tasdiqlash uchun dialog oynasida OK tugmasini bosing.

Belgini tahrirlash uchun:

1. Oyna menyusidan Belgilar panelini oching.
2. Tahrirlash rejimiga kirish uchun belgini ikki marta bosing.
3. Tugatgandan so'ng, tahrirlash rejimidan chiqish uchun belgi tasviridan tashqaridagi istalgan joyni ikki marta bosing.

7. Ob'ektlarni 9 segmentli masshtablash bilan osongina kengaytiring. Illustrator bilan ishlash bo'yicha maslahatlar

Bu kengaytirilgan ramziy xususiyat bo'lib, masshtablash jarayonida ob'ektning qaysi qismlari cho'zilganligini va qaysi biri o'zgarmasligini aniqlash imkonini beradi.

Chapda: 9-segmentli masshtab sozlamalari bo'lgan va bo'lmagan cho'zilgan tugma misoli. O'ngda: 9-segmentli masshtab sozlamalari Illustrator-ga ob'ektning qaysi qismlari himoyalanganligi va qaysi qismlarini masshtablash mumkinligini bildiruvchi 4 ta qo'llanmani harakatlantirishni o'z ichiga oladi.

 

Amaliy misol - yumaloq burchakli tugma - agar siz uni uzunroq qilishni istasangiz, uni gorizontal ravishda cho'zishingiz mumkin emas, chunki bu butun ob'ektni buzadi. Buning o'rniga, siz shakl nuqtalarini qo'lda siljitishingiz kerak bo'ladi. 9-segmentli masshtablash bilan cho'zish siz xohlagandek ishlaydi. Illustrator bilan ishlash bo'yicha maslahatlar

Bu qanday ishlashini chindan ham tushunish uchun Adobe TV-dan ushbu ajoyib video darslikni tinglang va tezlikni oshiring:

Belgilar bilan 9 segmentli masshtablashdan foydalanish dan Adobe TV .

8. Hamma joyda yumaloq burchaklar!

Siz Photoshop-da yumaloq to'rtburchaklar yaratishingiz mumkin, ammo Illustrator deyarli har qanday ob'ektga buzilmaydigan yumaloq burchak effektini qo'llash imkonini beradi. Buzilmaydigan ta'sir nima? Bu shuni anglatadiki, siz asosiy asl ob'ektga ta'sir qilmasdan uni yoqishingiz, o'chirishingiz yoki sozlamalarini o'zgartirishingiz mumkin.

Yumaloq burchaklar effektini deyarli har qanday turdagi ob'ektga qo'llashingiz va kerak bo'lganda uni sozlashingiz mumkin. Illustrator bilan ishlash bo'yicha maslahatlar

Dumaloq burchak effektini qo'llash uchun:

1. To'rtburchak yoki o'tkir burchakli boshqa ob'ektni yarating
2. Effektlar menyusidan Stilizatsiya > Dumaloq burchaklar-ni tanlang.
3. Burchak radiusini kiriting va uning qanday ko'rinishini ko'rish uchun Ko'rib chiqish tugmasini bosing.
4. Effektni qo'llash uchun OK tugmasini bosing.

Dumaloq burchak effektini o'zgartirish uchun:

1. Burchaklari yumaloq bo'lgan ob'ektni tanlang
2. Oyna menyusidan Tashqi ko'rinish panelini oching.
3. Dumaloq burchaklar effektini toping va uning sozlamalarini o'zgartirish uchun ikki marta bosing yoki uni yoqish yoki o'chirish uchun ko'z belgisini bosing.

9. Rastr naqsh bilan tez to'ldirishni yaratish. Illustrator bilan ishlash bo'yicha maslahatlar

Nozik fon naqshlari veb-dizaynda katta hit, lekin ko'plab dizaynerlar ularni Illustrator-da qo'llash oson emas deb o'ylashadi.

Tan olishim kerak, bu intuitiv emas, lekin yechim oddiy.

Bitmap naqshini yaratish uchun:

1. Buyumingizga naqshning rasmini joylashtiring
2. Yuqori lentadagi "Qo'shish" tugmasini bosing (muhim - usiz ishlamaydi!)
3. Shaklni Swatches palitrasiga torting
4. Naqsh bilan to'ldirish uchun har qanday ob'ektga namuna qo'llang

10. Rasmlar va ob'ektlar atrofida matnni avtomatik joylashtirish.

Photoshop o'zining oddiy matn tahrirlash imkoniyatlari bilan mashhur. Agar siz rasm atrofida matnni o'rashni istasangiz, ikki yoki uch xil matn ramkalarini yaratishingiz va effektni simulyatsiya qilishingiz kerak. Illustrator bilan ishlash bo'yicha maslahatlar

Yaxshiyamki, Illustrator sizni qamrab oldi.

Tasvir atrofida matnni o'rash uchun:

1. Matnni o'rab olmoqchi bo'lgan rasm yoki ob'ektni tanlang
2. Ob'ekt menyusini oching, Matnni o'rash > Yangi-ni tanlang.
3. Oʻrash masofasini oʻrnatish uchun “Matnni oʻrash” menyusini yana oching va “Matnni oʻrash parametrlari”ni tanlang.
4. Oʻrash effektini koʻrish uchun tasvirni matn ustiga suring

11. Ob'ekt ko'rinishi sozlamalari bilan boy vizual effektlarni yarating. Illustrator bilan ishlash bo'yicha maslahatlar

Illustrator-da ob'ektning tashqi ko'rinishi paneli Photoshop-dagi qatlam effektlari kabi ishlaydi - siz ob'ektga bir nechta plomba va chiziqlar qo'shishingiz, so'ngra qiziqarli natijalarga erishish uchun ularning uzatish rejimlari, shaffofligi va effektlari bilan o'ynashingiz mumkin.

Ushbu matn tashqi ko'rinish va effektlar paneli yordamida uslublangan yagona vektor ob'ektidir.

O'yin maydonchasi juda katta - soyalar, loyqalik va porlashdan tortib tekstura, buzilish va 3Dgacha. Shu tarzda siz vektor grafikasi bilan ishlaganda Photoshop-dan ko'pgina effektlarni qayta yaratishingiz mumkin.

Tashqi ko'rinish paneli kuchli va qiziqarli - uni darhol sinab ko'rishingizni yoki uning qanday ishlashini tushunish uchun quyidagi qo'llanmani tomosha qilishingizni tavsiya qilaman:

Tashqi ko'rinish panelini o'zlashtirish dan Adobe TV .

Illustrator bilan tajriba boshlashga tayyormisiz?

Photoshop yordamida veb-saytlar va foydalanuvchi interfeyslarini yaratish endi odatiy holga aylandi va ko'pchilik dizaynerlar ushbu yechimdan mamnun. Illustrator bilan ishlash bo'yicha maslahatlar

Ammo Photoshop juda keng tarqalgani, bu Illustrator taklif qiladigan hech narsa yo'q degani emas - aksincha. Piksel panjarasini tekislash, matnni o'rash va ob'ekt ko'rinishi kabi vositalar yordamida u kuchli holatni yaratadi.

Kuchli bilan birlashtirilgan joylashtirish vositalari va vektorli grafikalar, tasvirlarni kesish va eksport qilish, Illustrator, albatta, veb-saytlarni tezda ishlab chiqmoqchi bo'lgan veb-dizaynerlar uchun aniq tanlovdir.