Jump to content
You must now use your email address to sign in [click for more info] ×

How to get a png to behave like glyph in Designer


Recommended Posts

Hey there-

I'm new to Affinity products.  I'm working on a mock-up for a mobile app.  In Designer, I've grabbed some of the glyphs from the asset manager for the navigation bar at the bottom of the phone display.  I needed an image that wasn't in the asset manager so I found something that worked for me from elsewhere.  The image file is a png.

Now, I'm trying to figure out how to make it function like the included glyphs do.  For instance, while trying out different color schemes - with the glyphs - I just have to select the glyph and then choose a color.  That's not working with the png file.

Is there a way to convert the png to the same file type as the glyph so it will behave like one?

Thanks

Link to comment
Share on other sites

Well the PNG is a bitmap/raster image and thus treated slightly different for coloring here. In case the PNG image is all hold in a single color then you can use the color fill can tool () in the pixel persona to recolor it. Or alternatively you can trace and thus convert the PNG bitmap into a vector drawing with the help of some third party bitmap-to-vector tracing tool. The later (traced into a vector draw) would allow to set/change the color as you did with the glyphs.

Some online tracing/vectorization tools are:

A free app which contains a very capable Potrace based bitmap to vector tracer is InkScape.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

Thanks for the help.  I'll check into your suggestions.  One thing I've run into when trying to change the color of the png in Photo using the Color Overlay FX... the image gets a bit of a hue, but doesn't actually change to the color I've selected.  Must be a setting somewhere that I'm missing.

Link to comment
Share on other sites

Well FX Color Overlay works mostly for vectors/shapes and not for bitmaps/images. - Here is how to change the color for a bitmap image (PNG) via Designer and it's Pixel persona. Note that in this short example a PNG bitmap file is opened and that the Layers panel indicates the layer as a (pixel) layer.

 

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

8 hours ago, v_kyr said:

Note that in this short example a PNG bitmap file is opened and that the Layers panel indicates the layer as a (pixel) layer.

Alternatively, if working with a Placed png file one would have an (Image) layer. At that point, with the layer selected, changing its Fill will change its color. That can be done from the Context Toolbar, or the Color panel, the Appearance panel, etc.

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.