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.

Preview


Di bawah adalah desain sederhana yang akan kita buat.

final-large

Detail Tutorial



  • Tingkat Kesulitan: Pemula

  • Software yang Digunakan: Adobe Photoshop

  • Teknik yang Dipelajari: Installasi Font, Clipping Mask, Penggunaan Grid 960

  • Lama Pengerjaan: 20 menit




Resource yang Dibutuhkan


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

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.

mendesain-halaman-web-sederhana-psd-html-bag-1-01

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.

mendesain-halaman-web-sederhana-psd-html-bag-1-02

Tutorial


Langkah 1


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

mendesain-halaman-web-sederhana-psd-html-bag-1-03

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-halaman-web-sederhana-psd-html-bag-1-04

Langkah 3: Installasi Font Quicksand


Kita akan menggunakan font custom. Ambil font gratis Quicksand.

mendesain-halaman-web-sederhana-psd-html-bag-1-05

Langkah 4


Buka Fonts di Control Panel.

mendesain-halaman-web-sederhana-psd-html-bag-1-06

Langkah 5


Geser file font ke dalam folder Fonts utuk menginstallnya.

mendesain-halaman-web-sederhana-psd-html-bag-1-07

Langkah 6


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

mendesain-halaman-web-sederhana-psd-html-bag-1-08

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

mendesain-halaman-web-sederhana-psd-html-bag-1-09

Langkah 7: Banner


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

mendesain-halaman-web-sederhana-psd-html-bag-1-10

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

mendesain-halaman-web-sederhana-psd-html-bag-1-11

Langkah 8


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

mendesain-halaman-web-sederhana-psd-html-bag-1-12

Langkah 9


Ambil foto dan simpan di atas salah satu kotak.

mendesain-halaman-web-sederhana-psd-html-bag-1-13

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-halaman-web-sederhana-psd-html-bag-1-14

Langkah 11


Ulangi pada gambar lainnya.

mendesain-halaman-web-sederhana-psd-html-bag-1-15

Langkah 12


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

mendesain-halaman-web-sederhana-psd-html-bag-1-16

Langkah 13


Tambahkan teks putih dengan font Quicksand.

mendesain-halaman-web-sederhana-psd-html-bag-1-17

Langkah 14: Artikel


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

mendesain-halaman-web-sederhana-psd-html-bag-1-18

Langkah 15


Tambahkan paragraf panjang dengan tipe font Arial atau Helvetica.

mendesain-halaman-web-sederhana-psd-html-bag-1-19

Langkah 16


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

mendesain-halaman-web-sederhana-psd-html-bag-1-20

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-halaman-web-sederhana-psd-html-bag-1-21

Langkah 18


Pastikan untuk memberi jarak yang sama pada sekeliling teks.

mendesain-halaman-web-sederhana-psd-html-bag-1-22

Langkah 19


Gandakan artikel dengan cara klik dan geser sambil menahan alt.

mendesain-halaman-web-sederhana-psd-html-bag-1-23

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-halaman-web-sederhana-psd-html-bag-1-24

Langkah 21: Footer


Tambahkan garis dan sedikit paragraf pendek untuk area footer.

mendesain-halaman-web-sederhana-psd-html-bag-1-25

mendesain-halaman-web-sederhana-psd-html-bag-1-26

Hasil Akhir


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

final-large

Bagian 2


Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 2

Download Link


Download File PSD