ps简单切图

一、咱们要用到的切图工具备两个,一个是切片工具,另外一个是切片选择工具。左边有个小按钮,你按住它这三个选项就会显示出来。html

PhotoShop教程:切图那点事儿

 

二、这是我等下用作示范的图片。浏览器

PhotoShop教程:切图那点事儿

 

  1. 三、在切图以前有一点须要说明的是,若是你须要辅助切图,你能够先添加参考线。在PS上方的菜单栏,你能够在视图里找到新建参考线选项。如上图,我已经添加两条参考线,由于参考线在鼠标靠近的时候有吸附功能,因此切图不容易切错位置。网络

    PhotoShop教程:切图那点事儿
  2.  

    四、好了如今咱们开始切图,我用切图工具先裁一个框出来,咱们能够看到图片上已经有01的框,可是右边02显示为灰色。工具

    PhotoShop教程:切图那点事儿
  3.  

    五、我继续用切图工具裁第二个框,记住01和02的框必定要贴合,不然会出现一个03的框。若是你此次切图位置没切对,可能给后面带来麻烦的是换图片会比较麻烦。这个时候切图的框是能够移动的,你能够把鼠标放在边框上试着移动下,看下效果。你只能移动02,不能移动01。htm

    PhotoShop教程:切图那点事儿
  4.  

    六、当我发现切图的位置出现错误,开始调整,刚才我把02位置往右挪好,它从02变成了03。blog

    PhotoShop教程:切图那点事儿
  5.  

    七、而后我用切图选择工具选择01,这样我就能把01的位置调整正确了。教程

    PhotoShop教程:切图那点事儿
  6.  

    八、切好图以后就到最重要的步骤了,以下图所示,选择文件下面的存储为WEB和设备所用格式,最好能记住快捷键。图片

    PhotoShop教程:切图那点事儿
  7.  

    九、图片格式为JPEG,它就是JPG,同样的。关键是品质的设定,咱们都知道若是一张图片越大它在网上打开的速度就越慢,当咱们把图片的品质设的越小,它的大小就越小,可是若是品质太差,图片会变模糊,因此通常状况下若是是网上使用的图片,品质能够设置60,既保证图片较小也不会模糊。这个数值由你本身设置,是大是小,具体看你的要求,试试就知道了。这里有个问题是你只是对其中一个切片设置品质,其余切片又要从新设置,因此存的时候最好检查一下。ci

    PhotoShop教程:切图那点事儿
  8.  

    十、前面设置好后点击存储会显示以上界面。格式选项选择HTML和图像,默认是图像的,这样咱们就能获得网页代码了。get

    PhotoShop教程:切图那点事儿
  9.  

    十一、存好后获得一个图片文件夹和一个网页,你看到的网页图标可能跟我这个不同,这个没有关系,由于咱们的浏览器不同。

    PhotoShop教程:切图那点事儿
  10.  

    十二、

    用DreamWeaver软件打开这个网页看到如上界面,若是不懂DreamWeaver的设置,请参考我前篇 作淘宝的也该懂点代码 那里有讲到一点DreamWeaver的使用技巧。咱们须要的就是大红框中《table … 《/table》这段代码,待会拷贝到淘宝页面里去的。拷贝以前要先把图片地址换一下,先把刚才那个images文件夹里的图片上传到淘宝图片空间里去,再复制图片的网络地址替换上图小红框里的那个地址。替换的缘由是,PS存的图片地址是你电脑上的,在网络上没法使用,只有你把图片上传到网上别人才会看的到。

    至此,大功告成。但愿这个教程会对生手有所帮助。

     

    PhotoShop教程:切图那点事儿
相关文章
相关标签/搜索