Loncat ke Konten Utama

Cara Membuat Gambar "Retina" untuk Blog WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.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 untuk menyiapkan desain blog Anda, tetapi mengapa gambar tidak ditampilkan dengan benar di Smartphone? Anda 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 tunjukkan cara membuat gambar Retina.

Tetapi sebelum Anda mulai, luangkan waktu untuk melihatnya Cara menginstal tema WordPressBerapa banyak plugin saya harus menginstal pada WordPress.

Kalau begitu mari kita mulai bekerja.

Penjelasan dari gambar Retina Siap

Kualitas layar perangkat terus meningkat selama beberapa tahun terakhir, dan layar Apple khususnya telah melakukan banyak pekerjaan untuk menjadi sangat jelas dan terlihat. Teknologi "Retina DisplayAdalah nama merek Apple yang digunakan untuk mendeskripsikan jenis tampilan tertentu dengan bakat tertentu.

Layar retina bertujuan untuk menampilkan teks dan gambar sejelas mungkin, tanpa piksel yang terlihat dengan mata telanjang. Tantangan bagi para perancang 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 pada 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 "Siap Retina" 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 bersama, mengaktifkannya sesuai kebutuhan. menggunakan fungsi "comps » Photoshop baik untuk 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 kami penggemar Photoshop, Adobe telah menambahkan fitur yang memudahkan pembuatan banyak gambar. Sekarang Anda dapat membuat beberapa kanvas secara berdampingan menggunakan artboard karakteristik, dan membuat beberapa ukuran gambar menggunakan generator. Mari kita lihat cara kerjanya.

1 - Buat Artboard pertama Anda

Alat Artboard baru, diperkenalkan di Photoshop CC 2015, tersembunyi di balik alat gerak. Anda dapat mengeklik 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 bidang kerja, klik dan seret sebuah area. Artboard baru akan ditampilkan di panel lapisan dengan nama default "Artboard 1".

Baca juga: Mengapa freelancer membutuhkan jadwal harian

2 - Konfigurasi 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 menyarankan untuk menambahkan berbagai file Anda, seperti bentuk, sehingga diposisikan sesuai keinginan Anda sebelum melanjutkan ke langkah berikutnya.

3 - Gandakan Artboard Anda

Setelah artboard pertama Anda disiapkan untuk memenuhi kebutuhan Anda, Anda dapat menduplikasinya menggunakan menu konteks. Klik kanan pada "Artboard 1" di area layer dan pilih "Duplicate Artboard". Ini membuat "Artboard" serupa lainnya, yang berisi struktur yang sama dengan semua komponennya:

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]

photoshop duplikasi artboard

Untuk menemukan juga: Bagaimana untuk menduplikasi sebuah artikel atau halaman di WordPress

4 - Tempatkan meja dapur Anda (Artboard)

Keuntungan besar menggunakan artboards adalah dapat melihat semua gambar Anda secara bersamaan. Untuk melakukan ini, cukup letakkan worktops Anda sesuai dengan kebutuhan Anda. Ada beberapa cara untuk melakukannya:

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 apa pun di Photoshop. Artboard diaktifkan dengan cerdas, sehingga Anda dapat secara otomatis menyelaraskan beberapa artboards sehingga posisinya terkunci pada jarak sebelumnya.

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

Lihat juga tutorial kami tentang: Cara memperbaiki pustaka media yang tidak lagi berfungsi di WordPress

5 - Ubah ukuran artboards Anda (bila perlu)

Jika Anda perlu menyesuaikan ukuran artboards Anda, Anda memiliki beberapa pilihan:

  • Ubah ukuran menggunakan pegangan yang muncul saat Anda memilih artboard.
  • Gunakan panel opsi tepat di bawah menu "File" untuk memilih ukuran prasetel, lebar atau tinggi tetap, atau beralih antara potret dan lanskap.
  • Gunakan panel "Properti" yang muncul saat meja dapur dipilih untuk mengubah ukuran dan mengakses ukuran yang telah ditentukan.

Milik area kerja photoshop

6 - Ciptakan Seni Anda

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

Lihat juga daftar kami Tema 26 WordPress dengan drag sistem dan drop untuk membuat halaman Anda

7 - Siapkan alat "Hasilkan"

« Menghasilkan »Memungkinkan Anda untuk mengekspor artboards, lapisan atau grup menggunakan sintaks penamaan khusus. Ini adalah jalan pintas untuk menyimpan untuk web. Untuk memastikan bahwa " Menghasilkan Diaktifkan untuk PSD Anda, buka " File> Hasilkan> Aset Gambar "(File> Hasilkan> Gambar Aktiva):

menghasilkan alat photoshopmenghasilkan alat photoshop

8 - Ubah nama artboards Anda

Hasilkan « Seni "Untuk simpan komponen gambar Anda sedang mengerjakan berdasarkan opsi yang ditetapkan di lapisan set atau di artboard Anda. Ada beberapa opsi yang dapat Anda atur:

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]

  • Format file. Tambahkan ekstensi (.jpg, gif atau png ) untuk menyimpan file bersangkutan misalnya: header-main.png Komponen gambar akan disimpan di folder yang sama dengan file PSD, tetapi dengan "-assets" sebagai sufiks.
  • 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 keluaran dengan menambahkan persentase atau piksel (lebar untuk tinggi) sebelum nama gambar (misalnya 100% header-main.png8 ).
  • lebih banyak gambar. Anda dapat mengekspor banyak gambar dari artboard yang sama (artboard) menggunakan koma atau tanda tambah untuk memisahkan nama gambar. Dengan demikian, setiap gambar dapat memiliki opsi sendiri selama setiap nama gambar itu unik.

Kombinasi dari opsi ini memungkinkan Anda untuk terus membuat komponen gambar yang kompleks untuk artboards Anda:

manajemen komponen gambar

Jika gambar standar diperlukan untuk semua meja kerja Anda, " 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 keluar dari alat " Menghasilkan »Kebebasan untuk menggunakannya sebagai default.
  • Skala keluar: Memungkinkan Anda untuk mengatur skala keluaran dengan persentase atau piksel (lebar untuk tinggi).
  • Folder / akhiran: Tentukan nama folder di mana gambar harus disimpan, dan akhiran untuk menambah nama file.

Ringkasan

Itu saja yang Anda dapatkan, cobalah memperbesar gambar untuk melihat bagaimana yang terakhir berperilaku. Jika perlu, Anda dapat menguji gambar di blog WordPress Anda dengan mengunggahnya ke perpustakaan media Anda.

Jangan ragu untuk bertanya kepada kami jika diperlukan.

Temukan juga beberapa plugin WordPress premium  

Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. WP Ultimate Social

Ini adalah paket utama dari semua fitur jejaring sosial yang mungkin Anda perlukan di blog WordPress Anda.wp-ultimate-sosial

Baca juga 8 WordPress plugin untuk mengintegrasikan sistem reduksi

Fitur utamanya adalah: beberapa ikon jejaring sosial, berbagi sosial yang memungkinkan siapa saja untuk melakukannya bagikan konten situs web Anda (artikel, halaman, gambar, media) di jejaring sosial populer (Facebook, Twitter, Linkedin, GooglePlus, pinterest, Digg, penyangga, Reddit, Tumblr, Stumbleupon, Xing, Weibo, VK, Delicious), koneksi ke situs web dengan kredensial media sosial Anda, penghitung untuk menampilkan jumlah pengikut Anda, dan pembagian situs web Anda dan lainnya.

Download | Demo | Hébergement Web

2. WP Slick Slider Image Carousel Pro

Jika Anda seorang pengikut setia suite Komposer Visual, menggunakan plugin WP Slick Slider adalah opsi yang perlu Anda pertimbangkan. Dengan hampir 100 templat yang telah ditentukan, Anda pasti akan menemukan apa yang Anda cari tanpa pengkodean apa pun.

Slick wp slider dan image carousel pro

Ini adalah opsi untuk mengambil sangat serius, terutama untuk pengguna Visual Composer. Fitur-fiturnya antara lain: tata letak yang sepenuhnya responsif dengan dukungan drag and drop, a shortcode, RTL dan dukungan multibahasa, desain yang indah dan banyak lagi

Download | Demo | Hébergement Web

3. Bilah Sisi Sosial WordPress

Nama plugin WordPress ini harus memberi tahu Anda kira-kira untuk apa itu. Tapi sepertinya plugin WordPress Social Sidebar akan membantu Anda membuat sidebar di situs web Anda untuk membantu Anda melakukannya cepat bagikan konten Anda di jejaring sosial yang berbeda.

Sidebar sosial Wordpress

Fungsionalitasnya antara lain: integrasi otomatis ke tema WordPress Anda, kemungkinan mengkonfigurasi dari atas ke bawah, kompatibilitas dengan beberapa browser baru dan modern, kemungkinan menempatkan sidebar Anda dari kiri ke kanan, di atas atau di bagian bawah halaman Anda, 4 set warna ditawarkan secara asli, tata letak responsif, dan banyak lagi.

Buat Toko Online Anda dengan mudah

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

Download Demo | Hébergement Web

Sumber daya lain yang direkomendasikan

Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.

Kesimpulan

Sini! Sekian untuk tutorial ini, saya harap ini memungkinkan Anda untuk membuat gambar "Retina" untuk blog WordPress Anda. 

Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar. Jangan ragu untuk melakukannya berbagi dengan teman-teman Anda di jejaring sosial favorit Anda

... 

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