| 出題者 | カテゴリ | 作成日 |
|---|---|---|
 浅野 桜 |
デザイン －鉄則と時短テクニック担当 | 2014-08-28 15:19:09 |
| 問題 | ヒント | 回答数 |
|---|---|---|
| ■画像の「切り抜き」方法
今回はweb制作には欠かせない「画像」の扱いについての課題です。 自社サイトのちょっとしたバナーや簡単なランディングページなどをご自分で制作されている方や、web制作の勉強している方を対象にしています。 写真やイラストの素材をバナーなどに落とし込む際には大きく分けて「角版(かくはん)・丸版(まるはん)」と「切り抜き版」の選択肢があります。 「切り抜き版」は背景を切り抜いて対象物だけをしっかり見せることができるので、これが活用できるとデザインの幅がぐっと広がります。 Adobe社のPhotoshopはいろいろな方法で「切り抜き」ができます。 対象物の種類や背景との兼ね合い、色調や解像度などによって方法は様々です。 絶対的な正解はありませんが、セオリーだったり、コツは存在します。 そこで今回は、「切り抜き」についての課題です。 (1)あなたが「切り抜く」ときに使っているアプリケーション・バージョンと、そのアプリケーションを使っている理由を教えてください。 (2)そのツールを使って「切り抜く」やり方を1つ教えてください。 (3)(2)はどんな画像を「切り抜く」時に使用しますか?被写体や写真の情報を簡単に教えてください。 (4)(3)の画像を切り抜くときに(2)を使うのはなぜですか? ※画像の種類によって方法は色々ですので、(2)～(4)を複数回答くださってもかまいません。 |
6 |
メンバーの回答一覧 お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。
| なるほど 票数 |
回答 | 講師コメント |
|---|---|---|
| 0 | YN(1)
Photoshop (CS4) 理由や、職場で使用が許可されたソフトであるため。 (2) 切抜きツールを使って、状況に適した形の型を使用して切り抜いています。 (3) 人物のプロフィール写真を、所定のサイズの楕円に収まるよう加工する際に使用します。 (4) 簡単に楕円の形に切り抜けるからです。 |
銅 (浅野 桜) 可能であれば「バッチ処理」などである程度自動化してみてもよいかもしれません。CS4は個人的には安定した良いバージョンだと思いますので、機会がありましたらぜひ色々試してみてください。 |
| 0 | otoshima(1)あなたが「切り抜く」ときに使っているアプリケーション・バージョンと、そのアプリケーションを使っている理由を教えてください。
Photoshop CC アルファチャンネルを使って細かい部分まで切り抜くことができるから。バージョンは特に気にしていません。 (2)そのツールを使って「切り抜く」やり方を1つ教えてください。 チャンネルレイヤー(RGB)から、切り抜きたいもののコントラストがくっきりしているものを選んでコピー ↓ コピーしたチャンネルレイヤーを色調補正や塗りつぶしで、黒白をさらにはっきりさせる ↓ 写真に戻り、作成したチャンネルレイヤー(反転)をかぶせて切り抜く (3)(2)はどんな画像を「切り抜く」時に使用しますか?被写体や写真の情報を簡単に教えてください。 人物など。 (4)(3)の画像を切り抜くときに(2)を使うのはなぜですか? 髪の毛などの非常に細い部分も切り抜くことができるので。 |
銀 (浅野 桜) すばらしい回答ありがとうございます！完璧です。単純なものの場合や、低解像度の場合はいかがでしょうか？ぜひ色々試してみてください。 |
| 0 | yukko(1)あなたが「切り抜く」ときに使っているアプリケーション・バージョンと、そのアプリケーションを使っている理由を教えてください。
Fireworks CS5 使い慣れているから (2)そのツールを使って「切り抜く」やり方を1つ教えてください。 背景を切り抜いて対象物だけを取り除く方法がほとんどです。 (3)(2)はどんな画像を「切り抜く」時に使用しますか?被写体や写真の情報を簡単に教えてください。 商品画像(衣類) モデル画像(人物) (4)(3)の画像を切り抜くときに(2)を使うのはなぜですか? 素材となる画像は全てスタジオで撮影されたものですので背景が白となります。背景と対象物の差がはっきりしているので自動選択ツールで一気に切り抜く方が時間もかからずキレイに切り抜くことができるからです。 |
銅 (浅野 桜) おっしゃるとおり、スタジオ撮影などの場合、なおかつwebのみの場合は自動選択ツールで正解です。たまにある、“背景と同化している部分”に関してはいかがでしょうか？ |
| 0 | kamino(1)
「切り抜く」ときに使っているアプリケーション・バージョン → Fireworks CS5 そのアプリケーションを使っている理由 → 使い慣れているから (2) そのツールを使って「切り抜く」やり方 → 「自動選択ツール」で許容量などを調整して切り抜いたりします (3) (2)はどんな画像を「切り抜く」時に使用しますか? 被写体や写真の情報を簡単に教えてください。 → 人物写真を切り抜くときに使います → 人物と背景の色の差がはっきりしているときに使います (4) (3)の画像を切り抜くときに(2)を使うのはなぜですか? → 人物と背景の色の差がはっきりしていると一瞬で抜けるので便利だからです |
銀 (浅野 桜) 原理と使いどころを理解されていることがわかります。私が解説するPhotoshopだけではなく、Fireworksでもペンツールが使えますので、解像度が低い写真の場合などはお勧めです。 |
| 0 | たけ(1)あなたが「切り抜く」ときに使っているアプリケーション・バージョンと、そのアプリケーションを使っている理由を教えてください。
AdobeのFireworks(CS5)を使っています。 (2)そのツールを使って「切り抜く」やり方を1つ教えてください。 ツールバーの「切り抜きツール」を使って、切り抜いています。 (3)(2)はどんな画像を「切り抜く」時に使用しますか?被写体や写真の情報を簡単に教えてください。 以前他の箇所で使っていた画像を持ってくる際などに、 当該部分だけを切り抜く時に使っています。 (4)(3)の画像を切り抜くときに(2)を使うのはなぜですか? 制作作業全体をFireworksで行なっている為、 一貫して同じツールを使えたほうが作業効率が上がるからです。 |
注目 (浅野 桜) 「社内で一貫して同じツールを使うことができる」というのは非常に重要な要素・スキルです。 |
| 0 | gabber1090(1)あなたが「切り抜く」ときに使っているアプリケーション・バージョンと、そのアプリケーションを使っている理由を教えてください。
AdobeのPhotoshopもしくはIllustrator、共にCS6です。 理由は使い慣れているからです。 (2)そのツールを使って「切り抜く」やり方を1つ教えてください。 Photoshopの場合には画像レイヤーの「スマートオブジェクト化」をした後にレイヤーマスクを使用し、 Illustratorの場合には切り抜きたいパスをフロントに描いてからクリッピングマスクを使用することが多いです。 (3)(2)はどんな画像を「切り抜く」時に使用しますか?被写体や写真の情報を簡単に教えてください。 背景がうるさい場合や、被写体のみを切出し他の素材と組み合わせる際に使用します。 またサイトの背景色と写真自体の背景色に大きく相違がある場合に、イメージを統一する意味で切り抜いたりします。 (4)(3)の画像を切り抜くときに(2)を使うのはなぜですか? Photoshopの場合は画像の劣化を防ぎつつ、後々にも調整が効くようにとの配慮からです。 Illustratorの場合はこれ以外に方法を知らない(過去に困ったことがない)からです。 |
金 (浅野 桜) Photoshopのスマートオブジェクト機能は便利ですね。複数のアプリケーションの使い分けも完璧です！ccからは「スマートオブジェクトのリンク」機能が搭載されました。こちらもぜひ使ってみてください。 |