Tool Warna " Color Zilla "

Heu.. heu..heu... walaupun masih kurang mateng, akhirnya kelar juga saya ganti template lagi ( lieur euuuy ganti-ganti template wae !!! ).

Template yang satu ini saya namai Cp Jarum coklat Skins.. hehe. Cp artinya Copy Paste Sedangkan Jarum Coklat Skin karena warna backgroundnya mirip bungkusan  rokok jarum coklat... - ketawa lagi ah... hehe.

Untungnya karena saya pake tool color zilla urusan warna jadi ngga terlalu memusingkan ketika memodif leot na. Selain gampang di gunakan, saya pun bisa mengetahui warna leot web  orang lain sebagai bahan contekanya. contoh na seperti ini.

1. Saya klik satu kali  pallet color zilla yang letaknya di samping bawah kiri browser Fire Fox.
   
2. Kemudian saya cari warna yang saya inginkan, setelah ketemu saya pilih dengan mengklik di atasnya. misalkan warna header blog ini.
   
3. Untuk mengetahui informasi nilai warna yang telah kita pilih tadi, kita kembali ke pallet color zilla, kemudian di atasnya kita klik kanan mouse. Kita bisa liat nilai warna dan saya pun tinggal copy dan pastekan saja.. duh senang yaaaaach !
   

Donlot Color Zilla atawa di web na - Tool ini merupakan Add ons di browser FireFox, jadi kita harus menginstall dulu browser Fire Fox nya di komputer. ( jika blom menginstall na lho ).

Selain itu untuk bahan perbandingan-nya kita bisa juga melihat index warna yang sudah jadi di mandarindesign. atau di wellstyled untuk mengetahui komposisi perpaduan warna yang cocok untu leot warna blog kita.

Dan untuk tambahan saja, kebetulan saya dapat dari sebuah majalah tentang karakter warna , mudah-mudahan informasi ini menambah reperensi dan bahan perenungan dalam menentukan pemilihan warna yang pas buat blog kita.

KARAKTER TENANG

Biru Muda	(#BFD8FF)- Menyejukan dan menyenangkan
Biru Pucat	Memberi kesan ringan, luas dan terbuka, tenang dan tenteram
Biru Laut	Membangkitkan imajiansi, meningkatkan sensitivitas, menimbulkan perasaan tenang dan damai
Ungu/lila	(#CCA7DF) Menenteramkan, menciptakan suasana yang tenang dan meditatif
Hijau Daun	Memudahkan relaksasi, menyeimbangkan emosi, dan memberi rasa aman
Hijau Muda	Merupakan warna yang penuh ketenangan, menghadirkan keseimbangan, dan menciptakan rasa penuh keyakinan
Hijau Pupus	Menciptakan suasana tenang, hening, dan elegan

KARAKTER HANGAT

Merah	( #CC0033 ) Diasosiasikan dengan cinta, kehidupan, kekuatan, bersifat panas, dan menyala
Coklat	(#6F491B)Menciptakan perasaan aman, nyaman dan harmonis, menimbulkan suasana akrab
Kuning	(#FFFF00) Mengundang dan dapat membawa kehangatan
Orange	( #FFA500 )Menciptakan kehangatan, mengundang, membangkitkan energi dan kecerian, menimbulkan rasa aman dan mendorong kreativitas.
Emas Metalik	(#FFD700) Menimbulkan kesan glamor dan mewah.
Brown	( #A52A2A ) Hangat, akrab, dan memberi sentuhan etnik yang kuat.

del.icio.us tags: Belajar Css/html, Blog Layout

Background Image Gradient

Yoih bro ! dalam ngedesain leot web atawa blog ada dua macam background yang sering kita gunakan yaitu mengunakan color/warna atau mengunakan sebuah gambar.
Mengunakan warna saja memberikan ke untungan tampilan sebuah blog akan mudah di baca oleh browser, Sedangkan mengunakan gambar ke untungan-nya akan memberikan sentuhan ke indahan pada tampilan leot na. cuman masalahnya kalau tidak memperhatikan ukuran gambar akan mempengaruhi proses loding di browser.

Namun jangan kecil hati, hanya dengan sedikit trik mengunakan Css kita bisa me-repeat gambar yang kecil menjadi lebih besar dari ukuran sebenarnya, terutama sekali ini akan sangat bermangfaat untuk gambar bergradasi seperti di bawah.

Gambar di atas contoh background gradasi ukuran-nya 1024 X 900. Kalau ane paksain pake Background gambar segede gitu upss mungkin subuh di buka leot na magrib baru tampil.. heuheuheu hereuy euy !!!.......
Namun dengan sedikit trik dengan cara di edit di photoshop dan mengunakan kode Css repeat-image maka hasil na lihat Demo.

Yup langkah pertama kita sama-sama belajar dari awal cara membuat dan mengedit gambarnya di program adobe photoshop dulu.

1. Buka Photoshop na buat New doc ukuran wight 500 height 800. ok
2. 1.Set palet warnanya secara berbeda.
   2.kemudian pilih tool gradient
   3.dan lihat di bar option-nya pada pilihan Linear Gradient.
   
   
3. Kemudian dengan tool gradient Drag dari atas ke bawah.
   
4. 1. Pilih Marquee Tool —Singel Column Marquee Tool,
   2.kemudian klik di area Gambar.
   3.dan buka — Menu Image pilih — Crop.
   
   
5. Kemudian buka File — Save For Web — dan simpan dalam format PNG ( misal Bg.PNG.)dengan color 256 biar bagus tampilan na.
   
6. Tugas kita di photoshop selesai, kemudian upload atau simpan bg.png tadi di tempat penyedia penyimpanan gambar. misal di simpan di www.photobucket atau biasanya untuk model gambar seperti ini saya suka menyimpannya di www.googlepages.
7. Setelah itu baru kita membuka dan meredesain template kita. adapaun caranya, karena ini untuk gambar background cari sintaks Body di kode Css template kita. misal :
   
   body { background: $bgcolor;
font: 75%/150% "Trebuchet MS", Tahoma, Arial;
color: $textocolor;
margin: 0px;
padding: 0px;
}
   Kemudian di sintaks background-nya tambahkan alamat gambar yg telah kita simpan tadi. — Background: $bgcolor url ('http://googlepages.bg.png') repeat-x atau repeat-y;
   - tulisan warna merah itu alamat gambar .
   • Repeat-X : Me-repeat image dengan posisi horizontal
   • Repeat-Y: Me-repeat image dengan posisi Vertikal
     
     contoh-nya jadi begini :
     
   body {
background: $bgcolor url ('http://googlepages.bg.png') repeat-x ;
font: 75%/150% "Trebuchet MS", Tahoma, Arial;
color: $textocolor;
margin: 0px;
padding: 0px;
}

Link Terkait :

1.membuat-gambar-untuk-internet
2.membuat-header-emas.

del.icio.us tags: Belajar photoshop, css/html, new blogger

Donlot Cp Black Skins Template

Baru saja kemarin ganti skins-nya sekarang udah ganti lagi..heuheuheu...lieur euy !!!

Oke bro ! kamu juga bisa pake skin template ini, terutama bagi pemain baru di dunia ngeblog atau orang yang tugasnya menulis dan ngga ada waktu untuk memodifikasi template na.

Di dalam-nya sudah di pasangin :

1. 2 kolom dan 3 footer .
2. Kotak pencarian
3. Menu navigasi
4. Links sidebar yang centil abiz.
5. " Read More" - Special effects for Peekaboo posts dari suhu Ramani
6. Kontrol Label post di setting maksimal 3 ( tiga ) dari suhu Ramani.

Setelah di istall, cari code menu navigasi ini. ( di atas tulisan <!-- (Contenedor) --> )

<ul id='nav'>
<li class="page_item"><a href='#'>Home</a> </li>
<li class="page_item"><a href='#'>Blog</a> </li>
<li class="page_item"><a href='#'>Fotos</a> </li>
<li class="page_item"><a href='#'>Donlot</a> </li></ul>

Kemudian Ganti tanda " # " dengan alamat links blog atawa situs web yang anda inginkan.

View : Demo

View : Donlot XML

del.icio.us tags: Free Template, New blogger

Inspiration Amazing Photoshop Skills

Bagi anda yang suka mengutak-atik aplikasi photoshop, dan ingin mencari inspirasi yang seger-seger, nah di bawah ini ada beberapa sample gambar yang menurut ane benar-benar sebuah hasil kreatif dan keluasan skills ( master photoshop ) si pembuatnya. untuk lebih melihat detail keseluruh gambarnya, langsung saja buka tuh situsnya. Cck..cck..cck... ruarrrrr biasa !

View Web:www.hongkiat.com.

Atau mungkin juga kita ingin mengali pengalaman dari yang udah lihai mengunakan aplikasi photoshop, bagaimana sebuah ide kreatif dari beberapa photo menjadi sebuah gambar yang memukau.bisa di liat di situs ini. www.joancharmant.com

del.icio.us tags: Belajar Photoshop, Blogging, Inspirations

Ketombe Di Link

Ini sebenarnya telah saya posting satu tahun yang lalu, judulnya pun sama dengan waktu dulu saya menulis " Ketombe di Link ".
Ketombe Di Link Maksudnya ketika menekan link baik itu di sidebar blog kita atau link yang ada di postingan kita, maka akan terlihat bekas titik-titik garis yang putus, seperti yang di tunjukan gambar .

 Dan problem ini justru akan terlihat ketika membuka blog kita di browser  FireFox, - sedangkan di IE ngga ada masalah. Bagi yang merasa terganggung dan merasa mengotori leot blog kita dengan masalah ketombe di link ini, tambahkan saja di Css Style Sheet nya ( antara tag <head>...</head> code di bawah ini.

a:active
{
outline: none;
}
a:focus
{
-moz-outline-style: none;
}

Artikel tentang ini saya dapati dari bu Annie dalam bognya BlogU Student makacih yach Bu Annie

del.icio.us tags: Belajar css, tip n trik, blogs, new blogger

Bermain-main Dengan Blending Layers

Awalnya karena cape menunggu, saya iseng-iseng buka aplikasi photoshop. Dengan pengetahuan yang nenpel seadanya tentang program grafis ini, saya mulai mengedit sebuah photo yang saya comot begitu saja, dan hasil akhirnya sungguh cukup lumayan dari pada loe manyun. Pada hal ini hanya memainkan di sekitar blending option-nya saja.

1. Saya buka photo untuk di edit. kemudian dengan mengunakan selektion tool, saya memilih dan membuang backgroundnya. Dalam layar blending option-nya saya pake Exclusion.

2. Kemudian saya gabungkan photo lainnya ( photo alam ), untuk di jadikan latarnya.

3. Di antara kedua photo tersebut ( di tengah-tengahnya ), saya bikin layar baru kemudian dengan brush tool saya gambar seperti gambar hitam yang paling kanan di atas.

4. Karena warna kerudung hijau dan kurang sedap di liat, maka saya buat layer baru, saya tempat kan di layer paling atas. dengan brush tool saya gambar kerudung , kemudian layer blending option-nya saya pilih Multiply.

5. Untuk border hitam yang berfungsi sebagai binkainya, saya gunakan filter pixelate — color halftone ( di sini )

6. Dan yang terakhir, pada photo alamnya saya gunakan adjustment — photo filter.

ya lumayanlah dari pada "loe" manyun..heuheuheu...

del.icio.us tags: Belajar Photoshop, Photoshop efek

Memperbaiki Gambar PNG Transparant di IE

Kamu tahu , ternyata file gambar PNG yang transparant  ngga trasparant lagi ketika di liat di IE. Penasaran ! atau pingin bukti ! coba saja kita posting gambar PNG transparant, dan liat di browser IE, akan tampak sebuah background putih mengeliligi file gambar yang transparant itu. Untuk menghindari masalah tersebut  tambahin dan simpan  scrip di bawah ini, sebelum tag  /head 

<!--[if lt IE 7.]>

<script defer type="text/javascript" src="http://jaloee.googlepages.com/pngfix.js"></script>

<![endif]-->

Untuk lebih jelasnya tentang masalah ini, silahkan anda buka di  bioneural.net

del.icio.us tags: Belajar Css, Blogs, New blogger

Free Donlot VistaIcons

 Untuk yang ketiga kalinya saya posting tentang free donlot icon, bukan apa-apa sih abiz pada luthu-luthu, bikin lidah ini ngiler untuk melahapnya. Di web penyedia icon tersebut ada sekitar 20 macam yang bisa kita donlot - terserah kita donlot semuanya juga boleh untuk kita koleksikan. Karena selain berbentuk file ico, icon luthu-luthu ini juga tersedia dalam bentuk file png transparent, jadi bisa juga untuk penyedap postingan kita... heuheueheu..

Selain itu juga, di web ini kita bisa donlot sofware untuk membuat icon dan gratis lagi. Ngga banyak cakap kalau kamyu mau silahkan buka aja di situsnya.

View Donlot : vistaicons.com

del.icio.us tags: icon, free Donlot

Teknik Layer Masking

Bagi anda pengemar berat photoshop, jangan lewatkan pengetahuan kamu tentang teknik masking, apalagi bagi kamu yang terjun langsung dalam dunia photografi. Dengan menguasai teknik masking ini, membuat sebuah photo menjadi gambar yang batasnya sejauh imaginasi kita menjangkaunya ( sangat imaging ).

Seperti photo di atas, saya bikin dari tiga buah photo yang berbeda. dengan bantuan teknik masking, saya membuat isolasi atau menutup/membatasi  sebagian area photo dengan photo lainnya sesuai dengan apa yang saya inginkan. 
Enaknya lagi dengan bantuan layer masking, ketika mengambungkan beberapa photo, pada dasarnya kita ngga menghapus latar dari subyeknya secara permanen.Tapi sekali lagi, kita menyembunyikan jika sewaktu-waktu kita membutuhkan latarnya lagi, kita tinggal mengunakan brush.

Kalau kamu pingin tahu tentang masking ini, coba dech kamu main ke webnya www.dremi.info , kebetulan di tutornya ada ngebahas tentang masking ini. Kalau udah merasa paham bisa aja kamu cari di google untuk menambah lagi wawasan dan cari inspirasi dari para master photoshop dunia.

- Tadinya saya ingin bagi-bagi tentang masking ini, tapi sekarang lagi males posting -

del.icio.us tags: Belajar Photoshop, efek, tip n trik

25 Rounded Corners Techniques Wits Css

Rounded Corners atau sudut yang bulat merupakan salah satu teknik dan gaya dalam pembuatan halaman web atau blog. Dalam blogger sendiri ada satu pembuat template bergaya rounded corner ini. Nah bagi saudara yang suka ngedesain web dan blog, atau yang lagi mengembangkan pengetahuan tentang Cascading Stylesheets, jangan lewat kumpulan link tentang teknik dan gaya  25 rounded corner ini.

View Web : cssjuice.com

del.icio.us tags: Belajar Css, Blogs, New blogger

.

Membuat Efek Crome

Salah satu teknik rekayasa photo yang perlu kita acungi jempol untuk mas sadewo. Mudah-mudahan master photoshop indonesia yang lainnya, ngga pelit untuk ngasih tutor-tutor keren seperti ini. 

View Tutor : sadewo-photology

del.icio.us tags: Belajar Photoshop, tip n trik, efek

Text Editor ( pengolah kata ) Untuk Blog

Selain text editor (pengolah kata ) yang di sediakan tim blogger ,sebenarnya ada banyak  text editor dari pihak ketiga yang pitur-piturnya lebih banyak dan variatif dari pada text editor yang disediakan blogger. terutama kemudahan dan variasi tulisan, memasukan gambar dan menempatkan gambar di antara tulisan , memasang video, flash dan bahkan bisa menyisipkan adsense di  postingan kita. ( kalau kita punya akun adsensenya ).
Diantaranya  text editor desktop blogging client yang bisa kita pilih.Ialah:

1.Windows live writer.

Program text editor ini merupakan aplikasi pada dekstop windows yang dapat Anda gunakan untuk menulis dan mengirim sejumlah blog yang telah Anda buat ke beberapa blog online services,seperti Blogger, wordpress,dan beberapa server blog lainnya.

Dalam membuat tulisan  kita ngga usah repot, karena layaknya seperti kita mengetik di program Ms word.dan setelah menulis kita bisa melihat hasil sementara tulisan kita lewat previewnya (WYSIWYG). selain itu dukungan fiturnya yang membuat kita semakin bebas untuk berekpresi,di antaranya, Insert Tags, Insert Adsense Code, Insert Code, Insert Table, a smiley ( Msn Icon , Yahoo Icon dll ) video dan masih banyak lagi. Untuk menset dan menginstall nya pun sangatlah mudah. yang perlu kita lakukan hanyalah di komputer kita sudah terinstall aplikasi NET Framework ( ini syaratnya wajib, kalau ngga ada  ngga bakalan jalan tuh windows live writer nya ). donlot NET Framework

Untuk donlot program windows live writer dan pluginnya yang gratis ini, kunjugi situsnya di windows live writer. pluginnya galeri plugin

2.Adobe Contribute CS 3.

Kalau program yang satu ini jangan tanya lagi deh, karena siapa sih yang ngga kenal dengan adobe lab, perusahaan raksasa dalam program editing grafis, film, animasi dan web ini. Karena program countribute keluaran adobe, tentu saja dukungan fitur dan fungsinya pastilah sangat luas, apalagi terintegrasi dengan DreamWeaver pengolah dan desain web.

Cuman satu saja kelemahan program ini yaitu ngga gratis ! 

Selain text editor desktop blogging client di atas ada beberapa lagi alternatif lain yang bisa kita pilih.

3.w.bloggar dapat di kunjungi di http://wbloggar.com/

4.Elicit 1.1.7 dapat di kunjungi di bingobangosoftware

5.ScribeFire aplikasi ini add ons di browser firefox.ScribeFire

del.icio.us tags: Blogs, New blogger

E Book : Cepat Mahir Adobe Photoshop 8.0

 Artikel yang lengkap tentang photoshop 8.0. Mulai dari pengenalan toolbox, manipulasi warna sampai cara selection image.

View Donlot :Ilmu Komputer. Net

del.icio.us tags: free Donlot, E Book, belajar Photoshop

Animasi Basic

Bikin animasi dasar mengunakan photoshop

View Tutorial : Photoshop-local 

del.icio.us tags: Belajar Photoshop, tutorial, tip n trik

Scrabble Icon n Hurup Pack

crabble Icons PAck, selain cocok buat icon, juga bisa untuk mengantikan Style Drop caps dari mandarin desain. Bahkan gambar ikon huruf scrabble sangat bagus untuk kita susunkan menjadi sebuah kalimat.

View donlot icon : www.tpdkdesign.net

Technorati tags: Free Donlot, Icon