見出し画像

note の表紙画像をInkscapeで作る方法

noteで使うテキストノートの表紙画像をPhotoshopで作ったら、文字がぼやけてしまった。

検索して調べてみると、どうやらPhotoshopなどの画像編集ソフトではよくあることのようだ。

いくつかのサイトで示していた解決策も試してみたが、全く効果がなく、結局あきらめた。

そこで、今度はAdobe Illustratorなどで使われているベクター形式で作ってみることにした。

ベクター形式のメリットは?

ベクター形式の利点は、描画したグラフィックを拡大・縮小しても画像が劣化しないところにある。

ペジェ曲線という滑らかできれいな曲線を描くことができ、ロゴ制作やデザイン・イラスト制作などに利用できる。

代表的なグラフィックソフトはAdobeの「Illustrator」が有名だ。

だが、Illustratorは有料なので、無料で使える多機能なドローソフト「Inkscape」を用意する。


無料ダウンロードはこちら。

Inkscape

「Inkscape」とは?

「Inkscape」はもともとはLinuxで使われていたドローソフトでベクター形式で保存できる高性能なドローソフトだ。

Linuxのほかに、WindowsやMac でも使用できる。

使える機能はIllustratorと同じものが多数あり、慣れれば自在にイラストなどを描けるようになる。

ちなみに、Illustratorは有料で最低でも毎月2,180円(税別)かかる。

イラスト制作で仕事をする人であれば損することはないが、ライターなどの職種では必要ない。

「Inkscape」で十分にデザインの勉強はできる。

テキストノートの表紙画像を作るには?

キャンバスサイズを変更する

まず、キャンバスサイズを変更する。

noteの表示カバー画像は「620×257px」で作るといいらしい。

Inkscapeでキャンバスサイズを変更するには、編集メニューより「ファイル」→「ドキュメントのプロパティを選択」。

中央にあるカスタムサイズで「620×257px」を設定すれば、自動的にキャンバスサイズが変更される。

テキストを書くには?

文字を書くには左側のメニューより「テキストツール」を選択。

画面左上からフォント、文字サイズ、文字の太さなどが変更できる。


背景を塗りつぶすには?

背景を塗りつぶすためには画面左側のメニューより「矩形(くけい)ツール」を選択。

キャンバスサイズに合わせて四角形を作成する。

塗りつぶすには左側のメニューよりバケツツールを選択。

色は画面下のカラーパレッドから選択できる。

色を変更したいときは、カラーパレッドの下にあるバーを動かして、希望の色を選択する。

(※図形を選択して、右クリック→メニュー表示→「フィル/ストロークの塗り」からも色を変更できる。)

出来上がった後は図形を選択し、右クリックしてメニューを表示。

メニューバーの「オブジェクト」→「最背面」を選択して、文字の下に画像を移動させる。

グラデーションをつけるには?

図形を選択して、右クリック。

フィル/ストロークを選択する。

メニューが表示されたら、中央の鉛筆&ノートのアイコンをクリック。

図形にグラーデションがコントールできるマークが表示されるので、それを動かして、グラデーションの度合いや角度を調節する。

くわしくはこちらを参照。

保存するには?

保存するには編集メニューより、PNG画像にエクスポートを選択。

保存先を指定してエクスポートをクリックすれば完了。

noteに画像をアップロードするまえに、JEPG形式に変換しておく。

表紙画像の作例

こちらがInkscapeで作った作例。

文章の組み立てに役立つWebツール「WorkFlowy」

好きを仕事にするまえに

地方移住について考える


Inkscapeで表紙画像作ってみた感想

やはり Photoshopなどの画像編集ソフトで作ったものよりも、文字がぼやけない。

全くぼやけないわけではないが、出来映えはInkscapeの方がはるかにいい。


ぼやける原因はInkscapeでPNG形式で保存したものをJPEG形式に変換したせいかもしれない。

noteではGIF形式でもアップロードできるようなので、今後もいろいろと試してみようと思う。


ちなみにnoteのデザインは、Webデザインで使われている「フラットデザイン」を参考にして作られている。

そのせいか、表紙画像もわりとポップでフラットなデザインとの相性がいいようだ。

今後は引き続き、表紙画像を制作をしつつ、ページ内に使う画像素材も増えやしていきたい。





noteに関する記事一覧はこちら


Inkscape

https://inkscape.org/ja/download/

イラストもメモも超快適! 手書き入力に特化したAndroid&WindowsタブレットPC まとめ





ネットを活用して働く人をサポートする クラウドサポーターズ



Burariの時事コラム 配信中!

ブログ 秋葉原ぶらり 更新中!

Burariのツイッターもよろしく!  


この記事が気に入ったらサポートをしてみませんか?