検索
ホームページウェブフロントエンドhtmlチュートリアルフロントエンドエンジニアが設計を完了する方法

フロントエンドは接続する位置であり、その位置の特殊性のため、デザインとバックエンドの基礎知識を理解する必要があります。この記事は、デザイン作業を置き換える方法を教えるものではなく、フロントエンドがいくつかの単純なデザインタスクをより迅速かつ便利に実現する方法と、ツールを使用してデザイナーなしで UI プレゼンテーションの問題を解決し、作業を効率化する方法を説明するものです。半分の労力でできます。

Photoshopの使用

フロントエンドエンジニアの多くは、デザイナーが作成したPSDなどの形式の写真をプロジェクトに必要なサイズに切り抜き、ページのプレゼンテーションを実現する経験を持っているフロントエンドエンジニアの資格が必要です。 Photoshop のいくつかの機能を十分に理解し、習得するための実践的な Photoshop スキルをいくつか紹介します (Adobe Photoshop CS5 を例にします)。

1.写真のサイズを変更します

インターネットで写真を見つけたり、Web ページでプレゼンテーションするためにデザイナーから写真を入手したりしたが、写真のサイズに満足できない場合は、Photoshop を使用して調整するだけで済みます。手順は非常に簡単です。以下の通り:

(1) Photoshopを使用して画像を開き、「画像」をクリックし、「画像サイズ」を選択します

フロントエンドエンジニアが設計を完了する方法

(2) 希望の幅と高さを変更します

フロントエンドエンジニアが設計を完了する方法

ここでは通常、ピクセルサイズを変更します。変更する場合、下の「比率を固定」にチェックを入れないと、画像が引き伸ばされて変形する可能性があります。つまり、スケーリングベースです。元の画像の比率に応じて。

2.ローカルカラーを調整します

画像の部分的な色を変更する必要がある場合、たとえば、下の画像の背景を黒に変更したい場合は、[選択] -> [色の範囲] -> 背景領域を選択します。 > 色の許容値を調整するだけです

(1)選択範囲

フロントエンドエンジニアが設計を完了する方法

(2) OKをクリックしたら色を塗りつぶします

フロントエンドエンジニアが設計を完了する方法

もちろん、「色の範囲」以外にも「なげなわツール」や「選択範囲ツール」を使って選択範囲を作成することもできますが、ここでは紹介しません。 。

3. ワンクリックで写真を切り取る

画像の切り取りは、画像の切り取りプロセス中に、レイヤーが複雑すぎて画像が小さすぎる状況に遭遇した場合、画像全体を拡大して拡大する必要があることがよくあります。必要なものを選択するために追加のレイヤーを非表示にします。これは時間とエネルギーの無駄です。 Photoshopのアクション機能を使って、ワンクリックで写真を切り取る効果を実現する方法を紹介します。

(1) アクションのダウンロード
ここをクリックしてアクション ファイルをダウンロードしてください:
http://note.youdao.com/yws/public/resource/f76824c23bf702ce3f90f7a76feb6b32/D18D5FB28FE5417A8CD4D3CDA615EDB4

(2) アクションの読み込み
フロントエンドエンジニアが設計を完了する方法フロントエンドエンジニアが設計を完了する方法

ダウンロードしたアクションファイルをロードします

(3) アクションを使用する

読み込みが完了したら、任意の psd ファイルを開きます。手順は次のとおりです。

a. まず「移動ツール」を選択し、「自動選択」にチェックを入れます

b. 切り取りたいアイコンをクリックすると、レイヤーパネルに対応するレイヤーが配置されていることがわかります
c.アイコンが
d に切り替わりました。F3 を押して、Web で使用される形式で保存します

フロントエンドエンジニアが設計を完了する方法フロントエンドエンジニアが設計を完了する方法

Photoshop には多くのスキルがありますが、上記ではフロントエンドでよく使用されるスキルを 3 つだけ挙げています。このような実践的なスキルを知っていれば、時間と労力を大幅に節約できます。

ツールとウェブサイトの使用法

1.画像圧縮

画像を圧縮する場合は、Photoshop を使用して品質を変更するだけでなく、glup、grunt などのいくつかの自動圧縮ツールを使用することもできます。

上記の開発環境やツールをお持ちでない場合は、画像を圧縮するための Web サイト (アドレス: https://tinypng.com/) をお勧めします。

インテリジェントな非可逆圧縮技術を使用して、画像内の色数を選択的に減らすことで、保存されるデータのバイト量を削減します。その効果はほとんど目に見えませんが、画像のサイズを大幅に縮小できます。

公式ウェブサイトの例を通して、圧縮前後の 2 つの写真の変化を比較してみましょう:

フロントエンドエンジニアが設計を完了する方法

同じ写真でも、圧縮後は圧縮前よりもサイズが 1/4 近く小さくなりますが、画像の鮮明さは圧縮前と同じです。

2.アイコンダウンロード

多くの場合、チームにデザイナーが不足していたり​​、デザイナーが不在の場合、プロジェクトでロゴやアイコンが必要な場合は、実際に自分たちで行うことができます。 Baidu で検索された写真のほとんどは私たちのニーズを満たしていません。ここでは、アイコン リソースが豊富にある、比較的使いやすいアイコン ライブラリをお勧めします。アドレスは http://www.easyicon.net です。 /

下の図に示すように、多数のアイコンを検索するために必要なアイコン名を入力するだけです:

フロントエンドエンジニアが設計を完了する方法

必要なアイコンを選択すると、詳細なダウンロード ページが表示され、PNG、ICO、アイコンなどの必要なアイコン形式を選択できます。次のように、ダウンロードする必要なアイコンのサイズも選択できます。

フロントエンドエンジニアが設計を完了する方法

あなたのアイコンのニーズを満たすことができるのはこのウェブサイトだけだと思います。

3. フォントのダウンロード

ここでのフォントは主に単色のフォントアイコンを指します。現在、多くの Web サイトアイコンはフォントの形で埋め込まれているため、Web ページ内の画像リクエストの数をある程度削減し、メンテナンスを容易にすることができます。ここでは、いくつかの人気のあるフォント アイコン ライブラリをお勧めします:

(1) Alibaba ベクター アイコン ライブラリ: http://www.iconfont.cn/

タオバオのアイコン ライブラリを通じて、必要なフォント アイコンを簡単に管理してダウンロードしたり、アイコンを作成してアップロードしたり、お気に入りのアイコンを収集したりすることもできます。

(2) icomoonアイコンライブラリ:https://icomoon.io/

これは一連のフォントアイコンリソースも提供している海外のウェブサイトです。アイコンのダウンロードや収集などの機能もありますが、一部のフォントアイコンは有料です。

(3) fontawesome アイコン ライブラリ: http://fontawesome.io/

Fontawesome は、インポートされた CSS ファイルの形式でロードされるアイコン ライブラリであり、ミッドエンドおよびバックエンド プロジェクトの開発に適しています。

4. テンプレートのダウンロード

ここでのテンプレートは、PSD 形式のファイル、または JPG などの画像形式のファイルにすることができます。通常、多くのデザイナーはこれらの Web サイトから素材やインスピレーションを探します。そのため、それらを直接参照してプロトタイプを作成するのに非常に役立ちます。もちろん、これはデザイナーが不足している場合にフロントエンドがページ デザインを迅速に実装するための近道でもあります。

(1) UI China: http://www.ui.cn/

(2) UE デザイン プラットフォーム: http://www.uehtml.com/
(3) UI メーカー: http://www.uimaker 。 com/
(4) Hiiishare: http://www.hiiiishare.com/
(5) XueUI.com: http://www.xueui.cn/

ライブラリフレームワークの使用法

ここでいうフレームワークとは、主にフロントエンド開発におけるUIフレームワークを指します。UIフレームワークを適切に活用することで、ページを美しくしながら作業効率や開発コストを向上させることができます。

1.PCに適しています

(1)ブートストラップ: http://www.bootcss.com/

Bootstrap は、導入後、フロントエンド開発者の作業を大幅に促進しただけでなく、バ​​ックエンド開発者によるフロントエンド ページの構築も容易になりました。

(2) flat-ui: http://www.bootcss.com/p/ flat-ui/

flat-ui は、無料の WEB インターフェイス ツール コンポーネント ライブラリです。その UI スタイルは非常にフラットで、Bootstrap よりもシンプルでコンパクトです。

(3) jQuery-ui: http://jqueryui.com/

jQuery-ui は jQuery の公式 UI ライブラリであり、CSS スタイルの美化を改善するだけでなく、開発者が使用できる一連の JS コンポーネントを提供し、カスタマイズ機能もサポートします。

2.モバイル端末に最適

(1)財団: http://foundation.zurb.com/

Foundation は、サイズが小さく、応答性の高いレイアウトを提供するモバイルファーストの UI ツール ライブラリです。

(2)Amazeui: http://amazeui.org/

Amazeui は、中国初のオープンソース HTML5 クロススクリーン フロントエンド フレームワークです。モバイルファーストのコンセプトにより、モバイルインターネットのトレンドに適応するために、小さな画面から大きな画面へ徐々に拡張し、最終的にはすべての画面への適応を実現します。

(3)MUI: http://dev.dcloud.net.cn/mui/

MUI は、ネイティブ APP エクスペリエンスに最も近い高パフォーマンスのフロントエンド フレームワークであり、サードパーティの JS ライブラリに依存せず、軽量であることが重要な特徴です。

3.その他

現在のリッチ アプリケーション フレームワークの流行により、多くのフロントエンド JS フレームワークには、Vue の vux、vue-starp、React の ant-design など、独自の UI フレームワークの選択肢があります。これらのフレームワークの誕生により、優れた機能が提供されます。高速ワンストップのフロントエンド ソリューションにより、フロントエンド グラフィック デザインのアプリケーションがますます繁栄します。

概要

ウェブサイトの実現は、デザイナーの美化とプロダクトマネージャーの計画から切り離せません。フロントエンドはこのステップの重要な部分にすぎず、このステップを置き換えることができる部分ではありません。このような状況下で、ツールや知識を最大限に活用して欠点を補い、最終的にはユーザーにとってよりフレンドリーな方法でコンテンツを提供します。

元の記事、老布 - Blog Garden [http://www.cnblogs.com/luozhihao] から転載する場合はその旨を明記してください

この記事は、WeChat 公開アカウント: フロントエンド フラフープ (Love-FED) で最初に公開されました

同期出版: http://www.cnblogs.com/luozhihao/p/5887254.html

https://segmentfault.com/a/1190000006947487

http://www.jianshu.com/p/b7690cc8893f

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

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか?HTMLは初心者のために簡単に学ぶことができますか?Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか?HTMLでの開始タグの例は何ですか?Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は?メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか?オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか?Apr 05, 2025 pm 01:21 PM

WebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

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

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

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

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境