Edit Logo Wordpress Menggunakan Photoshop

Pertama-tama kita akan belajar mengedit tampilan logo Wordpress khususnya yang terdapat pada halaman Dashboard. Untuk lebih jelasnya, lihat gambar berikut.

Gambar 3.1. Letak Logo Wordpress pada Halaman Dashboard

Setelah menemukan logo tersebut, kita akan memulai dengan proses pengeditan menggunakan program Adobe Photoshop. Di sini kita akan mengedit file logo-ghost.png yang terletak pada folder <drive hard disk>:\<folder instalasi xampp>\htdocs\wordpress\wp-admin\images. Pastikan untuk mem-backup terlebih dahulu file tersebut jika sewaktu-waktu ingin dikembalikan seperti semua. Kalau sudah, simak dan praktekkan langkah-langkahnya berikut ini:

1. Luncurkan Adobe Photoshop CS3 terlebih dahulu.

2. Klik menu File > Open.

Gambar 3.2. Mengklik Menu File > Open

3. Pada kotak dialog Open, buka folder <drive hard disk>:\<folder instalasi xampp>\htdocs\wordpress\wp-admin\images.

4. Pilih file logo-ghost.png.

Gambar 3.3. Memilih File Logo-ghost.png

5. Klik tombol Open sesudahnya.

6. Beberapa saat setelah itu, jendela dokumen atau kanvas file logo-ghost.png akan terbuka.

Gambar 3.4. Tampilan Jendela Dokumen Logo-ghost.png

7. Aktifkan Zoom Tool pada Toolbox.

8. Perbesar tampilan gambar (zoom-in) hingga 600%.

Gambar 3.5. Memperbesar Tampilan Gambar Hingga 600%

9. Jika sudah, klik menu Image > Mode > RGB Color.

Gambar 3.6. Mengklik Menu Image > Mode > RGB Color

10. Lantas, klik Elliptical Marquee Tool di Toolbox.

11. Lakukan pengaturan pada Option bar seperti berikut:

· Ikon New selection : aktif.

· Feather: 0 px.

· Kotak cek Anti-alias: aktif.

· Style: Fixed Size.

· Width: 30 px.

· Height: 31 px.

Gambar 3.7. Pengaturan Rectangular Marquee Tool pada Option Bar

12. Setelah itu, buatlah bidang seleksi di dalam kanvas.

13. Atur posisi bidang seleksi tepat di tengah-tengah kanvas hingga mengelilingi lingkaran huruf W menggunakan metode klik dan drag.

Gambar 3.8. Mengatur Posisi Bidang Seleksi

14. Gandakan bidang seleksi tersebut dengan menekan tombol shortcut Ctrl+J.

Gambar 3.9. Menggandakan Layer Background menjadi Layer 1 Menggunakan Tombol Shortcut Ctrl+J

15. Kalau sudah, pilih menu Layer > Layer Style > Bevel and Emboss.

Gambar 3.10. Memilih Menu Layer > Layer Style > Bevel and Emboss

16. Selanjutnya kotak dialog Layer Style dimunculkan.

17. Masukkan angka “15” dan “5” ke dalam kotak teks yang ada di sisi kanan slider Size dan Soften pada bagian Structure.

Gambar 3.11. Memasukkan Angka “15” dan “5” pada Kotak Teks Size dan Soften

18. Lanjutkan dengan mengklik dan mengaktifkan kotak cek Color Overlay dari dalam sidebar Style yang ada di sisi kiri kotak dialog.

19. Ubah Blend Mode: Overlay dan Opacity menjadi 100%.

Gambar 3.12. Pengaturan Opsi Blend Mode dan Opacity

20. Lantas, klik kotak warna yang ada di sisi kanan kotak kombo Blend Mode.

21. Pada kotak dialog Select overlay color, ketikkan “baff00” ke dalam kotak teks #.

Gambar 3.13. Mengetikkan “baff00” ke dalam Kotak Teks # pada Kotak Dialog Select Overlay Color

22. Akhiri dengan mengklik tombol OK.

23. Tutup kotak dialog Layer Style dengan menekan tombol OK.

24. Hasilnya akan tampak seperti pada gambar di bawah ini.

Gambar 3.14. Hasil yang tampak pada Kanvas dan Panel Layers

25. Pilih menu Layer > Flatten Image.

Gambar 3.15. Memilih Menu Layer > Flatten Image

26. Hasilnya, semua gambar dan layer disatukan menjadi satu buah gambar dalam layer Background.

Gambar 3.16. Tampilan pada Panel Layer

27. Kemudian, pilih menu Image > Mode > Indexed Color.

Gambar 3.17. Memilih Menu Image > Mode > Indexed Color

28. Pada kotak dialog pertanyaan “Merge layers?”, pilih tombol OK.

Gambar 3.18. Tampilan Kotak Dialog Pertanyaan “Merge Layers?”

29. Dalam kotak dialog Indexed Color, pastikan Anda memilih opsi Web pada kotak kombo Forced.

Gambar 3.19. Tampilan Pengaturan dalam Kotak Dialog Indexed Color

30. Klik tombol OK untuk mengakhiri.

31. Hasilnya, layer Background pada panel Layers diubah menjadi layer indeks (Index).

Gambar 3.20. Layer Index dalam Panel Layers

32. Simpan kreasi tersebut dengan memilih menu File > Save, atau tekan tombol shortcut Ctrl+S pada keyboard.

Sekarang, buka halaman Dashboard Wordpress menggunakan browser Internet lalu refresh atau reload halaman tersebut untuk melihat perubahan yang terjadi. Secara otomatis, logo Wordpress yang terdapat di pojok kiri-bawah berubah sesuai dengan kreasi yang Anda buat.

Gambar 3.21. Tampilan Perubahan Logo Wordpress dari dalam Halaman Dashboard