× 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文将详细介绍photoshop的这个新功能 初始设置 当然首先还是要进行一些首选项设置 [1]在编辑 -> 首选项 -> 增效工具中,选中启用生成器 [2]重启photoshop,在文件 -> 生成中,点击图像资源在文件 -> 生成中,点击图像资源 [注意]只有在photoshop中有文…

× 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要使用photoshop测量的信息分为两类,分别是尺寸信息和颜色信息 [1]尺寸信息 尺寸信息主要通过矩形选框工具配合信息面板进行测量,共包括以下项目: 1.宽度.高度 2.内边距.外边距 3.边框 4.定位 5.文字大小 6.行高 7.背景图位置 [注意]测量时,画布放得尽可能大,这样结果才相对更准…

× 目录 [1]作用 [2]初始化 [3]常用工具[4]快捷键 前面的话 photoshop是前端工程师无法回避的一个软件,这个软件本身很强大,但我们仅仅需要通过这个工具来完成基本的切图工作即可.本文将开始photoshop巧用系列的第一篇——准备篇 作用 我们为什么要去切图呢?这就需要说到项目流程.一个完整的项目流程是市场进行需求分析,产品做出项目原型,UI根据项目原型出设计图,前端根据设计图制作页面,后端进行数据相关工作,网站经过测试后上线. 我们常说的切图实际上就是要把UI制作的设计图切成…

× 目录 [1]切图信息 [2]切图步骤 [3]实战 前面的话 前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图.本文是photoshop巧用系列的第三篇——切图篇 切图信息 在网页制作中有哪些图片是需要被切出来的呢?主要分为两类,一类是修饰性图片,另一类是内容性图片 [1]修饰性图片 修饰性图片主要对网页内容进行修饰,一般会被制作为雪碧图,用在background属性中,通常保存为png24(IE6不支持半透明)和png8格式.修饰性图片主要包括以下几类: 1.…

× 目录 [1]图片格式 [2]保存设置 前面的话 对于前端来说,图片格式是需要重要掌握的知识.本文是photoshop巧用系列第四篇——图片格式 图片格式 目前在前端的开发中常用的图片格式有jpg.png.gif,png分为png8和png24.最近svg格式也开始流行起来 gif gif是无损的,具有文件小.支持动画及透明的优点.但gif无法支持半透明,且仅支持8bit的索引色,即在整个图片中,只能存在256种不同的颜色 但实际上,gif是一种逐渐被抛弃的图片格式.png格式的出现就是为了替…

× 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中.使用雪碧图的处理方式可以实现两个优点: [1]减少http请求次数 [2]减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度) 凡事都不完美,实现优点的同时也带来了缺点,即提高了网…

自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文将详细介绍photoshop的这个新功能 初始设置 当然首先还是要进行一些首选项设置 [1]在编辑 -> 首选项 -> 增效工具中,选中启用生成器 [2]重启photoshop,在文件 -> 生成中,点击图像资源在文件 -> 生成中,点击图像资源 [注意]只有在photoshop中有文件打开的情况下,该项才可以点击…

# 前端工程师技能图谱 ## 浏览器 - IE6/7/8/9/10/11 (Trident) - Firefox (Gecko) - Chrome/Chromium (Blink) - Safari (WebKit) - Opera (Blink) ## 编程语言 - JavaScript/Node.js - CoffeeScript - TypeScript ## 切页面 - HTML/HTML5 - CSS/CSS3 - Sass/LESS/Stylus - PhotoShop/Paint.…

http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样我们清楚的知道我们大概处于那个阶段和水平. Java程序员 高级特性 反射.泛型.注释符.自动装箱和拆箱.枚举类.可变 参数.可变返回类型.增强循环.静态导入 核心编程 IO.多线程.实体类. 集合类.正则表达式. XML和属性文件 图形编程 AWT(Java2D/JavaSound/JMF).Sw…

切图严格来说并不是UI设计师的工作, 而是前端工程师的工作,指的是将UI设计师的设计(大部分为photoshop创建的PSD文件)转化为界面(网页或窗体等)所需要资源的过程.切图是衔接UI设计和应用程序的桥梁,是一种将设计师的“理想”转化为“现实”的工作. 由于不同人的实现方法不同,可能对切图的需求也存在一定的差异.作为前端工程师,掌握切图将为提升自己的竞争力带来一臂之力. 一般来说,photoshop可以通过手动进行切图,这样比较好控制,但是对于复杂的UI来说,往往比较费事费力.photosh…