从PSD到HTML

一、拿到ui给的psd文件,在ps里打开。

Ctrl+Alt滚动鼠标滑轮放大文件;
按着空格键出现手状,按住鼠标可以拖动页面。

二、看一下分为几个板块,在html定好板块。

因为有些html标签自带宽高,要把样式重置一下,可以写一个外部的reset.css;还有公共的样式,比如:头部和尾部,基本上每个页面都有的,可以写一个外部的common.css;

三、切图

就拿一个logo做例子把

(1)方法一:

选择ps里的蚂蚁线,框住你要选择的logo图,在图像里有个剪切,然后点击文件里的存储为..存到你想存的地方。然后在编辑里有个后退一步(快捷键Ctrl+z),就又回到原来的样子了。

第一步:用蚂蚁线框住你想选的内容
第二步:(快捷键)Ctrl+i;然后再按个p
(2)方法二:

上面的方法一不能切出来png透明的图片出来,这一采用本方法

选择移动工具,在属性栏上勾上自动选择,选择图层;然后点击要切的图片,会找到图片所在的图层,在图层上点击鼠标右键,点击转换为智能对象;选择蚂蚁线工具,框选你想切的图(不用框的正好,大点也可以的),然后依次用快捷键Ctrl+c(复制),Ctrl+n(新建)背景选择透明,Ctrl+v(粘贴)。然后点击文件里的存储为..存到你想存的地方。

第一步:选择移动工具
第二步:转换为智能对象
第三步:框出logo,新建页面
第四步:复制logo
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容