Sketchで文字の縁取りをする方法【サイトアイコン作成】

　Illustratorを使用することを諦めSketchを使用することにしました。（Adobe製品高いし・・。）

Sketchは機能が少ない分簡単にバナーを作成したり、思い通りのウェブレイアウトを作成できますね。あくまでデザイン初心者が作成する場合ですが。

Illustratorの参考サイトは星の数ほどありますが、Sketchの情報は少なすぎることがデメリットです。

　さて、そんなわけでSketchで文字の縁取りをしてサイトアイコンを作成する方法を公開します。

サイトアイコンはWordpress関係ならファビコンともいいますし、はてなブログならブログアイコンとも言いますね。

はてなブログ用のブログアイコンは192px  × 192px以上の正方形サイズで作成することを推奨しております。Wordpressのファビコンは512px × 512pxで作成することを推奨しています。

使用環境【Sketch3 version39.1】【macOS】

1. Artboardを追加・サイズを変更（サイズは192px  × 192pxで作成）

画面左上のInsertを選択して、ArtBoardを追加します。

ArtBoardは白紙の紙みたいなものです。

ArtBoardが追加されたら、ArtBoardを選択して画面のSizeの欄の数値を変更します。

今回はWidth:192 Height:192で作成します。

※ちなみに画面サイズが小さいので画面上部ツールバーのところに虫眼鏡のマークがかかれてるところのプラスを押すと拡大します。

2.文字を入力する

左の上のボタンArtBoardを選択したところに【Text】という項目があるのでそこをクリックします。

Textをクリックした後は、新しく追加されたArtBoardをクリックします。

するとArtBoard上にテキストが追加されます。

 今回はこのサイトのサイトアイコンを作成するので、妄想ベログの【妄】の字を入力します。

 入力したらArtBoardにちょうど収まるようにフォントサイズを変更します。

Sizeを120にしました。

3.入力したテキストの線を追加

Boardersをクリックします。

Boardersをクリックすると縁取りになります。

あとはColorから縁の色を変更したり、Thicknessで縁の太さを好みのものに変更するだけです。

さて以上です。どうでしょうか。Sketchではとても簡単な操作で縁取りができますね。

他にも、細かく変更するならアウトライン化したりもできます。

今回は簡便に作成することを目的としてますのでこれで以上となります。