[WICKEDfour]

I was looking through iTunes.rsrc, and now I find myself beginning to make a theme to match iTunes' gray buttoned, brushed metal, plastic-buttoned, and LCD-inspired design. I started converting the large "buy now" buttons from the iTMS for use in a theme already. Ideally, I would use most of iTunes' resources as guidelines and make a theme fairly similar to Max Rudberg's Brushed, but slightly different in some way. [Addition] Primarily by making some things more LCD-like, perhaps by having gray/LCD looking aqua windows.

I ran into this problem. I copied the button mask of the caps directly from iTunes' mask for the button and inverted it for use as the transparency area, and it looks great in ThemePark's composite view...

However, when I previewed the theme, the caps mask looks horrible, kind of like this:

(This is in the Cocoa preview, Carbon had the same problem but looked too messed up at the moment because I haven't added correctly sized resources yet.)
Interestingly enough, when I changed the Cocoa window's background "pattern" to solid grey, it looked like this:

Anyway, theme dudes, any ideas? I'll also post this screenshot of my image resources in ThemePark (In PNG quality in case someone wants to grab my resources from the screenshot in full quality):

Anyway, I think this could be a cool theme, so I'd really appreciate some help .

[swiz]

iTunes probably just does something different to display its graphics than the system does with its Extras.rsrc resources.
Probably just a better idea to recreate them manually since you'll need to do that for most of the theme anyway. at least that way you'll retain the consistency.

[Sage]

Yeah, that would probably be a good idea, especially since those buttons look fairly easy to reproduce... They just look like rounded rectangles with a dark gray stroke and a gradient fill (and a dropshadow, of course).

I eagerly await this theme.

[smeger]

This is probably a premultiplication issue. Try ImagePreUnMultiplier.

[WICKEDfour]

Originally posted by smeger:
This is probably a premultiplication issue. Try ImagePreUnMultiplier.

I tried to open the transparency area and the mask with it...I couldn't because both images obviously don't contain transparency.

I could redo the buttons, and I most likely will since the size of these "large" buttons are closer to the size of the small/mini buttons. I will also be redoing the progress bars eventually. However, I am going to try to use the resources that exist in iTunes already as much as possible to preserve consistency.

Anyway, I have to go now, I'll talk some more later .

[WICKEDfour]

Well, now I have widgets...
[Updated: See newer post.]
I know the maximize button sucks...I made a path of the X and rotated it 45 degrees. I'll try something else.
The aqua titlebar will be LCD green/beige. Here's the active titlebar:

This also includes metal tabs that are actually in the system. They look a little out of place, as do the metal buttons, so now I'm thinking that I should make everything else either "pixelated" (no smooth corners, outline, and a 1 pixel drop shadow) like the iTunes progress bar or minimalistic (smooth corners, unlike "pixelated") like the widgets are. Any idea of which would be better? Also, what do you think of the titlebar (it's just a tinted version of Apple's)

[Addition: This may not be smart, but I'm not mocking up anything; all of these are screenshots of the "working" theme.]

[WICKEDfour]

Well, I think I've decided to make this an LCD-looking theme instead of hybrid metal/LCD, mainly because the swirl tabs and the metal buttons don't seem to go great with the LCD idea. Actually, I could do a hybrid variant; that'd be okay. For now, I think a minimalist LCD-style theme is the top priority. What do you think, Theme Dudes�?

[mac15]

the itunes buttons don't fit in with the widgets you have, the buttons draw you away from the widgets so that has to be changed. It has to flow from one to another.

I think the widgets need a black border and for your buttons use simple black lines boxes , and that might apply for tabs too. Keep going and throw up some more mockups so we can all take a peak.

[WICKEDfour]

Another idea popped into my head for another eventual variant:

Glossy LCD, kind of the look that some Konfabulator widgets have (like the clock, for example).

As I said above, my primary concern is getting the minimalist LCD design completed first before going for the metal/LCD hybrid and the glossy LCD design.

[mac15]

awesome idea, thats a step away from minimlaist but I think it'll work. Keep going at it

[n8x]

The minimalist idea is awesome! I'd love to see buttons to match those widgets. With shapeshifter you can change the button text color, no?

[WICKEDfour]

What to do here...
As I have it, the inactive widgets of an active window are the same as the "disabled" widgets of an inactive window:
[Updated: See newer post; not a problem anymore.]
[Note that the inactive window's fill should be LCD green/beige; Sorry about my inconsistencies, I'm a newbie themer ]
In my opinion, this could be too confusing. Could a clearer titlebar distinction (darker when active?) make up for this?

[WICKEDfour]

Hmm, more n00b theme help
I made the progress bars (only the small kind for now) from the iTunes progress bars. However, I am having some problems with the Indeterminate progress bar fill.
[Updated: Look was wrong; animation fixed. See newer post.]
As you can see here in the Cocoa theme preview, the normal progress bar looks fine, but the indeterminate p. bar's fill goes either past the "right" progress bar cap or is overlapping it somehow.
[Updated: Fixed. See newer post.]
In the Carbon theme preview, the cap overlap problem is also present, but the bottom of the progress bar fill is "out of sync" for lack of a better way to describe it.
[Update: The 2nd problem with the Carbon progress bar was totally my fault . Fixed for now...]

The problem with the cap overlap could be my cap image; can it be made wider than 4 pixels?

[WICKEDfour]

Originally posted by n8x:
The minimalist idea is awesome! I'd love to see buttons to match those widgets. With shapeshifter you can change the button text color, no?

Oh yeah, definitely, that's a given .
While I'm here, I'll note that I changed the maximize widget to an arrow pointing up. It looks alright, not sure what else I can do because putting a plus in there looks kind of odd any way you try it.

[bOOzo]

Originally posted by WICKEDfour:
Hmm, more n00b theme help
I made the progress bars (only the small kind for now) from the iTunes progress bars. However, I am having some problems with the Indeterminate progress bar fill.

As you can see here in the Cocoa theme preview, the normal progress bar looks fine, but the indeterminate p. bar's fill goes either past the "right" progress bar cap or is overlapping it somehow.

In the Carbon theme preview, the cap overlap problem is also present, but the bottom of the progress bar fill is "out of sync" for lack of a better way to describe it.
[Update: The 2nd problem with the Carbon progress bar was totally my fault . Fixed for now...]

The problem with the cap overlap could be my cap image; can it be made wider than 4 pixels?

I believe the overlap of the right edge is a bug in the theme previews. It should be fine in regular apps. At least that's what I think. If you posted the endcap pxm I could figure it out.

The "out of sync" problem in Carbon apps you are seeing has to do with all the frames that a ind. progressbar consists of.

Cocoa apps simply take the first frame, and animate it moving to the right.

Carbon apps display all these frames in a loop and it puts together the complete ind. progressbars by placing animations after each other.

So what you need to do to make it look consistent is take a 16 pixels wide image and animate that moving to the right, one pixel at a time.

For the large ind prog you make a 32 pixel wide image and do the same. The large one is really annoying because it consists of 32 frames.. It's a good idea to make a action script if it you have to do it more than once. I actually have one, not sure if it's good enough to post though.

So, in carbon apps you can animate progressbars anyway you like, but Cocoa apps always animate the first frame moving to the right.

Hope that helps.

[OwlBoy]

Originally posted by n8x:
The minimalist idea is awesome! I'd love to see buttons to match those widgets. With shapeshifter you can change the button text color, no?
__________________

Off-topic:

Bwhahahah that sig rocks.

On-topic:

This theme is looking quite nifty

-Owl

[WICKEDfour]

Originally posted by bOOzo:
I believe the overlap of the right edge is a bug in the theme previews. It should be fine in regular apps. At least that's what I think. If you posted the endcap pxm I could figure it out.

Okay, I'll PM you with the endcap pxm when I get home. If what you say is true, it shouldn't be a problem though. I actually did make the progress bar endcap pxm longer than 4 pixels, but it looks exactly the same as the 4 pixel wide one I had before.

Originally posted by bOOzo:
Cocoa apps simply take the first frame, and animate it moving to the right.

Carbon apps display all these frames in a loop and it puts together the complete ind. progressbars by placing animations after each other.

I noticed this when I tried to slow down the animation of the progress bar (like it is in iTunes), needless to say I can't do it because Cocoa animates the 1st resource, as you said. I could, but that would be inconsistent.

Originally posted by bOOzo:
So what you need to do to make it look consistent is take a 16 pixels wide image and animate that moving to the right, one pixel at a time.

I actually did this , but I messed up when I was making it , hence the jagged bottom edge area of the fill.

Thanks for the help Max! As to the rest of the theme, I'm going to try to work on it later today and post some more screenshots. Also, if you few that are interested in this theme would be inclined to do so, I will post 2 versions of the buttons I have in mind (one being "minimalistic" and the other being "pixelated") so that you could vote on which style is worth doing for the remaining elements first. I say first because there are plenty of opportunities for variants of this theme, but I want to get one of them done! As to my kind of annoying (if I wasn't me) updates on little parts of this theme, I think I'm almost done with extremely trivial newbie themer questions. I'll probably make a screenshot of it with all the latest elements from time to time and remove previous screenshots I had in older posts.

[TheDisaster]

I'd also like to see the button samples you can cook up, looking good so far.

[WICKEDfour]

Say no more, TheDisaster . Here ya go:
[Removed, see next post for newer image.]
For the default button, imagine that fading between the active push button's color and the black-ish (not quite true black) color is is in the screenshot.
This is actually a mockup from a screenshot; I can't see the text color changes with ThemePark's preview. The text looks a little off-center, so I think I will make the button 2px or so shorter on the bottom (vertical size).

I'm having problems with the Carbon buttons:
[Updated: Fixed. For the curious, the button resources have to be the same size as the system's resources. See newer post.] I have all of the large button resources in place, so what's causing this? Should the resource images be a certain size?

[WICKEDfour]

I refined the push buttons, you can see the animation here:

[NetworkShadow]

Originally posted by WICKEDfour:
I refined the push buttons, you can see the animation here:

Looking intersting. Not my foarorite color, I know that would be something I'd hack iTunes and change the color of. I think the minimal LCD look is cool though.

[swiz]

Yeah the minimalist LCD look is cool. I think you should stick to your current course though and not really ask for more suggestions until your done with the first publicly available release. Otherwise inconsistency with many different ideas may come into play. Stick to your guns and it should be pretty hot. Dont go too consistent though, it will need some stuff to give it a little "pop". But there I go insisting on a suggestion. ah welll.

[G0Ducks]

Originally posted by WICKEDfour:
I refined the push buttons, you can see the animation here:

OMFJJOAPS!
This theme is coming along quite well. I am totally stoked to see it happen. When released, I am going to modify my icons (posted in the screenshot forum) to go with this theme. I think they would look 5w334z0r!

Thanks for your work!

R

[bOOzo]

It looks cool!
I think the progressbars should have the gradient that iTunes has, the rest should be flat like you are doing.

Are you still having problem with Carbon push buttons? Jaguar or Panther?
It's important to stick to the sam sizes as Aqua.

[mac15]

just how is the theme coming along now, this is looking to be a good theme.

[WICKEDfour]

Sorry for the lack of updates, I was following Mr. Swiz's advice
I'll post a screenshot when I get home, but here's a list of what's been finished, what's in the process of being finished, and big things that still need to be done:

Finished Stuff

• *NEW* Large Widgets (They're bigger and have - and + instead of arrows)
• Small Widgets
• "Chiclet" Tabs (Large only)
• Large Round Buttons (Like the old round security button)
• All Progress Bars (Carbon animation frames finally present, thanks Max! I had to cheat a little because transparent progress bar fill doesn't work )
• All Checkboxes (Ooh, they're so cool!)
• Metal Windows

Stuff In Progress or Help!

• Titlebars (I'm done with the masking problems, but I need a better way to distinguish an active titlebar from an inactive titlebar; when I tried transparency, the caps and the fill, both taken from the same original image in Photoshop, seemed to differ in transparency)
• Inactive states (With the segment tabs, I preserved the 3 states - "Inactive", not disabled, click, and active. The problem is that an inactive tab and a disabled tab would look exactly the same. I didn't do "3 state behavior" with other elements, like the round buttons [a.k.a. With toggle widgets, the clicked state looks the same as the "on" state]. I was thinking that I can make inactive states a simple outline so that there's less confusion with 3 state elements.)
• Drawers (I took the border out, but they were really boring, so I'll have to think of something else.)
• Text Colors (I'm having a really hard time with these. I want control text to be the same color as the window background so that the text looks "cut out" of the buttons, but then you can't see control text that's not inside a button . This still requires a lot of tweaking until I get it right.

Elements that still need to be finished

• Radio Buttons
• Smallest Widgets
• Menu Bar and Menus
• Small Push Buttons
• Small Round Buttons
• Metal Buttons
• Scroll Bars
• Finder.rsrc
• Countless other little things like arrows, etc. (Small, but important!)

Oh yeah, I have a spiffy name for it too:
Digital Device[/fanfare]
Anyway, it's kind of far away from completion, but I think I'll have a lot of time to work on it over Winter Break.

Comments are welcome and greatly appreciated!

[iNeusch]

Originally posted by WICKEDfour:
I'll post a screenshot when I get home

Yay !!!

[WICKEDfour]

Ack! Took me long enough... [Note: I Photoshopped out the unfinished elements.]

Click Here (Moved so the thread layout isn't messed up)

I have another new idea. It involves kind of a PDA sort of look to the titlebars and metal windows. I'll show you what I mean:

Not sure at the current moment (oh yeah, the corners looks pretty bad too in that shot), but this could make Digital Device a little less boring. Again, there's always the variant option.

Note that none of the in progress elements or the completely unfinished elements lists still apply; I haven't made any updates since I made that list, had to work on other things.

[cloudaj]

wow, looking really nice. I like the darker colored/bolded window outlines, or the idea anyway.

Got an ETA on this theme?

[WICKEDfour]

Originally posted by cloudaj:
Got an ETA on this theme?

I wish I did. I have no idea, but winter break should give me a lot of free time. I have exams this coming week, so it'll be slow during this week, but development will hopefully be whizzing along soon.

[mac15]

looking great, I'll keep annoying you over AIM to get it done

[Sage]

I love the slick borders. Please make it at least a variant.

[smeger]

Wow, I like this a lot!

[fireside]

looks like an awesome theme.

[monkeybrain]

The theme is looking awesome. Nice and minimalist.

My only advice would be to perhaps make the titlebars a slightly darker shade - I think it is important to differentiate them from the non-dragable elements.

[intastella]

Have you thought about a version with a standard Panther style title bar? It might be a good way of "framing" it.

Looking good though.

[Frisbee]

This one looks pretty promising. I always wanted a nice minimalist theme, that wasn't pure white *cough*guipod*cough*. It would be nice if the tabs were the same shape as the buttons.

[def H H H]

Looks great! Good job, man.

[WICKEDfour]

Originally posted by Frisbee:
This one looks pretty promising. I always wanted a nice minimalist theme, that wasn't pure white *cough*guipod*cough*. It would be nice if the tabs were the same shape as the buttons.

To me, the tabs just feel and look like they should be more butted than the buttons. However, I'm totally open to suggestion for the buttons, I just made them round because that's how the Aqua buttons are. I could make them slightly butted like the tabs in that case, what do the rest of you that have taken interest think?

[mrtew]

I really like the way this theme is going too! Very original!!! My only criticism is that the progressbars are too 3-D looking. I think they should just be vertical slashmarks 'printed' on the LCD screen like everything else. Keep up the great work on this theme!

[WICKEDfour]

Originally posted by mrtew:
I really like the way this theme is going too! Very original!!! My only criticism is that the progressbars are too 3-D looking. I think they should just be vertical slashmarks 'printed' on the LCD screen like everything else. Keep up the great work on this theme!

I was thinking of this in the back of my head...
I took the progress bar fills straight from iTunes, but they could easily be replaced with something like that. The pixelated borders that are found in the progress bars seem out of place with the rest of the theme, really, now that its look is more developed.

In other news...I'm having a really hard time with the titlebar, what should it look like? I tried transparency for the inactive, but it didn't look right, so that's out for now. Then I tried making the titlebar black like the PDA frame I was talking about, but that made the widgets (which use transparency to produce their color) just about invisible. I kind of like the idea of having a PDA sort of look to the titlebars and the metal window, but I'm not sure how I should go about it. If you happen to have a mockup/idea mrtew or anyone else for the titlebar, please share (if I like it I'll make sure to give you some credit in the future). One of the main issues that I also want to address is the differentiation between an active titlebar and an inactive titlebar. (Colors or patterns? Bevels?)

Other than that, I have some of the new inactive resources in, which has resulted in lighter buttons, etc. It's not that big of a change, it actually looks better to me, easier on the eyes. I'll post another screenshot (and I'll remove some other screenies to save load time/vertical space) when I get home.

[WICKEDfour]

Oh yeah, I did see the responses to the titlebar problem. A darker shade would definitely help, and I actually tried the standard Panther titlebar (colorized, actually). The Panther titlebar was okay, but it didn't seem to fit well.

In terms of what "fits", basically there's one color (LCD beige) and three shades of gray (that translate into transparency levels) I can use on either a completely filled object, a filled object with a cutout symbol/text on it, or a disabled object that has a 1 pixel border. Of this there's the possible addition of a black/gray color with bevels (?) to simulate a PDA's outer casing, which would be used for the metal window masks and the titlebar.

I made these "guidelines" to keep the theme consistent and therefore quality , so when it's variant time, we'll see about different colors/beveling/etc. By the way, to everyone posting, I love your comments. They're very helpful and remind me to work on the actual theme .

[smeger]

What's wrong with the titlebar in your screenshot a few posts up? I think it's really cool as-is.

[bluevertical]

I love the title bar as you have designed it! Nice and slick and minimal... great job!

[WICKEDfour]

Alright, we'll stick with the titlebar that's there .
What about the inactive titlebar? As I said, I tried a transparent titlebar, but the fill and the caps seemed to have different transparency levels, which drove me insane because they were from the same exact PSD. I'll try it again.

[rhythmicmoose]

This is looking awesome. Can't wait.

[sweatervest]

It looks great! A grey variation (in addition to the green) would be awesome.

[WICKEDfour]

Hey, just wondering, how "dangerous" is it to keep posting these GIFs of the theme? Just curious because I know BBX's 2 second Cel Shaded mockup was stolen before a Mac theme was picked up from the PC version .

Anyway, lighter buttons and outlined inactive elements:

I like the lighter look, as I said earlier it seems easier on the eyes to me. By the way, the clicked state goes straight to black-ish.

[Addition: Here's the OLDER, darker buttons image, so you can compare.]


Oh, just as a review, I'm changing the inactive states to the outline style to allow for 3 state elements (active, clicked, switched on ["sticky"]) and for better distinction between the inactive (disabled) state.

One more thing I was thinking of, I kind of like sharing this pointless stuff about my theme because it seems to be interesting to some people .

Glad you guys like it!

[swiz]

Originally posted by WICKEDfour:
Hey, just wondering, how "dangerous" is it to keep posting these GIFs of the theme? Just curious because I know BBX's 2 second Cel Shaded mockup was stolen before a Mac theme was picked up from the PC version .

Anyway, lighter buttons and outlined inactive elements:

I like the lighter look, as I said earlier it seems easier on the eyes to me. By the way, the clicked state goes straight to black-ish.

[Addition: Here's the OLDER, darker buttons image, so you can compare.]


Oh, just as a review, I'm changing the inactive states to the outline style to allow for 3 state elements (active, clicked, switched on ["sticky"]) and for better distinction between the inactive (disabled) state.

One more thing I was thinking of, I kind of like sharing this pointless stuff about my theme because it seems to be interesting to some people .

Glad you guys like it!

Good change.

[Sage]

The new Inactive push buttons are much better. However, IMO, I think the old Active push buttons were better (more visible, and also matched the close/min/expand widgets).

Excellent job keeping us posted.