【趣味工具】Pika: 屏幕截图美化工具

将截图上传,通过简单的设置,就可以快速的将屏幕截图变得更漂亮。

网址: https://pika.style/

源码: https://github.com/rishimohan/pika

同类工具:

Pika 是一款网络应用程序,可将 RAW 屏幕截图转换为精美的图像,您会很自豪地在登录页面、电子邮件、Twitter 或营销页面上分享这些图像。

Pika 背后的主要目标是加快设计截图的过程。

皮卡如何工作?

Pika 用于dom-to-image从 DOM 元素生成图像。DOM 元素是带有您的屏幕截图和所有样式的画布。样式是使用内联 CSS 和 Tailwind CSS 混合完成的。

Pika 如何快速设计截图?

  • Pika 将您的选项保存在本地机器上,因此当您下次打开应用程序时,它会保留您之前的设置
  • Pika 为您提供快捷方式:
    • Ctrl/Cmd+V:粘贴截图
    • Ctrl/Cmd+C:复制输出图像
    • Ctrl/Cmd+S:保存输出图像

你可以用 Pika 做什么?

  • 将圆角应用于您的屏幕截图
  • 应用背景渐变
  • 控制画布中的屏幕截图位置,添加填充
  • 为屏幕截图添加阴影
  • 在背景中添加噪音以添加 RAW 氛围

设置应用程序

首先,运行开发服务器:

  • 克隆仓库
  • 设置yarn
  • 运行开发服务器yarn dev
  • 使用浏览器打开http://localhost:3000以查看结果。
  • 位于的文件/components/main包含画布和样式的代码

使用

  • Next.js
  • TailwindCSS
向上生长
向上生长
文章: 71
订阅评论
提醒
guest

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x