信息动态

网站设计是技术与创意的融合!

技术资讯

青岛网站设计之网页设计的细节处理

2011-11-10 12:03:09

在网页设计中细节的处理十分重要，我们也经常观摩外国的网站，发现优秀的网站设计在细节方面的处理都是照顾十分周全的。今天在这里分享给大家的小技巧很简单，但是却可以很好滴增强青岛网站设计的细节。所以我自我认为这些技巧对提升你的网站设计水平也是有帮助的。

并且你会留意到这些技巧都围绕一个词，就是“像素化”，简单地说就是一些1px，2px的小线。

好吧，我们开始。

1.像素分隔线

第一个介绍的是分隔线，请看下图，为 Pixel2Life.com 的导航栏。

留意图中红圈圈中的线已经按钮之间的分隔线，这些线看起来有一种凹进去的感觉，形成一种很好的分隔线的感觉。接下来我把这张图放大，我们看看其中原理。

我们可以看到这些分隔线，都是有2条相邻的1px直线构成的，并且一条颜色较背景色更深，一条较浅。接下来，看方法：

  • 选取铅笔工具（不要选错为画笔）,大小调为1px
  • 选取一个较背景色更深的颜色，如图中的深蓝色，按住Shift画出一条直线
  • 选取一个较浅的颜色，再画一条直线。OK

PS.画线过程可以放大画布（Z）以便观察。
怎么样，效果比单色的分隔线要好很多吧？接下来再看一些使用这个分隔线技巧的例子：

clearspring.com

tutorial9

2.像素边缘

首先我们看一张没有加“像素边缘”的原图：

接下来是加上后的：

看出来区别了吗？没关系，接下来请看放大下的图片：

可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇，而有一种灯光反射（高亮）的效果。使得白色块的边缘更加突出。
而方法跟第1个技巧是一样的，就是用铅笔工具画1px的线。需要注意颜色的选择，一般选择比背景色更浅的颜色，才能制造高亮的效果。

3.像素阴影

这是3个技巧里面最容易实现的，但它一样特别实用，甚至经常会用到。照例我们先看图片：

可以看出在有阴影下，文字立体感得到加强，特别在文字的背景较复杂，比较多噪点时使用该技巧会使文件比较突出。

而加上阴影方法很简单，只需双击图层名称，添加“投影”的图层样式。然后按下图设置参数：

也就是把距离与大小调为“1”。
接下来我们看看一些使用该技巧的例子：

以上这些技巧大家可以在平时的设计中加以研究和应用，在这里希望需要的人可以学会它。这些1px的线很多人会说，用户根本就不会去注意，就是瞪大眼都看不到。是的，这的确没错。但是我认识很多好的设计，能经得时间与多人的考验，那都是很多细节来构成的。这些细节尽管你觉得看不到，但是它却为成功的设计打下坚实的基础。

上一篇：独立设计的网站与模板网站区别与优势
下一篇：青岛网站设计中如何增强网站的SEO优化 提高排名

近期更新

延伸阅读

解决方案

轮胎行业网站设计解决方案 机械行业网站设计解决方案 房地产行业网站设计解决方案 科技企业网站设计解决方案 电子家电网站设计解决方案 食品行业网站设计解决方案 集团公司网站设计解决方案 企事业单位网站设计解决方案 外贸行业网站设计解决方案 健身运动网站设计解决方案 美容与化妆品网站设计解决方案 建筑设计行业网站设计解决方案 物流行业网站设计解决方案

TAGS关键字

集团公司网站建设 robots 网站的速度 青岛网站营销 青岛网站优化 集团性网站 网站建设的步骤有哪些 H5专题页面 营销型网站建设 品牌网站设计 新的元素 青岛网页设计 建站常识 平面设计 青岛网络公司 网站优化 程序开发 网站品牌 搜索引擎 青岛海洋投资集团 图形网格 舒适的界面 GOOGLE 微信小程序 微官网带来的好处 企业网站设计 网站制作 扁平化设计 HTML5 交互设计

青岛力图数字科技有限公司 2008- 版权所有 鲁ICP备09005893号-6 | 网站地图

青岛网站建设 青岛网站设计 青岛网站制作


0532-85810878 473587358 扫码添加微信

扫码添加微信

 扫码关注公众号

官方公众号