$100 contest: convert .psd -> vector (.ai or .eps)

I have a skin for the flash widget made in photoshop, in .psd format.



I need to have this .psd re-made to become scalable, in vector format.

I will provide you with well structured, layered .psd file. I want to get back either .ai or .eps.

The new skin should look exactly the same when it has size 410x336, but it also must look good when scaled to widths of 320 px and 360 px.

To display your work, post here screenshots of the player scaled to the following widths:
1) 410 px - original,
2) 320 px,
3) 360 px,
4) 250px.

All the screenshots must be made of your vector file scaled to the proper size.

You can get the original .psd file here: http://www.actionext.com/Playlist_410x311_with_buttons.opaque.zip

Please make sure that you pay attention to all the transparencies and to the fact that the buttons have two states: regular and hover. Please allso not that there are hidden layers HOVER_VIDEO and OVER in the .psd file.

If you let some elements not to be scalable (this might be play/pause, next/prev, ringtone/download, vdeo preview) - tell so, when you post your screenshots.

I will decide who is the winner of this contest by looks of your screenshots.

I will pay via PayPal, from my old verified business account.

 

Might have a shot at this

 

Please do.

 

well you cant make a single vector, i think you need different versions it ll be unreadable if you keep the same type size and reduce it to the 250 width player.

 

I will give this a go

 

Here is my entry, took awhile to make, all vector except the Rihanna image.

 

Please wait for my entry, or do you think there is a good chance you will pick the entry above?

 

mitcharr, thanks for beautiful work. I'll post comments in about an hour.

V06-TECH, the contest is open. You are welcome to submit your version

The contest will be opened for another 72 hours, or till I get the "perfect" version

 

it should be scaled only in different widths or respective height too ?

 

I agree with phangan. Shouldn't you have us show you bigger versions? As you can see in the entry already posted, the player is no longer readable at such a scale. And vectorizing an image means NOTHING if all you are doing is going smaller. So maybe you should have us show you our entries at higher resolutions then the original file..

 

Guys, thanks for participating in this contest! I think that some clarifications, suggestions and real life examples might be usefull for better understanding of what I need.

Real life example:
This flash widget is a music player for facebook. It looks perfect on facebook walls, since the wall width is bigger than width of the player.
Please have a look yourself:
1) Go to http://www.actionext.com/playlist_81667.html
2) Click facebook button
3) check your fecebook profile, the player will be posted on your wall

It will look like this:
http://www.actionext.com/dp.vector/wall.png

However, when sending the same player in a message, it is restricted in width by feacbook, and looks like this:
http://www.actionext.com/dp.vector/inbox.png

As you can see, facebook restricts the width of the player to 360px; The height is restricted to 295px. This way, the bottom and the right side are not displayed.

There is another situation when facebook restricts the width to even smaller width, 320px.

I need the player to look good in all these three situations.

 

As designers, you might want to decide if you need to vectorize all the player elements or just some of them.

It might be a good idea (or not, you decide) to keep some buttons fixed size and vectorize the rest of the player. It is the result that matters: if you create stretchable, scalable player that looks good at both 411px and 320px width, you'll win.

 

Hmm. I understand that. We will have to keep the size of the text in the play-list constant then. So basically everything else would shrink but everything in the play-list would stay the same (there would simply be less room) correct? otherwise you wont even be able to read the song names, like shown above.

 

Sounds like a great idea.

 

Can the height change? Like do you upload different designs depending on what it will be used for on facebook? Or is it just one file, and the website does the scaling? I guess it depends a lot of how this actually gets scaled. Cause I dont know if you can even make part of it scale and the rest not (if its the website that does the scaling)

 

The website does the scaling. However, when coding the skin into actual flash player, the coder can specify some parts to stay the same size, and to leave the rest to be stretchable. So, if you want to leave the play/pause button the fixed size - do it. But the playlist line, the horizontal scroller must be vector.

I think, it's a good idea to leave the icons (ringtone and download) rasterized. But i am not designer, so take my advice as it is

 

You can upload only one swf, and the facebook displays it at three different widths. Unfortunately, you can not upload a different swf for each situation.

The height will change, see the screen shots above. But if you keep the proportion, and if the player can fit by width, then it will fit by height too.

 

I understand a lot more now. I will try and finish my entry (I guess its makes sense to keep the play and fast forward, etc, buttons the same size. But I already vectored them so oh well =]

EDIT: This is become much more difficult then simply vectoring it and resizing it. No wonder your offering $100. Is there a way to make it remain fixed height wize? If so then all you have to do is design it at the smallest size. And then as the site needs to make it wider, it take the moves each side of the main design to where they need to be, and fills in between with filler. Which would basically be an image that is like 1 pixel wide but the entire height of the design. And the the space between the buttons would simply increase, and the playlist would widen. But text and height of everything would remain the same. Do you understand this? Idk if it can done like this though..

 

hmm i will try fix mine up later for the smaller widths, any comments on what I had so far?

 

Here is my latest preview. As you can see it is fully scalable (the bottom image is yours. I obviously haven't complete it yet. I had to walk away for a bit). Now how will it work if you leave something rasterized? For example, the Shuffle button. If that is left rastered so that it can be read at smaller sizes, wont the amount of space for it to be there become shrunk? And it would overlap into the playlist or elsewhere? Maybe I have to redesign the button so that it can be scaled and still be read from a small size. I hope you don't mind if I work with it a little.