kmxslog

[graphics] Peace Tank

kmxs — Mon, 02 Nov 2009 15:56:17 +0000

■ non Calender
1920×1200｜1680×1050｜1440×900｜1280×960｜1280×800｜1280×1024｜1024×768

■ with Calender
1920×1200｜1680×1050｜1440×900｜1280×960｜1280×800｜1280×1024｜1024×768

いやー、空きましたねぇ！
ずっと温めてたネタだったんですが、時期もいいし、何かキてるみたいだったから戦車にしました。
世界の戦車や戦闘機が、平和を運ぶ世の中になるといいですね。強いし早いし。

RT : Progression3が一周年なので

kmxs — Wed, 09 Sep 2009 16:23:44 +0000

もう1年かぁー。

ということで、 Launching “Progression 3″ in Apple Store, Ginza から1年が経ったみたいです。
思えば、上京して何もコネもツテもなく、何の実績もない技術もないボクが、どういうギャンブルか知らないですが、ワークショップの講師になれる何と言うその器の大きさ。

正直 Progression 周辺はその道のプロフェッショナルが多くて、凹むことの方が多いです。
が、今のボクがあるのは Progression と takaさんと、ちょっとだけ人見知りしないってことだと思います。
ドネーションしないといけないなぁ。とw
額とかどーでもいいんですよ（いや、よくなかったりするけどw

仕事では一向に使う機会がないのですが、なるべく付いていこうと思います。
次のバージョンは色々と酷いことになっているみたいですしね。

最近は茶杓ってどうやって作るんだろう、
あ、ちっちゃいカンナあったら楽そうだな、まずはカンナ作るか、
茶杓入れにやっぱ直筆の作品名書きたいよなぁ、10年ぶりくらいに書道かな、
とかそんなことを考えてます。アナログ。

あと、ボクもだいぶ久しぶりの更新でした。。。w

extends CSS ? LESS - Learner CSS（の和訳）

kmxs — Wed, 17 Jun 2009 10:52:36 +0000

なんというか、久しぶりの記事がグラフィックスでもなくprogressionでもphotoshopチュートリアルでもなく、cssという、なんともカオスブログの様相を呈してまいりました[謎]
cssなのに変数が持てたり、カスタムのプロパティを使えたりできるかもっていう紹介記事です。

プロパティの一個だけ微妙に違う、のがいっぱい、、とかよくある（？）こと

みなさんはcssを組む時、あるひとつの要素のいくつかあるプロパティの、
ひとつだけ微妙にサイズや色が違ったものが欲しい時にどうしてますか？

まぁ普通に名前かえて別のクラスにしたり、継承したりするんでしょうけど、（ボクの場合）そんなうまく行かなかったりすることも多々あって、変数を持てたりクラスの中でカスタムクラスを指定したりできたらいいなーと思っていたんです。

で今朝、いつもお世話になっているコリスさんで、このような記事が紹介されていて、

[CSS]変数などを使用してスタイルシートの記述ルールを拡張できる -LESS

何となくボエーって見てたんですが、大人の事情やらブラウザ爆発やら色々ありますが、
スクリプトまでとはいかないまでも、だいぶ楽になるかもしれないです。

LESS - Leaner CSS

LESS は従来の CSSシンタックスを用いています。
なんで、.css を .less に移行させるのはすぐで、実質学習コストはほぼゼロです。

だそうで（すでに意訳）、おもしろそうなんで読んでみたついでに和訳してみました。

＃まぁ、CSS分かる人は、サンプルのコードを見れば把握できると思うんですが…

Docsページの分を載せておきます。

だーーーっと読んでざーーーっと訳してる上に勝手な意訳入っています。。
あと【1. Installation】と【2. Using the gem】は、コマンドラインとかそもそもの理解が少なくかなり怪しいです。間違ってたら間違ってるぞチンカスって教えてください。時間できたらやってみて、そしたらこの辺もちったぁ分かると思います。

あとは誰かが.lessを書けるエディタを作ってくれたらばっちりですね。

では、

LESS - Leaner CSS ドキュメント｜http://lesscss.org/docs.html

1. インストール

CSSの拡張がLESSです。LESSをコーディングするのはCSSをコーディングするのと変わりません。
ただ、LESSをCSSにコンパイルするのにgemが必要となります。
rubyやruby-gemsのある環境で、下記のコードを実行することでインストールできます。

$ sudo gem install less

rubyのインストールについてもう少し知りたい方は rubyのオフィシャルサイトへどうぞ。

2. gemを使う

gemはrubyの入ったコマンドラインから実行できます。
コマンドライン”lessc”は、次のように記述します。

$ lessc [LESS file] [CSS file]

lesscは、CSSのファイル名を省略すると、LESSファイルと同じ名前のCSSファイルを生成します。

$ lessc style.less

また、次のように記述すると、style.less ファイルを stylesheet.css にコンパイルします。

$ lessc style.less stylesheet.css

さて、LESSファイルを更新するたびにCSSにコンパイルしなおすのは大変ですね。
そこでlesscでは、LESSファイルが上書きされる度に、CSSにコンパイルしてくれるオプションがついています。

$ lessc style.less --watch

style.lessを上書きすると、LESSコンパイラーは新しいstyle.cssを同じディレクトリに生成します。
何かエラーが発生すると、コンパイルを中断し、ターミナルにエラーを表示し、どこが悪いのか知らせてくれます。

rubyでは、以下のようにLESSコンパイラを呼び出すことができます。

require 'less'
Less::Engine.new("a { color: 1 + 1 }").to_css

これはこのようにoutputされます。

a { color: 2; }

3. LESS の特徴

3.1 Variables

一度変数として値を準備しておくと、スタイルシート全体でその変数を使い回すことができます。
これで、1箇所その値を変更するだけで変更を適応することができます。

変数は以下のように定義します。

@nice-blue: #5B83AD;

変数’@nice_blue’に’#5B83AD’という青色のコードが割り当てられています。
もちろんここはパーセンテージでもピクセル数でも何でもいいです。

この変数を使用するのは簡単で、要素のプロパティ部分に記述すればいいだけです。
例えば、要素#headerのbackground-colorプロパティで’@nice_blue’変数を使いたい場合、
このように記述すればOKです。

#header { background-color: @nice-blue; }

3.2 Mixins

Mixinsは、あるクラスやセレクタ内で、他のクラスを引用したい時に使うクラスです。
そしてこのクラスはそのクラスの中のすべてのプロパティを含みます。
例えば’bordered’というクラスを設定し、

.bordered {
    border-top: solid 1px #000;
    border-bottom: solid 1px #000;
}

今回の例ではtopとbottomにラインを引くものですが、
この’bordered’クラスのプロパティをごそっと他のクラスで使いたかったとします。
その場合、いちプロパティとして扱うだけで’bordered’クラスを他のクラスにミックスすることができます。
‘bordered’クラスを#header要素にミックスしたい場合、以下のように記述します。

#header { .bordered; }

#header要素のtopとbottomに、’bordered’クラスで指定した#000色1pxのボーダーがつくはずです。

3.3 Nested rules

Nested rulesは、「継承」をより構築しやすくなります。
それまでは長ったらしく書いていたものを、1つのセレクタの中で指定することができるのです。
#header要素内に、navigationクラスとlogoクラスを設ける場合の例を示します。

#header { color: black; }
#header .navigation {
    font-size: 12px;
}
#header .logo {
    width: 300px;
}

LESSを用いると、
#header要素のセレクタ内に.navigationクラスもlogoクラスもコーディングすることができます。

#header {
    color: black;
    .navigation {
        font-size: 12px;
    }
    .logo {
        width: 300px;
    }
}

3.4 Operations

Operations は、LESSで指定したものに四則演算が使えるシンプルなものです。

border-top: @main_border_width - 1px;

この例では’@main_border_width’から1px細い線を指定しています。
たくさんの要素がある中で’@main_border_width’と関連させつつ、全体を簡単に変更できます。
以下がいくつかのサンプルです。

color: #fff / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

コードを扱うことがないブログなんで、Google Syntax Highlighter for WordPress などを初めて導入してみたら動かないし、@_simoさんのお助けつぶやきで動くようになった（ありがとうざいまっす！）のはいいけど、スタイルずれてるし、何か色々ごめんなさい

Web Designer Inspire Night VOL.2 行きまーす

kmxs — Wed, 13 May 2009 15:11:52 +0000

最近してない！
ってことで Web Designer Inspire Night VOL.2 行くことにしました、平日だけど。
＃さらに定員こえると抽選らしいので行けるかははげしく謎ですけどっ
＃登録しようとしたら何か「派遣やんないか？」的な質問があって何か新鮮でした

スライドショーなコンテンツって究極だと思うんです

最近もっぱらAfterEffectsやらPhotoshopばっかりで全然Flashってないんですが、 trick7 さんのこの記事がヒジョーに興味深いです。
スライドショーって一見さんをグッと引き込むようなGUIだったり動きの気持ちよさだったりシナリオだったり目の付けどころとか企画だったり。はたまた技術的な面で言うと、読み込み・読み込んだ後の扱い・快適さ等々、要求されるものが多い＋盛り込めるものも多い。

そして何と言っても、たいていのところに「あってもいいもの」ですよねー。
このサイトとかこのサイトとかかなりドつぼなんですが、背景のスライドショーがあるかないかで全然違う。

こういうのFlashの超得意分野で専売特許だと思うんだよなぁ。
でもまぁ、もう既にかなり出尽くした感じではありますが。。。w

そういう話もあるみたいなので、メモ帳片手に乗り込みたい所存であります。

で、まぁ

目標としては、progressionをCMSと連動させて、時にはPV3DやらBox2Dを組み合わせて、
気持ちのいいサイトを作れたらいいなぁってのが当面の目標だったりします。
が、AfterEffectsとかやっぱ楽しいなぁーとか、 GOEMON 見てはああいう世界観のグラフィックををガチで長期間かけて横3000px/350dpiで作りたいなぁーとか、
って例によってふわふわした感じではあるのです。ダメだなぁ。

ダンボールにジッパーがついたアイコン（.psdつき

kmxs — Thu, 30 Apr 2009 12:42:38 +0000

ちょいちょい手間のかかる小物（？）も、最近は探せばハイクオリティのものがフリーで落とせてきたりします。それを使うか使わないかはまた別ですが、かなり参考になります。

で、ダンボールにジッパーがついたのないかなーと思ったんですが見つからず、作った方が早いような感じだったので作りました。パッケージ分けるのもナンなので、.png全部入りパッケージ＆.psdファイル。

.psdの方にはレイヤーで普通にガムテープのやつも入ってます。
ダウンロードは以下です。ご自由に。

.png全部入りパッケージ

（zip/3MB）

.psdファイル

（zip/650KB）

[photoshopTutorial] theWorld

kmxs — Tue, 28 Apr 2009 15:08:05 +0000

前回言ってた通りチュートリアル書いてみました。
step50くらいあるとかもう嫌がらせですね！！今回からかなり Psdtuts+ を意識して書いてみてますw
こんなのできるなんてサラリーマンの利点！w

[chapter1] だだっ広い荒野をつくる（step0〜step7）

[chapter2] 空を歪ませる（step8〜step15）

[chapter3] 地割れさせる（step16〜step20）

[chapter4] オーラの玉？でっかいシャボン玉？をつくる（step21〜step37）

[chapter5] 軽めの竜巻を起こす（step38〜step42）

[chapter6] 塵・葉っぱを舞わせる（step43〜51）

[Finish] 完成イメージと.psdファイル

ボクの手癖？として、画像を消したり補正したりする場合は、調整レイヤーやレイヤーマスクなどを使って、なるべくオリジナルのレイヤーを直接いじらないようにするみたいです。ので、レイヤーマスクで消したり見せたりしているところは直接消したりしても同じです。では始めます！

[chapter1] だだっ広い荒野をつくる

step0
背景色が白（#FFFFFF）の新規ファイルを作成します。

step1　だだっ広い荒野をつくる
新規レイヤーを作成し、そこに砂漠の画像を貼付けます。砂漠の画像を持ってきてそれなりの角度、大きさに変形します。「編集＞自由変形」（切り替え画像）。

kmxslog

[graphics] Peace Tank

RT : Progression3が一周年なので

extends CSS ? LESS - Learner CSS（の和訳）

プロパティの一個だけ微妙に違う、のがいっぱい、、とかよくある（？）こと

LESS - Leaner CSS ドキュメント｜http://lesscss.org/docs.html

1. インストール

2. gemを使う

3. LESS の特徴

3.1 Variables

3.2 Mixins

3.3 Nested rules

3.4 Operations

Web Designer Inspire Night VOL.2 行きまーす

スライドショーなコンテンツって究極だと思うんです

で、まぁ

ダンボールにジッパーがついたアイコン（.psdつき

.png全部入りパッケージ

.psdファイル

[photoshopTutorial] theWorld

[chapter1] だだっ広い荒野をつくる

[chapter2] 空を歪ませる

[chapter3] 地割れさせる

[chapter4] オーラの玉？でっかいシャボン玉？をつくる

[chapter5] 軽めの竜巻を起こす

[chapter6] 塵・葉っぱを舞わせる

Finish

[graphics] theWorld

photoshopのメニューとかの和訳（英訳）ステキサイト

[photoshop]graphics003

After Effects のハブサイトOPEN！

映像の世界もこれからはオープンソース？