個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳04

Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳

海外のサイトで公開されているPhotoshopやIllustratorをはじめとした代表的なソフトを使ったチュートリアルを紹介する海外チュートリアルシリーズ第4回目です。
今回も、Photoshop初心者の方でも簡単に実践できるチュートリアルをご紹介します
毎度のことですが、自分の復習&スキルアップも兼ねています。
英語の翻訳間違いなどもあるかと思いますが、そのあたりは優しくご指摘いただければ幸いです。
第4回目は、Photoshopを使って背景に集中線を施し、テキストに氷のようなスタイルを加える方法です。

背景レイヤー

ファイルサイズは今回、800px×800pxにしました。
続いて、グラデーションツールを使って、背景レイヤーに着色します。
カラーの設定を以下のようにします。
描画色 #282c54
背景色 #0a0d2e
ツールパレットからグラデーションツールを選択、グラデーションの種類を円形グラデーションにして、背景レイヤーを選択。
中心から外に向けてグラデーションを作成します。
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳

集中線を作成する

続いて背景に、クールでレトロな集中線を入れるため、カスタムシェイプツールを選択し、そのなかから以下のシェイプ(ターゲット2)をクリック。
選択したシェイプでパレットの中心にくるように描きます。
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳

不透明度を変更する

レイヤーパレットの不透明度を30%にします。
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳

レイヤーを複製し、中心分を少し消す

現在のままだと中心の集中線が少しきつめなので、消しゴムツールを使って消していきます。
まず、カスタムシェイプのレイヤーを複製し、複製元は非表示にします。
複製したレイヤーを選択して、レイヤー>ラスタライズします。
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳

ツールパレットから消しゴムツールを選択して、ブラシのタイプはソフトブラシにして適度な大きさにします。
ブラシの大きさが決まったら、中心部分をほんの少しだけ消していきます。
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳

テキストを入力

テキストを入力します。
ここで使用しているフォントは Lithos Pro です。
iceeffect12

テキストにレイヤースタイルを加えます

テキストにレイヤースタイルを加えます。
ドロップシャドウデフォルト
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳
シャドウ内側
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳
光彩(内側)
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳
ベベルとエンボス
フォントサイズに応じて「深さ」「サイズ」「ソフト」などは、適宜変更します。
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳
グラデーションオーバーレイ
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳
#a0cbf9
#ffffff
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳
これで完成です。
Photoshopでテキストに氷のエフェクト、背景に集中線を入れる方法:海外チュートリアル翻訳

Photoshopをマスターするのに必須な書籍

Photoshopに慣れるのだったら、いきなりWEBで公開されているチュートリアルをガンガン実践していくだけでもいいのですが、やはり最初は全体を知る上でも、数冊の書籍を読んで練習なされることをおすすめします。
現段階で役立つPhotoshop本は次のような感じです。
また、こうした本を読んで実践してから、海外のチュートリアルを見ると、理解するスピードが格段に変わってきます。

Adobe Photoshop CS6 パーフェクトマスター


掲載されている例があまりよろしくないのですが、Photoshopの全体像を把握するには、やっぱりこれでしょう。
辞書的な意味合いで利用しています。

amazonの場合
Adobe Photoshop CS6 パーフェクトマスター―Adobe Photoshop CS6/Extended/CS5/CS4/CS3対応 Windows/Mac OS X対応

楽天ショップの場合
Adobe Photoshop CS6パーフェクトマスター

Photoshopデザインメソッド


個人的に井上本が好きなもので。
なぜ好きかというと、素材の作り方がとっても参考になるからです。
なかには、周りくどい作り方のものもありますが、そのへんは各自でアレンジしてつくるということで。

amazonの場合
Photoshopデザインメソッド

楽天ショップの場合
Photoshopデザインメソッド

Photoshopデザインラボ-プロに学ぶ、一生枯れない永久不滅テクニック-[改訂第二版]


つくってみたい! トライしてみたい!と思える例ばかり。
技術的なこともハイレベルで、とっても参考になります。

amazonの場合
Photoshopデザインラボ -プロに学ぶ、一生枯れない永久不滅テクニック-[改訂第二版]

楽天ショップの場合
Photoshopデザインラボ改訂第2版

Photoshop 10年使える逆引き手帖


基本的なテクニックを学ぶのに最適な一冊。
例もキレイで、好感が持てます。

amazonの場合
Photoshop 10年使える逆引き手帖 【CS4/CS3/CS2/CS/7.0対応】

楽天ショップの場合
Photoshop 10年使える逆引き手帖

神速Photoshop


ある程度、Photoshopに慣れてきたと思った頃に読むと、とっても役立ちます。
「こんなやり方があったの!」と思えるような出合いがたくさん待っていますよ。
姉妹本に「神速Photoshop [Webデザイン編]」もあります。

amazonの場合
神速Photoshop [グラフィックデザイン編]

楽天ショップの場合
神速Photoshop(グラフィックデザイン編)]

ここまでは「Plastic Jelly Styles」をもとに作成ました。

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 1

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

無料なのにハイクオリティなロゴ用テンプレートをダウンロードできるサイト8

ロゴはサイト制作に限らず、企業や個人活動を支えるもっとも重要な要素の1つです。 「顔」になるもので

記事を読む

無料で使えるPhotoshop用フリーの紙・ペーパーシームレスパータン素材

無料で使えるPhotoshop用フリーの紙・ペーパーシームレスパータン素材

Photoshop用パターンファイル(.pat)の使い方 こちらでご紹介しているファイルにはjpg

記事を読む

商用利用可!500種類以上もの人のピクトグラムが揃ったベクター素材「Human Pictos with 500」

ベクター素材を配布しているFreepikさんから、太っ腹なプレゼントが、noupeさんで公開されてい

記事を読む

無料のPhotoshop用ぼかし(ぼけ)ブラシ17セットで幻想的な雰囲気を

幻想的な雰囲気を出すにはぴったりのPhotoshop用ぼかし(ぼけ)ブラシが「19 Free Pho

記事を読む

Photoshopであらゆるものを計測できる無料スクリプト「Size Marks PS」

Photoshopであらゆるものを計測できる無料スクリプト「Size Marks PS」

Photoshopにオブジェクト間の距離を計測できるツールがあればなあと思っていたら、無料のスクリプ

記事を読む

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

背景画像をサッとつくれる便利ツール20選

背景画像をサッとつくれる便利ツールやサイトをご紹介します。 背景にちょっと手を加えるだけで、見た目

記事を読む

パッケージデザインvol.12 参考になる優れたパッケージ/プロダクトデザイン20をご紹介(金曜日企画)

デザイン性・アイディアに富んだパッケージ/プロダクトデザインvol.12

優れたパッケージデザイン・プロダクトデザインをご紹介している金曜日企画、第12回目です。 今回は和

記事を読む

嬉しすぎ!メトロポリタン美術館所蔵の作品約40万点の高画質画像が無料ダウンロードできるなんて!

嬉しすぎ!メトロポリタン美術館所蔵の作品約40万点の高画質画像が無料ダウンロードできるなんて!

ニューヨークにあるメトロポリタン美術館は、世界でも屈指の美術館です。 たしか「ギャラリーフェイク」

記事を読む

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプトをご紹介します。 Photos

記事を読む

パッケージデザインvol.5 参考になる優れたパッケージデザイン20をご紹介(金曜日企画)

デザイン性・アイディアに富んだパッケージ/プロダクトデザインvol.5

すぐれたパッケージデザインをご紹介している金曜日企画。 第5弾になりました。 商品よりも、デザイ

記事を読む