Teks Dengan Fill Gambar

Kali ini kita akan mencoba membuat sebuah teks yang dalamnya berisikan sebuah gambar, sehingga teks terlihat lebih cantik.. he3...

1. Buat file baru
File > New dengan ukuran (Width : 450 px dan Height : 170 px)
2. Buat sebuah teks menggunakan HORIZONTAL TYPE TOOL

Kemudian Atur jenis Fonts dan Ukuran sesuai dengan selera kamu…
Disini saya menggunakan kata Digital dengan font Script MT Bold
Hasilnya:


Atau anda ingin font yang lain? bisa manfaatkan dengan search engine --> Keyword Download Fonts

3. Buka file gambar yang ingin kamu jadikan FILL dalam teks
Caranya: File > Open (pilih gambar) > Open Kamu bisa gunakan gambar apapun yang kamu suka.
disini anda bisa Gunakan Gambar ini sebagai latihan

Klik kanan gambar lalu pilih Save image As...
Atau gunakan gambar lain dengan mencari di searh engine...
Keyword Best Wallpapers
4. Masukkan gambar yang sudah kamu pilih ke dalam layar kerja yang kita kerjakan tadi.
Caranya: Gunakan MOVE TOOL - Klik Kanan + Tahan pada gambar > Tarik > Masukan Kedalam Layar kerja yang kita kerjakan. Atur ukuran gambar sehingga sesuai dengan ukuran Teks yang telah kamu buat


Pindahkan Gambar ke Kanvas Tulisan

5. Perhatikan pada WINDOW LAYER


Pastikan posisi Layer Gambar berada diatas Layer Teks
Tekan dan Tahan tombol ALT kemudian arahkan kursor diperbatasan antara Layer gambar dan Layer Teks (ditandai garis biru pada gambar diatas), jika posisi kursor telah pas otomatis kursor akan berubah (lihat simbol yg lingkari merah pada gambar diatas), kemudian kamu tinggal KLIK. Jika langkah kamu benar maka gambar akan masuk kedalam Teks
Hasilnya:



6. Untuk lebih mempercantik kita tambahkan beberapa efek dari Layer Style (Drop Shadow dan Stoke)
Pastikan anda aktif pada layer teks (Klik pada Layer Teks), Klik Menu Layer > Layer Style > Blending Options

- Pilih DROP SHADOW (atur sesuai dengan selera anda)
Untuk referensi > Distance : 5 , Spread : 28 dan Size : 8

- Pilih STROKE (atur sesuai dengan selera anda)
Untuk referensi > Size : 3 dan Color : Putih

Setelah semua selesai anda akan mendapatkan sebuah teks dengan fill dan paduan efek yang akan membuat terlihat lebih cantik…

Hasilnya:


Digital By Irvan F

Terima Kasih

Selamat Mencoba dan Semoga Bermanfaat..

Read More......

Membuat Text Effect 101 Dalmatians

Pernah liat anjing dalmatian yang lucu? tapi bagi yang tidak menyukai anjing jangan sinis dulu karena kita bukan membahas hewan tersebut melainkan membuat text effect 101 dalmatians yang keren...

Yang jelas gak pake tulang dan gak pake lama...

Langkah-langkahnya:
1. Buka Program Photoshop - File - New
2. Setelah itu gunakan Text Tool - Horizontal Type Tool tuliskan angka 101
Jangan lupa disini saya menggunakan font type "Palatino Linotype"
Gunakan warna hitam...

3. Untuk memberikan spesial effect (kayak buat film aja) kita butuh men-RASTERIZE teks tersebut
Caranya: Layer --> Rasterize --> Type

Sabar dulu...

4. Ganti warna Background menjadi putih dan Foreground dengan putih

background dan foreground

5. Waktunya Spesial Effect
Caranya: Filter --> Distort --> Glass

Setting Glass

6. Spesial Effect Berikutnya
Filter --> Blur --> Glaussian Blur
Setting terserah anda namun jangan terlalu besar pengaturannya supaya tidak terlalu blur
Disini saya setting ke Radius 1,4 Pixels
Hasilnya:


7. Spesial Effect Berikutnya... (Cape deh... )
Image --> Adjusment --> Brightness/Contras
Brightness = 25
Contras = 70




8. Masuk ke Layer --> Layer Style --> Blending Options
Centang Drop Shadow dan Bevel and Emboss

Pengaturan Blending Options



Pengaturan Bevel and Emboss

Fiuh... Hasilnya:

101 Dalmatians Text Effect

Read More......

CSS Glassy Button

wedewww.. balik lagi dah.. hheehek..biar tampilan tombol form di web lu ga default, lu bisa pake CSS
bwat bikin style na. pertama bikin tombol dlu di photoshop, kita perlu
2 tombol, tombol aktif dan overlay (aktif saat mouse disentuh)

woke, bkin doku baru ukuran sesuaiin ma tombol yang lu pake

gw pake shapping dengan radius 10 px.

kasi sdkit style gradasi, stroke, ama outer glow.

woke, karena judulna glassy, gw kasiin efek glass di top header button na. salah satu cara na, make layer mask.

bikin satu shape lagi, tempat kan di atas layer sblumna. kali ini ukurana lebih kecil dari sebelumna

klik pada ikon add layer mask

akan muncul tanda mask di sebelah layer na:

baru dah lu pencet tombol D (bwat nge-reset color palet na mnjadi hitam putih)

woke, lanjut ke tool gradasi, tarik dah gradasi na pada layer mask tadi.

jadi ke gini dah hasil glassy na:

hmm.... bikin juga satu objek baru lagi untuk button overlay na

==============================

uhuiiii... naaah skarang kita bikin CSS code na...

pertama bwat doku HTML baru .... namana button.html

antara tag BODY kasi code html bwat button na:

<input type="submit" name="Submit" value="Button" />

tag code diatas akan menampilkan tombol default pada browser.

kedua bikin fiel CSS na, nama na style-button.css

kasi code CSS ke gini:

#buttonGw { width:95px; height:45px;
background:url(css-glassy-button.png); border:none; color:#FFFFFF;
size:12px; font-weight:bold; cursor:hand; }

#buttonGwOver { width:95px; height:45px;
background:url(css-glassy-button-over.png); border:none; color:#000000;
size:12px; font-weight:bold; cursor:hand; }

woke tinggal lu link kan style CSS na, kasi code HTML dibawah ini, antara tag head.

terakhir edit HTML code tombol lu.

<input type="button"
id="buttonGw" onMouseOver="this.id='buttonGwOver';"
onMouseOut="this.id='buttonGw';" name="Submit" value="Button" />

tes dah, file button.html lu.. hehheeek bijimane...kikikkkkk moga sukses...cobain yak.. :D

download packet tutorial data

Sumber dari situs Ilmu Website dalam kategori photoshop dengan judul CSS Glassy Button

Read More......