Cool, you fixed all my issues. Great to hear however i have updated to 5.0.1 so i won't get stuck in the 5.1 update. So I don't have my iPhone 4 jailbreaked. Well there should be a lot of other people who are able to test it out for you

And I must say BRAVO on that compass icon. Every detail is fantastically well executed. Did you figure out if you will have to pay to get the complete icon template?

Holy crap, that's probably one of the best looking Compass icon i've seen! Great work.

Thank you guys very much! That was one of the first "real" icons I've made completely from scratch (not including icons I've contributed to other themes) and has inspired me to make my own theme once I'm done with Teneo. However, it will probably be a while away because I'm going to be swamped in the next few months.

Christian, thank you. I'm very glad that I took your criticism and doubled my efforts, it was worth it. As for the paid template, I *may* work out some sort of donation system for the PSD, or I may release the full one so that there's nothing holding back the community from making quality icons. In any case I have to talk to Mahmoud first.

Also, how do you all feel about the changes to these icons?

Its a good idea to release the full psd. Then there shouldn't be so many copy and past icons out there for this theme.

I like the changes to the camera icon. You have lightened up the blue at little to make it stand out more right? Looks better. As for the other two icons I can't see any changes. What have you changed?

(i tried to but couldn't )

Thanks for putting together that comparison; I probably should have done that in the first place. I slapped on a few adjustment layers on Safari, turned up the contrast a little bit, and increased opacity on the world map in the background. Same goes for Calendar, making the colors more vibrant. This is in regard to someone's comment that the colors look too bland on these icons.

@mcd

Fix the border radius on the Safari icon. And watch for this in general. It catches a lot of designers.



If you refer to the example above, you'll see how border radius is calculated. It has to be a multiple of the each radius. You can see that I've used a 22px radius on the outer border, and then dropped down 4px on the horizontal plane, so I dropped the radius accordingly (6px on the second border radius, 4px on the inner most radius).

You'll also see that I took a 6px drop on the 2nd radius and then a 4px drop on the most inner radius (no I can count). Some designers feel that an equal drop gives you a "fat" corner, so they factor in the additional padding you get from the rounded corner (I saw somewhere, I think Adam Betts' site, where these calculations where posted). I'll leave it up to you on what you prefer. For me, I like the 6px drop, but use both depending on what I'm doing with the border.

So if you are dropping the horizontal portion of the icon by 6px/4px, then your inner border radius should also respect this value.

This way, you'll get clean, fluid lines that don't "pinch" the corners (like in your Safari icon). And don't use Ps's default "contract" and "expand" selection shortcuts, they butcher pixels.

William, if it weren't enough that you were an amazing artist, your critique is by and large some of the best I've seen on this forum. The effort you put into helping other artists is really an awesome thing - thank you.

I *think* that I fixed the border on Safari. I also agree wholeheartedly about the pinched corners; at the time of my upscaling it, however, I left it as it was because I figured maybe that's the way Saleh wanted it. But I see now that it definitely needed improvement.

So the base corner radius is 20px...the inner frame drops by 6 px, so I used a 14px radius on that path, and the innermost frame drops 4 px more, so I put a 10px radius on that. I tried cutting the second path by an additional 2px, but it was too sharp. Also, I fine-tuned the colors a bit more, added a slight glow on the world map outline, and removed a weird blue stroke on the frame border that seemed to serve no purpose.



I plan on going through all icons that have borders and making sure they follow this guideline. Also, I've never even heard of the "contract/expand" shortcuts, so no worries there. I'm actually really insane about my paths and always make sure they are as goddamn precise as they can possibly be. It's time consuming but necessary, I think.

Thanks again for the explanation on how the corner radius should work, I was sort of just eye-balling it before.

The corners on that Safari icon are a vast improvement. Good work

@mcd, Thanks for the kind words

The updated icon looks great! Even such a small change really gives it a polished veneer. These things may seem minor, but they really do separate the "casual Photoshopper" from the die-hard artist :thumbsup:

And here's Adam's post. I was wrong, he didn't have an algorithm, but just adopted the same strategy as me (it should be smaller). He used the same 6px drop. The algorithm was posted by a commenter:

innerRadius = (outerRadius-innerRectWidth)/2
or
innerRadius = outerRadius – outerStrokeWidth

I don't conceptualize things that way, but for those hardcore logisticians, there is always that

Lokheed wrote:@mcd, Thanks for the kind words

The updated icon looks great! Even such a small change really gives it a polished veneer. These things may seem minor, but they really do separate the "casual Photoshopper" from the die-hard artist :thumbsup:

And here's Adam's post. I was wrong, he didn't have an algorithm, but just adopted the same strategy as me (it should be smaller). He used the same 6px drop. The algorithm was posted by a commenter:

innerRadius = (outerRadius-innerRectWidth)/2
or
innerRadius = outerRadius – outerStrokeWidth

I don't conceptualize things that way, but for those hardcore logisticians, there is always that

I'm not too sure if I get the formulas...but I'm understanding you correctly in that the distance between the two paths is the amount that the inner path's radius should be reduced? i.e. if the frame path is 10px away from the base, it's corner radius should be 10px (or some multiple of 20) smaller than the base?

By popular request (read: one person asked me about this, so I decided to make them happy ) I made some switcher tray iPod controls. What do you think?



For the life of me, I don't know why the drop shadow on the Previous button looks stronger than on the Next button because they're the exact same style, just a flipped path and reversed angles, but I'll fix it later.
Last but not least, I've been working on stuff all day so expect a beta update tomorrow.

Good work, but I think that the portrait orientation lock icon could use with a little more shadow or something? It looks a bit flat. Oh and you may want to move that icon down a notch. It isn't level with the icon on the right as demonstrated by the screenshow below.

http://d.pr/tlJC

Thanks for making the iPod controls buttons. They looks great. That rotation lock looks like the above comment flat to me too. Try a slightly bevel and emboss maybe. And a little shadow.

@mcd

It's tricky. I don't think you can quantify it as neatly as the algorithm above. I go by equal reduction based on the horizontal plane and then subtract 2px (which is what would be added if you added a border on the inner frame). For fine pixel work, it may be okay to use an equal drop, like the inner most border radius in my example (the 4px horizontal plane drop and the equal 4px border radius deduction). For larger work, you may have to take off more than the border (the 2px). Shading and gradients also add another dimension.

The thing is, sometimes visual elements interfere with these "exact" values, and you'll have to forgo them altogether. Gradients, colors, bevels, etc. may all play a roll in how things look. You can align an image within an image to pixel perfection, but a gradient or a bevel could give the illusion of a mis-alignment. Hard and fast rules are the foundation of design, but sometimes you have to bend them; other times, break them entirely.

For the work you are doing, I think an equal drop in radius that matches the horizontal plane, minus 2px, will work almost every time. You'll have nice, equal corners (avoid pinching or bubbling).

As for the button shadow, it is indeed off (the back button being thicker than the forward button).

@Lokheed

Ah, I get it now. I didn't make the connection between the corner radius and the layer effects on the path. Yes, I'm becoming very familiar with the whole "should *technically* look perfect yet looks like crap in execution" concept, haha. I will keep this in mind for future icons and elements, thanks again!

So I think I've fixed all the issues raised up after my last preview, as seen here -


It turned out that I messed up on the drop shadow angle after all (should have been 45 degrees). And apparently, the canvas for the rotation icon is not standard. Even though it matches all the other templates, it needs to be moved down 2px to match on the phone. I also made some changes to the icon...hopefully you like those. I'm going to finish a few other things and release all this to you guys, so sit tight.

EDIT: Alright, here's my progress thus far. All that remains now is checking a concern raised about icons being too short or too tall, some icon-specific fixes, bundling it all up, and finalizing the templates.

Changelog:
Teneo HD beta v1.2
---------------------------------------------------------------------
- Made some minor changes to Compass icon (brightened gloss, made all paths pixel-perfect, cleaned up template, etc)
- Fixed crappy letters on Contacts and Facebook icons
- Fixed corner radii on Safari frame, adjusted colors, made world map overlay more pronounced
- Made colors on Camera and Calendar more vibrant
- Made carbon fiber texture on Rotation Lock/Unlock icons more visible, fixed bad frame path, added masks on noise layer to make texture clearer, added inner shadow and bevel, fixed icon positioning
- Added folder icon (same as Rotation sans glyphs (for now))
- Re-made Notification Badge (needs more testing)
- Added play/back/forward buttons for Switcher Tray, fixed weird drop shadow bug
- Brightened EQ display colors on Beatmaker icon

Click to download

Finally, I spoke with Mahmoud about the idea of a paid template, and he is more than willing to let me charge a few bucks for the FULL (as in, every single icon/element I've made) PSD as a donation, available to those artists who are serious about contributing icons and would benefit from the additional resources. I'll talk more about that later on though. Enjoy!

murdercitydevil wrote:@Lokheed

Ah, I get it now. I didn't make the connection between the corner radius and the layer effects on the path. Yes, I'm becoming very familiar with the whole "should *technically* look perfect yet looks like crap in execution" concept, haha. I will keep this in mind for future icons and elements, thanks again!

So I think I've fixed all the issues raised up after my last preview, as seen here -
http://cl.ly/3p1w0M3j3D0W211b1X3h/osanetuhoae.png

It turned out that I messed up on the drop shadow angle after all (should have been 45 degrees). And apparently, the canvas for the rotation icon is not standard. Even though it matches all the other templates, it needs to be moved down 2px to match on the phone. I also made some changes to the icon...hopefully you like those. I'm going to finish a few other things and release all this to you guys, so sit tight.

EDIT: Alright, here's my progress thus far. All that remains now is checking a concern raised about icons being too short or too tall, some icon-specific fixes, bundling it all up, and finalizing the templates.

Changelog:
Teneo HD beta v1.2
---------------------------------------------------------------------
- Made some minor changes to Compass icon (brightened gloss, made all paths pixel-perfect, cleaned up template, etc)
- Fixed crappy letters on Contacts and Facebook icons
- Fixed corner radii on Safari frame, adjusted colors, made world map overlay more pronounced
- Made colors on Camera and Calendar more vibrant
- Made carbon fiber texture on Rotation Lock/Unlock icons more visible, fixed bad frame path, added masks on noise layer to make texture clearer, added inner shadow and bevel, fixed icon positioning
- Added folder icon (same as Rotation sans glyphs (for now))
- Re-made Notification Badge (needs more testing)
- Added play/back/forward buttons for Switcher Tray, fixed weird drop shadow bug
- Brightened EQ display colors on Beatmaker icon

Click to download

Finally, I spoke with Mahmoud about the idea of a paid template, and he is more than willing to let me charge a few bucks for the FULL (as in, every single icon/element I've made) PSD as a donation, available to those artists who are serious about contributing icons and would benefit from the additional resources. I'll talk more about that later on though. Enjoy!

Look amazing as per. I've upgraded to the 4S so i'm screwed until a JB is released, Grrr!
Great work though

Haha sucks man, hopefully pod2g will be quick to spread his efforts to the 4S...but on the upside this theme will most likely be waiting for you when it does arrive

So as far as I can tell, we're down to zero hour and the theme should be out by the end of this week (Christmas). I'm planning on spending time tomorrow and Wednesday with this, and if that isn't enough time, I may pull an all-nighter and get it all wrapped up. Today I spent some time on a Notes alt (I'm also planning on an alt for Calendar, and *maybe* a Tweetbot icon) and tried my skills at a page curl, but something about it just doesn't look right. Can someone help me point out what it is?

The thing I notice the most is that the curl is too round.
Look here for example:

Its much more of a strait line here with the curves at the edges.

Also pod2g posted an update on his blog... He's successfully cracked the 4S iOS 5 Untether. All thats left is some polishing up and stability double checking.
Got my fingers crossed to have this theme installed on my jailbroken 4S before years end!

The curl has to be curved though...because the corners of the icon are curved. It doesn't make sense to have a pointed edge when the icon base is rounded. I mean, yes, it's implied that the paper has 90 degree corners (which are invisible because it's clipped inside an icon base), but it doesn't look right when you imagine the sharp corner being folded back flat.

Sorry, I wasn't specific enough... I meant this part:

Regardless of whether the page corner is rounded or not, the actual page fold will look the same.

Page curl: The toughest thing to get right. And if you don't get it exactly right, it drags your entire work down with it. Aside from the fold (TB is spot on, you can't have a curl on the fold, it has to be straight, just simple physics), the lines are also way off. That part certainly needs work.

On a side note, page folds are extremely hard to pull off with such a limited space. They really do much better on bigger elements (read: higher resolution stuff).

@thebassment - you're absolutely right, I don't know why that didn't jump out at me

Lokheed wrote:Page curl: The toughest thing to get right. And if you don't get it exactly right, it drags your entire work down with it.

Yeah, I'm quickly learning this fact and I think I may scrap it just because there are more important things to do ATM and I obviously need some more practice. Here's what I ended up making, but like I said, this won't be the finished product. For my next theme, I'll be sure to get this right.



By the way, William, it turns out that unfortunately Dribbble doesn't give everyone invites automatically. I guess due to their own limitations they're only able to send them out periodically to existing members. That said, if you don't find someone to invite you (hard to believe) I'll be happy to give you my invite when I get one.

I would really appreciate you making a tweetbot icon :thumbsup:
But only if you have the time ofc.

@murdercitydevil - That looks much better :thumbsup:

thebassment wrote:@murdercitydevil - That looks much better :thumbsup:

Thanks...I spent some more time today messing around with the curl but I'm getting tired of it so I'll leave it as is -



You're all free to use it if you want, but I won't be releasing it in the final theme (unless everyone agrees that it's good enough to be included). It will be the same icon minus the page curl.

@mcd, It actually looks much better now. Great job, especially on the lines! :thumbsup:

PS: I got an invite from the guys that run dribble actually (just tweeted them and they fired one off). But thanks for looking into it.