Loncat ke Konten Utama

Cara membuat "Retina" gambar ke blog WordPress Anda

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Anda telah menginvestasikan banyak waktu dalam menyiapkan desain blog Anda, tetapi mengapa gambar tidak ditampilkan dengan benar di Smartphone? Anda telah memastikan untuk menggunakan gambar berkualitas tinggi, tetapi kondisi gambar yang buruk tidak memperbaiki tampilan.

Banyak orang tidak menyadari bahwa perangkat baru (terutama yang dari Apple) menggunakan teknologi tampilan canggih yang memengaruhi cara gambar ditampilkan, untuk memastikan bahwa keduanya ditampilkan dengan benar di komputer, tetapi juga di Smartphone.

Dalam tutorial ini kami akan mencoba memperkenalkan sedikit pengertian " retina siap Dan menunjukkan kepada Anda cara membuat gambar siap retina.

Penjelasan dari gambar Retina Siap

Layar perangkat terus meningkatkan kualitas dalam beberapa tahun terakhir, dan Apple khususnya telah melakukan kerja keras untuk menjadi sangat jelas dan terlihat. Teknologi "Retina DisplayAdalah nama merek Apple yang digunakan untuk menggambarkan jenis layar tertentu dengan kemampuan tertentu.

Layar retina bertujuan untuk menampilkan teks dan gambar sejelas mungkin, tanpa piksel yang terlihat dengan mata telanjang. Tantangan bagi para desainer adalah tampilan bervariasi tergantung pada ukuran layar perangkat, dan kedekatan pengguna dengan layar.

Dengan membagi lebar fisik layar dengan jumlah piksel yang ditampilkan secara horizontal, kami memiliki piksel per inci (ppi, juga disebut ppp untuk titik per inci). " DPI tinggi Digunakan untuk merujuk ke perangkat apa pun yang memiliki lebih dari 200 piksel per inci. Ini termasuk semua perangkat layar retina (Dari Apple), dan beberapa perangkat dari produsen lain.

Cara membuat gambar "Retina Ready" dengan Photoshop

Bekerja dengan gambar pada resolusi ganda atau quad berarti Anda harus dapat memperbesar untuk melihat semua detail kecil, namun file yang sangat berat menyebabkan masalah kinerja dan tantangan penyimpanan file.

Solusi bagi sebagian besar desainer adalah dengan membuat beberapa layer dan mengelompokkannya, mengaktifkannya sesuai kebutuhan menggunakan fungsi " comps Photoshop atau bekerja pada resolusi asli dan ekspor format yang mereka butuhkan (menggunakan tindakan seperti "retinize").

Tantangan dengan kedua metode ini adalah Anda tidak dapat melihat banyak gambar secara bersamaan. Jika Anda perlu melihat perbedaan dalam gambar pada ukuran yang diperlukan, Anda perlu beralih di antara gambar tersebut atau mengekspornya.

Untungnya bagi kita pecinta Photoshop, Adobe telah menambahkan fitur yang membuatnya mudah untuk membuat banyak gambar. Sekarang Anda dapat membuat beberapa kanvas secara berdampingan menggunakan bidang kerja yang khas, dan membuat beberapa ukuran gambar menggunakan generator. Mari kita lihat cara kerjanya.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

1 - Buat Artboard pertama Anda

Alat Artboard baru, diperkenalkan di Photoshop CC 2015, disembunyikan di balik alat gerakan. Anda dapat mengklik alat di menu, atau menggunakan Shift + V untuk beralih di antara " Penempatan "Dan" artboard »:

Artboard-Tool1 photoshop-tutorial-wordpress-membuat-gambar dari retina siapUntuk membuat rencana kerja, klik dan seret area. Meja kerja baru akan ditampilkan di panel layer dengan nama default "Artboard 1".

2 - Konfigurasikan Artboard Anda

Anda dapat menambahkan lapisan yang Anda butuhkan ke papan seni Anda, dan mereka akan disarangkan seperti lapisan (memungkinkan Anda untuk membuat struktur lapisan yang sesuai). Kami sarankan Anda menambahkan file yang berbeda, seperti bentuk, sehingga diposisikan sesuai keinginan sebelum melanjutkan ke langkah berikutnya.

3 - Gandakan Artboard Anda

Setelah rencana kerja pertama Anda diatur untuk memenuhi kebutuhan Anda, Anda dapat menggandakannya menggunakan menu konteks. Klik kanan pada "Artboard 1" di area layer dan pilih "Duplicate Artboard". Ini menciptakan "Artboard" serupa lainnya, yang mengandung struktur yang sama dengan semua komponennya:

photoshop duplikasi artboard

4 - Tempatkan rencana kerja Anda (Artboard)

Keuntungan besar menggunakan rencana kerja adalah dapat melihat semua gambar Anda secara bersamaan. Untuk melakukan ini, cukup posisikan rencana kerja Anda sesuai dengan kebutuhan Anda. Ada beberapa cara untuk sampai ke sana:

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Gunakan panel yang muncul ketika bidang kerja dipilih untuk memasukkan koordinat X dan Y di sudut kiri atas bidang kerja.

Seret artboard yang dipilih ke posisi mana pun di Photoshop. Meja kerja diaktifkan secara cerdas, sehingga Anda dapat secara otomatis meluruskan beberapa bidang kerja sehingga posisinya terkunci ke jarak sebelumnya.

Gunakan tombol panah pada keyboard untuk memindahkan pesawat kerja yang dipilih.

5 - Ubah ukuran rencana kerja Anda (bila perlu)

Jika Anda perlu menyesuaikan ukuran rencana kerja Anda, Anda memiliki beberapa opsi lagi:

  • Ubah ukuran menggunakan pegangan yang muncul saat Anda memilih pesawat kerja.
  • Gunakan panel opsi tepat di bawah menu "file" untuk memilih ukuran yang telah ditetapkan, lebar atau tinggi tetap, atau beralih antara potret dan lanskap.
  • Gunakan panel "Properties" yang muncul ketika rencana kerja dipilih untuk mengubah ukuran dan mengakses ukuran yang telah ditentukan.

Milik area kerja photoshop

6 - Buat Seni Anda

Anda sekarang dapat bekerja dengan rencana kerja Anda, mengganti komponen, dan membuat perubahan sesuai kebutuhan. Dengan asumsi konfigurasi asli Anda tidak berubah, Anda sekarang akan memiliki piksel gambar yang sempurna dengan semua komponen di tempat yang tepat.

7 - Siapkan alat "Hasilkan"

« Menghasilkan Memungkinkan Anda untuk mengekspor rencana kerja, lapisan, atau grup menggunakan sintaks penamaan khusus. Karena berfungsi sebagai pintasan untuk menyimpan untuk web. Untuk memastikan Menghasilkan Diaktifkan untuk PSD Anda, buka " File> Hasilkan> Aset Gambar »(File> Hasilkan> Gambar Aktiva):

menghasilkan alat photoshopmenghasilkan alat photoshop

8 - Ganti nama rencana kerja Anda

Hasilkan « Seni Untuk menyimpan komponen gambar yang sedang Anda kerjakan berdasarkan pada opsi yang ditentukan dalam grup layer atau di meja kerja Anda. Ada beberapa opsi yang dapat Anda atur:

  • Format file. Tambahkan ekstensi (.jpg, gif atau png ) untuk menyimpan file yang bersangkutan misalnya: header-main.png Komponen gambar akan disimpan dalam folder yang sama dengan file PSD, tetapi dengan "-asset" sebagai akhiran.
  • Kompresi file. Setelah ekstensi, Anda dapat menambahkan angka yang menunjukkan tingkat kompresi yang digunakan. Untuk " opt.jpg Anda dapat menggunakan persentase, dan untuk png gunakan bit masing-masing: 8, 24 atau 32.
  • Skala keluar. Anda dapat mengatur skala output dengan menambahkan persentase atau piksel (lebar untuk tinggi) sebelum nama gambarnya (misalnya 100% tajuk-utama.png8 ).
  • lebih banyak gambar. Anda dapat mengekspor banyak gambar dari desktop yang sama (artboard) menggunakan koma atau tanda plus untuk memisahkan nama gambar. Setiap gambar dapat memiliki opsi sendiri selama masing-masing nama gambar unik.

Menggabungkan opsi-opsi ini memungkinkan Anda untuk terus-menerus membuat komponen gambar kompleks untuk rencana kerja Anda:

manajemen komponen gambar

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Jika gambar standar diperlukan untuk semua rencana kerja Anda, alat " Menghasilkan Memungkinkan Anda membuat parameter untuk diterapkan ke masing-masing secara default. Untuk membuat parameter ini, tambahkan layer kosong di bagian atas dokumen Anda dengan opsi berikut:

  • Kata kunci default: Nama harus dimulai dengan ini untuk meninggalkan alat " Menghasilkan Kebebasan untuk menggunakannya sebagai standar.
  • Skala keluar: Memungkinkan Anda untuk mengatur skala output dengan persentase atau piksel (lebar untuk tinggi).
  • Folder / akhiran: Tentukan nama folder di mana gambar harus disimpan, dan akhiran untuk ditambahkan ke nama file.

Kesimpulan

Itu semua yang telah Anda lakukan, coba perbesar gambar untuk melihat bagaimana kinerjanya. Jika perlu, Anda dapat menguji gambar di blog WordPress Anda dengan mengirimkannya ke perpustakaan media Anda.

Jangan ragu untuk bertanya kepada kami jika diperlukan.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
10 saham
saham10
menciak
Register