画像に影をつける(Photoshop Elements)

2011082301.jpg

ネタ切れで更新が滞っていた中、コメントでいろんなネタ提供をいただき、大変助かっています(*^^*)
(ここのところブログ更新よくやってるでしょ?( *^艸^))

今回はPhotoshop Elementsでの影の付け方です。
影をつけるとちょっとイイ感じに見えますよね~♪

簡単なので、画像つきの説明でなくても文字だけの説明で十分ご理解いただけると思いますが、そこはおせっかいやきの管理人ゆえ、またまたクドい説明にお付き合いくださいませm(_ _)m

2011082302.jpg
影を付けたい画像を開きます。

それらの画像を貼り付ける「背景」を作ります。
「ファイル」-「新規作成」-「白紙ファイル」をクリック。

(画像を開くのと新規作成、どちらが先でもかまいません。)

2011082303.jpg
「プリセット」や「サイズ」の▼から任意の白紙サイズを決めます。

「OK」をクリックして決定。

2011082304.jpg
新規作成した白紙ファイルに開いた画像(影を付けたい画像)をプロジェクトエリアからドラッグして重ねます。

2011082305.jpg
レイヤーを見てみると一番下が背景(白紙ファイル)、そして開いて重ねた画像がその順番で並んでいます。

2011082306.jpg重ねた画像(影を付けたい画像)を選択し、四隅の□を動かして拡大縮小したり傾けたりします。

「◯」をクリックして確定します。
(画像をダブルクリックでも確定します。)

2011082307.jpgとりあえず先にすべての画像の拡大縮小をやっちゃいましょう。

あとでどうにでもできますので、とりあえず……って感じでOKです。

2011082308.jpg
「効果パレット」の「レイヤースタイル」を選択し、▼ボタンをクリックして「ドロップシャドウ」を選びます。

2011082309.jpg影を付けたい画像をレイヤーパレットで選び(画像をクリックしても同じです)、「ドロップシャドウ」のパレットの中から好みの「影」をクリックします。

影を付けたい画像全てに同じ手順でドロップシャドウをかけます。

2011082310.jpg
影は「レイヤー」-「レイヤースタイル」-「スタイル設定」で角度を変えたり、影の長さや濃さを変えたりできます。

2011082311.jpg
影の色もカラーパレットをクリックすると変えることができますので、背景が黒っぽい場合は明るい色にするなど、どうにでも設定できます。

「OK」をクリックして確定します。

2011082312.jpg
画像の重なり順を変更するには、レイヤーパレットに表示されている画像をドラッグして上へやったり下へやったりすると好みの場所に簡単に移動できます。

2011082313.jpg「背景」に色を付ける場合は、レイヤーパレットで「背景」を選択しておき、「カラーパレット」で色を選び、「塗りつぶしツール」をクリックして、画面上でクリックすると塗りつぶすことができます。

ブログの背景色に合わせて色を塗りつぶしておくと、ブログなどに貼りつけた場合に違和感なく表示されます。

2011082314.jpg
また、塗りつぶす際に、「パターン」にチェックを入れ、好みのパターンを選択して画面上でクリックするとまたいいかんじだったりします♪



【追 記】

保存方法を追記しておきます。
保存するには二通りの方法があり、「別名で保存」と「WEB用に保存」があります。
ファイルサイズが大きくても良い場合(パソコン内に保存する場合など)は「別名で保存」、ブログにアップするような画像として保存する場合は「WEB用に保存」が良いと思います。

2011082320.jpg
「別名で保存」の場合


「ファイル」-「別名で保存」をクリック。

2011082321.jpg
保存する場所(デスクトップなど)を選び、「ファイル形式」の▼ボタンをクリックして「jpeg」を選択。
(その他、png・gifなど、保存したい形式を選択して下さい。)

2011082322.jpg
「ファイル名」に任意の名前をつけて「保存」をクリックします。

2011082323.jpgファイルサイズのバーをスライドして、好みの画質を選びます。
左(ファイル小)へスライドさせるとファイルサイズは小さくなりますが、画質はかなり悪くなります。
右(ファイル大)へスライドさせると画質は綺麗に保存できますが、サイズは大きくなります。

「OK」をクリックして確定します。

2011082324.jpg
「WEB用に保存」の場合

「ファイル」-「WEB用に保存」を選択。

2011082325.jpg①▼ボタンをクリック。
②「jpeg」(場合によってはその他の保存形式)をします。
③「画質」を決めます。
「画質」の数字が小さければファイルサイズは小さくなりますが、画質も悪くなります。
「画質」の数字が大きいほどファイルサイズは大きくなり、画質も良くなります。
④画像の大きさを決めます。
「縦横比を固定」にチェックを入れておくと、縦・横どちらか一方のサイズを決めるだけで、もう片方のサイズも自動的に割り当てられます。
⑤「適用」をクリックして確定します。
⑥「OK」をクリックします。

2011082326.jpg
「ファイル名」に任意の名前をつけて「保存」をクリックします。


関連記事

16 Comments

kojika  

こんばんは! れんさん、お忙しいでしょうに、さっそく影付け UPしていただいてありがとうございます!こんなにすぐにお返事&UPしていただけるとは思ってもいなくて、本当にうれしいです!
「くどい説明」だなんてとんでもないです。私、PCも初心者ですし、エレメンツも入れたばかりで、まったく使い方分らないので、画像入りでわかりやすい説明で本当に助かります! 早速、れんさんの説明通りやってみたら、簡単に出来ました!うれしいです。本当にありがとうございました! これからもよろしくお願いします。e-466  PS,影付きにした画像は、どうやってほぞんするのでしょう?ホント初心者ですいません…e-330

2011/08/23 (Tue) 20:15 | EDIT | REPLY |   

れん  

kojika様

とりあえず保存方法追記で加えておきました。

ブログにアップするための画像でしたらWEB用を使うといいですよ!
透明な部分がある画像はpngという拡張子で保存すると良いですし、そのあたりの説明は詳しくはしておりませんが、いろいろとやってみて慣れていくのが一番手っ取り早いです(^^ゞ

「くどい説明」喜んでいただけてとってもうれしいです♪
いつもクドクド……説明が長くなってしまうので、見てくださる方にはどうなんだろう??ってよく思うんですよね( *^艸^)

また遊びに来てくださいね!

2011/08/23 (Tue) 22:50 | EDIT | REPLY |   

蚊取り犬  

勉強になります

フォトショップエレメンツで今ちょうどこういうの、作ってたとこです。
覗いてよかった^^
右側のアイコンは知ってたんですけど、影の角度や量も調整できるとは知りませんでした!

れんさんが近所に住んではったらあたしすぐに駆け込みに行ってしまいそうです^^;;;

詳しく説明書いていただいてありがとうございますっ!

2011/08/24 (Wed) 10:24 | EDIT | REPLY |   

kojika  

わぁ また早速のUP&お返事でまで、説明ありがとうございます!本当にうれしいです。
れんさんの過去の記事も見せていただきながら、ブログ目指して(まだやってないんです)、少しづつ練習していきます。クドクドなんてとんでもないです!私のような初心者には、画像入りで事細かに説明していただけると、ありがたい限りです!(エレメンツの使い方ページとか見てもおおざっぱ&専門用語でさっぱり分らないのです)
本当にありがとうございました!!
これからも遊びに来させてくださいね。よろしくおねがいします!
e-466

2011/08/24 (Wed) 12:48 | EDIT | REPLY |   

れん  

蚊取り犬様

こんにちは。
ちょうどいいタイミングの記事だったようで嬉しく思います♪
シャドウだけではなく、他のエフェクトも「レイヤースタイルの設定」でいろいろと変えることができるので、試してみてくださいね!

蚊取り犬さんとは近いのに遠い??
ホントすぐご近所だったらいっぱいパソコンのお話できるのに…。
(早くお会いする時間作らなきゃ( *^艸^))

コメントありがとうございましたm(_ _)m

2011/08/25 (Thu) 11:35 | EDIT | REPLY |   

れん  

kojika様

コメントありがとうございます♪

エレメンツ触ると楽しいんですよね~。
やってて、こんなのもできるんだ~って発見があると嬉しくなってしまいます♪

また何か知りたいことがありましたらぜひお聞かせくださいね。
私でわかることでしたらまた記事にさせていただきたいと思いますm(_ _)m
(ネタ切れゆえ、他力本願!)

2011/08/25 (Thu) 11:47 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2011/08/26 (Fri) 14:44 | REPLY |   

れん  

鍵コメ 2011/08/26(Fri) 14:44様

インクスケープは問題なく無料でダウンロード&使用できますよ!
私はまだイマイチ使い方が把握できていないのですが、使いこなせるとかなり面白そうです♪
ぜひチャレンジしてみてください。

Adobe Extend Script Toolkit CS5……私のパソコンにも入っていました!
鍵コメさんに教えられて初めて気が付きました( *^艸^)
JavaScriptの開発用ソフトのようです。
使い方よくわかりませんっe-330
 

2011/08/26 (Fri) 19:29 | EDIT | REPLY |   

imayo  

この度は・・

れん様 こんばんは~e-257

この度はお騒がせしましてすみませんでした。
お忙しい中、私のHPにおいで頂いたそうで有難うございました。

今回のアクションファイル、せっかくのれん様ご紹介記事でしたが、
私のPCスキル未熟なためインストールは叶いませんでしたが、
エレメンツ大好き人としては何とかこのファイルで遊んでみたく、
Photoshop用アクションDLサイト作品例画像をDLして自分なりに加工を楽しみました~♪

その加工作をHPの「画像加工」と「GIFアニメ」のページにUPしました。
また今回の顛末を「掲示板」にもUPしています。
お忙しいとは存じますが見にいらしていただければ幸いです。

2011/08/26 (Fri) 22:23 | EDIT | REPLY |   

れん  

imayo様

何度もお越しくださってありがとうございます♪

掲示板、お言葉に甘えておじゃまさせていただきました。
すごい、すごい!!
ここまで思いつかなかったです!
私もすごく勉強になります!
掲示板の方、私も書き込みさせていただいてよろしいでしょうか?

昨日はちらっとしか拝見していませんので、今からじっくりおじゃまさせていただきま~す♪

2011/08/27 (Sat) 11:49 | EDIT | REPLY |   

kojika  

れんさ~ん 何度もすいません。e-466
インクスケープ、れんさんの所から飛んで、「インクスケープ↓DOWNLOAD」って書かれたところをクリックするだけで、いいのですよね?
ダウンロードしたこと無いので…(^_^;)
ホント、初歩ですいませーん!e-330

2011/08/27 (Sat) 12:27 | EDIT | REPLY |   

れん  

kojika様

即レスです( *^艸^)

そうです、そうです。
「↓DOWNLOAD」をクリックするとファイルの保存画面が出ますので、任意の場所に保存してくださいね。
その画面に「同意してGoogle Chromeをインストール」という大きなバナーが出てきますので、そちらを間違えてクリックしないようにお気をつけ下さい。

またわからないことがあればいつでもご連絡下さい。

2011/08/27 (Sat) 12:38 | EDIT | REPLY |   

kojika  

早速のお返事
ありがとうございました~!!e-466
これからもよろしく、お願いします!!(見放さないでね!)(笑)

2011/08/27 (Sat) 12:50 | REPLY |   

れん  

kojika様

どういたしまして(#^.^#)
またいつでもどうぞ!
(私でもわかることしかお答えできませんが…( *^艸^))

2011/08/27 (Sat) 13:09 | EDIT | REPLY |   

imayo  

れんさん こんばんは~(^o^)丿
お忙しいなか早々においでいただきまして本当にありがとうございました。
それに過分なお褒めの言葉まで頂戴し気恥ずかしいですが感激しています。

エレメンツで自己流の画像加工(お絵かきやらGIFアニメやら・・)遣って楽しんでいますが、
上手下手は別として5~6年は遣っているのでどシロウトではないにしても画像加工の上級者では絶対無いという中途半端な一人遊び^m^。。。

マイ掲示板においでいただいてる皆様方はそれぞれにご自分のPC楽しみ方を持っていらっしゃるかたが多いんですが、なかなか同じソフト(エレメンツ)で画像弄りされてる方の知り合いは数少なく…
ついつい一人ごとつぶやきが多くなっています^_^;

れんさんの運営されていらっしゃる素敵なブログ、大変勉強になります。
こちらこそご交誼のほどどうぞ宜しくお願い致します。

れんさんの最新記事「画像に影をつける・・」のアイデアを拝借して
「はみ出し画像+ページカール+影付け」の加工をしました!!

2011/08/27 (Sat) 22:36 | EDIT | REPLY |   

れん  

imayo様

エレメンツを触っていていつも思うことがあります。
それは「自分に絵心がなさすぎる」こと……。
もう少し絵心があればこんなのも作りたい、あんなのもできるんじゃないか…と思うんですよね(^^ゞ
imayoさんはそういう「何もなにもないところから何かを作る」という才能をお持ちです!
私の場合は土台(写真など)がないと何も作れないわけです。
この差はエレメンツを楽しむ上でかなり大きいですよね~。

以前額から花が飛び出してきたようなものを作って遊んだことがありますが、この時悩んだのは飛び出した花の影。
この影がうまく入れられるともっとリアル感が出るのだと思うのですが、どのような位置に影を入れると良いのか、絵心がないため想像がつかないんですよ…。
その他、いろいろと自分の才能のなさにうんざりすることがあります( *^艸^)

余談ですが、「Sqirlz Water Reflections」、楽しいですよね(#^.^#)
私のお気に入りソフトの一つです♪
http://blog-imgs-32.fc2.com/s/a/k/sakuraxren/meigetsu.swf
↑こんな感じなど、ちょこちょこ記事中に自分でとった画像を加工したものを貼りつけて楽しんでいます( *^艸^)

2011/08/28 (Sun) 12:11 | EDIT | REPLY |   

Post a comment