jQuery BlendMode Eklentisi

Photoshop’ta baz? i?lemleri HTML5 ve Javascript yard?m?yla basit ?ekilde yapabilmemizi sa?layan bir eklentiden bahsedece?im. Photoshop’taki ad?yla ayn? ismi ta??yan eklentimiz BlendMode. jQuery eklentimiz de HTML5’in canvas özelli?ini kullanarak i?lemi gerçekle?tirmektedir. Photoshop’un Blend Mode özelli?iyle yapt???n?z çal??man?n bire bir ayn?s?n? bu eklenti sayesinde ç?kt? olarak alabilirsiniz.

Eklentimizin (Plugin) tan?t?m sayfas?: http://codewelt.com/blendmode

Yukar?da bulunan adresten ya da örnek kullan?m dosyalar?yla birlikte direkt ?u adresten eklentiyi indirebilirsiniz. Ayr?ca örnek kullan?ma ula?abilir ve demolar? inceleyebilirsiniz. Ben de eklentinin (plugin) sayfas?ndaki örnek resmi kullanaca??m. Daha rahat görebilmeniz için resmimizi hem Photoshop’ta hem de eklenti yard?m?yla ayn? i?leme tabii tutaca??m.

jQuery eklentimizi adresten indirdi?inizi varsay?yorum. ?imdi kullan?m?na bakal?m. Çok basit:

jQuery K?sm?nda:


$("#kaynakResim").blendmode({
 "mode" : "difference",
 "object" : "#FFFFFF"
 });

HTML k?sm?na geçmeden jQuery eklenti fonksiyonunun ald??? parametrelere göz atal?m.

mode (string): “normal”, “multiply”, “lighten”, “darken”, “lineardodge”, “linearburn”, “linearlight”, “vividlight”, “pinlight”, “hardmix”, “lightercolor”, “darkercolor”, “difference”, “screen”, “exclusion”, “overlay”, “softlight”, “hardlight”, “colordodge”, “colorburn”

object (image): Kulland???m?z tuval için bir taban renk seçimi yap?yoruz. Kullanaca??n?z rengin HEX kodunu kullanabilirsiniz. Ben örneklerimde “#FFFFFF” (beyaz) kulland?m. Bu parametrede yapaca??n?z renk de?i?ikliklerine göre resminizden alaca??n?z ç?kt? da de?i?mektedir.

HTML K?sm?nda:

<img id="kaynakResim" src="kaynakResim.png"/>

Elimizdeki örnek resmimizin Photoshop’ta “difference” modunda i?lenmi? hali:

blendmodeps

Bir de eklentimizle ayn? görüntüyü elde etmeye çal??al?m bakal?m:

Kaynak Kodu:


<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<title>jQuery BlendMode Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.blendmode.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#kaynakResim").blendmode({
'mode' : "difference",
'object' : "#FFFFFF"
});
});
</script>
</head>
<body>
<img id="kaynakResim" src="kaynakResim.png" width="450" height="431" alt="The source image for blending"/>
</body>
</html>

Ekran Ç?kt?s?:

blendmode-html5

Eklentinin (plugin) en büyük s?k?nt?s? sadece 3 taray?c?da sorunsuz çal???yor olmas?d?r. Firefox’ta çal??an eklentimiz Chrome’da hiç ç?kt? vermemektedir.

Destekleyen Taray?c?lar:

  • Firefox
  • Safari
  • Opera

Son Söz: Genel istatistiklere bakacak olursak ziyaretçilerin büyük ço?unlu?u (bazen %50 gibi ciddi oranlar? geçti?ini söyleyebilirim) Google Chrome kullanmakta oldu?undan dolay? genele hitap etmek istedi?iniz bir projede/çal??mada bir süre daha pek tercih etmemenizde fayda var derim. Onun haricinde ba?ar?l? ve eklenti çantan?zda bulundurman?z? tavsiye etti?im bir eklentidir.

Bu yazı Javascript / jQuery, Photoshop kategorisine gönderilmiş ve , , , , , , , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir