Membuat Tombol Sprite dari PSD hingga HTML/CSS

Dalam tutorial ini, saya memperlihatkan cara pembuatan tombol Download di Photoshop lalu mengubahnya menjadi Sprite. Kita akan membahas beberapa teknik CSS dasar untuk menjadikan desain ini fungsional. Tutorial ini ditulis ekslusif untuk PVM Garage.

Preview


Berikut adalah hasil akhir tombol yang diperoleh.

tutorial-tombol-sprite-01.jpg

Sebagian Langkah dalam Tutorial


Tutorial sederhana membahas detail pembuatan tombol dengan pencahayaan menarik sehingga diperoleh kesan tampilan tiga dimensi.

[gallery ids="13165,13166,13167" type="rectangular"]

Link Tutorial


Comments

Post a Comment

Popular posts from this blog

Menggambar Mobil Style Flat dengan Adobe Illustrator

Image
Hai! Di tutorial ini, saya akan menunjukkan cara menggambar sebuah mobil city car dengan gaya desain flat menggunakan Adobe Illustrator. Tentu saja, gaya flat artinya warna yang digunakan monoton, minim gradasi dan fokus pada kesederhanaan. Di bawah adalah tampilan gambar desain mobil yang akan diperoleh. Anda dianggap sudah cukup memahami teknik perpotongan dua bentuk atau lebih menggunakan Panel Pathfinder .
Read more

Membuat Pin dengan Photoshop

Image
Saya belajar teknik ini pertama kali dari tutorial di psdtuts.com. Tapi saya tidak begitu cocok dengan teknik dan penjelasannya (terlalu singkat dan tidak begitu jelas), jadi saya buat tutorial ini menggunakan teknik yang sedikit berbeda. [First time I learn this technique from psdtuts.com. But I'm not quite satisfied with their explanation so I recreate it here using different approach.]
Read more

Teknik Profesional Menghaluskan Kulit di Photoshop

Image
Pernahkah Anda memperlihatkan lebih dekat detail kulit para model di majalah? Kulit mereka halus sekali, tanpa cela. Kemungkinan besar, yang Anda lihat sebenarnya adalah hasil editing dengan Photoshop. Preview Perbandingan sebelum dan setelah editing. Detail kulit. Resource Yang Digunakan Foto Tanpa Retouch dari Retouching Academy Lab Materi Yang Akan Anda Pelajari Layer Mask Penggunaan Filter High Pass Tool Spot Healing Brush Tutorial Langkah 1 Duplikasi layer Background. Buka foto model yang belum diedit di Photoshop. Duplikasi layer Background dengan menekan Ctrl + J. Langkah 2 Aktifkan Tool Spot Healing Brush. Jika tampilan gambar diperbesar, terlihat bahwa ada titik-titik hitam di kulit model di gambar ini. Untuk menyamarkannya, gunakan Tool Spot Healing Brush. Langkah 3 Perbaiki cacat-cacat kecil pada kulit. Dengan Tool Spot Healing, langsung saja klik dan geser titik-titik hitam yang ingin disamarkan. Lakukan pada area-area
Read more