デザイン初心者向けに、超基礎から解説する「デザインかじり部」。今回のテーマは「リア充っぽさを演出する写真加工」です。フリーランスのUIデザイナーとして、Webサイトやアプリケーションの企画・デザイン・フロントエンドプログラミングまで行う本末英樹（オロ）氏の解説のもと、Photoshopを使って思い出の写真をオシャレに加工します。今回は用意した写真を拡大・縮小や回転をさせながらフレームの中に配置する手順を解説します。

シリーズ

schoo週末学習【かじり部】 > リア充っぽさを演出する写真加工編

2015年9月6日のログ

スピーカー

株式会社スクー　放送ユニットマネージャー・かじり部部長　鈴木顕照 氏
デザインかじり部 コーチ　UIデザイナー　本末英樹（オロ） 氏
部員代表　青島莉子 氏

2つ目のテーマは「トリミング」

鈴木顕照氏（以下、鈴木）　それではこちらに戻っていきましょうか。本日3つのテーマのうちの2つ目に参りましょう。いきます！　2つ目はこちらです！　じゃん！ 青島莉子氏（以下、青島）　写真をト…トリミング!?　羽ばたいていく鳥？ 鈴木　バタバタと羽ばたいてますよ。 青島　そういうことなんですか？　（笑）。 本末英樹氏（以下、オロ）　トリミングって皆さん聞いたことがありますか？ 鈴木　ちょっと聞いてみましょうか？　トリミングって聞いたことがない方、ない方です。トリミングって聞いたことがないよっていう方は、ちょっとコメントで教えてください。 オロ　りこちゃんはあります？　トリミング。 青島　うん。トリマーだとか。 鈴木　そっち系なのかな。 オロ　何かちょっと違うかもしれないですけど、なんかねトリミングって言って、写真とかを切り抜くというか、不要な部分を取り除いて写真の構図を整えることをトリミングって言うんですけど。次にフレーム用意しましたよね。りこちゃんは3つでしたけど、僕は今度は4つでやろうと思うんですけど。 その写真にパコッと大きな写真を、はめ込んでいこうと思います。それをトリミングっています。 鈴木　なるほど。皆さん、あっ……。 オロ　知ってました？　トリートメント？ 青島　ドレミソは聞いたことがある。 オロ　トリートメントじゃないです。 鈴木　Lさん「聞いたことありますが、詳しくは知りません。」そうなんですよね。 オロ　トリミング、じゃあ実際にやってみましょうか。 鈴木　やってみましょうか。 青島　Mさん「犬のケンネルじゃないほうです」（笑）。 鈴木　今回もオロコーチの実演をまず皆さんに見ていただきます。メモをしっかり取る時だ！　その後にりこちゃんと皆さんが実習する番がありますのでお待ちください。ではオロコーチ、よろしくお願いしまーす。 オロ　裏紙、ちゃんと用意してますか？ 青島　バッチリでーす。 鈴木　裏紙じゃなくてもいいですけどね（笑）。 オロ　じゃあ画面を。ちょっとやっていきますね。これは写真の4つ開いた状態ですね。レイヤーパネルっていうことを言いましたね。開いた状態ですね。僕は、目のマークで消せるんですが。目のマークでちょっと消しちゃいましょうね。 青島　見えなくなるということなんですか？ オロ　そうなんですよ。目のマークを消すと見えなくなるんですけど。僕はこの4つのフレームでやっていきたいと思います。4つのフレームがあるんですが、レイヤーパネルのこの三角形のマークですね。これをプチっと開くと、ズラズラズラーっと中に入っているのが出てくるんですね。 ここに四角のやつが入っています。シェイプって言うんですけど、シェイプが4つ入ってますね。 これも目のマークをクリックすると、こうやって。これに写真を中にはめ込んでいくんですが。どうしようかな。この四角01のところに、下駄。さっきなんて付けたっけかな？　「くぎたに」だ。「くぎたに」さーん！ 鈴木　違う違う。 青島　そういうことだったんですか。 オロ　「くぎたに」をこのトリミングしたいフレームの1個上に持ってきてください。これがミソです。 鈴木　配置したいところの1個上に持ってくる。 オロ　1個上に持ってきてくださいね。もう1回ちょっとやってみましょうか。ここを、あっ、間違って入っちゃいましたね。間違って入れちゃった人は、たぶんこの中に入っているので、もう1回出しますね。これをクリックして、ドラッグして、薄くなるので、これで01の上ですね。ここにドラッグ。こなりましたね。

クリッピングマスクを使ったトリミング

この後なんですが、ちょっとグレーがでてきてはみ出ているので、移動させましょう。次に左側に「ツールパネル」ってありますね。ここの「移動ツール」ですね。これ。 鈴木　移動ツール？ オロ　移動ツール。ここはもう選択されているですけど。移動ツールを選択した状態ですね。ペコッてへっこんでます。この状態で後確認してほしいのはここですね。ここの「自動選択」にチェックが入っていることと、ここですね……。 鈴木　もうちょっと拡大できますか？ オロ　レイヤーのここにチェックが入っていることを確認してください。これ大事ですからね。移動選択とレイヤー。この状態にした状態で、画面上でマウスカーソルがありますよね。「くぎたに」の上でクリック。クリックしてドラッグすると動かせます。 青島　本当だ。 オロ　動かせます。だいたいここらへんかなぁっていうところでストップします。今度はこれをトリミングするんですけど。 青島　おおっ、ついに。 オロ　ついにトリミング。トリミングってデザイン的な用語なんですが、IllustratorやPhotoshopではマスクって言います。 鈴木　マスクっていう言い方なんですね。 青島　風邪ひいた時にも。 オロ　そんな感じですね。隠すっていう意味ですけど。マスクって言って、Photoshopのツールの名前的には、クリッピングマスクっていう機能で、これでパコッとトリミングします。クリッピングマスクですね。クリッピングマスクを今からしますよ。 これはレイヤーウィンドウですね。こうなってるかと思うんですが、「Option」を押しながら、Windowsの方は「Alt」を押しながら、するとこんな形になります。矢印と四角形が出るんですけど。ここでクリックをします。するとなんかペコッと凹みますよね。
これで元の画面に戻ってみるとわかるんですけど。こういうふうになりました、ほら。入りましたね。 青島　本当ですね。 オロ　もともとこんなんだったんですけど、トリミングされましたね。 鈴木　これがトリミングですね。

サイズの調整や回転も

オロ　はいトリミングです。この機能自体は、クリッピングマスクですね。じゃあちょっとこれ、レイアウトが何か、あまり良くないので、「くぎたに」をきれいにしましょう。 ちょっと真ん中に移動させようかな。「くぎたに」も入れたいから、今度は拡大縮小をしましょう。拡大縮小は次はメニューバーですね。メニューバーの「編集」の「自由変形」。「自由変形」をクリックします。するとこんなふうに線が出るんですけど。これで拡大縮小の準備ができてます。 この状態で大きくできるんですが、ドラッグするとこんな感じで画面が細い「くぎたに」とか、太い「くぎたに」になって。 青島　本当だ。へぇー。 オロ　ちょっと気持ち悪くなっちゃうので。 青島　縦比固定とかできるんですか？ オロ　そうなんです。なので「Shift」キーですね。Windowsも「Shift」ですね。Windowsも「Shift」を押しながら、ここの端っこ、端っこを寄るとこんな感じに斜めの矢印になっているので、この状態で「Shift」を押しながらすると等倍になる。崩れずにできるので。 鈴木、青島　おぉー！ オロ　等倍にして、これぐらいかなって。小っちゃい「くぎたに」にして。あとちょっと、斜めにしたい人はこのまま斜めにできます。こんな感じで。 青島　へぇー。ちょっと離して、カーソルを写真から離して。 オロ　さっきはこういうマークでした。ちょっと離すと丸い感じになりますね。 青島　その状態の時は回転できるんですか？ オロ　そうなんです。この状態でこうやって回転ができます。なので「くぎたに」をちょっと斜めにしましょうか。 鈴木　おしゃれ「くぎたに」。 オロ　こうやって移動もできますよ。こうやって「くぎたに」って言って。「Enter」押すと決定です。僕はこれを1個しかやってないですけど、りこちゃんとか皆さんは、全部やりましょうか。 青島　頑張ります。 オロ　完成したやつをちょっとお見せすると。 鈴木　どんな感じですか？ オロ　デンッ！　こんな感じですね。 鈴木　なるほど。全部配置するとこんなふうになりますよ。

実習タイムスタート！

オロ　皆さん、ここまでやってみましょう。 鈴木　はい。じゃあお時間あげますので、皆さん、ここまでやってみましょう。それでは実習スタート！ オロ　でっきるぅかな、でっきるぅかな（笑）。 青島　えっと、まずですね。 鈴木　はい、皆さんも実習してください。できたら「できた」ボタンで教えてください。 オロ　あっ、ちょっとこれ言いましょうか。皆さんウィンドウがこうあると思うんですけど、ちょっとレイヤーのウィンドウが狭いですよね。 青島　はい、ちょっともっと大きくしたい。 オロ　大きくしたい時は、ここに「ライブラリ」ってあって、これをダブルクリックしてみてください。 青島　はい。おっ畳まった。 オロ　キュッと畳めるので、この状態でやりましょうか。 青島　レイヤーが大きくなりましたね。 オロ　デスクトップの人とかはいいかもしれないですけど、ノートの人とかはちょっと狭いかもしれないのでね。まずはりこちゃんは、どれを使う？　フレーム3、4、6とありますけど。 青島　今回は3つしか写真を入れていないので、3を選びます。 オロ　そうだそうだ。 青島　ここですよね。このフレームの。 オロ　三角形の下を開きますよね。 青島　開きました。そして、移動ツール。もう選べていましたね。左側の移動ツールを選んで。 オロ　自動選択とレイヤーになっていますか？ 青島　そうですね。上の部分。自動選択にチェックが入っているので、これのレイヤー。 オロ　これのチェック、皆さんしてくださいね。まずちょっとわからないから、どれからいく？　写真。

間違って作業してしまった場合は「取り消し」

青島　どうしましょう。では体育座りから。 オロ　じゃあゴールデンウィークと、これ何て書いてあるの？ 青島　物陰、ウフ（笑）。 オロ　物陰も哀愁が漂っているやつは、ちょっと目のマークで1回消しちゃいましょうか。 青島　わかりました。邪魔ですね。 オロ　非表示にして。 青島　ここを押すと消えてくれる。本当ですね。見やすい。 オロ　ゴールデンウィークからいく？　ゴールデンウィークをどうするんだっけ？ 青島　ドラッグして、入れたいフレームの1個上に持っていく。 オロ　四角形01の上。 青島　これで入ってるんですね。 オロ　これで入ってますね。 青島　へぇー画面では変わらないのに。 オロ　そうそう、レイヤーのレイヤーってところ、層になっているんですけど、四角形01が1個上にある状態です。 青島　だから上にかぶさってるんですね。 オロ　そうなんです。 青島　そしてここから。 オロ　トリミングをしていきましょうか。 青島　「Option」を押しながら、おっ、このマークになりました。クリックすると、おー、入ってますね。ちょっと何か意味がわからない。 オロ　ゲッゲッゲッ。 青島　鬼太郎ですかそれ？　この髪の毛？　（笑）。 鈴木　アンテナビンビンです。 青島　ちょっともっと小さくしたいですー。 オロ　ちょっと移動させてみる？　移動は。 青島　ドラッグ。 オロ　自働選択になっているとこれで直接移動できますからね。 青島　そうなんですね。こんなに顔が大きくなくていいですよ。ちょっと小さくします。「編集」の「自由変形」。それで「Shift」押しながらですね。 オロ　そうそう。これを忘れないでくださいね。 青島　わかりました。 オロ　「Shift」押しながらギューッて。 青島　もし間違えちゃった場合は。 オロ　1回、「Enter」で決定して、Macの人は「Command」+「Z」、Windowsの人は「Control」+「Z」で1個元に戻りますからね。 青島　間違ったら「Command」または「Control」+「Z」で戻る。今できました。あっちょっと違いますね。サイズが。もう1回。このくらい……あーーっ！ オロ　やっちゃった！ 青島　間違えちゃった！　「Shift」キーを後で離さなきゃいけないんですね。 オロ　そうなんですよ。1回「Enter」を押して。「Command」+「Z」でもう1回。皆さんも失敗した人が絶対にいますよ。リア充になれないですよ。 鈴木　リア充になれないから、今たくさん「教えて」が来てますね。後で、1つずつお答えしていきますからね。 オロ　すいません。 鈴木　1つずつね。

微調整をして、いったん完成

青島　では、この間に物陰は2のところに入れて、あっ、目のマークはつけていないから出てくれないんですね。 オロ　そうそう。 青島　ちょっとかわいそうな。 オロ　哀愁漂ってるね。悲しそうな。駐車禁止の前でね。 青島　そうなんです。 オロ　どうしたのかな。 青島　あれっ？　なんか変なことしちゃった。 オロ　りこちゃーん！ 青島　ごめんなさい。「Enter」押して「Command」+「Z」。 オロ　まず移動させる？ 青島　そうでしたね。移動させていないから。これぐらいにして。「編集」。 オロ　端っこを「Shift」を押しながら。 青島　ドラッグ。ほっ、良かった。このぐらいですか。で、「Enter」。あれっ、はまってるんですか？　これは。 オロ　それであとアレをしないと。 鈴木　「Alt」押すやつかな。 青島　そうでした。トリミングを忘れていました。Photoshopの「Option」を押しながら2の間に合わせてクリック。入りましたー！　良かった。 オロ　なんかちょっとポールが斜めになっていない？ 青島　あっやだす、やだす（笑）。 鈴木　嫌だす（笑） オロ　嫌だすうー。回転したい時は選んで「編集」の「自由変形」でここをちょっと回転させましょうか。 青島　これぐらいでまっすぐですかね。 オロ　それぐらいでいいんじゃないかな。「Enter」、はい。時間はまだありますか？ 鈴木　うーんと、2分押してます！ オロ　2分押してますか？ 青島　これは困った。私もすぐにあげます。これをこうして……。 鈴木　皆さん、できたら「できた」ボタンで教えてくださいね。 オロ　りこちゃんがんばれー！　りこちゃんの応援もお願いします。 鈴木　全部終わった方はね。 青島　ごめんなさい。はい、「Shift」押しながら移動して。 オロ　でっきるぅかな。はい、いいですね。 青島　それでトリミングとか「Option」を……。 オロ　ます「Enter」で決定ですね。そうそうそう。それでクリッピングマスクでトリミング、できたー！ 青島　できました！　「できた」ボタンを押させていたきます。（拍手） 鈴木　「できた」ボタンを押してください。 オロ　皆さん、できましたか？ 鈴木　さぁどうでしょうねぇ。1個ずつ皆さんから「教えて」来てますから。 オロ　こちら電気が切れちゃいました（笑）。 青島　そうなんですよ。ちょっと充電しましょうか？ オロ　部長の方で。