GIMP : 漫画の吹き出しを作成するスクリプトを利用する

  GIMP 環境



GIMP Portable | PortableApps.com - Portable software for USB drives

▼ 漫画の吹き出し (オリジナル)
http://linsovet.org.ua/files/balloon-v3.scm

▼ UTF-8N で保存
  
; balloon 
; creates a balloon like in comics
; it sucks a bit ;-)
; (C) Copyright 2000 by Michael Spunt <t0mcat@gmx.de>
; Gopal.V hacked it in 2002 to make it suck less (Aqua'ish)
; but cut a few corners (literally)
;
; ramok hacked it in 2006 to make colors

(define (round-balloon-3 img drawable bw bh lw rect np orientation revert fill border)
  (let* ((x 0))
    (if (= np FALSE) 
      (begin
        (set! x (- (* bw 0.5) (* bw 0.2)))
        (gimp-ellipse-select img x (* bh 0.5) (* bw 0.4) (* bh 0.4) REPLACE TRUE FALSE 0)
        (set! x (- (* bw 0.5) (* bw 0.2) (* bw orientation -0.1)))
        (gimp-ellipse-select img x (* bh 0.5) (* bw 0.4) (* bh 0.4) SUB TRUE FALSE 0)))
    (if (= revert FALSE) 
      (gimp-selection-translate img (* bw orientation 0.3) 0))
    (if (= rect FALSE) 
      (gimp-ellipse-select img (* bw 0.1) (* bh 0.1) (* bw 0.8) (* bh 0.65) ADD TRUE FALSE 0))
    (if (= rect TRUE) 
      (gimp-rect-select img (* bw 0.1) (* bh 0.1) (* bw 0.8) (* bh 0.65) ADD TRUE FALSE 0))
    (gimp-palette-set-background fill)
    (gimp-palette-set-foreground border) 
    (gimp-edit-fill drawable 0)
    (gimp-selection-shrink img lw)
    (gimp-edit-fill drawable 1)
;    (gimp-selection-none img)
;    (plug-in-gauss-rle2 1 img drawable 5.0 5.0)
;    (plug-in-bump-map 1 img drawable drawable 135 14 4 0 0 74 182 1 0 1)
))

(define (round-think-balloon-3 img drawable bw bh lw rect np orientation revert fill border)
  (let* ((x 0))
    (if (= np FALSE) 
      (begin
        (set! x (+ (* bw 0.5) (* bw -0.025) (* bw orientation 0.3)))
        (gimp-ellipse-select img x (* bh 0.85) (* bw 0.05) (* bh 0.05) REPLACE TRUE FALSE 0)
        (set! x (+ (* bw 0.5) (* bw -0.05) (* bw orientation 0.2)))
        (gimp-ellipse-select img x (* bh 0.75) (* bw 0.1) (* bh 0.1) ADD TRUE FALSE 0)))
    (if (= revert TRUE) 
      (gimp-selection-translate img (* orientation bw -0.3) 0))
    (if (= rect FALSE) 
      (gimp-ellipse-select img (* bw 0.1) (* bh 0.1) (* bw 0.8) (* bh 0.65) ADD TRUE FALSE 0))
    (if (= rect TRUE) 
      (gimp-rect-select img (* bw 0.1) (* bh 0.1) (* bw 0.8) (* bh 0.625) ADD TRUE FALSE 0))
    (gimp-palette-set-background fill)
    (gimp-palette-set-foreground border) 
    (gimp-edit-fill drawable 0)
    (gimp-selection-shrink img lw)
    (gimp-edit-fill drawable 1)
;    (gimp-selection-none img)
;    (plug-in-gauss-rle2 1 img drawable 5.0 5.0)
;    (plug-in-bump-map 1 img drawable drawable 135 14 4 0 0 74 182 1 0 1)
))

(define (script-fu-balloon-3 bw bh lw rect np think right revert fill border)
  (let* (
         (orientation 1)
         (side 1)
         (img (car (gimp-image-new bw bh RGB)))
         (balloon (car (gimp-layer-new img bw bh RGBA-IMAGE "Balloon3" 100 NORMAL))))
    (if (= right FALSE) (set! orientation -1))
    (gimp-image-add-layer img balloon 1)
    (gimp-display-new img)
    (gimp-edit-clear balloon)
    (if (= think FALSE) 
      (round-balloon-3 img balloon bw bh lw rect np orientation revert fill border))
    (if (= think TRUE) 
      (round-think-balloon-3 img balloon bw bh lw rect np orientation revert fill border))
    (gimp-selection-none img)
    (gimp-displays-flush)))

(script-fu-register "script-fu-balloon-3"
     "Balloon3..."
     "Creates a balloon like used in comics."
     "Michael Spunt"
     "Copyright 2000, Michael Spunt"
     "May 20, 2000"
     ""
     SF-ADJUSTMENT _"Image width"  '(240 10 2000 1 10 0 1)
     SF-ADJUSTMENT _"Image height" '(160 10 1000 1 10 0 1)
     SF-ADJUSTMENT "Line width"	   '(2 0 10 1 10 0 1)
     SF-TOGGLE "四角形"            FALSE
     SF-TOGGLE "吹き出しなし"	   FALSE
     SF-TOGGLE "妄想"              FALSE
     SF-TOGGLE "クチの向き(右)"  FALSE
     SF-TOGGLE "位置の反転"        FALSE
     SF-COLOR  "Fill"	            '(255 255 255)
     SF-COLOR  "Border"	            '(22 22 22))

(script-fu-menu-register "script-fu-balloon-3"
     "<Toolbox>/Xtns/Script-Fu/Text"
)
  



balloon.scm を 以下のディレクトリに作成します

GIMPPortable\App\gimp\share\gimp\2.0\scripts

その後、「フィルタ」=>「Script-Fu」=>「スクリプトを再読み込み」を選択します
すると、「フィルタ」=>「Script-Fu」=>「Text」=>「Balloon3」 で実行できます




  WEB カメラ で 吹き出し効果のテスト





出来上がった画像は、上記のようになり、背景が透過されています。
この画像を背景透過効果のあるままの png に保存して、以下の URL でロードして表示してみて下さい



WEB カメ くらぶ


WEB カメラの映像部分を画像の透過部分を通して見る事ができています。
このオンラインツールでは、3D 平面にもできるので、試してみて下さい
( 3D 表示は、右上のマーカーを WEB カメラで表示します )

Gimp_26_fukidashi_dialog_shot

▼ 3D 表示( 左側は球体化したもの )
Gimp_26_fukidashi_dialog_shot2



  JavaScript で吹き出し効果

以下はアマゾンの画像ですが、吹き出しは GIMP で作った画像で、テキストは普通のテキストです。
3つの部品を合成したものです。( これは、自前のライブラリで、IE6 でも動作します。)



  
<script type="text/javascript" src="http://winofsql.jp/lightbox_ie6png.js"></script>
<div style='position:relative;padding:5px;width:600px;'>
<a
	href="http://www.amazon.co.jp/exec/obidos/ASIN/B001L1S1OY/ginpro-22"
	target="_blank"
><img src="http://ecx.images-amazon.com/images/I/51MnRqZt1pL.jpg"
 galleryimg="no"
 border="1"
 style='border-color:#000000'
/></a>

<script type="text/javascript">
var ar = {
	url: "http://winofsql.jp/image/fd01.png",
	width: 150,
	height: 100,
	x: 300,
	y: 220
}
lightbox_ie6png.load(ar);
var ar = {
	text: "<b style='font-size:12px'>私、かなり天然</b>",
	x: 330,
	y: 269
}
lightbox_ie6png.loadtext(ar);
</script>

</div>
  





  JavaScript ライブラリ ( lightbox_ie6png.js ) のダウンロード

そのまま使ってもらってもいいのですが、ダウンロードもできます


ブラウザでダウンロード










  infoboard   管理者用   
このエントリーをはてなブックマークに追加




SQLの窓  天気  IT用語辞典
Yahoo!ニュース  マルチ辞書
PHP マニュアル  Google URL短縮 


フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ