Utak-Atik Blog

Tutorial kali ini merupakan bagian pertama dari 3 (tiga) tutorial membuat blog
sederhana menggunakan images yang akan disetting dalam layout css. Tampilan blog.

Pada bagian pertama ini akan diuraikan langkah-langkah membuat layout blog dengan Photoshop 7.0. Maka pastikan software tersebut sudah terinstal di komputer yang akan digunakan untuk tutorial kali ini. Dan kemudian mengenal lembar kerjanya, yang secara sederhana dapat dilihat disini.

Setiap layer diberi nama dengan maksud memudahkan penunjukan objek dalam editing. Dan pastikan layer yang akan diubah dalam keadaan aktif (diklik atau dipilih).

Tampilan layout blog

Berikut langkah-langkah lengkapnya:

1 - New Layout
Jalankan program Photoshop dan buat layout.
Klik menu File -> pilih New atau langsung Ctrl+N.

2 - Setting Layout
Pada jendela New yang tampil, setting/ubah bagian Preset Size dengan Custom,
Width 730 pixel, Height 500 pixel, Resolution 72 pixel/inchi, Mode RGB Color
dan Contents White.

3 - Aktifkan Perangkat
Setelah Editing Area baru muncul, pastikan Toolbox, Layers Pallet, Options dan
Rulers aktif. Jika tidak, aktifkan dengan cara klik Menu Windows lalu pilih
Tools, Options dan Layers. Untuk Rules tekan Ctrl+R.

4 - Ganti Warna
Ubah warna Contens yang semula putih menjadi warna biru dengan kode warna #2B4C8D. Caranya klik Set Foreground Color di Toolbox sehingga muncul jendela Color Picker. Disini bisa dipilih warna sesuai selera, namun pada turorial kali ini langsung masukkan kode warna tadi (2B4C8D tanpa ‘#’) pada bagian box bawah yang di depannya bertanda ‘#’ lalu enter atau klik OK.

5 - Warna Background
Aktifkan icon Paint Bucket Tool (gambar ember cat) di Toolbox. Jika tidak terlihat, klik tahan icon Gradient Tool di Toolbox hingga muncul icon dimaksud lalu pilih. Setelah kursor berganti icon Paint Bucket Tool, arahkan ke Editing Area yang masih berwarna putih kemudian klik sekali sampai warna biru menggantikannya. Klik dua kali pada nama layer background untuk mengubah nama layer menjadi ‘back’.

6 - Layer Baru
Buat layer baru berwarna putih dengan cara klik icon Create a New Layer di bagian bawah Layers Pallet. Ubah nama ‘Layer 1′ menjadi ‘main back’ dengan klik dua kali pada Layer 1 dan ketik nama penggantinya.

Kemudian pilih Menu Edit lalu klik Fill untuk memberi warna putih pada ‘main back’. Di bagian contens jendela Fill yang muncul, pilih ‘white’ lalu enter atau OK.

7 - Mengubah Ukuran Objek
Main back akan diperkecil pada bagian kanan dan kirinya sedikit untuk membedakan background atau area body yakni warna biru dan background atau area main yang berwarna putih. Pastikan layer ‘main back’ aktif (klik layer dimaksud untuk mengaktifkannya), lalu tekan Ctrl+T. Tarik sedikit ke bagian dalam kotak kecil resize untuk bagian kanan dan kiri, hingga back biru terlihat. Setelah dirasa cukup, tekan enter untuk mengakhiri resize.

8 - Style Outer Glow
Layer ‘main back’ masih aktif, pilih Menu Layer lalu Layer Style dan klik Outer
Glows. Style ini akan memberikan kesan berkilau pada kanan dan kiri background putih (main back). Jendela Layer Style terbuka, klik kotak kuning di bagian Structure dan pilihlah warna putih lalu OK. Masih di bagian Structure, Opacity 100% dan Noise 0%. Pada bagian Elements, Technique Softer, Spread 2% dan Size 9%.

Berexplorasilah pada setiap bagian untuk mencoba mendapatkan hasil atau tampilan yang berbeda. Setelah yakin dengan hasil akhir tekan enter atau OK.

9 - Retangle Tool
Klik icon Retangle Tool pada Toolbox lalu klik box color di bagian Options untuk menset warna biru muda (D8E3FA). Kemudian buat kotak persegi panjang untuk header dengan cara tempatkan pointer yang berbentuk plus (+) di sudut awal persegi panjang yang akan dibuat, lalu klik tahan dan drag ke ujung sudut persegi panjang. Ukuran lebar bisa sesuai selera. Terlihat di Layers Pallet terbentuk layer baru bernama ‘Shape 1′. Ubah nama layer menjadi ‘h-top’ untuk menandakan kotak header bagian atas.

10 - Duplikasi Layer
Dengan ukuran panjang dan warna yang sama, akan dibuat retangle tool di bagian bawah untuk footer. Bisa saja dilakukan cara yang sama seperti langkah ke-9, namun dengan cara lain yang lebih cepat bisa dilalukan duplikasi layer. Aktifkan layer ‘h-top’ lalu klik tahan dan drag/tarik ke arah icon Create a New Layer di bagian bawah Layers Pallet.

Layer baru bernama ‘Shape h-top copy’ ubah namanya menjadi ‘h-bot’. Pastikan
layer ‘h-bot’ aktif dan pointer ganti bentuk icon Move Tool di Toolbox, lalu
tarik atau pindahkan shape ‘h-bot’ ke bagian bawah pada posisi footer. Perkecil
ukuran tingginya dengan cara Ctrl+T dan resize atas atau bawah secukupnya lalu
akhiri enter atau OK.

11 - Custom Shape Tool
Photoshop menyediakan berbagai bentuk simbol atau ornamen yang bisa digunakan untuk mempercantik layout atau keperluan visual lainnya. Tepatnya menyediakan 12 katagori Custom Shape seperti animal, nature, ornaments dan sebagainya. Koleksi bentuk-bentuk tadi bisa didapat melalui fasilitas icon Custom Shape Tool pada Toolbox.

Klik tahan icon Retangle Tool dan klik icon Custom Shape yang bergambar bintang. Atau cara lain, klik langsung icon Custom Shape ini pada Options dengan catatan icon Retangle Tool aktif.

Pada Options terdapat pilihan ‘Shape’, klik panah dropdown untuk melihat koleksi bentuk Costum Shape. Bentuk tapak kaki pada contoh tutorial ini tidak ditemukan?. Ok, setting standar memang hanya terdapat empat baris dan enam kolom bentuk dari Custom Shape. Untuk menampilkan semua atau 12 katagori Custom Shape caranya klik menu dropdown pada bagian Shape di Options, lalu klik panah kanan kecil yang terdapat pada pilihan bentuk. Kemudian pilih ‘All’ untuk sekaligus menampilkan Custom Shape. Pada pertanyaan yang muncul, jawab OK. Cari dan pilihlah bentuk tapak kaki kanan.

12 - Pengulangan
Sebelum membuat tapak kaki kanan pada editing area, ganti warna pada Color di bagian Options dengan warna biru tua senada background (2B4C8D). Setelah itu drag bentuk tapak kaki kanan pada posisi header area atau di atas ‘h-top’. Ukuran bisa diubah dengan cara Ctrl+T dan resize sesuai keinginan.

Ganti nama ‘Layer 1′ untuk bentuk tapak kaki kanan yang baru saja dibuat dengan nama ‘foot-a’. Lalu duplikasi layer ‘foot-a’ dan ganti nama layer ‘foot-a copy’ menjadi ‘foot-b’. Masih aktifkan layer ‘foot-b’, tarik/pindahkan ke arah kanan bawah pada bagian footer (lihat gambar). Perkecil ukurannya yang disesuaikan tinggi ‘h-bot’.

13 - Text
Membuat text ‘MY BLOG’ sebagai background penghias header. Klik icon Horizontal Type Tool (gambar letter ‘T’) pada Toolbox lalu klik pada Editing Area hingga kursor berganti garis panjang berkedip. Tuliskan MY BLOG lalu akhiri dengan klik icon Move Tool pada Toolbox.

Untuk memformat jenis font, ukuran, warna dan sebagainya, klik lagi gambar
letter ‘T’ pada Toolbox. Lihat bar Options, ubahlah jenis font dan ukuran sesuai
selera dan warna text sama dengan back (2B4C8D) lalu lihat perubahannya (Tutorial menggunakan Verdana uk.166pt).

Pindahkan text ‘MY BLOG’ ke bagian header area dengan mengaktifkan icon Move Tool terlebih dahulu. Kemudian sesuaikan ukurannya atau resize lebar dan tinggi) dengan ukuran ‘h-top’. Setelahnya, buat warna text menjadi sangat tipis (sedikit saja berbeda dari warna h-top) dengan cara klik box Opacity di Layers Pallet yang semula tertera 100%. Ganti angkanya menjadi 3%. Semakin kecil setting angkanya semakin transparant warna objek.

Ulangi langkah di atas untuk membuat judul blog pada header. Tutorial ini menggunakan judul ‘JEJAK LANGKAH’ dengan font Impact uk.30pt, warna #2B4C8D, Opacity 80%.

Hasil akhir Layers

14 - Simpan File
Sebenarnya menyimpan file untuk layout ini jangan benar-benar dilakukan pada langkah akhir, tapi setiap saat perubahan layout. Kecewa sekali jika susah payah layout dibuat tapi sebelum disimpan terjadi mati listrik atau komputer bermasalah seperti hang misalnya. Simpanlah file dengan format PSD atau standar file Photoshop agar dilain waktu bisa dilakukan perubahan.

Tutorial selanjutnya adalah memotong-motong (slice-cut) layout yang sudah dibuat berdasarkan bagian-bagian blog seperti main, header dan footer.***

Silahkan mendownload tutorial bagian 1 disini.

Baca juga:
- Part #1 : HTML dan CSS
- Membuat Blog Sederhana
- Bagian 2 : Memotong Images
- Bagian 3 : Membuat CSS dan HTML