こんにちは、山田祐輔です。

ご無沙汰しております。実に3ヶ月ぶりにブログ更新です。。

その間は主に本業の編集の仕事をしてまして、こちらのメディアを主に更新してました。

中小企業向けWEB内製化支援オウンドメディア”「WEB制作」内製化支援.com”

もちろん個人でのブログもぼちぼち更新していく予定なので、今後ともよろしくお願いします!

さて、今日は個人ブロガー向けに「プロフィール写真をオシャレにする方法」について解説していきます。

はじめに

以前のプロフィール写真はこんな感じでした。

普通といえば普通なんですが、写真が四角でオシャレではないですよね。

今はこんな感じになりました。

これがオシャレかどうかは一旦置いといて、丸い枠の中に写真がある方がいい感じですよね。

実はPhotoshopの「クリッピングマスク」という機能を使えば簡単にこんな感じのものを作成する事ができます。

では、これからPhotoshopのクリッピングマスクを使って、丸枠を作成してその中に写真を組み込む方法を解説していきます。

Photoshopのクリッピングマスクを使ってプロフィール写真をオシャレにする方法

まず、加工したいプロフィール写真を右クリックし、「このアプリケーションで開く」を選択します。

次に、アプリケーションの一覧の中から「Photoshop」を選択します。

すると、Photoshopに写真が取り込まれました。

現状、この画像を加工していくにあたって、画像が小さいので拡大して大きくしていきます。

左側のメニューにある「虫眼鏡」のメニューを選択します。

すると、上部に拡大や縮小ができるメニューバーが出て来ますので、拡大「+」になっていることを確認します。

この状態で画像を選択すると、画像を大きくできます。

では、ここから画像の加工に入っていきます。

左のサイドバーからこちらの項目を選択します。

今回は丸型の枠を作成したいので、「楕円形ツール」を選択します。

ちなみに枠を丸ではなく、四角にしたい場合は今回と同じ要領で「長方形ツール」で作成することができます。

「楕円形ツール」を選択したら、楕円(丸枠)を作成していきます。

この時、「SHIFT(シフト)」を押しながら枠を広げていくことで正円(縦横比を保持したまま)を描く事ができます。

今回はわかりやすくするために右上のメニューから枠の中を赤で塗りつぶしてみました。

そして、枠が描けたら、右下のレイヤーがこのようになっていることを確認してください。

※もしも右下にレイヤーパネルが表示されていない場合は、「ウインドウ」から「レイヤー」にチェックが入っているかを確認してください。

では、これからクリッピングマスクを作成していきます。

今回は、今作成した「丸枠」の中に「画像」を入れたいので、

ではなく、下記のように「背景(写真)」を下にして、切り取りたい画像を上にしてください。

移動したいレイヤーを選択して、上に持って来たい画像をドラッグして上に移動させれば順番が入れ替わります。

このあたりのレイヤーの構造がピンと来ない方は下記の記事をご参照ください。

Adobe公式サイト「レイヤーとはどのようなものですか」

入れ替える際に下記のように画像がロックされている場合は、ロックを解除すれば入れ替えられるようになります。

順番の入れ替えが完了したら、次は「クリッピングマスク」を設定していきます。

マスクを適応したい画像(今回で言えば、レイヤー0の画像)を選択した状態で右クリック(Macの方は二本指でタップ)します。

すると、レイヤーのメニューが出て来ますのでその中から「クリッピングマスクを作成」を選択します。

選択すると、こんな感じになります。

この状態でもう少し写真の位置を変えたいという場合は、「移動ツール」を使って画像の位置を移動させる事ができます。

移動ツールを選択すると、枠内で画像を自由に移動させる事ができます。

これで完成しましたので、書き出しをしていきます。

「ファイル」の中から「書き出し」を選択します。

次に、項目の中から今回は「Web用に保存」を選択します。

すると、保存形式などを選択できる画面に移行します。

今回は「PNG-24」を選択して保存していきます。

背景がある場合はJPEGでいいと思いますが、今回は透明で容量も大きくないのでPNGを選択しました。

保存先を設定して、保存をすれば画像の書き出しが完了です。

まとめ

いかがでしたでしょうか?

今回は、「Photoshopのクリッピングマスクという機能を使ってブログのプロフィール写真をオシャレにする方法」について解説しました。

プロフィール写真って結構重要だと個人的に思っていまして、ちょっと枠を丸くしてみたりするだけでも、ちょっとオシャレに出来る事がご理解いただけたかなと思います。

こういった少しの差がクオリティの差(読者が感じる)になっていきますので、ぜひぜひブログのデザインにもこだわっていきましょう!

参考になりましたら応援ボタンをポチッとお願いします!


ITスキルアップ応援メディア「STUDY HACK!

Facebookアカウントも持っていない状態からITスキルを勉強した結果、
手取り月収が10万以上も上がった自身の実体験から、何かスキルを身につけたい方には
”ITスキル”の習得をオススメしています!

WEBマーケティングやWEBデザイン、プログラミングなどWEBに特化した情報を発信中!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

IT企業でセミナーやメディア運営を行いながら個人でもWEBデザインやネットビジネス、映像など色んなことを勉強中!(特に海外のマーケティング情報が大好物)このブログでは主に学んだことを中心に、個人や小規模ビジネスを対象にしたオウンドメディアやコンテンツマーケティングに関する情報を中心に書いています!