screen design (how-to) for dummies

hvaughn · 07-26-2007, 07:33 PM

Is there a video, tutorial, online guide, etc. available that explains how to design a screen? For dummies like me... I'm trying to modify a current screen with gimp and have done nothing but screw it up. So I tried to create one and that was worse. I would really like to figure this out. Please help me. I really just need to modify the buttons on the screens and the colors too. Most of the front ends available have buttons that I will never use like sat radio, radio, etc.

thanks!

Wiredwrx · 07-26-2007, 08:23 PM

Quote: Originally Posted by hvaughn

Is there a video, tutorial, online guide, etc. available that explains how to design a screen? For dummies like me... I'm trying to modify a current screen with gimp and have done nothing but screw it up. So I tried to create one and that was worse. I would really like to figure this out. Please help me. I really just need to modify the buttons on the screens and the colors too. Most of the front ends available have buttons that I will never use like sat radio, radio, etc.

thanks!

Are you refering to a "skin"? There is a skin editor for RR, look in the RR forum.

Michael

hvaughn · 07-26-2007, 08:53 PM

to be honest, I'm not sure. I have the screen editor. I'm referring to the graphics and buttons. What one sees when they launch RR. Maybe I'm just totally confused. I thought the editor was for the button layout, but a jpg had to be created to go with it. I hope this makes sense.....

Wiredwrx · 07-26-2007, 09:00 PM

Quote: Originally Posted by hvaughn

to be honest, I'm not sure. I have the screen editor. I'm referring to the graphics and buttons. What one sees when they launch RR. Maybe I'm just totally confused. I thought the editor was for the button layout, but a jpg had to be created to go with it. I hope this makes sense.....

The "screens" that you see are part of the "skin". The "skin" that you see (the underliying code is changed with the skin editor) is made with graphics programs, like Adobe. They are made with by people with amazing skill. Some skin authors release thier PNG files for modifications, others do not.

It aint easy to do yourself, at least, I have tried a couple of times with little success.

Good luck.
Michael

hvaughn · 07-26-2007, 10:00 PM

well, that makes me feel a lot better. looks like I'll have to resort to using a pre-designed screen. oh well, better than nothing.

DJiK · 07-26-2007, 10:23 PM

Online Tutorial #1
Online Tutorial #2

Don't give up. You never know until you try. Good luck!

BTW, please refer to "screens" as "skins" from now on, thanks.

wilgartw · 07-27-2007, 05:37 AM

yeah, don't give up.

if you want to design something "different" from scratch it can be a ball ache. but if you have a skin you like, and you just want to add an extra button, or change the symbol on a couple of them so that you don't have to remember to press "radio" everytime you want to launch a photo album, then it can be quite simple. and you get a great sense of achievement.

agiorgitis · 07-27-2007, 07:48 AM

Start playing with another skin, but if you really want to feel happy about yourself start making a skin by yourself.

But first start with someone's else skin just to get started...

JohnWPB · 07-28-2007, 02:12 PM

Quote: Originally Posted by agiorgitis

Start playing with another skin, but if you really want to feel happy about yourself start making a skin by yourself.

But first start with someone's else skin just to get started...

I agree 100% with this! I started with the standard BMV2 skin that comes with Road Runner. I tore that skin up so bad, but it was a great learning experience! If you are willing to take the time, it is well worth it! I just started with learning to skin less than a year ago, and have learned so much along the way!

gjuu · 07-28-2007, 08:26 PM

Quote: Originally Posted by agiorgitis

Start playing with another skin, but if you really want to feel happy about yourself start making a skin by yourself.

But first start with someone's else skin just to get started...

Yeah I found a skin that I really liked - MediaCar - but just wanted the front menu skin to be a bit different so I added the logo and a button for megasquirt. (done in MSPaint)
The mp3 and all other skins I haven't touched.....yet

frangolfgt · 07-29-2007, 05:28 AM

Skins are basically 3 pictures called 'off', 'down' and 'on' (there is also 'empty' but I just use 'off' as the 'empty' image on my skins). Different regions are assigned as buttons, icons etc. using XY co-ordinates and XY sizes.

For example this code

Code:

/, B, x, y, w, h, Command;COMMANDCODES, Tooltip
B,11,5,67,89,"MUTE","Mute"

tells rr that you want a button the has the mute function. The top left corner starts at co-ordinate 11,5 on the screen and the button's size is 67*89 pixels.

When I visualise it in my head, I imagine that rr overlays these 3 pictures on top of each other, with 'off' at the top and 'on' and 'down' underneath. When you move over a button with your mouse, rr makes the 'off' image in the space assigned to that button seethrough so you can see the 'on' image.

When you click a button, rr makes the 'off' image in space assigned to that button seethrough, but this time you see the 'down'. Both spaces revert to being in the 'off' state when you finish the action, ie. move your mouse outside the button or release the mouse button.

Spaces assigned to be icons work slightly differently. when your mouse moves over an icon nothing happens, but when you click, rr makes the 'off' image in the space assigned to that icon seethrough so you can see the 'on' image. This remains until you click the icon again, and rr reverts to havving the 'off' image in that space.

Hope this helps you

frangolfgt

hvaughn · 07-29-2007, 08:04 AM

Quote: Originally Posted by frangolfgt

Skins are basically 3 pictures called 'off', 'down' and 'on' (there is also 'empty' but I just use 'off' as the 'empty' image on my skins). Different regions are assigned as buttons, icons etc. using XY co-ordinates and XY sizes.

For example this code

Code:

/, B, x, y, w, h, Command;COMMANDCODES, Tooltip
B,11,5,67,89,"MUTE","Mute"

tells rr that you want a button the has the mute function. The top left corner starts at co-ordinate 11,5 on the screen and the button's size is 67*89 pixels.

When I visualise it in my head, I imagine that rr overlays these 3 pictures on top of each other, with 'off' at the top and 'on' and 'down' underneath. When you move over a button with your mouse, rr makes the 'off' image in the space assigned to that button seethrough so you can see the 'on' image.

When you click a button, rr makes the 'off' image in space assigned to that button seethrough, but this time you see the 'down'. Both spaces revert to being in the 'off' state when you finish the action, ie. move your mouse outside the button or release the mouse button.

Spaces assigned to be icons work slightly differently. when your mouse moves over an icon nothing happens, but when you click, rr makes the 'off' image in the space assigned to that icon seethrough so you can see the 'on' image. This remains until you click the icon again, and rr reverts to havving the 'off' image in that space.

Hope this helps you

frangolfgt

makes sense....thanks!!!

kbreeden · 07-29-2007, 08:33 AM

As some have pointed out, it's very easy to edit the buttons if the PSDs (photoshop) files have been released and it's very difficult if they have not. You can get PSDs for a couple of skins, including the brushed metal skin that comes with the RR download. Bear in mind, though, that with Gimp you can open PSD files and modify them to a large degree, but you can't easily move text around on a PSD. I know this because I also was using Gimp and wound up having to a get a copy of Photoshop to make it work.

anonim · 08-01-2007, 03:52 PM

Okay, so I have to ask.. Some of you say the author of the skin does not always include the graphics files in the skin distribution.

If the graphics files are not included, how does the skin know which image to overlay buttons onto? Even if the images are not PSDs, you can still import these into Photoshop and modify as you wish. What am I missing?

kbreeden · 08-01-2007, 04:13 PM

Quote: Originally Posted by anonim

If the graphics files are not included, how does the skin know which image to overlay buttons onto? Even if the images are not PSDs, you can still import these into Photoshop and modify as you wish. What am I missing?

The graphic files are included but they are in jpg or png format. Check your skins folder and you'll see what I mean. They are saved in those formats from the PSD file. The PSD file is a large Photoshop file that contains many layers. It allows one to quickly change colors and fonts and add, delete or move text and icons around or within the various layers.

All of the different screens you see in a skin are typically contained within one PSD and then each of them is saved separately as a jpg or png file so RR can use them. Sure you could open each jpg in whatever graphics program you have and change the color, text or icons, but it's a long, tedious process which doesn't produce very good results.