Web フロントエンドについて知っておくべきいくつかのこと Cutting_html/css_WEB-ITnose

プログラムに比べて、写真をカットする敷居は非常に低く、PS の基礎があれば、基本的には 5 分も探索すれば理解できます。しかし、他のすべてのスキルと同様に、写真のカットにも多くのスキルと経験が必要です。これらにより、カット作業がより効率的で目的のあるものになります。

説明

著者は例として photoshop cs5 を使用しており、バージョンが異なると機能が若干異なります。

パート 1: いくつかのショートカット キー

写真をカットする場合、デザインやペイントに比べて PS はあまり使用されません。 以下に、写真をカットするときによく使用されるショートカット キーをいくつかまとめます。 . ショートカット キー、これらのショートカット キーは作業効率を大幅に向上させ、見た目もクールです。

ビュー シリーズを自由に制御

写真を自由に閲覧: スペースを押しながらマウスでドラッグ

写真を自由にズーム: alt+スクロール ホイールを押したまま

実際のピクセル (100%) に切り替える: Ctrl + Alt + 0

ワークスペースの種類の切り替え: Tab

最後まで戻る: Ctrl + Alt + Z

Controlコンテンツ シリーズ

画面上のレイヤーを選択: Alt + マウスの右ボタン

画面上でレイヤーをドラッグ: V 移動モードに切り替え マウス ドラッグ

コピー レイヤーをドラッグ: 移動モードで Alt+ドラッグ

レイヤーを削除: 削除したいレイヤーを選択して Delete キーを押します

複数のレイヤーを結合: 結合したいレイヤーを選択 Ctrl+E

選択範囲の塗りつぶしの色: Alt+Delete (前景色) Ctrl+Delete (背景色)

現在選択されているレイヤーを拡大縮小: Ctrl+T (自由変形モード)

ユーティリティ ツール シリーズ

選択範囲を描画します: M をクリックして選択モードに入り、マウスをドラッグします

選択を破棄します: Ctrl+D

スポイトツール: I をクリックしてスポイトモードに入り、画面の色をクリックします

テキストツール: T をクリックしてテキストモードに入り、画面上のテキストをクリックするか、新しいテキストを作成します

スライスツール: C をクリックして、スライス モードに入ります (古いバージョンは異なります)

パート 2: PS の状態に注意してください。

Photoshop がファイルを開くと、ソフトウェア自体が起動します。要約すると、いくつかのタイプがあります:

ツール ステータス -- 現在の移動モード、選択モード、スライス モード、またはスポイト モードなどを表します。ツール ステータスは次のことを表します。ドキュメントタイプに対する現在の操作。

選択を必要とする特殊な状態がいくつかあります。この時点では、状態の切り替えは一時停止されます。たとえば、テキスト入力モードとフリー ズーム モードでは、次の操作を実行する前に、現在の変更内容を確認する必要があります。この状況の特徴は、変更をすぐに中止する必要がある場合は、ESC

Layer Status -- をクリックして、ステータス バーに次の選択項目が表示されることです。は現在操作しているオブジェクトを表しますが、特殊なタイプの操作のみを受け入れるオブジェクトがいくつかあります。

たとえば、テキスト レイヤーでは一部の塗りつぶしや描画機能を実行できず、レイヤー グループを操作できません。つまり、コーティング変更操作を実行するときは、現在の操作対象に注意を払う必要があります。そうしないと、誤操作や操作不能が発生しやすくなります。

カラー インデックス モード -- これは、一般的なエラーとして、Web 形式の画像をエクスポートすることでエクスポートされた PNG は自動的にインデックス モードに変更されます。変更を続ける場合は、インデックス モードを RGB モードに変換する必要があります。

レイヤーの操作

デザイナーが自分で図面をカットしない場合、カッターはレイヤーからデザイナーの意図を理解する必要があります。グループ化の方法とレベル間の関係は、ページ構造に対するデザイナーの個人的な理解を反映しています。したがって、デザイン ドラフトの場合、最初のステップはレイヤーを大まかに見てデザインの意図を理解することです。2 番目のステップは、自分の理解に基づいてレイヤーに対して新しい操作や変換を実行することです。以下に、レイヤー操作に関するいくつかの経験を示します。

レイヤーの可視性をオフにする -- いくつかのページ要素が絡み合っており、通常は項目の 1 つを閉じて、最初に一部を切り取り、次に一部を切り取ります。

レイヤーを結合 -- デザイナーはサードパーティ要素をロードします。これにより、ページ上の一部のウィジェットの画像が変更されます。構造は非常に複雑です。現時点では、Ctrl+E でグループ全体を結合するのが良い方法です。レイヤーを結合するときは、それに応じてレイヤー効果も結合されることに注意する必要があります。変更が困難になるため、通常は Ctrl+Alt+Z で元に戻しますが、場合によってはレイヤーを空のレイヤーにマージする効果もあります。レイヤーをラスタライズする効果もあります (テキスト レイヤーを空のレイヤーと結合することもできます)。

レイヤーをコピー

-- レイヤーをコピーすることで一部のスプライト効果をオリジナルに直接リストし、スライス ツールを使用して画像を出力できる場合があります

レイヤー スタンプ

-- 特に複雑なレイヤーを含む一部のページでは、レイヤー スタンプ ツールを使用して、最上位のレイヤーを選択し、Ctrl+Alt+Shift+E をクリックして、後続のすべてのレイヤーを新しいレイヤーに覆う必要がある場合があります。 。この操作の利点は、レイヤー自体に影響を与えることなくレイヤーを結合できることです。

画像を生成

1) 画像形式 -- 画像形式の原則は、単純に、複雑な構造と多くの色を持つ jpg 画像と、単純な色と透明度の要件を持つ png 画像を優先することです。 png24 は IE6 では互換性がありません。

2) スライスツール -- スライスツールは、PS が提供する写真をカットするための強力なバッチツールですので、できるだけ使用してください。スライスを使用する前に、上記の方法を使用してレイヤーを処理し、必要に応じて必要なスライス領域を描画します。

スライス オプション -- 将来的にはパーティションをスライスします。スライス ツールの下にあるスライスを Alt キーを押しながらクリックすると、ウィンドウがポップアップします。

まず、スライスのサイズと位置、特にカットしたいボタンの幅と高さを確認します。ここでの確認と設定が重要です。次に、ここで直接名前を付けると、描画後に名前を変更する時間を節約できます。

スライスの保存 -- スライスを保存するときに、各スライスをクリックして異なる画像形式を設定し、すべてではなく選択したスライスを保存することを選択できます。

3) 新しい写真 -- 多くの場合、スライスを直接使用するのは難しく、写真を 2 回処理する必要があります。このとき、以下の点に注意する必要があると思います。

jpg の二次加工は絶対に行わないでください。jpg の品質が 100% であっても、それは非可逆形式であり、二次加工されたjpgは肉眼で見える品質の劣化があるため、転送にはさまざまな種類のpngを使用する必要があります。

画像サイズに注意してください: PS の一部のバージョンでは、画像をドキュメントにドラッグするとデフォルト サイズに適応するため、画像サイズが知らないうちに変更されてしまいます。解決策としては、最初に正しいサイズの画像を作成するか、ソース ドキュメント内のレイヤーとして新しいドキュメントに画像をドラッグすることが考えられます。

ズーム: どの形式でも画像を拡大縮小すると品質が低下します。可能であればベクター画像の拡大縮小を使用するか、ソース ファイルのパス内で拡大縮小してドラッグします。

4) 新しい画像処理 -- 新しい画像を処理するには、いくつかの一般的な手法があります。

画像のトリミングとすべての表示: 画像はキャンバスより小さいか、画像がキャンバスより大きいです キャンバスの場合、画像の正確性を確保するために、切り抜きを使用してすべてのコマンドを表示します。このコマンドは、[画像(I)]->[切り抜き]/[すべて表示]の下にあります。

アクティブな選択、コピー、ペースト: これら 3 つのコマンドを一緒に使用して、さまざまな変換を実行できます。たとえば、グラデーション ボタンは短縮および拡大します。

画像を切り取って Web ページに変換するプロセス自体は難しくありません。コードを書くには十分な経験が必要であり、このプロセスでは頻繁に練習して学習する必要があります。このようにして、ページの品質はますます高くなります。また、CSS スプライト技術、互換性の記述、モバイル サイトの仕様など、いくつかの知識、ラベル、ステートメントを理解する必要があり、これらすべてに十分な経験が必要です。

記事ソース: Aaseoe Resource Network

記事リンク: http://www.aseoe.com/show-41-648-1.html

このサイトの記事すべての HTML5 関連記事は、HTML5 DreamWorks の編集者によって他のメディアから選択され、転載されています。これらは、ネチズンの学習と伝達のみを目的としています。私たちの作品があなたの権利を侵害している場合は、編集者 QQ: 123464386 までご連絡ください。できるだけ早く対処してください！投稿や協力については、tommy@html5dw.com

まで電子メールを送信してください。