グラフィックデザイン

inkscapeで「冷えてます。」POPをつくってみたのでデータ配布します

ちょっと仕事で使うことになったので試しにPOP作成をinkscapeでやってみました。

なぜか、ExcelとかPowerPointでPOPを作る人とかもいるくらい、パソコンスキルが低い会社なので、こんな簡単なPOPでも結構好評でした。

そのままのデータがほしい方はこちらからどうぞ。

水が揺らめいているイメージの背景に、白抜き青枠の文字を加えて、全体的に清涼感のある雰囲気に作りました。

このPOPはinkcapeの操作が分かれば、3ステップくらいで簡単に作れます。

ここから作り方を説明していきますので、是非試してみてください。

POPサイズの設定とドキュメント設定

まず作成するPOPのサイズを決めます。

inkscapeを起動して、[Ctrl+Shift+D]をすると、ドキュメントのプロパティが表示されます。

a01_inkscape_ドキュメントのプロパティ

ここでPOPサイズを決めます。

今回はB5を横置きにした用紙サイズです。

他のサイズでもここで設定するだけでできるので、印刷環境や用紙サイズによってここを変えてください。

横置きの場合はサイズを選んだ右下にある「横」を選択してください。

画像作成が少しやりやすくなるので、下側にある「描画より前面に境界線を表示する」にチェックを入れておいてください。

背景の作成

今回のPOPデータは特殊な効果は使いませんが、編集の効率化のために、背景レイヤーと文字レイヤーを設定しておきます。

レイヤーの操作は[Shift+Ctrl+L]でレイヤーのダイアログを表示させて行います。

a02_inkscape_レイヤー設定

画面の用に背景レイヤーと文字レイヤーを作ります。

背景は背景レイヤーを選択してから作っていきます。

左側のツールバーから矩形ツールを選んで、背景のベース色を作ります。

b01_背景画像_矩形のベース

このベース色の上に水が揺らめいているイメージの線を追加していきます。

ペンツールをスピロパスモードにして線を書いていきます。

b02_背景画像_スピロパスモード

一番簡単に線を書く方法は、1本の線を作成してから、コピーペーストで何本も複製することです。

まず1本だけ線を作ります。

b02_背景画像_スピロパス_アウトラインと線

実際に描画されるのは黒いラインで、赤いラインはパスのアウトラインで実際には描画されません。

次にラインの太さと色を変更します。

太さの色の変更には[Shift+Ctrl+F]で、フィルストロークダイアログを表示します。

先にラインの太さを決めたほうが、色を変えたときの間隔がわかりやすいと思います。

ラインの太さは「ストロークのスタイル」タブをクリックして、B5サイズなら幅を10px、端を丸(真ん中)に設定すると、冒頭の完成例と同じ形になります。

b04_背景画像_スピロパス_フィルストローク設定1

次に線の色を「ストロークの塗り」タブから変更します。

基本は青系の淡い色に設定すると背景とのバランスが取れると思います。

b06_背景画像_スピロパス_ストローク設定完了

b05_背景画像_スピロパス_フィルストローク設定2

出来上がったラインの大きさと傾きを少し調整します。

選択ツールで選択した状態で、もう一度ラインをクリックすると傾きを変更できます。

b06_背景画像_スピロパス_雛形完成

これで雛形完成です。

複製して適当に並べていきます。

ラインを選択した状態で[Ctrl+C]でコピーして、配置したい箇所にマウスを移動して[Ctrl+V]で貼り付けていきます。

b06_背景画像_スピロパス_複製_完成

あとは細かな位置の微調整をすれば、背景画像は完成です。

文字を配置する

始めにレイヤーで作成した「文字」レイヤーを選択して、文字ツールを選択します。

先ほどのフィルストローク設定が残っていると表示がおかしくなるので、一旦、黒のフィルのみにします。

c01_文字配置_フィルストロークリセット1 c02_文字配置_フィルストロークリセット2

この状態で文字入力を開始します。

適当な場所でクリックするとテキスト入力ができるので、文字入力をします。

c03_文字配置_文字入力

大きさとフィルストロークを設定していきます。

まずは大きさをページサイズに合わせておきます。

文字ツールのまま、上のコントロールバーを使います。

c05_文字配置_文字_フォントサイズ変更

フォントサイズを144くらいに設定すると、このくらいのサイズになります。

c04_文字配置_文字_縦横維持_拡大

次にフィルストロークを設定して、完成となります。

フィルは白、ストロークは濃い青で設定すると、コントラストが効いて読みやすくなります。

c06_文字配置_文字_フィルストローク

ストローク幅は7pxに設定しています。

画像としてエクスポートする

出来上がったデータをページに合わせてPNG画像または、PDFファイルとして出力します。

おそらく、PDFファイルとしてファイルとして出力した方が、取り扱いが簡単ではないかと思います。

 

PDFエクスポート

エクスポートする場合は、[ファイル]から[名前をつけて保存]を選択します。

d02_inkscape_pdf保存

 

保存先を尋ねられるので、保存したいフォルダを選択して、お好きな名前を入力してください。

「ファイルの種類」を「portable document format(*.PDF)」に変更して、[保存]をクリックします。

このときPDFファイルの設定ウィンドウが開くのですが、そのままの状態で[OK]をクリックします。

d02_inkscape_pdf保存_pdf設定

出力したPDFファイルを開いて、文字の斜体が解除されていたりしたら、「テキストをパスに変換する」のところにチェックを入れてみてください。

PNG画像エクスポート

inkscapeでは一般的な画像ファイルへの出力はPNG画像のみで、JPEG画像に出力することはできません。

PNG出力するには[Shift+Ctrl+E]でエクスポートダイアログを開きます。

d01_inkscape_エクスポートダイアログ

エクスポート領域は「ページ」、画像サイズはそのままに、ファイル名のエクスポート先をクリックして保存先を選びます。

すべて終わったら、右下の[エクスポート]をクリックして出力完了です。

 

これで、inkscapeでの「冷えてます。」POP作成の一連の流れは終了です。

inkscapeは結構高機能なフリーソフトなのですが、あまり日の目を見ないようで少し残念です。

これを機にユーザーが増えて、adobe製品に並ぶようなソフトになる日を待ち望んでいます。

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

tipLog

関連記事

  1. グラフィックデザイン

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使ってみて

    ブログやサイトのロゴを作るときって時間的・金銭的に結構なコストがかかり…

  2. グラフィックデザイン

    簡単にテキストレイアウトができるinkscapeの「テキストの流し込み」機能の使い方

    写真付きのパンフレットでよくあるテキストレイアウトには被写体を邪魔しな…

  3. グラフィックデザイン

    Inkscapeを使ったわかりやすいフローチャートの作り方

    プログラミングの分野でよく使われているフローチャートですが、最近は業務…

  4. グラフィックデザイン

    「とあるのロゴジェネレーター」を参考にinkscapeでロゴをリメイク

    「ロゴ作成の勉強ってどうやってすればいのー?」と、よく自分でも考え…

  5. グラフィックデザイン

    GIMPで秋の行楽・旅行バナーを作りました。

    秋の旅行をイメージしてGIMPでバナーを作成してみました。以下…

  6. グラフィックデザイン

    無料素材を集めてコラージュを作るチュートリアル

    デザインを独学で学ぶとき、何をすればいいかわからないということも多ので…

コメント

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

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

CAPTCHA


スポンサードリンク

スポンサードリンク

スポンサードリンク

カテゴリー

ピックアップ記事

関連コンテンツ

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

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  2. ブログやサイトの作り方

    TCDテーマ比較「CUBEY」と「BlogPress」どっちがいい?
  3. 特集

    inkscapeの使い方を集めたスキルアップのための日本語チュートリアル集
  4. ブログの収益化

    報酬の受取に苦労してません?初心者でもAmazon・楽天のアフィリエイトで効率的…
  5. グラフィックデザイン

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使…
PAGE TOP