トップバー広告(PC)

画像作成

【今日からいきなり使える!】フォトショップエレメンツの使い方をド素人初心者から覚えた実践録。

2016年12月10日

 

Webで画像をつくれるようになる初歩は『Photoshop Elements』なるおすすめ画像編集ソフトを始めること。

 

 

アドビシステムズ『Photoshop Elements(フォトショップエレメンツ)』

アドビシステムズ PSE

→「フォトショップエレメンツ」Adobe公式

30日間無料体験版ダウンロード税込みで15.000円程度使い方参考作品集/ポートフォリオ

30日間無料体験版ダウンロード

フォトショ無料
Adobeサイト「ご検討中の場合は、Photoshop Elementsの30日間無償体験版をお試しください。」へのリンク

(2016年現在は『フォトショップエレメンツ15』が最新)

ダウンロード手順(クリック&タップで開くぞ)

アドビシステムズのIDを作成する

・「Adobe ID の作成方法」

無料体験版をダウンロード

・「ご検討中の場合は、Photoshop Elementsの30日間無償体験版をお試しください。」

※フォトショップエレメンツのトップページ「購入ガイド」から開いたページ最下にある「ご検討中の場合は、Photoshop Elementsの30日間無償体験版をお試しください。」というURL

EメールとアドビIDを入力してサインイン

bandicam 2016-08-02 22-09-20-234

自分のPC&言語環境に適したバージョンを選択してダウンロード

bandicam 2016-08-02 22-08-47-310
この画像では「Windows/64bit版/日本語」のバージョン ※上の項目は「現在フォトショEを使っていますか」的なアンケートだからなんでもいいので「Yes」にしてるよ

※Win10の場合の調べ方として、自身のOSが64bitか34bitであるかはPC画面左下の「窓アイコン」→「設定(歯車アイコン)」→「システム」→「バージョン情報」→「システムの種類」から確認できる(7や8.1を使用している場合でもググればすぐに調べ方は出てくるぞ)

動作するPCの性能(64ビット版のみ)
Adobe公式の詳しい「動作環境情報」
OSWinWindows 7(Service Pack 1)日本語版、Windows 8日本語版、Windows 10日本語(64-bitシステムのみサポートされ、32-bitシステムはサポートされません)
MacMac OS X v10.10、v10.11またはv10.12日本語版
CPUWin1.6GHz以上のプロセッサー
Macインテルマルチコアプロセッサー(64-bit対応必須)
メモリ4GB以上のRAM
公式ブログによるインストール解説
・「インストールについて」エレメンツブログ
バージョン別インストール方法、OS別インストール方法などパソコンに入れて起動させるまでが全て記載
bandicam 2016-08-02 21-58-05-672※Windows/Mac両対応
※アップグレード版なら9.800円

バージョンは2016年夏現在では14だが、だいたい毎年リリースされるので、15でも16でもその時の最新バージョンを使えばよいのだ!

フォトショ廉価版を使って(2015~)

2015/日本ダービー『あの頃に戻るまで200キロ』 
『天国に行くためにやっておきたいこと』元画/©「ジョジョの奇妙な冒険」荒木飛呂彦/集英社 
2015/皐月賞『荒なる血晶ドゥラメンテにながれる血と僕の1000円』 
地元マッピングin戸隠『28歳の天国』 
2016/ドバイシーマクラシック『南斗聖拳トップ対決』 
ネット神器「楽天デビットカード準マスターマニュアル」 
地元マッピングin上田城『ニート・ザ・ラストサムライ』 
地元マッピングin五輪跡『五輪爆心地』 
ニートダイエット「ブドウ糖の旨さはきっとこんな感じ」
ニートダイエット「体脂肪バキュームバスターズ」
対夜道自転車ライト
戦国時代の終わりと一人の侍

パソコンも触れなかったニートのド素人がフォトショ廉価版で作った作例ポートフォリオだい。

ツクールで使うフリーのドット絵ソフトを使うようになって(2014)

あの冬のことはただのおかしなことでしかない。モンハン餓狼伝。何もかもが懐かしい。
得た-なってるわけやないんや(笑)時期を待ってる(笑)だけなにやあ、噛んだ(笑)

Wordでつくるようになって(2011~)

ゲームオブメモリーズという不思議なことをやっていた。
意外と面白い企画送り時代伝
Wordの図形アート「ゲーム企画以下略1」
Wordの図形アート「ゲーム企画以下略2」

ルーズリーフに手書き(2011~)

ルーズリーフ画伯「ゲーム企画用イメージ画」
え、なに。理由がいるのかい? 

 

成長力あり過ぎやないのぼく。

 

「おすすめ画像編集ソフト」

フォトショップエレメンツの超かんたんな使い方。

 

デザイン業界の顔といえるAdobe製画像編集ソフト「Photoshop(フォトショップ)」は超有名。デザイン系のスキルとしては一線級という代物ではないでしょうかね。最近は「CC(クリエイティブクラウド)」という月支払いの借り物が主流となっているとかいないとか。

 

しっかしここでは買い切り版のエレメンツバージョン。

すなわち「PhotoshopElements(フォトショップ・エレメンツ)」である。

 

フリーの画像編集ソフト「GIMP」はすこぶる有名であるし、無料だからこういったものでもいいんだろうけどね。この記事でやってることはGIMPでもやれるレベルのことだろう。さらに色味を変えたり手書き文字を入れるなどはWindows10のフォト機能でそのままできるし。

 

自分は買ったパソコンに付いていたこのフォトショEの12を使ったというだけで。

 

しかしこのフォトショ廉価版でも「プロ仕様を触ってるぜ」って感覚は悪くないんやないかと。CC版に移ることがあった場合に馴染みも出るしさ。

 

そのスキルがある程度有るので他を使う気にならないというだけで。

 

GIMPも入れてみたが編集ツールなどが分離して表示されるのが慣れんかったというだけで。何かに慣れちゃうと他はだいたい違和感を感じるというサダメというだけで。

両翼式・記事内フライングニートマンズキャノン(鶴翼の陣)

 

フォトショップエレメンツの使い方メモ

フォトショップ講座メモ絵

基本動作編

「これができればとりあえず画像編集&制作ができる!」という基本のメモ。アプリを開いて、画像を取り込み編集&画像作成&出力する。

【#0】画面の見かた

【#0】画面の見かた

bandicam-2016-12-08-03-18-26-624

①プレビュー画面(というかまさにキャンバスな編集画面表示そのもの)

今まさに編集している画面そのものというメインカメラ的な部分。まさにキャンバスの上そのもの的な。まあ分かるよね。

②レイヤー画面(画像の階層)

レイヤーとは階層構造のことで、「画像を重ねて編集することでやりやすくなる」とだけ認識していればよいのである。使えばわかるからさ。

bandicam-2016-12-08-15-45-53-097

( ̄ー ̄)bグッ!

③素材となる画像たちの置き場所(フォトエリア)

ここに「画像素材たちを放り込んで」カキカキしたりチョキチョキしたりする机の上みたいなスペースだ。

④編集ツール

「文字を入れたり図形を入れたり何かを消したり」とにかく色々やる道具のある場所。

⑤モード変更

「クイック」×「ガイド」×「エキスパート」で編集モードの変更。基本はエキスパートで。

⑥「保存」×「出力」などのバー上部でその他機能

「編集ファイルの保存」「画像の出力」を「ファイル」で行う。このバー上部には他にもその他の機能が並ぶ。

⑦「戻る」機能

やはり安心安全の「巻き戻り機能」である。間違ったらこれですぐ巻き戻ろう。

【#1】画像を取り込む!

【#1】画像(写真)を取り込む!

bandicam-2016-12-08-03-19-55-559

各フォルダから画像(写真)ファイルを画面上に放り込んでしまえば取り込める。

※「ファイル」から「開く」で取り込むこともできる

新規に作成する場合

bandicam-2016-12-10-18-33-00-574

新規にサイズなどを指定した画像を作りたい場合は任意に作成する。

※「ファイル」から「新規」から「白紙ファイル」からサイズなどを指定(ネット上などで使うなら「プリセット」をカスタムからWEBにしよう)

【#2】そして編集!

【#2】そして編集!

bandicam-2016-12-08-03-19-55-55889

フォトエリアという場所に置かれる画像を選択して編集だ。他の画像もそのまま重ねたり、小さくしたり回したりと、わりと直感的に動かしていけるので色々やってみよう。

 

これは調理なのだ!

 

基本は

・右側に表示される「レイヤー」※フライパン役?

・左側に表示される「編集ツール」※おたま役?

によって上手いこと編集(調理?)していく形となる。

上バーにあるものも使うけれどさ。

【#2α】レイヤーの扱い初歩

【#3】レイヤーの扱い初歩

bandicam-2016-12-08-15-45-53-097

レイヤーの表示/非表示!

%e3%83%ac%e3%82%a4%e3%83%a4%e3%83%bc%e6%93%8d%e4%bd%9c

任意のレイヤーの「目アイコン」のようなものをクリックすると表示と非表示を行える。

※非表示状態で出力するとやはりこのレイヤーが非表示の画像になる

レイヤーの上下を変更!

%e3%83%ac%e3%82%a4%e3%83%a4%e3%83%bc%e6%8a%802

任意のレイヤーを「掴んで(クリック押し)上下」させればレイヤーが入れ替わる。

最下層の「背景」をレイヤーにして動かす!

%e3%83%ac%e3%82%a4%e3%83%a4%e3%83%bc%e6%8a%804

一番最初の画像は最下層に配置されて「背景」扱いされている。動かしたいならレイヤー化する必要がある。背景画像を右クリックして「背景からレイヤー」でOK。

透明度の変更!

%e3%83%ac%e3%82%a4%e3%83%a4%e3%83%bc%e6%8a%803

任意のレイヤーをクリックで選択し、上部にある「不透明度」の値を変更する。

※この機能はテキストなどに使っても味が出る

下のレイヤーと統合!

%e3%83%ac%e3%82%a4%e3%83%a4%e3%83%bc%e6%8a%805

テキストなどはテキストレイヤーとして重なった状態。そっのほうが編集はしやすいだろうが、統合してしまうのも「整理になって良い」場合などに使用。やはり右クリックで「下のレイヤーと統合」でOK。

「削除」や「コピー」などその他もろもろ「右クリック」で!

bandicam-2016-12-08-19-03-50-001

とにかく右クリックで出現。

コピー(複製)はここで行う。

「削除」もここ。

後はその他諸々がある。

【#2b】文字を入れる

【#2b】文字を入れる

bandicam-2016-12-10-19-46-18-657

画像+テキスト=画像作成

みたいなもんでしょう。大体は。それくらいの基本でありますよこれは。左側の編集ツールから「T」というテキストツールをクリックしてあとは文字を打ち込んで完了。位置やサイズは直感的に動かせるし、色やフォントも様々に編集可能である。

※たまに文字の編集ができなくなる場合があるがこれはラスタライズという最終決定がなされてしまった状態。何かの拍子にそうなってしまっている場合があるけど、巻き戻せないところまで来ているなら新しく文字を作って入れるしかないかな

 

レイヤースタイル編集で文字をデコる!

bandicam-2016-12-10-19-47-09-423

「テキストのレイヤーを右クリック」すると色々と「特殊編集」が可能になるが、「レイヤースタイルの編集」をよく使うぞ。文字の周りを色つけたり、影をつけたりと装飾が可能。

 

【おまけ】Windows10の「フォト」

bandicam-2016-12-11-13-23-39-365

手書き文字ならWindows10のフォト機能で「描画」をすれば出来てしまう。画像をクリックして開けばできるのだからお手軽だよね。

※フォト機能…Windows10で画像をクリックすれば出てくる画像表示機能(PC下バーのマドアイコン→歯車アイコン(Windowsの設定)→システム→規定のアプリ→フォトビューワー→フォトに設定していると)/画像右クリックからプログラムから開く→フォトでもいい

 

【#2γ】色味でごまかす

【#2γ】色味でごまかす

bandicam-2016-12-08-18-55-23-956

カンタン一発で色味をいい感じに。

画質の色味は詳細に決めることが可能だが、この「クイック編集」から行うものは一発でそれっぽい雰囲気をうみだすことが可能。普段は「エキスパート」編集をするが、これを「クイック」に切り替えて幾つかのテンプレから色調を変更すればOKである。

※エキスパートモード時にちゃんとレイヤーを選択しないと機能しない。「どのレイヤーの色調を変えるんでっか?」みたいになるからちゃんとどれかのレイヤーを選択してからクイックにいくようにする。

 

「画質調整」でさらにごまかす

bandicam-2016-12-08-18-55-23-9569

基本は上部バーにある「画質調整(N)」から詳細に決めることができる。クイックで変えたところでさらにちょっと変更を加えるなどすればもう再現不可能なほど深みのある表現が可能なことだろう。

 

【おまけ】Windows10の「フォト」

bandicam-2016-12-11-13-18-36-408

Windows10のフォト機能を使えば色味程度はカンタンに変えられるけど。

※フォト機能…Windows10で画像をクリックすれば出てくる画像表示機能(PC下バーのマドアイコン→歯車アイコン(Windowsの設定)→システム→規定のアプリ→フォトビューワー→フォトに設定していると)/画像右クリックからプログラムから開く→フォトでもいい

 

【#3】「データ保存」&「画像出力」

【#3】「データの保存」と「画像出力」!

bandicam-2016-12-09-03-16-43-153

「ファイル」から「保存(そのまま上書き)」「名前をつけて保存(新しく)」で編集データの保存と画像としての出力が可能。

編集データの保存「PSD形式」

bandicam-2016-12-09-04-12-20-542

※保存時に「Photoshop(*.PSD*.PDD)」を選択

こんな感じにフォトショップEで開けるファイルとして保存できる。開けばまたレイヤーレベルの編集が可能。プロの現場ではこの形式のデータをやり取りするとかしないとか。

参考「いろいろな保存形式について(psd,jpeg,gif,png)」エレメンツブログ

参考「psd形式(ぴーえすでぃーけいしき)」はてなダイアリー

 

画像として出力「PNGファイル」

bandicam-2016-12-09-04-13-33-312

※保存時に「PNG(*.PNG)」を選択

画像として出力するにはこのPNG(ピング)がいいだろう。今時は。勿論JPGファイルでも出せるが、PNGが劣化もなくおすすめだろう。あまり知らないけど。(JPGは軽いけど劣化が起きやすい。PNGは少し重いけど綺麗。)

 

参考「GIF、JPG、PNGの違い」SEO Japan さま

参考「BMP,JPG,GIF,PNG 画像フォーマットの違いを歴史的背景から解説」パソコン実践講座 -道すがら講堂- さま

※JPGファイルは透過ができない。(出力する際に「マット」の項目で背景にしたい色味を決めるらしい)

これでルーズリーフに手書きをしたりWordやエクセルを超える画像作成が可能。

必要かどうかは別として。楽しいというだけであるとしても。全部の項目は覚えなくていいのだ。

使うものから覚えていけばいいのだ。

使わないものは一生使わないのだ。だからきっと全部はわからないのだ。

そういうことなのだ(迫力)

両翼式・記事内フライングニートマンズキャノン(鶴翼の陣)

 

テクニック編「お手軽すぎるちょっとワザ」

「こういうテクがありましたけど?」という技のメモ。ちょっとだけ意趣を凝らすことができたモノをば。

「透過」の画像をつくる

「透過」の画像をつくる

bandicam-2016-12-10-18-43-54-817

この「透過」こそは画像作りで最も需要がありそうな項目。

Wordで画像をこしらえていた頃にはスーパー技術だとばっかり信仰していた私ですけれどね。フォトショならあら簡単。レイヤー構造を理解すればあら簡単なのですよ奥さん。

背景やら何やらのレイヤー部を削除してしまえばよろしいというだけで。

※ある画像の要らない部分を切り抜いて透過させるのはまた違ったやり方で、編集ツールから「クイック選択ツール」などを用いて色々とやるのだまた後述しようと思うけれど

※JPGファイルは透過ができない。(出力する際に「マット」の項目で背景にしたい色味を決めるらしい)Amazon電子書籍(KDP)などではJPG画像がキホンなので気をつけたい。

アニメーション作成/GIFアニメ

アニメーション作成/GIFアニメ

©映画トランスフォーマー
画像は映画トランスフォーマーより

レイヤーを2枚以上重ねて、「ファイル」→「Web用に保存」→「アニメーションを描画」にチェックを入れて、(フレームディレイの項目で速度調整)→「保存」で完了。

※枚数が多いか画像が大きすぎると作れない場合があるので、その場合は枚数を減らすかサイズを小さくする

効果をかける/フィルター(T)

効果をかける/フィルター(T)

7e2e2aa648cdb93acf93e3779ec897cc

バー上部の「フィルター(T)」から様々な効果をかけることが出来る。上の画像では「“鬼脚化”」というテキストがあるレイヤーにだけ「表現手法」→「風」という具合に疾走感を出しつつ、全体に「描画」→「逆光」→「ムービープライム」で光のラインを入れて電撃感も出しているのだ。あとはテキストを「変形」→「つまむ」などでいじったり。

邪魔な何かを消す/スポット修復ブラシツール(J)

邪魔な何かを消す/スポット修復ブラシツール(J)

bandicam-2016-12-11-15-35-29-460

「ちょっとどいた~~!!」

とは言ってられないこんな世の中じゃ。こういうことも起こりうるわけですよ。いやあの方たちが邪魔ということではなくてね。あくまでも同じ年同じ月同じ日同じ刻に観光をおこなった同志たちではあろうけれどもね。うん。そこはお互いを認めあっていかないといかんよね。そういう風に。でもちょっとほら。ちょっと邪魔じゃん。

※画面左にある編集ツールの中から絆創膏みたいな「スポット修復ブラシツール(J)」を選択。後は対象物を消し消ししてやると完了。

普通なら背景まで消えていくものだろうけどこの機能なら、

なんと、

何故か背景が残るのである。

スーパー技術やねえ。どうなっとんのやろねえ。デジタル的にうまいこと予想とかして埋め合わせてるんかねえ。

※しかし本当に上手く処理するには使い手のテクが必要になる。

画像切り抜き(スーパーお手軽版)/選択ツール(A)

画像切り抜き(スーパーお手軽版)/選択ツール(A)

bandicam-2016-12-11-16-09-23-917

 

画像切り抜きの「スーパーお手軽バージョン」をお送り致します。

 

そんなテクのないワタクシですから、よく画像コラとかで使われるこの最も需要の有りそうな切り抜きに関してもね、ほどほど以下のテクしか持ち合わせてはおらないのです。なぜなら使わないからなのであります。まあそういったニートの事情を置いといて。

 

①まずは「クイック選択ツール」でテキトーに切り抜き!

bandicam-2016-12-11-16-09-23-917

「クイック選択ツール」
ほぼ半自動的にうまいこと境界線を判別して選択してくれるモードだ!

まず左の編集ツール群から「選択ツール」をクリック→

そして下部に出てきた中で「クイック選択ツール」をクリック→

それを使ってテキトーに切り抜きたい部分を選択していこう。

あとは上部バーにある「編集(E)」から→

・「カット」で切り抜き決定

・「ペースト」で新レイヤーに貼り付け

を行う。

 

②そして「選択ブラシツール」で少しだけ細かく整え調整!

bandicam-2016-12-11-16-09-23-917000

「選択ブラシツール」
マニュアルで手書き線をひける。細かく任意の箇所を選択できるツールだ。

こんどは「選択ブラシツール」をクリック→

コイツの線をそれなりに太くし、周りを整えるように滑らかに選択していこう。

 

③さあ完成!

bandicam-2016-12-11-16-16-22-384

 

という超お手軽手抜き切り抜きである。

 

周りのいびつな部分は対象レイヤーの右クリックからできる「レイヤースタイル編集」などからごまかしてしまうことも可能。

 

およそプロの職人技とは比べようもないけど使いやすいテクでした。

 

さらに雑で一発すぎる「自動選択ツール」も!
bandicam-2016-12-11-16-05-13-627

これはもう一発で勝手に判断しまくって選択してくれるというゆとりツール。

勝手に判断しまくった結果にすごい判断が下されているけれど。そこはゆとりだから大目に見て育てていかんといけないよまったく。

※境界が明確に分かれている画像の場合なら結構つかえるぞ。白黒はっきりついているものはいつだって判断しやすいのだ。はっきり白黒つけるのが一番難しいんだろうけどさ。

図形など/シェイプ
bandicam-2016-12-11-15-29-50-441

 

図形チックなオブジェを配置できる。

 

フリー素材さんなどでを持ってくることもできるが、一応デフォルトでこのソフトにも用意されている図形やら吹き出しやらスタンプ的なものが利用できる。

※左の編集ツール群から「シェイプ」で下部に出てきたツールを選択すればOK。

 

-
なにかあれば

 

↑デスクトップPCのおすすめを経験に比して厳選ラインナップ(ほぼ自分用のガチ選び)

 

素材を使わせて頂けるサイトさん

写真系統の素材!

bandicam-2016-12-11-18-44-30-030

全てが「パブリック・ドメイン/Creative Commons CC0」

こういう場合に最も助かるパブリックドメインな素材たち。その思想に感服。パブリックドメインはニートが最も助かるシステムである。自分も数枚程度の写真で参加しているぞ!しっかし求められるクオリティラインについていけず数枚のみ!こうやって高い品質が守られているのだ!

公共サービスっていいよね。

 

アイコン図形素材!

bandicam-2016-12-11-18-44-09-374

基本的にはだいたい自由に使用できるのでありがたい※著作権の放棄はされていないぞ

パブリックドメインではないけれどほぼほぼ自由に使わせて頂ける神サイトさん。MITライセンス的なところかな。いや著作権表示などすらいらないというからそれよりもさらに使いやすいということだ。

 神はデジタルサイトにも宿っていると本気で思うね。

 

フォントたち!

bandicam-2016-12-11-18-43-57-858

・「FONTFREE」

PCへのインストール方法

利用規約は各作成者さんによるということで少し使いづらい

フォントを変えると一気にテキスト類の見た目が変わるので助かっている。けれども規約によっては使いづらいものも多いために確認作業が発生する。へえそりゃへえ!わっしたちがちゃんと確認しますさかいにありがとうごぜえますへへっ!!

(規約統一されてくれるとありがたい。)

さらに参考「日本語フリーフォント、これだけは欲しい厳選22個」

 

とにかく、

 

ほぼほぼフリーに使えるのは最高であるから感謝。

 

大きいゲームのような作品にならいっくらでも感謝と敬意をこめて表記させていただくものだが、量産タイプの記事で使用する場合にはどうしても使いづらくなってしまうからね。

 

スポンサーリンク/記事直下型2連装無職砲

プロフカードぼたん

-画像作成
-,