Membuat icon Opera dengan Photoshop

Icon opera
Pada pembelajaran kali ini kita akan mencoba membuat icon dengan photoshop, kita akan membuat sebuah icon opera dengan menggunakan beberapa garis pen tool dan beberapa layer style.

Selain manipulasi gambar, photoshop juga bisa menjadi spesialis tersendiri untuk mendesain beberapa icon. Walaupun gambar yang akan kita desain berbentuk gambar bitmap, akan tetapi gambar tetap akan terlihat berkualitas jika kita mendesainnya dengan detail dengan ukuran tertentu.

Preview Desain

Berikut ini gambar desain yang akan kita hasilkan pada pembelajaran photoshop kali ini.

Membuat icon opera dengan photoshop

Detail Tutorial

  • Tingkat Kesulitan : Pemula
  • Program yang dipakai : Adobe Photoshop
  • Materi yang dipelajari : Penggunaan shape, mask layer dan beberapa style
  • Lama Pembuatan : 15 Menit

Tutorial

Langkah 1 : Membuat lembar kerja dan background

Buatlah sebuah lembar kerja baru berukuran 800 x 600 pixels dengan program desain Photoshop anda.

Membuat icon opera dengan photoshop

Selanjutnya buatlah sebuah layer baru (Ctrl + Shift + Alt + N) sehingga akan menghasilkan layer bernama “Layer 1″, isikan warna putih pada layer tersebut.

Membuat icon opera dengan photoshop

Beri layer style Gradient Overlay pada “Layer 1″, langkah ini kita akan membuat sebuah background sederhana dengan photoshop.

Membuat icon opera dengan photoshop

Langkah 2 : Membuat lingkaran icon

Dengan Ellipse tool, buatlah sebuah lingkaran tidak sempurna diatas “Layer 1″, isikan dengan warna merah (#d72a33).

Membuat icon opera dengan photoshop

Selanjutnya beri layer style Bevel and Emboss dan gradient overlay pada lingkaran tersebut, berikut struktur yang bisa anda lihat.

Membuat icon opera dengan photoshop

Membuat icon opera dengan photoshop

Tips PSD Desain :
Untuk memudahkan dalam pengolahan gambar, pastikan anda menggroup layer (Ctrl + G) sesuai dengan fungsinya.

Membuat icon opera dengan photoshop

Langkah 3 : Membuat lingkaran

Kembali buat sebuah lingkaran kecil di dalam lingkaran tersebut, sehingga membentuk pola “O” untuk Opera. Pastikan anda membuatnya dengan warna putih.

Membuat icon opera dengan photoshop

Langkah 4

Duplicate objek layer yang telah kita buat pada langkah ke 2 dengan menekan tombol (Ctrl + J) pada keyboard atau klik kanan duplicate layer, selanjutnya hapus layer style dengan mengklik kanan dan pilih Clear Layer Style.

Membuat icon opera dengan photoshop

Tempatkan objek tersebut dibawah layer shape yang ada layer stylenya, Atau posisikan layer tersebut ditempat paling bawah pada group. Masih dengan layer tersebut, tambahkan layer style seperti gambar berikut.

Membuat icon opera dengan photoshop

Membuat icon opera dengan photoshop

Selanjutnya seret layer tersebut ke posisi sedikit ke kiri.

Membuat icon opera dengan photoshop

Langkah 5 : Menyelaraskan kedua ujung lingkaran

Dengan Direct Selection tool, klik seret pada ujung-ujung path sehingga kedua lingkaran tersebut tampak menyatu.

Membuat icon opera dengan photoshop

Lakukan pada kedua ujung lingkaran.

Membuat icon opera dengan photoshop

Membuat icon opera dengan photoshop

Langkah 6 : Membuat bayangan

Buat sebuah bayangan “O” dengan Pen Tool photoshop. Pastikan anda membuatnya dibelakang layer yang kita buat pada langkah 3 dan perhatikan bahwa kita masih di dalam group yang sama, disini saya merename group saya menjadi Opera.

Membuat icon opera dengan photoshop

Tambahkan pula efek layer style Gradient overlaynya.

Membuat icon opera dengan photoshop

Langkah 7 : Membuat bayang opera

Selanjutnya kita akan membuat bayang pada objek opera tersebut, duplicate group “opera” Anda bisa merename menjadi “Opera Bayang.

Membuat icon opera dengan photoshop

Posisikan objek Opera bayang tersebut seperti gambar berikut, Anda bisa membuatnya dengan free transform (Ctrl + T)

Membuat icon opera dengan photoshop

Pada layer pallete, beri layer mask pada group opera bayang dengan menekan tombol Mask di bawah layer pallete.

Membuat icon opera dengan photoshop

Pastikan warna foreground hitam dan background putih, klik gradient tool dan gradient mask tersebut sehingga icon opera tersebut tambak seperti bayang.

Membuat icon opera dengan photoshop

Langkah 8 : Menambah teks

Beri teks Opera software dengan type tool dan buat bayangan seperti langkah diatas.

Membuat icon opera dengan photoshop

Hasil Desain

Berikut hasil desain yang telah kita kerjakan.

Membuat icon opera dengan photoshop

Anda juga bisa membuatnya dengan ukuran pas dan mengkonvertnya menjadi sebuah icon dengan plugin ICO Format plugin untuk membuat icon pavicon dengan photoshop, salam desain. :)

Like artikel kami jika anda rasa bermanfaat pada sosial media dibawah dan iklan agar saya lebih semangat dalam membuat tutorial dan jangan klik iklan kami jika anda rasa SPAM. Gabung juga di group PSDesain facebook.

Panggil saja saya Jaka, saya sangat suka dengan segala hal yang berbau Photoshop, termasuk darah pengunjung blog ini yang siap dijadikan tumbal untuk berbagi tutorial. Follow Twitter saya,@jakazulham.
  • Leo

    Sudah mulai masuk ke manipulasi 3D Jaka? :) Bagus loh, mirip seperti logo Opera aslinya.

    • http://psdesain.net/ Jaka Zulham

      Unyoba-nyoba aja :)
      Pemanfaatan layer style yang bagus bisa membuat gambar desain kita lebih oke dan tampak 3D :D

      • Leo Ari Wibowo

        Jaka, akun punyaku di blog psdesain tolong jadikan Author ya, jangan Contributor. Saya kesusahan menulis artikel kalau saya tidak bisa upload gambar di post.

        • http://psdesain.net/ Jaka Zulham

          OK, siip..
          Tapi tulisannya dipending dulu ya.. Jangan langsung di publish..

          Saya tunggu tulisan mas LEO berikutnya.

  • http://www.satublog.us Adi Wibowo

    wah bagus nih mas?
    saya belum bisa yang kayak gini.he….

    • http://psdesain.net/ Jaka Zulham

      Dicoba dulu gan Adi, :)
      Jangan lupa anda lapor jika bisa :D
      Hhehe..

  • Pradisz Wardhana

    Wah.. bagus nih Mas, hebat :D salam kenal yah..

    • http://psdesain.net/ Jaka Zulham

      Ayo, silahkan dicoba :)

  • http://lompoulu.blogspot.com Lompo Ulu

    Jaka, hasilnya mirip banget dengan logo aslinya.
    Ternyata begitu caranya menimbulkan efek bayang (efek 2.0)
    makasih atas ilmunya..

    • http://psdesain.net/ Jaka Zulham

      Sama-sama :)
      Efek 2.0 maksudnya apa ya???

      • PhotoshopPemula

        Maksudnya mas Ulu, kali angka nolnya ada 2 yg satu bayangannya haaa…..
        tapi jujur bagus banget gan jaka.
        thanks!

        • http://psdesain.net/ Jaka Zulham

          Ouu, efek bayangan bawah itu ya :D

          Thanks juga telah berkunjung :)

  • Guusn

    wah bagus sekali mas, jadi gak bosen dgn ikon standart. bisa posting tentang icon google chrome ?

    • http://psdesain.net/ Jaka Zulham

      Belum pernah coba sih..
      Tapi sepertinya susah :D
      Hhehe

  • Rudy Azhar

    Lebih gampang menggunakan CSS3 sepertinya daripada Photosop…he..he.h.e…..

    Tapi kelemahan CSS3 kalau di lihat di IE-7 ke bawah hasilnya bukan bulat tapi kotak…wkwkwkwkwk…

    • http://psdesain.net/ Jaka Zulham

      Master CSS nih sepertinya :)
      Hhehe,,
      Saya tetep mempertahankan desain dengan photoshop aja :)
      meski akan “sedikit” memperlambat load blog ini..

  • Miftakhudin

    Kunjungan perdana dan salam kenal mas…
    wach designya mantap sekali nih mas.
    Jadi pengen nyoba trik-triknya nih…..:D

    • http://psdesain.net/ Jaka Zulham

      Selamat datang…
      Dan semoga anda bisa belajar banyak disini :D

  • http://dukundesign.blogspot.com kholis kun

    tambah ngacir aja nih gan.. :D keren…keren..