33个采用了“字体与图形遮罩”设计技巧的高端网页作品

Author: Chris Song

字体与图形紧密结合,通过遮罩的设计技巧来营造神秘的艺术感,是很多高端网站设计师比较常用的设计手法之一。今天我们一起来赏析来自全球优秀设计师的33个网页设计作品。

世纪樱花官网,运用遮罩概念,字体与图片重叠部分实现反白效果
紧扣主题自然——Nature来做遮罩,树叶是最好的素材
Orca,海底世界,神秘无比
Explore,探索,神秘感
South America
这个作品相对简单一些,直接用动物的字体遮挡住文字的一部分,但不影响对单词的阅读和理解。
 
Mirages,使用山脉作为遮挡的物品,很有神秘感
水中的倒影
左右等分屏幕,右侧部分文字区域遮罩图案纹理
Africa
像这样遮罩字体内容太多的情况,前面的鱼需要活动起来
Birds,鸟的造型跟单词的造型相似,不相撞
字体、图形可以做成前、中、后三个层级,做起动效起来更有逼真感
Moon,Return to the及 South anniversary 1969-2019,宇航员,段落文字,按钮。多个元素组合成的主视觉,这个作品设计非常细腻,对比分明,信息层级感很强。
Explore-字体的底部与水岸路面保持一致
一个多元素动态的画面,恰巧可以把Underwater若隐若现地遮挡住
the Tropics+按钮,利用周边的树叶元素做遮罩,吸引人
单词字体比较密集时,可以尝试只遮罩首字母
服装行业的官网采用字体与图像结合形成遮罩的效果,颇为常见
Intense 汽车行业,房地产行业的官网也是如此
Fish,so cute~
Discover, 跟Explore类似,都是探索奥秘,营造神秘感,符合主题
Explore,遮罩,光影效果
有趣的Hello~
多字母遮罩复合体
利用超大字母单词的占地面积,把画面镂空的遮罩手法
除了树叶之外,树干树枝也是不错的遮罩元素
Aqua
见过很多个利用大象做遮罩元素的作品,都很精美
字体镂空,遮罩
Ocean,利用海浪边缘做遮罩,整体遮罩
Europe,羊角遮罩
这种构图稍微复杂,但画面平衡
这个酒店相信很多人都听说过——Casangelina,世界十大悬崖酒店之一,位于阿马尔菲海岸的悬崖上,利用品牌VI logo的造型独特性,作为海报banner区域的遮罩元素,效果很棒。现已改版。

相关阅读