2016年5月22日「くまみこPAITING」のフォトレポート

5月22日に代々木公園で「くまみこPAINTING」を行いました。

天気も良く。発泡酒を飲みながら。

3名が観覧に来て、ぼくひとりで絵を描いておりました。

来ていただいた方ありがとうございました。

レポート

現地に到着すると2畳のブルーシートを2枚敷きました。計4畳。

グリッドを引きます。

ラメがうまく決まりません……

時間をかけないと精度が出ないなぁ。

おしまい。またやろうよ。

2016年6月16日学んだこと

ウェブデザインまたはウェブプログラマーに転職したいと思い、ツールの使い方などを学んでいる。

gulpによる自動化

• gulp.taskとgulp.pipeによるタスク登録
• gulp.src/gulp.destによるファイルコピー
• gulp.watchによるフォルダ監視
• gulp-imageminによる画像のロスレス最適化
• gulp-image-resizeによるリサイズや圧縮
• gulp-renameによるリネーム
• gulp-delによるファイル削除

sketchの操作

キャンバスを作る、色を変える、書き出すなどの基本操作。

Google Developers で画像最適化を学んだメモ

今日はウェブの画像最適化について学んだ。

参考文献

developers.google.com

メモ

googleが主張するところによると、

• 不要な画像は使うな
• 画像はたしかに多くのことを語るが、不要な画像はユーザーのためにならない
• 画像にする前に出来るだけCSS3を使うのもオススメ

画像化されたテキストは良くない

• テキストを画像化するのは避けよう
• ブランディングの意図とかもあると思うが、特に必要性がなければユーザーのためにならない

ベクター形式を優先せよ

画像はベクター画像とラスター画像に分かれる。

単純な幾何学図形によって構成される画像には、ベクター画像がオススメ

• SVGを使うのが良い
• SVGの最適化ツールはSVGO https://github.com/svg/svgo

ラスター形式の選択肢

そうでないものについてはラスター画像を使う。ラスターには普及してる形式が3つある。

• GIF→アニメーション
• JPEG→写真やスクリーンショットの類
• PNG→ロスのない高精細な画像

ラスター画像の最適化ツールはこれ

• GIF→Gifsicle https://www.lcdf.org/gifsicle/
• JPEG
  • ロスなしならjpegtran http://jpegclub.org/jpegtran/
  • ロスありならImageMagick http://www.imagemagick.org/script/index.php [*1]
• PNG
  • ロスなしならoptipng http://optipng.sourceforge.net
  • ロスありならpngquant https://pngquant.org

自動化を徹底せよ

あとは、とにかく自動化をおしすすめることで、ウェブにアップロードする画像はすべて最適化されているようにしろ、とのこと。

*1:ImageMagick は筆者が付け加えた情報で、Google Developers には記載されていない。