人物と背景を合成したい場合、予め人物の背景を透明にしたままでPNG画像保存をしておくことで、さまざまな別の背景画像に入れ替えることが可能になり、バリエーションを増やすことができます。 関連記事 ⇒ これさえ身につけてしまえば、ほぼ思い通りの作品が作れるようになるPhotoshopの切り取りテクニック。 しかし、背景の色によっては合成したい画像がうまくなじまず、”カスカス”してしまう部分が出てくることがあるので、ここではカスカスさせることなく、うまく背景になじませるテクニックを解説します。（動画は最下部です↓） Photoshopを使っている人であれば、ブログのヘッダーデザインをする際などに、かなり役立つテクニックなので覚えておいて損はないと思います。 背景が透明なPNG画像があるとバリエーションを作るのがとても簡単！例えば、このような白い背景のヘッダーデザインをしてみます。 背景が透明なP

Photoshopにおけるシェイプの結合やレイヤーの整列・分布を、Illustratorの「パスファインダーパネル」と「整列・分布パネル」と同じ感覚で実行できるエクステンションパネルです。「整列・分布パネル」には、カンバスに対する整列機能もあります。 更新履歴 2.1.7：2020に対応（2019.11.13）2.1.5：CC 2019に対応（2018.11.1）2.1.4：CC 2018に対応（2018.7.18）2.1.3：CC 2017に対応／UIアピアランス変更（2017.6.24）2.1.0：英語・ドイツ語に対応／シェイプコンポーネントに対応／拡張ボタン追加／Adobe Add-onsに登録（2015.11.12）2.0.1：CC 2015に対応（2015.10.20）2.0.0：CC 2014に対応した新バージョン公開（2014.07.29）1.0.1：取り消しの挙動を改善（2

WebサイトやアプリのUIデザイナー・デベロッパをはじめ、写真のレタッチ、イラストやお絵描きの塗りなどの作業効率がアップするPhotoshopのワークスペースを紹介します。 写真: Girly Drop ワークスペースの配置を決める最初のポイントは、ドキュメントを1つ or 2つにするのか、そして残りのスペースに必要なパネルを配置します。 よく使うパネルはドキュメントの近くで十分な大きさにし、不要なパネルは消し、たまに使うのはボタンにする、など自分にベストのワークスペースができると思います。 業種によってどのようなワークスペースを使っているか見てみましょう。 フロントエンド デザイナー向けワークスペース via: A Web Developer’s Guide to Photoshop 21:9くらいのモニターでないときついワークスペースですね。配置されているパネルは左列から順に。 ヒスト

Photoshopのデザインカンプ上で、スマートオブジェクトを50％以下に縮小しておき、画像アセット生成などで200％にして書き出す手法があります。スマホなどの高解像度ディスプレイ対策としては定番ですね。しかし、ある条件下では、元の画像を50％以下に縮小しているにも関わらず、書き出し後の200％画像がぼけてしまうことがあります。この点について気になったので、少し整理してみました。（2016.4.15／注意点を追記） 2016.4.15／注意点を追記スマートオブジェクトの特長スマートオブジェクトは、拡大、縮小を繰り返しても劣化しないというのが特長です。もちろん、オリジナルのサイズより大きくする場合は別ですが、いったん縮小してから再び拡大しても、その都度オリジナルからピクセルを生成しますので、常に最適な画質が保持されるというわけです。 スマートオブジェクト入門～直しに強いPhotoshopデー

自分が普段からどちらかといえばデザインよりもコーディングなどの作業が多いので、中にはただのコーダー側の意見や愚痴っぽいのもあるかもしれませんが、Photoshopでデザインする際に見やすく綺麗なPSDにすることができると思うポイントや知っておくと便利だと思う機能をいくつかあげてみました。 最近だと特にレスポンシブが関連してIllustratorやSketchを使ってるという人も多いとは思いますが、デザイン制作時にPhotoshopを愛用しているという方は参考にしてみてください :) あくまで個人的に思ったことなので、バリバリのデザイナーさんとかで「もっとこうしたら良くなるよ！」とか「それはしない方が良いのに...」みたいな意見があればアドバイスやツッコミ大歓迎です。 ここで紹介している内容やキャプチャは「Adobe Photoshop CC 2017」を使用した想定のものになり、バージョン

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

人物写真のレタッチで重要ものの一つは肌のレタッチですが、大量に写真がある場合１枚にそれほど多くの時間を費やすことは出来ません。。そこで今回はPhotoshopを使い、良い感じに手抜きしながら肌を素早くレタッチしていく方法についてご紹介していきます。忙しい人向けです。 短時間で効率的に肌をレタッチする！ゲストライターの村上です。最近は少し忙しくブログに寄稿できていませんでした。 最近は仕事で写真の加工する事が多く、短時間で作業効率を上げないといけないことが増えてきました。 ショッピングサイトの画像の加工も多いのですが、バナーなどを作成すると、人物の写真を使わないといけないこともまあまああります。自分の場合は人物のレタッチが得意ではないので、最近ちょくちょく勉強していました。人物のレタッチで重要なのが肌のレタッチなどではないかと思います。 色々な肌のレタッチ方法を見ていたのですが、結構な手間が

RAW現像ソフトとして人気のあるLightroom CCは、Photoshop CCなどでお馴染みのAdobe製品だ。画像処理をして出力できるほか、画像管理アプリとしてもけっこう扱いやすいものだ。なおLightroom CCは30日間の試用ができるほか、月額980円でLightroom CCとPhotoshop CCを使用できるプランもある。 以下では、基本的な流れとして現像のプロセスを紹介している。やり方の自由度は高いので、慣れてきたら、自分流を見つけてみるのもいいし、自分のツボを追求してみてもいい。 そうは言っても「“RAW”ってなんだ？」という人もいるハズ。おさらいしておくと、デジタルカメラで撮影をした場合、イメージセンサーに記録された情報はRAWとして一時的に書き出され、次にJPEGに変換されて保存される。この変換部分をPC側で処理をするのがRAW現像だ。 メリットは、生のデータに

ペンツールは、PhotoshopとIllustratorで最も重要なツールの1つです。ペンツールを楽に使えるようになると、デザインの新しいチャンスが広がり、ワークフローも大きく改善されるでしょう。 PhotoshopとIllustratorでのペンツールの役割や使い方の違いを理解し、それぞれで作業する時にベジェ曲線を思い通りに描くのに役立つ2つのこつを紹介します。 Two Simple Techniques To Help You Master the Pen Tool 元記事のライセンスに基づいて意訳しました。 ペンツールの種類 ペンツールの役割 ベジェ曲線を思い通りに描くための2つのこつ ペンツールの種類 IllustratorやPhotoshopのペンツールは、アンカーポイントやベジェ曲線を作ったり、追加したり、削除したり、微調整することができます。これらのオプションは、ショートカッ

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは、井畑です。 今回はPhotoshopのレイヤーの整理の仕方やルールについて自分で決めている事をご紹介したいと思います。 「他の方はどうやってレイヤー整理してるのるかなー？」と気になって、まずは自分で公開してみることにしました:) もちろん、自分のやり方がベストだとは思ってはいないのですが、ある程度カンタンにできて、ある程度それなりに整頓できるやり方かなーとは思っています。 それでは、早速ご紹介します。どうぞー!! このPhotoshopレイヤー整理ルールのポイント このルールの「ポイント」は次の２点になります。 整理する時間が決まっている ポイント一つ目は整理する時間・デザインする時間を分けているところです。そうすることで、それぞれの作業を

みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出

みなさん、Photoshop使ってますか？私は、Photoshopが大好きです。 Webデザイン全般から、写真の切り抜きや補正など幅広く使えるPhotoshopは、私にとって無くてはならないソフトのひとつです。 そんなPhotoshopの使い方の中で、髪の毛のような細部まで早く、キレイに切り抜く方法を私なりにまとめたいと思います。 Photoshopでデザインする時に役立ちますよー！ぜひ、参考にしてみてください。 ※今回はphoto-acさんの画像をサンプルに使わせていただきました。 Photoshopでできること Photoshopで部分的に切り抜いて使いたい場合って多いですよね？ そもそも、Photoshopでできることって、大きく分けてこれくらいなんです。 色などの補正 切って貼る かなり大ざっぱに言いましたが、この要素を色々と組み合わせて使ってコラージュしていくわけです。 もう少し

Photoshopにはさまざまな切り取り方法があり、画像の質や状況に応じて使い分けることで思い通りの作品が作れるようになります。 しかし、すべての技術を身に付けてから作品を作ろうとすると時間もかかるので、作品の完成イメージから逆算して、その都度どんな技術が必要なのかを考えながら身に付けるようにすると、より早いスキルアップに繋がります。 ここでは、輪郭が複雑な画像でもほぼ完璧に切り抜くためのPhotoshopテクニックを解説します。 ※コンテストで賞を頂いた際も、ここで紹介している切り取り方法を活用しているので参考にしてみてください ⇒ デザインコンテスト第3弾 Surf in the Cityで受賞を頂いた想いと作品の解説。 FreeRide SNOW BOARD 今回は、元の右画像から空中に飛んでいるスノーボーダーを切り取って、左画像のように雪山の背景に合成させたいと思います。 このよう

Photoshopは画像加工や写真のレタッチに適したデザインソフトですが、実はPhotoshopひとつ使えるだけで、WEBデザインやロゴマーク、ポスターなどあらゆるデザインが可能になります。 これまでスリームデザインでは、Photoshopを使ったさまざまなデザインチュートリ... ケース①：選択ツールで切り抜くまずはじめにphotoshopの切り抜き方法が全くわからない方のために基本を説明します。 必要な部分以外を透明に切り抜く場合、画像（写真）をphotoshopで開いた時点では背景となっていてそのまま切り抜くことはできません。 ↓画像のように背景を複製（背景レイヤーの上で右クリック）し、背景と複製レイヤーの間に分かりやすい色（黒など）で塗った新規レイヤーを挟むと切り抜きしやすくなります。 多角形選択ツールなどで選択し、キーボードのDeleteキーを押せば切り取られます。 切り抜かれた

Photoshopでの作業がもたついたり、もっときびきび動作させたい、とパフォーマンスを向上させたい時に、見直したいPhotoshopの環境設定の項目を紹介します。 How To Optimize Photoshop For Better Performance 下記は、以前紹介した記事をCC2015対応に編集したものです。 ※翻訳・編集にあたり、元サイト様に許可を頂いています。 ヒストリーとキャッシュ グラフィックプロセッサー 仮想記憶ディスク メモリの使用状況 64ビットモード レイヤーパネル フォントプレビュー UIのアニメーション動作 作業時にパフォーマンスをさげない方法 ヒストリーとキャッシュ Photoshopで作業する際に最初にチェックしておきたい項目は、キャッシュです。キャッシュを必要最小限にすることで、パフォーマンスが向上します。 設定方法 [環境設定] - [パフォーマ

本日、2015/6/16に、AdobeのCreative Cloudが2015年リリースとしてメジャーアップデートしました。Photoshop, Illustratorなど主要ソフトも新機能を備えてのメジャーアップデートとなります。 Photoshop CC 2015の魅力的な新機能とアップデート時の注意事項を紹介します。

Photoshopの知ってると便利な作業効率をアップするTipsを12個、紹介します。 全てPhotoshop CC2014対応ですが、ほとんどのものはCSでも使用できます。 Photoshop外からカラーを抽出 スポイトツールをドラッグしながら、カラーを抽出 通常の操作だとスポイトツールはPhotoshopの枠外に移動すると普通のカーソルに変わってしまいますが、Photoshop内でドラッグしながら移動すると、Photoshop外のカラーを抽出できます。 スポイトツールで複数のカラーを抽出 スポイトツールで抽出できるカラーは、一つだけではありません。 複数のカラーを抽出 Shift を押しながら、カラーを抽出 カラーは、10個まで抽出できます。 ※CSは、4個まで。 ブラシツールからスポイトツールに一時的に変更 選択ツールの選択時に「Ctrl (Macは、Cmd)」を押すと、一時的に移動

Photoshopで「透明」を表す「白とグレーの市松模様」。Photoshopユーザーであれば、この市松模様を特に意識することなく「透明」と認識してしまう人も少なくないだろう。 しかしなぜ「透明」を「白とグレーの市松模様」で表現したのか。その長年抱き続けていた疑問を、Photoshop誕生25周年イベントのために来日していたPhotoshop共同開発者のトーマス・ノール氏に投げかけてみた。 見える人には透明に見える「白とグレーの市松模様」 （左）Photoshop共同開発者のトーマス・ノール氏、（右）筆者 実はこの表現は、バイオロジーの分野（生物学など）から来ているという。もともとバイオロジーの分野では「透明なガラスの下に白黒のチェッカーボードを置いて物を置く」という表現があり、長い間「透明」を表現するためにチェッカーボードが用いられていたそう。そこからヒントを得て、Photoshopの「