the-rolling-stones

Menggambar Logo The Rolling Stones dengan Adobe Illustrator

Tidak ada seorang pun yang tidak mengenal logo ikonik The Rolling Stones. Logo ini terinspirasi dari mulut Dewa Kali dan mulut lebar Mick Jagger. Dalam tutorial ini, Anda akan belajar cara menggunakan Tool Pen di Adobe Illustrator untuk menggambar ulang Hot Lips, logo The Rolling Stones.

Preview

Logo ikonik The Rolling Stones
Logo ikonik The Rolling Stones

Video Tutorial

Download

File AI (zip)

Menggambar Icon iOS untuk Aplikasi Kamera di Photoshop

Tutorial ini memperlihatkan cara menggambar ikon untuk aplikasi kamera di iOS menggunakan Photoshop. Ditulis eksklusif untuk Psdvault.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Menggambar Icon iOS untuk Aplikasi Kamera di Photoshop

[hr]

Sebagian Langkah dalam Tutorial

Di tutorial ini akan ditunjukkan cara menggunakan guide untuk penempatan objek secara akurat, menggambar highlight dan shadow dengan blend mode, dan membuat tampilan lensa realistik dengan gradasi dan foto.

Menggambar Icon iOS untuk Aplikasi Kamera di Photoshop
Menggambar Icon iOS untuk Aplikasi Kamera di Photoshop
Menggambar Icon iOS untuk Aplikasi Kamera di Photoshop
Menggambar Icon iOS untuk Aplikasi Kamera di Photoshop
Menggambar Icon iOS untuk Aplikasi Kamera di Photoshop
Menggambar Icon iOS untuk Aplikasi Kamera di Photoshop
Menggambar Icon iOS untuk Aplikasi Kamera di Photoshop
Menggambar Icon iOS untuk Aplikasi Kamera di Photoshop
Menggambar Icon iOS untuk Aplikasi Kamera di Photoshop

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Di tutorial ini, kita akan membuat sebuah ikon dengan tampilan tiga dimensi untuk aplikasi apple. Kita akan menggunakan template PSD gratis sehingga mempermudah proses desain.

[hr]

Preview

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Vektor Mask, Stroke
  • Lama Pengerjaan: 25 menit

[hr]

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

[hr]

Tutorial

Langkah 1

Pertama, ambil file template gratis dari All the sizes of iOS app icons. Buka file tersebut di Photoshop.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 2

Ambil tekstur kayu dari shutterstock. Anda juga bisa menggunakan alternatif gratis dari deviantart. Ikon kita ini akan terbuat dari kayu.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 3

Kita ingin membuat ikon berukuran 114 × 114 pixel. Klik kanan group layer tersebut dan pilih Duplicate ke file baru (New).

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple
Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 4

Kita tidak membutuhkan layer sample shape dan stripes. Geser keduanya ke atas ikon tempat sampah untuk menghapusnya.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 5

Sembunyikan group layer Apple’s Pre Supplied. Grup ini berisi efek glossy yang akan ditambahkan Apple pada setiap ikon.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Seperti inilah tampilan dasar ikon kita.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 6

Ubah warna dasar ikon menjadi coklat muda, sesuai dengan warna permukaan kulit kayu.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple
Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 7: Layer Mask

Seleksi path bentuk dasar ikon dengan tool Select.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 8

Tekan Ctrl + C untuk menduplikasi path. Aktifkan grup ikon lalu tekan Ctrl + V. Klik ikon Add Layer Mask untuk menambahkan vektor mask pada grup.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Dengan cara ini, apa pun yang kita buat di dalam grup –misalnya lukisan acak seperti di bawah– akan terbatasi di dalam bentuk ikon.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 9

Kita membutuhkan vektor mask, yaitu kotak yang kedua. Kotak pertama, yaitu layer mask pixel biasa, bisa kita buang. Ini akan sedikit menghemat memori dan memperkecil ukuran file.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple
Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 10

Untuk mempermudah, kita isi latar dengan warna. Tambahkan Adjustment Layer Solid Color di belakang ikon dengan warna orange muda. Klik ganda layer dan tambahkan Pattern Overlay dengan pola pixel pattern dari PSDfreemium.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple
Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 11

Ambil tekstur kayu dan simpan di atas bentuk dasar ikon. Ubah blend mode layer menjadi Multiply jika tekstur yang dihasilkan terasa kurang kuat.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 12

Ctrl-click bentuk dasar ikon untuk membuat seleksi berdasarkan pada ukurannya. Buat layer baru. Klik Edit > Stroke. Pilih warna hitam dengan ukuran 2 px.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple
Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 13

Haluskan dengan memberi Filter > Blur > Gaussian Blur.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 14

Turunkan Opacity layer.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 15

Tambahkan Adjustment Layer Levels dan geser ketiga parameter agar diperoleh tekstur yang lebih kuat.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple
Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 16: Memberi Efek Tiga Dimensi

Sekarang kita akan mengubah bentuk ikon yang datar menjadi tiga dimensi. Duplikasi path bentuk dasar ikon. Buat lagi duplikasi path yang sama dan geser ke atas. Untuk path yang terakhir, ubah mode path menjadi Subtract.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 17

Tambahkan adjustment layer Brightness/Contrast dan turunkan nilai Brightness.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple
Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 18

Buat layer baru dan ubah menjadi Clipping Mask dengan menekan Ctrl + Alt + G. Lukis hitam dengan tool Brush beropacity untuk menggelapkan bagian bawah ikon.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 19

Ulangi proses ini hingga kita peroleh bagian bawah yang gelap dan tampilan tiga dimensi yang realistik.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 20

Tambahkan lagi contrast pada ikon dengan menambahkan Adjustment Layer Levels.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Di bawah, Anda bisa melihat perbedaan sebelum dan setelah pemberian Levels.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple
Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 21: Bayangan Ikon

Untuk tampilan tiga dimensi yang realistik, tentu kita butuh bayangan. Ctrl-klik bentuk dasar ikon. Buat layer baru di paling bawah dan isi dengan hitam.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 22

Haluskan bayangan dengan memberinya Gaussian Blur.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 23

Geser layer beberapa pixel ke bawah. Turunkan Opacity layer.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 24

Duplikasi layer bayangan tadi. Beri lagi Gaussian Blur yang lebih besar. beri Opacity yang jauh lebih kecil untuk menghasilkan bayangan yang lebih lembut lagi.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple
Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 25

Mulai langkah ini, Anda sudah bisa mengganti tekstur dengan yang lain. Misalnya dengan tekstur beton seperti ini. Hasilnya akan tetap terlihat tiga dimensi.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 26

Untuk ilustrasi, saya tambahkan ikon Desaindigital yang terdiri dari beberapa shape berbeda warna. Semua layer shape tersimpan di layer terpisah dalam sebuah grup.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 27

Untuk efek emboss, saya tambahkan Layer Styles berikut.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple
Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple
Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Inilah hasil yang diperoleh.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 28: Efek Tambahan dari Apple

Untuk melihat tampilan akhirnya, aktifkan kembali grup Apple’s Pre-Supplied.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

[hr]

Hasil Akhir

Kita baru saja belajar cara membuat sebuah ikon dengan cara lebih mudah menggunakan template PSD yang tersedia gratis di internet. Di bawah adalah hasil akhir tutorial yang kita peroleh.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2013/03/tutorial-mendesain-ikon-app-apple/app-apple-desaindigital.zip”%5DDownload File PSD[/ilink]

Menggambar Pictogram di Adobe Illustrator (Video)

Kali ini, kita akan belajar cara menggambar pictogram –yaitu ikon simbol– sebuah jam di Adobe Illustrator yang terinspirasi oleh set ikon web vektor di Shutterstock. Dalam tutorial ini, kita akan belajar dasar penggunaan perintah Expand untuk memecah shape standar dan menggunakan Pathfinder untuk menggabungkan dan memotong beberapa shape.

Preview

Inilah tampilan pictogram yang akan diperoleh dalam video tutorial ini.

Tutorial Menggambar Pictogram di Adobe Illustrator

[hr]

Video Tutorial

Anda juga bisa melihat video ini di YouTube.

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2013/01/tutorial-video-pictogram-jam/pictogram-jam.zip”%5DDownload File AI[/ilink]

Mendesain Ikon Aplikasi Kamera untuk Launcher Android

Dalam tutorial ini, kita akan mencoba menggambar ikon aplikasi kamera untuk-launcher android. Kita akan menggunakan Photoshop CS6 dalam proses desain. Kita juga akan menggunakan aturan dari developer android agar ikon yang diperoleh sesuai dengan standar.

[hr]

Preview

Mendesain Ikon Kamera untuk-launcher Android

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Menengah, Mahir
  • Software yang Digunakan: Adobe Photoshop CS6
  • Teknik yang Dipelajari: Layer Style, Menggambar dengan tool Brush
  • Lama Pengerjaan: 45 menit

[hr]

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

[hr]

Sebelum Anda Memulai

Sebelum memulai tutorial ini, saya sarankan Anda untuk membaca terlebih dahulu artikel dan tutorial berikut karena menggunakan dasar teknik yang sama:

[hr]

Tutorial

Langkah 1: Guide Desain Resmi

Sebelum mulai, kita cari terlebih dahulu panduan desain ikon untuk-launcher android resmi dari situs developer android. Kita temukan bahwa file harus dalam format PNG 32-bit dengan ukuran 72 × 72 px untuk hdpi (240 dpi).

Mendesain Ikon Kamera untuk-launcher Android

Langkah 2: Persiapan

Buat file baru dengan ukuran 72 × 72 pixel dan latar putih.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 3

Untuk mempermudah proses desain, kita juga perlu menampilkan file dalam tampilan 100% di jendela baru.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 4

Perbesar tampilan jendela, sehingga ada dua tampilan, maksimum dan 100%.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 5: Bentuk Dasar Kamera

Buat shape persegi untuk bagian depan ikon kamera.

Mendesain Ikon Kamera untuk-launcher Android

Beri Gradient Overlay.

Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android

Langkah 6

Tambahkan titik dengan cara klik menggunakan tool Pen.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 7

Tambahkan titik lain di seluruh sisi. Total ada 4 titik baru, 2 di sisi atas dan 2 di sisi bawah.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 8

Geser keempat titik tadi sejauh 2 px ke bawah.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 9

Sebelum berlanjut, pastikan Anda telah mengaktifkan Snap Vector Tools di bagian Preferences (Ctrl + K).

Mendesain Ikon Kamera untuk-launcher Android

Langkah 10

Buat lagi sama yang sama tapi dengan kelengkungan berbeda untuk bagian belakang kamera. Gumakan warna yang lebih terang.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 11

Buat shape untuk di bagian tengah depan. beri Gradient Overlay dan Inner Shadow.

Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android

Langkah 12

Ctrl-klik bagian depan kamera. Buat layer baru dan lukis highight dan shadow menggunakan tool Brush lembut dengan Opacity rendah.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 13: Tombol

Buat sebuah persegi di bagian atas persegi.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 14

Tambahkan Gradient Overlay.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 15

Tambahkan titik di sisi tengahnya lalu tarik ke bawah.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 16

Buat shape untuk sisi belakangnya dengan warna lebih terang.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 17

Seleksi bagian depan tombol. Buat layer baru di belakang tombol. Isi seleksi dengan hitam.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 18

Haluskan dengan memberinya filter Gaussian Blur. Bagian ini akan menjadi bayangan tombol.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 19

Hapus bayangan yang tidak diperlukan.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 20

Buat lagi tombol-tombol lainnya dengan cara yang sama.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 21

Pada titik ini, Anda perlu tetap teliti memperhatikan agar setiap path berada tepat pada pixel. Jangan sampai ada setengah pixel agar hasilnya tetap tajam.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 22: Lensa

Mulai dengan membuat lingkaran gelap dan beri Gradient Ovelay.

Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android

Langkah 23

Buat lagi lingkaran lebih kecil. Tambahkan juga Gradient Overlay.

Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android

Langkah 24

Buat lingkaran dengan warna biru lalu tambah Gradient Overlay bertipe radial.

Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android

Langkah 25

Buat lingkaran hitam menutupi lensa.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 26

Klik Filter > Render > Lens Flare.

Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android

Langkah 27

Ubah blend mode layer ke Screen dan turunkan Opacity.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 28

Buat sebuah ellips di bagian atas lensa dan beri Gradient Overlay.

Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android

Langkah 29

Turunkan Opacity dan Fill layer.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 30

Buat lagi lingkaran lebih terang di belakang lensa. beri Gradient Overlay.

Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android

Langkah 31

Lagi, buat lingkaran lebih kecil dengan Gradient Overlay.

Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android

Langkah 32

Buat layer baru, simpan di atas shape lingkaran. Ubah menjadi Clipping Mask (Ctrl + Alt + G) lalu lukis highligh putih di dalam lingkaran dengan tool Brush ber-Opacity rendah.

Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android

Langkah 33

Ulang langkah tadi beberapa kali.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 34

Buat layer baru dan simpan di belakang lensa. Lukis bayangan lensa di badan kamera.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 35

Seleksi seluruh lesa kamera. Buat layer baru dan lukis hitam di pojok kiri atas untuk menggelapkan seluruh isi lensa

Mendesain Ikon Kamera untuk-launcher Android

Langkah 36: Lampu Blitz

Gambar sebuah rounded rectangle dengan radius 3 px di belakang lensa.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 37

Tambahkan shape gelap di bagian bawah. Ubah shape menjadi Clipping Mask.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 38

Buat lagi layer baru dan ubah menjadi Clipping Mask. Lukis bayangan hitam di sisi kanan shape dengan tool Brush ber-Opacity rendah.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 39

Lukis lebih banyak shadow dan highlight.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 40

Gambar rounded rectangle di bagian atas. Turunkan Fill layer hingga 0%.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 41

Tambahkan Outer Glow, Pattern Overlay, dan Gradient Overlay. Untuk Pattern Overlay, gunakan salah satu pola pixel gratis dari PSDfreemium.

Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android
Mendesain Ikon Kamera untuk-launcher Android

Langkah 42: Bayangan

Sembunyikan Background dengan cara klik ikon mata di depannya.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 43

Tekan Ctrl + Shift + C lalu Ctrl + Shift + V untuk menduplikasi seluruh kamera ke dalam satu layer. Ubah warna depan ke hitam. Tekan Ctrl +Shift + Del untuk mengisi kamera dengan warna hitam.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 44

Haluskan dengan memberi filter Gaussian Blur. Simpan bayangan di belakang kamera.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 45

Hapus bayangan yang ada di bagian atas.

Mendesain Ikon Kamera untuk-launcher Android

Seperti inilah tampilan bayangan yang kita peroleh.

Mendesain Ikon Kamera untuk-launcher Android

Langkah 46

File harus disimpan dalam format PNG-32 sebagaimana penjelasan dari developer android. Sekali lagi, sembunyikan Background. Klik File > Save for Web. Pilih PNG-32 dengan transparancy aktif.

Mendesain Ikon Kamera untuk-launcher Android

[hr]

Hasil Akhir

Di bawah adalah hasil akhir tutorial yang kita peroleh. Saya bukan desainer ikon. Jadi, jika ada yang salah dengan tutorial ini –terutama yang berkaitan dengan panduan desain aplikasi ikon android– silakan tuliskan di komentar. Saya hanya ingin berbagi pengetahuan saja.

Mendesain Ikon Kamera untuk-launcher Android

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2012/10/tutorial-ikon-kamera-launcher-android/camera%20tutorial.psd”%5DDownload File PSD[/ilink]

Mendesain Ikon Untuk Aplikasi iPhone

Yang menyenangkan dari Photoshop adalah Anda praktis bisa membuat apapun. Misalnya, dalam kasus ini, saya bisa mencoba mendesain ikon aplikasi iPhone. Secara umum, prosesnya tidak berbeda dengan desain ikon biasa. Yang membedakan hanyalah ukurannya. Tutorial ini ditulis ekslusif untuk Vandelay Design Blog.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Mendesain Ikon Untuk Aplikasi iPhone

[hr]

Sebagian Langkah dalam Tutorial

Seperti biasa, tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam desain ikon. Di bawah adalah beberapa langkah dalam tutorial.

Mendesain Ikon Untuk Aplikasi iPhone
Mendesain Ikon Untuk Aplikasi iPhone
Mendesain Ikon Untuk Aplikasi iPhone
Mendesain Ikon Untuk Aplikasi iPhone
Mendesain Ikon Untuk Aplikasi iPhone
Mendesain Ikon Untuk Aplikasi iPhone
Mendesain Ikon Untuk Aplikasi iPhone
Mendesain Ikon Untuk Aplikasi iPhone
Mendesain Ikon Untuk Aplikasi iPhone

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Menggambar Ikon Kentang Goreng dengan Photoshop

Tutorial ini adalah hasil kerja sama dengan salah satu desainer ikon lokal terbaik dari Bandung, Syarip Yunus. Syarip mendesain ikon ini sementara saya fokus pada penulisan tutorialnya. Semoga ada kesempatan lain untuk membuat tutorial bersamanya lagi. Tutorial ini ditulis ekslusif untuk Hongkiat.[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Menggambar Ikon Kentang Goreng dengan Photoshop

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam desain ikon. Di bawah adalah sebagian langkah dalam tutorial tersebut.

Menggambar Ikon Kentang Goreng dengan Photoshop
Menggambar Ikon Kentang Goreng dengan Photoshop
Menggambar Ikon Kentang Goreng dengan Photoshop
Menggambar Ikon Kentang Goreng dengan Photoshop
Menggambar Ikon Kentang Goreng dengan Photoshop
Menggambar Ikon Kentang Goreng dengan Photoshop
Menggambar Ikon Kentang Goreng dengan Photoshop
Menggambar Ikon Kentang Goreng dengan Photoshop

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Mendesain Ikon Apple iCloud

Layanan penyimpanan berbasis cloud terbaru dari Apple, iCloud, memiliki logo yang sederhana namun unik khas Apple. Ikon ini terbuat dari bahan dasar metalik dengan bentuk awan di dalamnya. Di tutorial ini, kita akan belajar membuatnya dengan Photoshop. Tutorial ini ditulis ekslusif untuk Hongkiat.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Mendesain Ikon Apple iCloud

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini sederhana dan cocok bagi para pemula. Di bawah adalah beberapa langkah dalam tutorial.

Mendesain Ikon Apple iCloud
Mendesain Ikon Apple iCloud
Mendesain Ikon Apple iCloud
Mendesain Ikon Apple iCloud

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Menggambar Ikon Speaker Memanfaatkan Layer Style

Dalam tutorial ini saya akan memperlihatkan cara menggambar sebuah ikon speaker di atas latar kayu. Ikon ini sangat sederhana, terbuat dari banyak bentuk lingkaran yang dikombinasikan dengan Layer Style.

[hr]

Preview

Menggambar Ikon Speaker Memanfaatkan Layer Style

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Menggambar Vektor, Layer Style
  • Lama Pengerjaan: 20 menit

[hr]

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

[hr]

Tutorial

Langkah 1

Buat sebuah shape lingkaran dengan warna #222222.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Klik ganda layer. Di kotak dialog Layer Style aktifkan Drop Shadow, Bevel and Emboss, dan Gradient Overlay dengan setting seperti di bawah.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Berikut adalah hasil yang diperoleh. Perhatikan bahwa dalam desain ini kita menggunakan sumber cahaya dari kanan atas. Ingat ini untuk memperoleh tampilan yang konsisten dan realistik.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 2

Gandakan shape lingkaran yang tadi kita buat dengan menekan Ctrl + J. Buang semua Layer Styles yang digunakan dengan menggeser ke atas ikon tempat sampah. Ubah warna lingkaran menjadi #464545. Lakukan proses transformasi dengan menekan Ctrl + T. Perkecil lingkaran hingga perbandingannya seperti terlihat di bawah.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 3

Beri Layer Style Bevel and Emboss dan Gradient Overlay.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Inilah hasil yang kita peroleh saat ini.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 3

Duplikasi kembali lingkaran dan ubah warnanya menjadi #d4d2c5. Perkecil ukuran lingkaran. Buang semua Layer Style.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Beri Inner Shadow, Inner Glow, Bevel and Emboss, dan Gradient Overlay.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Inilah hasil yang diperoleh.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 4

Sekali lagi, duplikasi lingkaran. Ubah warnanya ke #e3e1cf. Perkecil dan buang semua Layer Style.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Beri Drop Shadow, Inner Shadow, Bevel and Emboss, Gradient Overlay, Pattern Overlay, dan Stroke.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Dalam pilihan Pattern, gunakan pola pixel dari PSDfreemium.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Ini hasil yang diperoleh.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 5

Langkah selanjutnya adalah menggambar highlight dan shadow pada di bagian dalam speaker. Untuk ini, kita perlu menggambar secara manual. Buat seleksi segitiga menggunakan tool lasso polygon.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 6

Buat layer baru lalu isi seleksi dengan putih. Tekan Ctrl + Alt + G untuk mengubah layer menjadi Clipping Mask dan memasukkan highlight ke dalam shape lingkaran terakhir. Hapus seleksi dengan menekan Ctrl + D. Haluskan highlight dengan filter Gaussian Blur (Filter > Blur > Gaussian Blur).

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 7

Lanjutkan melukis highlight dan shadow hingga diperoleh hasil seperti di samping.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 8

Ingat bahwa sumber cahaya kita ada di kanan atas. Untuk memberi kesan bahwa area cekung, kita perlu memberi bayangan di sisi kanan atas.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 9

Turunkan Opacity bayangan hingga 20%.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 10

Buat lingkaran berwarna #191919 di bagian tengah speaker.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Beri Drop Shadow dan Gradient Overlay.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Gunakan gradasi radial dari putih ke hitam. Ketika kotak dialog ini aktif klik geser pada kanvas untuk menggeser pusat gradasi sedikit ke kanan atas.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 11

Buat layer baru lalu lukis highlight tambahan di atas lingkaran. Pastikan posisi highlight tidak tepat di tengah tapi sedikit di kanan atas, sesuai dengan posisi sumber cahaya.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 12: Baut

Tampilakn ruler dengan menekan Ctrl + R. Klik dan geser dari ruler ke atas kanvas untuk menambah guide. Simpan guide di tengah dan sisi terluar speaker.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 13

Gandakan lingkaran dasar speaker –yang kita buat di Langkah 1– dan ubah warnanya ke #5e5e5e.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 14

Tambahkan shape rounded di posisi jam 12. Di baris pilihan, atur mode path ke Intersect.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 15

Lakukan proses transformasi dan duplikasi dengan menekan Ctrl + Alt + T. Tahan Alt lalu geser titik pusat transformasi ke titik tengah speaker.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 16

Putar path 45°. Anda bisa melihat bahwa sekarang yang diputar adalah path baru bukan path asli.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 17

Sekarang tekan Ctrl + Shift + Alt + T. Shortcut ini akan mengulangi proses duplikasi pada path terpilih. Hasilnya kita memiliki path baru berjarak 45°.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 18

Beri Bevel and Emboss.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 19

Buat lingkaran kecil di atas shape yang tadi kita peroleh. Beri Layer Style Drop Shadow dan Gradient Overlay. Lingkaran ini akan menjadi baut speaker.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 20

Gandakan lingkaran ke atas shape yang lain.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 21

Aktifkan tool pencil dengan ukuran brush 1 px. Lukis tanda plus hitam di atas setiap baut.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Inilah hasil yang diperoleh.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 22

Aktifkan tool brush berukuran 2 px. Lukis highlight putih di sisi kanan atas tanda plus. Ingat, kita menyimpan highlight di sisi kanan atas sesuai dengan posisi sumber cahaya.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Hasil yang diperoleh.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 23

Buat shape baru terdiri dari dua buah lingkaran dengan pusat sama. Ubah mode path lingkaran terdalam menjadi Subtract. Hasilnya adalah bentuk cincin.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Klik ganda layer dan aktifkan Drp Shadow, Outer Glow, Bevel and Emboss, dan Gradient Overlay.

Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style
Menggambar Ikon Speaker Memanfaatkan Layer Style

Hasil yang diperoleh.

Menggambar Ikon Speaker Memanfaatkan Layer Style

Langkah 24: Latar

Ubah warna depan dan warna belakang menjadi #7a4e0d dan #66440c. Aktifkan latar, klik Filter > Texture > Fibers.

Menggambar Ikon Speaker Memanfaatkan Layer Style

[hr]

Hasil Akhir

Di bawah adalah bentuk speaker yang kita peroleh. Dalam prosesnya, kita memaksimalkan penggunaan Layer Style. Dengan cara ini, speaker bisa diperbesar atau diperkecil tanpa menurunkan kualitasnya.

Menggambar Ikon Speaker Memanfaatkan Layer Style

[hr]

Download Link

[ilink style=”download” url=”http://psdfreemium.com/speaker-icon/”%5DDownload File PSD[/ilink]

Menggambar Communicator Star Trek

Dalam tutorial ini, kita akan mendesain ikon Communicator, yaitu alat komunikasi yang digunakan dalam film seri Star Trek generasi pertama. Kita akan menggunakan fungsi vektor, Layer Styles, dan menggambar pencahayaan secara manual dengan tool brush untuk memperoleh tampilan yang realistis. Tutorial ini ditulis eksklusif untuk Psdtuts+.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Mendesain Skin Player MP3

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam proses desain ikon. Di bawah adalah beberapa langkah dalam tutorial.

Menggambar Communicator Star Trek
Menggambar Communicator Star Trek
Menggambar Communicator Star Trek
Menggambar Communicator Star Trek
Menggambar Communicator Star Trek
Menggambar Communicator Star Trek
Menggambar Communicator Star Trek

[hr]

Link Tutorial

Tutorial ini ditulis ekslusif untuk Psdtuts+.
[unordered_list style=”bullet”]

[/unordered_list]