Selasa, 22 Januari 2013

Membuat Menu Multi Kolom


Membuat menu multi kolom disini maksudnya membuat lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak seperti pada contoh screenshot berikut:





Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Keterangan :

- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna biru--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama

Untuk mengetahui kode-kode warna silahkan klik disini

5. Silahkan masukkan kode dibawah ini sebelum kode </head>
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian Save

Kemudian ke menu Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript

Silahkan masukkan script menu multi kolom dibawah ini:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda

Silahkan dicoba,,semoga berhasil!!!

Cara Pasang Read More untuk Template Baru



Untuk membuat Read More seperti pada postingan saya,supaya artikel yang tampil lebih pendek ikuti langkah – langkah berikut:

1. Sign in di blogger anda dengan->Setting->Formatting

2.Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi text area kosong tersebut dengan kode di bawah ini :

<div class="fullpost">

</div>
3. Klik tombol yang bertuliskan Save Settings

Pemasangan kode ini supaya pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu ditext area saat posting

Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :


1. Klik menu Dasboard->Layout->Edit HTML


2. Klik tulisan Download Full Template


Silahkan save dulu template tersebut, untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula dgn upload lagi data tersebut


3. Jangan lupa beri tanda centang pada kotak di samping tulisan "Expand Widget Template"


4. Silahkan anda cari kode berikut pada kode template milik sobat :

<div class='post-header-line-1'/>
<div class='post-body'>


atau

<div class='post-header-line-1'/>
<div class='post-body entry-content'>


5. Copy kode HTML di bawah ini kemudian paste di bawah kode diatas


<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;} </style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;} </style>


6. Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :


<p><data:post.body/></p>

7. Copy kode HTML di bawah ini kemudian paste di bawah kode tadi


<a expr:href='data:post.url'>Read More......


</b:if>


anda bisa mengganti kata Read More pada kode ini sesuai keinginan anda

8. klik tombol bertuliskan Save Template

9. Selesai,


Cara Posting Artikel nya


1. Klik menu Posting->jangan lupa tulis posting di Edit HTML bukan di Compose karena kode dibawah ini tidak akan muncul di halamana compose

Secara otomatis akan timbul kode seperti ini

<div class="fullpost">



</div>


2. Tulisankan artikel yang ingin tampak pada blog sebelum kode dibawah ini


<div class="fullpost">


3. Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode dibawah ini :

</div>

4. Klik tombol PUBLISH POST->Silakan lihat blog anda,,


Untung postingan yang anda buat sebelum pasang read more silakan edit dan tambahkan kode dibawah ini secara manual dengan format dibawah ini
Artikel yang ingin tampil dipostingan

<div class="fullpost">
Sisa Artikel anda

</div>



warna merah adalah kode yang harus anda tambahkan dipostingan yang sedang anda edit



Selamat mencoba!!! semoga berhasil :z

Minggu, 20 Januari 2013

Tutorial Photoshop : Menghaluskan Kulit Wajah

Selamat datang di StripBandunk, pusat pembelajaran teknologi informasi. Pada tutorial kali ini kami akan membahas tentang cara menghaluskan kulit wajah menggunakan Adobe Photoshop.
Perangkat Lunak : Adobe Photoshop CS5.
Sistem Operasi :  Windows XP.
Tingkat Keterampilan : Pemula.
Estimasi Waktu : 30 Menit.

Tahap 1 – Memilih Photo
Untuk mengikuti tutorial ini, pastikan Anda menggunakan photo dengan kualitas yang baik, dan sangat menggunakan jenis photo portrait
Buka file photo Anda menggunakan Adobe Photoshop.

Tahap 2 – Membuat Duplicate Layer
Setelah itu buatlah sebuah duplicat layer dari background gambar yang telah Anda gunakan tadi. Caranya pada pallete layer, klik kanan layer Background lalu klik kanan dan pilih Duplicate Layer.

Berinama duplicate layer yang Anda buat, misalnya kami menggunakan nama gambar-depan.


Tahap 3 – Memberi Efek Gaussian Blur
Setelah membuat duplicate layer, sekarang hilangkan layer visibility dari layer gambar-depan, caranya pada pallete Layer, hilangkan tanda mata-nya.

Klik layer Background, lalu pilih menu Filter -> Blur -> Gausian Blur untuk memberi efek blur.

Sesuaikan radius efek blurnya, jangan terlalu kecil dan jangan juga terlalu besar. Misal kami menggunakan radius 15.0 pixels.

Tahap 4 – Menghapus Kulit Wajah
Setelah menambahkan efek gaussian blur pada layer Background, sekarang tampilkan visibility layer gambar dan hilangkan visibility layer background.

Pilih Eraser Tool untuk melakukan penghapusan wajah pada layer gambar-atas.

Klik kanan pada gambar, lalu sesuaikan ukuran Erase Tool, pastikan Hardness nya menjadi 0% agar terdapat efek blur pada sisi area Erase Tool.

Hapus seluruh area wajah yang sekiranya akan dihaluskan seperti pada gambar dibawah ini.

Setelah selesai, Anda dapat menampilkan visibility dari layer Background untuk melihat hasil akhir dari penghapusan yang Anda buat.

Hasil Akhir

Pada gambar dibawah ini terlihat hasil akhir dari tutorial ini.


Bandingkan dengan gambar sebelumnya.

Selamat mencoba :D

Mewarna Rambut dengan Adobe Photoshop CS


PERSIAPAN

Sekedar informasi saja latihan yang saya sharing dengan anda ini termasuk keahlian “dasar” di dalam belajar Adobe Photoshop, dan diluar sana banyak sekali cara-cara lain yang lebih ‘ajaib‘ dari pada cara di tutorial kita kali ini. Jika anda menginginkan pemahaman step by step tutorial yang lebih mudah untuk diikuti.. saya anjurkan anda menggunakan tools (image) yang sama persis dan jika telah sukses anda wajib berkreasi dengan foto anda sendiri.

TEKNIK YANG DIGUNAKAN

Teknik-teknik yang akan dipelajari dan digunakan adalah sbb:
  • Duplicate, Rename Layer (menggandakan layer)
  • Magnetic Lasso Tools (menseleksi secara metode besi sembrani)
  • Reveal Selection, Layer Mask (teknik mask yang hanya terseleksi)
  • Color Balance dan Brush Mask (merubah dan menambah-mengurangi area)

LANGKAH 1: MENDUPLIKASI LAYER

Tutorial Photoshop Retouch Effect Mewarnai Rambut
Pada langkah pertama ini kita akan menggandakan foto menjadi dua buah bagain yang sama dengan cara ‘ditumpuk‘ pada lapisan (layer) yang sama dengan tujuan untuk memisahkan bagian-bagian dari master foto editing yang kita kerjakan, misalnya bagian rambut, bagian kepala, bagian mata, dll. hal ini sangat penting agar foto asli (master photo) tetap utuh ketika fasilitas UNDO tidak dapat lagi menolong anda untuk kembali kebagian penting pada proses sebelumnya.
Langkah-langkah menduplikatkannya mudah saja, yaitu:
  • Buka Foto dengan program aplikasi Adobe Photoshop dengan versi apa saja (dianjurkan minimal versi CS)
  • Munculkan Panel Layer dengan cara WINDOWS > LAYERS atau tekan tombol F7 pada Keyboard computer anda
  • Setelah muncul seperti gambar diatas CLICK KANAN FOTO > PILIH DUPLICATE LAYER

LANGKAH 2: MENSELEKSI AREA RAMBUT

Tutorial Photoshop Retouch Effect Mewarnai Rambut
Satu lagi hal terpenting yang menjadi bagian inti dari tutorial merubah warna rambut ini adalah langkah didalam menseleksi atau “hanya memilih” area rambut yang akan diwarnai saja oleh kita.
Untuk melakukan cara diatas tersebut sebenarnya mudah saja :) , wah bener nech? yap!! Adobe Photoshop menyediakan sekitar 9 alat (tools) seleksi yang dapat anda gunakan sesuai kebutuhan anda diataranya adalah Rectangular Marquee Tool (M), Eliptical Marquee Tool (M), Single Row Marquee Tool, Column Marquee Tool, Lasso Tool (L), Polygonal Lasso Tool (L), Magnetic Lasso Tool (L), Quick Selection Tool (W), Magic Wand Tool (W).
Untuk ‘kasus‘ yang kita hadapi kali alat yang paling tepat untuk digunakan adalah Magnetic Lasso Tool (L), kenapa? karena dengan alat pada tool box Adobe Photoshop ini anda dapat dengan mudah menyusuri tepi-tepi rambut pada model diatas seperti layaknya magnet yang hanya menempel pada benda besi saja (rambut) dia tidak akan menempel pada benda kayu (kulit), air (telinga), kain (baju), dll. benar-benar alat yang sempurna :D . Sedangkan secara selintas cara-cara menggunakannya adalah sbb;
  • Pilih/Click layer yang akan diedit pada panel layer di sebelah kanan area kerja (workspace) Adobe Photoshop anda
  • Setelah itu pilih alat (tools) yang bernama Magnetic Lasso Tool (atau tekan tombol “L” di keyboard anda agar langsung terpilih)
  • Click sekali pada tepi/sisi object rambut
  • Setelah itu tanpa menekan tombol apapun di Mouse dan Keyboard susuri/ikuti tepi-tepi rambut model foto kita diatas
    INFO: Magnetic Lasso Tool akan bekerja secara otomatis menempel pada area warna-warna yang senada (hampir sama) saja, maka dari itu tanpa diclick secara manualpun tepi-tepi rambut diatas akan otomatis terpilih
    TIPS: Jika anda merasa hasil seleksi ketika menyusuri tepi rambut dirasa tidak pas atau tidak tepat menempel anda boleh melakukan teknik CLICK sekali saja pada area-area tertentu, misalkan lengkungan ujung rambut, sudut telinga, sudut leher, dll. Setelah itu lanjutkan kembali menyusuri tepi-tepi rambut seperti langkah sebelumnya.
  • Jika anda telah berhasil menyusuri seluruh tepi-tepi rambut (seperti contoh ilustrasi diatas) dan antara titik (node) awal dan titik ujung sudah bertemu, anda dapat melakukan DOUBLE CLICK pada akhir titik agar kedua ujung titik dapat bersatu
  • Selesai :D

LANGKAH 3 MEMBERI EFEK MASK PADA HASIL SELEKSI

Tutorial Photoshop Retouch Effect Mewarnai Rambut
Untuk memulai mengedit area rambut hasil seleksi yang kita lakukan tadi, masuklah kemenu LAYER > LAYER MASK > REVEAL SELECTION. Hal ini dilakukan agar apapun yang kita edit dan hapus tidak akan berpengaruh ke foto aslinya, namun hanya berpengaruh terhadap area warna rambut saja, Sssst…!! itulah trick rahasia dari tutorial kita kali ini :D .

LANGKAH 4: RENAME LAYER

Tutorial Photoshop Retouch Effect Mewarnai Rambut
TIPS: Untuk mempermudah membedakan mana layer foto dengan rambut warna kuning emas, mana layer photo dengan warna Pink, dst. Anda dapat merubah nama layer dengan inisial text sesuka anda (lihat contoh diatas), caranya DOUBLE CLICK TEXT pada LAYER > KETIK NAMA > ENTER

LANGKAH 5: MERUBAH KOMBINASI WARNA

Tutorial Photoshop Retouch Effect Mewarnai Rambut
Pada langkah ini anda kita akan membuat kombinasi alias aneka-reka warna :) , yang anda butuhkan adalah bermain dengan 6 kombinasi warna primer yaitu R (Red) G (Gree) B (Blue) C (Cyan) M (Magenta) Y (Yellow), langkahnya simple saja:
  • Lihat pada layer (lapisan) rambut baru yang telah anda duplikasi dan rename sebelumnya
  • CLICK SEKALI pada KOTAK FOTO Sebeah kiri atau CLICK SEKALI tulisan Background copy/Kuning
  • Tekan tombol Ctrl (control) + “B” pada keyboard untuk memunculkan panel Color Balance atau anda bisa masuk ke menubar IMAGE > ADJUSTMENTS > COLOR BALANCE
  • Setelah muncul menu warna seperti gambar diatas aturlah komposisi warna layer mask seperti contoh diatas
TIPS: Ketik Color Level seperti contoh diatas +100, +22, -100 atau anda dapat men-drag (menggeser) slider warna sesuai keinginan anda

LANGKAH 6: MERAPIHKAN AREA RAMBUT

Tutorial Photoshop Retouch Effect Mewarnai Rambut
Satu lagi teknik Finishing Touch yang cukup penting untuk memunculkan detail foto editing yang sempurna didalam tutorial belajar mengedit photo kita kali ini yaitu Teknik Brush Mask.
Dengan menggunakan tool kuas (brush) warna HITAM dan PUTIH anda dapat mengurangi area mask rambut ataupun menambah area mask rambut, sehingga setiap ujung helai rambut tidak ada yang terlewat terwarnai.
Anda lihat hasil seleksi pada contoh yang saya buat diatas… khususnya yang saya tandai dengan tanda “>>” ada bagian-bagian rambut yang tidak rapih terseleksi dalam LANGKAH 2: MENSELEKSI AREA RAMBUT sebelumnya, mungkin bagi anda yang baru pertamakali belajar latihan menggunakan teknik Mask ini adalah sebuah ‘petaka :D ‘!! (hehe) namun tenang saja kita akan mencoba memperbaikinya sekarang juga:
  • Pastikan Warna Foreground (atas) dan Warna Background (belakang) Adobe Photoshop (7, CS, CS2, CS3, CS4) adalah HITAM (#000000) dan PUTIH (#FFFFFF) atau kembali ke DEFAULT dengan cara TEKAN TOMBOL HURUF “D” di KEYBOARD, hal ini akan mengakibatkan apapun warna yang anda setting sebelumnya akan kembali kewarna dasar yaitu hitam dan putih
INFO: Brush berwarna FOREGROUND hitam digunakan untuk menghapus/mengurangi area MASK pada rambut, sedangkan Brush berwarna FOREGROUND putih digunakan untuk menambah area MASK pada object rambut.
  • Untuk kasus latihan kali ini… kita membutuhkan koas (brush tools) berwarna foreground PUTIH, jadi CLICK SEKALI pada Brush Tool dan mulailah menggosokan koas (brush tools) pada area rambut yang tidak ter-masking atau tidak ikut terseleksi dengan rapi hingga seluruh rambut menjadi terwarnai semuanya
TIPS: Sesekali anda pasti membutuhkan mengganti antara warna Background dan Foreground dalam praktek kali ini, tips dan trik-nya mudah saja.. anda tinggal menekan tombol “X” pada keyboard maka antara warna hitam dan putih akan otomatis bertukar satu samalain, hal ini penting untuk menambah dan menghapus masking.
INFO: Untuk mengganti jenis koas (brush) dan ukurannya anda dapat melakukan CLICK KANAN pada kanvas foto dan pilihlah sesuai kebutuhan (lihat gambar)

LANGKAH 7: MENAMBAH LAYER WARNA RAMBUT

Tutorial Photoshop Retouch Effect Mewarnai Rambut
Bagaimana :) langkah-langkah praktik diatas sudah sukses anda lakukan bukan? jika sudah.. tibalah saatnya anda membuat berbagai variasi warna rambut sehingga tampak berwarna-warni, caranya mudah saja:
  • Kembali lagi menduplikatkan berwarna KUNING dan gantilah COLOR BALANCE sesuai cara pada langkah sebelumnya
  • Jika sudah cobalah menghapus Mask dari layer baru tersebut agar memunculkan effect warna rambut yang bergradasi (trap) seperti contoh di gambar ilustrasi diatas
  • Jika anda merasa 2 macam fariasi warna rambut diatas kurang ‘sreg dihati:) anda dapat dengan mudah menduplikasikan kembali layer warna KUNING dan ulangi lagi semua langkah yang telah anda pelajari diatas hingga memunculkan hasil manipulasi digital terbaik versi anda, mudah bukan :D .
Semoga bermanfaa,..,.,.

kumpulan cara buat efek di photoshop


Gritty Look 7 Mei 2009

gritty-look_01
Akhir-akhir ini saya sedang sibuk dengan pembuatan buku baru, judulnya Uncover Photoshop. Dan efek ini adalah salah satu projek yang dijelaskan di sana. Efek yang di beri nama Gritty Look ini merupakan kombinasi dari tampilan high contras dan banyak sharpening. Bagi yang ingin ngebut, saya sediakan efek ini dalam bentuk actions yang bisa Anda download di sini.
Download Gritty Look Action (lagi…)
 

Memberikan Filter pada Layer Mask 15 April 2009

Filed under: efek foto — jeprie @ 7:18 am
Tags: , , , , ,

Di sini akan ditunjukkan salah teknik kunci dalam pembuatan efek foto yang non-destruktif, yaitu menjalankan filter pada mask. Saya katakan non-destruktif karena efek yang dihasilkannya tidak akan merusak gambar, perubahan hanya terjadi pada mask-nya. (lagi…)
 

Lipatan Kertas 13 April 2009

Filed under: efek foto — jeprie @ 7:02 am
Tags: , ,

Di tutorial ini saya tunjukkan cara melipat ujung gambar seperti di atas.
(lagi…)
 

Efek Mozaik 9 April 2009

Filed under: efek foto — jeprie @ 4:59 pm
Tags: , , , ,

Dalam efek ini foto seolah-olah dibuat dari berbagai jenis pecahan keramik. Tidak ada yang rumit dalam pembuatannya hanya permainan filter di mode quick mask. (lagi…)
 

Boxed 7 April 2009

Filed under: efek foto — jeprie @ 8:38 pm
Tags: ,

Satu lagi efek foto yang sederhana, hanya mengandalkan adjustment layer dan sedikit styles.
(lagi…)
 

Teks di Belakang Foto 6 April 2009

Filed under: efek foto,efek teks — jeprie @ 8:38 pm
Tags: , ,

Seperti yang Anda lihat di gambar di atas. Kita akan melubangi gambar dan memberi teks di dalamnya.
(lagi…)
 

Stroke and Shadowed 1 April 2009

Filed under: efek foto — jeprie @ 9:23 am
Tags: , ,

Tutorial ini berawal dari pertanyaan di forum photoshop21.com. Pertanyaannya cara memberi bayangan dan bingkai sederhana berbentuk garis pada gambar. Sebetulnya teknik ini sederhana, tidak rumit, saya yakin penguna menengah Photoshop pasti bisa.
(lagi…)
 

TV Scanline 18 Februari 2009


Semua TV kecuali HDTV memiliki garis-garis kecil di layarnya. Yang akan kita lakukan di sini menambahkan efek itu ke dalam foto. Efek ini membuat foto terkesan high-tech, setidaknya itu yang saya peroleh.
[All TV, except HDTV, have a thin lines on their screen. What we'll do here is add those effect to a photo. This efek create a high tech look, at least thats what i get.] (lagi…)
 

Foto Ketupat 10 Februari 2009

Filed under: efek foto — jeprie @ 5:49 pm
Tags: ,
capture_25
Saya tidak tahu apa nama yang cocok untuk efek seperti ini. Jadi saya tembak saja, efek foto ketupat. Terdengar tidak keren, kesannya seperti mau lebaran. Jika ada ide baru saya akan menggantinya dengan nama yang lebih catchy. Tutorial ini terinspirasi dari sebuah pertanyaan di forum photoshop21.com.
Dalam efek ini, foto seolah-olah terbagi ke dalam beberapa pita. Setiap pita saling bertumpukkan dengan pita-pita lainnya, persis daun kelapa muda di ketupat lebaran.
[This effect create a photo printed in ribbons. Each ribbon stack onto others.] (lagi…)
 

Trikpod 1-Ghosting 5 Februari 2009

Filed under: efek foto — jeprie @ 5:58 am
Tags: , , , , ,
clip_image002
Kali ini saya membuat tiga seri tutorial efek foto yang mengandalkan tripod. Itulah sebabnya saya memulai judul blog ini dengan trikpod, trik dengan tripod. Semua file gambar yang digunakan dalam tutorial ini diambil oleh saya sendiri dengan bantuan sebuah tripod. Efek pertama ini adalah yang termudah. Idenya adalah membuat model foto transparan seperti penampilan seekor hantu.
[This series will explain three photo effect using tripod trick. If you dont have a tripod, I suggest you to buy one. Trust me, you'll need it.]
(lagi…)

,,,

.,.,,.

Program Komputer - Find me on Bloggers.com
Free Music Sites
Free Music Online

free music at divine-music.info

Blog Archive

About Me

About Me