用ps制作另类分隔线

先看效果图。 在网页设计布局中,分隔线是很常见的,它们的样式有很多,但它们有一个共同的功能:将不同的信息块分隔开来,本教程我们学习如何用photoshop制作与众不同的分隔线。 新建文档400×200像素,背景填充5a5a5a。建新层,用矩形工具画1像素选区,填充黑色。 建新

Photoshop制作网页指示框

可用于盒子的标题,下面展示最终效果图。 一、建立文件,400*100px,72dpi,背景白色。 二、画一个长方形,选择》修改》平滑,填入2px。 三、混合选项》渐变叠加(从R:172;G:201;B:32到R:210;G:229;B:122

先看效果图。

用ps制作另类分隔线插图

在网页设计布局中,分隔线是很常见的,它们的样式有很多,但它们有一个共同的功能:将不同的信息块分隔开来,本教程我们学习如何用photoshop制作与众不同的分隔线。

新建文档400×200像素,背景填充5a5a5a。建新层,用矩形工具画1像素选区,填充黑色。

用ps制作另类分隔线插图(1)

建新层,将选区往下挪1像素,填充白色,ctrl+D去掉选区。

用ps制作另类分隔线插图(2)

将2图层模式都改为柔光。

用ps制作另类分隔线插图(3)

建新层,做如下图所示矩形选区,白到透明直线渐变(从下往上拉),图层不透明度10%。

用ps制作另类分隔线插图(4)

建新层,重复上一步,做一个黑到透明的渐变,图层不透明度30%。

用ps制作另类分隔线插图(5)

画一个矩形选区,长度相等,宽度是渐变层的2倍。

用ps制作另类分隔线插图(6)

Ctrl+shift+i反选,选择>修改>羽化,半径13像素。除了背景,挨个图层选择,删除2次,去掉选区,最终效果如下。

用ps制作另类分隔线插图

先看效果图。

用ps制作另类分隔线插图

在网页设计布局中,分隔线是很常见的,它们的样式有很多,但它们有一个共同的功能:将不同的信息块分隔开来,本教程我们学习如何用photoshop制作与众不同的分隔线。

新建文档400×200像素,背景填充5a5a5a。建新层,用矩形工具画1像素选区,填充黑色。

用ps制作另类分隔线插图(1)

建新层,将选区往下挪1像素,填充白色,ctrl+D去掉选区。

用ps制作另类分隔线插图(2)

将2图层模式都改为柔光。

用ps制作另类分隔线插图(3)

建新层,做如下图所示矩形选区,白到透明直线渐变(从下往上拉),图层不透明度10%。

用ps制作另类分隔线插图(4)

建新层,重复上一步,做一个黑到透明的渐变,图层不透明度30%。

用ps制作另类分隔线插图(5)

画一个矩形选区,长度相等,宽度是渐变层的2倍。

用ps制作另类分隔线插图(6)

Ctrl+shift+i反选,选择>修改>羽化,半径13像素。除了背景,挨个图层选择,删除2次,去掉选区,最终效果如下。

用ps制作另类分隔线插图

作者: 791650988

为您推荐