Membuat Layout Desain Awal dengan Photoshop

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat Layout Desain Awal dengan Photoshop"

Budi Setiabudi
7 tahun lalu
Tontonan:

1 2 Websiteku Membuat Layout Desain Awal dengan Photoshop jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height : 875 pixel Resolution : 72 pixel/inch Background Content : Transparent Pilih rounded retangle tool pada tool panel dan samakan setingan dengan gambar dibawah kemudian buat bidang berbentuk segi panjang vertical seperti pada gambar dibawah click kanan pada shape 1 (bidang yang anda buat) di bagian panel layer disebelah pojok kanan bawah kemudian pilih blending option -> click gradient dan pilih gradasi warna yang anda sukai... pastikan warna bawah adalah warna dasar putih

Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut : buatlah bidang untuk panel menu dengan rounded retangle tool pada tool

kiri atas sehingga anda mendapatkan gambar seperti dibawah ini buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya

2 Hasil dari gradasi yang anda buat akan menghasilkan gambar seperti berikut : buatlah bidang untuk panel menu dengan rounded retangle tool pada tool panel seperti sebelumnya beri sentuhan warna yang berbeda dengan layer pertama tetapi tidak melenceng dari tema anda, kemudian tempatkan pada sebelah kiri atas sehingga anda mendapatkan gambar seperti dibawah ini buatkan lagi sebuah bidang untuk daftar menu yang kali ini lebih kecil dari sebelumnya dengan rounded retangle tool pada tool panel, tempatkan sejajar dengan bidang yang anda buat sebelumnya putarkan sampai arah kemiringan 25 0 dengan move tool

3 kemudian copy layer bidang dengan cara tekan ctrl+alt+shift dan geser kebawah sebanyak 4 kali. Beri sentuhan warna pada bidang yang telah anda buat sehingga akan tampak seperti berikut: Ketik daftar menu gunakan Type Tool dengan lambang (T) pada tool panel Isi text pada bidang untuk daftar menu dengan : Halaman Utama, Tentang Saya, Galerry Foto dan Link. Kemudian pada sebelah kanan beri Logo dan judul Website yang sesuai dengan keinginan anda. Sampai tahapan ini kita sudah berhasil merancang layout Websiteku dengan tampilan sebagai berikut Gunakan Slicetool kemudian slice Layout website menjadi 6 bagian yaitu : 4 slice untuk daftar menu, 1 slice untuk logo, dan 1 lagi untuk untuk content/ isi web.

4 Sekarang anda tinggal menyimpanya saja. Pilih File->Save For Web dan akan muncul wizard seperti berikut pada opsi dibawah save, anda bisa menentukan format gambar yang akan di save mulai dari gif, png, jpg. apabila sudah memilih sebelum di save beri nama file anda dengan index, pilih opsi HTML and Images, simpan layout anda pada satu folder yang anda beri nama Websiteku Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan mark-up atas file index.html yang telah kita save tadi dengan macromedia Dreamweaver. Mark-Up Tag HTML dengan Dreamweaver Setelah desain web di-slice dengan photoshop, sekarang saatnya kita melakukan sedikit modifikasi dengan menggunakan Dreamweaver. Pada

5 6 saat saya menulis artikel ini saya menggunakan dreamweaver versi 8, di versi yang lebih tinggi seperti Dreamweaver CS 3/ 4/ 5 pada dasarnya tidak akan jauh berbeda. Silahkan jalankan aplikasi buatan adobe ini dan Anda akan melihat tampilan seperti gambar dibawah ini: buka file index.htm yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dreamweaver delete gambar slice yang ke 6 (enam) atau gambar dengan nama index_06.png, yaitu gambar yang digunakan untuk isi content. Jangan Heran bila tampilan layout website menjadi hancur seperti gambar dibawah, atur tabel HTML sehingga tampilan web menjadi normal lagi dengan cara menggeserkan mouse pada garis titik-titik (kolom table) di tampilan design dreamweaver Setelah anda mengatur tata letak gambar pada tabel pindahkan opsi view ke show code view sehingga anda dapat melihat Tag-tag Mark-up HTML seperti berikut :

6 Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS). Bagi yang belum mengenal CSS silahkan menuju artikel berikut Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie), apabila anda sudah paham silahkan tambahkan tag berikut kedalam tag head HTML anda <style type="text/css">.content { background:url(images/index_06.png) bottom; padding:20px 20px 40px 20px; } </style>? Dengan penambahan tag tersebut struktur HTML anda akan menjadi seperti code dibawah ini: <html> <head> <title>untitled-1</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css">.content { background:url(images/index_06.png) bottom; padding:20px 20px 40px 20px; } </style> </head> <body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheig  <table id="table_01" align="center" width="700" height="377" border="0" cellpad <td height="94"> <img src="images/index_01.gif" width="281" height="94" alt=""></td> <td rowspan="4"> <img src="images/index_02.gif" width="419" height="328" alt=""></td> <td height="76"> <img src="images/index_03.gif" width="281" height="76" alt=""></td> <td height="64"> <img src="images/index_04.gif" width="281" height="64" alt=""></td> <td height="94"> <img src="images/index_05.gif" width="281" height="94" alt=""></td> <td colspan="2" class="content" ></td> </table> ?

7 39 40 </body> </html> Dengan demikian maka kerangka website anda sudah jadi. Langkah selanjutnya kembalikan tampilan dreamweaver ke design view "Show Design View" kemudian isi bagian kolom content yaitu pada tag <td colspan="2" class="content" > text </td> dengan hal-hal yang ingin anda publikasikan pada website anda. Setelah selesai save HTML dengan nama index.html, lalu save as dengan nama file yang berbeda about.html pada folder yang sama, save as lagi dengan nama file gallery.html dan yang terakhir link.html sehingga kini anda memiliki 4 (empat) file html yang berbeda (semuanya harus dalam folder yang sama). Isi kolom content pada masing-masing file yang sudah anda buat sesuai dengan tema masing-masing file, yakni isi halaman utama website, tentang kita, galeri dan link. saya contohkan dibawah merupakan isi halaman utama Langkah terakhir setelah mengisi semua file adalah menghubungkan/melink-an file yang satu dengan yang lain. caranya mudah saja. click setiap menu link pada website kita lalu pada properties pilih link dan click icon folder seperti dapat dilihat pada gambar dibawah : pilih file yang ingin di hubungkan

8 Lakukan hal yang sama dan hubungkan semua file, selesailah project anda, kini anda mempunyai website yang anda rancang sendiri... Catatan Penting : Pembuatan website diatas merupakan salah satu cara perancangan web yang berbasis Table. selain menggunakan table sebetulnya ada cara lain yaitu dengan menggunakan div atau campuran keduanya div + table. kedua cara memiliki plus minus masing-masing dan anda akan mengerti dengan sendirinya seiring dengan pengetahuan dan pengalaman anda dalam membuat website. Anda bisa mendownload dan melihat demo dari tutorial diatas dengan ukuran lebar gambar lebih besar yaitu 980px untuk mempermudah pembelajaran anda Untuk Anda yang memang berniat belajar membuat website secara serius berikut ini tahapan belajar desain web yang dapat anda temukan di w3function sesuai dengan urutannya Daftar Referensi tag HTML dan HTML5 Beserta Kegunaannya Pengertian dan penjelasan Dasar CSS Cara Penerapan CSS pada HTML Penggunaan CSS pada Text, Fonts, Links, List dan Table Penggunaan CSS pada Box Model : Border, Padding, Margin, Outline CSS 3 untuk border dan background Tips dalam Menuliskan CSS yang Baik Belajar membuat layout desain website dengan tag table (Newbie) Belajar membuat layout desain website dengan tag tableless (Medium) Belajar membuat layout template desain website HTML5 semantic (Advance) Belajar membuat desain website responsif (Skilled) Semoga bermanfaat :) Anda juga mungkin suka dengan artikel ini : Tahapan Membuat Template Design Website Semantic dengan Menggunakan HTML 5 Tutorial Membuat Desain Website Responsif Bagian 2 - Content Website dan Tampilan Iklan Responsif Tutorial Membuat Desain Website Responsif Bagian 1 - Navigasi Menu Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 3 Daftar Referensi tag HTML dan HTML5 Beserta Kegunaannya

dokumen-dokumen yang mirip

Cara Mengelola Isi Halaman Web

Cara Mengelola Isi Halaman Web MEMBUAT, MEMBUKA, DAN MENYIMPAN DOKUMEN HTML Membuat dokumen HTML kosong baru : - Pada tampilan windows, pilih menu File > New. Untuk membuka file HTML yang sudah ada : -