ubuntu中用gimp 将psd文件分解

本来已经学习一段时间的css了，也跟着视频写过几个简单的网页了。认为自己应该能够及格了，就找了个简单的psd文件在没有任何人提醒的前提下操刀一个简单的登录框。
（我已不知道为什么有一些psd文件显示不正常，gimp保存后是xcf后缀的文件。有一些psd文件打开后会图层混乱。而且文字也无法选中，可能也是自己了解的少吧！）

如图：
（此篇博客文件出自尚硅谷李立超老师的文件，感谢老师的分享）

看着很简单吧。

可我被自己打脸了，以前都是分好了的图片。拿过来就用，根本不用动脑怎么截图。轮到自己动手操作将这个psd文件分解，可又让我头疼了一阵子啊！

原因是我用的是Ubuntu系统，装ps比较麻烦。前一段时间装Windows之后老是动不动就蓝屏，实在是搞烦了。虽然有虚拟机也一时偷懒，时间有限没瞎折腾。

再加上以前也没有自己独立操作过，所以踩坑也应该是正常的吧。（☺自己安慰自己）

Ubuntu里面倒是有好的图片编辑软件GIMP，可是如雷贯耳的Photoshop都玩不转。哎……咋就没有个视频教程交这些人用GIMP学前端呢？

没办法硬着头皮，边百度边学吧。

废话少说讲一下怎么用GIMP将psd文件分解成web所用的图片格式吧！

打开文件什么的就不详述了，相信对这篇文章感兴趣的朋友都应该不是太大问题。实在不懂得就找度娘。
我用的系统是 Ubuntu18.04 ，这是我的gimp版本截图

界面和ps差不多

我对这个软件了解已不是那么深入，也不敢瞎说。目前也只是会用它编辑个图层，截个图片保存为web所用格式什么的。gimp默认时没有保存为web格式的。
需要运行命令安装插件命令如下：

sudo apt-get install gimp-plugin-registry

安装后和ps效果是相同的

一定要先确定好怎样取图网页才好写，然后再动手。

反正我是没仔细想就瞎截图，搞了好几遍才知道先要有思路才能动手。

第一步：选中需要编辑的图层

第二步：将选中的图层置于最上端，方法是按住shift后再用鼠标左键点击选中的小眼睛即可。

效果如图：

这样就将要截取的图层提取出来了，不过还没结束呢。这样会将整个画布截取，接着操作吧。

第三步：截取需要面积，保存为需要的图片格式

①首先要拉取参考线

②选择剪裁工具

③选完后鼠标单击选中区域，选中区域即可被抠出。如图：

第四步：保存为web所用格式

ok，其它图片以此类推

结果图片：

下面上代码

<!doctype html>
<html><head><title>login</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="./reset.css">
<style type="text/css">
body{background-color:#03C9A8;
}
.clearfix{content:"";display:table;clear:both;
}
.wrap{width:800px;height:600px;background:url('bg.jpg') no-repeat;margin:0 auto;position:relative;
}
.content{width:367px;height:454px;position:absolute;left:234px;top:87px;background-color:#FFFFFF;
}
.content img{margin:0 auto;position:absolute;left:129px;top:49px;
}
.user{width:250px;margin:213px auto 0;
}
.item-style{border:none;
}
.uname-style{width:250px;height:34px;background:url('uname-bg.png') no-repeat;
}
.pwd-style{width:250px;height:34px;background:url('pwd-bg.png') no-repeat;margin-top:25px;
}
.btn{display:block;margin:78px auto 0;width:95px;height:13px;border:none;background: url('submit.png') no-repeat;
}
</style></head><body><div class="wrap clearfix"><div class="content"><img src="head.png" alt="icon" title="头像"><div class="user"><input type="text/css" class="item-style uname-style"></br><input type="password" class="item-style pwd-style"><button type="submit" class="btn" name="btn" value="send"></button></div><!--user--></div><!--content--></div><!--wrap--></body></html>

搞定