深圳网站建设公司易捷网络科技
企业网站建设-易捷网络
网站推广优化-易捷网络
企业邮箱申请-易捷网络
网站域名备案-易捷网络
网站建设资讯
网站建设技术支持网站建设行业资讯网站建设公司新闻
联系我们
联系人:赵先生
电话:135-3012-5766
邮箱:1141557812@qq.com
传真:0755-61603557
地址:深圳市宝安区宝源路鸿源大厦7楼
你现在所在的位置:网站首页 > 网站建设资讯 > 细节改变书写页面

细节改变书写页面

信息来源:深圳网站建设公司易捷网络    添加时间:2017-06-23

本文作者@EdwardUp 我们常以整齐,易读,亲切,易于维护,复用性强等来形容一些优秀的开发者所写的代码。现在,对代码的好评还有一个更为时尚的词优雅,是不是听起来觉得很亲切呢?页面是互联网产品的表现层面,不仅讲求外观,而且会应对更新迅速的互联网产品需求。要成为一名优秀的开发者,经验积累是必不可少的,而一部分经验归纳起来正是在工作过程中的细节。下文介绍的即是在页面开发流程中的多方面的细节内容,希望对这些细节内容的探讨,可以帮助各位页面开发者做得更出色,以更优雅的姿态来书写页面。

从Photoshop开始

从UI设计稿到静态页面一般都称作切图。这个词很容易令人联想到Photoshop中的切片工具,但现在切片工具用得并不多,大部分在页面中需要用到的视觉元素,都需要拼合到一个或多个单独的图片中。

视觉元素的分离和拼合

快速更新的互联网产品需求使得UI设计师需要优先保证UI设计稿的视觉效果,也因此有时候没有时间整理UI设计稿源文件。所以,拿到手边的UI设计稿,可能存在图层缺少命名,分组混乱等问题。如何快速找到需要分离的视觉元素所在的图层?这时候应该使用的是Photoshop的自动选择。另外要注意的是,某些边缘阴影及高光是由图层样式生成的,在选取这些部分时应选取旁边的实际绘图内容。Photoshop的移动工具,在使用时勾选一个自动选择的复选框即可。此外可以设置是自动选择图层还是图层所在的分组。拼合是在一个新建立的psd源文件上进行,命名应当与最后输出的图片命名相同。拼合时应当使用网格做整齐的排列(快捷键Ctrl + ‘ 切换网格显示)。整齐的拼图不仅方便多人编辑,而且css代码中的背景坐标定位会更加快捷(谁都喜欢有规律的数字)。

在Photoshop的编辑→首选项中可以设置合适的网格尺寸。

为方便后续编辑,拼图源文件应适当保留原UI设计稿图层(如保留文本图层,不做图层合并,方便以后的文本更改),同时做好图层命名和分组。此外,推荐在底部增加2个图层:底色层和网格尺寸描述层。底色层:Photoshop默认的表示透明区域的网格背景(和前面的尺寸标识的网格不同)中,子网格的边线不容易看清。而加上一个铺满全画布的底色,网格线就很容易辨识了。底色一般用纯白色即可,对于部分颜色偏白的UI元素,可以填充黑色作为底色。底色层只是方便排列元素,在输出图片时,底色层设置为不可见再输出。

 

深圳网站建设公司易捷网络科技主营业务:企业网站建设、网站推广优化、企业邮箱申请、域名空间购买、网站备案、论坛网站建设和企业网站维护。
网站建设服务热线:135-3012-5766
深圳市易捷网络科技有限公司版权所有 备案号:粤ICP备12084881号-3
QQ在线咨询
13530125766
返回顶部↑