Tutorial Photoshop Web 2.0 Layout With CSS Part-1 | Copyright 2008 Web 2.0 www.dremi.info

Tutorial Photoshop, Forum Photoshop, Tutorial CSS, Tutorial PHP, HTML, Web Tips, dll ! dremi.info

Custom Search

Feb ‘08 26 Web 2.0 Layout With CSS Part-1

4177 hits 7 comments 707 download print send

hueheheheheeee...gi pilek niii...tapi pas gw di kamar, smpet bikin tutor ini ni, cara bikin web layout dengan teknik web 2.0

sbnernye masih sekitar design layout, cuma penekananna ada pada style CSS yang bakalan kita bikin ....

woke untuk mulai perancangan, tentuin dolo konsep design lu pada, kalo gw ngambil konsep iklan kosmetik yang lagi trend di TV kikikikkk.... hehehe...

dengan bantuan adobe sotoshop bikin dah design interface na dolo...

Part - 1 Design Interface

singket ceritanye, lu dah buka adobe na, bikin doku baru terserah lu...

ambil marquee tool bikin seleksi kotak untuk top header na...dan kasi gradasi ke gini...

style gradasi na bisa lu donlot di paket data tutorial ini...enjoy it brother

bikin satu lagi seleksi kotak untuk footer na

woke....untuk menu sederhana saja, bikin kotak seleksi lagi di bawah top header, ini untuk skedar illustrasi saja, walopun nanti gambar hasil slice na ga bakal kita pake pas di layout web 2.0 na, karena bisa diganti pake warna background ma text biasa untuk menu na.

untuk bagian top body gw pake gambar latar salah satu merek kosmetik

kopi dengan seleksi pada sample gambar

bwat area seleksi untuk top body na...

gunakan menu Edit > Paste Into untuk masukin gambarna ke area seleksi (mirip dengan teknik masking)

sedikit modifikasi kopiin juga gambar bibir na....

ambil shape tool untuk bikin login form na di sebelah kana area header:

untuk filed login form gw kasi sedikit stroke 1 px, warna #b0c3d2

dengan shape tool kasi icon kecil di kiri area header...

woke review dolo hasil smentara layout lu...

Part-1 | Part-2 | Part-3 | Part-4

707 download print send

Technorati Cosmos: other blogs commenting on this post

SOCIAL BOOKMARK :

Social Bookmarks

PERMALINK HERE :

http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-1.html

SHARE TUTORIAL :

<p>hueheheheheeee...gi pilek niii...tapi pas gw di kamar, smpet bikin tutor ini ni, cara bikin web layout dengan teknik web 2.0</p>
<p>sbnernye masih sekitar design layout, cuma penekananna ada pada style CSS yang bakalan kita bikin ....</p>
<p>woke untuk mulai perancangan, tentuin dolo konsep design lu pada, kalo gw ngambil konsep iklan kosmetik yang lagi trend di TV kikikikkk.... hehehe...</p>
<p>dengan bantuan adobe sotoshop bikin dah design interface na dolo...</p>
<p> </p>
<p><strong>Part - 1 Design Interface </strong></p>
<p> singket ceritanye, lu dah buka adobe na, bikin doku baru terserah lu...</p>
<p>ambil marquee tool <img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/marquee.png" alt="marquee tool" width="25" height="21"> bikin seleksi kotak untuk top header na...dan kasi gradasi ke gini... </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css1.png" width="250" height="179"> </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css2.png" width="400" height="316"></p>
<p>style gradasi na bisa lu donlot di paket data tutorial ini...enjoy it brother :) </p>
<p>bikin satu lagi seleksi kotak untuk footer na </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css3.png" width="262" height="188"></p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css4.png" width="400" height="314"></p>
<p>woke....untuk menu sederhana saja, bikin kotak seleksi lagi di bawah top header, ini untuk skedar illustrasi saja, walopun nanti gambar hasil slice na ga bakal kita pake pas di layout web 2.0 na, karena bisa diganti pake warna background ma text biasa untuk menu na.</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css6.png" width="400" height="40"> </p>
<p>untuk bagian top body gw pake gambar latar salah satu merek kosmetik</p>
<p>kopi dengan seleksi pada sample gambar</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css29.png" width="400" height="307"></p>
<p>bwat area seleksi untuk top body na...</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css31.png" width="400" height="134"> </p>
<p>gunakan menu <strong>Edit > Paste Into</strong> untuk masukin gambarna ke area seleksi (mirip dengan teknik masking)</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css8.png" width="400" height="125"> </p>
<p>sedikit modifikasi kopiin juga gambar bibir na.... </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css9.png" width="400" height="141"></p>
<p>ambil shape tool untuk bikin login form na di sebelah kana area header:</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css10.png" width="379" height="138" /> </p>
<p>untuk filed login form gw kasi sedikit stroke 1 px, warna #b0c3d2</p>
<p>dengan shape tool kasi icon kecil di kiri area header...</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css11.png" width="163" height="118" /></p>
<p>woke review dolo hasil smentara layout lu...</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css13.png" width="377" height="296" /> </p>
<p>Part-1 | <a href="http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-2.html">Part-2</a> | <a href="http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-3.html">Part-3</a> | <a href="http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-4.html">Part-4</a></p>
 <P>&nbsp;</P><P style='font-size:11px;'><strong>© Copyright 2008 <a href="http://www.dremi.info" target="_blank" title="tutorial Photoshop">www.dremi.info</a> </strong><BR>
Original Post: <a href='http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-1.html' title='tutorial photoshop Web 2.0 Layout With CSS Part-1'>Web 2.0 Layout With CSS Part-1</a> Category: <a href='http://www.dremi.info/tutorial/photoshop/web-layout.html' title='tutorial photoshop Web Layout'>Web Layout</a>
<BR><B>About the Author:</B> dr.emi is a free man to distribute anything that he was founded. As a Webmaster He was publishing <a href="http://www.dremi.info" target="_blank" title="tutorial Photoshop">www.dremi.info</a> to create one community that loves free idealism. Very specialy in Design Category. <I>Welcome to love it!</I></P>

Selama untuk keperluan non profit dan belajar gratis, dipersilahkan untuk dicopy, disebarluaskan, atow diperbanyak, tanpa merubah content tutorial dengan tetap memasang author link, sesuai source code HTML na. Ntu tandana lu mensupport All Free Idealism dan menghargai karya dr.emi. Copy TAG HTML diatas bwat dipasang di web / blog lu.

7 Comments to
“ Web 2.0 Layout With CSS Part-1 “

dr.emi

Posted On: 17-08-2008 / 00:13:34

untuk pemula yg baru belajar mbikin web, ada baikna mencoba yang ini juga selain tutorial merancang website full abis.

yudi

Posted On: 22-05-2008 / 13:16:16

ini baru tutorial, ga tanggung tanggung ngasi pnjelasan nya, ga bayar lagih, ntar2 gw maen lagi ah ksini, btw forum nya masih spi ya.. gw ikutan yak..

jogi

Posted On: 15-04-2008 / 14:21:33

thanks ya broo, tutorialnya mantap de...hhh

dr.emi

Posted On: 16-03-2008 / 06:10:25

wah ada tetangga euuuuyy... wuki wuki...

deden

Posted On: 15-03-2008 / 13:39:35

boleh juga tutorialnya nih keep moving bro........

hariz

Posted On: 13-03-2008 / 14:50:20

it's funtastic

Yudha Pi

Posted On: 27-02-2008 / 08:26:32

nice article! akan menyesal bagi yang melewatkan ..thanks, selamat berkarya terus mi! manusia yang paling "oke" adalah yang paling banyak berguna bagi manusia lain

Post your comments