【爆速】Photoshopで作る湯気の作り方

Photoshop 湯気 作り方

みるだけでよだれが滴るおいしい料理写真をつくるよ。

言うまでもないことだけどさ、おいしい料理といえば、あつあつ感。
あつあつ感に必要なのは湯気。
WEB業界的には「湯気つけときゃうまそうに見える」っていう都市伝説があるよ。

今回は料理写真をおいしく見せるために、Photoshopで作る湯気の作り方を紹介するよ。
さらに今回は、アクション機能を使って、2回目以降から文字通り一瞬で湯気がつけられるようにするよ。

今回の記事では、この見るからにおいしそうな画像に湯気をつけてこのように加工するよ。

Photoshop 湯気 作り方

この画像はゆん無料壁紙画像集様からお借りしています。ありがとうございます。

料理をおいしく見せる湯気の作り方

Step1.加工したい画像を開く

Photoshop 湯気 作り方

加工したい画像をPhotoshopで開きます。

Step2.湯気を作る

このStep2をアクションに保存しておくと、次回から一瞬で湯気を制作することが出来ます。
よく湯気をつける方はアクションに保存しておくと作業時間の短縮に繋がると思います。

1.新規レイヤーを作り、描画モードをスクリーンに

Photoshop 湯気 作り方

新規レイヤーを作り、描画モードをスクリーンに設定します。

2.描画色リセットする

Photoshop 湯気 作り方

ショートカットキーのDを押して、描画色を黒色に、背景色を白色にします。

3.新規レイヤーに対し、フィルター雲模様1を適応

Photoshop 湯気 作り方

先ほど作った新規レイヤーを選択し、上のメニューから[フィルター]>[描画]>[雲模様1]を選択し雲模様1を適用します。

Photoshop 湯気 作り方

適応が成功するとこのようになります。

黒色の上に白色の雲ができている場合、レイヤーの描画モードがスクリーンになっていない可能性があります。
また、まれに雲模様が適応されないことがありますので、その場合はPhotoshopを再起動してもう一度試してみてください。

4.雲模様1をゆらがせる

Photoshop 湯気 作り方

実際の湯気はゆらいでいるため、先ほどの雲模様1をゆらがせるために、[フィルター]>[変形]>[波形]を選択します。

値を画像のように設定し、OKを押します。
ここの値は、ある程度自由に調整しても大丈夫です。ここでは、波形:5 波長:最小100 最大400 振幅:最小10 最大80と設定しました。

5.完成

Photoshop 湯気 作り方

これで湯気レイヤーは完成しました。雲模様が揺らいでいる感じがわかると思います。
Step3でこの湯気を画像になじませていきます。

アクションに保存している方は、ここでアクションの保存を止めて下さい。
これでアクションを再生すると、一瞬で湯気レイヤーが作成されるはずです。

Step3.湯気を画像になじませる

1.なげなわツールを選択する

Photoshop 湯気 作り方

Lを押して、なげなわツールを選択します。

なげなわツールのぼかしを20pxに設定します。

2.湯気を出したい範囲をなげなわツールで選択する

Photoshop 湯気 作り方

こんな感じで湯気を出したい範囲をフリーハンドで選択します。今回はこんな感じに選択しました。

3.マスクをかけて、なじませる

Photoshop 湯気 作り方

湯気を出したい範囲を選択した状態で、画像の赤枠部分をクリックすると、選択範囲以外の湯気が消えます。

そのままだと、少し湯気が強すぎるので不透明度をいじって調整します。今回は50%の不透明度に設定しています。

完成

Photoshop 湯気 作り方

おつかれさまです!完成です。

湯気レイヤーをアクションに登録しておくと、実際に自分で行う作業が、なげなわツールを使って選択範囲を作り、マスクするだけになるので、かなりオススメです。

短時間で出来る上にかなりクオリティが高いので、個人的にずっと使っているテクニックです。是非試してみてください。

Photoshopでチョーク風にイラストやフォントを加工する

kyatti

先日チョーク風なテイストで作る方法を調べて、色々試していました。

以外とベストなやり方を探るのに時間がかかったので、メモとして書き残しておきます。


やり方はとても簡単で、ダウンロードしたPSDの中にある、チョークセットのレイヤースタイルをチョーク風にしたいレイヤーにコピーするだけです。

色を変える場合はレンズフィルターで設定すれば色が変わります。

チョーク 加工 photoshop イラスト テキスト


チョーク風に加工するだけでも、かなり見栄えがよくなるので、画がしまらない時にお世話になります…(笑)
ほら世界地図だけなのに…以外と…

ライセンス的に商用利用も可能でとても助かるのでダウンロードしておくといざというときに助かるかもしれません!

新しいデザインのツイッターボタンPSDを配布します!

kyatti


Twitter社がツイートボタンのデザインの変更を発表しました。

2015年11月20日までに変更を完了すると宣言した通り、現在ほとんどのツイートボタンが新しいデザインになっています。

新 デザイン ツイッター ボタン 素材 フリー


このように新しいツイートボタンのデザインは、以前よりフラットなテイストになり洗練された感じのデザインに仕上がっています。
ついでに以前あったカウント表示もなくなっています。

新しいツイッターボタンのPSD素材

新 デザイン ツイッター ボタン 素材 フリー

おそらく今後何度も使うことになるので、せっせと作りました。
全てシェイプで作ってあるので、拡大にも対応してます!文字数が増えてもあんしん!

せっかく作ったのでそのまま公開します!ご自由にご利用下さい。

ダウンロードはこちら

PSD内に入っている素材は5つあり、詳細はこちらです。

  • ツイートボタン
  • フォローボタン
  • ハッシュタグツイートボタン
  • リプライツイートボタン
  • 英語版ツイートボタン

この素材について
※ ツイートボタンを表示するデバイスによって見え方が違う為、イメージと若干異なる場合があります。
今回はChrome/Macの環境の見え方に合わせました。

※ 使用報告や、バックリンク等は必要ありません。
※ 再配布はご遠慮ください
※ この素材を利用して起こった問題についての責任は一切受けられません。

バナーを作る際の注意点をまとめてみた!

kyatti

GDNバナーを入稿して、掲載されたと報告があるとバナーをおいているサイトで更新ボタンを連打して確認してます。
自分が作ったものじゃないバナーとか見るのかなり好きです。

GDN バナー 注意点

あぁ^〜かわ、、

…ん?

GDN バナー 注意点

なんか右上にひっついてる…?

そう、これGoogleが広告の表示位置が適切かどうかを報告するやつ(だったはず)
出てくるときがあったり、出てこない時があったり。

このGoogleのユーザーに親切な機能は、結構バナー製作時の伏兵になりがち。

最近これのせいで企業ロゴとか指さし文が隠れているバナーをよく見かけます。注意

右上の横31px縦15pxは危険地帯です。
なるたけ左上に大事なものを置かないレイアウトを心がけるようにいたしたほうが無難です。(戒め)

GDN バナー 注意点

このバナーなんかは企業ロゴの位置をずらすことで、企業ロゴが隠れてしまうことを防いでいます。ワザマエ!

あと…細長いサイズのバナーでもなんでも…。出てくるんやで…。事前の確認が大事や…。

GDNバナーだけではない…。

そう、GDNバナーだけでなく、他のバナーでも同じようなマークが出てきます。闇は深い。
入稿先を確認して、どのくらいの大きさのものが出てくるのか確認しておいたほうがいいと思います。…思います。

GDN バナー 注意点

左:microad 右:freakout

【一例】
MicroAdは右上横19px縦15px
freakoutはGoogleと同じ横31px縦15px

しかし右のバナーにいるOZPAさん、ほんとどこでも見かけるな..。最近現実世界でもPOPとかで出会うことが増えてきました。

しかも出演している内容が大体ゲスいものか、おとく!!!みたいな感じで、OZPAさんを知らない人は多分きっとOZPAさんが裏世界を牛耳る何かかと勘違いしてる人がいそうでいなさそうで。

※OZPAさんはWEBデザイナーの方です。社会人ブロガーで独特の言い回しが面白いブログやっていらっしゃる方です。

バナーに入れる要素的なおはなし

ABテストを繰り返した結果、要素を増やし過ぎるとクリック率下がりました。
なので、今はシンプルで訴求したい事を一つにしたバナーを複数作っていくつか入稿したりしています。

よく言われていることですが、伝えたいことをひとつに絞って構成したほうが良いです。

よくあるのが、これとあれとそれもお得!全部入れよう。キャッチコピーも入れよう。って構成。

やめよう。誰も幸せになれないから…。やめて…。

バナーを作る際の注意点まとめ

  • バナーを作るときは、右上に出てくるやつに気をつけよう
  • 入れたい要素増やし過ぎると制作側もつらいしクリック率も下がるからやめようください(血涙)

ここまで書いておいて、ずっと右上って書かなきゃいけないところ、全部左上って書いていた..。これはつかれてますね(白目)

しかし今日ふんばればおやすみだーーーーーー!!!!!

みなさんも踏ん張って良い週末を!!!

Photoshopで全ての階層のレイヤーフォルダを閉じる方法

photoshop レイヤー フォルダ 閉じる 全て

デザイナーはレイヤー構造の見栄えを良くするためについレイヤーをフォルダーで囲いまくる癖がある。

私だ。

見栄えをよくするためにわざわざ囲っているので、コーダーさんにデザインデーターを渡すときには、主に見栄のためにフォルダーを全て閉じて完璧な状態でPSDデータを渡したい。

レイヤーを一括で閉じるショートカットとしてよく取り上げられている、⌘commandを押しながらレイヤーフォルダの隣にある▶を押すというやり方では、同じ階層のフォルダしか閉じてくれない

もし下層に閉じていないフォルダがあったとしても、それを閉じずに指定した階層のフォルダのみ閉じられる。

するとコーダーさん及び第三者が閉まっているフォルダを開けてしまうと、しまってるフォルダとしまっていないフォルダが混在した大変見にくいレイヤー構造になってしまう。

これは見栄っぱりとしては由々しき問題であるため、他のやり方はないのかとちまちまと試してみた。

下の階層のフォルダを含め全てのレイヤー構造のフォルダを閉じる方法

photoshop レイヤー フォルダ 閉じる 全て

⌘command+alt+一番上の階層のフォルダの隣にある▶のマークをクリックする

これだけ!

かなり簡単である。これだけで少しやり遂げた感が生まれるはずだ。

臭いものにフタをするようなグループは、ありがちだけれども修正作業で死ぬので自分のためにも直しておこう(戒め)

Photoshop等でテキスト修正を劇的にラクにする!検索と置換機能

Photoshop WEBデザイン 効率化

こんにちは!YOUKNOWです。

前回の記事ではライブラリを紹介しました!
何か他にもっと便利な機能がないか、もう一度色々見直してきました。

その中で最近の業務でかなり役立った機能検索と置換機能をご紹介します。

この機能は制作業務でありがちな文言の修正を劇的に楽にする機能です。

▶ 機能のやり方と説明だけを見たい方はこちら

制作業務で頻発する文字修正

ひとたび行えばまたひとたび。修正界の不死鳥のような存在…。

我ら制作班は文字修正に怯えながら暮らす。何ページにも及ぶカンプ制作だった場合は終電の命がなくなる

特にやばいのは走れメロスのメロスをメロウに変更する系の文字修正だと、クライアントの皆様方にはここで声を大にして述べておきたい。

今回はそんな悲惨な修正をちょろい修正に変える神機能の紹介です。

Photoshop Illustrator等で一斉に文言修正を行える 検索と置換 機能

検索と置換機能は、検索する文字を指定し、その文字と一致しているテキストを全て置き換えることができる機能です。

例えば、走れメロスの場合、検索文字を「メロス」に置き換え文字を「メロウ」にすると走れメロウとなります。
メロスという単語が複数あった場合、メロスという単語が全てメロウに変わる機能です。

検索と置換機能の使い方

さすがに標準搭載されている機能だけあって、使い方も簡単。

Photoshop illustrator 文字 置換 検索

PhotoshopやIllustrator等、機能を使いたいAdobe系アプリケーションメニューから編集 > 検索/置換を選択します。

Photoshop illustrator 文字 置換 検索

すると検索文字と置換文字を入力するウィンドウが出てくるので、これらを入力し、全てを置換を選択すると、指定した検索文字が全て置き換わります。

おわりに

知らないだけで便利な機能って結構あるんですね。
ちょっと前までこの機能無しで文言修正を行ってました\(^o^)/

CC2014で新しく追加された「ライブラリ」が超便利だった

Photoshop 便利 パーツ ライブラリ

こんにちは!YOUKNOWです!

今までWEBサイトデザインの制作効率化の為に、自分で作ったデザインパーツや商用素材などをストックするPSDを作っていました。

Photoshop 便利 パーツ ライブラリ

こんなかんじで一つのPSDにまとめてました

そんな中、Photoshopのスタイルをいじっていたらライブラリの存在に気づきました。

なんやこれ…。と思いながらも使ってみるとまあこれが便利便利!!

Adobe ライブラリとは?

Photoshop 便利 パーツ ライブラリ

作ったパーツなどをストックしておくことができるものがライブラリです。
追加したデザインパーツは、CleativeCloudで同期される為、追加したデザインパーツはPhotoshopやIllustratorで同じものを使用することが出来たり、他の端末でも同じパーツを使用することが出来ます。

なおこの機能はCC2014から使用することが出来ます。

ありがとう。Adobeさん

なんで俺この機能にもっと早く気づかなかったんだろうか…。
それくらいに便利です。これでもうパーツを保存しておくPSDが増えなくてすみます。

今回の記事はこのライブラリがすごいということをただただ書きなぐるだけの記事です。

Adobeライブラリのすごいとこ

ライブラリは即同期される

Illustratorで作ったこの素材をPhotoshopですぐに使いたいなぁという時。ライブラリに追加すればすぐにライブラリが同期されます。
その為、アドビ製品を行き来してデザイン制作しなくてはならない場面で非常に便利。

ライブラリは他人と共有することができる

Photoshop 便利 パーツ ライブラリ

そう、作ったパーツを他人と共有することが出来ます。
例えば会社であれば、汎用パーツを共有したりすることができると思います。

プロジェクトに応じて使う素材などが送られてきたら、このライブラリを使ってチームで共有すると捗ると思います。

ライブラリの追加がワンクリック

ライブラリウィンドウの左下のボタンを押すだけでライブラリの追加は完了している…。

ライブラリで管理できる種類が豊富

デザインパーツ以外もライブラリに保管することが出来ます。

  • カラー
  • カラーテーマ
  • スタイル
  • ブラシ
  • グラフィック(パーツ)

Adobe製品で作ったもののほとんどをライブラリに保存することが出来ます。やばい。

パーツの整理が可能

Photoshop 便利 パーツ ライブラリ

とはいえデザインパーツを入れ続けたら、だんだんどこに何があるかわかりづらくなってきます。
そういったことにならないように非常に整理しやすく作られています。最高。

サムネイル表示が優秀

Photoshop 便利 パーツ ライブラリ

Adobeライブラリの使い方

Photoshop 便利 パーツ ライブラリ

使い方を説明するまでもなく簡単な所もライブラリの良い所

Photoshopのメニューからウィンドウ > ライブラリでライブラリウィンドウが出てきます。

デザインパーツなどの追加方法

追加したいデザインパーツを選んで、ライブラリウィンドウの左下の丸と四角と三角が重なっているアイコンをクリックするだけ!

ライブラリに保存したパーツを使う方法

ドラッグ&ドロップ

便利なのでぜひ!!ぜひに!!一度試してみてください。

Photoshopでレイヤーを一つ一つ拡大してくれるスクリプト Transform Each

daqweq

こんにちは!制作効率はパワーだと考えるYOUKNOWです。
スクリプトをよく使うのでそのスクリプトをご紹介していこうかと思っています。

WEBデザインでありがちな修正として、これらのロゴ全部少し大きくして下さいとか、ここの詳しくはこちらの隣についてる矢印だけ大きくして下さいという指示あると思います。

拡大作業って一つなら手間じゃないんですが、複数個の拡大作業はかなり手間になります。

Photoshop スクリプト 拡大 transformEach

引用: Captainawesome様より

というのも全部を拡大しようとすると、選択したオブジェクト達の真ん中を基準として拡大処理を行うため、位置がズレズレになってしまう問題があります。
今回はこのような問題を解決してくれるスクリプトをご紹介します。

レイヤーの拡大を助けてくれるPhotoshopスクリプト Transform Each

Photoshop スクリプト 拡大 transformEach

引用: Captainawesome様より

Transform Eachはレイヤーの拡大・縮小を補助してくれるPhotoshopスクリプトです。
拡大・縮小以外にも、回転なども補助してくれます。

思ったより使うポイントが多いのがこのスクリプト。コレのお陰でかなり時間が短縮出来ています。

インストール

通常のPhotoshopスクリプトとかわりありません。

こちらのページのダウンロードボタンから[KAM]Transform Each.jsxをダウンロード

ダウンロード完了したら、以下の場所にダウンロードした.jsxを保存します。

Windows : C:/Program Files/Adobe/Adobe Photoshop/Presets/Scripts
Mac : Application/Photoshop/Presets/Scripts/

上記の場所にjsxファイルをおいたらPhotoshopを起動し、(すでに起動してある場合は再起動)、Photoshopのメニューから
ファイル > スクリプトの中に入れたスクリプトの名前があればインストール完了です。

必要環境

Adobe Photoshop CS5, CS6, CC2014 , CC2015

使い方

処理を行いたいレイヤー達を選択し、ファイル > スクリプト > [KAM]Transform Eachを選択しスクリプトを起動します。

Photoshop スクリプト 拡大 transformEach

あとは行いたい操作に合わせてパラメータをいじるだけです。

Photoshop スクリプト 拡大 transformEach 日本語

複数のバナー画像制作に、Photoshopのアートボードが大変捗った話

Photoshop WEBデザイン 効率化

こんにちは!YOUKNOWです。

お仕事でよくバナーを作る機会があるんですが、ふと思い立ってPhotoshopの2015で追加されたアートボードを利用して作ってみました。

バナーってGoogleのバナーだったりYahooのバナーだったりうんちゃらかんちゃらで結構な個数を作ることが多いんじゃないでしょうか。

加えてやっぱり修正も多く発生しがちですよね。
数が多いとその分だけ修正の手間も増えてきます。
その度に書き出しを行うのだけでも以外と時間がかかってしまったり…

Photoshopのアートボードツールを利用してバナーを作ったら修正にも対応しやすくなるし、書き出しもラクそうで良いのではないかと考えました。

結論からいうととてもラクで良い!大正解でした。

どうラクだったのかというと

  • スマートオブジェクトの更新がラク
  • パーツのコピーもラク
  • パーツをアートボード外にストックしておくことができる
  • 書き出しに手間がかからない

が大きかったなぁ…と。

Photoshopのアートボードがバナー制作で捗る点

スマートオブジェクトの更新がラク

Photoshop 2015 アートボード バナー

どうしても文字でこだわりたかった所や、小物の制作はIllustratorを使用して制作します。

それをスマートオブジェクトとしてPhotoshopに落としこむのですが、別のファイルでバナーを制作していると、こっちのバナーのスマートオブジェクトは更新されたが、こっちは更新されない…などの問題が発生します。

しかしアートボードで作る場合、同じPSDファイル内なので一つのスマートオブジェクトを更新すれば同じスマートオブジェクトは全て更新されます。

これで頻発する文言修正対応にも捗るってもんです。

パーツのコピーもラク

まだまだ便利さは続きます。

Yahooバナー GDPバナーなどの種類の豊富さに加え、サイズも豊富と来ているバナー達。

圧倒的数量でやってきます。けれども入れる要素は同じかつ、バナーをクリックして飛ぶ先も変わるわけではないので、同じパーツや賑やかしを使うことが多いです。

別のPSDファイルで制作していると、このパーツをこっちのPSDに持ってこよう..。Photoshopのウィンドウを調整して…こっちに持ってきて…ああ!このPSDも開かないと!

アートボードなら一発です。コピーしたいものを選んで、command+J で複製して移動ツールで移動するだけです。

アートボードの特性で、アートボードの上にあるパーツは自動的に適切なアートボードにレイヤーを移してくれるので、本当に移動するだけでOKです。素晴らしい

パーツをアートボード外にストックしておくことができる

例えば、そのバナーがシリーズものだった場合など、参考になりそうなものをおいておけば、作業が捗るでしょう。

パーツの一時退避としても使える子です。

書き出しに手間がかからない

全てのアートボードを一斉に書き出すことが出来ます。

command+alt+SHIFT+W

これで保存場所・保存形式を選ぶだけで全てのバナーが書き出されます。

まとめ

アートボードツールなかなかオススメです。

レイヤー名一斉変更できる Photoshop Scripts「FindAndReplace」

aikyatti

こんにちは!YOUKNOWです。

Photoshopのアセットなどでレイヤーの名前を変更する機会が増えたのではないでしょうか。

レイヤー名を一つ一つ変更するのはいくらなんでも手間すぎるので、レイヤー名を一括して変更できるスクリプトをご紹介します。

FindAndReplace

https://vimeo.com/112916307

FindAndReplaceは複数レイヤー名の置き換えや特定の文字列を削除・先頭や末尾に文字列を追加することができる無料のPhotoshop用スクリプトです。
(スクリプトは無料ですが、気に入ったら投げ銭をするフォームがあるので、投げ銭してみると良いと思います。)

特に最近では画像アセットなどで、書き出すレイヤーの後ろに.pngなどをつけることが増えてきたので、大変重宝すると思います。

FindAndReplaceができる事の一覧はこちら。

  • レイヤー名の検索・置き換え
  • レイヤー名の置き換え
  • レイヤー名の先頭に任意の文字列を追加
  • レイヤー名の末尾に任意の文字列を追加

FindAndReplaceのインストール方法

FindAndReplaceの配布元guchika.com様にアクセスし、記事内のダウンロードリンクからFindAndReplaceをダウンロードして下さい。

ダウンロードしたZipを解凍し、出てきたFindAndReplace.jsxをPhotoshopのスクリプトフォルダに入れて下さい。

Macの格納先

/Application/PhotoshopCC2014/Presets/Scripts/

Windowsの格納先

C:¥Program Files¥Adobe¥Adobe PhotoshopCC2014¥Presets¥Scripts

FindAndReplaceを入れた後はPhotoshopにスクリプトを認識させるためPhotoshopを再起動して下さい。

Photoshopを再起動し、メニュー > ファイル > スクリプトにFindAndReplaceがあればインストール成功です。

FindAndReplaceの使い方

名前を変更したいレイヤーを全て選び、メニュー > ファイル > スクリプト > FindAndReplaceを選択すると、ダイアログが開きます。

行いたい名前の変更に合わせてダイアログを操作します。

レイヤー名の先頭・末尾に任意の文字列を追加

レイヤー 変更 一括 スクリプト scripts

レイヤー名の先頭・末尾に文字列を追加する方法は、変更したいレイヤーを全て選択し、先頭・末尾に文字列を追加のダイアログボックスを選択し追加したい文字列を入力すればOK

レイヤー 変更 一括 スクリプト scripts

レイヤー名の一部を置き換える

レイヤー 変更 一括 スクリプト scripts

レイヤー名の一部を置き換えたい場合のやり方です。

今回は例として、 bnr_1.png > btn_1.png へとレイヤーを変更しています。

bnrの部分を変更したいので、検索文字にbnrを入力し、置換を選択し、置換文字にbtnと入力することで、完了です。

レイヤー 変更 一括 スクリプト scripts

まとめ

レイヤー名の変更を一括で行う機能は非常によく使うので、このスクリプトには大変お世話になっています。

あまりによく使うので、毎回メニュー > ファイル > スクリプト > FindAndReplaceで選択するのは大変なので、ショートカットキーに追加してすぐ使えるようにしています。

便利なのでぜひ使ってみてくださいな。