利用Photoshop制作风格化电子商务网站

利用Photoshop制作风格化电子商务网站创建画布,背景为白色,根据需要设定画布大小,这里以 760 x 770 像素为例。选择圆角矩形工具,圆角大小为3个像素,绘制矩形,完成网站整体布局的架构。为这些矩

利用Photoshop制作网站底部浮动导航栏

利用Photoshop制作网站底部浮动导航栏步骤 1 利用圆角矩形工具绘制如下矩形。步骤 2 图层 图层样式 内阴影。斜面与浮雕:描边:得到如下效果:步骤 3 在图层面板调节“填充”值到

利用Photoshop制作风格化电子商务网站

创建画布,背景为白色,根据需要设定画布大小,这里以 760 x 770 像素为例。

选择圆角矩形工具,圆角大小为3个像素,绘制矩形,完成网站整体布局的架构。

利用Photoshop制作风格化电子商务网站插图

为这些矩形添加图层样式。

图层 >> 图层样式 >> 投影:

利用Photoshop制作风格化电子商务网站插图(1)

渐变叠加:

利用Photoshop制作风格化电子商务网站插图(2)

渐变条设置如下:

利用Photoshop制作风格化电子商务网站插图(3)

描边:

利用Photoshop制作风格化电子商务网站插图(4)

我们将得到如下效果:

利用Photoshop制作风格化电子商务网站插图(5)

现在,我们来为这些矩形添加一些细节。

首先,按住 CTRL 键,并点击图层。

利用Photoshop制作风格化电子商务网站插图(6)

得到相应矩形选区。

利用Photoshop制作风格化电子商务网站插图(7)

创建新图层,选择椭圆选框工具,并将顶部状态栏设置为“交叉选区”。

利用Photoshop制作风格化电子商务网站插图(8)

在如下位置绘制一个圆。

利用Photoshop制作风格化电子商务网站插图(9)

这是你将得到如下选区。

利用Photoshop制作风格化电子商务网站插图(10)

选择油漆桶工具,用白色填充选区。

图层 >> 图层样式 >> 投影。

利用Photoshop制作风格化电子商务网站插图(11)

描边,这里我们将描边大小设为5像素,位置“内部”。

利用Photoshop制作风格化电子商务网站插图(12)

描边类型设为“渐变”,渐变条设置如下:

利用Photoshop制作风格化电子商务网站插图(13)

这时我们得到如下效果:

利用Photoshop制作风格化电子商务网站插图(14)

选择 >> 修改 >> 收缩,收缩量为5像素(同描边大小相同)。

创建新的图层并用白色填充选区,图层 >> 图层样式 >> 投影:

利用Photoshop制作风格化电子商务网站插图(15)

内阴影:

利用Photoshop制作风格化电子商务网站插图(16)

斜面和浮雕:

利用Photoshop制作风格化电子商务网站插图(17)

颜色叠加:

利用Photoshop制作风格化电子商务网站插图(18)

描边:

利用Photoshop制作风格化电子商务网站插图(19)

效果如下:

利用Photoshop制作风格化电子商务网站插图(20)

复制图层,通过改变颜色叠加和描边设置,得到如下效果:

利用Photoshop制作风格化电子商务网站插图(21)

添加导航按钮和导航文字。

利用Photoshop制作风格化电子商务网站插图(22)

将事先准备好的LOGO和素材图片添加到适当位置。

利用Photoshop制作风格化电子商务网站插图(23)

最终效果如下,本教程只是起到一个抛砖引玉的左右,希望大家都能做出具有各自风格的网页。

利用Photoshop制作风格化电子商务网站插图(24)

利用Photoshop制作风格化电子商务网站插图(25)

作者: 791650988

为您推荐