div>
widget

Friday, March 15, 2013

CARA MEMBUAT TOMBOL WEBSITE DENGAN PHOTOSHOP






1. Siapkan file (canvas) baru, caranya pilih File > New. Lakukan pengaturan pada kotak dialog New dengan latar belakang (background) putih berukuran 500x500 pixel, seperti ilustrasi gambar berikut ini:
 
2. Pilih Custom Shape Tool.
custom shape tool photoshop untuk membuat icon tombol website

Kemudian atur opsi yang yang ada di atas seperti ilsutrasi gambar di bawah ini. Klik kotak drop down Shape, kemudian klik ikon segitiga kecil di sebelah kanan, pilih opsi Arrow dan klik OK pada kotak dialog “Replace current shape with the shapes from Arrows”.

 

custom shape tool photoshop untuk membuat icon tombol website



Kembali lagi ke kotak drop-down Shape dan pilih Arrow 9. 


custom shape tool photoshop untuk membuat icon tombol website

3. Buatlah sebuah tanda panah pada canvas gambar photoshop.
 4. Arahkan mouse pada panel Layers, klik-kanan pada layer Shape 1, pilih opsi Rasterize Layer.
rasterize layer photoshop cs5
5. Kembali klik layer Shape 1, kita akan bermain dengan layer style menggunakan blending options, caranya pilih menu Layer > Later Style maka akan ada menu drop-down seperti ilustrasi gambar di bawah ini. Perhatikan 7 opsi dengan kotak merah yang akan kita gunakan seperti langkah-langkah berikut ini. 
fitur layer style pada photoshop cs5

6. Pilih pengaturan blending Gradient Overlay. Atur Blend Mode: Normal, Opacity:100%, Angel: 90 derajat. Klik kotak pengaturan warna Gradient. 
gradient overlay photoshop cs5

Pada jendela Gradient Editor, ubahlah warna gradient default, caranya klik Color Stop kiri, pilih warna Hitam dan Location: 23%, hal yang sama dengan Color Stop kanan dengan pilihan warna Hitam, Location: 77%. Tambahkan Color Stop tengah dengan kode warna: 04CA29. Pengaturan seperti pada ilustrasi kotak dialog berikut ini:


cara membuat color stop gradient overlay photoshop


7. Pilih pengaturan blending Stroke dari menu Layer > Layer Style. Atur Blend Mode: Normal, Opacity: 100%, Size: 10px, Position: Outside, Fill Type: Gradient. Pilih Style Shape Burst, Angle: 90, Scale: 78%. Kemudian klik kotak pengaturan warna Gradient. 

Pada jendela Gradient Editor, pilih warna gradient default Black, White. Pengaturan seperti pada ilustrasi kotak dialog berikut ini:

cara membuat color stop fitur stroke pada photoshop
8. Pilih pengaturan blending Bevel and Emboss. Pilih Style: Inner Bevel, Technique: Smooth, atur nilai Depth: 500%, Direction: Up, Size: 8px, dan Soften: 0%, Angle: 120 derajat, Altitude: 30 derajat.

Masih dalam pengaturan Bevel and Emboss, pilih pengaturan Contour klik drop down Contour, pilih mode Ring. 
Highlight Mode, ubah warna dengan kode 5DC458, kemudian turunkan nilai Opacity menjadi 70%. 
cara merubah preset contour bevel and emboss di photoshop
9. Pilih pengaturan blending Inner Glow. Atur Blend Mode: Screen, Opacity: 100%, Noise: 0%. Klik kotak pengaturan warna Set color glow, pilih warna baru dengan kode 177412, Technique: Softer, Source: Edge, Choke: 5%, Size: 27px.
cara mengatur blending inner glow di photoshop cs5

10. Pilih pengaturan blending Outer Glow. Atur Blend Mode: Screen, Opacity: 75%, Noise: 0% Klik kotak pengaturan warna Set color of glow, pilih warna dengan kode 115402, Size: 10px.
cara mengatur blending outer glow di photoshop cs5

11. Pilih pengaturan blending Inner Shadow.  Atur Blend Mode: Multiply, pilih warna solid Hitam, Opacity: 75%, Angle: 120 derajat, Distance: 5px, Choke: 0, Size: 9px.
cara mengatur blending inner shadow di photoshop cs5
12. Pilih pengaturan blending Drop Shadow. Atur Blend mode: Normal, pilih warna solid Hitam, Opacity: 100%, Angle: 120 derajat, Distance: 5px, Spread: 0%, Size: 54px.
cara mengatur blending drop shadow di photoshop cs5

13. Tambahkan teks judul pada tombol (button) Anak Panah tersebut.
cara membuat icon tombol anak panah dengan photoshop cs5
Nah, selamat! Anda sudah berhasil membuat tombol icon website Anak Panah dengan photoshop cs5 .

Tips: Jika tombol icon ini akan digunakan di website, saya menyarankan agar sobat menyimpan file dalam format PNG dengan latar belakang transparan dan di resize sesuai ukuran di website seperti pada posting Cara Merubah Ukuran (Resize) File PNG dengan Photosop CS5.

Wednesday, February 6, 2013

CARA MEMBUAT WEBSITE GRATIS

Cara Membuat Website Gratis Cara membuat website gratis ternyata tidak sesulit yang kita bayangkan lho. Walaupun website berbayar memiliki banyak keunggulan seperti support system, availabilitas dan kredibilitas yang jauh lebih baik, namun buat teman-teman yang masih harus berhemat, rasanya solusi website gratis
masih bisa dipertimbangkan. Apalagi jika kita baru sekedar coba-coba saja dan belum berniat benar-benar menekuni cara membuat website sebenarnya. Tentu saja solusi cara membuat website gratis akan menjadi salah satu batu loncatan yang perlu dipertimbangkan. Cara membuat website gratis itu mudah. Setujukah Anda dengan pernyataan tersebut? Menurut saya bisa benar dan bisa juga tidak tergantung dari pemahaman setiap orang tentang HTML dan CSS. Memang sih pengetahuan tentang HTML dan CSS itu sepertinya wajib dimiliki oleh setiap webmaster di dunia ini tanpa kecuali. Namun demikian bagi Anda yang belum menguasai hal-hal tersebut, maka kita bisa saja membuat berbagai macam website menggunakan blog

BELAJAR HTML

Belajar HTML Belajar HTML merupakan proses pertama yang umumnya dilakukan oleh para web programer. Nah setelah selesai dengan belajar HTML, maka kamu akan memiliki kemampuan untuk membuat halaman web statis. Berikutnya kamu pasti pengen bisa bikin halaman web yang memiliki kemampuan untuk berinteraksi dengan pengunjung secara lebih intens