bagi ilmu : desain web statis - khtm39.files.wordpress.com · statis dengan photoshop sebagai...

Heru Riadyawan |http://riadyawan.wordpress.com|email : [email protected]|

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…


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…


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…


klik kanan layer Shape 2 dan pilih Blending Options…

centang/pilih Gradient Overlay dan buat pola warna 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…


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…


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…



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…



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;

}


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();


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>


<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>


href="profil.html">Profil</a></td>


href="motto.html">Motto</a></td>


href="buku_tamu.html">Buku Tamu</a></td>


href="kontak.html"> Kontak </a></td>

</tr>

</td>

</tr>


<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>&nbsp </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>


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">

&nbsp &nbsp &nbsp &nbsp &nbsp

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> &nbsp

</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"> &nbsp </td>

</tr>


<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 | &copy 2008</td>

</tr>

</table>

<br>

</body>

</html>


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


Lampiran (wuih lampiran… kaya’ apa aja…)

bagi ilmu : desain web statis - khtm39.files.wordpress.com · statis dengan photoshop sebagai...

Documents