Tutorial photoshop kali ini hanya memberikan sedikit contoh sederhana dari teknik memperkenalkan situs/web anda..atau yang lazim kita kenal dengan Banner. Selain memperkenalkan web, kita juga dapat memanfaatkannya untuk keperluan promosi sebuah produk/jasa.

Tekniknya sama saja seperti kita hendak membuat objek di sotoshop…hanya saja biasanya kita perlu memperhatikan:
gambar/bentuk/tulisan yang dibuat harus sesuai & menarik buat si user. kalo tidak,ga bakalan ada yang tertarik dooong..

Langsung aja bro…

Bikin dokumen baru SotoShop. Misalkan ukuran banner Anda 300 x 60 px

Penulis menekankan pada bentuk path yang akan dibuat.

Kita akan menggunakan pen tool untuk path2 bentuk border bannernya. Sebelumnya pastikan Option menu Snap to Guide telah dicentang, karena kita akan membuat guide (garis bantu) untuk membentuk path border bannernya.

Abis ntu lu langsung aja deh susun garis2 guide nya kaya gini niii

OKe bro..sekarang lu pilih pen tool nya …klik2 pada bagian yang lu suka untuk membetuk bidangnya, jadi nanti akan terbentuk bidang kaya ini nii…

Oke2 proses bikin bidangnya selesai…nah sekarang restirize dulu shape layer path lu …caranya klik kanan aja di layer shape nya, lalu pilih “restirize layer” ato pilih Layer > Restirize Layer

Langkah selanjutnya tekan [CTRL+Click] pada layer shape tadi untuk membetuk seleksi, lalu pilih Select > Modify > Contract = 10 px. Lalu tekan [DELETE] … Nah sekarang objeknya kaya berlubang yak?

Oke lu ganti tuh nama layernya menjadi “border”

Oiiittt sabar, seleksi nya jangan dihilangkan dulu. Lu bikin layer baru diatas layer border, namanya “layar”..tekan [ALT+BackSpace] ato Edit > Fill > Forground Color..untuk mewarnai bidang seleksi contract tadi (warnanya sementara bebas aja dulu).

nah baru sekarang lu tekan [CTRL+D] untuk deselect.

Lu kasi Style untuk layer border nya…

Setting gradientnya:

Teraakhir kasi stroke = 1 pixel , position = inside , opacity = 100 %

Untuk layer layar lu kasi style kaya kini:

Kasi sentuhan glossy..untuk kesan glass nya..ubah nama layernya menjadi “shadow”

Dengan pen tool , bikin kembali bagian2 penghiasnya untuk disebelah samping kanan objek..kasi nama layer “pipa”

Sekarang bikin text2nya untuk keterangan banner..contohnya gue mau bikin banner textnya “Komunitas Photoshop Indonesia dremi.info”

Nantinya text2ini akan kita animasikan kemunculannya di Image Ready…

Dengan syarat awal: hidden dulu seluruh layer text lu…(klik ikon mata pada layer)

Ouukehhh…..lu pindah ke Image ready sekarang..[SHIFT+CTRL+M]

Yang diperhatikan dalam Image Ready :

Panel Animation, Panel Layer dan Panel / Tab Optimize.

Pertama muncul kan dulu layer text “Komunitas” pada Frame 1 (klik ikon mata pada panel layer, mengindikasikan layer dimunculkan).

Selanjutnya ubah Delay Time pada Frame 1 menjadi 0.5 second pada Panel Animation

Klik ikon Duplicate Current Frame pada Panel Animation 1 kali

Maka akan bertambah 1 frame baru dengan nama Frame 2

Pada Frame 2 hidden lah layer text “Komunitas”, dan munculkan layer text “Photoshop”. dengan delay time yang sama.

Sekali lagi klik Duplicate Current Frame, hidden Layer text “Photoshop” dan munculkan layer text “Indonesia”

Sehingga sementara kita akan memiliki 3 buah frame animasi untuk text “Komunitas Photoshop Indonesia”.

WOKE 2..lu tambahin satu agi Frame Animasinya (Frame 4) . Dalam Frame ini..Hidden-lah layer text Indonesia nya. Munculkan layer text “dremi.info-ijo”, ubah delay timenya menjadi “no delay” (0 second).

Tambah 1 lagi Frame nya, menjadi (Frame 5). Kali ini hidden-lah layer text “dremi.info-ijo”, dan munculkan layer text “dremi.info-item”. delay timenya tetap sama.

Frame sementara lu kali ini jumlahnya 5 Frame. Kalo engga berarti ada yang kurang bro..hakhakhak

Ok, lanjut bro. Dengan sambil menekan tombol [CTRL], klik lah pada Frame 4 dan Frame 5. Sehingga kedua framenya ter blok secara bersamaan. Ya uuudaaah, lu tinggal klik deh Ikon Duplicate Current Framenya. Jadi kedua frame yang lu blok tadi (Frame 4 dan Frame 5) akan ter duplikat menjadi Frame 6 dan Frame 7.

Nah tujuannya menduplikat frame 4 & 5 adalah untuk menampilkan text dremi.info yang berkedip2 (bergantian dengan text dremi.info-ijo dan dremi.info-item

Nah ini susunan lengkap Frame Animation lu..

Kalo lu mau nyobain animasinya, klik aja tombol Play yang bentuknya sama kaya di tombol Play Winamp. Ato kalo mau Preview di Browser klik aja icon Preview in Browser nya (CTRL+ALT+P)

Untuk langkah terakhir optimize dulu gambar lu dengan “GIF-128 no ditter”. gue pake GIF karena , kali ini gue maunya background objeknya di hidden (transparent animasi). Jadi dengan GIF optimize, kita dapat mengoptimize gambar menjadi transparan. dan Biasanya untuk Animasi sebaiknya menggunakan GIF.

Lalu pilih File > Save Optimize As.

Hasil jadi gue…

Share on Facebook

Popularity: 4% [?]

You may also like

• Web 2.0 Layout With CSS Part-3
• Web 2.0 Layout With CSS Part-2
• Web 2.0 Layout With CSS Part-1
• Green Layout Web 2.0
• Photoshop Magic Sphere
• Aero Button Web 2.0
• Meteor Text Effect
• Smooth Window Frame
• Black Smooth Mp3 Player
• Simple Polar Coordinat