页面制作部分之PS切图

原文： http://www.cnblogs.com/jingwhale/p/4396235.html

网页设计在技术层面上，第一步是美工做出网页效果图，第二步就是网页前端进行网页切图。网页切图工具常用的有fireworks、PS，这里使用PS进行网页切图。
我们通过设计稿，得到我们想要的产出物（如.png,.jpg文件），给网页提供图片素材（HTML:img，CSS:background）。

一.使用PS工具
1.1 PS首选项设置
编辑-》首选项-》单位与标尺，选改为像素。

1.2 面板
在“窗口”菜单下开启：
工具（默认已开启）
选项（默认已开启）
图层（默认已开启）
信息（手动开启）
历史记录（手动开启）
关闭其他不需要的功能，将以上功能放置在合适的区域，窗口-》工作区-》保存工作区，设置后的工作区如下：

1.3 切图常用工具
▪移动工具
将自动选择勾选，将组改为图层

▪矩形选框工具
▪魔棒工具
▪裁剪工具+切片工具
▪缩放工具
-放大：Ctrl+加号
-缩小：Ctrl+减号
▪取色器

1.4 辅助视图
在“视图”菜单下开启：
▪对齐（默认开启）（遇到参考线、边界有一个吸附力）
▪标尺 Ctrl+R
▪显示->参考线 Ctrl+;（需要显示额外内容）
二.获取信息
打开设计稿，获取信息：
▪尺寸信息：测量
▪颜色信息：取色
获取信息最重要的是将画布拉的尽量大，尽量减小误差。
测量
2.1所有数字都要测量
工具：
矩形选框工具+信息面板
测量内容：
宽度、高度
内边距、外边距
边框
定位
文字大小
行高

页面制作部分之PS切图相关推荐

ps切图与版心页面布局注意问题
版心是页面内容的展示区域有具体宽度 width:px: 左右居中 margin{0 auto} Ps切图方式方式一矩形选框工具选中区域 > ctrl+c > ctrl+n > c ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
前端ps切图，图文教程，详细。
写在前面:本文主要内容是目前我所知道的切图技巧结合网上的资料,写出来分享一波.图文教程,多图!! BB:很多人都会说,切图这个活倒底分给UI还是分给前端.虽然好的UI会给我们把图切好,但是他们切的图不 ...
Sprite 从PS切图到具体实现完整过程
CSS雪碧图(sprite)是一种网页图片非常高效的处理方式,它是将页面中包含的零星图片利用PS制作到一张大图中,再结合background-position属性进行定位的的方式实现. 它的优点有以下 ...
实用形ps切图技巧，图片格式及其相关
写在前面之前写了两篇前端图片相关的内容(前端ps切图方法,图文详细,css sprite雪碧图制作,使用以及相关,图文gif),本文是面向前端小白的,搜集整理的一些切图技巧,及其相关内容. 关于版本 ...
ps切图基础（慕课网切图篇学习）
一.PS切图基础 1. PS界面设置 1) 新建设置: Ctr+N(新建快捷键) 预设选定web或自定义,宽1920,高2000像素,背景透明,分辨率72像素/英寸,RGB颜色 8位. 在设置好参数 ...
【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点思维导图 ...
CSS学习（第四天）（浮动，常见网页布局，清除浮动，PS切图）
CSS浮动 1 浮动 1.1传统网页布局的三种方式 1.2 标准流(普通流/文档流) 1.3 为什么需要浮动? 1.3为什么需要浮动? 1.4什么是浮动? 1.5浮动特性(重难点) 1.6 浮动元素经 ...
ps切图后 JAVA开发_2018年设计师都在用的PS切图插件--摹客
终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...

页面制作部分之PS切图

页面制作部分之PS切图相关推荐

最新文章

热门文章