Top Menu

Dapatkan buku The Power of Photoshop. Disertai bonus video tutorial. Harga: Rp 78.800 Rp 54.500

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.

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.

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.

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

Hasil Akhir

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

Download Link

Download File PSD

,

14 Responses to Mendesain Website Sederhana dari PSD hingga HTML –Bag 1

  1. Zagato 6 June 2012 at 10:02 am #

    Beda dikit namanya antara Jeffrey dan Jeprie, hehehe…

    • Jeprie 7 June 2012 at 6:43 pm #

      Yang membedakan skill-nya ya :)

  2. Erik 7 June 2012 at 4:14 pm #

    Hai bro Jeprie, pas banget ketemu ini tutorial!
    Bagaimana cara atur atau mengetahui jarak antar font dalam (pixel) pada langkah 6 dan 16 itu bro Jeprie?

  3. Jaka 11 June 2012 at 4:02 pm #

    Saya tunggu mas jeprie kelanjutannya. :)

  4. bogie 11 June 2012 at 10:28 pm #

    mas jeprie….

    buat garis bawah di bawah pada nomer 14 itu gimana..???

    pake dash ato underscore…???

    • Jeprie 12 June 2012 at 10:54 pm #

      Itu pakai tool Pencil dengan ukuran brush 1 px. Shift-geser untuk memperoleh garis lurus.

  5. affanul 12 June 2012 at 8:14 am #

    thanks ms jaka tulisanya keren, sy coba ms, oia sy kmren dh beli buku ms jepri tentang “Panduan Mudah dan pintar Photoshop” thanks bukunya juga bagus tapi kurang tebal kayaknya :)

  6. David 15 January 2014 at 7:31 am #

    Keren tutorialnya mas.. :)

  7. Irfan P 24 October 2014 at 9:17 am #

    Keren…

    Terima kasih mas….

Trackbacks/Pingbacks

  1. Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2 | Desaindigital - 13 June 2012

    [...] tutorial sebelumnya, kita telah membuat file PSD sederhana dengan Framework 960gs. Di tutorial ini, kita akan belajar [...]

Tinggalkan komentar Anda.