热门排序 |
&p&我原来写过类似的文章，其中主题相关的我拷贝过来，了解详情：&a href=&///?target=http%3A///jikey/p/4259360.html%232-photoshop& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&豪情-CSS解构系列之&i class=&icon-external&&&/i&&/a&　点击这个链接。&/p&&br&&p&PS是Web设计的首选软件，他着重侧重于对图形的二次处理，主要在颜色方面，通过分图层处理叠加效果来达到各种其异的梦幻需求，叠加是不是很熟悉，就是css里边层叠也可以。只是ps是面性的，css是逻辑性的，从上到下。而PS的神奇在于，每个参数的不一致，导致的结果不一致，这样也让很多非专业人士自认为有设计艺术的细胞或假象，以为自己是一个设计奇才，从而选错行业，所以设计这行有风险，入行要谨慎（不提了，我也是花了2，3年的时间，来证明我不是一个设计人才，多么痛的领悟，当然也不是完全没有帮助，&a href=&///?target=http%3A///jikey/p/3631292.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&经典黑色--网站管理界面&i class=&icon-external&&&/i&&/a&，&a href=&///?target=http%3A///jikey/p/3599290.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&博客园五款多彩皮肤&i class=&icon-external&&&/i&&/a&，这是我设计方面的一点积累）。像AI, CorelDraw着重于对造型的创造或编辑，像CAD则是点线面关系，3DMax则是空间物理关系，Flash是空间与时间的关系等等。而且这些设计软件中也只有PS能够完整真实的模拟Web页面上的真实场景，虽然字体有时候也会在表现上出现稍为的偏差。FireWorks也由于市场份额或PS重合功能太多，已经停止新版本开发或更新了。这是一个公司战略或市场竞争下必然导致的结果，个体用户不能左右。&/p&1).基本信息：&ul&&li&以图层为主要的编辑对象，通过不同层细节的编辑，使整体效果更为绚丽或多变。&/li&&li&以工具为主要的编辑手段，通过多个工具的结合，满足大部分编辑要求。&/li&&li&通过滤镜的组合，呈现很多不错的效果，达到平民人士也能参与互联网炒作的大军中不能自拨，在当下PS已经由有一个名词转为一个动词了。&/li&&li&对前端来说切图时注意：优化切图流程，提升切图效率，增加岗位竞争优势 &br&具体经验分享：修改PS的快捷键，使其符合前端操作的习惯，侧面提升工作效率。从而扩展，可以修改其它软件的快捷键，整体提升工作效率，增加就业资本或信心。&/li&&li&图片格式那些事儿 &br&一般新手不太注意页面的性能问题，而性能容易出现在图片上面，如何在一个大页面中处理好图片是一个前端必备的技能之一。 &br&一般应用比较多的格式有：gif,png-8,png-24,jpg。而新手经常混淆&a href=&///?target=http%3A//bigc.at/png.orz& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&png-8,png-24的区别&i class=&icon-external&&&/i&&/a&。 &br&按我经验4k以下gif,png-8差别不大，4k-100k: png-8,gif占优势，大于100k果断是jpg。 &br&png-8不支持alpha透明，在IE6下需要&a href=&///?target=http%3A///thread-297-1-1.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一个JS&i class=&icon-external&&&/i&&/a&或&a href=&///?target=http%3A///article/using-filter-ie6-png-image-transparent.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&透明滤镜&i class=&icon-external&&&/i&&/a&来处理。 &br&&a href=&///?target=http%3A//ued.taobao.org/blog/%3Fp%3D3196& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&图片格式与设计那点事儿&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//www./article/Web-performance-optimization& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Web性能优化：图片优化&i class=&icon-external&&&/i&&/a&&/li&&/ul&2). 提高切图效率思路之扩展：&p&从客观上来讲，提高效率的基础在于丰富的实战经验或长年的填坑经历，本质上软件的操作差别不是特别大。一个五年经验或一年经验的开发人员，使用同样的工具，主要差别还是一个熟练度。这里只分享我个人积累的一些经验： &br&在上一点提到的修改快捷键，分享一下我修改的几个快捷键（修改这个快捷键，有个缺点，换台电脑可能就不能使用，除非能够熟悉的记得两套快捷键，即修改过的，或原始的）：&/p&&ul&&li&新建图层: F1 &br&使用频率比较强，所以放在一个容易的地方。&/li&&li&新建文件：F2 &br&仅次于新建文件，也是使用使用频率比较高的一个键。由于切图是会从原始图层上多次的分离图层，所以这个快捷捷由原来的按两键，变为一键。并且有效的分离左右手操作的特点，尽量让使用频率高的键从左侧起步。以下的几个快捷键，都是按照这个思路来进行优化或设置的。&/li&&li&按屏幕大小：F3&/li&&li&按画布大小：F4 &br&这两个键操作思路主要借鉴于&a href=&///?target=http%3A///cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CorelDraw&i class=&icon-external&&&/i&&/a&，&a href=&///?target=http%3A///cn/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CorelDraw&i class=&icon-external&&&/i&&/a&是一款优秀的平面广告设计软件，多用于名片，包装设计。这是由加拿大Corel产品，他们公司另外一个比较著名的绘画类软件是&a href=&///?target=http%3A///rw/product/paint-program/%3Fhptrack%3Dcn2bb2& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Painter&i class=&icon-external&&&/i&&/a&。&/li&&li&存储为web格式：F5 &br&由原来的5键优化为一键，还有一个流程是通过Ctrl+Shift+S来存储图片，很明显这个流程步骤过于繁多，很浪费时间。有兴趣的可以做一个对比。&/li&&li&裁剪命令：F6 &br&由原来的3键优化为一键，另外一个是裁剪工具(C)，裁剪工具对整个画面的破坏力比较大，且不易控制，尤其在PS的版本升级中对这个工具进行了优化。而这个命令相对更为轻量或方便。&/li&&li&F7,F8,F9保持不变&/li&&li&转换为RGB模式：ctrl+= &br&因为Gif是索引模式，颜色信息较少，如果要进行编辑，首先得转换成&a href=&///?target=http%3A//zh.wikipedia.org/wiki/%25E4%25B8%%258E%259F%25E8%%25E5%E6%25A8%25A1%25E5%25BC%258F& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&RGB模式&i class=&icon-external&&&/i&&/a&。&/li&&li&从图层建立组：ctrl+, &br&由于刚入行的设计师没有经验，一个设计稿是没有分图层组。其实合理的图层组可以有效的引导前端，所以这个快捷键主要是解决这个问题。&/li&&li&自由变换：F10 &br&变换内容 &br&前端主要还是对现有的PSD文件进行编辑，所以这两个键是可以单独拿出来的。&/li&&li&变换选区：F11 &br&变换边框&/li&&li&画笔：F12 &br&因为前端不像设计师，对PSD只是一个切割，而设计师注重于创造的过程。所以对画笔工具的依赖不是很大，由原来的F5移动到F12。&/li&&li&复制图层 Ctrl+ / 原有位置在菜单栏：图层-&复制图层 &br&这个快捷键，可以快速的把原始PSD中的一个或多个图层复制到一个新文件当中。&/li&&/ul& 演示：&br&&br&3). 切图的几个办法：&ul&&li&切片(k): &br&优点：能够一次切除多个图片。 &br&缺点：需要后退一步，降低效率，容易产生多余无用图片&/li&&li&选区(先用选区工具来画一个范围，然后裁剪): &br&优点：区域精确目标单一 &br&缺点：需要后退一步，容易误操作&/li&&li&拷贝(Ctrl+C): &br&优点：拷贝单层的内容到新文件，能够快速的切除图片。 &br&缺点：不容易找到相应的图层。&/li&&li&合并拷贝(Ctrl+Shift+C): &br&优点：拷贝所有可见层的内容到新文件，能够快速的切除图片。 &br&缺点：不容易找到相应的图层。&/li&&/ul&以上仅供参考。&br&&br&其它相关前端话题，有兴趣加：&b&&/b&，禁止闲聊，非喜勿进。&br&UI感兴趣的加这个：&b&&/b&。
我原来写过类似的文章，其中主题相关的我拷贝过来，了解详情： 点击这个链接。PS是Web设计的首选软件，他着重侧重于对图形的二次处理，主要在颜色方面，通过分图层处理叠加效果来达到各种其异的梦幻需求，叠加是不是很熟悉，就是css里边…
最近看了一个视频，专门讲ps切图的；学到了很多，强烈推荐&br&&a href=&///?target=http%3A///learn/506& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端工程师必备的PS技能——切图篇&i class=&icon-external&&&/i&&/a&
最近看了一个视频，专门讲ps切图的；学到了很多，强烈推荐
---------------------------------------------我只是搬运工-------------------------------------------&br&&a href=&///?target=https%3A///cn/photoshop/using/generate-assets-layers.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/cn/phot&/span&&span class=&invisible&&oshop/using/generate-assets-layers.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&---------------------------------------------我只是搬运工-------------------------------------------&br&从图层或图层组生成图像资源&br&&br&&p&要更好地了解图像资源生成器，请考虑具有以下图层层次结构的简单 PSD 文件&em&&strong&&a href=&///?target=https%3A//s3-us-west-/adobe-generator/generator_sample.psd& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&（从此链接下载）&i class=&icon-external&&&/i&&/a&&/strong&&/em&：&br&&/p&&br&&br&&br&示例 PSD 文件及其图层层次结构&br&&br&&p&此文件的图层层次结构具有两个图层组：&em&Rounded_rectangles&/em& 和 &em&Ellipses&/em&。每个图层组均包含 5 个图层。&br&&/p&&br&&br&&p&按照以下步骤从此 PSD 文件生成图像资源：&/p&&ol&&li&打开 PSD 文件后，选择“文件”&“生成”&“图像资源”。&/li&&li&将适当的文件格式扩展（.jpg、.png 或 .gif）添加到您要从中生成图像资源的图层或图层组的名称中。例如，将图层组 &em&Rounded_rectangles&/em& 和 &em&Ellipses&/em& 重命名为Rounded_rectangles.jpg 和 Ellipses.png；将图层 &em&Ellipse_4&/em& 重命名为Ellipse_4.gif。&/li&&/ol&&p&注意:&/p&&p&图层名称不支持特殊字符 : 和 *。&/p&&br&&br&&p&Photoshop 生成图像资源并将它们与源 PSD 文件一起保存在子文件夹中。如果源 PSD 文件尚未保存，Photoshop 会将生成的资源保存在&br&桌面上的新文件夹中。&/p&&br&&br&&br&图像资源名称从图层名称/图层组名称中生成。&br&&p&图像资源生成功能针对当前文档启用。启用后，无论何时再次打开该文档，功能仍然可用。要禁用当前文档的图像资源生成功能，请取消选择“文件”&“生成”&“图像资源”。&/p&&br&&br&从一个图层或图层组生成多个资源&br&&br&&p&要从一个图层/图层组生成多个资源，请用逗号 (,) 分隔资源名称。例如，以下图层名称生成三个资源：&/p&&p&Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png&/p&&br&&br&在子文件夹中保存资源&br&&br&&p&您可以选择将特定图层/图层组生成的图像资源直接保存在资源文件夹下的子文件夹中。包括图层/图层组名称下的子文件夹名称；例如：&/p&&p&&em&[子文件夹]&/em&/Ellipse_4.jpg&/p&&br&&br&&a href=&///?target=https%3A///cn/photoshop/using/generate-assets-layers.html%23& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&转到页首&i class=&icon-external&&&/i&&/a&&br&Web 设计使用案例&br&&br&&p&从 PSD 文件生成图像资源对于多设备 Web 设计来说尤其有用。考虑以下 Web 设计及其图层结构：&/p&&br&&br&&br&Web 设计及其图层层次结构&br&&br&&p&将顶部的图标和“&em&全球热点&/em&”图像网格的顶行提取为图像资源：&br&&/p&&br&&br&&ul&&li&将图像格式扩展添加到适当的图层名称中。&/li&&/ul&&br&&br&&br&&br&&br&&br&&p&&em&为适当的图层/图层组重命名&/em&&/p&&br&&p&注意:&/p&&p&将从图层/图层组的内容中生成一个图像资源。例如，上面屏幕抓图中的 AdventureCo Logo 图层组包含一个形状图层和一个活动文本图层。当从图层组生成图像资源时，这些图层会进行拼合。&br&&/p&&br&&br&&p&Photoshop 生成资源，并将它们保存在与源 PSD 文件相同的位置。&/p&&br&&br&&br&生成的图像资源&br&&br&&a href=&///?target=https%3A///cn/photoshop/using/generate-assets-layers.html%23& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&转到页首&i class=&icon-external&&&/i&&/a&&br&指定品质和大小参数&br&&br&&p&默认情况下，JPG 资源会以 90% 品质生成。默认情况下，PGN 资源会以 32 位图像生成。GIF 资源会以基本 Alpha 透明度生成。&/p&&br&&br&&p&当重命名图层或图层组以便为资源生成做准备时，您可以自定品质和大小。&br&&/p&&br&&br&JPG 资源的参数&br&&br&&ul&&li&添加所需的输出品质作为该资源名称后缀：.jpg(1-10) 或 .jpg(1-100%)。例如：&ul&&li&Ellipse_4.jpg5&/li&&li&Ellipse_4.jpg50%&/li&&/ul&&/li&&li&添加所需的输出图像大小（相对大小或以支持的格式）作为该资源名称前缀：px、in、cm和 mm。Photoshop 会相应地缩放图像。例如：&ul&&li&200% Ellipse_4.jpg&/li&&li&300 x 200 Rounded_rectangle_3.jpg&/li&&li&10in x 200mm Rounded_rectangle_3.jpg&br&&/li&&/ul&&/li&&/ul&&br&&p&&em&&strong&注：&/strong&&/em&&em&请记得在前缀和资源名称之间添加一个空格字符。如果要指定像素大小，则可以省略单位。例如，300 x 200。&br&&/em&&/p&&br&&p&根据说明，当指定所需输出图像大小时，可以混合使用不同的单位和像素。例如，4in x 100 Rounded_rectangle_3.jpg 是资源生成的有效图层名称。&br&&/p&&br&&br&PNG 资源的参数&br&&br&&ul&&li&添加所需的输出品质作为该资源名称后缀：8、24 或 32。例如：&ul&&li&Ellipse_4.png24&/li&&/ul&&/li&&li&添加所需的输出图像大小（相对大小或以支持的格式）作为该资源名称前缀：px、in、cm和 mm。Photoshop 会相应地缩放图像。例如：&ul&&li&42% Ellipse_4.png&/li&&li&300mm x 20cm Rounded_rectangle_3.png&/li&&li&10in x 50cm Rounded_rectangle_3.png&/li&&/ul&&/li&&/ul&&br&&p&&em&&strong&注：&/strong&&/em&&em&请记得在前缀和资源名称之间添加一个空格字符。如果要指定像素大小，则可以省略单位。例如，300 x 200。&br&&/em&&/p&&br&&p&根据说明，当指定所需输出图像大小时，可以混合使用不同的单位和像素。例如，4in x 100 Rounded_rectangle_3.png 是资源生成的有效图层名称。&br&&/p&&br&&br&GIF 资源的参数&br&&br&&ul&&li&添加所需的输出图像大小（相对大小或以支持的格式）作为该资源名称前缀：px、in、cm和 mm。例如：&ul&&li&42% Ellipse_4.gif&/li&&li&300mm x 20cm Rounded_rectangle_3.gif&/li&&li&20in x 50cm Rounded_rectangle_3.gif&/li&&/ul&&/li&&/ul&&br&&p&&em&&strong&注：&/strong&&/em&&em&请记得在前缀和资源名称之间添加一个空格字符。如果要指定像素大小，则可以省略单位。例如，300 x 200。&br&&/em&&/p&&br&&p&根据说明，当指定所需输出图像大小时，可以混合使用不同的单位和像素。例如，4in x 100 Rounded_rectangle_3.gif 是资源生成的有效图层名称。&br&&/p&&br&&br&&p&品质参数对 GIF 资源不可用。&/p&&br&&br&构建复杂图层名称&br&&br&&p&为资源生成命名图层时，您可以使用参数指定多个资源名称。例如：&/p&&p&120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif&/p&&p&Photoshop 从该图层生成以下资源：&/p&&ul&&li&Delicious.jpg（缩放 120% 的 8 品质 JPG 图像）&/li&&li&Delicious.png（缩放 42% 的 24 位 PNG 图像）&/li&&li&Delicious_2.jpg（100x100 像素绝对大小的 90% 品质 JPG 图像）&/li&&li&Delicious.gif（缩放 250% 的 GIF 图像）&/li&&/ul&&br&&a href=&///?target=https%3A///cn/photoshop/using/generate-assets-layers.html%23& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&转到页首&i class=&icon-external&&&/i&&/a&&br&为资源指定默认设置&br&&br&&p&可以为生成的资源指定文件默认设置。请按以下步骤进行操作：&/p&&ol&&li&创建空图层。&/li&&li&图层的名称以默认的关键字开始。现在，输入您将应用于从文档生成的所有图像资源的设置。例如：&br&&/li&&/ol&&br&&p&默认 hi-res/&/p&&br&&p&在名为hi-res的子文件夹中生成所有图像资源。例如，&em&[asset_folder]&/em&/hi-res/Delicious.jpg。&br&&/p&&br&&br&&p&默认 hi-res/@2x&/p&&br&&p&在名为hi-res的子文件夹中生成所有图像资源。此外，资源名称在后缀为@2x。例如，&em&[asset_folder]&/em&/hi-res/Delicious@2x.jpg。&br&&/p&&br&&br&&p&默认 50% lo-res/&/p&&br&&p&将缩小 50% 的图像资源保存在文档资源文件夹下的子文件夹lo-res中&/p&&br&&br&&p&默认 hi-res/@2x + 50% lo-res/&/p&&br&&p&从图层生成两个图像资源：&/p&&ul&&li&在hi-res子文件夹中，图像资源名称的后缀为@2x&/li&&li&在lo-res子文件夹中，图像资源缩小 50%&br&&/li&&/ul&&br&&p&注意:&/p&&p&默认缩放系数由各个图层指定的缩放系数覆盖。&/p&&br&&br&&a href=&///?target=https%3A///cn/photoshop/using/generate-assets-layers.html%23& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&转到页首&i class=&icon-external&&&/i&&/a&&br&禁用所有文档的图像资源生成&br&&br&&p&您可以通过修改“首选项”，在全局范围禁用所有 Photoshop 文档的图像资源生成。&/p&&br&&br&&ol&&li&选择“编辑”&“首选项”&“增效工具”。&/li&&li&取消选择“启用生成器”。&/li&&li&单击“确定”。&/li&&/ol&&p&注意:&/p&&p&当您在“首选项”中禁用图像资源生成时，“文件”&“生成”菜单命令不可用。该功能仅能在“首选项”对话框中再次启用。&/p&
---------------------------------------------我只是搬运工----------------------------------------------------------------------------------------我只是搬运工-------------------------------------------从图层或图层组生成…
1. 建立切片区域Slice，并且和需要导出的内容放到一个组里面&br&&img src=&/a409d4e7fefcadf2da5483_b.png& data-rawwidth=&259& data-rawheight=&101& class=&content_image& width=&259&&&br&2.勾选仅导出组内容&img src=&/b8c3df92_b.png& data-rawwidth=&218& data-rawheight=&102& class=&content_image& width=&218&&&br&3. 确认和去掉画布背景颜色选项中的Include Export，很多时候带底色，就是因为你默认选上了导出的时候带上了背景色( Include Export )&br&&br&&img src=&/f1df7bac62d0ddbac07e_b.png& data-rawwidth=&223& data-rawheight=&507& class=&content_image& width=&223&&&br&4.设置好尺寸然后导出就好啦。&br&&br&我总结出来，这个应该才是最正确的做法 &(￣▽￣)&
1. 建立切片区域Slice，并且和需要导出的内容放到一个组里面2.勾选仅导出组内容3. 确认和去掉画布背景颜色选项中的Include Export，很多时候带底色，就是因为你默认选上了导出的时候带上了背景色( Include Export )4.设置好尺寸然后导出就好啦。我总结出来…
自己摸索+在交流群里各种问，终于找到方法啦&br&第一步，隐藏背景，或将图标拖到无背景区域；&br&第二步，s（slice）快捷键建立切片区域；&br&第三步，make exportable +设置好要导出的尺寸，勾选background color 设置透明度为0%，export即可得到含有透明区域的切图啦。&img data-rawheight=&2448& data-rawwidth=&2448& src=&/de6ec9c9c464383efec8b6e7c2241f4a_b.jpg& class=&origin_image zh-lightbox-thumb& width=&2448& data-original=&/de6ec9c9c464383efec8b6e7c2241f4a_r.jpg&&&img data-rawheight=&2448& data-rawwidth=&2448& src=&/2cbca0a7a7203ebcda88c9_b.jpg& class=&origin_image zh-lightbox-thumb& width=&2448& data-original=&/2cbca0a7a7203ebcda88c9_r.jpg&&&img data-rawheight=&2448& data-rawwidth=&2448& src=&/fba001eb6210bf_b.jpg& class=&origin_image zh-lightbox-thumb& width=&2448& data-original=&/fba001eb6210bf_r.jpg&&&img data-rawheight=&2448& data-rawwidth=&2448& src=&/b496d768c46eb755ab95087f04ceb53a_b.jpg& class=&origin_image zh-lightbox-thumb& width=&2448& data-original=&/b496d768c46eb755ab95087f04ceb53a_r.jpg&&
自己摸索+在交流群里各种问，终于找到方法啦第一步，隐藏背景，或将图标拖到无背景区域；第二步，s（slice）快捷键建立切片区域；第三步，make exportable +设置好要导出的尺寸，勾选background color 设置透明度为0%，export即可得到含有透明区域的切图啦。
&a href=&///?target=http%3A///%3F/article/11& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&sketch技巧问题汇总！&i class=&icon-external&&&/i&&/a&，第四个。
，第四个。
谈谈我的切图管理经验：&br&&ol&&li&&b&切图分层级命名＋分文件夹管理&/b&：命名尽量不要太多，一般是 「定位＋类型＋一级属性＋二级属性」，例如一个切图文件的命名是「tabbar_btn_red_n.png」,tabbar 导航栏，btn 按钮，n normal 状态（这个方法&a class=&member_mention& data-hash=&a10b16aef24e0202404c& href=&///people/a10b16aef24e0202404c& data-tip=&p$b$a10b16aef24e0202404c&&@侯智&/a& 提出的命名要优于这个命名方法，所以实践起来我在慢慢转向侯智提的方法）；&b&后来，跟开发沟通后有必要增加以文件夹分类&/b&，因为切图量大了之后对于开发来说仍然不好定位切图，实际操作中，定位这个层级我会在相应文件夹中用其他更加细节（例如 home 页面专门用到的就加上home）来代替；&br&&/li&&li&&b&分版本同等级管理&/b&：例如该项目的名字是「项目甲」，那么在项目甲中是「版本＋文件类型」命名的文件夹分类，例如：1.0源文件、1.0切图、1.0规范、2.0源文件、2.0切图等......&br&&/li&&li&&b&不同项目同样按照「项目＋项目属性」命名管理&/b&：多个项目往往是有不同的平台，例如我命名是：项目甲 iPhone、项目甲 Android、项目甲 Web......诸如此类。如果项目不大，则会把平台直接并入切图的分类。&/li&&/ol&说说我这么做的原因：&br&&ol&&li&减少层级，名字＋属性就是为了减少层级，而且不引起混淆去命名的；&/li&&li&能快速查找到该项目，一般查找起来的话，直接找到那个切图不太可能，靠谱的是找到切图所在项目的具体版本的平台；苹果的 spotlight 使用起来非常方便；&/li&&/ol&抛个大砖块，期待其他人的分享。&br&&br&日增加：&br&&br&感谢&a class=&member_mention& data-editable=&true& data-title=&@侯智& data-hash=&a10b16aef24e0202404c& href=&///people/a10b16aef24e0202404c& data-tip=&p$b$a10b16aef24e0202404c&&@侯智&/a& 指出来我的错误。&br&他认为命名时应该以使用导向命名，这样对于检索效率有很大提升，&b&这点非常赞同&/b&，为此也请教了一位开发朋友，这说明沟通很重要。
谈谈我的切图管理经验：切图分层级命名＋分文件夹管理：命名尽量不要太多，一般是 「定位＋类型＋一级属性＋二级属性」，例如一个切图文件的命名是「tabbar_btn_red_n.png」,tabbar 导航栏，btn 按钮，n normal 状态（这个方法 提出的命名要优于这个命…
0、首先，一切都要建立在iOS和Android自身规律的前提下(比如iOS的@2X 和Android中各dpi文件夹下的同名文件)，如果两个平台使用的是同一套设计和资源，一定要搞好对应，尤其是在批量替换图片的时候，写个自动化工具吧。&br&1、不管是图片资源，还是开发自己用XML/代码写的背景/selector，文件名字只应该表明「这是干什么用的」，而不应该描述「这是长什么样的」。诸如&a class=&member_mention& data-hash=&7246e0cfda15baf04bf5b& href=&///people/7246e0cfda15baf04bf5b& data-tip=&p$b$7246e0cfda15baf04bf5b&&@刘少鹏&/a& 提到一个不太恰当的例子「tabbar_btn_red_n.png」，相信我，如果你的产品有多个分支，每个分支都是不同皮肤，出现「red」字样的图片资源真的很不合适，用「text_title」真的要比「text_black」科学得多。这不仅应该贯穿在图片命名中，也应体现在代码的编写中。&br&2、命名时，第一个单词最重要，因为它决定了顺序和检索效率。个人不推荐「 btn_home_add_pressed.png」这样的写法，这种看起来很科学，但是使用起来尤其不方便，我说的是，工程师在代码中引用图片名称的时候，输入四个字符「btn_」后，会有很长一列搜索结果，如果你把跟详细的描述放在首位，效果会好很多，工程师们会感激你的~&br&3、如果版本分支复杂到一定程度，图片资源也使用VCS吧。
0、首先，一切都要建立在iOS和Android自身规律的前提下(比如iOS的@2X 和Android中各dpi文件夹下的同名文件)，如果两个平台使用的是同一套设计和资源，一定要搞好对应，尤其是在批量替换图片的时候，写个自动化工具吧。1、不管是图片资源，还是开发自己用XML…
切图仔只是开开玩笑的，切图在重构实际工作内容中，占1/4甚至更少比较合理。&br&&br&在腾讯叫重构，是“前端开发工程师”细分衍生出的一个岗位。&br&核心职能很简单：PSD TO HTML。&br&因相对于JS，CSS属于不需要编程思维的语言，相比前端开发，处于鄙视链的下游。&br&&br&一般产品流程逻辑是：需求-产品-交互-设计-&b&重构&/b&-前端-后端-测试-上线。&br&不错的重构，像素眼，&b&跨平台&/b&兼容，页面健壮，优雅降级，页面渲染，载入效率。&br&厉害的重构，总结优化本身工作效率，释放重复劳力；对上游（交互设计）至下游（前端后端）都有足够的掌控、预见能力。&br&简单说就是会交互懂设计，能写js还懂些php，可以说属于都有经验的水平。用现在时髦的话说，是“T型”人才。&br&&br&有时候我会想，重构这个“技术要求低”的岗位究竟有没有存在的意义。看看产品/设计老抱怨iOS/android开发出的app低还原，我想还是有积极的存在价值。&br&&br&但重构岗位本身，不能只停留在HTML/CSS上，javascript是非常重要的一环。（即便爱重构到深沉不打算转前端开发）&br&从发展方向上往远看一些，目标放在移动端&跨平台的经验积累上日后的收益会更大。&br&从专业技能上，之前有预编译，现在有后编译，重构新技术也是随着前端不停出现，在新技术不停涌现的同时，如何选择精华深入学习更显重要。&br&&br&比较粗浅，有疑问可以评论提问
切图仔只是开开玩笑的，切图在重构实际工作内容中，占1/4甚至更少比较合理。在腾讯叫重构，是“前端开发工程师”细分衍生出的一个岗位。核心职能很简单：PSD TO HTML。因相对于JS，CSS属于不需要编程思维的语言，相比前端开发，处于鄙视链的下游。一般产品…
很多前端入行都是从切图开始的，对于新手来说，切图可以让个人能力得到一个较大的提升，使得方方面面的技能得到历练，开阔眼界，可以说是打怪升级的好手段。&br&&br&如何把切得一手好图也是一门学问，需要考虑兼容性，复用性，扩展性等等东西，就像答主 &a data-hash=&1c4ca537fbf11dc08fc665b45498e24c& href=&///people/1c4ca537fbf11dc08fc665b45498e24c& class=&member_mention& data-editable=&true& data-title=&@豪情& data-tip=&p$b$1c4ca537fbf11dc08fc665b45498e24c&&@豪情&/a&
所说的。&br&&br&&a data-hash=&ea9db4e3ca2ae0& href=&///people/ea9db4e3ca2ae0& class=&member_mention& data-editable=&true& data-title=&@王集鹄& data-tip=&p$b$ea9db4e3ca2ae0&&@王集鹄&/a&
提到「切图自动化」思路，深表赞同，我也顺便搭车说说我的经验。&br&&br&从我以往做切图仔的经验来看，前端切图的对象，很大一部分是公司营销活动类和纯展示类的页面，这一类页面通常只有图片和链接，大部分是量像素、切片、导出等重复性的操作，实现起来不困难但却耗时耗力，这可能就是切图仔的日常。&br&&br&面对这些，优秀的切图仔会想尽办法提高效率，以腾出时间精力去做更有挑战的事情。比如寻找各种工具，或者干脆自己制造工具。这便是我理解的「切图切到很高境界」&br&&br&「想尽一切办法代替机械性的劳动」&br&&br&--- 猥琐的分割线 ---&br&&br&推荐一个「前端切图工具 - Puzzler」 &a href=&///?target=https%3A///superRaytin/puzzler& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&superRaytin/puzzler · GitHub&i class=&icon-external&&&/i&&/a&&br&&br&&img src=&/ddd64c4c5b2b52b9c82a926d693c3dd1_b.png& data-rawwidth=&1400& data-rawheight=&1044& class=&origin_image zh-lightbox-thumb& width=&1400& data-original=&/ddd64c4c5b2b52b9c82a926d693c3dd1_r.png&&&br&&br&Puzzler 是一个傻瓜式的 HTML 页面切图工具，它可以将一张图片快速切割成切片并导出 HTML 文件。Puzzler 能让你从重复的 PSD 切图工作中解放出来，不需要安装任何依赖，它的愿景是拯救 ? 切图仔！&br&&br&目前提供了 Mac 和 Windows 两个平台的客户端，如果需要在 Linux 系统上使用此工具，也欢迎联系作者，作者将乐于在 Linux 系统上测试提供帮助。&br&&br&我坚信，一旦你尝到自动化切图的甜头，你就会爱上它。
很多前端入行都是从切图开始的，对于新手来说，切图可以让个人能力得到一个较大的提升，使得方方面面的技能得到历练，开阔眼界，可以说是打怪升级的好手段。如何把切得一手好图也是一门学问，需要考虑兼容性，复用性，扩展性等等东西，就像答主
就我个人的一点经验分享一下，谈不上很高的境界，只说是一点心得，我认为比较好的切图的同学是，如何在众多林立的需求之间取得一个平衡。说到底还是眼界的问题，刚开始可能纠结如何命名css比较易用，过后可能纠结html结构是否合理，然后页面是否兼容，可复用，再往后页面功能设计是否合理，页面体验是否符合人的基本心理需求。做的时间长了，就有空琢磨这个产品到底如何，能否真的占有一定的市场或用户量，然后做失败几个产品之后，看看其它行业是否还有潜力的机会，是否有与互联网接合的切点。然后在跨地区看看，地球那边的行业是怎么样的？所以，下午去巴黎看看那边是否有订餐需求不是一个梦。然后在每个阶段下对前端的审视或要求是不一样的，也谈不上很高的境界，只是公司或人原来的目标或需求变了，所以就像我以前提到一样，这个点永远都达不到，只有无限可能的接近。&br&&br&然后在分享点目前我接触到具体的体验：&br&1. 满足UI同学的视觉需求。&br&无论是css hack还是通过js进行差异化处理，从技术手段上无底线的实现UI同学的视觉要求。这是工作负责的态度，也是自我需求突破的一个手段。从UI同学来说，做的设计稿没有达到要求，是对其本身工作成果的不尊重。&br&&br&2. 控制好后端同学的数据显示。&br&前端做为后端同学的代言人，无趣的数字通过有趣的交互或界面展现出来，本身是一件很美好的事情，通过合作的方式让整个流程完美无瑕，但总是在外界因素的影响下，把握不好。&br&&br&3. 在这有限的条件下提高自己的效率或代码质量。&br&这就要提到一般页面的 页面的健壮性，扩展性，复用性。&br&&br&a. 健壮性：&br&这个怎么说呢，UI出的psd图是一个页面理想状态下的形态，而页面有数据，会出现两种极端状态，一，数据极多，二，数据极少。所以在页面排版的时候，考虑这两种状态，以免数据太多的时候，撑破页面，以免数据太少，页面部分元素会出现收回去状况，这样的页面会出现一些细节没有处理的常规失误。&br&&br&b. 扩展性：&br&可以说，这个也是第一条的扩充，扩展性的意思为，在页面的模块很少的时候，要考虑未来添加子模块或兄弟模块的状态，为将来留好html接口。在将来添加模块的时候，尽可能少的去动原来的html结构，使html易于扩展。这个具体情况，具体处理。一般的处理就是如果有可能会有兄弟元素就多套一层，为后台添加兄弟元素尽可能的不影响现有结构。这个点乍看起来很小，其实如果扩充到整个项目，多个项目就有可观的效应了。&br&&img src=&/07adb47cd8f0ae30f36cec_b.png& data-rawwidth=&259& data-rawheight=&605& class=&content_image& width=&259&&&br&c. 复用性：&br&由于页面中风格相似的模块很多，或页面中与页面中相似的模块很多，但是总会有那么一丁点的差异，这是设计师认识世界然后在表达世界的产物，我们理解设计师的职业操守，所以只能在前期做一些技术处理，免得后期问候某岗位的亲人。具体的有的模块高点有的模块低点，还有结构完全一样，但底纹不一定。这样建议把表现形式的样式放在一个class中，物理属性放在一个class中。还有就是装饰性的图片决不不以明标签的方式插入到页面中，内容式的内容绝对以&img src=&& /&的方式插入中去，以免将来多主题，多语言版本的实现。&br&&img src=&/61c13faa9a8d592fd4fd1_b.jpg& data-rawwidth=&600& data-rawheight=&207& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&/61c13faa9a8d592fd4fd1_r.jpg&&&br&可能有时候还有的情况是，页面完全切不出来，html，css完全不知道怎么写了。但基础掌握良好，概念基本清楚。这时候我个人建议应该是吸收别人好的东西时候到了，也是个人水平瓶颈的时候，需要在坚持一下完全的突破。具体的方式就是，用firebug去分析先有的bat各个项目的各个页面，总有你可以借鉴的地方。有兴趣加入专业前端开发群：&b&&/b&，禁止闲聊，禁发大gif，非喜勿进。
就我个人的一点经验分享一下，谈不上很高的境界，只说是一点心得，我认为比较好的切图的同学是，如何在众多林立的需求之间取得一个平衡。说到底还是眼界的问题，刚开始可能纠结如何命名css比较易用，过后可能纠结html结构是否合理，然后页面是否兼容，可复…
受邀。刚刚打了很多字，感觉废话太多，最终删减如下。&br&&br&在干活之前，首先要看一下我们正在处理的是什么类型的页面。大体分三种类型吧，图片型（EDM 或活动着陆页等）、图文型（门户网站或电商网站等）、界面型（Web App 等）。&br&&br&第一种页面往往是一次性的，交互功能也较少，但对产出速度往往要求较高。因此，通常用你说的第二种方法就可以打发了。至于用什么工具，我通常会用 Photoshop 的切片功能直接导出 HTML 表格和图片，再用文本编辑器和 Dreamweaver 稍做加工。&br&&br&而第二、第三类页面，通常具有很长的生存期，对质量要求很高——语义化、性能、可维护性等等。因此，通常需要手写 HTML 和 CSS 代码，并精确裁剪、优化图片——这基本上就是你说的第一种方式。这种做法跟浏览器兼容性没什么关系（如果真要谈兼容，表格布局的兼容性往往更好），只是这样做出来的页面质量更高。虽然也有一些自动化的 “PSD → HTML + CSS + 图片” 的工具存在，但并未成为主流，主要原因还是代码质量无法达到期望的程度。
受邀。刚刚打了很多字，感觉废话太多，最终删减如下。在干活之前，首先要看一下我们正在处理的是什么类型的页面。大体分三种类型吧，图片型（EDM 或活动着陆页等）、图文型（门户网站或电商网站等）、界面型（Web App 等）。第一种页面往往是一次性的，交互…
DW生成的页面谁敢去维护。以后不管了的话，就生成吧
DW生成的页面谁敢去维护。以后不管了的话，就生成吧
看情况的，现在很多网络公司都服务中小企业，一些企业站用ps切片，导到DW可以的，企业站的页面很简单，也没有很大的维护困难。而且现在也可以导出div+css的样式。而且本来就快，也适合一些网络公司的批量输出。
看情况的，现在很多网络公司都服务中小企业，一些企业站用ps切片，导到DW可以的，企业站的页面很简单，也没有很大的维护困难。而且现在也可以导出div+css的样式。而且本来就快，也适合一些网络公司的批量输出。
已有帐号？
社交帐号登录
无法登录？
社交帐号登录}