Tumblr, görsel yaratıcılığa yapılan vurguyu, Twitter'ın kısalığı ile geleneksel bir blog girişinin açık uçlu uzunluğu arasında kalan bir gönderi uzunluğuyla birleştirir. Çevrimiçi ve çevrimdışı kimliğinizin görünümünü genişleten özel bir Tumblr teması kullandığınızda, bir tumblelog diğer çevrimiçi ve sosyal medyayı içeren bir stratejiye uyar. Web tasarımcıları, görsel çalışma alanı olarak programın katmanlı PSD dosya biçimini kullanarak genellikle Adobe Photoshop'ta özel temalar geliştirmeye başlar.
Boyutların Oluşturulması
Adobe Photoshop'un cetvel kılavuzları ve katmanlama yetenekleri, içerik alanlarının boyutlarını tanımlayan bir düzen ızgarasıyla tamamlanmış bir Tumblr temasının temelini oluşturma görevini basitleştirir. Ana içerik alanı ve kenar çubuğu da dahil olmak üzere tasarımınızın her yönü için katman grupları ayarlarsanız, her öğe için tüm kılavuzları her grup içinde tek bir katmana yerleştirebilirsiniz. Bu düzenleme, kılavuzlarınızı bir Photoshop klavye kısayolu veya menü öğesi ile basitçe gösterip gizlemek yerine seçici olarak görünür hale getirmenizi sağlar ve ilgili kılavuz öğelerini bir arada tutar. Tasarımınızın her bir bölümünün işlevini belirlemek için gruplarınızı ve katmanlarınızı adlandırın. Artımlı adlandırma görevlerine yatırım yaptığınız anlar, ne içerdiklerini belirlemek için katmanları açıp kapatmak için harcamanıza gerek olmadığında karşılığını verir. Herhangi bir düzen öğesinin boyutlarını hızlı bir şekilde bulmak için, Bilgi panelini açmak üzere "F8"e basın ve ardından o katmandaki piksellere dayalı bir seçim yüklemek için Katmanlar paneli küçük resmine "Ctrl-tıklayın".
Renkleri Seçme
İster temanız için tonlar seçmek için zaman içinde test edilmiş Renk Seçici'yi kullanın, ister basılı bir parça veya logoyu eşleştirmek için bir renk kitaplığından seçenekler yükleyin veya başka bir dosya veya grafikten gölgeleri örneklemek için Damlalık aracına güvenin, Adobe Photoshop geniş tema renklerini seçmenin çeşitli yolları. Bir Tumblr temasının arka plan rengini veya tasarımınızın diğer öğelerini simüle etmek için bir katmanı düz bir renkle doldurduğunuzda, renk formülünü Renk Seçici'nin onaltılık okumasından metin olarak kopyalayabilir ve renk kimliğini katmanın adına yapıştırabilirsiniz. hızlı başvuru için. Onaltılık renkteki altı alfasayısal karakter, Tumblr kodunda olduğu kadar bloglar ve diğer çevrimiçi biçimler için Web tasarımlarında da görünür.
Grafik Oluşturma
Bir tumblelog'u tanımlayan başlık, bir bit eşlem grafiğini tematik bir grafik olarak kullanabilir. Bu kritik öğeyi, PSD dosyanızın içindeki metin ve piksel veya vektör tabanlı öğelerin bir kombinasyonunu kullanarak oluşturabilirsiniz. Grafik, Photoshop'ta dizdiğiniz özelleştirilebilir öğeler içeriyorsa, bunları PSD tabanlı tema dosyanızda canlı tür olarak bırakın ve yalnızca gerekli yazı tipi dosyaları için lisansı olmayan diğer kişilere sağladığınız dosyanın kopyalarında rasterleştirin. senin temanda. Photoshop'ta çizim yapmak için Kalem ve şekil araçları da dahil olmak üzere vektör araçlarını kullandığınızda, şablon dosyanızın temel çözünürlüğüyle hizalanan kılavuz kuralları kullanarak çizim yapın. Bu teknik, resminizin rasterleştirilmiş sürümlerini kaydettiğinizde veya dışa aktardığınızda resminizin olabildiğince keskin kalmasına yardımcı olur.
Sonraki adımlar
HTML ve CSS'yi nasıl kodlayacağınızı ve Tumblr'ın kod yapısında kullandığı özel değişkenleri anlıyorsanız, PSD'de oluşturduğunuz boyutları, renk özelliklerini ve grafikleri çalışan özel bir Tumblr temasına çevirebilirsiniz. Web kodlaması beceri setinizin dışındaysa, temayı sizin için üretmesi için PSD'nizi bir programcıya verebilirsiniz. Bir Tumblr teması, görsel bir işlemle birlikte değişkenler ve bloklar içermelidir. Değişkenler, standart Tumblr görsel öğeleri oluşturmak için dinamik değerleri kabul eder. Bloklar, değişkenleri HTML ile birleştiren kod parçaları oluşturur. Bloklar, gönderileri ve onlara ulaşan kalıcı bağlantıları, kronolojik olarak organize edilmiş malzeme parçaları arasında hareket eden bağlantıları ve bireysel bir tumblelog'u beğenen veya takip eden insanları barındıran öğeler oluşturur.
Versiyon bilgisi
Bu makaledeki bilgiler Adobe Photoshop CC ve Adobe Photoshop CS6 için geçerlidir. Diğer sürümler veya ürünlerle biraz veya önemli ölçüde farklılık gösterebilir.
