Photoshop设计黑色大气的网页模板
在这篇网页设计教程里，你将学习制作可以用于整站的一个既优雅又专业的网页，我们将用到Photoshop软件里的一些基本的工具，比如：笔刷和图层等。而且在教程下方包括了此网页的HTML/CSS/JAVASCRIPT模板和素材，你可以下载用作学习或使用都可以。下面先预览一下本教程的最终效果：
教程开始：
第一步：新建文件打开PS软件，点击文件-新建命令或Ctrl+N键新建文件，设置宽度1020px，高度1180px，背景默认为白色，点击确定即可;
第二步：创建导航背景我们将从header开始我们的设计，所以我们先用矩形选框工具，在画布上新建一个矩形选框，如图所示，填充颜色#393939;
第三步：修饰导航背景Ctrl+J复制导航背景图层，激活背景图层副本，点击滤镜-杂色-添加杂色，参数设置如图所示：
然后设置图层的混合模式为叠加，不透明度设为23%;
第四步：创建网页logo和name对于教程中的logo，我使用了Georgia字体并设计为粗体并倾斜，设置‘SIX’的颜色为#FFFFFF，‘STUDIOS’的颜色为#F7E5C4，logo旁边的图片用的是素材中的boxupload32图片。样式如图所示：
第五步：加入导航链接活动链接的颜色我用的是#DBD1BE，普通链接用的颜色为：#ABAAAA。
为了使活动链接显示的更突出，在其后便添加一个矩形框。选择圆角矩形工具，设置半径为5px，前景色为#464646,然后在活动链接处添加矩形背景，样式如图：
给矩形背景图层添加内阴影和描边效果，具体设置参数如图：
第六步：给特色区域添加背景在我们网页布局的顶部，需要有一块特色区域，这块区域通过播放幻灯片将网站的特色内容展示给来访者。这块区域也可以同时包括对网站的介绍等，第一步我们需要做的就是利用矩形选框工具选中这块区域，然后在此矩形选区中填充颜色#D3CAB8。
然后你需要下载
绛旓細鏈缁堟晥鏋 1銆侀鍏堟垜浠妸鏁翠綋鎷嗗垎涓洪┈澶村強鏂囧瓧锛屽涓嬪浘銆傞┈澶撮儴鍒嗙殑鏁欑▼璇风偣杩欓噷鏌ョ湅銆2銆佷繚瀛樹笅鍥炬墍绀虹殑鍥剧墖绱犳潗锛屾柊寤轰竴涓1024 * 700鍍忕礌鐨勬枃浠讹紝鑳屾櫙濉厖榛戣壊銆傛墦寮淇濆瓨鐨勭礌鏉(PNG閫忔槑鏍煎紡)锛岀敤榧犳爣鎷栧埌鏂板缓鐨勬枃浠堕噷闈3銆佹妸鎷栬繘鏉ョ殑鏂囧瓧瑙ｉ攣锛屾槸鐨勭Щ鍔ㄤ綅缃紝涓庨┈澶存嫾鎺ュソ銆傜劧鍚庨攣瀹氬浘灞傚儚绱犲尯鍩燂紝濡...
绛旓細鍗庝附澶ф皵鐨勯捇鐭冲瓧鍒朵綔鏁欑▼瑕佸埗浣滃嚭鐙壒鑰屽崕涓界殑閽荤煶瀛楋紝鏃犻渶绻佸鐨勭汗鐞嗙礌鏉愶紝鍙渶鍑犱釜绠鍗曠殑姝ラ銆傞鍏堬紝鍦Photoshop涓紝閫氳繃Ctrl + N蹇嵎閿柊寤轰竴涓枃妗ｏ紝璁剧疆灏哄涓1000 * 680鍍忕礌锛屽垎杈ㄧ巼72鍍忕礌锛岃儗鏅鑹查夋嫨榛戣壊銆傛帴鐫锛屼娇鐢ㄦ枃瀛楀伐鍏凤紝灏嗘枃瀛楅鑹茶涓虹櫧鑹诧紝杈撳叆浣犳兂瑕佺殑鏂囧瓧锛屽缃戝潃"www.pc841.com...
绛旓細鍦ㄦ湰鏁欑▼涓紝鎴戜滑灏嗕娇鐢photoshop鐨3D鍔熻兘瀛︿範濡備綍鍒涘缓涓涓湁瓒ｇ殑铻烘棆涓┖鐞冧綋銆傛湰鏁欑▼浣滆呰澶у鐪嬪埌鏇存竻鏅版槗鎳傜殑杩囩▼鍥撅紝杩樻墦鍖呬簡PSD缁欑闉嬩滑鍊熼壌瀛︿範锛屽緢鐢ㄥ績銆1銆佹柊寤轰竴600*340px鏂囦欢銆2銆佹寜鐓у涓嬫墍绀鸿缃笎鍙樺伐鍏枫3銆佹部鐫鐢诲竷涓ぎ鍒拌竟缂樼殑杞ㄨ抗缁樺埗涓鏉℃笎鍙樸4銆佹柊寤哄浘灞傦紝鍒╃敤鐭╁舰閫夋宸ュ叿缁樺埗濡備笅...
绛旓細鏈暀绋嬩富瑕佷娇鐢Photoshop鍒朵綔鏃跺皻澶ф皵鐨51閲戝睘瀛楁暀绋嬶紝鏁堟灉瀛楃敱涓夐儴鍒嗘瀯鎴愶細琛ㄩ潰瀛椼佺珛浣撻潰銆佺伀鐒拌儗鏅傝〃闈㈠瓧鐢ㄥ涓姞濂藉浘灞傛牱寮忕殑鏂囧瓧鍥惧眰鍙犲姞锛屽緱鍒伴攬杩瑰瓧鏁堟灉锛涘啀鐢ㄨ〃闈㈠瓧绛夋瘮渚嬪鍒跺緱鍒扮珛浣撻潰锛涙渶鍚庣敤鐏劙绱犳潗瑁呴グ鑳屾櫙锛屽嵆鍙緱鍒颁笉閿欑殑鏁堟灉銆傛暀绋嬫墍闇瑕佺殑鍥炬绱犳潗锛歁issYuan_鏁欑▼鍥炬绱犳潗.rar 鏈缁堟晥鏋 1...
绛旓細澶嶅埗涓灞傚浘灞(CTRL+J)鎵撳紑ACR锛屽鐓х墖鏁翠綋杩涜涓涓嬭皟鏁 澧炲姞涓鐐瑰姣斿害锛屾彁楂樺厜銆佺櫧鑹叉粦鍧楋紝闄嶉槾褰便榛戣壊婊戝潡锛岃繖鍑犳閮芥槸涓轰簡澧炲姞鐢婚潰鐨勫姣斻傛彁鍗囦竴鐐规竻鏅板害锛岃绀佺煶浠ュ強娴锋氮鏇村姞閿愬埄銆傞檷浣庝竴鐐硅嚜鐒堕ケ鍜屽害锛屽洜涓轰笂闈㈡彁楂樹簡涓嶅皯瀵规瘮搴︼紝棰滆壊灏辨湁鐐硅繃浜庨矞鑹筹紝浜庢槸闄嶄綆涓鐐硅嚜鐒堕ケ鍜屽害銆
绛旓細3銆佸鑳屾櫙浜戝眰鍜屽湴闈㈣繘琛岃皟鑹诧紝骞剁敤榛戣壊鐢荤瑪鍘嬫殫鍥涘懆锛岃浠栦滑杩囨浮鏇磋嚜鐒躲4銆佸鑳屾櫙浜戝眰杩涜寰勫悜妯＄硦锛屽鍔犵旱娣辩┖闂淬傚鍦伴潰杩涜0掳鐨勫姩鎰熸ā绯婏紝澧炲姞閫熷害鎰燂紝娉ㄦ剰锛1銆佸湴闈㈠拰鑳屾櫙浜戝眰鑹插僵骞宠 璋冩暣锛屾殫閮ㄥ拰涓棿璋冨亸鍐凤紝楂樺厜璋冨亸鏆栥2銆佸湪鍦伴潰闈犺繎浜戝眰鑳屾櫙鐨勯儴鍒嗙敤鎺ヨ繎鑳屾櫙鐨勯鑹插埛涓涓嬶紝鎵ц鍙犲姞鏍峰紡锛屽苟...
绛旓細Step 5:鍒涘缓榛戣壊鐨勬弿杈 澶嶅埗鐧借壊鐨勬弿杈瑰浘灞 (Command/Ctrl + J) 鐒跺悗鍚戝彸绉诲姩1px ,浣跨敤姗＄毊鎿﹀伐鍏 (E) 璁╁畠鐪嬭捣鏉ヨ垝鏈嶄竴浜涖係tep 6: 澧炲姞鎶曞奖鍜岄珮鍏 閫夋嫨 Metal Part 鍥惧眰浣跨敤鍔犳繁涓庡噺娣″伐鍏(O)澧炲姞涓浜涙姇褰卞拰楂樺厜銆傝瀹冩洿鏈夊姣旓紝绐佸嚭璐ㄦ劅銆係tep 7:閲戝睘璐ㄦ劅 鏂板缓涓涓眰, 浣跨敤鐭╁舰宸ュ叿濉厖涓涓...
绛旓細闄嶄綆鍥惧眰鐨勪笉閫忔槑搴︿负70%锛屾坊鍔犱竴涓挋鐗堬紝璁剧疆鐢荤瑪宸ュ叿锛岀劧鍚庝娇鐢榛戣壊鏌旇竟绗斿埛缁樺埗澶村彂锛岃虫湹锛岀湁姣涳紝榧诲瓙锛屽槾宸村拰琛ｆ湇銆傚涓嬪浘鎵绀恒係tep 4 鍥惧眰闈㈡澘璋冩暣閫夐」鍗★紝鐒跺悗鍦ㄦ帴涓嬫潵鐨勭獥鍙ｄ腑鍙栨秷閫変腑鍓创钂欑増閫夐」鏉ヨ皟鏁村眰锛屽湪涓嬫媺鑿滃崟涓夋嫨钃濊壊婊ら暅棰勮銆傞拡瀵光滀腑闂村尖濆眰娣诲姞涓涓洸绾胯皟鏁村眰锛岄夋嫨(RGB)棰勮銆係...
绛旓細7. 閲戣壊涓庨摱鑹叉惌閰嶏細閲戣壊涓庨摱鑹叉惌閰嶅彲浠ュ憟鐜板嚭楂樻。銆佸ア鍗庣殑鎰熻銆傚湪璁捐涓紝鍙互閫傚綋鍔犲叆閲戣壊鎴栭摱鑹插厓绱狅紝濡傛笎鍙樸侀珮鍏夌瓑銆8. 榛戣壊涓庣櫧鑹叉惌閰嶏細榛戣壊涓庣櫧鑹叉槸鏈缁忓吀鐨勯鑹叉惌閰嶏紝鍙互灞曠幇鍑虹畝绾︺澶ф皵銆侀珮妗ｇ殑鎰熻銆傚悓鏃讹紝榛戣壊涓庣櫧鑹蹭篃涓庡悇绉嶉鑹叉惌閰嶉兘鑳藉彇寰楄壇濂界殑鏁堟灉銆傛讳箣锛屽湪 Photoshop 涓疄鐜板ソ鐪嬬殑棰滆壊...
绛旓細鍙屾洕浣滀负涓绉嶅父鐢ㄧ殑琛ㄧ幇鎵嬫硶锛屽凡骞挎硾搴旂敤浜庤澶氱數褰辨捣鎶ヤ腑銆備粠瑙嗚璇█鐨勮搴︽潵鐪嬶紝杩欑鏁堟灉鐨勭敾闈㈠叿鏈夐潪甯哥嫭鐗圭殑鍙欎簨椋庢牸锛岄潪甯搁傚悎璁叉晠浜嬨備赴瀵岀殑鐢婚潰璐ㄦ劅涓庡彔褰辩殑浜虹墿鎴栭鏅瀺涓轰竴浣擄紝寰寰璁╀汉鎯宠薄銆傛湰鏂囧皬缂栧氨鏉ユ墜鎶婃墜鏁欏ぇ瀹跺浣曞埄鐢photoshop璁捐鎵撻澶ф皵鍙岄噸鏇濆厜娴锋姤鏁堟灉銆傜畝鍗曠矖鏆达紒澶у瀛﹀畬涔嬪悗涔熷彲浠ヤ娇鐢...
