Photoshop elementsの最近のブログ記事

ホームページやブログではよく写真を掲載しますが、この掲載する写真の画像ファイルの保存の仕方を簡単にご説明いたします。 この点もたまにご質問をいただきますが、PhotoshopPhotoshop elementsではホームページ用に最適化された画像ファイルにすることができます。

通常デジカメで撮影した写真ファイルは、撮影したカメラや撮影の設定値が保存されており、プロパティ画面で確認することができます。

 

デジカメから保存したファイルを右クリックしてプロパティを確認することで、確認することができます。

写真データのプロパティ確認

 

通常であれば、下記のようにいろいろな撮影時の設定値を確認することができます。 その分データ自体も多少はファイル容量が大きくなってしまいます。

ネット環境では最近は光回線の普及でだいぶ通信速度は早くなってきましたが、それでもモバイル環境で閲覧するユーザーもいるため、できるだけホームページに掲載するデータは小さくする方がよいです。 その方が閲覧者のとってももちろんよいですから。

最近では画像ファイルだけではないですが、ページの表示速度を早くすることが検索結果のランキングに影響するという報告や、離脱率やコンバージョン率に影響しているという調査もありますので、できるだけファイルを小さくする取り組みは必要かもしれません。(ページ表示速度の影響に関する参考記事

property120622.gif

 

Photoshop elementsでwebように保存する方法ですが、画像ファイルをまずホームページ用のファイルサイズに変更しておいてください。(500ピクセルくらい) 

ファイルメニューから「Web用に保存」をクリックすることでホームページに最適化した形式で保存することができます。

web用に保存

 

次に下記画面が表示されますので、赤枠でファイル形式をjpegもしくはgifに設定しOKボタンをクリックし保存します。

Jpegは1670万色を表現できる写真データ用のファイル形式です。写真であればこの形式で問題ありません。

またgifファイルはイラストなど用で256色しか表現できませんが、その際には最適化して保存できますので、色数の少ないイラストなどはこの形式にします。

web用に最適化

 

画像用に最適化されたファイルのプロパティでは下記のように、写真の設定値などのデータも削除され、ファイルサイズも小さくなっています。

 

詳細データ確認

 

ホームページ用のファイルを作成する場合にはこのように保存するようにしましょう。

 

Photoshop elementsを利用した画像加工方法に関してはほかに、サイズ縮小方法縁取り(枠を付ける)文字装飾方法画像の切り抜きなどを紹介した記事もありますので、画像加工についてはそちらもご確認ください。

 

ちなみにアドビ社の無料WEBサービスの「Photoshop express editor」で保存した場合、同じサイズに縮小しても多少サイズが大きくなっています。また撮影したカメラの情報なども一部残っていました。 多少このあたりの機能についても多少差別化されているようです。

Photoshop express editorの操作方法に関する記事

出来ることなら、有料版のPhotoshop elementsの方がいいかもしれません。

 

静岡の有限会社アイ・リンク・コンサルタントではこういった画像加工やブログシステム、検索エンジン対策などのWebをより活用するための勉強会「駿河友の会」を開催しています。

ご興味のある方はぜひお問い合わせください。

Photoshop elementsによる画像加工、今回はカスタムシェイプという機能を利用して、写真画像をお好みの形で切り抜く方法をご説明いたします。

前回まで記事でサイズ変更文字装飾画像の縁取り(枠をつける)の方法も既に説明しておりますので、そちらの記事もご確認ください。

 

それではカスタムシェイプを利用した画像の切り抜きの説明です。

 

まずは画像加工したいファイルを開きます。

ここでホームページに掲載するために、デジカメから取り出したファイルをホームページ用のサイズに変更をしておいてください。サイズは代替500、600ピクセルというサイズです。 (弊社サービスのすこぶるCMSの場合600ピクセルです。ブログの場合は500ピクセルとなります)

画像のサイズ変更については以前ご紹介した画像縮小の記事を参照ください。

 

次に左サイトのメニューからカスタムシェイプのボタン(左下の赤枠)をクリックし、 写真の上で切り抜く大きさをマウスで操作します。

※ここでの説明では「角丸」の四角を選択し、角丸画像に切り抜く説明をします。 角丸の半径は画面上部(赤枠)部分で変更できます。

切り抜く大きさにマウスで操作をしたら下記画面のようになるはずです。

カスタムシェイプ

 

次に画面右下のレイヤーパレットで「シェイプ1」となっているレイヤーをCTRLキーを押しながらクリックします。

そうすると、下記のように切り抜く灰色の枠の部分が点線で囲まれます。選択した状態になっています。

選択範囲の作成

 

次に画面右下のレイヤーパレットの「背景」レイヤーを選択(クリック)します。「背景」レイヤーが濃くなっているはずです。

その状態で、CTRL+C をクリック、CTRL+N をクリック、 出てきた画面をOKボタンで消して、CTRL+Vをクリックします。

選択範囲の切り抜き

 

そうすると下記のように新しい画面に角丸の画像は貼り付けられているはずです。

角丸切り抜き

 

上記画像をホームページに貼り付けると下記のように角丸の写真となります。(ブログの背景色が白色の場合)

ブログの背景色が白色で無い場合は、上の手順の新しい角丸画像を貼り付けた際に、そのファイルの背景レイヤーの色を、ブログの背景色に変更して保存してください。

 

切り抜き例

 

この応用で、カスタムシェイプの形を、先ほどは角丸を選択しましたが、画面上部のシェイプの部分をクリックして、様々な形状に変更できます。

シェイプの形状を変更することにより、いろいろな形で切り抜くことができます。

カスタムシェイプ

 

切り抜きで作成した画像ファイルの保存時は「Web用に保存」をしてください。 Web用に保存に関する記事へ。

 

以下シェイプを変更して切り抜いた事例です。

 

切り抜き例

 

もみじの形で切り抜き

切り抜き例

 

猫の形で切り抜き

切り抜き例

 

以上、応用でいろいろな形状で画像を作成できますので、お試しください。

 

静岡、浜松、豊橋、群馬のWEB勉強会「駿河友の会」ではこういった勉強会を開催しています。ご興味ある方はぜひお問い合わせください。

画像加工ソフトPhotoshop elementsを利用した画像加工方法のご説明です。

今回は文字の入力と簡単な装飾方法を説明いたします。 ホームページでやはり一番目立つのは写真ですので、その写真に文字で装飾したりすることにより、より情報を伝えやすくすることができます。 操作が不安の方は、一度手順を確認いただき、操作してみてください。

慣れてくればいろいろな応用が出来るようになってきます。

 

まずはPhotoshop elementsを起動させ、編集する画像を開きます。

画像を開いたら、ホームページで利用するため、最適なサイズ(500とか600ピクセル)に縮小します。縮小方法は以前の記事をご確認ください。

 

そしてツールバー(画面左)の文字挿入ボタン「T」をクリックし、画像の上の文字を挿入したい部分で一度クリックします。

Photoshopで文字入力

 

カーソルが点滅しますので、その状態で文字を入力してください。

文字色やサイズ、太字にするなどの変更は、画面上部の文字用のツールバーで数値を変更することができます。

Photoshop 文字入力

 

ただ文字を入力するのみであれば、これで終了です。

 

今回はこれだけでなく、文字に縁取りをしたりといった作業の手順までご説明します。 以前の写真そのものに枠をつける方法の応用です。

一度すればそれほど難しくないので、挑戦してみてください。

 

文字に縁をつけるには、画面右横の「効果」欄でまずは「ドロップシャドウ」を選択します。下の画面でドロップシャドウと表示されている横の▼をクリックしてドロップシャドウを選択してください。

ドロップシャドウの効果でどれか(下図では右端)をクリックし、適用ボタンをクリックします。

下図のようにドロップシャドウが適用されます。

(なぜかはわかりませんが、直接レイヤースタイル設定画面を呼び出すことができない為の操作です。)

 

ドロップシャドウ効果の適用

 

次に「レイヤー」→「レイヤースタイル」→「スタイル設定」をクリックします。

レイヤースタイルの設定

 

下記スタイル設定画面が表示されますので、ここで、ドロップシャドウのチェックを外します。

(ドロップシャドウの効果をつけたい場合はここで各数値を変更し見栄えをよくしてください)

文字の縁取りをするために、「境界」にチェックを入れます。

縁取りの色や太さなど、各数値を変更してください。

レイヤースタイル設定画面

 

下記のように文字に縁取りをすることができます。

 

文字装飾完成

 

画面右下のレイヤーパレットで文字レイヤーをダブルクリックすれば、縁取りの効果を残したまま、入力した文字列を変更することもできます。

レイヤーの選択

 

さらに文字色やレイヤースタイル設定画面でドロップシャドウをつけることにより下記のような文字装飾を行えます。

文字装飾で作成した画像ファイルの保存時は「Web用に保存」をしてください。 Web用に保存に関する記事へ。

文字色やドロップシャドウで装飾

 

駿河友の会ではこういった勉強会を静岡、浜松、豊橋、群馬で開催しています。

ご興味のある方は「駿河友の会」ご案内サイトからお問い合わせください。

画像加工の初心者向けの諸々の説明をさせていただいていますこのブログ、今回も画像加工編です。

文字装飾の記事はこちらです。

Photoshop elementsを使用した画像の加工で、デジカメで撮影した写真をホームページ用にサイズを縮小する方法は前回ご説明しました。

今回はその続きで、縮小した画像に、枠を付けてちょっとだけ見栄えをよくしてみようと思います。 その操作説明を以下に行います。

 

最終完成した画像はこちらリンク先のブログのように写真に白枠と一番外側にグレーの線が入った枠も入ったものにないます。下のサンプルのように枠をつけます。

photoshop elementsで枠をつける

※デジカメで撮影した写真を縮小する方法までは以前の記事を参照ください。 シャープをかけたい方はシャープも適用してください。

 

Photoshop elementsで画像を開き、ホームページ用の大きさまでサイズを縮小します。ここでは600ピクセルまで縮小しています。

photoshop elementsで画像縮小

 

さて次にこの画像の全体を選択範囲として選択します。

操作としては「Ctrl + A」 もしくはメニューから「選択範囲」→「すべて選択」をクリックします。

 

border12052902.jpg

 

下記のように写真全体(外枠)が破線で囲われて、選択範囲になっていることを確認してください。

border12052903.jpg

 

次にメニューの「編集」→「選択範囲の境界線を描く」をクリックします。 これで選択されている一番外側に境界線を入れる作業に入ります。

border12052904.jpg

 

下記の境界線画面が表示されますので、幅を5pxに、カラーの色の部分をクリック(この画面はもう一つ下の図を確認)して白を選択しOKをクリックします。 ※選択範囲が内側になっていることを確認ください。

border12052905.jpg

 

上の画面でカラーの部分をクリックすると下記の画面が表示されます。 丸い枠が見えるはずですので、ドラッグして一番左上の白い色の部分までもっていきます。 最後にOKボタンをクリックしてください。

border12052906.jpg

 

すると下記のように白い5ピクセルの枠付の写真画像が出来上がります。更にこれに作業を続けていきます。

border12052907.jpg

 

画像がまだ全体を選択されたままのはずですので、再度メニューから「編集」→「選択範囲の境界線を描く」をクリックし、下記の画面を表示させます。 そして今度は1pxに幅を設定し、カラーでグレーの色を選択します。 これでOKをクリックすれば完成です。

この画像加工で作成した画像ファイルの保存時は「Web用に保存」をしてください。 Web用に保存に関する記事へ。

border12052908.jpg

 

最終画像は多少一番外枠のグレーの1ピクセルの線は見えにくいかもしれませんが完成しています。

この画像をHPにアップすれば「友の会番人のちょっと一服」ブログの写真のようになります。

どうぞお試しください。

 

 

静岡、浜松、豊橋、群馬のIT勉強会「駿河友の会」では随時テーマを取り上げて勉強会を開催しています。今後はご要望を聞きながらこういったテーマも取り上げていきたいと思います。

駿河友の会への入会や内容についてのお問い合わせは、「駿河友の会」ご紹介サイトお問い合わせからよろしくお願いいたします。

今日はPhotoshop elementsを利用してのサイズ縮小方法をご説明します。

弊社のセミナーや友の会の方にはおなじみの作業です。

 

まずはphotoshop elementsを起動し、縮小したい画像を開きます。

 

bolgresize01.jpg

 

次にメニューの「イメージ」 → 「サイズ変更」 → 「画像解像度」と進みクリックします。

 

bolgresize02.jpg

 

画像解像度の画面が表示されますので、単位がピクセルになっているか確認しておきます。他の単位の場合はピクセルに変更してください。

また画面下の縦横比を固定にチェックが入っていることも確認してください。 初期では入っていないかもしれません。

 

そしてここではホームページ用として500ピクセルに幅を変更します。 それぞれのホームページの横幅に合わせて変更してください。

ブログなどでは400~500ピクセルくらいになると思います。 

最後にOKボタンを押して終了します。

 

blogresize03.gif

 

これで画像が縮小されていますので、あとは保存して終了なのですが、このように画像を縮小した場合、画像がピンボケのようにぼけてしまいますので若干シャープな画像になるように補正します。

メニューで「画質調整」 → 「シャープを調整」(もしくはアンシャープマスク)をクリックします。

 

bolgresize04.jpg

 

シャープを設定する下記画面が表示されますので、半径の数値などを調整しプレビューを見ながら調整ください。 

500ピクセルくらいなら0.8~1.0くらいでよいと思います。 ※プレビューにチェックを入れておけば実際の画像がどれくらい変化しているのを確認しながら調整できます。

 

bolgresize05.jpg

 

最後にOKボタンをクリックして保存して終了です。 

※保存するときには「Web用に保存」を選択しましょう。 最適化されてファイルの容量が小さくなります。 画像ファイルの容量を小さく抑えることは、閲覧ユーザーのユーザビリティ向上にもつながりますし、検索エンジンへの最適化にもなります。

→インターネット上でサーバからファイルをダウンロードするのに時間がかかることはユーザーにとっても良くない。また最近はページの表示速度(すべてのデータをダウンロードして処理して表示するまでの時間)が短いほうが検索エンジンに対してよいと言われています。

 

bolgresize06.jpg

 

下の画像がシャープをかけたか、かけていないかの違いです。 違いがはっきりと分かるかと思います。

※あまりかけすぎると画像によってはどぎつくなって質が劣化したように見えるので注意しましょう。

サイズ縮小後、作成した画像ファイルの保存時は「Web用に保存」をしてください。 Web用に保存に関する記事へ。

bolgresize07.jpg

運営者

リンク