こんにちは。Halcanaです。
今回は『デザインのドリル』バナートレースの第3回です。スライスツールの使い方もまとめているので参考にしてみてください！
振り返り
ファミリー向けのクリスマスキャンペーンの告知ですね。ポップで優しい雰囲気のバナーです。
デザイン分析 – バランス
今回のポイントは「バランス」です。
「Happy Christmas!」がメインのキャンペーン名部分とクリスマスツリーやプレゼントで構成されたイラスト部分が対角線に配置されています。キャンペーン名部分は情報量が多く比較的重くなっていますが、対角線に同じく重めのイラストを配置することで安定感が生まれています。
また、左右を比較すると、左側には文字、右側にはイラストと対照的な配置になっています。
縦分割して情報と画像に分けて配置するのは定番の構図ですね。こちらも安定感を感じる理由のひとつではないでしょうか。
今回はターゲットがファミリー層なので、あまり奇抜なデザインではなく、親しみやあたたかみを感じられる落ち着いたデザインが求められているのだと思います。カジュアルなイラストを使いつつも、バランスの取れた配置なので元気すぎず落ち着いたデザインになっていますね。
Photoshop操作 – スライスツール
今回はスライスツールの使い方を特集します！
『デザインのドリル』ではバナートレースに必要な画像をダウンロードすることが可能です。演習03も例外ではありませんが、Illustrator用のファイルのためPhotoshopで開くと、
上のように一つの画像として認識されてしまいます。
そこで、スライスツールを使って上の画像を切り分けていきます！手順は以下の通りです。
- 要素を切り分ける（スライスを作る）
- スライスに名前をつける
- 画像として保存する
ちなみに、バナートレースまとめ画像には切り取りツールと書いていましたが、使用したのはスライスツールです。
それではやってみましょう！
要素を切り分ける（スライスを作る）
まずは画像を切り分けます。
左側のツールバーからスライスツールを選びましょう（①）。続いて、切り取りたい画像がはみ出さないように長方形で囲みます（②）。長方形ツールと同じ要領で大丈夫です。
一つできたら全部の画像を長方形で囲みましょう。
こんな感じになりました。
スライスに名前をつける
次に、スライスに名前をつけていきましょう。
まずスライス選択ツールに持ちかえます（①）。スライスツールと同じグループに入っているので、同じアイコンを指２本でクリックするとスライス選択ツールに変更できます。
先ほど作ったスライスをダブルクリックすると「スライスオプション」が開くので、名前を自分の好きな名前に変更しましょう（②）。
この時つけた名前が後で画像として保存した時の名前になるので、自分がわかりやすい名前にしてくださいね！
画像として保存する
スライスに名前をつけたら、画像として保存して終了です！
画面一番上のメニューバーから「ファイル」を選択します（①）。続いて「書き出し」を選択し（②）、「Web用に保存」を選択します（③）。すると、
「Web用に保存」のウィンドウが開きました。まずは右上のボックスで拡張子（png、gifなど）を設定します。
もし作成したスライスのうち一部だけを書き出したい場合は、書き出したいスライスを選択する必要があります。クリックして必要な画像を選択しましょう。選択中のスライスはオレンジ色になっています。
必要に応じてスライスを選択したら、「保存」をクリックします（②）。
「最適化ファイルを別名で保存」ウィンドウが開くので、「スライス」ボックスで書き出したいスライスを選択します。
選択肢は「全てのスライス」「全てのユーザー定義スライス」「選択したスライス」の３つです。作成したスライス全てを書き出したい方は「全てのユーザー定義スライス」を、先ほど必要なスライスを選択した方は「選択したスライス」を選択してください。
最後に好きな保存場所を選択して「保存」をクリックすると、
上記のようにスライスを画像として保存できました。
（書き出す前にスライスに名前をつけないと、自動的に名前が付けられます。）
まとめ
今回のポイントは「バランス」、Photoshop操作はスライスツールを取り上げました。
Photoshop操作はとにかく慣れるしかないですね… たくさん触ってサクサク操作できるようになりたいですね！
次の演習４はこちらからチェックできます。
コメント