白骨大王のお絵かき日記

うぅぅぅぅぅーーーー！
ジャンボ！

手描きした文字をGimpでパスに変換して
SVG化したものを
インクスケープに取り込んで加工しています。

まずは
こちら

GimpでSVGで保存した時点でインクスケープのアイコンが表示させてます
人によってSVGで保存した画像のアイコンは違うよ「イラストレーター」だったり「Edge」だったりするかもね
で
赤丸　インクスケープアイコンをダブルクリック


赤矢印　こんな感じで表示されます
よく見ると青かった文字が（2021年02月02日のブログを参照）白抜きになってます。


粗い感じですが
これが手描きの良さです。
これが狙いです、生きてる感じがするでしょ。
これを加工して押し出した感じの文字にするよ
では
「れっつ、ゴーーー！」


赤丸　選択ツールをクリック
青矢印　ドラッグして
緑四角　画像全体を選択

＊この状態なら画像の上でクリックするだけでも選択出来るけどね


上のツールバーのパスから
赤丸　分解をクリック

！え！全部黒くなった！！！！
でも大丈夫です　そのまま続行！


そのまま続けて、上のツールバーからパスを選択
赤丸　排他をクリック

ねっ、文字だけ残ったでしょ。
これでパスベースの画像になりましたよ.


赤丸　上のツールバーのパスを選択
青丸　統合をクリック

下準備はここまで
ここからは、ブログのトップ画面作成にはいるよ





赤丸　ツールバーから　選択ツールを選択
　　　　すでに選択されているとはおもいますが
青丸　矢印を左にドラッグして文字を縮めます


赤丸　上のツールバーのパスを選択
青丸　パスエフェクトをクリック
青矢印　パスエフェクトのウィンドウが表示されます


赤丸　+ボタンをクリックしてエフェクトを追加
青丸　パスエフェクトの追加のウィンドウが表示
緑矢印　ドラッグして下に下げます
紫丸　曲げるを選択
追加をクリック


赤矢印　曲げるのエフェクトが追加されます
青丸　キャンパス上で編集をクリック
緑丸　曲げる用のパスが表示されます。


赤三角　ノードを下にドラッグ
青三角　ノードを上にドラッグ
緑三角　ノードの飛び出てる丸を使ってカーブを調節


赤丸　画像の上でマウスを右クリック
青丸　複製をクリック　*コピーはしないこと*
緑丸　画像の上でマウスを右クリック
青丸　複製をクリック　*コピーはしないこと*
で、　画像を三個にします。


赤丸　一番下の画像を選択
青丸　フィル／ストロークを選択
緑丸　ストロークをクリック
黄色丸　　単一色をクリック
紫丸　▲▼をクリックしてストロークを赤にする


赤丸　ストロークのスタイルをクリック
青丸　▲▼をクリックして大きさを決めます
緑丸　角　端　順番をクリックして決めます


赤のストロークは15.000
黄色のストロークは6.000に変更
角も丸に変更
こんな感じで色々試してみるよ


赤丸　赤いストロークの画像の上でマウスを右クリック
青丸　上のツールバーのパスを選択
緑丸　ココでもう一度統合をクリック


白丸　画像の上でマウスを右クリック
赤丸　コピーをクリック


赤丸　何もない所でマウスを右クリック
青丸　貼り付けをクリック
緑矢印　コピーが表示　*コピーは２個作るよ*


赤丸　一つを選択して矢印をドラッグして少し小さくします
青丸　上のツールバーから再背面をクリック


黒矢印　コピーした２つをまとめて選択
赤丸　上のツールバーからエクステンションを選択
青丸　パスから生成を選択し横にズレて
緑丸　補間をクリック


赤丸　補間ステップ数はお好みで今回は11で、補間方式は2です
青丸　適用をクリック
緑丸　こんな感じで立体化したように出来上がります！
*実際には立体ではなく同じ画像がズレて表示されているだけだすけどね。*


そうそう、黄色も統合します
赤丸　黄色を選択
青丸　上のツールバーからパスを選択
緑丸　統合をクリック


赤矢印　全てをドラッグして選択
青丸　中心に合わせる


赤丸　水平軸に合わせるをクリック


赤矢印　3つ全部をドラッグして選択
青丸　上のツールバーのオブジェクトを選択
緑丸　グループ化をクリック


赤矢印　さっき作った立体の文字と、グループ化した文字を合わせて選択
青丸　上に合わせると、左に合わせるをクリック


赤丸　上のツールバーのオブジェクトを選択
青丸　グループ化をクリック


コレで立体化終了です

やーー長かった！
本来、この作業は10分ぐらいで出来るんですが
マニュアル化すると一週間ぐらいかかりました！

そもそも
わざわざ手描きのモノをパス化しなくてもいいんですが
まぁ、知識として、、、
て、言うか
これが出来ると
（Gimpで画像のパス化のことね、インクスケープの作業は割と普通）
手描きのイラストが
劣化することなく拡大、縮小が出来る利点がありますよ！

でもでも
板タブとか液晶とかがあれば
この作業は全く必要ない作業です！？

じゃぁ、何のためにマニュアル化したの？
てことだけど
何となく手描きの抽出って出来ないかな～
と、思っただけの思いつきです

さて
次は、背景とイラストです
イラストは何描こうかな～

て事で
じゃ、またね～。

にしても
時間かかったぁ～、、、。

うぅぅぅぅぅーーーー！
ジャンボ！

まずは
ここから

この青い文字をパスに変換
青色ですがココでは気にしなくていいです


赤丸　色域を選択をクリック
青丸　青をクリック


赤丸　上のツールバーの選択をクリック
青丸　選択範囲をパスにをクリック


赤丸　パスをクリック
白矢印　レイヤーからパスに変換


赤丸　右下のレイヤーがあったウィンドウに現在ある選択範囲の左の四角の上で
　　　　マウスを右クリックしてウィンドウを開く
青丸　エディットパスをクリック


こんな感じで
パスが表示されます
当然ですがここから「パス」ツールを使って
加工出来ますよ。

本来ならここで、いらないポイントを削除して輪郭をスッキリさせます。


今回は特に加工しないので
このまま保存
赤丸　選択範囲の左の四角の上でマウスを右クリックして
　　　　ウィンドウを開く
青丸　パスをエクスポートをクリック


赤丸　保存場所を選択
青丸　名前をつけて、名前の後ろにドットを付けて「SVG」と拡張子を追加する。
緑丸　セーブ

拡張子を付けずにセーブしても、SVGで表示されることななるけどね。


赤丸　ファイル名の所に
青丸　保存されます。
　　　　私の場合SVGはインクスケープで開くのでインクスケープのアイコンで表示されます

とまぁ
こんな感じでパス化した画像が保存されます
もちろん、ココからは
インクスケープを使っての加工になりますよ。

白骨大王といえば
インクスケープだぞ！

さてさて
どうなることやら

て事で
じゃ、またね～。

うぅぅぅぅぅーーーー！
ジャンボ！

前回
トップ画面のタイトルを手描きして
gimpに取り込んだので
今回はこの画像の色を変えるよ
こちら


このままでも
いいんですが
新しくテンプレートを作成

赤丸　上のツールバーからファイルをクリック
青丸　新しい画像をクリック
緑四角　新しい画像を作成のウィンドウが表示されます。


赤丸　詳細設定をクリック
青丸　塗りつぶし色の∨をクリック


トランスペランシィをクリックして
OKをクリック


透明背景のキャンバスの出来上がり！


赤丸　前のキャンバスをクリックして戻る
青丸　自由選択をクリック
緑丸　色を変えたい画像を選択


赤丸　鉛筆をクリック
青丸　パレットの青をクリック
緑丸　左クリックを押したまま選択範囲の色を塗る
黄色丸　ここで鉛筆の大きさを変えられるよ

選択と鉛筆
この繰り返しで
すべての色を変える


で
こうなります。


赤丸　色域をクリック
青丸　青の画像をクリック、キャンバス上の全ての青（同じ色）が選択されます
緑丸　マウスを右クリックしてウィンドウを開き編集をクリック
黄色丸　コピーをクリック
ちなみに紫丸の所で色域値を変更出来ます


赤丸　透明背景のキャンバスをクリック
青丸　マウスを右クリックしてウィンドウを開き編集をクリック
緑丸　貼り付けをクリック


あとは
キャンバスの何もない所を
自由選択でクリックすれば
完了です！

ちなみに保存する時は
png形式で保存すれば透明背景が維持できるよ
他の保存形式でもいいけどね「GIF」とか「TIFF」とかね。

面倒くさいけど、コレをすることで
画面上のゴミをハブくことが出来るし
輪郭がくっきりして色ムラがなくなります

これはある程度輪郭がついている場合にはかなり有効です
写真なんかでも出来るよ。

さて
ココから、この画像をパスに変換するぞ！
果たして上手く行くのか？
なぜパスに変換するのか？
謎は残ると思いますが次回ブログを
乞うご期待！

て事で
じゃ、またね～。

うぅぅぅぅぅーーーー！
ジャンボ！

そういえば
随分とトップ画面をほったらかしていたので
年齢とか違っているぞ！

て事で
作り直すことに

で、まぁ
タイトルはもちろん
「白骨大王のお絵描き日記」で
今回は手描きすることに
（キャラクターはいつも手描きですけどね）

早速ここちら

むーっ
立派な縦書きですね
て事で
これを横向きにします

でGimpの登場です

Gimpを立ち上げて
赤丸　ファイルから縦向きの画像をドラッグ・アンド・ドロップ
青丸　Gimpに画像がそのまま表示されます


赤丸　上のツールバーの画像をクリック
青丸　変形にカーソルを持って行きそのまま横にあるウィンドウに移動
緑丸　時計回りに90度回転をクリック


ほれ、このように、横向きになりましたよ

続きまして
画像を保存

赤丸　上のツールバーからファイルをクリック
青丸　名前を付けてエクスポートをクリック
緑四角　「画像をエクスポート」のウィンドウが開く
紫丸　保存したいファイルを選択
黄色丸　ファイル形式の～をクリック


好きな（使い勝手の良い）保存形式を選択


画像をエクスポート JPEG形式のウィンドウが開くので
エクスポートを選択
品質は好みで変えても良いよ


赤丸　選択したフォルダ
青丸　横向きに画像が保存されます。

これで
横向きに保存出来たので
これをGimpで加工しつつブログのトップ画面を作って行くぞー！

で
まぁ
ついでに
Gimpで保存出来る拡張子もアップしとくよ
ちょっと大きいけど参考にしてね


よく
フォトショップやイラストレーターじゃないとダメ！
という人や会社がありますが
クライアントは何のソフトを使って作ったかなんて
気にしている人はいません

要はクライアントが使いやすい
保存形式に（３種類（JPEG,PDF,GIFなど）ほどの形式を用意して提出）
出来ればいいでよ。

なんで
フォトショップやイラストレーターじゃないとダメなのかは
その会社で使っているソフトだからです
メジャーなソフトなので新人に教える手間が無いからです。
さらに
会社によっては「Windowsじゃないと」とか「Macで来ますか？」
と問われる事もよくあります

出来るに越したことはないですが
フォトショップとイラストレーターは少しくらい触れればいいかな？
他のソフトが使いこなせるなら、すぐ覚えれれますよ

フリーで
活躍する人なら保存形式さえクライアントの意向に添えれば
ソフトは何でもいいです。

エクセルで画像が出来ないこともないし
ペイントでも出来ますよ

まぁ
変な脱線はしましたが
無事、画像を縦から横向きの画像に
変更出来ました！

次回はこの画像を加工するぞ！

て事で
じゃ、またね～。

うぅぅぅぅぅーーーー！
ジャンボ！

遅ればせながら
新年明けまして
おめでとうございます。

北九州でも
ココ最近雪が降り続いて
おかげさまで
休みが出来て
ブログの更新が出来ました！

が

エクセルとか家の事とか
色々あって時間が取れず
悔しい日々を送っています。

で、まぁ
ラフな感じでこちら

メモ紙に描いたラフを
スキャンしてPCに取り込み
Gimpで色付けしています

ラフが簡単だと思っていたら
レイヤーをいっぱい使う事になって
かえって時間がかかってしまった！

でもまぁ、いいか

では
今年も宜しくお願いしますっ

て事で
じゃ、またね～。