ホームページ ウェブフロントエンド PS チュートリアル UI设计师的photoshop配置技巧图文介绍教程

UI设计师的photoshop配置技巧图文介绍教程

Jun 01, 2016 pm 02:29 PM
UIデザイナー 設定のヒント

  Photoshop新建文档设置

  操作:菜单 → 文件 → 新建

  宽度:640像素

  高度:1136像素(4英寸iPhone设备)

  分辨率:72像素/英寸(ppi)

  颜色模式:RGB颜色

  背景内容:白色(可选)

  颜色配置文件:不要色彩管理此文件(更多颜色设置后)

  像素长宽比:方形像素

  配置如下图:

UI设计师的photoshop配置技巧图文介绍教程

  对齐设置

  这个处就是当你使用图层、形状等操作时自动对齐网格,画矢量图不怕模糊边缘,确保每个像素保持清晰。

  设置:

  菜单 → 视图 → 对齐

  菜单 → 视图 → 对齐到 → 全部

UI设计师的photoshop配置技巧图文介绍教程

  首选项设置

  操作:菜单 → 编辑 → 首选项 → 常规,建议按下图设置

  启用轻击平移

  仅仅是一个滑移效果,占内存又不能提高操作效率,建议关掉。

  根据HUD垂直移动来改变圆形画笔硬度

  功能挺好用的,按Alt+右键左右/上下移动可以分别改变画笔的大小和硬度。

  将矢量工具与变换与像素网格对齐

  强烈建议开启这个功能,这个让你不会产生半像素虚边,十分好用。但在需要微调整时可暂时关闭它。

UI设计师的photoshop配置技巧图文介绍教程

  文本设置

  字体我一般把字体设置为犀利,如果你是Photoshop CC版本,它有一个Windows LCD/Mac LCD抗锯齿功能,文字可以为网页一样效果了,所以建议升级到Photoshop CC吧。

  操作:首先选定文本 → 字符工具(AA)选择Windows LCD/Mac LCD

UI设计师的photoshop配置技巧图文介绍教程

  全局光

  继苹果iOS人机界面指南,你应该把灯光设置为90°。

  操作:图层 → 图层样式 → 全局光 → 90°

UI设计师的photoshop配置技巧图文介绍教程

  网格设置

  现在设计iOS界面都要兼容视网膜(Retina),所以我把每个网格设置为2像素,这样我就不怕图像在视网膜设备下变得模糊了。

  操作:菜单 → 编辑 → 首选项 → 参考线、网格和切片,网格线间隔:4像素;子网格2。或者网格线间隔:2像素;子网格1。我喜欢前者^_^

UI设计师的photoshop配置技巧图文介绍教程

  导出设置

  不管我们是做网页不审设计iOS APP应用程序时,导出图像最好是使用”存储为Web所用格式”来导出。

  这里通过”存储为Web格式…”导出PNG-24为例,其中默认设置比较重要,如下图:

  操作:菜单 → 文件 → 存储为Web格式所用格式

  预设:PNG-24

  透明:勾选

  交错:未勾选

  嵌入颜色配置文件:未勾选 (Photoshop CC版本才有)

  转换为 sRGB:未勾选

  质量:两次立方

UI设计师的photoshop配置技巧图文介绍教程

  Retina显示器设置

  如果你是使用带Retina视网膜的MacBook Pro,你应该确保你是使用2800×1800像素(1440×900点)

  操作:Apple菜单 → 系统偏好设置 → 显示 → 最适合显示器

UI设计师的photoshop配置技巧图文介绍教程

  颜色配置

  颜色配置是极为复杂的一个操作,如果你不是这领域的大神,那么还是老老实实的用推荐的配置吧,这里我选择了Marc Edwards(http://bjango.com/articles/photoshop)的颜色配置选项。

UI设计师的photoshop配置技巧图文介绍教程

  总结

  本指南针是针对UI设计的Phtoshop基本设置介绍,除了以上这些,大多数设计师都会有自己使用的自定义设置,所以如果你有一些技巧设置,欢迎在下方留言处分享给我们。


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

ホットAIツール

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Photoshopワークフローを大幅に高速化できる一般的なキーボードショートカットは何ですか? Photoshopワークフローを大幅に高速化できる一般的なキーボードショートカットは何ですか? Jul 07, 2025 am 12:17 AM

Photoshopショートカットキーをマスターすると、作業効率が大幅に向上する可能性があります。 1。ズームとナビゲーション:Zキーズームツールをアクティブにし、スペースバーがクイックパンキャンバスをドラッグし、Zキーをダブルクリックして画像をウィンドウサイズ、ctrl/cmd/ - ズームレベルに適応させます。 2。レイヤー管理:Ctrl Shift n新しいレイヤー、Ctrl Gグループ、Ctrl Eのマージ層を作成し、層レベルを移動し、ctrlをクリックしてコンテンツをすばやく選択します。 3.選択とブラシの調整:mおよびlは、それぞれ長方形のマーキーとラッソツールを切り替えて、追加/altをシフトして選択を差し引き、ブラシのサイズを調整し、シフトし、硬度を調整して効率的な編集とスムーズな動作を実現します。

「映画のような」外観を作成したり、特定の色グレードを画像に適用したりするにはどうすればよいですか? 「映画のような」外観を作成したり、特定の色グレードを画像に適用したりするにはどうすればよいですか? Jul 01, 2025 am 12:06 AM

写真を作らせるには、「映画の雰囲気」または特定の色の調整スタイルを持っているため、撮影前と後処理を調整する必要があります。コアは、色、コントラスト、光、影の制御、および視覚スタイルの統一された理解にあります。 1.あなたが望む「映画感覚」を明確に識別します。 Nolanの冷たいコントラスト、Wong Kar-Waiの暖かい飽和と青い赤いコントラスト、Coenの兄弟の灰色の低飽和など、さまざまなディレクタースタイルが大きく異なります。トーンと雰囲気を分析するのが好きな映画のスクリーンショットを見つけることをお勧めします。 2。射撃段階は、ポストプロダクションに頼って鈍い写真を保存することを避けるために、ポストプロダクションのスペースを残します。生の形式、適切な未脱エクスポール、簡潔な構成を使用し、「フラット」モードを有効にしてコントラストと飽和を減らします。 3. Lightroomを使用して、基本的な調整(詳細の復元、影の圧力のハイライトの増加)、トーンの分離(ハイライトが暖かく、影がわずかに多いなど、後の色調整の例として取り上げます。

Photoshopで古い写真を復元する方法 Photoshopで古い写真を復元する方法 Jul 12, 2025 am 12:40 AM

古い写真の修理は、Photoshopの重要な手順を通じて達成できます。 1つ目は、高解像度スキャン、トリミング画像、回転補正、輝度/コントラスト調整など、スキャンと予備調整です。 2つ目は、傷と汚れを取り除き、模倣スタンプツールを使用して大型エリアの損傷を扱うこと、小さな傷に対処するための修理ツール、および低い透明性オーバーレイと階層操作に注意を払うことです。 3番目はオプションの着色と色のチューニングであり、「色相/飽和」調整層を使用してレトロなトーンを増やします。最後は、磨きと出力、詳細を確認し、シャープネスを調整し、解像度を確認し、保存する適切な形式を選択することです。プロセス全体には、特にキャラクターの顔の特徴などの重要な部分を扱う場合、忍耐と綿密さが必要です。

Photoshopで言語を変更する方法 Photoshopで言語を変更する方法 Jul 02, 2025 am 12:09 AM

Photoshopのインターフェイス言語を変更する方法は次のとおりです。1。Photoshopを開き、トップメニューバーの「編集」をクリックします。 2。「設定」>「インターフェイス」を選択します。 3.「ユーザーインターフェイス言語」ドロップダウンメニューで目的の言語を選択し、ソフトウェアを再起動して有効にします。この機能は、多言語バージョンをサポートするインストールパッケージにのみ適用できます。オプションが利用できない場合は、単一の言語バージョンがインストールされている可能性があります。 CreativeCloudクライアントを介して他の言語バージョンを再インストールできます。言語パッケージの手動での交換は推奨されません。言語を変更しても、ファイルコンテンツ、関数ロジック、またはショートカットキー設定には影響しませんが、一部のプラグインは元の言語を表示する場合があります。コラボレーションするときは、インターフェイスの一貫性の問題に注意を払う必要があります。

Photoshop内のラスターグラフィックとベクトルグラフィックの違いは何ですか? Photoshop内のラスターグラフィックとベクトルグラフィックの違いは何ですか? Jul 04, 2025 am 12:18 AM

RasterとVectorグラフィックはPhotoshopで使用されており、それらの違いを理解すると、設計の決定に役立ちます。ラスターグラフィックはピクセルで作られており、写真や複雑なテクスチャに適していますが、スケーリングはぼやけます。ベクトルグラフィックは数学的な式に基づいており、ロゴ、アイコン、クリアラインアートに適した損失なしでスケーラブルにすることができます。 PhotoshopでShapeツールを使用するか、EPS/PDFファイルをインポートしてベクターグラフィックスを作成しますが、ラスター化するとスケーラビリティを失います。ラスターの使用には、写真の編集、フィルターの適用、テクスチャアートワークの作成が含まれます。ベクトルの使用には、スケーリングする必要があるロゴの設計、明確なテキストまたは形状の追加が含まれます。どちらも同じファイルに共存できますが、クリアする必要があります

Photoshopで画像モードを変更する方法 Photoshopで画像モードを変更する方法 Jul 01, 2025 am 12:32 AM

Photoshopの画像モードを変更するには、目的に応じてRGB、CMYK、グレースケール、またはビットマップモードを選択する必要があります。 1. RGBおよびCMYKモードの切り替え:「画像」>「モード」をクリックして対応するオプションを選択し、印刷にCMYKを使用し、RGBを使用して画面表示に使用します。 2。「グレイスケール」モードを使用して、「画像」>「モード」>「グレイスケール」へのパスを使用して、白黒写真を変換します。後で色を調整する必要がある場合は、「レイヤーを調整する」を使用できます。 3.ビットマップモードは、ミニマリストスタイルに使用されます。操作は、最初にグレースケールをターンしてから、「画像」>「モード」>「ビットマップ」を選択し、「50%しきい値」などの解像度とメソッドを設定することです。さまざまなモードが目的と効果に影響します。ニーズに応じて選択してください。

Photoshopでベクトル形状をどのように作成および操作できますか? Photoshopでベクトル形状をどのように作成および操作できますか? Jul 14, 2025 am 12:01 AM

to CreateandManipulatevectorshapesinphotoshop、usetheshapeToolStodRawvectorsonshapelayers、editanchorpointswithededirectelectiontool、combineorsubtractshapeSising -shapeSising -dersizeize a andRasterize、firstolst、selectedesiredshapetool-

レイヤーマスクとベクトルマスクの主な違いは何ですか?それぞれを使用する必要がありますか? レイヤーマスクとベクトルマスクの主な違いは何ですか?それぞれを使用する必要がありますか? Jul 16, 2025 am 12:03 AM

LayerMasksとVectormasksは、Photoshopで同様の用途があるが異なる原則で使用されています。 LayerMasksはピクセルに基づいており、グレースケール値を使用してレイヤー領域の表示と隠れを制御します。写真の詳細編集、ソフトトランジションエフェクト、細かいブラシの調整に適していますが、ズームインはジャグにつながる可能性があります。 Vectormasksは、ベクトルパスと形状に基づいており、解像度の無関係な解像度があります。ロゴ、アイコン、テキストフレームなどのクリアなエッジを必要とするグラフィックに適しており、損失を及ぼすことができます。選択は、サイズを大幅に調整する必要があるかどうか、および必要なエッジエフェクト(ソフトまたはシャープ)であるかどうか(写真またはグラフィックス)に基づいています。

See all articles