Simple Metal Banner

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…

ÂÂ

Alien Green Player

Terinspirasi setelah mimpi ketemu alien .. wakakakakaaa.. ga mirip-mirip banget sii .. tapi bisa lu pake bwat belajar.

Lu mulai dee bwat dokumen barunya..

Bikin bidang oval, ukuran sesuai selera lu..

Kasi Metal layer style …

dan Stroke Color #000000 , 2 pixels

Langkah selanjutnya, Lu [CTRL+Click] pada layer oval lu untuk membentuk seleksi…

Setelah tercipta seleksi, Pilih eliptical selection tool, atur setting nya :

– Mode : “Substract from Selection”

– Style : Fixed Size 150 pixels

Nah lu tinggal klik 2 aja deh bagian 2 seperti gbr dibwah ini:

Nah nantinya akan terbentuk seleksi seperti dibawah ini:

Tekan [CTRL+C] dan beralih ke Panel Channel, Bikin Channel baru dengan mengklik icon Create New Channel, ubah nama channelnya misalkan “alphaku” - dan Tekan [CTRL+V] untuk mempaste objek seleksi.

Ikon Create New Channel Pada Panel Channel

Alpha Baru yang tercipta

Nah lu Tekan dulu deh [CTRL+D] untuk deselect area.

Masih pada channel alphaku
Pilih Filter > Blur > Gaussian Blur : 15 px

Lanjut lagi, tekan [CTRL+L] untuk mengatur Levelnya, kasi setting sesuai gambar :

Kalo udah klik OK.

Nah sekarang lu [CTRL+Click] pada layer Alpha Channel “alphaku” untuk mendapatkan seleksi channel..

Tekan [CTRL+C], lalu berpindah ke Panel Layer biasa. Buat Layer baru dengan nama “layout bg”, Pilih Select > Modify > Contract : 10 px. OK

Lalu Pilih Edit > Paste Into.

Pada layer “layout bg” kasi layer Stye

Hasil sementara …

Lanjut, Tekan [CTRL+Click] pada Layer “layout bg” , bikin layer baru dengan nama layer “metal panel”, pilih Select > Modify > Contract 2 px. Tekan [ALT+Backspace] untuk mewarnai bidang dengan warna putih..

Kasi style pada layer “metal panel”

Hasilnya ..

Nah kalo layout dasarnya dah lu bikin..sekarang tinggal lu tambah2in pake pen tool untuk atribut2 lainnya..

Pilih. Rounded Rectangle tool, bikin bidang persegi..di bagiian atas untuk panel display..Gunakan Pen tool selection untuk menampilkan area path vectornya..

Dengan Add Anchor Point tool tambahkan titik - titik path pada bagian yang ditanda merah.

Dan tarik keatas mengikuti arah panah.

Perhatikan: Setelah menambah titik path pertama (atas) , langsung digeser ke atas sesuai arah panah , nah baru lu bikin titik path yang kedua (bawah).

Ok kasi aja layer style..nya: sama kaya layer style pada layer “layout bg” , cuman lu ganti gradient overlaynya dengan settign dibawah:

Kasi text “FUCK M I L I T E R I S M E” pada layer panel display. (terispirasi dari kebencian penulis pada sistem yang ada di sekolah pemerintahaan yang baru2 ini kembali memakan korban.

Nah kembangkan kreativitas lu..untuk membuat tombol2 lainnya..

Gue pake selection tool untuk bikin tombol2nya dan dengan Font style Visitor 2 (download disini)

Hasil nya kaya gini niii..

Woke 2 dah selesai , semoga bermanfaat..