Tag Archive for Inkscape

Inkscape 用の画像ギャラリー!?OpenClipArt が凄い!


Photoshop や Illustrator 等に関する画像ギャラリーはあっちこっちで紹介されていますが、Inkscape 用のギャラリーはさすが少ないようですね。そんな中、ネット徘徊中に発見した「OpenClipArt」は圧巻です。

OpenClipArt

ホームページには、以下のような紹介文が掲載されています。

Openclipart is the largest collaboration community that create, share and remix cliparts. All cliparts are released to the Public Domain so they can be freely used in any project for free.

自由に利用可能と明記されています。ここで公開されているものは、著作権も放棄します、と明記されていますから本当に自由に利用することができそうです・・・こりゃ凄いな!

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

Inkscape で作成した画像を「透過PNG」ファイルで保存する方法


いや~苦労しました!Inkscape で作成した画像ファイル、背景がどうしても透明になってくれませんでした・・・透明にならないと背景色が微妙に変化しているような場合、背景色を合わせるのが大変ですからね。いろいろと調べましたが意外とヒットしなかった。

ということで最終的に「Inkscape@JP::リファレンス (基本的な操作 >> ファイルの操作)」に記載されていたので自分の忘備録として記録しておきます。

まずは画像を作成します(これは手順を省略します!)。

手順 1:メニューから「ファイル => ドキュメントの設定」
上記の手順で「ドキュメント設定」をクリックすると設定画面がポップアップしてます(下図参照)。

20111009_inkscape_doc

上記「ドキュメントの設定」画面の「背景」をクリックします。

手順 2:背景設定
「背景」をクリックすると下図のような設定画面がポップアップします。

20111009_inkscape_export

ここで、必ず透明度(alpha)が “0″ になっていることを確認します。上のポップアップ画面の一番下の「A」が透明度になります。ファイルを保存する時にこの透明度の設定が有効になります。

手順 3:画像をビットマップへエキスポート
上記の設定を確認して、作成した画像を全て選択してメニューから「ファイル => ピットマップへエキスポート」で完了します。これで、ビットマップといっても「透過PNG」ファイルになっていますからご安心を。

注意が必要なのは、Inkscape では、背景色しか透過することができません・・・即ち、画像の中に背景色と同色で透過したくても、その部分は簡単には透過できませんので。ドローイングの特徴から技術的に難しいらしいのですが、ここではそれを追及することは止めておきます。

いや~上記が解っただけでも大きな収穫です!

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

Inkscape でメタルなボタン(キーボードのつもり)を作成してみた!


公開されているチュートリアル「- Inkscaper ~Inkscapeの使い方~::メタルなボタン」を参考にしながら「メタルなボタン」を作成してみました。メタルということですが自分では PC のキーボードっぽく(したつもり)。自分ではかなり満足できるレベルで仕上がったような気がするのですが・・・全体的にちょっと色彩が暗過ぎたかな・・・とも思いますが始めてにしては上出来!(って、自分を慰めています)

さて、それはさておき、ここで勉強になったのは「Inkscape」の「パス:差分」という機能重なった部分だけを消すことができます。この機能、グラデーションと共に頻繁に使いそうな予感がします。特に、メタルなボタンを作成するときには必須のような気もしていますが。結局は「光と影」の関係をよく観察する必要がありそうですが。

自分では、メタルな、というよりも PC のキーボードに似せたつもりですが・・・如何でしょう!?

上記の他に、メタルなボタンとか WEB 2.0 風のボタンとか参考になる Inkscape のウェブページや投稿記事はリストしていこうと思います。

探してみれば、結構素晴らしい Know-How が公開されているな~ってびっくりしていますが・・・

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

Inkscape で WEB 2.0 風の反射する文字のロゴを作成してみた!


zerobase_logo_020ここ数週間、Inkscape に凝っていろいろと試しています。流石にプロフェッショナルのようなドローイングは期待していませんが素人なりに満足できるようになればな~なんて自分勝手な期待をしていますが、どこまで上達するのかは未知数です。

今日は、本ブログのタイトルを「ロゴ」なんて表現していますが、まずはちょっと昔に流行った「WEB 2.0 風」の反射するような文字を作成してみました。独自に作成できるはずもなく、「Inkscaper ~Inkscapeの使い方~::反射する文字」で解説されている通りの手順を追いました。

使用したフォントは、大好きな「Impact」というもの。サイズは 32px で。ちょっと自分なりに工夫したのは、反射している部分を大袈裟にすることなく小さくまとめました。グラデーションを掛けて「ぼかし」を入れ「透明度」を入れたところが自分なりの工夫です。

自分ではかなり満足しているのですが・・・どう見えているのでしょうね、皆様には・・・

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

Inkscape でよく利用するグラデーション機能を勉強する!


20111002_Grandation「Inkscape」で個人的に最も良く利用しそうな機能は何と言っても「グラデーション」かな、って思っています。ドロー系のソフトウェアであれば当たり前の機能だそうですが、素人の私にとっては最も簡単で感動する機能です(って、完全な自己満足ですが・・・)

「Inkscaper ~Inkscapeの使い方~::グラデーション」を参考に「Inkscape」を起動させて早速「グラデーション」を試して見ようと考えたのですが・・・いったいどれを操作すればいいの??だったい、最初にグラデーション用のアイコンがどこにあるのか不明・・・

すると・・・なるほど・・・「Inkscape」を起動して初期画面の左側に長~いアイコンが縦に並んだツールバーがある!何やら意味不明のアイコンが沢山ありますが、どうやら下か 2 番目!

まるで線を作成するようなアイコンなので迷ってしまったようです。点と点の間に線が引いてあるようなアイコン・・・これがグラデーション用のアイコンらしい。早速試してみると・・・

なるほど・・・最初にクリックするとグラデーションのスタートポイントを指定することができるんですね!最後のグラデーション終了のところでクリックする・・・グラデーションの向きを指定できるのは感動しました!

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

Inkscape で最も簡単なボタンを作成してみた!


【追記:2011年10月02日】
まっ、プロのウェブデザイナになる資質はありませんから、下記のような公開時の内容で十分に満足してはいるのですが・・・ただ、やっぱりもっと高いレベルを将来的には目指したいですよね!そこで、たかがボタン、されどボタンですからかなりこのボタンだけでもいろいろなことが勉強できそうです。

投稿記事「Stocker.jp / diary::[連載]Webデザイン入門(3:光とボタン)」は凄いですよ!ボタンを作成するために必要な考え方を説明されています。事例は、Photoshop ですが、十分に参考になります。

もう一つ、「すぐに忘れる脳みそのためのメモ::Inkscape でボタンを作成する」が私は好きです!Inkscape でここまでできるんだ!って、Inkscape を真剣に勉強したいな、と思わせるボタンです。

上記以外にも・・・参考になるサイトや投稿記事をリストしましょう。

【公開時、投稿記事】
Inkscape_S_010「Inkscaper ~Inkscapeの使い方~」というInkscape のチュートリアルに掲載されている「シンプルなボタン」を作成してみました!

サイズ指定や新規ページの作成方法とか基本のきは別ページに記載されていますので、私のような中途半端に知っている人向きのサイトでも言いましょうか・・・私には、かなり都合が良い!そして作成した「シンプルなボタン」を右に実物大で貼り付けてみました。プロの方々からすれば「こんなの誰でもできる!」なんて指摘しないで下さいね。苦労しました・・・

それでも良い感じ!私の自己満足ですけど。

簡単に手順をリストしておくと・・・

  1. 四角形ツールでボタンの形を作ります。色は、薄めのグレイにします。
  2. 次に、その四角形にグラデーションをかけます。上から下にむかって濃い色になるようにします。これでボタンの形が完成です。
  3. テキストツールでボタンの文字を入力します。
  4. ここでは「TOP」と入力しました。
  5. テキストのフォントを変更します。
  6. フォントを選択すると、下のプレビュー枠でプレビューされます。
  7. 気に入ったフォントを選んでください。
  8. フォントを決定したら、サイズを変更します。
  9. きれいに配置・整列させます(上下左右を調整して真ん中に)。

Inkscape_S_010 Zoom各手順の操作に関しては、前述のリンクを確認して頂きたいのですが・・・ちょっと勉強すれば簡単にできる内容です。更に、「Inkscape」の素晴らしいところは、大きなイメージを小さくしても中にある文字がつぶれない!もともとの大きさのボタンを 1/4 に縮小して掲載しておきます(クリックすると元の大きさのイメージが登場します)。たったこれだけですが充実感いっぱいです・・・

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

Inkscape に関しては「インクスケープの使い方・基礎講座」が良いかも


「Inkscape」に特化したチュートリアルサイトが少ないのですが、そんな中で「Inkscpape」を一通り学ぶことが出来るサイト「インクスケープの使い方・基礎講座 (Inkscape basic lecture)」が良いかも。

インクスケープ基礎講座

サンプルとして掲載されている画像は・・・信じられないほど素晴らしく、ここまでできるんだ~なんて感心させられると共に、自分で扱えるのかな~なんて不安になったりもするわけです・・・

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

Inkscape をマスターするための 15 のチュートリアルってのがある!


「Inkscape」って知っていますでしょうか!?中途半端な私が興味を惹かれるフリーのお絵かきソフト。と言っても、一部では Adobe Illustrator と同等機能を持つ、なんて言われている優秀なソフトです。そして、その「Inkscape」に関しては「マイコミジャーナル::SVGエディタInkscapeを使いこなすための15のチュートリアル」が気になっています。このウェブページ、「 TechSource::15 Fantastic Inkscape Tutorials for Creating Awesome Vector Art」を紹介しています。

inkscape

リストされているチュートリアルは以下の 15。

  1. Creating Pac-Man Baddies
  2. Draw A Realistic Vector Guitar
  3. Inkscape-tastic icons
  4. Illustrating Chinese Dragon
  5. Illustrating Rainbow with Clone tool
  6. Create a Snail
  7. Sticker with Folded Edge Tutorial
  8. F10 Gears: Drawing the Gears
  9. Creating a Coffee Cup
  10. Illustrate A Peacock
  11. Creating Postage Stamps
  12. Create a Vector Compass
  13. Text and Simple Styling
  14. How to Create Valentine’s Day Hearts Artwork
  15. Creating Rubber Stamp

上記がリストされていて「マイコミジャーナル::SVGエディタInkscapeを使いこなすための15のチュートリアル」では以下の 3 つのチュートリアルから始めるように推奨しています。

  1. Creating Pac-Man Baddies
  2. Inkscape-tastic icons(残念ながらリンクが切れているようです・・・)
  3. Sticker with Folded Edge Tutorial

上記を充分に理解してから以下を実践してみる事、としていますね!

ここまで出来ようになれば中途半端な私のとっては満足なんて言う簡単なレベルではなくなりますよね。良いな~ここまですっとできるようになったら・・・

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・