网页设计 » 视觉设计 » 流行的全屏式网页是怎样设计的?(视频教程)

流行的全屏式网页是怎样设计的?(视频教程)

发表于: 视觉设计. 评论
Sponsor

现在的PC基本上是宽屏时代,网页设计也几乎使用宽屏或全屏式设计,对于追求视觉效果的网站来说,首页采用全屏式设计是最吸引用户眼球了。在国外的设计社区Dribbble和Behance也常常看到这样的作品,那么这种全屏式网页是怎样设计的呢?设计师@Harshil Acharya做了一个视频演示,从找素材到最终设计稿,只花了很少的时间就能完成,同学们来一起学习吧。

流行的全屏式网页是怎样设计的?(视频教程)

全屏网页/全屏式BANNER设计

这是一个不需要解说也能看懂的设计视频教程,只需花费你1分钟时间观看!

全屏式网页设计视频教程:

(这类的设计我们可以称为首页焦点BANNER或才全屏网页也可以。)

前期准备

1、工具:Photoshop、Sketch,其实直接使用PS也是可以的,但Sketch来做排版比PS快一点,PS只用作处理图片,比如抠图、后期处理等。

流行的全屏式网页是怎样设计的?(视频教程)

2、字体:设计师使用了两款免费字体,分别是Georgia和思源黑体。

Georagia字体系统自带,所以不用下载。

思源黑体下载地址:https://www.shejidaren.com/app-she-ji-bi-bei-zi-ti.html

流行的全屏式网页是怎样设计的?(视频教程)

3、配色:网页的配色方面,使用了互补色搭配:蓝色与橙黄。

流行的全屏式网页是怎样设计的?(视频教程)

制作步骤

1、找一张主图,然后利用Photoshop的钢笔工具把主体抠图出来

流行的全屏式网页是怎样设计的?(视频教程)

2、抠图好后,就在Sketch里排版了(也可以使用PS,只是效率慢一点)

流行的全屏式网页是怎样设计的?(视频教程)

流行的全屏式网页是怎样设计的?(视频教程)

流行的全屏式网页是怎样设计的?(视频教程)

3、图标

设计除了绘制几个小图标外,社交媒体图标直接使用Fontawesome的字体图标,方便简单。

流行的全屏式网页是怎样设计的?(视频教程)

Fontaweseme也被收录了设计导航的「设计素材 – 图标」分类下就能找到。

流行的全屏式网页是怎样设计的?(视频教程)

总结

有人说这种只是概念设计,实际是做不了网页的,这种说法是对的也是错的,做不出这种效果是因为没按照网页规范来做,如果网页设计师了解HTML/CSS布局,那么做出来的界面就会规范很多。

设计达人认为这是一个快速训练网页设计美感的练习方法,建议做网页设计的同学可以用这个方法练习,快速提供美感。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }