名片生成器
90×54mm 标准尺寸 · 3mm 出血 · 300dpi 印刷级导出 · 正反面实时预览
在线名片生成工具:按标准横版名片 90×54mm、四边各 3mm 出血、300dpi 建稿,填写姓名、职位、公司、电话、邮箱、地址等信息后, 正反两面在右侧实时排版预览,支持 8 种主题色与自定义色、左对齐 / 居中两套排版、Logo 上传(正面左上角可选展示)、 出血线与安全线标线预览,一键导出正面 / 背面 300dpi PNG 直接送印。全部绘制由浏览器 Canvas 本地完成,不上传任何数据。
正面信息
背面信息
同步正面:云帆科技有限公司
主题与排版
主题色
排版预设(正面)
Logo 上传(选填)
实时预览
含出血 1134×709px · 成品 1063×638px(90×54mm @300dpi)姓名与手机号已填写,名片信息完整。
导出的 PNG 已包含四边各 3mm 出血(画布 96×156mm @300dpi)。 送印时请提前告知印刷厂「成品 90×54mm、四边出血 3mm」的规格,印刷厂按出血线裁切后即为成品尺寸。
#名片生成器是什么?
名片生成器是一款纯浏览器本地运行的在线名片设计工具。它按国内最常见的横版名片规格 90×54mm 建稿,四边各预留 3mm 出血, 以 300dpi(印刷级分辨率)在 Canvas 上实时绘制正反两面:正面包含姓名、职位、公司名、手机、电话、邮箱、地址与网站, 背面包含公司名、Slogan 与网址;支持 8 种预设主题色与自定义色、左对齐 / 居中两套排版预设、Logo 上传, 并可叠加出血线(红虚线)与安全线(绿虚线)辅助排版。填写过程中输入防抖 200ms 自动重绘,一键导出 300dpi PNG 送印。
标准名片尺寸与出血是什么?
国内标准横版名片成品尺寸为 90mm × 54mm。出血(Bleed)是为避免裁切误差留出的「裁切余量」:底色与图片要向外多延伸 3mm, 印刷厂裁切时刀线落在成品线附近,即使有 1-2mm 偏差也不会切出白边。因此本工具的画布实际为 (90+6) × (54+6) = 96×60mm, 画布上的红色虚线即裁切线(成品边界),绿色虚线是安全区——重要文字与 Logo 请都放在安全区内(成品边再内缩 3mm), 防止裁切偏移时被切掉。
300dpi 是怎么算的?
dpi(dots per inch)指每英寸像素数,300dpi 是印刷品的通用分辨率标准。换算公式:像素 = 毫米 ÷ 25.4 × 300。 名片 90mm → 1063px,54mm → 638px;加出血后 96mm → 1134px,60mm → 709px,即导出画布为 1134×709 像素。 本工具的预览画布内部就是按这个全分辨率绘制的,屏幕上只是 CSS 缩小显示(内部分辨率远高于显示尺寸乘以设备像素比), 所以预览清晰、导出即所得。
名片设计的留白与字体建议
- 文字与 Logo 全部放进安全区(成品边内缩 3mm),距裁切线太近容易被切掉或视觉局促。
- 姓名建议 12-18pt,职位、公司 8-11pt,联系方式不小于 6pt(约 25px @300dpi),太小难以阅读。
- 深色底配白字、浅色底配深字;本工具按背景相对亮度自动切换文字颜色(亮度阈值 0.45),无需手动调。
- 单面信息行数控制在 5 行以内,地址过长时工具会自动截断省号显示,正式送印前建议精简地址。
- 中文字体优先选择黑体类(思源黑体、苹方、微软雅黑),小字号避免用宋体细体,印刷后易发虚。
PNG 能直接送印吗?
可以。绝大多数数码快印店与名片印刷厂都接受 300dpi 的 PNG / JPG 位稿收印,本工具导出的 PNG 已含 3mm 出血, 下载时页面也会提示你向印刷厂说明出血规格。两点注意:一是 PNG 为 RGB 色彩,印刷用 CMYK 四色,深色与高饱和色会有轻微色差, 对颜色要求高建议先打样;二是若印刷厂要求矢量源文件(AI / PDF / CDR),可把导出的 PNG 交给设计师作为排版底稿快速转制。
#常见问题 (FAQ)
名片数据会上传到服务器吗?
不会。正反面全部由浏览器 Canvas 本地绘制,Logo 通过 FileReader 在本地读取,不产生任何网络请求。为了下次打开免重填,仅姓名等文字字段与主题色会保存在你本机的 localStorage(不含 Logo 图片数据),清除浏览器站点数据即可删除。
为什么预览颜色和印刷成品有色差?
屏幕是 RGB 发光成像,印刷是 CMYK 油墨反光成像,色域不同必然存在差异,纸张的吸墨性也会影响最终成色。藏蓝、墨绿等深色通常印刷后更深沉,金棕等颜色偏差更明显;重要场合建议先打样确认。
背面公司名怎么独立修改?
背面公司名默认与正面同步,点击「解锁独立编辑」后可单独填写,改正面不再影响背面;点击「重新同步正面」即可恢复跟随。
相关工具推荐
CSS阴影生成器
可视化生成CSS阴影效果,支持box-shadow和text-shadow
Logo制作器
使用几何图形组合设计专业Logo
CSS渐变生成器
可视化生成CSS渐变代码,支持线性、径向和锥形渐变
CSS动画生成器
可视化编辑CSS关键帧动画,实时预览和代码生成
CSS边框生成器
生成CSS边框样式,支持圆角、虚线、图片边框等
图案生成器
生成可重复的背景图案,支持多种样式和自定义参数