10

I am working on a needlework embroidery generator and I want it to be able to generate simulations of the final embroidery. I came across an image which looks like what I need and from the metadata I was able to tell it was produced with Photoshop.

Does anyone recognize the filter/effect applied on the original image so the result looks like this one?

enter image description here

4
  • Are you asking about the conversion of a photographic image into a piece of pixel art; or about the glow-like effect that has been applied to the pixel art?
    – Vincent
    Jul 1 at 10:20
  • 1
    Hi and welcome to GDSE! I took the liberty to edit the title of your question to make it more descriptive.
    – Wolff
    Jul 1 at 11:47
  • @Vincent - My program is already able to generate sheets for counting stitches, to match the image colors to those available in the thread palette, etc. What I need now is the ability to simulate how the embroidery will look like when sewn by someone. I have no background in image processing, that's why I asked what the Photoshop effect was for an image that seemed what I wanted. I need a starting point.
    – vbocan
    Jul 1 at 12:47
  • Ironically, so do I :) Could you post an example of the current status of your image?
    – Vincent
    Jul 1 at 12:55

3 Answers 3

17

There is no single filter in Photoshop for this, unless there is a third party plugin avialable. Anyway, it's easy enough using a couple of steps.

Resize a normal photographic image, to make it something like 100px wide.

enter image description here

Zoom in to fill the screen, and do Image > Mode > Indexed, and set it up like this

enter image description here

Rescale the image back up using the "Nearest Neighbour" option.

enter image description here

If you need a grid on top, make a custom pattern. This example is a 10px square, with a white row of pixels on the left and top edge.

enter image description here

Then back in your image, change back to RGB mode. Use the grid pattern you made previously to fill a new layer, and set the blending mode to Difference, layer opacity to 35%, and blur the grid layer using a 1px Gaussian blur

Here's the finished result

enter image description here

12

I propose mimicking cross-stich embroidery in Photoshop by adding some patterns and applying some filtering.

First I've used Mosaic filter to clean your example and revert it to pixel art. It has become a bit fuzzy because the grid didn't align perfectly, but it'll do for this answer.

I'll layer three patterns on top of the original image. They could probably be reduced to one, but I'm keeping them separate to make it easier to finetune the effect.

Your example uses a 7×7 px grid, so we'll use that as well. The patterns are drawn in a 7×7 px document and created by using Edit > Define Pattern.

The first pattern is used to simulate the shade on the individual threads of each cross-stitch.

The second pattern simulates the highlight on the individual threads of each cross-stitch.

The third pattern simulates the little hole in the corners of each cross-stitch.

In the following I'll use a lot of specific values. These are of course just suggestions and can be tweaked to your liking.

Start with the original image. It must be pixel art and scaled up using Nearest Neighbor interpolation so each pixel is 7×7 px. Turn it into a Smart Object. Apply the following filters to round and soften the original pixels:

  • Filter > Other > Minimum with Radius set to 1.0 Pixels.
  • Filter > Other > Maximum with Radius set to 1.0 Pixels.
  • Filter > Blur > Gaussian Blur with Radius set to 1.3 Pixels.

Add a Pattern Fill layer and select the shade pattern. Turn it into a Smart Object. Set its Blend Mode to Multiply and its Opacity to 40%. Apply the following filters:

  • Filter > Noise > Add Noise with Amount set to 100%.
  • Filter > Blur > Gaussian Blur with Radius set to 1.5 Pixels.

Add a Pattern Fill layer and select the highlight pattern. Turn it into a Smart Object. Set its Blend Mode to Screen and its Opacity to 15%. Apply the following filters:

  • Filter > Noise > Add Noise with Amount set to 200%.
  • Filter > Blur > Gaussian Blur with Radius set to 1.0 Pixels.

Add a Pattern Fill layer and select the holes pattern. Turn it into a Smart Object. Set its Blend Mode to Multiply and its Opacity to 80%. Apply the following filters:

  • Filter > Noise > Add Noise with Amount set to 30%.
  • Filter > Blur > Gaussian Blur with Radius set to 1.0 Pixels.

Now you should have a document that looks like this:

Pretty good, but too blurry. Select all the layers and turn them into a Smart Object. Apply the following filter to sharpen the image:

  • Filter > Sharpen > Unsharp Mask with Amount set to 300%, Radius set to 1.0 Pixels and Threshold set to 0 levels.

The result should look like this:

You could take it even further. For example by applying a displacement map (Filter > Distort > Displace) to make the image a little uneven and look more real:

Or perhaps by using a larger grid and making the patterns more realistic.

5
  • 2
    The final image looks fabulous! Your algorithm is straightforward and is probably very easy to apply in Photoshop itself, however I need to implement the same in Rust such that my program is able to generate the simulated image by itself. Thank you for taking the time to describe the steps, this is very helpful.
    – vbocan
    Jul 2 at 2:34
  • 1
    Congrats, it looks really good. Jul 2 at 10:16
  • 1
    Glad you liked it. I suspected that you need to do this programmatically. It should be possible, but perhaps you need to simplify a bit. Maybe live without noise and pre-blur and merge the patterns. I don't know anything about Rust other than that it exists. Does it have functions for image manipulation (blur, noise, sharpen, patterns) or would you have to code everything from scratch?
    – Wolff
    Jul 2 at 10:16
  • @Wolff I found some libraries for image manipulation in Rust and some of the functions are there, such as Gaussian blur, noise, etc. Some other functions such as multiply and screen blending modes will need to be coded manually and this is a perfect opportunity to contribute to the library. I intend to write a full scientific paper on embroidery generation and I need your permission to use and quote your algorithm. I am going to give full credit so please drop me a message to vbocan (a t) gmail.com with your name and affiliation (company, university, etc.)
    – vbocan
    Jul 4 at 10:24
  • 1
    @vbocan, I've been thinking about some ways to simplify this and make it more fitting for rendering on the fly. I might make an edit when I have the time.
    – Wolff
    Jul 4 at 12:15
8

You can get something resembling from an ordinary photo with Photoshop's standard tools. As an example we start from this partial screenshot of a sports news image:

enter image description here

A textile image should be simpler than an ordinary photo. One popular way to simplify images is to use Photoshop's Cutout filter. It can simplify edges and reduce the number of colors.

Unfortunately this image has too complex colors and cutout would cause adjacent image items to get the same color which would make the border's unclear. For simpler images it might work well. For this reason I skip Cutout, but apply the other as essential simplifying. I reduce the image resolution. It increases the apparent pixel size so that the pixels can be made to look crafted:

enter image description here

The image is now 160px wide. The used image size resampling method is Bicubic Sharper.

The color count must be reduced radically, because every pixel is a separate piece of a textile material. One way to get it is to turn the image temporarily to Indexed color mode. There's available many palette optimization strategies. I used this:

enter image description here

As many as 40 separate colors are used. A talented pixel artist could create from scratch or redraw an image by using less colors and it would still look sharper. I am not one, so this is what I have. A special Pixel Art Filter could help, but it should be based on some advanced programming to get even close to pixel artist's results. I do not know from where one could get such filter, but you can try this website: https://pixel-me.tokyo/en/

If the image happens originally be a drawing or painting with limited enough color range a good result is possible in Photoshop with low color count. This older case shows some evidence for it: How to make pixel art 2D 64x64 from 3D models/photo?

The pixels are now well visible, but they should look like they were crafted one by one - they need a structure. One way to get it is to scale the image to bigger pixel dimensions and insert a shading. I scaled the Image to 1000% with nearest neighbour resampling. The image was returned to RGB mode after indexing. In the next screenshot every 10 x 10 pixels block has the same color:

enter image description here

I prepared in another 10 x 10 px Photoshop image the next pattern to be used as the shading for the dots:

enter image description here

The pattern was originally this Illustrator drawing which tries to be a shaded bubble on a square:

enter image description here

In Photoshop its contrast was stretched to cover the full range from black to white and the image size was reduced to 10 x 10 pixels. The image was selected and definded to be a pattern for the Pattern Stamp tool. (Edit > Define Pattern)

The pattern presents the variations of the light. It should not be used as a transparent overlay. It does its job as the layer mask of an adjustment layer which increases contrast. It's used in a curves layer (=Curves 2 in the next image). The layer mask is simply filled with the pattern stamp - one click with the max.brush size.

enter image description here

There's also Curves 1 which makes the image duller. It lifts up darks so that the pattern can be noticed also on dark areas and darkens brightest areas to prevent Curves 2 to cause clipping. Here only Curves 1 is active:

enter image description here

As you see it's not as full of color as the original image. That's caused by the fact that a part of the image is in shadow due the structure of the effective pixels. It cannot be compensated because the brightest parts in shaded effective pixels are as bright as they can. The appearance becomes brighter when the image is zoomed to a bigger size so that every pixel in the 10 x 10 shading pattern is actually separate on the screen:

enter image description here

To make it look brighter in the image one could allow clipping or reduce the depth of the shadows. In the next image Curves 1 only lifts the dark areas to have the pattern visible:

enter image description here

In many areas the brightest spot is clipped, so one must be careful with this. In the next image clipping happens, but not as much:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.