Link list 2015-03

Inex Cox

http://inescox.com/
最近見た中でずば抜けて洒落てるグラフィック

手描きのデータビジュアライゼーション

http://www.wired.com/2015/03/hand-drawn-postcards-data-viz-dream
LupiとPosavecのプロジェクトで、アルゴリズミックなドローイングとも言える。思い起こすのはConditional DesignとかSol Lewittの作品。データと、描画のルールと、立ち現れるテクスチャ。

GT Cinetype

http://gt-cinetype.com/
かっこいいフォント。アルファベットと数字(と少しの記号)はお試しで使える。サイトもいい。

アルゴリズムを用いて形状が変化する文字を作る

http://www.wired.com/2015/03/using-algorithms-design-responsive-typography/
メタデザイン、パラメトリックデザインという言葉が気になった。パラメトリックデザインは、パラメータの操作によってバリエーションを生み出すデザインを指すようだ。主に建築の分野でよく目にする。メタデザインは、そのように変化する仕組み自体のデザインを指している。Rune Madsenのテキストによると、今までのデザイナーは「ロゴ」だったり「ウェブサイト」だったり「ポスター」のように最終成果物を作り出す存在だったが、メタデザイナーは手で絵を描くのではなく、絵を描くための仕組みを作る。Rune MadsenがITPで行っている授業「Printing Code」も面白い。

ドローイングの学び方

https://design.tutsplus.com/tutorials/how-to-learn-to-draw-stage-one-manual-skills--cms-23304
認知の仕組みや技術の水準を考慮して、どうステップを踏んでいけば良いかを教えてくれる記事は珍しい。

Credibles

http://greenz.jp/2015/03/12/credibles_crowdfunding/
個人経営の 店舗向けクラウドファンディング。応援したい店に出資できる。

モバイルコンテンツ戦略でコンテンツがどこにでも行けるように

http://www.smashingmagazine.com/2015/03/23/content-mobile-content-strategy/
スマートウォッチなどの登場でますます混迷を究めるスクリーン上のデザイン。モバイルコンテンツ戦略とは単に各デバイスで綺麗に見えることではない。質を落とすことなく、持ち運び自由で柔軟なコンテンツを作ること。Content Everywhereという本に詳しいようだ。買おうと思ったらSafari Books Onlineで読めた。

Don't follow the wind

http://dontfollowthewind.info/
みることができない展覧会。音声のみのウェブサイト。真っ白の画面を「見る」ことを意識してデザインされているように思える。デレク・ジャーマン監督作、終始青い画面の映画「BLUE」を思い出した。

あいちトリエンナーレ2016 プロモーション

あいちトリエンナーレ 2016 コンセプト・ビデオ
あいちトリエンナーレ 2010 / 2013 ドキュメント
山城監督がディレクションし、ドキュメント映像の2010を僕、2013を丹羽彩乃さんが担当。3D空間上のカメラの位置を制御するアプリケーションを作り、タイミングや位置、読み込む画像を監督が設定できるようにした。After Effectsでできることをわざわざ頑張ってしまった気もするのだけど(事実2013はAfter Effects)、ここに行き着くまでの表現的なトライ&エラーを色々試せたのは良かった。

Vetiver - Current Carry by Easy Sound Recording Co.

https://soundcloud.com/easysoundrecordingco/vetiver-current-carry
すごくいいんだけどCDかVINYL + Digital Downloadしか買う手段がない。ダウンロードのみで売って欲しい。

Sketchで作ったデータをPhotoshopに移動させる

Sketchを使っているのが自分だけで、他の人が開けないのでPhotoshopに移動させたい。編集できる必要はなくて、各オブジェクトのサイズや位置などが分かるリッチなビューアとして使ってもらう。

Sketch側のレイヤー構成はこんな感じで、パーツ単位でスライスを指定しておく。

SketchToolをインストール(install.shを実行するかパスを通せば良い)し、

sketchtool export slices design.sketch

とするとスライスが書き出される。「-o パス」で書き出し先を指定できるはずだがエラーでうまく動かず「1」というフォルダが作られてしまう。同じ名前のスライスがあると上書きされてしまうので注意する。

sketchtool list slices design.sketch > export.json

などとするとスライスの情報がJSON形式で出力される。

スライスされた各パーツのサイズや位置が記録されているので、あとはこのJSONを元にPhotoshopで再現してあげればよい。PSD.rbも使ってみたかったが、PhotoshopのJavaScriptでやってみた。JSONのパースは信頼のCrockford先生によるJSON2を使用。書き出したスライスデータは「export」というフォルダ名にして、同じ階層に置いてある。Photoshopを起動して「File>Scripts>Browse...(英語環境にしてるので)」を選択して、sketch2psd.jsxと名付けた下のファイルを選択する。

sketch2psd.jsx

#include "json2.js";

var currentDir = new File($.fileName).parent;
var file = new File(currentDir + "/export.json");
file.open();
var jsonString = file.read();
var layoutJson = JSON.parse(jsonString);
var slices = layoutJson.pages[0].slices;
var bounds = layoutJson.pages[0].bounds.split(",");
var offsetX = -parseInt(bounds[0], 10);
var offsetY = -parseInt(bounds[1], 10);
var width = parseInt(bounds[2], 10);
var height = parseInt(bounds[3], 10);
var doc = documents.add(width, height, 72, "psd", NewDocumentMode.RGB);

for(var i=0; i<slices.length; i++) {
  var imgFile = new File(currentDir + "/export/" + slices[i].name + ".png");
  var openedDoc = open(imgFile);
  var partsName = slices[i].name;
  openedDoc.name = partsName;
  openedDoc.selection.selectAll();
  openedDoc.selection.copy();
  openedDoc.close();
  activeDocument = doc;
  doc.paste();
  
  var currentLayer = activeDocument.activeLayer;
  currentLayer.name = partsName;
  currentLayer.translate(-currentLayer.bounds[0], -currentLayer.bounds[1]);
  currentLayer.translate(slices[i].rect.x + offsetX, slices[i].rect.y + offsetY);
}

処理内容としては、先ほどexportしたpngを開いて全選択し、ひたすらコピペしている。PhotoshopのJavaScriptでのファイルの扱い方はJAVASCRIPT TOOLS GUIDEというドキュメントに書かれているのだけど、2014版がないし、公式でも探せなくて泣ける。それ以外はここにある。

Alignなどの問題か、文字のレイヤーなどパーツによってずれが出たり、Sketch上で位置を修正してもJSONで書き出した際にboundsが更新されてなかったり(offsetX, offsetYで対応してある箇所)、おかしなところが結構あって、仕事で使うには厳しいといった印象。それでも手でひとつひとつ並べるよりかは楽。