我这边讲的是静态图，gif大神在此：http://psnine.com/gene/10628
其实归根结底是如何构图和如何缩放图片的问题
题外话：教你怎么扒人家的酷炫自定义首页图
首先要知道的是：P9宽度是自适应的，自定义图的高度并没有做限制，但是这个显示区域高度是403px（px=像素，下同），当你的浏览器窗口或者手机屏幕宽度小于680px时，该区域高度会变为355px，图片会根据这个高度自适应来铺满这个区域。
所以为了达到最好的显示效果，建议各位在上传图片之前将图片裁剪成1900*403像素左右，这样无论窗口多宽，你的头像和背景图的中心基本保持一致，浏览器只会裁剪掉图片的左右部分而不会缩放图片。如果你用手机上P9比较多的话，可以按照<图片宽：图片高=355：手机屏幕宽度>来进行裁剪，这样你在手机上就能看到全图啦！注意，尽量用jpg格式，P9单张图片上传上限为5MB，gif也如此。
如何在电脑上看你手机上的样子：直接把你的浏览器窗口拖拽成你手机的竖向画幅，你就能看见手机端的样子了。到底这个所谓最佳尺寸是什么效果点，开我的首页就行了，然后推拉浏览器右边来改变宽度，你会发现无论怎么推拉，我的头像和剑重叠的位置始终是几乎一样的（自定义图片尺寸为2048*426），这样就可以有好玩的花样出来了，各位自由发挥
。
【方案1】最简单的图片软件裁剪（工具：光影魔术手3.1.2）
美图秀秀、光影魔术手、各种看图裁图软件都是一样的原理，三步搞定，这是最简单的。
找一张图放进来
点击裁剪，设置好长宽比（注意！这只是长宽比，如果你用了一张大大大大的图片来裁剪的话还是会得到一张大大大大的图片，所以在保存前一定要留意一下分辨率到底是多少，怎么缩放不多说了，图片软件肯定有的）
保存输出就好了
但是会存在一个问题：裁剪出来的图片主体和头像重叠，又无法向一边移动，如下图
【方案2】用PS来解决图片不够宽的问题（工具：Photoshop CC 2015）
一样的，找一张图放进来，选择裁剪工具
上方设置好长宽比，后面的勾去掉以防前功尽弃
可以拖动图片或缩放裁剪区域，但是和上文一样，头像和我们的主角重叠了
但是没关系，我们裁剪区域可以拖动、或者扩大到屏幕外，这样就不会挡住了，但是我们要想办法把空白的地方填满
，这就是PS的最大作用
按下回车确认裁剪（可随时使用裁剪工具重新构图），选择选区工具
选中左边多出来的空白，稍微多选中一点没有关系
Shift+F5打开填充面板，按照图上进行设置
稍等片刻便填充完毕，Ctrl+D取消选框就可以看下效果了，如果满意的话：Ctrl+S保存，下方选择jpg格式，点击确定两次即可完成
问题1：上述方案是最理想状态：有好的图片素材、图片的边缘不明显、色块较大、没有过多画面元素，如果碰到下面这张，应该如何处理：
我们的主角在不同的位置，并且没办法一次性把两人同时裁剪到，怎么办？
这个时候在裁剪角标外面一点，拖动鼠标的就可以旋转画布进行裁剪了！
ok大丈夫萌大奶
问题2：要是我想让主体小一点，裁剪到外面呢？比如这样：
解决方法和上面一样，通过任意一种选区工具选到空白区域，不用很精确：这里使用套锁工具
上面选择叠加选区方式，框出两个空白区域（边缘一定要选全了，问题容易出在这）
接下来就是和上面一样使用Shift+F5自动填充空白部分了：
问题3：生成出来交界线不完美，看起来很假怎么办？
首先要关注到你的选图问题，你是否选择了一张画面元素众多、主体距离边缘很近的图片？是不是一张在边缘有明显线条的图片？是不是你需要让电脑生成的部分占了画面的绝大多数？这些都有可能导致生成出来的画面很假。
如下图右侧天空部分生成完美，而左侧什么鬼
解决方案是有，那就是找画师画出来
所以，你得重新找一张合适的图片了
以下内容会有些复杂不好描述：
还有更坏的情况比如这样：注意下图中虚线区域就是生成的，我们发现有元素重复的部分，而且看起来有些奇怪：
这时候就用到污点修复画笔工具了（找不到的话可能藏在小三角里）
好了鼠标变成一个圆了，现在可以用键盘的 “[” “]” 键来调整大小，对着奇怪的部分进行涂抹，把那里消灭掉
这个工具不好描述，具体可以参考一些视频教程，总之就是用各种姿势在上面抹啦
悲剧的是，然而在画面左侧，无论怎么涂抹，都不能让人满意：
这个时候，我们使用大杀器Ctrl+Shift+Alt+C内容识别缩放，记得把上面的小人儿点上（旧版本PS为保护肤色），然后拉动下面的缩放块，你会发现，人物完好无损，而图片自动被拉长了：
搞定
上面几张图的最终成果：
最最最坏的情况是这样：
即使用内容识别缩放也造成严重画面变形的话，就需要使用Alpha通道来保护变形区域，这部分就比较复杂了，请自行谷歌相关教程，在此不再赘述。
保存之前一定要留意你的分辨率是多少！
上文提到过，如果你用了一张大大大大的图片来裁剪的话还是会得到一张大大大大的图片，所以在保存前最后一步要留意一下你做好的图片分辨率到底是多少。PS的缩放图片（我们只用他来缩图）在上方菜单栏 图像—>图像大小 中，只要输入高度403，宽度即自动计算得到，点击确定即可。
【其他】如何在尽量保持不失真的情况下放大图片？
使用PhotoZoom软件。绿色单文件版
软件很简单，照片拖进去之后输入新的尺寸稍等片刻就ok了，应该是目前放大效果最好的软件了。
如何选图？
原尺寸就很好看的图并不一定适合做背景图。建议选择那些视觉焦点靠近中心的、或者人物主体较小的、留白较多的、甚至是纯粹背景美术的图片，抑或是完全虚焦无重点的照片，因为这个时候你的头像就是画面重点，一样很好看的。不太建议使用花哨的图，作为一个背景，会显得喧宾夺主不是么？
横向尺寸为什么是1900？
相信目前大部分人用的显示器分辨率是1920*1080，因此在这样的屏幕下1900:403的比例应当是最好的，少掉的20像素是浏览器边框以及滑块等，这个随浏览器不同而不同。并且为了尽量减少分辨率来加快加载速度，个人认为，这时候使用1900*403px的图片为最佳尺寸。在我自己测试中，这个背景图缩放是从宽度为1960px时开始的，为什么是这个尺寸我不知道，也没有深究，可能和我传的图片尺寸本身是有关系的。宽度到底应该是多少没有定论的，如果你的屏幕小，也可以是1440，可以是1366，依显示器和浏览器而定。而实际裁剪时候的尺寸可以在这个值上下浮动一些，毕竟缩放的时候几像素差距其实根本看不出来。所以到底是1890*403呢还是1900*403呢还是1920*403呢，不必在意啦。
下面是用到的原图：（侵权即删）
画师：Miv4t（id=11246082）（国人）
画师：swd3e2（id=660788）（国人）
画师：tooooptin（id=2744701）（国人）
画师：ふーらい（id=9927）
另外提供几张图作参考
其实归根结底是如何构图和如何缩放图片的问题
题外话：教你怎么扒人家的酷炫自定义首页图
首先要知道的是：P9宽度是自适应的，自定义图的高度并没有做限制，但是这个显示区域高度是403px（px=像素，下同），当你的浏览器窗口或者手机屏幕宽度小于680px时，该区域高度会变为355px，图片会根据这个高度自适应来铺满这个区域。
所以为了达到最好的显示效果，建议各位在上传图片之前将图片裁剪成1900*403像素左右，这样无论窗口多宽，你的头像和背景图的中心基本保持一致，浏览器只会裁剪掉图片的左右部分而不会缩放图片。如果你用手机上P9比较多的话，可以按照<图片宽：图片高=355：手机屏幕宽度>来进行裁剪，这样你在手机上就能看到全图啦！注意，尽量用jpg格式，P9单张图片上传上限为5MB，gif也如此。
如何在电脑上看你手机上的样子：直接把你的浏览器窗口拖拽成你手机的竖向画幅，你就能看见手机端的样子了。到底这个所谓最佳尺寸是什么效果点，开我的首页就行了，然后推拉浏览器右边来改变宽度，你会发现无论怎么推拉，我的头像和剑重叠的位置始终是几乎一样的（自定义图片尺寸为2048*426），这样就可以有好玩的花样出来了，各位自由发挥
。【方案1】最简单的图片软件裁剪（工具：光影魔术手3.1.2）
美图秀秀、光影魔术手、各种看图裁图软件都是一样的原理，三步搞定，这是最简单的。
找一张图放进来
点击裁剪，设置好长宽比（注意！这只是长宽比，如果你用了一张大大大大的图片来裁剪的话还是会得到一张大大大大的图片，所以在保存前一定要留意一下分辨率到底是多少，怎么缩放不多说了，图片软件肯定有的）
保存输出就好了
但是会存在一个问题：裁剪出来的图片主体和头像重叠，又无法向一边移动，如下图
【方案2】用PS来解决图片不够宽的问题（工具：Photoshop CC 2015）
一样的，找一张图放进来，选择裁剪工具
上方设置好长宽比，后面的勾去掉以防前功尽弃
可以拖动图片或缩放裁剪区域，但是和上文一样，头像和我们的主角重叠了
但是没关系，我们裁剪区域可以拖动、或者扩大到屏幕外，这样就不会挡住了，但是我们要想办法把空白的地方填满
，这就是PS的最大作用按下回车确认裁剪（可随时使用裁剪工具重新构图），选择选区工具
选中左边多出来的空白，稍微多选中一点没有关系
Shift+F5打开填充面板，按照图上进行设置
稍等片刻便填充完毕，Ctrl+D取消选框就可以看下效果了，如果满意的话：Ctrl+S保存，下方选择jpg格式，点击确定两次即可完成
问题1：上述方案是最理想状态：有好的图片素材、图片的边缘不明显、色块较大、没有过多画面元素，如果碰到下面这张，应该如何处理：
我们的主角在不同的位置，并且没办法一次性把两人同时裁剪到，怎么办？
这个时候在裁剪角标外面一点，拖动鼠标的就可以旋转画布进行裁剪了！
ok大丈夫萌大奶
问题2：要是我想让主体小一点，裁剪到外面呢？比如这样：
解决方法和上面一样，通过任意一种选区工具选到空白区域，不用很精确：这里使用套锁工具
上面选择叠加选区方式，框出两个空白区域（边缘一定要选全了，问题容易出在这）
接下来就是和上面一样使用Shift+F5自动填充空白部分了
：问题3：生成出来交界线不完美，看起来很假怎么办？
首先要关注到你的选图问题，你是否选择了一张画面元素众多、主体距离边缘很近的图片？是不是一张在边缘有明显线条的图片？是不是你需要让电脑生成的部分占了画面的绝大多数？这些都有可能导致生成出来的画面很假。
如下图右侧天空部分生成完美
，而左侧什么鬼解决方案是有，那就是找画师画出来所以，你得重新找一张合适的图片了
以下内容会有些复杂不好描述：
还有更坏的情况比如这样：注意下图中虚线区域就是生成的，我们发现有元素重复的部分，而且看起来有些奇怪：
这时候就用到污点修复画笔工具了（找不到的话可能藏在小三角里）
好了鼠标变成一个圆了，现在可以用键盘的 “[” “]” 键来调整大小，对着奇怪的部分进行涂抹，把那里消灭掉
这个工具不好描述，具体可以参考一些视频教程，总之就是用各种姿势在上面抹啦悲剧的是，然而在画面左侧，无论怎么涂抹，都不能让人满意：
这个时候，我们使用大杀器Ctrl+Shift+Alt+C内容识别缩放，记得把上面的小人儿点上（旧版本PS为保护肤色），然后拉动下面的缩放块，你会发现，人物完好无损，而图片自动被拉长了：
搞定
上面几张图的最终成果：
最最最坏的情况是这样：
即使用内容识别缩放也造成严重画面变形的话，就需要使用Alpha通道来保护变形区域，这部分就比较复杂了，请自行谷歌相关教程，在此不再赘述。
保存之前一定要留意你的分辨率是多少！
上文提到过，如果你用了一张大大大大的图片来裁剪的话还是会得到一张大大大大的图片，所以在保存前最后一步要留意一下你做好的图片分辨率到底是多少。PS的缩放图片（我们只用他来缩图）在上方菜单栏 图像—>图像大小 中，只要输入高度403，宽度即自动计算得到，点击确定即可。【其他】如何在尽量保持不失真的情况下放大图片？
使用PhotoZoom软件。绿色单文件版
软件很简单，照片拖进去之后输入新的尺寸稍等片刻就ok了，应该是目前放大效果最好的软件了。
如何选图？
原尺寸就很好看的图并不一定适合做背景图。建议选择那些视觉焦点靠近中心的、或者人物主体较小的、留白较多的、甚至是纯粹背景美术的图片，抑或是完全虚焦无重点的照片，因为这个时候你的头像就是画面重点，一样很好看的。不太建议使用花哨的图，作为一个背景，会显得喧宾夺主不是么？
横向尺寸为什么是1900？
相信目前大部分人用的显示器分辨率是1920*1080，因此在这样的屏幕下1900:403的比例应当是最好的，少掉的20像素是浏览器边框以及滑块等，这个随浏览器不同而不同。并且为了尽量减少分辨率来加快加载速度，个人认为，这时候使用1900*403px的图片为最佳尺寸。在我自己测试中，这个背景图缩放是从宽度为1960px时开始的，为什么是这个尺寸我不知道，也没有深究，可能和我传的图片尺寸本身是有关系的。宽度到底应该是多少没有定论的，如果你的屏幕小，也可以是1440，可以是1366，依显示器和浏览器而定。而实际裁剪时候的尺寸可以在这个值上下浮动一些，毕竟缩放的时候几像素差距其实根本看不出来。所以到底是1890*403呢还是1900*403呢还是1920*403呢，不必在意啦。
下面是用到的原图：（侵权即删）
画师：Miv4t（id=11246082）（国人）
画师：swd3e2（id=660788）（国人）
画师：tooooptin（id=2744701）（国人）
画师：ふーらい（id=9927）
另外提供几张图作参考
所以我只告诉人软件不放地址
厉害了，不过我的不打算换了23333
话说你用的浏览器是啥。。看着不错
