Quantcast
Channel: チュートリアル – PhotoshopVIP
Viewing all 160 articles
Browse latest View live

Photoshopがすごい!参考にしたい最新チュートリアル、作り方43個まとめ

$
0
0

A-Gate-of-New-Hope-Tutorial-scaled

 

この記事では、2021年に入って公開された最新Photoshopチュートリアル、作り方をまとめてご紹介します。

 

およそ3ヶ月ぶりとなる今回は、フォトショップのパワーを実感できるスゴ技合成テクニックから、普段から使える実用的なものまで、デザインの幅が広がるセレクションとなっています。

 

順番を追ってチュートリアルを進めていくことで、実践的なフォトショップの使い方を覚えることができますよ。

 

https://photoshopvip.net/126600

https://photoshopvip.net/126666

 

 

作業の時短にデザイン素材集を活用してみよう

 

デザインは作成したいけど、ゼロから作る時間はない。」そんなときは、高品質なデザイン素材集を活用してみましょう。

 

世界のトップデザイナーが作成した、1,000種類を超えるデザインが揃った素材集で、通常15万円相当のデザイン素材が2週間の期間限定、3,200円で販売中です。

 

Grid-JP-Creators-Retro-Design

 

フォントからイラスト、テクスチャ、ブラシ、Photoshopレイヤースタイルなど幅広いデザイン素材が揃い、本格的なヴィンテージデザインを手軽にたのしむことができます。

 

販売は3月16日、月曜日までの期間限定となっています。このお得な機会、お早めにどうぞ。

 

購入ページへ進む

 

 

 

Photoshopがすごい!参考にしたい最新チュートリアル、作り方まとめ

 

大自然に生きるオウムをデザインする方法

飼育されているオウムを切り抜き、まるでジャングルから抜け出したようなダイナミックさを表現する写真合成の本格的チュートリアル。

Beautiful-Parrots-Photoshop-Tutorial-1-scaled

 

 

 

激しく降る雨をリアルに再現する方法

フィルタ機能を使って雨粒を再現するだけでなく、道路やマンホールなどが濡れて反射した様子をリアルに表現する、一歩進んだ新テクニックを動画で紹介。

rain-effect-660

 

 

 

2色の光をつかったライティングエフェクト

調整レイヤーの使い方がミソとなる写真レタッチテクニックで、本当に光があたっているようなリアルさが特長。

dual-lighting-photoshop-effect

 

 

 

びりびりと破れた紙をつかったコラージュのつくり方

破った紙や写真の下にもう一枚の写真を重ねた、ユニークでお手軽なテクニックを短い動画で紹介しています。

 

 

 

写真を手描きスケッチ風に加工する方法

「スケッチ」フィルタを元に、写真の一部のみが手書きとなるダイナミックなエフェクトを完成させます。

sketch-effect-action-in-adobe-photoshop

 

 

 

淡いパステルカラーのグラデーションをデザインする方法

PhotoshopとIllustrator、両方のアプリをつかったつくり方を一緒に紹介してくれています。グラデーションの基本ルールも知っておくと便利ですよ。

PastelGradient0B

 

https://photoshopvip.net/127675

https://photoshopvip.net/127746

 

 

リアルに反射するメタリックなテキストエフェクト

周りの様子がうっすら映った、光沢感たっぷりな文字テキスト用エフェクトに仕上げます。レイヤースタイルのみで完成なのもお手軽。

chrome-reflect-text-effect

 

 

 

本物そっくりのネオンライト風テキストエフェクトのつくり方

光沢感たっぷりで怪しく輝くネオンライトを、レイヤースタイルのみで作成できる簡単テクニック。レイヤースタイルを保存しておけば、くりっくひとつで文字テキストに適用できます。

neon_text_final_result1

 

 

 

スクリーン画面が乱れたグリッチ・テキストエフェクトのつくり方

レイヤースタイルやフィルタといったフォトショップの基本機能を学びながら、手軽にデジタルグリッチを作成します。

Glitch-Text-Effect-QT---850

 

 

 

素敵なグリッチエフェクトのつくり方

つくり方を一度覚えてしまえば、イラストや写真、文字テキストなどあらゆる素材に適用できる自由度の高いテクニックで、グラフィック・デザインのトレンドにも。

GlitchEffect_final

 

 

 

80年代風のレトロ・フューチャーなグラフィックを作成する方法

デザイン素材を利用することで、手軽に80年代風スタイルを表現できる動画チュートリアル。

 

https://photoshopvip.net/127715

 

 

マトリックス風エフェクトを実現する方法

あの有名映画に登場する、数字や記号などがランダムに流れるエフェクトを再現します。モデル全体に緑っぽい光が反射しているのもポイント。

matrix-Recovered-SMALL

 

 

 

リアルな光が差し込む様子をデザインする方法

デザインオブジェクトに向かって真っ直ぐに光のラインが伸びる、控えめながらダイナミックな見た目を実現できるチュートリアル。

light-landscape-photoshop01

 

 

 

継ぎ目のないランダムな草パターンをデザインする方法

塗りつぶし機能を活用したユニークなテクニックで、ひとつの草をモチーフに立体感のあるパターンをものの5分で作成できます。

random-pattern-fill-in-photoshop

 

 

 

PhotoshopとIllustratorからEPSファイルをエクスポートする方法

さまざまなツールで開くことができるベクターベースの画像、EPSファイル。ここではEPSファイルの保存方法をさくっとおさらい。

export-import-eps-from-photoshop-and-illustrator

 

 

 

どんな複雑な境界線も切り抜く方法

アルファチャネルを活用し、背景との見分けのつきにくい複雑な切り抜きを手軽に 行います。たくさんある切り抜きテクニックのひとつとして覚えておきたいところ。

channel-based-masking-in-Photoshop

 

https://photoshopvip.net/10-cropping-tips-in-photoshop

 

 

フォトショップで特定の色のみを変更する方法

「色相・彩度」調整レイヤーを活用することで、ほんの数クリックで適用できるお手軽テクニック。

Trick-To-Change-Specific-Colors-in-Photoshop-790x413

 

https://photoshopvip.net/change-color

https://photoshopvip.net/104764

 

 

Photoshopでグラスモーフィズム・スタイルを作成する方法

すりガラス越しに覗いたような半透明のガラスエフェクトは、要注目のグラフィックスタイル。フォトショップでのつくり方も確認しておきましょう。

glassmorphism-effect-in-photoshop

 

https://photoshopvip.net/126760

 

 

複数の写真を違和感なく合成する方法

写真合成の基本となる、調整レイヤーとレイヤーマスクを用いた実用的な合成テクニックを学びます。

match-color-photoshop11

 

 

 

空から落ちてきた三日月をデザインする方法

複数の写真を違和感なく合成するライティングテクニックを学ぶデザインチュートリアル。

moon-final-1

 

 

 

中に浮かぶ島をデザインする方法

某大人気映画にでてきたファンタジーで壮大な世界観を見事に表現するプロ級のデザインチュートリアル。影やハイライトの入れ方、異なる写真の色味を統一する方法など目からウロコなテクニックばかり。

FloatingIslandsSmall

 

 

 

謎の惑星に向かう宇宙船をデザインする方法

まるで映画のワンシーンのような宇宙をテーマにした写真合成チュートリアル。コントラストや配色の調整や、ライティングエフェクトを学びたいひとにオススメ。

sci-fi-outer-space-scene

 

 

 

リアルな雷を表現するPhotoshopブラシを作成する方法

雷を撮影したフリーストック写真を利用することで、リアルな仕上がりを手軽に実現できます。写真のレタッチや加工がすきなひとは、デザインツールに加えたいところ。

How-to-Create-a-Lightning-Brush-in-Photoshop-THREE

 

 

 

フォトショップで輝くキラキラブラシを作成する方法

フォトショップのフィルタ機能を組み合わせて、キラキラ感満点の独自カスタムブラシを作成します。

sparkle-brush-photoshop-final

 

 

 

cloud-brush-photoshop-final

 

 

 

how-to-create-bubble-brush-in-photoshop

 

 

 

窓ガラスについた雨粒を描くPhotoshopブラシのつくり方

実際にガラスに霧吹きをつかって水滴を付け、撮影した写真を元に、独自のカスタムブラシを作成します。

DropExample2_850

 

 

 

写真をポラロイド風に加工する方法

画像をポラロイド写真のように魅せる簡単なテンプレートを作成します。一度作ってしまえば何度でも再利用でき、画像を変更するだけで完成です。

Final-Result

 

 

 

さまざまな形の吹き出しをデザインする方法

漫画コミック、イラストスタイルの吹き出しデザインを作成する簡単チュートリアル。

SpeechBubbles0B

 

 

 

ステンドグラス・ウィンドウ風エフェクトを作成する方法

Illustratorのシェイプツールをつかってイラストを描く方法にはじまり、ステンドグラスのザラザラとした質感を見事に表現するチュートリアル。

stained-glass-rose-660

 

 

 

エンドレス・サマー風ポスターをデザインする方法

最高の波を求めて南半球を旅をしながらサーフィンで夏を追いかけ続ける、1964年に制作されたドキュメンタリー映画のポスターを、完全リバイバルしたデザインを作成します。

the-endless-summer

 

 

 

レトロな3Dテキストエフェクトのつくり方

ショートカットキーを押すたびに、再変形できるコマンドはさまざまな用途がありますが、立体的な文字テキストを表現するのにもぴったりなテクニック。

3d-text-effect-in-photoshop

 

 

 

あとから文字を変更することも可能な、ヴィンテージスタイルのテキストエフェクト。

vintage-text-effect

 

 

 

レイヤースタイルのみで完成のテキストエフェクト10選

レイヤースタイルを順番に設定していくだけで完成する、お手軽なテキストエフェクト10種類をまとめて紹介。フォトショップがはじめてのひとにもオススメです。

10-Layer-Style-Text-Effects-_-850

 

 

 

継ぎ目のない背景をデザインする方法

撮影した写真の一部を活用し、まるでスタジオで撮影したようなポートフォリオに加工するテクニック。

how-to-create-seamless-backdrops-with-photoshop-feature-image

 

 

 

雲の上に浮かぶ灯台をデザインする方法

雲の上にリアルに浮かぶ灯台を写真合成で実現する、あっと驚くデザインチュートリアル。

light-house-on-cloud-daydream

 

 

 

気球で空を飛ぶ二匹の子猫をデザインする方法

とにかく子猫たちがかわいい写真合成チュートリアルで、背景もゼロから手作りする実践テクニック満載。

fantasy-fly-photo-manipulation-with-photoshop

 

 

 

SF映画風の壮大なシーンをデザインする方法

Star-Wars-Tutorial

 

 

 

海面下の巨大くじらをデザインする方法

穏やかな海の上とは半たんに、サメやクジラなどの巨大生物が回遊する様子をリアルに描きます。

Whale-Photoshop-Tutorial-2-scaled

 

 

 

ファンタジー感抜群、リアルな人魚をデザインする方法

肌に魚のウロコ部分を合成することで、見事な人魚に仕上げるデザインチュートリアル。

Sea-Woman

 

 

 

荒野にそびえる神殿をデザインする方法

異なる写真から切り抜かれた、異なる風景画を違和感なく合成する、これぞPhotoshopなテクニックを学びます。

ruined-landscape-at-dark

 

 

 

家のついた傘をもった巨大魚の写真合成チュートリアル

タイトルがわかりにくいですが、そういうことです。複数の写真を違和感なく合成する本格的なテクニックが詰め込まれています。

umbrella-final

 

 

新しくなったPhotoshopを試してみよう。

photoshop-cc-2021-1

 

新しくアップデートされたPhotoshopは、Creative Cloudアプリよりダウンロードできます。また、はじめてのひとも7日間の無料体験が用意されているので、まずはPhotoshopを体験してみましょう。無料体験終了後は、個人の場合はフォトプラン 980円〜/月(税別)、Photoshop単体 2480円/月(税別)、コンプリートプラン 5680円/月(税別)などでそれぞれ利用可能となっています。

 

photoshop-ipad-subscribe

 

サムネイル@ : A Gate of New Hope Photoshop Tutorial – Photoshop Tutorials

Photoshopがすごい!参考にしたい最新チュートリアル、作り方43個まとめPhotoshopVIPで公開された投稿です。


しっかりマスター!美しいグラデーション作成徹底ガイド【Illustrator実践デザイン編】

$
0
0

 

この記事では、Illustratorで美しいグラデーション作成する基本ガイドとして、数回のシリーズに分けて具体的なデザイン方法や便利なテクニックを紹介しています。

 

これまでのシリーズはこちらよりどうぞ。

 

https://photoshopvip.net/127675

https://photoshopvip.net/127919

 

今回は、グラデーションの具体的な作成テクニックをそれぞれ試していきます。

 

Illustratorでグラデーションを作成するさざまな方法を学ぶことで、用途に応じツールや機能をうまく使い分けることができるようになります。

 

 

グラデーションパネルを使ってみよう

 

Illustratorには、グラデーションを作成するためのさまざまツールが用意されており、それらを利用することでシンプルなものから複雑なスタイルまで自由に作成できます。

 

 

  • グラデーションパネル – 塗りつぶし&線グラデーション
  • グラデーションツール – 塗りつぶしグラデーション
  • グラデーションメッシュツール – カスタムの不規則なグラデーション
  • ブレンドツール – 実験的なグラデーションやオブジェクト

 

それぞれのツールは異なるスタイルのデザインやアートワークの作成に使用できます。これらのツールの機能やメリット、制限される点などを理解し、作業に応じて適切なツールを利用することが重要となります。

 

まずは基本となる、オブジェクトにグラデーションを適用してみましょう。

 

オブジェクトにグラデーションを適用してみよう

 

まずツールパネルより長方形ツールを選択したら、正方形を描きます。選択ツール(V)に切り替え、線の色を「なし」にし、塗りをグラデーションに設定しましょう。

 

 

グラデーションの配色は、最後に使用または選択したものとなり、デフォルト設定は白黒グラデーション。今回は、作成したカラーグループを利用してグラデーションを作成しています。

 

Illustratorのグラデーションには、基本的に線形(英: Linear)と円形(英: Circle)の2種類がありますが、より複雑なフリーグラデーションがIllustrator CC 2019より導入されました。

 

 

フリーグラデーションに関しては、使い方はまったく異なるツールとなるため、後ほど別途ご紹介します。まずは、基本となる2つのグラデーションを詳しく見ていきましょう。

 

線形と円形グラデーションについて

線形グラデーションでは、角度の調整はパネル内で行うことができます。

 

 

円形グラデーションでは、サークル円の「縦横比」も一緒に調整できます。縦横比を調整してから角度を調整すると良いでしょう。

 

 

グラデーションパネル内のグラデーションスライダーをダブルクリックすると、保存したカラースウォッチが一覧で表示されるので、むらさき色と黄色の補色コンビネーションを選択します。

 

中間となるミッドポイントの色がくすんでいるのがわかるでしょう。

 

 

新しくカラーストップを追加し、カラーホイールの並び順に色を設定しましょう。ミッドポイントやカラーストップの配置を微調整すれば、鮮やかなグラデーションの完成です。

 

 

 

グラデーションパネル内の「カラーピッカー」機能を活用すれば、画像から色を抽出してグラデーションを作成することも可能です。

 

 

 

グラデーションツールを使ってみよう

 

適用するグラデーションをより細かく調整したいときは、グラデーションツールを利用してみましょう。

 

オブジェクトを指定し、グラデーションツールを選択すると、以下のようにグラデーションガイドが自動的に表示されます。(表示されていないときは「表示」>「グラデーションガイドを表示」にチェックを入れる) 使い方は、グラデーションスライダーとほぼ同じで、カラーストップの追加やミッドポイントの調整などを行うことができます。

 

線形と円形グラデーションの設定方法について

さらにグラデーションツールは、他のツールと異なり、オブジェクト内でグラデーションの移動や回転、サイズ変更できる点もポイントです。

 

 

円形グラデーションでは、縦横比を調整することもできたり、グラデーションの中心を移動させたりと、自由に変更を行うことができます。

 

 

カラーストップの不透明度を調整してみよう

カラーストップの不透明度を「0%」に変更することで、徐々に消えていくフェードアウト系のグラデーションに仕上げることができます。

 

グラデーションはオブジェクト内のみに適用されているのにも注目です。

 

 

 

フリーグラデーションを使ってみよう

 

フリーグラデーションは、Illustrator CC 2019で導入された比較的新しい機能で、使い方さえ覚えてしまえば、思い描いたグラデーションを自由に描くことができます。

 

通常のオブジェクトには適用できますが、線や編集可能な文字テキスト、複数のオブジェクトをまとめたグループには適用できないので注意しましょう。

 

 

フリーグラデーションの描画モード「ポイント」について

 

お好みの場所をクリックしカラーポイントを追加したら、ダブルクリックで色を変更できます。または、カラーポイントを選択してカラースウォッチをクリックすれば、色の変更をより直感的に行うことができます。

 

カラーポイントを1つクリックして、新しいポイントを追加すれば前の色を継承できます。あとからカラースポットを自由に移動させたり、グラデーションの広がり具合を表す「スプレッド」の調整もポイント上で行うことができ便利。

 

 

 

フリーグラデーションの描画モード「ライン」について

カラーストップをつなげたり、グラデーションラインを作成したいときは「ライン」モードを選択しましょう。

 

カラーストップを追加すると、その間にカーブ曲線が自動的に作成されます。曲線の途中にカラーストップを追加することもでき、カラースウォッチを使えば色の変更もワンクリックです。

 

 

新しい線を描くときは、escキーを押すことで、線のつながりを解除できます。また、Option/Altキーを押しながらカラーストップを追加することで、直線的な線のつながりを作成できます。

 

 

フリーグラデーションの利点は、メッシュツールを使わずに複数の色をつかった、美しい色の変化を手軽にデザインできるところです。

 

カラーストップの位置を少しずつ離すことで、よりスムーズな色の変化を表現でき、各カラーストップの不透明度もそれぞれ調整できるので、フリーグラデーションを使ったデザインをいろいろ試してみると良いでしょう。

 

 

鮮やかなグラデーションが作成できるようになった一方、カラーストップの描画モードを変更できないなど、一部の制限が残っています。

 

よりユニークで柔軟性のあるグラデーションの作成には、複数のグラデーションを活用するのが欠かせません。

 

 

ひとつのオブジェクトに複数のグラデーションを適用しよう

 

複数のグラデーションをひとつのオブジェクトに適用することで、グラデーションのレイヤー上の重なりを表現したり、描画モードや不透明度の調整、文字テキストやグループ化されたオブジェクトにもグラデーションを反映させることができます。

 

また、使い回しに便利なグラフィックスタイルの作成、保存ができる点もポイントです。

 

 

 

アピアランスパネルを使ってみよう

複数のグラデーションを扱うには、アピアランスパネルが必須となります。表示されていないときは、「ウィンドウ」>「アピアランス」でパネルを表示しておきましょう。

 

ここでは、「楕円形ツール」で円を描き、お好みの色で塗りつぶしたら、アピアランスパネルより「新規塗りを追加」アイコンをクリックし、「塗り」をグラデーションに変更します。

 

アピアランスパネルでは、オブジェクトに適用されている塗りや線、エフェクト、不透明度、描画モードを個別に調整することができることを覚えておきましょう。

 

 

 

複数のグラデーションを作成するときは、両方のカラーストップを同じ色にし、片方の「不透明度」を「0%」とすることで、なめらかな色の変化を表現できます。色を決めたら、サイズや場所を変更します。

 

 

 

もうひとつグラデーションを追加してみましょう。アピアランスパネル上でグラデーションを複製したら、別の色やサイズに変更、移動させてみます。

 

 

 

作成したグラデーションを編集したいときは、アピアランスパネルで目的のグラデーションが選択されているか確認してみましょう。レイヤーの重ね順や不透明度、描画モードなども試すことで、よりユニークなグラデーションを作成できますよ。

 

 

 

 

編集可能な文字テキストにグラデーションを適用してみよう

 

編集可能な文字テキストにグラデーションを適用するのは、有効なテクニックのひとつです。

 

 

しかし、文字テキストの「塗り」を「グラデーション」に設定するだけでは適用できず、あるコツが必要でした。

 

まずはツールバーより「文字ツール」を選択し、お好みの文字を入力しましょう。ここで最大のポイント。テキストレイヤーの「塗り」を「なし」とし、アピアランスパネルより「新しい塗りを追加」します。

 

さいごに追加した「塗り」をグラデーションに変更したら完成です。これで編集可能な文字テキストに、グラデーションを適用することができました。

 

 

 

前ステップで学んだ、複数のグラデーションを適用することで、よりクリエイティブな色合いを表現できます。もちろん書体を変更しても、グラデーションは適用されたままな点にも注目です。

 

 

 

アルファベット文字別にグラデーションを適用させるのには、まず文字レイヤーをアウトラインに変換(Shift+Command+O)し、グループを解除(Shift+Command+G)。さいごに「塗り」を「グラデーション」に変換したら完成です。

 

ただし、一度アウトライン化してしまうと文字の編集もできなくなってしまう制限が。

 

そんなときは、複数のオブジェクトにまとめてグラデーションを適用させるテクニックを活用しましょう。

 

 

 

複数のオブジェクトにまとめてグラデーションを適用してみよう

 

複数のオブジェクトにグラデーションを適用するのは、簡単そうに見えますが、Illustratorにはいくつかの方法があり、それぞれの方法が異なるエフェクトを演出できます。

 

ここでは、さきほどアウトライン化した文字テキストを参考に詳しく見ていきましょう。

 

グループ化された複数のオブジェクトへのグラデーション適用方法

アルファベット別にアウトラインに変換されたグループレイヤーの「塗り」を「なし」に設定し、アピアランスパネルより「新しい塗を追加」。「塗り」を「グラデーション」に変換すれば完成です。

 

 

 

各アルファベットをダブルクリックすることで、グループ内のオブジェクト配置を自由に変更できます。

 

アルファベットを移動するのに合わせて、グラデーションカラーが自動的に変化しているのに注目してみましょう。

 

 

 

グループ化されていない複数のオブジェクトへのグラデーション適用方法

ランダムに並んだ円形レイヤー全体に、ひとつのグラデーションを適用してみましょう。

 

「選択ツール」ですべてのオブジェクトを選択したら、「塗り」を「グラデーション」に変更します。こうすることで、個別にグラデーションが適用されます。

 

このテクニックを有効ですが、ここでは「グラデーションツール」に切り替え、グラデーションの始点から終点までをドラッグで決めましょう。うまくグラデーションを適用できました。

 

 

 

全体にグラデーションを適用してしまえば、レイヤー別に独自のグラデーションが自動で設定されるため、レイアーを移動、アレンジすることも可能ですよ。

 

 

 

複数のオブジェクトと編集可能な文字テキストにまとめてグラデーションを適用する方法

複数のオブジェクトと一緒に、編集可能な文字テキストにもグラデーションを適用したいときに便利なテクニック。

 

まずは、複数のオブジェクトと文字テキストに同じグラデーションカラーが適用されていることを確認し、「選択ツール」ですべてのレイヤーをまとめて選択します。

 

ツールバーより「グラデーションツール」に切り替え、先ほど同様にグラデーションの始点から終点までをドラッグで決めれば完成です。

 

 

これであらゆる種類のグラデーションをIllustratorでデザインできるようになりました。

 

次回は、ストローク線へのグラデーションの適用方法など、より実用的なテクニックをご紹介します。

 

https://photoshopvip.net/127675

https://photoshopvip.net/127919

 

しっかりマスター!美しいグラデーション作成徹底ガイド【Illustrator実践デザイン編】PhotoshopVIPで公開された投稿です。

フォトショップで写真を漫画イラスト風に加工する方法

$
0
0

 

この記事では、フォトショップをつかって漫画のようなイラストエフェクトを作成する方法をご紹介します。

 

画像のアウトラインや色のベタ塗り、シェーディングといった、漫画特有の効果を手軽に演出できるテクニックとなります。

 

スマートオブジェクト機能を活用することで、画像を差し替えるだけで即座にエフェクトを適用することも可能です。

 

 

フォトショップで写真を漫画イラスト風にする方法

 

まずは今回作成していくデザインがこちら。手順通りにフォトショップの設定を進めるだけで、漫画のような手描きイラスト感を表現できます。

 

フィルタやエフェクトといった、フォトショップの基本ツールの実践的な使い方を知ることができるチュートリアルとなっています。

 

 

 

このチュートリアルでは、Adobe Stockよりこちらの写真をサンプルとして利用しましたが、どんな写真にも対応できるエフェクトとなります。

 

 

画像解像度は幅2,000pxで設定しています。これより小さいサイズでは、エフェクトの設定値をすこし低くする必要があります。

 

 

 

まずは、レイヤーパネル上で画像レイヤーを右クリック>「スマートオブジェクトに変換」をクリック。これで、元のオリヂナル画像に手を加えることなく、編集を行うことができます。

 

 

 

メインメニューより「イメージ」>「色調補正」>「シャドウ・ハイライト」を選択したら、「シャドウ 35%」で適用します。こうすることで、被写体のエッジを後ほど利用するフィルタ機能で強調できます。

 

 

 

続けてメインメニューより「フィルタ」>「表現方法」>「油彩」を選択したら、ブラシの「形態 2.0」、「クリーン度 5.0」、「拡大・縮小」と「密度の詳細」はともに「0」で適用します。

 

油彩フィルタは、写真の細かいディテールをオイルペイントのような手書き感に変換できる最適なフィルタのひとつ。

 

 

 

再度「フィルタ」>「フィルタギャラリー」を選択し、表示されたパネルのエフェクト一覧から「エッジのポスタリゼーション」をクリック。「エッジの太さ 0」、「エッジの強さ 1」、「ポスタリゼーション 6」で適用しましょう。

 

これで、手描きスケッチしたようなアウトラインの輪郭をくっきりと追加できます。

 

 

 

しかし、この「エッジのポスタリゼーション」フィルタを利用すると、写真の細かい部分にザラザラとした質感になっているのが分かります。ここからは、いくつかのフィルタをつかって、このザラザラ感を改善していきましょう。

 

 

 

まずは「フィルタ」>「ノイズ」>「ノイズを軽減」を選択し、「強さ 9~10」としたら、他はすべて「0」に。

 

 

 

「フィルタ」>「シャープ」>「アンシャープマスク」を選択し、「量 70%」、「平均 3.0px」、「しきい値 0」で適用。これで少しぼけてしまった画像全体を、くっきりとさせることができました。

 

 

 

「フィルタ」>「 ぼかし」>「ぼかし(詳細)」を選択し、「半径 4.0」、「しきい値 25.0」とし、「画質 低」とすることでエフェクトをより実感できる場合も。

 

 

 

再度「フィルタ」より「フィルタギャラリー」を開いたら、「カットアウト」フィルタをクリックし、「レベル値 2~4」、「エッジの単純さ 2」、「エッジの正確さ 2」で適用。コミック・マンガのような色の陰影、シェーディングを再現できます。

 

 

 

レイヤーパネル上で、前ステップで作成した「カットアウト」スマートフィルタのアイコンをダブルクリック。パネルが表示されるので、描画モードを「ソフトライト」に変更し、「不透明度 70%」にしたら完成です。

 

 

 

完成したエフェクトがこちら。人物ポートレイト写真をまるでコミック漫画のようなイラスト風に仕上げることができました。

 

 

 

加工前と加工後の比較がこちら。

 

 

 

スマートオブジェクト機能を利用するもうひとつの利点は、写真を差し替えるだけでエフェクトを瞬時に適用できます

 

レイヤーパネル上でスマートオブジェクトに変換した画像レイヤーをダブルクリックすると、新しく独立したドュメントが自動的に開くので、お好みの画像を追加し、span+Sで上書き保存します。

 

再度開いていたドキュメントを確認すると、エフェクトが適用されているのを確認することができます。

 

 

 

加工した画像ファイルサイズが小さいときは、エッジが潰れたような仕上がりになることがあります。そんなときは、適用した「エッジのポスタリゼーション」フィルタの「エッジの強さ」を「0」にすると、よりスムーズな質感に改善できますよ。

 

 

参照元リンク : The “Cartoon Filter” in Photoshop! – PiXimperfect – YouTube

参照元リンク : How To Create an Illustrated Cartoon Effect from a Photo in Adobe Photoshop – Blog Spoon Graphics

フォトショップで写真を漫画イラスト風に加工する方法PhotoshopVIPで公開された投稿です。

【フォトショップ】超リアルな黄金文字テキストエフェクトのつくり方

$
0
0

 

この記事では、フォトショップをつかった超リアルな黄金文字テキストエフェクトのつくり方をご紹介します。

 

特にむずかしいこともなく、手順通りに進めていくことで、圧倒的な光沢感とリアル感を演出できる黄金文字テキストのお手軽チュートリアルです。

 

黄金エフェクトを適用したままフォントの変更も可能な点もポイントで、手軽に編集を行うことができます。

 

 

 

文字テキストだけでなく、あらゆるものを黄金に変換したいときは、こちらも参考にしてみると良いでしょう。

https://photoshopvip.net/125661

 

 

黄金文字テキストのつくり方

 

まずはフォトショップを開き、新しいドキュメントを作成しましょう。カラーモードは「RGBカラー 16bit」とすることで、よりなめらかなグラデーションを表現できます。今回は、3840x2160pxの4Kサイズで作成していきます。

 

 

 

メインメニューより「文字ツールT」を選択し、まずは文字色を50%グレーに変更しましょう。お好みのフォントを使って文字を入力します。

 

 

 

文字に立体感をつけるために、レイヤースタイル「ベベルとエンボス」を適用します。ダイアログパネルの下にある「初期設定に戻す」ボタンをクリックしたら、「深さ 700%」、「サイズ 11px」に設定しましょう。

 

 

 

文字の縁エッジになめらかな立体感が作成されているのが分かります。

 

 

 

作成したベベルとエンボスエフェクトを後述のエフェクトと分離しておくために、レイヤーパネル上で文字レイヤーをフォルダアイコンまでドラッグし、グループ化しておきましょう。このチュートリアルの注目ポイントその1です。

 

 

 

新しいレイヤーをすべてのレイヤーの上に作成し、ツールバーより「グラデーションツールG」を選択。Dでカラーパレットを初期化し、Xで描画色と背景色を反転。カンバス上をドラッグし、すこしだけ角度をつけてグラデーションを適用しましょう。

 

レイヤーの描画モードを「オーバーレイ」とし、不透明度を「60%」に変更したら、option/altを押しながら、レイヤーの間をクリックし、クリッピングマスクを作成します。これで、文字テキストにのみグラデーションが適用された状態となりました。

 

 

 

レイヤーパネルの右下より新規調整レイヤー「グラデーションマップ」を選択し、こちらもoption/alt+レイヤークリックでクリッピングマスクに変換。

 

あらかじめ参考サイトより黄金テキスト用グラデーションプリセット Ultimate Gold(GRDファイル)をダウンロード、インストールしておきましょう。

 

あとは、Ultimate Goldプリセットを適用するだけで、黄金文字テキストの基本ベースの完成です。

 

 

 

シンプルな黄金テキストの場合はこれでも良いかもしれませんが、今回は本物そっくりなリアル感を表現するために、テクスチャの質感を追加していきます。

 

 

 

新しいレイヤーを一番上に作成し、メインメニューより「フィルタ」>「描画」>「雲模様1」を選択します。再度「フィルタ」より「ぼかし」>「ぼかし(ガウス)」を選択し、「半径 40px」で適用します。

 

 

 

続けて、作成したレイヤーをグラデーションレイヤーの下に移動させ、レイヤーの不透明度を「20%」としましょう。これで、よりリアルな反射を表現できました。

 

 

 

さらに質感をアップするために、参考サイトよりダウンロードしたテクスチャ Metal 232をドラッグ&ドロップで、グラデーションレイヤーの下に追加しましょう。レイヤーパネル上のレイヤー間でoption/alt+クリックし、クリッピングマスクを適用。これで、文字テキスト部分にのみテクスチャが反映されます。最後に不透明度を「3%」とします。

 

 

 

もう一枚のテクスチャ Grunge 122 をレイヤーの一番上に配置し、こちらもクリッピングマスクを適用。レイヤーの描画モードを「比較(明)」とし、「不透明度 50%」とします。

 

 

 

最後に文字テキストの光沢感をワンランクアップさせる小技。文字レイヤーをグループ化したフォルダを選択し、レイヤーパネルの下部分より「レイヤースタイル 光彩(外側)」をクリック。

 

「描画モード スクリーン」、「不透明度 20%」、「描画色 黄色(#ffd300)」、「サイズ 70px」で適用したら完成です。

 

 

 

完成

 

できあがりがこちら。質感たっぷりな黄金テキストエフェクトの完成です。

 

 

 

テクスチャの位置を移動させ、質感を変化させることもできます。4Kサイズで見事なリアル感を演出できました。

 

 

 

このテキストエフェクト最大のポイントが、黄金エフェクトを適用したままフォントを変更できる点です。絵文字フォントにもエフェクトを適用することができます。

 

 

 

もちろん日本語での文字テキスト入力にも対応していますよ。日本語フォントはAdobe Fontsよりインストール。

 

 

 

より手軽に黄金エフェクトを適用したいひとは、クリックひとつで文字テキストからロゴなどの図形シェイプに黄金スタイルを適用できる素材集を活用してみてはいかがでしょう。

 

100種類を超える黄金レイヤースタイルの他に、黄金テクスチャや水彩ブラシ、すぐに使えるPSDテンプレートなど、黄金デザインに必要な素材がひとまとめに。さらに複数アイテム購入で、最大50%オフのチャンスです。

 

Gold Paint Styles, Effects, Brushes & More!

 

 

参照元リンク : Ultimate Gold Text Effect | Photoshop Tutorial – Texturelabs.org

【フォトショップ】超リアルな黄金文字テキストエフェクトのつくり方PhotoshopVIPで公開された投稿です。

【フォトショップ】ワンランク上のネオンサインエフェクトのつくり方

$
0
0

 

この記事では、フォトショップを使った超リアルなネオンサインエフェクトのつくり方をご紹介します。

 

レイヤースタイルで表現できるお手軽なエフェクトで、ワンスパイス加えることで、本物そっくりなリアル感とライティングエフェクトを演出できるチュートリアルとなっています。

 

 

 

 

ネオンサインエフェクトの下地づくり

 

まずはフォトショップを開き、新しいドキュメントを作成しましょう。カラーモードは「RGBカラー 16bit」とすることで、よりなめらかなグラデーションを表現できます。今回は、3840x2160pxの4Kサイズで作成していきます。

 

 

 

ツールボックスより「文字ツールT」を選択し、お好みのフォントで文字を入力します。今回は、Miniollaというフリーフォントを利用し、描画色「白(#ffffff)」の文字サイズ「600px」で入力しています。

 

ネオンライトを光らせるスペースを考えて、太字の書体がネオンサインにはオススメです。

 

 

 

新しいレイヤーを作成(Shift+Command/Ctrl+N)し、長方形選択ツールMで細長いライン線を描きましょう。描画色「白(#ffffff)」で塗りつぶしましょう。Option/Alt+Deleteがショートカット。

 

レイヤーパネル上で作成した2つのレイヤーを選択したら、右クリックで「スマートオブジェクトに変換」を適用しておきましょう。作成したスマートオブジェクトレイヤー名を「サイン」に変更しておきます。

 

 

 

あらかじめダウンロードしておいたテクスチャ Metal148をドラッグし、カンバス上に追加します。文字サイズに合わせて画像サイズを変更したら、レイヤーパネル上で2つのレイヤーの間をOption/Altを押しながらクリック。これでクリッピングマスクが適用され、文字部分にのみテクスチャが反映されます。

 

 

 

レイヤーパネル下により新規調整レイヤー「レベル補正」を作成したら、同様にクリッピングマスクを適用します。プロパティパネルより出力レベル「0 60」に変更しましょう。

 

 

 

サインレイヤーを選択したら、ダブルクリックでレイヤースタイルパネルを表示し、「境界線」をクリック。

 

サイズ「1px」、位置「内側」、不透明度「70%」とし、塗りつぶしタイプ「パターン」でメタリックパターンを選択。スケール「1000%」としたらOK。

 

 

 

レイヤースタイルを適用した状態がこちら。文字テキストのエッジに立体感とメタリックな質感がわずかですが追加されました。これでネオンサインの下地の準備ができました。

 

 

 

ネオンライトエフェクトのつくり方

 

ここからは、実際にネオンチューブを作成してきます。新しいレイヤーを一番上に作成し、選択した状態でレイヤーパネル上でCommand/Ctrlを押しながら、サインレイヤーのサムネイルをクリック。これで選択範囲を指定することができます。

 

続けてメインメニューより「選択範囲」>「選択範囲を変更」>「縮小..」を選択し、縮小量「12px」とします。ふたたび「選択範囲」>「選択範囲を変更」としたら、「滑らかに..」を選択したら半径「8px」でOK。

 

 

 

メインメニューより「編集」>「境界線を描く」を選択し、幅「2px」のカラー「白(#ffffff)」、位置「中央」としたらOK。これでネオンチューブの完成です。

 

 

 

境界線を描いたレイヤーをダブルクリックでレイヤースタイルパネルを開いたら、順番にスタイルを適用していきましょう。

 

まずは「境界線」から。サイズ「5px」、位置「外側」、塗りつぶしタイプ「カラー」を薄い青色(#bcd2ff)とします。

 

 

 

次は光彩(外側)。描画モード「覆い焼き(リニア) – 加算」とし、明るい青色(#006cff)とし、スプレッド「20%」、サイズ「30px」に。

 

 

よりリアルなネオンの輝きを表現するために、「ドロップシャドウ」を選択。こちらも描画モード「覆い焼き(リニア) – 加算」としたらさらに明るい青色(#0024ff)でスプレッド「20%」、サイズ「30px」で適用しましょう。

 

フォトショップの一部レイヤースタイルは複数回適用できますが、光彩(外側)はできません。しかし、ドロップシャドウを利用して光彩(外側)エフェクトを再現できます。

 

 

 

テキストエフェクトはこれで完成ですが、よりリアル感を演出するためのボーナス小技。

 

ネオンエフェクトを適用したレイヤーを選択し、レイヤーパネル下より「レイヤーマスク」を追加します。ツールボックスより「ブラシツールB」を選択したら、カンバス上で右クリック。ブラシパネルが表示されるので、半径「30px」、流量「100%」のベタ塗りブラシを選択し、ネオンライトの一部をマスクしていきましょう。

 

レイヤーマスクを適用すると同時に、ネオンエフェクトのエッジが丸くなっているのが分かるかと思います。これはレイヤースタイル「境界線」を適用したおかげです。

 

 

 

すべての文字テキストにも適用した状態がこちら。

 

 

 

option/Altを押しながら作成したレイヤーマスクをクリック。Command/Ctrl+Aですべてを選択したら、Command/Ctrl+Cでコピー。

 

一番上に新しいレイヤーを作成したら、Command/Ctrl+Vでペーストしましょう。レイヤーをネオンサインエフェクトの下に移動させ、クリッピングマスクを適用します。

 

 

 

若干くっきりしすぎているので、メインメニューより「フィルタ」>「ぼかし」>「ぼかし(ガウス)」を選択し、半径「3px」で適用します。これで留め具部分は完成です。

 

 

 

ネオンサインに立体感を演出するために、少しだけ自由変形で横にずらしましょう。このときにOption/Altを押しながらドラッグすると、両サイドを同時に変更できるので便利ですよ。

 

 

 

ネオンサインの完成です。続けて、ネオンの色も変更してみます。

 

 

 

ネオンサインレイヤーを複製(Command/Ctrl+J)し、オリジナルレイヤーは非表示に。複製したレイヤーをダブルクリックし、レイヤースタイルを変更していきます。

 

数値などの設定は変えずに、色のみを変更していきます。まずは「境界線」では、カラー「薄ピンク色(#ffbcf5)」とします。

 

 

 

次に「光彩(外側)」。カラーは「明るいピンク色(#ff00a2)」。

 

 

最後に「ドロップシャドウ」、カラーは「鮮やかなピンク色(#ff00b4)」。

 

 

 

レイヤーマスクを適用したら、「長方形選択ツールM」で文字部分を覆うように選択し、背景色「黒色(#000000)」で塗りつぶしCommand/Ctrl+Deleteましょう。これでレイヤーマスクの完成です。

 

 

 

レイヤーを非表示にし、オリジナルレイヤーを再度表示します。レイヤーマスクを選択したら、今度は反対にバー部分のみを覆うように塗りつぶします。これで、2色のネオンカラーサインを同時に表示できるようになりました。

 

 

 

よりダイナミックな仕上がりにするために、ダウンロードしておいたテクスチャ Atmosphere 141をドラッグ&ドロップで、レイヤーの一番上に配置します。ネオンサインに合わせてサイズを合わせたら、描画モード「覆い焼き(リニア) – 加算」とします。

 

 

 

レイヤーパネルより新規調整レイヤー「色相・彩度」を選択したら、プロパティパネル上で「色彩の統一」にチェックを入れ、色相「250」、彩度「+50」、明度「-70」とし、最後にOption/Altを押しながらレイヤー間をクリックで、クリッピングマスクを適用します。

 

 

 

最後の仕上げとして、一番上に新規調整レイヤー「レベル補正」を選択したら、スライダーを左右に少しずつ移動させ、コントラストをくっきりとさせたら完成です。

 

 

 

完成

 

できあがりがこちら。リアル感にこだわったネオンサインエフェクトの完成です。

 

 

 

近くで見るとネオンライトの輝きも本格的。このネオンサインエフェクトは、この他にも日本語やロゴなどにも応用できます

 

 

 

より手軽にネオンサインエフェクトを適用したいひとは、クリックひとつで文字テキストからロゴなどの図形シェイプにネオンエフェクトを追加できる素材集 The Neon Toolbox も活用してみましょう。

 

最大6000x4000pxの高画質に加え、ワンクリックで適用できるネオン用レイヤースタイル95種類が揃っているので、どんなネオンカラーも自由自在です。

 

 

 

さらにネオンライトの仕上がりをよりリアルにする背景テクスチャや留め具やチューブなど各種パーツ100種類ちかくもセットになった、全ファイルサイズ1GB超えのコンプリートパック。

 

$14(およそ1,500円)とお求めやすくなっており、複数まとめ買いでさらに最大50%オフとお得です。

 

 

 

参照元リンク : Neon Sign Text Effect | Photoshop Tutorial – Texturelabs.org

【フォトショップ】ワンランク上のネオンサインエフェクトのつくり方PhotoshopVIPで公開された投稿です。

【フォトショップ】輝きが違う!ライティング・グローエフェクトのつくり方

$
0
0

 

この記事では、フォトショップをつかった超リアルなライティング、グローエフェクトのつくり方をご紹介します。

 

お好みで文字やネオンカラーの変更が可能な点もポイントで、手軽に編集を行うことができます。

 

 

 

ネオンサインエフェクトと組み合わせて利用すると、よりダイナミックな仕上がりを演出できます。

https://photoshopvip.net/128401

 

 

リアルなライティング・グローエフェクトのつくり方

 

まずはフォトショップを開き、新しいドキュメントを作成しましょう。カラーモードは「RGBカラー 16bit」とすることで、よりなめらかなグラデーションを表現できます。今回は、3840x2160pxの4Kサイズで作成していきます。

 

 

 

ツールボックスより「文字ツールT」を選択したら、お好みのフォントをつかって描画色「白(#ffffff)」で文字テキストを入力しましょう。

 

今回利用したフォントは Moisterですが、どんな文字やロゴなどでも特に問題有りません。ただし、あまり太いシェイプや書体はぼやけた仕上がりになるため微調整が必要となります。

 

 

 

入力した文字レイヤーを新しいグループフォルダに入れたら、レイヤーを右クリック>「スマートオブジェクトに変換」。レイヤーの描画モードを「スクリーン」とします。

 

 

 

メインメニューより「フィルタ」>「ぼかし」>「ぼかし(ガウス)」を選択したら、半径「0.5px」のわずかなぼかしを適用します。

 

 

 

今回のテクニックのポイントがここ。スマートオブジェクトレイヤーを選択したら、Command/Ctrl+J連続6回押しで、レイヤー6つを複製コピーしましょう。

 

 

 

レイヤーパネルにて下から順番にぼかし(ガウス)エフェクトの値を変更していきます。1つ目が「3px」、次に「10px」、つづけて「25px」、「75px」、「250px」、「500px」と値を徐々に大きく。

 

 

 

レイヤーパネル下より新規調整レイヤー「塗りつぶし」を作成し、「黒(#000000)」で塗りつぶしましょう。そのままグループフォルダの一番下まで移動させます。

 

 

 

続けてレイヤーパネル右下のプラスボタンをクリックし、新しいレイヤーを作成(Shift+Command/Ctrl+N)したら、Dで描画色と背景色をデフォルトに戻します。

 

メインメニューより「フィルタ」>「描画」>「雲模様1..」を適用したら、3つ上のレイヤーまで移動させましょう。レイヤーの描画モードを「乗算」とし、不透明度「50%」に変更したらライティングエフェクトの準備は完了です。

 

 

 

グループフォルダのドロップダウンを閉じたら、レイヤーパネルしたより新規調整レイヤー「グラデーションマップ」を追加します。

 

Option/Altを押しながら2つのレイヤー間をクリックし、クリッピングマスクを作成しましょう。これで、文字テキストにのみグラデーションが適用されるようになりました。

 

 

 

プロパティパネル上でグラデーションをクリックしたら、以下のように設定しましょう。

 

左から「黒(#000000) 位置0%」、「青(#0038c7) 位置33%」、「水色(#37e5ff) 78%」、「白(#ffffff) 位置100%」。

 

 

 

フォントやシェイプの太さに応じてグラデーションを調整することで、よりリアルなライティング効果を表現できます。

 

 

 

あらかじめ各色グラデーションを作成、保存しておけばクリックひとつでカラーリングを変更でき便利ですよ。

 

 

 

テキストエフェクトの完成です。このままでも良いのですが、より自然な仕上がりを目指してワンスパイス加えてみます。

 

 

 

参照元リンクよりあらかじめダウンロードしておいたテクスチャ LensFX 161をドラッグ&ドロップでレイヤーの一番上に配置したら、描画モードを「スクリーン」、不透明度「50%」に変更します。

 

デザインに合わせてテクスチャのサイズ変更や回転させてみても良いでしょう。

 

 

 

ほんのわずかですが、テクスチャの不規則なグラフィックが追加されたことでよりナチュラルな仕上がりに。グラデーションカラーの混ざり具合もいい感じです。

 

 

 

最後にコントラストをアップするために、もう1枚のテクスチャ Atmosphere 138をレイヤーの一番上に配置します。レイヤーの描画モードを「オーバーレイ」、不透明度「70%」としたら完成です。

 

 

 

 

完成

 

できあがりがこちら。フィルタを重ねたことでより自然で、リアルなライティングエフェクトを作成することができました。

 

 

 

スマートオブジェクト機能を活用したことで、後から文字テキストの変更を行うことも可能です。

 

 

 

今回利用したフォントMoister Font Collectionは、筆記体やセリフ、サンセリフなど4つのフォントを組み合わせるだけで、おしゃれなヴィンテージロゴを作成できるすぐれもの。

 

 

 

デザイン性の高い合字リガチャが豊富に揃っているので、サクッとロゴを作成したいときにも便利。まとめて複数の素材を購入することで、最大50%の追加ボーナス割引があるのもお得ですよ。

 

 

 

参照元リンク : Realistic Glowing Text Effect – Texturelabs.org

【フォトショップ】輝きが違う!ライティング・グローエフェクトのつくり方PhotoshopVIPで公開された投稿です。

【フォトショップ】手描き風ドリップペイントエフェクトのつくり方

$
0
0

 

この記事では、フォトショップをつかった手描き風のドリップペイントエフェクトのつくり方をご紹介します。

 

まるで手描きでペンキが滴ったようなドリップエフェクトは、すべてフォトショップのフィルタ機能のみで作成できる簡単チュートリアルで、フォントの他にもロゴなどあらゆるものに適用でき、応用が効くのもポイントです。

 

あまり知られていないフォトショップ機能のひとつ、「置き換え」フィルタを利用した便利テクニック

 

 

 

手書き風のドリップペイントエフェクトのつくり方

 

まずはフォトショップを開き、新しいドキュメントを作成しましょう。カラーモードは「RGBカラー 16bit」とすることで、よりなめらかで高詳細な仕上がりを表現できます。今回は、3840x2160pxの4Kサイズで作成していきます。

 

 

 

ツールボックスより「文字ツールT」を選択したら、お好みのフォントをつかって描画色「白(#ffffff)」で文字テキストを入力しましょう。

 

今回利用したフォントは Mambaですが、どんな書体でも特に問題ありません。ロゴにも応用可能ですよ。

 

 

 

置き換えフィルタ用テクスチャをつくろう

今回のエフェクトのポイントとなる「置き換え」フィルタは、背面画像の表面の形や質感に合わせて合成したい画像の変形を簡単に行うことができます。

 

まずは、置き換えフィルタで重ねるテクスチャを作成していきます。

 

 

 

新規ドキュメントを先ほどと同じ、3849x2160pxサイズで作成します。こうすることで画像同士がぴったりと重なり、作業がしやすくなります。

 

 

 

レイヤーパネル上で作成されたレイヤーを右クリック>「スマートオブジェクトに変換」をクリック。あとからフィルタの微調整を行うときに便利。

 

 

 

メインメニューより「イメージ」>「色調補正」>「レベル補正」(Command/Ctrl+L)を選択したら、以下のように数値を変更しましょう。

 

出力レベル128とするのを忘れずに。これで50%グレーとして認識され、置き換えフィルタを適用したときに透明で表示されるテクニックです。

 

続けてメインメニューより「フィルタ」>「描画」>「ファイバー」を選択したら、「変化 15」、「強さ 5」で適用します。

 

 

 

メインメニューより「フィルタ」>「ぼかし」>「ぼかし(ガウス)」で、「半径 4px」で適用します。レイヤーパネル上で「ぼかし(ガウス)」アイコンをダブルクリック。パネルを表示したら、描画モードを「比較(暗)」に変更。

 

再度「フィルタ」>「ぼかし」>「ぼかし(ガウス)」で、今度は「半径 2px」で適用したら置き換えフィルタ用テクスチャの完成です。

 

「ファイル」>「保存」(Command/Ctrl+S)で、任意の場所に保存しておきましょう。

 

 

 

ドリップペイントエフェクトを適用してみよう

最初に作成したドキュメントに戻り、文字レイヤーを複製コピー(Ctrl+J)したら、後ほど利用するのでレイヤーを非表示にしておきましょう。

 

メインメニューより「フィルタ」>「変形」>「置き換え」をクリック。

 

スマートオブジェクトまたはラスタライズしてださい、というダイアログパネルが表示されるので、今回は「ラスタライズ」を選択。「水平比率 0」、「垂直比率 0」としたらOK。

 

表示されたパネルより、作成した置き換えフィルタ用テクスチャをクリック。すると、あら不思議。ペンキが垂れたようなエフェクトが。

 

 

 

 

今回のチュートリアル最大のポイント。適用した「置き換え」フィルタを何度も連続で適用していきましょう。Command/Ctrl+Control+Fのショートカットキーでの操作がオススメですよ。

 

フィルタを適用するたびに、まるでペンキが垂れたようなエフェクトに。今回は、40回ほど「置き換え」フィルタを適用しました。

 

 

 

仕上がりがこちら。ペンキのドリップが一直線になっているので、よりナチュラルな見た目にするためにもうワンステップ。

 

 

 

「置き換え」フィルタを適用したレイヤーを選択した状態で、非表示にしてある元の文字レイヤーのサムネイルをクリック。これで選択範囲が指定されました。

 

Command/Ctrl+Shift+Iで選択範囲を反転させます。

 

メインメニューより「フィルタ」>「変形」>「波形」を選択したら、「比率 水平10% 垂直10%」に変更し、他はデフォルト設定のまま適用しましょう。ドリップペイントに自然なウェーブが追加されました。

 

 

 

参照元リンクよりあらかじめダウンロードしておいたテクスチャ Grunge 158をドラッグ&ドロップで一番上のレイヤーに配置します。

 

メインメニューより「イメージ」>「色調補正」>「色調の反転」(Ctrl+I)を適用したら、レイヤーの描画モードを「乗算」に変更しましょう。

 

これでテクスチャの質感のみが文字テキストに追加されました。

 

 

 

「置き換え」フィルタを適用したことで、文字の一部がかけてしまっているのが気になるときは、元の文字レイヤーを表示すれば解決です。

 

 

 

ドリップペイントエフェクト完成

 

できあがりがこちら。まるで手描きでペイントしたような自然なドリップエフェクトを作成できました。

 

 

 

参照元リンクよりテクスチャInkPaint158も配置して、ペンキが飛び散った風に。いろいろ試してみましょう。

 

 

 

参照元リンク : Dripping Paint Effect | Photoshop Tutorial for Text & Logos – Texturelabs.org

【フォトショップ】手描き風ドリップペイントエフェクトのつくり方PhotoshopVIPで公開された投稿です。

【フォトショップ】活字風の自然な「にじみ」文字のつくり方

$
0
0

distressted-text-effect-thumb

 

この記事では、フォトショップでインクがにじんだ活字風の文字テキストのつくり方をご紹介します。

 

便利なフィルタ機能を利用することで、ほんのわずかな手間で、デザイン全体の雰囲気をぐっと高めることができるテクニックです。

 

どんな文字でも、まるで印刷した文字のインクがにじんだようなリアルな仕上がりを手軽に表現できるエフェクトとなっています。

 

 

アクションとして保存しておけば、再生ボタンひとつで表現することも可能です。

 

 

フォトショップで活字風にじみ文字テキスト加工をつくる方法

 

まずはフォトショップを開き、新しいドキュメントを作成しましょう。カラーモードは「RGBカラー 16bit」とすることで、よりなめらかで高詳細な仕上がりを表現できます。今回は、1920x1080pで作成していきます。

 

step1

 

 

ツールボックスより「文字ツールT」を選択したら、お好みのフォントをつかって描画色「白(#ffffff)」で文字テキストを入力しましょう。

 

今回利用したフォントは La Luxes Font Duo + Logosですが、どんな書体でも特に問題ありません。ロゴにも応用可能ですよ。

 

step2

 

背景には紙パターンをランダムに適用しています。

https://photoshopvip.net/122550

 

 

レイヤーパネル上で、文字レイヤーのサムネイルをクリック。これで文字テキストのみ選択範囲を指定できます。

 

Shiftを押しながら、すべての文字レイヤーのサムネイルをクリックし、すべてを選択範囲に追加します。

 

選択範囲が決まったら、文字レイヤーの目アイコンをクリックし、レイヤーを非表示にします。つづけて、パネル右下より「新規調整レイヤーの追加」>「ベタ塗り」を選択し、描画色「黒(#000000)」で塗りつぶしましょう。

 

この方法なら手軽に文字テキストのシェイプを複製でき、フィルタを適用できるようになります。

 

 

 

早速、今回のテクニックのポイント

 

レイヤーパネル上でレイヤーマスクを選択した状態で、メインメニュよりー「フィルタ」>「ピクセレート」>「水晶」を選択しましょう。「セルの大きさ 5」としたら適用。

 

 

 

レイヤーパネル上でレイヤーマスクを右クリック>「選択とマスク」をクリック。

 

「グローバル調整」より「滑らかに 31」、「コントラスト 50%」に変更したら完成です。編集している文字テキストのサイズに合わせて微調整してみましょう。

 

 

 

完成がこちら。文字のエッジが滑らかになり、インクがにじんだような活字風の風合いを演出することができました。

 

step6

 

 

「ベタ塗り」レイヤーを選択(レイヤーマスクではないので注意)したら、レイヤーの描画モードを「焼き込みカラー」に変更し、サムネイルをダブルクリックで、お好みの色に変更できます。今回は、濃い青色(#335359)をチョイス。

 

背景の紙テクスチャの質感が追加され、よりなじんだ雰囲気に。

 

 

 

ワンポイントでリアル感をさらにアップ!

 

よりリアルなインクのにじみ具合を表現するために、もうワンステップの手間を加えてみましょう。

 

レイヤーパネル上でレイヤーマスクを選択したら、メインメニューより「フィルタ」>「ピクセレート」>「水晶…」をふたたび選択します。

 

「セルの大きさ 20」で適用したら、すぐにメインメニューより「編集」>「水晶をフェード」を選択しましょう。

 

表示されたダイアログパネル上で「不透明度 60%」、「描画モード スクリーン」に変更したらOK。淡くひろがるインクのにじみを表現できました。

 

 

 

もう一度メインメニューより「フィルタ」>「ピクセレート」>「水晶…」を選択。「セルの大きさ 60」としたら、Shift+Option/Alt+Fで「水晶をフェード」。

 

今回は「不透明度 15%」、「描画モード スクリーン」とします。より大きなインクのにじみ具合を演出します。

 

 

 

最後にダメ押しとなる「水晶…」フィルタを選択したら、「セルの大きさ 4」で文字全体のにじみを表現して完成です。

 

 

 

完成がこちら。リアル感にこだわった活字風のにじみ文字テキストを作成することができました。

 

step11

 

 

近くで見るとまるで本当にインクが水でにじんだ風合いに。使用する機会の少ないフォトショップフィルタのひとつ、「水晶…」フィルタを複数回リピートで適用するのが、今回のポイントです。

 

 

 

もちろん日本語、英語に関わらず適用できる簡単エフェクト。こちらが加工前のビフォー、使用したフォントはマティス

 

step12

https://photoshopvip.net/128275

 

 

こちらが加工後アフター。自然な活字風のにじみ具合を演出できるテクニックです。

 

step13

 

 

新規調整レイヤー「ベタ塗り」で文字テキストのシェイプさえコピーすれば、あとはアクションボタンひとつでエフェクトを適用することも可能ですよ。

 

 

 

小さな文字サイズでの利用には注意

さらに小さなドキュメントサイズでは、文字がにじみすぎてしまうため、「水晶…」フィルタの値をより小さく変更するようにしましょう。

 

 

 

より手軽に活字風のにじみ文字テキストを楽しみたいひとは、以下のフォントRoad Race Font Family and Extrasもオススメです。

 

 

入力するだけで活字風のヴィンテージスタイルを表現でき、ラフやブラシ、アウトラインなど合計4スタイルを同時収録しています。

 

 

日本語フリーフォントでは、さわらび明朝?が近いでしょうか。今回のテクニックを使って、より自然なにじみ文字を表現してましょう。

 

参照元リンク : 4-Minute Photoshop Pro Tips | Distressed Text Edges – Texturelabs.org

【フォトショップ】活字風の自然な「にじみ」文字のつくり方PhotoshopVIPで公開された投稿です。


【フォトショップ】レトロなスタンプ風「かすれ」文字のつくり方

$
0
0

step15-2

 

この記事では、Photoshopでスタンプを押したような「かすれ」文字のつくり方をご紹介します。リアルな仕上がりを2つのレイヤースタイルのみで表現でき、作業時間は3分以下な便利&お手軽テクニック。

 

 

 

日本語フォントにももちろん対応しており、スタンプエフェクトを適用したまま書体の変更ができる点もポイントで、より手軽にかすれ文字を表現できるようになります。

 

 

 
インクがにじんだようなリアルな「にじみ」文字と一緒に利用してみても良いでしょう。

https://photoshopvip.net/128835

 

 

フォトショップでスタンプ風かすれ文字のつくり方

 

まずはフォトショップを開き、新しいドキュメントを作成しましょう。カラーモードは「RGBカラー 8bit」、3840x2160pxの4Kサイズで作成していきます。

 

step1

 

 

メインメニューより「文字ツールT」を選択し、文字色を「黒(#000000)」とし、お好みのフォントで文字テキストを入力します。

 

今回利用したフォントは The Big Tickleですが、どんな書体でも特に問題ありません。ロゴなどの図形シェイプにも応用可能です。

 

step2

 

 

レイヤーパネル上で作成した文字レイヤーをダブルクリックし、レイヤースタイル2種類を順番に設定していきましょう。

 

まずは「光彩(内側)」。今回のスタンプエフェクトでもっともポイントとなるスタイル。「画質: 輪郭」では、緩やかなカーブ曲線をドロップダウンから選択しています。

 

step3

 

 

続けて「シャドウ(内側)」。こちらも「輪郭」を変更するのをお忘れなく。

 

step4

 

 

レイヤースタイルを適用した状態がこちら。

 

step5

 

 

参照元リンクよりあらかじめダウンロードしておいた紙テクスチャをレイヤーの一番上に配置します。

 

そしてここがポイント。レイヤーパネル上で文字レイヤーを右下のフォルダアイコンまでドラッグし、「新規グループを作成」します。

 

作成したフォルダと紙テクスチャの間をOption/Altを押しながらクリックし、クリッピングマスクを適用しましょう。こうすることで紙テクスチャがフォルダレイヤーにのみ反映されるようになります。

 

 

 

紙テクスチャの描画モードを「ハードミックス」とし、「塗り: 85%」に設定しましょう。

 

 

 

紙テクスチャレイヤーを選択した状態で、メインメニューより「フィルタ」>「ぼかし」>「ぼかし(強)」フィルタを適用。テクスチャのコントラストがくっきりしすぎを補正し、より繊細に。

 

 

 

再度文字レイヤーをダブルクリックし、レイヤースタイル「光彩(内側)」を開きます。不透明度やチョーク、サイズを調整することで、フォントにあったスタンプのかすれ具合を手軽に調整できます。

 

 

 

さらに文字レイヤーは変更できる状態なので、フォントの変更や文字テキストの編集も自由自在

 

 

 

日本語フォントでの仕上がりも試してみます。使用したフォントはキリギリス

 

step11

https://photoshopvip.net/128275

 

 

仕上がりがこちら。紙テクスチャをサイズや位置も調整することで、また違った雰囲気に。

 

step12

step13

 

 

 

紙テクスチャで質感をさらにアップしよう

 

よりリアルな仕上がりを目指して、もうワンステップ。あらかじめダウンロードしておいたテクスチャ Paper 131を背景レイヤーの上にドラッグ&ドロップで配置します。

 

文字に白枠がついたような状態になるため、グループレイヤーの描画モードを「乗算」に変更します。

 

 

 

レイヤーパネル上でグループレイヤーを右クリック>「レイヤー効果」を選択したら、「ブレンド条件」「下になっているレイヤー」の右側のトグルをOption/Altを押しながら「185」までスライドさせます。

 

トグルが2つに分割されたことで、より細かい調整ができるようになり、文字レイヤーに紙テクスチャの質感がほんのり追加されました。

 

 

 

レイヤーパネルより「新規調整レイヤー」>「レベル補正」を選択したら、以下のように「220」までスライドさせ、全体の色合いを整えて完成です。

 

 

 

完成

 

できがりがこちら。テクスチャの質感をそのまま利用することで、自然なスタンプ風の「かすれ」文字を作成することができました。

 

 

 

フォントの太さやスタイルに応じて、レイヤースタイル「光彩(内側)」で好みのかすれ具合を表現できるのは覚えておきたいところ。

 

 

 

フォントを切り替えるだけですべて「かすれ」文字となり、日本語も見事に表現されています。

 

 

 

より幅広い「かすれ」スタイルを表現したいときは、以下のアイテムもオススメです。

 

American Wood Typeは、19世紀ごろにアメリカで利用されていた木版プリント18スタイルを再現できるデザインツール。西部劇やサーカスなイメージ。

 

さらにアクションボタンを一度クリックするだけで、手軽にスタンプかすれエフェクトを適用できるのもポイントです。

 

 

 

InkPad Rubber Stamp Effectsは、文字テキストやロゴ、画像などをドラッグするだけのお手軽さが嬉しいデザイン素材。プリント印刷できる高画質PSDファイルと一緒に、より質感をあげる背景用ベクターテクスチャも同時収録です。

 

 

どちらも有料デザイン素材となりますが、購入アイテム数に応じた最大50%オフの特別割引サービスデザインカッツがお得ですよ。

 

 

参照元リンク : The Super Easy Grunge Stamp Photoshop Typography Setup – Texturelabs.org

【フォトショップ】レトロなスタンプ風「かすれ」文字のつくり方PhotoshopVIPで公開された投稿です。

フォトショップのすごい新機能「スーパー解像度」を5回適用すると?競合AIツールと比較

$
0
0

super-resolution-final

 

この記事では、すごいと話題のフォトショップ新機能「スーパー解像度」の詳しい使い方について紹介しています。

 

500pxの低解像度の写真に「スーパー解像度」を何度も適用する方法や、他のAIオンラインツールとの比較した場合など、より実践を交えたチュートリアルとなります。

 

 

スーパー解像度とは?

 

step5

 

スーパー解像度(英: Super Resolution)」は、2021年3月に行われたAdobe Photoshop CCのアップデートに合わせて、Adobe Camera RAW v13.2に新しく追加された機能です。

 

一言で表すと「元の写真の解像度を上げ、よりくっきりさせる機能」です。

 

縦横それぞれ2倍サイズとなるため、全体の解像度は4倍に

 

いままでは写真のサイズを大きくするときにぼやけてしまうという問題がありました。しかし、「スーパー解像度」はAIテクノロジーを駆使することで、細部を自動で補完しながら拡大できます

 

では、実際に「スーパー解像度」を試してみましょう。

 

 

スーパー解像度の効果は?

 

今回用意した写真はこちら。4072x2720pxとすでに高画質ですが、どうなるでしょう。

 

step1

 

 

しかし、Photoshopで写真を開くだけでは、「スーパー解像度」機能を利用できません。Photoshopに写真をドラッグ&ドロップするだけで、Camera Raw形式で開くようにあらかじめ設定します。

 

メインメニューより「Photoshop」>「環境設定」>「Camera Raw」を開き、「ファイル管理」タブをクリック。「JPEG、HEI、およびTIFFの処理」より「すべてのサポートされているファイルを自動で開く」に変更して、OK。

 

step2

 

これで、写真をPhotoshopにドラッグ&ドロップすると、Camera Raw形式で開くことができます。(必要ないときは設定を戻すのを忘れないように。)

 

Adobe Bridgeから画像を右クリック>「Camera Rawで開く」でも可能ですよ。

 

では、「スーパー解像度」を適用してみましょう。Camera Rawで開いた写真を右リックし、「強化」をクリック。

 

step3

 

 

表示された「強化のプレビュー」パネルより、「スーパー解像度」と書かれた項目にチェックを入れ、「強化」ボタンをクリック。

 

step4

 

 

数秒待つと、スーパー解像度で強化された新しいRAWファイル「xxx-強化.dng」が作成されました。

 

画面右下の「開く」ボタンをクリックすると、Photoshopで新しく作成した写真をそのまま開くことができます。

 

 

 

「スーパー解像度」のビフォーアフターがこちら。目元や毛並みなどがよりくっきりとした印象。

 

step5

 

 

スーパー解像度は一度きり、連続はエラーに。

 

では、画質の低い写真に「スーパー解像度」を何回か適用しようとするとどうなるでしょう。

 

「スーパー解像度」は、連続で適用しようとすると「選択された写真は、既に十分に強化れています。」というエラーメッセージが表示されてしまいます。

 

 

 

スーパー解像度を複数回適用する方法

 

ここでは先ほどのサンプル写真を幅500pxにリサイズし試してみます。

 

step7

 

 

ドラッグ&ドロップで写真をPhotoshopに取り込んだら、画像を右クリック>「強化」で「スーパー解像度」を適用。「開く」ボタンで強化版をPhotoshopで開きます。

 

step8

 

 

メインメニューより「編集」>「別名で保存(Shift+Option/Alt+S)」を選択したら、JPEGファイル形式で保存します。

 

step9

 

 

この作業を繰り返すことで、「スーパー解像度」を複数回適用することができます。

 

ここでは試しに「スーパー解像度」を5回連続で適用してみました。

 

step10

 

 

500pxの元写真と「スーパー解像度」を5回適用した写真の比較がこちら。たしかにくっきり表示されているのがよく分かります。

 

500x334pxの写真が、最終的にはなんと16000x10688pxという超巨大サイズに。やはりAIテクノロジー、すごいです。ただし処理にかかった時間は4分ほど。毎回この作業を繰り返す必要あり。

 

step11

 

 

「スーパー解像度」と他のAIオンラインツールを比較してみた

 

Googleで「AI Image Englarger」などのキーワードで調べてみると、無料で利用できるツールがたくさんあります。

 

今回は、以前紹介した無料オンラインツールUpscalerでも拡大してみました。

 

step12

 

https://photoshopvip.net/125707

 

そしてできあがった写真がこちら。最大8倍まで上げることができますが、3000pxまでという制限があるため、最大サイズで。処理時間は30秒ほど。

 

step13

 

 

比較してみると驚きの結果に。

 

500pxの元写真、スーパー解像度5回適用、Upscaler適用の3枚を並べた様子がこちら。

 

step14

 

 

こちらはオリジナル写真(4000x2700px)と比較した様子。

 

step15

 

 

別の部分でも確認してみます。特にロゴ部分では、スーパー解像度を適用した写真のざらつきが目立ちます。

 

step16

 

 

すこし引いて顔全体を表示した状態がこちら。30秒かからない、わずかな時間でUpscalerは見事な結果に。

 

step17

 

 

比較してみた感想、スーパー解像度の活用法は?

 

数年前のスマートフォンで撮影した写真を壁一面にプリントする、写真の一部を切り取った写真サイズの変更など、より大きく拡大するのにはとても役立つツールだと感じました。

 

一方で、「スーパー解像度」を複数適用する手間と、お手軽なオンラインツールの仕上がりを比べると一長一短な一面も。時間がないときは、オンラインツールでささっと代用してもよいかも。

 

今後、解像度2倍が3倍、4倍とアップデートされていくことが期待される分野と言えるでしょう。

 

スーパー解像度は現在Camera Raw 13.2でのみ提供されており、LightroomとLightroom Classicにも近日中に実装予定となっています。

 

 

参照元リンク : I Applied Adobe’s New “Super Resolution” 5 Times! Works? by PiXimperfect – YouTube

フォトショップのすごい新機能「スーパー解像度」を5回適用すると?競合AIツールと比較PhotoshopVIPで公開された投稿です。

【フォトショップ】写真をベクターイラスト風に加工する方法

$
0
0

 

この記事では、フォトショップで写真をベクターイラスト風に仕上げる方法をご紹介します。

 

このエフェクトはもともと、バラク・オバマの大統領当選を記念したポスター『Hope』を制作し世界中で知られるようになった、シェパード・フェアリー(Shepard Fairey)にインスパイアされています。一度は見かけたことがあるかもしれません。

 

 

 

Illustratorでデザインすることの多いテクニックですが、ここではペンツールなども使わずに、フォトショップでお手軽な写真加工が可能になります。

 

 

デザインの完成予定

 

まずできあがりがこちら。いくつかの調整レイヤーと「油彩」フィルタを利用するだけのシンプルなテクニックで、見た目以上に手間はかかりません。慣れれば3分ほど。

 

 

 

今回利用した写真はこちらよりダウンロードできます。

 

 

 

フォトショップで開いた状態。写真サイズは2300x2450px、300ppi。

 

 

 

人物の切り抜きは「被写体を選択」で一発

 

写真から人物のみを切り抜き、レイヤーマスクを適用しています。人物の切り抜きは「被写体を選択」機能を利用すれば、数秒待つだけで完成です。

 

 

https://photoshopvip.net/125355

 

 

ボタンをクリックするだけできれいな選択範囲を指定することができました。このエフェクトでは、イラスト風に仕上げるので、人物のエッジ部分をくっきりさせておくのがポイントです。

 

背景が少し残っていても問題ないので、あまり神経質にならなくても大丈夫ですよ。

 

 

 

切り抜きを適用した様子がこちら。「白(#ffffff)」でペイントしたレイヤーを背景として作成しています。

 

 

 

ベクターイラスト加工のポイントは、4つの調整レイヤー

 

このベクターイラスト加工は、フォトショップの4つの調整レイヤーを組み合わせることで表現できます。ベクターイラスト加工の基本となる部分と言えるでしょう。

 

まずはひとつ目、「色相・彩度」調整レイヤー。「彩度」を「-100」とします。

 

次回からデザイン工程を短縮するためにアクションを活用する場合は、ここから録画を開始しましょう。

 

 

 

続けて「塗りつぶし」調整レイヤー。あとで色は変更できるので、お好みの色で塗りつぶしましょう。レイヤーの描画モードを「ハードミックス」に設定。

 

 

 

塗りつぶしレイヤーをふたたびダブルクリックし、表示されたカラーピッカーを動かしてみると、2色ないし4色で表現されているのが分かります。ここも後ほど編集できるので、バランスの取れた色合いを選んでおきましょう。

 

 

 

次に「白黒」調整レイヤー。プロパティパネルより「ブルー系: 40」「マゼンタ系: 60」に変更しましょう。

 

 

 

さいごに「グラデーションマップ」調整レイヤーを追加します。ここでは、白黒グラデーションに「位置40% : ネイビー(#005592)」、「位置60% : ピンク(#e448f2)」を追加、適用しています。

 

 

 

油彩フィルタ連続使いでイラスト感を表現

 

レイヤーパネル上で写真レイヤーを選択し、右クリック>「スマートオブジェクトに変換」を適用しておきましょう。こうしておけば、後から変更できる非破壊編集に。

 

メインメニューより「フィルタ」>「表現方法」>「油彩…」フィルタを選択したら、ブラシの「形態: 5」「クリーン度: 5」に設定します。

 

 

 

つづけてメインメニューより「イメージ」>「色調補正」>「シャドウ・ハイライト」を選択したら、「シャドウ 量: 65%」、「ハイライト 量: 25%」に変更しましょう。

 

設定が終わったら、Command+Jで写真レイヤーを複製しておきます。

 

 

 

複製した上のレイヤーを選択したら、再度メインメニューより「フィルタ」>「表現方法」>「油彩…」フィルタよりブラシの「形態: 10」、「クリーン度: 10」に設定します。

 

ここでCommand+Ctrl/Alt+Fで油彩フィルタをそのまま適用。これを7回連続で行いましょう。

 

アクション録画はここで停止しておきましょう。

 

 

 

「油彩」フィルタを連続7回で適用した様子がこちら。写真がイラストのようになりましたが、目や鼻、口元などのディテールがなくなってしまいました。

 

 

 

解決策として、写真レイヤーにレイヤーマスクを追加したら、描画色「黒(#000000)」のソフトブラシ(流量20% | 滑らかさ0%)で気になる部分をペイントしていきましょう。

 

 

 

グラデーションマップで自由なカラーリングに

 

参照元リンクよりダウンロードしておいたPhotoshop用グラデーション(.GRD)ファイルをあらかじめ読み込ませておきましょう。

 

グラデーションマップレイヤーをダブルクリックし、レイヤーパネルを表示。用意されている10色のグラデーションを使えば、スタイリッシュな色合いに変更できます。

 

 

 

ベクターイラストの微調整は「ベタ塗り」調整レイヤーで

 

「ベタ塗り」調整レイヤーを選択しダブルクリック。カラーピッカーを動かすと、イラストのコントラストを調整でき便利ですよ。

 

 

 

ダウンロードしておいたテクスチャ Vector 125を背景レイヤーの上に配置します。Command+Uで「色相・彩度」パネルを開いたら、「明度: 55」に設定。

 

 

 

さらに質感を追加するために、テクスチャ Grunge 219 を続けて配置します。不透明度を「50%」に下げましょう。

 

「ベタ塗り」レイヤーの描画モード「ハードミックス」と「グラデーションマップ」レイヤーのおかげで、4色刷りのような仕上がりに。

 

 

 

最後にレイヤーの一番上にテクスチャ Grunge 214を重ね、描画モードを「スクリーン」に変更したら完成です。

 

 

 

完成がこちら

 

よりポスター風にするために、カンバスの周りに100pxの枠フレームを追加。アクセントにバラの花も加え、レイヤーマスクを使って別の色のグラデーションで表現し、できあがったのがこちら。

 

 

 

特に難しい設定もなく、手順通りに進めていくことで写真を美しいベクターイラスト風に加工することができました。

 

デザイン工程の一部をアクションとして保存しておけば、作業時間の短縮にもつながりオススメですよ。

 

 

他の写真でも試してみたところビフォーアフター。3分ほどの作業時間で完成とは思えないクオリティに仕上げることができました。

 

 

 

「塗りつぶし」レイヤーのカラーピッカーを操作するだけで、イラストのコントラストを調整できるテクニックは今後活用したいテクニックと言えるでしょう。

 

 

参照元リンク : Vector Style Treatment | Photoshop Tutorial – Texturelabs.org

【フォトショップ】写真をベクターイラスト風に加工する方法PhotoshopVIPで公開された投稿です。

【フォトショップ】写真やイラストをレトロなハーフトーン風に加工する方法

$
0
0

halftone-effect-cover

 

この記事では、フォトショップでワンランク上のハーフトーン画像をつくる方法をご紹介します。

 

まるで印刷されたコミック漫画のようなハーフトーンスクリーン効果に、テクスチャの質感を加えることで、よりリアルなヴィンテージ感を演出できるテクニックです。

 

ハーフトーンのサイズを自由に調整、編集できるだけでなく、一度作成してしまえばドラッグ&ドロップであらゆる写真や画像に対応できます。

 

 

 

デザインの完成予定

 

できあがりがこちら。調整レイヤーを組み合わせるだけのシンプルなテクニックで、はじめてのひとにもオススメ。作業時間は3分ほど。

 

halftone-effect-step-15

 

 

今回利用した写真はこちらよりダウンロードできます。

 

halftone-effect-step-1

 

 

フォトショップで開いた状態。写真サイズは2500x2200px、72ppi。

 

halftone-effect-step-2

 

 

調整レイヤーを順番に適用

 

新規調整レイヤーを順番に適用していきましょう。まずは「色相・彩度」調整レイヤー。プロパティパネルより「彩度: -100」とし、写真をモノクロに。

 

 

 

参照元サイトよりあらかじめダウンロードしておいたテクスチャ Pattern 128 をフォトショップで開き、メインメニューより「編集」>「パターンを定義」をクリックし、パターン名「グランジオーバーレイ」とし保存します。

 

halftone-effect-step-4

 

 

「パターン」調整レイヤーを追加したら、先ほど保存したパターンを選択。レイヤーの描画モードを「オーバーレイ」とします。レイヤーマスクは不要のため削除し、レイヤーパネルをすっきり整理しておきましょう。

 

他のエフェクトが適用されているか確認しやすいように、レイヤーを非表示にしておきます。

 

 

 

ふたたびダウンロードしておいたパターン Pattern 129 をフォトショップで開き、メインメニューより「編集」>「パターンを定義」で、お好みの名前「ハーフトーンドット」で保存。

 

halftone-effect-step-6

 

 

もうひとつ「パターン」調整レイヤーを作成し、「ハーフトーンドット」を指定。レイヤーの描画モードを「ハードミックス」とし、「塗り: 90%」とします。こうすることでドットのザラつきが軽減されます。

 

 

 

パターンで作成しているため、比率サイズを変更することでドットの大きさを手軽に変更できます。

 

 

 

元のオリジナル写真レイヤーを右クリック>「スマートオブジェクトに変換」。メインメニューより「フィルタ」>「ぼかし」>「ぼかし(ガウス)」を選択し、「半径: 2px」で適用します。

 

こうすることで、被写体のエッジをやや丸くし、よりリアルで自然な仕上がりを演出できます。

 

 

 

先ほど非表示にしておいたグランジレイヤーの目アイコンをクリックし、ふたたび表示します。ハーフトーンドットにザラッとした質感が追加され、印刷したような風合いとなります。

 

 

 

配色は「グラデーションマップ」調整レイヤーで

 

「グラデーションマップ」調整レイヤーを追加したら、ダウンロードしておいたグラデーションプリセット(.GRD)を読み込み、お好みのグラデーションを選びましょう。

 

 

 

ここでは古い新聞紙にプリントされたようなグラデーションを選択。

 

halftone-effect-step-12

 

 

参照元リンクよりダウンロードしたパターン Pattern 124をフォトショップで開いたら、メインメニューより「編集」>「パターンを定義」。「紙スクリーン」とパターン名を決めました。

 

halftone-effect-step-13

 

 

再び調整レイヤーより「パターン」を選択し、保存した「紙スクリーン」を読み込みます。レイヤーの描画モードを「スクリーン」としたら完成です。

 

 

 

完成がこちら

 

halftone-effect-step-15

 

 

ここまで作成した5つの調整レイヤーをすべて選択したら、まとめてグループ化します。あとはこの作成したフォルダを他のカンバスに移動するだけで、瞬時にハーフトーン加工を作成できます

 

 

 

写真だけでなく、今回試した浮世絵などのイラストにも対応できるテクニック。比率サイズを変更し、ハーフトーンのドットの大きさも調整してみましょう。

 

 

 

特に難しい設定もなく、手順通りに進めていくことで写真にナチュラルなハーフトーン加工をすることができました。一度作成してしまえば、あとはお好みの画像を放り込むだけのお手軽さも魅力です。

 

ハーフトーンの他の加工方法や無料デザイン素材も一緒に確認してみてはいかがでしょう。

 

https://photoshopvip.net/117197

 

参照元リンク : Retro Halftone Effects | Photoshop Tutorial – Texturelabs.org

【フォトショップ】写真やイラストをレトロなハーフトーン風に加工する方法PhotoshopVIPで公開された投稿です。

【フォトショップ】写真をリアルな紙幣プリント風に加工する方法

$
0
0

engraved-money-effect-cover

 

この記事では、フォトショップで紙幣にプリントされたような写真加工のつくり方をご紹介します。

 

まるで紙幣の肖像のような効果を演出できるテクニックで、ポイントは「魔法のテクスチャ」を写真に重ねることで、手軽にリアルな紙幣プリント風の写真加工を実現できます。

 

engraved-money-effect-final-2

 

 

ワンランク上の仕上がりを実現する、レトロなハーフトーン加工と一緒に試してみてはいかがでしょう。

 

https://photoshopvip.net/129308

 

 

デザインの完成予定

 

できあがりがこちら。特殊なテクスチャさえ作成してしまえば、あとはドラッグ&ドロップであらゆる写真に対応できます。

 

engraved-money-effect-21

 

 

「魔法のテクスチャ」を作成しよう

 

今回のテクニックでは、ある特殊なテクスチャを写真に重ねることで、紙幣のような風合いを表現します。

 

まずはこのテクスチャを作成しましょう。10x10px、72dpi、カラーモードは「グレースケース」、カンバスカラー「白」で新規ドキュメントを作成します。

 

engraved-money-effect-1

 

 

メインメニューより「長方形選択ツールM」でカンバスの半分を選択します。

 

描画色「黒(#000000)」で塗りつぶしたら、メインメニューより「フィルタ」>「ぼかし」>「ぼかし(ボックス)」を開き、「半径: 4px」で適用しましょう。

 

 

 

メインメニューより「編集」>「パターンを定義」をえらび、適当な名前でパターンを保存しておきます。

 

engraved-money-effect-3

 

 

新しいドキュメントをもうひとつ開き、今回は「6000x6000px」の大きなカンバスとします。

 

engraved-money-effect-4

 

 

メインメニューより「編集」>「塗りつぶし」を選択し、「内容: パターン」で先ほど作成したパターンをえらびます。

 

engraved-money-effect-5

 

 

つづけてメインメニューより「フィルタ」>「変形」>「波形」を選択したら、以下のように順番に入力していきましょう。このテクニックの鍵となるパート、正確に数字を打ち込みます。

 

適用したらCommand/Ctrl+Aですべてを選択し、Command/Ctrl+Cで作成したテクスチャをコピー。

 

engraved-money-effect-6

 

 

レイヤーパネルの右下より新しい調整レイヤー「塗りつぶし」を選択したら、「50%グレー(R0 G0 B50)」で塗りつぶします。レイヤーパネル上でOption/Altをクリックしながら、調整レイヤーのレイヤーマスクをクリック。Command/Ctrl+Vで作成したテクスチャをペースト。

 

Command/Ctrl+Tで自由変形としたら、「右クリック」>「90°時計回り」で傾けます。レイヤーパネルで塗りつぶしレイヤーのサムネイルをクリックし、レイヤーの不透明度を「90%」にさげましょう。

 

Command/Ctrl+Shift+Eで表示されているレイヤーをひとつに結合。

 

 

 

メインメニューより「フィルター」>「変形」>「波紋」をえらび、「量: 15%」、「振幅数: 大」を適用したらテクスチャの完成です。

 

Command/Ctrl+Aですべてを選択し、Command/Ctrl+Cでテクスチャ全体をコピーしておきましょう。

 

engraved-money-effect-8

 

 

 

写真をテクスチャで一発加工

 

あらかじめ用意しておいた写真は、「被写体を選択」機能を利用して人物の切り取りを自動で行っています。今回利用した写真はこちらからダウンロードできます。

 

背景は灰色グレーの淡いグラデーションを適用した状態、ドキュメントサイズは2600x2600px。

 

 

https://photoshopvip.net/125355

 

Command/Ctrl+Vで先ほどコピーしておいたテクスチャをレイヤーの一番上にペースト。

 

このテクニック最大のポイント。レイヤーの描画モードを「ハードミックス」とします。するとあら不思議、写真が印刷された紙幣のような仕上がりに

 

 

 

写真レイヤーを選択したら、メインメニューより「フィルター」>「表現方法」>「油彩」をえらび、すべての設定を最大値の10で適用します。こうすることでエッジがよりなめらかに。

 

engraved-money-effect-11

 

 

つづけてメインメニューより「イメージ」>「色調補正」>「シャドウ・ハイライト」を選び、「シャドウ: 90%」、「ハイライト: 40%」で適用しましょう。これでコントラストの低い範囲がよりくっきりしたイメージに。

 

engraved-money-effect-12

 

 

Command/Ctrl+Jで写真レイヤーを複製したら、先ほど適用した「油彩」フィルタを連続10回適用します。このときにCommand/Ctrl+Shift+Fのショートカットキーが便利ですよ。
加工前と後の比較がこちら。しわなどが消され、全体的にのっぺりとした印象に。

 

 

 

ツールバーより「ブラシツール(B)」を選択したら、「ソフト円ブラシ」で「硬さ: 0%」に設定。油彩フィルタを10回適用した写真レイヤーのレイヤーマスクをクリックしたら、気になる部分(目は口元など)をブラシでかるくペイントしていきましょう。

 

engraved-money-effect-15

 

 

テクスチャレイヤーを選択したらShift+Tでサイズを変更したり、向きを傾けることで、よりリアルな紙幣プリント加工に仕上げます。光の陰影に注目しながらテクスチャを重ねてみましょう。

 

 

 

レイヤーの右下より新しい調整レイヤー「レベル補正」をテクスチャの下に追加したら、プロパティパネルを左右にスライドさせ、コントラストを強調します。

 

engraved-money-effect-17

 

 

ペイントは「グラデーションマップ」調整レイヤーで

 

もうひとつ新しい調整レイヤー「グラデーションマップ」をレイヤーの一番上に作成したら、みどり色(#1d5749)とクリーム色(#eedac0)のグラデーションを適用します。アメリカのドル紙幣のような風合いとなりました。

 

engraved-money-effect-18

 

 

参照元サイトよりあらかじめダウンロードしておいたテクスチャ Grunge 191 をドラッグ&ドロップでレイヤーの一番上に配置。カンバスサイズに合わせてサイズを変更したら、レイヤーの描画モードを「スクリーン」としたら完成です。

 

 

 

 

完成がこちら

 

人物の背景に漫画の集中線のようなグラフィックを追加し、人物レイヤーの「光彩(外側)」レイヤースタイルで少しだけまわりを光らせ、できあがったのがこちら。

 

engraved-money-effect-21

 

 

魔法のテクスチャさえ作成してしまえば、あとはお好みの写真にドラッグ&ドロップのお手軽作業で紙幣プリント風に加工できます。

 

engraved-money-effect-final-2

 

 

他の写真でも試したみたところ。ここでは、2000x2000pxのやや小さめのサイズだったため、テクスチャを縮小、回転させることでいい具合に。

 

engraved-money-effect-sample

 

 

しわの部分を見事に紙幣プリント加工が適用されています。

 

engraved-money-effect-sample-2

 

 

 

デザイン素材でボタン一発加工を実現

 

フォトショップでの写真の紙幣プリント加工をより簡単に行いたいひとは、無料ダウンロードできるPSアクション素材を利用してみると良いでしょう。

 

アクションファイルの使い方やインストール方法などは、以下の記事を参考にどうぞ。

 

https://photoshopvip.net/108172

 

 

Retro Engraving Photoshop Action

古い写真や紙幣などに使われていそうなスタイルは、収録されているドットやダイヤモンド、ライン、格子などのパターンを組み合わせて、お好みのデザインを作成できます。

retro-engraving-photoshop-action

 

 

 

Engraved Illustration Effect Action

写真をお札に印刷されたような風合いで仕上げるアクション。残念ながら英語版Photoshop環境で使えます。

engraved-effect

 

 

 

Engrave Photoshop Filter

紙幣にプリントされたようなエフェクトを、ボタンひとつで行うPhotoshopアクション素材。5種類のライン太さを選択可能で、参照元では使い方動画が公開されています。

engrave-psd

 

 

 

Vintage Engraved Patterns

イラストをブラシでなぞるだけで紙幣プリント加工を追加できる、Illustratorブラシ素材セット。重ねて利用することでオリジナルの独特な雰囲気に。

 

 

参照元リンク : Engraved Money Effect | Photoshop Tutorial – Texturelabs.org

【フォトショップ】写真をリアルな紙幣プリント風に加工する方法PhotoshopVIPで公開された投稿です。

これどうやるの?フォトショップ最新の使い方やテクニック、チュートリアル48個まとめ

$
0
0

neon-evening-psdvault-feature

 

この記事では、フォトショップの新しい使い方やテクニックを短時間でマスターできる最新チュートリアル48個をまとめてご紹介します。

 

今回紹介するフォトショップのチュートリアルを手順どおり進めていくことで、より実践的なツールや機能の使い方を覚えることができます。

 

 

これどうやるの?フォトショップの最新テクニックや使い方、チュートリアルまとめ

 

継ぎ目のない複雑なデザインパターンを作成する方法

あらゆるデザインで継ぎ目のないパターンを作成するテクニック。以前紹介した記事も参考にしてみると良いでしょう。

comple-repetable-pattern

 

https://photoshopvip.net/115623

 

 

さまざまなカモフラージュ柄パターンをデザインする方法

フォトショップをつかって継ぎ目のないカモフラージュパターンを作成します。長めですが、手順どおり進めていくだけで基本ツールのみでデザインします。

 

 

 

手書きのヴィンテージ風ピンアップ・エフェクトのつくり方

戦闘機などに手書きされていたペイントスタイルをモチーフにした写真加工エフェクト。

post-thumbnail

 

 

 

ヴィンテージなモーテル風ネオンサインのつくり方

フォトショップとiPad向け手描きアプリ「プロクリエイト」をつかって、60年代ごろのレトロなネオンサインをデザインします。レイヤースタイルをつかったネオンフェクトは使いやすくてオススメ。

neon-sign-illustration-tutorial-like-motel

 

 

 

本格的な輝きのネオンライトエフェクトのつくり方

他のネオン系チュートリアルとは異なるレイヤーの描画モードを組み合わせ、より発色の良い鮮やかなネオンカラーに仕上げます。

neon-effect-abduzeedo

 

 

 

ネオンライトで光るライティングエフェクトのつくり方

ネオンライトの光の反射などより細かいディテールにこだわった本格派デザインチュートリアル。

Neon-Glow-Effect-Photoshop-Banner-AFter

 

 

 

お手軽ネオンライトエフェクトのつくり方

レイヤースタイルを設定するだけでOKな簡単チュートリアルで、人物の周りを立体的にネオンライトを通すレイヤーマスク機能に注目です。

neon-light-effect-spoongraphic

 

 

 

写真をネオン色に輝く風景に加工する方法

レイヤーの描画モードの実践的な使い方を学ぶことができる、サイバーパンク系写真加工テクニック。

neon-evening-psdvault-feature

 

https://photoshopvip.net/115845

 

 

写真に月を追加する方法

人物モデルの背景に巨大な月を合成するチュートリアルで、人物への光の反射具合もお見事です。

Add-Moon-Banner

 

 

 

本物そっくりな炎をデザインを追加する方法

ポイントは炎テクスチャレイヤーの描画モードを「スクリーン」とし、不要な部分はレイヤーマスクで消去といった、フォトショップの基本的な使い方をマスター。

realistic-fire-photoshop-banner-after

 

 

 

写真にリアルな湯気や煙を追加する方法

煙テクスチャを描画モード「スクリーン」で重ねることで、黒い部分が透明とすることで、リアルさを損なわないデザインに。

Add-Steam-Smoke-Banner

 

 

 

フォトショップで人物に太陽の光を当てる方法

太陽に照らさせたほんわかソフトなライティング効果を目指す、お手軽写真加工テクニック。

Sun-Glow-Banner

 

 

 

ぐにゃりと曲がったワープ・テキストエフェクトのつくり方

フォントを自由に波打たせることができるPhotoshopチュートリアルで、スマートオブジェクト機能を利用しているので、独立したレイヤーを編集するだけのお手軽操作が魅力。

warp-text-effect

 

https://photoshopvip.net/123380

 

 

溶けたようなリキッドRGBテキストエフェクトのつくり方

80年代を連想させる鮮やかな色使いと、ザラッとした質感が特長のレトロ・フューチャースタイル。

melting-liquid-rgb-text-effect

 

 

 

写真の一部をネオンカラーで光らせる方法

いくつかの描画モードとレイヤースタイルを組み合わせるだけで、鮮やかなネオングローエフェクトを作成します。

glow-effect-action

 

 

 

人物をピカピカ黄金の彫像に加工する方法

「グラデーションマップ」調整レイヤーを活用した、あまり知られていないテクニックが紹介されており、手軽に試すことができるのもうれしいポイント。

golden-effect

 

 

 

キラキラに輝くホログラフィックステッカーを作成する方法

Illustratorで描いたパスをベースに、Photoshopでエフェクトを追加し、実際にステッカー注文で気をつけたい仕様まで詳しく解説した動画チュートリアル。

holographic-sticker-design-tutorial

 

 

 

Instagram用継ぎ目のないパノラマスライド画像のつくり方

投稿をスワイプすると写真がつながったようなパノラマ効果を演出できるテンプレートを作成します。

seamless-panorama-for-instagram-post

 

 

 

Instagramでパズル状に投稿できるグリッドテンプレートのつくり方

フォロワーの注目を一気に集めるパズルグリッドレイアウトも、フォトショップを使えば手軽に作成できます。

Instagram-Puzzle-Tutorial-Final-Result-Preview

 

 

 

フォトショップでリアルなひげを生やす方法

カスタムひげブラシを作成することで、ブラシでなぞるだけで超リアルな仕上がりに。

facial-hair-photoshop-final

 

 

 

透明のボトルを切り抜く方法

背景の透けて見える透明ボトルを、フォトショップを使って切り抜くテクニックが披露されています。後からの編集も可能な非破壊編集。

cut-out-glass-in-photoshop

 

 

 

なにげない写真を嵐にするPSアクションのつくり方

リアルな雲エフェクトとぴかりと光る雷を再現することで、どんな写真にも対応できるアクションとして保存します。

storm-effect

 

 

 

2色の光に照らされたダブル・ライト・エフェクトのつくり方

塗りつぶしレイヤーの描画モードを「オーバーレイ」とすることで、立体感のある光のある反射を手軽に表現できます。

double-light-effect

 

 

 

本物そっくりの霧をデザインするPSブラシのつくり方

一度作成してしまえばスタンプ感覚でリアルな霧を演出できるブラシを作成します。

Fog-Brush-Effect-Banner-After

 

 

 

フォトショップの新機能で空を一瞬で置き換える方法

人工知能をつかうことで自動で空の置き換えを行うことができるフォトショップ。

sky-replacement-in-photoshop

 

https://photoshopvip.net/125512

 

 

人物を異なる背景に違和感なく合成する方法

「トーンカーブ」調整レイヤーを活用することで、手軽に色を補正できる覚えておきたいテクニック。

Match-Subject-Banner

 

https://photoshopvip.net/photo-composite

https://photoshopvip.net/117030

 

 

Color-Grade-From-Any-Movie-Photoshop-1

 

 

 

写真の特定の色だけを変更する方法

たとえば写真全体は白黒で一部のみ色を適用する、なんてテクニックも簡単に行うことができますよ。

change-color-plants-photoshop-banner

 

https://photoshopvip.net/104764

https://photoshopvip.net/change-color

 

 

ぼやけた写真をくっきりさせる方法

ほんの数ステップのシンプルな工程は、アクションとして保存しておくことで、次回以降は再生ボタンひとつでレタッチ完了です。

sharpen-edges-photoshop-final

 

 

 

チャンネルをつかった髪の毛を切り抜く新テクニック

チャンネルレイヤーよりもっともコントラストの強いチャンネルカラーを選ぶことで、より詳細な選択範囲を指定できるように。

channels-hair-selections-photoshop-after

 

https://photoshopvip.net/123031

https://photoshopvip.net/123167

 

 

不思議の国のアリスをモチーフにしたコンセプトデザインのつくり方

トランプが舞う超リアルな写真合成テクニックを学ぶチュートリアル。影や光の当て方から、デザイン全体の色合いを整えるトーンテクニックまで。

Alice-in-Wonderland

 

 

 

鼻からヤシの木が生えたゾウの写真合成テクニック

フォトショップの醍醐味のひとつであるリアルな写真合成を学ぶチュートリアルで、あらかじめ用意した複数の写真を違和感なく並べます。

Elephant-Tutorial-1-800x1000

 

 

 

綱渡りをするゾウをデザインする方法

こちらもゾウをモチーフに、不思議でシュールな写真合成を紹介するデザインチュートリアル。サンプル素材もすべて提供されているので、一緒にデザインしてみてはいかが。

 

 

 

角に水を張ったリアルな鹿の写真合成テクニック

透明感のある水をつかった高度なチュートリアルで、月の光にぼんやりと輝く様子まで見事に表現されています。

surreal-deer-photo-manipulation

 

 

 

別の世界につながるどこでもドアをデザインする方法

まわりとは全く異なる風景が広がるドアの中の世界を表現する写真合成チュートリアル。

door-final

 

 

 

印刷したようなレタープレスプリント効果のつくり方

インクスタンプを押したようなザラッとした質感をテキストやイラスト、ロゴなどに適用できるテクニック。

grime-texture-effect

 

https://photoshopvip.net/128874

 

 

ロゴやイラストをザラッとしたヴィンテージ風に見せる方法

テクスチャを重ねることで、簡単にそしてリアルな雰囲気に仕上げることができます。

How-to-make-a-logo-look-vintage-Preview

 

https://photoshopvip.net/128733

 

 

切り抜き写真の外側に外枠、アウトラインを追加する方法

まるで切り貼りしたコラージュブックのようなエフェクトで、レイヤースタイル「境界線」を調整するだけのシンプルさ。

Outline-Picture-Banner

 

 

 

フォトショップで本物そっくりな影をデザインする方法

ブラシツールを活用し、奥行き感たっぷりでリアルな影を描きます。ブラシ設定がはじめてのひとにオススメ。

realistic-shadows-photoshop-after

 

 

 

文字テキストを透明にする方法

いくつかの方法の中から、レイヤーの描画モードを「オーバーレイ」に設定する方法が紹介されています。

transparent-text-fea

 

 

 

影をつかった立体的なオーバーラップ・テキストエフェクト

アルファベットを一文字ずつ分けてレイヤースタイルを適用することで、ドロップシャドウを表現します。

shadow-overlapping-text-effect

 

 

 

リキッド状の水滴メタルのつくり方(RGBレトロ版)

古いブラウン管テレビに映し出されたような、RGBカラーのにじみ具合を表現するレトロフューチャー向け小技。

liquid-chrome-rgb-droplets

 

 

 

ドローンでより良い写真を撮影するには

フォトショップの編集でも高画質での写真撮影は欠かせません。ドローンによる写真撮影で気をつけたいポイントをまとめて紹介しています。

Better-Drone-Photos-Before

 

 

 

花をレイヤー状に重ねた文字テキストエフェクトのつくり方

レイヤーマスク機能をうまく活用することで、奥行き感のあるタイポグラフィーを短時間で作成できるようになるチュートリアル。

FloralTypography0

 

 

 

フォトショップで砂の上にリアルな文字を描く方法

異なるレイヤースタイルを適用したテキストレイヤーを重ねることで、よりリアルで奥行き感のあるデザインに仕上るテクニック。

sand-text-effect-final

 

 

 

熱々のマグマでできたテキストエフェクトのつくり方

順番にレイヤースタイルを適用していくだけで完成するお手軽チュートリアルで、見た目以上にシンプル。

lava

 

 

 

花に埋もれる狼をデザインする方法

被写体の自動選択やレイヤーマスクの使い方、目の色を変更する方法など、実用的なテクニックが揃った写真合成チュートリアル。

Floral-Wolf-Tutorial-1-1000x1000

 

 

 

アクション映画向けポスターをデザインする方法

他のモデルなどに編集しやすいコンポジションをステップごとに詳しく解説した実践向けフォトショップチュートリアル。

action-movie-poster

 

 

日本語フォトショップチュートリアルも増えてます

 

日本語チュートリアルも少しずつ増えています。こちらのページからまとめて確認できます。

 

【フォトショップ】超リアルな黄金文字テキストエフェクトのつくり方

手順通りに進めていくことで、圧倒的な光沢感とリアル感を演出できる黄金文字テキストのお手軽チュートリアルです。

 

 

 

【フォトショップ】ワンランク上のネオンサインエフェクトのつくり方

レイヤースタイルで表現できるお手軽なエフェクトで、ワンスパイス加えることで、本物そっくりなリアル感とライティングエフェクトを演出できるチュートリアルとなっています。

 

 

 

【フォトショップ】輝きが違う!ライティング・グローエフェクトのつくり方

お好みで文字やネオンカラーの変更が可能な点もポイントで、手軽に編集を行うことができます。

 

 

 

活字風の自然な「にじみ」文字のつくり方

どんな文字でも、まるで印刷した文字のインクがにじんだようなリアルな仕上がりを手軽に表現できるエフェクトとなっています。

 

 

 

【フォトショップ】写真をベクターイラスト風に加工する方法

バラク・オバマの大統領当選を記念したポスター『Hope』を制作し世界中で知られるようになった、シェパード・フェアリー(Shepard Fairey)にインスパイアされたチュートリアル。

 

 

 

写真やイラストをレトロなハーフトーン風に加工する方法

まるで印刷されたコミック漫画のようなハーフトーンスクリーン効果に、テクスチャの質感を加えることで、よりリアルなヴィンテージ感を演出できるテクニックです。

 

 

 

写真をリアルな紙幣プリント風に加工する方法

まるで紙幣の肖像のような効果を演出できるテクニックで、ポイントは「魔法のテクスチャ」を写真に重ねることで、手軽にリアルな紙幣プリント風の写真加工を実現できます。

 

 

前回のまとめからおよそ3ヶ月ぶりとなる新作フォトショップチュートリアル。これまでのデザインテクニックも一緒に確認してみてはいかがでしょう。

 

参照元リンク : How to Create Magnificent Evening Landscape in Photoshop – PSD Vault

これどうやるの?フォトショップ最新の使い方やテクニック、チュートリアル48個まとめPhotoshopVIPで公開された投稿です。

Illustrator初心者にもオススメ、最新チュートリアルや使い方20個まとめ

$
0
0

how-to-design-a-vintage-chocolate-box-packaging

 

この記事では、イラストレーターの新しい使い方やテクニックを短時間でマスターできる最新チュートリアル20個をまとめてご紹介します。

 

レトロスタイルや鮮やかなグラデーションなどトレンドを意識したものから、デザインの現場で取り入れたい新機能や便利テクニックまで幅広く揃います。

 

 

Illustrator初心者にもオススメ、最新チュートリアルや使い方20個まとめ

 

Illustratorでグリッチエフェクトを作成する方法

独自のパターンを先に作成しておくことで、文字テキストやイラスト、ロゴなどあらゆるオブジェクトにグリッチ効果を手軽に追加できるチュートリアル。

VectorGlitches00

 

 

 

豪華なオーナメントロゴをデザインする方法

デザイン素材を活用することでプロレベルのヴィンテージロゴをIllustratorで作成する手順を詳しく解説する全5回シリーズのチュートリアル。

how-to-create-an-ornate-logo-design

 

 

 

ヴィンテージなチョコレート用パッケージをデザインする方法

上記チュートリアル同様にベクターグラフィック素材を活用することで、スタンプ感覚でデザインを作成できます、オススメ◎。

how-to-design-a-vintage-chocolate-box-packaging

 

 

 

レトロなポストカードをデザインする方法

観光地で売っていそうなポストカードを作成するチュートリアルで、クリッピングマスクやビットマップイメージの使い方、レイヤーをつかった実用テクまで幅広く網羅しています。

VintageTypePostcard0

 

 

 

ドリーミーな淡いパステル系グラデーションを作成する方法

グラデーションメッシュ機能の具体的な使い方と、効果的なパステルカラーの組み合わせ方を紹介した実用的チュートリアル。

PastelGradient0B

 

 

 

ぼんやりと輝くネオンエフェクトのつくり方

アピアランスパネルの設定のみで完成のお手軽チュートリアルで、作成したグラフィックスタイルを保存しておけば、いつでもボタンひとつでエフェクトを再現できます。

neon-glow-effect-in-illustrator

 

 

Illustratorでアウトドア系のラベル、ステッカーを作成する方法

シンプルなグリッドの設定やバッジのシェイプを描くなど、これからイラストレーターをはじめるひとにオススメのツールの基本的な使い方を学ぶことができます。

MountainBadge0

 

 

 

本物そっくりでリアルなiPhoneモックアップベクターのつくり方

3Dツールやグラデーション、メッシュツールなどを利用することで立体的でリアルすぎるモックアップに仕上げます。パスファインダーで透明にする設定方法は知りませんでした。

create-iphone-mockup

 

 

 

ハワイなトロピカル柄の観葉植物を描くアートブラシのつくり方

アートブラシ機能を活用して、南国トロピカルなヤシの木などの葉っぱを手軽に描くことができるテクニック。

Ai-ArtBrushes-Hero-img

 

 

 

ベクターイラストにザラッとしたグランジの質感を追加する方法

ざらざらのノイズ効果を加える、2つのテクニック両方が紹介されており、イラストに奥行き感を与えより魅力的な仕上がりを実現します。

add-noise-to-your-vector-graphics

 

 

 

70年代風ファンキー・テキストエフェクトのつくり方

フォトショップで作成しそうなエフェクトも、Illustratorの機能をうまく利用することで、より手軽にデザインすることができます。

70s-text-effect-in-illustrator

 

 

イラストレーターで画面上のどこからでも色を抽出する方法

Shiftキーを押しながらカラーピッカーを動かすことで、Illustrator以外のアプリケーションや壁紙などからも色を抽出できます。

Ai-copy-color_2021-03-17-101718

 

 

 

イラストレーターでブラシのサイズを変更する方法

ストロークの設定方法やカスレ具合の調整方法など基本の使い方を短くまとめた動画チュートリアル。

How-to-change-brush-size-in-Illustrator-Main-Preview

 

 

 

Illustratorでパスに沿って文字テキストを入力する方法

パスに沿って文字テキストを配置する基本テクニックをおさらい、5つの方法をそれぞれサンプル付きで紹介しています。

illustrator-text-to-path-5

 

 

 

遠近感のある文字テキストのつくり方

手軽に距離感を表現できるだけでなく、フォントや色、サイズなども自由に変更できる汎用性の高さがポイント。

make-perspective-text

 

 

 

パスファインダー機能をつかったオブジェクトの結合

通常とすこしかわったやり方は習慣化するのに時間がかかるかもしれませんが、慣れると強力なツールに。

Ai-Expand-Appearance

 

 

 

デザインの質を高める5つのIllustratorテクニック

ベクターイラストにテクスチャの質感や奥行き感、影などを追加する知っておくと便利な使い方が紹介されています。

5-adobe-illustrator-vector-effects

 

 

 

ミリタリー感満載なカモフラージュ柄テキストエフェクト

マシンガンの銃弾も立体的に装飾されたステンシル風の文字エフェクト。

diana_army_text_effect_tut_image_final-min

 

Illustratorでできるテキストエフェクトはこちらからどうぞ。

https://photoshopvip.net/123478

 

 

レインボーカラーのレトロテキストエフェクトのつくり方

70から80年代のレトロな雰囲気を表現したチュートリアルで、ブレンドツールを活用するのが鍵。

rainbow-text-effect-sm

 

 

 

リピート機能で曼荼羅デザインを作成する方法

鏡に映したような左右対称のミラー効果のつくり方や、パスに沿ったリピートオブジェクトの追加方法など、Illustratorがより便利になる機能。

MandalaDesign0

 

 

前回のまとめも参考にいかがでしょう。2020年の年末特集となっています。

 

https://photoshopvip.net/126666

 

Illustrator初心者にもオススメ、最新チュートリアルや使い方20個まとめPhotoshopVIPで公開された投稿です。


【フォトショップ】スプレーでペイントしたようなブラシ文字のつくり方

$
0
0

spray-painted-stentcil-text-effect-cover

 

この記事では、フォトショップでスプレーでペイントしたような文字のつくり方をご紹介します。

 

スプレーペイント特有のザラッとした粒子感が特長で、テクスチャを重ねることで手軽にリアルなブラシエフェクトを表現できます。

 

 

スプレーブラシ風の文字のつくり方

 

できあがりがこちら。ポイントはあまりなじみのない描画モード「ディザ合成」を活用するエフェクト、では詳しくみていきましょう。

 

spray-painted-stentcil-text-effect-14

 

 

まずはフォトショップを開き、新しいドキュメントを作成しましょう。カラーモードは「RGBカラー 8bit」、3840x2160pxの4Kサイズ、カンバスカラー「黒」で作成していきます。

 

spray-painted-stentcil-text-effect-1

 

 

メインメニューより「文字ツールT」を選択し、文字色を「黒(#ffffff)」とし、お好みのフォントで文字テキストを入力します。ここでは無料フォント Mr Stalwart Regular を利用していますが、ロゴや図形シェイプでも応用できるテクニックとなります。

 

spray-painted-stentcil-text-effect-2

 

 

レイヤーパネル上でもテキストレイヤーを右クリック>「テキストをラスタライズ」としたら、メインメニューより「編集」>「塗りつぶし」(Shift+F5)をクリック。

 

表示されたパネル上で「内容: ブラック」、「描画モード: 背景」として塗りつぶしましょう。

 

spray-painted-stentcil-text-effect-3

 

 

レイヤーパネルよりテキストレイヤーを選択したらレイヤーマスクを適用。Optionを押しながらレイヤーマスクをクリックしたら、メインメニューより「フィルター」>「描画」>「雲模様1」を適用。

 

再度メインメニューより「フィルター」>「ぼかし」>「ぼかし(ガウス)」を選択したら、「半径: 25px」で適用します。
 

 

 

メインメニューより「イメージ」>「色調補正」>「レベル補正」(Command/Ctrl+L)を選んだら、黒レベル「80」、白レベル「175」に設定します。

 

 

 

レイヤーマスクを右クリック>「レイヤーマスクを使用しない」を選択したら、元のレイヤーに戻りましょう。

 

メインメニューより「フィルター」>「ぼかし」>「ぼかし(レンズ)」を選択したら、表示されたプロパティパネルの「深度情報」より「ソース: レイヤーマスク」、「虹彩絞り」より「形状 五角形」「半径 100」とし、それ以外は「0」で適用します。

 

 

 

メインメニューより「編集」>「ぼかし(レンズ)をフェード」(Command/Ctrl+Shift+F)を選択したら、「不透明度: 80%」とします。これで文字テキストの読みやすさを確保します。

 

レイヤーの描画モードを「ディザ合成」に変更しておきましょう。この時点ではなにも変化はありません。

 

 

 

Command/Ctrl+Aでレイヤーすべてを選択したら、Command/Ctrl+Cでコピー。レイヤーパネル上でOptionをクリックしながらレイヤーマスクを選択したら、Command/Ctrl+Vでペースト。

 

ふたたびレイヤーに戻り、Dで描画カラーを初期化したら、Command/CtrlDeleteをクリックし背景色「白(#ffffff)」で塗りつぶしましょう。

 

 

 

文字レイヤーの不透明度を下げることで、ザラッとしたノイズ感を調整できます。ここでは、「不透明度 97%」としています。

 

レイヤーパネル上で背景レイヤーをダブルクリックでロックを解除したら、再度文字レイヤーを選択し、Command/Ctrl+Eで「すべてのレイヤーを結合」しひとつにまとめてしまいましょう。

 

 

 

スプレーブラシでペイントしたような雰囲気に。より細かいディテールを作り込んでいきます。

 

spray-painted-stentcil-text-effect-10

 

 

参照元リンクよりあらかじめダウンロードしておいたテクスチャ InkPaint 170をフォトショップで開いたら、Command/Ctrl+Aでレイヤーすべてを選択、3Command/Ctrl+Cでコピー。元のファイルに戻り、Command/Ctrl+Vでペースト。

 

Command/Ctrl+Iで色調を反転、白色に変換したらお好みのサイズや場所に調整し配置します。

 

カンバス上で動かしやすいように2つのレイヤーを2つとも選択したら、Command/Ctrl+Gをひとつのグループにまとめておくと便利ですよ。

 

 

 

参照元サイトよりもうひとつのテクスチャ InkPaint 182 をカンバスに配置します。今回は白ではなく、アクセントとなる色をつけたいので、レイヤーパネル上でレイヤーをダブルクリック、レイヤースタイル「カラーオーバーレイ」を選択し、描画色「黄色(#837d1d)」としたら、テキストエフェクトは完成です。

 

spray-painted-stentcil-text-effect-12

 

 

背景にレザーテクスチャ Grunge 120をカンバスの一番下に配置し。先ほど作成したグループフォルダの描画モードを「スクリーン」とすることで、テキストの下にレザーの質感をうまく表現できます。

 

 

 

 

完成がこちら

 

より質感を高めるために、2種類グランジテクスチャ Grunge 120 と Grunge 121をそれぞれ描画モード「乗算」、「スクリーン」で追加し、レベル補正で全体の青みをすこしだけ調整した状態がこちら。

 

spray-painted-stentcil-text-effect-14

 

 

あまり活用することのなかったレイヤーの描画モード「ディザ合成」によって、スプレーブラシでペイントしたような質感を手軽に表現できました。

 

日本語はもちろん、ロゴや図形シェイプでもスプレーブラシ風エフェクトは適用可能です。

 

 

 

まるで本当にスプレーしたようなリアルな雰囲気を見事に表現することができました。

 

 

 

ペンキで手描きしたようなドリップエフェクトと合わせてみてもよいですよ。

https://photoshopvip.net/128458

 

参照元リンク : Spray Painted Stencil Effect | Tutorial for Text & Logos – Texturelabs.org

【フォトショップ】スプレーでペイントしたようなブラシ文字のつくり方PhotoshopVIPで公開された投稿です。

【フォトショップ】アートヒストリーブラシで写真を絵画ペイント風に仕上げる方法

$
0
0

 

この記事では、フォトショップのあるひとつのツールを使って写真を絵画ペイント風に仕上げる方法をご紹介します。

 

 

 

アートヒストリーブラシを活用することで、ほんの数クリックで写真を水彩ペイントのようにできるお手軽チュートリアルで、絵が描けなくても全く問題ありません。

 

 

 

ヒストリーブラシ、アートヒストリーブラシとは?

 

通常のツールバーでは表示されていない「アートヒストリーブラシ」。「ヒストリーブラシ(Y)」を長押しで表示でき、Shift+Yでアートヒストリーブラシと切り替えることができます。

 

ヒストリーブラシとアートヒストリーブラシは、使い方や設定などが似ているため、今回はまず「ヒストリーブラシ」について詳しく見ていきましょう。

 

ヒストリーブラシのつかい方

ヒストリーブラシとは、ペイントした一部分をヒストリーパレットから選択した編集ステージの状態に戻すことができるツールです。

 

実際にヒストリーブラシの参考例を見てみましょう。ここでは、一枚のきれいな花の写真を用意しました。

 

ヒストリーパネルが表示されていないひとは、メインメニューより「ウィンドウ」>「ヒストリー」で表示しておきましょう。

 

 

 

試しに画像に「色調を反転(Command/Ctrl+I)」を適用し、続けて「彩度を下げるCommand/Ctrl+Shift+U)」も適用します。

 

ツールバーより「ヒストリーブラシ(Y)」を選択したら、適当に画像の一部をペイントしてみましょう。塗りつぶした領域のみ元の写真の色合いが戻りました

 

 

 

デフォルト設定では元の写真ですが、ヒストリーパネルより別の編集ステージにチェックを入れることで、そのポイントで適用した効果を使ってペイント(ここでは色調の反転)することができます。

 

これが「ヒストリーブラシ」の基本的な使い方です。では、「アートヒストリーブラシ」はどうでしょう?

 

 

アートヒストリーブラシの使い方

アートヒストリーブラシとは、ヒストリーブラシと通常のブラシを組み合わせたマッシュアップのようなツールで、ブラシで塗りつぶした領域の色のみをヒストリーパネルより抽出、サンプルします。

 

オプションバーよりブラシのスタイル選択など、細かい設定が可能で、ブラシサイズによっても仕上がりが大きく変わってきます。

 

 

 

ヒストリーブラシとアートヒストリーブラシを利用しているときに気をつけたいことは、通常フォトショップができるいくつかの処理ができなくなることです。

 

たとえば、アートヒストリーブラシでペイントしている画像をリサイズし、ふたたびアートヒストリーブラシでペイントしようとすると、エラーが表示されてしまいます。

 

 

 

こんなときの解決策がこちら。ヒストリーパネル上でペイントしたい編集ステージ(ここでは元の写真)を選択したら、右上アイコンより「新規スナップショット」をクリック。表示されたパネルより「対象: 統合レイヤー」としたらOK。アートヒストリーブラシをふたたび選択したら、エラーが表示されることなくペイントすることができます。

 

 

 

アートヒストリーブラシで写真を絵画ペイント風に仕上げる方法

 

アートヒストリーブラシの基本的な使い方がわかったので、この機能を活用して写真を絵画ペイント風に仕上げてみましょう。慣れてしまえば作業は1分もかからないお手軽テクニックです。

 

今回用意したサンプル写真がこちら。こちらのページより無料ダウンロードできます。画像サイズは2400x3225pxですが、ブラシサイズを調整すればサイズはお好みで構いません。

 

 

 

まずは参照元リンクよりアートヒストリーブラシ Art History Brushes(.ABRファイル)をダウンロード、インストールしておきましょう。

 

ブラシのインストールは、フォトショップを開いた状態でダウンロードした.ABRファイルをダブルクリック。またはブラシパネル右上アイコンより「ブラシを読み込む」でも可能。

 

5種類のアートヒストリーブラシが収録されているので、一番大きなブラシLARGEから順番にペイントしていきましょう。

 

写真全体を大胆にアートヒストリーブラシで塗りつぶしていきましょう。これだけでも筆ブラシのリアルなストロークが表現され、まるで手描きペイントしたような雰囲気に。

 

 

 

次にNOODLESブラシに切り替えたら、顔などディテールを表現したい部分をペイントしていきましょう。個人的にフォトショップのすごさを感じるワクワクするステップです。

 

ブラシでなぞった部分から順番に顔が浮かび上がってきます。先ほどのLARGEブラシともストロークが揃っているので、違和感がありません。

 

 

 

MEDIUMブラシに切り替えると、より筆ブラシのストローク、質感を追加できます。ここでは部分的にスポットとして利用しています。

 

ブラシでペイントする範囲を間違えたときは、Command/Ctrl+Zで作業を前に戻ることができるショートカットキーなので、一緒に活用してみるとより効率的ですよ。

 

 

 

さらに細かいSMALLブラシ。人物のシルエットやサングラスなど細部まで表現したい部分をペイントしていきましょう。

 

 

 

最後にFINEブラシ。超極細のヘアーラインブラシは、元の写真のようなリアルさを表現できるので、鼻やくちびるなど立体感を出したいところをペイントしてみると良いでしょう。

 

 

 

ほんの数回クリックするだけでこの仕上がり。フォトショップの他の機能を利用してさらにクオリティーを高めてみます。

 

 

 

メインメニューより「フィルター」>「Camera Raw フィルター」を選択したら、「基本設定」タブより「テクスチャ +66」、「明瞭度 +24」とし、「ディテール」タブより「シャープ 46」とします。フィルター適用前と後を比較した様子がこちら。立体感、奥行き感が増しているのが分かります。

 

 

 

Command/Ctrl+Jでレイヤーを複製したら、ふたたびメインメニューより「フィルター」>「表現手法」>「エンボス」で「高さ 1pixel」「量 200%」としたらOKボタンをクリック。

 

レイヤーの描画モードを「ハードライト」に変更し、「不透明度 50%」にしたら完成です。

 

 

 

完成がこちら

 

5種類のアートヒストリーブラシをつかって完成した作品がこちら。

 

 

 

まるで本当に手描きでペイントしたようなリアルな質感をほんの数十秒で作成することができました。

 

 

 

他の写真でも試してみました、加工前のビフォーがこちら。

 

 

 

そして加工後アフターがこちら。作業にかかった時間はほんの数十秒ほどでした。ブラシでなぞるだけでプロのアーティストになったような気分を味わうことができますよ。

 

 

参照元リンク : Art History Brush | Photoshop Tutorial – Texturelabs.org

【フォトショップ】アートヒストリーブラシで写真を絵画ペイント風に仕上げる方法PhotoshopVIPで公開された投稿です。

【フォトショップ】メタリック&光沢感!80年代クロム合金エフェクトのつくり方

$
0
0

chrome-text-effect-final-cover (1)

このチュートリアルは、Texturelabsによる英語版オリジナルチュートリアル「80s Ultra Chrome Effect」をアレンジしたものとなります。

 

この記事では、フォトショップによる80年代風のレトロなクロム合金エフェクトのつくり方をご紹介します。

 

光沢感たっぷりなクロム合金の質感を表現できるチュートリアルで、文字テキストからロゴなどの図形シェイプにも応用できるテクニックで、配色などすべて編集可能な点もポイントです。

 

 

 

こちらもキラキラ感あふれるリアルさが特長の黄金テキストエフェクトと一緒に活用してみてはいかがでしょう。

 

https://photoshopvip.net/128377

 

 

デザインの完成予定

 

できあがりがこちら。同じ設定で文字テキストだけでなく、ロゴなどさまざまなデザインに適用することができます。

 

80s-chrome-text-effect-final

 

 

まずはフォトショップを開き、新しいドキュメントを作成しましょう。カラーモードは「RGBカラー 16bit」とすることで、よりなめらかなグラデーションを表現できます。今回は、3840x2160pxの4Kサイズで作成していきます。

 

80s-chrome-text-effect-step1

 

 

メインメニューより「文字ツールT」を選択し、お好みのフォントを使って文字を入力します。

 

今回利用したフォントは Blood SeekerMontserrat を利用、どちらも無料ダウンロードできます。

 

80s-chrome-text-effect-step2

 

 

 

グラデーション・テキストエフェクトをつくろう

 

光沢クロムエフェクトの前にグラデーションをつかったテキストエフェクトを作成しましょう。

 

文字レイヤーを選択したら、レイヤーパネルの右下より「レイヤースタイルを追加」>「グラデーションオーバーレイ」を開き、以下のように設定します。グラデーションカラーは「ピンク色(#f000ff)」と「むらさき色(#a82cff)」。

 

80s-chrome-text-effect-step3

 

 

続けて「光彩(外側)」を以下のように設定しましょう。描画カラーには「むらさき色(#cb2dff)」を利用しています。4Kサイズなのでサイズも「50px」と大きめです。

 

80s-chrome-text-effect-step4

 

 

さいごに「ドロップシャドウ」タブをクリックし、以下のように設定したらこちらのテキストエフェクトは完成です。

 

80s-chrome-text-effect-step5

 

 

できあがりがこんな感じ、サイバーパンクのような仕上がりを目指しています。

 

80s-chrome-text-effect-step6

 

 

光沢感たっぷりなクロム合金エフェクトをつくろう

 

今回のメインとなるクロム合金エフェクトを作成していきましょう。まずはテキストレイヤーを選択し、「プロパティパネル」より文字カラーを「50%グレー(HSB 0,0,50)」としましょう。

 

 

 

文字レイヤーをダブルクリックでレイヤースタイルパネルを開いたら、「ベベルとエンボス」タブを開き、以下のように設定していきます。「深さ 1000%」でマックスまで上げています。「包括光源を使用」にもチェックを入れましょう。

 

80s-chrome-text-effect-step8

 

 

続いて「ベベルとエンボス」内の「輪郭」タブをクリックし、「範囲 0%」としたら、一度OKボタンをクリック。

 

80s-chrome-text-effect-step9

 

 

ポイントその1。レイヤーパネル上で文字レイヤーを右下のフォルダアイコンまでドラッグし、グループ化しておきましょう。こうすることで、文字レイヤーとは別にフォルダにレイヤースタイルを適用できるようになります。後ほど詳しく。

 

80s-chrome-text-effect-step10

 

 

新しいレイヤーを作成(Command/Ctrl+Shift+N)したら、グループの上に配置しましょう。

 

一度Dをクリックし描画カラーを「黒白」に初期化したら、ツールバーより「グラデーションツールG」をえらび、文字テキストよりやや広いくらいの幅で下から上にグラデーションを適用します。

 

レイヤーパネル上でOption/Altキーを押しながら、グラデーションレイヤーとグループフォルダの間をクリック。これでクリッピングマスクが適用され、文字テキストにのみグラデーションがかかるように。グラデーションレイヤーの描画モードを「オーバーレイ」とし「不透明度 50%」とします。

 

 

 

参照元リンクよりPhotoshop用グラデーションファイル(.GRD)をダウンロードし、ファイルをダブルクリックで読み込んでおきましょう。

 

このチュートリアル最大のポイント。レイヤーパネル右下より「調整レイヤーを新規作成」>「グラデーションマップ」を選択したら、プロパティパネルより先ほど読み込んだグラデーション「Textureslab 80sChrome」よりお好みのカラーリングを選びます。どれもレトロな配色が素敵なグラデーションですよ。

 

 

 

文字レイヤーに戻り、「効果」をダブルクリックし再度レイヤーパネルを開いたら、「シャドウ(内側)」を新しく追加、設定しましょう。

 

「サイズ」を変更することでグラデーションカラーがぐにゃりと反射したようなリアル感を調整できます。

 

 

 

ここでは「距離 0」「チョーク 0」「サイズ 75」としています。 不透明度は「25%」。

 

80s-chrome-text-effect-step14

 

 

続けて「境界線」。塗りつぶしタイプは「グラデーション」とし、黒から白そして黒のシンプルなグラデーション。「スタイル」は「シェイプバースト」で設定。「オーバープリント」にチェックを入れるのもお忘れなく。

 

80s-chrome-text-effect-step15

 

 

角ばっていたエンボス加工がよりリアルな仕上がりとなりました。

 

80s-chrome-text-effect-step16

 

 

グループレイヤーを選択したら、レイヤーパネルの右下より「レイヤースタイルを追加」>「光彩(外側)」を選択したら、描画モード「スクリーン」、「不透明度 25%」、カラー「パステルブルー(#495192)」、エレメントの「サイズ 120px」としたらOK。

 

 

 

ベベルとエンボス」を以下のように設定していきます。「構造」セクションでは「深さ 100%」、「サイズ 15px」。「陰影」セクションでは「包括光源を使用」のチェックを外し、「ハイライトのモード」を「覆い焼き(リニア) – 加算」とし「不透明度 70%」、「シャドウのモード」を「乗算」の「不透明度 50%」としています。

 

「光沢輪郭」をダブルクリックで「輪郭エディター」を開き、カスタムしましょう。ポイントは左端を右上めいっぱい「入力 0%」「出力 100%」とし、右端は「入力 100%」「出力 99%」とするのがポイント。

 

80s-chrome-text-effect-step19

 

 

輪郭」タブもクリックし、「範囲 0%」で「輪郭」をこちらもカスタムしましょう。左端を「入力 98%」「出力 0%」、右端を「入力 100%」「出力 100%」としましょう。

 

80s-chrome-text-effect-step18

 

 

「ベベルとエンボス」を適用したことで、文字レイヤーのエッジにハイライトが加わることでよりくっきりとした印象に。

 

 

 

グラデーションレイヤーを選択してからレイヤーパネル右下より「新規レイヤーを作成」をすることで、クリッピングマスクを適用した状態でレイヤーを作成できます。

 

メインメニューより「フィルタ」>「描画」>「雲模様1」フィルタを適用。再度「フィルタ」より「ぼかし」>「ぼかし(ガウス)」を選んだら、「半径 20px」でOK。レイヤーの描画モードを「オーバーレイ」とし、「不透明度 5%」としましょう。文字テキスト全体に質感をプラスできました。

 

 

 

キラキラ感をアップするボーナス小技

 

光沢感のあるクロム合金エフェクトはこれで完成ですが、よりキラキラ度を上げる手軽なテクニックをご紹介。

 

参照元リンクよりテクスチャ LensFX 139 をダウンロード。そのままカンバスに配置しましょう。

 

80s-chrome-text-effect-step22

 

 

Shiftキーを押しながらお好みのサイズに変更し、グラデーションの境目に配置。レイヤーの描画モードを「スクリーン」とすることで、背景が消え光のフレアのみに。

 

そのままのカラーリングでも良いですが、今回はCommand/Ctrl+Uで「色相・彩度」パネルを開き、「色相 -134」でやや青っぽい光に変更しましょう。

 

Command/Ctrl+Jでレイヤーを複製したら、1文字ずつフレアを加えていきましょう。

 

 

 

もうひとつの光フレアテクスチャ LensFX 165 もダウンロードし、キラリとした輝きを加えていきます。

 

80s-chrome-text-effect-step24

 

 

先ほどと同じ要領でサイズ変更したら、文字の端となるエッジ部分にそれぞれお好みで配置しましょう。こちらもレイヤーの「描画モード」は「スクリーン」とします。

 

 

 

最終段階ですが、「グラデーションマップ」レイヤーをクリックすればいつでもカラーリングを変更できるのは嬉しいポイント。

 

 

 

最後にテクスチャ Sky 145 をレイヤーの一番下に配置し、宇宙空間をデザインします。

 

 

 

Camera Raw フィルターでさらに質感をアップ

 

レイヤーパネル上で一番上にあるレイヤーを選択したら、Command/Ctrl+Option/Alt+Shift+Eで「すべてのレイヤーを結合」し、一枚の画像ファイルを用意しておきましょう。

 

メインメニューより「フィルター」>「Camera Raw フィルター」を選択したら、「基本補正」より「かすみの除去 +15」「自然な彩度 +15」、「効果」より「粒子 30」「サイズ 60」「粗さ 60」で完成です。

 

 

 

完成

 

できあがりがこちら。光沢感たっぷりなクロム合金エフェクトの完成です。

 

80s-chrome-text-effect-step28

 

 

文字テキストだけでなく、ロゴなどの図形シェイプにも応用できるテクニックで、4Kサイズで見事なリアル感を演出できました。

 

80s-chrome-text-effect-step29

 

 

このエフェクトの最大のポイントが、あとから自由にカラーリングを変更できる点です。お好みの配色に仕上げてみましょう。

 

 

 

より手軽にクロム合金エフェクトを適用したいひとは、以下のレイヤースタイル集を活用してみましょう。クリックひとつで完成の80年代風クロムエフェクトを作成できますよ。

 

80s Text Effects

80年代風のレトロフューチャーなテキストエフェクト10種類が揃った素材集。文字テキストを編集するだけでオリジナルデザインに仕上げることが可能です。

 

 

80s Text and Logo Effects Vol.3

シンプルなロゴや文字テキストをクリックひとつで、80年代風のクロームやネオンエフェクトにできる10種類のユニークなスタイルが収録。某有名映画のパロディロゴも。

 

 

Hype – Neon Chrome Effect

鮮やかなネオンクロームエフェクトが特長で、七色に輝くトレンドを押さえた素材集。PSDファイルと20種類のユニークなグラデーションマップをセットでどうぞ。

 

 

参照元リンク : 80s Ultra Chrome Effect | Photoshop Tutorial – Texturelabs.org

【フォトショップ】メタリック&光沢感!80年代クロム合金エフェクトのつくり方PhotoshopVIPで公開された投稿です。

【フォトショップ】パターンプレビューで繰り返しパターンを一瞬で作成する方法

$
0
0

 

この記事では、フォトショップのパターンプレビュー機能をつかった継ぎ目のないパターンテクスチャを素早く作成する方法をご紹介します。

 

パターンプレビューを使用することで、シームレスに繰り返されるパターンをリアルタイムで視覚化し、作成を手助けしてくれます。

 

 

 

ここでは、パターンプレビュー機能の使い方を詳しくみていきましょう。

 

 

パターンプレビューによる継ぎ目のないパターンの作り方

 

まずはフォトショップを開き、新しいドキュメントを作成しましょう。今回は、1000x1000pxの正方形としていますが、縦横の長さが異なる長方形でも問題ありません。

 

 

 

パターンプレビューを有効にするには、メインメニューより「表示」>「パターンプレビュー」にチェックを入れるだけ。ポップアップが表示されますが、OKで進みましょう。

 

 

 

すると青い枠が表示され、ドキュメント全体がカンバス同様、白に塗りつぶされた状態となりました。

 

 

 

メインメニューより「文字ツールT」を選択し、お好みのフォントを使って文字を入力します。ここでは、Summer Loving Font Collectionを使用。

 

テキスト入力後に少しだけズームアウトしてみると、入力したテキストが繰り返し表示されているのがわかります。

 

テキストの動きに合わせて、全体も移動しています。

 

 

 

次にいくつかのイラストも追加してみましょう。今回は、Heritage Typeより無料のヴィンテージイラストをピックアップ。

 

https://photoshopvip.net/129596

 

ドラッグ&ドロップでイラストを読み込みます。こうすることで各パーツをスマートオブジェクトに自動で変換してくれ便利ですよ。

 

あとはお好みの場所に配置、回転、サイズ変更を行うだけで、シームレスで継ぎ目のないパターンを視覚化し、リアルタイムでの確認が可能となります。

 

 

 

作成したパターンを保存するには、「パターン」パネル(表示されていないときは「ウィンドウ」>「パターン」)の右下にある+アイコンをクリック、パターン名を入力すれば完了です。

 

 

 

完成したシームレスパターンがこちら、見事に継ぎ目のないデザインに仕上がっています。

 

 

 

パターンプレビューを有効にすれば、いつでもパーツの追加や編集を行うこともできます。

 

 

 

以前はプラグインでの提供でしたが、2020年のアップデートで標準機能として搭載されたパターンプレビュー。

 

ファッション向けの生地パターンやインテリアの壁紙、デスクトップのスクリーン壁紙などクリエイティブな使いみちがたくさんありそうな便利なフォトショップの機能ですね。

 

【フォトショップ】パターンプレビューで繰り返しパターンを一瞬で作成する方法PhotoshopVIPで公開された投稿です。

【フォトショップ】こすって完成!圧倒的な「ぼかし」をデザインする簡単テクニック

$
0
0

このチュートリアルは、Texturelabsによる英語版オリジナルチュートリアル「Extreme Blur Effect」をアレンジしたものとなります。

 

この記事では、フォトショップで圧倒的な「ぼかし」具合をデザインする超簡単なテクニックをご紹介します。

 

たったひとつのツールを利用するだけで、手軽にぼかしエフェクトを楽しむことができます。

 

これまでに紹介した「かすれ」と「にじみ」エフェクトと一緒に活用したい、三大基本テクニックのひとつです。

 

 

 

こすって完成!圧倒的な「ぼかし」をデザインする方法

 

まずはフォトショップを開き、新しいドキュメントを作成しましょう。カラーモードは「RGBカラー 8bit」、カンバスサイズは1920x1280pxで作成していきます。

 

 

 

ツールボックスより「文字ツールT」を選択したら、お好みのフォントをつかって描画色「白(#ffffff)」で文字テキストを入力しましょう。

 

今回利用したフォントは The Big Tickleですが、どんな書体でも特に問題ありません。ロゴなどの図形シェイプにも応用可能です。

 

 

 

このぼかしエフェクトの注意点として、文字レイヤーはそのままエフェクトを適用できないため、ラスタライズしておきましょう。

 

背景透明で、文字レイヤーのみをラスタライズしても良いのですが、今回は最後にワンスパイス加えるために、Shift+Command/Ctrl+Option/Alt+Eで、表示しているレイヤーを新しいレイヤー上に結合。

 

 

 

ツールバーより「ぼかしツール」を選択したら、オプションバーよりストロークの強さを「50%」に設定しましょう。利用するブラシは非標準の「ソフトブラシ 300px」としています。

 

 

 

このぼかしエフェクト、最大のポイントがここ。ぼかしを加えたいエリアを、ぼかしツールで軽くゴシゴシこすってみましょう。たったこれだけで、見事に「ぼかし」を表現することができました。位置をあまり変えずにこするのが、うまく仕上がるコツ。

 

 

 

ぼかしツールのブラシサイズを「400px」と変更したら、今後はデザイン全体を少しだけこすることで、複数の異なる「ぼかし」の重なりによって、より自然な仕上がりに調整できます。

 

 

 

このテクニックの優れたポイントのひとつが、テクスチャを自由に追加でき、さまざまな質感を手軽にデザインに活用できる点です。

 

あらかじめ参照元リンクよりダウンロードしておいたテクスチャPaper 170をカンバスの一番上に配置し、レイヤーの描画モードを「ハードライト」に変更。

 

さらにもう一枚、紙テクスチャPaper 176をもう一枚のテクスチャに重ねるように配置し、こちらのレイヤー描画モードは「スクリーン」としたら、ぼかしエフェクトの完成です。

 

 

 

 

完成がこちら

 

できあがりがこちら。たったひとつのツール、「ぼかしツール」で軽くこするだけで、自然な「ぼかし」エフェクトを作成することができました。

 

 

 

もちろん日本語フォントやロゴなどにも応用できるテクニックとなっています。

 

 

 

「ぼかし」、「かすれ」、「にじみ」といった3つの基本テクニックは、覚えておくとデザインの幅が広がりますよ。

 

https://photoshopvip.net/128835

https://photoshopvip.net/128874

https://photoshopvip.net/129630

 

【フォトショップ】こすって完成!圧倒的な「ぼかし」をデザインする簡単テクニックPhotoshopVIPで公開された投稿です。

Viewing all 160 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>