Eğer gerçekten zevk almıyorum Illustrator ile çalışmanın bir yönü varsa, hat sanatı, mobil veya web için svg görüntülere dönüştürmek. Dışa Aktar> Dışa Aktar menüsünü kullanarak ve vahşice açık olmak için Web için Kaydet - Ver> Web için Kaydet - özelliğini kullanmak tam olarak kolay olmadı.
Bir çizimin .svg biçimine dönüştürülmesi, bu iş akışında yeni insanlar için, bir dizi .svg biçimi olduğunu ve bunlardan yalnızca bir tanesinin doğru olduğunu söylemekten sakıncalı bir seçenekler dizisi sunan oldukça korkutucu bir iletişim kutusu açmıştır. biçim. Bu iş akışına alıştıktan sonra büyük bir anlaşma değildi, ama öğrenme eğrisi dikti.
Bu yeni İhracat Ekranları özelliğiyle - İhracat> Ekranlar için Dışa Aktar - ve Haziran 2016'da Illustrator CC 2015'e sunulan Asset Export paneliyle değişti. Bu “Nasıl Yapılır?” Bölümünde hem nasıl kullanılacağını göstereceğim. Özellikler. Başlayalım.
01/04
Adobe Illustrator CC 2015'te Ekranlar İçin İhracata Nasıl Erişilir
Illustrator 88'den bu yana bir Illustrator kullanıcısı oldum. Web ve mobil arayüzler ve projeler için Illustrator'ı ciddi bir tasarım aracı olarak görmeme konusundaki isteksizliğimi anlayabilirsiniz.
2008 CS4 sürümünde çalışma yüzeyleri sunulduğunda, bunun uygulamaya ilginç bir katkı olduğunu düşündüm. Illustrator'daki Web için artık kullanılmayan Web Tasarrufu özelliğini ilk gördüğümde, onu ilginç buldum ama Adobe Fireworks uygulamasında aynı özelliği, Illustrator'dan daha çok web grafikleriyle hizaladım.
Mobil cihazlara yönelik bir ilk yaklaşımın ortaya çıkması ve mobil projelere yönelik SVG görüntülerine olan bağımlılığın artmasıyla birlikte, Illustrator, SVG için “git” aracımdı ve UI Tasarım iş akışında önemli bir durak oldu.
Yine de, mobil cihazlar için varlık ihracı yapmam gerekirse, Sketch 3 ve Photoshop CC 2015 benim tercih ettiğim araçlar. Illustrator, Haziran 2016'da ekrana gerçekten elverişli Ekranlar Ekranı menüsü ile girdi.
Yukarıdaki örnekte, bir iPhone için ayrılmış iki ekranım var ve bunlar “Ev” ve “Yerler” adlı ayrı Çalışma Yüzeylerinde. Bunları çıkarmak için Dosya> Dışa Aktar> Ekranlar İçin Dışa Aktar'ı seçtim. Ekranlar için Dışa Aktar iletişim kutusu açılır.
02/04
Ekranlar İçin Ver iletişim kutusu nasıl kullanılır
İletişim kutusu görüntülendiğinde, seçilecek her çalışma yüzeyine tıklayın. Daha sonra bir onay işareti spor olacak. Ayrıca seçmek ve değiştirmek için çalışma yüzeyinin adını çift tıklatabilirsiniz. Çalışma yüzeylerinizin “Artboard 1” ve “Artboard 2” olarak adlandırılmasının, açık bir şekilde size hiçbir şey söylemediğini bilmek iyi bir şeydir.
Select alanında üç seçeneğiniz var:
- Tümü: Bu seçim, her çalışma yüzeyini belgede ayrı bir dosya olarak dışa aktarır.
- Aralık: Dışa aktarılacak bir dizi çalışma alanı girin. Bu, birkaç düzine çalışma yüzeyine sahip projeler için özellikle yararlıdır.
- Tam Belge: Bunu seçin ve tüm çalışma yüzeyleri tek bir belgede düzleştirilecektir.
Dışa Aktar alanı, çıktı için hedef klasörü seçmenizi sağlar. Varsayılan klasör Illustrator belgesinin geçerli konumu olacaktır.
Biçimler “büyünün gerçekleştiği yerdir. Üç simge olduğunu fark edeceksiniz - iOS. Android ve bir dişli. İlk ikisi kendinden açıklayıcıdır. Vites simgesi, liste içindeki her bir dosya formatının nasıl optimize edileceğini kontrol etmenizi sağlayan Format Ayarları'nı açar. Bu ayarlar “formata özel” dir ve değişikliklerinizi yaptıktan sonra Save Settings (Ayarları Kaydet) düğmesine tıklayın ve bu değişiklikler çıktılanacak formatlara uygulanacaktır.
IOS veya Android'i seçtiğinizde liste, söz konusu platformda bulunan tüm çözünürlükleri içerecek şekilde değişecektir. IOS listesi, Retina ekranı için ölçekleme faktörlerini gösterecek ve Android seçiminde, hemen hemen her Android cihazında bulunan, .75x ile 4x arasında değişen ölçekler bulunacak.
Kaldırmak istediğiniz bir format varsa, “x” yi tıklayın. Eklemek istediğiniz varsa + Ölçek Ekle düğmesini tıklayın.
Bittiğinde, Dışa Aktar Dışa Aktar düğmesini tıklayın ve işlem bittiğinde bir ilerleme çubuğu size gösterecektir.
03/04
Adobe Illustrator CC 2015'ten Ekranlar İçin Dışa Aktarma Dosyalarını Kullanma.
Ekranlar İçin İhracat sonuçlarına baktığınızda, Illustrator uygulamasının her bir ekranın düzleştirilmiş bir sürümünü çıkardığını keşfedeceksiniz. Yüzeyde, özellikle Illustrator uygulamasının tüm parçaları ve parçaları resim olarak dışa aktarmasını bekliyor olsaydınız bu durum biraz zayıf görünebilir.
Geri adım atıp bir anlığına düşünürseniz, aslında tam olarak ihtiyacınız olan şey budur; çünkü bu çıktıyı Adobe Experience Design , Principleformac, Atomic.io , UXPin veya başka bir prototipleme uygulaması gibi bir prototipleme uygulamasında kullanabilirsiniz.
Bu örnekte, basit bir tıklama oluşturmak için Adobe Deneyim Tasarımı'nı (XD) kullanıyorum. Sürecin ilk adımı, Illustrator Arayüzünün boyutlarıyla eşleşen iPhone 6 boyutunu seçmekti.
Arayüz açıldığında, Artboard aracını seçtim ve başka bir çalışma alanı eklemek için çalışma alanında bir kez tıklattım. Daha sonra onları “Ev” ve “Yerler” olarak adlandırdım, her çalışma yüzeyini seçtim ve png görüntüsünü Illustrator'dan çalışma yüzeyine aktardım.
Tıklama için "etkin noktaları" oluşturmak için ana ekrandaki Explore (Keşfet) düğmesinin üzerine bir dikdörtgen çizdim ve Properties panelindeki bu özelliklerin seçimini kaldırarak dolgu ve kenarlık değerlerini hiç yapmadım. Aynı şeyi Rehber sayfasındaki Geri düğmesiyle yaptım.
Etkileşimi eklemek için Prototip modunu seçtikten sonra “hotspot” üzerine tıklattım. Daha sonra tel olarak adlandırılan oku - Rehber sayfasına sürükledim ve Geçiş hedefini Yerler, Sola Hareket ettir, hareket hızı ve geçiş süresi .6 saniyeye ayarlıyorum.
Bu adımı Rehber sayfasındaki hotspot ile tekrarladım. Tek fark Geçiş, Sağa Doğru olarak ayarlanmıştı. Oynat düğmesini tıkladığımda prototipimi test ettim.
04/04
Adobe Illustrator CC 2015'te İhracat Varlığı Panelini Kullanma
Ekranlar İçin Kaydet menüsü ile birlikte Adobe, UI Tasarım iş akışında büyük bir acıyı ortadan kaldıran yeni bir panel - Asset Export - ekledi.
Acı noktası simgelerdi. Illustrator uygulaması harika bir vektör çizim uygulamasıdır, ancak çıktı almak için, 40 veya 50'si olan bir sayfada 10 simge olduğunu varsayalım, her biri bir SVG görüntüsü olarak kaydedilmelidir. Bu kaçınılmaz olarak SVG paneline yapılan art arda yapılan yolculuklar sayesinde her zamankinden daha fazla zaman gerektiriyordu. Bu acı noktası artık geçmişte kaldı.
Bu yeni panel Window> Asset Export'ta bulunabilir. Panel açıldığında, SVG'ye veya başka bir biçime dönüştürmek istediğiniz varlığı seçin ve panele sürükleyin. Fareyi serbest bıraktığınızda, varlığın bir küçük resmi panele eklenir. Varlığı adlandırın. Bitene kadar nesnelere paneli sürüklemeye devam edin.
Her bir öğeyi seçin Dışa aktarma ayarları alanında veya Shift tuşunu basılı tutarak her birini tıklayarak hepsini seçin. Biçimlendirmenizi seçin - bu örnekte SVG'yi seçtim ve Dışa Aktar düğmesini tıklattım. Seçilen öğeler, SVG dosyaları olarak Illustrator dosyasıyla aynı konuma gönderilir.
Bu sürecin daha da netleştiği yerde, Varlık İhracat panelini kullanmak zorunda değilsiniz. Panelin altındaki Ekranlar İçin Kaydet düğmesine tıklarsanız, iletişim kutusu açılır.
Tersine, Varlık Verme paneline erişmek için Ekranlar İçin Kaydet panelindeki Varlıklar sekmesini tıklayabilirsiniz. Örneğin, bir çalışma yüzeyinde özel bir simgeniz varsa, Ekranı Kaydet iletişim kutusunda Varlık Verme panelini açabilir ve bu öğeyi Varlık Verme paneline sürükleyebilirsiniz.