如何使用Photoshop和jQuery创建图像滑块

最新推荐文章于 2021-01-02 15:05:53 发布

cune1359

最新推荐文章于 2021-01-02 15:05:53 发布

阅读量745

点赞数

文章标签： css html less js opengl ViewUI

毫无疑问，图像滑块是商业Web设计中最常用的元素之一，因为它的相对较大的尺寸可以在访问者到达网站后吸引他们的注意。尽管网络已经开始重新考虑图像滑块的可用性，但是对于Web设计行业的新手来说，它仍然被认为是必须学习的知识。

在本网站设计教程中，我们将学习使用Photoshop在上方创建自定义图像滑块，您可以从此处预览最终结果。我们不仅将在Photoshop中对其进行说明，还将通过将其转换为HTML / CSS并添加jQuery以实现出色的滑动效果，将其转变为功能设计。

听起来涉及很多复杂的事情，但实际上，它非常简单易懂，那就让我们开始吧！

对采用图像滑块并在途中对其进行自定义更感兴趣吗？这是专门为您的帖子。

入门

对于本教程，您将需要以下资源：

第一部分–设计图像滑块

步骤1：设定背景

首先创建一个大小为1000×700像素的新文件。用颜色＃efc89e填充背景。

在Photoshop中创建图像滑块并使用Nivo Slider jQuery对其进行编码

使用来自PSDfreemium的自由像素图案添加图案叠加。

步骤2：滑座

激活矩形工具。创建一个尺寸为940×450像素的矩形。您可以使用任何颜色，没关系。

双击图层以打开“图层样式”对话框。添加“图层样式投影”，“外发光”和“描边”。

这就是结果。滑块底座现在有一个漂亮的框架，后面带有柔和的阴影。

第三步

添加一张照片并将其放在滑块底座上方。按Ctrl + Alt + G将其转换为Clipping Mask，然后将照片插入滑块。

步骤4：功能区

绘制一个颜色为＃f4e1ae的矩形以用作功能区。

双击形状的图层，并使用以下设置激活“斜角和浮雕”，“渐变叠加”和“图案叠加”。

这是添加图层样式后的结果。

第5步

让我们在功能区上添加纸张纹理以使其更逼真。将纹理放在带状形状的顶部。通过按Ctrl + Alt + G将其转换为Clipping Mask。

第6步

让我们在功能区上绘制一些阴影和高光。在功能区上方创建新层。在色带的下部涂上黑色。将其转换为剪贴蒙版（Ctrl + Alt + G），然后将其不透明度降低到10％。

步骤7

对功能区的上部重复先前的过程。但是这一次，通过将白色绘制来添加高光，然后将其不透明度降低到50％。

步骤8：针迹

激活铅笔工具。按F5打开“笔刷”设置。将画笔大小设置为1 px，并增加间距，直到预览区域上出现虚线。

步骤9

在功能区顶部绘制1像素黑线。将其不透明度降低到20％。通过按Ctrl + J复制图层。按Ctrl + I反转其颜色。将不透明度提高到50％。激活移动工具，然后按一次向下箭头和向左箭头以微调它。

这是在100％放大率下查看的结果。

第10步

重复此过程，在色带的另一侧绘制其他针迹。

步骤11：添加华丽的形状

将前景色设置为灰色。使用大小为1 px的软笔刷绘制华丽的形状。有创造力，您可以使用任何喜欢的形状。在其旁边绘制一条1像素的线，然后使用软橡皮擦工具擦除其外边缘。复制直线，水平翻转，然后放在另一侧。

步骤12

选择所有华丽的图层，然后按Ctrl + E将其合并为一层。复制形状，然后将其置于原始华丽形状下。按Ctrl + I反转其颜色。激活移动工具，然后按一次向下箭头将其向下推1 px。

步骤13：照片信息

在功能区中键入照片数据。

步骤14：导航

接下来，我们将为幻灯片导航绘制一些圆圈。在色带的下部绘制一个颜色为＃8d877c的圆形。

使用以下设置添加内部阴影。

这就是结果。圆圈现在变成一个浅洞。

步骤15

按住Alt键，然后拖动圆圈形状图层以将其复制。

步骤16

让我们在这些链接之一上设置活动条件。选择一个圆圈，然后将其颜色更改为＃bebbb5。添加内部阴影，渐变叠加和描边。

步骤17

按住Ctrl，然后在“图层面板”中单击功能区基础缩略图。在功能区下创建新层，并用黑色填充。激活“移动工具”，然后按几次向左和向下箭头。

步骤18

通过执行高斯模糊滤镜使其柔化。单击过滤器>模糊>高斯模糊。

步骤19

将色带阴影放置在滑块框架层上方。通过按Ctrl + Alt + G将其转换为Clipping Mask。

步骤20

将阴影不透明度降低到40％。

步骤21

绘在背景的丝带阴影。将其不透明度降低到20％。

步骤22

使用钢笔工具向后拉出色带的一部分。将其颜色设置为＃b68f63。将其放在滑块后面。

这是在100％放大率下查看的结果。

步骤23

复制我们刚刚创建的形状，并将其放置在功能区顶部的后面。垂直翻转。

步骤24：在Photoshop中的最终结果

这是我们在Photoshop中的最终结果。接下来，我们将继续将其编码为功能滑块。

第二部分–转换为HTML / CSS

第25步-设置文件

创建一个名为My-Photo-Slider的新文件夹。在此文件夹中，创建一个新的空白HTML文档（ index.html ），空白样式表（ style.css ）和图像文件夹（ img ）。我们还需要在文件夹中包含jQuery库和Nivo Slider插件。在使用HTML5标记时，我们需要添加IE hack，以在IE 8或更低版本上启用HTML5元素。我们将使用一个名为Modernizr的脚本来容纳IE。

步骤26 –基本HTML标记

在您喜欢的代码编辑器中打开index.html 。定义DOCTYPE （我们使用HTML5）， head元素（在其中添加文档标题并链接CSS和JavaScript（jQuery库，Nivo Slider和Modernizr）。我们还添加div包装器（以使布局居中）， header元素和幻灯片包装器。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta name="author" content="Aris FM" />
		<meta charset="UTF-8" />
		<title>My Photo Slides</title>
		<link href="style.css" media="screen" rel="stylesheet" type="text/css"/>
		<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
		<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
		<!--[if IE]>
			<script src="modernizr-2.0.min.js"></script>
		<![endif]-->
	</head>

	<body>
		<div id="pagewrap">
			<header>
			</header>
			<div id="slidewrap">
			</div>
		</div>
	</body>
</html>

步骤27 –切片PSD

打开PSD模型并切出所有必要的图像。对于图片，让我们从sxc.hu抓取以下图片（需要登录，如果您还没有帐户，则可以免费注册）。将所有图像调整为920×430像素。将所有图像放入图像文件夹（ img ）。

里亚恰尼（Ciaciya）
Agnes Sim的佛塔
Nally Satria的理货
Timo Balk提供的产品
乌鲁瓦图-巴厘岛（Aris Wjay）

步骤28 –建立标题

在<header>和</header>之间添加以下代码。

<h1>
	<a>My Photo Slides</a>
</h1>

现在让我们向标题添加样式。我们还为body和wrapper元素添加样式。将所有样式放入样式表style.css 。

/* Basic Styling */
body {
	background:transparent url(img/bg.jpg);
	font:15px/2 'Adobe Caslon Pro', Georgia, Serif;
	margin:0;
	padding:0;
}
a {outline:0 none}
#pagewrap {
	margin:120px auto;
	padding:0;
	position:relative;
	height:100%;
	width:960px;
}
header {
	display:block;
	float:right;
	margin-right:40px;
	width:192px;
	z-index:52;
	position:relative;
}
h1 {
	background:transparent url(img/separator.png) no-repeat center bottom; /* Add a separator line below the title */
	font-size:18px;
	font-weight:bold;
	height:70px;
	line-height:1.1;
	margin:55px 10px 0;
	text-align:center;
	text-transform:uppercase;
}

步骤29 –添加照片滑块

现在，我们将代码添加到文档的主要部分，即照片滑块。让我们先添加照片。将以下代码<div id="slidewrap">和</div> 。

<div id="slider">
	<img alt="Gallery Picture" title="#caption1" src="img/sample.jpg" />
	<img alt="Gallery Picture" title="#caption2" src="img/sample1.jpg" />
	<img alt="Gallery Picture" title="#caption3" src="img/sample2.jpg" />
	<img alt="Gallery Picture" title="#caption4" src="img/sample3.jpg" />
	<img alt="Gallery Picture" title="#caption5" src="img/sample4.jpg" />
	<img alt="Gallery Picture" title="#caption6" src="img/sample5.jpg" />
</div>

然后添加功能区和照片标题。

<div class="ribbon"></div>

<div id="caption1" class="nivo-html-caption">
	<span class="title">Photographer:</span><br/>
	Enrico Nunziati<br/>
	<span class="title">Location:</span><br/>
	Namib desert<br/>
	<span class="title">Model:</span><br/>
	Dead Vlei<br/>
	<span class="title">Date:</span><br/>
	Mar 18, 2011
</div>

<div id="caption2" class="nivo-html-caption">
	<span class="title">Photographer:</span><br/>
	Lina Dhammanari<br/>
	<span class="title">Location:</span><br/>
	Lombok Island, Indonesia<br/>
	<span class="title">Model:</span><br/>
	Mount Rinjani<br/>
	<span class="title">Date:</span><br/>
	May 8, 2008
</div>

<div id="caption3" class="nivo-html-caption">
	<span class="title">Photographer:</span><br/>
	Agnes Sim<br/>
	<span class="title">Location:</span><br/>
	Borobudur, Indonesia<br/>
	<span class="title">Model:</span><br/>
	Big Stupa<br/>
	<span class="title">Date:</span><br/>
	Jun 12, 2008
</div>

<div id="caption4" class="nivo-html-caption">
	<span class="title">Photographer:</span><br/>
	Nino Satria<br/>
	<span class="title">Location:</span><br/>
	Taman Safari Indonesia<br/>
	<span class="title">Model:</span><br/>
	Tally Giraffe<br/>
	<span class="title">Date:</span><br/>
	Aug 16, 2009
</div>

<div id="caption5" class="nivo-html-caption">
	<span class="title">Photographer:</span><br/>
	Timo Balk<br/>
	<span class="title">Location:</span><br/>
	Ubud, Bali, Indonesia<br/>
	<span class="title">Model:</span><br/>
	Offerings<br/>
	<span class="title">Date:</span><br/>
	Dec 20, 2009
</div>

<div id="caption6" class="nivo-html-caption">
	<span class="title">Photographer:</span><br/>
	Aris Wjay<br/>
	<span class="title">Location:</span><br/>
	Uluwatu-Bali<br/>
	<span class="title">Model:</span><br/>
	Beautiful Beach<br/>
	<span class="title">Date:</span><br/>
	Jul 20, 2011
</div>

现在，如果我们在浏览器中打开index.html ，我们将具有以下内容：

步骤30

我们仍然需要使用CSS修复滑块的外观。

#slidewrap {position:absolute;}
#slider {
	position:relative;
	height:auto;
	width:920px;
	border:10px solid #fff;
	box-shadow:0 0 5px #444;
	margin:10px;
}
.ribbon {
	background:transparent url(img/info-bg.png) no-repeat;
	height:482px;
	width:192px;
	position:absolute;
	right:40px;
	top:-3px;
	z-index:50;
}
#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}

这就是我们现在所拥有的。

当前，我们已经链接了Nivo滑块插件，但是还没有连接脚本。因此，让我们通过在<head>和</head>元素之间添加这些JavaScript函数来连接脚本。

<script type="text/javascript">
$(window).load(function()  {
$('#slider').nivoSlider();
});
</script>

步骤31：滑条样式

最后一步是添加滑块的样式。

/* The Nivo Slider styles */
.nivoSlider  {
	position:relative;
}
.nivoSlider img  {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink  {
	position:absolute;
	top:0px;

	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice  {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
.nivo-box  {
	display:block;
	position:absolute;
	z-index:5;
}
.nivo-directionNav {display:none!important}
.nivo-html-caption  {
  display:none;
}
.nivo-caption {
	position:absolute;
	right:20px;
	text-align:center;
	top:130px;
	width:192px;
	z-index:60;
}
.nivo-caption p {margin:0}
.nivo-caption .title {font-style:italic}
.nivo-controlNav {
	position:absolute;
	bottom:10px;
	right:20px;
	height:15px;
	width:192px;
	text-align:center;
	display:block;
	z-index:51;
}
.nivo-controlNav a {
	background:transparent url(img/button.png) no-repeat center center;
	display:inline-block;
	height:14px;
	width:14px;
	text-indent:-9999px;
	cursor:pointer;
}
.nivo-controlNav .active {
	background:transparent url(img/button_active.png);	
}

最终结果+下载

这是我们的最终结果，请单击此处查看有效的演示。

无法实现某些步骤？这是结果的PSD文件和完整的项目，供您测试和使用。

翻译自: https://www.hongkiat.com/blog/image-slider-photoshop-jquery-nivo-slider/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用Photoshop和jQuery创建图像滑块

毫无疑问，图像滑块是商业Web设计中最常用的元素之一，因为它的尺寸较大，一旦访问者到达网站便能够吸引访问者的注意。尽管网络已经开始重新考虑图像滑块的可用性，但是对于Web设计行业的新手来说，它仍然被认为是必须学习的知识。在本网页设计教程中，我们将学习使用Photoshop在上方创建自定义图像滑块，您可以从此处预览最终结果。我们不仅将在Photoshop中对其进行说明，还将通过将其转...
复制链接

扫一扫