İçerik
- 01. Temel grafiği bir modele çevirin
- 02. Deseni çalışma yüzeyine alın
- 03. Çoğaltma tekrarı için yeni bir çalışma yüzeyi oluşturun
- 04. Deseni web kullanımı için kaydedin
- 05. Modeli sitenize entegre edin
- Bunu beğendin mi? Bunları oku!
- Bilgi gerekli: Temel HTML, Temel CSS, temel vektör tasarım deneyimi
- Gerektirir: Illustrator CS6 veya Illustrator CC
- Proje Zamanı: 15-20 dakika
- Destek dosyası
Daha yüksek ekran çözünürlüklerini destekleyen artan sayıda akıllı telefon ve tablet ile tasarımcılar, vektör tabanlı desenler lehine bitmap dokularından gittikçe daha fazla uzaklaşmaya başlıyor. Bu, geliştiricilerin sitelerinde sürekli olarak güncellemeye gerek kalmadan en yüksek kaliteli grafikleri korumalarına olanak tanır.
Bu 15 dakikalık eğitimde, Adobe Illustrator'da bir vektör grafiğini tekrar eden bir desene nasıl dönüştüreceğinizi, web için nasıl dışa aktaracağınızı ve sitelerinizde nasıl kullanacağınızı göstereceğim.
- Tüm Illustrator yayınlarımızı buradan okuyun
01. Temel grafiği bir modele çevirin
Açık Pattern.ai (bu eğitici için destekleyici dosyalarda sağlanmıştır) Illustrator'da. Bu, öğretici için başlangıç grafiğidir, ancak kendi tasarımınız varsa, bunu tekrar eden bir modele dönüştürmek için aynı işlemi kullanabilirsiniz.
"Pattern.ai" yi açtıktan sonra, şunu seçin: Nesne> Desen> Oluştur.
Bu açacak Desen Seçenekleri iletişim. Beğendiğiniz bir desen elde edene kadar özelleştirin. Bitirdiğinizde, Bitti Çalışma yüzeyinin üstündeki düğmesine basın.
02. Deseni çalışma yüzeyine alın
Artık desen Renk Örnekleri panelinde olduğuna göre (Renk Örnekleri paneliniz açık değilse, Pencere> Renk Örnekleri), renk örneğini tıklayıp çalışma yüzeyine sürükleyin.
03. Çoğaltma tekrarı için yeni bir çalışma yüzeyi oluşturun
Desenin içinde dikdörtgen bir kutu görene kadar yakınlaştırın. (Endişelenmeyin: bu bir hata değildir - sadece tekrarın nerede başladığını gösterir.)
Dikdörtgen kutuyu bulduğunuzda, Araçlar paneline gidin ve Çalışma Yüzeyi Aracı'nı seçin. [Shift] tuşunu basılı tutarak aşağıda gösterildiği gibi başka bir çalışma yüzeyi çizin. İşiniz bittiğinde [Shift] tuşunu bırakın.
04. Deseni web kullanımı için kaydedin
Yeni çalışma yüzeyini seçin. Pencere> Çalışma Yüzeyleri Çalışma Yüzeyleri paletini getirmek için. Palette iki çalışma yüzeyiniz olmalıdır: ikinciyi seçin.
Şimdi gidin Dosya> Web İçin Kaydet.
Başka bir iletişim kutusu görünecektir. En iyi kalite için Ön Ayar açılır menüsüne gidin ve PNG-24. Emin olmak Şeffaflık desenin arkasında özel bir renge sahip olabilmeniz için işaretlenmiştir.
Tıklayın Kayıt etmek. Bir konum sorulduğunda, imgs proje klasörünüzdeki dizin.
05. Modeli sitenize entegre edin
Artık desen gitmeye hazır olduğuna göre, index.html ve Primary.css (içinde css Klasör). Sitenin geri kalanını doğrudan kalıbın üzerine inşa etmek istemiyorsanız, index.html dosyasında herhangi bir değişiklik yapmanız gerekmez. İçinde Primary.css dosya, aşağıdaki kodu ekleyin:
vücut {
background-image: url (’../ imgs / pattern.png’);
arka plan tekrarı: tekrarla;
}
(Eklemek istiyorsunuz arkaplan tekrar satır çünkü bazen tarayıcılar kalıpları yüklemekte sorun yaşar, bu nedenle bu tüm temelleri kapsar.)
Her iki dosyayı da kaydettikten sonra, kalıbın doğru çalıştığından emin olmak için sonucu seçtiğiniz tarayıcıda önizleyin. İşte bu kadar: Sitenizde yinelenen bir tasarım var. Artık bu tekniği kendi kalıplarınızla deneyebilirsiniz.
Bunu beğendin mi? Bunları oku!
- Illustrator eğitimleri: bugün denemek için harika fikirler!
- En iyi logoları tasarlamak için nihai rehber
- Tasarımcılar için en iyi ücretsiz web yazı tipleri
