実践④Photoshopで作った画像を書き出す【フォトショップ入門講座】

最後に、作った画像をWebページでも見られるように書き出してみましょう。

画像を書き出す

画像の書き出しはメニューバーの「ファイル」から行います。

書き出し から「書き出し形式」をクリックして下さい。

どんな風に書き出すかを決めるウィンドウ（パネル）が表示されます。

1.1MBはWebページ用の画像としてはかなり重いです。
ファイル形式をJPGに変えてみましょう。

JPGに変更すると「画質」という項目が増えます。
60～70％くらいまでは下げても、さほど変わらないことが多いです。
プレビューを確認しながら、画質を設定してみましょう。

右下の青い「書き出し」ボタンをクリック。

ファイルの保存先を決めて、保存ボタンをクリックします。


設定した保存先を確認し、ファイルが作成されていれば完了です。

書き出した画像をEdbaseサイトに載せる

HTMLで株式会社Edbaseのサイトを作っている方は、index.htmlで表示する画像を書き出したものに変更してみましょう。

保存した画像を、edbase > images フォルダに移動します。

index.htmlをエディタで開いてください。
</header>の下にあるimgタグのパスを、新しい画像のものに変更します。
保存して、ブラウザで確認。
反映されていれば、ファーストビュー画像の変更完了です。

最後に

今回の内容ができれば、Photoshopの基本操作はほぼマスターしていると言えます。使用する色やトーンカーブの具合を変えるだけでバリエーションもできますので、色々な画像を作れるようになるはずです。

もちろん今回紹介した以外にも、描画モードやフィルター効果など、Adobe Photoshopには沢山の機能があります。基本が分かれば、Webサイトや書籍のチュートリアルを見て実践ができるようになりますよ。

Skillhubブログ

フォトショップの使い方！初心者のための25の基本スキルマスター方法