页面制作 Chapter 1--PhotoShop切图笔记

由于自己大二自己玩过PS,所以,这节课就相对容易点。但是,PS不经常用的后果就是快捷键容易忘......

1、PS首选项的设置

编辑>首选项>单位与标尺,把标尺和文字单位改成像素

2、创建切图需要的工作区,关闭不需要的面板(窗口>工作区>新建工作区>保存工作区),右上角选择工作区

a.信息面板(F8)

b.图层面板(F7)

c.历史记录面板

d.工具栏

e.选项栏

3、切图常用的工具

a.移动工具(选择图层、移动图层)

b.矩形选框工具(选择矩形框,查看信息面板,获取选中区域的宽高)

c.魔棒工具(容差越小,选择的颜色范围越小;消除锯齿,让边缘光滑)

d.裁剪和切片工具

e.取色器

f.缩放工具(放大画布:Ctrl+加号,缩小画布:Ctrl+减号,画布变成100%:Ctrl+1。可以设置滚轮缩放,更方便!)

4、组的概念

类似于文件夹

5、辅助视图

在视图菜单下开启:对齐(在移动图层时,当靠近参考线或者别的图层或者文件边缘会有吸附力)、标尺(Ctrl+r) 、显示>参考线(需勾选显示额外内容)

参考线的快捷键:Ctrl+;

6、CSS Sprite或者图片精灵

推荐文章:http://www.css88.com/archives/756

7、打开设计稿,获取信息

-尺寸信息(所有数字都要测量,矩形选框工具结合信息面板,测量时画布尽量放大!)

a.宽度、高度

巧用添加到选区功能测量较大的布局宽度:  在画布最左边作一个小的矩形选区,按住shift键,在画布最右侧作一个小的矩形选区,信息面板上的w即为布局宽度

b.内边距、外边距

c.边框

d.定位

e.文字大小

当文字是单独的图层,直接利用文字工具;

当文字图层被合并之后,就用矩形选框工具,获取的矩形高度信息就是文字大小。由于文字字体不同,字号会有差异,因此在测量文字大小时,选择较大的文字测量。

f.行高

当文字是单独的图层,直接利用文字工具;

当文字图层被合并之后,就用矩形选框工具,第一行文字的底部到第二行文字的底部的矩形高度就是行高

g.背景图位置

-颜色信息(所有颜色都要取色,取色时画布尽量放大,用拾色器和吸管工具)

a.边框色

b.背景色

  利用取色器判断是否为纯色;

                 巧用魔棒工具确定是否为线性渐变;

c.文字颜色

当文字是单独的图层,直接利用文字工具;

当文字图层被合并之后,放大画布,用吸管工具取色;

如果文字图层被添加了叠加效果,就不用文字工具获取颜色,而是用拾色器。

时间: 2025-01-04 05:36:07

页面制作 Chapter 1--PhotoShop切图笔记的相关文章

页面制作部分之PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选

@注解时代的photoshop切图插件构想

如今各大语言提供了注解机制,极大的简化了开发人员的配置工作. 然而photoshop切图工作一直在由人机械式的去执行,为什么不能交由机器去完成这项苦逼的工作,缺的其实仅仅是一种规范,通知photoshop如何去做这件事情,其实只要adobe公司在photoshop的新建图层面版中加入一个多行文本框,用于存储@Annotation注解就行了,剩下的看我如何道来: 图层嵌套对应HTML标记嵌套 默认是div标记嵌套 如果想要使用其他标签,那么: 设置为: { tagName:"span"

页面制作学习笔记:D2.Photoshop切图

一.什么是切图? 切图就是从网页设计稿中切出网页素材,比如一些小的按钮.小的图片.页面的LOGO.网页的背景图片等. 然后就是页面编码,引入图片资源 在HTML里通过 img 标签引入图片资源 <img src="images/avatar.jpg" alt="头像"> 在CSS里面通过background属性引入图片资源 .icon { background-image:url(../images/avtar.jpg); background-posi

photoshop切图介绍 &amp;&amp; photoshop下载与破解

第一部分:界面设置 1.点击"文件-新建"(或者ctrl+n)打开一个新建对话框.名称可随意填写."预设"设置为自定,"宽度"一般选择1920,"单位"选为像素."高度"可选择为2000,"单位"选为像素."分辨率"设置为72px;"颜色"设置为RGB颜色,8位."背景内容"为透明.之后点击确定即可打开.这里建议最好"

PhotoShop切图

1.传统切图 传统切图使用photoshop自带的切图工具,根据需求进行切片.但是,这种切图方式效率低下. 2.快速切图 使用photoshop自带的功能进行切图,非常高效. 3.小技巧 3.1> 首选项-->增效工具-->启动生成器 文件-->生成-->图像资源,勾选 对图层或者分组进行重命名,如XX.png,在工作目录就会生成相应的图片文件.

前端开发使用Photoshop切图详细步骤

切图的主要目的是从设计师提供的psd中获取网页制作所要的资源 一.界面设置 1. 新建文件,调整界面大小,背景设置为透明 2. 自动选择,把组切换为图层 3. 添加窗口内容,一共四项:图层.历史纪录.信息.字符,之后在右上角调整信息面板选项 4. 新建并保留该工作区,出问题可以直接恢复 5. 首选项各内容单位都设置为像素 到此,准备工作完成完成 二.基本操作 这部分视频里主要讲解了一些ps的常见操作,记录几个个人觉得有用的点 1. shift & alt 的灵活使用 2. 多个工具(套索.魔棒等

photoshop切图介绍

第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为像素.“分辨率”设置为72px;“颜色”设置为RGB颜色,8位.“背景内容”为透明.之后点击确定即可打开.这里建议最好“存储预设”,这样以后就可以直接打开用了.如下: 2.将移动工具的“自动选择”不要打勾,后面的选择使用“图层”.如下: (技巧:如果我们需要选择psd的某一个图层,可直接ctrl+点

切图笔记

最近突然让我切图,很多东西都忘了,得记下来 1这种可以用a标签的A:hover来实现 .head .headbox .banner li a{ width:auto; height:30px; color:#0856c1;  display:block; }.head .headbox .banner li a:hover{ width:auto; height:30px; color:#00CC66; border-bottom:solid 2px #00CC99;} 1这种左右不一样长的切换

页面制作 Chapter 2--开发、调试工具

Sublime Text 2(Sublime Text官网  http://www.sublimetext.com/) 常用快捷键 1.Goto Anything   查找(Ctrl+P) 直接输入文件名,可进行模糊查找 :+行号,直接跳到指定的行号(查找某一行有一个快捷键 Ctrl+G,直接输入行号即可) @ +函数名,快速查找到制定的函数,@+CSS选择器名,快速查找样式(有一个直接的快捷键 Ctrl+R) # +关键字,就能匹配到关键字(有一个直接的快捷键 Ctrl+:) 2.命令面板(C