nozakichi.com Open in urlscan Pro
163.44.185.225  Public Scan

Form analysis
3 forms found in the DOM

POST https://nozakichi.com/wp-comments-post.php

<form action="https://nozakichi.com/wp-comments-post.php" method="post" id="commentform" class="comment-form">
  <p class="comment-notes"><span id="email-notes">メールアドレスが公開されることはありません。</span> <span class="required">*</span> が付いている欄は必須項目です</p>
  <p class="comment-form-comment"><label for="comment">コメント <span class="required">※</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p>
  <p class="comment-form-author"><label for="author">名前 <span class="required">※</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required"></p>
  <p class="comment-form-email"><label for="email">メール <span class="required">※</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required"></p>
  <p class="comment-form-url"><label for="url">サイト</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url"></p>
  <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。</label></p>
  <p><img src="https://nozakichi.com/wp-content/siteguard/1472728229.png" alt="CAPTCHA" data-src="https://nozakichi.com/wp-content/siteguard/1472728229.png" decoding="async" class=" lazyloaded"><noscript><img
        src="https://nozakichi.com/wp-content/siteguard/1472728229.png" alt="CAPTCHA" data-eio="l"></noscript></p>
  <p><label for="siteguard_captcha">上に表示された文字を入力してください。</label><br><input type="text" name="siteguard_captcha" id="siteguard_captcha" class="input" value="" size="10" aria-required="true"><input type="hidden" name="siteguard_captcha_prefix"
      id="siteguard_captcha_prefix" value="1472728229"></p>
  <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="コメントを送信"> <input type="hidden" name="comment_post_ID" value="1323" id="comment_post_ID"><input type="hidden" name="comment_parent" id="comment_parent"
      value="0"></p>
</form>

GET https://nozakichi.com/

<form class="search-box input-box" method="get" action="https://nozakichi.com/"><input type="text" placeholder="サイト内を検索" name="s" class="search-edit" aria-label="input" value=""><button type="submit" class="search-submit" aria-label="button"><span
      class="fa fa-search" aria-hidden="true"></span></button></form>

GET https://nozakichi.com/

<form class="search-box input-box" method="get" action="https://nozakichi.com/"><input type="text" placeholder="サイト内を検索" name="s" class="search-edit" aria-label="input" value=""><button type="submit" class="search-submit" aria-label="button"><span
      class="fa fa-search" aria-hidden="true"></span></button></form>

Text Content

 * TOP
 * About
 * Design
 * Contact


【ILLUSTRATOR】アーチ文字（カーブした文字）のつくり方

2022.08.032021.11.03
デザイン
TwitterFacebookはてブPocketLINEPinterest
スポンサーリンク

のざきち

こんにちは！のざきち（ @nozakichicken ）です。
イラレでいろんなものを作ってみる企画「Design tips」の第２弾です！

うさぎさん

チラシとかで、カーブした文字ってよく見るけどどうやってつくっているのか知りたい！

実はつくり方はとっても簡単！ということで、今回は「デザインのドリル」にもたびたび出てきたアーチ状の文字のつくり方（Illustrator版）を説明していきます。

▼ Photoshopでの作り方はこちらから

【Photoshop】アーチ文字（カーブした文字）のつくり方
タイトルなどでよく見かけるアーチ状の文字。Photoshopでの作り方を２パターン紹介していきます。
nozakichi.com
スポンサーリンク

目次
 1. エンペロープでつくる
    1. ① 文字ツールで文字を打つ
    2. ② 効果＞ワープ＞円弧
 2. パス上文字ツールでつくる
    1. ① 円を作る
    2. ② パス上文字ツールを選択
    3. ③ 円のパス上をクリックし文字を入力
 3. さいごに


エンペロープでつくる

のざきち

つくり方は２パターンあります。

まずは文字や図形を自由自在に曲げる方法のエンペロープからみていきましょ〜！


① 文字ツールで文字を打つ

文字ツールで適当に文字を書いていきます。


② 効果＞ワープ＞円弧

文字を選択した状態で効果＞ワープ＞円弧の効果を適用していきます。

カーブの%を動かしてみよう

「円弧」を選択したら「ワープオプション」が出てきますので、
カープの％の部分を動かしたり、数値を入力したりして好きな角度にしていきましょう。

カーブの％を「-」に設定すると、逆方向にカーブしていきます。

のざきち

「スタイル」の部分ではカーブのほかにいろいろなスタイルがありますので、ぜひいろいろ試してみてくださいね！




パス上文字ツールでつくる

もう一つのつくり方は、パスの上に文字を置く方法です。


① 円を作る

まずは楕円形ツールで適当な円を作ります。


② パス上文字ツールを選択

文字ツールを長押しして、「パス上文字ツール」を選択します。


③ 円のパス上をクリックし文字を入力

先ほど作成した円のパス上をクリックします。
（小さく「パス」と表示されていれば、クリックして文字を入力できます。）

すると下記のような文字が勝手に入力されます。

先ほど勝手に入力された文字は消して、
任意のフォントや大きさで文字を入れていきましょう。

位置を調節してみよう

文字の開始位置にある小さい□にカーソルを合わせると「|→」が出現してくるので、クリック＆ドラッグしていくと位置調整ができます。

文字を選択した状態で、再度「パス上文字ツール」のアイコンをダブルクリックすると「パス上文字オプション」が出てきます。パス状の位置なども調節することができます。


さいごに

「Design tips」の第２回目は、アーチ文字（カーブした文字）のつくり方をご紹介いたしました。

エンペロープつくる方法と、パス上文字ツールでつくる方法とでは、できることが若干違ってきます。つくりたいものに合わせていてどちらが適しているかぜひいろいろ試してみてくださいね。使う機会はかなり多いと思いますので、ぜひ覚えて応用していきましょう！

のざきち

最後までお読みいただきありがとうございました！次回もおたのしみに♪
今までのDesign tips系の記事は下記から見れますー！

Design tips
IllustratorやPhotoshopでいろんなものを作っていく企画です。基本的な操作方法を覚えていきましょう！
nozakichi.com
うさぎさん

Adobeソフトを安く買えちゃう方法は、以下の記事でご紹介中！ ▼

社会人もOK！Adobe CCを安く買う方法を比較してみた。
Adobe CCは買う時期は買い方によって、もっと安くなる場合があります。今回は、通常価格より安い値段でAdobe CCが買えちゃう方法を徹底比較してみました！
nozakichi.com
デザインIllustrator
Design tips
スポンサーリンク

シェアする
TwitterFacebookはてブPocketLINEPinterest
nozakichi.com
nozakichi.com


関連記事

デザイン


WEBデザインの勉強に役立つ記事まとめ【未経験からWEBデザイナーへ】

未経験からWebデザインを学び、Webデザイナーに転職するまで実践したことや勉強法などの記事をまとめてみました！記事迷子になったらこちらへどうぞ。
Photoshop


【PHOTOSHOP】不要なものを削除する3つの方法

Photoshopで写真に写り込んでしまった不要なものを綺麗に消せる基本的なテクニックを３つご紹介します。
スポンサーリンク



コメント

コメントを書き込む


コメントをどうぞ コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメント ※

名前 ※

メール ※

サイト

次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。



上に表示された文字を入力してください。




ホーム
デザイン
のざきち

2019年から本格的にWebデザイン勉強して、印刷業界からWeb業界へ転職しました。Webデザイナー・コーダー4年目のゆるりと気ままな、備忘録ブログです。

のざきちをフォローする




カテゴリー

 * デザイン35
   * Photoshop6
   * Illustrator9
   * おすすめツール＆サービス9
   * おすすめ本3
   * 勉強法8
 * 働き方13
   * ポートフォリオ1
   * 就職・転職6
   * 職業訓練校2
 * ブログ運営10
   * WordPress4
 * 暮らし方7
   * おすすめガジェット2
 * コラム3
 * お知らせ3


タグ

WEBデザイン Design tips 勉強法 独学 転職 収益化 参考サイト 買ってよかった レビュー ブログ開設 在宅勤務 PR まとめ記事 フォント
未経験 フリー素材 AdSense バナートレース DTPデザイン メディア掲載 デザインのドリル デザインのコツ iPad 配色 プラグイン Apple
Watch クラウドソーシング AdobeCC


人気記事

【Illustrator】アーチ文字（カーブした文字）のつくり方
2021.11.032022.08.03

すぐできる！バナートレース（模写）のやり方【未経験からWebデザイナーへの勉強法】
2021.02.232023.01.27
独学でOK！Illustratorのおすすめ勉強法【初心者向け３ステップ】
2021.03.092023.04.13
【Illustrator】かんたん！おしゃれなフレーム枠のつくり方
2022.01.062022.06.03
【Photoshop】足りない背景を簡単に伸ばす方法
2022.06.16


新着記事

お手軽！東京寿園のハイドロカルチャーの観葉植物を育ててみた。【レビュー記事】
2023.05.212023.05.23
【Photoshop】画像を文字の形で切り抜く方法
2023.05.12
新米Webデザイナー必見！デザイン力を上げるための勉強法まとめ。
2023.04.29
Webデザイン初心者こそクラウドソーシングでスキルアップ！
2023.04.13
20代女性のApple Watchの活用方法とおすすめバンド。
2023.03.242023.03.30


PR



スポンサーリンク

PAGE TOP


タグ

WEBデザイン13 Design tips13 勉強法8 独学7 転職6 収益化5 参考サイト5 買ってよかった5 レビュー5 ブログ開設3 在宅勤務3 PR3
まとめ記事2 フォント2 未経験2 フリー素材2 AdSense2 バナートレース2 DTPデザイン1 メディア掲載1 デザインのドリル1 デザインのコツ1
iPad1 配色1 プラグイン1 Apple Watch1 クラウドソーシング1 AdobeCC1




カテゴリー

 * デザイン35
   * Photoshop6
   * Illustrator9
   * おすすめツール＆サービス9
   * おすすめ本3
   * 勉強法8
 * 働き方13
   * ポートフォリオ1
   * 就職・転職6
   * 職業訓練校2
 * ブログ運営10
   * WordPress4
 * 暮らし方7
   * おすすめガジェット2
 * コラム3
 * お知らせ3


はじめてならこれを読んでみて

半年で未経験からWebデザイナーになるまでにやったこと。
Webデザイン勉強中にやっておいてよかったこと、やらなくて後悔したこと。
未経験でWebデザイナーになるためのポートフォリオのつくり方
すぐできる！バナートレース（模写）のやり方【未経験からWebデザイナーへの勉強法】
駆け出しWebデザイナーこそ、WordPressでブログを始めるべき理由とは？





プライバシーポリシー｜お問い合わせ

Copyright © 2020 Nozakichi.com All Rights Reserved.

 * メニュー
    * TOP
    * About
    * Design
    * Contact

 * ホーム
 * 検索
   
 * トップ
 * サイドバー