美文网首页
从PSD到HTML

从PSD到HTML

作者: 小新子666 | 来源:发表于2017-12-18 20:23 被阅读0次
    一、拿到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

    相关文章

      网友评论

          本文标题:从PSD到HTML

          本文链接:https://www.haomeiwen.com/subject/cbzpwxtx.html