Dilimleme daha az emmek nasıl: PSD dilimleme için ipuçları ve püf noktaları
Kirli küçük bir sırrım var, Photoshop dosyalarını dilimlemekten nefret ediyorum. Bununla, PSD kompozisyonlarını web sitelerine dönüştürmekten nefret ettiğimi kastetmiyorum, yani Photoshop'un dilimleme araçlarından nefret ediyorum. Tüm süreç, PSD'imin meşgul, karmaşık ve aşırı karmaşık görünmesini sağlar, bu yüzden genellikle tamamen atlarım ve bunun yerine görüntüleri gerektiği gibi manuel olarak kırpmayı ve kaydetmeyi tercih ederim.
Bu eğilim ile mücadele etmek ve Photoshop'un dilimleme araçlarının gerçek kullanışlılığını görmek için, dilimlemenin nasıl çalıştığının tüm inceliklerini öğrenmek için bir göreve başladım. Aşağıda bu yolculuktan kaynaklanan ipuçları ve püf noktaları bulunmaktadır. Umarım hiç bilmediğiniz bir iki şey öğreneceksiniz!
Photoshop'ta Üç Tür Dilimi vardır
Üç çeşit dilim !? Bu öğrendiğim en ilginç ve şaşırtıcı şeylerden biriydi. Dilimleme özelliklerini gerçekten denemedikten sonra, bunun için tek bir yol olduğunu düşündüm. Ben hatalıydım.
Üç farklı dilim türü Kullanıcı Dilimleri, Otomatik Dilimler ve Katman Tabanlı Dilimlerdir. Başlamak için, muhtemelen aşina olduğunuz ikisi hakkında konuşalım: Kullanıcı Dilimleri ve Otomatik Dilimler. Bunlar çok yakından ilişkilidir, aslında biri diğerini yaratır.
Bildiğiniz gibi, bir PSD'yi dilimlemek için Dilim Aracı'nı (C) alıp bağımsız bir görüntü olarak dışa aktarmak istediğiniz alanın çevresine bir kutu çizerek başlayabilirsiniz. Comp'inizin bunu yapmak istediğiniz tüm alanlarına dilim ekleyerek, aynı anda birden fazla görüntüyü hızlı ve kolay bir şekilde optimize edebilir ve dışa aktarabilirsiniz.
Bir dilim yaptığınızda, aşağıda görülen sonuç gibi bir şey almalısınız.
Burada yaptığım, sayfanın üst kısmındaki logonun etrafına bir kutu çizmek. Bu eylem, hem Kullanıcı Dilimini hem de birkaç Otomatik Dilimi oluşturdu. Bir dilim oluşturduğunuzda Photoshop, nihai hedefinizin tüm PSD'yi bir dizi dilime dönüştürmek olduğunu varsayar. Şahsen bu varsayımın oldukça can sıkıcı olduğunu düşünüyorum ve daha sonra nasıl çözüleceğini tartışacağız. Şimdilik, bu varsayım nedeniyle Photoshop'un dilinizin kenarlarını PSD'ye kadar uzattığını ve böylece otomatik olarak başka bölümler oluşturduğunu bilin. Bu, yukarıdaki resimde gösterilmiştir.
Kullanıcı ve Otomatik Dilimlerle Çalışma İpuçları
Kullanıcı ve Otomatik Dilimler konusuna girerken, emrinizde hangi araç ve seçeneklere sahip olduğunuzu gerçekten anlayabilmeniz için bariz ve çok belirgin olmayan özelliklerin bazılarını gözden geçirelim.
Dilimleri Taşıma ve Düzenleme
Bir dilim yaptıktan sonra, taşımanıza ve düzenlemenize izin verecek bir Serbest Dönüşüm için benzer kontroller görmelisiniz. Ayrıca, yalnızca geçerli dilimleri düzenlediğinizden ve yenilerini oluşturmadığınızdan emin olmak için Dilim Seçim Aracı'nı da kullanabilirsiniz. Bu araç, açılır menüdeki Dilim Aracı'nın altında bulunur.
Otomatik Dilimleri Kullanıcı Dilimlerine Dönüştürme
Tüm dilimleme işlemi boyunca Otomatik Dilimler sürekli oluşturulur ve güncellenir ve kullanıcı dilimlerinden farklı kalırlar. Daha sonra, bunları dosya olarak nasıl dışa aktaracağımızı veya dışa aktarırken bunları yok sayacağımızı inceleyeceğiz, ancak şimdilik Otomatik Dilim'in Kullanıcı Dilimine nasıl dönüştürüleceğine bakalım.
İşlem son derece basittir. İlk olarak, Dilim Seçim Aracını kullanarak otomatik Dilim'i seçmelisiniz. Ardından, dönüştürmek istediğiniz Otomatik Dilim'i seçin ve üst taraftaki "Tanıtım" düğmesine basın.
Bu kadar! Şimdi Otomatik Dilim, artık bir Kullanıcı Dilimi olduğunu belirten rengi değiştirmelidir. Artık boyutu ve ihracat şekli üzerinde daha fazla kontrole sahip olacaksınız.
Dilimleri Otomatik Bölme
Bir ızgaraya yatay, dikey veya hatta dağıtılmış bir dizi nesneniz olduğunda, her bir birimin etrafından geçmek ve bir dilim yapmak için zaman ayırmanıza gerek yoktur. Bunun yerine, tüm nesneleri kapsayan bir dilim yapabilir ve Photoshop'a geri kalanını yapmasını söyleyebilirsiniz.
Bunu yapmak için, önce tüm nesnelerin etrafına bir kutu çizerek büyük dilim yapın. Ardından, Dilim Seçim Aracı etkinken sayfanın üst kısmındaki "Böl" düğmesini tıklayın.
Bu, yukarıda gösterilen “Dilim Böl” iletişim kutusunu açmalıdır. Bu pencereyi kullanarak hızlı bir şekilde ekstra dikey ve yatay dilimler ekleyebilirsiniz. Sağa hizalamazlarsa, “Tamam” düğmesine bastıktan sonra manuel olarak ayarlayabilirsiniz.
Rehberlerden Dilimler
Birçoğunuz kılavuzlarla çalışmak Photoshop'un içindeki dilimlerden çok daha rahatsınız. Gerçek şu ki, her ikisi de çok benzer şekilde çalışıyor, ancak kılavuz sistemi itirafla biraz daha yumuşak hissediyor.
Bu şekilde yuvarlanırsanız, dilimler oluşturmak için kolay bir iş akışına mükemmel uyum sağlar. PSD'nizi dilimlemek ve dilimleme araçlarını tamamen göz ardı etmek için kılavuzları sürüklemeniz yeterlidir. Ardından, işiniz bittiğinde Dilim Aracını seçin ve üstteki "Kılavuzlardan Dilimler" düğmesine basın.
Dilimleri Adlandırma
Dilimlerle ilk kez çalıştığınızda sizi rahatsız edecek sinir bozucu şeylerden biri, onları dışa aktardığınızda, ortaya çıkan dosyaların hiç anlamlı olmayan büyük çirkin isimlerle gelmesidir. Bunu düzeltmek için, girdiğinizden ve her dilimi uygun şekilde adlandırdığınızdan emin olmanız gerekir. Atadığınız ad ne olursa olsun dışa aktarma sonrasında dosya adı olarak taşınır.
Bir dilimi adlandırmak için, Dilim Aracı seçiliyken içindekilere çift tıklayın. Bu aşağıdaki iletişim kutusunu açacaktır.
Burada, dilim için renk ayarlama, boyutları manuel olarak girme ve bir ad atama gibi çeşitli seçeneklerinizin olduğuna dikkat edin. URL, Hedef vb.Gibi bir sürü HTML öğesi de var. Photoshop, dilimlenmiş PSD'nizi alıp bir web sayfası olarak çıkarabilir. Bazıları bu işlevi kullanır, çünkü varsayılan ayarlar tablo tabanlı bir düzen oluşturur, ancak bunları CSS kullanmak için değiştirebilirsiniz.
Şimdi, fazla heyecanlanma. CSS seçenekleri seçilse bile, Photoshop sizin için bir web sitesi oluşturma konusunda hala oldukça çürümüş. Elle yapmaktan veya en azından Dreamweaver'a devretmekten çok daha iyisiniz, yani tüm diğer seçenekleri tamamen görmezden gelmelisiniz.
Katman Tabanlı Dilimler ve Neden Daha İyi Oldukları
Dilimlemeyi benim için çok daha az emen ana özelliklerden biri Katman Tabanlı Dilimlerdir. Bunlar, çeşitli şekillerde üstün olan belirli bir Kullanıcı Dilimleri markasıdır.
Adından da anlaşılacağı gibi, bu dilimler manuel olarak çizdiğiniz bir kutuya dayanmaz, bunun yerine otomatik olarak bir katmanın sınırlarına yapışır. Katman Tabanlı Dilim oluşturmak için, Katmanlar Paletinde bir katman seçin, ardından menüye gidin ve Katman> Yeni Katman Tabanlı Dilim'i seçin. Seçili birden çok katmanınız olsa bile bunun işe yaradığını, her katmanın kendi dilimine dönüştürüleceğini unutmayın!
Açıkçası, bunun düzgün çalışması için katmanlarınızı nasıl yapılandırdığınız konusunda gerçekten iyi olmalısınız. Yine de mockup'larınızı tamamen katmanlı ve organize dosyalar olarak oluşturmalısınız, böylece bu bir sorun olmamalıdır.
Avantaj
Normal dilimlerin bu kadar topal olmasının ana nedenlerinden biri, geri dönüp tasarımlarınızı değiştirmek istiyorsanız çok fazla iş oluşturmasıdır. Resmi karıştırdıktan sonra, geriye dönüp tüm dilimlerinizi yeni düzene hizalamak için hareket ettirmelisiniz. Bu sıkıntı, her zaman tek tek parçaları kırparak manuel olarak kurtarmamın nedenidir.
Ancak, Katman Tabanlı Dilimler aslında oldukça zekidir. Katmanlarınızda hareket ettiğinizde, dilimleriniz otomatik olarak takip eder. Dış Işıma gibi sınırları değiştiren bir efekt eklerseniz, dilim onu içerecek şekilde genişler. Katmanı orijinal boyutunun% 30'una dönüştürürseniz, yine dilim otomatik olarak güncellenir!
Açıkçası burada, kaçınılmaz yeniden tasarım aşamasında inanılmaz bir zaman kazandırdığından, Katman Tabanlı Dilimleri kullanmak için mümkün olduğunca açık bir argüman var.
Dağınıklığı Öldürmek
Dilimlemeyle ilgili en büyük sıkıntılarımdan biri, gerçekten dağınık görünümlü bir PSD oluşturabilmesidir. Bu çoğunlukla Otomatik Dilimleme yan etkisine yöneliktir.
Örnek olarak, aşağıdaki resme bir göz atın (burada biraz fazla basitleştirilmiş, ancak amacınız var). Burada sadece üç dilim oluşturmak istedim, ancak Photoshop otomatik olarak içeri girdi ve on iki dilime dönüştürdü!
Seni bilmiyorum, ama hep birlikte tıka basa dolu büyük bir resim koleksiyonu olarak web sayfaları oluşturmuyorum. Bu yüzden tüm bu ekstra dilimleri istemiyorum! Bu alanları görüntülere aktarmayacağım, bu yüzden yaptıkları tek şey arayüzüme gürültü katmak. Böyle bir belge gördüğümde, dilimler benim için anlamlı bir araç olmaktan çıkıyor.
Bunu düzeltmek için Dilim Seçim Aracını alabilir ve ekranın üst kısmındaki "Otomatik Dilimleri Gizle" düğmesine basabiliriz. Bu, tam olarak adın ima ettiği şeyi yapar, tüm bu kötü Otomatik Dilimleri görünümden uzaklaştırır.
Belgemizin ne kadar basit hale geldiğine bakın! Kullandığımız birkaç dilim açıkça tanımlanabilir ve bu nedenle kullanışlılıklarını korur. Bence, dilimlerinizi görüntülemek için bu yöntem büyük ölçüde tercih edilir. Bu, Photoshop'un tercih edilen iş akışımı tahmin etmek için çok fazla çabaladığı ve özelliklerin aşırıya kaçmasıyla sonuçlandığı durumlardan biridir.
Dilimleri Dışa Aktarma
Burada dilimlemenin faydası gerçekten devreye giriyor. Dilimleme olmadan, comp'inizin her bir bölümünü birer birer kaydetmeniz gerekir. İş akışı aşağıdaki gibi bir şey olacaktır: bir seçim yapın, kırpın, Web için Kaydet'te optimize edin, kaydedin, kırpın geri alın ve tekrarlayın. Bu birçok gereksiz adım! Dilimlemeyle nasıl çalıştığını görelim.
Sonunda tüm dilimleme ve çıkışları anladıktan ve PSD'nizi hazır hale getirdikten sonra, Dosya menüsüne gitme ve “Web ve Cihazlar için Kaydet” i seçmenin zamanı geldi. Muhtemelen bu iletişim kutusunu zaten biliyorsunuzdur, ancak belgenizde dilimler olduğunda biraz farklıdır.
Herhangi bir diliniz varsa, belgenizin bu pencerede önizlemesi tümünü gösterir (maalesef bu sinir bozucu Otomatik Dilimleri içerir). Buradan, her bir dilimi seçmek ve her biri için ayarları ayrı ayrı optimize etmek için tıklayabilirsiniz. Buna dosya türü, kalitesi vb. Dahildir. Böylece bir oturumda, her biri uygun gördüğünüz kalitede üç JPG ve PNG dışa aktarımı ayarlayabilirsiniz.
Her şeyi istediğiniz gibi ayarladıktan sonra, “Kaydet” düğmesine basın. Tüm görüntüleri yerleştirmek için bir klasör seçmenizi sağlayan bir iletişim kutusu açılmalıdır. Adlandırma kuralını zaten ayarladığımızı unutmayın, bu yüzden bunu olduğu gibi bırakın. Buradaki anahtar, yalnızca "Tüm Kullanıcı Dilimleri" veya "Seçili Dilimler" i dışa aktardığınızdan emin olmaktır.
İstediğiniz iş akışına bağlı olarak, bu seçeneklerden herhangi biri harika çalışır. Varsayılan seçenek, yalnızca Kullanıcı ve Katman Tabanlı Dilimlerinizi değil, yine de atmanız gereken tamamen yararsız Otomatik Dilimleri de içerecek olan “Tüm Dilimler” dir. Kendinizi beladan kurtarın ve gerçek tasarruf gerçekleşmeden önce bunları buraya bırakın.
Sonuç
Bugün pek çok güzel Photoshop malzemesinin üzerinden geçtik, bu yüzden güzel bir şekilde özetlemeye çalışacağım. İlk olarak, ne yaptığınızı bilmiyorsanız bir PSD'yi dilimlemek gerçekten zor bir süreç gibi hissedebilir. Photoshop'ta gerçekten etrafınıza baktığınızdan ve kullanabileceğiniz araçlardan en iyi şekilde yararlandığınızdan emin olmak için yukarıdaki ipuçlarını denediğinizden emin olun.
İkinci olarak, üç tür dilim olduğunu unutmayın: Otomatik Dilimler, Kullanıcı Dilimleri ve Katman Tabanlı Dilimler. Otomatik Dilimler oldukça topal ve dilimleme için yararlı bir özellikten daha talihsiz bir yan etkidir. Bu konuda benimle aynı fikirde olmak zorunda değilsiniz, ama eğer yaparsanız, dikkatinizi dağıtacak şekilde gizleyin. Kullanıcı Dilimleri basitçe kasıtlı olarak oluşturduğunuz Dilimlerdir. Onları Dilim Seçim Aracı ile ayarlayabilir ve içeriğe çift tıklayarak adlandırabilirsiniz. Katman Tabanlı Dilimler tıpkı Kullanıcı Dilimleri gibidir, sadece belirli bir katmanın sınırlarına otomatik olarak yapıştıklarından çok daha zekidirler. Bir katmanı taşıyabilir, yeniden boyutlandırabilir ve efektler ekleyebilirsiniz; dilim sürekli olarak kendi kendine güncellenir.
Son olarak, bir belgeyi dilimlerle dışa aktarırken, Web için Kaydet komutunu seçin ve her dilimi kendi dosyası olarak optimize edin. Ayrıca yalnızca Kullanıcı Dilimlerini veya Seçili Dilimleri dışa aktardığınızdan emin olun, aksi takdirde Photoshop tarafından oluşturulan tüm Otomatik Dilimler size resimler klasörünü dolduracaktır.
Bu muhtemelen Photoshop'ta dilimleme hakkında bilmek istediğinizden çok daha fazladır, ancak umarım bu sistemdeki verimsizlikleri tespit etmenize yardımcı olmuştur, böylece garipliğinden etkilenmeden bu kullanışlı araç setini ayarlayabilir ve yine de yararlanabilirsiniz.
Aşağıya bir yorum bırakın ve bize bir PSD'yi nasıl dilimlediğinizi söyleyin. Burada kurduğum iş akışı pek çok olası çözümden sadece bir tanesi ve sizinkini duymak ve öğrenmek için endişeliyim!
