1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How is this image looking?

Discussion in 'Design' started by JEET, Apr 26, 2020.

  1. #1
    JEET, Apr 26, 2020 IP
    SEMrush
  2. seomanualsubmission

    seomanualsubmission Well-Known Member

    Messages:
    623
    Likes Received:
    90
    Best Answers:
    1
    Trophy Points:
    150
    #2
    Looking perfect.
     
    seomanualsubmission, Apr 26, 2020 IP
    JEET likes this.
  3. sarahk

    sarahk iTamer Staff

    Messages:
    27,853
    Likes Received:
    4,320
    Best Answers:
    123
    Trophy Points:
    665
    #3
    The shadows are fine but the pixellation is offputting.
     
    sarahk, Apr 26, 2020 IP
    JEET likes this.
  4. JEET

    JEET Notable Member

    Messages:
    3,755
    Likes Received:
    491
    Best Answers:
    19
    Trophy Points:
    235
    #4
    @sarahk
    I did not understood. Did you mean color flow of the shape, or color flow of the shadow, or something else?

    Thanks
     
    JEET, Apr 26, 2020 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    27,853
    Likes Received:
    4,320
    Best Answers:
    123
    Trophy Points:
    665
    #5
    I'll post a blown up example and explanation on the morning
     
    sarahk, Apr 27, 2020 IP
    JEET likes this.
  6. JEET

    JEET Notable Member

    Messages:
    3,755
    Likes Received:
    491
    Best Answers:
    19
    Trophy Points:
    235
    #6
    @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.
     
    JEET, Apr 27, 2020 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    27,853
    Likes Received:
    4,320
    Best Answers:
    123
    Trophy Points:
    665
    #7
    Sure is. An image at this size should have "steps" in straight lines

    upload_2020-4-28_8-13-44.png

    It looks like your original was small and you made it bigger.
     
    sarahk, Apr 27, 2020 IP
    JEET likes this.
  8. JEET

    JEET Notable Member

    Messages:
    3,755
    Likes Received:
    491
    Best Answers:
    19
    Trophy Points:
    235
    #8
    Actually it was larger, I made it smaller.
     
    JEET, Apr 27, 2020 IP
  9. sarahk

    sarahk iTamer Staff

    Messages:
    27,853
    Likes Received:
    4,320
    Best Answers:
    123
    Trophy Points:
    665
    #9
    Ok, so the scaling tool you used isn't good.

    Regardless of the format I get the image in I save as a .xcf/.psd file and then when I scale I muck about with the options until I get one that's smooth.

    I've been working with some images lately that were of such low quality that I couldn't do much with them and had to start over with different artwork. The other thing that I don't like is when a single colour gets distorted and "speckles". A client uses a designer who releases artwork with it and I always push back, I normally get sent the originals to scale. I don't get how a designer can release bad images.
     
    sarahk, Apr 27, 2020 IP
    JEET likes this.
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,615
    Likes Received:
    1,964
    Best Answers:
    248
    Trophy Points:
    515
    #10
    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.
     
    deathshadow, Apr 27, 2020 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,615
    Likes Received:
    1,964
    Best Answers:
    248
    Trophy Points:
    515
    #11
    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, Apr 27, 2020 IP
    JEET likes this.
  12. JEET

    JEET Notable Member

    Messages:
    3,755
    Likes Received:
    491
    Best Answers:
    19
    Trophy Points:
    235
    #12
    @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
     
    JEET, Apr 27, 2020 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,615
    Likes Received:
    1,964
    Best Answers:
    248
    Trophy Points:
    515
    #13
    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:

    [​IMG]

    ... or this in "dark mode"

    [​IMG]

    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.
     
    Last edited: Apr 27, 2020
    deathshadow, Apr 27, 2020 IP
    JEET and sarahk like this.
  14. JEET

    JEET Notable Member

    Messages:
    3,755
    Likes Received:
    491
    Best Answers:
    19
    Trophy Points:
    235
    #14
    Thanks, I will try with SVG format.
     
    JEET, Apr 27, 2020 IP