Preview Hasil Akhir Gambar

Seperti biasa sebelum memulai lihat dulu apa yang akan kamu bikin dalam tutorial ini, jika gambar di bawah ini kurang besar kamu bisa lihat gambar ukuran lebih besar disini.

Langkah 1

Langkah pertama adalah membuat folder tempat menyimpan semua foto/gambar yang akan kita buat background mozaik, pastikan kamu membuat duplikat dari foto-foto ini sehingga jika ada kesalahan foto-fotomu tidak rusak semua. Berikutnya kita akan membuat Photoshop action, buka salah satu fotomu dengan Photoshop lalu pilih  Window > Actions. Klik menu action di sebelah kanan atas dan pilih New Action. Lebih jelasnya lihat gambar berikut.

Langkah 2

Ketika jendela seperti dibawah muncul, klik Record dan semua yang kamu lakukan akan terekam.

Langkah 3

Sekarang klik Images > Image Size dan hilangkan tanda check pada Constrain Proportions, tetapi check pada Resample Image. Ketik 1cm pada kolom Width dan Height dan jadikan resolusi 200ppi. Klik OK kemudian simpan gambar. Tutup jendela. Sekarang klik kotak abu-abu pada bagian bawah Action palet untuk menghentikan proses perekaman.

Langkah 4

Sekarang ubah Action menjadi Droplet. Sekarang menuju ke File > Automate kemudian pilih Create Droplet. Klik tombol Choose untuk mengatur dimana Droplet akan disimpan, pilih Action yang barusan kamu buat pada pull-down menu Action kemudian klik OK.

Langkah 5

Kembali ke folder foto-foto yang telah kamu kumpulkan dan blok semua foto. Sekarang drag semua foto tersebut ke ikon droplet untuk diubah ukurannya menjadi kotak 1cm x 1cm, lebih jelasnya lihat screenshot dibawah. Tunggu beberapa saat.

Langkah 6

Setelah semua gambar kita ubah ukurannya, sekarang saatnya mengumpulkan semuanya untuk membuat background mozaik. Ini bisa kita lakukan dengan menggunakan plugin Photoshop yang bernama Contact Sheet II. Tutorial ini saya buat menggunakan Photoshop CS4, jika kamu menggunakan Photoshop seri yang sama kamu bisa dawnload plugin yang dibutuhkan disini: untuk pengguna Windows dan pengguna Mac. Untuk menggunakannya klik File > Automate > Contact Sheet II. Jangan lupa untuk menginstall plugin ini terlebih dahulu.

Contact Sheet II perlu tahu dimana kita menyimpan foto-foto yang ingin kita jadikan contact sheet, maka klik Browse dan tunjukkan dimana kamu menyimpannya. Setelah kamu mengatur lokasi folder, kita bergeser ke bawah menuju pengaturan Document. Disini saya menggunakan dokumen dengan ukuran 1280px x 800px pada resolusi 200ppi, tetapi kamu bisa tentukan sendiri ukuran yang kamu inginkan. Pastikan opsi Flatten All Layers kamu check. Sekarang menuju ke pengaturan Thumbnails. Isikan seberapa banyak jumlah columns (mendatar) dan rows (menurun) yang kamu butuhkan. Karena foto yang kita gunakan memiliki ukuran persegi 1cm x 1cm maka ini berarti sama dengan perbandingan satu banding satu (lihat pada kolom sebelah kanan, pada contoh perbandingan W dan H adalah 28 banding 28 atau sama dengan satu banding satu). Centang kotak Rotate For The Best Fit dan isikan 0 (nol) pada kotak Vertical dan Horizontal. Ini untuk memastikan tidak ada jarak antar sheet. Tekan OK untuk membuat sheet.

Langkah 7

Contact Sheet akan menampilkan sekumpulan thumbnail kecil dan ini juga memberikan gambaran seberapa banyak foto yang kamu gunakan untuk membuatnya. Jika foto-foto yang kamu miliki tidak cukup untuk memenuhi ruang yang kamu inginkan, maka kamu tinggal copy dan paste lalu menyusunnya sampai kebutuhan ruang dokumen kamu terpenuhi.

Langkah 8

Buka gambar utamamu dengan Photoshop, tekan Ctrl+A untuk menyeleksi semua kemudian copy dan paste pada dokumen contact sheet yang sudah kamu bikin sebelumya. Untuk tutorial ini saya menggunakan gambar mobil tua dibawah senja yang saya dapatkan dari Stock Exchange. Letakkan layer contact sheet dibawah layer gambar utama lalu ubah blending mode layer gambar utama menjadi Hard Light. Sekarang gambar utama kamu tampak seperti hasil dari susunan ribuan foto dengan warna yang berbeda.

Hasil Akhir

Setelah mencoba langkah demi langkah pada tutorial ini kamu akan berhasil membuat foto mozaik dengan Photoshop. Kamu bisa bereksperimen sendiri dengan menggunakan gambar utama yang berbeda, mengubah ukuran thumbnail pada contact sheet atau menggunakan blending mode yang lain. File PSD dapat kamu download di bagian akhir artikel ini. Selamat mencoba dan jangan lupa sertakan hasil karyamu pada kotak komentar agar bisa dilihat pembaca yang lain.

Download file PSD foto mozaik

Related posts:

1. Membuat Galeri Foto Unik dengan Photoshop, Photostrip
2. Efek Gambar Menggulung
3. Efek Cahaya pada Photoshop

Beberapa fitur menarik dari theme ini adalah: theme option, 4 tipe slider yang berbeda (Nivo slider, 3D piecemaker 2, Accordion, dan statik video konten), berbagai variasi layout halaman (homepage, blog, galeri/portofolio, single post, single galeri, kontak, halaman 404 dst.), teaser text, widget (testimoni, tab, tweet, galeri flickr, video, social media badge, social media list, dll.), skin biru dan hitam, WordPress custom menu, WordPress custom post type, sidebar bisa dikanan, dikiri atau bahkan tanpa sidebar, tipografi (bisa menggunakan @font-face maupun Google web font), meta box untuk pengaturan halaman, shortcode dan berbagai fitur lain yang belum saya sebutkan disini.

Gunakan kupon “lotuspond” dan dapatkan diskon 20% untuk semua theme WordPress dari WPNuke sampai tanggal 10 Februari 2012. Tunggu apa lagi, dapatkan theme LotusPond sekarang juga.

Related posts:

1. Mengubah Font HTML Post Editor pada WordPress
2. Mengatasi Problem Z-index pada Video Iframe YouTube dengan jQuery
3. Menampilkan Related Posts dengan Thumbnail pada WordPress

Kode jQuery untuk Mengatasi Problem Z-index pada Iframe YouTube

$(document).ready(function() {
    $("iframe").each(function(){
        var ifr_source = $(this).attr('src');
        var wmode = "wmode=transparent";
        if(ifr_source.indexOf('?') != -1) {
            var getQString = ifr_source.split('?');
            var oldString = getQString[1];
            var newString = getQString[0];
            $(this).attr('src',newString+'?'+wmode+'&'+oldString);
        }
        else $(this).attr('src',ifr_source+'?'+wmode);
    });
});

Kode jQuery diatas akan secara otomatis memodifikasi kode embed video YouTube yang berupa iframe. Semoga tutorial jQuery yang singkat ini bisa bermanfaat, selamat mencoba.

Related posts:

1. Membuat Menu Atraktif dengan Thumbnail
2. Bikin Drop Down Menu untuk WordPress
3. Menampilkan Related Posts dengan Thumbnail pada WordPress

Ferdi Rizkiyanto adalah seorang Graphic Designer dan Art Director dari Indonesia. Karya desain grafis Ferdi luar biasa dan sangat perhatian terhadap detail. Dia telah bekerja untuk brand-brand ternama, diantaranya Coca-Cola, Hugo, KitKat, Sky TV, Samsung, Red Bull dan beberapa nama company besar lainnya. Dan disini akan saya tunjukkan beberapa karya hebat Ferdi yang bisa kita jadikan inspirasi dalam desain.

global warming PSA – time

Break your boundaries 2

Nothing’s unplayable

Colors

Hugo2 – One Fragrance, One Tree

Hugo – One Fragrance, One Tree

Idealism

Drink and Drive

Pause

doors and paths

Death Star Coffee Maker

Butcher

Matahari Corporate Ad 3

brainstorm

Dimana kita bisa menemukan Ferdi Rizkiyanto di web

• Website Ferdi Rizkiyanto
• Ferdi Rizkiyanto di DeviantART
• Ferdi Rizkiyanto di Behance Network

Saya berharap semoga fotomanipulasi diatas bisa meninspirasi kita dalam berkarya, kamu bisa berlangganan artikel di Grafisia melalui Grafisia RSS feed atau bisa juga dengan berlangganan lewat e-mail.

Related posts:

1. 34 Desain Iklan dengan Ide Kreatif
2. Desain Logo Kreatif dari Google
3. Light Calligraphy / Graffiti Inspiratif karya Julien Breton

File berupa ZIP yang didalamnya terdapat file PSD dengan layer-layer yang terorganisasi dengan baik, jadi ketika kamu ingin mengubah warna, font, ukuran dan yang lainnya semuanya bisa dilakukan dengan mudah.

Seperti biasa, template ini boleh digunakan untuk kebutuhan personal maupun komersial, dengan syarat file ini tidak dijual. Tolong jangan gunakan file ini untuk download gratis disitusmu, jika kamu ingin share dengan yang lain silakan link-kan ke halaman ini.

Follow @grafisia dan like Grafisia di Facebook untuk terus update freebie PSD template berikutnya.

Download template sticker PSD

Related posts:

1. Tombol Glossy untuk Desain Web
2. Template Background Twitter
3. Download Mockup iMac PSD

Follow @grafisia dan like Grafisia di Facebook biar nggak ketinggalan update freebie lainnya.

Download iMac PSD file

Related posts:

1. Tombol Glossy untuk Desain Web
2. Template Sticker Terlipat untuk Desain Web
3. Free Download Full Layered PSD iPhone 3G

Untuk mengubah font pada HTML editor kita hanya butuh menambahkan beberapa baris code kedalam theme WordPress yang kita gunakan. Yang perlu dilakukan pertama buka file functions.php yang ada pada folder theme kemudian tambahkan code dibawah ini.

add_action( 'admin_head-post.php', 'grafisia_fix_html_editor_font' );
add_action( 'admin_head-post-new.php', 'grafisia_fix_html_editor_font' );

function grafisia_fix_html_editor_font() { ?> <style type="text/css">#editorcontainer #content, #wp_mce_fullscreen, #wp-content-editor-container #content { font-family: Georgia, "Times New Roman", Times, serif; }</style> <?php }

Ini akan mengubah font yang digunakan HTML editor dari monospace menjadi Georgia. Kamu tentu saja bisa mengubah font ini sesuai apa yang kamu sukai dengan cara mengubah font-family. Misalkan kamu ingin menggunakan font Arial, maka yang harus kamu lakukan adalah mengubah baris font-family: Georgia, "Times New Roman", Times, serif; menjadi font-family: Arial, Helvetica, Sans-Serif;.

Berikut ini adalah screenshot sebelum dan sesudah perubahan font.

Semoga tips singkat cara mengubah font HTML editor WordPress ini bermanfaat.

Related posts:

1. Mengganti Font Web dengan @Font-face
2. Bikin Drop Down Menu untuk WordPress
3. Menampilkan Related Posts dengan Thumbnail pada WordPress

Ketika awal ngeblog saya belum kenal dengan yang namanya PHP, HTML maupun CSS. Hal yang ada kaitannya dengan desain web yang saya ketahui saat itu hanyalah Photoshop. Bahkan blog pertama saya (yang saat itu masih pakai domain co.cc) masih menggunakan theme WordPress buatan orang. Blog saya terus berkembang dan saya menginginkan tampilan blog yang unik yang orang tidak akan menemuinya kecuali di blog saya. Dari situlah saya mulai mendesain theme WordPress menggunakan Photoshop. Dengan sedikit ilmu mengenai algoritma pemograman yang saya miliki, saya mulai belajar PHP, HTML dan CSS untuk membuat theme WordPress. Dan alhamdulillah akhirnya saya berhasil membuat theme WordPress untuk pertama kalinya. Theme WordPress pertama saya adalah theme yang digunakan Painthink sampai saat ini. Hanya ada beberapa pengembangan dan perubahan gambar background, dari yang dulunya (kalau masih ada yang ingat) gambar smoke merah dengan gradient biru sekarang berubah menjadi gambar planet bumi dengan sebuah satelit disebelahnya.

Dari pengalaman pertama bikin theme ini, saya jadi semakin suka coding dan terus membuat theme-theme WordPress yang lain. Diantara theme WordPress buatan saya adalah theme yang saat ini digunakan Grafisia dan theme-theme lainnya yang dipakai website orang. Dengan terus belajar, praktek dan pengalaman yang cukup banyak akhirnya saat ini saya bisa membuat theme WordPress dengan kualitas theme premium. Dari sinilah muncul ide untuk memanfaatkan skill yang saya miliki ke arah yang lebih professional, yaitu terus berkreasi membuat theme WordPress yang berkualitas dan menjualnya sebagai theme premium. Dengan segala puji dan rasa syukur kepada Alloh Azza wa Jalla saya perkenalkan WPNuke.

Ada beberapa alasan mengapa saya memilih nama “WPNuke”. Pertama namaya cukup pendek (hanya enam huruf) dan mudah diingat. Kedua saya gunakan “Wp” yang tentu saja semua sudah tahu ini merupakan singkatan dari WordPress. Terakhir adalah kata “Nuke” yang merupakan istilah lain dari nuklir. Sebelumnya saya pernah menggunakan istilah nuke saat menulis tutorial membuat efek cahaya pada teks dengan Photoshop. Terus mengapa saya menggunakan kata “Nuke”? Jujur saja, saya adalah orang yang sangat menyukai Fisika terutama fisika modern dan fisika nuklir. Dan saya lihat nuklir sampai saat ini memberikan manfaat yang sangat besar bagi kehidupan manusia, baik dalam bidang energi, kesehatan, iptek, pertanian dll. Dan saya berharap theme yang saya buat juga akan memberi banyak manfaat kepada orang lain. O iya, selain itu alasan lain kenapa saya memakai kata “Nuke” karena saya juga seorang yang sangat pro dengan teknologi nuklir.

Proses pembuatan WPNuke ini saya mulai dengan membuat produk pertama, theme WordPress untuk news dan magazine yang saya beri nama “MakNews“. Info lebih lengkap mengenai theme ini insyaAlloh akan saya tulis pada posting berikutnya.

Kemudian saya lanjutkan dengan mendesain tampilan WPNuke. Desain logo dan keseluruhan tampilan web saya bikin sendiri. Mulai dari Photoshop, CSS, HTML, PHP sampai beberapa efek jQuery. Konsep desain cukup berbeda dengan Painthink dan Grafisia. Kesan Indonesia banget saya masukkan dalam desain WPNuke, yaitu dengan background batik dan desain logo yang terinspirasi gaya Aksara Jawa (Hanacaraka) namun tidak memaksakan membuat font yang menyerupai Aksara Jawa. Beberapa teknik advanced CSS saya gunakan dalam desain web ini dimana kamu disana bisa menemukan cara kreatif penggunaan transition CSS dll. Desain memiliki beberapa layout yang berbeda pada beberapa halaman, seperti homepage, blog, themes, theme single, documentation, forum dan beberapa halaman lain yang membuat tampilan web lebih fresh dan tidak membosankan. Screenshot homepage bisa kamu lihat pada gambar berikut ini, dan untuk lebih jelasnya kamu bisa kunjungi WPNuke langsung.

Dengan izin dan pertolongan Alloh Subhanahu wa Ta’ala saya akan terus berusaha berbagi ilmu di Painthink dan Grafisia serta berkarya di WPNuke. Jika ada saran, komentar atau mau berbagi sesuatu dengan pembaca yang lain silakan tulis di kolom komentar, sebelumnya saya ucapkan terimakasih.

Related posts:

1. Grafisia
2. LotusPond – Theme WordPress untuk Situs Perusahaan
3. Mengatasi Problem Z-index pada Video Iframe YouTube dengan jQuery