[Contoh] Cara Menentukan Font pada Watermark Gambar dengan PHP

Pada contoh lalu, watermark adalah merupakan suatu tulisan timpa pada gambar, yang biasanya digunakan untuk memberi teks sebuah image gambar jpeg/png/gif sebagai keterangan atau sebagai proteksi. Penimpaan gambar akan menggabungkan tulisan dan gambar pada satu gambar image. Pada contoh lalu telah terdapat satu model watermark untuk toko online, dimana terdapat satu gambar kaos yang diberi tulisan di depannya. Kali ini kita ingin memperindah tulisan tersebut dengan font yang bervariasi. Variasi juga dapat meliputi pembentukan shadow atau bayangan. Bagaimanakah caranya? Perhatikan gambar berikut.

Gambar ini dibentuk dengan pembentukan gambar dengan watermark dilengkapi dengan fasilitas pengatur font dan sudut font. Jika pada contoh lalu kita gunakan :

 

imagestring( $o_gambar, 5, 80, 80, "Stok Ada", $color1 );

Maka sekarang akan digantikan dengan

imagettftext( $o_gambar, $ukuran_font, $sudut_miring, $pixel_start_kiri, $pixel_start_atas, $warna, $jenis_font, $text );

Sedangkan shadow, atau bayangan diambil dengan cara membuat tulisan serupa dengan warna yang berbeda, dan diberikan selisih pixel_start_kiri dan pixel_start_atas nya.


imagettftext($o_gambar, 16, 30, 51, 151, $color1, $font, $text);
imagettftext($o_gambar, 16, 30, 50, 150, $color2, $font, $text);

Sudut dapat diatur sesuai derajatnya. Silakan mencoba mengganti angka 30 tersebut menjadi angka sudut yang anda suka. Misal tulisan tegak, maka silakan mengganti dengan angka 90 dengan konsekuensi mengubah start pixelnya.

Dengan $jenis_font diambilkan dari file TTF yang anda miliki. File TTF adalah file master dari sebuah font. Misal dalam kasus ini saya ambil Arial. Maka source code pembentuk gambar akan menjadi seperti berikut:


Bisakah membuat tulisan di bawahnya lagi? Tentu saja bisa. Hanya dengan membuat sebuah tulisan, dan mengatur start pixel atasnya, maka akan terbentuk satu tulisan lagi, sesuai dengan pixelnya. Mudah bukan? Selamat mencoba semoga sukses, dan semoga artikel ini bermanfaat.

[Tips] Menambahkan Font dalam Proses Pembuatan Web

Font, dalam dunia IT ternyata menjadi sangat penting. Pemilihan font atau jenis huruf, dipandang dapat mempengaruhi pembaca, dan dapat menunjukkan karakter pemilik font. Alangkah baiknya jika sebuah perusahaan memiliki font sendiri, dengan demikian karakter dari perusahaan atau komunitas dan lain sebagainya, dapat dibaca dari corak font yang digunakannya.

Pembuatan proposal, laporan dan lain-lain, ternyata membutuhkan perhatian juga pada Font. Beberapa teman dari kalangan Institut seni kadang malah menelaah tentang font tersebut kadang memang justru bisa berpengaruh pada kelelahan mata, pada sikap dan lain sebagainya.

Dalam dunia web, dalam web profil misalnya, Font akan menjadi penting bagi pembentukan image karakter perusahaan tersebut. Sayangnya, font yang ada dalam dunia web ini secara standard cukup terbatas. Biasanya sekitar Sans Serif, Tahoma, Arial, Verdana, Helvetica, Times, Trebuchet MS dan lain-lain.

Kadang boleh jadi kita akan menambahkan font seperti ini :

Selamat Datang

namun sayangnya font yang digunakan terbatas. Maka kita bisa menentukan sendiri font tersebut. Bagaimana caranya?

  1. Carilah font yang anda suka di internet, dalam bentuk .ttf, misal saya mengambil dari http://www.fontspace.com/category/old%20english, download dan extractlah
  2. Simpanlah dalam direktori font dalam aplikasi web anda, misal {direktori_utama}/themes/namathemes/font
  3. Bukalah CSS anda, dan masukkan kode seperti berikut dibawah
    @font-face {    font-family: 'NamaFontTerserah';    src: url('fonts/namafilefont.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
  4. Anda dapat meload font tersebut baik dalam elemen langsung html seperti :
    INI MENCOBA

    atau

    INI MENCOBA

    dengan isi CSS

    #fontcoba{
    font-family:NamaFontTerserah;
    }
    

 

Sebagai contoh, saya dari situs http://www.fontspace.com/category/old%20english font-font berikut :

  • Salterio Shadow
  • Cloister Black
  • KingThings Spike
  • KingThings Spikeless
  • Faith Collapsing

Saya edit css saya dengan menambahkan:

@font-face {    font-family: 'SalterioShadow';    src: url('fonts/salterio_shadow.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

@font-face {    font-family: 'CloisterBlack';    src: url('fonts/cloister_black.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'KingThingSpike';    src: url('fonts/kingthings_spike.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'KingThingSpikeless';    src: url('fonts/kingthings_spikeless.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'FaithCollapsing';    src: url('fonts/faith_collapsing.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

 

Dan selanjutnya disini saya buat :

Cloister Black

KingThing Spike

Salterio Shadow

KingThing SpikeLess

Faith Collapsing

Hasilnya adalah seperti berikut:

Cloister Black

KingThing Spike

Salterio Shadow

KingThing SpikeLess

Faith Collapsing

 

Artikel ini untuk para pemula seperti saya. Semoga bermanfaat.