İçerik
Adobe yazılımıyla her şeyi söyleyen, her şeyi anlatan bir web sitesi oluşturmak için Muse, Dreamweaver veya Edge Reflow'a ihtiyacınız olduğunu hepimiz biliyoruz. Ancak hızlı ve kirli bir web sitesi söz konusu olduğunda, InDesign ne olacak? Her şeyden öte, InDesign birkaç yıldır HTML dışa aktarma yeteneklerine sahip, değil mi?
En baştan, böyle bir iş akışı için güzel bir dizi uygun proje düşünebilirim. Senin de yapabileceğinden hiç şüphem yok. Öncelikle, herhangi bir mock-up ve sunum çalışması, bunu ana günlük uygulaması olarak kullanan bir tasarımcı tarafından ID'de daha kolay üretilebilir.
Artı, karmaşıklık tüm dikkatleri üzerine çekerken, gerçek şu ki, web'de basit, bazı başlıklar ve sanat ve gövde metni içeren pek çok site var - bunlar başka bir iyi eşleşme olacaktır. Ve kim sizden içeriklerin hem basılı hem de web için belirlenmiş olduğu pazarlama materyali oluşturmanızı istemedi?
Ve eğer dikkat ediyorsanız, Adobe son birkaç yıldır ID'ye giderek daha fazla multimedya ve etkileşim yeteneği eklemektedir. Kabul edilirse, bu eklemeler açıkça diğer dışa aktarma seçeneklerine (EPUB, Flash, SWF) hedeflenmiştir, ancak bu, InDesign'ın HTML çıktısında muhtemelen daha yetenekli hale geldiğini düşünmesine neden olur, değil mi?
Belki değil. Bir denedim ve işte olanlar ...
Kurulum
Bu hafta bir sabah yüzümde kocaman bir gülümseme ve yanımda sıcak bir fincan kahve ile kimliğimi başlattım. Daha önce gördüğüm bu HTML dışa aktarma araçlarıyla oynamaya hazırdım, ancak oynamaya hiç zamanım olmadı. Evet heyecanlandım. Artı, safça varsaydım, bu çok çabuk olacaktı çünkü bu seçenekler o kadar uzun süredir mevcuttu ki, şimdiye kadar güzelce cilalanmış olmalılar, değil mi? Evet, pekala ... belki de değil.
InDesign CC'yi açtım ve Dosya> Yeni ...> Belge (Ctrl/Cmd+N) ve tam orada, "Web" kullanımı için "Amaç" açılır menüsünün altında bir seçenek göreceksiniz.
Bunu seçin ve bize bizim için doldurulmuş bazı temel web sayfası kriterleri ve diğer standart web sayfası boyutları için bir seçenek sunar. 800x600 varsayılanı 2007 civarında hissettirse de, bu test için çoklu format sürümleri oluşturma yükünü bir şekilde hafifleteceğini umuyorum. Hayat bir uzlaşmadır, değil mi?
Daha sonra, bana hiçbir zaman tasarım ödülü kazandırmayacak bir test sayfası hazırlamaya başladım, ancak sadece bir sayfaya bazı temel sayfa öğeleri atıp ne alacağımı görmek için dışa aktarmak istedim.
Resimde görebileceğiniz gibi, sistem dışı bir metin satırına, biri resimli, diğeri düz dolgu rengine sahip iki kutu ve bir kalem-araç şekli çizdim. Ayrıca işe yarayıp yaramayacaklarını görmek için birkaç gezinme kontrol düğmesi de ekledim.
İlk kez şanssız
Elimde olan şey karmakarışıktı (ve şu anda tasarımdan bahsetmiyorum). İlk web sayfası örnek resminde, dolu kutunun ve kalem aracı öğesinin görünmediğini bile görebilirsiniz. Ama beni caydırmak için bundan daha fazlası gerekiyor. Tekrar denedim Hmmm ... ve tekrar.
JPEG resminin olduğu kutu görünüyorsa, kalem aracı öğesine bir tane koymanın aynı şeyi yapabileceğini düşündüm, bu yüzden Photoshop'ta 1 piksellik kare bir JPEG oluşturdum ve sürükleyip bıraktım. Başarılı! Bu işe yaradı ve oluşturulan web sitesinin bir sonraki görüntüsünde bunu görebilirsiniz.
Ne yazık ki, artık öğelerin nasıl doğru konumda olmadığını da görebilirsiniz. Elimden geldiğince denedim, önemli bir gelişme olduğunu düşünebildiğimi belirterek.
Daha sonra yeni çıkan InDesign CC 2014'te denedim.
Bu görüntüde, bu sürümdeki dışa aktarma seçeneğinde bazı iyileştirmeler olduğunu görebilirsiniz. Katı dolgu kutusunu ve diğer kalem aracı öğesinde degrade dolguyu oluşturdu. Ancak düzen hala çok yanlıştı.
Yanlış yön
Bunu doğru yapmadığımı fark ettim ve kesinlikle ilk sandığım kadar kolay ve acısız olmayacaktı. Bu yüzden bu dar alanda bazı uzman tavsiyeleri aradım. Yine şaşırtıcı bir şekilde, Michael Murphy adında ciddi teknik parçalara sahip çok yetenekli bir tasarımcı ile karşılaşıncaya kadar web'de konu hakkında yetersiz bilgi vardı.
Murphy, hakkında herkesten daha çok şey bildiği bu konu hakkında benimle konuşmak için zaman ayıracak kadar nazikti. Aslında bunu diğer görsel kreasyonlarında olduğu gibi yüksek bir sanata getirdiğini söylemek muhtemelen güvenlidir. Bu konuya çok fazla ışık tutmayı başardı ve lynda.com tarafından yayınlanan konuyla ilgili iki dersten oluşan bir dizide hepsini en ince ayrıntısına kadar paylaştı.
Kurslar InDesign CS6'dan HTML'ye ve InDesign for Web Design'dır.
Nasıl doğru yapılır
Murphy şu açıklamayı yaptı: "InDesign içeriğini HTML olarak yeniden tasarlarken, iki yerleşik dışa aktarma yolu vardır: EPUB (Sabit Düzen veya CC 2014'te Yeniden Akıtılabilir) veya HTML. Her iki hedef de stillerin (Karakter, Paragraf ve Nesne) tutarlı kullanımını gerektirir. projeniz ve tüm stillerin bir HTML eşdeğerine bağlanması (ör. paragraflar için p etiketi, h1, h2, h3 vb. başlıklar için ve sırasıyla em veya italik veya kalın için güçlü). Bunlar, içeriğinizin yapısı ve organizasyonu, ancak görünümü değil.
"Görünüm için InDesign hem EPUB hem de HTML için CSS oluşturabilir. Bununla birlikte, CSS InDesign, bir baskı mizanpajına (örneğin, bir kitap veya bir dergi makalesi) uyguladığınız ayarları korumak için çaba gösterir ve aralarında çok fazla fark vardır. En iyi sonuçları elde etmek için baskı ve ekran tabanlı okuma deneyimleri.
"Bu nedenle, baştan sona altını karıştırmadan ve HTML işaretlemesinin kendisi olmasa bile en azından CSS'ye girmeden baştan sona ulaşmanız pek olası değil."
Tipik olarak InDesign'dan alacağınız HTML'nin, hedeflediğiniz mevcut bir CSS'ye (ör. EPUB projeleri için kullandığınız bir şablon CSS veya siteniz tarafından kullanılan bir CSS'ye sahipseniz) çok faydalı olacağını açıklamaya devam etti. veya içerik yönetim sistemi).
Bu durumda, InDesign stilleriniz ve ilgili HTML etiketleri ve CSS sınıfları arasında gerekli bağlantıları kolayca kurabilirsiniz. Bu seçenekler, Paragraf, Karakter ve Nesne Stili Seçenekleri iletişim kutularındaki Dışa Aktarma Etiketleme alanlarında bulunur. Nesne Stilleri söz konusu olduğunda, stilin uygulandığı her nesneyi HTML'nizde bir DIV olarak düşünün ve buna göre etiketleyin.
Soğuk, zor gerçekler
EPUB dışa aktarma daha tahmin edilebilir olsa da, web dışa aktarma her zaman hareketli bir hedefi tutturmaya çalışır. Bu nedenle, InDesign’ın HTML dışa aktarımı, baskı mizanpajınızın web'e hazır çıktısını size kolay bir şekilde vermez. Yalnızca içeriğinizi - metin ve resimleri istediğiniz sırada - web üzerinde yeniden kullanım için uygun HTML biçimlendirmesiyle verecektir. Ancak bu sınırlamayla bile, manuel olarak yapmaktan daha hızlı bir yoldur ve çok daha az tekrar eder, özellikle de InDesign'da biçimlendirme ve hiyerarşiyi zaten oluşturduğunuzda.
"Örneğin," Michael açıklıyor "her ay derginin web sitesinde yayınlamak için InDesign mizanpajlarından tam bir aylık dergi makalelerini HTML'ye aktarıyorum. Şablonlarımdaki stillere yerleştirilen dışa aktarma etiketlemesi sayesinde süreç hızlı, nispeten temizler ve denklemden tekrarlayan işleri ve olası insan hatasını ortadan kaldırır. Bu nedenle, özellikten tam olarak yararlanmak, sonuçta gerçekçi beklentilere ve belgelerinizde, şablonlarınızda ve stillerinizde gerekli ön hazırlığı yapma isteğine bağlıdır. "
Yani evet yapılabilir ve iyi yapılabilir. Sadece birinin ona sistematik bir şekilde yaklaşması ve iyi bir iş akışı oluşturması gerekiyor. Tüm bunlar, tek seferlik basit bir projeden bahsetmediğimiz anlamına gelir. Bu, web'e getirilmesi gereken makul miktarda tekrar eden içeriğe ve onu destekleyecek bir içerik yönetim sistemine veya iş akışına sahip olanlar için en uygun olanıdır.
Bir eklenti kullanmak
Peki ya bir eklenti? Sorduğuna sevindim! Yukarıdaki tüm bilgiler başınızı biraz döndürüyorsa, yalnız değilsiniz. Teknik olmayanlar için, Ajar Productions tarafından yapılan In5 adlı bir eklenti kullanma alternatifi var. In5, yerel olarak ID'de olan dışa aktarmanın hemen altına "HTML'yi In5 ile Dışa Aktar ..." adlı ek bir dışa aktarma seçeneği ekler.
In5’in iletişim kutusundaki seçenekler yerel sürümün seçeneklerinin yanı sıra SEO gibi ek bölümlere sahiptir. Her şey yolunda gittiğinde sonuçlar çok kullanışlı web sayfaları ve sitelerdir. Bu, özellikle az seçeneği olan bir niş alanda sahip olmak için harika bir seçenektir.
Sonuç olarak: InDesign, umduğum yayıncı İsviçre Çakısı olsaydı iyi olurdu. Adobe’nin itibarına, bize bu araçları sunmak için çok çalışıyorlar. Ancak Michael Murphy'nin bana işaret ettiği gibi, iki format, baskı ve web arasındaki farklar o kadar büyük ki, uçurumu kapatmak zordur.
Kelimeler: Lance Evans
Lance Evans, Graphlink Media'nın yaratıcı direktörüdür. 3D üzerine kitaplar yazdı ve Apple ve Alias için 3DNY Seminerlerini üretti..
