当前位置:首页 > PS教程 > 网页设计

ps创建常见的网页风格教程系列一

  • 2022-12-24 19:44:46
  • 来源/作者:互联网/佚名
  • 己被围观

作者: maimai 最终效果图 好了,让我们开始吧。打开photoshop创建一个新文档,尺寸是1020px X1240px,背景颜色设置为#e6e9d4。 用矩形工具,创建一个形状,颜色 #bbc19c。我的形状尺寸是 1020px X 327px 好了,添加一个图层蒙版(保证你的图层是被选中状态)。 然后确

按照下图参数设置图层样式。

网页效果图教程

然后,在文件Complete Designer Set 中,我选择了一些矢量的装饰图案,在Illustrator中打开他们,选择一个然后拖拽到Photoshop中,装饰在绿色形状的上面。用作衬托logo。

网页效果图教程

网页效果图教程

好了,选择中这一矢量图层,降低它的透明度到30%。

网页效果图教程

好了,导航和logo基本上完成了。我用文字工具添加了一些引证,在文字导航的下面。

Step 2 – 创建主导航

选择矩形工具,创建一个形状,如下图。我的尺寸是937px x 63px

网页效果图教程

设置图层样式如下:

网页效果图教程

网页效果图教程

添加一些文字,最终效果如下:

网页效果图教程

现在,看起来主导航有一些单调,我添加了一些图标。你可以从Complete Designer Set中下载它们。在 Illustrator中打开,然后选择合适的图标拖拽到 Photoshop就可以了。现在我的效果图是这样子的:

网页效果图教程

好了,现在看上去还不错。

Step 3 – 创建头部

选择矩形工具,创建如下形状,我的尺寸设置是937px X 278px,颜色填充#cdd5a1

网页效果图教程

设置图层样式:

网页效果图教程

网页效果图教程

网页效果图教程

好了,然后添加一些虚拟的文字(不是真实的项目么)。我用的是字体 Helvetica script ,14px 大小。然后栅格化文字。


设置角度为0和距离为70px。然后添加更多的文字。

网页效果图教程

好了,现在的效果是这个样子的:

网页效果图教程

然后我们选择一张漂亮的图片,来装饰我们的头部区域。保证图片图层在我们刚刚创建的图层上面。好了,你看到的就是下面的效果。

网页效果图教程

右键点击图片图层,选择创建剪切蒙版。

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

更多精彩内容

  • APP展示图,教你怎么用PS制作APP的界面图片 APP展示图,教你怎么用PS制作APP的界面图片
  • 用ps制作大拇指胜利手势logo 用ps制作大拇指胜利手势logo
  • 用ps制作金属质感徽章 用ps制作金属质感徽章
  • 用ps制作绿色环保Logo 用ps制作绿色环保Logo
  • 用ps制作放大缩小logo 用ps制作放大缩小logo
  • ps cs6设计火箭UI图标 ps cs6设计火箭UI图标
  • 教你用PS打造网页效果图全过程 教你用PS打造网页效果图全过程
  • 进度条,设计一个彩色进度条 进度条,设计一个彩色进度条