【图片处理入门教程】图片处理的十大禁忌 设计师必看

PhotoShop和Fireworks均是常用的图片处理软件，一般网站的图片处理均用ps进行细致处理，fw则是对图片的精度进行优化，以达到最佳图像品质和最小压缩大小之间的平衡。

一般常用的图片格式分为以下3种。

【JPG格式】：以良好质量 保存图片。应用最广泛的图片格式之一，这种图片是经过压缩而来的，文件较小，便于在网络上传输，网页上大部分图片就是这种格式。

【GIF格式】：以较低质量保存简单绘图。这种格式最多支持256色彩的图像，所以一般做品牌logo或颜色单一的图片建议保存为GIF格式。网上很多小动画也可以使用动画GIF格式实现。

【PNG格式】：以高质量保存照片或绘图。PNG格式图片因其高保真性最高，支持约1600万色。它最大的特点是带透明通道，就是我们经常说的透明背景，一般大图不建议使用，其占用的图片内存比jpg的大很多。

备注：如果非要用png格式，可以进行png压缩处理，直接上这个网站进行在线压缩【tinypng】，有时可以压缩掉70%的体积。

一般图片大小分为：1GB=1024MB 1MB=1024K 1KB=1024字节

选择所要查看的图片，鼠标右键点击图片，弹出的窗口列表点击【属性】，可以查看到图片的信息。

如下图，把图片拖进fw里，右侧（优化）黑框内可以看到图片的格式和品质（若没有该模块，点击顶部导航的窗口，找到优化，点击即可），下面的红框可以看到图片的尺寸。点击查看图片>>

打开ps后点击顶部【文件】下拉单选择【新建】（快捷键ctrl+n）,随后便会弹出如下图所示的信息框，一般处理网络上传播的图片时，尺寸的单位选择【像素】，分辨率72已经足够了，颜色模式选择RGB颜色。

打开Fireworks---》点击【文件】---》点击【批处理】---》选择需要批处理的图片（图片全选按Ctrl+A），点击【增加】，再点击【继续】---》点击【导出】，再点击【添加】---》点击底下的【编辑】---》【格式】为JPEG，【品质】调成85以上，点击【确定】---》点击【继续】---》选择【与原始文件位置相同】，点击批次。点击查看图示教程>>

下面以买购网水印为案例，对一篇文章进行水印叠加。

第一步：打开需要叠加的水印

第二步：把叠加的水印定义成图案。点击【编辑】---》点击【定义图案】，命名好后点击【确定】。到这一步定义图案已经完成。

第三步：新建图层--》执行填充图案命令【shift+F5】,选择之前定义好的水印图案即可。

1.调明暗：用“曲线”（ctrl+M）或者“色阶”（ctrl+l）

2.调色相（换颜色）用“色相饱和度”（ctrl+u）

3.调成黑白用“去色”（ctrl+shift+u）

5.黑白调彩色 先把黑白图片改成RGB模式-->>框选出需要上色的部分-->>执行【ctrl+u打开色相饱和度】，勾选色相饱和度中的【着色】，滑动色块直至满意的颜色。

每当在处理图片时，每一次缩小调整都会降低图像的显示质量。如果你再将图像拉大，你会发觉图像已经模糊不清。建议一开始处理图片前先将图片转化为智能对象，因为在智能对象中，你可以将图像随意缩小放大，并且不需要担心图像显示质量的问题（前提原图需要是大图）。

方法：选择要转化成智能对象的所在图层，右击图层后在弹出的列表页中选择【转换为智能对象】

Photoshop默认分辨率为72dpi，对于网页设计来说已经足够，但是不能满足印刷设计的要求。因此，在创建画布的时候，就要根据设计需要设置好dpi的数值，比如印刷一般设置为300dpi。设置正确的分辨，可以减少后期不必要的麻烦，并且为后续修改提供更大的空间。

1、尽量地减少创建图层可以令PSD文档体积更小，并且操作更加有效率。可以通过智能对象、智能滤镜、图层蒙版和图层样式等工具，减少图层的创建数量。

2、当创建的图层多时，学会给图层分组是一个专业设计师必须学会的，这不仅有利于你的修改，也是团队合作中少不得的习惯。

3、隐藏起来没有用的图层坚决删除，避免占用psd文档的体积。

一般处理网络图片都是使用RGB模式显示图片，如果操作菜单变成灰色？颜色看起来跟平时的不一样？当你遇到这些问题的时候，可能就是使用错误的图像模式而引起的问题。在主菜单中选择“图像>模式”，在这里确保选择正确的图像模式。

新手抠图时，习惯把所有图片的都使用魔术棒来进行抠图，一般正常情况下，对比度大的情况下可以使用魔术棒，否则建议实用钢笔工具或者快速选择工具（需要注意的是边缘需清晰无锯齿）。

在处理图片时我们总是会不停地进行调整修饰，但是没来得及回头看看与原来效果的对比情况。因此，在下一次保存文档的时候，找个人帮帮忙看看，询问一下他们的意见，或许会有很好的效果。如果你已经过度调整图层，还可以通过调整图层的不透明度，减淡调整效果。

在应用一款编辑软件的时候，我们总会犯一个错误，就是保存。当遇到突然断电或者莫名其妙的故障时，没有保存就会让一切的工作成果化为乌有。养成定期保存的习惯是非常有必要的，时刻记得按下ctrl+S。

对于设计者，利用PS准备的快捷键或者创建个性化的快捷键，是提高工作效率，同时省时省力的方法之一。虽然其中可能要花点时间去学习熟悉，但是应用快捷键的效果是值得你花费的时间的。点击查看ps快捷键大全>>

当需要调整图像，并且可以选择图层蒙版或者橡皮擦工具的时候，建议优先选用图层蒙版工具。因为使用橡皮擦工具将会对图像进行永久性调整，也就是下次打开图像文件的时候，再也找不回原来的图像，而图层蒙版提供了你选择的理由。同理，能使用智能对象的时候，不使用栅格化图层（如图片大小调整、滤镜效果等）。

这也是一个新手常犯的错误，就是靠直觉去判断是否对齐，间距是否一致，其实是错误的。合理运用参考线和网格，会时整个网页的风格一目了然。标尺：ctrl+r；网格：ctrl+h。

关于字体，很多新手喜欢在一个设计稿上使用N种字体，这样的结果会导致页面混乱同时跟他人合作时，会导致对方缺字体而无法编辑，同一个页面中，前辈的经验是字体不要超过两种，只要你对每个字体的性格足够了解，一两个就够用咯。

在美术上，将红、黄、蓝称为颜料的三原色。

色彩的三要素是指：色相（色彩的相貌（就像人的名字）、饱和度（色彩的鲜艳程度，也称色彩的纯度或彩度（指添加灰色的浓度）、亮度（颜色的亮度，越亮越接近白色，越暗越接近黑色）。查看图示>>

【近似色】：你可以使用色轮上位置相邻的色彩。确定首选色之后，你需要选择用来搭配的第二和第三种颜色。近似色与你的首选色接近而不同，能与之和谐存在，你可以使用近似色来构建配色方案。

【单 色】：基于单色的配色方案也不难实现，首选色的色相确定之后，调整它的色度、色调和色彩（让其与不同比例的黑色、白色和灰色混合），也可以形成一套配色方案。

【三 色】：三色配色方案借助色轮很容易实现，也就是使用色轮上相互等距离的3种颜色即可。

【互补色】：色轮中心对称的两边的颜色就是互补色，两种色彩相互抵消，色盲的用户可能分辨不出来部分对比色。所以，如果你想每个人都看清楚网页的内容，那么请不要使用两种正好处于相反位置的色彩。（稍微偏一点就好了）

【复合色】：确定首选色之后，挑选一个互补色，然后加上一个与首选色同色系的色彩，这样的三色搭配方案很容易实现，提供了明显的色彩反差，也不容易被滥用。

【中性色】：很多高大上的网站就是这么配色的，就靠中性色黑白灰撑起来的。查看图示>>

红色：能量，力量，活力，领导地位，勇气，激情，快乐，危险，邪恶，愤怒，血，高识别度；

橙色：开朗，热情，快乐，激情，魅力，创意，有趣，轻浮，华丽，粗鲁，低端；

黄色：乐观，清新，法律，教育，傲慢，怯懦，疾病，背叛，幼稚；

绿色：财富，金钱，平静，树木，野心，耐力，治愈，冷静，自然，完备，保护，羡慕，嫉妒，不成熟；

蓝色：安全，守信，稳定，忠诚，智慧，信任，友爱，保鲜，勇气，科学，悲伤，抑郁，冷漠，稳重；

紫色：神奇，神秘，灵性，潜意识，创造力，尊严，皇室，悲哀，残酷，自大，自负；

黑色：强大，神秘，高贵，精致，功能性，死亡，病态，瘟疫，孤傲；

1、重视视觉感受（舒服、和谐；不突兀、不刺眼、不山寨）；

2、商业设计应符合公司形象及文化的用色要求；

3、用色要有一定系列性（如，不同内容可用不同的颜色，相同性质的内容用相同的颜色表示）；

4、符合颜色的象征意义（绿色健康、传统、红色喜庆、蓝色科技等）；

5、单色喜闻乐见（天的蓝、草的绿、暖的橙等），多色尽量模仿（如网站、海报等）；

6、色彩不超三种（黑白灰除外，图表色可稍稍灵活），整体风格一致。

任何一张图片都是有版权的，即著作权，网络上使用图片，未经允许都存在侵犯他人著作权的风险。这里要分清个人使用和商业使用。

风险较高的主要有以下几类：时事热点新闻图片，风景名胜摄影作品，人物肖像摄影作品。

国内可免费商用网站

1、摄图网

摄图网是一家专注正版摄影图免费下载的图库,可供下载的高清摄影图片量包含人物,动物,风景,名胜,美食,旅游,建筑,时尚等。

2、CC0图片网

提供免费的无版权高清图片下载。CC0.CN的所有图片都以知识共享组织(Creative Commons) 的CC0协议发布,您可以用于任何形式的商业用途。

国外可免费商用网站

1、Pixabay （综合性，全部可以商用，支持中文搜索）

一个超高质量无版权限制的图片的贮藏室。 不论数字、印刷格式、照片还是视频，都可以个人或者商业用途，您都可以免费使用该网站的任何图像，并且无原作者署名要求。需要注意下，涉及到人物的可能会有肖像权。

2、flickr （综合性，部分商用需选择，支持中文搜索）

Flickr，雅虎旗下图片分享网站，里面有非常多用户传的图片，很多都是随手拍摄的，虽然图片质量要差一些，但是往往能找到自己想要的图片，需要注意的是，若是要商用的，在授权方式那要选择“允许商业用途与修改”才行，并不是全部都可以商用

3、ssyer （综合性，全部可商用，支持中文搜索）

除了pixabay外的一个可以中文搜索的网站，加载速度也快，如果没有梯子的，用这个网站速度会快一些，图片内容也多，但大部分是国外的，如果要找国内相关的图基本找不到。同样要注意下人物肖像权。

4、photo-ac （综合性，全部可商用，支持中文搜索）

日本的一家免费商业用途的图片网站，质量也是非常不错的，但是最近更新了，普通用户一天只能下载9张，购买会员可以无线下载，质量真心不错，有条件的可以开通下会员，开通的会员还能使用旗下的矢量图片网站，质量也不错，最主要的是价格也不贵，每月6.114美元，人民币大约41元，跟国内会员网站价格差不多，还支持中文搜索。

5、hippopx （综合性，全部可商用，仅支持英文搜索）

国外的网站，类似pixabay，质量非常好，高清大图，无需注册可以直接下载，搜索速度也很快，只是需要英文搜索，图片基本都是国外的，国内相关的图可能没有。

5、pexels （综合性，全部可商用，仅支持英文搜索）

这个的图片后期处理比较严重，大部分颜色也比较暗沉，像是艺术照，带有艺术气氛，比较特别，这类型的图片只适合直接使用，不适合后期再次处理。

6、picjumbo （综合性，全部可商用，仅支持英文搜索）

很多高清图片，也只能英文搜索，不用注册也可以直接下载，跟ssyer、pexels差不多，有一点，有部分图片上面会有提示，可以找相类似的图片，特色之一。

7、unsplash （综合性，全部可商用，仅支持英文搜索）

很多高清图片，也只能英文搜索，不用注册也可以直接下载，跟ssyer、pexels差不多。

8、foodiesfeed （美食类型，全部可商用，仅支持英文搜索）

整个网站都是美食方面的图片，高清高质量的图片，但基本都是国外的美食，也只能英文搜索，不用注册也可以直接下载。

9、sozai-page （食材类型，全部可商用，仅支持英文搜索）

整个网站都是各种食材的图片，日本那边的，高清高质量的图片，直接选择要的食材下载即可。

10、pakutaso

日本的一家高品质照片素材免费分享的站点，到目前拥有破万张的图库照片，而且授权高画质下载，免费商业使用，可以通过右方的人物、纪念日、天气、建筑、工作等等不同的分类，来浏览我们需要的照片类型。

1、（国内）Iconfont矢量图标

非常棒的矢量图标下载网站，基本上你所要的图标这里都可以搜索出来，最重要的是中文的哟，只要注册一个账号即可！

2、（国外） Iconshow

一个致力于分享免费的纹理素材、免费图标素材的网站，提供从256px到16px大小的不同规格的素材图片，用户可以很方便的查询和选择下载（PNG格式）。

3、（国外） pictogram2 （人类形象图）

一个分享非常人性化的人物动作、形象、神态矢量标识网站，图像的视觉识别度很高，涵盖了各种公共行为动作（包括各种奇怪的东西），很容易理解其图案表达的含义。每一个图标还有各种不同款式（比如男女、左右不同款）

4、（国外）subtlepatterns

强大的无缝拼接背景网站，完全免费的，虽然不是特别的多，但是基本够用，比较简单大气的背景，瞬间提升网页的档次，可以直接下载使用。

5、（国外）svgsilh

一个提供免费下载的SVG图像和图标的素材网站，类型丰富，涵盖了各种人物动物植物饰品等等，全部是CC0协议，可直接下载png图。

6、（国外）Peecheey

Peecheey是一个免费的矢量资源网站，正在开发中，包含各种各样独家插图。可免费下载私人和商业用途。

7、（国外）iconstore

iconstore的图标虽然只有200+套，但是每一套的质量都很好，最重要的是上面发布的每个图标包都可用于个人和商业项目，无需归属，简直是设计师们的福利。

8、（国外）pngimg

国外免抠图网站，类型很丰富，质量也好，最重要的是免费商用。

1、Colorschemedesigner配色盘

2、千图网配色工具

3、美丽的调色板

4、Coolors

一个可以让你简单快速的选色生成工具，为你找出配色的灵感，该网站是超快速为你生成配色，每次会为你挑选由五种颜色组合而成的调色盘，并显示颜色的代码，使用者可以快速选取使用或是锁定其中的几种颜色。

5、Material Palette

一个致力于为设计师们提供颜色组合搭配的工具，让设计师轻松的选择自己喜欢的颜色，在线生成Metaerial Design 风格配色的搭配方案，让你从烦乱的颜色中筛选出一条极具创意的颜色组合。选择好呈现出来配色方案可多格式下载。

6、colordrop

colordrop是一个很棒的配色网站，收录了不少漂亮的配色方案，选定方案之后便会弹出对应的颜色代码。

1、腾讯设计导航：

很不错，大量优秀站点，有RSS订阅，可实时以RSS方式查看最新网站内容，用QQ号登录后，可以更加个性化定制属于自己的设计师导航页面。

2、免费网页设计资源

一个致力于帮助网页设计师、产品设计师寻找最优秀的网页素材、优秀代码、免费字体及其他各种资源的站点，支持订阅，由Pasquale Vitiello平面设计师创办。

3、优设设计师网址导航

优设网设计师网址导航为设计师提供ps教程、UI设计、素材下载、高清图库、配色方案、用户体验、网页设计等全方位设计师网站导航指引，挺全的。

4、站酷

国内比较成熟的设计师学习的网站，里面的素材也是免费下载的，有很多牛逼的设计师在上面发表作品，是个能力学习提升的好去处。

5、花瓣网

设计师寻找灵感常逛的网站，里面都是效果图，虽然没有源文件下载等，但是汇集大量的优秀作品，是寻找灵感和学习的好地方。