How is this image looking?

Hi,
How is this image looking for a logo shape?

http://tvyotv.com/1musicalNote.png

Are the left and bottom shadows looking ok?
Thanks

 

Looking perfect.

 

@sarahk
I did not understood. Did you mean color flow of the shape, or color flow of the shadow, or something else?

Thanks

 

@sarahk
Also check this second image in the morning. Is this also having that pixel problem?
http://tvyotv.com/musicalNote2.png

I just can't seem to find a nice way to drop a shadow behind an object using PHP GD... Something like a photoshop shadow, even something close will do.

 

Actually it was larger, I made it smaller.

 

Simple, they're an artist, not a designer. With something like that they should be -- in 2020 at least -- handing you a SVG to work from, not a raster image.

Because all the things you're having obvious issues with like crappy fringing and aliasing to scale issues? Yeah, that's why raster images for line-art should have gone the way of the dodo 30 years ago.

FFS it doesn't even look like they're handing you proper layers or transparencies. Again, "artist", NOT a designer. Good designers are ALSO artists, but artists are not automatically qualified to design a damned thing. They lack the knowledge of media formats, element construction, usability/accessibility, or dozens of other engineering concepts required for ACTUAL design.

Which is why if an artist under the DELUSION they're a designer hands me a steaming pile of crap like that, I'd throw it in the trash, use font-awesome's "fa-itunes-note", use a transform to rotate it 180deg if they REALLY want it backwards for whatever idiotic reason, and then colour it with a gradient using background-clip and perhaps generated content if text-shadow is warranted. Aka, "not even the job of an image" in a modern layout.

And seriously, said "artist" doesn't know enough about music to draw that **** either. The dot goes on the right if the lines are above it, it goes on the left when the lines are below it.

Seriously, tell your client their "artist" is NOT a designer, not even huffing CLOSE. Typical know-nothing artsty-fartsy poseur not qualified to do a damned thing in the industry.

 

For laughs, here's what I mean:

https://cutcodedown.com/for_others/Jeet/colourNote/

Spitting distance, using a custom font or vector the same could be done fully scaleable. Which I'd use would depend on the size and what else is already going on with the page it's going into. SVG might be a better bet -- not my bag -- since background-clip doesn't exist in IE.

Even so, this is why raster images for line-art should have gone away years ago.

Again though, it being mirrored is very, very strange.

 

@deathshadow
You are right, I got no clue about music notes.
I found this shape and am trying to do some things with the shape using PHP & GD which would normally require photoshop.
Like flipping, adding shadow/glow/stroke, gradient fill etc.
The image I used is flipped horizontal, will change that no problem.

@sarahk
The scaling tool is PHP GD
Except the shape itself, rest everything was done by PHP.
I am thinking that at some point PHP is pixelating the image, not sure where and how I can fix that.

Base image used was PNG, with transparent pixels.
Do you think if I use some other format, then this problem can be reduced?
Thanks

 

All things CSS can do now, which is mind-blowing. You can get even crazier with using generated content to duplicate the text and layer effects. You're trying to use PHP and the buggy/quirky GD functions to do things that really have no business being done in PHP.

Like my upcoming elementals 4.0 release is getting a new website (since I had to rewrite the whole damned reference from scratch anyways due to massive changes), and I ended up with this markup:

<h1><a href="/">elementals.js</a></h1>

Code (markup):

That ends up looking like this on the page:



... or this in "dark mode"



Without getting ANY images involved... and I can colour it however I like for any skin since it's all right there in the CSS.

h1 {
	padding:0 0.25em;
	font:bold 4em/1.2em molot,sans-serif;
}

h1 a {
	position:relative;
	display:inline-block;
	text-decoration:none;
	text-transform:uppercase;
	letter-spacing:0.015625em;
	color:#DFE;
	transition:color 0.5s, text-shadow 0.5s;
	text-shadow:
		0 0.0625em 0.125em rgba(0,64,32,0.7);
}

h1 a:before {
	content:"elementals.js";
	position:absolute;
	-webkit-text-stroke:1px #264;
	-webkit-background-clip:text;
	background-clip:text;
	background-image:linear-gradient(
		0deg,
		#080 0%,
		#CFC 35%,
		#0C0 49%,
		#FFF 50%,
		#8CF 65%,
		#55F 100%
	);
	color:transparent;
	text-shadow:none;
}

#toggle_dayNight:checked ~ div h1 a {
	color:#AFC;
	text-shadow:
		0 0 0.25em #000,
		-1px 1px 1px #000,
		-1px -1px 1px #000,
		1px -1px 1px #000,
		1px 1px 1px #000;
}

#toggle_dayNight:checked ~ div h1 a:after {
	background-image:linear-gradient(
		0deg,
		#686 0%,
		#DFD 35%,
		#565 49%,
		#DFD 50%,
		#DFD 55%,
		#898 65%,
		#585 100%
	);
}

Code (markup):

So much easier to change on the fly without screwing around in a paint program.

Though in your case I really do think SVG would be the proper answer so it's fully scaleable and dynamic to any size. PNG is really the wrong format for this sort of thing.

 

Thanks, I will try with SVG format.