■ベクトル形式のドロー系ソフト
アドビイラストレーターのような感じのフリーソフトですが、機能的には一般的に使うのであれば問題く比較的簡単に扱えるソフトです。
ドロー系ソフトだから拡大縮小しても画像がビットマップ系と違い劣化する事がありません。
またファイル形式(SVG)もGIMPで読み込みが出来ますのでセットで使う事をおすすめします。
図.1画像はこのホームページを作成する際、全体的なレイアウトをIncscapeで作成しGIMPで読み込み個々にパーツを加工しStyleNoteで作成しました。
※ GIMPについてはGIMP解説をお読みください。
※ StyleNoteについてはStyleNote解説をお読みください。

■ダウンロード
窓の杜：Inkscape

ダウンロードが完了したら、インストーラを起動する。
起動後は指示に従いインストールを行う。

■起動
Inkscapeを起動しファイル（F)より新規（N）からdesktop_1024ｘ768を選択（用途による）すると新しい作業画面が表示されます。
1を押すと作業画面が1：１になり作業がし易くなります。

■背景に合わせたボタン（オブジェクト）の作成
【透過色無】
1.）背景となる下地の作成、作成したボタンを配置（HP）する背景を予め決めておく（今回、下地は白）

2.）左端のツールバーから矩形ツール（またはF4）を選びクリックし適当な大きさにドラッグ、desktop_1024ｘ768ですが今回矩形800ｘ600くらい背景（下地）作成します。
サイズはツールバー上部に表示されますので横・縦（800ｘ600）を調整
下地の背景色は最下段カラービッカーより白を選択

3.）下地の800ｘ600内でお好みボタンを作成します。 作業領域サイズが1：1で原寸ですので矩形ツールで始点を決めドラッグし、お好みのサイズにします。
（ここでは最終的に234ｘ40 pxのボタンを作成します。） 右端に丸いアンカーが出ます。そのアンカーを調節する事により四隅に丸みが付けられます。
（色が無色で分かり難い場合はカラービッカーから取り合えず分かり易い色に変えてみる。）

4.）ボタンにグラデーションやボーダーを作成する。
作成したボタン（オブジェクト）を右クリックしフィル/ストローク（F)を選択すると右端にダイアログが開きます。

フィル／ストローク
フィルはボーダーを除いた全体の指定、フィル内線形グラデーションアイコンをクリックするとボタンがグラデーション化されアンカーが表示されます。
四角のアンカーは始点、始点をクリックする事により始点色を選択できます。丸アンカーは角度と長さ調整、丸アンカーをクリックする事で終点色を選択できます。グラデーションの配置はアンカーを始点と終点をドラッグして位置を決めお好みに調整します。
お好みのグラデーションが作成できたら次にボーダーを調整します。
ストロークのスタイルで幅を調整し（0.無し〜幅の指定）ボーダーの幅を決めます
ボーダーはストロークの塗りで色の選択をしボーダー色を決めます。
5.）最後にボタンサイズを指定します。
選択ツールでボタンを選択、上段ツールバー内、幅／高さを234ｘ40と指定
お好みのボタンが出来たらファイル（F)よりビットマップにエクスポート（E)で保存できます。
保存はPNG形式で保存されます。
参照をクリック任意のフォルダへボタン名(拡張子不要）を入れエクスポート（E)で保存

作成サンプル：


※下地を使わないで作成保存したボタンの場合は透過されていてくすんで見えますので画像を統合しなければなりません。
※下地を使わないでドキュメントの設定で背景を指定して利用する。
ファイル（F)からドキュメントの設定（D)でダイアログが表示されるので背景（G)の色の部分をクリック（デフォルト：透過・白）すると背景色のダイアログが開きますのでそこで背景色を指定すれば下地無しでも同じ結果が得られます。
※上記手順でホームページの全体をイメージして図.1のように作成してみましょう。