04　バナー作成講座　PSDファイルからの書き出し

在宅・フリーランスになるためのバナー作成講座

Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。
今回は、Photoshopを使ってアートボードごとに作成したバナーを、書き出し形式を使い、１枚１枚をjpeg/png形式で書き出しを行う工程を行っています。

今回は、Photoshopの「アートボード」を使って、異なるデザインを２枚同じ画面で作ってから、書き出していきましょう。

書き出し？　面倒な作業になりますか？Photoshop形式のままではダメなんですか？

そうですね。Photoshop形式だと拡張子が、PSDとなり、ブラウザで表示することができません。拡張子がjpeg / png などになるように書き出す必要があります。

アートボードを使って、もう一つバナーを作ってみよう

03　バナー作成講座で作成したファイルを開き、03で作成した青いバナーをアートボードごとコピーします。

動画で学ぶWebデザイン教室　 Fuku…

03　バナー作成講座　背景に写真・さくら吹雪のブラシ | 動画で学ぶWebデザイン教室　 Fukuokamiyako 在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます。 バナ…

レイヤーパネルから、作成したバナーのグループレイヤーを展開しているようだったら、一旦下記のように畳んでおきます。グループレイヤーをレイヤーパネルの下にある「レイヤーアイコン」まで、ドラッグすると、グループレイヤーがアートボードごと、内容も含めてコピーされます。

複写されたアートボードは、名前にコピーとついていますので、レイヤー名の上をダブルクリックし、名前をわかりやすく変更しておきましょう。

コピーしたバナーの背景や、文字の色などを変更して、構図は同じですが、別の提案ができるように変更していきます。

画面に複数のバナーを作成する際、今回は同じサイズですが、異なるサイズでもできます。

メニューバーのファイルから書き出しを選択

メニューバーのファイルから書き出しを選択し、副メニューの「書き出し形式」を選択します。

すべて選択にチェックが入っていると、２つのバナーが書き出されます。形式や、画質などをチェックして右下の書き出しをクリックしましょう。