Photoshop设计淡雅风格的博客网页模板
960网格目前已经在网页设计普遍使用，利用960的分割特点可以很方便的对网页设计中的元素进行分区与排版。本文中就是利用960网格的分块特点设计的一个简洁的博客网页模板。在photoshop中学习制作基于960网格系统的网页模板，你将会学到图层效果和定位元素相关知识。
最终效果预览
第一步
一般在Photoshop中制作网页模板的时候，我使用960网格系统。现而今这个网格系统在web设计中相当流行。然而我仍然相信网格系统不应该被过度的依赖。我使用960的主要原因是它psd文件中自带的参考线可以大大提高web设计的效率。所以我推荐到这里免费下载960。下载完成后用PS打开一个12行的psd文件(960_grid_12_col.psd)，将会看到下面这个文件。
第二步
如果参考线没有打开，请通过-视图>显示->智能参考线和视图->对齐到->参考线打开，快捷键Ctrl+;。以下你看到的是我已经在图中间画好了一个黑色矩形，接下来所有的元素都将包含在这个矩形中。其实你没有必要画这个矩形，因为背景是白色的，如果你觉得有帮助，不妨画之。
第三步
新建一个图层，选择渐变工具然后选择如下图白色到黑色的一个渐变效果。画的时候按住shift使渐变线绝对水平。如果效果上有差异，可以多试几次。
第四步
选择矩形选定工具沿着参考线从左上到右下在第二步中的渐变图中选定如下区域。按ctrl+shift+I反选，然后按delete删除反选区域。
第五步
重复上面两个步骤，让右边也同样加入一个渐变图层，确保它们是对称的。
第六步
新建一个图层组把两个边沿渐变矩形拖入其中，然后选定图层组，将不透明度设置为10%。
第七步
接下来加入两边的虚线效果。如果只需要在css中使用dashed边框，那么这个虚线效果在PS中是没有必要制作的。一个聪明的办法是使用图形变换 工具;首先创建一个新图层，然后按Ctrl+T，然后把这个蓝色矩形稍微下移一些，然后连续按Ctrl+Shift+Alt+T。如果你感觉这个方法复杂 了，可以手动的创建每个蓝色矩形。然后选定所有蓝色矩形，按Ctrl+E将它们合并。然后复制这个图层到右边，做成两个对称的边沿。
第八步
现在加入网页标题和标识性语言，这里我使用到的字体是“Rockwell”。使用同样的蓝色。如果你熟悉色板，一个聪明的办法是分别新建一个蓝色、一个灰色色板以供后续使用。
绛旓細绱犳潗鍥剧墖浠ラ粍缁胯壊涓轰富锛岄鑹茶繕涓嶅缁熶竴銆傝皟鑹茬殑鏃跺欏彲浠ュ厛鎶婂浘鐗囪浆涓鸿緝涓轰腑鎬х殑棰滆壊锛岀劧鍚庡湪鏆楅儴鍙婇珮鍏夐儴鍒嗗姞涓婃兂瑕佺殑涓昏壊锛涘熀璋冨嚭鏉ュ悗锛岃繕闇瑕佺敤婊ら暅鎴栫敾绗旂粰鍥剧墖澧炲姞涓浜涚儫闆炬晥鏋溿傜浉鍏虫暀绋嬶細Photoshop璋冨嚭娓呯函缇庡コ鏈﹁儳鐨勬贰缁胯壊鏁堟灉Photoshop璋冨嚭鏄ュ濂冲鍞編鐨勬棩绯娣￠泤鏁堟灉Photoshop璋冨嚭绾儏濂冲绉嬪榛勮鑹叉晥鏋...
绛旓細鏃ョ郴鐓х墖鐨椋庢牸涓庣绫绘瘮杈冨锛屼絾澶氫互闈欑墿銆佷汉鐗╀负涓伙紝澶氳繍鐢ㄤ晶閫嗗厜鎴栨閫嗗厜锛屼綆楗卞拰搴︼紝浣庡弽宸紝鍔犱笂鍚堢悊鍏夌嚎鐨勮繍鐢ㄤ互鍙婄暀鐧藉鐞嗭紝鏁翠綋鑹茶皟娣￠泤锛岀敾闈㈠共鍑锛岀粰浜轰竴绉嶆伂闈欙紝瀹夎鐨勬劅瑙夈 涓嬮潰杩欏紶鍚庢湡鐨勬晥鏋滃睘浜庢棩绯婚鏍肩殑閫嗗厜绫伙紝绠鍗曠殑鍥涙鍗冲彲鎵撻犲嚭浜涙晥鏋溿傚厛鐪嬫晥鏋滀笌鍘熺墖鐨勫姣斻傛晥鏋滃浘:鍘熷浘:
绛旓細鏈暀绋嬩富瑕佷娇鐢Photoshop璋冨嚭鐡跺瓙闈欑墿娣℃贰鐨勬棩绯椋庢牸鏁堟灉锛屾棩绯荤敓娲绘憚褰变互鍏剁粏鑵诲共鍑鐨勫拰椋庤繀閫熻耽寰楀ぇ瀹剁殑鍠滅埍锛屼綔涓哄勾杞绘憚褰卞笀锛屽緢澶氫汉涔熷枩娆㈣繍鐢ㄨ繖鏍风殑鍒涗綔鎵嬫硶鏉ヨ褰曡韩杈圭殑鎰熷姩銆傞偅浜涘皬灏忕殑椋庡厜閲屾壙杞界潃涓涓汉鐨勫洖蹇嗐佹ⅵ鎯炽佸笇鏈涘拰娓╂煍锛屾拺璧蜂簡涓涓ぇ澶х殑鍐呭績涓栫晫銆傚緢澶氬皬鐗╀欢灏ゅ叾涓婇暅锛岃鎴戜滑蹇嶄笉浣忕敤闀滃ご绗...
绛旓細涔嬪墠鍙戜簡涓缁勫彜椋庣殑鐗囧瓙锛屽緢澶氭湅鍙嬪弽搴旇寰堝枩娆㈣繖绉嶆贰娣＄殑鑹茶皟锛屽笇鏈涜兘鍒嗕韩涓涓嬪悗鏈熺殑涓浜涙濊矾鍜屽績寰椼傛墍浠ユ娊绌烘暣鐞嗕簡涓涓嬶紝鍐欎簡杩欎唤鏁欑▼銆傚熀鏈殑鑹茶皟閮芥槸鍦╨r閲屽畬鎴愮殑锛岀劧鍚庡啀鍒ps閲屽仛涓浜涘悗鏈熺殑璋冩暣銆備笉鍚岀殑鏄紝杩欐杩樺埄鐢ㄥ埌浜哸lien skin exposure4 杩欐鑳剁墖婊ら暅鎻掍欢锛屽叿浣撲綔鐢ㄤ箣鍚庢暀绋嬮噷浼氭彁鍒般傝櫧鐒...
绛旓細缁忓父鐪嬪埌涓绫诲緢鍠滄鐨椋庢牸锛屼絾鏃犱粠涓嬫墜锛屾兂鐭ラ亾楂樻墜鏄庝箞鍋氱殑?鏉ョ湅浠婂ぉ杩欎袱涓皟鑹叉暀绋嬮熸垚鐗堛傛晥鏋滄儕鑹充笉璇达紝浣犲彲浠ュ鍒颁粬灞变箣鐪 鏄浣曡瀵熷浘鐗囷紝寰楀嚭鍚庢湡鎬濊矾锛屾渶鍚庢荤粨鍑哄彲浠ヤ妇涓鍙嶄笁鐨勬柟娉曘傚共璐ц秴澶氾紝鏉ユ敹銆傝繖寮犵収鐗囨湁杩欎箞鍑犱釜鐗圭偣锛氫竴銆佺敾闈㈢殑缁嗚妭姣旇緝涓板瘜锛屽瀹瑰害鐪嬭捣鏉ユ瘮杈冮珮銆備簩銆佺敾闈㈢殑楗卞拰...
绛旓細鏈缁堟晥鏋滃浘锛屽涓嬪浘锛氭枃浠/鎵撳紑锛屾墦寮鍥惧儚锛屽涓嬪浘锛2瀵逛汉鍍忚繘琛岀（鐨鐞嗭紝鏂规硶鏈夊緢澶氳繖閲屼笉璁茶В浜嗭紝鍏剁洰鐨勮浜虹墿鐪嬭捣鏉ュ勾闈掍竴浜涳紝纾ㄧ毊鍚庣殑鏁堟灉濡備笅鍥撅細3鍥惧眰/鏂板缓璋冩暣鍥惧眰/鍙夐鑹诧紝鍙傛暟璁剧疆濡備笅鍥撅細
绛旓細鏈缁堟晥鏋 鍘熷浘 1銆佹墦寮绱犳潗鍥剧墖锛屽垱寤哄彲閫夐鑹茶皟鏁村浘灞傦紝瀵归粍鑹诧紝缁胯壊杩涜璋冩暣锛屽弬鏁板強鏁堟灉濡備笅鍥俱傝繖涓姝ョ粰鍥剧墖澧炲姞娣￠粍鑹层2銆佸垱寤鸿壊鐩/楗卞拰搴﹁皟鏁村浘灞傦紝瀵归粍鑹茶繘琛岃皟鏁达紝鍙傛暟鍙婃晥鏋滃涓嬪浘銆傝繖涓姝ュ揩閫熸妸鍥剧墖涓殑榛勮壊杞负榛勮鑹层3銆佹寜Ctrl + J 鎶婂綋鍓嶈壊鐩/楗卞拰搴﹁皟鏁村浘灞傚鍒朵竴灞傦紝缁欏浘鐗囧鍔犳洿澶...
绛旓細鐩镐俊寰堝鐜╂憚褰辩殑鏈嬪弸閮芥浘缁忛亣鍒拌繃杩欑鎯呭喌锛氬湪鏋佸叾鈥滄伓鍔ｂ濈殑鐜涓嬭繘琛屾媿鎽勶紝鐏厜鏄忔殫锛岃儗鏅潅涔憋紝鐪熺殑鏄媿瀹屽氨涓嶆兂鐐瑰紑鐪嬮瑙堜簡锛岀劧鑰岋紝浠婂ぉ鐨勬暀绋嬪氨鏄潵鎷晳浣犱滑杩欎簺鐗囧瓙鐨!鑳借浣犳浘缁忎互涓虹殑鈥滃簾鐗団濇憞韬竴鍙橈紝鍙樺緱骞插噣閫氶忥紝浠欐皵鍗佽冻!浠嶭R鍓嶆湡璋冭壊鍒PS鍚庢湡绮句慨锛屼竴姝ユ璁茬粰浣犲惉銆傚簾璇濅笉澶氳锛屽厛...
绛旓細鐪嬪埌鍘熷浘鐨勬椂鍊欙紝鏍规湰鐪嬩笉鍑轰粬鍘熸潵鐨勬槸浠涔堣壊璋冿紝鍥犱负鏄儗鍏夋媿鑹诧紝鎵浠ユ垜浠鍦ㄥ悗鏈熺殑鏃跺欑粰鐓х墖杩涜涓涓暣浣撹皟鑹诧紝璋冭壊鐨勬椂鍊欒浜嬪厛鎶婃濊矾鎯冲ソ锛岃繖鏍峰湪璋冩暣鐨勬椂鍊欏氨浼氬績閲屾湁涓ぇ姒傜殑璋冭壊鏂瑰悜锛屽洜涓烘垜浠皟鐨勬槸绮夌孩鑹茶皟锛屾墍浠ラ渶瑕佸幓璋冩暣HSL锛岄氳繃涓绯诲垪鐨勮皟鏁磋揪鍒版垜浠兂瑕佺殑绮夌孩鑹茶皟锛岃皟鏁翠互鍚庝綘浼氭參鎱㈢湅鍒...
绛旓細鎴戜釜浜烘瘮杈冨枩娆㈣繖涓壊璋冿紝鍥犱负棰滆壊绋嶅井杩囨洕浜涳紝姣旇捣娓呮柊锛屾洿澶氱殑缁欎汉鐏跨儌鐨勬劅瑙夛紝閰嶅悎鏃ョ郴鏈嶈鑳藉甯︽潵娴撴祿鐨勭殑鏃ョ郴闃冲厜鎰燂紝涓撻棬鎷晳鑹插僵寰堝钩瀹炴櫘閫氱殑鍘熷浘銆傜涓姝ワ細鐓х墖鐨勭涓姝ヤ竴瀹氭槸鍏堟妸鏇濆厜鍜屾槑鏆楀叧绯绘仮澶嶆甯革紝鍒嗘瀽鍘熷浘锛岃儗鏅洕鍏夋甯革紝浣嗛潰閮ㄥ亸鏆楋紝鎷夐珮鏇濆厜鍜屽姣斿害锛屾彁楂樼櫧鑹茶壊闃跺拰闃村奖锛岀紦瑙ｆ殫閮ㄧ殑姝...
