Sketch3で年賀状作ってみました。

 仕事で少しだけ触ったSketch3がとても便利そうだったので、練習がてら年賀状を作ってみました。Webデザインに特化したツールですが、意外と作れちゃったので過程を紹介しようと思います。

１、下絵を描く

どんな年賀状にするか考えながら適当な紙にサルを描きます。最近、アメリカンレトロが好きなのでそんなイメージで描きました。

今回は左上のサルを採用することにしました。左上中心にスマホで写真を撮りなおし、Evernote経由でMacに送ります。

２、Sketch3で下絵をなぞる

ここからSketch3での作業です。Insert>Artboard>Paper Sizes>Letterでアートボードを作ります。下絵の写真を貼り付けてOpasityを50%にしてパスを引きます。（Letterは日本のはがきサイズではないことに印刷時に気づきました…詳細は後述）

パスは基本的に円か三角形を挿入して、アンカーポイントを増やし、変形させていきます。胴体は三角と円を結合させて作っています。結合は理解不足の点があり、下記の記事を参考にして作業しました。

Sketch.appのパスについて解説するよ。【結合編】 – Sketch.app Advent Calendar 2013 | creative tweet.

MacBookAirのトラックパッドでちまちまと作業しましたが、ペンタブ使えばもっとサクサク引けたかなぁと思います。反省。

３、色をつける

まずは色分けします。色分けが終わったらCreate New Shared Styleを選んで同じ色の箇所は同じスタイルを設定します。

スタイルの設定が終わったら色の微調整をします。スタイルを設定していれば一箇所色をいじるだけで同じスタイルのパーツも全て色が変わるので楽ちんです。

何色か試してみて色決めおわり。ついでに目と口を変えたくなったので修正しました。

４、文字を入れてレイアウトを決める

まずは載せる文字を決めて、必要なフォントをダウンロードしてきます。Happy New Yearは内臓フォント、あけまして〜はピグモ01を使ってます。

あとはサルを並べたり、旗の色を変えたりしながらレイアウトを考えて、パターンを増やしていきます。Sketch3でチェックしづらいレイアウトのズレははZeplin※で確認をしながら進めます。

※Zeplinを使うと下記のようにSketch3で作成したオブジェクトのインデントや余白を簡単に確認ができます。Webデザインをする時にも便利です。画像出力など他の機能もありますが、使い方等は割愛。

この段階では最終決定はせず、複数パターンを印刷して決めることにしました。

５、印刷する

ヨドバシで買ってきたインクジェット用はがきで試し刷りをしました。 

ELECOM スーパーファイン紙 両面 特厚 はがきサイズ 50枚入り EJK-SRTH50

Sketch3のFile>Printだと用紙がうまく選べなかったので、アートボードを画像として書き出してから印刷をかけました。（画像の書き出しはアートボードを選択してウィンドウ右下のMake Exportableを押すとできます）

ここで印刷してみて、Sketch3デフォルトのアートボードのLetter（612×792）は日本のはがきサイズではないことに気づくという大失態を犯しました。ということで、アートボードのサイズを年賀状に合うサイズの600×888に変更してレイアウトを調整。

印刷→チェック→Sketch3で微調整を繰り返して完成。ちなみに、カラーモードはいじってません。変な色になったらカラーモードも直そうかなと思ってましたが、特に問題はなかったので変更せず進めました。本来ならCMYKにすべきですが手抜きですー。

最後はこの２つで悩みましたが、家庭内で相談の末、左に決定しました。決定理由はメッセージ書く余白が少ないからです。。これでインクジェット用の年賀はがきに刷って完成です。（↑写真の青い紙は住所隠すためのせてます）

おわりに

アートボードのサイズを間違うという失敗はあったものの、全体的には楽々と作業が進みました。本来のSketch3の使い方ではないですが、理解不足な結合の勉強にもなりトータルでは楽しかったです。みなさまもSketch3で遊びましょうー。まだ使ってない方は１ヶ月無料のフリートライアル版があるのでぜひ試してみてください。公式サイトからダウンロードできます。 

Sketch - Professional Digital Design for Mac