ふーしゃのWeb制作ブログ

元SEアラサー女がWeb制作についての学習をシェアするブログです。

【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP - 4 背景が透明な単体アイスクリーム画像をつくる【Adobe Photoshop】

背景

アイスクリーム専門店の仮想LPの作成過程をまとめています。
前回は、水彩背景素材の制作についてまとめました。

本記事では、同じくメニューセクションにて使用した
背景が透明な単体アイスクリーム画像の制作について
まとめていきます。

制作物

単体アイスクリーム画像 - strawberry
単体アイスクリーム画像 - strawberry
単体アイスクリーム画像 - orange
単体アイスクリーム画像 - orange
単体アイスクリーム画像 - chocolate
単体アイスクリーム画像 - chocolate
単体アイスクリーム画像 - berry and cheese
単体アイスクリーム画像 - berry and cheese
アイスクリーム画像を使用したメニューセクション
アイスクリーム画像を使用したメニューセクション

制作期間

制作期間 : 2/4
合計制作時間 : 約2.0h

使用ソフト/ツール

作業過程

Adobe Stockで元画像取得

あらゆる無料画像素材を検索してもヒットがなかったので、
今後も使用していくことも考えてAdobe Stockに登録して理想の素材を入手しました。

元画像
元画像

参考 : Adobe Stock

Phothoshopで切り出し - オブジェクト選択ツール

Photoshopで元画像からアイスクリーム単体を切り出します。
背景からオブジェクトを切り出す方法は様々な方法があるようでしたが、
今回は「オブジェクト選択ツール」機能をつかってみました。(2019年11月リリース!)

使い方はとってもカンタンです。
オブジェクト選択ツールを選択して...

オブジェクト選択ツール
オブジェクト選択ツール

十字キーになるので、切り出したい範囲をドラッグして長方形で囲います。

切り出す範囲を設定
切り出す範囲を設定

放すと、自動でオブジェクトの輪郭をとった状態で選択されます。

オブジェクト選択後
オブジェクト選択後

レイヤー」→「新規」→「選択範囲をコピーしたレイヤー」で、切り出し完了です!
選択範囲から新規レイヤーを作成 切り出したレイヤー

これを繰り返して、レイヤーとして取得できました。

切り出したレイヤーたち
切り出したレイヤーたち
レイヤー一覧
レイヤー一覧

参考 :
Photoshop でのクイック選択の実行

色味の調整

今回、元画像にWebサイトで使用したいオレンジ色のアイスが含まれていなかったので、色相を調整してオレンジ色に加工しました。
一番色味の近い、黄色のアイス画像を使用。

before : 黄色のアイスクリーム
before : 黄色のアイスクリーム

右側の「色調補正」タブから、「色相・彩度」の効果を追加します。
色相・彩度の効果を追加 色相・彩度の効果 - 調整画面 色相バーを左右に調整することで色相を変えることができます。(明度・彩度も調整可能)
欲しい色味に調整して...

この調整レイヤーと元レイヤーを統合したら、完成!
見事、オレンジアイスになりました。

after : オレンジ色のアイスクリーム
after : オレンジ色のアイスクリーム

まとめと感想

とにかくPhotoshopの「オブジェクト選択」機能に感動でした...!
今までだと、自動選択で背景側を選択してから選択範囲を反転とか、
輪郭がんばって調整して選択...という方法だったと思うのですが
(ググるとそっちがまだ上位で出る)

比較しても、とっっっっても楽になったのではないでしょうか。
(実際加工よりも元画像を探す方に労力がかかった←)

今後ともお世話になりそうです...!

そして、趣味の野鳥撮影でやった写真レタッチがここで活きてきました!
色相・彩度の調整は、野鳥の写真加工で空の青みを強くしたことがあったので、その応用という形です。

とはいえ、まだまだPhotoshopの機能のほんの一部をさわっただけ。
今後もいろいろ作って学びたいと思います!

次回

次、デザインカンプPC版の総振り返りとなります!