Leseempfehlung

Posted on by hukl

Ich dachte mir, wenn ich schon nichts eigenes Poste könnte ich zumindest mal eine Leseempfehlung aussprechen. Ich bin gerade noch zu sehr mit anderen Dingen beschäftigt als das ich gehaltvollen eigenen Inhalt produzieren könnte. Schnupfen hab ich auch grad.

Anlass für diesen Post ist die kürzlich vorgestellte Modifikation des Urheberrechts. Die Privatkopie oder den Bagatellfall gibt es nicht mehr. Einmal eine CD Raubkopiert kann mehrere Jahre Haft bedeuten. Ich habe zwar ernsthafte Zweifel an der Durchsetzbarkeit aber man sollte sich nicht mehr wundern wenn die ersten derartigen Strafen verhängt werden. Im chaosnahen Umfeld haben sich natürlich schon diverse Leute deutlich qualifizierter zu diesem Thema geäußert als ich weswegen ich einfach mal die entsprechenden Links nenne und eine uneingeschränkte Leseempfehlung verteile:

Preparing Photos for the Web

Posted on by hukl

This post is about the weird problems that can occur when you try to publish your photos on a website. Everything looks fine in your Photoshop but when you look at the pictures with your web-browser it looks almost completely different. Of course it is still the same picture with the same objects on it but the colors look dull, to dark or even have different tones. People asked me a lot about this because they knew that I was kind of experienced with color-management which is why I decided to write something about it.

It is really not that hard to prepare your pictures for the web. In fact most of the »consumer« cameras already produce pictures which are ready for the web. This is because they are using the sRGB color space which was made for the uncomplicated use of digital images. It is a very small color space but because of that most of the displays and monitors out there are able to produce sRGBs colors. The cameras deliver sRGB pictures which can be viewed on uncalibrated displays and monitors. Consumer printers are also able to reproduce the sRGB color space so you can even print your pictures properly without the need of adjusting any color options and settings. Needless to say that sRGB makes a lot of sense for the world wide web as well since the vast majority of the displays and monitors that are used for looking at websites are not calibrated as well. I recommend reading a more detailed explanation of sRGB here.

Of course a small color space is not suitable for professional or semi-professional use. Most of the more expensive cameras and I think all of the SLR cameras more than just the sRGB color space in which the pictures can be taken. Two of the most common ones are Adobe RGB and ECI-RGB. Compared to the sRGB color space these two are pretty huge. If your camera only does 8 BIT Pictures you can use sRGB with no trouble at all. It will make your life easier but if you take pictures in 16 BIT it is really recommended to use a larger color space because otherwise you would throw away a lot of color information just in the moment you are taking the picture.

I don’t want to get lost in details here so it is important to know that there are smaller and larger color spaces. sRGB is a pretty small color space but is very useful for the uncomplicated exchange and use of images and because of that it is being used in the web as well. It has been endorsed by the W3C, Exif, Intel, Pantone, Corel, and many other industry players. It is also well accepted by Open Source software such as the GIMP, and is used in proprietary and open graphics file formats such as SVG.

Alright then. If you are saving a picture for the web, make sure you converted it to sRGB before saving it. I will show you what happens if you don’t do that. I suggest you open each of those sample pictures in an extra tab of your browser because you can’t really see the differences at that size.

This is what the picture is supposed to look like. I converted it to sRGB before saving it and I tested it on different machines, with different browsers. There is no sRGB profile attached to it. You can attach it if you like but most of the software out there will assume that a picture without an attached profile is in the sRGB color space anyway. This is the big advantage of sRGB.

Image converted to sRGB, no profile attached

with eci

The second version of my sample picture was converted to ECI-RGB when I opened it in Photoshop. I always use a large working space profile for manipulating and editing pictures. I saved the picture without converting it to sRGB and without attaching the ECI-RGB profile. The colors look dull and a lot of the saturation is gone too.

Image converted to ECI RGB, no profile attached

Picture converted to ECI RGB but no profile attached

The third version is also in the ECI-RGB color space but this time with the ECI-RGB profile attached to it. Your browser might not be able to understand the profile but if you save the picture on your computer and open it with a program which is able to understand color profiles you can see the colors like they were supposed to be. With a profile attached software like Photoshop knows how the colors should be displayed. It is kind of a translation help.

Image converted to ECI RGB with the ECI RGB Profile attached to it

Picture converted to ECI RGB - profile attached

The last version was converted to my displays profile. During my research for this I found some websites claiming that this would be the best way to get your pictures look the same in photoshop and on the web. This nonsense of course because there will be just a few people at best who have the same display with the same profile as you do. But see for yourself.

Image converted to my displays profile, no profile attached

with eci

It is a little tricky if you have a calibrated display because if you are converting your pictures to sRGB it is likely to happen that they will look different compared to the original. Many people get confused by this and even I was questioning my senses when I tried to get my pictures to look the same in Photoshop and on the web. I set up these pictures and tried them on different machines and I came to realize that the sRGB version looked best in all the cases even-though it didn’t look exactly like the original on my machine. You really shouldn’t worry about that.

It is even more trickier when you are working on a mac. This is because Mac OS X and most of its programs like Safari, Mail and Preview are color management aware. This means Mac OS X is capable of understanding color profiles and it is one of the many reasons why I love it. For new users this is confusing though. When you’re looking at webpages using Safari it will interpret the profiles which are attached to pictures. If you look at the ECI-RGB version of my sample picture which has the ECI-RGB profile attached to it you will see what I mean. If you looked at the pictures using Safari, NetNewsWire, Vienna, Newsfire etc. look at it again using Firefox and you will see what the rest of the web is seeing. This is because Firefox is not capable of interpreting color profiles.

If you have further questions I’d be pleased to answer them. Just leave a comment.

Annotations:

RGB Working Space Information

Technorati Tags:
, ,

Website Editing on OS X

Posted on by hukl

I started building and designing websites in the mid nineties when I got my first computer. Back than there were only very basic WYSIWYG editors available and you were better off knowing how to actually write HTML in an text-editor of your choice. When Dreamweaver came out I walked away from writing HTML because the results were satisfying enough. Then I lost interest in websites and was more happy doing some print stuff. After a couple of years I got interested in websites again when the browser were finally supporting CSS and other webstandards properly. In fact it was Tim who got me hooked to the web again by showing me what was possible nowadays. Recently some people asked me how I would actually build websites. Usually the people who were asking me are mac users so they wanted to know the best tool. The first thing I tell them is that I don’t use any WYSIWYG editors like GoLive or Dreamweaver because the produce horrible and mostly inefficient code. Instead I use a combination of tools which I’m about to list right here:

Transmit
I use Transmit a lot. It is the major interface to all the webservers. It allows me to edit html and css documents right on the server. With a doubleclick on the file transmit opens the document in my default editor. When I save the file after editing it, transmit automatically uploads the modified file back to the server. This works pretty good. You can’t get confused with links or locations of files because you work right on the server – in the right environment. You can do the same with images, if they are not too heavy for your connection. In Transmit you can open .jpg files with your favorite pixel manipulation software, when saving it Transmit puts it back on the server. It also has tabs for multiple connections at the same time and you can even drag and drop files between theses tabs / servers. Look on panic.com to see the other cool features of Transmit.
TextMate
Textmate became my favorite editor in seconds. I didn’t even wait to let the trial version expire before I bought it. This piece of software behaves so well with xhtml, css and many many other languages. Tons of useful snippets, macros and autocompletions make Textmate my favorite. It also features a project view and tabs and really a lot of other great features.
Firefox
The browser of choice is Firefox. It isn’t the fastest browser on the mac but still the most accurate one in terms of rendering. Safari came pretty close but Firefox is still a little ahead. Firefox also is a lot better in debugging javascript. Another great feature of Firefox is its extensibility. URL: http://www.mozilla.com/
Firefox Extension: Webdeveloper
This extension is a must-have for every web developer. You can live edit the css of the website you are currently looking at to instantly see the effects of your modifications. You can let it outline all block level elements or display all the id and classnames of the elements. But it can do so much more. It is truly one of the most helpful tools to debug html and css errors and glitches. URL: http://chrispederick.com/
FirefoxExtension: Firebug
Firebug is a small toolbar that show up on the bottom of the Firefox window. It shows javascript and css errors and with a click on the bar it expands to a window with detailed information on the errors. With Firebug you can also see the »Ajax« data that is being loaded in the background or you can inspect elements of a webpage clicking on them. It is really the perfect partner for the webdeveloper extension giving you all the debug tools you need. URL: http://www.joehewitt.com/
The W3C Markup Validation Service
I know this one is pretty obvious but it also helps debugging unexpected behavior of you webpages so go there and check your websites. URL: http://validator.w3.org/

With these tools building webpages became a lot of fun and its fast too. I know different people use different tools but thats really not the point here. I just wanted to have a URL that I could people point to when they ask me: “So what are you using for building webpages?”

Technorati Tags:
, ,

Talk or Walk – Presentation

Posted on by hukl

Yesterday I had to present my project at the UdK. It went pretty good, the audience was pleased.

I just uploaded the videos which I used in my presentation as well as two slightly entertaining out-takes. Now I have to figure out how to get the »rest« of my presentation ready for the web.

Here are the videos:

hukl.smyck.org/projects/talk-or-walk/#demo

Now you are finally able to get a feeling how the talk or walk elevator is meant to work. Hope you like it.

There is more to come.

[Update 1]

For some strange reason people seem to watch only the first video. This is the most uninteresting one – the fun starts with the second – so if you have decided to check out the project, read a bit and watch the other movies too. It doesn’t make much sense the other way.

Semesterferien

Posted on by hukl

Die Letzten Wochen waren, wie üblich zum Semesterende, etwas anstrengend weswegen auch die Aktivitäten auf dieser Seite etwas zurücktreten mussten. Nun habe ich aber Semesterferien und schon einen Batzen von Sachen die es hier zu postulieren gilt. Hier eine kleine Themenvorschau:

  • Mein Semesterprojekt: Talk or Walk
  • Andere Projekte der Klassen an der UdK
  • Monitorkalibrierung
  • Umgang mit Farbprofilen für Print und Web

Ich schreibe mal lieber nicht zu viel auf. Falls ich dann doch nicht dazu komme wäre das blöd. Übrigens blogge ich jetzt mit TextMate. Wie das geht erzähle ich vielleicht auch später.

Nun mache ich mich aber daran mein Projekt noch weiter zu dokumentieren. Vor allem die Filme müssen webtauglich gemacht werden.

Also, in Kürze mehr.