当ブログについて問い合わせカワハラの、雑多な記録。>シリウス不要!Inkscapeでアフィリエイト用ボタンを自由自在に作成する方法2016/07/06このブログでは今まで、アフィリエイト関連のことはあまり書いてきませんでしたが、今回はアフィリ関連のネタをひとつ。シリウスで作るみたいなボタン素材を自由自在に簡単に作る方法です。無料という言葉はどんな時でも魅力的です。アフィリエイトサイトを見てると、商品へのリンクなんかに大きくて目立つボタンがよくあります。なんだかプロっぽいキレイなボタンだと、つい押したくなっちゃいますよね。そんなアフィリエイトサイトにつきもののボタン素材。ボタン素材なんて、検索すればいくらでも出てきます。サイズが大きければ...とか、色がちょっと気に入らない...とか自分が気にいるものがあるとは限りませんよね。全て自分でコントロールして、思い通りのボタンを作りたい!そんな人向けの記事です。こんなボタンが作れます。他にもこんなボタンがつくれるあらかじめ何パターンか作っておくと良いボタン以外にも色々使えるInkscapeの使い方で参考になるサイトまとめこんなボタンが作れます。思った通りのボタンを作成可能。ちなみにこれがシリウスで作ったボタンです。ほとんどおなじ!無料ソフトInkscapeを使う無料で使えるオープンソースのベクトル系画像ソフト、Inkscapeを使用します。私はなんでだか分かりませんが、「オープンソース」と聞くとなんだか胸が踊ります。画像ソフトで「Illustrator(イラストレーター)」って有名なので聞いたことあるかと思います。イラストレーターはお値段が10万前後していて、現在は月額いくらというライセンスで使用する感じになっていて、仕事で使わない素人にはなかなか手を出しづらいソフトウェア。Inkscapeはイラストレーターと同じようなことが無料で出来ると思ってください。イラストレーターに慣れている人は、最初は操作や挙動の違いに戸惑いますが、慣れれば使いやすいです。ボタンの作成手順さっきのボタンをInkscapeで作成する手順を説明しようと思い、手順ごとにスクリーンキャプチャを撮りました。そこまでは良かったんですが、そこからが非常に面倒くさい。何がめんどくさいって、説明するために画像を加工したりするのが。今は気力が沸かないので、説明画像を加工せずにちょっと解りにくい状態で公開します。気力が湧いてきたら、もうちょっと分かりやすいように、矢印付けたり加工したいと思います。矩形ツールで矢印を書きます。矩形ツールは左のツールバーから四角のアイコンをクリックするか、F4キーを押します。適当に「50」と入力。この数値は四角の角を丸める半径です。大きくすると丸みが大きくなり、0にすると完全な四角になります。後からでも変更できます。Fを押すと「フィル/ストローク」のウィンドウが右に出てきます。上部のメニューの「オブジェクト」→「フィル/ストローク(F)」を選んでもOKです。オブジェクトの縁の線の太さとかの設定オブジェクトとは、さっき作った四角のことです。「フィル」のタブで、「単一色」の塗りつぶしを選びその下のカラフルなやつ(カラーピッカー)で好きな色を選びます。「ストロークの塗り」タブでは、「×」のマークを選んで縁取りはなしにします。左のツールバーの「選択ツール」(矢印のマーク)を選びます。青い四角が選択されている状態では、四角が点線の枠で囲まれて8個の矢印が周囲に表示されているはずです。これが出ていない場合は、四角をクリックすると出てきます。上のプロパティに「幅」、「高さ」とありますが、これは選択しているオブジェクト(四角形)のサイズです。最終的に欲しいサイズを入れましょう。今回は幅500、高さ200と入れました。サイズを入力すると、四角形の大きさが変わったのが分かるかと思います。次はボタンの中の光の反射の表現を作ります。矩形ツールでこんな感じで角の丸い四角を描きます。分かりやすいように色を変えてますが、そのまま矩形ツールで四角を描いたら、さっきと同じ色の青で描かれるかと思います。大きい四角にマッチするように、角の半径を調整したりします。新しく描いた四角にグラデーションを掛けます。ツールバーからグラデーションツールを選び、新しく描いた四角の上から下へドラッグします。四角をクリックして色を白にして不透明度を80%に、丸をクリックして色を白にして不透明度を20%にすると下の図のような感じになります。D」このショートカットキーは、選択したオブジェクトを同じ位置にコピー&ペーストします。四角の周りの矢印を操作し、ちょっと大きくし、「End」キーで最背面に移動。矢印をさらに調整するとこんな感じになります。D」でさっきの四角をコピーしてカーソルキーの右と下を押しちょっとずらす。「ストロークの塗り」を塗りなしにし、フィルを黒に。「End」で最背面に飛ばすと、影になりました。テキストツールで適当な位置をクリックし、好きな文字を入れる。選択ツールで青四角とテキストを選択。A」で「整列と配置」のウィンドウが開きます。「基準」で「最大オブジェクト」を選択。「中心を垂直軸に合わせる」、「水平軸の中心に揃える」をクリックすると、テキストがボタンの中心に移動します。「フィル/ストローク」で文字の色を白に。ボタンをすべて選択します。E」で「PNG画像にエクスポート」のウィンドウが開きます。「エクスポート領域」を「選択範囲」に。「エクスポート先」をクリックしてボタンの画像ファイルを保存する場所を選びます。Windowsの一般的なソフトに慣れている場合勘違いしてしまうんですが、ここで保存場所を選んだだけでは、画像として保存されていません。下の「エクスポート」ボタンを押すとやっと保存されます。あとは、この画像を使用してブログなりhtmlサイトなりに貼り付け、リンクを設定するだけです。他にもこんなボタンがつくれるもっと四角いボタンとか書体の変更も自由自在。(PCにフォントが入っていれば)LINEっぽいボタンも簡単に作れます。使い道なさそうだけど。何パターンか作っておくと良い作成の手順が結構多いですが、慣れたら簡単です。毎回こんなの作ってられませんよね。幅を増やしたい、減らしたいと言う時にも柔軟に対応できます。ボタンごとに別ファイルに分けるより、1つのファイルに複数種類をまとめておいたほうが使いやすいです。ボタンを作るときに、「どれにしようかなー」と見ながら選ぶことが出来ます。一応Inkscapeの元データをおいておきます。ボタン以外にも色々使える例えば、前の記事に使ったこんな画像。これもInkscapeを使えば簡単に作れます。元の画像を大きくして、不要な部分をクリップ(透明に)して、赤い線や矢印を書き足しているんですが、Photoshopとかで加工するよりも、個人的にはやりやすいです。他にもこんな図とかも、Inkscapeを使えば簡単に作れます。した図を作りたい時にも、すごく便利。Inkscapeの使い方で参考になるサイトInkscapeでDesignこのサイトでは旧バージョンの説明となりますが、最新バージョンでも基本的な使い方は同じなので参考になります。とステップアップしていきます。何も分からない状態でも基本編から読めば使えるようになるので、スムーズです。まとめInkscapeをいじくっているときは楽しいですし、素晴らしいソフトです。一つ確実に言えることがあります。アフィリエイターとして稼ぎたければ、ちまちまとボタンを作っている暇があったら記事を書いた方がいい。この記事の存在意義を真っ向から否定するようですが、すごいできの良いボタンが出来ても、それで売上が大幅に上がるわけでもないですしね。ある程度見栄えのいいボタンがあれば、それで良いんです。シリウスみたいに素早くサイトを作成することにフォーカスしたソフトが有効な場合もある、という訳です。デザイン等の細かいことを考えずに、さっさとサイトを作って成果を上げたい人はシリウスを買うべきでしょう。コメントをキャンセルメールアドレスが公開されることはありません。POSTピーターパンを改めて読んだら、思いのほかハードな内容で怖かった年長の次男(6歳)が、幼稚園の発表会でピーターパンの劇をする事になりました。強力で無料で使えるソフト「Inkscape」。中高年おっさんのバイク選び。RSSWordPress.org問い合わせこのブログの管理者へ問い合わせシリウス不要!Inkscapeでアフィリエイト用ボタンを自由自在に作成する方法カワハラの、雑多な記録。