スタッフブログ

紫陽花

お久しぶりの、木村です。
またもやブログの更新が疎かになってしまい申し訳ないです…
果たしてだれか読んでくれてるのかはこの際置いておきましょう(笑)

最近、気温が上がったり下がったり、天気が急変したりといった不安定な気候になっていますね
私はすでにバテ気味ですが皆さんはどうでしょうか?
水分・塩分の補給に気をつけて元気に過ごしたいですね!

ラジオでどこかの県で紫陽花祭りなるものが開催されると言っていました。
私の母校の中学校でも同じ名前で、学校の裏手にある中庭の紫陽花を一般開放して楽しんでもらえるイベントをやっているそうです。
私がその学校の学生だった頃はやっていませんでした。
弟が今その学校に通っていて、去年そのイベントに参加したことを楽しそうに話してくれました。
田舎らしく、地域の人とかかわる機会は、私が学生だった頃もありましたが、今も別な形で後輩達に続いているんだなと思うと、少しうれしくなりました。

 

話は変わりまして本日の本題は…画像の加工なんていかがでしょうかね?
よく目にする加工は人の肌だったり顔の目などといったパーツの加工でしょうか?
自撮りが好きな人はスマホに写真加工アプリなんかが入っているのではないでしょうか
WEBサイト制作でも写真の加工は頻繁に使います。
といっても、整形したみたいに美しい顔にしたりといった編集はやりません(できません)ので悪しからず…(・ω・;)

毎回入れているスタッフブログのアイキャッチ画像(※記事の最初に表示されている画像のこと)も、ちょっとおしゃれになるように加工してるつもりです!(笑)
最近の人は(?)テレビや雑誌からだけでなく、スマホからおしゃれな写真をたくさん見ているので目が肥えていらっしゃる方も多いようですね!
もちろんまがら、写真そのもののアングルだったりといった根本のオシャレ感は覆せませんが…

では具体的にどんなふうに写真を加工しているのか、少しだけ紹介したいと思います。
普段使用している加工ソフトはAdobeのPhotoshopです。
スタッフブログのアイキャッチ画像でよく使う手法を紹介しちゃいます!

まずは、フリー素材の写真や自分で撮った写真など、雰囲気の良さそうな写真を用意し、Photoshopで開きます。
Photoshopから開く場合は[ファイル]から[開く]を選択すると参照の画面が出てきますので使いたい写真を選択しましょう。
使いたい写真から開く場合は、使いたい写真を右クリックし、[プログラムから開く]からPhotoshopを選びます。
写真の大きさや、Photoshopの設定によって画面は異なりますが、開くとこのような画面になります。

 

Photoshopでは、ワークスペースなどを自分の好きなようにカスタマイズできるため、私はよく使う機能などを常に表示させたりしています。
この環境での大まかな機能を説明すると
①の部分には、レイヤーと呼ばれるもの、イメージでいうと画像を加工する際に使うパーツが表示されます。
左側の目のようなマークをクリックすると表示されなくなります。
②には選択したレイヤーに対して色々な編集を行うことが出来ます。
③の部分は選択したレイヤーの形式によって出来る編集が変わりそれが表示されます。
④は、オブジェクトを増やしたり文字を入力したりする、それぞれのモードに切り替えるボタンが並んでいます。

少しわかりづらいとは思いますが、使っていくうちに理解が深まってくるので、あまり難しく考えなくても大丈夫です。
かくいう私もよく使う機能だけしか把握できていないので、いろいろ触ってみて自分の使い方を探すといいのではないでしょうか!

※カンバスの背景色が変わっていましたすみません。

まずは、開いた画像を編集できる状態にしましょう。
今の状態では、背景という名前で右側に鍵マークがついています。
この鍵マークをクリックするだけでも編集できるレイヤーに代わります。
しかし、木村は元の画像を残しておきたいタイプ(?)なので背景は背景として残したまま編集できるレイヤーを作りたいと思います。
背景の文字の横、空白の部分を右クリックして[レイヤーを複製]を選択します。

クリックすると画面が変わります。
レイヤーに任意の名前が付けられますが、付けなくても問題ありません。


Photoshopでは、このレイヤーと呼ばれるものを選択して、それぞれのレイヤーに効果などをつけ、重ねていくことで画像を編集していきます。

それでは、複製した写真を編集していきましょう。
複製したレイヤーを選択した状態で画像の囲われている部分をクリックすると画像と同じ状態になると思います。

これは、2枚以上レイヤーがある場合に、上のレイヤーの状態を変えることで見た目を変えることができます。
今回は、同じ画像でやりますが、上下別々の画像を使用することももちろんできます。
見た目の変わり方をざっと見ていくとこのようになります。

私がよく使うのは、「オーバーレイ」「ソフトライト」「ハードライト」「ビビッドライト」「リニアライト」のあたりですが、とりあえず全部見てみて、いいものにします(笑)
先ほど言った上下別の画像を使用するとかなり違ってきますので試してみてください。

では、今回はとりあえず「オーバーレイ」で進めていきたいと思います。
※実際にやっていますが、後から変更することも可能なので、深く考えなくていいと思います。
それでは次は、今「オーバーレイ」にしたレイヤーの不透明度を落とします。
レイヤーは一番最初は全て、不透明度は100%です。
不透明度を落とすことにより透けてきて、下にあるレイヤーが見えるようになります。

今回は、80%にしてみました。

次に、少しぼかしていきます。
輪郭を少しぼかすことによって、柔らかい雰囲気になると思います。

上のメニューバーから[フィルター]→[ぼかし]→[ぼかし(ガウス)]を選択します。
出てきた別窓でどのくらいぼかすかの半径を決めてOKで反映させます。
プレビューにチェックが入っていればどのくらいぼやけるか表示されます。

今回は3pxぼかしました。

次に空のレイヤーを追加します。


追加したレイヤーで画像に境界線を描きます。
まずは、境界線を引く範囲を選択していきます。

今回は、画像の際いっぱいに境界線を引きたいので全部選択します。
画像編集のどこかの角のカンバス外から対角のカンバス外に向かってドラッグ&ドロップします。

選択した範囲は細い点線で囲まれます。
選択範囲内で右クリックし、出てきたメニューから[境界線を描く]を選択します。
表示された編集画面で境界線の太さ・境界線の色・境界線の位置を設定してOKで反映します。


境界線が作成出来たら選択範囲を解除して、元のモードに戻します。

そして作成した境界線をぼかします。
境界線をかなり大きな半径の数値でぼかすと、トイカメラのような効果をつけることができます。

このままでは色が濃すぎるので不透明度を落として薄くします。
濃すぎると写真となじまないので、浮かなくなる程度まで落とします。

この上から薄い黒を重ねます。
図形ツールで黒い四角を作り、不透明度を落とします。


先ほど作成した境界線をぼかしたピンクの色を変えます。
※初めから合いそうな色を選ぶとこの作業はいらないですが、今回は説明のために無駄なことをしています(笑)
レイヤー名の横の空白をダブルクリックすることで、そのレイヤーに様々な効果をつけることができるようになるメニューが表示されます。
そのメニューから[カラーオーバーレイ]を選択し、変更したい色を設定しOKで反映します。



この境界線の色によっては、写真をレトロな雰囲気にしたりもできます。
色々試してみてください。

今のところ、あまりぱっとしない出来ですよね…
そもそも、せっかく光のある写真なのにそこを殺してしまうのはもったいないですよね?
(まぁ私がやったのですが…涙)

そこで、レイヤーの重ねる順番を変えたりしてみていい感じにならないか試してみましょう!

薄い黒と元けばけばしいピンクを入れ替えてみます。

目の錯覚レベルの微妙な変化が起こりました(笑)
そもそも写真より上に黒があるから暗いんだ…ということで、上に写真を持ってきましょう。

思惑通り、かなり明るくなりました。
最初のオーバーレイをかけた時と大差ないように見えますが、後ろの背景の色を落としたことで少し夕暮れ感が増したと思います。

これも嫌いではないですが、あまり元の写真と変わらないので私はオーバーレイからビビッドライトに変更してみました。

…かなりまぶしいですね…
この編集説明用の画像を作っている時の私はこれでいいと思っていますが、私はかなりの気まぐれさんなので今見るとちょっとどうかと思う(´・ω・`)

実は、画像を挿入して説明をするブログ記事を作成している時は、かなり頭を抱えるほど悩んでいます(笑)
というのも、いらない説明と必要な説明を見極めながら画像を用意しているからです。
うすうすわかるとは思いますが、この説明用の画像もPhotoshopで文字や枠を入れています。
そして、PCで作業しているわけですが、PCのスクリーンショットはスマホなどと違い、自動で画像として保存はしてくれません!(´;ω;`)
説明の記事をどういう風に書くか想定しつつ、加工を進めつつ必要なスクショを1回ずつ書き出していかなければなりません。
おかげさまで、この記事を書こうと思い立った日から16日も経過してしまいました。
こちら証拠の当初予定のアイキャッチ画像です…タイトルも変わってしまいましたね(´・ω・`)

(あ、サイトがリニューアルしたため、今までは正方形にしていた画像も長方形になりました!)
同じアジサイの写真を使っていますが、割と違う雰囲気になりました。

加工の仕方によって雰囲気が変わるというのが分かったいただけたと思います。
とりあえず、アイキャッチ画像のことは忘れて、最終仕上げの説明をしましょう!

画像の加工が終わったら最後にやらなければいけないことがあります。
それは「保存」と「書き出し」です。
大雑把な説明になりますが、「保存」はいままで編集してきたデータを編集ファイルとして残すことを指し、「書き出し」は編集してきたデータを画像ファイルとして書き出すことを指します。
編集ファイルが残っていれば、後日、やっぱり変えたいな…と思ったときに、前回保存したところから始められます。
画像ファイルしか残っていないと、例えば、アイキャッチのように文字を入れたりしていると、その文字を直したり、なくしたりすることができません。
なので、きちんと編集ファイルも残すことをお勧めします。

では、まず保存から行きましょう。
左上のメニュー[ファイル]から[保存]を選択し、自動的に開かれる参照から、保存先の場所や保存するファイル名を決めます。





これで保存ができました。
一度保存すると次からは上書きになります。
Photoshopだけではないですが、PCの性能によっては処理が追い付かずに強制的にアプリが落ちてしまったりするので、こまめに保存した方がいいと思います。
私も何度も多分大丈夫なんていう慢心により、はじめからやり直したりといった経験があります。
うまくいっていたときに落ちた時の絶望感が半端じゃないです…帰りたくなります…帰れないけど…
何をどう編集したか覚えていればまだ救いはありますが、覚えていないとまぁ大惨事です…
この哀れな木村の経験を生かして、気をつけてください(´;ω;`)

次に書き出しの説明です。
左上のメニュー[ファイル]から[書き出し]を選択し、[Web用に保存]を選ぶと設定画面が出てきます。


出てきた設定画面で、画像のファイル形式を選択し、[保存…]をクリックすると、自動的に参照画面が開かれるので、保存のとき同様、保存先のフォルダや保存するファイル名を決めて保存します。


これで編集ファイルと作った画像が保存されました。

私は今回、デスクトップに直接保存したので確認してみましょう。

ちゃんと保存できていますね!
作成した画像と元のままの画像を並べてみます。

素の画像

写真加工後

 

如何でしょうか?
うーん…微妙(笑)
キレイだけど、オシャレ感はあまり感じられないような気がします(´・ω・`)

ここからは、ちょっと違うお話で番外編にはなりますが、画像のサイズを変更する方法を紹介します。
[イメージ]から[画像解像度]を選択し、表示された設定画面で設定します。


この時、注意が必要なのですが、この方法で小さい画像を比率を固定したまま大きくすることはできます。
しかし、これは“サイズの幅がそのまま引き伸ばされただけ”です。
どういうことかというと、実際に見てみましょう。
幅が200pxの画像を用意しました。

可愛い猫ちゃんですね!
まぁ私が飼ってる猫の方がかわi

では、1000pxに広げてみます。

わかりますか?
画像がかなり荒れてしまっています。

この画像は元が640pxほどのものを200pxに縮めてからもう一度大きくしたのでまだ大丈夫と感じる人がいるかもしれませんが、大体の人はうーん…と感じると思います。
というわけで、縮める分には問題はありませんが、なるべく元のサイズよりサイズを大きくしないでください。

 

今回は画像回でしたが、いかがでしたか?
久しぶりに記事を書いたのに説明会で頭がこんがらがってわかりにくい表現等があるかもしれませんが、大目に見ていただけると助かります(´;ω;`)

今回宣言した通り、次回は、画像のファイル形式についてお話しできればいいなと思います。

ここまで読んでくださり、ありがとうございました!

2:35 PM 2017.05.18

新潟ホームページ制作はSEO対策・スマートフォン対応で低価格の
「63パックホームページ」におまかせ下さい