デザインをもっと楽しく!WEBデザイナーの皆様にとって役に立つ情報をお届けいたします! おしゃれなボタンの作り方やテクスチャの使い方、制作関連のおすすめサイトなどの情報が満載! | フォトショッパーフォトショッパー

写真の上で透明に浮かび上がる『透け感』が涼しげな吹き出しの作り方


透け感のあるシェイプ

こんにちは!おぎしおです(^・^)
「写真や背景の上にべた塗りのシェイプを乗せた時、なんだかもっさりした印象になるなぁ」って時、ありませんか?
特に夏のデザインを作っていくとき「涼しげなデザインにしたいのに、べた塗りシェイプが暑苦しい!」ということが多いような気がします。

そんなとき私は、今から紹介する『透け感のあるシェイプ』を使って、デザインに清涼感を出しています。
今回は写真の上に吹き出しを作ることを想定して、吹き出し型の『透け感のあるシェイプ』を作っていこうと思います。ではさっそく参りましょう!

さっそく『透け感』のある吹き出し型シェイプをつくってみよう!

デザインを作っていきましょう!

1,吹き出し型のシェイプを作成する

まずは楕円形ツールと多角形ツールを使って吹き出しのデザインを作っていきましょう!今回はフリーフォトの写真素材 足成さんより、夏っぽい写真をお借りしレクチャ―していきます。お好みの写真を使って試してみてください!

円を描いていきます

まずは楕円形ツールを使って、円を描いていきます。シェイプの大きさはお好みでOKです。shiftを押しながら円を描くと、正円になります!

三角形の部分を作っていきます

次に吹き出しの三角形の部分を作っていきます。多角形ツールを選択します。上部コントロールパネルの「歯車」アイコンをクリックします。「コーナーを滑らかに・星形」などにチェックがついていないことを確認したら、画数を「3」に設定します

三角形を描いていきます

多角形ツールの設定が完了したら、実際に三角形を描いていきます。shiftを押しながらくと角度が固定されますので、下向きの三角形を作ることができます!

形を整えます

今のままだと〇と▽がばらばらになっているので、形を整えます。「楕円形」「多角形」レイヤーを選択したら、上部コントロールパネルの「平行中央揃え」をポチっとします。
〇と▽が中央揃えになりました!▽は少し上にずらして、吹き出しの形を決めていきます。

シェイプを結合します

最後にシェイプを結合します。二つのバラバラのシェイプを、一つのシェイプにします。「楕円形」「多角形」レイヤーを選択したら、右クリック→シェイプを結合を押します。これで吹き出し部分の完成です。吹き出しはお好みで角度を変えたりしてみてください。

2,吹き出しシェイプのレイヤースタイルを変更する

シェイプのレイヤースタイルを設定していきます

次に、シェイプのレイヤースタイルを設定していきます。先ほど結合したシェイプの名前を「吹き出し」と命名します。「吹き出し」レイヤーの塗りを0%にします。シェイプが見えなくなりました!

「吹き出し」にレイヤー効果を付けていきましょう

では早速「吹き出し」にレイヤー効果を付けていきましょう。「吹き出し」を右クリック→「レイヤー効果」から境界線を選択します。
サイズ:1px、位置:内側、カラー:#ffffff、で設定します。

光彩(内側)を選択します

光彩(内側)を選択します。
不透明度:75%、カラー:#ffffff、サイズ:20px、で設定します。
シェイプがぼんやり白く光るような感じになります。

グラデーションオーバーレイを選択します

グラデーションオーバーレイを選択します。
描画モード:通常、角度:-90度
透明度の設定:位置0%/不透明度80% 、位置50%/不透明度40% 、位置100%/不透明度80%
カラーの設定:位置0%/カラー#ffffff 、位置100%/カラー#ffffff
透明のグラデーションをかけることで、ふわっと透明に浮かび上がるような感じになります。

光彩(外側)を選択します

光彩(外側)を選択します。
不透明度:25%、カラー:#ffffff、サイズ:30px、で設定します。

ドロップシャドウを選択します

最後にドロップシャドウを選択します。
描画モード:乗算、不透明度:60%、カラー:#000000、サイズ:20px、で設定します。
シェイプが少し際立つように、おまじないをしました。

3,『透け感』のある吹き出しが出来上がりました!

吹き出しが出来上がりました

写真の上に、ぼんやり浮かび上がる吹き出しが出来上がりました!
写真のデザインによってボケ足や透明度を調整すると、よりなじみのよいデザインになりますので、ぜひ試してみてください!

まとめ

いかがでしたでしょうか?今回の『透け感のあるシェイプ』はべた塗りや透明レイヤーとは違った雰囲気が出ていると思います。
今回は吹きだしで試してみましたが、ボタンにしてもよし、テキストエフェクトとして使うもよし。いろいろな使い方ができると思います。
ぜひいろいろなシェイプに適用して、試してみてください!


Comment

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

新着