フロントエンドエンジニアのスキルアップのための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 27, 2025 am 12:13 AM

Photoshopは、その汎用性と直感的な動作インターフェイスのため、画像処理の分野で非常に強力です。 1）基本的な調整から、明るさやコントラストの調整などの複雑な合成まで、さまざまなタスクを処理できます。 2）レイヤーとマスクに基づいて機能すると、非破壊的な編集が可能になります。 3）使用の例には、カラーバランスの調整とレイヤーマスクの作成が含まれます。 4）過度の編集などの一般的なエラーは、履歴パネルを介して回避できます。 5）パフォーマンス最適化の提案には、スマートオブジェクトとショートカットキーの使用が含まれます。

Photoshopトライアルと代替案：無料アクセスの探索Apr 26, 2025 am 12:23 AM

Photoshopは、無料の7日間の試用期間を提供します。トライアル期間の使用を最大化するには、1）複数のAdobeアカウントにサインアップし、2）学生または教育バージョンを使用し、3）Adobe CreativeCloudを購読します。無料の代替品には、1）GIMP、2）Photopea、3）Krita、これらのソフトウェアは毎日の画像編集ニーズを満たすことができます。

写真家のためのPhotoshop：画像の強化とレタッチApr 25, 2025 am 12:01 AM

Photoshopの写真の強化とレタッチは、修理ブラシツールを使用して輝度とコントラストを調整することで実現できます。 1）明るさとコントラストを調整します：輝度とコントラストを増やして、画像 - >調整 - >明るさ/コントラストメニューを介して露出しない写真を改善します。 2）修理ブラシツールを使用します。ツールバーでHealingBrushToolを選択し、適用して画像のその他のポイントまたは傷跡を削除します。

Photoshopへのアクセス：方法と可用性Apr 24, 2025 am 12:07 AM

Photoshopは、恒久的なライセンスを購入したり、CreativeCloudを購読したりすることで取得できます。 1.長期使用のために恒久的なライセンスを購入し、毎月の支払いはありませんが、最新の更新は利用できません。 2. CreativeCloudを購読して、最新バージョンやその他のAdobeソフトウェアにアクセスすると、毎月または年会費を支払う必要があります。選択は、使用頻度と要件に基づいている必要があります。

Photoshopが最善を尽くすこと：一般的なタスクとプロジェクトApr 23, 2025 am 12:06 AM

Photoshopは、画像編集、レイヤー化とマスキング、デジタルペインティング、さまざまなデザインアプリケーションに特化しています。 1）画像の編集と修復：欠陥を削除し、色と明るさを調整します。 2）レイヤーとマスク：非破壊的な編集と作成。 3）デジタル絵画とイラスト：アート作品を作成します。 4）実用的なアプリケーション：グラフィックデザイン、Webデザイン、デジタルアート作成。

Photoshopの使用：創造的な可能性と実用的な用途Apr 22, 2025 am 12:09 AM

Photoshopは、実用的なアプリケーションで非常に実用的で創造的です。 1）初心者や専門家に適した基本的な編集、修理、合成機能を提供します。 2）コンテンツ認識の塗りつぶしやレイヤースタイルなどの高度な機能により、画像効果が向上します。 3）ショートカットキーの習得とレイヤー構造の最適化により、作業効率が向上します。

Photoshop：高度なテクニックとツールApr 21, 2025 am 12:08 AM

Adobe Photoshopの高度な機能には、高度な選択ツール、レイヤーブレンディングモード、アクションとスクリプトが含まれます。 1）クイック選択ツールやカラーレンジ選択ツールなどの高度な選択ツールは、画像領域を正確に選択できます。 2）「オーバーラップ」モードなどのレイヤーブレンドモードは、一意の視覚効果を作成できます。 3）アクションとスクリプトは、タスクの繰り返しを自動化し、作業効率を向上させることができます。

Photoshopの主な機能：レタッチと強化Apr 20, 2025 am 12:07 AM

写真の編集と強化におけるPhotoshopの強力な機能には、次のものが含まれます。1。「修理ブラシツール」を使用してにきびを削除する、2。「液化ツール」を使用してスリムな顔、3。「周波数分離」テクノロジーを使用して画像を正確にレタッチします。これらの関数は、画像処理効果を最適化するためのアルゴリズムと画像処理テクノロジーを通じて実装されます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。