![](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1213556289?w=200&h=200)
相変らずコメントフォームの送信ボタンを作ろうと考えているんですが、良さ気なものができません。
で、そうこうしている間に、今回は何故かメディアプレイヤーの操作ボタンに行き着いてしまいました。別にWindows Media Playerのボタンを再現しているわけではありません。なんとなく再生ボタンに行き着きました。
右の画像の様なものができます。
詳しくは以下の通りです。
今回の手順です。
以下、画像はクリックすると拡大表示します。
Step1.新規ファイル作成
GIMPを立ち上げ、新しいファイルを作成します。サイズは300×300ピクセル。
![](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1193867267)
(塗りつぶし)で背景を#000000(黒)で塗りつぶします。
Step2.輪郭の塗りつぶし
「レイヤー>新規レイヤー」で新しい透明なレイヤーを作成します。
以下の手順で、描画領域の中心を真円で選択します。
道具箱の
![](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1193867167)
(楕円選択)をクリックします。
Fixedにチェックを入れ「大きさ」を選択。サイズを「270×270」にします。
どこでも良いので適当に選択した後、道具箱の「Position」の値を両方「15」にしてEnterキーを押します。
![080615PlayerButton01.jpg](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1213556290?w=411&h=500)
![](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1193867267)
(塗りつぶし)を使って選択領域を#0000ffで塗りつぶします。
![080615PlayerButton02.jpg](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1213556291?w=300&h=300)
Step3.ぼかしたグラデーション
新しい透明なレイヤーを作成します。
「選択>境界をぼかす」で、ぼかす量を20にします。
![](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1193867268)
(グラデーション)をクリックし、下のように設定してグラデーションをかけます。
前景色: | #0000ff |
---|
背景色: | #00ffff |
---|
グラデーション: | 前景から背景(RGB) |
---|
形状: | 形状広がり(球面) |
---|
レイヤーダイアログでモードを「スクリーン」に設定します。
「選択>None(Ctrl+Shift+a)」で選択を解除します。
Step4.グラデーションフレア
新しい透明なレイヤーを作成します。
「フィルタ>光と影>グラデーションフレア」をクリック。
選択で「Distant Sun」を選択。
設定で中央の値をX、Y共に「100」に設定して「OK」クリック。
![080615PlayerButton04.jpg](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1213556293?w=450&h=500)
Step5.グラデーションフレアの変形
「色>色相-彩度」で彩度を-100にして「OK」クリック。
「フィルタ>歪み>Polar Coordinates(極座標)」で
「上側からマップ」のチェックを外し、「極座標へ」にチェックが入っていることを確認して「OK」クリック。
![080615PlayerButton06.jpg](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1213556327?w=400&h=249)
![](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1193867225)
(回転)をクリック。描画領域をクリックすると下のようなダイアログが開くので、Angleを「-150」にして「回転」をクリック。
![080615PlayerButton07.jpg](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1213556328?w=399&h=542)
![](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1193867222)
(移動)を使って、境界に沿うような位置へ移動させます。
![080615PlayerButton08.jpg](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1213556329?w=300&h=300)
レイヤーダイアログでレイヤーモードを「彩度」に設定します。
次に、このレイヤーを複製し、レイヤーモードを「除算」に設定します。
![080615PlayerButton09.jpg](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1213556330?w=420&h=500)
Step6.Gfigで再生マークを作成
以下の手順で再生マークを描きます。
下から二番目の、Step2で#0000ffに塗りつぶしたレイヤーを選択します。
「フィルタ>下塗り>Gfig」をクリック。
![](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1209256903)
(正多角形の作成)で、以下のように設定します。
角の数: | 3 |
---|
ストローク描画: | #ffffff(白) |
---|
塗りつぶし: | 色で塗りつぶす/#ffffff(白) |
---|
設定したら、再生ボタン風な三角を描きます。
大きさなどを調整して、気が済んだら「閉じる」をクリックします。
Gfigの使い方については「
Gfigの使い方概説」という記事がありますのでそちらも参照してください。
![080615PlayerButton10.jpg](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1213556351?w=400&h=333)
Step7.再生マークの装飾
「レイヤー>透明部分>選択領域をアルファチャンネル」で三角部分を選択します。
![](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1193867268)
(グラデーション)で以下のように設定します。
前景色: | #666666 |
---|
背景色: | #ffffff(白) |
---|
グラデーション | 前景から背景(RGB) |
---|
形状: | Linear(線形) |
---|
設定したら下の画像の矢印の向きにグラデーションをかけます。
![080615PlayerButton11.jpg](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1213556352?w=400&h=185)
新しい透明なレイヤーを作成し、このレイヤーの下に配置します。
「選択>選択領域の拡大」で5ピクセル領域を拡大します。
設定は先程と同じままで、逆方向からグラデーションをかけます。
「選択>None(Ctrl+Shift+a)」で選択を解除します。
「フィルタ>ぼかす>ガウシアンぼかし」でぼかし半径を7にします。
で、完成。
![080615PlayerButton13.jpg](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1213556354?w=300&h=300)
Step8.最後に
サイズを変更したい場合は
「画像>画像拡大縮小」で適当なサイズに変更したりして保存してください。
他にも、色を変えたり、模様を替えたり。…歪んでいるのは気にしない。
![080615PlayerButton14.jpg](http://blog.cnobi.jp/v1/blog/user/4d4434f1cd51bd008a449b05065fa3ae/1213556355?w=400&h=333)
いつも書いていますが、途中で使っている値は適当なので、いろいろ変更して、もっとマシなものに仕上げてみてください。
そんなこんなで、おしまい。
PR