フロントエンドエンジニアのスキルアップのためのPhotoshopの上手な使い方シリーズ第3弾

ホームページ

ウェブフロントエンド

PS チュートリアル

フロントエンドエンジニアのスキルアップのためのPhotoshopの上手な使い方シリーズ第3弾 - 写真の切り抜き

高洛峰

Feb 20, 2017 am 09:22 AM

前の言葉

フロントエンドエンジニアは計測にPhotoshopを使うだけでなく、カットにもこのソフトを使う必要があります。この記事は、Photoshop スキルシリーズの 3 番目の記事です - 画像のカット

画像のカット情報

Web ページ制作ではどの写真を切り抜く必要がありますか?主に2つのカテゴリに分けられ、1つは装飾画像、もう1つはコンテンツ画像です

【1】改変画像

改変画像は主にWebページのコンテンツを改変したもので、一般的には背景属性で使用されるスプライト画像となります。、通常は png24 (IE6 は半透明をサポートしていません) および png8 形式で保存されます。装飾的な絵には主に以下のカテゴリが含まれます: 1. アイコン、ロゴ

2. 特殊効果のあるボタン、テキストなど (デザイナーがデザインしたフォントがあまり一般的でない場合は、テキストを画像として切り抜きます)

3. 非単色背景

【2】コンテンツ画像

ここでいう「画像」とは、主にWebページのコンテンツを提供するコンテンツ画像のことで、一般的にはタグ。コンテンツの画像は色彩豊かで、通常 JPG 形式で保存され、一定の圧縮が必要です。コンテンツ画像には主に次のカテゴリがあります:

1. バナー、広告画像

2. 記事内の画像

[注] 一部のコンテンツ画像はサーバーデータであるため、画像を切り取る必要はなく、フロントエンドエンジニアのスキルアップのためのPhotoshopの上手な使い方シリーズ第3弾 - 写真の切り抜き

写真を切り取る手順

【1】

文字を隠して背景だけを残す

コードに記述できない特殊効果がある場合は、文字を切り取って、背景も一緒に

1.テキストが独立したレイヤーの場合は、テキスト画像を非表示にします

まずテキストレイヤーを見つけて、目のアイコンを削除します

２． . テキストと背景が結合されている場合は、背景のカバーテキストを並べて表示します

a. 背景が伸縮可能な場合は、長方形マーキーツールを使用して背景に小さな長方形の枠を描き、自由変形ツール (ctrl+t) を使用します。背景を引き伸ばしてテキストを覆い、ダブルクリックするか Enter キーを押します

b. 背景にテクスチャがあり、引き伸ばすことができない場合は、長方形のマーキーツールを使用して背景に小さな長方形のフレームを描き、移動ツール +alt を使用して現在のレイヤーをコピーし、もう一度矢印キーを押します。または、最終的にすべてのテキストが覆われるまでマウスで移動します (マウスを移動するときは、レイヤーが直線的に移動するように Shift キーを押したままにしてください)。

レイヤーを結合（ctrl+e）（任意）自動選択にチェックを入れて、必要な複数のレイヤーを結合します【4】


【2】移動ツールで必要なレイヤーを選択（Ctrl+レイヤーの四角形部分をクリック）するとアリのラインが表示されます	【3】

レイヤーをコピー（ctrl+c） ->新しいファイル (ctrl+n) を押し、[OK] -> [レイヤーを貼り付け](ctrl+v) を押します

以下はそれぞれ異なります画像の種類から見た実践的な解説 1. 表示されているレイヤーを結合します（shift+ctrl+e） 2. 長方形のマーキーツールを使用して広い領域を選択します

実戦

【png8のカット】

png8の画像は半透明に対応していないため、でカットする必要があります背景

3. 魔法の杖ツールを使用して余分な部分を削除します（選択範囲から削除：長押し）下 alt)

【不規則な小さいアイコンのカット】

カット方法はpng8のカット方法と似ています

【注意】中空の小さいアイコンを選択する場合は必ず[連続]を解除してください

【タイル化可能な背景】

1. 長方形のマーキーツールを使用して領域を選択します

2. コピーして新しいファイルに貼り付けます（タイル化されたコンテンツが幅（x軸）または高さ（ファイルの y 軸)

x 軸に沿って並べると x 軸を覆い、y 軸に沿って並べると y 軸を覆います

前端工程师技能之photoshop巧用系列第三篇——切图篇

【スライスツール全面カット】

全面カットできるアクティビティページに適用

1、ガイドラインを引く

2.スライスツールを選択

3.ガイドラインに基づいてスライスボタンをクリック

4. スライスツールからスライス選択ツールに切り替えます（同じボタンの下）

5. スライスをダブルクリックして、必要な名前を変更します

6. 保存

【注意】Ctrl+aは使用できませんすべてのスライスを選択するには、長方形のボックスをドラッグするだけですべてのスライスを選択でき、色が明るくなり、保存形式を均一に設定します

さらにフロントエンドエンジニアのスキルについては、Photoshopスキルシリーズの第3弾 - 写真の切り抜き関連記事については、PHP中国語ウェブサイトに注目してください！

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Photoshop：無料試用版と割引オプションの調査Apr 14, 2025 am 12:06 AM

最も経済的な方法でPhotoshopへのアクセスを取得できます。1。7日間の無料トライアルでソフトウェア機能を体験します。 2。季節のプロモーションだけでなく、生徒または教師の割引を見つけます。 3.サードパーティのWebサイトでクーポンを使用します。 4. Adobe CreativeCloudの毎月または年次プランを購読します。

デザイナー向けのPhotoshop：視覚的な概念の作成Apr 13, 2025 am 12:09 AM

Photoshopで視覚概念の作成は、次の手順を通じて実現できます。1。新しいドキュメントを作成します。2。背景レイヤーを追加します。3。ブラシツールを使用して基本的な形状を描画します。4。テキストとグラフィックを追加します。

Photoshopは無料ですか？サブスクリプションプランの理解Apr 12, 2025 am 12:11 AM

Photoshopは無料ではありませんが、低コストまたは無料で使用する方法がいくつかあります。1。無料の試用期間は7日で、この期間中にすべての機能を体験できます。 2。学生と教師の割引はコストを半分に削減でき、学校の証明が必要です。 3. CreativeCloudパッケージは、プロのユーザーに適しており、さまざまなAdobeツールが含まれています。 4。フォトショーペルメントとLightroomは低コストの代替品であり、機能は少なくなりますが、価格は低くなっています。

Photoshopの価値：その機能に対するコストを計量しますApr 11, 2025 am 12:02 AM

Photoshopは、強力な機能と幅広いアプリケーションシナリオを提供するため、投資する価値があります。 1）コア関数には、画像編集、レイヤー管理、特殊効果の生産、色の調整が含まれます。 2）プロのデザイナーや写真家に適していますが、アマチュアはGIMPなどの代替案を考慮する場合があります。 3）AdobeCreativeCloudを購読することは、必要に応じて、1回限りの支出を避けるために使用できます。

Photoshopの中核目的：クリエイティブな画像デザインApr 10, 2025 am 09:29 AM

Photoshopのクリエイティブな画像デザインでのコアの使用は、その強力な機能と柔軟性です。 1）設計者は、レイヤー、マスク、フィルターを介して創造性を視覚的現実に変換することができます。 2）基本的な使用には、トリミング、サイズ変更、色補正が含まれます。 3）レイヤースタイル、ブレンドモード、スマートオブジェクトなどの高度な使用法は、複雑な効果を生み出すことができます。 4）一般的な間違いには、不適切な層管理とフィルターの過度の使用が含まれます。これは、レイヤーを整理し、フィルターを合理的に使用することで解決できます。 5）パフォーマンスの最適化とベストプラクティスには、レイヤーの合理的な使用、ファイルの定期的な保存、ショートカットキーの使用が含まれます。

WebデザインのPhotoshop：UI/UXの高度なテクニックApr 08, 2025 am 12:19 AM

Photoshopは、Webデザインで使用して、高忠実度のプロトタイプを作成し、UI要素を設計し、ユーザーインタラクションをシミュレートできます。 1.基本設計のためにレイヤー、マスク、スマートオブジェクトを使用します。 2。アニメーションおよびタイムライン関数を介してユーザーの相互作用をシミュレートします。 3.スクリプトを使用して、設計プロセスを自動化し、効率を向上させます。

初心者の記事：PSブラシを使用してフォントに亀裂効果を追加します（共有）Apr 07, 2025 am 06:21 AM

前の記事「PS（お気に入り）を使用してプレート画像に印刷効果を追加するためのステップバイステップを教える」では、PSを使用してPSを使用してプレート画像に印刷効果を追加するための小さなトリックを紹介しました。次の記事では、PSブラシを使用してフォントに亀裂効果を追加する方法を紹介します。それを行う方法を見てみましょう。

Photoshop Advanced Typography：見事なテキスト効果の作成Apr 07, 2025 am 12:15 AM

Photoshopでは、レイヤースタイルとフィルターを介してテキストエフェクトを作成できます。 1.新しいドキュメントを作成し、テキストを追加します。 2.影や外側の輝きなどのレイヤースタイルを適用します。 3.波効果などのフィルターを使用し、ベベルとリリーフ効果を追加します。 4.マスクを使用して、効果範囲と強度を調整して、テキスト効果の視覚的影響を最適化します。

See all articles