[Toyin]

I'm starting to work on my own theme. I'm having a real hard time with anything other than right angles. Anytime I use curves or circles the transparent image always has a few black dots around it like this.



I use photoshop to create the images and use the following process to get the alpha channel.

-Place all the buttons on one layer
-Select All
-Copy and paste the exact duplicate of the buttons on another layer
-Set saturation to zero, brightness to maximum and contrast to minimum (creating complete white images of the buttons)
-For the transparent layer I usually select only the appropriate alpha channels and change the brightness to the appropriate grey.
-Multiply the alpha channel layer.
-Combine all images and copy and paste it back into Themepark.

This works perfectly for objects with sharp angles but not rounded objects.

What am I doing wrong?

[mrtew]

Originally posted by Toyin:
I'm starting to work on my own theme. I'm having a real hard time with anything other than right angles. Anytime I use curves or circles the transparent image always has a few black dots around it like this... What am I doing wrong?

Yeah, that's a big big problem! It's very difficult to get the alpha and the actual image lined up perfectly and if there is a secret then I don't know it. I just play around with the edges on both until they line up perfectly and you don't see any dots. You can try doing all the rounding with the alpha, and making the actual image totally square... that's how Apple does the metal windows. The gradient and the texture are both big square images that are 'shaped' by the alpha masks.

[Beer Penguin]

I'm glad to see this topic. Where the hell are the finder toolbar buttons located? Y'know, for list/column/icon view, and back and forward?

[Beer Penguin]

And as far as the topic question, I would suggest just to make the widgets square, and just include the background color, instead of trying to do the widgets by themselves and then the background of the widgets seperately.

[bbxstudio]

This is easy =) You have to 'pre-multiply' all masks. Here's what I do:

1. Create the element in Photoshop, utilizing transparency.

2. Merge everything you want visible to a single layer.

3. Create 2 rectangular regions (size determined by the resource you're replacing) - one each for the artwork and its 8-bit mask... fill these with black.

4. Position your artwork layer over its corresponding black region (it's still floating on its own layer).

5. Create an accurate mask selection by command-clicking the artwork layer (thus converting transparency to a selection). Drag your resulting selection with any selection tool to its exact corresponding spot in the rectangular mask region - then fill your mask area with white. You now have 2 aligned regions with black backgrounds - one contains the artwork, the other the mask.

6. Now make sure your mask region is merged (the white mask and its rectangular outer black area merged into a single layer).

7. Duplicate this layer, move it up so that it's above the artwork layer and position it exactly so that it's aligned directly over top. Make this layer's apply mode Multiply.

That's it... as long as everything lines up from artwork to mask and you've multiplied the mask over the artwork you should have no problems.

Hope this helps Works for me every time no matter what the shape. When I adjust overall transparency for disabled states, I Multiply a solid black fill (at whatever negative transparency over the entire disabled mask, then merge-duplicate-position-Multiply as above... playing with levels or curves on the disabled mask might cause problems if the resulting ramp manipulation isn't linear (but shouldn't make a difference if the resulting mask is multiplied over the artwork).

[CarbonG4]

originally posted by Beer Penguin:
I'm glad to see this topic. Where the hell are the finder toolbar buttons located? Y'know, for list/column/icon view, and back and forward?

Those resources are not in the Extras.rsrc file -- they're in the Localized.rsrc file. The newest build of ThemePark released added support for editing the Localized file so you won't need to use ResEdit anymore, w00t.

Hope this helps.
::carbon::

[Beer Penguin]

Originally posted by CarbonG4:
Those resources are not in the Extras.rsrc file -- they're in the Localized.rsrc file. The newest build of ThemePark released added support for editing the Localized file so you won't need to use ResEdit anymore, w00t.

Hope this helps.
::carbon::

Cool. I was wondering why all themes included a localized.rsrc, yet themepark didn't show any resources to edit. Thanks.

[Toyin]

Originally posted by bbxstudio:
This is easy =) You have to 'pre-multiply' all masks. Here's what I do:

1. Create the element in Photoshop, utilizing transparency.

2. Merge everything you want visible to a single layer.

3. Create 2 rectangular regions (size determined by the resource you're replacing) - one each for the artwork and its 8-bit mask... fill these with black.

4. Position your artwork layer over its corresponding black region (it's still floating on its own layer).

5. Create an accurate mask selection by command-clicking the artwork layer (thus converting transparency to a selection). Drag your resulting selection with any selection tool to its exact corresponding spot in the rectangular mask region - then fill your mask area with white. You now have 2 aligned regions with black backgrounds - one contains the artwork, the other the mask.

6. Now make sure your mask region is merged (the white mask and its rectangular outer black area merged into a single layer).

7. Duplicate this layer, move it up so that it's above the artwork layer and position it exactly so that it's aligned directly over top. Make this layer's apply mode Multiply.

That's it... as long as everything lines up from artwork to mask and you've multiplied the mask over the artwork you should have no problems.

Hope this helps Works for me every time no matter what the shape. When I adjust overall transparency for disabled states, I Multiply a solid black fill (at whatever negative transparency over the entire disabled mask, then merge-duplicate-position-Multiply as above... playing with levels or curves on the disabled mask might cause problems if the resulting ramp manipulation isn't linear (but shouldn't make a difference if the resulting mask is multiplied over the artwork).

Thank you, Thank you, Thank you! The 1st attempt worked much better than my methods.

Also thanks Mr.Tew. Your solution worked as well but still required some manipulation to work well.

[swiz]

The method I use is easier in practice, its a matter of hitting about 7 key commands.

Firstly, download this file and when in Photoshop, goto the actions a pallette and choose, "Load Actions". Load this action.

http://swizcore.com/SS/themes/MakeItWidget.atn.sit

Create
1.Create your artwork merged into a layer with no background.

Widget placement test
2.Copy it and paste it once to assure it pastes directly centered on the first layer. If it does, delete it, the test has passed. If it doesnt move the original layer to the exact location that the pasted layer is located. Regardless, when your artworks location is set, delete the duplicated layer.

MakeItWidget
3.Be sure the action is loaded! Press F1 on your keyboard.

4. Make sure your back ground is black. Copy merged (command+shift+c) the top and bottom layer. This is your widget.

Get your mask
5. Turn visibility off on the top layer. Make the middle layer visible. Command click on it. Now make sure the background color for the pallette (NOT the actual background of the document) is white; hit Command+delete. Copy merged the middle and bottom layers. This is your mask.

6.Premultiply
Get Premultiplier from Phoenix Software here:
http://users.wpi.edu/~phoenix/software/premult.sit
Paste your widget into the image well and your mask into the mask well. Your completed widget is automatically copied to the clipboard for transfer to Themepark or whatever your poison.

Advanced
For the inactive widgets, just turn down the opacity on your mask before going to Premultiplier. And if you want to get into advanced stuff like drop shadow masks you need to create your alpha mask as noted above and then add your shadows and effects to the alpha mask of Themepark. NO premultiplication is necessary for the mask itself, just the widget so you can just copy the "effected" mask into Themepark. But you must premultiply the widget with no effects on the mask.

Thats it.

I hope that this opens doors for a lot of people who just didnt know how to do this other than making square edged only themes.

[Synotic]

Has premultiplier gotten any better? Last time I tried it.. it was buggy as hell. I also had a website with illustrations of doing this... it might make it easier... Maybe I'll salvage it and post it here

[swiz]

Originally posted by Synotic:
Has premultiplier gotten any better? Last time I tried it.. it was buggy as hell. I also had a website with illustrations of doing this... it might make it easier... Maybe I'll salvage it and post it here

I havent ever had any problems with it that i couldnt track down to me just going a bit too fast.

[Synotic]

Originally posted by swiz:
I havent ever had any problems with it that i couldnt track down to me just going a bit too fast.

It crashed a lot for me... perhaps it has been updated... Anyways here is the page http://homepage.mac.com/estebanuribe...remultiplying/

[Adam Betts]

Originally posted by Synotic:
It crashed a lot for me... perhaps it has been updated... Anyways here is the page http://homepage.mac.com/estebanuribe...remultiplying/

Hey, thanks for the tutorial! I've never understood the premultiplying process before but with your tutorial, now I can do it the easiest way.

Thanks again

[Toyin]

Thanks Swiz. That method works as well. Now I need some basic art tips. (Background : I use photoshop mostly for fantasy/superhero artwork. Vector graphics and neat shapes are not my forte).

Curves look fine with the larger graphic elements (ie buttons). But why do the curved shapes look like such crap on the widgets?




The curves look so pixelated. I've tried using the Ellipse select tool + paint bucket and the Ellispse drawing tool. All are set to use anti-aliasing, but the images still look like crap.

Are you guys using a vector drawing tools or do I just need some more lessons with Photoshop?

[Adam Betts]

Originally posted by Toyin:
Curves look fine with the larger graphic elements (ie buttons). But why do the curved shapes look like such crap on the widgets?

http://www.toyinfayemi.com/theme2.jpg

The curves look so pixelated. I've tried using the Ellipse select tool + paint bucket and the Ellispse drawing tool. All are set to use anti-aliasing, but the images still look like crap.

Are you guys using a vector drawing tools or do I just need some more lessons with Photoshop?

I'm unable to produce a smooth curve with Ellipse selection tool even though the anti-alias is turned on. I gave up and used vector ellipse instead. It is included in Photoshop (I dunno if PS 6.0 and before have it too). A problem with Vector Ellipse Tool is that you are unable to make all curve equally in pixel. Some curve corner will have more pixels than other curve corner. Some is smoother while other is kinda pixelated but at least it's better than Ellipse Selection tool

My only way to make all corner equally is to cut the other 3/4 then copy/paste and flip horizontally, copy/paste again and flip vertically.

If I'm not explaining clearly, let me know.

I hope PS 8.0 will fix the pixelated problem with selection tool.

[bOOzo]

I've never had any porblems with jagged edges, but I don't use any of the methods here. I still use sprocket and when I make widgets I copy them from my mockup, place them in a psd file. And to make the alpha channel I duplicate the image and fill it with white. When I copy it, I have a action on F12 that index the colors and copy it for me, then I just paste it into sprocket. That simple.

[headbirth]

would it help to produce it at a larger size and then reduce it to the correct size when your finnished? The resampling might give you a smoother edge.