PixelShank v0.0.2 is released

About PixelShank

PixelShank is an cross-platform app that support to click and measure the width and height of any object on an image and save it as a .png file. It works well in the modern web browser while you can run it as a desktop app on windows, Mac OS or Linux.

PixelShank Icon

PixelShank Logo, made in Photoshop in 5 mins.

Idea, Design and Development process

I started this mini side-project at the early Nov 2015. The original thoughts includes two goals. One is to make an lightweight design measuring tool that may help designer improve productivity. The other is to practice my development skill with techniques including node.js, p5.js, electron and JavaScript.

After two weeks, I made it. The spare time I spent on it may be around 4 days.

PixelShank Screenshot

A screenshot of the app.

Here is the pre-alpha version, that I spent more time on the process of draw a line with the pixel hints on an canvas. To measure the pixels on an static image, the line, most of time, just need to be marked horizontally or vertically. So I limit the orientation of the preview of the line.

I used p5.js, a JavaScript library base on the processing language, a library for designer and artist to code the imagination.

The problem is, to make PixelShank more useful for more designers. I would prefer some functions such as using rectangle to highlight an area and add text as notes. The existing PixelShank function fulfilled my dream of programming, but the function I made doesn't meet my daily requirement.

前两周想学用P5.js,Electron学习编程,写了这么个像素测量小工具。支持导入本地图片,通过鼠标点击在图片上标注像素尺寸,然后另存为一张png图片。

因为用到了Electron,所以可以直接生成桌面App使用,支持Windows, MacOS和Linux。

不过这个小工具做完之后感觉似乎并不是那么的常用,于是干脆把它放上GitHub,希望对有需要的同学有帮助。

现在App中还有一些基本的问题有待优化,比如图片加载后比徐手调窗口大小来让Canva重调尺寸等等。希望未来能找到优化的方法。

这回的这个小App的开发也让我体会到了开发人员的不易。原来设计师们平时想要实现的一些看似简单小巧的功能,其实暗藏着许多的逻辑步骤,开发起来还是很费神的。无论如何,写代码还是很有趣的,希望能有越来越多的艺术与文科背景的人士参与其中,探索更多的可能性。

Latest Release

v0.0.2 Pre-Alpha (GitHub | SourceForge)

PixelShank Web

PixelShank on Github

Star

Posted