logmi・ログミー

世界をログする書き起こしメディア

簡単スタンプ効果で思い出の写真をかわいく加工 フォトショ初心者向け講座

簡単スタンプ効果で思い出の写真をかわいく加工 フォトショ初心者向け講座

デザイン初心者向けに、超基礎から解説する「デザインかじり部」。今回のテーマは「リア充っぽさを演出する写真加工」です。フリーランスのUIデザイナーとして、Webサイトやアプリケーションの企画・デザイン・フロントエンドプログラミングまで行う本末英樹(オロ)氏の解説のもと、Photoshopを使って思い出の写真をオシャレに加工します。いよいよこのパートが完結編。Instagram風の加工や、スタンプを使ったかわいいアレンジなどを実践します。

シリーズ
schoo週末学習【かじり部】 > リア充っぽさを演出する写真加工編
2015年9月6日のログ
スピーカー
株式会社スクー 放送ユニットマネージャー・かじり部部長 鈴木顕照 氏
デザインかじり部 コーチ UIデザイナー 本末英樹(オロ) 氏
部員代表 青島莉子 氏

3つの目のテーマは「エフェクト」

鈴木顕照氏(以下、鈴木) 3つ目のテーマは、こちらです! じゃん! 青島莉子氏(以下、青島) リア充っぽいエフェクトをかけよう! ついに! ここですよ、待ってたのは。 本末英樹氏(以下、オロ) りこちゃん、リア充になれますよ、やっと。 鈴木 それじゃ先生の画面に切り替えていきます。どん! オロ 来た! 皆さん、アクションを事前に落としておいてくださいねってお話してたんですが、落としてるかなぁ。落としてるとこういうデータ。「instant Hipstar 10 Retro Action2」っていうのを落としていると思うんですけども。この中のこれですね。instant……atn。 青島 1番上のやつですか? オロ 拡張子がatnってなってる、これですね。このファイルがあるんですけど。これはアクションファイルといいます。これをダブルクリックしてください。すると何もなっていない感じがするんですが、これでも入ってるんですね、実は。それを確認する方法があります。 img0041 それは、アクションっていう、レイヤーもパネルっていうお話をしたんですけど、アクションのパネルっていうのを開きます。この「ウィンドウ」メニューの、メモしてメモして。 青島 はい。ウィンドウ。 オロ 「ウィンドウ」の「アクション」。「アクション」をクリックすると。 img0042 ここ、ズラズラーっと出てきますからね。大きくすると先に2個入っちゃってるんですけど、ここにアクションが入ってちゃってます。「instant Hipstar 10 Retro Action2」ってのが入ってますね。これをレイヤーと一緒の感じで、ペコッと押すとこんな感じで出てきます。この中にアクションが入ってるんですね。 img0043

アクション機能とは何か?

オロ アクションってそもそも何ぞやっていうお話なんですが。アクションって言って、ここにいろいろ登録できるんですね。何かレシピみたいなものです。例えば料理で野菜を洗って、切って、火に通して、それで完成みたいな一連の動作をここに保存できるんですね。アクションって言って。 それでInstagramの加工ができるレシピがもうすでにあって、皆さん落としてもらったと思うんですけど、それをインストールすると、それをクリックするだけで料理がチーンとできてしまう感じですね。 青島 おぉー便利じゃないですか。 オロ このアクションっていう機能は、なかなか初めての方とか、デザイナーなったばかりの人って知らない人が多いんですけど、アクションというのがあります。皆さん、ここに入るはずです。これを今度はアクションをかけていきたいと思います。 どれにアクションをかけようかな? 砂かけ婆にアクションをかけようかな。今度砂かけ婆にアクションをかけるんですが、実はちょっと見ててくださいね。実はここ。普通に画像を配置した場合はこうなっているはずです。 皆さんが配置した方法だと、こういうマークがついているはずです。 img0044 鈴木 右下に何か。 オロ 何かファイルマークがあるんです。これをスマートオブジェクトって言います。ここに出てますよね。スマートオブジェクトっていっぱい言葉がでてきて難しいんですが、なんだろうっていう感じなんですけど。普通のスマートオブジェクトじゃないほうをダブルクリックしますね、ここ。 青島 スマートオブジェクトじゃないほうをダブルクリック。 オロ こんな画面が出ちゃうんですけど。 img0045 こっちのスマートオブジェクトのほうをダブルクリックします。ボン!  img0046 別のPSDが開くんですね。僕の場合はレイヤーが11となってますけど、11という別のPSDが開きます。それでここにタブができてます。これをクリックすると、元のやつに戻ります。クリックで戻ります。 こちらのスマートオブジェクトで開いたPSDですね、こっちに加工をしていきます。Instagramみたいな。何かレトロな加工とか、白黒だったり、ビビッドだったり、Instagramを使ったことが皆さんあるかな? いろいろな加工があると思うんですけど。その加工をしていきます。

スマートオブジェクトはどこに保存されているか

オロ 加工をしていくんですが、あっ、「スマートオブジェクトのPSDってどこに保存されてるの?」って気になった方がいるかもしれないですね。「レイヤー11ってなってるけど、どこに保存されてるんだろう?」と思っている方もいらっしゃるかもしれないんですけど。実はこれは保存はされていません。 PSDという拡張子がついてるんですが、「フレーム_02」僕はこれですね、この中に一緒に保存されているので、どこに保存されているかわからないっていうのは特に気にしなくて大丈夫です。 鈴木 気にするなっていうことですね。 オロ 何も気にするなっていうことですね。 青島 わかりました、気にせず! オロ 気にしないでね。ここで今度はアクションをかけていきますね。ここにレシピがあるとお話しましたね。このレシピをかけていきます。レシピのかけ方なんですが、ここにレシピがいっぱいあります。これらはInstagramにも書いてる写真加工の名前なんですけど。これ「Play All Action」っていうのをクリックしてほしいんですが。 img0047 これはこの下にあるアクションを、全部かけますよというアクションなんですね。Play Allと書いているぐらいですから。 鈴木 なるほど。 オロ これを選択した状態で、アクションパネルの下の実行ボタンですね、再生ボタン。これをクリックします。すると何かいろいろ動いてますね。パネルウィンドウの中が。わ、わ、わ、わ……。 青島 どうしましょう? オロ どうしましょう。一旦これをオッケー押してください。 青島 停止? オロ 停止でオッケーです。じゃあ何か砂かけ婆の色が変わっちゃってるんですけど。それとあともう1個気になったことが、ここはアクションパネルしかなかったはずなのに、「ヒストリー」というのが追加されてますね。「ヒストリー」っていうのもPhotoshopの機能なんですが、何かというと、今までの記録が全部残るですね。 img0048 それでこのアクションをかけると、1個1個アクションをかけているので、1個1個の履歴が残っている様な感じなんです。 鈴木;なるほど。

Instagram風の加工もOK

オロ たからこの中で、りこちゃんとか皆さんが、自分の好きな加工を選べばいいということですね。結構いろいろありますよね。これはちょっとレトロな感じとか、ハーフはちょっとビビッドですね。僕が好きなのは、Instagramでよく使うのがこのValenciaっていうのをよく使うんですけど。これにしようかな。 決まったらこれで保存します。「Command」+「S」。 青島 「Command」+「S」で保存。 オロ 保存ですね。Windowsだと「Control」+「S」か。それがわからない人は「ファイル」で「保存」でも大丈夫ですね。できたら閉じちゃいましょう。 青島 バツしてもいいんですか? オロ いいです。 鈴木 気にしない。 青島 気にしない! そうでした。Kさんので学んだので気にしない(笑)。 オロ 閉じちゃいます。すると。 青島 どうなるんですか。 オロ こうなるんです。 青島 おー、変わった。連動してるんだ。 鈴木 変わっちゃうんだ。 オロ ヒストリーがあるんですけど。これが触らないやつ、これが触った後ですね。ちょっと何かレトロっぽくなってますね。こんな感じでスマートオブジェクトって言って、別のPSDのファイルの中で加工をかけます。それで1個しか出なかったけど、完成したのが。 青島 どうなるのかな。あー、4つの写真でやるんですね。 オロ そう、4つ皆さんにやってほしいんです。こんな感じ。 青島 変わった。 鈴木 全部それぞれにかけるとこんな感じになるんですね。 img0049 青島 なるほど。 鈴木 わかりました。 青島 本当にLさんの仰る通り、ほぉーですね。アハハ(笑)。 オロ 今回僕が教えているのって、早業とかテクニック的なことで初心者はなかなかやらないことなんですけど、今回は皆さんにデザインをかじってもらいたいので、いろいろすっ飛ばして、楽しいことだけ教えてちゃってますね。 青島 いいとこ取りってことですか。やったー! 鈴木 そうそう、ややこしいことは授業でやればいいので。ここは部活ですから。かじってくださいっていうことですね。 青島 そうでした。 オロ 詳しい授業はいっぱいありますからね。

「エフェクト」の実習タイムスタート

鈴木 ありますからね。後ほどまたご紹介しますけれども。じゃあここから一旦実習に入りましょうか。それじゃ皆さんとりこちゃんが実習する番です。それでは実習スタート。 オロ でっきるぅかな。でっきるぅかな。 青島 できるかなぁ。ちょっと心配なんですよね。 オロ ちょっと難しかったですね、今回。 鈴木 そうですね。Photoshopのアクションていうのを取らないといけないんですね。 青島 そうですね。授業ページからダウンロードして。 オロ りこちゃんはダウンロードしたのは、どこにあるかな? あっここですね。 青島 デスクトップに入れました。 オロ ではデスクトップにまずいかないといけないですね。 青島 そうですか。 オロ ダブルクリックで入れるので。 青島 どうやりましょう。小さくしてしまってもいいですか。 オロ うん、小さくしましょう。 青島 Photoshopさようなら。これですね。これを1番上でしたっけ? これをダブルクリックして。押したら入ってくれたんですね。 鈴木 これで入ったんですね。 青島 へぇーすごい。これで開いちゃって。 オロ ちょっとアクションパネルを開いてみましょう。「ウインドウ」で。 青島 上のメニューバーから「ウィンドウ」、「アクション」。開きました。 オロ ちょっと小さいから、ガラガラーっと大きくして……あっ入ってますね。 青島 いろいろ入ってますね。 オロ 上にあるやつはすでに入っているやつなので。Instant Hipster……入ってるから大丈夫ですね。 青島 この中で「Play All Actions」が選ばれてますかね。これで選ばれてますか? オロ そうですね。でもアクションをかけるのは、このファイルじゃなくて別のファイルでやるので。 青島 そうでした。危ない危ない。これを戻って。 オロ どれからかけます? 青島 では1番左からで。 オロ 海からかけましょうか。じゃあ海のスマートオブジェクトのアイコンがちゃんと付いてるのを確認して。 青島 ちゃんと付いてます。 オロ ここの写真の上でダブルクリックですね。 青島 これをこの上ですか? オロ うん。 青島 ダブルクリック。どうでしょう? OK。 オロ 開きますよね。 青島 おーそうですね。本当だ。ここにタブが2つあって。 オロ 皆さんも開いてるかな。大丈夫ですか。 鈴木 どうでしょうね。皆さんできた方は「できた」ボタンでお知らせしてくださいねぇ。 青島 そうですね。ここからここで、出したので。

有料のアクションもあります

オロ 「Play All Actions」を選択した状態で、あっダブルクリックじゃないですね。 青島 してありますよね。 オロ 選択して、この再生マークですね。三角形の。 青島 そうでした。再生マークを押して。 オロ クリック。ダダダダダーってなります。 青島 おー。そして、停止。 オロ できた。 青島 できたー! おーいろいろあるじゃないですか。すごい! オロ ヒストリーをみんな見てくださいね。 青島 はい。この上の「ヒストリー」ですね。たくさんありすぎて選べないじゃないですか。 鈴木 おしゃれ。 オロ 皆さん、今回はフリーのやつを落としてもらってるんですけど、14ドル払うともっといっぱい入ったやつをダウンロードできます。先ほど紹介したページで。僕はお金持ちなので落としてます(笑)、冗談ですよ。 青島 お金持ちになりたいですけど(笑)。 鈴木 14ドル払ってるんですか。月額ですか? オロ 月額じゃないです。 鈴木 1回きり。 オロ はい。 鈴木 ちょっと高いですけどね。 青島 じゃあ私はこのナッシュ……、ちょっと読めなかったですね。これにします。これにして、「Command」+「S」で保存。OK。そしてもうこれ、バツしてしまっていいんですね。バツ、さよなら。 オロ アクションさよなら。 青島 「保存」を押しますか。 オロ 保存でいいですよ。 青島 「保存」を押します。変な名前になってしまいました、どうすればいいんでしょう? キャンセルで、保存しなくて。 鈴木 「Command」+「S」かな。 青島 「Command」+「S」で保存するとこうなってしまうんですよね。それで「OK」を押すと、先ほどのようになってしまいましたが。あっ、今回はうまくいきました。 オロ これちょっとタブで前に戻ってください。 青島 そして、どうすればいいですか? オロ あれ? 反映されてないぞ。 青島 なんでですか? 困った。 鈴木 皆さん大丈夫ですかね。もしわからないことがあったら、「教えて」タブで投稿してくださいね。 オロ 皆さんもなってるかもしれないぞ。 青島 選んで、「保存」、「ファイル」の。パソコンわがままですね。保存できないんですか? この写真は。困った。 オロ 困った。何か言っているので。 鈴木 Pさんも「反映されません」。 青島 どうしてですかねぇ。 オロ ちょっと実験してみてもいいですか? 青島 Qさんも「反映されてないぞ」と。Rさんも同じ現象。 オロ ちょっとこれ、僕のPCと違うからアレなんですけど、皆さんこれやりましょう。これですよね。 青島 はい。

画像の統合の方法を解説

オロ これやって、このファイルを2つ選択しましょう。レイヤーパネルに移って、「Shift」押しながら両方。 青島 「Shift」押しながらクリックすることで、どちらも選べるんですね。 オロ 2つ選択されましたね。この状態で、この画像を統合しようと思います。合体ちゃいます。「Command」+「E」ですね。Windowsの方は「Control」+「E」。これで統合。 青島 統合できました。あっなった。すごーい! オロ これで1回保存してみましょうか。「Command」+「S」。これを1回閉じてみましょう。 青島 はい。バツしてしまっていいんですね。 オロ うん。それで戻って……。 青島 あぁーできました! できた! やったー(拍手)。 オロ びびったー。 青島 よかった。本当に焦りましたね、もう。Sさん、Tさん、Uさん、大丈夫でしょうか。 鈴木 画像を統合するんですね。 青島 うんうん、「Command」+「E」。 オロ できるはずなのに、ちょっとできなかったです。できなかった人はこれでやってみてください。 青島 はい。わかりました。 鈴木 はいこの後は皆さん、できた方は「できた」ボタンで教えてください。 青島 1個でもできれば、できた気がしちゃいます(笑)。 鈴木 一旦ここまでで、画像をリア充っぽい感じにはできましたね。最後もう1つ配置したいですね。 青島 そうしたいです。 オロ ちょっともう少しだけいいですか。 鈴木 そうですね、もう少しだけちょっとよろしくお願いします。 オロ なんかこれだけだと、ちょっとリア充っぽくないですよね。 青島 先生の見本、だってもうちょっとリア充っぽい。

イラストスタンプ機能とは?

オロ そうそう何かありましたよね。ちょっと皆さんのPSDの1番上。イラストスタンプっていうレイヤーパネルがあると思うんですけど、あっ、りこちゃんの画面映してもらえますか。 青島 ここですね。この右側の。 オロ イラストスタンプ。これ開いてみてください。 img0050 青島 ここをクリックすれば開けるんですか? オロ 目のマークで。それで画面を見ると。あー出てきた。 青島 おー出た! オロ LOVEとKiSS ME。かわいいー。 青島 ちょっとこれは可哀想な人にね。 オロ これをちょっと置いてみましょうか。 青島 はい、置いてみるとは? オロ これ自動選択で移動できるんで、この「KiSS ME」とかクリックしてドラッグしてみましょう。 青島 あー、動かせるんですね。 オロ 「KiSS ME」どこ置く? 青島 ここで。可哀想な感じなので。 img0051 鈴木 不思議やなぁ。こういうのを配置すると、何かそれっぽくなりますよね。 青島 ですね。 オロ それっぽくなりますね。 青島 ちょっとこれ心打たれちゃったみたいな。あっ、写真が動いてしまった。写真じゃないですよ動かしたいのは。これですね。 オロ そうそう、黒いところを押さないといけない。 鈴木 皆さんもイラストスタンプ動かして、ちょっと配置してみてください。 オロ 例えばどうしようかな。例えば、これは何があるの。ここをクリックして。これ上にかぶさってるよね。 青島 そうですね、何かのやつがありますよね。ちょっと私、写真が。 オロ ちょっとこの目のマーク消してみて。 青島 さよなら。 オロ あっ、星のマークがあったね。じゃあこれを押して、目のマークをつけて。ちょっとこっちで、カンバスで触りにくい時は、レイヤーのパネルでも触れます。 青島 こちらでも動かせるんですか。 オロ これで星っていうのをあるかな。 青島 これですね、星。 オロ それを選択して。 青島 ここで選んでクリックで。 オロ 今黒くなってるんですけど、シェイプっていうので今これ作ってます。ここの四角のところをダブルクリックしてみてください。

スタンプは色のアレンジも可能!

青島 ここをダブルクリック。おー何か出ましたよ。 img0052 オロ カラーピッカーと言って、色を変えられるんですけど。今、星が黒になっているので見えづらいので白くしましょう。 青島 見えなかったです。 オロ ドラッグしてみてください。画面を。このカラーのあるところですね。ここの四角の大きなところで、そうそうそう。 青島 いろいろと。 鈴木 来た! 青島 白。 オロ それで「OK」を押してみてください。 青島 はい「OK」押しました。あっここが白くなりました。 鈴木 本当だぁ。 オロ これで見えるようになりましたね。 青島 見えますね。せっかくのスタンプですから。 img0053 オロ ちょっとこれを斜めにしてみる? 青島 そんなことができるんですか? オロ はい。写真と一緒で、拡大縮小で回転がちょっとできるので。回転だけしましょうか。 青島 ここで星を選んで。 オロ ミドちゃんリア充に勝てるかなぁ、これ。 青島 勝てるかなぁ。まだちょっとここのフレーム、レイヤーをアレしてないですからね。全部やったら絶対勝てますから、私。 オロ できたら「Enter」ですね。 青島 できたら「Enter」、できました! それで音符も移動させたいですね。音符も動かして。 オロ 音符は白にするか……、「LOVE」置く? 鈴木 LOVEね。 青島 ちょっといいじゃないですか。 オロ 「LOVE」ちょっと上にしよう。 青島 「LOVE」を上に、あーこいつじゃないや。 鈴木 楽しい時間ですね。 青島 本当ですね。ちょっとこれで1時間ぐらい使いたいです。 オロ そうそう、ここちょっと時間を使いたいですね。リア充できたんじゃないですか。 青島 これ絶対にここと、ここの写真もこういうふうにエフェクトをかけたら、すごいリア充になりますよ。あぁやりたい。 鈴木 かわいい。はい、こんなところですかね。1回ちょっと、たぶん最後のところをPhotoshopアクションとか、ついていけないっていう方が結構いらっしゃったんで。 オロ すいません。

エンディングタイム

鈴木 後でグループのほうでちょっと詳細を投稿します。この後、エンディングに行った後にもう1回詳しく説明しようかなと思いますので、このまま引き続きお楽しみください。 とりあえず皆さん、できた方は「できた」ボタンで教えてくださいね。 オロ できたできたー。 青島 私もできたできたー。 鈴木 全然できてなーい! 青島 全然目標に達しなーい! オロ 全然できたよ! 青島 でも1年越えましたよ。365。 鈴木 まあね。2015だから。 オロ りこちゃん2015って言ってなかった? 青島 ちょっと、あぁーうぅん……。 オロ やばい! 青島 皆の力で私も今3回ぐらい押しちゃいました。4回目ー。 鈴木 ということで以上ですか? オロ 以上ですね。 鈴木 皆さんお疲れ様でした。 3人 お疲れ様でしたー。

  

logo_square

スクーが提供する「かじり部」は、ちょっとだけデザインやプログラミングに興味のある人が無料で学べるオンライン動画学習サービス。パソコンとインターネットに接続できる環境があれば場所を問わず誰でも“部員”として参加することができます。プログラミングやWEBデザインなどの分野で活躍中の専門家が、難しい専門用語をなるべく使わずに指導を行い、参加者が楽しみながら成功体験を重ねることで、「学び」に対するモチベーションを高めていきます。

・週末学習 かじり部 – schoo(スクー) WEB-campus
https://schoo.jp/kajiribu

×
×
×
この話をシェアしよう!
シェア ツイート はてブ
簡単スタンプ効果で思い出の写真をかわいく加工 フォトショ初心者向け講座

編集部のオススメ

無料で求人掲載できる!エン・ジャパンの採用支援ツール、engage(エンゲージ) PR

おすすめログ

人気ログランキング

TOPへ戻る