Joomla Indonesia

Login or Sign Up
Sign In or Register
Avatar
Not Registered Yet?

Join Now! It's FREE. Get full access and benefit from this site

Reset My password - Remind Me My username

Username
Password
Remember me
  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that have been used in the blog.
  • Bloggers
    Bloggers Search for your favorite blogger from this site.
  • Team Blogs
    Team Blogs Find your favorite team blogs here.
  • Login
    Login Login form

Dirgahayu RI ke 62 - Desain Bendera Web 2.0

Posted by on in Tip Dan Trik
  • Font size: Larger Smaller
  • Hits: 11358
  • 8 Comments
  • Subscribe to this entry
  • Print

 Dalam rangka memeriahkan HUT RI ke 62, saya akan
coba membuat  sebuah tutorial pembuatan icon bendera
Indonesia dengan model desain Web 2.0 yang populer.

Tutorial ini diharapkan dapat juga membantu kita untuk
dasar pembuatan icon-icon yang lain yang akan membuat
situs kita semakin menarik dan terasa lezat..

Siapkan Photoshop CS2 - 3 kita, dan ikuti langkah-langkah berikut ini. 

 

1. Langkah pertama adalah mempersiapkan canvas kita di Photoshop dengan ukuran 500px X 500px atau lebih, semakin besar akan semakin baik dan semakin jelas detail yang ingin ditampilkan.

  

2. Carilah atau buat gambar bendera dan pastikan posisi bendera tersbut sudah di tengah.

  

3. Dengan menggunakan tools seleksi lingkaran (marquee tool), buat lingkaran di tengah-tengah bendera tersebut kemudian kita copy dan paste-kan kedalam kanvas

   

4. Selanjutnya kita akan menambahkan tiga efek untuk memberi hasil glossy pada bendera kita ini, efek tersebut adalah : Inner Glow, Bevel and Emboss dan Stroke.

Pada Inner Glow, set warna putih dan size = 20.

  

Pada Bevelset size = 200 dan mainkan slider opacity 
sesuai dengan kenginan untuk membuat bayangan pada bagian bawah bendera 

  

Pada Stroke, pilihlah warna yang sesuai dan tebal / size yang kita inginkan.

   

5. Setelah selesai dengan efek, siapkan layer pada kanvas kita dan buatlah dua buah layar baru. 
Kemudian ubah layer-layer tersebut menjadi Clipping Mask yang akan digunakan untuk menyesuaikan
opacity pada gambar kita.

  

6. Pastikan warna default pada photoshop adalah hitam / putih (tekan 'D')
Pilih layer clipping mask pertama yang letaknya berada tepat di atas gambar bendera tadi
dan kembali gunakan tool seleksi lingkaran (marquee tool) untuk menyeleksi bagian atas gambar
serta warnai seleksi tersebut dengan warna putih ( Crtl + Backspace ) untuk membuat cahaya di atas.
Sesuaikan tingkat opacity-nya dengan menggeser layar master opacity.

7. Pilih layer clipping mask kedua yang letaknya berada di paling atas gambar bendera tadi
dan kembali gunakan tool seleksi lingkaran (marquee tool) untuk menyeleksi bagian bawah gambar
serta warnai seleksi tersebut dengan warna hitam ( Crtl + Backspace ) untuk membuat bayangan di bawah.
Sesuaikan tingkat opacity-nya dengan menggeser layar master opacity.

8. Pilih kedua layer clipping masks kita tadi (menekan shift + klik pada layer yang dipilih),
dan gunakan Move Tool ('V') dengan memastikan 'Show Transform Control' sudah ditandai.
Perkecil gambar tersebut agar kanvas kita cukup untuk dua buah gambar bendera atas dan bawah.
Kemudian putar perlahan-lahan ke arah kiri atau sesuai dengan keinginan.

 

9. Sekarang saatnya kita membuat bayangan pada dasar bendera kita. Sebelumnya merge seluruh
layer kita, kecuali layer backgound (kalau ada), dan copy layer hasil merge tersebut.
Flip layer kopian tersebut secara vertikal dan letakan tepat dibawah bendera kita.

 

10. pilih layer kopian tersebut dan buatlah Layer Mask dengan meng-klik icon layer mask atau menu
Layer -> Layer Mask -> Reveal All.
Gunakan Gradient Tool ('G') untuk membuat gradasi pada layer mask kita tadi sehingga gambar akan
terlihat menghilang sebagian, sesuaikan gradiasi tersebut seperti yang kita inginkan.

 
Nah selesai sudah bendera lingkaran yang cantik dan menarik.  Silahkan berkreasi sendiri 
untuk membuat gambar-gambar lain dengan efek Web 2.0 ini.

Saya harap tutorial ini dapat berguna bagi kita semua. Salam Joomla Indonesia.

 

0

People in this conversation

  • Guest - jomlaos

    mantap bro tutorialnya..

    0 Like Short URL:
  • Guest - salim

    bos....
    1 s/d 7 masih bisa ngikutin...yg ke delapan dah coba teken shift ma klik ko ga bisa2 ya?
    :upset
    trus untuk merge semua layer kecuali background layer itu bagaimana ya???
    newbie banget nih :cry

    0 Like Short URL:
  • Guest - sikumbang

    Coba tekan Ctrl + Shift + E atau
    Ctrl + Shift + Alt + E saja mas

    0 Like Short URL:
  • Guest - sikumbang

    @salim
    Coba tekan Ctrl + Shift + E atau
    Ctrl + Shift + Alt + E saja mas

    0 Like Short URL:
  • Guest - yadhie

    great....
    tutorial yang kayak gini yang berguna... Maklum gak bisa Photoshop

    0 Like Short URL:
  • Guest - myfia

    Seep deh. Gw coba dulu ya

    0 Like Short URL:
  • Guest - salim

    @sikumbang
    om kumbang, shortcut yg ente kasih itu untuk bikin merge visible ya??

    ok thanx yg itu bisa....tapi yang teken + sift tetep ga bisa2...btw itu gunanaya untuk apa sih???
    thanx

    0 Like Short URL:
  • Guest - chanlego

    Trus Update tip trik baru2nya ya..biar semakin rame situs ini dan menjadi bear...sukses

    0 Like Short URL:

Kategori Blog

Joomla User Group Indonesia

Joomla User Group indonesia

Id-joomla.com adalah situs resmi Joomla User Group (JUG) Indonesia dan Joomla Translation Team

 
Download Terjemahan Joomla terakreditasi dari JoomlaCode dan laporkan bugs, ide dan saran nya di Sub Forum Hanacaraka

Socials

twitter id joomlafb idjoomla