Koleksi Ikon 3D Aplikasi Iphone – Volume 2

Ikon untuk aplikasi memiliki batasan-batasan khusus yang membuat desainnya unik. Sekarang, kita akan kembali melihat desain-desain ikon aplikasi dengan tampilan tiga dimensi. Pastikan untuk melihat desain ikon aplikasi 3D volume 1.

[hr]

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 Interface Tampilan Waktu dan Cuaca Terinspirasi Android

Sekarang kita akan coba mendesain display interface jam dan cuaca yang ada di HP Android. Kita akan menggunakan vektor shape dan layer styles untuk menghasilkan bentuk dasar interface. Kita juga akan menggambar manual dengan tool Brush dan Smudge untuk membuat ikon matahari tertutupi awan.

[hr]

Preview

Inilah tampilan interface yang akan kita peroleh.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Vektor Shape, Layer Style
  • Lama Pengerjaan: 30 menit

[hr]

Resource yang Dibutuhkan

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

[hr]

Tutorial

Langkah 1: Latar Display

Mulai dengan membuat sebuah shape rounded rectangle untuk dasar display dengan radius 10 px. Gunakan warna #242424. Tambahkan Inner Shadow, Inner Glow, Gradient Overlay, dan Outer Glow.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 2

Turunkan Fill layer ke 50%. Dengan cara ini, kita bisa membuatnya semi transparan. Latar di belakangnya akan terlihat sebagian.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 3

Buat lagi shape yang sama namun lebih pendek. Tambahkan Gradient Overlay.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Turunkan Fill layer ke 0%. Ini akan menjadikannya kilauan di bagian atas dasar display.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 4: Jam

Buat sebuah rounded rectangle dengan warna putih. Duplikasi (Ctrl + J) dan sembunyikan shape asli..

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 5

Aktifkan tool pen lalu klik dua titik paling bawah untuk menghapusnya.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 6

Alt-klik untuk mengubah kedua titik menjadi titik tajam dan menghasilkan garis lurud di bagian bawah shape.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 7

Geser garis ke atas sehingga setengah dari tinggi semula.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 8

Tambahkan Inner Shadow dan Gradient Overlay.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 9

Turunkan Fill layer ke 0%.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 10

Munculkan kembali shape asli yang menjadi latar jam.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 11

Ulangi proses yang sama untuk bagian bawah latar jam.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Seperti ini hasil yang kita peroleh.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 11

Simpan ketiga shape ke layer grup. Di CS6 tekan Ctrl + J untuk menduplikasinya. Di versi sebelumnya, Anda perlu menggesernya ke atas ikon New Layer. Simpan di bawah shape asli. Seleksi titik-titik paling atas dengan tool Direct Selection lalu geser ke atas 3 px. Ulangi juga pada titik paling bawah dengan menggesernya 3 px ke bawah.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 12

Ulangi kembali pada shape terakhir sehingga ada 3 lapis shape.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 13

Ctrl-klik shape terakhir.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 14

Buat layer baru dan simpan di belakang latar jam. Isi layer dengan hitam. Hilangkan seleksi dengan menekan Ctrl + D. Klik Filter > Blur > Gaussian Blur untuk menghaluskan bayangan.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 15

Ctrl-klik latar utama display.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 16

Klik ikon Add Layer Mask untuk menyembunyikan bayangan di luar latar display.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 17

Tambahkan teks untuk informasi jam dengan warna hitam.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 18

Tambahkan Gradient Overlay. Atur gradasi warnanya hitam-putih-hitam-putih dengan posisi setepat mungkin sehingga perubahan gradasi tepat berada di tengah teks.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Di gambar ini, titik warna yang saya gunakan dalam gradasi ini berada di posisi 0%, 44%, 48%, dan 100%.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 19

Tambahkan Inner Shadow dan Drop Shadow.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Ini akan memberi kesan teks menjorok ke dalam.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 20

Dengan tool Pencil, gambar garis hitam dan putih 1 px di layer terpisah tepat memotong teks.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 21

Turunkan Opacity kedua layer hingga diperoleh efek inset.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Tampilan di perbesaran 100%.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 22: Ikon Cuaca

Untuk memudahkan, kita sembunyikan dulu jam. Aktifkan tool brush, lalu load brush awan. Pastikan warna depan diisi dengan putih. Klik beberapa kali hingga diperoleh bentuk awan.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 23

Selanjutnya menggambar matahari. Buat shape dengan warna orange di belakang awan.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 24

Aktifkan tool Brush dengan Opacity rendah. Tambahkan layer mask lalu lukis bagian tengah bawah lingkaran dengan hitam.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 25

Tambahkan Inner Shadow, Inner Glow, dan Outer Glow. Inner Shadow menggunakan warna putih dengan mode Color Dodge untuk memperkuat efek kilauan bercahaya di dalam shape.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Di Blending Options, aktifkan Layer Mask Hides Effects agar Layer Style disembunyikan oleh layer mask.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 27

Lukis orange gelap di belakang matahari untuk membuat intinya semakin panas menyala.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 28

Lukis orange gelap di sekeliling matahari. Lukis juga garis-garis tipis dengan tool brush lembut.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 29

Gunakan tool Smudge untuk menggeser pixel ke luar menjauhi matahari dan menghasilkan sunflare.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 30

Lukis detail-detail lain yang diperlukan.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 31

Tampilkan jam. Simpan ikon matahari berawan di atas jam. Tambahkan informasi nama tempat dan tanggal. Beri Drop Shadow hitam pada teks agar lebih mudah dibaca.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

[hr]

Hasil Akhir

Berikut adalah tampilan display jam dan cuaca dengan gambar latar.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

[hr]

Download Link

[ilink style=”download” url=”http://psdfreemium.com/android-inspired-time-and-weather-display/”%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]

Koleksi Ikon 3D Aplikasi Iphone – Volume 1

Desain ikon iPhone masih relatif baru mengingat iPhone sendiri baru muncul tahun 2007. Namun, desain ini berkembang sangat pesat karena iPhone sangat laris dan konsep interfacenya ditiru banyak pihak. Berbeda dengan ikon aplikasi yang lebih bebas, ikon iPhone dibatasi oleh bidang rounded rectangle. Pembatasan ini memaksa desainer untuk lebih kreatif dalam peroses pembuatan ikon. Di artikel ini, kita akan melihat koleksi ikon iPhone dalam tampilan 3 dimensi.

Pastikan untuk melihat desain ikon aplikasi 3D volume 2.

[hr]

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 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]

Membuat Ikon Gambar Tangan dengan Cara Manual

Dalam tutorial ini, kita akan membuat ikon dari gambar tangan. Gambar tangan di sini berarti benar-benar gambar tangan secara manual, bukan hasil permainan efek filter. Tekniknya sederhana, menggambar dengan pensil di kertas biasa, proses scanning lalu sedikit editing di Photoshop.

[hr]

Preview

Ini adalah hasil akhir ikon yang akan kita peroleh.

Membuat Ikon Twitter Gambar Tangan secara Manual

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Adobe Photoshop
  • Alat yang Digunakan: Kertas putih, Scanner, Pensil HB, dan Pensil 2B
  • Teknik yang Dipelajari: Channel Alpha, Proses Scan
  • Lama Pengerjaan: 20 menit

[hr]

Tutorial

Langkah 1: Persiapan

Mulai dengan mencari logo twitter untuk referensi. Simpan gambar ke dalam satu file lalu cetak.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 2: Mulai Menggambar

Siapkan kertas putih kosong, pensil HB, dan pensil 2B. Secara manual, mulailah menggambar ikon. Anda bisa menggambar langsung atau menjiplak referensi yang telah kita siapkan. Jika menjiplak, saya sarankan Anda untuk menggambar di atas kaca. Tidak perlu alat khusus, kaca jendela juga cukup.

Jangan khawatir dengan detail. Tujuan kita memang menghasilkan gambar yang alami dan sangat mengesankan gambar tangan manual. Di bawah, saya juga menulis beberapa teks follow us on yang ternyata tidak digunakan dalam hasil akhir ikon ini.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 3

Ingat bahwa gambar ini bukan hasil akhir ikon. Kita masih akan mengeditnya di Photoshop. Anda bisa lihat di sini, gambar burung yang saya buat tidak seimbang dengan logo twitter. Namun, ini tidak menjadi masalah karena kita bisa menyesuaikan ukurannya di Photoshop.

Secara umum, gambar ini digambar dengan pensil HB. Untuk memberi kesan gradasi warna, bagian bawah digambar ulang dengan pensil 2B yang memberi hasil lebih gelap.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 4

Scan gambar dalam resolusi tertinggi. Pastikan untuk selalu melakukan proses scanning di resolusi tertinggi. Dalam proses scanning akan selalu ada penurunan kualitas. Mungkin ada goresan yang hilang, bagian yang kurang gelap, atau ada warna yang hilang. Resolusi tertinggi akan memaksimalkan hasil yang diperoleh. Selain itu, proses editing juga lebih mudah dilakukan di resolusi tinggi. Di bawah adalah hasil scan.

Membuat Ikon Twitter Gambar Tangan secara Manual

Anda bisa membandingkan tampilan hasil scan dalam tampilan 100% dan 25%. Dalam ukuran 100%, gambar terlihat buruk dan cacat. Namun, dalam tampilan lebih kecil terlihat cukup rapi.

Membuat Ikon Twitter Gambar Tangan secara Manual
Logo Twitter pada perbesaran 100%.
Membuat Ikon Twitter Gambar Tangan secara Manual
Gambar burung twitter pada perbesaran 100%.
Membuat Ikon Twitter Gambar Tangan secara Manual
Tampilan perbesaran 25%.

Langkah 5: Logo Twitter

Langkah selanjutnya adalah memperjelas goresan pensil. Seleksi logo twitter lalu tekan Ctrl + J untuk menduplikasinya ke layer baru. Tekan Ctrl + L untuk menjalankan perintah Levels. Geser panah hitam dan abu ke tengah hingga goresan pensil makin jelas.

Membuat Ikon Twitter Gambar Tangan secara Manual
Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 6

Buat file dengan ukuran 400 x 300 px. Ambil logo twitter hasil scan dan perkecil ukurannya. Seperti bisa Anda lihat di bawah, logo ini terlihat semakin jelas setelah diperkecil. Namun, garis luar logo terlihat kurang jelas.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 7

Kembali lagi ke gambar hasil scan. Seleksi garis terluar logo menggunakan tool lasso.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 8

Gunakan perintah Levels (Ctrl + L) untuk memperkuat kontras.

Membuat Ikon Twitter Gambar Tangan secara Manual

Di bawah, Anda bisa melihat perbandingan garis luar logo sebelum dan setelah proses pengeditan.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 9

Sekali lagi, simpan gambar logo ke atas file berukuran 400 x 300 px. Kali ini, garis luar logo terlihat lebih jelas.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 10: Burung

Lakukan proses yang sama untuk gambar burung. Seleksi burung, duplikasi ke layer baru, dan perjelas dengan perintah Levels (Ctrl + L).

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 11

Simpan gambar burung ke dalam file 400 x 300 px.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 12: Menyiapkan Transparansi Ikon

Ikon ini belum selesai. Di titik ini, ikon tidak transparan dan memiliki latar putih. Ada cara mudah untuk menghasilkan transparansi ikon ini, yaitu dengan channel alpha.

Buka panel Channels. Lihat terlebih dahulu channel Red, Green, dan Blue yang tersedia. Cari channel dengan kontras paling tinggi.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 13

Di antara ketiga channel ini, ternyata channel Blue paling kontras. Gandakan channel Blue dengan menariknya ke atas ikon New Channel. Balikkan warna channel dengan perintah Image > Adjustments > Invert (Ctrl + I). Saat ini, ikon akan berwarna putih sementara latarnya hitam.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 14

Tahan Ctrl lalu klik channel alpha untuk mengubahnya menjadi seleksi. Sembunyikan layer lain kecuali Background, buat layer baru lalu isi seleksi dengan hitam.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 15

Sembunyikan semua layer. Anda bisa melihat bahwa saat ini ikon kita sudah transparan.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 16: Menyimpan Ikon

Klik File > Save Image for Web (Ctrl + Shift + Alt + S). Pilih tipe file PNG-24 dan pastikan transparansi aktif.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 17

Seperti inilah tampilan ikon ketika disimpan di atas latar bertekstur.

Membuat Ikon Twitter Gambar Tangan secara Manual

Langkah 18: Mengubah Tipe Goresan

Ikon ini aslinya dibuat dengan pensil. Namun, kita bisa mengubahnya menjadi goresan ballpoint. Buat adjustment layer Solid Color berwarna biru. Tekan Ctrl + Alt + G untuk mengubahnya menjadi Clipping Mask.

Membuat Ikon Twitter Gambar Tangan secara Manual

[hr]

Hasil Akhir

Seperti Anda lihat, cara manual tidak akan pernah mati. Saat ini, Anda praktis hampir bisa melakukan semua hal secara digital. Kondisi ini membuat cara manual memiliki kesan yang lebih unik.

Membuat Ikon Twitter Gambar Tangan secara Manual

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2011/05/tutorial-ikon-gambar-tangan/tutorial-membuat-ikon-gambar-tangan.zip”%5DDownload File PSD[/ilink]