Kritaと行ってみる / vol48 イカしたアイコン・サイトを見ぃつけた
イカしたアイコン・サイトを見ぃつけた !! 篇
△ ここのところでのクリッタのニュースを見てると、ドロー系の機能あたりが取り入れられてる雰囲気? が ぷんぷん メッシュ・グラデーションなんかをやってるし、今回のアイコンのサイトは そこいらにも対応していて SVGやEPS そしてAIもOK・・
もちろん一般的なJPGやPNG形式もOKで、モノの出来も良さそうだから ブログなんかにも使えて、雰囲気を盛り上げてくれそうです。
自分でも、初めてのSVGデータ?
URLを下に載せておいたので、ぜひどうぞ・・ !! で カーソルを下に持って行くと番号があり、かなりの種類が有りそうなサイトなのですね。
△ 今回はこんなふうな おサルさん の アイコンを選んでみました。
△ カーソル移動で画面の下の方へ行けば、色々な形式の画像が選べます 今回は SVG を選んでみましたが セルシスさんのペイント・ソフトの クリスタ なんかも、このデータ形式を扱い出しましたが ベクター形式のモノで有り、いくらかリナックス方面で見かける形式です WIN方面だと、AIやEPSなんかがおなじみですよね。
ここいらを扱うソフトがWINでは、アドビのイラストレーター リナックスだとインクスケープやGIMPになりますが クリッタがこれをやれるのは、かなり異色?の出来事っぽい気がしてます 似た雰囲気のソフトではファイア・ワークスかなぁ?
SVGはやらないで JPG や PNG ならば、そのままブログへ貼り付けが出来ますし そこいらが面倒な人は、JPG・PNG型式のモノを ダウンロードすればOKですよね
△ で 下の緑の部分をクリックしてます
△ すると、こういうメニューが出まして・・。
△ 無事にダウンロードが完了・・ モノが良く楽しそうなアイコンなので、他にも色々ダウンしてみてます
クリッタでの格闘
△ それでは、「さぁ・・」 と クリッタを起動してみまして
△ おサルちゃんのアイコンをドラッグで放り込みますと、こんなウィンドゥが出現・・ !! テキトーに 20 なんて数字を打ち込んでみてますが、解像度を聞いてくるのですよねぇ ここらは各自で頑張ってみる部分らしきで、自分もホントわかりましぇーん まーまいりますねぇ
△ で こんなふうに取り込まれました。 が JPEGやPNG形式の画像とはちょっと違うトコロを、今回は見て下さいね。
△ レイヤーも通常のモノでなく、ベクター・レイヤーとかの表示になってます
△ そうしたら、ツール・ボックスで 赤枠の 選択ツール を 選びまして
△ おサルさんの SVGデータをクリック・・ 一般的なJPEGなんかと表示の雰囲気が違いますでしょう?
△ 次にここで右クリックをしまして、赤丸の所をクリックしてます これを3〜4回やっておきました
△ そうしてから、絵でない別の場所をクリックして 選択 を 一時解除 !! しました
△ それから又、絵を選択しました ここでちょっと デリート・キー なんかを一丁やってみますと・・
△ こうなってくれました !! 背景の黄色い部分の絵をシャット・アウト・・これがSVGのベクターデータの強みで、絵はすべて部品で出来てるのです クリッタで絵をやる時も 下描き ペン入れ 下塗り 上塗り なんかとレイヤーを分けてやってますが そこいらの状態を上下の関係にして、一つのモノにまとめてしまって居る。
ですので 選択 をしておいて、別のレイヤーを作っておき 上下の関係を考慮しながらコピーし、 新たにアイコンの絵を構築して行く・・なんていうやり方も出来てしまう訳ですよね・・ で 今の削除した背景はアンドウの機能で 一応また元に戻しておきました、そして次をやってみます・・また絵をクリックで選択した状態にしておき
△ 選択ツールのオプションで矢印の部分をクリックすると、色のパレットが開くので・・・
黄色から、ちょっと緑っぽい色にしてみました !!
△ 色が変ってくれたでしょ・・ こうしたベクター・データの場合はタブレット・ペンもいらず マウスだけでこういう方面が出来てしまう 最近のクリッタのバージョンでは、ここいらの辺りも始めだしたから 「お?」 って雰囲気でドキドキしちゃってるんですが、わかってくれます?
△ 今度はおサルさんの方をクリックして またグループを解除で、ちょっと耳のパーツを顔から遠ざけてみてます で もう1回グループを解除で、一つ々の耳のパーツにしておき・・
△ 今度は色を少し濃い目にしてみました !! やり方や雰囲気が伝わってくれるといいのですが・・? で SVG形式のアイコンはこうして遊べます・・の巻 いかがでしょうか !!
やれやれと・・? とつぜん、疲労が来襲 !!
△ と ここで急遽、休憩の時間・・でーす ! ! お勉強がまだいくらか続くし、久々のレポートなんで腰もイタくなって疲れてきました アクビなんかも出て来たので、思い切ってパカーンとストップ・・もう一つの方のブログだと、おなじみの行動ですけど こっちでも、もう遠慮なくGOひろみ? 背伸びもしたい気分ですので、一旦、休憩・・ トシですねぇ
△ 横で見てたけど、ふぁぁ〜ぁ !! と 寝込みそうなネコちゃん?もアクビ・・のようす
△ 写真サイト ぱくたその姫こと 河村ちゃんも、飽きてきたらしき雰囲気です
△ 「携帯いじってるとこが可愛いから、写しとこうかな・・」 は やはり写真サイトの足成のプリンスの飯田くん !! いくらかアクビを押し殺したみたいな表情ですねぇ
△ こういう時はコレが効くから、いっちょうイキますよ遠慮なく・・ イイ年こいて、こういうの大好きです !! 後頭部にズキューンと来てくれて、江東区に行きたくなりますよねぇ ジャンボの場合はまとめて3コ位やりたくなるから困りもの。 いやー8月です
ラストへ向けて
△ さあてアタマも冷えたし、続きを行きますが ここからもちょっと見て下さい !! で ネットのクリッタの情報を思い出すと、ソフトの機能の事ばかり・・で そのアトの事をやっていないのが大い?競馬場 初心者さんなんかだと「そのあとブログに載せるのにどうやるのよ」 なんて意見があっても、おかしくない訳です。
ここまでを延々とやってきましたが、レポートが長くなるのを承知で 今回はしつこくそのあたり迄、追求して行きますね 休憩をはさんでの続きのレポートは、このうえなく為になる珠玉のレポート間違い無し !! さぁ行こう の 最高を行きます・・で 色々とさわる以前の絵を出しまして・・
△ このアイコンのサイズですが、実は・・の週刊実話で次の画像で確認出来ますが 上のメニューから赤丸の部分をクリックしています
△ で トボけてやってましたが、こんなに大きいのですよね さすがにこれじゃブログなんかに使うには大き過ぎる気がするので、いくらか小さくしてみます
△ で 単純に上の数字を替えればOKで あまり悩む事でもありません
△ こうなってくれましたので、ひと安心
△ あとはこれを保存してしまえばOKですが 「弥九郎ちゃんはどういう保存のやり方をしてるの?」 と ここいらあたりの追求みたいのを載せますのも、今回の主張の一つで 白眉なんて単語が欲しい位ですが こういう風にいじくったりする画像は、JPEGでの保存はやらない方がいい・・ってコトです。
ここのブログのはてなさんでは無料のユーザーだと、月に使えるのが300メガです ちなみに下の画像は、横の幅が730ピクセルあたりで ここまでにかなり多くの枚数をやってますが、このレポートくらいの画像を使ったモノを 月に25位を上げてもOKでした
それもいじくるたびに画像が劣化していくのが、目に見えてわかるJPEG形式でなく PNG形式の画像で、容量をクリアしてます。 ヒヤヒヤでしたけど、メインのブログも同時にやってたし これはオドロキでしたけど、自信にもつながりまして現在はずっとこればかり で ここのメニューの続きをやって行きますが、赤丸をクリックです
△ こういう画面が出るので PNG画像 をクリック
△ 今回も707なんてテキトーな名前を付け、矢印の部分で確認 !! それから 保存 をクリック
△ この画面でそのまま OK を押し、保存しました で ここで一度、クリッタを終了させておいてます。
あとはブログへの考慮も・・
△ フォルダーを作っておいて、今のPNG画像を保存しておいてますが この間OSのリナックス・ミントで、個別にフォルダーの色を変えられるのに気付き しっかりと遊んでますけど、比例して 益々WINDOWSが遠のいてます
WINでやるのって今はクリスタだけだし、補助のパソコンになりつつありますのですよねぇ フォントが貧弱で老眼のメガネでもダメ・・何十年も前から指摘されてるのに、いっこうに直さないし ミントの楽しさにもかなわないしで、おカネ払うのもツライ雰囲気ですもん しゃんめーです
△ 再度クリッタを立ち上げて、今回は 新しいファイル をクリック・・
△ こんなウィンドウが開くので、現在使用中のはてなテーマの ライフ の横幅に合わせて730ピクセルをチョイス 730だと現在主流テーマの スムース にもバッチリとフィットしてくれます これのやり方ですが、ブラウザーである程度大きくウィンドウを開いてみます
そうしてそれを画面コピーしておき、長めの文章の左と右のギリギリあたりで切り欠きをしてしまい その画像の横幅のサイズを確認すれば、ある程度割り出せると思います
△ と こうして 新規の画面 が開かれました が 自分の場合PNGのデータにしたいし、背景も透明にしておく・・と 云う方法を毎回やっています こうすればたとえば背景が黒やベージュのテーマでも、考えずに行けるし あとからバックに何か入れたくなった時にも、すぐに対処が出来ます
JPEGだと、こうはいかないし あとから又使う・・なんて時でも劣化もそれほどは無いし、透明PNGのあたりは ぜひ考えておいていただきたい部分になりますので・・
△ 新規でファイルをやった場合、こうしてバック・グラウンドのレイヤーが作られてしまいますが 矢印のように目の部分をクリックで、非表示にしておいています。
△ そうすると画面がこんな風になりまして これがバックは透明ですよ・・って証しのようです。
△ ここへ先程の、707PNGをドラッグで放り込みました が こんなサブ・ウィンドウが開いたので、矢印の部分をクリックして進みます。
△ 行けましたが、いかんせん場所が悪くイマイチ・・イマイチは日光の手前ですねぇ
△ なんてジョークをやりながら、ツール・ボックスで移動ツールを選びまして・・
△ 今回は真ん中あたりにしましたが、ブログで使うにはヒトそれぞれ・・ ここいらは自分のお好きな位置へどうぞ・・の部分
△ これで99.5%くらいが終わり、ラストは目の前 で 今度は右となりの 切り欠きツール にチェンジしてます・・
△ こうしてある程度の余白を残して、調整しまして・・
△ エンター・キーを押して、こんなカンジにしました。 あとは先程の PNG保存 を、また同じ様にやって これにて一件落着 !!
△ 上の方でこんなのをやってましたですけど、これに ドロップ・シャドウ なんかをやってみるのも けっこうイイって思います
△ さぁ、ブログ・アイコンの巻・・これにて終了ですが、ここのブログでもこうして たくさんの自作アイコンが往来闊歩してますけど、知ってました? 罫線なんかもやると楽しいですよ !! と、やっとこれにて終了でーす
△ 暑さのせいもあって、今回はさすがにバテ気味の矢切の私? なので、 ぱくたその姫こと 河村ちゃんの顔を見ながら これからお昼寝でも・・の雰囲気がちらほら
△ 寝こむ前に、寝子ちゃんにお礼のご苦労様でした を やってもらって 見てる方々さまへも握手ならぬ拍手〜ぅ で おつかれ様でございました。