3

I'm not asking for the code, unless you have it ;) All I'm asking for is a point in the right direction.

Basically I'm trying to rewrite my 'football kit generator' Currently I use a template with 2 colours, they are changed using the imagecolorset function.

But now I want to start using better looking kits with shading and such (IE http://img829.imageshack.us/img829/3450/aspireblackwhite.gif)

I would be very grateful if somebody could give me some advice on how to do this.

Server-side please

DugoutSoccer
  • 422
  • 5
  • 19
  • aw man `jsquery` is out then I guess :( – Loktar Apr 23 '12 at 02:01
  • whoops, jquery i mean :) is there a way to do it in jquery? I'd be interested to know, as I could then figure out how it's done :) – DugoutSoccer Apr 23 '12 at 02:02
  • haha I was just messing with you :P. Best bet if your doing it in javascript would be to use the canvas element. But in order to help you out better Id need more specifics as your question is really vague. – Loktar Apr 23 '12 at 02:03
  • I need to be able to save it too (server side) – DugoutSoccer Apr 23 '12 at 02:21

1 Answers1

1

Your question is unclear as to whether or not you are trying to accomplish this on the server-side or the client side. Either way using 24 bit PNGs with alpha transparency will be probably be the best way to accomplish this.

If you want to generate the images on the server side, begin with the jersey as a partially transparent png with the white-parts transparent, then use a solid color as a mask behind it.

Some info here about alpha transparency and the GD library: How to merge transparent PNG with image using PHP?

If this is con the client you could layer solid color shirt images behind the same alpha-transparent PNG with absolutely positioned element and some changing of the z-index.

EDIT: For multiple colored jersey stripes you could layer three images: Two solid color jerseys with alternating stripes + 1 alpha grayscale image to go over the top for shading.

Community
  • 1
  • 1
Graham Conzett
  • 8,344
  • 11
  • 55
  • 94
  • hi, sorry yes I do mean server-side. Basically i would want to be able to edit BOTH colours (and change the stripes to hoops etc). So I assume that I would require the jersy on it's own, and translucent. Then put the colour behind it. But how would I do this multiple times? – DugoutSoccer Apr 23 '12 at 03:23
  • You could do that with three images see my answer above, essentially you want all shading and shadow in one top layer alpha image with various intersecting color layers beneath it. – Graham Conzett Apr 23 '12 at 04:27
  • okay i see what you mean. it wont work too great with 3 as i want to be able to change the pattern... but i think if i do it as 2 seperate images... then do the same to combine them 2, i think that may work. Thanks... ill post back with a result once I've had some time to code this. – DugoutSoccer Apr 23 '12 at 07:41