强质感高光风格网页欣赏及其表现手法总结

标签: 产品设计 视觉设计 | 发表时间:2011-09-06 19:41 | 作者:P迪 章明
出处:http://www.alibuybuy.com

经常能见到这一类的风格的网页设计作品,它们有如下共同的特点。背景通常是纯色的柔和渐变,不添加任何的材质,色块的边缘部分通常会添加1像素的高光;在页面元素的边缘部分有着强烈的1像素高光;元素表面有如玻璃般的明显反光;底部和背景接触的部分经常会设计出倒影。这种风格的设计经常会出现在商业和企业的网页设计中,会给人留下干净清爽的印象。

我这里将这些常用的表现方法提取了出来,共有6种样式,分别是:1、镜面的内容背景;2、光亮的按钮;3、浮动的圆角水晶按钮;4、凸出的分割线;5、阴影分割线;6、角横幅。我将这些元素做成了PSD格式,提供给大家下载,你可以通过查看分层文件来学习如何在photoshop中实现这样的效果,将它们用在你的设计中。下面是这6种元素的预览图以及涉及到这种光亮风格的网页设计作品案例。

demo.jpg

下载

1、Legacy Locker

Legacy Locker - The safe and secure way to pass your online accounts to your friends and loved ones..png

2、Cappuccino

Cappuccino Web Framework - Build Desktop Class Applications in Objective-J and JavaScript.png

3、EZGameCard

ezgamecard.jpg

4、tendyTUTS

trendy TUTS.png

5、Portfolio WebSite

trendy TUTS1.png

6、Apple

Apple.png

7、CampaignMonitor

Email marketing software for web designers - Campaign Monitor.png

8、Invoice Machine

The Invoice Machine - Online Invoicing Made Beautiful.png

9、WooThemes

WooThemes - Premium WordPress Themes.png

10、ActiveCollab

activeCollab - Project Management and Collaboration Tool.png

11、Ten24Media

Edmonton Search Engine Optimization Services - ten24 SEO.png

12、Icebrrg

Icebrrg - HTML Web forms, surveys, and invitations made chillingly simple.png

13、Xero

Online Accounting Software. Free Trial, Free Support - Xero.png

14、Media Temple

Web Hosting by Media Temple - Quality Hosting Plans, Built to Scale.png

15、Realmac Software

Realmac Software - Creative Software for Macs.png

16、OneHub

Online collaboration that is user friendly, well designed and cost-effective - Onehub.png

17、励步儿童教育

libu.jpg

18、天泓信诺

Tian hong innovation.jpg

源地址:http://startwmlife.com/br……ign-and-tips/

 


© 推荐 for 互联网的那点事, 2011. | Permalink | No comment | Add to del.icio.us
Post tags:

你可能也喜欢:

Dreamweaver CS4 官方中文精简版 (Adobe CS4系列网页设计制作软件) (@iplaysoft)

快速创建Flahs网页菜单:Flash Menu Labs绿色版 (@portablesoft)

网页设计师的字体替换方法指南

越简单越丰富——极简网页设计视觉呈现技巧

视觉焦点-剖析网页设计中的几何圆
无觅

Feed enhanced by Better Feed from Ozh

相关 [质感 高光 网页] 推荐:

强质感高光风格网页欣赏及其表现手法总结

- 章明 - 互联网的那点事
经常能见到这一类的风格的网页设计作品,它们有如下共同的特点. 背景通常是纯色的柔和渐变,不添加任何的材质,色块的边缘部分通常会添加1像素的高光;在页面元素的边缘部分有着强烈的1像素高光;元素表面有如玻璃般的明显反光;底部和背景接触的部分经常会设计出倒影. 这种风格的设计经常会出现在商业和企业的网页设计中,会给人留下干净清爽的印象.

[转]强质感高光风格网页欣赏及其表现手法总结

- - 畅之部落格
经常能见到这一类的风格的网页设计作品,它们有如下共同的特点. 背景通常是纯色的柔和渐变,不添加任何的材质,色块的边缘部分通常会添加1像素的高光;在页面元素的边缘部分有着强烈的1像素高光;元素表面有如玻璃般的明显反光;底部和背景接触的部分经常会设计出倒影. 这种风格的设计经常会出现在商业和企业的网页设计中,会给人留下干净清爽的印象.

质感折叠衣架

- Paladin - 设计|生活|发现新鲜
其实折叠衣架国内很早就有啦,但是这款设计却相当有质感. 搭配高端商务西服最合适不过,适合那种小资和轻微洁癖的童鞋. 行李箱,钱包,口袋,车厢通通放得下,超适合空中飞人. 折叠衣架,除了节省空间外,最大的好处就是可以根据衣服的大小来掌握衣架的长短,不用买不同型号的,弄得家里杂又乱. 「设计,生活,发现新鲜」在新浪微博,更即时地获读更新,更直接地交流沟通.

UI设计:界面微质感探究

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  GUI的历史一直都离不开隐喻,而这种设计手段的优劣已经有越来越多的辩论. 那么时至今日,这种设计方法是否已经过时?我们是否有更好的方式. 这些疑惑不禁引发了笔者的思考,因此也就有了下文.   隐喻作为一个主流的设计方式广泛运用在界面设计中,它的历史可以追溯到GUI的创造,经典的例子便是桌面、文件夹、垃圾桶… 这些老生常谈概念.

怎样装修得有质感?

- - IT瘾-zhihu
【纯文本无图请放心浏览】【4000赞小更】. 这个回答其实给我填了不少麻烦,为了减少逐个回答的麻烦我决定进行少量添改. ================我是残疾的分割线================. 本人心情不好的时候有可能会少量更新装逼点,可能准备病死之前会配图. 本答案针对装修中的“省钱”和“质感”,实用性排在两者之后,所以不要跟我扯实不实用的事,爱看看不看关,不接受任何差评.

什么决定了网站的品质感(一)

- 盛开 - 所有文章 - UCD大社区
[前言]视觉设计不是我的专业也不是我的擅长,但是最近受工作影响,总是在思考这个话题. 索性做一番探索,看看究竟影响一个网站品质感的因素究竟是什么,尤其是希望能够做一些可行性的指导方案. 因为品质感能够通过提升用户对于一个网站可信度和可靠性的评价,从而让他产生良好的第一印象,初始信任感. 就好像,两个相亲的人,见面10秒钟的第一印象.

摧毁网页 Kick Ass

- Jerome - 无聊哦
是不是经常遇见一些烂的让你无法淡定的网页,正好有一款游戏Kick Ass可以让你发泄一下,如果看到那个网页不爽就可以用下面方法摧毁它~. 在地址栏中输入下面的代码并按下回车:. (IE用户粘贴到地址栏后需要删除“本文来源无聊哦 | 原文地址:http://www.wuliaoo.com/kick-ass.html”).

网页命名规则

- Bloger - 博客园-首页原创精华区
  内容:content/containe.   页面外围控制整体布局宽度:wrapper.   左右中:left right center.   登录条:loginbar.   友情链接:friendlink.   版权:copyright.   合作伙伴:partner.   容器: container.

Webbygram:网页版Instagram再生

- - 互联网的那点事
Webbygram是在Instagram被收购后,另外打造的网页版Instagram,这填补了过去Instagram网页版的空白,它为笔记本和台式用户带来了更强大的图片互动功能,让你轻松把图片互动应用从手机小屏幕搬到电脑大屏幕. 从Instagram Android平台上的巨大成功,我们意识到好的事情是值得我们等待的.