Belajar Photoshop untuk web design: Login page

Bahan praktek untuk membuat template sebuah login page website kali ini di foto oleh salah satu teman Facebook saya. Silakan unduh dibawah ini.

 

Sejatinya, Photoshop memang bukan untuk Web-Design. Tetapi kalau tidak salah, fitur untuk Web mulai ada pada Versi 6. Langsung saja, buka aplikasi Photoshop (saya menggunakan versi lama, yakni versi 7 di Windows 7 x64). Jika Photoshop anda lebih baru versinya, harap di sesuaikan saja 😀

Membuat Login-Page.

Untuk web desain, yang perlu diperhatikan adalah UKURAN Resolusi gambar. Misalnya, untuk versi Desktop Browser, gambar tsb saya resize menjadi 1020. Klik pada menu {image} {image size}. Ceklist constrain proportions, lalu saya isi  Width 1020 pada Pixel-Dimensions. height akan mengikuti proporsi gambar; jadinya otomatis.

photoshop-webdes-000

Mengapa 1020 pixel? Hmmm, karena target pengunjung saya minimal resolusinya 1024×600 (netbook). Hmmm, lantas, kalau menggunakan resolusi yang diatas full-hd (2560×1280) misalnya? nanti bisa diatasi dengan fungsi CSS 😀

 

photoshop-webdes-001Lalu dilanjutkan menggunakan Rectangle Tools.  Klik dan tahan; sorot ke Rounded rec. tools. Sehingga menjadi seperti ini. Warna tidak usah dipikirkan dulu.

photoshop-webdes-002Lalu perhatikan Window-Tool Layer. Rubah Rounded object tsb menjadi image (yang tadinya raster). Layer shape 1 akan terbentuk akibat aksi ini.

photoshop-webdes-003.pg

Sekarang saatnya bermain-main dengan properti layer shape 1. Klik kanan pada layer tsb, lalu pilih blending Options. sub Window Layer style/Blending Option akan muncul. karena warna Hijau tidak matching, akibat saya tadi asal pilih warna sewaktu pembuatan rounded shape. Saatnya merubah warna tsb, menjadi warna yang lebih sesuai. Ini murni imajinasi, tidak ada cara teknisnya.

Klik Color-overlay lalu klik kotak warna untuk memunculkan Color-Picer (sub-sub Window).

photoshop-webdes-004Biarkan opacity tetap 100%. Blend Normal. lalu pilih ceklis Stroke, saya pilih warna merah. Stroke disini, warna pinggiran Object pada layer ybs. Size stroke saya isi 5 pixel. Opacity 100% blend normal.

photoshop-webdes-005

Oke, sampai disini Kotak untuk form Login, sudah siap. Sebagai pemanis, saya mainkan Opacity layer menjadi 60%.

photoshop-webdes-006Lalu saya tambahkan tulisan LOGIN diatas kotak tsb, klik icon Horizontal Type Tool. Lalu Ketikkan Login, dan pindahkan ke atas kotak tsb dengan icon Move-Tools. Lalu klik kanan pada layer hurup tsb, ulangi lagi langkah pada proses pembuatan kotak diatas.

photoshop-webdes-007b

Sekarang tahap pemotongan object (slicing). Klik ikon Slice tools:

photoshop-webdes-008

Buat kotak yang lebih kecil di dalam layer Shape 1.

photoshop-webdes-009Buat agar tidak mengenai bingkai merah dan tidak mengenai Hurup.

Hasil slicing, akan otomatis menghasilkan Auto Slice seperti ini:

photoshop-webdes-010

Hmmm, karena membutuhkan header dan sedikit news contents, saya Slice lagi, sehingga hasilnya seperti ini. caranya gampang saja, saya memotongnya seperti ini (kotak kuning adalah pergerakan mouse saya dalam membuat kotak).

photoshop-webdes-012 photoshop-webdes-011Sehingga Slice #2 akan ruangan khusus untuk Isi halaman, misalnya nama website, dan sedikit informasi.

Saatnya menyimpan olahan ini menjadi jpg dan html, tetapi save dulu menjadi file .psd terlebih dahulu. agar bisa di edit dilain waktu.

Untuk menghasilkan output untuk keperluan web, klik pada menu file: Save image for web. Akan memunculkan dialog-box Save for web seperti ini:

photoshop-webdes-013tekan control-a (select all slice). lalu pilih ke Jpeg Medium (size/color balance). lalu tekan tombol Save. buat folder baru untuk export file jpg dan htm ini. Beri nama sesuai ke inginan. Dalam hal ini saya beri nama login.htmphotoshop-webdes-014

Hasil slicing dan export ke web akan menghasilkan seperti ini:

photoshop-webdes-015Beberapa file jpg dan satu file htm. File login.htm itu yang akan di edit untuk kepentingan Web. Untuk itu gunakan text-editor favorit anda.

Hmmm, perhatikan file-file jpg hasil slicing tadi. Yang jadi pedoman untuk editing pada file login.htm adalah login_02.jpg & login_07.jpg. file tsb akan di rubah fungsi nya pada di login.htm

temukan tulisan ini pada file login.htm

<IMG SRC=”images/login_05.jpg” WIDTH=333 HEIGHT=137 ALT=””>

lalu remarks menjadi

<!– <IMG SRC=”images/login_05.jpg” WIDTH=333 HEIGHT=137 ALT=””> –>

dan diatas baris tsb ada tag html <TD> edit seperti ini

<TD background=”images/login_05.jpg” valign=”top” align=”left” >

Artinya area TD bisa ditempati object untuk keperluan form 😀

Memang, bahasan ini membutuhkan skill html dasar. Tetapi kira-kira pola pikirnya begini. <img src> di remarks (agar tidak terbaca oleh browser). Lalu ambil src nya letakkan pada <TD> diatasnya.

Selanjutnya, dibawah tag <img> yang sudah diremarks. tambahkan script form ini

 

<form method=”post” action=”somescript.php” name=”someformname”>
<table border=0 cellpadding=”4″ cellspacing=”2″>
<tr><td>Username:</td><td> <input type=”text” value=”” name=”txtusername”></td>
<tr><td>Password:</td><td> <input type=”password” value=”” name=”txtpassw”></td>
<tr><td> </td><td><input type=”submit”></td>
</tr></table>
</form>

 

Lakukan juga pada slice untuk kepentingan nama & info seperti yang dirancang diatas. caranya sama, temukan file jpg yang akan di bebaskan areanya

<IMG SRC=”images/login_02.jpg” WIDTH=534 HEIGHT=741 ALT=””>

diremarks, lalu edit properti TD diatasnya.

<TD ROWSPAN=3 background=”images/login_02.jpg” valign=”top” align=”left”>

Sehingga akan menghasilkan output pada browser seperti ini:

photoshop-webdes-016

Sedikit tweaking: temukan

<TABLE WIDTH=1020 BORDER=0 CELLPADDING=0 CELLSPACING=0>

tambahkan/edit:

<TABLE WIDTH=1020 BORDER=0 CELLPADDING=0 CELLSPACING=0 align=”Center”>

dan tag <body>

<BODY BGCOLOR=”#ffffff” LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

menjadi

<BODY BGCOLOR=”#000000″ LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

Artinya, membuat Table utama penampung gambar ketengah layar browser, dan latar belakang yang tadinya puith #ffffff menjadi hitam #000000. Sehingga, pada resolusi full-hd (saya kebetulan menggunakan resolusi 1920×1080 @monitor 1) tampilan masih layak lah.

photoshop-webdes-019

 

Dan jadilah login page sederhana. Ini menggunakan prinsip TABLES untuk Layouting web; yang katanya sudah tidak relevan lagi. Sekarang proses layouting menggunakan CSS. Photoshop juga support untuk layouting CSS koq. Tetapi proses editing file htm nya tidak semudah seperti diatas. Hanya bedanya ketika menyimpan lakukan prosedur ini:photoshop-webdes-017

photoshop-webdes-018

 

Jika dibuka dengan editor file .htm nya akan berisikan (table-less):

<HTML>
<HEAD>
<TITLE>tut 2</TITLE>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=iso-8859-1″>
<!– ImageReady Styles (tut 2.psd) –>
<STYLE TYPE=”text/css”>
<!–

#login-01 {
position:absolute;
left:0px;
top:0px;
width:18px;
height:765px;
}

#login-02 {
position:absolute;
left:18px;
top:0px;
width:534px;
height:741px;
}

#login-03 {
position:absolute;
left:552px;
top:0px;
width:468px;
height:78px;
}

#login-04 {
position:absolute;
left:552px;
top:78px;
width:78px;
height:687px;
}

#login-05 {
position:absolute;
left:630px;
top:78px;
width:333px;
height:137px;
}

#login-06 {
position:absolute;
left:963px;
top:78px;
width:57px;
height:687px;
}

#login-07 {
position:absolute;
left:630px;
top:215px;
width:333px;
height:550px;
}

#login-08 {
position:absolute;
left:18px;
top:741px;
width:534px;
height:24px;
}

–>
</STYLE>
<!– End ImageReady Styles –>
</HEAD>
<BODY STYLE=”background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;”>
<!– ImageReady Slices (tut 2.psd) –>
<DIV ID=”login-01″>
<IMG SRC=”images/login_01.jpg” WIDTH=18 HEIGHT=765 ALT=””>
</DIV>
<DIV ID=”login-02″>
<IMG SRC=”images/login_02.jpg” WIDTH=534 HEIGHT=741 ALT=””>
</DIV>
<DIV ID=”login-03″>
<IMG SRC=”images/login_03.jpg” WIDTH=468 HEIGHT=78 ALT=””>
</DIV>
<DIV ID=”login-04″>
<IMG SRC=”images/login_04.jpg” WIDTH=78 HEIGHT=687 ALT=””>
</DIV>
<DIV ID=”login-05″>
<IMG SRC=”images/login_05.jpg” WIDTH=333 HEIGHT=137 ALT=””>
</DIV>
<DIV ID=”login-06″>
<IMG SRC=”images/login_06.jpg” WIDTH=57 HEIGHT=687 ALT=””>
</DIV>
<DIV ID=”login-07″>
<IMG SRC=”images/login_07.jpg” WIDTH=333 HEIGHT=550 ALT=””>
</DIV>
<DIV ID=”login-08″>
<IMG SRC=”images/login_08.jpg” WIDTH=534 HEIGHT=24 ALT=””>
</DIV>
<!– End ImageReady Slices –>
</BODY>
</HTML>

Untuk proses penimpaan area? agak panjang penjelasannya. karena akan membahas konsep CSS tingkat menengah, apalagi ditambah versi browser yang banyak :O

Bahasan Photoshop untuk web-design disudahi dulu sampai disini, dilain kesempatan akan saya buat tutorial untuk membuat template sebuah website, dengan prinsip yang sama dengan bahasan kali ini. Slice, layers, Optimasi via save-for-web dll.

 

 

 

Post By Tommy Wiranto (68 Posts)

Rasa ingin tahunya, terkadang 101% -- petualang yang tertahan. Terkadang sombong, tetapi pada tempatnya.

Website: →

Connect