毫无疑问, 图像滑块是商业Web设计中最常用的元素之一,因为它的相对较大的尺寸可以在访问者到达网站后吸引他们的注意。 尽管网络已经开始重新考虑图像滑块的可用性,但是对于Web设计行业的新手来说,它仍然被认为是必须学习的知识。
在本网站设计教程中,我们将学习使用Photoshop在上方创建自定义图像滑块,您可以从此处预览最终结果。 我们不仅将在Photoshop中对其进行说明,还将通过将其转换为HTML / CSS并添加jQuery以实现出色的滑动效果,将其转变为功能设计。
听起来涉及很多复杂的事情,但实际上,它非常简单易懂,那就让我们开始吧!
对采用图像滑块并在途中对其进行自定义更感兴趣吗? 这是专门为您的帖子。
入门
对于本教程,您将需要以下资源:
- 来自PSDfreemium的 26种可重复像素模式 。
- jQuery库
- Nivo Slider插件
- 现代化
- 从VandelayPremier 找到纸张纹理
- (可选) 过量使用的 13个总部旧纸张纹理
- 里亚恰尼(Ciaciya)
- Agnes Sim的佛塔
- Nally Satria的理货
- Timo Balk提供的产品
- 乌鲁瓦图-巴厘岛( Aris Wjay)
第一部分–设计图像滑块
步骤1:设定背景
首先创建一个大小为1000×700像素的新文件。 用颜色#efc89e填充背景。
使用来自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/