logo ilmugrafis
Home Tutorials News Artikel Fonts Download Gallery Kontak
Google Powered Search
 
ilmu grafis » PHOTOSHOP PHOTO EFFECT » Page 12

Membuat Header Website Tampak Menarik

Publish: 25 April 2013 | Author & Copyright: Johan | Status: Edit Foto

Pada Tutorial atau modul photoshop kali ini saya akan membagikan cara membuat header website yang menarik dengan tampilan gambar tampak tersambung menjadi 1 sehingga kesannya antara gambar satu dengan yang lain terlihat transisi / perpindahan yang transparan dan halus. Masih menggunakan Tehnik masking yang kita pelajari di bab sebelumnya. Bagi anda yang belum mempelajari bisa klik Link ini : tutorial tehnik masking.

Bagaimana caranya? ok mari kita belajar bersama - sama, Tutorial membuat Header Website yang menarik

1. Buka Photoshop, Caranya : Pada Windows klik : Start > All Program > Adobe Photoshop

2. Tentukan Ukuran dari header website kita. Ukuran header anda sesuaikan dengan layout website anda ya. Disini saya mengambil contoh dari website ilmugrafis, ok ukuran header dari website ilmugrafis.com adalah 800 px X 150 px , itu artinya panjang 800 pixels dan lebar 150 pixels.
new project header website
gambar : new project header website dengan photoshop

3. ok sekarang masukkan 2 gambar yang akan kita gabungkan nantinya.
Caranya : Klik File > Open > Pilih Gambar > Open
Disini saya memasukkan gambar, kali ini saya akan membuat header website bertema bangkit Indonesia karena nanti tanggal 2 mei ada Hari Pendidikan Nasional jadi saya memilih gambar ini:
Indonesia Berkibar
gambar : Indonesia Berkibar

anak nusantara
gambar : anak nusantara

Download File Latihan Disini

Ok sekarang gunakan move tool dan pindah gambar foto Indonesia Berkibar ke lembar kerja yang tadi kita buat dan nantinya akan menjadi layer 1, kemudian lalu lanjutkan dengan foto anak nusantara dan foto ini akan menjadi layer 2. Apa itu layer? pengertian layer. Tekan ctrl + t untuk merubah ukuran gambar sesuai yang diinginkan, tehnik ini namanya tehnik transform
susunan layer pada header
gambar : susunan layer pada header

4. Ok sekarang waktunya memasking, klik add vector mask
add vector mask
gambar : add vector mask

kemudian kita lakukan 3 langkah yaitu :
A) klik gradient tool lalu
B) setting warnanya ke hitam putih lalu
C) sapukan ke gambar dari kanan ke kiri (lihat tanda garis hitam)
tehnik masking
gambar : tehnik masking

hasilnya :
2 gambar seperti tergabung menyatu
gambar : 2 gambar seperti tergabung menyatu

5. ok sekarang beri kotak pada sisi kiri bawahnya dengan Rectangle Tool
Rectangle Tool
gambar : Rectangle Tool

Kemudian klik Text Tool dan beri sedikit tulisan misal www.indonesiaraya.com
Buat lagi kotak di sebelah kanan dan beri tulisan moto atau slogan atau apapun yang bermakna, kali ini saya menulis :
Bangunlah Jiwanya... Bangunlah Badannya... Untuk Indonesia Raya...
hasil header website
gambar : hasil header website

Bisa juga dibuat sebagai banner website anda.

Maaf ukuran header di atas saya rezise agar pas di halaman web ilmugrafis ini.

Berikut ini contoh pengaplikasiannya terhadap layout website anda.
layout website ku
gambar : layout website ku
terima kasih telah belajar photoshop bersama saya dan ilmugrafis, semoga tutorial photoshop membuat header website ini bermanfaat. Anda bisa menambahkan pernak pernik sesuai dengan keinginan anda dan imajinasi anda. Selamat berkarya!

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
android apk IlmuGrafiscom Apk | rss Subscribe ilmuGrafis.com via Email


author

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai komputer grafis terutama program photoshop dan coreldraw. Saat ini bekerja sebagai designer grafis di salah satu perusahaan swasta di Surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Twitter: @johanfelisitas
Google+ : johan felisitas
Facebook : facebook.com/tomuramaster
Email : johan.felisitas[at]gmail[dot]com



Rekomendasi Resmi ilmuGrafis
Metode Belajar Cepat dan Mudah dengan Video Tutorial dan Desain Grafis Source
Dipersembahkan oleh ilmuGrafis Store
PSD CE
Photoshop Complete Edition

Koleksi Lengkap Video Tutorial Photoshop dan mulai dari Efek Foto Professional hingga manipulasi foto terungkap semua disini
PLGNT
Plugins Topaz dan NIK

Koleksi Plugins Photoshop yang powerfull untuk membuat Foto - Fotomu Lebih Berwarna dan Bermakna
PSD DG
Photoshop Desain Grafis

Video Tutorial Photoshop CS 3 ini mengungkap penggunaan teknik-teknik photoshop yang sering digunakan para praktisi
Brush Photoshop
Ultimate Brush Photoshop

Kumpulan dan Koleksi Brush Premium Photoshop siap pakai untuk keperluan desain anda
PLG 5
Plugins Suite 5

Kumpulan Plugins Premium dan Plugins Suite 5 untuk meningkatkan kemampuan dan menambah fitur Photoshop anda
Photo Frame FPF
Fantastic Photo Frames

Kumpulan Frame dan Digital Frame siap pakai untuk keperluan frame dan mempercantik foto anda secara Instan


ARTsense Dumetschool
Advertisement

Aturan dan Kebijakan di website ilmugrafis

  • Semua Konten di ilmuGrafis.com bertujuan sebagai media pendidikan dan pembelajaran, oleh karena itu dimohon tidak menyalahgunakan informasi dan pengetahuan yang diperoleh untuk hal - hal yang merugikan diri sendiri maupun orang lain
  • Kami melakukan segala upaya untuk memastikan bahwa informasi di ilmuGrafis.com tersaji seakurat dan sebaik mungkin. Anda bisa melaporkan jika ada konten ataupun informasi yang tidak berkenan di Kontak
  • Jika anda ingin memposting ulang atau mengcopy konten yang ada di ilmuGrafis.com maka silahkan membaca terlebih dahulu Terms Of Use

SearchKategori

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Plugins

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Tools

PHOTOGRAPHY
Lightroom

VECTORIZE
Adobe Illustrator

ANIMATION
Flash
Swishmax

3D MODELING
3dsMAX
AutoCAD
Cinema 4D
Maya

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DEVELOPER
Dreamweaver
jQuery
Fireworks

PUBLISHING
Freehand
InDesign
Ms. Paint
Ms. Visio

FREEWARE
Gimp
Inkscape

DESIGN
News
Artikel

PERKAKAS
Fonts
Software
Templates

INSPIRATION
Gallery
Papercraft

EXHIBITION
Liga Grafis
Hall Of Fame

EXTRA
Hiburan
Bursa Kerja
Jasa Grafis
Donasi

Peta Situs Term of Use web edukasi - ilmugrafis.com Indonesia
© 2008 - 2014 ilmuGrafis.com Design and Development by IG Team.
All other trademarks are the property of their respective owners.
kembali ke atas / back to top