前端 - 切图抠图篇

avatarplhDigital nomad

前言

好吧,回到宿舍狠狠的学习了切图。

切图篇

下载photoshop

巧妇难为无米之炊,先下载photoshop吧。对于前端而言,精简版足矣。再附送psd素材。

第一步

自然是选择切片工具咯。 image

第二步

Ctrl+Alt+Shift+S,调用储存为web所用格式 image

最后

得到的东西 image

抠图篇

第一步 - 做辅助线

image

第二部 - 圆形选择框

从上面拉到下面 image

合并可见图层

图层很重要,事关你所选择的到底是哪个图层的,所以接下来要做的是要合并可见图层。

image jie接下来的时候,你所选择的,按Ctrl+C,你会发现,你复制了选中区域的图片,Ctrl+N创建新项目,Ctrl+v用于粘贴你所复制的图片, image

注意将背景不要选中,然后Ctrl+Alt+Shift+S,储存为适用于Web的Png-24格式。 image

结果如下 image

查看文字大小,字体,颜色

image

p图 仿制图章

用于抹去需要取消的区域。 image

总结

图层对于photoshop来说很重要,请建立图层相关概念的基础上进行切图,不然会像我当初一样,很难理解photoshop所产生的结果。好吧,今天任务完成。

Reference

ps切图必知必会