前端工程师技能之photoshop巧用系列扩展篇——自动切图
2016-07-10 11:41
369 查看
×
目录
[1]初始设置 [2]自动切图
【1】在编辑 -> 首选项 -> 增效工具中,选中启用生成器
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/b52dc9a03c64e53d810c27150e726e5a.jpg)
【2】重启photoshop,在文件 -> 生成中,点击图像资源在文件 -> 生成中,点击图像资源
[注意]只有在photoshop中有文件打开的情况下,该项才可以点击
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/1f268a85b34842d9f193a16b4c3176b9.jpg)
比如,我们要将收藏前的小图标切出来,先找到该图标对应的图层或组,再将其重命名。重点是给其添加后缀。如果想要保存png8格式的图片,后缀名写为.png8。类似地,如果要保存png24格式,则后缀名写为.png24
此时,图像的存放目录下会多出一个assets文件夹,里面会存放刚才保存的图片sc.png
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/b85ad6e924e1696e33738bce3377b3f3.gif)
jpg
类似地,jpg格式图片也是如此切法。比如我们要把脚丫的图片切出来
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/19dabf767df123fe355ee45605db31fb.gif)
实际上,jpg格式的图片存储时,是有品质选择的,从0-100。如果我们把后缀名写为.jpg6,则代表品质为60。如果后缀名为.jpg,则表示品质为100
我们先打开原来切的那张图片,大小为13.6k。将其后缀名改为.jpg5后,大小变成了4.52k
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/ab39fe92218279ca74eb1e5f98b4267b.gif)
2倍图
如果我们需要适应视网膜屏幕,切出2倍图时,也可以使用自动切图的功能。只需要将其重命名为200% 图片名称 @2x.jpg就可以
首先,我们先查看脚丫图片的尺寸是200*200,当我们将其设置为200% jy @2x.jpg5后,再查看脚丫图片的尺寸变成了400*400,也就是生成了2倍图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/1a934a180aeef2920dad786369eb5f4c.gif)
类似地,3倍图也是相似做法
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/d795b2eecbe8e9a538ebfa475d7818b1.gif)
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d+$/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
目录
[1]初始设置 [2]自动切图
前面的话
随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利。photoshop最新的版本新增了自动切图功能,本文将详细介绍photoshop的这个新功能初始设置
当然首先还是要进行一些首选项设置【1】在编辑 -> 首选项 -> 增效工具中,选中启用生成器
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/b52dc9a03c64e53d810c27150e726e5a.jpg)
【2】重启photoshop,在文件 -> 生成中,点击图像资源在文件 -> 生成中,点击图像资源
[注意]只有在photoshop中有文件打开的情况下,该项才可以点击
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/1f268a85b34842d9f193a16b4c3176b9.jpg)
自动切图
png比如,我们要将收藏前的小图标切出来,先找到该图标对应的图层或组,再将其重命名。重点是给其添加后缀。如果想要保存png8格式的图片,后缀名写为.png8。类似地,如果要保存png24格式,则后缀名写为.png24
此时,图像的存放目录下会多出一个assets文件夹,里面会存放刚才保存的图片sc.png
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/b85ad6e924e1696e33738bce3377b3f3.gif)
jpg
类似地,jpg格式图片也是如此切法。比如我们要把脚丫的图片切出来
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/19dabf767df123fe355ee45605db31fb.gif)
实际上,jpg格式的图片存储时,是有品质选择的,从0-100。如果我们把后缀名写为.jpg6,则代表品质为60。如果后缀名为.jpg,则表示品质为100
我们先打开原来切的那张图片,大小为13.6k。将其后缀名改为.jpg5后,大小变成了4.52k
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/ab39fe92218279ca74eb1e5f98b4267b.gif)
2倍图
如果我们需要适应视网膜屏幕,切出2倍图时,也可以使用自动切图的功能。只需要将其重命名为200% 图片名称 @2x.jpg就可以
首先,我们先查看脚丫图片的尺寸是200*200,当我们将其设置为200% jy @2x.jpg5后,再查看脚丫图片的尺寸变成了400*400,也就是生成了2倍图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/1a934a180aeef2920dad786369eb5f4c.gif)
类似地,3倍图也是相似做法
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/25/d795b2eecbe8e9a538ebfa475d7818b1.gif)
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d+$/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
相关文章推荐
- 谈谈Js继承的那些事儿
- React Native开发必备的10个插件包
- React Native开发必备的10个插件包
- React Native开发必备的10个插件包
- 什么是HTML5
- HTML5在HTML4的区别
- 剑指offer----数字在排序数组中出现的次数----java实现
- JavaScript中简单函数定义调用,以及函数劫持
- JS补充
- jquery之table:给table动态增加行、清空table
- HTML标签以及各个标签属性大全
- 深入解析Javascript闭包的功能及实现方法
- js闭包
- 小白笔记--------------jsp超链接传值
- H5与其他平台交互框架
- js重写方法的简单实现
- javascript基础:表单处理1
- JS实现控制文本框的内容
- NodeList和HTMLCollection区别
- 你不知道的this—JS异步编程中的this