Modifikasi Buttons - Untuk Mbak Dewi dan Sulis Only

Maaf ya buat yang lain yang suka baca blog ini. Postingan kali ini khusus untuk Mbak Dewi dan Sulis yang sebelumnya gue bikinin layout dan sekarang nanya gimana modif buttons yang gue kasih, karena mereka ingin menambahkan buttons.
Tutorial untuk membuat buttons dari nol nanti gue post di post terpisah yaa... Sekalian gue mau ngajarin buat install Pattern di photoshop. Cara membuat pattern sederhana yang garis-garis warna-warni udah pernah gue post sebelumnya.. Bisa dicek di sidebar.

1. Dari file-file yang kukasih waktu itu, kan ada folder Jpg buttons yang sudah ada tulisannya. Misalnya aja, di punya Mbak Dewi ada yang tulisannya "Facebook". Nah, buka salah satu gambar itu di Photoshop : File >> Open >> pilih file gambarnya.

2. Setelah gambarnya terbuka, di kotak Layer, pencet pilihan "Create a new layer" lalu pindahkan layer yang aktif ke Layer 1

 

3. Intinya, kita akan membuat tulisan "facebook" hilang dan menggantinya dengan tulisan lain, misalnya "goodreads", "path", dan sebagainya. Nah.. Sekarang, di Layer 1 tadi, mari kita pilih tool "Eyedropper tool". Ini tool fungsinya untuk mengcopy warna.Setelah pilih tool tersebut, klik di warna hijau yang elips itu.. Nanti "Foreground Colour"-nya jadi --untuk contoh ini-- hijau juga.

Itu yang gambar pipet namanya "Eyedropper Tool".

Sama kan kaya dasarnya buttons warnanya?

4. Nah, dengan warna tadi, masih di Layer 1, kita pilih "Polygonal Lasso Tool". Ini ada di kotak kiri, bagian dari "lasso Tool" yang merupakan tools baris kiri kedua dari atas. Klik kanan di "Lasso Tool" nanti ada pilihan "Polygonal Lasso Tool". Untuk feather-nya (di atas.. lihat gambar) pilih 1 px aja, karena kalau 0 px takutnya kelihatan banget nanti timpaan warnanya.

5. Sekarang, dengan hati-hati, klik-klik daerah di sekitar tulisan "facebook", dari titik awal sampai akhir. nanti tempat-tempat yang kamu klik-klik akan berubah jadi garis putus-putus. Setelah itu, pilih "paint bucket tool" dan klik daerah di dalam garis putus-putus itu. Jadi deh tulisan "facebook"-nya ketutup warna hijau. Setelah itu, klik "Polygonal Lasso Tool" lagi dan di atas gambarnya, klik kanan, pilih "deselect". Ini akan menghilangkan garis putus-putus-nya.
Pencet Ctrl + Shift + e untuk menyatukan layer 1 dan background.

ini tampilannya sebelum layer disatukan dengan Shift + Ctrl +E

6. Kamu bisa save dulu file ini sehingga nanti bisa jadi template untuk buttons lain yang ingin kamu tambahkan.

7. Untuk menambah tulisan baru, misalnya "goodreads", untuk Mbak Dewi punya, font yang aku pakai adalah font standart, Century Gothic. Warna putih biasa. Kalau punya Sulis aku lupa pakai font apa. Cara nambah tulisan, pilih tool "Horizontal Type Tool" dan ubah Foreground Colour jadi putih (#ffffff) lalu klik di tengah elips hijaunya dan ketik "goodreads". Jika ukuran font terlalu kecil atau besar, tekan Ctrl + T. Nanti di sekitar tulisan muncul kotak bergaris hitam, tempatkan kursor di sudut atas atau bawah kotak, lalu tekan shift sambil drag kursor. Untuk memindahkan, cukup drag bagian tengah kotak.

8. Save, selesai deh!

Ada kesulitan?

5. Membuat Dekorasi Huruf

Ini tutorial diminta oleh mbak Desty untuk membuat header blog di mana huruf-huruf judul blognya terdiri dari sampul-sampul buku. Tapi sebenarnya ini bisa berguna bukan hanya untuk huruf tapi juga shape macam-macam dan bisa divariasikan.

1. Buka file cover buku atau gambar yang kamu mau pakai File >> Open

2. Pilih Horisontal Type Tool dan pilih font yang kamu mau. Kalau saya pribadi sih lebih suka huruf yang tebal-tebal macam Impact, Porky, dan sebagainya, tapi itu masalah selera. Warna font dan ukuran tidak masalah. Klik di atas gambar dan ketik huruf yang kamu mau. Kalau saya sih, huruf "n" saja.

Horizontal Type Tool yang lambangnya "T" ya

Ini jenis tulisannya. IMPACT

Lihat "n" saya di tengah warna merah, kecil kan? Nanti akan diperbesar.

3. Untuk memperbesar dan memosisikan huruf di tempat yang kita inginkan, pilih Move Tool, lalu tekan Ctrl + T. Nanti muncul kotak di sekitar huruf. Klik kiri mouse sambil tekan tombol shift, lalu drag kursor dari sisi sudut gambar. Cara ini untuk membuat gambar membesar secara proporsional, tidak stretched. Untuk memosisikan, cukup klik kiri mouse dan drag bagian tengah gambar (bukan sudut atau garisnya). Setelah dapat posisi pas, tekan Enter.

4. Di layer huruf (yang ada lambang T-nya) di bagian yang diblok biru, bukan kotak putihnya, klik kanan pilih rasterize layer. Setelah itu, pilih Magic Wand Tool, klik di tengah huruf. Nanti akan muncul garis putus-putus kedip-kedip di sekitar huruf.

Ini garis putus-putus setelah di-magic wand.

5. Pindahkan layer yang aktif ke layer Background (klik layer Background, nanti blok birunya akan pindah ke layer background). Klik kanan di layer tersebut, pilih Layer via Cut. Nanti layer background akan terbagi dua: yang bawah adalah layer background yang tidak dipilih, yang di atasnya adalah yang dipilih alias yang sudah berbentuk huruf n.

ini layer setelah Layer Via Cut

6. hapus layer background dan layer huruf yang paling atas (kalau punya saya, yang "n" itu). Hapusnya, pilih layer ybs, pilih gambar tempat sampah. Jadi deh huruf bergambar cover buku atau motif apapun yang kamu mau.

7. Untuk menyimpan file huruf tersebut supaya tetap tanpa background, pilih format file .png. Interlace pilih none atau interlaced sama saja.

8. Untuk membuat header blog, ulangi cara tadi dengan bermacam-macam cover buku atau motif, dan huruf-huruf lain. Setelah terkumpul, buka file baru dengan ukuran yang dikehendaki lalu drag satu persatu huruf yang sudah disiapkan. Ini contoh punya saya..

4: Membuat Header dengan Stock Picture

Kali ini kita akan membuat header seperti ini:

Simpel tapi bagus kaaan?? Saya orangnya simpel kok, ga suka yang susah-susah. Hehe..

Sebagai modal pertama, kamu harus mencari stock photo yang akan digunakan untuk membuat header. Jangan nyolong ya, tapi harus kasih credit. Gambar sepeda yang cantik ini saya dapat dari Querita@livejournal. Selain dari livejournal, kamu juga bisa dapat gambar-gambar cantik dari tumblr atau weheartit atau pakai foto sendiri juga bisa.

Seperti sudah dijelaskan di tutorial 3, untuk buat header, kamu harus cari tau dulu ukuran header kamu berapa. Ukuran header blog ini adalah 1020 px. Jadi, begitu saya buka photoshop, saya langsung membuat file berukuran panjang 1020 px. Lebar.. karena saya mau memasukkan gambar, saya buat jadi 400 px. (pilih File >> New. Ingat harus RGB ya) Setelah itu, buka file gambar (File >> Open).

 

Untuk memindahkan gambar ke file kosong, Pilih Move Tool lalu drag gambar ke file kosong. Nanti gambarnya bakal pindah. Cari tempat yang pas buat nempatin si gambar. Kalau saya sih pilih di tengah tapi agak ke atas karena nanti di bawah mau saya taruh tulisan nama blog saya. Kalau gambar yang kamu pilih terlalu besar, kamu tinggal pencet Ctrl+T sampai nongol garis di sekitar gambar, lalu drag ujung sudut gambar (lihat panah merah) ke dalam sambil pencet shift. Pencet shift ini supaya pas kamu ngecilin gambar, gambarnya tetap proporsional. Kalau gambar kamu terlampau kecil, saran saya jangan diperbesar dengan cara ini karena bakal pecah. Mending kamu cari gambar lain. Ahahaha.. Ada sih cara buat memperbesar gambar tapi nggak pecah tapi ribet jelasinnya. Lain kali yaaaa

Sudah dapat ukuran dan tempat yang pas buat gambar kamu? tekan enter supaya garis-garisnya hilang.
Di kotak layers yang ada di sudut kanan bawah, pilih layer gambar tadi. Klik kanan, pilih Duplicate layer. Nanti di atas layer gambar kamu akan ada layer baru berisi gambar yang sama.

Pilih layer gambar yang paling atas (Layer 1 Copy) lalu di file gambar kamu, drag gambarnya ke kiri.... Cari posisi yang pas. Move tool masih dalam keadaan dipilih ya..

Ulangi cara yang sama, duplicate layer lagi, tapi kali ini tempatkan di kanan sehingga kamu punya 3 gambar berjejer rapi. Terserah sih sebenarnya penempatannya... Kalau saya kan yang gambarnya utuh yang tengah. Kalau kamu mau tiga-tiganya utuh, atau mau dua gambar aja, itu tergantung selera. Ehehe..

Sekarang, buat gambarnya hitam putih. Caranya gampang, cukup pilih layer dari gambar yang kamu mau buat jadi hitam putih di kotak layers. Apakah itu layer 1 copy atau layer 1 copy 2 atau keduanya, atau tiga-tiganya. Tekan Shift + Ctrl + U. Jadi deh hitam putih. Kalau menurut kamu hitam-putihnya kurang kontras, tinggal pilih layer yang mau kamu tambah kontrasnya, pencet Ctrl+M lalu mainkan kurvanya.

 Setelah dapat setting warna dan posisi yang pas, tinggal pilih Horizontal Type Tool (T) dan font yang kamu suka (bisa cari font lucu di dafont.com atau deviantart.com) lalu ketik nama blog kamu di bawah gambar. Kalo posisi tulisan tidak pas, seperti biasa, pilih Move Tool di atas, lalu drag tulisannya ke tempat yang pas. Enter. Jadi deh! Tinggal pilih File >> Save As. Bentuk file jpg kualitasnya 10, 11, atau 12 ya biar gambarnya bagus. Upload deh!

Oh iya, nama font yang saya pakai adalah Grant's Ghosts tapi saya lupa saya dapat dari mana font-nya. Ehehe.
Daaan.. kalau kamu sampai salah langkah, nggak usah khawatir, kamu bisa Undo dengan Ctrl+Alt+Z dan Redo dengan Ctrl+Shift+Z. Lupa nih saya bilangin di tutorial sebelumnya.

Selamat mencoba!
Semoga membantu!

3: Cara Membuat Header Simpel

Untuk membuat header, pertama kamu harus tahu dulu, berapa ukuran header yang pas untuk layout blog kamu. Cara melihatnya, dari Blogger Home, pilih Tata Letak. Di kotak bertulis *nama blog* (header) klik edit.

Nanti keluar kotak ini:

Ukuran panjang blog saya adalah 1020 pixel. Nah, berapa punya kamu?

Setelah tahu ukuran panjang header kamu, buka photoshop File >> New. Sebenarnya untuk height terserah kamu mau buat seberapa ukurannya, yang penting width-nya. Tapi saya lebih suka memilih 300 pixel. Pastikan Color Mode-nya RGB ya.

Setelah klik OK, keluar file putih kan? Nah, kamu bisa mewarnai file itu dengan warna yang kamu suka. Caranya sama seperti waktu di tutorial membuat Pattern untuk background blog. Saya pilih warna biru supaya cocok dengan background blog saya.

Membuat sesuatu yang indah nggak harus ribet. Besok-besok mungkin saya akan kasih tutorial yang lebih kompleks, tapi  karena ini baru pertama kali, kita bikin yang gampang dulu ya. Tapi bisa tetap bagus kook. Caranya, main dengan font.

Font lucu bisa kamu dapatkan di dafont.com atau deviantart.com dengan tag cute font. Download saja sebanyak yang kamu suka. Setelah diextract dan dapat file font-nya, kamu cukup klik Start di ujung bawah windows kamu, klik Control Panel, pilih Fonts, lalu copy paste deh semua file font yang sudah kamu download. Lakukan ini sebelum kamu buka photoshop. Setelahnya, ketika kamu buka photoshop, font-font itu sudah terinstal dan siap dipakai.

Saya suka warna putih. Jadi saya memilih warna putih untuk tulisan saya dan memilih font Pharmacy yang imut tapi tetap elegan. Pilih Horizontal Type Tool untuk menulis lalu klik di gambar. Mulai menulis. Kalau ukuran kurang besar, kamu bisa blok seluruh tulisan kamu lalu atur ukuran font-nya (semacam di words saja). Kalau posisinya tidak pas, kamu tinggal mengklik Move Tool, tekan Control T, lalu drag tulisan kamu kemanapun kamu mau. Setelah semua pas, tekan enter.

Terlalu sepi? Saya ingin menambahkan sedikit hiasan dengan custom shape tool. Dimana toolnya? Lihat gambar. Kadang custom shape tool ini tidak kelihatan karena yang kelihatan adalah shape tool yang lain. Untuk memunculkan custom shape tool, klik kanan di tempat shape tool berada, nanti muncul berbagai pilihan (rectangle tool, rounded rectangle tool, dll) dan klik custom shape tool.
Pilih shape yang kamu suka. Setelah itu, drag mouse kamu sampai shape-nya terbentuk. Lepaskan kursor.

Kita sudah menambahkan shape di satu sisi, tapi sisi lainnya belum. Ingin membuatnya lagi tapi takut ukurannya beda? Gampang. Duplicate aja shape yang pertama. Di kotak layers bawah kanan, di bagian layer shape, klik kanan dan pilih Duplicate Layer. Nanti si shape tadi akan ada di dua layer, layer semula dan layer duplicate-nya. Di layer duplicate-nya, kamu klik dan geser shapenya ke tempat yang kamu mau. Dan kamu punya dua shape yang sama di kanan dan kiri tulisan!

Kita sudah selesai membuat header. Di save dulu: File >> Save As.. bentuk JPG kualitas bisa 10, 11, atau 12.

Balik ke blogger, buka Tata Letak lagi dan pilih Header lagi. Keluar kotak seperti di atas waktu kita mau lihat ukuran lebar header kita. Upload gambar header ke sana, pilih penempatan "Selain judul dan keterangan" dan pilih "Susutkan agar sesuai" lalu klik simpan.

Jadi deh header kamu!!

Cara ini pernah saya gunakan untuk membuat header blog buku saya, Reading in the Morning

Berikutnya, mungkin saya akan mengajarkan membuat header RITM yang lain misalnya:

Tunggu aja tanggal mainnya ya *nyari waktu lowong dulu*

Sebenarnya yang diperlukan untuk mempercantik blog adalah kreativitas. Coba-coba aja terus memadupadankan font, shape, gambar, dan warna. Selamat bersenang-senang!

2: Cara Mengganti Background dengan Pattern

Saya suka menggunakan background garis-garis warna-warni. Kenapa? Karena selain ceria, bikinnya gampang, filenya juga berukuran kecil. Bagaimana cara membuatnya? Nah.. Untuk ini, kamu butuh Adobe Photoshop. Versi apa aja terserah karena membuatnya cukup simpel kok. Kita mau coba membuat background 2 warna dulu ya.. Setelah ini kamu bisa modif sendiri, bisa buat 3 warna, 4 warna, dst.

1. Buka Adobe Photoshop, buka file baru dengan pilihan File >> New. Masukkan setting sebagai berikut:

2. Filenya kecil banget. Oleh karena itu, bisa dizoom dengan cara seperti ni:

3. Buka file baru: File >> New dengan ukuran setengah file pertama, yaitu width 10 px, height 10 px. Kita akan mengerjakan file 10x10 px ini dulu.

4. Klik "Set Foreground Color", nanti akan keluar palet, klik warna yang kamu mau. Saya pilih warna pink muda. Lalu klik "Paint Bucket Tool", klik ke file 10x10 px kamu. Nanti filenya akan berubah warna menjadi warna yang kamu pilih.

5. Klik "Move Tool" lalu drag file 10x10 px kamu yang sudah berwarna tadi ke file 20x10 px. Taruh di ujung kiri.

6. Sekarang kamu sudah punya file background berwarna pink dan putih (atau warna apapun sesuai pilihan kamu). Kalau kamu mau pilih satu warna lain, misalnya dari contoh ini, warna pink dan biru muda.. maka di file 10x10 px tadi bisa kamu ulangi proses pewarnaannya (klik Set Foreground Color >> pilih warna yang kamu mau >> klik di file 10x10 px >> pilih move tool >> drag file 10x10 px yang sudah berwarna yang kamu mau ke file 20x10 px, tapi tempatkan di sisi kanan). Misalnya hasilnya seperti ini:

7. Save file 20x10 px dalam bentuk jpg dengan cara File >> Save As >> ubah File Name dan pilih Format Jpg >> 10px.

8. Sekarang upload ke blogger. Caranya, pilih Template >> Sesuaikan >> Latar Belakang >> Unggah Gambar. Pilih file background yang tadi sudah di save. Pilih Selesai. Oh iya, pastikan kamu memilih opsi "Deretkan"

Selamat, kamu sudah punya background baru.

Kamu bisa memodifikasi besar strip yang kamu mau dan jumlah warnanya dengan memainkan angka pixel di adobe photoshop. Untuk mencari warna yang cocok, silahkan bermain-main dengan paletnya.

1: Siapkan Template

Haiii teman-teman, sebelum mulai ngutak-ngatik desain blog dengan photoshop, saya mau menjelaskan mengenai template yang saya pakai yaa... Pada dasarnya, saya nggak pakai coding macem-macem, hanya pakai template dari blogger. Nah, ini beberapa persiapan yang saya lakukan sebelum mulai "mempercantik" blog saya.

Saya menggunakan template jenis Sederhana atau Simple. Bisa didapat dari sini:

 

Gambar di atas bisa kamu dapat kalau kamu ke home Blogger kamu. Pilih Template, lalu cari template Simple atau Sederhana. Saya pilih template ke-5. Pilih Sesuaikan.

Keluar menu seperti ini:

Pertama-tama, sesuaikan Tata Letak dulu,apakah blog kamu nantinya mau 2 kolom atau 3 kolom. Lalu pilih Sesuaikan Lebar untuk menentukan lebar entry dan sidebar. Ini juga menentukan lebar header kamu nantinya, pas kamu mau membuat header sendiri. Kalau mau iseng otak-atik warna atau font blog kamu, kamu bisa pilih Tingkat Lanjut. Biasa sih saya ngutak-ngatik Tingkat Lanjut setelah memutuskan warna header dan latar blog saya, baru nanti isi blog menyesuaikan.

Itu aja persiapannya.
Tutorial selanjutnya adalah mengganti Latar Belakang