スポンサーサイト

2013.05.01 Wednesday | -

一定期間更新がないため広告を表示しています

  • -
  • -

gimp skill -角丸の作り方 ボックス要素の四隅を切り取ったweb素材の作り方-

2010.02.03 Wednesday | picture


1.まず作る各隅の大きさを決める
  Webでブロックを角丸表現したい場合、各角に角丸の画像を割り当てると思います
  この1つの隅の大きさをあらかじめ決めて作らないと、Webで触るときに綺麗に配置されません
  今回は1つの隅を15(px)×15(px)にしたい場合で作成していきます


2.gimpを起動し、「ファイル」から「新しい画像を作成」
  幅と高さを30(ピクセル)にします(1つの隅2つ分の大きさです)

  


3.「表示」から「グリッドを表示」と「グリッドにスナップ」をONにする
  ビューに3×3の線が入ったと思います




4.ツールボックスから「楕円選択」を選択し、ビュー全体を覆うように円を選択
  グリッドにスナップされるので、比較的簡単です(左上から選択すると楽)




5.塗りす潰しルールを選択して、好きなカラーで選択範囲を塗りつぶします




6.「画像(T)」から「キャンバスサイズ」の変更
  幅、高さを15ピクセルにして「サイズ変更」します
  綺麗に4分1に分割された円が表示されるはずです




7.この画像を保存します。gifで保存するのが一般的なようです。
  保存したら、残り3つのパーツも保存していきます。


8.ツールバーから「移動」を選択してレイヤーを左に移動します
  グリッドにスナップされているので、ほぼズレることがありません
  これを保存して、他の2つも同様に作業していけば完成です。



  
【おまけ】
今回レイヤーを1つで、背景ありの白でおこなっています
これを透明レイヤーで作っていき、最終的に作成される画像の円以外を透明にすることも可能
ただし、透明にした場合Webでボックスの角に割り当てたとき、
画像が後ろに回り込んでしまうため設定が面倒になります。注意。









スポンサーサイト

2013.05.01 Wednesday | -

  • Check
  • このエントリーをはてなブックマークに追加
  • -
  • -

コメント

コメントする








この記事のトラックバックURL

Advertisement

Popular

本当は怖いポケモンの実態
ポケモンの怖い話・裏話・都市伝説 Part15
ポケモンの怖い話・裏話・都市伝説 Part14
ポケモンの怖い話・裏話・都市伝説 Part13
ポケモンの怖い話・裏話・都市伝説 Part12
ポケモンの怖い話・裏話・都市伝説 Part11
ポケモンの怖い話・裏話・都市伝説 Part10
ポケモンの怖い話・裏話・都市伝説 Part9
ポケモンの怖い話・裏話・都市伝説 Part8
ポケモンの怖い話・裏話・都市伝説 Part7
ポケモンの怖い話・裏話・都市伝説 Part6
ポケモンの怖い話・裏話・都市伝説 Part5
ポケモンの怖い話・裏話・都市伝説 Part4
ポケモンの怖い話・裏話・都市伝説 Part3
ポケモンの怖い話・裏話・都市伝説 Part2
ポケモンの怖い話・裏話・都市伝説 Part1
ポケモンに纏わる都市伝説・噂
全ポケモン通常・色違い一覧表
ポケモングレー?とポケモンルビーサファイアのリメイクの発売日はどうなるか?
リアルすぎて怖いポケモン画像が話題に
一度見たら忘れない!ポケモン画像スレ
ゲノセクト【Genosect】が海外で話題
スクウェア版の○○が開発されるスレ
私の名はメーテル…IS03を買ってしまった女