Mendesain Website Sederhana dari PSD hingga HTML –Bag 1

 

By Mohammad Jeprie on 4 June 2012 in Desain Web, Tutorial 13

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.

Klik untuk melihat dalam ukuran 100%

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:

• Framework 960 dari Nathan Smith
• Font Quicksand dari Andrew Paglinawan
• A tree on the horizon dari Ydiot
• Namibia – Namib desert – Dead vlei dari Pinzino

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.

30 Days to Learn HTML & CSS

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.

Black + White Simple Theme

Tutorial

Langkah 1

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

Langkah 2

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

Langkah 3: Installasi Font Quicksand

Kita akan menggunakan font custom. Ambil font gratis Quicksand.

Langkah 4

Buka Fonts di Control Panel.

Langkah 5

Geser file font ke dalam folder Fonts utuk menginstallnya.

Langkah 6

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

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

Langkah 7: Banner

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

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

Langkah 8

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

Langkah 9

Ambil foto dan simpan di atas salah satu kotak.

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.

Langkah 11

Ulangi pada gambar lainnya.

Langkah 12

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

Langkah 13

Tambahkan teks putih dengan font Quicksand.

Langkah 14: Artikel

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

Langkah 15

Tambahkan paragraf panjang dengan tipe font Arial atau Helvetica.

Langkah 16

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

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.

Langkah 18

Pastikan untuk memberi jarak yang sama pada sekeliling teks.

Langkah 19

Gandakan artikel dengan cara klik dan geser sambil menahan alt.

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.

Langkah 21: Footer

Tambahkan garis dan sedikit paragraf pendek untuk area footer.

Hasil Akhir

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

Klik untuk melihat dalam ukuran 100%

 

http://desaindigital.com/mendesain-website-sederhana-dari-psd-hingga-html-bag-1/