ricardocabellov5.0balter-egos
trace mr.doob r08028
blogdemoscenefeaturedextrascontact
 *blog... kind of... *rss


Becoming a professional photographer with Photoshop
03.03.2007
I was checking Hamad Darwish Flickr profile, the guy that did the pictures that now Microsoft is using as Desktop images with Vista, and I noticed a lot of contrasting and retouching on the pictures. And it was funny that in some comments the people was commenting that it was ovbious how professional he was. Don't get me wrong, there are nice bits on these photos but I don't think that getting nice colours makes you a great photographer.

If you don't think the same, then here its a quite basic tutorial so you can be a great photographer too :)

Here is a picture I took one week ago in Iceland. I used a small and handy (and now old) camera and, as you can see, the place was well nice, the picture looks cool, but it doesn't give you a 'professional' impression.



Now, compare it with this, probably as a picture, is not well positioned, but the colours are great now, aren't they?



So, if you're wonder how did I do that... Here is a quick step by step process for doing it. I used Photoshop, but you can use any soft,

Lets duplicate the background layer and get rid of the colours with Image > Adjustments > Desaturate. This is not the best way to get proper greyscale of a picture, but that will do by now. Then change the blending mode of that layer to Overlay. What you have now is what a lot of people use for CDs, mainly for Hiphop covers and stuff, it would probably need a bit of sharpen tho. Anyway, the colours are still not cool enough. Lets duplicate the layer again, and then contrast it a bit with Image > Adjustments > Hue/Saturation... and put the Saturation to +50. Done.

The Layers panel should look something like this:


You can delete the Background layer if you want tho. Some people will may think that using the Brightness/Contrast will get you the same result. Well, it will certainly give you a similar look ,but will kill some colours and info of the pic. This method lets you have more control of the level of contrast that you want, and also the level of blacks and whites.

So, now we are professional photographers!! \o/
posted by mr.doob at 17:02

Having fun with jQuery
02.03.2007
I was checking some days ago a project from a friend of mine, and apart from the app itself, I was quite impressed with the nice fades and slides of texts. So I obviously had to do research about how did he do that.

The answer was jQuery, and oh man, what an answer! :) As everything, it still have some bugs with the heights of some elements for doing the effects, but the way of selecting elements its too good to don't use it for every project that needs some .js

I've used it a bit of the work log, so the page now looks a bit clean and light, and if you want to read an article you click on the title (which by the way, uses sIFR 3 :D) and then it will expand the body.

I'll probably use innerDiv for the portfolio items soon. What a .js site! wasn't I supposed to be a flash guy? :)
posted by mr.doob at 11:49

6th month as a freelancer
01.03.2007
Finally reaching the 6th month mark. Seems that is going well.

I still have to get better on delivery times, but I think i'm good enough dealing with clients, answering emails and stuff.

There is some stuff you would need if you want to go freelance. The first one, I called it Econodoob ;) and its money/invoice/time tracker. I just implemented the time tracker today. So you submit the amount+time spent, and having all the info then you only need to do some nice Graphs. I'm afraid I don't think is a good idea to share those graphs, but I've done something like..

Cashflow (real)
Cashflow (theoric)
Time spent
Invoice value (input)
Bills value (output)

Yeah, it's cashflow because I include the bills I've to pay to see what goes in and out. If you want to make sure that the 'business' is going well, you need that kind of visibility. And to be honest, doing a tool with PHP to record/track/report all that info is a matter of 1day of work. Isn't it cool to have the knowledge to develop your own little apps so you don't depend of other BIG apps that you will use only a 1% of them?

The other thing you will probably need to do is to move to an office. Working a home gets very annoying at some point. You need some place, some environment that makes you think: "Right, I'm at work, I should be working now". Right now, I watch a movie if I feel like, it's too easy to get distracted.

So the idea is renting a desk in an office, so I would end up sharing the office with other people, freelancers, companies... By now, the best place I've found to look at is at the gumtree. I should be going tomorrow Friday to watch a nice one, see how it goes
posted by ricardo cabello at 11:34

We're in Reykjavik... bad news for you :(
22.02.2007
We didn't have time to learn enough about this country yet, but we have seen that they have in some maps ghost symbols to consider the zone doomed or something like that. This place is weird and small. Very small.

And to show the ghosty thing, all the pictures we've done today got lost when I connected the camera to my laptop :O It formatted itself somehow! Well annoying because apart from some pretty cool pictures I did a video of the plane landing, the terrain with snow was simply great, and the video was superb. But somehow, all lost.

Weird
posted by ricardo cabello at 21:28

How to render the illumination to a texture for Papervision3D with 3D Studio MAX
21.02.2007
I'll declare myself Mr.Tutorial!

For the ones that doesn't have too much time and need to understand what's going on, this tutorial explains how to do this:



(This tutorial isn't just for Papervision3D, you can use it with any other 3D engine).

The point is that when you approach a realtime 3Dengine the best way to achieve good results is to think about how to use the resources you have. Papervision3D still doesn't have illumination, but it can render polygons with textures. So, why don't we render the illumination to the texture with our 3D package? This is exactly what I thought when I did this, this and this.

I'm afraid I've no idea of how to do this thing with any other package, but at least you will get the idea.

Ok, let's start...

Open 3D Studio MAX and all that, I believe the Render to Texture feature is there since the version 5 or 6... (I'm using 8).

Then we create a Torus and a Plane.



And we do an scene similar to this one:



The under the Lights tab we select the Skylight... er.. light, and with check the Cast shadows checkbox. The rays per sample parameter is the quality, if your machine is slow, put it to 5 or 10 just for testing, I usually do the tests with 5, and then when I go to do the render to texture I put it up to 30.



I'm don't thing the position of the light really matters, this is not one of those lights that you need to focus on something, just put it anywhere.



Half of the work done! If we do a Render right now, It should look like this:



Now, sometimes the 3D object we want to render the texture from is quite complex, so we need to Unwrap the mesh to a plane so we make things easier to the render to texture thing. (You'll understand what I mean in a sec). So, under the Modifiers tab, we select the Unwrap UVW from the Modifier List. And then we click on Edit.



A new window will appear with the mesh on a plane in wireframe. First we click on the 3rd option of the Selection Modes, and then We go to Mapping/Flatten Mapping.



On the new window that will appear we put the Spacing to 0.0 and we click OK, this will explode your mesh to the best (not always) way so the Render to Texture can put as much information as possible into the texture.



The end result should look something similar to this:



We close the window, and then with the Torus object stil selected we go to Rendering/Render To Texture.



On the new window, we scroll down to the Output part and we click on Add... to add a new texture you want to bake. This will prompt another window where we have to select CompleteMap.



If we scroll down that panel a bit, we will see the options for the final texture. If you want to save the texture in a different path, well... feel free. I usually do the renders to 1024, and in case isn't it can be reduced then I reduce them to 512 with Photoshop.

As the last thing, If you don't want MAX to change the texture of the Torus with the backed one, I recommend you to check the Render To Files only checkbox.



We click on Render and after we'll end up with a texture similar to this:



And that's all, I'm afraid I won't go into the part of doing the code with Papervision3D for loading all this, but I'm sure you know how to use this texture now ;)

Hope this is useful for someone
posted by mr.doob at 15:41

Windows XP Updates... annoying
20.02.2007
Is it just me or these days Microsoft are "sending" a lot of updates and which forces you to restart the system almost everyday?

I'm tired of moving the window of 'Restart now' to outside the screen so it stops asking me for it :(

I'm gonna be a mac fan here... I don't remember the last time I had to restart MacOS.
posted by ricardo cabello at 20:30

Designing websites efficiently with Photoshop CS2
20.02.2007
One of the things you can't do when you work on a team is to adapt the new technologies as fast as you can as when you work by your own.

This is just an example... when I was working for Spring Digital, we were a team of 6/7 designers. Since Photoshop CS2 was released I knew there was something called variables that could let us save a lot of time and HD space when designing flatscreens for websites. I tried it quickly and saw that it worked great, I tried to introduce it as a new way to design the sites but I failed. Also I wasn't able to use it because my flatscreens had to be easy to modify by the other designers, and none of them had Photoshop CS2 installed... Oh well...

Luckily I'm now working by my own and I can use that way of developing flatscreens. At this point you will be thinking, so what's that? Ok.. Developers will love this one.

When you design the flatscreens for a standard website, you end up doing it in 2 ways:

1st way:

projectname_aboutus.psd
projectname_technology.psd
projectname_services.psd
projectname_contactus.psd

So each .psd has the content and layout for each section.

Benefits:
You can save each file as a png for showing it to the client easily, the whole data is split in a couple of files, so loading/saving them should be fast.
Problems: If the client wants you to change the header or the footer of the site, you have to go flatscreen by flatscreen modifying it.

2nd way:

projectname_design.psd (with folders inside it for each section)

Benefits: If you do it properly, you should be have to modify only once if the client asks a change on the header/footer (or any other common part).
Problems: The file may get quite big with all the data inside, and if you're working against a server it can get annoying. You can only reuse the header, as the footer will be probably on different heights. Anytime you save the the files as png for the client you'll have to hide/unhide each folder.


Well, for a developer, this is like writting a code without writting functions, all the time duplicating the same code. Ugly, uh?! Here is what you want to see:

3rd way: (the good one)

includes/projectname_header.psd
includes/projectname_footer.psd
projectname_aboutus.psd
projectname_technology.psd
projectname_services.psd
projectname_contactus.psd

The good news with Photoshop CS2 (although it was released years ago) is that you have Variables, which basically lets you attach an external file to a normal layer. So any time you update that external file it will update it to the other files that are attaching that external file on-the-fly. Some people call this concept instances ;)

How-to:

1. Create a new file.
2. Add a text inside it.
3. Save it as footer.psd.
4. Create another file.
5. Create a layer (I named it footer container).
6. Draw anything inside the created layer.
7. Go to Image / Variables / Define...
8. On the layer selector, select the layer that you created.
9. Check the Pixel replacement checkbox, put a name to the variable (I called it "footer") and use the method "As is".
10. Click on next (Data sets), and then click on that little disk with an arrow pointing down.
11. If will probably autoselect the variable you created as its the only one, so then you only have to click on the RadioBox to enable the Select File... button.
12. Select the file footer.psd
13. Click on Apply and then OK

At this point you should be seeing whatever content you had on that external file replacing the layer you created.

Clean, fast, and without duplications.
posted by mr.doob at 01:24

New mr.doob's website+ID!
16.02.2007
Right, maybe it needs a bit of extra work but I'm quite happy with it by now and need to keep working on other stuff. I believe the new ID is more friendly and attractive than the one before (I didn't really like it).

In order to 'celebrate' it I did another test with PV3D. Although whatever you do after Ralph's bump+reflection test will look cheap. Oh well.. here you have:



Well, took a while but it's finally done. Now I only have to do good enough works to populate the portfolio :)
posted by mr.doob at 10:10

Any tips for 2007 Trips?
15.02.2007
This is how the calendar looks like this year... I'm afraid that Barcelona won't be on the list this year.

February 22 - 26:  Reykjavik, Iceland
March 31 - April 8:  Sevilla, Spain
May 4 - 7: Dublin, Ireland
June 6 - 13: Menorca, Spain
August 2 - 5: Helsinki, Finland (Assembly)

So, If you have ever been to any of these places, I'll love to 'hear' some recommendations and tips for places to go :)

PS: Mum: hope you like to be aware of the travels before I do them instead of after this time ;)
posted by ricardo cabello at 03:45

Beatport
13.02.2007
http://www.beatport.com/

This is probably one of the best flash website ever done. Very good example of how Flash can make the user experience much better than a fully accessible website. Compare it to any other online store, and compare how's you listen the previews of the tracks and how many clicks you have to do. I guess this is a good example that sometimes is better to not concentrate on accessibility and concentrate on doing a good service which then ends in a good business.

I'll probably buy some tracks there :)

Edit: I forgot to say iTunes sucks!
posted by ricardo cabello at 20:30
Pages:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
 *profile 



traditional id: Ricardo Cabello Miguel
based in: London, UK
serving to: Hi-ReS!
contact me: click here


 *affiliations 

xplsv.com admin, development, design
xplsv.tv admin, development, design
escena.org admin, design
molomucho.com development, design


 *advertising