Web レンダリングの新しいアイデア design_html/css_WEB-ITnose

Web デザインのプロセスでは、通常、レンダリングは Photoshop を通じて行われ、Web ページのスタイル効果を作成するために数十または数百のレイヤーとさまざまな PS エフェクトがあり、ブロックに分割することも簡単です。画像を作成するか、そこから直接画像素材を取得します。

しかし、現在のレスポンシブ Web サイトのデザインでは、コンテンツが流動的なレイアウトを使用しているため、それぞれの状況に対応した PS レンダリングを行う必要があり、これは膨大な作業量であり、現実的ではないと思われます。さらに、Web ページ内の要素のサイズや背景を変更する必要がある場合、PS レンダリングを手動で変更するのは悪夢のような作業です。

これは、デザインプロセスと使用されるツールについての新しい考え方につながります。現実のさまざまな使用環境に可能な限り近づけてカバーできると同時に、変更も容易にできるでしょうか?その答えは、PS でレンダリングを作成する元の方法を放棄し、代わりに HTML と CSS を使用して実際の基本的な Web ページ効果を構築し、最終的にスクリーンショットの形式でレンダリングを取得して顧客に表示することです。顧客が特定の場所に変更を加えた場合、CSS のコードを 1 ～ 2 行修正するだけで済む場合もあり、戻って変更を実装するのは非常に簡単です。望ましい結果を得るために変数の値を変更します。これらは、従来の Photoshop レンダリングの修正では想像もできません。

おそらく、スタイル設計とフロントエンド コード構築機能が混乱しているとしてこれを批判するでしょうか?実際、HTML や CSS などはレンダリングを行うためのツールにすぎません。もちろん、Web サイトのエフェクトの概要は前後とも同様ですが、これは最終的なフロントエンド コードではなく、基本的なエフェクトの表示にのみ使用されます。結局のところ、Web サイトのフロントエンドに実装されるコードは、バックグラウンド出力のブラウザーの互換性にも関係します。これらはまったく別のものであると言えます。

これにより、Web デザイナーは Photoshop を使用せずに基本的なフロントエンド言語を学習する必要が高くなります。新しい時代では、Web デザインはグラフィック デザインのようにグラフィックや画像に特化することはできなくなり、Web テクノロジーと組み合わせてデザインを現実に近づけ、無駄な重複作業を減らす必要があります。おそらく Photoshop は依然として固定レイアウト デザインに最適なツールですが、流動的なレイアウトとレスポンシブ デザインの波が押し寄せる中、従来のデザイン プロセスを打破し、それを Web テクノロジーと組み合わせることでのみ、時代の先を行き、将来的に勝つことができます。 。