01-工具 面板 视图

这是页面制作的第一节课。怎么制作网页呢?

网页分为两步: 1.从设计稿中切出网页素材 比如说:按钮 logo 图片 背景等 2.编写代码,按效果图实现静态页面

有时候看到一些漂亮的效果没有办法用代码实现,或者说用代码实现了兼容也很难调,这个时候需要用到图片了,所以要学会切图,这是咱们要讲的,那切好之后怎么引入图片呢: 1.html中用<img />来实现 2.css中用background这个属性引入背景图 3.图片精灵(小图标,小图片按钮)通过背景定位来实现。

我们现在来进行第一步:.从设计稿中切出网页素材 我们从设计师手机拿出来源文件,切出的是jpg、png、gif的图片。

那如何切图呢?学会使用ps工具。

首选项设置 1.编辑>首先项>单位标尺

常用面板设置 1.信息面板 f8 2.历史记录面板 ctrl+z ctrl+alt+z 3.工具面板(页面最左栏默认打开) 4,选项面板(状态栏下面) 6.信息面板 8.图层面板

切图常用工具 1.移动工具 2.矩形选框工具 3.魔棒工具 4.裁剪工具+切片工具 5.缩放工具 ctrl+ ctrl- ctrl+1快速回到100% alt+滚轮 6.取色

辅助视图 1.视图>对齐 2.视图>标尺 3.视图>显示额外内容 4.视图>显示>参考线

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端开发

微信小程序中实现瀑布流布局和无限加载

瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感。

49820
来自专栏针针小站

【IFE】Day 2 – 百度前端技术学院 基础学院 学习笔记(二)

13940
来自专栏三十课

【基础】固定列宽的表格及示例演示

对我来说,table 有一个非常有用,支持性也很好的 CSS 属性,但它却很少为人所知。它改变了表格的渲染方式,并生成一个更加稳定可靠的布局。

9720
来自专栏我的博客

JQuery事件处理

Jquery事件 1、  绑定事件示例代码: <a href=”#”>绑定事件</a> <div style=”display:none;”> 什么是绑定事件?...

32650
来自专栏前端架构与工程

利用max-height适应多尺寸屏幕的下拉动画

移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性。比如我们要制作以下动画:红框2为详细内容,默认收起;红框1处...

19880
来自专栏无原型不设计

用Mockplus教你使用属性面板的设置交互状态

使用Mockplus软件有段时间了,期间有很多使用者问我组件的设置交互状态怎么用(当然有很多人看了都会用),我就有想把怎样使用设置交互状态的方法记录下来,供初学...

29150
来自专栏小程序之家

如何使用小程序媒体组件

图片,视频,音乐是小程序使用中不可缺少的部分,这篇文章中,我们将介绍小程序媒体组件的使用。媒体组件分为audio音频组件,image图像组件,video视频组件...

1.1K10
来自专栏葡萄城控件技术团队

ActiveReports 区域报表中的事件介绍

1、仅触发一次的事件 以下是在报表的处理过程中仅触发一次的所有事件这些事件在报表的处理周期中仅在最开始和结束前触发一次。 ReportStart 该事件在Dat...

24470
来自专栏移动开发

Material Design Button 的 disable 效果

针对 Material Design Button 的 disable 效果这里提一下. 我们经常有这样的需要,在按钮在 disable 状态下,背景色会呈现深...

16250
来自专栏程序你好

CSS: :before and :after 使用

11230

扫码关注云+社区

领取腾讯云代金券