Your Universal Remote Control Center
RemoteCentral.com
Complete Control by URC Forum - View Post
Up level
Up level
The following page was printed from RemoteCentral.com:

Login:
Pass:
 
 

Original thread:
Post 1 made on Sunday August 26, 2007 at 04:10
aedile
Long Time Member
Joined:
Posts:
August 2006
114
Hey folks. Sorry for all the posts. Combination of WAY too much caffeine and WAY too much procrastination. Anyways, I have what I think is a new technique for layout creation. I think it is new because a) I have never seen it on a file I have downloaded, b) I haven't heard it discussed and c) I don't have access to all of the official developer goodies as I am not a CI. That being said, I am including the text for my latest tutorial here. Is this something that everyone knows about and I have just missed in my relatively short time with working with this type of remote or have I stumbled on something no one really does? If no one does this, why? Below is the text and you can download the proof of concept file at my site. Here is a link:
[Link: mx-3000.com]
Just click on the "Lazy Photoshop" link. Below is the text of the tutorial (which can also be found in the tutorials section of my site). I would love some feedback

regards,
-aedile-

Lazy Photoshop Layouts

While I love the complete control suite editor, as a photoshop aficionado, I have always felt a little bit limited by the layout tools that they give. It doesn't allow for visible gridding, you are limited to a small subset of fonts. Also, it doesn't allow for any graphical tweaking (even something as simple as resizing an element takes way too much effort). That being said, I have come up with a new method of making layouts much more simply using photoshop (or other graphics software of your choice). (Note: I say "I have developed..". I say this because I have never come across a template using this method before)

To begin, open up a 320x240 photoshop document. Now, design away! I know, that is glossing over a really important step, but that isn't what this tutorial is about. This is about saving yourself time and energy after you have designed a layout. The important thing is that you remember, you aren't doing a normal template design. Here you are designing a single page layout. Along with all of the layout elements you need for that page. When you are done, you should have a "mockup" of what the page would look like. Now we will export that file as a usable graphic file (jpg is my format of choice as, in photoshop, you can tweak file size).

Now, open up the mx-3000 IDE. Create a new page and then add a new button. Now import the image file you just created onto the button. Great! You say. That's what I want! Now let me just go back to photoshop and start slicing it up and...... Not so fast there slugger!! Why go back to photoshop at all when we have our wonderful friend, the invisible button?

The next step in my method is where the magic happens. In the example file listed above, I have a transport (the thingy with play, pause, stop, etc) and some of the standard SciAtlantic PVR buttons. Rather than going in to photoshop and slicing out each individual element I am just going to add buttons that are invisible and overlay them on my already existing layout. To do this, for example, with the play button, I would first right click and add a button. Then, I would go down to the button color section and set the button to hidden. Next I would pull it over to the play button and then adjust the button size to cover the underlying play button. Repeat ad nauseum until the whole layout is covered, as necessary, by the invisible buttons.

Why do things this way? Three reasons. First, as I mentioned, photoshop offers more tools than the IDE to make layouts. Second, as I mentioned, it saves you having to slice out individual elements. Third, and finally, it allows you to do some stuff that is wicked hard when using a traditional, elements-based layout. Take a look at the example file included with this tutorial. To the left are 4 buttons that are triangular and put right next to each other to form a square. When you make a regular triangle element, it still imports to a square-shaped object. Were I to try to slice those up, I would get four square-shaped objects. Then putting them together would be a nightmare as there would be overlay and such. To slice it out properly, I would end up having to make eleven slices. Ouch.

Are there disadvantages? Sure. First, it wreaks havoc on filesize. In a normal file, you have maybe one or two backgrounds. More for something complex, but still never too many. The cool thing is, every time you use that background on a different page, it refers back to the first instance, which saves a lot of memory. In this method, you have to have a lot of 320x240 images, none of which can use the aforementioned feature, so the filesize gets large a lot more quickly than with a traditional layout method (which is why I mentioned filesize tweaking earlier). Additionally, if you see something that is a little bit off in your layout, it requires reopening the file in photoshop, tweaking it there, and then re-exporting. This can actually eradicate any timesaving if you are an incessant tweaker. That being said, make sure you save your original layer-based psd file from photoshop as editing a jpg or gif is a nightmare in complex stuff.

Still, despite the few disadvantages, I have found that designing my latest template has gone more than twice as fast as normal, as I am not relying on the layout tools of the mx-3000 IDE at all.
www.mx-3000.com
Templates, tutorials, files and more.


Hosting Services by ipHouse