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-psd-html-bag-2-30.jpg

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-psd-html-bag-2-01.jpg

Langkah 2

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

mendesain-halaman-web-sederhana-psd-html-bag-2-02.jpg

Langkah 3

Sembunyikan layer Background.

mendesain-halaman-web-sederhana-psd-html-bag-2-03.jpg

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-psd-html-bag-2-04.jpg

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-psd-html-bag-2-05.jpg

mendesain-halaman-web-sederhana-psd-html-bag-2-06.jpg

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

mendesain-halaman-web-sederhana-psd-html-bag-2-07.jpg

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-psd-html-bag-2-08.jpg

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-psd-html-bag-2-09.jpg

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-psd-html-bag-2-10.jpg

Langkah 7

Markup HTML yang kita butuhkan. Lihat hasilnya di sini.

Halaman Web Sederhana dengan Grid 960








  • Portfolio
  • Blog
  • Contact
  • what we offer

    perfection and creativity

    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.

    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.

    we can do

    a very quick photo shoot

    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.

    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.

    Morbi non enim sem, eget ullamcorper ipsum. Duis ut erat nec metus eleifend rutrum. Integer quis egestas nibh.

    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.

    
    

     

    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.

    
    

    what we offer

    perfection and creativity

    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.

    [hr]

    Download Link

    Download File Demo

    Iklan

    8 thoughts on “Mendesain Halaman Web Sederhana dari PSD Hingga HTML –Bag 2

    Tinggalkan Balasan

    Isikan data di bawah atau klik salah satu ikon untuk log in:

    Logo WordPress.com

    You are commenting using your WordPress.com account. Logout / Ubah )

    Gambar Twitter

    You are commenting using your Twitter account. Logout / Ubah )

    Foto Facebook

    You are commenting using your Facebook account. Logout / Ubah )

    Foto Google+

    You are commenting using your Google+ account. Logout / Ubah )

    Connecting to %s