cara mudah mengganti background pas photo

Design Grafis

cara mudah mengganti background pas photo

Jiu Bunta 1:28 AM Komentar

Sebenarnya ada banyak cara untuk mengganti warna background pas photo dan tool yang digunakan beragam, mulai dari pensil tool, quick selection tool, magic wand tool, dan tool lainya. Permasalahan yang paling umum dihadapi dalam mengganti warna background pas photo yaitu menyeleksi bagian rambut. Jika menggunakan tool - tool biasa hasil seleksinya terlihat tidak hidup dan patah - patah. Namun setelah mencoba berbagai cara, akhirnya dapat juga cara yang simpel, cepat dan powerfull. Cara ini tergolong cepat karena menggunakan plug in tambahan photoshop yaitu Extract. Dalam keadaan default photoshop tidak dilengkapi dengan plug in ini, jadi bagi yang belum punya silahkan dibrowsing di google. Jika sudah punya silahkan dicopy atau dicut saja ke directory tempat photoshop diinstal (dalam hal ini saya menggunakan adobe photoshop cs 6 portable dengan sistem operasi windows 7) jadi kurang lebih posisi directory nya seperti dibawah ini. Jika sobat menggunakan adobe photoshop versi lainya silahkan sesuaikan.

C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Required\Plug-Ins\Filters

Berikut screen shotnya saat sebelum dan sesudah penambahan plug in :

Sebelum Pemasangan Plug In :

Sesudah Pemasangan Plug In :

• OK setelah semua kelengkapannya siap. selanjutnya buka pas photo yang akan diganti warna backgroundnya. Klik File - Open. Berikut screen shot foto yang digunakan :

• lalu duplikat foto dengan menekan ctrl + j pada keyboardnya atau klik kanan pada layer foto dan pilih Duplicate Layer, beri nama layer duplikat tersebut sesuai selera anda.
• selanjutnya barulah masuk ketahap utama yaitu mengganti warna backgound, klik filter pada menu bagian atas dan pilih Extract...berikut screen shootnya :

• Pada gambar diatas klik Edge Highlighter Tool untuk melakuan seleksi pada bagian sekitar badan (garis berwarna hijau). Sebaiknya gambar dizoom terlebih dahulu agar hasil seleksi lebih rapi. untuk memperbesar ukuran kuas seleksi tekan tombol [ pada keyboard dan untuk memperkecil tekan tombol ]. Saat melakukan seleksi sebaiknya ukuran kuas tidak terlalu besar.
• Jika proses seleksi sudah selesai selanjutnya klik Fill Tool dan klik pada bagian dalam gambar foto sehingga bagian dalam foto akan berwarna biru seperti yang ditunjukan gambar diatas.
• Selanjutnya silahkan tekan OK. kurang lebih hasilnya seperti dibawah ini :

• lalu hilangkan tanda mata pada bagian kiri foto yang backgroundnya berwarna merah seperti yang ditunjukan panah. maka akan tampak bahwa pada bagian rambut masih terdapat warna merah. Untuk membersihkanya gunakan Burn Tool yang ditunjuk oleh tanda panah, kemudian atur ukuran kuasnya dan gosokan pada bagian rambut yang merah (akan lebih baik jika gambar dizoom terlebih dulu agar proses penghitaman rambut menjadi lebih gampang). 
• Jika sudah munculkan kembali tanda mata pada bagian kiri foto yang backgroundnya berwarna merah. hasilnya background gambar masih berwarna merah.
• Untuk merubah backgroundnya menjadi warna yang anda inginkan silahkan klik layer yang dibawah (foto yang backgroundnya berwarna merah), lalu klik Brush Tool dan ganti warna brush sesuai dengan yang diinginkan (dalam tutorial ini untuk background saya set warna biru). untuk seting warna anda bisa langsung pilih pada bagian Color atau Swatches yang berada dibagian kanan atas.
• Terakhir tinggal anda gosokan Brush tersebut ke objek foto (agar lebih cepat perbesar ukuran kuas brush dengan menekan tombol ] pada keyboard dan tombol [ untuk mengecilkan ukuran kuas. 
• Finish.
• Berikut screen shot akhirnya :

Baca selengkapnya

Merancang Layout / Halaman Website dengan Tampilan Dropdown Menu

HTML

Merancang Layout / Halaman Website dengan Tampilan Dropdown Menu

Jiu Bunta 11:45 PM Komentar

Berikut adalah cara merancang layout web dasar dengan menggunakan alat bantu dasar yaitu notepad (sebaiknya gunakan notepad ++). Sebenarnya banyak cara untuk merancang tampilan websiter seperti adobe dreamweaver, photoshop, wysiwyg, dan masih banyak lagi yang lainnya. Tapi tidak ada salahnya jika kita gunakan notepad, justru dengan menggunakan tool yang jadul ini bisa membuat kita sangat dekat dan lebih paham dengan coding - coding pembentuk sebuah website. OK sudah cukup mutar - mutarnya sekarang saatnya kita langsung ke tahapanya :

Langkah - demi langkah :

1. Silahkan jalankan / buka aplikasi notepadnya, lalu tinggal copas saja coding dibawah biar cepetan dikit. Kemudian save dengan nama index.html.

<html>

<head><title>Main Project</title>

<meta charset="utf-8" />

<link type="text/css" rel="stylesheet" href="mode/style.css" />

<link type="text/css" rel="stylesheet" href="mode/topmenustyle.css" />

</head>

<body>

<div id="wrapper">

<div id="header"></div>

<div id="topmenu">

<ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">Personal</a></li>

        <li><a href="#">Tutorial</a>

            <ul>

                <li><a href="#">Internet</a></li>

                <li><a href="#">Web Programmer</a>

                    <ul>

                        <li><a href="#">HTML</a></li>

                        <li><a href="#">CSS</a></li>

                    </ul>

                </li>

            </ul>

        </li>

        <li><a href="#">Tips &amp; Trik</a></li>

        <li><a href="#">Info</a></li>

        <li><a href="#">Review</a></li>

    </ul>

</div>

<div id="kontenkiri"></div>

<div id="kontenkanan"></div>

<div id="footer"></div>

</div>

</body>

</html>

Ket : 

• div berfungsi untuk mengelompokan / membagi halaman web menjadi beberapa bagian.
• div id yang kita definisikan pada css nantinya akan ditambahkan tanda # didepanya.

misal : - div id ="kontenkiri" pada css akan dituliskan #kontenkiri, begitupun dengan id lainya.

• coding <link type="text/css" rel="stylesheet" href="mode/topmenustyle.css"/> 
• dan <link type="text/css" rel="stylesheet" href="mode/style.css"/> dimaksudkan untuk menghubungkan css ke html.

Berikut screen shot hasilnya, semua masih standar dan tampak halamanya juga belum dibagi - bagi :

dari gambar diatas terlihat bahwa hasilnya masih dalam bentuk sederhana, selanjutnya kita akan poles coding html diatas dengan coding css agar tampilanya menjadi lebih memukau.

2. Selanjutnya copy coding css dibawah untuk mempercantik / membagi tampilanya menjadi beberapa bagian dan simpan dengan nama style.css. 

body{

background: #f1f1f1;

}

#wrapper{

background: #f1f1f1;

border: 1px solid black;

width: 1024px;

margin: 0px auto;

height: auto;

}

#header{

background: orange;

width: 1024px;

margin: 0px auto;

height: 170px;

margin-top: 10px;

border-radius: 20px 0 20px 0;

}

#topmenu{

width: 1024px;

margin: 0px auto;

height: 30px;

margin-top: -10px;

}

  

#kontenkiri{

background: #f8d883;

width: 750px;

margin: 0px auto;

float: left;

height: 400px;

margin-top: 10px;

border-radius: 20px 20px 20px 20px;

}

#kontenkanan{

background: #f8d883;

width: 272px;

margin: 0px auto;

float: right;

height: 400px;

margin-top: 10px;

}

#footer{

background: orange;

margin: 0px auto;

width: 1024px;

height: 30px;

margin-top: 420px;

border-radius: 10px 0 10px 0;

}

o...ya...buat folder baru dengan nama mode, lalu pindahkan file style.css tadi kedalam folder mode tersebut. coding diatas hanya akan memberikan efek pembagian halaman dalam beberapa bagian, sedangkan untuk top menu nya silahkan ikuti langkah ke tiga berikut.

3. selanjutnya copy coding css dibawah ini untuk memberikan efek dropdown menu pada list menu yang standard tadi.

/* MENU-UTAMA TOP MENU*/

#topmenu ul {

    background: rgba(255, 165, 0, 0.7); /* Memberi warna pada latar belakang menubar */

    padding: 0 6px; /* Membuat jarak antara teks dengan sisi kotak menubar */

    border-radius: 0px 0px 0px 0px;  /* Membuat efek tumpul pada sudut menubar */

    list-style: none; /* Menghilangkan tanda titik di samping daftar menu */

    position: relative; /* Untuk mengatur setiap posisi elemen */

    box-shadow: 0px 0px 5px rgba(0,0,0,.25); /* Membuat efek bayangan */

}

#topmenu ul:after {

    content: "";

    clear: both;

    display: block;

}

#topmenu ul li {

    float: left;

}

#topmenu ul li:hover {

    background: #ccc;

}

#topmenu ul li a {

    display: block;

    padding: 5px 40px;

    color: #fff; /* Memberi warna pada teks */

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:0.95em;

    text-decoration: none;

    border-radius: 40px 0 40px 0; /* Memberi border pada elemen */

}

#topmenu ul li:hover > a {

    color: #333;

}

/* SUB-MENU */

#topmenu ul ul {

    background: #ccc;

    border-radius: 0px;

    padding: 0;

    position: absolute;

    top: 100%;

    display: none;

}

#topmenu ul ul li {

    float: none; 

    position: relative;

}

#topmenu ul ul li a {

    padding: 5px 40px;

    color: #333;

}

     

#topmenu ul ul li a:hover {

    background: rgba(255, 165, 0, 1);

    color: #fff;

    -webkit-transition:background-color 500ms ease-in-out;/* efek animasi untuk chrome */

    -moz-transition:background-color 500ms ease-in-out;/* efek animasi untuk mozila */

}

#topmenu ul li:hover > ul {

display: block;

}

/* SUB-SUB-MENU */

         

#topmenu ul ul ul {

    position: absolute;

    left: 100%;

    top:0;

}

lalu simpan pada folder mode dan beri nama topmenustyle.css. Berikut screen shot hasil akhirnya :

Note : File index.html letakan diluar folder mode, sedangkan file  style.css dan topmenustyle.css letakan didalam folder mode. Tulisan yanga diapit tanda /* */ merupakan penjelasan dari codingnya.

Finish.

Baca selengkapnya