Mendesain Website Sederhana dari PSD hingga HTML –Bag 1

Di tutorial desain web untuk pemula ini, kita akan belajar mendesain halaman web sederhana di Photoshop. Tutorial ini adalah kreasi ulang tutorial Jeffrey Way di 30 Days to Learn HTML & CSS.
[hr]

Preview

Di bawah adalah desain sederhana yang akan kita buat.

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Installasi Font, Clipping Mask, Penggunaan Grid 960
  • Lama Pengerjaan: 20 menit

[hr]

Resource yang Dibutuhkan

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

[hr]

Intro

Beberapa hari ini saya mulai mencoba untuk belajar desain web. Sebagai pelajar otodidak, saya beruntung bisa belajar secara gratis dari salah satu tutor desain web terbaik di dunia, Jeffrey Way. Berdasarkan pengalaman saya, proses belajar biasanya lebih mudah dengan mengajarkannya kembali. Oleh karena itu, saya akan mengulang kembali projek yang dibahas Jeffrey di situs ini secara tertulis. Saya sangat menyarankan Anda untuk melihat video tutorial karena penjelasannya sangat lengkap.

Tutorial ini berdasarkan pada projek terakhir video tutorial 30 Days to Learn HTML & CSS. Dalam tutorial aslinya, Jeffrey menggunakan file PSD dari Collis Ta’eed, pendiri Envato. Tapi, untuk mempermudah saya akan menggantinya dengan file sendiri dengan layout yang hampir sama persis. Perbedaan yang cukup mencolok adalah desain Collis menggunakan framework 24 kolom sementara saya menyederhanakannya menjadi 12 kolom. Saya juga akan menggunakan font custom dalam desain ini, yaitu Quicksand Book.

[hr]

Tutorial

Langkah 1

Ambil template file PSD 960 12 kolom dari 960.gs. Klik ikon mata pada kolom merah untuk menyembunyikannya.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 2

Tambahkan teks untuk logo situs. Untuk mempercantiknya saya gunakan kombinasi font Bold dan Regular. Di sebelah teks, saya tambahkan garis 1 px.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 3: Installasi Font Quicksand

Kita akan menggunakan font custom. Ambil font gratis Quicksand.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 4

Buka Fonts di Control Panel.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 5

Geser file font ke dalam folder Fonts utuk menginstallnya.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 6

Tambahkan menu di pojok kanan atas. Beri jarak 20 px untuk setiap menu.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Untuk mempermudah proses pengkodean, saya biasanya menuliskan langsung nilai-nilai ini dengan tool brush di layer baru.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 7: Banner

Buat dua shape kotak dengan ukuran delapan dan empat kolom. Pastikan posisinya mengikuti bentuk kolom.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Agar hasilnya tidak buram, pastikan untuk mengaktifkan fitur Snap pada tool Rectangle.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 8

Zoom lebih dekat ke setiap sisi dan pastikan semua sisi tepat pada grid pixel.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 9

Ambil foto dan simpan di atas salah satu kotak.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 10

Pastikan layer gambar tepat berada di atas kotak. Tekan Ctrl + Alt + G untuk mengubahnya menjadi Clipping Mask. Gambar akan masuk ke dalam kotak. Anda masih bisa mentransformasi dan menggeser gambar jika perlu. Anda bisa menyatukan kedua layer dengan cara memilih keduanya lalu klik kanan dan pilih Merge Layers.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 11

Ulangi pada gambar lainnya.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 12

Tambahkan kotak hitam dengan Opacity 30%. Di atasnya, dengan tool Type klik dan geser untuk menambahkan kotak teks.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 13

Tambahkan teks putih dengan font Quicksand.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 14: Artikel

Tambahkan heading di bawah gambar dengan teks Quicksand dan warna seperti berikut.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 15

Tambahkan paragraf panjang dengan tipe font Arial atau Helvetica.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 16

Anda bisa menambahkan keterangan pada setiap detail untuk mempermudah perhitungan dalam proses pengkodean.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 17

Di bawah artiikel tambahkan tombol sederhana berupa teks "READ MORE" di atas kotak. Buat dua kotak dengan warna berbeda untuk kondisi hover dan normal.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 18

Pastikan untuk memberi jarak yang sama pada sekeliling teks.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 19

Gandakan artikel dengan cara klik dan geser sambil menahan alt.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 20: Testimonial

Tambahkan kutipan dengan tipe font miring dan ukuran lebih besar dari teks paragraf standar. Di pojok kiri atas tambahkan karakter kutip yang cukup besar.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

Langkah 21: Footer

Tambahkan garis dan sedikit paragraf pendek untuk area footer.

Mendesain Website Sederhana dari PSD hingga HTML--Bag 1
Mendesain Website Sederhana dari PSD hingga HTML--Bag 1

[hr]

Hasil Akhir

Proses pembuatan desain ini sangat sederhana. Saya yakin Anda tidak akan kesulitan. Selanjutnya, kita akan lanjutkan mengubah desain ini ke HTML/CSS.

[hr]

Bagian 2

Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 2

[hr]

Download Link

[ilink style=”download” url=”http://desaindigital.com/wp-content/uploads/2012/05/tutorial-desain-web-sederhana-psd-html-1/simple-photoshoot.zip”%5DDownload File PSD[/ilink]

Pemenang Kuis Buku “Panduan Mudah Desain Web Profesional”

[box type=”info”]

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
[/box]

Akhirnya, kita tutup seri Panduan Desain Web untuk Pemula dengan mengumumkan pemenang kuisnya. Pemenang dipilih secara acak menggunakan fitur angka acak dari random.org.

Pemenangnya adalah Ryan dan Rudi Hasan Hsb.

Mendesain Interface Menu Modern

[box type=”info”]

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
[/box]

Di tutorial ini, saya akan menjelaskan proses pembuatan menu yang digunakan oleh Syarip Yunus dalam theme tumblr premiumnya, Timeline. Saya sengaja memilih desain ini karena tampilannya yang unik dan mirip dengan desain interface sebuah aplikasi.[hr]

Preview

Berikut adalah hasil yang akan kita peroleh.

[hr]

Detail Tutorial

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

[hr]

Tutorial

Langkah 1: Mempersiapkan Kanvas

Buat file baru dengan ukuran 725 × 220 px.

Mendesain Interface Menu Modern

Langkah 2: Latar

Tambahkan Adjustment Layer Solid Color dengan warna #757575.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 3: Area Menu

Aktifkan tool rectangle lalu buat shape di bagian atas kanvas dengan warna #23262d. Pastikan sisi dan kanan shape berada di luar area kanvas. Zoom lebih dekat dengan tool zoom dan beri jarak 1 px dengan bagian atas kanvas.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Klik ganda layer lalu tambahkan Layer Style Drop Shadow, Inner Glow, Gradient Overlay, dan Stroke dengan setting seperti berikut.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Di bawah adalah tampilan dasar menu yang kita peroleh.

Mendesain Interface Menu Modern

Langkah 4

Ctrl-klik shape lalu buat layer baru.

Mendesain Interface Menu Modern

Langkah 5

Isi layer dengan hitam dengan klik Edit > Fill dan pilih warna hitam.

Mendesain Interface Menu Modern

Langkah 6

Klik Filter > Noise > Add Noise.

Mendesain Interface Menu Modern

Langkah 7

Ubah blend mode layer ke Screen dan turunkan Opacity layer.

Mendesain Interface Menu Modern

Langkah 8: Menu Utama

Gambar sebuah rounded rectangle dengan radius: 3 px dan warna #23262d.

Mendesain Interface Menu Modern

Tambahkan Inner Glow, Gradient Overlay, dan Stroke.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 9

Beri teks menu di dalam area shape. Beri juga jarak yang cukup.

Mendesain Interface Menu Modern

Beri Drop Shadow agar teks terlihat kontras dengan latarnya.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 10: Menu Drop Down

Buat shape berbentuk lingkaran dengan warna #24272f.

Mendesain Interface Menu Modern

Tambahkan Gradient Overlay dan Stroke.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 11

Aktifkan tool polygon dengan Sides: 3. Buat segitiga di dalam lingkaran dengan warna #858794.

Mendesain Interface Menu Modern

Beri sedikit Drop Shadow.

Mendesain Interface Menu Modern

Langkah 12

Buat rounded rectangle untuk latar sub menu.

Mendesain Interface Menu Modern

Tambahkan Layer Style berikut.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 13

Tambahkan path segitiga di bagian atas persegi dengan mode Add to Shape.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 14

Tambahkan teks menu.

Mendesain Interface Menu Modern

Beri Drop Shadow pada teks.

Mendesain Interface Menu Modern

Langkah 15

Tambahkan latar untuk kondisi hover, yaitu ketika kursor berada di atasnya. Untuk menu kedua, caranya dengan menduplikasi latar sub menu lalu menambahkan persegi menutupi menu lainnya dengan mode Subtract.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Ini adalah tampilan hover untuk menu lainnya.

Mendesain Interface Menu Modern

Langkah 16

Buat shape rectangle hitam dengan tinggi 1 px di antar setiap menu.

Mendesain Interface Menu Modern

Tambahkan Drop Shadow.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 17: Setting

Buat latar untuk tombol setting. Prosesnya sama seperti latar untuk menu utama.

Mendesain Interface Menu Modern

Langkah 18

Buat rounded rectangle dengan radius 1 px.

Mendesain Interface Menu Modern

Langkah 19

Aktifkan path dengan tool Path Selection dan tekan Ctrl + Alt + T untuk memduplikasi dan mentransformasi path. Putar 45°.

Mendesain Interface Menu Modern

Langkah 20

Tekan Ctrl + Shift + Alt + T beberapa kali hingga diperoleh seperti di bawah.

Mendesain Interface Menu Modern

Langkah 21

Tambahkan path lingkaran lalu tambahkan lingkaran lebih kecil dengan mode path Subtract.

Mendesain Interface Menu Modern

Beri Drop Shadow, Inner Glow, dan Gradient Overlay.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 22: Pemisah Antar Menu

Ada yang terlewat. Buat garis hitam 1 px dengan tool rectangle di antar setiap menu.

Mendesain Interface Menu Modern

Langkah 23

Tambahkan layer mask lalu lukis bagian atas dan bawah dengan hitam.

Mendesain Interface Menu Modern

Tambahkan Drop Shadow.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 24: Area Pencarian

Buat latar untuk area pencarian. Prosesnya sama seperti latar tombol setting dan menu utama.

Mendesain Interface Menu Modern

Langkah 25

Ubah warnanya menjadi #3e4854.

Mendesain Interface Menu Modern

Ubah setting Gradient Overlay.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 26

Duplikasi latar lalu tambahkan persegi dengan mode Subtract. Ubah warnanya ke #23262d dan ubah setting Gradient Overlay.

Mendesain Interface Menu Modern

Ubah setting Inner Glow.

Mendesain Interface Menu Modern

Inilah hasilnya setelah pengubahan Gradient Overlay.

Mendesain Interface Menu Modern

Langkah 27

Kita akan membuat ikon search. Buat sebuah rounded rectangle 1 px, tambahkan lingkaran di atasnya. Di dalam lingkaran itu, tambahkan lingkaran lebih kecil dengan mode Subtract. Ini akan menghasilkan sebuah ikon kaca pembesar.

Mendesain Interface Menu Modern

Tambahkan Drop Shadow, Inner Glow, dan Gradient Overlay.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 28

Tekan Ctrl + T lalu putar ikon 45°.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 29

Tambahkan teks Search di atas area pencarian. Gunakan warna teks yang lebih cerah agar mudah dibaca.

Mendesain Interface Menu Modern

Beri Drop Shadow.

Mendesain Interface Menu Modern

[hr]

Hasil Akhir

Desain menu yang dibuat di sini tidak saja bergunakan dalam web tapi juga bisa digunakan dalam interface aplikasi. Di bawah adalah hasil akhir tutorial yang kita peroleh.

[hr]

Download Link

[ilink style=”download” url=”http://desaindigital.com/wp-content/uploads/2012/03/tutorial-membuat-interface-menu-modern/timeline-menu.zip”%5DDownload File PSD[/ilink]

21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web

[box type=”info”]

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
[/box]

Salah satu trend yang berkembang selama beberapa tahun ini adalah penggunaan pola dan tekstur secara ringan (subtle). Ini sangat berbeda dengan trend di era Web 2.0 yang banyak menggunakan gradient dan efek glossy. Di artikel ini, kita akan mengamati beberapa contoh penggunaan pola dan tekstur secara apik dalam desain web.

[hr]

Cast Iron Design Company

Situs ini menambahkan tekstur pada semua area situs, termasuk pada logo yang digunakannya. Memberikan kesan unik karena sangat cocok dengan font tulisan tangan yang digunakannya.

Whiteloupe

Whiteloupe menggunakan sangat sedikit tekstur bahkan lebih terlihat seperti warna solid.

Bitfoundry

Bitfoundry menggunakan tekstur noise yang sangat ringan di seluruh latarnya. Namun untuk teks, mereka tetap menggunakan warna solid. Ini menambah kontras antara teks dan latar.

SachaGreif.com

Situs ini menggunakan pola garis-garis diagonal di latar. Untuk memberikan kesan konsisten, heading widgetnya menggunakan pola yang sama.

More Air

Sedikit noise pada tekstur sudah cukup untuk menambah kontras latar dengan teks. Bunga-bunga di dekat iPad memberikan efek kedalaman pada desain.

Tvornicca Bannera

Latar situs ini menggunakan warna solid. Tapi di ilustrasinya, dia menggunakan tekstur yang cukup kasar. Logonya pun menggunakan tekstur yang sama.

Carter Digital

Desain situs ini sangat bersih. Tekstur hanya ditemukan dalam persegi gelap di bawah judul situs.

Launch Factory

Di sini digunakan banyak tekstur. Bahkan teksnya pun terlihat kasar.

Mynus

Tekstur paling berat digunakan di situs ini. Untuk menjaga kontras teks dan latar digunakan warna teks yang terang dengan drop shadow hitam untuk mengurangi tekstur di belakangnya.

Decode

Tekstur noise yang digunakan sangat lembut. Teks dan berbagai elemen lainnya bersih tanpa tekstur.

Lake Wapogasset

kippt

Village

Pola hanya digunakan di latar. Di antara latar dan elemen lain ditambahkan drop shadow sebagai transisinya.

The Black Harbor

Pola yang digunakan adalah beberapa noise besar di latar. Di area utama, tidak ada tekstur sama sekali.

Doublenaut

Pola digunakan di latar sementara gambar menggunakan tekstur.

Kelli Anderson Blog

Pola digunakan di latar situs. Sedikit tekstur di gunakan di area navigasi. Pola juga digunakan di dalam drop shadow logo.

Victoria and Albert Museum

Pola berupa ilustrasi buku digunakan di latar. Sangat cocok dengan ilustrasi situs yang juga berupa foto buku.

Stellavie

Tekstur pola pixel digunakan di latar. Warnanya sama atau mungkin mirip dengan warna logo.

The Buffalo Lounge

Pola berupa noise yang membentuk kolom-kolom digunakan dalam latar.

S.O.S Mamute

Ada banyak tekstur di sini. Cocok untuk memberi kesan alami apalagi dengan penggunaan teks tipe tulisan tangannya yang banyak digunakan.

Hack Fwd

Pola digunakan dalam latar. Di area utama, tidak ada tekstur.

10 Tutorial Desain Web yang Perlu Dipelajari Pemula

[box type=”info”]

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
[/box]

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.

[hr]

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.

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.

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.

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.

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.

6. Create a Light Textured Web Design in Photoshop

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

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.

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.

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.

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.

[hr]

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!

Mendesain Login Form Gelap Bergaya Modern

[box type=”info”]

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
[/box]

Dalam tutorial untuk pemula ini, kita akan mulai belajar membuat desain sebuah formulir login. Di sini, kita akan menggunakan ekstensi GuideGuide untuk mempermudah pembuatan guide. Terima kasih pada Izul Chaniago dan Rizky Nizamil Putra, Anda juga bisa mendownload versi HTML dari tutorial ini.[hr]

Preview

Di bawah adalah hasil yang akan kita peroleh.

Mendesain Login Form Gelap Bergaya Modern

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Layer Style, Penggunaan Ekstensi GuideGuide
  • Lama Pengerjaan: 1 jam

[hr]

Resource yang Dibutuhkan

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

[hr]

Tutorial

Langkah 1: Instalasi Ekstensi GuideGuide

Pertama kali, kita akan menginstall GuideGuide. Ambil file ekstensi dari situsnya. Di sana tersedia file ekstensi untuk versi CS4 dan CS5.

Mendesain Login Form Gelap Bergaya Modern

Langkah 2

Buka Adobe Extension Manager sebagai Administrator dengan cara klik kanan dan pilih Run as Administrator.

Mendesain Login Form Gelap Bergaya Modern

Langkah 3

Klik tombol Install dan pilih file ekstensi yang telah kita ambil.

Mendesain Login Form Gelap Bergaya Modern

Langkah 4

Klik Accept untuk menerima syarat-syaratnya. Ya, kita semua tahu tidak ada yang membaca ini.:)

Mendesain Login Form Gelap Bergaya Modern

Langkah 5

Tunggu beberapa saat dan ekstensi akan terinstall.

Mendesain Login Form Gelap Bergaya Modern

Langkah 6: Menyiapkan Latar

Buat file baru dengan ukuran 600 × 400 px. Klik kanan Background dan pilih Layer from Background untuk mengubahnya menjadi latar biasa.

Mendesain Login Form Gelap Bergaya Modern

Langkah 7

Di kotak dialog berikutnya, beri nama layer background.

Mendesain Login Form Gelap Bergaya Modern

Langkah 8

Klik Edit > Fill dan pilih Use Color untuk mengisi layer dengan sebuah warna.

Mendesain Login Form Gelap Bergaya Modern

Langkah 9

Di kotak dialog Color Picker, pilih warna #3b3b3b.

Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern

Langkah 10: Menambah Noise

Klik ikon New Layer untuk membuat layer baru. Beri nama noise.

Mendesain Login Form Gelap Bergaya Modern

Langkah 11

Klik Filter > Noise > Add Noise.

Mendesain Login Form Gelap Bergaya Modern

Langkah 12

Ubah Blend Mode ke Multiply dan turunkan Opacity-nya.

Mendesain Login Form Gelap Bergaya Modern

Langkah 13

Buat layer baru lagi. Aktifkan tool gradient. Tambahkan gradasi dari putih ke hitam dengan tipe radial. Klik dari tengah atas hingga bagian bawah kanvas.

Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern

Langkah 14

Turunkan Opacity layer gradasi hingga 10%.

Mendesain Login Form Gelap Bergaya Modern

Langkah 15

Aktifkan tool marquee persegi dan buat seleksi untuk bentuk dasar formulir.

Mendesain Login Form Gelap Bergaya Modern

Langkah 16

Buka jendela ekstensi GuideGuide dengan klik Window > Extensions > GuideGuide. Di panel GuideGuide, isikan margin kanan dan kiri 32 px dan margin atas dan bawah 33 px. Klik tombol GG di bagian bawah panel.

Mendesain Login Form Gelap Bergaya Modern

Langkah 17

Secara otomatis, akan dihasilkan guide berdasarkan bentuk seleksi dengan margin yang sesuai.

Mendesain Login Form Gelap Bergaya Modern

Langkah 18

Aktifkan tool rounded rectangle. Di baris pilihan, isikan radius 5 px. Buat shape di dalam guide dengan warna #323232.

Mendesain Login Form Gelap Bergaya Modern

Klik ganda layer shape dan tambahkan Layer Style berikut di kotak dialog yang muncul.

Mendesain Login Form Gelap Bergaya Modern

Gunakan sudut 90°.

Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern

Inilah hasil yang kita peroleh. Tekan Ctrl + H untuk menyembunyikan semua guide.

Mendesain Login Form Gelap Bergaya Modern

Langkah 19

Ctrl-klik shape untuk membuat seleksi berdasarkan pada bentuk shape itu. Buat layer baru dan beri gradasi radial putih ke hitam.

Mendesain Login Form Gelap Bergaya Modern

Langkah 20

Turunkan Opacity layer hingga 10% dan ubah blend mode layer ke Screen.

Mendesain Login Form Gelap Bergaya Modern

Langkah 21

Tekan Ctrl + H untuk menampilkan kembali guide. Buat judul formulir menggunakan tool Type.

Mendesain Login Form Gelap Bergaya Modern

Tambahkan layer Style berikut.

Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern

Di bawah adalah hasil yang diperoleh.

Mendesain Login Form Gelap Bergaya Modern

Langkah 22

Aktifkan tool rounded dengan radius 5 px. Munculkan kembali guide dengan menekan Ctrl + H. Buat shape dengan warna #f5e2c2.

Mendesain Login Form Gelap Bergaya Modern

Tambahkan Layer Style dengan setting berikut.

Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern

Hasil yang kita peroleh.

Mendesain Login Form Gelap Bergaya Modern

Langkah 23

Tuliskan User Name di dalam kotak teks.

Mendesain Login Form Gelap Bergaya Modern

Tambahkan efek letterpress dengan memberinya Drop Shadow putih 1 px.

Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern

Langkah 24

Buat lagi formulir untuk password.

Mendesain Login Form Gelap Bergaya Modern

Langkah 25: Tombol Login

Buat shape rounded rectangle dengan warna #d6901c.

Mendesain Login Form Gelap Bergaya Modern

Tambahkan Layer Style berikut.

Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern

Langkah 26

Tambahkan teks LOGIN di atas tombol. Beri Drop Shadow.

Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern

Langkah 27

Buat layer baru. Aktifkan tool brush dengan ukuran 27 px dan hardness 0%. Buat garis hitam vertikal di salah satu sisi formulir.

Mendesain Login Form Gelap Bergaya Modern

Langkah 28

Lakukan transformasi dengan menekan Ctrl + T. Klik kanan dan pilih Warp. Geser kotak warp hingga garis melengkung.

Mendesain Login Form Gelap Bergaya Modern

Turunkan Opacity layer hingga 50%.

Mendesain Login Form Gelap Bergaya Modern

Langkah 29

Tekan Ctrl + J untuk menduplikasi garis. Geser garis ke sisi lainnya. TekanCtrl + T, klik kanan dan pilih Flip Horizontal untuk membalik arah lengkungan garis.

Mendesain Login Form Gelap Bergaya Modern
Mendesain Login Form Gelap Bergaya Modern

Langkah 30

Geser kedua layer garis ke belakang latar formulir.

Mendesain Login Form Gelap Bergaya Modern

[hr]

Hasil Akhir

Melalui tutorial ini, Anda telah belajar cara membuat desain yang sangat akurat dengan bantuan guide. Saya harap Anda menyukai tutorial ini.

Di bawah adalah hasil akhir tutorial yang kita peroleh.

Mendesain Login Form Gelap Bergaya Modern

[hr]

Download Link

[ilink style=”download” url=”http://psdfreemium.com/modern-login-form-psd/”%5DDownload File PSD[/ilink]
[ilink style=”download” url=”http://blog.izulcybercafe.com/free-modern-login-form/”%5DDownload File HTML/CSS v1[/ilink]
[ilink style=”download” url=”http://nizamilputra.com/blog/css-modern-login-form/”%5DDownload File HTML/CSS v2[/ilink]

8 Tips Belajar Desain Web

[box type=”info”]

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
[/box]

Desain web adalah salah satu bidang desain yang mengumpulkan berbagai keahlian dalam satu tempat. Ini membuat banyak orang bingung ketika memulai belajar desain web. Haruskah belajar pemrogramannya terlebih dahulu? Ataukah harus memulai dengan mendesain di Photoshop? Artikel ini akan membahas beberapa tips yang mudah-mudahan mempermudah Anda untuk belajar desain web.

[hr]

1. Mulai dengan Mempelajari Desain Minimalis

Desain minimalis adalah gaya desain pertama yang harus Anda kuasai. Dalam desain minimalis, Anda dituntut untuk menghasilkan desain yang efektif tanpa perlu disibukkan dengan detail-detail yang tidak begitu penting. Dengan menguasai desain minimalis, maka sebenarnya Anda telah menjalankan tujuan utama yang diharapkan dalam desain web yaitu membuat situs yang berfungsi.

8 Tips Belajar Desain Web
Contoh projek desain blog minimalis di Panduan Mudah Desain Web Professional.

2. Selalu Memulai dengan Struktur yang Matang

Masalah yang sering terjadi adalah sering kali si desainer terlalu disibukkan dengan detail-detail kecil seperti tekstur, warna, atau font. Padahal hal penting pertama yang harus dipikirkan adalah merencanakan struktur situs. Sebuah blog memiliki struktur berbeda dengan portfolio karena isinya lebih cepat diperbarui. Blog perusahaan memiliki gaya berbeda dengan blog personal.

Oleh karena itu, langkah awal mendesain web tidak dilakukan di Photoshop. Tapi, dengan coretan-coretan pensil di selembar kertas. Detail-detail kecil seperti tekstur atau warna situs bisa diputuskan setelah struktur penting berhasil diperoleh.

8 Tips Belajar Desain Web
Selalu memulai dengan membuat struktur web.

3. Selalu fokus Pada Fungsi

Web desainer bukanlah seorang seniman. Web desainer adalah seorang desainer yang memiliki tugas menyampaikan pesan melalui situs. Jadi, fokuslah pada fungsi situs bukan pada hiasan-hiasan dan pernak-pernik situs.

Animasi memang menarik. Gambar latar besar juga terlihat bagus. Tapi, sebelum menggunakannya tanyakan pada diri Anda “Apakah pemilik dan pengunjung situs membutuhkannya?” Untuk memahami fungsi dalam desain web, biasakan untuk rutin membaca artikel terkait usability dan user experience. Referensi yang bagus bisa Anda peroleh di Smashing Magazine dan useit.

4. Ikuti Struktur Desain Web Yang Sudah Baku

Mungkin Anda telah memperhatikan bahwa biasanya blog memiliki struktur dua kolom dengan sidebar di kanan dan logo di kiri atas. Layout ini digunakan banyak orang karena fakta sederhana, berhasil. Studi usabilitas menunjukkan bahwa pengunjung sudah terbiasa dengan sidebar di kanan dan isi blog di kiri. Pengunjung juga secara alami mengetahui bahwa sisi kiri atas berisi identitas situs yang jika diklik akan membawanya ke halaman depan. Jika Anda mendesain blog, maka kemungkinan besar layout inilah yang harus Anda gunakan.

Desain web telah berkembang pesat dan semua standar yang ada saat ini adalah hasil penelitian melelahkan para ahli. Jadi, jangan pernah menganggap layout desain dua kolom atau teks hitam di atas putih sebagai membosankan. Jangan ragu untuk menggunakannya hanya karena orang lain menggunakannya juga.

8 Tips Belajar Desain Web
Salah satu contoh layout blog paling populer.

5. Perhatikan Trend Desain Web Saat Ini

Seperti jenis desain lainnya, desain web pun memiliki trendnya sendiri. Misalnya, trend saat ini adalah maraknya penggunaan tekstur secara lembut (subtle). Anda bisa memperoleh informasi trend yang ada saat ini dengan memperhatikan desain situs-situs terkemuka, situs portfolio desainer semacam dribbble, atau melalui desain populer di marketplace seperti themeforest.

6. Kuasai Software yang Digunakan

Satu hal yang perlu dipahami adalah Anda tidak harus menguasai semua aspek teknis dalam mendesain web. Bisa jadi seorang desainer web hanya pintar Photoshop tanpa bisa sedikitpun CSS atau sebaliknya. Kekurangan ini bisa ditangani dengan mencari partner lain yang memiliki skill berbeda dengan Anda.

Anda juga tidak perlu mempersoalkan software yang digunakan dalam mendesain. Sebagian desainer memilih Photoshop dan sebagian lagi memilih Fireworks. Silakan pilih software yang Anda suka dan kuasailah dengan sungguh-sungguh.

Satu hal yang perlu dipahami adalah Anda tidak harus menguasai semua aspek teknis dalam mendesain web. Bisa jadi seorang desainer web hanya pintar Photoshop tanpa bisa sedikitpun CSS atau sebaliknya.

7. Pelajari Dasar-dasar Tipografi

Tipografi web adalah area detail yang sangat penting namun sering kali disepelekan. Tipografi memegang peran penting karena menjembatani pesan dari pemilik situs pada pengunjungnya.

Perhatikan pula bahwa tipografi dalam desain web berbeda dengan desain di medium lainnya. Teks di situs bisa muncul dalam browser berbeda dengan kombinasi font yang berbeda. Oleh karena itu, gunakanlah waktu Anda untuk mempelajari kombinasi font dan setting yang relatif berguna dalam semua kondisi.

8. Jangan Lupakan Whitespace

Whitespace adalah area kosong yang memberi ruang bernafas bagi pengunjung situs. Whitespace memberikan ruang bagi pengunjung untuk fokus pada area-area tertentu dan juga memberikan struktur yang logis pada tampilan situs. Tanpa whitespace, situs akan terlihat terlalu penuh dan membingungkan pengunjung.

8 Tips Belajar Desain Web
White Space di Flickr.

[hr]

Bagaimana Pendapat Anda?

Saya harap Anda terbantu dengan tips-tips ini. Adakah yang ingin Anda tambahkan?

[box type=”info”]Jika Anda seorang pengusaha yang terlalu sibuk untuk membuat desain website sendiri, Anda bisa menggunakan jasa desain website profesional dari Niagaweb.[/box]