Ana İçeriğe Geç

Bir WordPress Blogu için "Retina" Resimleri Nasıl Oluşturulur

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 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 kurulur, Kaç eklentileri WordPress yüklemeniz gerekir.

O zaman işe başlayalım.

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.

Ç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 ("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.

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.

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). Ş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:

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]

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 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 ekranın herhangi bir yerine sürükleyin. Photoshop. Çalışma yüzeyi akıllıca etkinleştirildi, böylece birden çok çalışma yüzeyini otomatik olarak hizalayarak konumlarının önceki boşluğ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 - İş 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.

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 » vous permet d’exporter des plans de travail, des couches ou des groupes en utilisant une syntaxe de nommage spéciale. Il s’agit d’un raccourci pour enregistrer pour le web. Pour s’assurer que « 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

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]

8 - İş planlarınızı 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 ) ö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ırması. 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:

  • 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ı 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

Modern bir görünüm kazandırmak ve blogunuzun veya web sitenizin rahatlığını artırmak için diğer WordPress eklentilerini kullanabilirsiniz.

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, herkese 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.

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ğiyle tamamen duyarlı bir düzen, 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

Bu WordPress eklentisinin adı kabaca ne için olduğunu söylemelidir. Ancak WordPress Sosyal Kenar Çubuğu eklentisi, web sitenizde bir kenar çubuğu oluşturmanıza yardımcı olacak gibi görünüyor. içeriğinizi farklı sosyal ağlarda hızla paylaşın.

İşlevleri diğerleri arasındadır: WordPress temanıza otomatik entegrasyon, yukarıdan aşağıya yapılandırma imkanı, son birkaç 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.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Indir | gösteri | Web hosting

Diğer önerilen kaynaklar

Web sitenizi oluştururken ve yönetirken size eşlik edecek diğer önerilen kaynakları keşfedin.

Sonuç

Buraya ! Bu eğitim için bu kadar, umarım WordPress blogunuz için "Retina" görüntüleri 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. Tereddüt etmeyin En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın.

...

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üş
10 hisseleri
hisse10
cıvıltı
Enregistrer