オンラインショップPetitCottageでは写真に力を入れていて、毎月雑貨の写真を使った壁紙カレンダーを無料配信しています。
3年前からはじめたサービスなので枚数はすでに250枚ほどあり、かなり人を呼ぶコンテンツになっています。

基本的にはPetitCottageのお客様に「使ってくださいー」という、販促品？プレゼント？みたいな感覚ではじめたサービスなのでロゴ入り・加工ＮＧの原則で配信しています。
ところが、先日ある法人の方から「写真素材として譲ってください」という問い合わせがありました。

写真素材として販売するのは初めてのケースなので素材販売について調べてみたら、PIXTAという素材販売代行をするサイトがある事を知りました。

・良い写真はいっぱいあるので手間不要
・お店のアピール・新たな流入経路にもなりそう
・お小遣い稼ぎ程度には売れるかも

デメリットが少なかった為、早速登録してみました。
販売ページはこちらです。

PIXTAでは個人の登録もできますし、登録の際に著作権や知的財産権についての説明を受けられます。
みなさんもPCに眠っている、売れそうな写真を探して販売してみてはいかがですか？

画像のリンク先ページから「クリエイター会員登録」を押して、先に進みます。

登録が済んだらメールが送られてきますので、リンクをクリックして本登録を完了します。

本登録が終わるとPIXTA入門講座を受けられるようになります。

・売れやすい写真の構図
・画像の保存形式・サイズ
・著作権、知的財産権
・肖像権、モデルリリース
・写真アップロードとタグ付け

本当に基本的な事項ですので、すでに知っている方は多いと思います。
「知ってるよっ！」という場合は、どんどん先に進みましょう。

基本的なお勉強が終わったら、入門テストです。

入門テストは「写真編」と「イラスト編」で分かれています。
手書きのイラストを販売しない限り「イラスト編」を受ける必要はありませんが、難しいテストではないので受けておいても良いでしょう。

ちなみに入門テストは何回でも受けられます。
テスト後に間違えた箇所は正解を教えてくれるので、それをメモしておけば勉強しないでも合格できます。
が、そんなズルをして著作権侵害で訴えられても知りませんよ・・・

テストに合格したら、写真をアップロードすることができます。

・写真の準備　(撮影・補正)
・アップロードとタグ付け
・審査申請
・(審査に通れば)販売開始

という流れになります。

アップロードの枚数には期間ごとに限度があり、僕の場合は「登録後7日間で3枚まで」という上限がありました。

利用状況や審査合格率によって、アップロード上限枚数は多くなるらしいです。

(登録後1週間以内に1枚もアップロードしなかった僕は翌週も上限3枚でした。)

写真販売について気になるのは、著作権などの問題だと思います。
審査に合格した場合でも万が一問題が起こった場合の責任はアップロードした本人にあります。

抑えておくべきポイントはしっかりと把握しておきましょう。

・人物が特定できる写真は、本人とモデル契約をかわす

「人物が特定できる」の定義があいまいですが、「顔が映っている写真」としておけば問題ないはずです。
人の顔が映っている写真は、勝手に販売することが出来ません。

人の顔が映っている写真を販売する場合は、本人にモデルリリース書類にサインしてもらいPIXTAにアップロードします。
すると写真の販売ページに「モデルリリース取得済み」と表示が出るので、購入する方も安心して購入することができます。

以下のページからモデルリリース契約書類のダウンロードと、サイン後の書類をアップロードすることができます。

・登録商標が映りこんでいる写真は絶対に販売しない

登録商標とはブランドロゴや商品名です。
大抵の企業のロゴ・商品は登録商標を取得している為、勝手に販売することは禁止されています。

ロゴが映りこんでしまった場合、ボカシをかける事で回避できます。
(ＮＨＫの放送でもボカシをかけられた商品を見かけますよね。NHKの場合は公共性の観点だと思いますが。)

ただしボカシをかけた商品は販売素材としての価値はどうなんでしょうか？？
撮影時に登録商標が映りこまないように気をつけることが望ましいです。

・デザイナー系の家具・小物などは気をつける

ロゴと同様に、デザインにも意匠登録で保護されている物があります。
この商品は正式な意匠登録をされているか？すべてを把握することは困難です。

デザイナー系の商品の写真を撮って販売することは避けましょう。

・個人の所有物を勝手に映して販売しない

当然ですね。　ヒトのモノだから、勝手に売っちゃマズイです。

有名な建造物・オブジェなどでも、個人所有のものがあります。
気をつけましょう。

当サイトでは商品写真加工サービスを行なっています。
Photoshopを持っていないショップ運営者の方、写真加工を外注したい方、是非ご連絡ください。

久しぶりに写真補正関連のネタを書きます！

テーマは

冴えない素人写真をプロの商品写真に補正する方法

です。

まずはネットショップで使う予定の商品を撮影します。
今回は撮影テクや構図などには触れませんが、できる限りキレイに取ることが肝心です。

一般的に画像処理にはphotoshopを使いますが高価なソフトですので、まだ持っていない方もいるかと思います。
以前ネットショップ運営で必須と紹介したFireworksでも同等の画像処理ができますので触ってみてください。

手順：

１，　明るさの調整
２，　色あいの調整
３，　彩度の調整
４，　シャープネスの調整

基本的には上記４つの処理を行います。

今回使用する商品写真こちらです。

商品ラベルや形などは認識できますが、以下が原因で素人写真の印象を受けます。

・全体的に青っぽい　(蛍光灯で撮影したため)
・白っぽくはっきりしない　(コントラスト・シャープネスが最適でない)

このような問題は撮影後に補正する事ができます！
では実際にやってみましょう。

明るさはトーンカーブを使って調節します。
後々何度でも調整をやり直せる「調整レイヤー」を使います。

レイヤー　→　新規調整レイヤー　→　トーンカープ

全体がぼやっとした写真はコントラストが足りていないので、白色域はより白く、黒色域はより黒くします。

上のトーンカーブを適用すると、このようになりました。

蛍光灯の下で写真を撮ると青っぽくなってしまう事が多いです。
この場合にはカラーバランスを使って調整します。

レイヤー　→　新規調整レイヤー　→　カラーバランス

全体が青っぽいので、青っぽい値をマイナスにするだけです。

基本的には「シャドウ」「中間」「ハイライト」のすべてで

・シアン/レッドを レッドよりに＋2～10
・イエロー/ブルーを　イエローよりに＋2～10

ほど調整すると蛍光灯の青さは取れます。

参考例では上記基本を微妙に調整して最適化しています。
何回かチャレンジして、写真ごとに最適な値を見つけてください。

最近のコンデジはオートモードで撮ると彩度が強すぎる場合が多くて困ります・・・
彩度を減らす補正というのは難しいので、商品撮影の際は、撮影時に過剰な彩度・コントラストの設定を避けるようにします。
(撮影モードで”とても鮮やか”などは使わないほうが無難です)

今回の例の様に、何だか華のない写真は「彩度」が足りていない場合が多いです。
そんな時はphotoshopで彩度を調節します。

レイヤー　→　新規調整レイヤー　→　色相・彩度

「マスター」の「彩度」を
＋5～15
ほど動かすとキレイになります。

これまでの３つの補正、明るさ・色合い・彩度　の補正が終わったら、彩度にシャープネスをかけて書き出します。

その前に、今まで作成した調整レイヤーをひとつにまとめます。

「レイヤーウィンドウ」で全てのレイヤーを選択して、右クリックで「レイヤーを結合」します。
(または、Ctrl+Shift+E)

結合されたレイヤーが選択されている事を確認したら、アンシャープマスクをかけます。

フィルター　→　シャープ　→　アンシャープマスク

値は画像の大きさによっても異なりますので、例を参考に調整してください。

補正前

補正後

あとは不要な余白部分を切り取ったり、文字を入れたりして使いましょう。

青っぽい(寒色系)写真は基本的に購買意欲をそそりませんので、ネットショップでは暖色系の写真を使うように心がけましょう。

当サイトでは商品写真加工サービスを行なっています。
Photoshopを持っていないショップ運営者の方、写真加工を外注したい方、是非ご連絡ください。

作りながら覚えるAndroidプログラミング　開発環境の整え方から、Androidマーケットでの公開までをサポート
デスクトップをデザインする本 (100%ムックシリーズ)
スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Android対応
iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)
–PR–

僕のショップ「プチコテージ」で、雑貨photo壁紙カレンダーというコンテンツがあります。
ネットショップのくせに全部無料で公開しているので全く儲からないのですが、人気コンテンツになってしまったので止められなくなってしまいました＾＾；

このブログでも書いていますが、最近のスマホ勢力の拡大を危惧した僕は”個人的に”HTC EVOを購入してスマホ利用者の価値観を勉強しています。

昔からショップスタッフに「携帯用の壁紙はやらないの？」って言われ続けていたので、これを機にPC用壁紙カレンダーをスマートフォン向けに再構築します。
過去の配信からカレンダー表示を外してオールシーズンの雑貨photo壁紙が300種類くらいあるので、作り変えるだけで充分なコンテンツになるでしょう。

雑貨好きな人は、ぜひ雑貨photo壁紙カレンダーを使ってやって下さいm(_ _)m
300種類くらいあるので、一日一回変えても一年持ちますよ 笑

※追記：スマホ用サイトをオープンしました。下記リンクにスマホからアクセスするとスマホ用壁紙のダウンロードページになります。

手前味噌ですが、なかなかのクオリティ。。 笑

今回はこの作業の際に作った「機種別壁紙サイズリスト」を公開します。

壁紙製作をする際に勝手に使って下さい＾＾；

スマートフォン　液晶画面サイズのリスト

PCの様に　モニタサイズ＝壁紙サイズ　なのかと思いきや、アンドロイド系は違うんですね。。
僕も先週アンドロイドデビューしたけど、壁紙いじってないので知りませんでしたΣ(ﾟдﾟlll)ｶﾞｰﾝ

仕方ないので、まずは液晶画面のサイズリストを作り、その後に壁紙サイズのリストを作ります。

wikipediaの「アンドロイド>>日本での発売端末」というリストを元にiPhoneを追加しているので、これらのOSを積んだスマートフォンはすべて網羅しているはずです。(2011.8.1執筆)

ちなみに、下記の様に発売年別で色分けしました。
2009年以前　・　2010年　・　2011年

やはりというか当然ですが、年を経るごとに高解像度になっていることがわかります。

備考：
docomo,au,Softbank(ディズニーモバイル),イーモバイルから発売されているモデルのみ。
Wi-Fiのみのモデル、通話機能はあっても「スマートフォン」以外の形状の物は除く
ネットで検索しても実機画像がでてこないマイナーな機種は除く。(縦長or横長の確認が取れないため)

—————————————-
　　横320×縦480
—————————————-
HTC Magic HT-03A (docomo)
iPhone (SoftBank)
iPhone 3G (SoftBank)
iPhone 3GS (SoftBank)
HTC Aria S31HT (イーモバイル)
Optimus chat L-04C (docomo)
Pocket WiFi S II S41HW (イーモバイル)

—————————————-
　　横460×縦960
—————————————-
IS03 AS31 (AU)

—————————————-
　　横480×縦800
—————————————-
HTC Desire X06HT (SoftBank)
HTC Desire X06HTII (SoftBank)
GALAXY S SC-02B (docomo)
HTC Desire HD 001HT (SoftBank)
LYNX 3D SH-03C (docomo)
GALAPAGOS 003SH (SoftBank)
DELL Streak 001DL (SoftBank) ★(縦800×横480)
SIRIUS α IS06 (AU)
Libero 003Z (SoftBank)
DM009SH (ディズニー・モバイル)
GALAPAGOS 005SH (SoftBank)
HTC EVO WiMAX ISW11HT (AU)
Optimus bright L-07C (docomo)
GALAXY S II SC-02C (docomo)
G’zOne IS11CA (AU)

—————————————-
　　横480×縦854
—————————————-
Xperia SO-01B (docomo)
REGZA Phone T-01C (docomo)
REGZA Phone IS04 (AU)
IS05 AS32 (AU)
MEDIAS N-04C (docomo)
Xperia arc SO-01C (docomo)
MEDIAS WP N-06C (docomo)
Xperia acro IS11S (AU)
Xperia acro SO-02C (docomo)
AQUOS PHONE THE HYBRID 007SH J (SoftBank)

—————————————-
　　横540×縦960
—————————————-
AQUOS PHONE SH-12C (docomo)
AQUOS PHONE 006SH (SoftBank)
AQUOS PHONE THE HYBRID 007SH (SoftBank)
AQUOS PHONE IS11SH (AU)
AQUOS PHONE IS12SH (AU)
INFOBAR A01 SHX11 (AU)

—————————————-
　　横640×縦960
—————————————-
iPhone 4 (SoftBank)

スマートフォン　壁紙サイズのリスト

Android壁紙の仕組みはこちらが詳しいです

お次は本題の壁紙サイズです。

先述の通り、アンドロイド端末は 液晶サイズ≠壁紙サイズ　となっています。

ホーム画面を左右にスライドすると壁紙も少しだけ移動する仕組みになっていて　壁紙横幅が画面横幅の２倍　になります。

下の表ではアンドロイド端末は全て
・壁紙：縦　＝　画面：縦
・壁紙：横　＝　画面：横×２
で表記してあります。

しかし、1pxでもずれたらデザインが崩れる壁紙を作りたい場合はご注意ください。

・壁紙が表示されない「ステータスバーの部分」を考慮していません。
・独自のホーム画面を実装している機種などがあります。

つまり、スマホ壁紙サイズは実機を触ってみないと正確な壁紙サイズがわからない、という事になります(;O;)

もし実機をお持ちの方で、正確な壁紙サイズをお教え頂ける場合はご連絡ください。
すぐに修正致します！

「サイズ違うやんけっ！！」というただの罵倒には居留守を使って対応しますので、あしからず・・・

横：縦の比率が　２：３

320×480

iPhone (SoftBank) iPhone 3G (SoftBank) iPhone 3GS (SoftBank)

640×960

iPhone 4 (SoftBank)

横：縦の比率が　４：３

640×480

HTC Magic HT-03A (docomo) HTC Aria S31HT (イーモバイル) Optimus chat L-04C (docomo) Pocket WiFi S II S41HW (イーモバイル)

横：縦の比率が　６：５

960×800

HTC Desire X06HT (SoftBank) HTC Desire X06HTII (SoftBank) GALAXY S SC-02B (docomo) HTC Desire HD 001HT (SoftBank) LYNX 3D SH-03C (docomo) GALAPAGOS 003SH (SoftBank) SIRIUS α IS06 (AU) Libero 003Z (SoftBank) DM009SH (ディズニー・モバイル) GALAPAGOS 005SH (SoftBank) HTC EVO WiMAX ISW11HT (AU) Optimus bright L-07C (docomo) GALAXY S II SC-02C (docomo) G’zOne IS11CA (AU)

横：縦の比率が　約10：9

960×854

Xperia SO-01B (docomo) REGZA Phone T-01C (docomo) REGZA Phone IS04 (AU) IS05 AS32 (AU) MEDIAS N-04C (docomo) Xperia arc SO-01C (docomo) MEDIAS WP N-06C (docomo) Xperia acro IS11S (AU) Xperia acro SO-02C (docomo) AQUOS PHONE THE HYBRID 007SH J (SoftBank)

1080×960

AQUOS PHONE SH-12C (docomo) AQUOS PHONE 006SH (SoftBank) AQUOS PHONE THE HYBRID 007SH (SoftBank) AQUOS PHONE IS11SH (AU) AQUOS PHONE IS12SH (AU) INFOBAR A01 SHX11 (AU)

特殊なサイズ

920×960 (約19：20)

IS03 AS31 (AU)

1600×480 (10：3)

DELL Streak 001DL (SoftBank)

用意すべき壁紙サイズ

端末の数は少ないですが、シェアを考えるとiPhoneサイズ640*960(2：3)は外せません。

あとは端末数が多い10：9(1080×960) と、6:5(960×800)　を抑えておけばいいのでは？

大きめのサイズで作っておけば、実際に壁紙設定する際に切り取って使えます。

よほど画質にこだわらない限りは、比率だけを気にしてサイズは大きめに作っておけば汎用性が高くなります。

液晶サイズに関しては、全然まとまっていない状態で公開してしまいすみません。。
もしみなさんのお役に立てたならば、twitterの方で「Good Job!!」と頂けますと喜びます。

Photoshop 10年使える逆引き手帖 【CS4/CS3/CS2/CS/7.0対応】 (ああしたい。こうしたい。)
Adobe Photoshop CS5パーフェクトマスター―Adobe Photoshop CS5/Extended/CS4/CS3/CS2対応、Windows/Macintosh対応 (Pefect Master Series)
Photoshopデザインラボ －プロに学ぶ、一生枯れない永久不滅テクニック－［改訂第二版］ 【CS5/CS4/CS3/CS2/CS 対応】
奇蹟のPhotoshop "ハイクオリティな写真"をつくるプロのレタッチ術
–PR–

ネットショップで大切な商品写真。

実際の使用場面を再現したイメージ写真や、商品の質感がよく伝わるようにアップで写した詳細写真など。

用途によっていろいろな撮影方法が必要になります。

今回のテーマは「切り抜き写真の作り方」。

画像補正ソフトで背景を切り抜いて、真っ白にする手法です。　

切り抜き写真の効果的な使い方から、photoshopでの切り抜き方法までを説明したいと思います。

１，　切り抜き写真の効果的な使い方
２，　切り抜きに最適な写真の準備
３，　photoshopでの切り抜き加工

写真には一枚一枚メッセージがあります。
山岳写真家が山脈と向き合った時、「この山の過酷さを表現したい」と思ったのか「この山の美しさを表現したい」と思ったのかで、同じ山でも全く違った写真になります。

商品写真も全く同じ。

例えばスニーカー。
「どんなシーンで使うのか？」「どんなパンツと合わせたらかっこいいか？」　という要求には、切り抜き写真では表現できないためモデルを使った撮影が最適です。
しかし、「素材感は？」「靴底はどうなってる？」「いろいろな角度から見てみたい」という要求には、切り抜き写真が最適でしょう。

商品の詳細な画像が見たい時は切り抜き写真が適しています。

ただし、僕は日頃から「切り抜き写真には心がない」と思っています。

確かに切り抜き写真では商品の詳細を知ることができるでしょう。
しかし「楽しさ」や「ワクワク感」は切り抜き写真では伝えられない、という事を忘れないで下さい。

ネットショップでの切り抜き写真の効果的な使い方

・商品の詳細写真として使う。ただし、必ず「使用をイメージできる写真」も使うこと。
・「商品一覧」や「色違いの商品」などのリストで使う

基本的にはどんな写真・被写体でも切り抜きは可能ですが、出来上がりの完成度を高める為に「切り抜き用写真」を準備することが好ましいです。

以下は「切り抜き用写真」に適していませんので、注意してください。

【被写体】
・ガラス製品　(背景が透ける)
・上記以外でも、背景が透ける商品(薄い布など)
・境界線がはっきりしない商品　(ファー(毛皮)製品など)

【セッティング・構図】
・商品のライティングにムラがある
・背景色と商品が同じ色
・商品の一部しかピントがあっていない
・商品の全体が写っていない

背景は無地の白が最適です。
白以外にすると、どうしても背景の色が商品に写りこんでしまいます。
その結果、商品を切り抜いても、境界線が背景色に染まってしまいます。

先に書いた「背景色と商品が同系色はNG」と矛盾してしまいますが、なるべく商品と背景色は合わせたほうが映り込みが少なくすみます。
ただし商品と背景がまったく同じ色の場合は、非常に切り抜きがやりにくいです。。。

このへんのバランスは何回かやってみて習得して頂くしかないですかね・・・＾＾；

では実際にphotoshopで切り抜き加工をしてみます。

使用するのは、僕のネットショップで好評販売中(笑)　モロッコバブーシュです。

ちなみに背景は、実家のリフォームで余った白系の壁紙を使用しています。
白色のロールスクリーンは何万円かするので、節約節約＾＾；

まず初めに「マグネット選択ツール」でおおまかに選択します。

マグネット選択ツールで商品の輪郭にそってドラッグします

後で修正するので、おおまかで大丈夫です

選択ができたら「クイックマスクモードで編集」を押します。(or ショートカットキー”Q”)

マスクのアイコンをダブルクリックでマスクの色を変更できます

商品と反対色のマスクにすると切り抜きやすいです

マスクモードになったら、ブラシツールを選択します。(or ショートカットキー”B”)

ブラシツールを選択したら描画色が黒になっていることを確認します

ブラシツールの黒でマスクが足りない部分を塗り足します。
マスクがはみ出している所は、消しゴムツール or ブラシの白で塗ります。

ブラシや消しゴムの大きさは好みで調整してください。

で、こちらが修正後

商品に多少食い込む程度の方が綺麗な仕上がりになります

修正が終わったら、先ほどの「クイックマスクモード」アイコンをクリックします。(or ショートカットキー”Q”)

商品だけ綺麗に選択されました

メニューの「レイヤー」→「新規」→「選択範囲をコピーしたレイヤー」をクリックします。

選択範囲をカットしたレイヤーでも構いません。お好みで。。

レイヤーウィンドウに新しいレイヤーが出てきますので、元々のレイヤー「背景」を削除します。

切り抜きのレイヤー「レイヤー１」が新しく登場します

背景を削除したら切り抜きの完成！！

「別名で保存」でJPEGを選択した場合は、透明部分は自動的に白になります。

「手動で白い背景を作りたい場合」や「白以外の背景色にしたい場合」は、切り抜きレイヤーの下に新規レイヤーを作成してベタ塗りしてください。

こちらが完成した切り抜き写真です。

明度・彩度の補正やリサイズをすれば、すぐにでもサイトにアップできます

切り抜き写真は汎用性を高める為、色調補正をする前に保存しておきます。

実際に使う際に、先ほど保存した切り抜き写真に色調補正・リサイズを施します。

こうすることで、切り抜き写真が必要になったときに毎回切り抜き作業をする必要がなくなります＾＾

お困りの場合はtyのtwitterにつぶやいてください！

実際に切り抜きたい写真を見せて頂けたら、簡単なアドバイスができるかと思います。
またphotoshopの操作方法でお困りでしたら(CS2・CS5なら)、大抵わかります。

あ、あと今回作例で使ったバブーシュが気になっちゃった場合は僕の運営するショップ・プチコテージを覗いてください 笑
【プチコテージ】モロッコバブーシュ　一覧

当サイトでは商品写真加工サービスを行なっています。
Photoshopを持っていないショップ運営者の方、写真加工を外注したい方、是非ご連絡ください。