ps中间翻页翻页左右两个图片颜色不一样的那种效果图怎么制作？

Posted 2023-05-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ps中间翻页翻页左右两个图片颜色不一样的那种效果图怎么制作？相关的知识，希望对你有一定的参考价值。

1.首先准备两张图片，一张颜色正常的，另一张改变了其中一部分的颜色；2.使用Photoshop分别将两张图片填充在两个不同的图层上，并将颜色改变的图层调节到最上层；3.将要作用色彩变化的区域选定出来，然后添加遮罩图层，在遮罩图层上进行绘制，使得颜色改变的图层在那个区域内显示出来；4.最后拼接两张图片，保存为新的图片，即可实现左右两个图片颜色不一样的效果。参考技术A

在 Photoshop 中制作这种效果可以通过使用蒙版和渐变图层。详细步骤如下：

新建一个空白图层，用渐变工具制作左侧颜色的渐变。

在图层上添加蒙版，并使用黑白渐变笔刷在蒙版上绘制黑白渐变，实现对左侧颜色的限制。

在右侧同样制作一个渐变，并对其使用蒙版，并使用白黑渐变笔刷在蒙版上绘制白黑渐变，实现对右侧颜色的限制。

将两个渐变图层分别移动到合适的位置，实现图像的翻页效果。

希望我的回答可以帮助到您，望采纳谢谢！

参考技术B Ctrl+T自由变换,右击选择变形,做一个折页效果。图片下一层填充一个黑色背景,同样执行Ctrl+T,右击选择变形
图片右下角，双击，叠加效果（渐变或色彩）: 1、首先打开ps，选中渐变工具，然后设置渐变类型。2、其次选择线性渐变，点击进入渐变编辑器编辑渐变颜色。3、最后编辑好颜色后，点击确定即可完成左右两边不一样

html5上下滑动“翻页”实现，是真正的翻页

1、不是那种一个网页代码里有10张图片，然后翻一页一张图片，再翻页又是另一张图片
2、我说的一页是有许多信息的那种，文字、图片、背景图片，而且是动态生成的
3、就像下面的网页一样

大概给我指点一下就好，如果能细说就更好了！谢谢

HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：

1、html5页面代码

<!DOCTYPE html>

<title>HTML5手机页面触屏滑动上下翻页特效</title>

</head>

</div>

</div>

</section>

</section>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</section>

</body></html>

2、css代码：

@charset "utf-8";

.ad_foot li margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;

.ad_foot li a display:block;

.ad_foot li .l width:75px; height:75px; float:left; overflow:hidden;

.ad_foot li .l img width:75px; width:75px;

.ad_foot li .r width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;

.ad_foot li .r p color:#999; font-size:1.2em;

.ad_foot li .r span font-size:0.8em;

.ad_foot li .r i font-style:normal;

.lazy-img, .lazy-finishbackground-color:#f0eded;

.page-listfont-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;

.ad_footpadding:15px 15px 0 15px;

/*声音播放按钮*/

#song_img width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;

/*底部推荐*/

.ad_listmargin-top:2em;.ad_list li width:46%; background:none; padding:0; float:left;margin-bottom: 1em;

.ad_list li.r float:right;.ad_list li a img width:100%; height:auto;

.ad_foot h3 width:100%; height:48px; line-height:48px; background:#F9F5EC;

.ad_foot h3 a display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;

.ad_foot h3 a.active color:#FFF; background:#FF9240;

.magazine_1 li

width:100%;

margin-bottom: 1em;

font-size: 1.8em;

padding: 15px;

background: #FFF;

.magazine_1 li a display:block;

.magazine_1 li .l width: 75px;

height: 75px;

float: left;

overflow: hidden;

.magazine_1 li .l img width:75px; height:75px;

.magazine_1 li .r width: 78%;

float: left;

margin-left: 30px;

color: #666;

overflow: hidden;

.magazine_1 li .r p

color: #999;

font-size: 1.2em;

.magazine_1 li .r span font-size:0.8em;

.ad_foot li .r i font-style:normal;

3、运行效果如下：

参考技术A HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：
1、html5页面代码
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5手机页面触屏滑动上下翻页特效</title>
<meta charset="utf-8">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="pragram" content="no-cache">
<link rel="stylesheet" type="text/css" href="./hamer_files/main.css">
<link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css">
<script type="text/javascript" src="./hamer_files/offline.js"></script>
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
</head>
<body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;">
<section class="u-alert">
<img style="display:none;" src="./hamer_files/loading_large.gif">
<div class="alert-loading z-move">
<div class="cycleWrap"> <span class="cycle cycle-1"></span>
<span class="cycle cycle-2"></span><span class="cycle cycle-3"></span><span class="cycle cycle-4"></span>
</div>
<div class="lineWrap"> <span class="line line-1"></span><span class="line line-2"></span><span class="line line-3"></span>
</div>
</div>
</section>
<section class="u-arrow">
<p class="css_sprite01"></p>
</section>
<section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;">
<div class="translate-back" style="height: 918px;">
<div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;">
<div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
</div>
</section>
<section class="u-pageLoading">
<img src="./hamer_files/load.gif" alt="loading">
</section>
<script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"></script>
<script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"></script>
<script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"></script>
</body></html>
2、css代码：
@charset "utf-8";
.ad_foot li margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;
.ad_foot li a display:block;
.ad_foot li .l width:75px; height:75px; float:left; overflow:hidden;
.ad_foot li .l img width:75px; width:75px;
.ad_foot li .r width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;
.ad_foot li .r p color:#999; font-size:1.2em;
.ad_foot li .r span font-size:0.8em;
.ad_foot li .r i font-style:normal;

.lazy-img, .lazy-finishbackground-color:#f0eded;
.page-listfont-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;
.ad_footpadding:15px 15px 0 15px;
/*声音播放按钮*/
#song_img width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;
/*底部推荐*/
.ad_listmargin-top:2em;.ad_list li width:46%; background:none; padding:0; float:left;margin-bottom: 1em;
.ad_list li.r float:right;.ad_list li a img width:100%; height:auto;
.ad_foot h3 width:100%; height:48px; line-height:48px; background:#F9F5EC;
.ad_foot h3 a display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;
.ad_foot h3 a.active color:#FFF; background:#FF9240;
.magazine_1 li
width:100%;
margin-bottom: 1em;
font-size: 1.8em;
padding: 15px;
background: #FFF;
.magazine_1 li a display:block;
.magazine_1 li .l width: 75px;
height: 75px;
float: left;
overflow: hidden;
.magazine_1 li .l img width:75px; height:75px;
.magazine_1 li .r width: 78%;
float: left;
margin-left: 30px;
color: #666;
overflow: hidden;
.magazine_1 li .r p
color: #999;
font-size: 1.2em;
.magazine_1 li .r span font-size:0.8em;
.ad_foot li .r i font-style:normal; 参考技术B 翻页其实就是整页切换效果，不局限于只能放一张图片，想加什么内容都是随意的。

至于动态生成，可以通过ajax简单实现，如果需要非常复杂的数据绑定可以使用一些现成的框架比如framework7。

图片中的效果显示来自易企秀，目前这种效果有个流行的叫法-H5动画，可以用swiper插件制作，swiper中文官网有很多类似的例子可以使用。参考技术C 请问你解决了吗？我也想知道怎么做

以上是关于ps中间翻页翻页左右两个图片颜色不一样的那种效果图怎么制作？的主要内容，如果未能解决你的问题，请参考以下文章

uni-app实现fullPage.js的整页翻页的效果

html5上下滑动“翻页”实现，是真正的翻页

android ViewPager 进阶(仿画廊/图书翻页) 与 palette 使用 (含完整Demo)