Ana İçeriğe Geç

Nasıl WordPress blog için "Retina" görüntüler oluşturmak için

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 600.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Blogunuzun tasarımını ayarlamak için çok zaman harcadınız, ancak görüntüler Smartphone'da neden düzgün görüntülenmiyor? Yüksek kaliteli görüntüler kullandığınızdan emin olun, ancak görüntülerin zayıf durumu ekranı düzeltmiyor.

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 retinaya hazır görüntünün nasıl oluşturulacağını gösterin.

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

Cihaz ekranları son yıllarda kaliteyi arttırmaya devam etti ve özellikle de Apple ekranları son derece net ve görünür olması için çok çaba sarf etti. Teknoloji "Retina EkranBelirli bir yetenek türüne sahip belirli bir ekran türünü tanımlamak için kullanılan bir Apple markasıdır.

Retina ekranları hedefliyoruz metinleri ve görüntüleri mümkün olduğunca net bir şekilde, çıplak gözle görülebilen pikseller olmadan göster. 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ına sahibiz (ppi, inç başına nokta sayısı için ppp olarak da adlandırılır). " Yüksek DPI İnç başına 200 pikselden daha fazla olan 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.

Tasarımcıların çoğu için çözüm, ya çoklu katmanlar oluşturmak ve onları gruplamaktı, bu işlevi kullanarak gerektiğinde aktive ediyorlardı " kompozisyonları Photoshop veya orijinal çözünürlükte çalışın ve ihtiyaç duydukları formatları dışa aktarın ("retinize" gibi bir işlem kullanarak).

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 bizim için Photoshop severler, Adobe birden fazla görüntü oluşturmayı kolaylaştıran bir özellik ekledi. Artık karakteristik çalışma düzlemini kullanarak yan yana birden fazla tuval oluşturabilir ve jeneratörü kullanarak birden fazla görüntü boyutu oluşturabilirsiniz. Nasıl çalıştığını görelim.

Blogunuzu tanıtmaya başlayın

WordPress Blogunuzu pazarlamak için düzinelerce Logo, afiş, web sitesi şablonu ve diğer birçok pazarlama aracını indirin. [Önerilen]

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ına gizlenmiştir. Menüdeki araca tıklayabilir veya "arasında geçiş yapmak için Shift + V tuşlarını kullanabilirsiniz" deplasman "Ve" Çalışma yüzeyi "

Çalışma yüzeyinde-Tool1-photoshop-tutorial-wordpress-create-images-retina hazırBir çalışma planı oluşturmak için bir alanı tıklayın ve sürükleyin. Yeni tezgah, varsayılan olarak "Artboard 1" ismi verilen katman panelinde gösterilecektir.

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). Şekiller gibi farklı dosyalarınızı eklemenizi öneririz; böylece bir sonraki adıma geçmeden önce istediğiniz gibi konumlandırılırlar.

3 - Çalışma Yüzeyinizi Çoğaltın

İlk çalışma planınız ihtiyaçlarınızı karşılayacak şekilde ayarlandıktan sonra, bağlam menüsünü kullanarak onu çoğaltabilirsiniz. Katman alanında "Artboard 1" üzerine sağ tıklayın ve "Çoğaltılmış Çalışma Yüzeyini" seçin. Bu, tüm bileşenleri ile aynı yapıyı içeren benzer bir "Çalışma Alanı" yaratır:

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

4 - Çalışma planlarını yerleştir (Çalışma yüzeyleri)

İş planlarını kullanmanın en büyük avantajı, tüm resimlerinizi aynı anda görebilmektir. Bunu yapmak için iş planlarınızı ihtiyaçlarınıza göre konumlandırın. Oraya gitmenin birkaç yolu var:

Ç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 Photoshop'ta herhangi bir konuma sürükleyin. Tezgah akıllıca çalıştırılır, böylece pozisyonları önceki aralığa kilitlenecek şekilde birden fazla çalışma düzlemini otomatik olarak hizalayabilirsiniz.

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

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

5 - İş planlarınızı yeniden boyutlandırın (gerektiğinde)

İş planlarınızın boyutunu ayarlamanız gerekirse, yine birkaç seçeneğiniz vardır:

  • Bir çalışma düzlemi seçtiğinizde görünen tutamaçları kullanarak yeniden boyutlandırın.
  • Önceden ayarlanmış boyutları, sabit genişlikleri veya yükseklikleri seçmek veya portre ile manzara 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 çalışma planı seçildiğinde beliren "Özellikler" panelini kullanın.

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

6 - Sanatını Yarat

Artık iş planlarınızla çalışabilir, bileşenleri değiştirebilir ve gereken değişiklikleri yapabilirsiniz. Orijinal yapılandırmanızın değişmediğini varsayarsak, şimdi tüm bileşenlerle doğru yerde mükemmel görüntü piksellerine sahip olacaksınız.

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

« Oluşturmak Özel adlandırma sözdizimini kullanarak iş planlarını, katmanları veya grupları dışa aktarmanıza izin verir. Web için kaydetmek için bir kısayol görevi görür. Emin olmak için Oluşturmak PSD'niz için etkinleştirildi, gidin " Dosya> Üret> Görüntü Varlıkları »(Dosya> Üret> Görüntü Varlıklar):

alet Photoshop oluşturmakalet Photoshop oluşturmak

8 - İş planlarınızı yeniden adlandırın

Oluştur « Sanat Görüntünün bileşenlerini kaydetmek için, katman grubunda veya tezgahınızda tanımlanan seçeneklere bağlı olarak çalışıyorsunuz. Ayarlayabileceğiniz bazı seçenekler vardır:

  • dosya biçimi. Bir uzantı ekleyin.jpg, .gif veya .png ) örneğin ilgili dosyayı kaydetmek için: header-main.png Görüntü bileşenleri PSD dosyasıyla aynı klasöre kaydedilir, ancak "-assets" ile sonek olarak kaydedilir.
  • Dosya sıkıştırma. Uzantıdan sonra, kullanılan sıkıştırma seviyesini gösteren bir numara ekleyebilirsiniz. "İçin opt.jpg Yüzdeleri kullanabilirsiniz ve png için ilgili bitleri kullanın: 8, 24 veya 32.
  • Çık ölçeği. Yüzdeyi veya pikseli ekleyerek çıktı ölçeğini ayarlayabilirsiniz (genişliğinin yüksekliğine) Görüntünün adı (Önceörneğin 100% header-main.png8 ).
  • daha fazla resim. Aynı masaüstünden birden fazla görüntü verebilirsiniz (Çalışma yüzeyi) görüntü adlarını ayırmak için virgül veya artı işareti kullanarak. Her görüntünün benzersiz olduğu sürece her görüntünün kendi seçenekleri olabilir.

Bu seçenekleri birleştirmek, çalışma planlarınız için sürekli olarak karmaşık görüntü bileşenleri oluşturmanıza olanak sağlar:

Resim bileşenlerinin yönetimi

Tüm iş planlarınız için standart resimlere ihtiyaç duyulursa, " 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:

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • Varsayılan anahtar kelime: Takımdan çıkmak için isim bununla başlamalı " Oluşturmak Varsayılan olarak kullanma özgürlüğü.
  • Çık ölçeği: Çıktı ölçeğini yüzde veya piksel olarak ayarlamanıza izin verir (genişliğinin yüksekliğine).
  • Klasör / eki: Görüntülerin kaydedileceği klasörün adını ve dosya adlarına eklemek için bir soneki tanımlayın.

Sonuç

Tüm yaptığınız bu, nasıl olduğunu görmek için resmi yakınlaştırmayı deneyin. Gerekirse, görüntüyü WordPress blogunuzda medya kitaplığınıza göndererek test edebilirsiniz.

Gerektiği gibi bize sorular sormaktan çekinmeyin.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
11 hisseleri
hisse10
cıvıltı1
Enregistrer