普段ウェブデザインの作業をするときにはSketchをメインに使用していますが、バナー制作やメインビジュアルの作り込みにはPhotoshopなどのビットマップ編集ソフトと併用しています。ただ、2つのソフトを併用するのは少し面倒で、Photoshopを使うまでもないなと思うときもあります。ちょっとしたビットマップの加工などSketchで対応できる範囲だとそのまま制作します。   今回はよくあるデザインであるテキストの装飾をする上でSketchで対応するときに便利な方法を紹介したいと思います。   テキストにシャドウをつけたり、グラデーションの塗りを入れたりなど、、その一つに縁取りやソリッドシャドウを入れたいときもありますが、そのままSketchのデフォルトの操作でするとちょっと不自然な感じになってしまいます。そこで上手くデザインが反映されるように工夫してみます。  

縁取り文字のテキスト装飾をSketchでやってみる

まずはテキストを縁取りにしたいときの方法です。過去記事「【デザインワークショップ】vol.5　袋文字のテキストをスポーツ新聞風に表現してみる 」のようなテキストにインパクトやポップな印象を与えるときに使えます。   IllustratorやPhotoshopではおなじみの方法で装飾できますが、Sketchでやると下記のように縁のボーダー部分がテキストの塗りに重なってしまいます、、     そこで、テキストをコピーして同じ位置に重なるようにした上で、背面のテキストにボーダーを、前面のテキストに塗りを設定することで自然な感じに見せることができます。     またテキストの角を丸くしたい時には、背面のボーダーを設定しているテキストをアウトライン化し、ボーダーの設定で角を丸めるようにすればOKです！     もちろん、テキストを重ねることで複数の縁をつけることも可能です。いくらでも増やすことができますね。     テキストをアウトライン化してぼかし無しのシャドウでも同じようなことができますが、テキストが重なった部分の表示がおかしくなるので、複数テキストで対応した方がいいのかなと個人的には思います。テキストが重ならない程度であればこの方法も使えそうですね。    

ソリッドシャドウのテキスト装飾をSketchでやってみる

Sketchのシャドウでぼかし無しのシャドウを斜め方向に設定してもソリッドシャドウをひけるのですが、シャドウがそのままクリアに表示された形になるので、テキストとの間に隙間ができてしまいます。そのため視認性が低くなっています。     そこで、1pxずつずらしてぼかし無しのシャドウをかけることでテキストから伸びたような感じでソリッドシャドウを見せることができます。ちょっと強引ですが、、ちなみに2pxずつだとちょっとガタつきが気になってしまいます。     ただし、この方法を使うと場合によってはかなりメモリを食ってしまいますので注意が必要です、、    

---

  いかがでしょうか、ちょっと強引ではありますが手早く対応する時に重宝するテクニックだと思います。またはめんどくさがりなクリエイターさんにはちょうどいいかもしれません（汗）