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 WordPress, Berapa 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 »:
Untuk 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:
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.
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):
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:
- 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:
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 yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website 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.
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.
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 ini WordPress Plugin harus memberi tahu Anda secara kasar untuk apa yang terakhir. Tetapi kami akan mengatakan bahwa WordPress Plugin Bilah Sisi Sosial akan membantu Anda membuat bilah sisi di situs web Anda dengan tujuan membantu Anda melakukannya cepat bagikan konten Anda di jejaring sosial yang berbeda.
Fungsionalitasnya meliputi: integrasi otomatis dengan . Anda tema WordPress, kemampuan untuk mengonfigurasinya dari atas ke bawah, kompatibilitas dengan beberapa browser terbaru 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.
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.
- plugin 7 WordPress untuk membuat desain untuk produk Anda
- Plugin 4 WordPress untuk disimpan di DropBox
- Bagaimana cara menambahkan scroll tanpa batas ke blog WordPress
- Plugin 10 WordPress untuk menerima donasi di blog 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.
...
