Sketchでテキスト周りの装飾をする小技(縁取り・ソリッドシャドウ)
最終更新日: Update!!
普段ウェブデザインの作業をするときにはSketchをメインに使用していますが、バナー制作やメインビジュアルの作り込みにはPhotoshopなどのビットマップ編集ソフトと併用しています。ただ、2つのソフトを併用するのは少し面倒で、Photoshopを使うまでもないなと思うときもあります。ちょっとしたビットマップの加工などSketchで対応できる範囲だとそのまま制作します。
今回はよくあるデザインであるテキストの装飾をする上でSketchで対応するときに便利な方法を紹介したいと思います。
テキストにシャドウをつけたり、グラデーションの塗りを入れたりなど、、その一つに縁取りやソリッドシャドウを入れたいときもありますが、そのままSketchのデフォルトの操作でするとちょっと不自然な感じになってしまいます。そこで上手くデザインが反映されるように工夫してみます。
そこで、テキストをコピーして同じ位置に重なるようにした上で、背面のテキストにボーダーを、前面のテキストに塗りを設定することで自然な感じに見せることができます。
またテキストの角を丸くしたい時には、背面のボーダーを設定しているテキストをアウトライン化し、ボーダーの設定で角を丸めるようにすればOKです!
もちろん、テキストを重ねることで複数の縁をつけることも可能です。いくらでも増やすことができますね。
テキストをアウトライン化してぼかし無しのシャドウでも同じようなことができますが、テキストが重なった部分の表示がおかしくなるので、複数テキストで対応した方がいいのかなと個人的には思います。テキストが重ならない程度であればこの方法も使えそうですね。
そこで、1pxずつずらしてぼかし無しのシャドウをかけることでテキストから伸びたような感じでソリッドシャドウを見せることができます。ちょっと強引ですが、、ちなみに2pxずつだとちょっとガタつきが気になってしまいます。
ただし、この方法を使うと場合によってはかなりメモリを食ってしまいますので注意が必要です、、
いかがでしょうか、ちょっと強引ではありますが手早く対応する時に重宝するテクニックだと思います。またはめんどくさがりなクリエイターさんにはちょうどいいかもしれません(汗)
縁取り文字のテキスト装飾をSketchでやってみる
まずはテキストを縁取りにしたいときの方法です。過去記事「【デザインワークショップ】vol.5 袋文字のテキストをスポーツ新聞風に表現してみる 」のようなテキストにインパクトやポップな印象を与えるときに使えます。 IllustratorやPhotoshopではおなじみの方法で装飾できますが、Sketchでやると下記のように縁のボーダー部分がテキストの塗りに重なってしまいます、、




ソリッドシャドウのテキスト装飾をSketchでやってみる
Sketchのシャドウでぼかし無しのシャドウを斜め方向に設定してもソリッドシャドウをひけるのですが、シャドウがそのままクリアに表示された形になるので、テキストとの間に隙間ができてしまいます。そのため視認性が低くなっています。


いかがでしょうか、ちょっと強引ではありますが手早く対応する時に重宝するテクニックだと思います。またはめんどくさがりなクリエイターさんにはちょうどいいかもしれません(汗)
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories