为了账号安全,请及时绑定邮箱和手机立即绑定

从 psd 到 html

黑白猪 Web前端工程师
难度初级
时长 1小时51分
学习人数
综合评分9.63
432人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • 审视PSD图片,打开PSD文件,对其结构进行分析,找出头部、底部、主体,看看哪些是可以重用的。

    查看全部
  • PS中

    放大镜:Ctrl + Alt + 滚动轮

    查看全部
  • index.css   .index-menu .menu-list ul{

                         width:1160px;

                             }

    本来是1100px,表面多了60px,但是这样方便循环输出,是一个布局的小技巧。

    查看全部
    1 采集 收起 来源:menu

    2018-10-31

  • PS导出PNG图片,不使用切图。

    选择该图形,点击对应图层,转换智能对象;

    利用选区工具框选该区域,ctrl c,ctrl n,新建一个剪切图,然后ctrl v;

    文件,保存,web,即可使用。

    查看全部
  • 放大之后用选择工具 ,勾选自动选择, 选择图层,将图层转换为智能对象, 框选住需要切的内容,Ctrl + n ,点击确定,ctrl + v, 保存 png 格式

    查看全部
  • ctrl + alt 加鼠标滚动: 实现放大缩小效果

    查看全部
  • 行内元素间距解决办法: font-size:0px;或者将其写成一行
    查看全部
    1 采集 收起 来源:主体pannel结构

    2018-01-20

  • 总结: 1、psd 自动选择:图层 --> ctrl+c --> ctrl+n --> ctrl+v; 2、psd 自动选择:图层 --> 图像 --> 剪切; 3、拼图:方法1 + 其中一个使用“画布大小”添加空白位置 --> 拼图; 4、background-position:x y: x:从左至该对象的距离; y:从上至该对象的距离。
    查看全部
    2 采集 收起 来源:总结

    2018-03-22

  • 切图,点亮的star与未点亮的star放在一起,sprite图使用
    查看全部
    1 采集 收起 来源:tab切换

    2017-07-14

  • 线条的处理,线条的处理,可以使用伪元素befor和after或background,这里加入i标签,更清晰明了。 <p><i class="line line-l"></i>文字<i class="line line-l"></i></p>
    查看全部
    1 采集 收起 来源:banner

    2018-03-22

  • 更好的认识PS这个软件
    查看全部
    1 采集 收起 来源:总结

    2017-05-27

  • 用移动工具(ps第一个工具)选中所要截的图片拉动到一个位置,然后在移动工具上选择自动选择和图层,再用矩形选框工具(ps第二个工具),框选中移动的图片,然后将右侧的图层转换成智能对象,再按住ctrl+c,ctrl+N创建图层,再按ctrl+v复制图片,再按住ctrl+alt+shift+s保存图片
    查看全部
  • 一、 1、黄色的小星星,放到新建的画布里去。 2、图像,画布大小,向下加同样大的高度。 3、画布背景换成红色。 4、把灰色的星星直接拖过来。 5、上下箭头可以调灰色星星的位置。 6、画布的小眼睛不要,背景就是透明的了。
    查看全部
    1 采集 收起 来源:tab切换

    2017-04-20

  • 一、jpg图像裁剪: 1、窗口-图层。 2、矩形选框选中。 3、图像-裁剪。 二、ctrl alt shift s:存储为web所用格式。 三、ctrl alt z:还原。
    查看全部
    1 采集 收起 来源:banner

    2017-04-19

  • 切图层
    查看全部
    1 采集 收起 来源:tab切换

    2017-04-05

举报

0/150
提交
取消
课程须知
1、对 html+css 基础知识已经掌握; 2、会简单使用 Photoshop; 3、需要一步一步动手做;
老师告诉你能学到什么?
1、独立完成一个设计稿的转化; 2、Css从整理到局部的分离; 3、Css命名一些技巧和语义化; 4、Html标签结构的优化和选择; 5、PS软件当中的切图技巧 6、Css代替部分图片实现小icon; 7、兼容性处理的方法; 8、和后端配合时注意的事项;

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!