Webデザイナーのための20のPhotoshopの秘訣

おそらく、そこにいるすべてのWebデザイナーは、お気に入りのPhotoshopのトリックの独自のセットを持っています。 正当な理由があります。 アドビの強力な画像編集は、Webデザインの世界の定番です。 この優れたソフトウェアとその幅広い機能に匹敵するプログラムはほとんどありません。

ただし、ほとんどのWebデザイナーはPhotoshopの使い方を知っていますが、学ぶことができることは常にたくさんあります。 結局のところ、プログラムは強力であるだけでなく、複雑でもあります。 さらに、定期的に更新によって新しいものが追加されます。

そのため、お気に入りのツールを引き続き検討することをお勧めします。 あなたがそうするのを助けるために、この記事では、そこにある最高のPhotoshopのトリックのいくつかを見ていきます。 ワークフローを改善し、仕事と生活を楽にし、時間を節約し、可能な限り最高のWebサイトを設計するのに役立つもの。

Photoshopについてもっと学ぶ準備はできていますか？ その後、読み続けてください。

あなたをウェブデザインウィザードに変えるPhotoshopのトリック

次のヒントは、初心者レベルからより複雑な資料まで多岐にわたります。 それらのそれぞれはあなたがあなたができる最高のウェブデザイナーになるのを助けるために選ばれます。

1.ワークスペースを合理化する

基本から始めましょう。 ワークフローを改善するために最初に行うことは、Photoshopの使用方法をサポートする方法でPhotoshopを設定することです。 結局のところ、より鋭いツールを使用すると作業が簡単になります。

そのため、最初に停止するのは、[ウィンドウ]> [ワークスペース]> [グラフィックとWeb]です。 このオプションを選択すると、使用可能なツールがWebデザインに使用する可能性が最も高いものに変更されます。

その後、 [編集]> [設定]に移動します。 ここで、最も重要な停止の1つは、ユニットとルーラーです。 ここで選択した測定値（おそらくピクセル）に関係なく、これがすべてのドキュメントのデフォルトになります。

（クイックヒント：単一のドキュメントのルーラーを変更するには、ルーラーを右クリックして、目的の測定単位を選択するだけです。）

その後、 [設定]> [パフォーマンス]> [履歴とキャッシュ]に移動し、[ Web / UIデザイン]をクリックします。

そうすることで、キャッシュ設定が変更され、多くのレイヤーを持つ小さなファイルが優先されます。これは、主に作業するものです。

同じ場所で、履歴状態の数を選択することもできます。 これは、何かを元に戻したい場合に戻ることができるステップの量です。

最後に、設定を終了し、すべてのドキュメントを閉じて、キーボードのTボタンを押します。 これにより、フォントメニューが画面の上部に表示されます。 ここで設定したものは、それ以降、新しいドキュメントの標準になります。 MyriadProをそれほど好きな人は誰もいないからです。

2.キーボードショートカットを学ぶ

定期的に使用するプログラムの場合、キーボードショートカットを学ぶことは一般的に良いアドバイスです。

たとえば、この投稿を書いている間、 Ctrl + Alt +2/3を使用してh2とh3の見出しを作成します。 キーボードから手を離す必要がないため、エディターツールバーを使用するよりもはるかに高速です。

Photoshopについても同じことが言えます。 簡単なキーストロークでアクションを実行する方法を知ることは、メニューをクリックするよりもはるかに高速です。

この記事では、キーボードショートカットについて説明します。 ただし、最も一般的なPhotoshop操作へのショートカットを学習するために、このチートシートもお勧めします。 それに加えて、何度も何度も行うことのキーボードショートカットを調べる習慣をつけることも良い考えです。

3.グループと名前のレイヤー

Photoshopで作業するときは、たくさんのレイヤーを扱います。 ほとんどの要素を独自のレイヤーにするだけでなく、明るさ/コントラストなどの変更もレイヤーとして追加されます。

そのため、すぐに混乱する可能性があります。 幸いなことに、それを少なくするためのオプションがたくさんあります。そのうちの2つは、レイヤーをグループ化して名前を付ける機能です。

まず、任意のレイヤーをダブルクリックすることで、その名前を好きな名前に変更できます。

そうすれば、レイヤーに背景画像、メニュー、またはサイドバーが含まれているかどうかを簡単に理解できます。

または、 Ctrlキーを押しながら個々のレイヤーを選択するか、 Shiftキーを押しながら隣接するレイヤーの範囲をマークすることにより、一度に複数のレイヤーを選択することもできます。 Ctrl + Gは、それらをグループに変換します。

または、レイヤーを右クリックして、そこからグループオプションを選択します。 いずれにせよ、レイヤーはより整理されます。 さらに、グループ化されたレイヤーに名前を付けることもできます。

4.フィルターレイヤー

レイヤーの命名とグループ化は良いスタートです。 ただし、数十または数百もの作業を行う場合でも、簡単に混乱する可能性があります。

そのような場合は、レイヤーをフィルタリングするオプションもあります。 これを行うには、[レイヤー]メニューの上部にあるメニューを使用して、タイプ、名前、効果、色などでフィルタリングします。

または、移動ツールを使用して、 Ctrlキーを押しながらレイヤーまたはオブジェクトをクリックして、レイヤーを直接選択します。

5.グリッドを作成します

PureSolution / shutterstock.comによる画像。

グリッドは、Webデザインで最も重要な原則の1つです。 デザインに秩序をもたらし、オブジェクトを配置するのに役立ちます。 そのため、Photoshopでグリッドを作成することも意味があります。

これを行うには、 [表示]> [新しいガイドレイアウト]を使用します。 または、ルーラーをクリックしてドキュメントにドラッグするだけで、水平ガイドと垂直ガイドを作成できます。 Ctrlキーを使用して、既存のガイドを移動します。

6.色見本をインポートする

色見本は、HTML、CSS、またはSVGファイルからPhotoshopに直接ロードできます。 そうすれば、ロゴなどの既存のアセットを操作するときに、配色の優れた出発点が得られます。

このPhotoshopのトリックを利用するには、スウォッチパネルを開き、右上隅のドロップダウンメニューをクリックして、[スウォッチのロード]を選択します。 次に、問題のファイルに移動して開き、新しい色見本をインポートします。

7.カスタムシェイプを保存します

特に、同じサイトや似たようなデザインのWebサイトに複数のページをデザインする場合、同じオブジェクトや形状を何度も使用していることに気付くでしょう。 そのため、すばやく再利用できるようにカスタムシェイプとして保存することは理にかなっています。

これを行うには、パス選択ツール（黒い矢印）を使用して問題の形状を右クリックします。 次に、[カスタム形状の定義]を選択します。 これを行ったら、カスタムシェイプツールのトップバーオプションからこのシェイプにアクセスできます。 [形状： ]と表示されているドロップダウンメニューをクリックして、保存した形状を選択するだけです。

8.背景色と前景色を切り替えます

アイコンをクリックせずに背景色と前景色を切り替えるには、キーボードのXを押すだけです。 さらに、色を単純な白黒に戻したい場合は、 Dを押すことでそれを行うことができます。

9.キーボードで不透明度を変更する

別のキーボードショートカット：不透明度を変更できるツールの場合は、キーボードから簡単に変更できます。 1から0の数値は、不透明度を10％から100％の間の任意の値に設定します。 同じことがレイヤーの不透明度でも機能します。

10.直線を描く

任意のツールで直線を描くには、 Shiftキーを押したままにします。 その後、自動的に釘のようにまっすぐになる線（水平方向と垂直方向の両方）を描くことができます。 または、2つの異なる点をクリックして、それらの間に直線を作成します。

11.サンプルカラー

Photoshopのトリックの次は、任意の色をサンプリングする機能です。 オブジェクトの色が必要な場合は、 Altボタンを押しながら希望の色相をクリックします。 これは、ブラシ、鉛筆、ペイントバケット、および色を使用するその他のツールの両方で機能します。

12.選択範囲に追加または選択範囲から削除します

Shiftキーを押しながら、含めるパーツを選択すると、既存の選択範囲に追加できます。 減算するには、同じことを行いますが、 Altボタンを使用します。

13.複数のステップを元に戻す

最後のアクションを元に戻す古典的な方法は、 Ctrl + Zを使用することです。 ただし、これは最後に行った場合にのみ機能します。 いくつかの手順に戻るには、 Ctrl + Alt + Zを使用します。

14.ブラシサイズを動的に変更する

ブラシのサイズを変更するために、ドロップダウンメニューをクリックして適切なサイズにドラッグする必要はありません。 代わりに、 Altキーを押しながらマウスの右ボタンを押したまま、左右にドラッグして、ブラシのサイズを増減します。

15.Web用に保存

Safe for Web機能を使用すると、画像サイズをできるだけ小さくすることができます。 これは、サイトの速度を向上させるために非常に重要です。

Photoshopでは、 [ファイル]> [エクスポート]> [Web用に保存]からこれを行うことができます。 ただし、より簡単な方法は、 Ctrl + Alt + Shift + Sを使用することです。 どういたしまして！

16.画像をレイヤーとして開く

一度に多数の画像をPhotoshopにインポートする必要がある場合があります。 ただし、それらを作業スペースにドラッグするだけでは、手動で配置するように求められます。

これを行うためのより実用的な方法は、 [ファイル]> [スクリプト]> [ファイルをスタックにロード]です。 問題の画像を参照し、それらにマークを付けて、[ OK]を2回押します。 これで、各画像が自動的に独自のレイヤーにインポートされます。

17.PhotoshopからCSSを直接​​コピーする

Webデザイナーにとって最も快適なPhotoshopのトリックの1つは、プログラムがエクスポート可能なCSSを作成するという事実です。 すべてを手作業で入力したり、試行錯誤して実装したりする必要はありません。

これを利用するには、レイヤーを右クリックして[ CSSのコピー]を選択するだけです。 または、[レイヤー]メニューを使用して同じオプションを見つけます。 これで、スタイルシートまたは使用している他のプログラムに貼り付けるために必要なすべてのスタイルができました。

18.一度に複数のデバイスと方向を設計する

今日のWeb向けのデザインとは、さまざまなデバイス向けのデザインを意味します。 モバイルデバイスが世界中のデスクトップコンピュータを凌駕する時代には、モバイルデザインの実装は必須です。

出典：ComScore

幸い、Photoshopにはアートボードとスマートオブジェクトがあり、デザインをさまざまな形式に簡単に拡大縮小できます。

ここでは両方について詳しく説明できますが、Phlearnはこれについて優れたチュートリアルを作成しました。これは、私がこれまでにできたよりもはるかに優れた仕事をします。

19.反復タスクに自動処理を使用する

もう1つのすばらしいPhotoshop機能は、自動処理です。 つまり、手動で実行しなくても、記録されたタスクを何度も繰り返すことができます。 これは、たとえばWeb用に大量の画像を保存する必要がある場合などに非常に便利です。

仕組みは次のとおりです。 まず、ファイルを開きます。 次に、[アクション] （ Alt + F9 ）を開き、[新しいアクションの作成]を見つけてクリックします。 名前を入力し、オプションで、キーの組み合わせと色を割り当てます。

あなたの行動を記録するには、録音を押します。 次に、繰り返したい操作を実行します。 私の場合、あるフォルダから画像を開き、Web用に別のフォルダに保存します。

完了したら、記録を停止します。 これで、このアクションを他のすべての画像に再利用できるため、時間を大幅に節約できます。 Photoshopで自動化できるものの詳細については、この記事を確認してください。

20.デバイスでプレビュー

最後に、Adobeは、Photoshopに加えて、複数のiOSデバイスで作業をプレビューできるアプリも提供しています。 最良のこと：コンピューター上で変更を行うときに、デバイス上の変更を観察することができます。

これを行うには、アプリをインストールし、デバイスプレビューを使用してPhotoshopをUSBまたはWi-Fi経由で外部デバイスに接続します。 このオプションは、[ウィンドウ]> [デバイスプレビュー]にあります。

あなたの好きなPhotoshopのトリックは何ですか？

Photoshopは、世の中で最も使用されているWebデザインツールの1つです。 その強力な機能により、高品質のWebサイトやアセットの設計に最適です。

ただし、非常に強力なため、非常に複雑になり、特に初心者の場合、ソフトウェアを習得するのに時間がかかる場合があります。

学習曲線を短くするために、上記ではWebデザイナーに役立つPhotoshopのトリックをいくつか紹介しました。 一般的なワークフローから自動ファイル処理まで、多くのことが簡単になります。

Photoshopの内外を知ることは、収益への大きな投資です。 あなたが物事をより速くすることができるとき、あなたはより多くの仕事を引き受けることができ、それによってより多くの収入を生み出すことができます。 そして、それは決して悪いことではありません。

Photoshopのお気に入りのトリックは何ですか？ お互いに助け合うことができるように、下のコメントセクションでお知らせください。

Creative Stall /shutterstock.comによる記事のサムネイル画像