【爆速】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 湯気 作り方

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

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

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

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

kyatti


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

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

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


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

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

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

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

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

ダウンロードはこちら

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

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

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

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

Adobe MAX 2015をまとめてみた

AdobeMax 2015 まとめ

こんにちは! YOUKNOWです。
Adobe Max 2015で発表されたことを個人的にまとめました!
ざっと確認したい人向けになっていると思います。

今回の発表はかなりボリューミーな感じになっています。

ちなみにこのAdobe MAXは日本のAdobe社員さんが10月6日(火)21時に解説してくれるそうです。
より詳しく知りたい方は下のリンクからどうぞ!

また、こちらから英語版ですが、講演を見直すことが出来ます。

Adobe MAX 2015 まとめ

AdobeMax 2015 まとめ

今回のAdobe Maxはアプリケーションやデバイスの連携がテーマで、
どこでどんなデバイスを利用しても作業ができるようにしていく。とのことでした。

ソフト・デバイス間の連携を強化!「Creative SYNC」

AdobeMax 2015 まとめ

デバイス問わず、アセットやTypeKitが利用できるようになりました。

アプリケーション間の連携がより強力になり、より効率的な制作が行えるようになります。
Adobe MAXのデモでは例としてヨガスタジオのデザインを作りながら説明してくれました。

AdobeMax 2015 まとめ

Adobe Stockでヨガの画像を検索、プレビューのボタンを押すだけで、すぐに画像のデーターがライブラリに追加され、各種Adobe製品で利用可能になります。

ライブラリについてはこちら

パターンが一瞬で制作できる!「Adobe Capture」

AdobeMax 2015 まとめ

Color、Shape、Brush、Hueが統合された、新アプリAdobe Capture CCが発表されました。

似たようなアプリが統合されて、若干わかりやすくなりました。

AdobeMax 2015 まとめ

新機能のPatternはカメラを向けるだけで、テクスチャ画像を制作してくれます。
デモではホテルから持ってきた花にカメラを向けていました。

もちろんCapture CCで制作した素材は、ライブラリを介する事で各種Adobeソフトでも利用することが出来ます。

TypeKitにモリサワフォント20種類が追加

AdobeMax 2015 TypeKit モリサワ

有名なモリサワフォントからフォントが20種類追加されました!

追加された書体はこちらです。

モリサワフォント

  • 太ミン
  • 太ゴ
  • 中ゴシック
  • じゅん
  • 見出ゴ
  • 見出ミン
  • 黎ミン
  • リュウミン
  • 新ゴ
  • 新丸ゴ

TypeBankフォント

  • サン
  • 漢字タイポス415
  • ぷらっしゅ
  • 日活正楷書体
  • カリグラゴシック
  • ちび丸ゴシックPlusK
  • 新聞ゴシック
  • シネマ丸ゴシック
  • 新聞明朝

CreativeCloudの契約ではTypeKitのプランの「ポートフォリオ」プランと同じ扱いを受けられるため、これらのフォントも利用することが出来ます。

ただし、今回追加されたフォントたちは各フォント1ウェイトずつしか利用できないという欠点も存在します…。

パフォーマンスが劇的にあがった! 「Illustrator CC」

AdobeMax 2015 illustrator

以前より10倍早く、64000%まで拡大ができるようになりました。

タッチで快適な操作 「シェイパーツール」

AdobeMax 2015 illustrator シェイパーツール

ジェスチャーで図形を作ったり、形状の変化を行うことができるようになりました。

画像はフリーハンドで図形を書いています。フリーハンドで四角を書くと、自動的に綺麗な四角のシェイプに変換してくれます。

その他にもパスファインダーの適応や、図形の削除・変形を全てジェスチャーで行っていました。

AdobeMax 2015 illustrator シェイパーツール

ジェスチャーを利用して、シェイプからぽっぽが生まれました。

このジェスチャー操作は他のアプリケーションも利用することが出来ます。

レスポンシブ機能に対応! Adobe MUSE

レスポンシブWebデザインを作るためのEdge Reflow CCの機能が、MUSEにも追加されました。

自動でレスポンシブデザインに対応してくれるようになり、コーディング不要でWEBサイトとして公開が可能です。
この際ベクター素材はSVGに自動で変換されるという有能っぷり。

コードのキレイさとか(メンテナンス的に)こうしたいとか、そういう細かい所に気を使わなくてもいいものであれば、もうMUSEでも良いかもしれません。

WEBデザイナーの相棒 「Photoshop」

アートボードの強化

AdobeMax 2015 Photoshop アートボード

Photoshopにアートボードが追加されましたが、不満に感じていた人は多かったようで..。
今回はそんなアートボードがかなり強化されました。

アートボードにフィルタをつけられるようになり、例えばスマホのデザインのみ表示みたいな感じの事ができるようになりました。
またアートボード別にガイドがつくようになり、複製もボタン一つで行えるようになりました。

デモでアートボードを大量に開いていたものの、全く重くなかったので、パフォーマンスも改良されていると思われます。

アセットの強化

AdobeMax 2015 Photoshop

選択したレイヤーからアセットを書き出すことができる機能が追加されました。
コレ地味になくて不便だったんですよね。

また、スマートオブジェクトだけアセット抽出を行うなどの事もできるようになっています。

UI・UXを効率的にデザインできる新プロジェクト 「Comet」

AdobeMax 2015 comet

今はなきFireWorksの到達点…!?

Adobeさんにしては珍しいUI・UXデザイナー向けのデザインツールです。
非常に効率的にデザインを制作できるという特徴を持っています。

Cometは来年の頭にパブリックベータを行うようです

圧倒的な効率

びっくりしたのはその圧倒的なデザインの効率でした。Photoshopでも同じ事をやりたいと何度思ったことか…。

AdobeMax 2015 comet

ドラッグするだけで、デザインパターンの繰り返しを作ることが出来ます。

AdobeMax 2015 comet

一つの場所を変更するだけで、全ての箇所の変更が完了します。

もちろん隙間等も一つ変更するだけで、すべての変更が完了します。

AdobeMax 2015 comet

デザインパターンに複数の画像を追加した場合….

AdobeMax 2015 comet

きちんと全てのデザインパターンに違う画像を入れ込んでくれます。

AdobeMax 2015 comet

パフォーマンスも高く、これだけの数のアートボードを開いてもキビキビ動いていました。

AdobeMax 2015 comet

画面推移も簡単に作ることが出来、

AdobeMax 2015 comet

どのような感じになるか確認するためのデモも見ることが出来ます。

DreamWeaver

AdobeMax 2015 dreamweaver

DreamWeaverの方はAdobeさんの公式ブログさんのほうで詳しく書かれていましたので、引用させてもらいます。

もうすぐ公開されるDreamweaverのアップデートでは、CC Libraryが追加されて、PhotoshopやIllustratorといったデザインツールのデザインアセットを共有したり、Adobe Stockとの連携が可能になるようです。ライブラリ経由でIllustratorからSVGアセットを利用することも可能です。

Dreamweaver関連での注目は、来年公開される新バージョンでの、コードエディタの刷新が予告されたことです。基調講演では明らかにされませんでしたが、Dreamweaverチームのブログ記事によれば、新しいエディタはBracketsをベースにしたものになるようです。Bracketsでお馴染みのインラインエディタやSass/LessサポートなどがそのままDreamweaverでも使えるようになれば、開発ツールとしてのDreamweaverの使い勝手はずいぶん向上することでしょう。ベータ版の一般公開も検討されているようです。

まとめ

いかがでしたでしょうか。なかなかボリューミーな発表でしたけど、凄くアップデートが楽しみなAdobe MAXでした!

個人的にはCometが期待ですね。これでWEBデザインはできるのだろうか..?とか考えております。

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 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で選択するのは大変なので、ショートカットキーに追加してすぐ使えるようにしています。

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

【Photoshop】一括で複数のレイヤーの設定を変えることができるPhotoshopプラグイン【Ditto】

Ditto

以前紹介したPhotoshopプラグインのDittoですが、使ってみた感じが凄く良い感じなので再度ご紹介します。

というよりこれのお陰で修正時にかなり助けられたのでお礼を兼ねて再度…

Ditto

Dittoとは

DittoはPhothoshopの無料プラグイン。

レイヤーにIDを指定し、IDに対して一括で設定を適用するプラグインです。

WEBデザインでコーディングを行っている人にはわかりやすいかもしれません。
CSSのイメージです。

利用できる環境はPhotoshop CC2015からです。

設定できるパラメータ

  • 塗り
  • 文字列
  • 表示・非表示
  • フォントサイズ
  • フォントの種類
  • フォントの色
  • 行の高さ

Dittoのインストール方法

Dittoのインストール方法をご紹介します。
僕がMacを使用しているため、Macのインストール方法になっています。

ただ、Windowsでもほとんど同じ手順でインストールできると思います。

まず、こちらのページの下のほうにあるDownloadボタンをクリックして、Dittoをダウンロードして下さい。

ダウンロードしたzipを解凍すると以下のファイルが出てきます。

  • ASSETSフォルダ
  • installer.jsx
  • README.md

その中のinstaller.jsxとASSETSフォルダを、アプリケーション > Photoshop CC 2015 > Presets > Scriptsの中に入れます。

そしてPhotoshopを起動します。

Photoshop Ditto インストール やり方

Photoshopのメニューからファイル > スクリプト > installerを選択します。

するとダイアログが何度か出ますので、全てOKで進めます。

ダイアログがでなくなったら、Photoshopを再起動します。

再起動し、Photoshopのメニューからウィンドウ > エクステンション > DittoのDittoが表示されていれば成功です。DittoをクリックしてDittoを起動して下さい。

Dittoの使い方

かなり個人的な使い方になってしまいますが、いくつか使用例をご紹介します。

#mainColor #accsentColor 等のIDを指定し、メインカラーやアクセントカラー等の変更が入った時に塗りの色等を一斉に変更できるようにしています。

設定できるパラーメータは数あれど、正直使いこなしているのは塗りのパラメータとフォントサイズと行の高さです。
pc_fontSizeやsp_fontSize等のIDを作成し、pc_fontSizeには14px sp_fontSizeには24pxを設定するなど案件ごとにカスタマイズしています。

表示非表示は、ボタンの要素等のon_offに使えるかなぁといった感じです。

まとめ

無料なので一度試してみると良いと思います。
副産物としてレイヤーをキレイにする癖も身につくかもしれません

インデックス?? Photoshopの挙動がおかしいときに見直すべきモード

インデックス Photoshop おかしい

画像を新しく読み込んだときなどに、Photoshopがうまく動かないとき、ありませんか?
具体的にはうまく編集が行えないだとか…。

インデックス Photoshop おかしい

そんなときにレイヤーを見てみると、見慣れないインデックスというレイヤーの名前がついているインデックスモードになっている可能性が高いです。
今回はそんなインデックスモードを解除する方法をご紹介します。

Photoshopのインデックスモードを解除する方法

インデックス Photoshop おかしい

解除のやり方は簡単で、ツールバーからイメージ > モード > RGBカラーに変更するだけ!

変更が成功すると、レイヤー名のインデックスがいつも通りの背景という名前になっているはず!

【Photoshop】一括で複数のレイヤーの設定を変えることができるPhotoshopプラグイン【Ditto】

Ditto

こんにちは!YOUKNOWです。

便利そうなものを発見しました。

Dittoです。

Dittoとは?

DittoはPhothoshopの無料プラグイン。

レイヤーの後ろにHTMLのような#btnTextのようなIDが指定されています。
例えば#btnTextのIDの設定を変更すると、#btnTextと名前の付いているレイヤー全ての設定が変わるようです。(まだ未検証)

設定できるパラメータ

  • 塗り
  • テキスト
  • 表示・非表示
  • フォントサイズ
  • フォントの種類
  • フォントの色
  • 行の高さ

必要環境

PhotoshopCC2015 Mac / Windows

久しぶりにめっちゃ試してみたい…!と思うPhotoshopプラグインです。
少しの間使ってみて、めっちゃ便利だこれ!!となりましたら、再度記事にてご紹介したいと思います。