Top Menu

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

Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 2

Di tutorial sebelumnya, kita telah membuat file PSD sederhana dengan Framework 960gs. Di tutorial ini, kita akan belajar teknik slicing, markup dengan HTML 5, dan mengatur penempatan setiap elemen dengan Framework 960gs. Pastikan Anda telah menguasai dua artikel sebelumnya tentang 960gs yaitu Panduan Mudah Desain Web dengan 960gs –Bagian 1 dan Bagian 2.

Preview

Berikut adalah tahapan yang akan kita peroleh di tutorial ini.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Detail Tutorial

  • Tingkat Kesulitan: Pemula
  • Software yang Digunakan: Adobe Photoshop, Teks Editor
  • Teknik yang Dipelajari: Grid 960, Proses Slicing Desain Web
  • Lama Pengerjaan: 20 menit

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, pastikan Anda memiliki resource berikut:

Tutorial

Langkah Awal

Siapkan file dengan nama index.html dan folder dengan nama css untuk file css dan img untuk gambar. Di dalam folder css, buat file kosong dengan nama style.css. Ambil file reset.css, type.css, dan 12_col_960.css dari paket Framework 960gs.

Langkah 1: Slicing

Buka file PSD. Klik ikon mata di depan layer Background untuk menyembunyikannya. Seleksi logo dengan tool Marquee. Tekan Ctrl + Shift + C untuk menyimpannya ke Clipboard.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 2

Buat file baru (Ctrl + N) dengan ukuran sesuai Clipboard. Paste gambar (Ctrl + V).

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 3

Sembunyikan layer Background.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 4

Tekan Ctrl + shift + Alt + S untuk menyimpan ke dalam format Web. Simpan dengan format file PNG-24 dan pastikan Transparency aktif.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 5

Ulangi proses ini pada elemen gambar yang lain. Jika gambar itu memerlukan transparansi, gunakan format file PNG-24. Jika tidak, gunakan JPEG karena ukurannya jauh lebih kecil.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Di akhir proses slicing, kita akan memperoleh file gambar berikut.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 6: Mark Up HTML 5

Berikut adalah outline layout HTML yang kita harapkan. Kita bisa membayangkan ouline HTML 5 sebagai daftar isi sebuah buku. Anda bisa menemukan lebih banyak informasi tentang algoritma outline HTML 5 di Smashing Magazine.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Untuk mempermudah, lihat gambar di bawah. Logo dan navigasi kita simpan bersama dalam tag header atau cover buku. Kedua gambar kita simpan dalam sebuah section atau bab buku. Kedua post blog kita simpan sebagai section atau bab terpisah. Kutipan adalah informasi yang berkaitan dengan halaman sehingga kita simpan sebagai aside atau sidebar. Terakhir adalah footer.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Di dalam header, navigasi kita simpan dalam tag khusus nav. Gambar besar bisa kita tampilkan sebagai berita terpisah sehingga kita definisikan sebagai sebuah article yaitu artikel di dalam bab. Logika yang sama berlaku untuk kedua artikel blog.

Teks banner kita anggap cukup penting dan kita format sebagai heading 3. Judul artikel blog dan tagline-nya kita anggap lebih penting dengan menyimpannya sebagai heading 2 dan 4.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 7

Berikut adalah markup HTML yang kita butuhkan. Lihat hasilnya di sini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Halaman Web Sederhana dengan Grid 960</title>
<link rel="stylesheet" type="text/css" href="css/960_12_col.css" media="all">
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
<link rel="stylesheet" type="text/css" href="css/text.css" media="all">
<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
</head>
<body>
 
 
<header>
  <div id="logo">
    <h1>Photoshoot</h1>
  </div>
  <nav>
    <ul>
      <li><a href="#" class="selected">Home</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
 
<section id="banner">
  <article>
    <h3>Suspendisse suscipit euismod mollis. Donec sed erat in leo venenatis ultrices ut vel augue. Praesent at nibh vitae arcu blandit lobortis.</h3>
  </article>
  <img src="img/small-photo.jpg" alt="Foto Kecil" class="grid_4">
</section>
 
<section>
  <article>
    <h2>what we offer</h2>
    <h4>perfection and creativity</h4>
    <p>Sed at suscipit turpis. Ut in blandit nibh. Praesent et est ac felis blandit ornare. Ut sagittis justo ut ante convallis egestas iaculis risus egestas. Sed eu mauris id ipsum elementum accumsan sit amet eu tellus. Aenean at lacus at lacus ullamcorper volutpat. Curabitur imperdiet velit in sapien consequat luctus. Donec est elit, tincidunt sed tincidunt sed, consectetur at purus. Nam placerat vehicula accumsan.</p>
    <p>Nam quis congue tellus. Nullam dapibus lacus sed metus eleifend mollis. Donec rutrum hendrerit quam, ut porttitor est malesuada sed. Aliquam erat volutpat. Morbi non enim sem, eget ullamcorper ipsum. Duis ut erat nec metus eleifend rutrum. Integer quis egestas nibh.</p>
    <div class="button"><a href="#">Read More</a></div>
  </article>
  <article>
    <h2>we can do</h2>
    <h4>a very quick photo shoot</h4>
    <p>Sed et ante eget lorem semper iaculis molestie a lorem. Duis nulla velit, accumsan fringilla dapibus faucibus, viverra sed mauris. Morbi eu magna felis. Donec eget risus diam, sed porttitor neque.</p>
    <p>Aenean vel dui turpis, a sagittis lectus. Morbi odio nisi, gravida dictum venenatis non, tempor eu risus. Ut rhoncus porta dui at euismod. Nam quis congue tellus. Nullam dapibus lacus sed metus eleifend mollis. Donec rutrum hendrerit quam, ut porttitor est malesuada sed. Aliquam erat volutpat.</p>
    <p>Morbi non enim sem, eget ullamcorper ipsum. Duis ut erat nec metus eleifend rutrum. Integer quis egestas nibh.</p>
    <div class="button"><a href="#">Read More</a></div>
  </article>
</section>
 
<aside>
  <blockquote>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec convallis ultrices felis, aliquam tincidunt augue accumsan vitae. Aenean porta mattis risus, vel tempus lacus eleifend ut.</p>
    <div id="nama">Mohammad Jeprie</div>
    <div id="status">Owner of <a href="http://psdfreemium.com">PSDfreemium</a></div>
  </blockquote>
</aside>
 
<footer>
  <p>a simple design from <a href="http://desaindigital.com">DesainDigital</a></p>
</footer>
 
</body>
</html>

Perhatikan bahwa di bagian atas terdapat kode yang mengambil file reset.css, text.css, dan 12_col_960.css dari paket Framework 960gs. Dalam projek sesungguhnya, sangat disarankan untuk menyatukan ketiga file css untuk mengurangi http request –saya tidak tahu apa itu tapi intinya adalah situs akan load lebih cepat.

1
2
3
<link rel="stylesheet" type="text/css" href="css/960_12_col.css" media="all">
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
<link rel="stylesheet" type="text/css" href="css/text.css" media="all">

Langkah 7

Buka HTML 5 Outliner dan periksa kode di atas dengan cara copy-kan langsung atau berikan link halaman demonya.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Ternyata artikel kita terbagi dua. Ini terjadi karena secara otomatis heading akan menghasilkan section atau bab baru. Agar kedua heading ini menyatu kita simpan keduanya dalam tag hgroup.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 8

Simpan h2 dan h4 di artikel blog ke dalam hgroup. Hasilnya bisa dilihat di sini.

1
2
3
4
<hgroup>
  <h2>what we offer</h2>
  <h4>perfection and creativity</h4>
</hgroup>

Langkah 9

Setelah diperiksa di HTML 5 Outliner, sekarang keduanya akan menyatu.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 9: Grid

Sekarang kita mulai menggunakan grid 960. Di bawah tampilan desain saat ini.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 10

Untuk menggunakan framework 960gs, kita harus menyimpan semuanya dalam class bernama container_12.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 11

Edit markup HTML. Simpan seluruh elemen di dalam div dengan nama class container_12.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Dan seperti inilah hasilnya.

Langkah 12: Menggunakan Grid Overlay

Kita perlu tool untuk membantu kita melihat grid situs. Buka Grid Overlay Bookmark. Geser tombol Grid Overlay ke baris Bookmark browser.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 13: Menghitung Grid

Logo situs ini berada dalam 3 kolom.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 14

Navigasi bisa kita simpan dalam sisa 9 kolom yang tersedia.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 15

Berikutnya, kita cukup menambahkan class grid_3 dan grid_9 pada logo dan navigasi.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 16

Klik tombol bookmark Grid Overlay untuk melihat posisi elemen pada grid.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Langkah 17

Lanjutkan proses ini pada elemen-elemen lainnya.

Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2

Hasil Akhir

Inilah hasil yang kita peroleh saat ini. Masih kasar karena kita sama sekali belum mengatur style halaman. Walaupun begitu, kita sudah cukup berhasil dengan penempatannya. Di tutorial berikutnya, kita akan belajar memperbaiki tampilan setiap elemen dengan langsung mengedit file CSS.

Download Link

Download File Demo

, ,

6 Responses to Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 2

  1. juwita 16 June 2012 at 5:30 pm #

    Mas Jeprie bisa tidak melihat grid webnya di browser seperti pada gambar hasil akhir ?

    • Jeprie 16 June 2012 at 6:49 pm #

      Bisa. Tinggal klik tombol bookmark Grid Overlay. Lihat Langkah 12.

  2. Konthet 2 July 2012 at 10:21 pm #

    Mantab semua tutorialnya, bakalan betah disini saya selama liburan ini.. :D

  3. VJmaster 8 December 2013 at 3:26 pm #

    Haha makasih tutorialnya..kebetulan lagi pusing ngedesain web

  4. Wahyu Widyantorohyu 6 February 2014 at 12:10 am #

    Lanjutannya gan. thanks udah share ilmunya. terus menulis. ^^^

  5. Lavin 14 July 2014 at 10:17 am #

    gan cara cek hasil kerjaan kita di web browser bagaimana cara nya? apakah harus di upload dulu?

Tinggalkan komentar Anda.