Cara Membuat Logo Blog dengan Photoshop

Catatan Kang Yudiono – Logo merupakan salah satu hal yang membuat suatu blog unik. Gus Adit,  salah satu pembaca setia Blogodolar, memiliki beberapa blog dengan logo yang keren. Oleh karena itu, saya memintanya untuk membuat tulisan mengenai cara membuat logo. Berikut adalah tulisannya.

Banyak cara membuat logo blog, salah satunya dengan menggunakan Photoshop. Mungkin banyak di antara Anda yang sudah mengetahuinya, namun mungkin banyak pula yang sebaliknya. Jika Anda pada kondisi kedua, di bawah ini adalah langkah-langkah yang bisa membantu Anda membuat logo untuk blog Anda.

Sekadar informasi, saya menggunakan Adobe Photoshop 8.0. Jangan khawatir jika Anda memiliki versi Photoshop yang berbeda karena tool-tool yang digunakan tersedia pada Photoshop versi berapa pun.

  1. Buka Photoshop dan buat sebuah file baru dengan mengklik menu File » New (Ctrl+N).
  2. Pada jendela New, atur lebar (width) dan tinggi (height) sekitar 400 dan 100 pixels.  Pilih Resolusi 72 pixels/cm dan Color mode RGB 8 bit. Ukuran tersebut cukup bagus digunakan sebagai sebuah logo blog agar ukuran file yang dihasilkan tidak terlalu besar. Untuk background contents pilih White. Selanjutnya klik OK.
  3. New-Document

  4. Setelah lembar kerja Anda terbuat, kini saatnya membuat tulisan untuk logo. Untuk itu klik Horizontal Type Tool (berupa huruf T) pada toolbox di sebelah kiri jendela Photoshop.  Ubah warna foreground menjadi hijau (#008000).
  5. Ubah Foreground
    Klik pada lembar kerja dan ketik nama blog Anda. Pada contoh ini saya menamai blog saya dengan nama GLOSSY GREEN. Sesuai dengan warna tulisan logo dan efek glossy yang akan diberikan nantinya.

  6. Selanjutnya, masih pada layer tulisan, klik menu Layer » Layer Style » Blending Option untuk menambah style pada layer tulisan.
  7. Pada jendela Layer Style, pilih dan tandai opsi Drop Shadow untuk menambah efek bayangan. Kemudian atur setting sebagai berikut:
  8. Blend Mode: Multiply; Opacity: 75; Angle: 120, Distance: 3; Size: 4, selengkapnya lihat gambar.
    Drop-Shadow

  9. Selanjutnya, pilih dan tandai juga opsi Bevel and Emboss. Atur setting seperti berikut:
  10. Style: Inner Bevel;  Technique: Smooth, Depth: 100%; Direction: Up; Size: 2; Soften: 0; Angle: 120; Attitude: 30. Lihat gambar untuk setting selengkapnya.
    Bevel-and-Emboss

  11. Jika pengaturan sudah selesai, klik OK untuk menyimpan Layer Style.
  12. Selanjutnya, kita akan menambahkan sebuah gambar di sebelah nama blog dengan menggunakan Custom Shape Tool. Karena temanya kebetulan berwarna hijau, maka saya akan menambahkan sebuah gambar rumput menggunakan cutom shape tadi.
  13. Untuk itu, pilih Cutom Shape Tool CustomShapeTool Kemudian pada toolbar, klik tanda panah kecil pada shape dan pilih Grass 2.
    Custom-Shape-Grass-2
  14. Buat sebuah layer baru dengan mengklik menu Layer » New » Layer (Shift+Ctrl+N) dan beri nama Rumput agar mudah mengenalinya. Kemudian gambar Shape grass tadi pada layer baru tersebut di sebelah kiri nama blog.
  15. Shape Rumput

  16. Selanjutnya, berikan style pada layer Rumput dengan style yang sama pada layer nama blog. Seperti pada langkah 4 sampai 7.
  17. Setelah selesai mengatur Layer Style, kini seleksi layer shape Rumput dengan cara melakukan Ctrl+Klik layer tulisan pada layerbox.
  18. Seleksi Layer
    Lakukan seleksi pula pada layer nama blog dengan cara melakukan Ctrl+Shift+Klik. Hingga kedua layer tersebut terseleksi seperti gambar berikut:
    Hasil Seleksi Layer

  19. Selanjutnya, buat sebuah layer baru dengan mengklik menu Layer » New » Layer (Shift+Ctrl+N) dan beri nama layer tersebut dengan nama Glossy  untuk lebih memudahkan kita mengingat fungsi layer tersebut, yaitu memberi efek Glossy.
  20. Setelah itu, pilih Paint Bucket pada toolbox Paint Bucket Tool dan pastikan warna foreground adalah putih (#FFFFFF).
  21. Jika sudah, masih menggunakan Paint Bucket, klik pada lembar kerja Anda. Maka warna nama blog dan gambar rumput akan berubah menjadi putih.
  22. Kemudian, pilih Eliptical Marquee Tool Eliptical Marquee Tool pada toolbox dan buat seleksi pada area tulisan seperti gambar di bawah.
  23. Seleksi Dengan Eliptical Marquee Tool
    Jika sudah, klik kanan pilih pada hasil seleksi dan pilih Select Inverse atau Anda bisa menekan tombol Ctrl+Shift+i pada keyboard. Selanjutnya tekan tombol Delete pada keyboard. Terkahir tekan tombol Ctrl+D untuk menghilangkan seleksi. Hasil dari langkah tadi seperti gambar di bawah.
    Hasil Inverse Seleksi

  24. Setelah itu, masih di layer Glossy, ubah layer Opacity menjadi 15% dengan cara mengklik tanda panah kecil pada Opacity yang terletak di Layer Box.
  25. Layer Opacity
    Langkah ini bertujuan untuk memberikan effek glossy pada tulisan.

  26. Selanjutnya, Anda bisa juga menambahkan tag line di bawah nama blog tadi dengan menggunakan Horizontal Type Tool.
  27. Tag line

  28. Setelah Anda selesai menambahkan tag line atau gambar, selanjutnya simpan gambar tersebut ke format PNG agar bisa digunakan pada blog. Sebelum minyimpan hilangkan dulu layer background agar warna latar dari logo Anda transparan agar bisa dipasang pada header dengan warna latar apapun. Cara menghapusnya atau menyembunyikannya dengan mengklik gambar mata di sebelah layer background pada layer box.
  29. Hide Background

  30. Jika warna latar sudah transparan, klik menu File » Save for Web (Alt+Shift+Ctrl+S). Pada jendela Save for Web, ubah preset di sebelah kanan atas jendela menjadi PNG-24 dengan mengaktifkan Transparency, seperti gambar di bawah.
  31. Save Preset

  32. Terakhir klik tombol Save dan berikan nama yang Anda inginkan. Hasil dari logo diatas kira-kira akan seperti gambar dibawah ini
  33. Hasil Akhir

Kini Anda sudah mempunyai logo yang cukup cantik untuk blog Anda. Anda bisa menambahkan kreasi Anda sendiri atau memakai warna lain pada logo tersebut agar sesuai dengan warna dominan blog Anda.

Sekian tutorial cara membuat logo sederhana dengan menggunakan Photoshop. Semoga bermanfaat dan selamat mencoba!

Tentang Penulis:

Gus Adit adalah blogger asal Bali pengelola blog Dunia Komputer. Blog alumnus Bahasa dan Sastra Inggris Universitas Udayana ini berisi tips dan berita seputar komputer dan internet. Simak salah satu artikel terpopulernya Download Google Chrome 5.0 Terbaru.

Postingan Terkait

Mau 6 ebook GRATIS mengenai Make Money Blogging, Adsense, dan SEO?

  • Silakan berlangganan Blogodolar Tips & News sehingga Anda bisa mendownload keenam ebook tersebut melalui link yang muncul di akhir postingan.
  • Anda juga akan mendapatkan tips ngeblog, strategi ngeblog, dan info-info menarik seputar make money blogging.
  • Caranya mudah dan 100 % gratis yaitu dengan mengetikkan dan mengirimkan alamat email Anda di bawah ini. Jangan lupa aktivasi berlangganan dengan mengklik link yang dikirim ke email Anda. Klik di sini untuk melihat cara aktivasi tersebut.

22 Responses to “Cara Membuat Logo Blog dengan Photoshop”

  1. Saya juga berminat untuk membuat logo blog jerawat, namun sampai saat ini belum terlaksana.
    Terimakasih Gus Adit.

    [Reply]

  2. Cuma satu kata yang bisa saya bilang : “Keren…”
    Postingan terbaru Nasir………………Eksperimen- Trafik Tanpa Komentar Terbaru dan Top KomentatorMy ComLuv Profile

    [Reply]

  3. Keren banget emang kalo sotosop gak perlu ditanyain lagi… :P lebih lagi di dukung dengan fasilitas save format web-nya yang gak nahan. Btw kok linknya Sotosop gak ada ya kang? Hehehe… Pengen cari yang bwt windows 7 gk nemu2… @_@
    Postingan terbaru DG………………Creating Blogger Comment Box like WordPressMy ComLuv Profile

    [Reply]

  4. Hehehe..Kang Yudi rupanya jago cotoshop juga..ups salah maksud saya.. photoshop .Tapi tutorialnya sangat membantu sekali.Trims deh
    Postingan terbaru blogpopuler………………Foto Exclusive Sara Carbonero Pacar Iker CasillasMy ComLuv Profile

    [Reply]

  5. keren kang….
    tapi cara pasangnya di header gmana, ane masih belom ngerti
    ane pingin logo seperti blogodolar yg simpel
    Postingan terbaru abang haris………………Akun Di Freehostia Aktif KembaliMy ComLuv Profile

    [Reply]

    Kang Yudiono Reply:

    Pasangnya pake kode img src bang.
    Coba saja lihat di HTML postingan Bang Haris yang ada gambarnya.
    Format HTML-nya seperti pada gambar postingan tersebut.
    Postingan terbaru Kang Yudiono………………Cara Membuat Logo Blog dengan PhotoshopMy ComLuv Profile

    [Reply]

  6. Belajar dasar photoshop dari artikel ini saja, kemarin untuk buat yang menggunakan aplikasi photoshop selalu minta tolong sama teman,,,,
    Postingan terbaru ago………………Jasa Ketik OnlineMy ComLuv Profile

    [Reply]

  7. Enak nich, tutorial step by step.
    akan saya pelajari dengan pelan2, maklum belum pernah main photoshop
    terima kasih mas tipnya
    salam hangat dari Surabaya
    Postingan terbaru BlogCamp………………nDa or NokMy ComLuv Profile

    [Reply]

  8. sepertinya perlu saya install lagi photoshop di pc…skrg cuma pakai CorelDraw, saya save tutorialnya Kang & Gus Adit..terimakasih.
    Postingan terbaru dJumTKS Weblog………………Calotropis WordPress Themes dengan banyak PilihanMy ComLuv Profile

    [Reply]

  9. salam kenal mas…
    kalau ada waktu di tunggu kunjungan baliknya ya..
    jangan lupa berkomentar di blog saya :D

    [Reply]

  10. Aha… jadi gitu toh caranya bikin efek Glossy di Photoshop. Segera dipraktekkan, dan semoga bisa diterapkan di blog saya.

    Terima kasih bli Gus Adit dan Kang Yudiono.
    Postingan terbaru budiastawa………………Membuat Form Survey- Polling- dan Quiz Google DocsMy ComLuv Profile

    [Reply]

  11. dari dulu saya pengen bikin logo, tapi sudah lupa cara pake corel, apalagi sotoshop yang sangat jarang saya jamah, artikel ini saya bookmark dulu untuk saya coba ntar y pak…. :)

    [Reply]

  12. dari dulu saya pengen moles image yang saya punya pake photoshop
    step by step post kali ini sangat membantu
    thx gus Adit dan kang Yudi dah berbagi
    Postingan terbaru BlogMixOnline………………Mau punya hosting dengan Disk space 1 GB dengan Unlimited Bandwith DomainCOM My ComLuv Profile

    [Reply]

  13. Tutorialnya keren, tapi sayangnya sy gk bsa photoshop, biasa cman pake sothink logo maker klo buat logo,
    Postingan terbaru Daun Muda………………Resize Foto Sebelum Upload ke FacebookMy ComLuv Profile

    [Reply]

  14. mantap juga logonya, kalau sepet mau coba bikin deh, and terima kasih bos atas infonya…
    Postingan terbaru AINUL………………BATERAI KOCOK- TEROBOSAN TERBARU DARI BROTHER INDUSTRIESMy ComLuv Profile

    [Reply]

  15. tutorial seperti ini sangat membantu bloger yang gaptek design seperti saya, saya bookmark dulu deh
    Postingan terbaru imadewira………………Prediksi MotoGP ASMy ComLuv Profile

    [Reply]

  16. akhirnya muncul juga nih tentang biking banner. terima kasih banyak mau coba-coba dulu

    [Reply]

  17. mau coba dulu..tks u infonya

    [Reply]

  18. kalau saya logo saya buat untuk favicon juga kang…. :) )
    Postingan terbaru ghe………………Komodo disukai pria!!!My ComLuv Profile

    [Reply]

  19. belum berhasil nihh… tapi, bagus, keren artikelnya…
    Postingan terbaru daengrompa………………Coto Rasa IndomieMy ComLuv Profile

    [Reply]

Leave a Reply

CommentLuv Enabled

Link Ke Postingan Ini:

  1. Mencoba Logo Blog Yang Baru | harisahmad.com
  2. 5 Postingan Terpopuler Juli 2010