ファン
検索
カテゴリーアーカイブ
プロフィール
kabeさんの画像
kabe
IT業界へ営業として入るや否や、数名いたデベロッパーが次々退職。 /クリエイトスキル0状態だったけど、自分でWeb制作もやらざるを得なくなる(!!なかなかないレア体験です、きっと)。フォトショとイラレの違い、JavaScriptとjavaの違いすらわかりませんでした。 /約3年が経過し、ようやくデベロッパーが入社したので、自分は退職。 /フリーランスのデベロッパーへ転向。 /美容・音楽大好き。癒しを求めて生きております。 よろしくおねがいします!
タグクラウド
記事ランキング

    広告

    posted by fanblog

    2016年10月31日

    簡単加工! Photoshopで半透明文字を作る方法

    どうも、kabeだmonoブログをご覧くださいましてありがとうございます。

    another.jpg


    シルバー(銀色)に加工する方法は こちら です。
    ゴールド(金色)文字加工は こちら

    いろんな半透明文字を作れるのですが、今回は、ベーシック(と勝手にkabeが感じてるだけ)なのを紹介しまっす。
    ※ワンクリックでできる方法もありますけれど、自分でできるようになると、どんな現場でも作れるので、いざって時に役に立つ、と思います。

    元画像から完成予定(3パターン)はこんな感じ。
    0.jpg

    では、とっとといきましょう。

    Photoshopで簡単半透明文字に加工!

    まず、Photoshopを立ち上げたら、適当なフォントで文字を書きます。
    1.jpg
    ※背景を赤色にしているのは、加工がわかりやすくするためなので、透明でも何でもOKす。

    そして、文字を複製します。
    2.jpg
    先に加工するのは、複製した方の文字です。
    複製した方の文字レイヤー(画像でいうとこのグレーになって選択されてるほう)をダブルクリックすると、レイヤースタイルを編集できる画面があらわれます。

    3.jpg
    「べベルとエンボス」を画像のように変更します。
    ▼構造
    ・スタイル=べベル(内側)
    ・テクニック=滑らかに
    ・深さ=38%
    ・方向=下へ
    ・サイズ=5px
    ・ソフト=4px

    ▼陰影
    ・角度=120度
    ・高度=40度
    ・光沢輪郭=次の画像をご参考になさってください。&アンチエイリアスにチェック入れる
    ・ハイライトのモード=スクリーン(右側の四角いところ、つまり、色=ffffff)
    ・不透明度=77%
    ・シャドウのモード=乗算(色=000000)


    ↓光沢輪郭は「プリセット」のとこを「カスタム」にして、手動にてこんな感じで。割と適当でいけます。お好みでやっちゃってくださいね。
    plus.jpg

    すすみまっせー。お次はシャドウ(内側)
    4.jpg
    ▼構造
    ・描画モード=オーバーレイ(色=ffffff)
    ・不透明度=100%
    ・角度=125度/包括光源を使用にチェックを入れる
    ・距離=5px
    ・チョーク=0%
    ・サイズ=45px

    ▼画質
    ・輪郭=Photoshopデフォルトの輪郭。プリセットで言うところの「線形」をチョイス/アンチエイリアスにチェックを入れる
    ・ノイズ=0%


    5.jpg
    ドロップシャドウも追加しまっせ。
    ▼構造
    ・描画モード=乗算(色=000000)
    ・不透明度=17%
    ・角度=125度/包括光源を使用にチェックを入れる
    ・距離=9px
    ・スプレッド=0%
    ・サイズ=17%

    ▼画質
    ・輪郭=デフォルトの輪郭(プリセットで言うところの「線形」)/アンチエイリアスにチェックを入れる
    ・ノイズ=0%

    ▼その他
    レイヤーがドロップシャドウをノックアウトにチェックを入れる


    半透明文字は完成っす。
    6.jpg
    あとは微調整。

    背景を入れる

    8.jpg
    こんな感じですが、フォントや背景、シャドウなんかを変更すると、ちょっとテイストが変わりますので、やってみましょう。

    半透明文字をさらに微調整

    適当に好みのフォントに変えたりしましょう。そしたら、
    11.jpg
    最初にコピーしておいた文字を選択し、ダブルクリックでレイヤースタイルを調整する画面を出します。

    10.jpg
    のっぺりしている気がするので、ドロップシャドウをつけて、ちょい立体感を出してみます。

    ▼構造
    ・描画モード=通常(色=000000)
    ・不透明度=50%
    ・角度=125度/包括光源を使用にチェックを入れる
    ・距離=5px
    ・スプレッド=5px
    ・サイズ=5px

    シャドウはもっとつけてもいいかもしれないですね。
    文字が透けていると、背景によっては見えにくいですので。

    こんなんになりました。
    another.jpg
    ※文字フォントも変えています。

    さらに、
    「背景レイヤーと文字レイヤーの間に、新規レイヤーを追加」

    「新規レイヤーを白(#ffffff)で塗りつぶす」

    「塗りつぶした新規レイヤーの不透明度を15%にする」


    すると、
    top.jpg
    このような感じに。さっきとどう違うんだよ、と思ってしまうほどのわずかな変化っすね。
    まあ、ちょっとの変化でも、実際にサイトなどに、はめ込んでみると違ってみえるものですよね。

    文字って大切です。フォントも大事ですが、加工も大事。
    バナーひとつでサイトの印章がガラリと変わったりしますもの。

    仕事でECサイトを作ったりもしていますが、こちら、気になってます。
    月額900円(税抜)〜でネットショップ開業がオールインワンになってます。
    「ロリポップ!レンタルサーバー」を提供しているGMOペパボ株式会社提供の【カラーミーショップ】では、自由に編集できるテンプレートでデザインは思いのまま。
    もちろんモバイルショップにも対応。さらにショップブログも付いてくる! 30日間の無料お試しあり!!!
    ショップ運営の初級者でも大丈夫なショッピングカートASPサービス
    オンラインストアの開設は、お試し無料の カラーミーショップ で!


    以上、Photoshopで半透明文字を簡単に作る方法でした!

    クリックしていただけるとうれしいです

    人気ブログランキングへ

    にほんブログ村 デザインブログ 女性デザイナーへ
    にほんブログ村
    posted by kabe at 10:00 | Comment(0) | TrackBack(0) | Photoshop
    この記事へのコメント
    コメントを書く

    お名前:

    メールアドレス:


    ホームページアドレス:

    コメント:

    ※ブログオーナーが承認したコメントのみ表示されます。

    この記事へのトラックバックURL
    https://fanblogs.jp/tb/5575285
    ※ブログオーナーが承認したトラックバックのみ表示されます。

    この記事へのトラックバック
    Build a Mobile Site
    スマートフォン版を閲覧 | PC版を閲覧
    Share by: