登入
|
停止注册
开启辅助访问
设为首页
收藏网址
扫一扫关注微信
主页
Portal
版块
BBS
兴趣
Group
帮助
Help
专辑
Collection
了解社区
关于我们
租賃視界社區
»
版块
›
兴趣
›
電算技術
›
图形程序
›
PhotoShop
›
网站切片
网站切片
[复制链接]
448
0
坤FL
版块管理
2024-3-16 03:32
自【移动终端】
|
查看全部
关于PSD切片
现在你已经掌握了HTML、CSS、Photoshop知识,那么你还需要学习如何把PSD转换为网页上的图片和背景,下面有两个不错的教程:
Slice and Dice that PSD
一、准备工作
切图前需要先对PS进行基本设置,记住一些快捷键能帮我们更快的工作。
工作区设置
通过窗口打开:信息、字符、图层、历史记录、选项。
信息面板:配合矩形选框可显示距离、鼠标定位坐标
字符面板:显示字体、字体大小、字体颜色、行高
历史记录:快速返回到历史状态
单位设置
信息调板设置:颜色RGB,标尺单位px
编辑——首选项——单位与标尺:单位px
快捷键
整体移动:空格+鼠标
整体缩放:ait+滚轮
取消:ctrl+D
返回上n步:ctrl+alt+Z
移动:V
文字:T
选框:M
吸管:I
切片:K
标尺:ctrl+R
新建参考线:alt+V+E(可直接设参数)
参考线:ctrl+;
拿到设计图,可以先分析页面的结构分布,判断设计图中公共样式部分,判断出图中需要切出单独保留的图片和需要拼接Scrpite图片。
二、切图
切图前先确定切图范围,并且隐藏掉图上的干扰信息(比如文字,不必要的小短线,图标什么的)。
1. Icon/Logo
这类图片常常尺寸不是很大,起指示作用,较少变更,背景往往为透明。切这种图片可以用这两种方法。
1.1新建psd另存对象
操作
移动工具选中——图层转化为智能对象——选框工具框选大致区域、ctrl+c、ctrl+n确定——ctrl+v——ctrl+alt+shift+s——PNG-24/8、命名save、关闭窗口
新建psd另存为对象
无需仔细框选图片边沿,也能非常准确的切取图片
一次只能处理一张图片,适用于图比较少的情况
对于由多个图层组成的icon,需要先全部选取并合并图层
1.2 切片法
操作
切片工具K——选择相应位置切片——隐藏背景/文字——ctrl+alt+shift+s、切片选择工具(可单独选几个保存)、PNG-24/8保存——保存所有用户切片、文件位置,保存
图2
可一次切完单页面上所有图片后一次性保存,当然保存图片格式是一致。
切片时适当放大图片,注意图片边缘。可提前设好准确的参考线。
对于比较规整的页面,可以利用【基于参考线自动切片】
图3
1.3 保存
颜色单一,且【无】半透明效果opacity——存为PNG8
颜色单一,且【有】半透明效果opacity——存为PNG24
2. 内容/背景
设计中有些图片是表达具体内容,往往随着页面内容的更新而变更并且颜色会更丰富。(如下图红框所示)
图4
2.1操作
覆盖图层隐藏——选框图片——alt+I、p裁剪——ctrl+alt+shift+s——JPEG、60——ctrl+alt+z还原
当然,这些图片往往需要存储的格式比较单一,可以直接全部切片,保存。
2.2存储
颜色丰富,无透明色——存为JPEG60/80
JPEG有损压缩,数值越高,图片质量越高
三、合并sprite
为了减少http请求数量,加速页面显示。我们可以将加载量较大,不随用户信息变化的多个小图片拼接成雪碧图。
操作
选中A图层、转化为智能对象、选框工具框选区域、ctrl+c、ctrl+n、ctrl+v
——图像画布大小、定位、更新宽/高——放好交界参考线——选中B图层、转化为智能对象、选框工具框选区域、ctrl+c、回到新建窗口、ctrl+v
图片描述
四、测距/获取颜色值
当然,除了以上。我们还有两个非常常用又非常简单的ps操作:测距和获取颜色值。写CSS一定会用到。
测距
矩形选框直接拉,在信息面板可见宽(w)高(H)
字体大小直接看字符面板
获取颜色值
吸管吸取相应位置,工具栏设置前景色点一下,即可得各种形式颜色数值
可多吸取几个位置,注意颜色数值是否有变化,确定有无渐变
我们可以在这个网站上下载文件,练习psd切图&静态页面:
练习前清除预设切片:视图——清除切片
举报
回复
返回列表
论坛元老
论坛联合创始人
回复
转播
评分
分享
搜索
帖子
用户
热搜:
融资租赁
金融租赁
资产证券化
财务分析
风险
税务
银行
热门版块
社区工具
外国語
数学版
侦查学
法学版
热力设备融租
造纸印刷融租
投资学
计算机
统计学
股票基金研习
查看社区所有版块>>
投票调查
社区任务
我的收藏
购物中心
我的文辑
我的好友
参与活动
我的勋章
我的悬赏
我的投票
我的群组
我的话题
研究报告
融资租赁行业2023年回顾与2024年展望
联合资信主要观点: 2023年10月下发了金融租赁公司管理办法,体现了监管机构对
2023年租赁业调查报告(毕马威)
毕马威连续第5年发布租赁业调查报告。本刊结合租赁行业热点话题提供专业洞察,并汇总
2021年度融资租赁业调查报告
2021年度融资租赁业调查报告 下载地址:原链接
2021年融资租赁行业信用风险展望
一、融资租赁行业 2020 年信用风险回顾 1.信用等级迁移及风险事件回顾 202
《金融租赁行业发展报告(2007-2017)》
金融租赁行业发展报告(2007-2017) 《报告》主体内容分为导言、发展篇、环境篇、资产
更多
精华推荐
法律尽职调查指要
产业金融之脱虚向实下的融资租赁供给侧改革
2018年新租赁会计准则修订的内容整理
制造业项目尽职调查报告样本范例(适用于制
金融租赁公司产品手册(研究资料)
汽车租赁证券化:深化汽车金融服务正当时
营改增如何影响融资租赁业: 政策效应与适
融资租赁行业2014年度报告-租赁三十人论坛
更多
社区同学
坤FL
ejoty
更多
客服中心
Admin@tjrzzl.com
周一至周日 10:00-22:00 仅收市话费
站内客服
头条微博
邮件咨询
站务议事
关注我们
加入QQ群组
关注官方微信
关于我们
关于我们
友情链接
联系我们
帮助中心
运营理念
注册说明
获取硬币
服务说明
社区规范
免责声明
账户安全
关注我们
官方微博
官方空间
官方微信
电子邮局联系
周一到周八 10:00-22:00 [全年不休假]
7x24小时在线客服
移动版
禁言
关于
网站地图
-
全球融资租赁领域的联结者
|
津ICP备14004695号
| 津公网安备12011102000780号
快速回复
返回顶部
返回列表