コメントこんにちは、koheiです。今回は、「文字の加工」についてです。実際に様々な文字の加工を行い、イラレ操作を覚えてきましょう。2018年8月12日動画解説を追加しました。袋文字の作り方を説明します。袋文字は、以下のような文字に枠をつける表現方法のことです。テキストボックスを選択し、アートボード上に好きな文字を書きましょう。例では、「イラストレーター」と書きました。文字を選択した状態で、アピアランスパネルを開きます。パネルの左下に「新規線を追加」というボタンがあるので、クリックします。すると、以下のようにパネル上に線が追加されます。次に、追加された線を下へドラッグし、文字の下へ移動させます。文字の下に線を移動させる理由もし、文字の上に線がある場合、線を太くしていくと、文字が潰れてしまいます。(以下)なので、かならず、文字の下に線を配置しましょう。あとは、自分の好みで、線の太さを変えたり、色を変えたりしてアレンジしましょう。これで、袋文字の完成です。次に以下のような手書きで落書きしたような文字を作ってみましょう。テキストボックスを選択し、アートボード上に好きな文字を書きましょう。文字を選択した状態で、アピアランスパネルを開きます。パネルの下に「新規効果を追加」というボタンがあるので、クリックします。効果のメニューから「スタイライズ」→「落書き」を選択します。落書きオプション画面が開きますので、スタイルを「極細」に設定し、OKを押します。※プレビューにチェックをすると、効果を確認しながら、値の調整ができます。手書き風文字の完成です。次に以下のような丸みを帯びた文字を作ってみましょう。テキストボックスを選択し、アートボード上に好きな文字を書きましょう。文字を選択した状態で、アピアランスパネルを開きます。パネルの下に「新規効果を追加」というボタンがあるので、クリックします。効果のメニューから「スタイライズ」→「角を丸くする」を選択します。自分のデザインしたい文字になるように、半径の値を調整し、OKを押します。※プレビューにチェックをすると、効果を確認しながら、値の調整ができます。丸みを帯びた文字の完成です。次に以下のようなラフな文字を作ってみましょう。テキストボックスを選択し、アートボード上に好きな文字を書きましょう。文字を選択した状態で、アピアランスパネルを開きます。パネルの下に「新規効果を追加」というボタンがあるので、クリックします。効果のメニューから「パスの変形」→「ラフ」を選択します。ラフの調整画面が開きますので、サイズを調整し、OKをクリックします。※プレビューにチェックをすると、効果を確認しながら、値の調整ができます。ラフな文字の完成です。ドロップシャドウ続いて、文字にドロップシャドウ(影)を付けてみましょう。テキストボックスを選択し、アートボード上に好きな文字を書きましょう。文字を選択した状態で、アピアランスパネルを開きます。パネルの下に「新規効果を追加」というボタンがあるので、クリックします。効果のメニューから「スタイライズ」→「ドロップシャドウ」を選択します。ドロップシャドウの調整画面が開きますので、影のぼかしサイズや不透明度などを設定し、OKをクリックします。※プレビューにチェックをすると、効果を確認しながら、値の調整ができます。これで、文字にドロップシャドウ(影)を付けることができました。次に、以下のような円弧を描いたような文字の作り方を説明します。テキストボックスを選択し、アートボード上に好きな文字を書きましょう。文字を選択した状態で、メニューの「オブジェクト」→「エンベロープ」→「ワープで作成」をクリックします。ワープオプション画面が開きますので、スタイルを「円弧」、カーブを調整し、OKをクリックします。※プレビューにチェックをすると、効果を確認しながら、値の調整ができます。これで、円弧のような形の文字が完成です。文字の中を画像にする次に、以下のように文字の中を画像にする方法を説明します。テキストボックスを選択し、アートボード上に好きな文字を書きましょう。設定したい画像を配置します。メニューの「ファイル」→「配置」で画像を選択しましょう。配置した画像を文字の背面にします。メニューの「オブジェクト」→「重ね順」→「最背面へ」をクリックします。選択ツールで、文字と配置した画像を選択します。(shiftキーを押しながらクリックするか、選択ツールで全体を囲むようにして選択します)メニューの「オブジェクト」→「クリッピングマスク」→「作成」をクリックします。これで、写真が文字の形でマスクされます。文字にグラデーションをつける次に、以下のように文字にグラデーションを付ける方法を説明します。テキストボックスを選択し、アートボード上に好きな文字を書きましょう。文字を選択した状態で、メニューの「書式」→「アウトラインを作成」をクリックし、文字を画像化します。文字の画像が選択された状態で、メニューの「オブジェクト」→「複合パス」→「作成」をクリックします。複合パスに設定しない場合、1文字毎にグラデーションがかかります。意図的にこのようなデザインにする場合はよいですが、今回は文字全体にグラデーションを設定したいので、複合パスを設定しています。グラデーションツールを選択し、グラデーションパネルの種類を「線形」、色を好きな色に設定します。後は、グラデーションの向きなども設定しましょう。これで、文字全体にグラデーションを設定することができました。自分で自由に変形する次に、文字を自分で自由に変形する方法を説明します。テキストボックスを選択し、アートボード上に好きな文字を書きましょう。文字を選択した状態で、メニューの「書式」→「アウトラインを作成」をクリックし、文字を画像化します。ダイレクト選択ツールを選択します。ダイレクト選択ツールを使って、パスをドラッグして移動させ、自分の好きな形にアレンジしていきます。ダイレクト選択ツールでパスを自由に動かせば、以下のように文字を変形させることができます。文字に切り込みを入れる最後に以下のように文字に切り込みを入れる方法を説明します。テキストボックスを選択し、アートボード上に好きな文字を書きましょう。文字を選択した状態で、メニューの「書式」→「アウトラインを作成」をクリックし、文字を画像化します。次に長方形ツールで、細長い長方形を書きます。option(alt)キーを押しながら、長方形を下へコピーします。あとは、command(ctrl)+Dでコピーを繰り返して、文字の前面に長方形を配置します。長方形だけを選択ツールで選択し、command(ctrl)+Gでグループ化します。グループ化した長方形を文字の背面へ移動させます。メニューの「オブジェクト」→「重ね順」→「最背面へ」をクリックします。選択ツールで、長方形、文字を全て選択します。パスファインダーパネルの形状モード「中マド」をクリックします。すべてのオブジェクトが選択された状態で、command(ctrl)+shift+Gを押して、グループ化を解除します。選択ツールで、不要な線を選択し、削除していきます。これで、文字に切り込みを入れることができました。最後に以上、色々な文字の加工方法を説明しました。今回紹介した方法を組み合わせれば、もっと複雑なデザインも可能です。最新記事をお届けします。飲食店用の無料WordPressテーマを作成しました。店のコンセプト、メニュー、アクセスなど飲食店に必要な最低限の機能を搭載しました。これから飲食店のホームページを開設したい方、この無料テーマを是非活用してみてください。詳しくはこちらへブログ用WordPress無料テーマ「chameleon(カメレオン)」WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。士業用の無料WordPressテーマを作成しました。一般的なビジネスサイトに活用できます。自分でWordPressテーマを作ってみたい方、この無料テーマを是非活用してみてください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。Inomata)こんにちは、サイト運営者のkoheiです。現在エンジニアとして働きながら、当サイトの運営をやっています。このブログでは、「自分で作る」をテーマに、ホームページやデザイン制作、Webマーケティングなど色んなノウハウを公開しています。「自分で何でも作るのが大好き」な人です。InomaCreateプライバシーポリシ。