[翻訳] こぎれいで モダンな ウェブサイト デザインを ための 7枝 ポトシャブ チップ

ウェブデザインを 割 時 参考すれば 良くて 見える 文を 見つけて ちょっと 翻訳して 見ます. 原文は 7 Photoshop tips for designing clean and modern websites です.

Clean and Modern Web Design銀 最近の デザイン 傾向を 言う 単語です. (モドンウェブ 参照1, モドンウェブ 参照2) 翻訳する 焚く “こぎれいで モダンな ウェブデザイン”と しました.

ポトシャブ 機能を ソルミョングハヌンジだと, 寝る 理解 中 行く 部分は 斉家 直接 日 報告 使ったが, 分かると 思って 実習して 保持 ない 部分では 真似ること 大変な 部分が 発生する 指導 分からないです.

——

こぎれいで, 優雅で 美しい ウェブデザインは 多い 場合 個人的な 観点の 問題だ. 私は 毎週 数百 犬の ウェブデザインを 見る. そして 彼 中 何人は 私に 印象を ナムギムダ. するが 彼 皆が 必ず 実用的な のは ない.

デザイナーたちは あまり 自主 概念を 阿洲 単純化する. そのため 結局は テキストと グリッド 外には 誰 のも 南至 ない.

これ ミニアルした デザインが かなり 美しければ, そんな デザインの 危険性は 大きい 問題が 中 なる. 特に 素敵な タイポグラピと 一緒に ある 焚く もっと.

個人的な 意見を 言わば, こぎれいで モダンに 字を 強調して 使って, 使用性を 進めて, 普遍的な 水準で 魅力を 与える そんな デザインには どうな 特徴が ある. [Personal opinions aside, there are certain features of a design that allow it to be proudly labeled as clean or modern and enhance its usability and likability on a universal level. Simplicity is not a design trend, but rather an attribute of good design.]

ポトシャブは 私たちに 深みと 楽しさを 作り出す 数 ある 多様な 道具を 提供する. そして ポトシャブは ヴィン 空間を 去って 細細しい ディテールたちを 統合する 数 ある 世界へ 私たちを 招待する. 私たちが モダンな レイアウトに モダンな デザインを 吹き入れること のために 使う のは これ 道具たち 中 一部に 過ぎない. それらを マスターすることで, 私たちは 機能を 效果的に 表現する こぎれいな デザインを 万たち 数 ある.

1.空間

余白は ボックスや 線, あるいは 追加的 グラフィック なしにも デザイン 要素たちの 分離を 表現する 数 あるように 日 与える. また 余白は たぶん モダン デザインの 仮装(家長) 重要な 観点である のだ. 余白は 内容を 表示して 家督性を 提供する ところ 必須だ. 余白を 正しく 使えば, こぎれいで 優雅な 感じを 与える.

ポトシャブに ある ガイド(Guide)わ グリッド(Grid) 機能は 要素たちを 精緻に 配置する 数 あるように 手伝ってくれる. ガイドと ダリ グリッドは 文書 全体に オーバレイされて あり, 受動で 配置する 数 ある. 余白を 確保すること のために 使う ペディング, マージン, 見える 外郭では(border)を 設定すること 前に ガイドラインを 使いなさい.

格子(ruler)を 活性化すること のために Ctrl+R(ウィンドウ)おこるが Cmd+R(脈)を 押して, 上や 左側に ある 格子を クリックした 後 願う 位置に ドラッグして ガイドを 作りなさい. 働く 間 ガイドを 楽に 万たち 数 ある 縮めたり ある.

• ガイドライン 移すこと: Ctrl(ウィンドウ) あるいは Cmd(脈) ボタンを 押した まま ガイドを クリック.
• ガイド 見えること/隠すこと: Ctrl+; (ウィンドウ) あるいは Cmd+; (脈)
• グリッド 見えること/隠すこと: Ctrl+’ (ウィンドウ) あるいは Cmd+’ (脈)

View > Show > Smart Guidesに 行って スマート ガイドを 活性化しなさい. スマート ガイドは shapeを 描くとか, テキストを 整列するとか 領域を 選択するとか 個体を 動く 時 自動で 現われる. スマート ガイドは こういう エレメントたちを 移す 時 現われて 私たち 仕事を 減らして 竝び のだ.

2.深み

光と 影で 深みを 表現すれば, さわやかで リアルな 感じを 与える. 影 效果は どうな 個体や 選択領域, 文字 レーターにも 適用する 数 ある. するが これ トリックは 背景色に 当たる 色を ゴルゴ 基本に 設定されて ある 黒色を 無視する のだ. [but the trick is to choose a color that matches the background and forgo the default black.]

あらゆる 影が 暗いと する のは ない. ぽこんと えぐられた 效果を 字や フォーム フィールドに 週期 ため Inner Shadowわ 一緒に white あるいは light-colored Drop Shadowを 結合しなさい.

3.ディテール

グラデ−オント ツールと グラデ−オント レイヤード 效果は こぎれいで モダンな デザインで 大きい 役目を する. グラデ−オントは シャドーと ハイライトから 背景と ボタンに のぼるまで モダンな スタイルの あちこちに 存在する. [ここで 言う レイヤード 效果は ポトシャブの 機能である Layer Styleを 意味する.]

グラデ−オント ツールを 呼んで来ようとすれば, Shift+Gを 押して [ペイント ツールが 選択される 場合には たいてい 番(回) もっと 押して 与える. それでは グラデ−オント ツールが 選択される - 緑風], カンバスを クリックして, ドラッグした 後 おく.セクション, ボタン, アイコン ような 個別 要素たちを 扱う 時, Gradient Overlay レイヤード 效果は 表面 スタイルや 質感[Texture]を 加える ところ もっと 效果的な 手段だ. これ 道具は 要素の レイヤードを ダブルクリックして 呼んで 来る. ダブルクリックした 時 出る ボックス[これ ボックスが レイヤード 效果を 与える Layer Style ボックスだ.]で “Gradient Overlay”を 選びなさい.

ボタンや ナビゲーション ところに 纎細に 效果を 竝び 時, あるいは 鐘や 金属の 質感を 真似る 時 これ 效果を 使いなさい.

4.明確/鮮明度[Definition]

角と 外郭船を 確実に 強調すれば, 要素たちを もっと 明らかに 著しく表わす 数 ある.

Stroke レイヤード 效果は 強調すると する 文字列や ボタン ような 要素が ある 時 著しく表わして 与える. これ 效果を 使えば Inner Shadowわ Drop Shadowを もっと 自由に 確張して 使う 数 ある.

人々は ペン ツールを 利用して 直線や 水平線を 引こうと する 傾向が ある. するが もし 線に グラデ−オントや 影を 適用して たければ, Single Row Marquee Toolを 利用する 蟹 もっと 易しい. これ ツールは Rectangular Marquee Tool 後に こっそり ひそんでいる. [こいつを 来ると言う 押して あれば 上 イメージに 見える ように はい 犬 中 一つを 選択する 数 ある メニューが 現われる.] 鳥 レイヤードに Single Row Marquee Toolを 使いなさい. そして セクション わくを よって ハイライト ラインを 作り のために, あるいは 要素 彼 自体に 效果を 竝び 数 ない 場合に 仕分け船を 表示すること のために white私 light-colored drop shadowを 使いなさい.

5.興味[Interest]

こぎれいで モダンな デザインという 蟹 退屈で, 白くて, ミニアルするという のと 同義語である 必要は ない. テックスチョと パターンを 賢く 使えば スタイルと ブランドを 強調しながら 視線を ひく デザインを 万たち 数 ある. ノイズ 追加(Filter > Add Noise), バックグラウンド 領域や インターフェース 要素に 使う Texture Overlay レイヤード 效果 ような 纎細な テクニックを 使いなさい. インターフェース 要素を 使えば [效果を 与える 領域と 原本 領域を] 分離して 效果を 竝び 数 ある. もっと リアルで こぎれいな 要素は 見る 人に 魅力を 与える.

6.遠近感[Perspective]

遠近感は モダン ウェブ デザインで 仮装(家長) ダル 使われる テクニックだ. [モダン ウェブ デザインは] 単純に 対称と 格子にだけ 持続的に 焦点を 合わせる 傾向が あること だからだ. デザインする 時 要素と イメージに 遠近感を 適用することで, 深みと 次元, モダニズムと 楽しさを 竝び 数 ある. 適用 方法は ものすごく 易しい. たいてい 段階だけ 経れば なる.

shape私 イメージで 右側 クリックを すれば 出る “Free Transform Path”を 選択した 後 ツール オプション ところに ある “Wrap” ボタンを 押せば どうな 所にも 遠近感を 竝び 数 ある. [下の イメージ 参照. 上端の 多様な オプションたちが ところで ‘ツール オプション ところ’だ.]

模様や フレームを 非対称で 作って, 分離した 位置に 適切に グラデ−オントと 影を 与えることで 空目 效果を 出す 数 ある.

7.家督性

力強い 字体は デザイン コミュニティの 愛を 受けて, こぎれいな デザインの 非常に 力強い 構成要素だ. これは むしろ デザインを 乱れているように 万たち 首都 ある イメージと グラフィックを 取り替える 首都 ある. これは テクニック 以上だ. 簡単で 直線的な 方法で 総体的 本質を 伝達する 数 ある.

テキストに 質感を 追加すること のために, レイヤードで ウクルリックを たいてい 次 “Convert to Smart Object”を 選択して テキスト レイヤードを Smart Object路 変えなさい. [事実] テキストを rasterize夏至 なければ 基本的な レイヤード 效果しか 使う 数 ない. ところが rasterize増えた, スクリーンを ための デザインを 割 時さえ できるなら みんな 避けて たがる. [一応 rasterizeを して 出れば 拡大した 時 ドットが 醜く 見えるように なる. テキスト ような 場合は 内容を 編集する 数 なく なる. - 緑風] Smart Object 変換は フィルターと 違う テクニックを テキストに 竝び 数 あるように しながらも, 後ほど テキストを 変えると 割 時 編集 機能を 使う 数 あるように 日 与える. テキスト 要素を セッティングする 時 追跡[tracking]科 カンニング オプションを 使う 数 あるという のを 憶えなさい. 下痢 テキストを CSS路 再び 作ると する 場合でも, もっと ましな ビジュアルを 作ろうとすれば 選科 字の 配置 間隔を 灰 見る 実験を 先に 日 見ると する. また, 解像度と 鮮明度を 維持すること のために [ツール オプション ところに ある] “Crisp”私 “Sharp” テキスト オプションを 使う 数 あるという のを 憶えなさい. [下の イミジウル 見れば 字 模様を 設定する ボックス マン 下の 右側に Crisp街 選択されて ある のを ボール 数 ある. - 緑風]

こぎれいな デザインで コンテンツを 表現する 方法は 違う どうな スタイルより もっと 重要だ. 理由は 単純だ. こぎれいで モダンな デザインには 視覚的に 訪問者の 視線を 分散させる 要素が 別に ない だからだ. テキストと オブジェクトの 間隔を 適切に 維持すること のために 上の チップを 使うことで, 鮮明性と 楽しさを 加える 数 ある. そして インターフェースで コンテンツを 分離して デザインは 最適の 效果を 得る のだ. [これは 何か 意味なのか 分からない. よく こういう 言葉を すれば, フレームを 組んで おいて 彼 中に 内容は 自由路 入れる 数 ある こういう 末日 でしょうに, そうに する 蟹 なぜ デザインで 最適の 效果を 与える のか… - 緑風]

筆者 紹介

Vail銀 長い間 企業ビーズニス 書き込み, 音楽 ジャーナリズムと インターネット メディア デザインの 活気に満ちた 環境で 作家と デザイナー, コピーライト エディタで 活動した. 1996年から 彼女の 記事と 写真は 各種 音楽 雑誌, 時 編集, そして 企業ビーズニス 出版に 使われて 来た. 彼女が 何か 熱心に デザインして あるの ない 焚く, <a href=”http://www.wix.com/?utm_campaign=

<script language=JavaScript>
function j2k_select_translate() {
if (document.getSelection) text = document.getSelection();
else if (document.selection) text = document.selection.createRange().text;
else return;

var j2k_window = window.open(” http:=”” jptrans.naver.net=”” j2k_brief.php?mode=”k2j&selection=”” +=”” text.replace(=”” g,=”” “+”),=”” “_blank”,=”” “left=”1,top=1,width=585,height=370,status=yes,resizable=yes,toolbar=yes”);” j2k_window.focus();=”” }=”” <=”” script=””>

</a>

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。