フロントエンドエンジニアのスキルアップのためのPhotoshopの上手な使い方シリーズ 前編 - 準備編

前回の言葉

Photoshopはフロントエンドエンジニアにとって避けては通れないソフトウェアですが、ソフトウェア自体は非常に強力ですが、基本的なカット作業はこのツールを使用するだけで済みます。この記事では、Photoshop スキル シリーズの最初の部分を開始します - 準備

機能

なぜ写真をカットする必要があるのですか?そのためにはプロジェクトのプロセスについて話す必要があります。完全なプロジェクト プロセスでは、市場需要分析の実施、製品プロトタイプの作成、UI によるプロジェクト プロトタイプに基づいた設計図面の作成、フロントエンドによる設計図面に基づいたページの作成、バックエンドによるデータ関連作業の実行、およびテスト後に Web サイトがオンラインになります。

私たちがよくカットと呼んでいるものは、実際には UI デザインを Web ページに必要な素材にカットすることです。具体的には、Web ページのどこに資料が必要ですか?主に2つのカテゴリーが含まれます:

【1】HTMLのタグ

<img src="img/xx.jpg" alt="">

【2】CSSのBackground-image属性

{background-image: url(../img/xx.jpg);}

初期化

Photoshopを使用する前に必要な設定は主に以下の3つです

【1】環境設定

编辑 > 首选项 > 单位与标尺 > 把标尺和文字的单位都改成像素

【2】パネル設定(ウィンドウメニュー下)

1、ツール( 2列または1列のレイアウトを切り替え可能)

2. オプション(現在選択されているツールと1対1の対応)

3. 情報(色、位置、サイズ情報、一般的に使用される)長方形マーキーツールと併用)

4. レイヤー (レイヤー操作)

5. 履歴レコード(履歴操作を記録、ロールバックによく使用)

【3】補助ビュー(表示メニューの下)

1.整列(整列をオンにすると、レイヤーを別のレイヤーやガイド線、原稿の端に移動した際に自動吸着機能が働きます)

2.ルーラーlt;ctrl +r＆gt;

3.ガイド＆lt; ctrl+;＆gt;（view＆gt; display＆gt; guides）Canvasのガイドラインとグリッドを表示するために追加のコンテンツを表示することにより、画面にログセスをダウンします