提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

【移动端网页布局】移动端网页布局基础概念 ⑦ ( 在 PhotoShop 中使用 Cutterman 切二倍图 | 使用二倍图作为背景图像 )

Photoshop网页概念基础 使用 移动 图像 布局
2023-06-13 09:18:50 时间

一、在 PhotoShop 中使用 Cutterman 切二倍图

参考 【CSS】PhotoShop 切图 ③ ( PhotoShop 切图插件 - Cutterman | 下载、安装、启动、注册、登录 Cutterman - 切图神奇 插件 | 使用插件进行切图 ) 博客 , 下载并安装 Cutterman 插件 , 在 Photoshop 中选择 " 菜单栏 / 窗口 / 扩展功能 / Cutterman - 切图神器 " 功能 ;

启动 Cutterman 插件后 , 会在在 Photoshop 界面的右侧工具栏中看到 Cutterman , 登录之前申请的账号 ;

在 Cutterman 中 , 选中 iOS 设备 , 该设备下的 @3X 就是三倍图 , @2X 是二倍图 , @1X 是一倍图 ;

然后选中一个图层 , 点击 " 导出选中图层 " 按钮 , 将选中的图层导出 ;

最终得到三个切图 ;

  • 一倍图像素大小 : 118 x 64 像素 ;
  • 二倍图像素大小 : 236 x 128 像素 ;
  • 三倍图像素大小 : 354 x 192 像素 ;

该按钮的实际尺寸是 236 x 128 像素 , 大小等于 一倍图大小 ;

二、使用二倍图作为背景图像

将上面使用 Cutterman 切图的 236 x 128 像素的二倍图 设置到 118 x 64 像素的盒子模型中 作为背景图片 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二倍图背景</title>
    <style>
        div {
            width: 118px;
            height: 64px;
            border: 1px solid red;
            background: url(images/button.png) no-repeat;
            background-size: 118px 64px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

显示效果 :

相关文章