Illustrator'la çalışmaya yönelik ipuçları. İşte çılgın bir fikir; bir sonraki web projenizi Illustrator'da tasarlayın. Birincil bir web tasarımcısıysanız, büyük olasılıkla bu öneriye pek iyi yanıt vermeyeceksiniz. Illustrator, Photoshop'un yapabildiği her şeyi yapamaz, değil mi?
Tam olarak değil.
Rağmen Photoshop fiili bir araç haline geldi web tasarımı, Illustrator ihtiyaçlarınızı fazlasıyla karşılayabilecek kapasitededir. Düzen araçları sayesinde genellikle web tasarımı için daha iyi ve daha uygun bir programdır.
Web tasarımı profesyonellerinin çoğu Illustrator'da kanıt arayarak dolaşmak istemediğinden, Illustrator'da web tasarımı denemelerine başlamak için bilmeniz gereken web ile ilgili özelliklerin bir listesini derledim.
Bunlardan birkaçını denediğinizde Illustrator'ı web tasarım iş akışınızda standart bir araç olarak kullanmaya başlayacağınızı garanti ederim.
1. İlk önce yapılacaklar: tüm birimleri Piksel olarak ayarlayın. Illustrator'la çalışmaya yönelik ipuçları
Illustrator varsayılan olarak metrik kullanır nesne ve nokta boyutları için birimler metin için. Bunlar çoğu tasarım durumu için mükemmel ayarlardır, ancak web tasarımı muhtemelen her yerde piksel görmek isteyeceksiniz. Bu nedenle başka bir şey üzerinde çalışmaya başlamadan önce ünitelerinizin doğru şekilde kurulduğundan emin olun.
Birimleri piksellere ayarlamak için:
- Düzenle menüsünde aç
- Ayarlar alt menüsünden ölçü birimlerini seçin.
- Tüm seçenekleri "piksel" olarak ayarlayın
2. Web belgesi profilini kullanarak belgeler oluşturun.
Yeni bir tasarım üzerinde çalışmaya başlamak istediğinizde, Yeni Belge penceresinde kolayca ilerleyin ve bazı önemli ayrıntıları atlayın; örneğin Illustrator'a, CMYK renklerini kullanmamak için bir web tasarımı üzerinde çalışmayı planladığınızı söylemek gibi. ve nesnenin kenarları bulanık. Yeni Belge penceresinde İnternet profili ayarını seçmeyi unutmayın; sorun olmayacak.
3. Nesneler için piksel ızgarası hizalamasını etkinleştirin. Illustrator'la çalışmaya yönelik ipuçları
Photoshop'ta bulanık şekil kenarlarıyla ilgili sorun yaşadıysanız bu özellik hayat kurtarıcıdır.
Piksel Izgara Hizalaması, bir nesnenin düz yatay ve dikey bölümlerini piksel ızgarasına mükemmel şekilde uyacak şekilde ayarlarken, kavisli ve eğimli bölümleri pürüzsüz tutar. Sonuç, net, piksel açısından mükemmel şekillerdir; web tasarımında kesinlikle isteyeceğiniz bir şeydir.
Üst düğmede piksel ızgara hizalaması etkindir, bu da her zaman net kenarlar sağlar.
Nesne düzeyinde piksel ızgara hizalamasını etkinleştirmek için:
- Nesne seç
- Dönüştür panelini açın (Pencere > Dönüştür).
- Panelin altındaki "Piksel Izgarasına Hizala" onay kutusunu işaretleyin (görmüyorsanız seçenekleri göstermek için paneli çift tıklayın)
Not. Web belgesi profili kullanılarak oluşturulan tüm yeni nesneler için piksel ızgarası hizalaması varsayılan olarak etkindir. Ancak diğer Illustrator dosyalarından nesneler yapıştırıyorsanız bunların piksel hizalamasını manuel olarak ayarlamanız gerekecektir. Illustrator'la çalışmaya yönelik ipuçları
4. Piksel önizlemesini açın.
Piksel Önizleme özelliği, görüntünüzü %100'ün üzerine ölçeklendirirken Illustrator uygulamasının tıpkı Photoshop gibi davranmasını sağlar; her seferinde mükemmel vektörler elde etmek yerine pikselleri aslında bir raster görüntüyle çalışıyormuş gibi görürsünüz.
Piksel önizlemeyi açmak kendinizi Photoshop'taymış gibi hissetmenizi sağlayacaktır.
Bunun ne kadar harika olduğunu düşünün; vektör grafiklerinin tüm gücü parmaklarınızın ucunda ve sonucun piksel düzeyinde nasıl göründüğünü görebilirsiniz.
Güzel, değil mi?
Piksel önizlemesini etkinleştirme veya devre dışı bırakma
- Görünüm menüsünü aç
- Piksel Görünümü'nü seçin.
5. Resim pencerelerini kullanın. Illustrator'la çalışmaya yönelik ipuçları
Projenize iki video kameranın yönlendirildiğini hayal edin.
Bir kameranın çalışmanızın %100'ünü gösteren normal yakınlaştırma düzeyi vardır. Diğer kamera %400 yakınlaştırma seviyesine sahiptir ve üzerinde çalıştığınız belirli bir simgeye yöneliktir.
Bir cerrah gibi, simgede piksel düzeyinde küçük değişiklikler yapmak için yakınlaştırma kamerasını kullanırsınız ve ara sıra gerçek boyutunda gerçekte nasıl göründüğünü görmek için %100 yakınlaştırma kamerasına bakarsınız.
Simgeler gibi küçük öğelerle çalışmanız gerektiğinde kapak pencereleri harikadır; her şeyin nasıl göründüğünü kontrol etmek için sürekli yakınlaştırıp uzaklaştırmanıza gerek yoktur.
Bunlar Sanat Çalışması pencereleridir; tasarımınızı farklı yakınlaştırma düzeyleri, renk ayarları ve diğer varyasyonlarla aynı anda görüntülemenize olanak tanır. Bu, özellikle piksel düzeyindeki ayrıntılarla çalışırken web tasarımı için çok kullanışlıdır.
Resim pencerelerini kullanmak için:
- Pencere menüsünü açın ve ardından Yeni Pencere'yi seçin. Illustrator, aynı belgenin görüntülendiği yeni bir sekme oluşturacaktır.
- Tekrar Pencere menüsüne gidin, Düzenle > Tümünü Pencereye Taşı'yı seçin. Bu, değiştirmenize izin verecektir pencerelerin boyutu ve yerleşimi uygun gördüğünüz şekilde yan yana.
- Pencerelerde farklı yakınlaştırma düzeylerini deneyin ve nasıl çalıştığını görmek için bazı değişiklikler yapmaya başlayın. Illustrator'la çalışmaya yönelik ipuçları
6. Hızlı bir şekilde düğmeler, simgeler ve daha fazlasını oluşturmak için sembolleri kullanın.
Photoshop'ta aynı (veya hemen hemen aynı) düğmeyi, simgeyi veya widget'ı kaç kez oluşturdunuz? Web tasarımıyla ilgileniyorsanız, muhtemelen bunu her gün yapıyorsunuzdur.
Illustrator, zamandan tasarruf etmenize ve sembollerle yapılan bu tekrarlı çalışmalardan kaçınmanıza yardımcı olabilir.
Özünde semboller sonsuz bir hazır semboller dizisidir. tasarım ögeleri, basitçe sürükleyip bırakarak işe eklenebilir ve ardından gerektiği gibi değiştirilebilir. Bu, sıfırdan oluşturulması gerekmeyen düğmeler, simgeler ve diğer standart nesneler için idealdir.
Ancak sembollerin güçlü olmasının başka bir nedeni daha var ve buna örnekleme deniyor.
Semboller yalnızca kullanışlı olmakla kalmıyor, aynı zamanda yinelenen tasarım öğelerinin güncellenmesini de kolaylaştırıyor.
Temel olarak, orijinal sembolde değişiklik yaptığınızda, bu değişiklikler resminizde bulunan sembolün tüm örneklerine anında yansıtılır. Web sitenizde daha büyük düğmelere mi ihtiyacınız var? Sadece sembolü değiştirin. Form alanlarınızın her sayfada farklı görünmesini mi istiyorsunuz? Sadece sembolü değiştirin. Kaptın bu işi.
İpucu: Bunun as sembolünün belirli bir örneğinin başına gelmesini istemiyorsanız çiziminizdeki nesneye sağ tıklayın ve Sembol Referansını Kopar'ı seçin. Bu, onu otomatik güncellemelerin dışında bırakacaktır.
Sembollerin nasıl kullanılacağını ve değiştirileceğini açıklayan iyi bir video:
Adobe Illustrator'da Sembolleri Kullanma arasında AdobeTV .
Mevcut bir sembolü kullanmak için:
- Pencere menüsünden Semboller panelini açın.
- Seçilen sembolü çalışmanıza sürükleyin
Yeni bir sembol oluşturun:
- Bir sembol görüntüsü oluşturun
- Pencere menüsünden Semboller panelini açın.
- Bir illüstrasyonu panele sürükleyin
- Onaylamak için iletişim kutusunda Tamam'ı tıklayın.
Bir sembolü düzenlemek için:
- Pencere menüsünden Semboller panelini açın.
- Düzenleme moduna girmek için bir sembole çift tıklayın.
- Bitirdiğinizde düzenleme modundan çıkmak için sembol görüntüsünün dışında herhangi bir yere çift tıklayın.
7. 9 bölümlü ölçeklendirmeyle nesneleri kolayca genişletin. Illustrator'la çalışmaya yönelik ipuçları
Bu, ölçekleme sırasında bir nesnenin hangi bölümlerinin uzatılacağını ve hangilerinin değişmeden kalacağını tanımlamanıza olanak tanıyan gelişmiş bir semboloji özelliğidir.
Sol: 9 bölümlü yakınlaştırma ayarı olan ve olmayan uzatılmış bir düğme örneği. Sağ: 9 bölümlü ölçekleme ayarı, Illustrator uygulamasına nesnenin hangi bölümlerinin korunduğunu ve hangi bölümlerinin ölçeklenebileceğini söyleyen 4 kılavuzun hareket ettirilmesini içerir.
Pratik bir örnek, köşeleri yuvarlatılmış bir düğmedir; eğer onu daha uzun yapmak istiyorsanız, onu yatay olarak uzatamazsınız çünkü bu, tüm nesneyi bozacaktır. Bunun yerine şekil noktalarını manuel olarak taşımanız gerekecektir. 9 segmentli ölçeklendirmeyle esneme istediğiniz gibi çalışır. Illustrator'la çalışmaya yönelik ipuçları
Nasıl çalıştığını gerçekten anlamak için Adobe TV'deki bu harika eğitim videosunu dinleyin ve hızla yeni bilgilere ulaşın:
Sembollerle 9 bölümlü ölçeklendirmeyi kullanma arasında AdobeTV .
8. Her yerde yuvarlatılmış köşeler!
Photoshop'ta yuvarlatılmış bir dikdörtgen oluşturabilirsiniz, ancak Illustrator hemen hemen her nesneye zarar vermeyen yuvarlak köşe efekti uygulamanıza olanak tanır. Tahribatsız etki nedir? Bu, temeldeki orijinal nesneyi etkilemeden onu açabileceğiniz, kapatabileceğiniz veya ayarlarını değiştirebileceğiniz anlamına gelir.
Yuvarlatılmış köşeler efektini hemen hemen her tür nesneye uygulayabilir ve gerektiği gibi ayarlayabilirsiniz. Illustrator'la çalışmaya yönelik ipuçları
Yuvarlatılmış köşe efektini uygulamak için:
- Keskin köşeleri olan bir dikdörtgen veya başka bir nesne oluşturun
- Efektler menüsünden Stilize Et > Yuvarlak Köşeler'i seçin.
- Bir köşe yarıçapı girin ve neye benzediğini görmek için Önizleme'yi tıklayın.
- Efekti uygulamak için Tamam'ı tıklayın.
Yuvarlatılmış köşe efektini değiştirmek için:
- Köşeleri yuvarlatılmış bir nesne seçin
- Görünüm panelini Pencere menüsünden açın.
- Yuvarlatılmış Köşeler efektini bulun ve ayarlarını değiştirmek için çift tıklayın veya açmak veya kapatmak için göz simgesini tıklayın.
9. Raster deseniyle hızlı bir dolgu oluşturma. Illustrator'la çalışmaya yönelik ipuçları
İnce arka plan desenleri web tasarımında büyük bir başarıdır, ancak birçok tasarımcı bunların Illustrator'da uygulanmasının kolay olmadığını düşünmektedir.
İtiraf etmeliyim ki sezgisel değil ama çözümü basit.
Bir bitmap deseni oluşturmak için:
- Desenin resmini parçanıza yerleştirin
- Üst şeritteki "Ekle"ye tıklayın (önemli - onsuz çalışmaz!)
- Bir deseni Renk Örnekleri paletine sürükleyin
- Bir desenle doldurmak için herhangi bir nesneye renk örneği uygulayın
10. Metnin görüntülerin ve nesnelerin etrafına otomatik olarak yerleştirilmesi.
Photoshop, çok temel metin düzenleme yetenekleriyle bilinir. Metni bir görüntünün etrafına sarmak istiyorsanız iki veya üç farklı metin çerçevesi oluşturmanız ve efekti simüle etmeniz gerekir. Illustrator'la çalışmaya yönelik ipuçları
Neyse ki Illustrator'da ihtiyacınız var.
Metni bir görüntünün çevresine sarmak için:
- Metni sarmak istediğiniz görüntüyü veya nesneyi seçin
- Nesne menüsünü açın, Metni Sar > Yeni'yi seçin.
- Sarma mesafesini ayarlamak için Metin Sarma menüsünü tekrar açın ve Metin Sarma Seçenekleri'ni seçin.
- Sarma efektini görmek için resmi metnin üzerine taşıyın
11. Nesne görünüm ayarlarıyla zengin görsel efektler oluşturun. Illustrator'la çalışmaya yönelik ipuçları
Illustrator'da bir nesnenin Görünüm paneli, Photoshop'taki katman efektlerine çok benzer şekilde çalışır; bir nesneye birden fazla dolgu ve kontur ekleyebilir, ardından ilginç sonuçlar elde etmek için bunların aktarım modları, opaklığı ve efektleriyle oynayabilirsiniz.
Bu metin, Görünüm ve Efektler paneli kullanılarak stillendirilen tek bir vektör nesnesidir.
Oyun alanı oldukça geniştir; alt gölgeler, bulanıklık ve parlaklıktan dokulandırma, bozulma ve 3D'ye kadar. Bu şekilde, vektör grafiklerle çalışırken Photoshop'taki efektlerin çoğunu yeniden oluşturabilirsiniz.
Görünüm paneli güçlü ve eğlencelidir; nasıl çalıştığını anlamak için hemen denemenizi veya aşağıdaki eğitimi izlemenizi öneririm:
Görünüm Panelinde Uzmanlaşma arasında AdobeTV .
Illustrator'da denemeler yapmaya hazır mısınız?
Photoshop kullanarak web siteleri ve kullanıcı arayüzleri oluşturmak artık norm haline geldi ve çoğu tasarımcı bu çözümden memnun. Illustrator'la çalışmaya yönelik ipuçları
Ancak Photoshop'un bu kadar yaygınlaşması Illustrator'ın sunabileceği hiçbir şey olmadığı anlamına gelmiyor; tam tersi. Piksel ızgarası hizalaması, metin sarma ve nesne görünümü gibi araçlarla güçlü bir örnek oluşturur.
Güçlü ile birleştirildi düzen araçları ve vektör grafikleri, görüntü dilimleme ve dışa aktarma, Illustrator kesinlikle hızlı bir şekilde web siteleri geliştirmek isteyen web tasarımcıları için bariz bir seçimdir.
Leave a comment