Mendesain Ikon Twitter 32×32 px — Pixel Perfect

Dalam tutorial ini, Anda akan mempelajari proses pembuatan ikon twitter berukuran 32×32 px berdetail tinggi. Proses pembuatan ikon kecil seperti ini tidaklah sulit, yang sangat diperlukan adalah kesabaran karena Anda akan bekerja dengan pixel yang ukurannya hanya sebesar debu.

[hr]

Preview

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Program yang Digunakan: Adobe Photoshop
  • Materi Yang Dipelajari: Menggambar vektor, Layer Style
  • Lama Pengerjaan: 15 menit.

[hr]

Tips Mendesain Ikon Kecil

Mendesain ikon memerlukan ketelitian yang sangat tinggi karena kita bekerja dengan setiap pixel, satu per satu. Dalam proses ini, akan sangat membantu jika Anda bisa melihat gambar dalam perbesaran paling tinggi dan dalam ukuran 100%. Klik Window Arrange > New Window for File Name. Geser baris judul salah satu file hingga lepas dari jendela aplikasi utama Photoshop. Tekan Ctrl + 1 untuk melihat pada perbesaran 100% dan Ctrl + 0 untuk melihat pada perbesaran maksimal.

Dalam gambar di bawah, Anda bisa melihat setiap pixel dengan jelas pada perbesaran maksimal dan tampilan ikon dalam perbesaran 100%.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

[hr]

Tutorial

Langkah 1: Latar Ikon

Buat file baru berukuran 32×32 px. Buat rounded rectangle berukuran 24 x 24 px dengan Radius: 2 px. Untuk membantu mengukur, gunakan panel Info.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

Anda bisa memastikan ukuran yang ditampilkan di panel Info dalam satuan pixel dengan membuka menu panel dan pilih Panel Options lalu pilih Ruler Units: Pixels.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel
Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

Langkah 2

Beri Layer Style Gradient Overlay dan Stroke.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel
Mendesain Ikon Twitter 32x32 px -- Perfect Pixel
Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

Langkah 3

Buat shape persegi di tengah rounded rectangle dengan ukuran 22 x22 px. Turunkan Fill layer ke 0%.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

Beri Stroke berikut.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

Langkah 4

Buat shape ellipse di bagian atas ikon. Ambil rounded rectangle yang tadi kita buat dan atur modenya ke Intersect. Turunkan Fill ke 0%.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

Beri Gradient Overlay.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel
Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

Langkah 5: T untuk Twitter

Aktifkan tool pen. Buat shape membentuk logo twitter. Prosesnya sederhana, Anda bisa menjiplak logo twitter dari google.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

Langkah 6

Sekarang adalah bagian terpenting dalam desain ikon. Geser secara manual setiap titik path hingga diperoleh bentuk yang tajam. Jika Anda melewatkan tahap ini, ikon yang diperoleh akan buram.

Di bawah, Anda bisa melihat path logo twitter sebelum dan setelah proses editing.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel
Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

Langkah 7

Beri sedikit Drop Shadow untuk menambah kontras logo dengan latar.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel
Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

Langkah 8

Klik File > Save for Web atau Ctrl + Shift + Alt + S untuk menyimpan ikon ke format web. Pilih tipe file PNG-24 dengan mengaktifkan transparansi.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

[hr]

Hasil Akhir

Di bawah adalah hasil akhir ikon yang kita peroleh. Ikon ini transparan dan bisa disimpan di atas berbagai macam latar. Dalam contoh di bawah, saya juga menggunakan pola Pixel Patterns dari PSDfreemium di latar.

Saya harap Anda belajar teknik baru di tutorial ini. Jika menyukai tutorial ini, jangan lupa untuk ikut menyebarkan melalui tombol share atau like di bawah. Tentu saja, saya harap Anda juga mengikuti saya di twitter.

Mendesain Ikon Twitter 32x32 px -- Perfect Pixel

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2011/04/tutorial-ikon-twitter-pixel-perfect/twitter.zip”%5DDownload File PSD[/ilink] (8,73 KB)

Menggambar Ikon Bola Dunia dengan Photoshop

Dalam tutorial ini, saya akan menunjukkan cara menggambar ikon bola dunia menggunakan Photoshop. Tutorial ini menggunakan teknik Photoshop dasar dan permainan layer styles. Klik di sini untuk melihat tutorial secara lengkap.

[hr]

Preview

Di bawah adalah gambar akhir ikon bola dunia yang akan dihasilkan.

Tutorial Menggambar Ikon Bola Dunia dengan Photoshop

[hr]

Detail Tutorial

Berikut adalah sebagian langkah yang dilakukan dalam pembuatan ikon bola dunia.

Tutorial Menggambar Ikon Bola Dunia dengan Photoshop
Tutorial Menggambar Ikon Bola Dunia dengan Photoshop
Tutorial Menggambar Ikon Bola Dunia dengan Photoshop
Tutorial Menggambar Ikon Bola Dunia dengan Photoshop
Tutorial Menggambar Ikon Bola Dunia dengan Photoshop

[hr]

Tutorial Ekslusif

Seperti Anda ketahui, tutorial ini ditulis ekslusif untuk PV.MGarage dan tidak boleh ditulis ulang atau diterjemahkan. Silakan menuju ke halaman tutorial untuk mempelajarinya secara lengkap.

Membuat Tombol Download Glossy Berwarna Cerah (Plus Set Tombol Gratis)

Dalam tutorial ini, saya akan memperlihatkan pembuatan tombol download dengan tema glossy dan tampilan 3 dimensi. Tutorial ini akan membahas secara lengkap hingga ke pembuatan gambar transparan dalam format PNG-24. Semua elemen dalam tombol ini dibuat dari vector shape, ini membuat tombol bisa ditransformasi ke ukuran berapa pun tanpa menurunkan kualitasnya. Karena desain ini untuk web, kita akan bekerja dengan sangat akurat hingga ke detail 1 pixel. Semua ini diperlukan untuk mencapai desain yang pixel perfect.

[hr]

Preview

Sebelum mulai, lihat terlebih dahulu tombol download yang akan kita buat. Terlihat menarik? Lanjutkan dengan mengikuti tutorial di bawah.

Membuat Tombol Download Glossy Berwarna Cerah

[hr]

Detail Tutorial:

  • Tingkat Kesulitan: Pemula.
  • Software yang Digunakan: Adobe Photoshop.
  • Materi yang Dibahas: Penggunaan Layer Style, Proses Transformasi, Menggambar Shape Vektor.
  • Lama Pengerjaan: 10 menit.

[hr]

Tutorial

Langkah 1: Bentuk dasar tombol

Aktifkan tool rounded rectangle, pilih radius 7 px lalu buat shape persegi seperti di bawah. Beri layer shape ini base. Saya menggunakan warna biru muda di sini, Anda bisa menggunakan warna apapun yang Anda suka. Tidak masalah. Kita bisa mengubahnya nanti.

Tambahkan layer style Gradient Overlay dengan setting seperti di bawah. Style ini akan memberi kesan menggelembung pada shape.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 2

Di dalam shape base tombol, buat lagi sebuah rounded rectangle kali ini dengan radius 5 px. Ubah fill layer ke 0%. Beri stroke berupa gradasi dari abu-abu ke putih, set blend mode ke Screen untuk mempertahankan hanya warna putih di bagian atas. Stroke seperti ini memberi efek sedikit bevel di bagian dalam tombol.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 3: Refleksi

Gandakan layer shape base lalu secara manual tambahkan path berbentuk gelombang. Pilih intersect path untuk memotong kedua path. Ubah fill ke 0%. Lihat gambar di bawah untuk referensi.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 4: Ikon download

Buat sebuah shape lingkaran di sisi kiri tombol. Ubah Fill ke 0% dan Opacity layer 80%. Beri layer style

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 5

Di dalam shape lingkaran tadi, buat lagi sebuah shape lingkaran dan beri layer style Gradient Overlay dengan tipe radial. Klik dan geser pada gambar untuk menggeser pusat gradasi agar tidak tepat di tengah-tengah lingkaran.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 6

Aktifkan tool custom shape dan dari daftar shape pilih salah satu shape panah. Buat shape panah berwarna hitam di tengah lingkaran. Ubah fill ke 11% lalu tambahkan layer style Bevel and Emboss dan Stroke. Bevel and Emboss akan memberikan efek emboss atau cekung ke dalam sementara Stroke akan memperkuat highlight di bagian bawah dalam cekungan dan memperkuat kesan 3 dimensi.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 7: Teks DOWNLOAD

Beri teks DOWNLOAD ke atas tombol. DI sini saya menggunakan font Arial Rounded karena terlihat menyatu dengan bentuk tombol. Teks besar biasanya akan lebih renggang dan ini tidak terlihat bagus ketika dibaca, ini salah satu konsep dasar dalam tipografi. Buka panel Character lalu perkecil tracking karakter hingga -25. Tambahkan layer styles Bevel and Emboss dan Gradient Over bertipe Gradient untuk memberi kesan teks cembung ke dalam.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 8: Menambah pita

Sekarang kita menambahkan pita yang bisa diisi dengan keterangan singkat. Buat shape berbentuk persegi. Dengan tool pen klik titik pojok kiri bawah untuk menghapusnya dan menghasilkan bentuk segitiga. Gandakan path segitiga, geser lima pixel ke kanan dan lima pixel ke atas. Pilih subtract path untuk mengurangi path sebelumnya.

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 9

Tambahkan layer style Gradient Overlay bertipe radial. Geser posisi gradasi.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 10

Zoom lebih dekat. Buat dua garis di sisi terluar pita dengan pensil 1 px berwarna putih. Tambahkan keterangan misalnya FREE dan putar 45 derajat. Simpan teks ke atas pita. Karena teks ini sangat kecil, agar mudah dibaca kita perlu memperbesar nilai tracking melalui panel Character.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 11

Saat ini, pita terlihat melayang. Buat layer baru di antara pita dan tombol. Buat garis hitam menggunakan brush lembut. Lakukan proses transformasi, klik kanan dan pilih Warp. Geser kotak tengah hingga bagian tengah garis terlihat melengkung. Turunkan opacuty layer ke 30%. Dengan tool eraser hapus bagian bayangan yang tidak dibutuhkan.

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 12

Buat seleksi kotak di belakang pita dan isi dengan warna abu-abu gelap. Bagian ini menjadi bagian belakang pita.

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 13: Bayangan tombol

Buat layer baru seleksi di bagian paling bawah. Buat seleksi ellipse memanjang di bawah tombol. Isi dengan hitam dan beri filter Gaussian Blur untuk menghaluskan bayangan.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 14: Mengubah warna tombol

Kita ingin agar tombol ini seflexibel mungkin, warnanya bisa diubah dengan mudah tanpa perlu melakukan editing rumit. Untuk ini kita akan menggunakan adjustment layer Hue/Saturation. Tambahkan adjustment layer Hue/Saturation di atas layer shape base.

Tambahkan juga adjustment layer Hue/Saturation di atas layer pita. Khusus yang ini, ubah menjadi clipping mask dengan menekan Ctrl + Alt + G. Dengan cara ini, Hue/Saturation hanya akan mempengaruhi warna pita.

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 15

Jika kita ingin mengubah warna tombol, misalnya agar sesuai dengan color scheme situs, kita tinggal mengaktifkan adjustment layer Hue/Saturation, pastikan pilihan Colorize aktif lalu geser ketiga slider yang tersedia. Dengan mudah warna tombol dan pitanya akan berubah. Lihat hasil yang saya peroleh hanya dengan mengubah slider di kedua adjustment layer.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 16: Menyimpan sebagai ikon transparan

Langkah terakhir kita adalah menyimpan gambar sebagai ikon transparan. Sembunyikan Background lalu tekan Ctrl + Shift + Alt + S. Di pilihan yang muncul pilih Preset: PNG-24 dan aktifkan pilihan Transparency.

Membuat Tombol Download Glossy Berwarna Cerah
Membuat Tombol Download Glossy Berwarna Cerah

[hr]

Hasil Akhir

Akhirnya, inilah desain yang kita peroleh. Perhatikan bahwa formatnya sudah transparan sehingga latar gambar tetap terlihat. Seperti biasa, di akhir tutorial ini saya menyediakan file source yang digunakan. Tersedia juga lima tombol dalam berbagai warna dengan format file PNG transparan yang bisa langsung Anda gunakan jika mau.

Membuat Tombol Download Glossy Berwarna Cerah

[hr]

Download Link

[ilink style=”download” url=”http://dl.dropbox.com/u/7116487/desaindigital/tutorial/tombol-download-glossy-desaindigital.zip”%5DDownload File PSD[/ilink] (148 KB)

Membuat Ikon Baterai dengan Photoshop

Setelah beberapa saat vakum karena berganti kepemilikan, PV.MGarage aktif kembali. Seperti sebelumnya, saya kembali berkontribusi di sana. Di tutorial ini, saya memperlihatkan pembuatan ikon baterai di Photoshop. Anda akan belajar penggunaan tool-tool dasar Photoshop seperti tool ellipse dan rectangle lalu menambahkan layer style untuk memberikan ilusi 3D. Lihat tutorial lengkap di sini. Lanjutkan membaca “Membuat Ikon Baterai dengan Photoshop”

Membuat Ikon Berita dengan Adobe Illustrator

Sesuai target jadwal, saya memberikan tutorial seminggu sekali di situs ini. Untuk kali ini berupa tutorial Adobe Illustrator. Di tutorial ini, kita akan membuat ikon berita menggunakan Adobe Illustrator. Saya sarankan Anda untuk menggunakan Illustrator CS5 karena kita akan belajar fitur baru yaitu Draw Inside. Anda bisa men-download versi trial Illustrator CS5 di sini.
Lanjutkan membaca “Membuat Ikon Berita dengan Adobe Illustrator”

Ikon Ballpoint dan Surat Gratis

Kali ini, saya akan membagi satu set ikon ballpoint dan surat. Ikon ini terdiri dari beberapa ukuran, 512 px, 256 px, 128 px, dan 64 px. Anda bebas menggunakan ikon ini untuk kegiatan komersial dan non-komersial. Jika ingin membantu menyebarkan ikon ini, silakan memberikan link pada halaman ini.

Tutorial lengkap pembuatan ikon ini bisa Anda temukan di 1stwebdesigner.

[hr]

Free Pen Mail Ikon Set
Free Pen Mail Ikon Set
Free Pen Mail Ikon Set

[hr]

Download Ikon

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2010/05/gratis-icon-pen-mail/free-pen-mail-ikon-set.rar”%5DDownload Ikon[/ilink]

File PSD Gratis Ikon Kaca Pembesar

Kali ini, saya akan membagikan file psd ikon kaca pembesar yang saya buat untuk tutorial di pvmgarage. Sederhana saja, Anda tinggal menulis pendapat Anda tentang situs ini dalam komentar di bawah. Pastikan Anda menggunakan email yang valid karena saya akan mengirimkan link download ke sana.

file psd gratis kaca pembesar

File PSD berukuran 1 MB, lengkap dengan semua layer dan layer style. Bisa digunakan di Photoshop CS ke atas.

Jangan lupa untuk melihat tutorial lengkap pembuatan ikon kaca pembesar di pvmgarage.

Note: Saya tidak akan menyimpan email Anda, saya hanya ingin melihat seberapa banyak pengunjung situs ini. I hate spammer.

[box type=”note”]Saya sudah tidak sempat lagi mengirim link file ke setiap komentator karena ternyata pengunjung situs ini memang sangat banyak. Anda dipersilakan langsung mendownload file PSD.[/box]

[hr]

Download Link

[ilink style=”download” url=”http://www.desaindigital.com/wp-content/uploads/2010/05/gratis-file-psd-icon-kaca-pembesar/magnify-glass.zip”%5DDownload File PSD[/ilink]