PhotoShop制作逼真的水中倒影文字特效,reflect投影

素材:

民用创建了差非常的少的倒计时

话说本想结合裁剪制作一些事物,结果开采倒影被裁剪了。

搞笑新闻 1

<style>
    img{
        width:50px;
        height:50px;
        margin:100px;
        -webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
        -webkit-clip-path:polygon(0px 100%,50% 0px,100% 100%,0px 100%);
    }
</style>

搞笑新闻 2

搞笑新闻 3

right

搞笑新闻 4

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:right;
}

搞笑新闻 5

因为是立体图形,在设置倒影的时候,唯有八个点总是,所以,垂直翻转之后要开展斜切;

box-reflect一共有以下多少个属性:

above:
钦点倒影在目的的上边

below:
钦赐倒影在指标的下边

left:
内定倒影在对象的侧边

right:
点名倒影在对象的侧边

offset:倒影与指标之间的间隔,可以为负值。

其余仍是能够应用渐变以及图片。

本人所制作的水中倒影文字效果:

1、将索要安装倒影的一对抠出来;

搞笑新闻,offset偏移量

搞笑新闻 6

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:right 10px;
}

应用offset我们就足以给图片创制一个副本。

效果图

二、图片倒影

left

搞笑新闻 7

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:left;
}

;

四、投影

above

搞笑新闻 8

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:above;
}

搞笑新闻 9

7、渐变,黑白渐变,调整不光滑度;

构建文字倒影

搞笑新闻 10

<style>
    h1{
        -webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
    }
</style>
<h1>这是一段文字</h1>

搞笑新闻 11

手续要领:选区--复制--投影(fx),设置大小、距离等。

倒亦非说倒影没了,只是被裁剪了,有个别图形照旧会在的,结果开掘真是想不到啊。

搞笑新闻 12

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-clip-path:polygon(0px 200%,50% 0px,100% 200%,0px 200%);
    -webkit-box-reflect:below 1px linear-gradient(to bottom,transparent,rgba(0,0,0,
0.7));
}

总的看结合裁剪也是一种知识啊。

制作日常的倒影文字的功力如下图:

搞笑新闻 13

below

搞笑新闻 14

img{
    width:50px;
    height:50px;
    margin:100px;
    -webkit-box-reflect:below;
}

本文由金沙js333娱乐场官网发布于搞笑新闻,转载请注明出处:PhotoShop制作逼真的水中倒影文字特效,reflect投影

TAG标签: ps教程 Pho
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。