「HTML5で冷気を表現したサイトがすごいな」を分解してみた！ / SQUEEZE - Web Design Studio -
「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過pngで作成されたリアルな冷気画像を、少しずつ動かして描画します。(1)は右から左へ、(2)は時計まわり、(3)は上から下へ。 スムーズなループアニメーション (1)の右から左へのアニメーションの場合、同じ位置に同じサイズで<canvas>を2つ配置して、それぞれに同じ透過pngを描画します。片方は透過pngの幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ
写真が動く！ gifアニメーションコンテスト！
なんと不思議な世界でしょう。 米Gizmodo人気コーナーShooting Challenge。今回は動く写真がテーマでした。数枚撮影して上手い事重ねてアニメーションgifにするわけです。フレームの中で動いているのは一部分だけ、普通の写真とも動画とも違うなんとも不思議な雰囲気のするイメージにしあがっています。なんと言いますか、世界が君だけのために動くのを止めたようなものや、世界から忘れ去られたような、そしてなんだか怠けた気のゆるんだ世界へやってきたような。そんななんとも言えない動く写真のよりすぐりをどうぞ！ まずは、トップ画の優勝者から！ Kert GartnerさんPanasonic GH2と一緒にカナダのビーチに行った時に撮影。何枚も写真を撮影するのではなく、動画を撮影し、そこから1枚の画を作りました。ネットのチュートリアルではPhotoshopを使って編集するのがベストとありましたが
2Dなのに飛び出す！ 3D環境ゼロでつくる3D写真のつくりかた - 週刊アスキー
3Dカメラや3D対応パソコンを使わず、今あるカメラとパソコンでなんちゃって3D画像をつくってみよう。 ●その１● 今あるコンデジで写真を2枚撮影し、3Dっぽい写真をつくる 普通のデジカメでも、被写体を中心にちょっとカメラ位置を横にずらして（あるいは横に少しだけ移動して）2枚撮影し、鉄板無料ソフト『ステレオフォトメーカー』で合成すると、3Dっぽい画像をつくることができる。試しに2枚撮影してみよう。 この2枚の写真が…… ↓↓↓ ぷるぷるふるえて"ちょっと飛び出してるふうの写真に！ ぉぉぉぅ これは、鉄板無料ソフト『ステレオフォトメーカー』に取り込んで画像を調整し、GIFアニメとして保存したもの。ソフトを起動し、２枚の写真を読み込んだら、メニューから"簡単位置調整"を選択しよう。1枚目の写真と2枚目の写真が色違いで表示されるので、ここで中心人物などの位置と大きさが重なるように位置調整。大きさや
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
