【STUDIO】ノーコードツールSTUDIOでテキストグラーデションを表現する方法
Index
はじめに
ノーコードツールSTUDIOでどうしても文字にテキストグラデーションを使いたいデザインがあり、調べたらボックスとテキストボックスのブレンドモード使って表現することが出来たので、その方法を解説。背景色が白と黒の場合でやり方が異なるのでそれぞれ説明していきます。
ノーコードツールSTUDIOとは？
STUDIOとは、日本発のコーディングをせずにサイト構築ができるツールで、プログラミングの知識を持たない人でも簡単にWebサイトやモバイルアプリを作ることができます。
またクラウドベースなので、どこからでもアクセスし作業を行うことができ、慣れてくとFigmaなどのツールでわざわざデザインを作らずに直接デザインを作る感覚でSTUDIOでサイト構築ができるので時間短縮できる点でも今注目度が上がっています。
STUDIOに特化した専門の制作会社も増えているようです。
テキストグラーデションの作り方
それでは早速作っていきます。
背景が白地の場合のテキストグラデーション
1.テキストを収める用のボックスの配置
2.テキストにかけたいグラデーションを配置したボックスの「塗り」に設定
3.グラデーションを設定したボックスの中にテキストを配置
配置したテキストの色を黒(#000000)を指定します。
4.テキストのボックスに「塗り」設定
今度は配置したテキスト自体のボックスの「塗り」に白(#FFFFFF)を指定します。
※注意 : テキストを囲っているボックスの塗りではなくテキストボックスエリアに塗りを設定します。
5.テキストにブレンドモードを設定
テキストボックスを選択したまま、画面左上の小さい右矢印をクリックすると「ブレンドモード」「フィルター」「背景フィルター」が出現するのでブレンドモードにカーソルをあわせます。
ブレンドモードから「覆い焼き」または「比較(明)」を選択すると、テキストの黒く塗りつぶされた部分が背景のグラデーションに変わります。
6.テキストを囲んでいるボックスのサイズ変更
ここまで来るとほぼ完成です。今度はテキストを囲んでいるボックスを選択し、画面中央上部のボックスのpx指定された「横幅」と「縦幅」をそれぞれautoに変更します。
ボックスサイズをautoに変更することで、中のテキストボックスのサイズに自動でフィットして、余計なグラデーション部分がなくなりました。
完成！
初心者必見！STUDIOの無料登録からサイト作成＆公開までをワンストップ☝️
背景が黒字の場合のテキストグラデーション
今度は背景が黒地の場合のグラデーションの方法を説明します。「3.グラデーションを設定したボックスの中にテキストを配置」までは背景色が白地の時とまったく同じなので、読んだ人は飛ばしてください。
1.テキストを収める用のボックスの配置
2.テキストにかけたいグラデーションを先程配置したボックスの「塗り」に設定
3.グラデーションを設定したボックスの中にテキストを配置
配置したテキストの色を黒(#000000)を指定します。
4.テキストのボックスに「塗り」設定
今度は配置したテキスト自体のボックスの「塗り」に(2)で指定したグラデーションと同じグラデーションを指定します。指定すると最初の大きなボックスのグラデーションとテキストボックスに指定したグラデーションが重なっている状態です。
※注意 : テキストを囲っているボックスの塗りではなくテキストボックスエリアに塗りを設定します。
5.テキストにブレンドモードを設定
ここも白地バージョンと同様に、テキストボックスを選択したまま、画面左上の小さい右矢印をクリック→「ブレンドモード」にカーソルを選択。
ここでブレンドモードの「差の絶対値」を選択します。
すると、テキストの黒く塗りつぶされた部分が背景のグラデーションに変わり、テキストボックスのグラデーション部分だったエリアが黒く色が反転します。
6.テキストを囲んでいるボックスのサイズ変更
ここも白地バージョンと同様です。テキストを囲んでいるボックスを選択し、画面中央上部のボックスのpx指定された「横幅」と「縦幅」をそれぞれautoに変更します。
完成！
さらにSTUDIOの機能が気になる人はこちら☝️
まとめ
どうでしたか？テキストボックスと同じサイズのボックスを重ねてブレンドさせることでテキストグラデーションが表現出来ました。
ちなみに背景が白でもなく黒でもないカラーの場合の方法だけ見つけられませんでした。まぁ、注目のツールなのでその内テキストグラデーションの機能も実装されるでしょう。
それまでは裏技的な感じで良ければ試してみてください。では！
STUDIOを最短距離で学ぶのにオススメな学習教材
