Update!!普段ウェブデザインの作業をするときにはSketchをメインに使用していますが、バナー制作やメインビジュアルの作り込みにはPhotoshopなどのビットマップ編集ソフトと併用しています。2つのソフトを併用するのは少し面倒で、Photoshopを使うまでもないなと思うときもあります。したビットマップの加工などSketchで対応できる範囲だとそのまま制作します。今回はよくあるデザインであるテキストの装飾をする上でSketchで対応するときに便利な方法を紹介したいと思います。テキストにシャドウをつけたり、グラデーションの塗りを入れたりなど、、その一つに縁取りやソリッドシャドウを入れたいときもありますが、そのままSketchのデフォルトの操作でするとちょっと不自然な感じになってしまいます。そこで上手くデザインが反映されるように工夫してみます。縁取り文字のテキスト装飾をSketchでやってみるまずはテキストを縁取りにしたいときの方法です。」のようなテキストにインパクトやポップな印象を与えるときに使えます。そこで、テキストをコピーして同じ位置に重なるようにした上で、背面のテキストにボーダーを、前面のテキストに塗りを設定することで自然な感じに見せることができます。テキストを重ねることで複数の縁をつけることも可能です。いくらでも増やすことができますね。テキストをアウトライン化してぼかし無しのシャドウでも同じようなことができますが、テキストが重なった部分の表示がおかしくなるので、複数テキストで対応した方がいいのかなと個人的には思います。テキストが重ならない程度であればこの方法も使えそうですね。ソリッドシャドウのテキスト装飾をSketchでやってみるSketchのシャドウでぼかし無しのシャドウを斜め方向に設定してもソリッドシャドウをひけるのですが、シャドウがそのままクリアに表示された形になるので、テキストとの間に隙間ができてしまいます。そのため視認性が低くなっています。そこで、1pxずつずらしてぼかし無しのシャドウをかけることでテキストから伸びたような感じでソリッドシャドウを見せることができます。強引ですが、、ちなみに2pxずつだとちょっとガタつきが気になってしまいます。この方法を使うと場合によってはかなりメモリを食ってしまいますので注意が必要です、、いかがでしょうか、ちょっと強引ではありますが手早く対応する時に重宝するテクニックだと思います。topこのウェブサイトはCookieを使用します当ウェブサイトではCookieを使用してアクセス解析や広告を行なっており、ウェブサイトの運用やコンテンツ制作に役立てています。サイトの利用を続けることで、Cookie使用に同意したことになります。