Fundamentals of Interface Design
Oleh Mohmad Juri
PB 2
Asas Reka Bentuk Paparan Utama 3
Apa Yang Anda Perlukan 4
Bahagian 1: Konsep 5
Bahagian 2: Bagaimana Susun Aturnya? 9
Bahagian 3: Visualkan Susun Atur 13
Bahagian 4: Body 18
Bahagian 5: Banner 30
Bahagian 6: Ikon 39
Bahagian 7: Pengisian 43
Bahagian 8: Slice 47
Bahagian 9: html 49
Kandungan
PB 3
Dalam tutorial ini akan ditunjukkan bagaimana teknik mereka bentuk Paparan Utama atau muka pertama laman web, juga dinyatakan beberapa isu yang perlu difikirkan bagi membina sebuah laman web.
Nota: Diharap anda mempunyai sekurang-kurangnya pengetahuan asas menggunakan aplikasi photoshop.
Asas Reka Bentuk
Paparan Utama
PB 4
Apa Yang Anda Perlukan
• Sebatang pensel dan kertas.
• Adobe Photoshop.
PB 5
Bahagian 1: Konsep
Jenis apakah laman web ini?
Ingin membina sebuah laman web. . . tetapi bagaimana rupa bentuknya? Jika anda tidak tahu maka mustahil anda dapat membuatnya.
Ambil sekeping kertas dan sebatang pensel, catatkan beberapa idea.
Fikirkan sekiranya perlu ditambah dengan satu atau dua lagi seksyen. Anda juga perlukan satu seksyen yang khusus untuk contact, dan mungkin satu seksyen lagi untuk berita.
PB 6
Adakah Laman Web Anda Akan Semakin Berkembang?
Adakah akan menjadi sebuah laman web yang besar? Jika demikian perlu dipertimbangkan implikasi pertumbuhannya.
Reka bentuknya perlu bersesuaian, supaya pengunjung boleh mengakses banyak maklumat dengan cepat dan mudah.
Mungkin juga perlu menambah seksyen baru di masa akan dating.
PB 7
Penjenamaan (Branding)
Bagaimana dengan tema dan penjenamaan? Apakah kesan kepada pengunjung yang diharapkan?
Bolehkah laman web itu tiba-tiba terkenal hanya kerana paparan sahaja?
Penjenamaan adalah satu stragegy yang digunakan dengan meluas dalam perniagaan.
Sebagai contoh; Apple syarikat komputer dapat dikenal pasti pada keseluruhan produk-produk mereka yang berwarna putih dan lembut pada setiap bucunya.
PB 8
Siapa Yang Akan Menjadi Pengunjung?
Siapakah yang dijangka menjadi pengunjung? Apakah majoriti pengunjung mempunyai monitors bersaiz besar?
Sekiranya ini benar, bolehlah mereka bentuk laman web yang lebih besar,
Mengambil semua pertimbangan yang perlu dan mencatatkan semua idea, kerja mereka bentuk laman web akan menjadi lebih mudah.
PB 9
Bahagian 2:
Bagaimana Susun Aturnya?
Dalam pembangunan laman web terdapat beberapa rekaan susun atur yang terpilih dan dipertimbangkan sebagai satu piawaian.
Susun Atur Satu Ruang
Kelebihan:
Ia sesuai bagi meletakkan pene- kanan kepada perkara tertentu atau imej. Susun atur ini adalah paling sesuai untuk galeri foto.
Kelemahan:
Ia bukan susun atur yang terbaik untuk diisi dengan banyak mak- lumat. Jika hanya mempunyai be- berapa muka surat dalam laman web, maka perkembengan yang in- gin dilakukan akan terbatas kerana kesempitan ruang.
PB 10
Susun Atur Dua Ruang
Kelebihan:
Susun atur ini kerap dilihat di internet, dan sepatutnya, ia adalah satu penyelesaian yang anggun untuk laman-laman web bersaiz kecil dan saiz sederhana. Dengan butang-butang menu di atas dan di sebelah ia memberi ruang kepada pertumbuhan.
Kelemahan
Bagaimanapun ada juga beberapa kelemahannya. Terutamanya ber- kaitan sub-seksyen. Susun atur ini hanya membenarkan maksimum 2 bahagian yaitu Menu dan Kand- ungan. Masalah yang akan timbul apabila sub-section ingin diwu- judkan.
PB 11
Susun Atur Tiga Ruang
Kelebihan:
Ia adalah susun atur yang paling kerap dilihat dalam laman web.
Dengan tiga bahagian yang ber- beza untuk navigasi, pertumbu- han adalah hampir tidak menjadi masaalah. Dengan mudah anda memperoleh sehingga tiga tahap navigasi (yang terbanyak yang anda mahukan) dan mata anda dengan mudah dapat membaca dari satu bahagian kepada yang lain.
Kelemahan
Kekurangan terbesarnya adalah, ia boleh menjadi sempit dengan cepat (bergantung kepada per- kembangan laman web).
Susun Atur Lain
Nyata ini bukan satu-satunya susun atur terbaik, cuba bermain dengan empat ruangan susun atur atau sesuatu yang liar seperti menggunakan perisian Flash misalnya.
PB 12
Berubah Atau Tetap?
Bagaimana bentuk susun atur yang akan dibina? Berubah Atau Tetap? Susun atur yang berubah boleh menyesuaikan saiznya mengikut sebarang skrin tetapi mempunyai had-had susunan grafiknya.
Susunatur yang tetap, kekal di satu resolusi yang tertentu dan mungkin sebahagian grafiknya tidak boleh dilihat di skrin-skrin yang kecil, tetapi ia adalah lebih mudah untuk pereka bentuk membuatnya.
Apabila anda hendak membuat keputusan fikirkanlah kesannya kepada pengunjung.
PB 13
Bahagian 3:
Visualkan Susun Atur
Pensil Dan Kertas
Sebelum melakukan kerja-kerja dengan menggunakan komputer, lakarkan idea-idea secara bertulis.
Langkah ini adalah penting kerana ia membabitkan idea dan kreativiti.
PB 14
Lakaran #1
Ini adalah contoh lakaran pertama untuk paparan muka utama. Ia adalah susun atur tiga ruang seperti apa yang inginkan.
Jadi teruskan melakarnya. Sukakan jumlah panel-panel yang ada, tetapi ia masih kelihatan tidak mantap.
PB 15
Lakaran #2
Terus memperbaiki lakaran itu dengan harapan untuk melihat sesuatu yang lebih baik.
Dirasakan seksyen Portfolio juga perlu di perbaiki.
PB 16
Lakaran #3
Setelah melakar beberapa kali di atas beberapa helai kertas, akhirnya berpuas hati pada lakaran yang terakhir.
Ia mengandungi kesemua panel yang perlukan dan kelihatan mantap.
Tetapi belum membuat keputusan muktamat untuk menggunakan reka letak ini.
PB 17
Lakaran #4
Mulakan dengan membuat komposisi warna.
Dengan menggunakan sedikit warna biru muda, kesan dari warna ini telah menarik hati, maka keputusan pun diambil untuk menggunakan reka bentuk ini sebagai pangkalan laman web.
Menyedari lakaran-lakaran ini masih lagi longgar dan belum ada perinciannya sama sekali, usaha mencari idea perlu diteruskan. Setelah menambah sedikit demi sedikit idea ke dalamnya, rupa laman web terakhir yang dicari kini nampak semakin jelas.
PB 18
Bahagian 4: Body
Photoshop
Buka aplikasi photoshop dan buat satu dokumen baru. Set saiznya kepada 800 x 600 pixels.
Tekan OK.
PB 19
Setelah menekan OK anda akan dapati satu dokumen baru dengan background_content adalah transparent. Ia adalah asas utama atau pun dipanggil ‘Layer 1’.
Nota: Layers adalah lapisan-lapisan yang mengandungi butiran kerja dalam proses untuk menghasilkan sesuatu artwork
PB 20
Klik huruf ‘fx’ yang berada di bawah Layers Palette untuk mendapatkan menu Layers Eff ect.
Pilih pada Gradient Overlay.
PB 21 Klik untuk edit gradient
PB 22
Klik pada Color Stop
PB 23
Klik untuk menukar warna Color Stop
PB 24
Pilih warna ini: 99ccff dan tekan OK
Klik
PB 25
Pilih pada Paint Bucket Tool dan klik di atas dokumen.
PB 26 Sepatutnya ia kelihatan seperti ini.
Jadi ini adalah latar belakang atau background yang akan digunakan pada paparan muka utama laman web.
PB 27 Teruskan ke Menu - View - pilih Ruler.
PB 28
Horizontal dan Vertical ruler kelihatan di sebelah atas dan kiri dokuman.
Pastikan ruler adalah dalam kiraan pixel.
Pixel adalah unit kiraan selain daripada Inch, Centimeters, Pica dll.
Pixel biasanya digunapakai untuk kerja-kerja berkaitan laman web.
PB 29 Menu: pilih Edit - Preferences - Unit & Rulers.
Tukarkan Rulers kepada Pixel.
Tekan OK.
Tukarkan unit kiraan Rulers kepada Pixel.
PB 30
Bahagian 5: Banner
Banner atau Header adalah pengenalan yang memaparkan identiti sesebuah laman web.
Ia mengandungi nama, logo dan warna organisasi atau individu yang membangunkan laman web tersebut.
Untuk membuat banner, bawa guide daripada atas dokumen ke sekitar 60pix ke bawah.
PB 31
Besarkan view kepada 1600% supaya guide untuk ketinggian banner dapat dibuat de ngan tepat iaitu 60 pixels ke bawah.
PB 32 Kecilkan semula view kepada Actual Pixels.
Teruskan ke menu window pilih Layers.
PB 33
Klik pada ikon create new layer, namakan layer yang baru ‘black bar’
Aktifkan layer black bar.
Pilih Rectangular Marquee Tool untuk langkah seterusnya.
PB 34 Pastikan work space adalah Web Design.
Heretkan Rectangular Marquee Tool dari penjuru atas sebelah kiri, ke penghujung guide di sebelah kanan (60 pixels).
PB 35 Klik pada swatches, klik pada swatches option.
Pilih pada web safe color.
PB 36 Pilih pada warna #000000
Aktifkan Layers Pallet dan klik pada ikon - create a new layer. Tukarkan nama layer yang baru kepada ‘banner’
PB 37
Pastikan, Selection, Paint Bucket Tool, Color #000000 dan Layer banner aktif, klik di dalam kawasan selection.
Artwork akan kelihatan seperti di bawah.
PB 38
Masih pada layer banner, tukar kepada Pencil Tool, set Brush Diameter kepada 1 pix dan tukar warna kepada #ffffff.
Lukiskan garisan halus di paras 55 pix, dari hujung kiri ke hujung kanan banner.
Save.
PB 39
Bahagian 6: Ikon
Ikon atau simbol sering digunakan sebagai link button di kebanyakan laman web. Di sini di tunjukkan bagaimana teknik untuk membuat ikon.
PB 40 1. Lakaran pensil
3. Dari path panel pilih ‘make selection’
5. Biarkan selection aktif, buat layer baru.
2. Lukiskan ‘path’ menggunakan pen tool
4. Ikut setting ini
6. Pergi ke menu Edit, pilih Fill Ikut tekan OK.
PB 41 Proses seterusnya adalah scale, copy and paste.
Hasilkan ikon yang seterusnya menggunakan teknik yang sama. Gunakan Type Tool untuk menamakan setiap ikon tersebut.
PB 42
Gunakan Zoom Tool klik di atas banner di sebelah kiri. Gunakan Type Tool, masukan nama laman web ‘Laman Web Saya’ gunakan font Arial Black, size 27pt. warna #ffffff.
Banner yang telah dilengkapi dengan nama dan beberapa link ikon.
PB 43
Bahagian 7: Pengisian
Seperti yang dirancang dalam lakaran, reka bentuk Paparan Utama laman web ini diteruskan dengan membuat bahagian-bahagian untuk diisi dengan seksyen atau panel kandungan.
PB 44
Letakkan Guide pada paras ke bawah, setiap satu di 65, 300, 310, 570 dan 585.
Guide dari kiri ke kanan setiap satu di 145, 155, 610 dan 620.
PB 45 Di Layer Pallet, buat layer baru di atas layer; home.
Namakan layer baru itu; ‘bahagian’
Di Layer bahagian, bentuk 3 bahagian menggunakan Rectangular Marquee Tool, Bentuk bahagian-bahagian dengan menggunakan warna #ffffff.
PB 46
Gunakan teknik-teknik yang telah dipelajari bagi melengkapkan keseluruhan isi kan dungan Paparan Utama laman web.
Gunakan Place atau Open copy pase untuk memasukan gambar.
Setelah selesai save file tersebut dalam format PHD bagi kegunaan di lain masa.
Nota: Untuk proses selanjutnya; Save for Web dan namakannya ‘demo_slice’ di bawah Save As Type pilih Images Only (.gif). Dengan cara ini terdapat dua file untuk simpanan sementara salah satu akan diguna bagi proses seterusnya,
PB 47
Bahagian 8: Slice
Buka fail yang bernama demo_slice, gunakan fail ini bagi proses seterusnya, ia dapat mengelak daripada merosakan fail yang asal.
Slice adalah proses bagi memecahkan artwork kepada Bahagian-Bahagian. Ini membolehkan setiap Bahagian diubah suai apabila artwork tersebut dibuka di dalam Dreamweaver.
Bagaimanapun, sebelum Slice dilakukan rancanglah dengan, sebagai contoh ikon ‘home’ dan
‘tutorial’ akan diguna sebagai ‘Link Button’ dalam paparan utama ini, oleh itu Slice harus dibuat dengan kemas, teliti biar pun mengambil sedikit masa.
Slice dilakukan dengan menggunakan Slice Tool dan Guide, Slice adalah proses terakhir yang dilakukan di dalam Photoshop, melalui Menu - View - Grids & Guides, aktifkan Snap to Guide supaya setiap slice yang dibuat dapat diselaraskan.
PB 48
Slice dan jenisnya
Kepingan-kepingan Slice dikategorikan mengikut jenis kandungannya dan mengikut cara slice dilakukan.
1. User Slices - slice menggunakan Slice Tool.
2. Layer-Base Slice - dari layer.
3. Auto Slice - slice tambahan yang digenerated oleh komputer bagi memasukkan imej yang selebihnya.
Setelah selesai melakukan slice, Perhatikan nombor-nombor slice yang tidak berurutan, ini ker- ana setengahnya adalah Auto Slice. Bagaimanapun Auto Slice boleh ditukarkan kepada User Slice dengan menggunakan Slice Select Tool, klik pada bahagian Auto Slice - right klik Promote to User Slise. Auto Slice juga akan dapat dilihat di dalam folder se telah save dibuat.
PB 49
Bahagian 9: html
Proses seterusnya adalah menukarkan artwork kepada HTML dan Images.
Menu - File - Save for Web - teliti setting yang bersesuaian tekan OK,
Nota: Perhatikan pada nombor-nombor slice, yang berwarna biru terang adalah User Slice, sementara yang berwarna grey adalah Auto Slice.
PB 50
Save Optimized As; ikut seperti setting di bawah. Sebelum itu buat satu folder baru dan na- makan; slice, folder ini akan menyimpan kesemua potongan slice yang terjadi.
Lihat di dalam folder slice, terdapat 2 item iaitu images folder dan HTML.
