关于Photoshop切图的一些技巧

最近在慕课网上学了一些切图技巧,课程地址http://www.imooc.com/learn/506,在此总结分享一下。
第一步:获得素材,我在此网上获得http://sc.chinaz.com/tag_PSD/WangYeSheJi.html
第二步:打开ps,我用的是Photoshop CC 2015。
第三步:进行一些设置:
1.编辑–>首选项–>增效工具,启用生成器,如图:
关于Photoshop切图的一些技巧_第1张图片
2.文件–>生成–>勾选图像资源,如图
关于Photoshop切图的一些技巧_第2张图片

1.单击所要切的图,图层框会自动找到该图层(前提是你要把“移动工具”的相关功能选好,请参看左上角红色框)
关于Photoshop切图的一些技巧_第3张图片
2.改名字双击图层文字部分,然后就可以给了,输入相关后缀名如(png,jpg,svg)等。
关于Photoshop切图的一些技巧_第4张图片
在存放psd的文件夹里边新生成了一个文件夹,该文件夹里就存放了刚刚改名图层的png格式的图像如图:关于Photoshop切图的一些技巧_第5张图片

关于Photoshop切图的一些技巧_第6张图片

ps cc还有一个好用的功能就是复制css
关于Photoshop切图的一些技巧_第7张图片

将复制的代码写进一个HTML页面上,就可以得到一个相应的图像
代码如下

 
<html>
    <head>
    <style type="text/css">
       .ellipse {
            border-style: solid;
            border-width: 10px;
            border-color: rgb(214, 109, 146);
            border-radius: 50%;
            background-color: rgb(255, 255, 255);
            position: absolute;
            left: 755px;
            top: 521px;
            width: 13px;
            height: 13px;
            z-index: 46;
            }
      style> 
    head>
    <body>
    <div class="ellipse">div>
    body>
html>

关于Photoshop切图的一些技巧_第8张图片

更多方法请移步到慕课网学习吧!

你可能感兴趣的:(photoshop)