July 24, 2024

Membuat Layout Web Dari Photoshop

2 min read

Kali saya membahas tentang pembuatan layout website untuk mengingatkan kembali siswa siswa yang sedang mengerjakan project TCS dan PKL desain web. Dalam pembuatan tampilan website seharusmya dirancang dan dikerjakan secara skematis karena akan mengurangi kesalahan konsep. Jadi buatlah sketsa terlebih dahulu dalam pembuatan sebuah situs. Ini bisa dijadikan gambaran dan petunjuk dalam proses pembuatan situs.

Langkah 1

Perancangan sketsa awal.

web

Langkah 2

Sebelum membuat dokumen baru, kita harus mengetahui bahwa tidak semua resolusi monitor pengguna sama dengan yang kita miliki. Sebagai contoh, resolusi monitor kita menggunakan ukuran 1024 x 768 pixel sedangkan pengguna (user) hanya memiliki resolusi 800 x 600 pixel. Apabila Anda membuat ukuran dokumen 900 x 600 pixel maka menimbulkan ketidaknyamanan pengunjung karena harus sering menggulung halaman website akibat ukuran dokumen terlalu lebar. Sebaiknya lebar tidak melebihi 800 pixel. Maka buatlah dokumen baru dengan ukuran ukuran Width 800 pixel dan Height 600 Pixel dan resolusi 72 pixel.

image

Langkah 3

Gunakan garis bantu (guide) untuk membagi halaman menjadi beberapa bagian. Untuk garis bantu, pilih skala yang ada diatas dam bagian kiri, tarik dan lepaskan pada dokumen. Untuk Header buat 2 inch, membagi garis guide vertical disesuaikan dengan kebutuhan tombol navigasi, tombol navigasi kali ini saya buat 7 bagian. Untuk Guide untuk navigasi dibuat dengan jarak 0.5 inch.

image

Langkah 4

Buatlah sebuah contoh desain template seperti dibawah ini, atau dengan kreasi anda sendiri. Disini saya anggap langkah-langkah desain dengan Photoshop sudah selesai, karena yang akan saya bahas adalah proses slicing layout, yaitu proses pemotongan gambar menjadi beberapa bagian agar dapat dengan mudah diisi kode html tertentu pada Dreamweaver.

webslice

Langkah 5

Slicing(pemotongan) image pada desain digunakan untuk memotong rancangan situs agar menjadi bagian bagian yang lebih kecil. Hal ini bisa bermanfaat untuk optimalisasi situs web sehingga akses menjadi lebih cepat, serta memudahkan pembuatan halaman web. Hanya saja jangan terlalu banyak melakukan pemotongan karena browser terbatas menampilkan gambar secara pararel.

Dalam pemotongan kita bisa menggunakan garis bantu, kemudian pilih slice tool, kemudian pilih tombol slice from guides. Jangan lupa untuk menampilkan slice dengan memilih menu View – Show-Slice.

image

Langkah 6

Setelah kita potong dengan slice, sebenarnya secara default tiap-tiap potongan sudah diberi nama secara urut oleh Photoshop. Namun agar teratur lebih baik kita beri nama sendiri dengan cara, klik kanan pada setiap slice.

image

image

Langkah 7

Untuk mengekspor gambar desain menjadi halaman web caranya adalah dengan cara pilih menu File – Save For Web & Devices dan beri nama index.

image

image

Secara default hasil penyimpanan gambar, akan otomatis membuat folder dengan nama image untuk menyimpan seluruh gambar yang telah dipotong oleh slice tool.

Langkah 8

Buka template yang sudah disimpan melalui adobe dreamweaver untuk mengisi bagian content.

webcontent

Hilangkan image di bagian content, jadikan image bagian content menjadi background cell, kemudian isi bagian content dengan tulisan atau berita.

web2

Jadilah sebuah layout website, untuk membuat link dan yang lain, klik tombol tombol navigasi sesuai dengan tujuan link tersebut. Kemudian silahkan isi bagian yang lain sesuai dengan keinginan. Tidak hanya memotong gambar, proses slicing juga membantu kita membuat sketsa tabel yang disesuaikan dengan rancangan layout anda.

Mudah kan? Selamat mencoba dan berkreasi.

0 thoughts on “Membuat Layout Web Dari Photoshop

  1. PERTAMAX di amannkan :ngacir:
    kayak nya hari ini tema tutorial ny all about web design :kisss izin comot ya gan buat materi ngajar ane
    :sundulgans :sundulgans

  2. wah, pertamaxnya sdah di ambil…ywd deh pake solar… 🙂
    mantap mba…mudah2an buka kreasi siswa yg lg mo tugas akhir… :thumbup:

  3. @raise
    linknya dak bisa dibuka disini atuh pak……maksudnya gimana………..link itu tentang website club punya ridho….hmmm kalo nggak salah udah pernah liat deh
    …hasil PSD nya yang mana pak raise 🙂 *agak nggak nyambung neh ak 🙂 *

  4. @Mb niar..
    Mb niar nih boleh lah ^^..ajari Photshp Mb 😀

    mksud Pak Raise tuh minta file Psd buatan Mb Niar…

    betuul tidak Father 😀

  5. @mbak niar…
    heheh…
    uppz…..
    diem2 be mbak n2 urusan kito n yng lain be jng dibak2 dsni..gawat…..heheh

    ampe skng mash nah bekas dikaki we gara2 sandal..he
    :thumbup:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.