Illustrator'da bir web sitesi nasıl oluşturulur?

1. Adım

Aklınızda bulundurduğunuz içerik ve tasarıma bağlı olarak seçtiğiniz yükseklikten 960 piksel genişliğinde bir Illustrator belgesi oluşturun. Kaydırma çubuğu ve pencere sınırları dikkate alındığında, 960 piksel genişliğinde bir site, 1.024 pikselin en popüler monitör çözünürlüğü genişliğine uyar.

2. Adım

Henüz yapmadıysanız, web sitenizin görsel tasarımının elle çizilmiş bir taslağını oluşturun. Bu, Illustrator'da oluşturmak için yararlı bir referans verecektir.

3. adım

Ayrıntılı bir başlık için resim ve metin araçlarını kullanarak tasarımınızı oluşturun. Bir blogdaki mesajlar gibi bir metin eklerseniz, o alandaki alanı boş bırakın veya basit bir taslak için onu çevreleyen bir kenar oluşturun.

4. Adım

Tasarımın farklı bölümlerini sınırlandırmak için tasarımınıza kılavuzlar ekleyin. Bu çok önemlidir, çünkü bu kılavuzları web sitenizdeki elemanların kenarlarını tanımlayacak kesimler yapmak için kullanacaksınız. Kılavuzlar, nesneleri hassas bir şekilde hizalamanıza yardımcı olabilir. Dikey veya yatay cetveli tıklayın ve fareyi kılavuzun yerleştirilmesini istediğiniz yere sürükleyin.

Adım 5

Doğruluk ve doğruluk için kılavuzlarınızın yerini iki kez kontrol edin. Gerekirse, sitenizdeki bağlantılar olacak gezinme görüntüleri gibi her bir öğeyi ayırmak için bunları daha fazla sürükleyin.

1. Adım

Menüde "Nesne" yi seçip "Kes" ve "Kılavuzlardan yarat" ı seçin. Kılavuzları oluşturduğunuzda, karşılık gelen sayı ile her kesimdeki küçük siyah kutuları görürsünüz. Menüde "Dosya" yı ve ardından "Web ve cihazlar için kaydet" i seçin. Kesimi seçmek için aracı seçin, bu, ekranın sağ tarafındaki el simgesinin altındaki ikinci menü simgesidir. Tüm kesimleri seçin.

2. Adım

Ekranın sağ tarafında listelenen seçenekler arasından en iyileştirme ayarlarını seçin. Resimlerinizin JPEG, GIF veya PNG dosyaları olmasını isteyip istemediğinize bağlı olarak önceden ayarlanmış konfigürasyonları seçebilir veya özel bir profil oluşturabilirsiniz. Görüntülerin kalitesini de ayarlayabilirsiniz.

3. adım

"2-yukarı" ve "4-yukarı" sekmelerine tıklayarak farklı konfigürasyonları önizleyin. Her ön izlemenin alt köşesinde, dosyanın boyutu ve tarayıcının oluşturma süresi gibi optimizasyon bilgilerini göreceksiniz. "Kaydet" düğmesine tıklayın. Resimlerinizi ve kodunuzu kaydetmek ve "Nerede" tuşunu kullanarak o alana gitmek isteyip istemediğinize karar verin.

4. Adım

İşinizin formatını seçin. XXXX'i kontrol edip sadece görüntüleri eklemek istediğinizde, daha sonra bir kod ekleyecekseniz, "Yalnızca görüntüler" seçeneğini seçin. Yeni başlayan biriyseniz veya XXXX'in sizin için oluşturulmasını tercih ediyorsanız, "XXXX ve resimler" seçeneğini belirtin. Tablolar yerine Basamaklı Stil Sayfaları ile düzenlenecek öğelerin konumlandırılmasını tercih ederseniz, "Katmanlar" sekmesindeki "Varsayılan yapılandırma" ve "CSS katmanları olarak dışa aktar" ı seçin.

Adım 5

Çalışmanızı görmek için XXXX dosyasını bir tarayıcının içinden açın. Dosyaları bir web tasarım programıyla düzenleyin.