1 Bagi Ilmu : Desain Web Statis Assalamu alaikum Huh akhirnya jadi juga nulis2 buat bagi ilmu desain web Tapi yang sederhana saja yah Langsung aja kal...
Bagi Ilmu : Desain Web Statis Assalamu’alaikum… Huh akhirnya jadi juga nulis2 buat bagi ilmu desain web… Tapi yang sederhana saja yah… Langsung aja… kali ini diriku akan membahas cara untuk mendesain sebuah halaman web statis dengan Photoshop sebagai desain-nya dan notepad++ untuk coding-nya… yah untuk Photoshop-nya bias diganti dengan The Gimp dan kalau untuk Notepad++-nya bias diganti Notepad biasa bawaan Windows… Tahap pertama dalam mendesain web adalah menentukan lebar halaman web dan menyesuaikan tema web dengan 5 menu utama… Diriku memutuskan untuk membuat halaman dengan lebar 730px seperti di blogger-blogger dan tema yang kupakai adalah ‘Save Our Earth’… dan untuk button kubagi rata 730 : 5 = 146px, jadi langsung saja buka Photoshop-nya… (diriku menggunakan Photoshop 8 (CS1)…), inilah langkahnya : Pertama, kita buat header-nya dulu… : 1. Buat file baru tekan Ctrl+N, beri nama ‘header’ dan set ukuran 730x140 pixels, lalu klik OK…
2. Berhubung tema-nya ‘Save Our Earth’ jadi headernya kita buat tema hijau… Klik Shift+Ctrl+N >> pilih OK untuk membuat layer baru, lalu pilih menu Filter >> Render >> Clouds untuk member efek kabut/awan… lalu pilih Filter >> Distort >> Shear… dan buat pola seperti pada gambar…
selanjutnya pilih Filter >> Blur >> Motion Blur… tentukan angle = 70 dan distance = 14 seperti pada gambar…
lalu pilih Filter >> Artistic >> Plastic Wrap, tentukan nilai Highlight Strength, Detail dan Smoothness = 14 seperti pada gambar… Heru Riadyawan |http://riadyawan.wordpress.com|email : [email protected]| Page 2
dan untuk meng-hijaukan tekan Ctrl+U dan centang Colorize, lalu tentukan Hue = 120, Saturation = 70 dan Lightness = 7… huh akhirnya backgroundnya jadi…
3. Nah sekarang tekan Shift+Ctrl+N lagi… gunakan Line Tool (U), ubah width jadi 2, lalu buat pola garis2 seperti pada gambar…
pilih layer Shape 2 dan klik+tahan tombol Shift+Alt sambil drag ke bawah seperti pada gambar berikut… huh akhirnya aksesoris jadi…
4. Berikutnya tekan Shift+ Ctrl+N, gunakan Custom Shape Tool dan pilih Shape seperti pada gambar berikut untuk membuat logo…
kemudian sambil tahan Shift (agar ukurannya proporsional), drag dari kiri atas ke kanan bawah sesuai kebutuhan… klik kanan layer Shape 3 dan pilih Blending Options… atau klik 2 kali saja pada layer Shape 3… centang/pilih Drop Shadow, Outer Glow, Inner Glow, dan Gradient Overlay, khusus untuk Gradient set warna dengan orang, kuning orange, dan dan untuk Style = Radial, seperti pada gambar…
Nah jadi logonya… Heru Riadyawan |http://riadyawan.wordpress.com|email : [email protected]| Page 6
5. Sekarang buat layer lagi dengan klik Shift+ Ctrl+N… gunakan Horizontal Type Tool (T) dan Buat judul serta motto… kalau diriku menggunakan huruf Monotype Corsiva dan Blending Optionnya centang Drop Shadow, Outer Glow, Inner Glow, dan Color Overlay warna putih, untuk judul ukuran 60pt dan motto 18pt… Nah jadi juga mbuat headernya… Simpan hasilnya dalam 2 format untuk jaga2, satu dengan format .psd dan satu dengan format .jpg/.jpeg atau dengan .gif saja… Ya sudah kita putuskan untuk menyimpan semua gambar dalam format .gif saja… Sekarang kita akan membuat button-nya, nie dia langkahnya : 1. Buat file baru tekan Ctrl+N, beri nama ‘button’ dan set ukuran 146x35 pixels, lalu klik OK… 2. Tekan tombol Ctrl+J untuk membuat duplikasi layer background menjadi layer 1… Klik kanan layer 1, pilih Blending Option, lalu centang/pilih Gradient Overlay, buat motif warna seperti pada gambar, OK 2x…
3. Gunakan Custom Shape Tool dan buat shape yang diinginkan, kalau diriku menggunakan shape bentuk daun dan kuatur blending optionnya dengan Drop Shadow, Outer Glow, Inner Glow dan Gradient Overlay warna orange kuning orange… Simpan dalam 2 format seperti biasa… Heru Riadyawan |http://riadyawan.wordpress.com|email : [email protected]| Page 7
Sekarang kita akan membuat footer-nya, langkahnya… : 1. Buat file baru tekan Ctrl+N, beri nama ‘footer’ dan set ukuran 730x35 pixels, lalu klik OK… 2. Tekan tombol Ctrl+J untuk membuat duplikasi layer background menjadi layer 1… Klik kanan layer 1, pilih Blending Option, lalu centang/pilih Gradient Overlay, buat motif warna seperti motif ‘warna button’… dan Simpan dalam 2 format seperti pada langkah sebelumnya… Terakhir kita buat background-nya, langkahnya… : 1. Buat file baru tekan Ctrl+N, beri nama ‘background’ dan set ukuran 64x64 pixels, lalu klik OK… 2. Tekan tombol Ctrl+J untuk membuat duplikasi layer background menjadi layer 1… Klik kanan layer 1, pilih Blending Option, lalu centang/pilih Gradient Overlay, buat motif warna seperti pada gambar berikut… (warna coklat tua-coklat muda dan style = diamond), lalu OK…
3. Ubah ukuran layer 1 dengan tekan Ctrl+T dan ubah W:50% dan H:50%... duplikatkan layer 1 dengan tombol Ctrl+J sampai jadi 4 layer dan tempatkan pada kiri-atas, kiri-bawah, kanan-atas, dan kanan-bawah…
4. Klik Shift+Ctrl+N untuk membuat layer baru dan gunakan Custom Shape Tool dengan bentuk yang disukai, misal diriku menggunakan bentuk seperti pada gambar berikut dan kutempatkan pada layer kanan atas dan kiri bawah dengan blending option pada Drop Shadow dan Color Overlay warna coklat sangat tua…
Pada langkah2 berikutnya kita akan menggunakan Notepad++ untuk coding html-nya, kalau belum punya bias pakai Notepad biasa kok, kalau Notepad++ itu hanya ada tambahan warna biar lebih mudah saja… Ini dia langkah2nya… : 1. Buka Notepad/Notepad++ dan berhubung kita akan menggunakan CSS eksternal, maka kita buat dulu file CSS-nya… Tuliskan tag2 seperti berikut… tapi sebelumnya untuk memudahkan saat coding, taruh semua file yang diperlukan dalam satu folder, yaitu file header.gif, button.gif, footer.gif, yang sudah kita buat sebelumnya dan file tema1.css, aksesoris.js, index.html, yang akan kita buat nanti… /* Pemformatan background */ body { background-color:white; background-image:url(background.gif); background-position:left bottom; background-attachment:fixed; border-color:orange; border-width:8px; border-style:Solid; scrollbar-face-color:green; scrollbar-highlight-color:lime; scrollbar-3dlight-color:lime; scrollbar-shadow-color:black; scrollbar-darkshadow-color:black; scrollbar-arrow-color:yellow; scrollbar-track-color:orange; }
// Untuk menampilkan pesan harian var Pesan_Hari_Ini=new Array( "Stop Merokok", "Buang Sampah pada Tempatnya", "Sedia Payung Sebelum Hujan", "Jaga Lingkungan Kita", "Awas Copet", "Jangan Lupa Sholat", "Jangan Lupa Zakat" ); var d=new Date(); var PESAN = Pesan_Hari_Ini[d.getDay()] ;
Simpan file tersebut dengan nama misal ‘aksesoris’ dengan format .js, jadinya kita punya file aksesoris.js 3. Selanjutnya tag2 untuk halaman utamanya, seperti biasa klik File >> New (Ctrl+N) : Save Our Earth <script language="JavaScript" type="text/javascript" src="aksesoris.js">
Kalau sudah jadi maka kira2 tampilannya sebagai berikut :
Catatan : Halaman yang dibuat kan baru satu yaitu ‘Home’ dengan nama file ‘index.html’ jadi kalau kita klik halaman lain, misal ‘Profil’ ya g’ akan muncul coz kan belum dibuat… nah coba kembangkan sendiri halaman2 lainnya… he7x… pelit nie bagi ilmu kok nanggung… (yah abiz mw gimana lagi… nie klo tak posting halamannya panjang bgdz… pas tak buat d’office aja ampe 14 halaman… gmn klo d’posting d’blog… apa kata dunia??? Ya g’ berkata apa2 dunkz… :b) klo dgn terpaksanya da request buat m’buat halaman yg laen ya g’ pa2 tak kerjain klo pas lega… Nah sekian dulu ah bagi ilmu dariku… cape’ nie… palagi kepala puyeng mikirin Proposal Penelitian g’ jadi2… (ya iyyaaalllaaahhh… klo Cuma dipikirin g’ bakal jadi… harusnya dikerjakan… xb) ditambah lagi PBO4 diriku lom bias ngerjainnya… gimana tow cara buat program pake J2ME buat nampilin ukuran ma resolusi layar??? Klo da yg tau mbo’ diriku dikasih tahu… :b He7x… malah ngobrol yg g’ jelas nie… ya dah lah semoga ilmu-nya bermanfaat aja lah… n maaf klo hasilnya g’ bagus coz emang diriku bisanya baru gitu aja… :b Riadyawan Heru Riadyawan |http://riadyawan.wordpress.com|email : [email protected]| Page 14
