网站开发中,将PSD转换成HTML的操作中,关键步骤是将PSD扩展设计转化为可兼容、零误差、静态、高质量、语义性、注释明确并经W3C验证的手编程序XHTML / CSS / HTML标记,准确的HTML编码是基于静态web布局与跨浏览器兼容性在PSD上添加高级功能最重要的一个方面,用HTML编码设计,需要具备下列条件:
许多开发人员(无论是初学者还是有经验的)在使用XHTML / HTML代码时都存在一定困难,容易犯一些常见错误,这里向大家推荐几个将PSD转换为XHTML / HTML/CSS的编码技巧:
这是开发人员常犯的一个错误,混乱使用标记会严重影响视觉美感,建议大家使用小写字母,能使页面看起来清晰美观。从用户角度而言,网站设计没有吸引力,就会大大缩短访客在网站上的停留时间,减少成交量,所以恰当的标记直观重要。
简单明了,复杂乏味的导引图标指示会让客户觉得无聊,用起来费劲,高质量的导航是一个网站保持魅力的关键,因此,结合使用CSS和无序列表元素能使网站导航菜单美观大方,订单页面也是不容错过的重要点,一个好的订单页面能让用户感觉亲切、舒服,引导消费。
在div周围增加使用多个div标签,这时候就需要将元素正确分类,使得页面看起来整洁,注意块元素和内联元素,块风格元素有div h1,h2,h3,ul,p,ol,块引用等等;内联风格元素有span,a,em,img,strong,br,acronym等等。
上面提到的小技巧都是经过实践总结出来的最有效的方法,希望能帮助你把PSD顺利转化为HTML,避免一些不必要的错误。
智能社 撰稿,更多知识请关注微信号zhi_neng_she ,具体代码可在公众号内‘技术圈’获得!
个故事~
很久很久以前,并没有前端的说法 ,那当时叫什么呢? 当时的叫法很多,切图,切版,重构都有叫,很模糊,并不像设计,程序有一个明确的叫法。
过去
我记得2009年,我项目老大扔给我一个psd,跟我说把这个图切一下,或这个这个项目需要切图,说的就是 psd转html,言下之意就是指的前端开发,html+css+js交互。
原因
因为那个时候,网站注重外观和功能,前端并不被重视,而前端的工作一般是设计师和程序 作为附属“功能”做的,公司几乎没有独立的web前端岗位。
很不幸,我经历了“三剑客”,table布局时代,和因为是一名前端er被人鄙视过。
误解
后来暴增了很多人学web前端,不是从那个年代走过来的,通常对于切图表示不削,认为切图低级,前端高级,其实不是这样的,殊不知这种眼光暴露了你的前端er的年龄。
所以,珍惜身边跟你说切图的人吧,没准他可能就是大牛。
因爱好结识
我是喜欢前端,干了前端,我不是高手,但算得上老手,我的目前规划是,前端,我打算再干10年。
qq6133576,欢迎一起交流。
jpg格式
文件名.jpg |文件名.jpeg。
特点:色彩信息保留较好,高清,颜色较多。
实际用处:常用于产品类图片。
gif格式
文件名.gif。
特点:最多存储256色,可以保存透明背景和动画效果。
实际用处:简单图形及字体,动态图。
png格式
文件名.png。
特点:存储形式丰富,可以保存透明背景。
实际用处:微信表情包
psd格式
文件名.psd。
是Photoshop的专用格式。
特点:可以存放图层、通道、遮罩等多种设计稿。
实际用处:可以直接从上面复制文字、获得图片、测量大小和距离。
切图方式:图层切图、切片切图、PS插件切图等。
第一步需要先选中需要的图层
鼠标单击图层就是选中,被选中的图层颜色背景颜色变浅。
选中单个图层:
鼠标选中图层后右击——快速导出为PNG——设置文件名——保存。
选中多个图层:
图层连续排列:长按shift键不动+鼠标选中所需的第一个图层+鼠标选中最后一个图层。
长按shift键选择图层
图层不连续排列,长按ctrl键不动+鼠标点选所需图层。
长按ctrl键选择图层
第二步选中需要的图层后
选择图层菜单(或直接在任意选中的图层上右击)——合并图层(Ctrl+e)——右击合并图层——快速导出为PNG——设置文件名——保存。
合并图层
导出png
在左侧工具栏选中切片工具——框选所需图片——选择格式——保存——切片选择:选中的切片——保存。
左侧选项卡中第五个凹陷的小刀就是切片工具
在图层选项卡上背景图片的左侧有个小眼睛的标志,这个是代表图层的可见性,点击小眼睛就会不可见图层,背景就变成透明的。
在背景透明的情况下,使用切片工具选中想要裁切的内容
切片工具切出内容
“文件”——导出——存储为web所用格式
选择图片存储位置,在最下方切片选项那里,选择选中的切片。
选项卡最下方切片:选中的切片
jpg格式:保存的切片图带有纯色背景;
png格式:保存切片图是透明背景。
格式级别越高,图片越清晰,相对内存越大。
Cutterman:在ps中运行的插件,可以代替手工导出以及使用切片工具切图。
使用方法:首先从Cutterman官网上注册账号并下载安装包进行安装。
要求:ps必须是完整版的,绿色版本不支持。
官网网址:https://www.cutterman.cn
下载好之后,解压。双击.exe安装文件。默认安装地址,直接点击安装。
安装好之后重启PS。
选择窗口——扩展功能——Cutterman切图神器——最后注册Cutterman账号登录使用。
暂时不想使用插件切图,就不多赘述了,有需要的可自行了解。
明天开始准备使用学成在线这个案例,练练手。
*请认真填写需求信息,我们会在24小时内与您取得联系。