Saturday, June 25, 2011
Preview Design Kaos Dengan Photoshop
Friday, June 24, 2011
HTML Dasar #5
Posting lagi ah :D
Kali ini posting tentang HTML aja deh,hehe.
Sekarang kita akan membahas tentang tampilan text,tentu tampilan text akan sangat penting dalam pembuatan sebuah halaman web.
Ini adalah contoh-contoh dari tag-tag dalam tampilan text,cekidot ;)
| Tag | Contoh | Definisi |
|---|---|---|
| <FONT size="2" color="#FFFF00" face="arial">...</font> | Contoh | Merubah ukuran,wana, dan font. Size ( ukuran ) dapat berupa angka 1 - 7.Color ( warna ) merubah warna font dan dapat berupa hexadecimal atau istilah warna dalam bahasa inggris.Face ( bentuk font ) merubah bentuk font. Font harus dapat ditemukan di setiap komputer seperti Arial, Times New Roman, Helvetica, Tahoma, atau Courier. |
| <BIG>...</BIG> | Contoh | Membuat text menjadi big ( besar ). |
| <SMALL>...</SMALL> | Contoh | Membuat text menjadi small ( kecil ). |
| <B>...</B> | Contoh | Membuat text menjadi bold. |
| <I>...</I> | Contoh | Membuat text menjadi italic. |
| <S>...</S> | Membuat text seperti dicoret | |
| <U>...</U> | Contoh | Membuat text menjadi underline ( garis bawah ). |
| <TT>...</TT> | Contoh | Membuat text menjadi teletype atau monospace. |
| <H1>...</H1> | Contoh |
Heading #1 |
| <H2>...</H2> | Contoh |
Heading #2 |
| <H3>...</H3> | Contoh |
Heading #3 |
| <H4>...</H4> | Contoh |
Heading #4 |
| <H5>...</H5> | Contoh |
Heading #5 |
| <H6>...</H6> | Contoh |
Heading #6 |
Nah,silahkan dicoba sendiri,kalau ada pertanyaan,komen saja dibawah :).
See You Again :)
Jquery Tab Ala Jaluffy
Saya terinspirasi membuat Tab ini dari Jquery-UI,berhubung saya masih amatir,saya membuat ini tidak terlalu bagus sih,tapi saya kira sudah cukup lah
hehe
Sama seperti sebelumnya,saya hanya menggunakan Show dan Hide [ Baru bisa sampai situ T.T ]
Mari kita mulai ! :)
Masukan Script dibawah ini kedalam widget.
<script type="text/javascript">Tuh kan,masih dasar banget T.T ,Silahkan diedit Width nya dan disesuaikan dengan blog kamu :)
$(document).ready(function() {
$(".t1").click(function() {
$(".i1").show();
$(".i2").hide();
$(".i3").hide();
$(".t1").css("background-color","#FFFFFF");
$(".t2").css("background-color","#999999");
$(".t3").css("background-color","#999999");
});
$(".t2").click(function() {
$(".i1").hide();
$(".i2").show();
$(".i3").hide();
$(".t1").css("background-color","#999999");
$(".t2").css("background-color","#FFFFFF");
$(".t3").css("background-color","#999999");
});
$(".t3").click(function() {
$(".i1").hide();
$(".i2").hide();
$(".i3").show();
$(".t1").css("background-color","#999999");
$(".t2").css("background-color","#999999");
$(".t3").css("background-color","#FFFFFF");
});
});
</script>
<style type="text/css">
.kotak
{
background:#CCCCCC;
height:300px;
border-radius:5px;
padding-right:3px;
width:245px;
}
.t1,.t2,.t3
{
background:#FFFFFF;
height:25px;
width:auto;
float:left;
margin-top:3px;
cursor:pointer;
border-top-left-radius:5px;
border-top-right-radius:5px;
text-align:center;
margin-left:3px;
padding:1px;
}
.t3,.t2
{
background:#999999;
}
.i1,.i2,.i3
{
background:#FFFFFF;
overflow:auto;
height:275px;
width:239px;
float:left;
margin-left:3px;
margin-right:3px;
margin-bottom:3px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-right-radius:5px;
}
.i2,.i3
{
display:none;
}
</style>
<div class="kotak">
<div class="t1">Ini Tab 1</div>
<div class="t2">Ini Tab 2</div>
<div class="t3">Ini Tab 3</div>
<div class="i1">Ini Isi 1</div>
<div class="i2">Ini Isi 2</div>
<div class="i3">Ini Isi 3</div>
</div>
Semoga Bermanfaat :D
Demonya bisa dilihat disini :) Read More..
Wednesday, June 22, 2011
Jquery Guest Book Ala Jaluffy
Script-script ini langsung saja ditaruh di dalam tag <body>.
<script type='text/javascript'>Nah,Selamat Mencoba ^^
$(document).ready(function() {
$(".btn1").click(function() {
$("#gb").fadeIn();
$(".btn2").fadeIn();
$(".btn1").fadeOut();
});
$(".btn2").click(function() {
$("#gb").fadeOut();
$(".btn2").fadeOut();
$(".btn1").fadeIn();
});
});
</script>
<style type='text/css'>
.btn1,.btn2
{
z-index:1000;
background:#CCCCCC;
width:230px;
height:20px;
position:fixed;
border:darkgrey;
bottom:0px;
right:10px;
border-style:outset;
text-align:center;
font-style:oblique;
cursor:pointer;
}
.btn2
{
display:none;
}
#gb
{
z-index:1000;
display:none;
background:#CCCCCC;
width:230px;
height:460px;
position:fixed;
border:darkgrey;
bottom:21px;
right:10px;
border-style:outset;
}
</style>
<div id='gb'>Ganti Tulisan Merah Ini Dengan Kode Buku Tamu Kamu</div>
<div class='btn1'>Guest Book</div>
<div class='btn2'>Guest Book</div>
Note : Height di .gb bisa disesuaikan dengan tinggi buku tamu anda
Demo bisa dilihat di sini
Read More..
Monday, June 20, 2011
HTML Dasar #4
Di tutorial kali ini kita akan memasukan gambar kedalam sebuah halaman web.
Web tanpa gambar memang loading nya lumayan cepat karena tidak harus me-load gambar-gambar tersebut,tetapi tanpa gambar sepertinya ada yang kurang gitu :P
Memasukan gambar sebenarnya cukup gampang,yaitu dengan menggunakan tag <img>,misalnya kita akan memasukan gambar bernama kucing dan ber ekstensi jpg yang telah berada 1 direktori dengan halaman web kita, jadi kita menggunakan <img src="kucing.jpg">.
Saya menggunakan file .jpg,jika menginginkan gambar yang resolusinya bagus, .gif jika ingin ada animasinya dan .png untuk background yang transparan.
Memberi gambar sebagai latar suatu web juga bisa kok,dengan cara menambahkan atribut pada tag <body> , menjadi <body background="kucing.jpg">
Anda juga bisa mengatur tinggi,lebar,border dan juga nama jika cursor berada diatas gambar tersebut dengan menambahkan atribut : height , width , border , dan alt ,contoh <img src="kucing" height="20px" width ="10px" border="1" alt="kucing saya".
Nah,semoga dengan ini ilmu anda dapat bertambah :)
Read More..Sunday, June 19, 2011
HTML Dasar #3
Tutorial HTML yang ketiga kali ini kita akan belajar cara membuat link.
Membuat link pada halaman web sangatlah penting karena kita akan menyambungkan 2 halaman yang berbeda.
Kita mulai saja deh,pertama kita buat 2 halaman,kita beri nama halaman 1 = 1.html , dan halaman 2 = 2.html , pastikan kedua file tersebut ada dalam 1 folder.
Di 1.html , di dalam tag body,masukan ini Link ke <a href="2.html">Ayo kita ke 2.html </a>.
Bagaimana ? bisa ? bagus :)
Kita lanjutkan, Bagaimana jika 2.html terletak tidak didalam 1 folder ?
Coba lihat ini
| href="file.html" | file.html terletak didalam 1 direktori atau 1 folder. |
|---|---|
| href="folder/file.html" | file.html terletak didalam 1 folder bernama "folder" dan folder tersebut berada bersama dengan file anda. |
| href="folder/morefolder/file.html" | file.html terletak didalam 1 folder dan folder tersebut berada didalam folder yang bersama dengan file anda. |
| href="../file.html" | file.html berada 1 tingkat dari file anda. |
| href="../../files/file.html | file.html berada lebih dari 1 tingkat dari file anda. |
Kalau di web,anda bisa menggunakan.
Kunjungi selalu <a href="http://www.jaluffy.blogspot.com/">Jaluffy :)</a>
Atau membuat link agar orang lain mengirimkan email ke anda :
Click <a href="mailto:name@domain.com">here</a>untuk email ke saya !
Anda juga bisa membuat anchor (kalau di kamus jangkar,masak saya nulis jangkar :) )
Anchor bertujuan agar orang lain dapat dengan cepat ke suatu tempat dimana halaman web anda berada.
Sebagai contoh jika ingin kembali keatas (bahasa kerennya Back To Top),anda bisa menggunakan script di bawah ini.
<html>Nah,cukup deh,tutorial kali ini,sampai jumpa di tutorial HTML selanjutnya :) Read More..
<head>
<title>Anchors</title>
</head>
<body>
<a name="top">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
<a href="#top">To top</a>
</body>
</html>
Saturday, June 18, 2011
HTML Dasar #2
Tutorial HTML kedua kali ini adalah menambahkan warna pada web anda.
Anda bisa menambahkan warna dengan menggunakan istilah bahasa inggris seperti "black" , "green" , "blue" . Atau anda bisa menggunakan code yang berupa Hexadecimal 0-9 dan A-F seperti #ffffff = Putih , #000000 = Hitam.Anda bisa berkreasi dengan mencari di Photoshop atau color picker yang lain :).
Untuk memberikan warna kedalam pada halaman web anda,anda harus menambahkan atribute ke dalam tag body.
Atribute yang bisa ditambahkan kedalam tag bodi adalah sebagai berikut :
| bgcolor="..." | Mengganti warna latar pada halaman web. |
|---|---|
| text="..." | Mengganti warna pada text. |
| link="..." | Warna pada link. |
| vlink="..." | Warna pada link yang sudah dikunjungi. |
| alink="..." | Warna pada link yang aktif. |
Mari kita coba buat dengan menggunakan notepad :
Tag a kemudian beratribute href di atas merupakan link yang akan saya jelaskan lain kali,kemudian Tag p digunakan untuk membuat paragraf.
<html>
<head>
<title>My Colorful Page</title>
</head>
<body bgcolor="#0000FF" text="#FFFFFF" link="#FF0000">
<p>Regular Text<br>
<a href="link.html">Link</a></p>
</body>
</html>
Simpan file tersebut dengan extensi html,jangan lupa ganti Save as Type nya menjadi all files,lalu jalankan di browser anda
Bagaimana,bagus kan ?Nah, sampai jumpa di tutorial selanjutnya :) Read More..
HTML Dasar #1
Kali ini saya akan memberikan tutorial dasar untuk bahasa HTML,karena basic dari jurusan yang saya tempuh (RPL) adalah Web Programmer,jadi saya berniat membuat tutorial tentang HTML
HTML adalah singkatan dari Hypertext Markup Language,dimana HTML itu adalah dasar dari berdirinya sebuah web.
Software yang dibutuhkan sebenarnya banyak dan bisa didapatkan secara free di Internet,tetapi kalau anda tidak ingin bersusah payah mencari di Internet,anda bisa menggunakan Notepad.
Tag nya cukup gampang, yaitu dengan menggunakan <(your tag here)> dan diakhiri dengan <(/your tag here)>,Penggunaan "/" di akhir sangat penting karena itu adalah akhir dari tag tersebut.
Bagian terpenting di HTML
| <html> | Mendefinisikan file teks sebagai dalam format HTML. Ini ditemukan pada awal dan akhir setiap halaman web. |
|---|---|
| <head> | Daerah judul dari halaman tersebut. Ruang antara kedua tag ini digunakan untuk perintah khusus yang tidak memiliki koneksi ke format sebenarnya dari halaman. |
| <body> | Ditemukan setelah tag <head> dan digunakan untuk menentukan area dari file format yang jalan setelah halaman web terlihat. |
Mari kita coba buat dengan menggunakan notepad :
<html>Tag title di atas akan keluar di tab browser anda,kemudian Tag br digunakan untuk ganti baris.
<head>
<title>
HTML pertama saya.
</title>
</head>
<body>
Ini adalah halaman web pertama saya yang saya buat dengan menggunakan HTML dasar :)<br/>
Saya akan terus berlatih :)
</body>
</html>
Simpan file tersebut dengan extensi html,jangan lupa ganti Save as Type nya menjadi all files,lalu jalankan di browser anda
Bagaimana,bisa kan ?Nah, sampai jumpa di tutorial selanjutnya :) Read More..
Tuesday, June 14, 2011
Jquery Menu Ala Jaluffy
Kali ini saya akan membahas tentang Jquery.
Teman-teman banyak yang bertanya,gimana cara bikin menu kayak punya mu ? :D
Nah,script di bawah silahkan di copy dan paste di tempatnya masing-masing.
<SCRIPT src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<SCRIPT src='http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js' type='text/javascript'/>
script diatas penting tuh,gunanya untuk memanggil Jquery online ;)
<SCRIPT type='text/javascript'>
$(document).ready(function(){
$(".flip").click(function(){
$(".panel-a").show("slow");
$(".flip").hide("slow");
});
$(".flip-b").click(function(){
$(".panel-a").hide("slow");
$(".flip").show("slow");
});
});
</SCRIPT>
<STYLE type='text/css'>
div.panel-a,p.flip
{
cursor:pointer;
z-index:1000;
position:fixed;
top:20px;
overflow:auto;
margin:0px;
right:0px;
}
p.flip
{
text-align:center;
}
{
text-align:center;
padding:5px;
border:solid 1px #c3c3c3;
position:fixed;
top:0px;
overflow:auto;
margin:0px;
}
div.panel-a
{
padding:5px;
border:solid 1px #c3c3c3;
height:auto;
display:none;
}
div.flip-b
{
right:auto;
bottom:auto;
text-align:center;
padding:5px;
border:solid 1px #c3c3c3;
top:0px;
overflow:auto;
margin:0px;
}
</STYLE>
script diatas di taruh di antara <head> dan </head>
<DIV class='panel-a'>
<P>
<A href='http://jaluffy.blogspot.com/'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/home.png'/></A>
<A href='http://jaluffy.blogspot.com/search/label/Photoshop'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/potosop.png'/></A>
<A href='http://jaluffy.blogspot.com/search/label/Flash'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/flash.png'/></A>
<A href='http://jaluffy.blogspot.com/search/label/Corel Draw'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/corel.png'/></a>
<A href='http://jaluffy.blogspot.com/search/label/JQuery'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/jquery.png'/></a>
<A href='http://jaluffy.blogspot.com/search/label/PHP'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/php.png'/></a>
</P>
<DIV class='flip-b'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/close.png'/></DIV>
</DIV>
<P class='flip'><IMG src='http://i1138.photobucket.com/albums/n528/jaluffy/menu.png'/></P>
script diatas bisa 2 opsi,ditaruh di widget,atau ditaruh di antar <body> dan </body>,yang berwarna merah bisa diganti foto ataupun text ;)
Selamat mencoba !
Demo bisa dilihat di sini Read More..
Monday, June 13, 2011
Logo Sony Ericcson
1. Seperti biasa buka corel > Ctrl+N
2. Buat satu lingkaran dan jangan lupa selalu tekan juga Ctrl + Shift agar lingkaran yg kita buat presisi dengan otomatis.
3. Setelah itu buat lagi satu lingkaran kecil dan letakan seperti pada gambar dibawah ini dan seleksi lalu Combine Ctrl + L
4. Kita buat lagi beberapa lingkaran karena unsur dari logo ini hampir keseluruhan adalah lingkaran. Buat lingkaran yg sama persis dengan lingkaran kedua tadi(copy)
5. Setelah itu kita ke langkah berikutnya. Buatlah 1 lingkaran kecil dan bentuk menjadi elips seperti dibawah ini
Lalu putar dan rekatkan seperti gambar dibawah ini
Kemudian gunakan Beizer Tool untuk membuat object seperti dibawah ini
Gunakan Shape Tool, seleksi semua Node dari object tersebut dan klik Convert Line To Curve
Setelah itu kita ubah object tadi sampai menjadi object pada gambar berikut
Lalu satukan object nomor 1 dan nomor 2 dengan menggunakan Weld
Setelah itu klik pada object 1 atau 2 tadi > tekan Shift dan klik object 3, lalu Trim(sebelah kanan Weld)Dan terbentuklah object baru seperti dibawah ini
Lalu gabungkan/satukan dengan object pertama yg kita buat. Tadi dan jadilah ujud dibawah ini
Beri warna 90% black lalu gunakan Interactive Fill Tool
Kemudian
Hilangkan Outlinenya.
6. Bagian pertama selesai, lanjut gan.....
Kita buat lagi Lingkaran kecil dan besar(maaf mungkin saya tidak menyertakan ukuran dikarenakan untuk menghindari hal-hal yg tidak di inginkan..Hehehe...)Kira-kira seperti gambar dibawah ini
Object yang sudah jadi tadi hanya untuk acuan ukuran saja, jika sudah merasa pas dimohon dengan sangat untuk memisahkan object pertama dengan lingkaran-lingkaran baru tadi.
7. Beri warna hijau pada lingkaran kecil dan hijau juga pada lingkaran besar(pisahkan keduanya) kita mulai membuat object ke dua(lingkaran besar) seleksi lingkaran besar dan lalu klik Interactive Fill Tool pada Fill Type yang semula Preset ubahlah menjadi Conical dan buatlah sampai menjadi seperti gambar dibawah ini
Jika sudah, Copy object diatas tadi menjadi dua, object copy dari object tadi beri warna hitam pilih Interactive Transparency Tool dan ubah Transparency Type menjadi Radial lalu edit transparency dengan tool dibawah ini yang dikotak merah
Setelah itu akan muncul jendela sperti dibawah ini
Jangan lupa pilih Custom, lalu tambahkan Node pada kotak merah diatas dengan cara meng-klik dua kali, tambahkan 2 node satu beri warna putih satu hitam lalu klik OK.
Arange sendiri sampai menjadi seperti gambar di atas, saleksi kedua object kedua ini lalu tekan C dan E pada keyboard dan jadilah rupa dibawah ini.
Object kedua selesai, masuk pada object berikutnya.
8. Seleksi ingkaran kecil tadi, pilih Interactive Fill Tool dan ubah Fill Type menjadi Radial lagi lalu Edit Fill pilih Custom dan tambahkan dua node
Node 1 beri warna hitam, Node 2 = Hitam, Node 3 = Hijau dam Node 4 = Putih, lalu klik OK.
Setelah itu mari kita utak-atik sampai menjadi seperti gambar dibawah ini
Dan object ketiga pun telah selesai.
9. Berikutnya kita gabungkan ketiga object tersebut menjadi seperti gambar dibawah
10. Tearkhir kita gunakan lagi Bezier Tool dan buat object seperti pada gambar dibawah ini(kebanyakan pakai kata “Seperti gambar dibawah ini ya?? Biar deh, gak tau lg musti pake kalimat apa... Hee...)
Wah terlihat tidak ya? Lalu gunakan Shape Tool lagi dan langkahnya seperti pada awal tadi
sampai menjadi gambar ini
Hasilnya adalah yang berwarna kuning diatas, berilah warna hijau object hasil Trim tadi lalu pilih Interactive Fill Tool lagi dan ubah sampai menjadi seperti pada gambar dibawah ini (lagi???)
Tambah kan 3 lingkaran kecil yg berjajar seperti gambar dibawah ini
Group-kan semua object karena sudah selesai logo tadi, tinggal bagaimana kreasi kita, mau ditambah apa juga terserah kita, ini imajinasi kita bukan mereka(hehe...)
Hasil dari Tutorial diatas
Selamat mencoba, semoga berhasil gan.....
tangqiu...... Read More..
Photoshop Efek Hantu
1. Pilih satu gambar yang enak di kotak-katik aja. Saya memilih yang satu ini,
Save gambar di Komputer sebagai contoh file latihan
Dan manipulasi yang saya lakukan yaitu “menghilangkan kepala”!!!!
2.
Lakukan duplikasi menjadi layer dan diberi nama pada layer.
Pada background lakukan hidden dengan menghilangkan gambar mata pada layer.
3.
Lakukan pennyeleksian pada gambar yang akan di manupulasi.
Pilih Quick Selection Tool untuk melakukan penyeleksian
4. Arahkan pointer pada daerah kepala
klik untuk lakukan penyeleksian
5. Tekan delete untuk menghapus hasil seleksi. Pastikan layer depan aktif.
Hasilnya:
6. Non aktif kan seleksi, dengan menekan Ctrl+D, deselection.
Lanjutkan dengan ‘penambalan’ hasil potongan kepala dengan cara cloning pada layer depan.Pilih Clone Stamp Tool
7. Setelah memilih Clone Stamp Tool,
tekan Alt setelah keluar tanda seperti yang di atas klik pada gambar yang akan di ambil kloningnya. Atur opacity 75% dan flow 75% (sesuai kebutuhan)
8.
Lakukan cloning perlahan-lahan dengan mengambil kloningan gambar yang
paling dekat dengan daerah ‘penambalan’.
Klik kanan,atur hardness 0%, diameter ikuti daerah cloning.
9.
Setelah cloning
seperti gambar di atas itu sudah cukup.Untuk hasil yang maksimal dalam cloning atur opacity lebih kecil dan diameter lebih besar.
10. Langkah berikut,
aktifkan pen tool, dan lakukan create Anchor point pada kerah baju seperti gambar di bawah.
Atur warna menyerupai warna baju dengan memakai
eyedropper tool
11.
Setelah menutup anchor point, pilih menu layer-Resterize-Shape.
Ubah nama layer menjadi kerah.Tekan ctrl dan klik pada layer kerah untuk mendapatkan seleksi
Kerah terseleksi
12.
Aktifkan Brush Tool,
dan pilih warna dengan
Color picker lebih yang lebih gelap 30% sepertiyang dilingkar merah
13.
Sapukan brush pada bagian dalam kerah, sehingga nampak mempunyai luang kerahnya seperti gambar.
Tekan Ctrl+D setalh selesai brushing
14
Untuk langkah terakhir lakukan bluring dengan Blur tool pada sisi luar kerah.
Hasil Akhirnya: Kurang Lebih seperti ini:
Hiii... Tapi gak usah takut kan cuma rekayasa genetik eh salah REKAYASA FOTO efek saja ^_^ hehehe...
Semoga Bermanfaat... ^_^
Read More..


