Web Deshing Layout

Welcome back friend ! tutorial ini menjelaskan bagaimana membuat sebuah layout yang interaktif. Penggabungan dari designing web layout menggunakan photoshop dan Editing dengan HTML+CSS. Kemudian mengimplementasikannya menggunakan jQuery Ajax saat meload PHP Content

Yang lu perlukan adalah:
-Photoshop
-HTML+CSS
-jQuery Ajax
-PHP

Part I Designing Website Layout

Buka Photoshop lu, bikin ukuran kanvas kaya gini:

Pilih Rectangle Marquee Tool, bikin objek header ke gini:

Apply beberapa layer style :

Liat dlu hasilna

Sekarang bikin garis berwarna putih make single row marquee tool, antara gradien dan drop shadow. fill line make warna putih

Gunakan rounded rectangle tool bwat mbikin navigation button, gunakan radius sesuai keinginan lu

apply layer style

Semua gradien ada dalam paket download tutorial na

Pencet [CTRL+Click] pada layer navigation button, bwat mbikin seleksi sekitar button.

Pilih seleksi Eliptical Marquee Tool dengan option option : Intersect with selection. Truzzz buat seleksi oval diatas seleksi sebelumna

Lu bakalan dapet hasil seleksi ke gini

Pencet [CTRL+D] bwat Deselect
Tros transform objek na vertikal, dengan mencet [CTRL+T] -> Flip Vertical
Pilih menu Filter > Blur > Gaussian Blur. Kasiin 2 px radius.
dan ubah blending layerna menjadi Overlay

Kasi text button na juga

Lu bisa group ksmua layer navigasi ke dalam satu group, dan duplikat gorup na mnjadi beberapa group

Hampir selesai layoutna, kasiin objek icon dan text sebagai title web na

Terakhir bikinin footer dengan cara sederhana kaya mbikin header

Review dlo hasil akhir layout na

Part II Slicing Images

Bagian ini kita bakalan ambil gambar tertentu saja, ambil bagian na dengan slicing tool yang nantina bakalan diperlukan bwat bikin code CSS na
Pertama adlah slice navigasi

Pilih File > Save for Web and Device

Inget ye: pilihna nyang Selected Slice dowank

Selanjutna terusin ke slice berikutna, kaya bg-header, bg-footer dan logo
Jadi lu bakalan dapet beberapa images yang dibutuhkan dalam coding CSS na

Part III Make HTML+CSS Code

Bwat mbikin web lu knceng di load saat dibuka di browser, Less Table adaalh salah satu cra terbaik
Gw paling suka bagian ini, buka Dreamweaver lu, bikin file CSS
Nah ini code CSS na:

  <style type="text/css">

html,body{

margin:0;

padding:0;

border:0;

/* \*/

height:100%;

/* Last height declaration hidden from Mac IE 5.x */

}

body {

background:#ffffff url(images/bg-header.gif) 0 0 repeat-x;

color:#000000;

min-width:960px;

}

#mainPan {

width:960px;

position:relative;

margin:0 auto;

}

#bodyPan {

width:960px;

margin:0 auto;

}

#headerPan {

width:960px;

height:127px;

margin:0px;

padding:0px;

}

#headerPan img.logo {

border:0px;

width:148px;

height:69px;

margin-left:20px;

margin-top:10px;

}

/* MENU TAB NAVIGATION */

#tabs {

line-height:normal;

top: 25px;

right:10px;

position:absolute;

}

#tabs ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabs li {

display:inline;

margin:0;

padding:0;

}

#tabs a {

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

color:#ffffff;

float:left;

background:url(images/bg-navigasi.gif) no-repeat left top;

margin:0;

padding-top:10px;

text-decoration:none;

width:137px;

height:59px;

text-align:center; /*for IE + FF right here*/

}

#tabs a:hover {

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

color: #FFCC00;

}

.spacer {

margin-bottom:20px;

}

/* CONTENT */

#contenPan {

font-size:11px;

color:#666666;

font-family:Arial, Helvetica, sans-serif;

width:960px;

margin:0px;

}

#contenPan h2 {

font-size:14px;

font-family:Arial, Helvetica, sans-serif;

color:#006699;

}

#contenPan a {

color:#0066CC;

text-decoration:none;

}

#contenPan a:hover {

color: #FF0000;

text-decoration:none;

}

/* FOOTER */

#footerMainPan {

position:relative;

clear: both;

width:100%;

height:138px; /*for FF add 10px;*/

overflow:hidden;

background:url(images/bg-footer.gif) 30px center repeat-x;

text-align:center;

}

#footerPan {

padding-top:50px;

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

color: #666666;

width:960px;

height:88px;

background: url(images/cutter.gif) right top no-repeat;

margin:0px;

}

#footerPan a {

color: #0099FF; text-decoration:none;

}

#footerPan a:hover {

color: #333399; text-decoration:none;

}

</style>

save dan kasi nama style.css
sekarang kite bakalan mbikin index.html
dan ini code ma:

<div id="mainPan">

<div id="bodyPan">

<div id="headerPan">

<img src="images/logo.gif" class="logo" />

<div id="tabs">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Photoshop</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">PHP</a></li>

<li><a href="#">AJAX</a></li>

</ul>

</div>

</div>

<div id="contenPan">

<h2>Heloo....</h2>

<p>This is main Content <a href="#">[link]</a></p>

<div class="spacer">&nbsp;</div>

<div class="spacer">&nbsp;</div>

<div class="spacer">&nbsp;</div>

<div class="spacer">&nbsp;</div>

<div class="spacer">&nbsp;</div>

<div class="spacer">&nbsp;</div>

<div class="spacer">&nbsp;</div>

</div>

</div>

</div>

<div id="footerMainPan">

<div id="footerPan">

© 2008 Web Design Ajax jQuery.

<a href="http://www.psdremi.co.cc" target="_blank">

PSDREMI.CO.CC

</a>

</div>

</div>

Gw rasa cuma sgitu code na, gw yakin lu bakalan familiar kok

Part IV Adding jQuery Ajax Scripts to Load Contents

Lu pada tau jQuery kan ? kalo belom, baca pengenalan tentang jQuery dlo yak di web na
Pada bagian ini kita butuh jQuery script library, sedangkan plugin ga diperlukan.
Cuma kasi baris ini di HTML na, bwat ngeload jQuery Javascript Library na

<script src="jquery-1.2.6.js" type="text/javascript"></script>

dan kasi code javascripts bwat mbikin fungsi untuk meload external content pada contentPan Div

<script type="text/javascript">

$(function(){

$("#ajax_display").ajaxStart(function(){

$(this).html('<p><img src="images/ajax-loader.gif" /></p>');

});

$("#ajax_display").ajaxSuccess(function(){

$(this).html('');

});

$("#ajax_display").ajaxError(function(url){

alert('jQuery ajax is error ');

});

});

function loadContent(id) {

$("#contenPan").hide();

$("#contenPan").load("php-loader.php?cPub="+id+"", '', callback);

}

function callback() {

$("#contenPan").show();

}

$(document).ready(loadContent(id));

</script>

Simple line:

  $(this).html('<p><img src="images/ajax-loader.gif" /></p>');

/*this line will load the ajax-loader.gif while progress on request*/

dan code berikut ini diperlukan bwat memanngil data content

  function loadContent(id) {

$("#contenPan").hide();

$("#contenPan").load("php-loader.php?cPub="+id+"", '', callback);

}

function callback() {

$("#contenPan").show();

}

php-loader.php adalah file PHP yang bertugas memberikan value dalam bentuk HTML, value ini akan direquest oleh jQuery Ajax untuk di load ke contentPan Div
Kalo lu liat pada akhir variable GET na berupa variable cPub, maka kita bakalan bikin file PHP yang menggunakan kondisi pemilihan variable GET, ni code na:

<?

$allCount = 60; //just to simulation for data ready

if($_GET['cPub'] == 2)

{

echo "<h2>Photoshop</h2>";

echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";

for($i=0;$i<=$allCount;$i++)

{

echo "This is Photoshop Content. ";

}

echo "</p>";

sleep(2);

}

elseif($_GET['cPub'] == 3)

{

echo "<h2>CSS</h2>";

echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";

for($i=0;$i<=$allCount;$i++)

{

echo "This is CSS Content. ";

}

echo "</p>";

sleep(2);

}

elseif($_GET['cPub'] == 4)

{

echo "<h2>PHP</h2>";

echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";

for($i=0;$i<=$allCount;$i++)

{

echo "This is PHP Content. ";

}

echo "</p>";

sleep(2);

}

elseif($_GET['cPub'] == 5)

{

echo "<h2>AJAX</h2>";

echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";

for($i=0;$i<=$allCount;$i++)

{

echo "This is AJAX Content. ";

}

echo "</p>";

sleep(2);

}

else

{

echo "<h2>Home</h2>";

echo "<p><a href=''>this is a link</a></p>";

echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";

for($i=0;$i<=$allCount;$i++)

{

echo "Welcome back friend ! this tutorial explain about how to designing web layout with Photoshop+CSS and then using Ajax jQuery to implementad how to Load PHP Content. ";

}

echo "</p>";

}

?>

Gw pake sleep(2) bwat mensimulasikan loading content yang cukup lama
Kayakna smua udah lengkap, tinggal lu upload ke webserver biar PHP na bekerja. ni screen shoot na

Tutorial ini gw input juga dalam bahasa inggris di PSDREMI.CO.CC dan Good-tutorials.Com
Best Regard, dr.emi

Read more »

Trik Photoshop

* Mengaburkan Background

- buat seleksi object
- select feather 1-4, smooth 2-6
- pilih layer via copy ato tekan Ctrl+J
- sembunyikan layer
- pilih layer background
- pilih filter - gaussian blur 6 - 10
- aktifkan layer yang disembunyikan tadi

* Membuat gambar komik/kartun dari foto dengan filter

- buka file gambarnya
- pilih filter - artistic - poster edges
- pilih brightness 10, contrast 30
- pilih filer - artistic - cut out

* Membuat bayangan dari object

- buat seleksi object
- pilih layer via copy ato tekan Ctrl+J
- pada layer yang baru, pilih edit - transform - flip vertical
- pindahkan ke bagian bawah object
- pilih edit - distort untuk mengatur tinggi bayangan
- masuk ke mode quick mask
- sempurnakan bayangan dengan menghapus bagian2 yang tidak dikehendaki
- keluar dari mode quick mask
- set opacity layer 40%

* Highlight warna sebagian

- buat new adjustment layer -> hue - saturation
- pastikan opsi colorize dicentang, atur Hue-nya
- pilih layer hue-saturation, pilih brush tool, gunakan tool ini untuk memunculkan warna dari bagian yang dikehendaki

* Menciptakan suasana malam

- copy layer dari background
- duplicate layer menjadi layer baru
- pilih layer baru - Image-Adjust-Desaturate
- pilih image - adjust - curves, klik di bagian tengah2, lalu masukkan nilai Input: 215 dan Output: 158
- pilih image - adjust - level
Input Levels 0 1,00 255
Output levels 0 170
- blending mode layer, pilih multiply

* membuat efek halaman terlipat

- buat new document, 200 x 250 resolusi 72 pixel, buat new layer
- fill dg warna yang diinginkan, misalnya R:255 G:255 B:0
- klik line tool, buat garis diagonal dari pojok kiri bawah 30 derajat ke arah kanan
- di bagian bawah, gunakan magic wand pilih select, modify, expand by 1, lalu delete
- gunakan polygonal lasso tool untuk membentuk lipatan sebelah atas
- buka palette path, klik ikon panah kecil, pilih Make Work Path
- pilih Convert Point Tool dalam Pen Tool
- klik pada path, akan terlihat Anchor Point dan Direction Lines
- klik dan drag pada ujung-ujungnya untuk membuat efek melengkung
- pada palette path, klik ikon panah kecil hitam, lalu pilih Make Selection, Feather Radius = 0, Anti Alias opsi = ON
- hapuslah path yang tadi dibuat
- pilih linear gradien tool, buka palette untuk linear gradien, edit warna-warna yang akan dipakai
- gunakan gradien untuk menggradasi warna lipatan kertas

* membuat efek foto yang sobek

- buka file image kita
-
gunakan Pen Tool, lalu buatlah Path pada bagian yang akan kita buat
sobekannya. jika perlu, kita zoom sampai 300% agar bisa membuat efek
sobekan yang halus. disarankan untuk membuat sobekan dari atas sampai
ke tengah foto.
- klik kanan pada Path, lalu pilih Stroke to Path, lanjutkan path sampai membentuk suatu kotak di luar area foto
- pada palette path, klik kanan lalu pilih Make Selection
- copy selectionnya lalu paste di layer yang baru
- tekan CTRL lalu klik pada layer yang baru untuk menyeleksi semua object
- pilih rectangular marque tool, lalu pilih di interract with selection
- pilih edit - selection, klik kanan pada seleksi, pilih distort
- aturlah distorsi untuk menimbulkan kesan sobekan (jangan terlalu lebar)
- gunakan efek drop shadow pada blending mode agar terkesan lebih realistis
- gunakan magic wand untuk menghilangkan warna2 yang tidak perlu

* membuat efek foto soft focus

- buka file image kita, tekan Ctrl J untuk menduplikasi layer
- pilih filter - gaussian blur, masukkan 5 pixel
- pilih mode layer: Overlay

* membuat efek stunning

- buka image dan copykan ke layer baru
- pilih filter - gausian blur, masukkan 13.0 pixel pada valuenya
- set opacity layer menjadi 50%
- buat layer mask
- pilih brush dg opacity 50%, lalu sapukan ke bagian2 object yang akan dipertahankan ketajamannya

* membuat sunset cepat dengan teknik gradien map

- buka file gambarnya
- pilih new adjustment layer - gradient map
- akan muncul menu gradien, pilih salah satu
- masukkan beberapa nilai berikut untuk mengatur gradasi warna
tab stop 1: #000000; Lokasi: 0%
tab stop 2: #330000; Lokasi: 41%
tab stop 3: #ff7c00; Lokasi: 70%
tab stop 4: #f8eee4; Lokasi: 100%
- kalau sudah klik ok
- set blending mode menjadi overlay

* membuat efek foto 3D dan melengkung

- buat new dokumen, kita persiapkan canvas untuk image kita, fill gradien b/w
- insert gambar kita ke dokumen baru tersebut
- set blending mode - drop shadow
- pilih edit - transform - perspective, atur arah sesuai dengan yang kita inginkan
- pilih filter - distort, atur arah lengkungan foto

* menghaluskan kulit dengan history brush

- buka file foto yang akan dihaluskan
- pilih filter - gaussian blur - isikan 8.0 pixel, foto kita akan jadi buram, sementara biarkan saja
-
buka pada history, lalu klik pada ikon panah kecil, pilih history
option, untuk keperluan ini, pilih allow non-linear history, Dengan
ini, langkah yang kita buat sebelumnya, tidak akan hilang
- pilih
new snapshot, snapshot ini akan menjadi layer 'tersembunyi', yang akan
menyimpan history dari filter gaussian blur yang telah dikerjakan
sebelumnya.
- klik snapshot yang baru sehingga muncul icon history toolbrush
- masih di bagian history, klik snapshot awal, bagian ini HARUS ada diatas dari snapshot yang baru
- klik tool history brush, set opacity menjadi 40%, lalu mulai bekerja menghaluskan kulit, set brushnya sesuai kebutuhan.

* membuat bentuk hati dengan gambar foto

- buka file image yang kita inginkan
- pada shape tool, pilihlah custom shape tool, pastikan pilihannya pada paths
- pilih bentuk shape yang diinginkan, misal hati
- setelah diapply pada layer, pilih Make Selection pada palette path
- tekan Ctrl+X untuk meng-cut pilihan
- buka new dokumen
- paste bentuk atau shape yang sudah dicut tadi
- tambahkan blending mode untuk drop shadow dan inner glow dan akhirnya stroke

Read more »

Cara mempercepat mozilla

Sekarang kita akan belajar cara mempercepat koneksi internet dengan mengutak-atik browser Mozilla Firefox. Saya sendiri sudah coba trik ini, yah, ada perubahan kok.

Berikut langkah-langkahnya:

1. Ketik about:config pada tempat adress Mozilla Firefox

2. Trus, beri tanda centang pada Show This Warning Next Time


3. Lalu, klik I'll Be Careful, I Promise

4. Sekarang saatnya setting-menyetting, hahahaha

- Untuk pengguna DSL :
Set “network.http.pipelining : true”
Set “network.http.proxy.pipelining : true”
Set “network.http.pipelining.maxrequests : 64
Set “nglayout.initialpaint.delay : 0

- Untuk pengguna ADSL :
Set “network.http.max-connections : 64
Set “network.http.max-connections-per-server : 21
Set “network.http.max-persistent-connections-per-server : 8
Set “network.http.pipelining : true”
Set “network.http.pipelining.maxrequests : 100
Set “network.http.proxy.pipelining : true”
Set “nglayout.initialpaint.delay : 0

- Untuk pengguna Dial Up
Set “browser.cache.disk_cache_ssl : true”
Set “browser.xul.error_pages.enabled : true”
Set “network.http.max-connections : 32
Set “network.http.max-persistent-connections-per-proxy : 8
Set “network.http.max-persistent-connections-per-server : 4
Set “network.http.pipelining : true”
Set “network.http.pipelining.maxrequests : 8
Set “network.http.proxy.pipelining : true”
Set “plugin.expose_full_path : true”
Set “signed.applets.codebase_principal_support : true”
Set “content.interrupt.parsing : true”
Set “content.max.tokenizing.time : 3000000
Set “content.maxtextrun : 8191
Set “content.notify.backoffcount : 5
Set “content.notify.interval : 750000
Set “content.notify.ontimer : true”
Set “content.switch.threshold : 750000

Rubah sesuai koneksi internet di komputer/laptop anda.

5. Klo sudah tutup saja, dan coba anda browsing, apakah terasa lebih cepat ???

Anda yang menentukan !!!

Read more »

Cara Membuat efek Cinema

Saya suka banget bikin efek foto dengan campur tangan si Blur bukan Brur.. :) .. Nah efek cinema ini sudah dipastikan pake blur.. hasil nya nanti mungkin jadi seperti ini :

Ayoo.. gimana? Mantep tho.. enak tho.. daripada naek busway kesasar.. hehehe

Pengen tau cara bikinnya ? ya udah langsung Action aja

Buka foto yang mau diedit..

saya gak pake foto diatas.. tapi pake foto anak saya lagi berenang..

Duplikat layer dengan menekan CTRL + J ..

Di layer baru tadi klik Image > Adjustment > Hue/saturation

Klik Image > Adjustment > Exposure

Angka-angka di atas disesuaikan dengan gede gambarnya nanti..

Sekarang Duplikat lagi layer yang baru diedit tekan CTRL + J

Klik Filter > Blur > Lens Blur

Klik Add Vector Mask

Gunakan Brush Tool dengan warna Hitam.. Ini untuk mewarnai layer mask tadi dengan warna Hitam.

Klik kanan di layar gambar .. lalu ubah settingan Brush nya..

Brush menggunakan Soft Round Brush .. ( yang pinggir-pinggirnya keliatan nge-Blur) .. Usahakan Ukuran Master Diameter nya gede.. kira-kira hampir sebesar foto yang diedit..

Klik di tengah foto beberapa kali.. kira-kira 2-3 kali lah. kasih merica sedikit.. dan garam secukupnya :)

Sehingga di layer mask tadi ada gambar lingkaran ber Blur..

Sekarang supaya gambarnya lebih soft lagi.. Buat layer baru.. warnai dengan warna hitam , Opacity = 50%.

Buat layer mask juga di layer yang ini.. caranya seperti yang tadi yaa.. masih inget kan?? kalo gak inget.. silahkan roll lagi ke atas..

Terakhir.. Buat kotak dengan Rectangle marquee tool .. lalu Klik Select > inverse sehingga yang ke select sekarang adalah bagian atas dan bawah aja..

Sekarang warnain deh menggunakan Paint Bucket Tool dengan warna hitam ..

Hasilnya :

Saya kasih contoh hasil dengan menggunakan cara-cara diatas :

Ini hasil Fhoto ku Sendiri

Sebelum :

 Sesudah :

Gimana? kayak photographer profesional kan hasilnya ?? hehehe.. Photoshop tea..

Ya udah Selamat mencoba..

Read more »

Cara Membuat Header Blog Menjadi Lebih Cantik

Rekan-rekan yang sering blogwalking pasti sering menemukan header cantik dari blog maupun situs yang dikunjungi bukan? Mungkin banyak diantar rekan-rekan yang “iri” melihat header tersebut, karena sebenarnya kepengen punya header yang cantik dan keren juga tapi gak punya kemampuan untuk mendesain.

Nakh, daripada cuma bisa mengagumi header cantik dan keren orang punya, lebih baik mulai buat sendiri aja. Disini ada tutorial sederhana tentang cara membuat header cantik dalam 3 menit dengan Xheader, tidak perlu jago desain grafis atau pinter photoshop kok, software ini simple dan mudah dimengerti, dan yang pasti Gratis atau freeware.

Berikut saya coba paparkan cara membuat header-nya,
1. Membuat Header dengan Template
Xheader memberikan ribuan template gambar header gratis siap pakai yang bisa Anda pilih. Untuk membuat gambar Header dari template, buka menu File -> New. Kemudian pilih Load From Template Library,

2. Mengatur Ukuran Header

  Anda bisa mengatur ukuran header agar sesuai dengan blog Anda melalui menu Option–> Resize Header.
3. Memasukkan Teks

Setelah Anda memilih template atau gambar header yang tersedia, Anda bisa memulai memasukkan teks. Anda bisa menambah dengan efek outline, chisel, emboss, dan glow. Jika akan menambah efek, pilih teks yang akan di-edit dengan menu select terlebih dahulu.

4. Memasukkan Gambar Dari Komputer
Gunakan tool Image, jika anda ingin memasukkan gambar dari komputer (harddisk, flashdisk, dsb),

5. Membuat Garis, Kotak atau Lingkaran
Anda bisa menambahkan garis, kotak atau lingkaran dengan menggunakan tool seperti yang ditunjukkan pada gambar di bawah ini. Objek ini juga dapat diberi efek!

6. Mengatur Urutan Peletakkan Objek
Sebuah gambar, bidang atau tulisan dapat diletakkan di atas atau di bawah yang lain. Anda bisa memilih objek dengan tool Select (paling kiri) dan mengatur urutan peletakkan objek melalui tool To Front atau To Back.

7. Mengatur Efek Transparan dan Bayangan
Text atau gambar dapat diatur agar transparan (tembus pandang) dan ada bayangannya dengan tool yang tersedia seperti terlihat pada gambar ini.

8. Preview dan Menyimpan Gambar

Sebelum Anda menyimpan gambar Header yang telah anda buat, Anda bisa mencoba melihat tampilan gambar header Anda di browser, buka menu Options -> Preview in Browser. Setelah semua oke, simpan gambar Anda melalui menu File -> Save JPG. Atau File -> Save XHF. File JPG siap di-upload ke blog Anda, sedangkan file XHF bisa diedit ulang jika Anda mau.

Nakh, proses-nya sudah selesai. Sekarang silahkan download Free Software-nya Disini dan jika anda belum punya software download yang oke punya, anda bisa baca referensi-nya serta bisa download Disini.

Selamat Mencoba dan berkreasi (catatan : gambar header diatas hanyalah ilustrasi).

Read more »