SketchPageでカッコイイバナーを作る方法（ジュエリー編）

こんにちは！はんな＠眠気眼です。
今回はアラタナが提供するサービス、SketchPageを使って、カッコイイバナーを作る方法をご紹介します！「デザインってよく分からないしなぁ・・・」「写真と文字だけを組み合わせるっていってもなぁ・・・」「雰囲気のある、魅力的なバナーが作ってみたいんだよなぁ・・・」そんなご要望にお応えします！是非これを読んで、マスター★してみてくださいね。

1. SketchPageを立ち上げる

はい。これはSketchPageを立ち上げたときの画面ですね。
今回はバナーを制作したいので、「バナーをつくる」をクリックします。

2. 「画像から作成」を選択

「バナーをつくる」をクリックすると、こんな画面が出てきます。
左から2番目の「画像から作成」を選択します。

3. 手持ちの画像を選択

今回はカッコイイバナーを作りたいので、カッコイイ画像を用意しました。
背景が黒の画像だと、シックな雰囲気でとても重厚感があります。

4. キャンバスのサイズを変更する

今回は横長のバナーを作りたいので、キャンバスのサイズを変更して
横長にしたいと思います。
SketchPage画面の上部にある「キャンバス設定」をクリックします。

「キャンバス設定」をクリックすると、こんな画面が出てきます。
横長にしたいので、横幅は変えずに「高さ」だけを横幅の半分（300px）にしました。

5. 画像の配置を変更する

キャンバスが横長になったことで、見え方がかなり変わりました。
画像をスライドさせて、ジュエリーが左上になるように変更します。
右下にスペースができるので、この位置にテキストを挿入していきます。

6. 見出しテキストを挿入する

上部の「文字」メニューをクリック。

するとこんなメニューが出てきて、画面が薄暗くなります。
テキストが打てるようになるので見出しテキストを挿入します。
今回は、結婚記念日のバナーっぽくしたいので
「Wedding Anniversary」と入れました。

7. 見出しテキストを装飾する

SketchPageスゴイ。
フォントが変えられます。
しかも、自分がインストールしているフォントに加え、
SketchPage既存のフォントなんてものまで入ってます！（何ですって！

今回は結婚記念日っぽく、筆記体を採用しました。
ChopinScriptって名前です。

筆記体にすると「伝統的」なイメージがしますよね。
ジュエリーとか、高級な雰囲気を醸したいときには重宝します。
また、背景が黒いので余計に上品な感じが増しますね。

7. 見出しテキストの配置を変更する

ジュエリー画像の配置を変更したのと同じ要領で、
見出しテキストも動かします。

8. 【ポイント！】見出しテキストにふわっとした装飾を加える

よーくよーく目を凝らして見てみてください。
いま挿入した見出しテキストが、ちょっとガジガジして見えませんか？
このままだと、せっかくの「高級感」が台無しです。

デザイナーはこういうところを大変気にします。
「細かっ！」て思われるかもしれませんが、
こういう積み重ねが、とっても大事なんです。むふむふ。
というわけでこのガジガジを「ふわっ」となめらかに見せるため
「裏ワザ」を使いますっ！

編集メニューにある「枠線」に注目。
「外側」に2pxだけ、濃いめのグレーを選択してください。

ほら！
ちょっとだけ、ほんのちょっとだけ、ふわってして見えませんか？
光彩がかかったような、ぼんやりした雰囲気が出てきましたね。
これで、ガジガジして見えていたのが緩和されました。

9. 補助テキストを挿入する

今回の場合、見出しテキストを英語にしているので
何のことだかパッと見分かりません。

連想される日本語のテキストを挿入して
よりお客さまに「伝わる」よう心がけます。

今回は「15年経っても大好きなあの人へ。」にしました。
こちらも、先の方法でふわっとさせてガジガジ感をなくします。

10. 【ポイントその2！】ジュエリーをもっと左に寄せる

補足テキストが入ったことで、全体的にゴチャっとしてきました。
スッキリ見せるために、ジュエリーの画像を左に寄せたいと思います。
ただ、そのまま寄せてしまうと、背景の白がはみ出てしまいます。
今回は「スタンプ」を活用してこの「背景」を作ります！

「スタンプ」メニューの「すべて」を選択します。

四角い白ボックスをドラッグ&ドロップしてください。

「スタンプ編集」メニューで、色を黒にします。
また枠線の「有効」チェックを外します。

スタンプをキャンバスいっぱいいっぱいに大きくして、
画面を一度、真っ黒にします。

真っ黒になりました。
真っ黒画面の上で、右クリック→「最背面へ移動」をクリックします。
すると真っ黒画面がキャンバスの一番後ろに回り込むので、
ジュエリーの画像と、見出しテキスト、補足テキストがパッと現れます。

全体のバランスを見ながら、
ジュエリー画像をスライドさせて左端に寄せます。
黒背景を敷いているので、途切れる心配もありません。
好きな位置に変更できます。

11. 【ポイントその3！】テキストの位置を整える。

ジュエリーが左に寄った分、右側に余裕ができました。
この「余裕」を利用して今度は、
見出しテキストと補足テキストの配置を整えます。

ここは長年の勘を頼りに・・・
はい、大体この辺りは「勘」です。
「勘」で、大体、見出しテキストと補足テキストが
ピシっと中央に並んだかな？という位置にスライドさせます。

12. 完成！（ぱんぱかぱーん！

キレイにできました！

13. 保存して書き出し

SketchPage右上メニューの「保存」をクリックして、
バナーにタイトルを付けます。
また「保存して出力」ボタンをクリックすると・・・

このように、保存形式・画質を指定して
画像を保存することができます。
今回はJPGで書き出します。
黒ベースなのでそんなに重くはなりませんが
念のため、ダイエットのため画質を80%に設定しました。

14.【おまけ】ガジガジとふわっの違い

こちらはガジガジのまま（枠線なし）で保存したバナーです。

こちらは上記の方法で2pxの枠線を設定したバナーです。


どうですか？
ふわっとしているだけで、ちょっと雰囲気出るでしょう？？

こういう【ポイント】を抑えておくだけでも
ワンランク上！のデザインが出来るような気がしませんか？('-'*)

是非お試しください★

誰でも簡単にバナーが作れちゃう
SketchPageのお申込みはコチラから