ps创建常见的网页风格教程系列一
- 2022-12-24 19:44:46
- 来源/作者:互联网/佚名
- 己被围观次
作者: maimai 最终效果图 好了,让我们开始吧。打开photoshop创建一个新文档,尺寸是1020px X1240px,背景颜色设置为#e6e9d4。 用矩形工具,创建一个形状,颜色 #bbc19c。我的形状尺寸是 1020px X 327px 好了,添加一个图层蒙版(保证你的图层是被选中状态)。 然后确
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/0dlnwzbmux0.jpg)
点击图层>图层蒙版>隐藏所有(保证你选择的图层是图片图层)。
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/ksje32frqvp.jpg)
选择渐变工具,确定是默认颜色设置(前景白色,背景黑色),按照下图的标记拖拽你的渐变。
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/h2p3dwniwww.jpg)
我的效果:
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/mzo5ktiqov2.jpg)
好了,添加一些阴影。我用的是椭圆工具,在头部下面创建一个细长的形状。
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/af1kleoo3nh.jpg)
保持这个形状被选定,我把这个图层命名为阴影。点击滤镜>模糊>高斯模糊。
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/4bth03ibjez.jpg)
5.5半径
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/tcwho4jg4oz.jpg)
好了,我们头部基本上也完成了。
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/2cxqugnohug.jpg)
Step 4 – 创建主要内容部分
按照下图,添加一些文字。采用的是三栏布局。
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/uznzvkqod15.jpg)
选择矩形工具,创建一个形状。这就是我们的主要内容区域。我的尺寸是935px X 504px。
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/vvxlqwsjb2c.jpg)
设置图层样式如下:
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/51ocy5uxla0.jpg)
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/mw55xetdp10.jpg)
我的效果
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/ynwbgds5bbs.jpg)
然后在上面和下面添加一些阴影,用椭圆工具和高斯模糊就可以完成了。添加一些分割线。
现在的效果:
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/ngurkc2aw5j.jpg)
好了,添加更多的矢量图标和文字。这是现在的效果。
![[转载]photoshop创建常见的网页风格教程系列一 网页效果图教程](https://fj.psjia.com/d/file/bigpic/2022/12/24/2vx30hog03h.jpg)
好了,主要内容部分也完成了
Step 5 – 创建底部内容
底部内容就很容易完成了。放上logo和一些文字就可以了。
最终的效果图

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)
下一篇:ps设计红色网页按钮教程








