News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Default theme (RC3 Curve) colour variations - updated

Started by Antechinus, November 10, 2009, 07:31:35 AM

Previous topic - Next topic

Antechinus

#240
Mate, as long as they work it's all good. Thanks for doing it. :)

I'll check them out and add them to the OP.

ETA: Done.

Saxon044

Brilliant guys! All three of these themes are very classy, and it has been quite a job choosing which to run with. We've probably settled on Chocolate Curvaceous but it was a tough call.  :)

Thank you.


zijO

When use PSD file and change colors then save file.
I is to large about 30-40k

I looked modified themes of curve and it is same.


Original main_block.png is only 8.5k

I use Photoshop to optimize image and no matter what I do I get to large file or image is much distorted.

The question is how to make main_block.png with reasonable image quality but under 10 k.

hartiberlin

My trial of a modified Curve theme is now
296 Kbytes big for the main_block.png

have a look at:

http://www.ruhleben.com

and

http://www.ruhleben.com/Themes/default/images/theme/main_block.png

I am just hacking the
main_block.png
and add images to it.

I think this is the easiest method for me to have a custom theme.
Regards, Stefan.

Antechinus

Quote from: zijO on March 23, 2010, 09:47:53 PMWhen use PSD file and change colors then save file.
I is to large about 30-40k

I looked modified themes of curve and it is same.

Original main_block.png is only 8.5k

I use Photoshop to optimize image and no matter what I do I get to large file or image is much distorted.

The question is how to make main_block.png with reasonable image quality but under 10 k.

The original image is a png-8 with a restricted palette. If you are using png-24 then yes, the file size will be larger. Also, if you have added more detail or more colours this will also result in a large file.

Hartiberlin: 295kb is crazy big. No way should it be anywhere near that size for a default page.

zijO

Lovely pictures from 1906 

Even if  open original main_block and without any editing no matter how I save it the best I get is 20k.

I used png8
if i reduce colors then picture is distorted.

smp420

What are you sing to edit your files. From the looks of it whatever you are using doesn't have transparency try using paint.net http://download.cnet.com/Paint-NET/3000-2192_4-10338146.html
"Things turn out best for those who make the best of the way things turn out." -Jack Buck

PSPguru

I really like your  demo , when will they be available for public.

tycms

#249
Quote from: Antechinus on December 30, 2009, 04:26:24 PM
Quote from: smith_13 on December 30, 2009, 07:12:06 AM
hey how do you guys manage to optimize the main_block.png to original 9KB? I can do only 23KB with pngGauntlet.

The best trick is to use Fireworks instead of Photoshop. This is handy if you need a transparent background but you still want rounded corners or angled points (like the menu-gfx.png). Photoshop will only do png-8 with binary transparency like gif's, which means you get jaggy rounded corners and angled lines unless you use a background matte. That's fine for some images but not optimal for others.

I'm more used to working in PS so what I normally do is make the image in PS first and save as png-24. I then open that in Fireworks and select PNG-8 > Alpha transparency > Exact palette > Rebuild.

This will give a png-8 that has partial (alpha) transparency just like a png-24 or png-32, but with a much smaller file size and with true transparency in IE6. I then run that through PNGGauntlet on the default settings for extra crunchy goodness. :)

Note that there are a couple of catches. First is that any pixels with partial transparency will not display in IE6. It will only show fully opaque or fully transparent pixels. Partially transparent pixels will show as fully transparent, which means rounded corners will look like a gif without matte in IE6. Second catch is that images with a large colour range and gradients may give stripey gradients since Fireworks determines the final colour palette by itself. You cannot specify a final palette. It is still a very useful trick though and worth trying.


If we choose to save the final image as png in Photoshop, which options do we choose? Merge layers (merge down or merge visible?) and select "indexed color"? Which palette option? "Preserve exact colors" option selected?

If we choose to use Fireworks, how do we save the intermediary png in Photoshop? After making the edits on psd image, just save it as 32-bit png without any particular options?

Finally, exactly how are these main_block.png and menu_gfx.png images in an original SMF 2.0 RC3 package saved? In Photoshop or Fireworks? With what options?

Thanks.

tycms

#250
When I ignore IE6 compatibility and delete matte layers (tested with titlebg and catbg), what I get is straight edges on one side and awkward curves on the other side. (on modern browsers like Firefox 3.5, IE8)


p.s.
Keeping matte layers but filling them with transparency seems to work even for IE6. I cannot see any problems. The white edges are removed. But there should be a drawback, otherwise it would be implemented in the default main_block.png.

Antechinus

Use the "Save for web and devices" option. There is no need to mess around with the layers.

tycms

Antechinus, what about the "white edges" problem? Is it ok to make the matte layers transparent?

Quote from: budun on April 16, 2010, 10:46:49 AM
Keeping matte layers but filling them with transparency seems to work even for IE6. I cannot see any problems. The white edges are removed. But there should be a drawback, otherwise it would be implemented in the default main_block.png.

Antechinus

What are you saving the image as? If you are using a png-24 or png-32 then the corners will have a sort of grey background in IE6. If you use a standard png-8 straight from Photoshop then the corners will be slightly jaggy in IE6.

Phat B4t

I really like the Prince of Darkness theme, but I need the look to suit my site, so I am trying to get rid of the honeycomb look, how do I change the honeycomb look in the spot where it says General Category and Info Center - I can't seem to find an image file that matches that.

Thank you
http://thegoodlifedotnet.atbhost.net [nofollow]
Talk about the latest in movies. Find a good restaurant. ...or even discuss a good book. Everyones welcome at http://thegoodlifedotnet.atbhost.net [nofollow] come and enjoy the good life.

tycms

Quote from: Antechinus on April 16, 2010, 07:57:12 PM
What are you saving the image as? If you are using a png-24 or png-32 then the corners will have a sort of grey background in IE6. If you use a standard png-8 straight from Photoshop then the corners will be slightly jaggy in IE6.

I tried transparent (instead of white) matte layers with 256 colors (8-bit) png image. OK, now I noticed the slight difference in IE6, but it doesn't look that bad. I would prefer this instead of those white corners even in IE6. I don't think it's worth having those white corners just for IE6 compatibility.

Thank you Antechinus.

Antechinus

Phat B4t, there is a basic psd in the first post of this thread.

anto74

#257
What is the best way for save main_block.psd to original 9-10Kb .png file?
I have one problem in this...the only way for to have 10-11 kb png file is choice 64 colours instead of 256...but the look is not nice

Thanks!
Antonio

Antechinus

It's been a while but from memory I used a restricted palette (less than 256 colours) and ran the exported image through PNGGauntlet for extra compression.

anto74

Quote from: Antechinus on April 21, 2010, 04:10:11 AM
It's been a while but from memory I used a restricted palette (less than 256 colours) and ran the exported image through PNGGauntlet for extra compression.
Ok, thanks :-)
Antonio

Advertisement: