Tutorial Photoshop Web 2.0 Layout With CSS Part-2 | 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-2

3920 hits 0 comments 670 download print send

Part - 2 Slicing in Image Ready

Pindah / jump ke adobe image ready, ato slicing bisa dilakukan langsung di adobe sotoshop, sesuai selera yang biasa lu pake

Untuk diketahui, web 2.0 memiliki ciri less table dan gambar. Jadi disini kita akan belajar memilih objek slice yang akan digunakan saja pada saat perancangan layout web 2.0 na, jadi ga musti semua bagian gambar lu slice...

Bagian yang perlu di slice:

1. Top Header Background
2. Top Body Image
3. Icon Area
4. Footer Backrgound

sedangkan untuk menu dan field form bisa diganti dengan tanpa menggunakan gambar di Macromedia Dreamweaver, sebagai tool editor yang biasa gw pake dalam membwat layout editing website.

Pertama hidden dolo menu di atas na, ambil slice tool

slice lah pada bagian top header, pertama tarik lebar dengan bebas, kemudian ubah ukuran lebarna menjadi 1 px, ni untuk background top header nanti yang akan di repeat berulang2 oleh CSS na.

lakukan hal yang sama bwat ngambil background footer na.

slice juga area icon na...perbesar dengan zooming tool kalo kurang jelas

untuk gambar top body slice semua aja

kalo lu ngerasa semua kperluan gambar dah cukup sesuai dengan yang ada di imajinasi lu, optimize aja gambar2 slice na gw pake preset PNG-24

lanjot ke menu File > Save Optimize As

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

670 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-2.html

SHARE TUTORIAL :

<p><strong>Part - 2 Slicing in Image Ready </strong></p>
<p> Pindah / jump ke adobe image ready, ato slicing bisa dilakukan langsung di adobe sotoshop, sesuai selera yang biasa lu pake</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css32.png" width="230" height="56" /> </p>
<p>Untuk diketahui, web 2.0 memiliki ciri less table dan gambar. Jadi disini kita akan belajar memilih objek slice yang akan digunakan saja pada saat perancangan layout web 2.0 na, jadi ga musti semua bagian gambar lu slice...</p>
<p>Bagian yang perlu di slice:</p>
<p>1. Top Header Background<br />
  2. Top Body Image<br />
  3. Icon Area<br />
  4. Footer Backrgound  </p>
<p>sedangkan untuk menu dan field form bisa diganti dengan tanpa menggunakan gambar di Macromedia Dreamweaver, sebagai tool editor yang biasa gw pake dalam membwat layout editing website.</p>
<p>Pertama hidden dolo menu di atas na, ambil slice tool <img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/slice-tool.png" alt="slice tool" width="26" height="22" /></p>
<p>slice lah pada bagian top header, pertama tarik lebar dengan bebas, kemudian ubah ukuran lebarna menjadi 1 px, ni untuk background top header nanti yang akan di repeat berulang2 oleh CSS na.</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css18-bgtopheader.png" width="262" height="267" /> </p>
<p>lakukan hal yang sama bwat ngambil background footer na.</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css25.png" width="300" height="124" /> </p>
<p>slice juga area icon na...perbesar dengan zooming tool <img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/zooming-tool.png" alt="zooming tool" width="26" height="22" /> kalo kurang jelas</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css21.png" width="400" height="304" /></p>
<p>untuk gambar top body slice semua aja</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css23.png" width="400" height="66" /></p>
<p>kalo lu ngerasa semua kperluan gambar dah cukup sesuai dengan yang ada di imajinasi lu, optimize aja gambar2 slice na gw pake preset <strong>PNG-24</strong> </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css33.png" width="210" height="118" /> </p>
<p>lanjot ke menu <strong>File > Save Optimize As</strong></p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Web%202%200%20Layout%20With%20CSS/web20_css27.png" width="360" height="114" /> </p>
<p> </p>
<p><a href="http://www.dremi.info/tutorial/photoshop/web-20-layout-with-css-part-1.html">Part-1</a> | Part-2 | <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-2.html' title='tutorial photoshop Web 2.0 Layout With CSS Part-2'>Web 2.0 Layout With CSS Part-2</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.