Membuat Slider Gambar dengan Photoshop & JQuery

Slider gambar sering digunakan dalam desain web korporat karena mudah menarik perhatian pengunjung. Dalam tutorial desain web kali ini, kita akan belajar tidak hanya mendesain slider di Photoshop tapi juga mengubahnya menjadi halaman HTML/CSS fungsional dengan jQuery untuk memberi efek bergeser. Tutorial ini ditulis ekslusif untuk Hongkiat.[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Membuat Slider Gambar dengan Photoshop & JQuery

[hr]

Sebagian Langkah dalam Tutorial

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

Membuat Slider Gambar dengan Photoshop & JQuery
Membuat Slider Gambar dengan Photoshop & JQuery
Membuat Slider Gambar dengan Photoshop & JQuery
Membuat Slider Gambar dengan Photoshop & JQuery
Membuat Slider Gambar dengan Photoshop & JQuery
Membuat Slider Gambar dengan Photoshop & JQuery
Membuat Slider Gambar dengan Photoshop & JQuery

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Mendesain Situs Portfolio Satu Halaman (PSD – HTML/CSS)

Dalam tutorial ini, saya akan memperlihatkan proses desain sebuah portfolio satu halaman. Desain satu halaman ini sudah mencakup slide show gambar dan kontak form. Tutorial ini hasil kolaborasi dengan Aris FM, seorang web desainer berbakat yang saat ini bekerja di icreativeLabs. [hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Mendesain Portfolio Satu Halaman dari PSD hingga HTML/CSS

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini membahas proses desain web secara lengkap mulai dari desain di Photoshop hingga cara mengkonversinya ke HTML/CSS. Selain itu, Anda dapat belajar lebih banyak melalui proses pembuatan slide show.

Mendesain Portfolio Satu Halaman dari PSD hingga HTML/CSS
Mendesain Portfolio Satu Halaman dari PSD hingga HTML/CSS
Mendesain Portfolio Satu Halaman dari PSD hingga HTML/CSS
Mendesain Portfolio Satu Halaman dari PSD hingga HTML/CSS
Mendesain Portfolio Satu Halaman dari PSD hingga HTML/CSS
Mendesain Portfolio Satu Halaman dari PSD hingga HTML/CSS
Mendesain Portfolio Satu Halaman dari PSD hingga HTML/CSS
Mendesain Portfolio Satu Halaman dari PSD hingga HTML/CSS
Mendesain Portfolio Satu Halaman dari PSD hingga HTML/CSS

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis

Wacom Bamboo adalah salah satu alat desain terbaik yang saya miliki. Harganya memang mahal namun sangat membantu saya dalam menggambar objek-objek realistis. Selain menghemat waktu, Wacom juga membantu saya terhindar dari cedera pergelangan.

Dalam tutorial ini, saya mencoba bereksperimen dengan menggambar Wacom Bamboo dari sketsa vektor di Illustrator kemudian memberinya pencahayaan realistis di Photoshop. Tutorial yang dipecah jadi dua bagian ini ditulis ekslusif untuk PVM.garage.[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini membahas secara detail proses menggambar Wacom Bamboo dalam dua tahap. Tahap pertama adalah menggambar rangka (wireframe) Wacom di Illustrator dan selanjutnya memberi detail di Photoshop hingga terlihat realistis.

Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis
Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis
Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis
Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis
Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis
Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis
Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis
Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis
Menggambar Wacom Bamboo dari Wireframe Hingga Tampil Realistis

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

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.

[hr]

Preview

Berikut adalah hasil akhir tombol yang diperoleh.

Membuat Tombol Sprite dari PSD hingga HTML/CSS

[hr]

Sebagian Langkah dalam Tutorial

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

Membuat Tombol Sprite dari PSD hingga HTML/CSS
Membuat Tombol Sprite dari PSD hingga HTML/CSS
Membuat Tombol Sprite dari PSD hingga HTML/CSS

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Desain Web eCommerce Terinspirasi Groupon Lengkap dengan Slider jQuery

Satu lagi tutorial desain web ekslusif untuk PV.Mgarage. Di sini, Anda akan belajar membuat desain web ecommerce yang terinspirasi oleh Groupon lengkap dengan slider jQuery-nya yang unik. Tutorial ini ditulis bersama Aris FM, seorang desainer web Indonesia berbakat.

Ada banyak teknik yang diajarkan dalam tutorial dua bagian ini. Bagian pertama memperlihatkan proses desain di Photoshop. Di bagian kedua Anda akan belajar proses konversi PSD ke HTML/CSS, membuat slider dengan jQuery, dan berbagai trik CSS.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Desain Web eCommerce Terinspirasi Groupon Lengkap dengan Slider jQuery
Desain Web eCommerce Terinspirasi Groupon Lengkap dengan Slider jQuery
Desain Web eCommerce Terinspirasi Groupon Lengkap dengan Slider jQuery

[hr]

Sebagian Langkah dalam Tutorial

Di bawah adalah sebagian proses yang dibahas dalam tutorial.

Desain Web eCommerce Terinspirasi Groupon Lengkap dengan Slider jQuery
Desain Web eCommerce Terinspirasi Groupon Lengkap dengan Slider jQuery
Desain Web eCommerce Terinspirasi Groupon Lengkap dengan Slider jQuery
Desain Web eCommerce Terinspirasi Groupon Lengkap dengan Slider jQuery
Desain Web eCommerce Terinspirasi Groupon Lengkap dengan Slider jQuery

[hr]

Link Tutorial

Tutorial ini ditulis ekslusif untuk PV.Mgarage.
[unordered_list style=”bullet”]

[hr]

[/unordered_list]

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.

Menggambar Mac Pro G5

Saya bukan pengguna Mac, saya juga tidak berniat menggunakan produk dari Mac. Walaupun begitu, saya adalah salah satu dari jutaan penggemar desain revolusioner Mac. Di tutorial ini, saya akan memperlihatkan cara menggambar Mac Pro G5 di Photoshop. Klik disini untuk membaca tutorial lengkapnya di PV.M garage.

Hasil Akhir

Tutorial Menggambar Mac Pro G5

Tutorial ini sederhana

Teknik yang digunakan di tutorial ini sebetulnya hanya teknik-teknik sadar seperti penggunaan tool pen untuk membuat shape. Shape-shape yang dihasilkan lalu dilukis secara manual untuk memberi highlight dan shadow.

Tutorial Menggambar Mac Pro G5
Tutorial Menggambar Mac Pro G5

Membahas Beberapa Trik Unik

Di sini, saya juga memperlihatkan cara pembuatan pola untuk membuat bagian depan Mac Pro. Anda akan belajar juga cara pembuatan bayangan yang terlihat sangat realistik.

Tutorial Menggambar Mac Pro G5
Tutorial Menggambar Mac Pro G5
Download Source File