Blogunuzun tasarımını oluşturmak için çok zaman harcadınız, ancak görüntüler neden Smartphone'da doğru görüntülenmiyor? Yüksek kaliteli görüntüler kullandığınızdan emin olabilirsiniz, ancak kötü görüntü durumu ekranı düzeltmez.

Birçok kişi bu yeni cihazların farkında değil (özellikle de Apple’dan olanlar) Hem bilgisayarlarda hem de Smartphone'da doğru görüntülenmelerini sağlamak için görüntülerin görüntülenme biçimini etkileyen gelişmiş bir görüntüleme teknolojisi kullanın.

Bu derste "nosyonunun bir kısmını" tanıtmaya çalışacağız. hazır retina Ve size bir Retina görüntüsünü nasıl oluşturacağınızı gösterin.

Ama başlamadan önce, bakmak için zaman ayırın Bir WordPress tema nasıl kurulurKaç eklentileri WordPress yüklemeniz gerekir.

O zaman işe başlayalım.

görüntülerin Retina Hazır açıklaması

Cihaz ekranlarının kalitesi son birkaç yılda artmaya devam etti ve özellikle Apple'ın ekranları son derece net ve görünür olmak için çok fazla çalışma yaptı. Teknoloji "Retina EkranBelirli yeteneklere sahip belirli bir ekran türünü tanımlamak için kullanılan bir Apple markasıdır.

Retina ekranları hedefliyoruz çıplak gözle görülmeyen pikseller olmadan metin ve resimleri olabildiğince net görüntüleyin. Tasarımcılar için zorluk, ekranın cihazın ekran boyutuna ve kullanıcının ekrana yakınlığına bağlı olarak değişmesidir.

Ekranın fiziksel genişliğini yatay olarak görüntülenen piksel sayısına bölerek, inç başına piksel sayısı elde ederiz (ppi, inç başına nokta sayısı için ppp olarak da adlandırılır). " Yüksek DPI İnç başına 200'den fazla piksele sahip herhangi bir cihaza atıfta bulunmak için kullanılır. Bu, tüm görüntüleme cihazlarını içerir " retina (Apple'dan) ve diğer üreticilerin bazı cihazları.

Photoshop ile "Retina Hazır" Görüntüler Nasıl Oluşturulur

Görüntülerle çift veya dört özünürlükte çalışmak, tüm küçük ayrıntıları görmek için yakınlaştırmanız gerekebileceği anlamına gelir, ancak aşırı ağır dosyalar performans sorununa ve dosya depolama sorununa neden olabilir.

Çoğu tasarımcı için çözüm, birden fazla katman oluşturmak ve bunları birlikte gruplandırmak ve gerektiğinde etkinleştirmektir. "comps" işlevini kullanarak » Photoshop orijinal çözünürlükte çalışmak ve ihtiyaç duydukları formatları dışa aktarmak için ("yeniden boyutlandırma" gibi bir eylem kullanmak).

Bu iki yöntemdeki zorluk, aynı anda birden fazla görüntü görememenizdir. Görüntülerdeki farklılıkları gereken boyutlarda görmeniz gerekiyorsa, aralarında geçiş yapmanız veya onları dışa aktarmanız gerekir.

Neyse ki biz Photoshop meraklıları için Adobe, birden fazla görüntü oluşturmayı kolaylaştıran bir özellik ekledi. Artık karakteristik çalışma yüzeyini kullanarak yan yana birden çok tuval oluşturabilir ve oluşturucuyu kullanarak birden çok görüntü boyutu oluşturabilirsiniz. Nasıl çalıştığını görelim.

1 - İlk çalışma yüzeyinizi oluşturun

tanıtılan yeni Çalışma Yüzeyi aracı, Photoshop CC 2015, hareket aracının arkasında gizlidir. Menüdeki aracı tıklayabilir veya Shift + V tuşlarını kullanarak " deplasman "Ve" Çalışma yüzeyi "

Çalışma yüzeyinde-Tool1-photoshop-tutorial-wordpress-create-images-retina hazırBir çalışma düzlemi oluşturmak için bir alana tıklayın ve sürükleyin. Yeni çalışma yüzeyi, katmanlar panelinde "Çalışma Yüzeyi 1" varsayılan adıyla görüntülenecektir.

Ayrıca Oku: Serbest çalışanların neden günlük programa ihtiyacı var?

2 - Çalışma Yüzeyinizi Yapılandırın

Çalışma yüzeyinize ihtiyaç duyduğunuz katmanları ekleyebilirsiniz ve bunlar katman olarak iç içe geçecektir.uygun bir katman yapısı oluşturmanıza olanak sağlar). Sonraki adıma geçmeden önce istediğiniz gibi konumlandırılmaları için şekiller gibi çeşitli dosyalarınızı eklemenizi öneririz.

3 - Çalışma Yüzeyinizi Kopyalayın

İlk çalışma yüzeyiniz ihtiyaçlarınızı karşılayacak şekilde ayarlandıktan sonra, bağlam menüsünü kullanarak çoğaltabilirsiniz. Katmanlar alanında "Çalışma Yüzeyi 1" üzerine sağ tıklayın ve "Çalışma Yüzeyini Çoğalt" seçeneğini seçin. Bu, tüm bileşenleriyle aynı yapıyı içeren başka bir benzer "Çalışma Yüzeyi" oluşturur:

photoshop çoğaltılması çalışma yüzeyi

Ayrıca keşfetmek için: Nasıl WordPress ilgili bir makale veya bir sayfayı çoğaltmak

4 - Çalışma yüzeylerinizi yerleştirin (Çalışma Yüzeyi)

Çalışma yüzeylerini kullanmanın en büyük avantajı, tüm resimlerinizi aynı anda görebilmektir. Bunu yapmak için, tezgahlarınızı ihtiyaçlarınıza göre konumlandırmanız yeterlidir. Bunu yapmanın birkaç yolu vardır:

Çalışma düzleminin sol üst köşesindeki X ve Y koordinatlarını girmek için bir çalışma düzlemi seçildiğinde beliren paneli kullanın.

Seçilen çalışma yüzeyini ekranın herhangi bir yerine sürükleyin. Photoshop. Çalışma yüzeyi akıllıca etkinleştirildiğinden, birden çok çalışma yüzeyini otomatik olarak hizalayarak konumlarının önceki aralığa kilitlenmesini sağlayabilirsiniz.

Seçilen bir çalışma düzlemini hareket ettirmek için klavyedeki ok tuşlarını kullanın.

Ayrıca şu konudaki eğiticimize bakın: Artık WordPress üzerinde çalışan medya kütüphanesi nasıl düzeltilir?

5 - Çalışma yüzeylerinizi yeniden boyutlandırın (gerektiğinde)

Çalışma yüzeylerinizin boyutunu ayarlamanız gerekirse, yine birkaç seçeneğiniz vardır:

  • Bir çalışma yüzeyi seçtiğinizde görünen tutamaçları kullanarak yeniden boyutlandırın.
  • Önceden ayarlanmış boyutları, sabit genişlikleri veya yükseklikleri seçmek ya da dikey ve yatay arasında geçiş yapmak için "Dosya" menüsünün hemen altındaki seçenekler panelini kullanın.
  • Boyutu değiştirmek ve önceden tanımlanmış boyutlara erişmek için bir tezgah seçildiğinde görünen "Özellikler" panelini kullanın.

Fotoğraf stüdyosu çalışma alanının mülkü

6 - Sanatınızı Yaratın

Artık tezgahınızla çalışabilir, bileşenleri değiştirebilir ve gerektiğinde değişiklik yapabilirsiniz. Orijinal kurulumunuzun değişmediğini varsayarsak, artık doğru yerde tüm bileşenlerle mükemmel piksel görüntülerine sahip olacaksınız.

Ayrıca listemize bakın sayfalarınızı oluşturmak için sistem sürükle ve bırak ile 26 WordPress temaları

7 - "Oluştur" aracını ayarlayın

« Oluşturmak »Özel adlandırma sözdizimi kullanarak çalışma yüzeylerini, katmanları veya grupları dışa aktarmanıza olanak tanır. Bu, web için kaydetme kısayolu. Bunu sağlamak için " Oluşturmak PSD'niz için etkinleştirildi, gidin " Dosya> Oluştur> Görüntü Varlıkları "(Dosya> Oluştur> Görüntü Varlıklar):

alet Photoshop oluşturmakalet Photoshop oluşturmak

8 - Çalışma yüzeylerinizi yeniden adlandırın

Oluştur « Sanat Için görüntü bileşenlerini kaydet katman kümesinde veya çalışma yüzeyinizde ayarlanan seçeneklere göre çalışıyorsunuz. Ayarlayabileceğiniz birkaç seçenek vardır:

  • dosya biçimi. Bir uzantı ekleyin (.jpg, .gif veya .png ) ilgili dosyayı kaydetmek için, örneğin: header-main.png Görüntü bileşenleri, PSD dosyasıyla aynı klasöre ancak son ek olarak "-assets" ile kaydedilecektir.
  • Dosya Sıkıştırması.  Uzantıdan sonra, kullanılan sıkıştırma düzeyini gösteren bir sayı ekleyebilirsiniz. İçin " opt.jpg »Yüzdeleri ve png için ilgili bitleri kullanabilirsiniz: 8, 24 veya 32.
  • Çık ölçeği. Yüzde veya piksel ekleyerek çıktı ölçeğini ayarlayabilirsiniz (genişliğinin yüksekliğine) resim adından (örneğin% 100 header-main.png8 ).
  • daha fazla resim. Aynı çalışma yüzeyinin birden çok görüntüsünü dışa aktarabilirsiniz (Çalışma yüzeyi) görüntü adlarını ayırmak için virgül veya artı işareti kullanın. Görüntünün her adı benzersiz olduğu sürece, her görüntünün kendi seçenekleri olabilir.

Bu seçeneklerin kombinasyonu, çalışma yüzeyleriniz için sürekli olarak karmaşık görüntü bileşenleri oluşturmanıza olanak tanır:

Resim bileşenlerinin yönetimi

Tüm çalışma tezgahlarınız için standart resimler gerekiyorsa, " Oluşturmak Varsayılan olarak her birine uygulanacak bir parametre oluşturmanıza olanak sağlar. Bu parametreyi oluşturmak için belgenizin üstüne aşağıdaki seçeneklerle boş bir katman ekleyin:

  • Varsayılan anahtar kelime: Araçtan ayrılmak için ad bununla başlamalıdır " Oluşturmak »Varsayılan olarak kullanma özgürlüğü.
  • Çık ölçeği: Çıktı ölçeğini yüzde veya piksellerle (genişliğinin yüksekliğine).
  • Klasör / eki: Görüntülerin kaydedileceği klasörün adını tanımlayınve dosyaların adlarına eklenecek bir sonek.

Yönetici Özeti

Orada olan tek şey bu, görüntüyü yakınlaştır ikincisinin nasıl davrandığını görmek için. Gerekirse, WordPress blogunuzdaki görüntüyü medya kitaplığınıza yükleyerek test edebilirsiniz.

Gerektiği gibi bize sorular sormaktan çekinmeyin.

Ayrıca bazı premium WordPress eklentilerini keşfedin  

diğer kullanabilirsiniz WordPress eklentileri modern bir görünüm vermek ve blogunuzun veya web sitenizin kullanımını optimize etmek için.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. WP Ultimate Sosyal

Bu, WordPress blogunuzda ihtiyaç duyabileceğiniz tüm sosyal ağ özelliklerinin nihai paketidir.wp-nihai-sosyal

Ayrıca bizim oku 8 WordPress eklentileri bir azalma sistemini entegre etmek

Başlıca özellikleri: birden çok sosyal ağ simgeleri, herkesin yapmasına izin veren sosyal paylaşım web sitenizin içeriğini paylaşın (popüler sosyal ağlarda (makaleler, sayfalar, resimler, medya) (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, Digg, Tampon, Reddit, Tumblr, Stumbleupon, Xing, Weibo, VK, Delicious), sosyal medya kimlik bilgilerinizle web sitesine bağlantı, takipçilerinizin sayısını ve web sitenizin ve diğerlerinin paylaşımlarını gösteren bir sayaç.

Indir | gösteri | Web hosting

2. WP Slick Slider Görüntüsü Carousel Pro

Visual Composer paketinin hevesli bir takipçisi iseniz, WP Slick Slider eklentisini kullanmak dikkate almanız gereken bir seçenektir. Neredeyse 100 önceden tanımlanmış şablonları ile, aradığınızı kesinlikle hiçbir şeyi kodlamadan bulacaksınız.

Wp kaygan kaydırıcı ve görüntü atlıkarınca pro

Bu, özellikle kullanıcılar için gerçekten ciddiye alma seçeneği Görsel Besteci. Özellikleri şunlardır: sürükle ve bırak desteğine sahip tamamen duyarlı bir düzen, bir oluşturucu kısa kod, RTL ve çok dilli destek, güzel bir tasarım ve çok daha fazlası

Indir | gösteri | Web hosting

3. WordPress Sosyal Kenar Çubuğu

Bunun adı WordPress Plugin size kabaca ikincisinin ne için olduğunu söylemelidir. Ama söyleyeceğiz ki, WordPress Plugin Sosyal Kenar Çubuğu, yapmanıza yardımcı olmak amacıyla web sitenizde bir kenar çubuğu oluşturmanıza yardımcı olacaktır. içeriğinizi farklı sosyal ağlarda hızla paylaşın.

Wordpress sosyal kenar çubuğu

İşlevleri şunları içerir: WordPress tema, yukarıdan aşağıya yapılandırma yeteneği, birkaç yeni ve modern tarayıcıyla uyumluluk, kenar çubuklarınızı soldan sağa yerleştirme olasılığı, sayfalarınızın üstünde veya altında, 4 renk kümesi yerel olarak, duyarlı bir düzen ve çok daha fazlası sunulmaktadır.

Indir gösteri | Web hosting

Diğer önerilen kaynaklar

Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.

Sonuç

Buraya ! Bu eğitim için bu kadar, umarım WordPress blogunuz için "Retina" resimleri oluşturmanıza izin verir. 

Ancak, ayrıca kaynaklarımız, İnternet sitesi oluşturma projelerinizi gerçekleştirmek için daha fazla öğeye ihtiyacınız varsa, WordPress blog oluşturma.

Öneriniz veya yorumunuz varsa, bunları bölümümüzde bırakın. Yorumlar. Çekinme En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın

...