WEBデザイナー向け無料電子Book >受け取りはこちら

【無料】Canvaで文字にグラデーションをかける方法|初心者向け

【無料】Canvaで文字にグラデーションをかける方法|初心者向け

先日、

Canvaって、文字にグラデーションをかけてオシャレにすることはできるんでしょうか?ちなみに、無料版を使ってます。

という相談をいただきました。

グラデーションの加工は、それだけでグッとおしゃれに見えるので、文字デザインに取り入れたいという方も多いと思います!

先にこの質問への回答をみなさんにもお伝えすると、

かなまる

無料版では、作成できるグラデーションとできないグラデーションがあります。
たとえば、こんなグラデーションなら作れます!

この記事では、

  • 無料のCanvaで文字にグラデーションをつける方法
  • 有料版のCanva(Canva Pro)でできる文字グラデーション(上級者向け)

をご紹介します。

\ 14364人にセミナーをして分かった!/

目次

【無料】Canvaで文字をグラデーションにする方法

先にお伝えしておきますが、Canvaで作る文字グラデーションでは以下の文字はグラデーションにできません。

  • 日本語(漢字、ひらがな、カタカナすべて)
  • 好きなフォントでの英語や数字

元から用意されているアルファベットや数字の形でしかグラデーションはできないので、ご注意ください。

Canvaの無料プランでは、グラデーションが使える文字はかなり限られていますが、その分加工もすごく簡単です。

ここからは文字にグラデーションを入れる方法を画像付きで1ステップずつ解説していきますね。

STEP
ツールバー(左)で素材をクリックし、「アルファベット」で検索
数字を使いたい場合はここに「1」「5」などを入れてください。
STEP
「フレーム」の「すべて表示」をクリック
STEP
使いたいアルファベットを選び、キャンバスに並べる
ゴシック系、明朝系、おもしろ系?
複数のフォントで用意されています。

探すのが難しいときは、欲しいアルファベットを検索した「アルファベット」の後ろに「a」「y」のように入れると、見つかりますよ。

STEP
検索窓に「グラデーション」と入れ、写真の「すべて表示」をクリック
「グラフィック」ではなく「写真」を選んでください!
STEP
グラデーションに使いたい画像を一枚クリックする
STEP
画像を押しながら移動させ、文字の上に被せる

ゆっくり文字の上に被せると、グラデーション画像が文字のフレームにピッタリ入り、まるで文字をグラデーションにしたように見えます。

ゆっくりとフレームの上に被せるのがポイントです。

たったこれだけで、文字にグラデーションを入れ終わりました。

どうですか?元から作られているグラデーションをはめるだけなので、かなり簡単ですよね。

ちなみに、グラデーションとして表示させる場所(色)も微調整することもできます。

STEP
微調整したい文字をダブルクリックする
ダブルクリックすると、アルファベット(フレーム)の下に埋まっていた
グラデーションの画像が薄く表示されます。
STEP
グラデーション画像をクリックしたまま、表示させたい場所にゆっくりずらす
クリックしたまま動かすのがポイントですっ!

今回は、よりピンク色を強めにしたかったので左にずらしました。

ちなみに…

Canvaではグラデーション画像の多くが有料ですが、グラデーション画像にお金を払うのはイヤですよね…。

なので、グラデーションは自分で作っちゃうのがおすすめです!

こちらの記事で公開している通りに背景グラデーションを作成し、jpegまたはpngで保存。

その後Canvaにアップロードすると、好きな配色のグラデーション文字が作れますよ。

「自分で作るのはもっと面倒くさい」「おしゃれなグラデーションが良い」という方は、フリー素材サイトに頼っちゃいましょう!

グラデーション素材がダウンロードできるフリー素材サイトはたくさんありますが、個人的にはBEIZというサイトがおすすめです。種類も豊富でおしゃれなグラデーション素材が手に入ります!

BEIZのサイトはこちら

また、Canva内でグラデーション画像は有料が多いですが、それ以外の写真は無料でもたくさん使えます。

ただのグラデーションではなく、星空や海の写真をフレームに入れて使うのもおしゃれですよ。

グラデーションとは少し違うけど…
おしゃれでインパクトがありますよね。

【有料】Canvaで文字をグラデーションにする方法(上級者向け)

ここからは、最初にお伝えしたとおり上級者向けです。有料版のCanva Proを使っている方しかできないのでご注意ください。

…と、いっても操作がすごく難しいわけではなく、ただめんどくさいだけです。(笑)

ですが、完成すればおしゃれですし、慣れたら楽しく感じる作業なので、「好きな文字、フォントにグラデーションを使いたい」という方は一度試してみてくださいね。

STEP
テキストを選択し、右上の「エフェクト」をクリック
STEP
「中抜き」をクリックする
おしゃれ重視なら細め
作業のカンタンさ重視なら太め
がおすすめです。
STEP
文字の背景にグラデーションを入れる

詳しいやり方は、こちらの記事を参考にしてください

STEP
PNG形式で一度ダウンロードする
STEP
Canva内に先ほどダウンロードしたPNG画像をアップする
アップしたら、四隅を揃えてください。
STEP
左上の「画像を編集」をクリック
ここから、Canva Proでないとすすめられません。
STEP
「背景リムーバ」をクリック

3秒ほど待ちます…すると、

背景が真っ白になりました。

STEP
右側の「復元」をクリック
STEP
文字の内側を、絵の具で塗るように復元させていく
これがかなり骨の折れる作業です汗
STEP
左上の「完了」をクリックしたら、完成です。

「完了」を押し忘れ、最初からやり直したこともあります…。

忘れずに完了ボタンを押してくださいん!

最後のSTEP9が何より難関です。(塗り絵みたいなので、人によっては楽しいと感じると思いますが。笑)

私も今回、改めて自分でやってみて見つけたコツがいくつかあったので、みなさんにもシェアしますね。

文字グラデーション化のコツ

①STEP2で中抜きの太さはできるだけ太くしておく
不器用な方は特に、フチが太い方が失敗しにくいです。

②ズームはほぼマックス(500%)まで使う
とにかくズームした方が細かいところまで塗りやすいです。

編集画面の下の方に、ズームの調整バーがありますよ。


③塗りにくい四隅はスタンプのように置く
四隅がすごく塗りにくいのですが、最初にポンポンポン、とスタンプのように押しておくと塗りやすかったです。

④「削除」のブラシに期待しない
「削除」のブラシでは、中抜きの枠(黒い部分)まで消えてしまうのであまり使えません。はみ出た部分を消すのはかなり難しいので、最初からはみ出ないようにするのがおすすめです。

まとめ

今回は、Canvaで文字にグラデーションをつける方法を解説しました。

簡単におさらいしておきましょう。

  1. ツールバー(左)で素材をクリックし、「アルファベット」で検索
  2. 「フレーム」の「すべて表示」をクリック
  3. 使いたいアルファベットを選び、キャンバスに並べる
  4. 検索窓に「グラデーション」と入れ、写真の「すべて表示」をクリック
  5. グラデーションに使いたい画像を一枚クリックする
  6. 画像を押しながら移動させ、文字の上に被せる

Canvaの無料プランでは、元から用意されているアルファベットや数字のグラデーション化しかできません。

その分、作業はすごく簡単なのですが、好きなフォントや文字で、こだわってデザインを作りたいという方にとっては物足りないかもしれません。

そんな方は、記事の後半でご紹介した上級者向けのグラデーション加工をやってみてくださいね。

▼ ▼ 限定公開中 ▼ ▼

当メディアを運営している日本デザインスクールは、これまで14364人WEBデザイナーの仕事についてお伝えする無料セミナーを開催してきました。

その中で気づいたのが、WEBデザイナーへの誤解がある方が多いということ。中には一度勉強に失敗してからセミナーに来て「先に知りたかった」という方もいらっしゃいます。

そのような方が増えないために、特に多かった15の誤解を1つの資料にまとめました。勉強を始めてから後悔しないよう、ぜひ受け取ってください。

※非常に人気の資料であり、今後有料化する可能性もあるのでお早めに手に取ってくださいね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

質問や感想があればご記入ください

コメントする

目次