WebDesigner's Memorandumウェブデザイナーの備忘録

Sketchのテキスト編集周りの基本操作

Sketchのテキスト編集周りの基本操作

今回はSketchのテキスト関連の操作についてまとめておきます。

テキスト追加の基本

まずはツールバーから選択するか、Tを押して、テキストツールに切り替えます。

あとはテキストを追加したい位置をクリックすると、黒い線が表示されるので、キーボードで文字を打ち込みます。
esccommand + enterで入力完了です。

テキストの追加方法

テキストオブジェクトとなるので、入力後は移動ツールで移動させられます。

修正したい場合は、移動ツールの状態でテキストオブジェクトをダブルクリックするか、テキストツールでクリックすれば編集状態に切り替わります。

ポイントテキストとテキストボックス

テキストツールの状態でクリックすると「ポイントテキスト」と呼ばれる状態になりますが、ドラッグアンドドロップすると「テキストボックス」を作成できます。

テキストボックスの追加

ポイントテキストと違い、テキストボックスの場合は右端で自動的にテキストが折り返します。
複数行の文を流し込む場合はテキストボックスを使用しましょう。

テキスト選択時のプロパティエリア

テキストを選択しているときに、画面右のプロパティエリアの表示項目もテキスト用に切り替わります。

TEXT

[TEXT]プロパティでテキストの基本的な設定をします。

[TEXT]パネル

 内容備考
フォントフォント名を指定する 
太さフォントの太さを指定する 
文字色を指定する 
Sizeフォントサイズの指定 
Character行間の指定 
Line1文字1文字の間隔を指定 
Paragraph改行だけの行の間隔を指定 
横幅や高さの設定

下記の中から横幅や高さの設定を指定する

  • Auto width:横幅が文字に合わせてなりゆきになる(ポイントテキスト)
  • Auto height:横幅固定になる(テキストボックス)
  • Fixed size:横幅固定になる(テキストボックス)
このボタンでポイントテキストとテキストボックスの切り替えも可能
文字揃え(横)

下記の中から文字揃えの設定を指定する

  • Text align left:左揃え
  • Text align center:中央揃え
  • Text align right:右揃え
 
文字揃え(縦)

下記の中から文字揃えの設定を指定する

  • Align top:上揃え
  • Align middle:中央揃え
  • Align bottom:下揃え
 

Text Options

[TEXT]プロパティの右上にある「歯車」アイコンをクリックすると、[Text Options]が[TEXT]の下に表示されます。

[Text Options]の表示

 内容
Decoration

下記から装飾を選択する

  • None:装飾なし
  • Underline:下線を表示
  • Strikethrough:打ち消し線を表示
Transform

大文字・小文字の扱いを選択する

  • No letter casing:大文字・小文字の変更はしない
  • Use uppercase characters:全て大文字にする
  • Use lowercase characters:全て小文字にする

その他の操作

テキストのアウトライン化

テキストをアウトライン化したい場合は、右クリックして[Convert to Outlines]を選択するか、メニューバーの[Layer]→[Convert to Outlines(option + command + O)]でアウトライン化できます。

Sketchのテキストアウトライン化

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね