icon – Little snake is going …May the CODE be with you.

Swift 独学プログラミング　プログラミング初心者のPDFアイコンの作り方〜ちょっと目を離すと進化していってしまう編〜

Posted on 2019年10月20日2019年10月20日 by kohebi

あっ　どうも子へびです。

先日契約期間が切れましたのメールが届き、あれ？なんか契約してたっけ？っとのん気にメールを開くとサーバーレンタルの契約期限切れ おー！なんてこった！このブロクを開設した際に契約したサーバーレンタルが１年経って契約更新をしないまま放置していた子へびです。なんせ子へびですから・・・。ということはこのブログを書き始めてちょうど１年になるということ！感慨深いです。最初プログラミング自体も果たして続けられるのだろうか？とスタートを切って未だ未知なる世界には変わりありませんがほそながーっく続けております。上達具合を聞かれると言葉につまってしまいますが（笑）

そろそろ本格的に子へびのアプリに表示させるアイコンの画像を作らなくてはならないのですが、そのサンプル画像を作っている時

Master松陰

子へびは画像何で作るの？

っと聞かれ

子へび

え？PNGもしくはSVGじゃないんですか？

っと何か子へびに対しての抜き打ちテストかと思って間違えたらどおしようとぎくっとしたのですが

Master松陰

もうそれ古いのんだよね〜。今時はみんなPDFで作るんだよ。

なっなっなんだって！
ようやく子へびはPNGとSVGの画像の作り方がなんとなくわかりかけたと思ったらもうその手法はoldstyle…..OMG!っと思わず叫びたくなりました。けどprogrammingの世界って常に進化しているしここで習得を止めてしまうとどんどん進化に乗り遅れてしまうので子へびはMaster松陰に

子へび

PDFの作り方も教えてください。

っとお願いしたしだいであります。

子へび

だがしかしまた一つ課題が増えた・・・。とほほ

以下Master松陰流PDFアイコンの作り方です。実際はこのアイコンを作った後の設定の方が難しいと気づく子へびです（笑）

PDFアイコンの作り方
1, SVGのアイコンを探す

2, １でダウンロードしたSVGを以下のツールで640×640サイズに合わせてエクスポート
https://vectr.com
サイズが小さい物もあるので、ここで調整する
また、合成や編集もここでやっておく

3, ２でエクスポートしたSVGを以下のツールでコンバート
https://apps.apple.com/jp/app/svg-converter-ohanaware-com/id1075707641?mt=12
これはMAC用のアプリなので、事前にダウンロードしておく

4, ３でエクスポートしたPDFを xcode のAssetに追加する
↓
アセットのprinter Vector Dateにチェックを入れて１Xにデータをセットする

Swift 独学プログラミング　プログラミング初心者のきれいな画像処理方法〜icon編〜

Posted on 2019年8月9日2019年9月1日 by kohebi

あっ　どうも子へびです。

この間iPhoneを握ったらいきなりSiriが
『そうだと思っていました。』
っと話だし、子へびは喋りかけていないにも関わらず話出したので心を読まれたのかと思いました。笑　子へびの心を読めるiPhoneけどSiriに答えられてしまうと子へびが何を考えるかバレてしまうので黙ってて欲しい時もあるかな？っと考えていることも読み取って欲しい。笑

iconのデザインが決まって子へびの疑問。

子へび

画像の切り取りがきれいにできていない気がする。ところどころ曲線が歪んでいる気がするな〜。

っとMaster松陰に相談するとsampleiconダウンロードするところから手順を教えてくれました。この手順は意外とどこにも書かれていないので初心者の方々には参考になると思います！

１　SVGでダウンロード　←　SVGはWebで大きさを調節できるのでできるだけ大きな画像から切り取った方が画像がきれいに切り出せます！

２　ブラウザーで拡大

３　グラブで画像全体をスクリーンショットをとって保存し切り取る

４　Pixelmatorで各パーツを分解　←　画像全体より各パーツに分けた方が色々調整ができるのでオススメです！

５　画像が完成してたらPNGで書き出し　←　この際アルファチャンネルを取り消してください。この作業をしないとのちのちアップルの審査で引っかかるそうです。

っとこの５つの作業がデザインがだいたい決まったら必要となる手順になります。けど子へび

子へび

説明聞いた時ななるほどと思ったけど、実際に自分の手を動かしてみたらこの５つの作業にめちゃくちゃ時間がかかった・・・。

Master松陰

何度も何度も手を動かして覚えていくのよ！

とのことなのでさらっと５つの作業を紹介しましたがぜひ実際に作ってみてください！
さてようやくコードにとりかかれるかな？！

Swift 独学プログラミング　プログラミング初心者のiconデザイン〜iPhoneアプリ編〜

Posted on 2019年8月2日2019年9月1日 by kohebi

あっ　どうも子へびです。

暑くて伸びちゃってませんか〜？子へびも夏を越せそうな気がしません・・・。夏は大好きですが、こうゆう夏は全然得意ではありません。あ”〜外に出たくないが最近の子へびの口癖です。

iconの作成にまたかなりの時間を費やしました・・。一体何個作ったんだろう？作ってはMaster松陰に見せてを散々繰り返しその答えは

Master松陰

・・・・。

そうなんです。無言・・・。っと言うことは却下と言うことです。笑
なかなかいいね！がもらえず挙句の果てには

Master松陰

子へびなんだか違う方向に行ってしまっている。この絵何？

っとまで言われる始末。笑

子へびはもうサンプルicon見すぎて連日目がしょぼしょぼです。そのぐらいサンプル画像たくさんみました。実際色つけたり、組み合わせたりすると自分の思っているイメージと違ってしまったり、よしこれはいいぞ！っと思っても実際のiconサイズにして他のiconと並べるとなんかしっくりこなかったり、もう散々色々試しました。

今回はこのicon画像をサンプルに作りましたよ。
↓↓↓
sample icon

カワイイicon達がたくさんあるのでオススメです！

そして実際に気に入ったものができてiconをMaster松陰のアプリの隣に並べてみると

子へび

全然存在感が違う・・・。

数あるiconの中に並べて見るとまたもやその出来栄えに問題を感じ

Master松陰

それはちょっとしたバランスの問題や色の使い方だったり微調節が必要ね。ただiconが決まらないとモチベーションも上がらないし、妥協しちゃダメね！気にいるまで作り続けなさい。

っと言われやはりアプリ内のコードも然りiconのデザインを然りMaster松陰の技術は卓越していることを再確認しました。

子へび

何事もセンスですな！

っと感じつつ細かな修正の繰り返しでなんどもシュミレーターで実際のサイズにして確認しました。

そしてようやくMaster松陰から

Master松陰

これはいいね！

の言葉がもらえたのは一体何作目だったのだろう・・・。いいね！を言ってくれることが本当にあるんだっと思わず疑ってしまったほどです。笑

そんなMaster松陰は自身のアプリが紹介されるテレビ番組の収録も無事に終わったらしく放送が楽しみです！夏休みにお出かけ予定の方々にはとっても便利なアプリなので放送日が決まったらこのサイトでもご紹介します！

子へび

いいな〜。いつか子へびも・・・。

っとまだ表紙しかできていない自分のiconをみて夢ごごちです。

おまけ
iconができたので次の課題のサンプルコードをみてみたら
子へび

何これ！久々すぎて全然わからなくなっている・・・。

大量のコードに途方にくれる子へびです・・・。

Swift 独学プログラミング　プログラミング初心者のアプリiconの作り方〜デザイン編〜

Posted on 2019年7月24日2019年7月24日 by kohebi

あっ　どうも子へびです。

ようやくセミの鳴き声が聞こえてきましたが子へびの夏休みは終了してしまい腑抜けな状態から社会復帰をしましたが、まだまだ夏休みが欲しいと思ってしまう子へびです。

このサイトは更新していませんでしたが子へびは今自身のアプリのアイコンの作成に取り組んでおります。そして何通りのデザインを作ってはボツになりまったくしっくりくるデザインが完成しません。この作業は実際にデザイナーさんがいるくらいなのでセンスの一言に尽きるのかもしれませんが

子へびの悩み

①実際のサイズがかなり小さくなるためデザインいかんによっては細かすぎて何を表現しているかわからない。
②絵柄と色の配色をあまり多く入れすぎると何のアイコンなのかわけがわからなくなる。
③子へびのオリジナリティーを出したいものの、絵柄は既存に出ているicon画の組み合わせになるためオリジナティーを表現できているか疑問に感じる。

っと言うのが本音で、何百個とicon画色々検索しながら組み合わせて永遠に作業中です。
Master松陰にiconの作り方を聞いてなるほどっと作り方には理解したもののそれよりもセンスに苦労するとは・・・。

Master松陰

iconはアプリの顔なのでとても大事です！じっくり考えなさい。

とのこと。苦戦している子へびを見て笑っております。

子へび

とほほ・・・。