25
Mei
09

Simple Metal Banner (Animasi)

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.

Klik untuk memperbesar

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…

Source : http://www.dremi.info/tutorial.php?cPub=Hits&cID=26


2 Responses to “Simple Metal Banner (Animasi)”


  1. 15 Juni 2009 pukul 7:08 PM

    wahhh…. ternyata Non Novi lebih expert dari saya.
    musti berguru nih….
    Suhu, mohon pencerahannya. *hihihihihi*
    kalo bole advis,
    bagi yang gape CorelDraw, biasanya bikin bentuk shapenya di CorelDraw (export as EPS)
    CMIIW ^_^
    (OOT banget ya… maaf deh)

  2. 15 Juni 2009 pukul 7:10 PM

    oh ya,
    di sotoshop, saya kurang begitu bisa bikin efek glossy
    mbok ya Non Novi ajarin saya …
    makasih bangettt…. ^:)^


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s


Nyang Ngurus

YM Status

Yahoo Online Status Indicator

My Facebook


Sri Novi Fitriyani

My Twitter

  • RT @infowatir: Naha nu geus gawe ngeluh wae nya? Salah saha atuh beut gawe. Enakan jd pengangguran positif terus pikirannya :(My Twitter 1 year ago
  • Yeay, bisa tewiteran lagi. #lebayMode :DMy Twitter 1 year ago
  • Hp dua2nya lowbat, gak ada sinyal. Listrik mati dari jam 9. Bales orderannya terhambat. Maaf ya cust..My Twitter 2 years ago
  • RT @MotivaTweet: Ya Tuhan kami, janganlah Engkau pikulkan kepada kami apa yang tak sanggup kami memikulnya. Maaflah dan rahmatilah kami… (A…My Twitter 2 years ago
  • RT @FaktaGoogle: Rasa cinta bs membangun emosi positif yg memberikn dorongan trhdp sistem kekebalan tubuh shg org lebih jarang sakit. [Carn…My Twitter 2 years ago

My Banner

Link Exchange

    <a href="https://srinovifitriyani.wordpress.com/" target="_blank"> <img border="0" alt="Srinovifitriyani" src="https://srinovifitriyani.files.wordpress.com/2009/04/banner_wordpress_novi.gif" height="150" alt="visit myblog"> </a>

Tulisan Teratas

Secret Admirer

  • 27,827 Korban

Visitor

free counters

%d blogger menyukai ini: