Home  /  Belajar Photoshop  / Membuat Header Blog dengan Photoshop

Membuat Header Blog dengan Photoshop


Membuat Header Blog dengan Photoshop

Kali ini kita akan membuat header sederhana sebuah blog menggunakan photoshop, tutorial ini saya lakukan untuk mengubah header blog baru saya Ini apa yang simple dan elegant.

ini-apa.net merupakan blog baru saya setelah sebelumnya saya dapat hadiah sebuah domain dari mbak safira dari ini-apa.com, header yang pada blog tersebut dapat anda lihat di tutorial berikut ini.

Twentyeleven merupakan themes default pada wordrpess versi 3 keatas, hal yang menyenangkan dari theme ini adalah kita dapat mengubah header sesuka kita dimana kita tinggal mengedit, mengupload dan nikmati hasil desain secara luas melalui website tersebut.

Preview Desain

Berikut hasil desain pada tutorial membuat header blog dengan photoshop (klik gambar untuk memperbesar).

Membuat Header Blog dengan Photoshop

Detail Tutorial

Tingkat kesulitan : Pemula
Software yang digunakan : Adobe Photoshop CS5
Materi yang dipelajari : Gaussian blur dan layer style
Lama pembuatan : 15 Menit

Resource

Berikut file-file yang digunakan pada tutorial ini.

  1. Membuat header blog dengan photoshop.
  2. Brush multi function.

Tutorial

Langkah 1 : membuka gambar.

Tentukan gambar yang dimanipulasi, pada tutorial ini kita tidak akan memulainya dari pertama. Kita akan mencoba memodifikasi gambar default dari theme “Twentyeleven” oleh karena itu, buka salah satu file gambar disini saya menggunakan gambar “Chessboard” dari twentyeleven dengan cara membuka situs yang memakai tema dan header twentyeleven dan menyimpan gambar headernya (Save image)

Membuat Header Blog dengan Photoshop

Langkah 2 : Duplicate dan memberi efek blur

Setelah kita punya gambar yang ingin di manipulasi menjadi header, buka foto gambar desain tersebut menggunakan photoshop.

Selanjutnya duplikasi gambar dengan menekan (ctrl + j) pada keyboard windows dan beri efek blur dengan menekan Filter > blur > gaussian blur dan beri efek blur dengan 50 radius sehingga gambar akan menjadi lebih buram.

Membuat Header Blog dengan Photoshop

Langkah 3 : Menajamkan gambar.

Tajamkan gambar dengan memberi efek levels di Image > adjustments > Level (ctrl + L) edit masing-masing bagian seperti lingkaran pada gambar berikut.

Membuat Header Blog dengan Photoshop

Langkah 4 : Menambahkan teks dan effek teks

Tambahkan teks dengan type tool pada toolbox photoshop, selanjutnya beri efek layer style seperti berikut.

Membuat Header Blog dengan Photoshop

Membuat Header Blog dengan Photoshop

Membuat Header Blog dengan Photoshop

Berikut ini desain sementara yang kita hasilkan.

Membuat Header Blog dengan Photoshop

Untuk mempercantik tampilan, jangan lupa untuk menambahkan juga teks penjelas dibawahnya.

Langkah 4 : Menambah efek untuk mempercantik header.

Tambahkan layer di atas layer hasil duplicate langkah 2 sehingga layer tampak seperti berikut

Membuat Header Blog dengan Photoshop

Tambahkan brush Brush multi function pada layer tersebut dan ubah layer mode menjadi Overlay dengan opacity 25%.

Membuat Header Blog dengan Photoshop

Langkah terakhir : Penyimpanan yang bagus untuk dipublikasi di internet.

Karena kita akan mempublikasikannya di Internet, kita dapat menyimpan file gambar header tersebut dengan cara menekan File > Save as for web dan setting seperti gambar berikut.

Membuat Header Blog dengan Photoshop

Perlu anda ketahui, jika kualitas gambar tinggi (maximum) maka ukuran gambar tersebut akan besar dan akan lambat nantinya jika anda melakukan proses upload ke internet akan tetapi hasilnya sangat bagus, dan jika anda menurunkan kualitas gambar maka ukuran image akan kecil dan akan cepat load saat berada di internet nantinya akan tetapi kualitas gambar sedikit menurun. Saran saya untuk perhatikan ukuran gambar dan kualias gambar anda dengan memilih High atau Very high.

Hasil desain

Membuat Header Blog dengan Photoshop

Anda juga dapat melihat langsung hasil desain di situs saya http://ini-apa.net/

Semoga bermanfaat, jika ada hal yang ingin di tanyakan silahkan di isi di kotak komentar dan jangan lupa juga untuk meninggalkan jejak anda disini (komentar akan dihapus 50 hari setelah postingan).

Punya Android hanya untuk chatting ? yuk cari uang juga lewat Android dengan cara mudah dan telah terbukti, lihat tutorialnya pada postingan cara mendapatkan uang dengan Android

Related Post


Tips mempersiapkan foto sebelum dimuat ke internet
Tips mempersiapkan foto sebelum dimuat ke internet

Foto maupun gambar merupakan bagian penting dari internet, dan seperti…

Cara Membuat PIN dengan Photoshop
Cara Membuat PIN dengan Photoshop

Kamu ingin membuat PIN yang keren dengan photoshop? serta dengan…

Perkembangan photoshop dari masa ke masa
Perkembangan photoshop dari masa ke masa

Photoshop merupakan aplikasi pengedit foto berbasis bitmap yang terkenal sejak…

Memaksimalkan Foto dari Kamera dengan Photoshop
Memaksimalkan Foto dari Kamera dengan Photoshop

Pada Video tutorial photoshop mengedit gambar dari kamera ini kita akan belajar…



  • Yogo

    Waw,,domain gratis,+ hosting ya?,,gimana tuh jadi dapet?.Logo Header ya,bagus juga,tapi websitenya gak bisa diakses kenapa ya?.

    • http://psdesain.net/ Jaka

      Cuma domain aja hadiah dari salah seorang teman blogger.. :)
      websitenya bisa diakses kok.. mungkin sedang ada gangguan kemarin-kemarin.

  • http://agamtrueblueblog.wordpress.com/ agam

    keren brow :) thx atas cara nge save nya yah :D hehehe

    • http://psdesain.net/ Jaka

      yap..
      silahkan mas agam..
      semoga bermanfaat dan berguna. :)

  • http://www.tergaptek.com Gaptek

    Kereeeeen ^_^

    Pengen bisa kayak gitu bikin2 header ,, cuman kreatifitas gak nyampe kayaknya deh

    • http://psdesain.net/ Jaka

      Setiap orang punya kelebihan di bidangnya..
      Dan anda lebih jago SEO dan blogging. :D

  • vira_endezz

    tolong kakak aqu newbie…,bisa chek blog aqu ; elfaderayz.blogspotdotcom/

    • http://psdesain.net/ Jaka

      blognya bagus, terimakasih telah berkunjung. :)

  • ady

    gan, cara nggunain brush multi fungtion itu gmana ya??
    masih new bie ni, hehehe

  • Andrew

    Thx infox
    Join My Blog

    • http://psdesain.net/ Jaka

      Siip :)

  • http://gamenlibertyreserve.blogspot.com games

    keren abis sob..saya langsung praktik..makasih atas infonya..

    • http://psdesain.net/ Jaka

      Sudah berhasilkah? :)

  • http://taktikinternetmarketing.wordpress.com/ Marketing

    Cakep mas headernya, saya mau belajar nih, kalo bisa dibuatin e book nya jadi bisa dibaca baca ofline gitu,, hehehe..

    • http://psdesain.net/ Jaka

      Ebook ya,, Penawaran marketing yang bagus :D
      Tapi jika ingin membacanya secara offline pembaca bisa dengan mudah mengcopy pastekan ke word kok. :)

  • http://www.aankbudisantoso.com aank

    ilmu yang bermanfaat

    • http://psdesain.net/ Jaka

      Akan lebih bermanfaat jika anda coba dan praktekkan :)

  • boyz’jr

    turotorialnya sangat bermanfaat buat newbie seperti saya mas , triamakasih

    • http://psdesain.net/ Jaka

      Semoga ilmu dari website ini bisa bermanfaat mas :)

  • fadli

    wew, mantap gan. buat header website ane. kebetulan baru bikin. hehe

    • http://psdesain.net/ Jaka

      Headernya belum diganti sptnya itu mas?? :)