コース: ウィークリー Web デザインシリーズ

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

PhotoshopCCの画像アセット機能でWEB用に簡単に画像を切り出す方法

PhotoshopCCの画像アセット機能でWEB用に簡単に画像を切り出す方法

コース: ウィークリー Web デザインシリーズ

1ヶ月の無料トライアルを開始 法人向けサービス

PhotoshopCCの画像アセット機能でWEB用に簡単に画像を切り出す方法

“

こんにちは、渡辺知規です。 今週は Photoshop CC の 画像アセット機能を使って 簡単にウェブ用に画像を切り出す方法について 解説していきます。 まずはダウンロードしてきたこちらの photoshop-assets と書かれている フォルダの中に入っている この PSD ファイルを Photoshop で開いてください。 そしてこれがそのファイルを開いた状態です。 このファイルを使って、今回のレッスンの 解説を進めていきたいと思います。 さて、Photoshop CC の便利機能として 「画像アセット機能」というものがあります。 これは Photoshop で作成したデザインを レイヤーを基準にして 自動的に画像を切り出してくれる 機能となっています。 この機能を使うことによって、 以前は１つ１つ画像をスライスして 切り出さないといけなかったものを 自動的に Photoshop がどんどんと 画像を生成していってくれます。 それではそのやり方を見ていきましょう。 まずこの機能を有効にするために、 ２点ほど設定項目を確認しておきましょう。 まずは Photoshop CC の こちらのメニューをクリックして ［環境設定］＞［プラグイン...］を クリックします。 するとこのような画面になります。 こちらの画面で ここの［Generator を有効にする］ という箇所に チェックが入っていることを 確認しておいてください。 そして次にこちらの ［ファイル］メニューをクリックして こちらの［生成］を選択すると、 このように［画像アセット］というものが 出て来ますので こちらにチェックが入っていることを 確認しておいてください。 この状態で Photoshop CC の 画像アセット機能を利用することができます。 Photoshop の画像アセット機能を 利用するためには、 このようにレイヤーの名前に 出力したい画像の名前を 設定してあげることによって、 自動的に画像が生成されてきます。 さて、このレイヤーの名前の部分に 設定する画像のファイルの名前ですが 書き方にルールがあります。 それではその書き方について見ていきます。 これがその書き方を エディタに移してきたものです。 例えばこのように button01.png と レイヤーに書いてあげれば、…

目次