10 Tutorial Desain Web yang Perlu Dipelajari Pemula

Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.

1. Kuis Berhadiah Buku "Panduan Mudah Desain Web Professional"
2. 8 Tips Belajar Desain Web
3. Mendesain Login Form Gelap Bergaya Modern
4. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula
5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web
6. Mendesain Interface Menu Modern
7. Pemenang Kuis Panduan Mudah Desain Web Profesional

Di artikel ini, saya akan memperlihatkan sepuluh tutorial Photoshop membahas desain web yang sangat berguna bagi para pemula. Semua tutorial ini cukup mudah bagi pemula namun ini tidak mengurangi nilainya karena teknik yang diajarkan dan hasil akhirnya berguna dalam proses desain web yang sesungguhnya. Kesepuluh tutorial ini telah saya urutkan dari yang termudah hingga tersulit.


1. Create A Minimal Portfolio Site Design (Plus a Free PSD!)


Seperti telah dibahas di 8 Tips Belajar Desain Web, seorang pemula sangat disarankan untuk memulai dengan mempelajari desain minimalis. Tutorial ini sangat tepat bagi Anda. Penjelasannya dengan sangat detail. Tidak saja teknik, Anda juga akan belajar beberapa poin penting dalam mendesain web misalnya cara merapikan susunan layer dan elemen-elemen desain sebuah halaman.

[caption id="attachment_7752" align="alignnone" width="600"]10-tutorial-desain-web-untuk-pemula-1 Create A Minimal Portfolio Site Design (Plus a Free PSD!)[/caption]

2. Create a Clean, Minimal Website Design in Photoshop


Di tutorial ini, Anda akan mulai belajar menggunakan Grid 960. Anda akan belajar proses penempatan elemen-elemen dalam grid dan juga beberapa dasar tipografi.


[caption id="attachment_7753" align="alignnone" width="600"]10-tutorial-desain-web-untuk-pemula-2 Create a Clean, Minimal Website Design in Photoshop[/caption]


3. How To Build a Stylish Portfolio Web Design Concept


Selanjutnya, tutorial ini akan membawa Anda ke projek yang sedikit lebih rumit. Di sini Anda akan belajar untuk mulai menggunakan pola dalam beberapa elemennya. Tutorial ini juga disertai dengan tutorial konversi ke HTML/CSS.

[caption id="attachment_7754" align="alignnone" width="600"]10-tutorial-desain-web-untuk-pemula-3 How To Build a Stylish Portfolio Web Design Concept[/caption]

4. Mendesain Theme Tumblr Minimalis


Selanjutnya Anda bisa mengikuti tutorial desain web yang juga sederhana dari Desaindigital. Tutorial ini ditulis dalam bahasa Indonesia sehingga seharusnya mempermudah belajar Anda. Di tutorial ini, Anda akan belajar membuat desain halaman bergaya thumblr. Berkat Indam, Anda juga bisa mengkonversi desain ini ke HTML/CSS.


[caption id="attachment_7755" align="alignnone" width="600"]10-tutorial-desain-web-untuk-pemula-4 Mendesain Theme Tumblr Minimalis[/caption]


5. Membuat Situs Resource Desain Premium di Photoshop


Setelah selesai mempelajari desain blog, saatnya maju ke desain korporat. Desain yang dibahas di tutorial ini sederhana sehingga mudah diikuti dan tidak akan terlalu banyak menyita waktu Anda.


[caption id="attachment_7756" align="alignnone" width="600"]10-tutorial-desain-web-untuk-pemula-5 Membuat Situs Resource Desain Premium di Photoshop[/caption]


6. Create a Light Textured Web Design in Photoshop


Satu lagi desain korporat minimalis. Desain tipe ini sangat sesuai dengan trend minimalis saat ini.


[caption id="attachment_7747" align="alignnone" width="600"]10-tutorial-desain-web-untuk-pemula-6 Create a Light Textured Web Design in Photoshop[/caption]


7. Create a Fabric Textured Web Layout Using Photoshop


Desain web dalam tutorial ini masih minimalis seperti beberapa tutorial di atas. Namun, kali ini disertai dengan tema jahitan. Penggunaan tema semacam ini membuat desain terlihat khas dan unik.


[caption id="attachment_7748" align="alignnone" width="600"]10-tutorial-desain-web-untuk-pemula-7 Create a Fabric Textured Web Layout Using Photoshop[/caption]


8. How To Create a Clean and Colorful Web Layout


Desain-desain di atas menggunakan warna yang monoton. Di tutorial ini, Anda bisa mencoba menggunakan lebih banyak warna dan mempelajari cara membuat kombinasi warna yang menarik.


[caption id="attachment_7749" align="alignnone" width="600"]10-tutorial-desain-web-untuk-pemula-8 How To Create a Clean and Colorful Web Layout[/caption]


9. Create a Professional Web 2.0 Layout


Tutorial kali ini lebih panjang dari yang lain. Di sini, Anda akan diajak membuat sebuah desain web korporat yang lengkap mulai dari daftar portfolio, area testimoni klien, hingga slideshow.


[caption id="attachment_7750" align="alignnone" width="600"]10-tutorial-desain-web-untuk-pemula-9 Create a Professional Web 2.0 Layout[/caption]


10. Create a Watercolor-Themed Website Design with Photoshop


Desain terakhir ini lebih rumit karena ada lebih banyak teknik yang digunakan. Anda akan belajar memotong gambar dan memanfaatkan tampilan transparan dalam desain.

[caption id="attachment_7751" align="alignnone" width="600"]10-tutorial-desain-web-untuk-pemula-10 Create a Watercolor-Themed Website Design with Photoshop[/caption]


Kesimpulan


Kesepuluh tutorial ini sudah cukup bagi Anda untuk memulai proses belajar desain web dengan Photoshop. Sebagai seorang pemula, jangan dulu berfikir untuk membuat karya-karya original. Ikuti saja tutorial yang ada sebisa mungkin. Seiring waktu, Anda akan belajar untuk membuat karya sendiri. Selamat belajar!

Terakhir, untuk menghasilkan desain web yang baik pastikan juga Anda mengetahui berbagai kesalahan umum desain web.