IDFreelance - Indonesia Freelance Programmer and Web Designer

Add to Technorati Favorites
 
Content

 

Tutorial Photoshop : Membuat Logo Web 2.0

15 June, 2009

web20 Tutorial Photoshop : Membuat Logo Web 2.0Kali ini saya coba mendesain suatu logo sederhana menggunakan Photoshop. Siapapun bisa membuatnya asalkan ada niat n kemauan..

Peralatan yang diperlukan cukup lumayan hampir sederhana, antara lain Photoshop, Komputer, Mouse, Keyboard, Softdrink n sedikit imajinasi (coz ‘imagination is everything’ – A. Enstein – CMIIW).

Langkah pertama buka Photoshop (pastinya), pilih menu File > New, maka akan tampil jendela baru.

Masukkan ukuran 200×200 px. Lihat gambar :

Photoshop Logo Menu New

Setelah klik OK, maka akan tampil 1 dokumen baru dengan background transparan. Pilih Custom Shape Tool dari toolbar di bagian kiri atau dengan menekan tombol U dan memilih Custom Shape Tool.

Photoshop Custom Shape Tool

Kemudian di bagian toolbar atas, pilih dropdown menu di sebelah Custom Shape Tool dan pilih gambar dengan nama Talk 1.

Photoshop Custom Shap

Photoshop Custom Shape Talk 1

Klik dan tahan sambil menggeser cursor untuk menggambar tampilan tersebut ke dalam dokumen. Sehingga menjadi :

Tutorial Photoshop - Web 2.0

Pilih menu Layer > Layer Style > Blending Options untuk membuka jendela baru pilihan Blending Options.

Pada jendela Blending Options sesuaikan masing-masing pengaturan dengan yang terdapat dalam gambar. Untuk Drop Shadow, Bevel and Emboss, Color Overlay serta Stroke.

Photoshop Drop Shadow

3626711169 990bffb543 Tutorial Photoshop : Membuat Logo Web 2.0

Photoshop Color Overlay

Photoshop Stroke

Sehingga hasil akan seperti ini:

Photoshop Hasil

Tambahkan layer baru melalui menu Layer>New>Layer atau dengan menekan kombinasi tombol Shift+CTRL+N. Setelah Layer baru ditambahkan, pilih Elliptical Marquee Tool.

Photoshop Elliptical Marquee Tool

Kemudian gambarkan seperti gambar di bawah ini :

Photoshop Sketch

Setelah menggambar menggunakan Elliptical Marquee Tool, pastikan foreground color berwarna putih, kemudian klik Gradient Tool dan dari Gradient Picker pilih Foreground to Transparent.

Photoshop Check Foreground Color

Photoshop Gradient Tool

Photoshop Gradient Picker

Photoshop Foreground To Transparent

Sip, saatnya membuka softdrink… tunggu beberapa saat dan lanjutkan ke tahap berikutnya…

Klik dan tahan dari bawah ke bagian atas pada bentuk elips yang baru dibuat, lihat gambar :

Photoshop Click n Drag

Dan inilah hasilnya ^^:

Photoshop Logo

Atur Opacity sesuai selera masing-masing…

Photoshop Logo Opacity

Selanjutnya membuat tulisan yang berbayang dan terbalik. Klik Horizontal Type Tool (atau dengan menekan tombol T). Kemudian klik pada gambar dan ketikkan ‘Webku’.

Photoshop Horizontal Type Tool

Photoshop Text

Ok lanjut…. Sampai di sini saya telah sukses membuat tulisan dalam Photoshop ^^. Bagaimana membuat bayangan seperti cermin pada tulisan tersebut?

Pertama-tama duplikasikan layer tersebut dengan memilih menu Layer > Duplicate Layer, muncul jendela baru yang meminta untuk memasukkan nama layer yang baru. Klik OK.

Masih di layer yang ter-duplikasi (<<< CMIIW), pilih menu Edit > Transform > Flip Vertical.

Photoshop Flip Vertical

Dan ini hasilnya :

Photoshop Web 2.0 Result

Tambahkan Layer Mask pada layer yang baru dengan mengklik tombol Add Layer Mask.

Photoshop Add Layer Mask

Sehingga tampilan jendela Layer menjadi seperti ini:

Photoshop Layer Mask Added

Kembali pilih Gradient Tool (G) dan pada Gradient Picker pilih Black, White.

Photoshop Gradient Black White

Klik dan tahan sambil menggeser cursor dari arah bawah tulisan ke bagian paling atas tulisan. Lihat gambar :

Photoshop Click n Drag Shadowed

Hasil akhir (silahkan dikreasikan sendiri menurut selera) :

Photoshop Complete

Download full PSD-nya : Logo Web 2.0 PSD (368)

Share and Enjoy:

  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • DotNetKicks
  • DZone
  • Live
  • Yahoo! Buzz
  • Technorati
  • FriendFeed
  • Ping.fm
  • LinkedIn
  • PDF
  • Print
  • email

Artikel Terkait :

Tags: , , , ,   Dalam Desain, Tip n Trik | 10 Comments »

You can leave a response, or trackback from your own site.


Pencarian untuk artikel ini:
membuat logo dengan photoshop  photoshop for web  buat logo dengan photoshop  bikin logo pakai photoshop  tutorial membuat logo carrefour photoshop  tutorial photoshop membuat logo  membuat logo photoshop  membuat website dengan photoshop  membuat tulisan berbayang photoshop  tutorialphotoshop  trik membuat logo vektor dengan photoshop  trik membuat tulisan transparan pada photoshop  tulisan transparent cermin photoshop  tutor photoshop atas  membuat tampilan web dengan photoshop 7  tutorial buat logo photo shoop  tutorial desain web dengan photoshop  tolls pembuat logo  teknik membuat gambar logo  teknik dalam membuat gambar logo  situs membuat logo  program pembuat logo  photoshop untuk web  photoshop membuat menu  tahap tahap membuat logo pertamina  menggambar dengan photoshop cs7  membuat web dengan photo shop  tutorial design web dengan photoshop  tutorial memasukkan tulisan ke gambar photoshop  tutorial membuat hdr sederhana  tutorial photoshop freelance  tutorial photoshop membuat lambang koperasi  tutorial photoshop membuat logo berkilau  tutorial photoshop membuat logo koin  tutorial photoshop membuat logo o2  tutorial photoshop membuat logo persib  tutorial photoshop membuat logo star  tutorial photoshop membuat logo timbul  tutorial photoshop membuat logo:eagle  tutorial photoshop deviantart gratis  tutorial photoshop cs8 membuat logo  tutorial photoshop cs7 membuat logo  tutorial membuat lambang bluetooth photoshop  tutorial membuat logo dengan photoshop  tutorial membuat logo pertamina photo shop  tutorial membuat logo photoshop cs6  tutorial membuat tampilan web  tutorial membuat web pakai photoshop 7  tutorial mmbuat logo pada tool blog  tutorial pembuatan logo photoshop 8  
 

 

10 Respon untuk “Tutorial Photoshop : Membuat Logo Web 2.0”

  1. Sugi says:

    Oke juga tutorialnya buos!!

  2. ya, hey mas q kirimin tutorial photoshop donk,q pengn Blajar nie. . . robert.obert@yahoo.com

  3. kenny says:

    kalo untuk web atau blog buat nya begini juga?

  4. Oke banget neh infonya……

  5. on90 says:

    wah,mas q kirimin 10 tutorial photoshop donk,q pengn Blajar nie. . . phipeace@yahoo.com

  6. wijayadi says:

    saya pingin buat website tapi belum tau caranya dari awal,tolong dong saya,agar bisa buat sendiri website,hehehe… matur nuwun.

  7. cosamaya says:

    top hebat dan salam kenal,..

  8. Ini dia yang di cari2..

Tinggalkan balasan