I’m with ＜(=｀ω´=)＞

Create a Retro Photo and Background
やってみた。というか、ところどころ勝手にアレンジしているところがあるし、素材の画像もまったく違うものを使っているので、加工したい写真がコレと違いすぎる場合は元記事を参照したほうが良いかも。グリーン調の写真ならほぼほぼ、そのままいけると思います。ちなみにPhotoshop CS3で作成。

1. 使用するのはこの写真。（屋久島行ったとき撮ったやつです）
   
2. [イメージ]→[色調補正]→[レベル補正]（Control + L）で、つぶれない程度に輪郭を強調する。
   
3. 古い写真っぽく見せるため、レッドを強調して色褪せた感じに。
   [イメージ]→[色調補正]→[カラーバランス]で、シャドウ・中間調・ハイライトをそれぞれ設定。
   
   
   
4. [イメージ]→[色調補正]→[色相・彩度]（Control + U）で、以下のように調整。
   
5. 新規レイヤーを作成。グラデーションツールを選択し、グラデーションエディタを開いて以下のように設定。不透明度を２０％に。
   
6. 以下のようにグラデーションを配置する。
   
7. 選択範囲ツールを使って写真の四隅だけを残し、不要なグラデーション部分を削除。
   
8. 写真レイヤーに戻り、[レイヤー]→[レイヤースタイル]→[境界線]を使って、縁取り用の線を作成。
   
9. ここから荒い紙素材をダウンロードし、サイズを調整して一番上のレイヤーに配置。（表示モードは乗算に）はみ出した部分は削除。
   
10. このままだと暗いので、紙素材を[イメージ]→[色調補正]→[トーンカーブ]（Control + M）で調整し、写真と馴染ませる。
    
11. こんな感じ。
    
12. ここから背景画像をダウンロードし、一番下のレイヤーに配置。
    
13. 背景画像を[イメージ]→[色調補正]→[レベル補正]（Control + L）＆[色相・彩度]（Control + U）で、以下のように調整。
    
    
14. 新規レイヤーを作成し、以下のようなグラデーションを配置する。
    
15. こんな感じ。
    
16. 背景以外のレイヤーを全て選択し、[編集]→[自由変形]（Control + T）で角度を付ける。
    
17. 写真レイヤーを選択し、[レイヤー]→[レイヤースタイル]→[ドロップシャドウ]で写真に立体感を付ける。
    
18. 完成！
    

以下、中国に勤務する中国人スタッフが頑張って書いた日本語メール。

ただの誤字なのか、それとも狙っているのか。

すんなりできると考えていた方法が、なぜかFirefox以外でうまく動かず、1時間くらいハマってしまったのでメモ。

やりたかったことは(1)チェックボックスをトリガーにし、ターゲットのinput type=”file”のvalueを削除 → (2)disabledでフタをかぶせる → (3)チェックボックスのチェックを外したらinput type=”file”を再度アクティブに。（※valueは空）

要は、画像管理ツールで上書きと削除のアクションが同時にできないから、javascriptでわかりやすく制御したかったのです。（そもそもvalueを削除する必要があるのかっていう気はしないでもない）

そのvalueを空にする部分がうまくできなかったんだけど、色々調べて解決。うまいこと考える人がいるもんだなー。

簡単に言うと、valueを書き換えるのではなくinnerHTML使って、「inputごと格納 → 吐き出し」というやりかた。これだとvalueが空になって戻ってくるし、IE、Opera、Safariでも問題なく動いた。

通常のvalue操作ならこんなイケてない処理はしなくていいはずなんだけど、input type=”file”は例外のようで・・・セキュリティー的な問題かな？

HTML

<p class="photoBox">
	<img src="hoge.jpg" width="100" />
</p>
<label class="deleteFlag">
	<input type="checkbox" value="foo" class="checkBox" />この写真を削除する
</label>
<p class="fileBox">
	<input type="file" value="" class="fileFlag" />
</p>

JavaScript（jquery）

$(document).ready(function(){

	$(".deleteFlag").click(function(){
		$fileBox = $(".fileBox", $(this).parent());
		$flag = $(".checkBox", $(this))[0].checked;
		if($flag){
			$fileBox.html($fileBox.html());
			$(".fileFlag", $(this).parent()).attr({disabled:"disabled"});
		}else{
			$(".fileFlag", $(this).parent()).removeAttr("disabled");
		}
	});

});

jqueryはもう少しうまく書けそうな気がする。（ドキュメントちゃんと読んでないし）

SEOやUIを考えるうえでAmazonは非常に参考になるサイトですが、見れば見るほど、こんなことまでこだわってやってるんだなーと思います。
今回はヘッダーのtitleの記述方法で、ひとつ気がついたのでメモ。

• PCブラウザから”海辺のカフカ”で検索。
  
• 検索結果一覧ページでは以下のように表示。
  
• Amazonページのtitleタグも同様。
  
• iPhoneから”海辺のカフカ”で検索。ここまではPCブラウザと同じ。
  
• Amazonページのtitleタグは以下のように。”Amazon.co.jp:”が消えて商品名が最初にくる。
  

思うに、iPhoneだとブラウザの横幅が狭いので、先頭の”Amazon.co.jp:”を表示しないようにしているんじゃないかと思う。逆にPCブラウザで”Amazon.co.jp:”を表示する理由は、Amazonブランドが認知されている（認知させたい）から最初に表示するようにしているのではと思う。
現状のセオリーだと、「商品名 - カテゴリ名 - サイト名」と、ブレッドクラムを逆にしたような記述が一般的であって、対してこういう見せ方はAmazonならではの発想だなと。なるほど。

以下のようにアドレスを加工すれば登録可能。gmail以外でもできそうだけど、未確認。

hogehoge@gmail.com

の場合は

hogehoge(gmail.com)@msn.com

でＯＫ。