グラフィックパーツ

inkscapeで「次へ」「前へ」「トップへ」のアイコン画像の作成をしてみた

今まで「ページトップへ」のようなテキストリンクでページ内リンクを作成していましたが、やはりアイコンのようなリンク画像を作ってページ上に配置したほうが綺麗に見えるかなと思い、アイコン画像を作成してみました。

作りたかったアイコンはとてもシンプルなもので、「次の記事へ」「前の記事へ」「ページトップへ」をわかりやすく表現できるものです。

特にこれといったテクニックもいらない簡単なものになりました。

基本図形を作る

基本図形は長方形と円と三角形です。

1つずつ作ってから後で微調整しながら重ねて1つのアイコンにするので、まずは全てのパーツを大きさを気にせずに作ってしまいます。

一番最初は土台になる円をつくります。

円は円ツールを使うことで出来てしまうのでそんなに難しくありません。

画面左のツールの中から円ツール(円のマーク)を選択してドラッグアンドドロップで適当な円を描きます。
entry2_01

楕円になってしまっている場合は選択ツールで円を選択してから上部のツールバーを使って幅と高さを同じにしてやれば正円にすることができます。
entry2_02

続いて長方形と三角形を作ります。

長方形は矩形(くけい)ツールを使います。

矩形というのは長方形の意味ですのであまり気にしないように!

長方形は画面左の矩形ツール(四角形マーク)を選択してドラッグアンドドロップ、これだけで描けます。
entry2_03

三角形は星形ツールを使いますがこれが少し面倒です。

画面左の星形ツール(星と多角形のマーク)を選択して上部に表示されているツールバーで五角形マークを選択し、角を3にすれば三角形を描くことができます。

普通に星形ツールを使うと三角形の向きが綺麗に水平にならないので、[Ctrl]キーを押しながらドラッグアンドドロップで水平になるように三角形を描きます。
entry2_04

星形ツールでは[Ctrl]を押しながらという動作を角度のスナップと言って、15度ずつ角度を変更しながら作図できます。

全て出来上がったら選択ツールで図形を選択して円の上に重ねて暫定的なレイアウトを決めておきます。
entry2_05

色の変更

色の変更は画面左下のフィルストロークをクリックすれば画面が開きます。

フィルは塗りつぶし、ストロークは輪郭線のことです。

フィル/ストロークのショートカットキーは[Shift + Ctrl + F]

画面が立ち上がったら、選択ツール(画面左の矢印マーク)を使って色を変えたい図形を選びます。

フィル/ストロークのウィンドウ内のタブのフィルをクリックして塗りつぶしの色を編集します。

基本のRGB系の編集で問題ないでしょう。

RGB系では全てが0のとき黒、全てが255のとき白となります。

今回は三角形と長方形を白にしてアイコンを作成します。
entry2_06

最後に色の濃さ(透過度)を指定します。

透過度はRGBの配色のしたにある市松模様のバーで指定します。

今回は真っ白にするのが目的なので、255にして透過度を0にします。

これで準備は完了です。

アイコンの整形

最後の整形は選択ツールの座標入力と幅と高さの入力で行います。

前提としてアイコンの大きさを100px×100pxで作ることにします。

まずは一番外側になる円を選択して、上部のツールバーで幅を100px、高さを100pxにしてから、なんとなくでいいので長方形と三角形を完成形の大きさと位置に合わせます。

次に選択ツールでドラッグアンドドロップして図形全体を選択して、上部のツールバーでx,yの座標の欄に0を入力します。
entry2_07

あとは三角形と長方形の大きさと位置を上部のツールバーで決めれば完成です。

私の場合は
三角形の大きさが64px×64px、座標が(x,y)=(18,18)
長方形の大きさが64px×5px、座標が(x,y)=(18,82)
となりました。
entry2_08

三角形の大きさを縦横同じピクセル数に決めると、円の中心に配置するための座標が決まるので、そこから長方形の大きさと座標を決めればきれいなアイコン画像になります。

png画像へ出力

サイトでアイコンとして使用するには画像として保存しなければならないので、png形式の画像として出力します。

はじめに選択ツールを使って画像として出力したい図形をドラッグアンドドロップで全て囲みます。

次に画面左上の[ファイル]→[ビットマップにエクスポート]を選択して、保存先を選択し、エクスポートボタンを押せば画像ファイルの出来上がりです。
entry2_09
entry2_10

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

関連記事

  1. グラフィックパーツ

    inkscapeのタイルクローンでマスキングテープを張り合わせたパターンを作るチュートリアル

    パステルカラーのマスキングテープを張り合わせたようなパターンを作成した…

  2. グラフィックパーツ

    Inkscapeのシェイプとパス編集でいろんな「吹き出し」を作ってみた

    多角形や星型をノードツールで変形させることでいろいろな吹き出しを作るこ…

  3. グラフィックパーツ

    inkscapeでパターン素材を作るチュートリアル

    inkscapeを使うと簡単にパターン素材を作ることができます。い…

  4. グラフィックパーツ

    inkscapeで取り込んだJPGやPNG画像をトリミングをする方法

    inkscapeでフライヤーや店舗のメニューを作りたいと思ったらトリミ…

  5. グラフィックパーツ

    手作業は最小限で!inkscapeで「カラフルなドットパターン」の作り方【SVG/PNGサンプルあり…

    「ドットパターンを作る」って聞いて、難しく感じる人が多いような気がする…

  6. グラフィックパーツ

    Inkscapeで配色用のカラーパレットを簡単に作る方法

    配色用のカラーパレットをInkscapeの内部機能で作る方法を紹介しま…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

スポンサードリンク

スポンサードリンク

カテゴリー

ピックアップ記事

関連コンテンツ

WordPressテーマ「MAG(TCD036)」   ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche  
  1. 特集

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  2. グラフィックデザイン

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使…
  3. ブログやサイトの作り方

    TCDテーマ比較「CUBEY」と「BlogPress」どっちがいい?
  4. ブログの収益化

    報酬の受取に苦労してません?初心者でもAmazon・楽天のアフィリエイトで効率的…
  5. ブログやサイトの作り方

    月額100円から使える「ロリポップレンタルサーバー」
PAGE TOP