タグ: 画像

ロゴやトップ画像をRetinaディスプレイ/IPS液晶に対応させました。

blog.cdbk.net

4retina
cdbk.net CREATIVESのサイトをスマートフォンに加えて、タブレットやMacBook ProなどもRetina / IPS液晶になり、見ると滲んでしまうという状態が続いてしまっていたので、Retinaディスプレイなどに対応した画像に差し替えorCSSの変更を行いました。
対応させる方法として、実際の表示サイズよりも大きなサイズの画像(約２倍程度)を用意し、CSSなどでサイズ指定を行い、縮尺表示を行っています。写真の場合はサイズがそのままファイルサイズになってしまうため、機種などを判定して差し替えるといった方法をとる場合が多いですが、文字など色数が少ない画像を使っている場合はそれほどファイルサイズも大きくならないので、実サイズより大きなものをそのまま使っています。
そのほか制作フローを簡単な図でコンテンツに追加したりしました。

デコメ用画像を検索できるサイト「LookApps for decomail」リリース

blog.cdbk.net

Lookappsdeco

以前作っていたデコメ用画像検索サイトをデザインしなおし、公開しました。

サイズ、使い勝手はスマートフォン向けに最適化、内容も出来る限りシンプルにしています。

検索エンジンにはGoogle Search APIを使用、使えば使うほどおかしいところ散見かもしれないですが、そこはBETAということで改善し続けていきます。

スマートフォンにしてデコメしたいけれど、画像がないといったかたにぜひ使ってもらいたいです。

LookApps for decomail / デコメ用画像を簡単検索

WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法

blog.cdbk.net


Caps
最近UIが一新され、新たなアプリケーションのインターフェイスを形にして切れた「Twittelator」。
そのインターフェースの中で自分が一番気になった画像表示のエフェクトをjQueryを使ってcdbk.net CREATIVESのshowcaseで形にしました。
使うのはjQuery.js(今回は1.4.2)とイージングのエフェクトを簡単に追加できるjQuery.easing.js(1.3)のみ。
エフェクトを施したい画像を<span class=”jumpin”></span>で囲みcssでdisplay:block,overflow:hiddenを指定。
JavaScriptはjQuery、easingを<head>内に追加したあとに下記を追記。

//初期表示設定
function jumpin_set(){
	$(".jumpin").each(function(){			//指定するクラス
		var img_w = $(this).width();		//デフォルトの画像幅取得
		var img_h = $(this).height();		//デフォルトの画像高取得
		$(this).attr({"data-h":img_h});		//デフォルトの画像高を属性として保存
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},100); //画像の高さを縮小
	});
}
$(document).ready(function(){
	$(window).load(function(){
		setTimeout(function(){
		jumpin_set();
                }, 100);
	});
	$(".jumpin").hover(function(){//マウスオーバー時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		var next_h = $(this).attr("data-h");
		if(next_h){
		$(this).animate({opacity:1,"box-shadow":"none",width:img_w,height:next_h},1000,"easeOutElastic");
		$("img",this).animate({height:img_h},100).animate({height:next_h},100);
		$(this).removeAttr("data-h");
		}
	});
	$(".jumpin").mouseout(function(){//マウスアウト時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		$(this).attr({"data-h":img_h});
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},1000,"easeOutElastic");
	});
});

サンプルスクリプト
上記でスクリプトやCSSがバッティングしていなければ動作すると思います。
続きを読む “WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法”

N-04A/N705i/N706iII用待ち受け画像

blog.cdbk.net


携帯向け待ち受け画像のFlash版を公開しました。N-04A,N705i, N706iⅡに最適化したサイズとなります。
QRコードも掲載しておりますので、携帯から直接アクセス→保存もできると思います。
※PC版のFlashでは動作しないため表示がないもしくは０のままとなっています。
上記ドコモ対応端末において正常に動作することを確認しております。
【注意点】

  • バッテリーゲージが３以上のときに動作、それ以下になると停止します。
  • 待ち受け設定時の電気消費が著しく激しい場合は使用を停止してください。
  • 本掲載画像の使用による端末の不具合について、責任を負いかねます。
  • お使いになられる際はコメントなどいただけると幸いです。


現在は非公開にしております。
制作依頼・詳細はcdbk.net CREATIVESにて

最近覚えた画像処理法

Kentaro Kitagawa

加工前
加工後
若干の違いが分かるでしょうか？
ちなみに写真撮影は午前5時半ごろ･･･
レベル補正のレンジを4分割してその4種に対して補正、その後合成という方法。
実際のものとの差異を軽減することができるようです。
日中の写真などでやると効果的･･･？

PowerPoint2000で画像背景を透明に

Kentaro Kitagawa

パワーポイントでも一般的なＷｅｂで使用する画像などが使えると思うのですが、普通に使うと、ベクター形式でない限り、画像枠の四角形のままが表示され、見栄えが悪く見えてしまう。
そこでもしやと思い、PNGの32bitで画像を作成して読み込んだところ、見事背景の透過に成功、それだけでなく、画像そのものの透明度（アルファ）も制御できました。
これで、かなりデザインの幅も広がる・・・
あとコツとしては少し大きめで書き出して使用すること。
そうすると線がぼやける現象を抑えられます。

サイトにQRコード発行（携帯待ち受け画像向け）機能を追加

Kentaro Kitagawa

ようやく追加できました。

biosynthesis+内、Portfolioコンテンツの画像を携帯待ち受け画像向けのサイズ（最大幅320ピクセル）にリサイズする機能と直接リサイズしたサイズに携帯でアクセスするためのQRコード生成機能を追加しました。
QRコード生成のプログラムはこちらのサイトで配布されているものを使用させていただいています（感謝）
現状、横長の画像がほとんどなので、縦長に変換するようになっていますが、回転させるとGIF同様の画質になってしまいます。とはいえ、案外簡単に追加できたので、ぜひ使ってほしいです。