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