撰写人:黄文政 创建时间:4月14日
首先,打开PS创建一个Web格式的文档。
用PS制作个人食品网站首页
然后把这个食品网站的顶部导航栏做出来。在这个顶部导航栏有一个交互色鼠标移动到导航栏菜单上面会出现一个带桃红色的块。并且这个顶部导航栏上的购物车也是可以点击的。我这个食品网页以粉色调为主。风格为简约风格
用PS制作个人食品网站首页
然后在顶部导航栏下面放一张轮播图。在这张轮播图上面有两个按钮可以左右切换轮播图。
放这么大一张轮播图的目的是为了吸引顾客的眼球并且这张轮播图上颜色的饱和度并不是特别的高是为了让顾客感觉更舒适而不是看着很压抑。
用PS制作个人食品网站首页
在这张轮播图下面有一个内容导航页的背景图。用这个美食的背景图原因是可以激发顾客的食欲。这个背景图采用了高斯模糊以突出中间的文字内容。
用PS制作个人食品网站首页
然后这个内容页的背景我使用了粉色。在这个内容页里面“加入购物车”按钮可以点击。点击之后你的购物车里面就会多一种这个物品。并且这个物品的图片也是可以点击的。点击进去之后会有更加详细的介绍。“更多”这个按钮也是可以点击的,它会弹出另一个界面里面会有很多关于这一类的物品。
用PS制作个人食品网站首页
内容页的下方又是一张内容导航页。与上面的内容导航页风格一样,采用了美食作为背景,高斯模糊衬托中间的文字内容。
用PS制作个人食品网站首页
然后下面又是一张内容页的图也是与第一张内容页风格一样,这里我就不多说了。
用PS制作个人食品网站首页
然后是底部的板块,在底部的板块里“联系我们”“订购帮助”“关于我们”“公告专区”还有下方的微博、微信icon都是可以点击进去的。
用PS制作个人食品网站首页
完成之后可以去网页上看一下预览效果。点击文件-导出-存储为(web)所用格式。如图:
用PS制作个人食品网站首页
接着又会弹出一个框来然后点击左下角的预览就可以跳转至网页上预览效果了。
用PS制作个人食品网站首页

相关文章: