ECサイトやWEBに関する事

thinks of website

  • ホーム
  • about
  • お問い合わせ
トップ ›
デザイン ›
Photoshopで切り抜き、制作時間と精度で比べる

Photoshopで切り抜き、制作時間と精度で比べる

デザイン

Photoshop(フォトショップ)を使って切り抜く方法は検索すれば色々と出てきますが、短時間でそれなりの精度で切り抜く方法と精密にじっくりと時間をかけて切り抜く方法とで、使用するツールが変わってきます。
ここでは一つ一つの切り抜きに時間がほとんどかけられないけど、それなりに綺麗に切り抜きたい方向けに幾つかの切り抜き方法をご紹介します。

20160925 001

今回使う写真はネットショップやネットオークションをされる方向けに白い背景(グレーに見えますが)の上に商品を置いて撮影した写真を使います。

クイック選択ツールを使う

かなり極端な例ですが、「本当に時間がないけどアマゾンではメイン写真は背景が白くないといけないので、とりあえず切り抜けてたらいい」という方にはクイック選択ツールをお勧め?します。

2016 09 25 16 03 45まず、選択する側を商品自体にするか背景にするかを決めます。(今回は背景を選択するように選択しています。)上の写真では手と胴体部分が選択されていません。(大抵このようにザックリとしか選択できません。)この後、選択する範囲の直径を小さくしていきます。(macではoption+ctlを押しながらマウスを左右にずらす事で直径が変化します。)
直径を小さくしたら選択できていない部分をクリックしていき大まかに選択できたら今度は微調整していきます。
選択したい部分より内側に入りこんでしまった部分を直していきます。(macではoptionを押すと直径の真ん中部分がプラスからマイナスに変化します。)マイナスになっている状態で切り抜きたくない部分の際に沿うようにマウスを動かし選択範囲を修正していきます。

20160925 002
最終的に出来上がった写真。

2016 09 25 17 08 28
出来上がった写真の細部。
正直、かなり微妙な出来栄えです。
切り抜きを商売として請け負ってる業者がこれを上げてきたら、やり直し確定レベルですが、業者に頼む予算も無く更に自分で作りこむ時間のない方の妥協点としての出来栄えです。

制作時間(1(短い)〜5(長い)で評価):1
精度(1(悪い)〜5(良い)で評価):1

マグネット選択ツールを使う

マグネット選択ツールは癖があり、慣れるまで少し時間がかかりますが慣れれば意外と早く選択できます。
まず選択する前にツールのオプション部分にある「頻度」の数字を100まで上げます。(この頻度では選択していく時に出来る固定ポイントをどの位の頻度で出すかを決めます。0は少ない。100が多い。)
背景と商品の際部分に円で囲まれたプラスを持っていきそのまま際部分をなぞっていきます。基本はそれだけです。最終的に最初のポイントに繋げれば選択範囲ができます。
Hinndo100
頻度100に上げて選択していった例。

Hinndo10
頻度10で選択していった例。

マグネット選択ツールにある癖とは、選択する境界線が曖昧だと近くにいる境のハッキリした部分まで選択部分が飛んでしまうことです。上の写真で言うと腕の部分が格子状になっていてベースが白に紺の線が入っています。そこにグレーの背景で実際は白の境目で選択したいのですが、マグネット選択ツールでそのまま選択していくと濃い紺の線に選択範囲が入ってしまいます。
そこでちょっとした技としてこのような曖昧な箇所は自分で細かく固定ポイントを打っていきます。頻度100よりも細かい点を打っていき白の部分を強制的に選択させます。

20160925 003
最終的に出来上がった写真。

20160925 0032
出来上がった写真の細部。
顔や足などはそれなりに切り抜かれている感がありますが、やはり腕部分が気になります。

制作時間(1(短い)〜5(長い)で評価):2
精度(1(悪い)〜5(良い)で評価):2

多角形選択ツールを使う

先ほどのマグネット選択ツールと同様に際部分にそって選択していくのですがこちらは添わすのは手動なので曲げたい箇所でクリックして固定していきます。(固定しないと真っ直ぐなまま)基本が真っ直ぐしか行かないので曲線は地道にクリックして曲げていきます。
20160925 004
最終的に出来上がった写真。
切り抜き写真としてこの大きさで使う分には問題ないレベルです。

制作時間(1(短い)〜5(長い)で評価):3
精度(1(悪い)〜5(良い)で評価):3

まず多角形選択ツールを使いその後、境界線を調整する

多角形選択ツールは使い勝手のよいツールですが難点があり、それは髪の毛等の細かい選択が苦手。(と言うよりこれに関しては実際に選択範囲を決めていくのは自分なので自分の腕次第ということにもなりますが。)髪の毛を選択するのに何時間もかけていいのであればひたすらカチカチとクリックしていきますが、というかそこまでして多角形選択ツールを使い倒す必要もないので、ここで強い味方。「境界線を調整」を使い髪の毛等細かい部分を切り抜いてもらいます。こちらはあくまで補助の要素として使ったほうがいいモノです。
20160925 005
「境界線を調整」で全体を切り抜こうとしても殆どの場合、うまくいきません。「境界線を調整」は髪の毛やファーなど境界線のハッキリとしないボアボアしたようなものの切り抜きが得意です。

ペンツールを使いパスを引いていく

王道中の王道ですね。数年前までPhotoshopで切り抜く作業としてこれしか使わないという人はかなりいました。簡単に言うと多角形選択ツールの強化版で、同じAdobe(アドビ)アプリケーションのIllustrator(イラストレーター)を使ったことのあるかたならお馴染みのツールですね。
パスを使いベジェ曲線を描いていく制作方法で、慣れるまで結構な時間を要しますが雑誌等、紙面の切り抜きでは殆どこの方法で切り抜き作業が行われる位、精密な切り抜きができます。

20160925 00622
アンカーポイントと言われる基準点を結んで囲んで選択範囲を作っていきます。アンカーポイントも多角形選択ツール同様、そのままクリックしただけではカクッとした線しか引けません。曲線を引く場合はアンカーポイントの打ち込み時、クリックしたままでマウスを上左右に動かすとハンドルが出現します。その状態で上下左右に動かしセグメントと呼ばれる選択範囲の線を調整していきます。
通常はハンドルを出現させて出来る線は曲線になります。逆に角としたい場合は(macの場合)optionを押しながらハンドルを動かします。

20160925 006
最終的に出来上がった写真。
綺麗な切り抜きができます。

制作時間(1(短い)〜5(長い)で評価):5
精度(1(悪い)〜5(良い)で評価):5

まとめ

実際にはこのツールだけしか使わない何てことはしないで、色々なツールを組み合わせて切り抜くのが良いと思います。曲線部分はマグネット選択ツールを使い他はザックリと選択し、他は多角形選択ツールで調整していく方法などが良いのではないでしょうか。

2016/09/28

スポンサードリンク

« 楽天、商品同梱物の他サイト紹介を一部OKに Illustratorでドットやストライプはスオッチライブラリが意外と使える »

  • 最近の投稿
    • Illustratorでドットやストライプはスオッチライブラリが意外と使える
    • Photoshopで切り抜き、制作時間と精度で比べる
    • 楽天、商品同梱物の他サイト紹介を一部OKに
    • 花桃が咲きました。
    • ランディングページって何?が一通り解る本「ランディングページ・デザインメソッド」
  • thinks-logo-kao

    楽天市場・Yahoo!・AmazonなどのECモールやECサイトやWebデザインなどWeb制作・デザインに関連する情報を綴るブログです。

  • よく読まれる記事
    • ランディングページって何?が一通り解る本「ランディングページ・デザインメソッド」
    • 究極の中間管理職、オビ=ワン・ケノービに見る上下関係を円滑にするコツ
    • 「脚は、顔。」ATSUGI広告がなかなかインパクトある
    • 楽天、商品同梱物の他サイト紹介を一部OKに
    • 縦に長いサイトを自動的に分割して1枚に収めてくれるサイト「Print1」
    • スペインの老舗ジーンズブランドがなかなか良い感じ
    • ウンナナクールのポスターをスイス、チューリヒ・デザイン美術館館長が絶賛
  • タグ
    Amazon Apple Store cakes EC ECサイト LINE Photoshop SEO WEBサイト Yahoo! Yahoo! JAPAN JCBカード Yahoo!ショッピング お試しセット かぶり ぼくらの福岡移住計画 カード年会費 サイト ショートカット ストアクリエイター ターゲット設定 ネットショップ バレンタイン メルマガ 三方よし 仕事 価格競争 出店 動画 商品 商品数 増やす 広告 文章 楽天 楽天スーパーセール 楽天市場 決済API 消費 納期 考える 花桃 複製 記事 集客 電子書籍
  • Category
    • ECサイト
    • 雑記
    • デザイン
  • archive
    • 2019年3月
    • 2016年9月
    • 2016年3月
    • 2015年12月
    • 2015年1月
    • 2014年12月
    • 2014年7月
    • 2014年6月
    • 2014年5月
    • 2014年4月
    • 2014年3月
    • 2014年2月
    • 2014年1月

Copyright © thinks of website, All rights reserved.