首页 > 服装学院 > 电脑基础 > 正文
用ps作简单的作品展示页面
Θ联科绣花网[乐绣网] 服装学院-电脑基础  Θ添加时间: 2018-12-07

在本教程,你将会学习到如何在photoshop中创建简洁而多彩的作品展示页. 如果您仍然有疑问可以在评论里面提出. 除此之外, 记得所有的教程, 我们都提供psd文件以供下载.

最后预览

教程资源

让我们开始吧

1. 第一件需要做的事情就是新建1020×1200像素的psd文档.

2. 使用填充工具(G), 将背景颜色填充为#AED6EE.

3. 接下来, 我们需要在背景增加一点渐变. 虽然我们可以直接在背景层上面做, 但为了后期转化为代码更加简单,我新建一个图层,绘制一个简单的矩形,填充白色:

4.  现在右击你的图层样板,在弹出的目录菜单中选择图层样式,勾选渐变叠加.

5. 开始创作头部, 我们需要创作自己的logo. 选择你最喜欢的矩形工具, 创建简单的矩形填充 #D4EF9F:

6. 为最新的矩形增加图层样式:

7. 接下来需要为logo增加些文字. 颜色为#FFFFFF . 接着为下一层增加图层样式:

8. 再次使用你最钟爱的矩形工具, 创建简单的矩形,填充颜色#416073.

9. 现在为最新的矩形添加混合选项:

10. 我们的导航会保持相同的样式.使用 Helvetica字体, 在连接旁边加上时尚的图标集. 激活的链接带有颜色为 #2D4655的矩形. 链接的颜色为#99CAEA, 图标集的链接为#AED6EE.

11. 在导航的下面, 我想显示最近的tweet. 因为这个,所以我们需要用到椭圆形工具 (M). 按住SHIFT键增加你的选区造型参考下图填充#FFFFFF:

12. 接着,为云增加淡淡的阴影.

13. 之后再添加填充文字, 增加twitter图标, 头部看起来应该是这样的:

14. 对于我们的内容领域我们要看起来有几张纸上下堆叠,给它一个独特的外观. 第一步先绘制如下矩形:

15. 接下来, 复制本层和移动我们的复制图层(Command+J)在原始图层上面. 按下Command+T让你的复制层变透明 向右旋转,看起来应该像这样:

16. 回到原始图层增加图层选项:

17. 对于每一个项目, 我们需要为相同类别的作品集合增加预览图片. 使用矩形工具, 新建简洁矩形如下填充白色 #FFFFFF:

18. 现在如图层增加样式:

19. 所有你需要做的就是添加一个预览图象, 文字颜色为#416073, 重复相同的步骤,看起来应该是这样的:

20. 最后一步为我们的内容区域增加按钮.对于按钮的做法可以参照第14步. 你的顶部矩形颜色为#D4EF9F, 下面的为#AFD465.

21. 为顶部矩形增加样式:

22. 为你的按钮添加箭头, 和文字. 文字和图标的颜色必须为#2D4655. 图标源自Mono图标集.

23. 用同样的手法制作 back 按钮, 增加一些文字显示你当前的也是,看起来应该是这样:

24. 最后一步就是添加页脚. 我们想要看起来就像置身云端, 所以使用椭圆形工具(M) 制作选区然后按住 SHIFT增加选区填充#FFFFFF.增加你的选区直到看起来这样:

25. 在你的页脚增加文字链接 右边增加版权信息,最终模板完成:

原文地址

转载:http://www.faxianba.net/?p=1851

本文链接:http://www.blueidea.com/tech/graph/2010/7876.asp 
来源:不详
以下花样可直接上绣花机做货:
乐绣(联科)制衣刺绣网 Copyright © 2000-2020 婵犵數濮烽弫鍛婃叏閹绢喗鍎夊鑸靛姇缁狙囧箹鐎涙ɑ灏ù婊呭亾娣囧﹪濡堕崟顓炲闂佸憡鐟ョ换姗€寮婚敐澶婄闁挎繂妫Λ鍕磼閹冣挃缂侇噮鍨抽幑銏犫槈閵忕姷顓哄┑鐐叉缁绘帗绂掓ィ鍐┾拺缂佸灏呮Λ姘舵煕閳哄倻澧遍柟骞垮灩閳规垹鈧綆鍋掑Λ鍐ㄢ攽閻愭潙鐏﹂柤褰掔畺閸╁懘鏌嗗鍡忔嫼缂傚倷鐒﹀玻鍧楁儗婵犲啨浜滄い鎾跺Т閸樺鈧鍠栭…鐑藉极閹邦厼绶炲┑鐘插閺夊憡淇婇悙顏勨偓鏍暜閹烘纾瑰瀣閸ㄦ繈鏌i姀鐘冲暈闁抽攱鍨块弻娑樷攽閸℃浠惧銈冨劤閸嬬喓妲愰幒妤婃晩闁兼亽鍎辩壕鎶芥倵濞堝灝鏋︽い鏇嗗洤鐓″璺衡看濞尖晜銇勯幇鍓佸埌濠殿垯鍗冲缁樻媴閸涘﹤鏆堥梺鍦瑰Λ婵嬪春閳ь剚銇勯幒鎴濐仼闁告垹濞€閺岋繝宕橀妸褍顤€闂佹娊鏀遍崹鍦閹烘柡鍋撻敐搴′航闁稿簺鍎甸弻娑欐償閵忕姴顫掗梺鍝勭灱閸犳牕鐣烽妸锔剧瘈闁告劑鍔夐崑鎾诲箛閻楀牏鍘遍梺鍐叉惈閸燁偅绂掓潏顭戞闁绘劕妯婇崕鏃堟煛娴gǹ鏆i柛鈹惧亾濡炪倖甯掔€氼喖鐣垫笟鈧弻鏇$疀閵壯咃紵缂備胶濞€缁犳牠寮诲☉銏犵労闁稿繒濯禍顏堝箖濮椻偓閺佸啴宕掑☉姘箞闂備焦瀵х换鍌炲箠韫囨稑绠氶柛顐犲劜閻撳啴鎮峰▎蹇擃仼闁诲繑鎸抽弻鐔碱敊鐟欏嫭鐝栫紓浣介哺鐢帟鐏掓繝鐢靛У绾板秹寮冲鈧濠氬磼濞嗘帒鍘¢柡瀣典邯閺屻劑寮撮鍫燁€嶉梺璇茬箲閻熲晠寮婚敐澶婄闁告鍋愰崑鎾斥攽鐎n亣鎽曢梺闈浥堥弲娑㈠础閾忣偂绻嗛柕鍫濆€告禍鐐箾鐎涙ḿ鐭掔紒鐘崇墪椤繐煤椤忓嫮顔囬柟鍏肩暘閸ㄥ鏁嶅鈧娲箹閻愭彃顫呭┑鈽嗗亜鐎氫即骞冩ィ鍐╁€婚柦妯侯樀閸炲爼姊洪崫鍕闁靛洦鐩畷鎴﹀箻缂佹ɑ娅囬梺绋挎湰濮樸劑顢樺ú顏呪拺缂備焦锚閻忋儲淇婇锝庢疁鐎殿噮鍋夐妵鎰板箳閹绢垱瀚介梻浣呵归張顒勬偡閵娾晛绀傜€光偓閸曨剛鍘甸梺鎯ф禋閸嬪懎鐣峰畝鈧埀顒冾潐濞叉﹢鎮¢垾鎰佸殨濠电姵鑹惧敮闂佹寧娲嶉崑鎾绘煕閹惧磭绉烘慨濠冩そ瀹曟粓骞撻幒宥囨寜闂備胶枪闁帮絾绂嶉崼鏇炵畺闁秆勵殢閺佸鏌嶈閸撶喖鎮伴鈧浠嬧€栭妷銉╁弰妞ゃ垺顨婇崺鈧い鎺嶆缁诲棗霉閻樺樊鍎愰柣鎾存礋閹鏁愰崨顓ф殺闂佸憡甯婇崡鍐参涙担鐟扮窞闁归偊鍘鹃崣鍡椻攽閻樼粯娑ф俊顐g懇钘熸繝濠傛噽绾惧ジ鏌ゆ總鍓叉澓闁搞倖鐟﹂妵鍕敇閳ュ啿濮峰銈忕畳鐏忔瑩鍩€椤掍緡鍟忛柛鐘崇墬閺呰埖鎯旈妸銉ь唹闂侀潧绻掓慨顓㈠绩娴犲鍊甸柨婵嗙凹缁ㄤ粙鏌涢弮鎾剁暠妞ゎ亜鍟存俊鍫曞幢濡ゅ啰鎲梻浣哄帶閸熷潡鎮ユ總绋跨畺闁汇値鍨禍褰掓煙閻戞ɑ灏甸柛妯绘崌閹嘲饪伴崟顓犵厜閻庤娲樼划宀勫煝鎼淬劌绠奸柛鏇ㄥ幘閳笺倝姊绘繝搴′簻婵炶绠戦~蹇旂節濮樸儮鍋撻崨瀛樺€婚柤鎭掑劚閳ь剛鏁婚弻銊モ攽閸℃瑥鍤紓浣靛妺缁瑩寮婚敐澶娢ч柛灞剧煯婢规洖鈹戦悩娈挎殰缂佽鲸娲熷畷鎴﹀箣閿曗偓绾惧綊鏌″畵顔艰嫰閺呯姵绻濋悽闈浶i柤鐟板⒔婢规洘绻濆顓犲幍闂佺顫夐崝鏇㈡偂閹扮増鐓曢柣妯哄暱婵秹鏌$仦绋垮⒉鐎垫澘瀚埀顒婄秵娴滃爼宕电€n亶娓婚柕鍫濆暙閸旀﹢鏌涢妸銈囩煓鐎殿喖顭烽弫宥夊礋椤忓懎濯伴梻浣告啞閹稿棝鍩€椤掆偓鍗遍柛顐犲劜閳锋垿鎮楅崷顓烆€岄柛銈嗙懃铻栭柣妯挎珪閸婃劙鏌涢埞鍨仾闁诡垱妫冩俊鎼佸Ψ瑜忛弶鍛婁繆閻愵亜鈧牜鏁幒妞濆洭顢欓悙顒夋綗闂佽法鍣﹂幏锟� 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌i幋锝呅撻柛銈呭閺屾盯骞橀懠顒夋М闂佹悶鍔嶇换鍐Φ閸曨垰鍐€妞ゆ劦婢€閺夘參姊洪柅鐐茶嫰婢ь噣鏌涢悢鍛婄稇闁伙絿鍏樻俊姝岊槷闁稿鎸搁埥澶娾枍椤撗傜凹缂佸倸绉靛ḿ蹇涘Ω瑜忛惁鍫ユ⒑濮瑰洤鐏叉繛浣冲啰鎽ラ梻鍌欒兌鏋柨鏇樺€濋、姘额敇閻樻剚娼熼梺鍦亾閸撴艾岣块埡鍛厾闁告縿鍎查弳鈺呮煕濡搫鑸规い顏勫暣婵″爼宕卞Δ鈧~搴㈢節濞堝灝鏋熼柟绋垮暱閻e嘲鈹戦崱鈺傚兊闁哄鐗冮弲婵嬫晬濠婂牊鈷戠紓浣癸公娓氭盯鏌涢悩宕囧⒌鐎规洘绻堥弫鍐磼濞戞艾骞愰梺璇茬箳閸嬬喖寮查銏℃瘎濠碉紕鍋戞导鍥磼濠婂懐宕查梻浣告惈閺堫剟鎯勯鐐靛祦婵☆垰鍚嬪畷澶愭煟閹寸偍缂氶柍褜鍓濋褔鈥旈崘顔嘉ч柛鈩冡缚閳规稓绱撻崒姘毙$紒鑸靛哺閻涱噣宕橀埡鍐炬祫闁诲函缍嗘禍婊呯玻濞戞瑧绡€闁汇垽娼у瓭闂佸摜鍣ラ崹鍫曘€侀弮鍫熷亜闁稿繐鐨烽幏缁樼箾鏉堝墽绉┑顔哄€楀☉鐢稿醇閺囩喓鍘遍梺鎸庣箓缁绘帡鎮鹃崹顐闁绘劘灏欑粻濠氭煛娴h宕岄柡浣规崌閺佹捇鏁撻敓锟�
274