民以食为天!食物作为我们每个人日常中最重要的东西,在设计食物类的图标icon时,就更加需要图标icon设计师巧妙地运用视觉,让消费者在大脑中迅速形成画面感。当充满食欲的暖色系食物图形icon碰上3D会产生什么效果呢?让我们以打工人常备的咖啡3D食物图标icon为例,用Pixso试试看吧!

食物图标

1. 制作3D食物(咖啡)图标教程

用Pixso制作咖啡图标十分简单,通过以下几个步骤,即可轻松绘制成功。

第一步:创建画板,用钢笔工具和形状工具绘制咖啡杯的整体轮廓,这里可以先用不同深浅的灰色或较深的描边来区分每一个部分。

创建画板

第二步:填充颜色。

*参考数值:

①咖啡杯杯身:

线性渐变#FFE8DA 100%→#DE9F77 100%→#D98F60 100%→#DF9B72 100%

内阴影#E2A18B 100%;X-1,Y0,模糊12

②下杯盖侧面:

线性渐变#AC8886 100%→#7C534F 100%→#451D19 100%→#653430 100%

③下杯盖顶部:

线性渐变#D5BBBA 100%→#A87976 100%

④上杯盖侧面:

线性渐变#A26964 100%→#75403B 100%→#3F190C 100%→#592615 100%

⑤上杯盖顶部:

线性渐变#C98984 100%→#89534F 100%

⑥吸管:

线性渐变#E4AA95 100%→#A86751 100%→#A16049 100%→#A46853 100%

吸管

第三步:增加阴影,完善细节。

*参考数值:

①吸管顶部填充颜色为#77422F 100%

②盖子凹槽处线性渐变:#7B443F 100%→#602D29 100%→#653430 100% 

盖子凹槽处线性渐变

增加标签纸。

*参考数值:

填充为线性渐变#ECAB94 100%→#964F35 100%→#93492D 100%→#A15539 100%

填充为线性渐变

最后一步:加上商标等细节就可以啦!

加上商标

2. 用Pixso协作设计3D食物图标图标

你也可以直接在Pixso社区的作品资源,搜索图标分类,快速找到3D食物图标icon,打开编辑画板即开即用。

食物图标icon

食物图标icon

Pixso是新一代设计协作工具,不仅实现了和Figma、 Sketch、Adobe XD 的无缝衔接,更基于优秀的组件变体、自动布局等特色功能,让UI设计师在网页上就可以尽情自由创作。作为一款为本土设计师量身打造的国产设计工具,因其实时协作、精细化设计工具等特色功能,收获了广大使用者的喜爱。

使用 Pixso在线协同设计磨砂玻璃质感天气图标,直接拖拽使用Pixso自带的设计资源库,省去大量重复劳动,让设计更流畅,协作更高效!

3. 协作设计工具Pixso的特点

团队高效协同:支持多人在线编辑和查看,无需下载,云端同步更新修改内容,评论也能加入协作,轻松反馈与修改校正所有项目。

智能设计工具:自带专业设计工具,拥有和 Figma、sketch 同样丝滑的创作体验。只需修改主组件,所有组件同步变化,快速形成统一规范。组件级自动布局,增加或删除内容都无需手动调整,智能排版。

企业级数据安全:内网本地服务器部署,确保敏感数据和业务数据私有化。提供定制化功能开发,私享更多高效体验。自定义团队管理权限,规避数据泄露风险

海量设计模板:集成腾讯、阿里、字节、蚂蚁设计等众多大厂设计系统。组件素材直接拖拽复用,省去大量重复劳动。Pixso设计资源每月更新,创意快人一步。