bagi ilmu : desain web statis - khtm39.files.wordpress.com · statis dengan photoshop sebagai...
Post on 20-Mar-2019
231 Views
Preview:
TRANSCRIPT
Heru Riadyawan |http://riadyawan.wordpress.com|email : heavenguitar_ryd@yahoo.com| Page 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… 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…
Heru Riadyawan |http://riadyawan.wordpress.com|email : heavenguitar_ryd@yahoo.com| Page 2
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 : heavenguitar_ryd@yahoo.com| Page 3
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…
Heru Riadyawan |http://riadyawan.wordpress.com|email : heavenguitar_ryd@yahoo.com| Page 4
klik kanan pada layer Shape 1 dan pilih Rasterize Vector Mask…
lalu gunakan Eraser Tool (E) dan ubah Opacity = 30% dan hapus perlahan sampai
menghasilkan hasil kira2 seperti pada gambar berikut…
Selanjutnya Shift+ Ctrl+N lagi… gunakan Rectangle Tool (U) dan tarik dari pojok kiri
sampai pojok kanan seperti pada gambar…
Heru Riadyawan |http://riadyawan.wordpress.com|email : heavenguitar_ryd@yahoo.com| Page 5
klik kanan layer Shape 2 dan pilih Blending Options…
centang/pilih Gradient Overlay dan buat pola warna seperti pada gambar…
Heru Riadyawan |http://riadyawan.wordpress.com|email : heavenguitar_ryd@yahoo.com| Page 6
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 : heavenguitar_ryd@yahoo.com| Page 7
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 : heavenguitar_ryd@yahoo.com| Page 8
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…
Heru Riadyawan |http://riadyawan.wordpress.com|email : heavenguitar_ryd@yahoo.com| Page 9
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;
}
Heru Riadyawan |http://riadyawan.wordpress.com|email : heavenguitar_ryd@yahoo.com| Page 10
Setelah selesai, simpan file tersebut dengan nama misal ‘tema1’ dalam format .css,
jadinya tema1.css
2. Selanjutnya kita buat Javascript untuk menampilkan tanggal dan pesan harian, klik
File >> New (Ctrl+N) dan tuliskan tag2 berikut :
/* Pemformatan teks*/
td {
font:12px Arial, Helvetica, sans-serif;
color:white;
}
a {
font: 12px Arial, Helvetica, sans-serif;
color: white;
font-weight:bold;
line-height:16px;
letter-spacing:.1em;
text-decoration: none;
}
a:hover {
color: orange;
text-decoration: none;
}
/* Kelas2 Teks*/
.judulHalaman{
font: 24px Times New Roman, Helvetica, sans-serif;
color: orange;
font-weight:bold;
line-height:28px;
letter-spacing:.32em;
}
.Navigasi {
font:14px Arial, Helvetica, sans-serif;
color:orange;
font-weight:bold;
line-height:20px;
margin-top:0px;
}
.isiMateri {
font: 11px Arial, Helvetica, sans-serif;
color: orange;
line-height: 22px;
}
// Untuk menampilkan tanggal
var Nama_Hari=new Array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu");
var d=new Date();
var Nama_Bulan=new Array("Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September",
"Oktober", "November", "Desember");
var TODAY = Nama_Hari[d.getDay()] + ", " + d.getDate() + " " + Nama_Bulan[d.getMonth()] + " " + d.getFullYear();
Heru Riadyawan |http://riadyawan.wordpress.com|email : heavenguitar_ryd@yahoo.com| Page 11
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) :
// 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()] ;
<html>
<head>
<title>Save Our Earth</title>
<link rel="stylesheet" href="tema1.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="aksesoris.js">
</script>
</head>
<body>
<table align="center" width="730" border="0" cellspacing="0" cellpadding="0" style="border: green groove"><br>
<tr bgcolor="white">
<td width="730" colspan="5"><img src="header.gif" alt="header" width="730" height="140"
border="0"></td>
</tr>
Heru Riadyawan |http://riadyawan.wordpress.com|email : heavenguitar_ryd@yahoo.com| Page 12
<tr>
<td width="146" valign="top" bgcolor="white">
<tr bgcolor="white" align="center">
<td width="146" height="32" background="button.gif"><a
href="index.html">Home</a></td>
<td width="146" height="32" background="button.gif"><a
href="profil.html">Profil</a></td>
<td width="146" height="32" background="button.gif"><a
href="motto.html">Motto</a></td>
<td width="146" height="32" background="button.gif"><a
href="buku_tamu.html">Buku Tamu</a></td>
<td width="146" height="32" background="button.gif"><a
href="kontak.html"> Kontak </a></td>
</tr>
</td>
</tr>
<tr bgcolor="white">
<td bgcolor="white">
<tr>
<td height="21" bgcolor="green" colspan="1" align="center"
class="Navigasi">Menu :</td>
<td bgcolor="orange" colspan="5" align="right"><script
language="JavaScript" type="text/javascript">document.write(TODAY);</script>  </td>
</tr>
</td>
</tr>
<tr>
<td height="21" bgcolor="green" colspan="1" align="center"><br> >> Artikel <<
<br><a href="artikel1.html">1. Pejuang Lingkungan Hidup, Save Our Earth!!!</a>
<br><br><a href="artikel2.html">2. Save Our Earth!</a>
</td>
<td colspan="4" rowspan="4" align="center" bgcolor="white">
<table>
<tr>
<td colspan="4" align="center" class="judulHalaman">Selamat
berkunjung di Situs <i>"Save Our Earth"<i>...</td>
</tr>
</table>
Heru Riadyawan |http://riadyawan.wordpress.com|email : heavenguitar_ryd@yahoo.com| Page 13
Nah sekarang simpan file tersebut dengan nama misal index dalam format .html,
jadi sekarang kita punya file index.html
<table cellpadding="14" cellspacing="2">
<tr>
<td colspan="4" align="left" class="isiMateri">
         
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
Tulis pesan disini. Tulis pesan disini. Tulis pesan disini. Tulis pesan disini.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="21" bgcolor="green" align="center"><br> >> Pesan Hari ini <<
<br><em>"<script language="JavaScript" type="text/javascript">document.write(PESAN);</script> </em>  
</td>
</tr>
<tr>
<td height="21" bgcolor="green" align="center"><br> >> Cuap2... <<
<br>Coba nDesain web simple statis...
</td>
</tr>
<tr>
<td height="21" bgcolor="green" align="center">   </td>
</tr>
<tr bgcolor="white">
<td width="730" height="32" colspan="5" align="center" background="footer.gif" alt="footer" border="0">Didesain
oleh 'Siapa Yah' | coding Notepad++ | grafis Photoshop CS1 | © 2008</td>
</tr>
</table>
<br>
</body>
</html>
Heru Riadyawan |http://riadyawan.wordpress.com|email : heavenguitar_ryd@yahoo.com| Page 14
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
top related