mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-13 16:45:14 +01:00
start with content edits
This commit is contained in:
parent
7c3756fd07
commit
b2135a026f
@ -7,7 +7,7 @@ layout: base
|
||||
<div class="photoPost">
|
||||
<figure class="hmedia">
|
||||
|
||||
<img src="/assets/media/{{ page.image }}" />
|
||||
<img src="/media/{{ page.image }}" />
|
||||
<figcaption class="entry-title fn">{{ page.title }}</figcaption>
|
||||
exif
|
||||
</figure>
|
||||
|
||||
@ -13,7 +13,10 @@ layout: base
|
||||
</aside>
|
||||
|
||||
<section class="entry-content">
|
||||
{{ page.image }}
|
||||
{% if page.image %}
|
||||
<img src="/media/{{ page.image }}" />
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
</section>
|
||||
|
||||
|
||||
15
_src/_posts/2005-07-26-beaucarnea-leafs.markdown
Normal file
15
_src/_posts/2005-07-26-beaucarnea-leafs.markdown
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2005-07-26 11:44:49+00:00
|
||||
layout: post
|
||||
slug: beaucarnea-leafs
|
||||
title: Beaucarnea leafs
|
||||
wordpress_id: 1982
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
[Photo on 500px](http://500px.com/photo/2661202) [Photo on flickr](http://www.flickr.com/photos/krema/6821597484)
|
||||
15
_src/_posts/2005-08-02-snail-on-a-leaf.markdown
Normal file
15
_src/_posts/2005-08-02-snail-on-a-leaf.markdown
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2005-08-02 11:39:04+00:00
|
||||
layout: post
|
||||
slug: snail-on-a-leaf
|
||||
title: Snail on a leaf
|
||||
wordpress_id: 1973
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
[Photo on flickr](http://www.flickr.com/photos/krema/6965150181/in/photostream/) [Photo on 500px](http://500px.com/photo/5629909)
|
||||
15
_src/_posts/2006-07-23-electricity.markdown
Normal file
15
_src/_posts/2006-07-23-electricity.markdown
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2006-07-23 11:36:28+00:00
|
||||
layout: post
|
||||
slug: electricity
|
||||
title: Electricity
|
||||
wordpress_id: 1970
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
[Photo on 500px](http://500px.com/photo/5629510) [Photo on flickr](http://www.flickr.com/photos/krema/6965105709)
|
||||
17
_src/_posts/2006-07-23-floating-sky.markdown
Normal file
17
_src/_posts/2006-07-23-floating-sky.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2006-07-23 11:32:14+00:00
|
||||
layout: post
|
||||
slug: floating-sky
|
||||
title: Floating Sky
|
||||
wordpress_id: 1964
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
Combining of a lot of techniques: a long exposured HDR (3 bracketed shots) processed in Photomatix and finally polished in Photoshop.
|
||||
|
||||
[Photo on flickr](http://www.flickr.com/photos/krema/2214959926) [Photo on 500px](http://500px.com/photo/2661090)
|
||||
17
_src/_posts/2006-08-21-new-berlin-bridge.markdown
Normal file
17
_src/_posts/2006-08-21-new-berlin-bridge.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2006-08-21 11:22:34+00:00
|
||||
layout: post
|
||||
slug: new-berlin-bridge
|
||||
title: New Berlin Bridge
|
||||
wordpress_id: 1958
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
... in Halle (Saale)
|
||||
|
||||
[Photo on flickr](http://www.flickr.com/photos/krema/2621531548)
|
||||
15
_src/_posts/2006-09-16-wooden-windmill.markdown
Normal file
15
_src/_posts/2006-09-16-wooden-windmill.markdown
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2006-09-16 11:47:16+00:00
|
||||
layout: post
|
||||
slug: wooden-windmill
|
||||
title: Wooden Windmill
|
||||
wordpress_id: 1985
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
[Photo on 500px](http://500px.com/photo/2661412) [Photo on flickr](http://www.flickr.com/photos/krema/6818985878)
|
||||
15
_src/_posts/2006-10-22-german-chancellery.markdown
Normal file
15
_src/_posts/2006-10-22-german-chancellery.markdown
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2006-10-22 11:43:00+00:00
|
||||
layout: post
|
||||
slug: german-chancellery
|
||||
title: German Chancellery
|
||||
wordpress_id: 1979
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
[Photo on 500px](http://500px.com/photo/5650652) [Photo on flickr](http://www.flickr.com/photos/krema/6967670015)
|
||||
15
_src/_posts/2007-02-10-macbook-abstract.markdown
Normal file
15
_src/_posts/2007-02-10-macbook-abstract.markdown
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2007-02-10 12:34:39+00:00
|
||||
layout: post
|
||||
slug: macbook-abstract
|
||||
title: MacBook abstract
|
||||
wordpress_id: 1967
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
[Photo on flickr](http://www.flickr.com/photos/krema/2495391492)
|
||||
@ -0,0 +1,21 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2007-03-01 20:50:32+00:00
|
||||
layout: post
|
||||
slug: adjustment-tool-guide-for-aperture-152
|
||||
title: Adjustment Tool Guide for Aperture 1.5.2
|
||||
wordpress_id: 1562
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
The Adjustment Tool Guide gives an in-depth-view of the Adjustment tool in Aperture. The documentary provided by Apple isn't that what most people were looking for. But Kendall Gelner wrote his own Adjustment Tools Guide originally for the Aperture Version 1.0.1.
|
||||
|
||||
Now he has updated his excellent Guide to fit with the current Aperture Version 1.5.2. His new guide now has a cool visual walkthrough of the Edge Sharpen Tool introduced in Aperture 1.5. The Adjustment Tool Guide can be downloaded as a free download from Kendall's Aperture-Website (which was named Inside Aperture long before the well-known blog from o'reilly started):
|
||||
[http://insideaperture.com/Site/AdjustmentToolGuide.html](http://insideaperture.com/Site/AdjustmentToolGuide.html)
|
||||
|
||||
Kendall also provides a so called Quick Reference Guide for Aperture which isn't updated yet and therefore only covers Aperture Version 1.0.1. Nevertheless, it's a good starting point for understanding the different little badges on your images in Aperture. Just the badges for referenced images aren't covered:
|
||||
[http://insideaperture.com/Site/ApertureQuickRef.html](http://insideaperture.com/Site/ApertureQuickRef.html)
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2007-06-11 18:44:28+00:00
|
||||
layout: post
|
||||
slug: finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs
|
||||
title: Finally... a universal scanner driver for the Canon CanoScan LiDE 500F for
|
||||
Intel Macs
|
||||
wordpress_id: 1563
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
**UPDATE: I wrote a follow up article describing how to use this scanner with the newest Mac operating system Leopard. Feel free to head over to this article to get the freshest facts about using this scanner with Mac OS X:
|
||||
[Using the CanoScan LiDE 500F scanner with Mac OS X Leopard](http://www.kremalicious.com/2008/05/using-the-canoscan-lide-500f-with-mac-os-x-leopard/)**
|
||||
|
||||
At the end of last year I watched out for a new scanner and the CanoScan LiDE 500f from Canon was the choice. But finding a suitable driver wasn't that simple cause everywhere around was only the horribly old PowerPC-driver. As long as I had my old G4 in the house it wasn't that problem. But at this time all Macs were already Intel-powered and also my new MacBook which replaced the G4 was Intel-Powered and i had a problem.
|
||||
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
So there were two choices for using the scanner on an Intel-Mac: installing the PowerPC-driver and using [VueScan](http://www.hamrick.com/) for scanning. But, man, was that slow! And i couldn't get the 16bit per channel scanning to function, which is an essential function for me. Also they want to have 40$ for this app, which isn't that much but after spending money for the scanner and for Photoshop I didn't want to buy another component for using the scanner. On the other hand you could use the [Preview.app](http://www.apple.com/macosx/features/pdf/) built into MAC OS X with Image > Import Image. But this last solution only offers rudimentary functions for scanning. Good to scan a document but not for scanning photos in high quality and for archive purposes. And nevertheless none of these solutions worked for scanning directly in the new Adobe Photoshop CS3.
|
||||
|
||||
So I called the Canon Support two months ago but they could only say sorry and advertise for their new scanner LiDE 600f which has a new Universal-driver and so on. But it hasn't really any new functions. And spending 100$ or so just for a new driver? So what??! They really wanted me to replace my scanner, which isn't a year old. Fu***ng Canon-Support! So I had to keep on searching on all Canon-websites and finally...
|
||||
|
||||
|
||||
|
||||
## The solution...
|
||||
|
||||
|
||||
|
||||
[Canon Asia](http://www.canon-asia.com/) (Canon South & Southeast-Asia to be precise) was the solution! They really offer a universal-driver for the CanoScan LiDE 500f on their site which is from June 2007! You have to follow this link and choose your desired device:
|
||||
[http://www.canon-asia.com/index.jsp?fuseaction=support∏_type=scanner&country;=SG](http://www.canon-asia.com/index.jsp?fuseaction=support&prod_type=scanner&country=SG)
|
||||
|
||||
After choosing the scanner in the dropdown-menu and clicking on "Drivers & Software" you will come to a popup-window where you can find the driver called "LiDE 500F Scanner Driver Ver. 11.2.4.0X (Mac OS X)" in the middle of the site:
|
||||
|
||||
|
||||
|
||||
And after installing (and rebooting the system) you can use the scanner with Photoshop CS3 on Intel-Macs. The scanner appears in Photoshop under File > Import > CanoScan LiDE 500f.
|
||||
|
||||
|
||||
|
||||
And don't forget to take a look in the preferences-dialog in the scan-window to set your color-management under the tab "Color Settings"
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Another important setting is enabling 16bit per channel scanning under the tab "Scan".
|
||||
|
||||
The only problem that remains is that Photoshop really uses 50% of my CPU-Power (2GHz Intel Core2Duo) just when the scan-window is open. But now after six months of waiting i can finally scan my analog photography in acceptable quality. Thanks to Canon for nothing!
|
||||
|
||||
**UPDATE: I wrote a follow up article describing how to use this scanner with the newest Mac operating system Leopard. Feel free to head over to this article to get the freshest facts about using this scanner with Mac OS X:
|
||||
[Using the CanoScan LiDE 500F scanner with Mac OS X Leopard](http://www.kremalicious.com/2008/05/using-the-canoscan-lide-500f-with-mac-os-x-leopard/)**
|
||||
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-02-26 23:24:17+00:00
|
||||
layout: post
|
||||
slug: how-to-quickly-generate-encrypted-logins-on-a-mac-for-htaccess-protected-sites
|
||||
title: How to quickly generate encrypted .htpasswd passwords
|
||||
wordpress_id: 12
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
As you may know you can easily password protect your website or parts of it using an htaccess file with special instructions on an [Apache](http://www.apache.org/)-based server. For using this method you just have to put a file named .htaccess (which includes the instructions for the webserver) and a file named .htpasswd (which includes the login-accounts) in the directory you want to have password protected. But you have to encrypt the passwords of the login data for yourself, which is a quick task on a Mac.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
I won't go into detail what exactly is needed in your .htaccess-file, since it often depends on your hosting provider which instructions are allowed. If you are new to all this stuff and want to password protect your website or parts of it, have a look in the part ["Password Protection"](http://www.javascriptkit.com/howto/htaccess3.shtml) of the [Comprehensive guide to .htaccess written by Feyd](http://www.javascriptkit.com/howto/htaccess.shtml).
|
||||
|
||||
The login data, in detail just the password is stored encrypted in the .htpasswd-file but you have to encrypt it before writing it in this file. On a Mac you can benefit from the underlying [Unix](http://www.apple.com/macosx/technology/unix.html)-technology for quickly generating your login accounts using the commandline utility htpasswd.
|
||||
|
||||
Just open Terminal application and type in the following code and replace username and password with your desired data:
|
||||
|
||||
|
||||
|
||||
<code>htpasswd -nb username password</code>
|
||||
|
||||
|
||||
|
||||
and press enter. Terminal should output a new line containing your login data with an encrypted password. Just paste it in your .htpasswd-file and you're done.
|
||||
|
||||
It's that easy.
|
||||
13
_src/_posts/2008-03-30-launch-of-kremaliciouscom.markdown
Normal file
13
_src/_posts/2008-03-30-launch-of-kremaliciouscom.markdown
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-03-30 19:24:21+00:00
|
||||
layout: post
|
||||
slug: launch-of-kremaliciouscom
|
||||
title: Launch of kremalicious.com
|
||||
wordpress_id: 14
|
||||
categories:
|
||||
- personal
|
||||
---
|
||||
|
||||
A fresh start of my website under the new domain www.kremalicious.com and with [Wordpress](http://www.wordpress.org) under the hood. My former website under [www.jpberlin.de/krema](http://www.jpberlin.de/krema) will no longer be updated and will be deleted soon. I just implemented a few posts from the old weblog.
|
||||
19
_src/_posts/2008-03-31-love-the-parallax.markdown
Normal file
19
_src/_posts/2008-03-31-love-the-parallax.markdown
Normal file
@ -0,0 +1,19 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-03-31 20:54:45+00:00
|
||||
layout: post
|
||||
slug: love-the-parallax
|
||||
title: Love the parallax
|
||||
wordpress_id: 15
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh?
|
||||
|
||||
I implemented the header effect of those flying black polaroids on kremalicious.com following the original idea by the folks of [clearleft](http://clearleft.com/) on [their silverback teaser page](http://www.silverbackapp.com/)
|
||||
|
||||
This effect draw much attention in the webdesign community and meanwhile there are some great articles about this effect. Over at thinkvitamin is a detailed explanation of the effect. [Paul Annett from clearleft gives an in-depth-view how they created the parallax effect on their silverback teaser page.](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/)
|
||||
|
||||
A more common explanation [gives Chris Coyier over at css-tricks.com.](http://css-tricks.com/3d-parralax-background-effect/trackback) He uses three star layers to make a cool space-effect.
|
||||
@ -0,0 +1,25 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-04 18:43:05+00:00
|
||||
layout: post
|
||||
slug: 6-web-design-tips-from-leonardo-da-vinci
|
||||
title: 6 Web Design Tips from Leonardo da Vinci
|
||||
wordpress_id: 24
|
||||
categories:
|
||||
- design
|
||||
post_format:
|
||||
- Link
|
||||
---
|
||||
|
||||
An awesome creative idea for a blog post about Web-Design from Joshua Clanton:
|
||||
|
||||
|
||||
|
||||
> Leonardo Da Vinci was one of the greatest artists of the Renaissance, leaving behind a legacy that continues to inspire artists, scientists and others. Here are six things we can learn from him about web design.
|
||||
|
||||
|
||||
|
||||
He also made two other articles in this creative style:
|
||||
[5 Web Design Tips from Michelangelo](http://joshuaclanton.com/blog/2008/02/11/5-web-design-tips-from-michelangelo/trackback/)
|
||||
[What Medieval Philosophers can teach us about Web Design](http://joshuaclanton.com/blog/2007/12/06/what-medieval-philosophers-can-teach-us-about-web-design/trackback/)
|
||||
36
_src/_posts/2008-04-04-aperture-file-types.markdown
Normal file
36
_src/_posts/2008-04-04-aperture-file-types.markdown
Normal file
@ -0,0 +1,36 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-04 01:55:54+00:00
|
||||
layout: post
|
||||
slug: aperture-file-types
|
||||
title: Aperture File Types
|
||||
wordpress_id: 21
|
||||
categories:
|
||||
- goodies
|
||||
- icon
|
||||
---
|
||||
|
||||
These icons are free for your personal use and include icons for all file types Apple’s Aperture 2.0 can handle (.jpeg, .gif, .tiff, .png, .pdf, .psd, .arw, .cr2, .crw, .mos, .nef, .raf, .raw, .srw, .tif, .oly, .fff, .3fr, .dng, .mrw, .pef, .srf, .orf).
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* Mac + Win + Linux + iContainer
|
||||
|
||||
|
||||
* Leopard ready (512×512)
|
||||
|
||||
|
||||
* custom 32px and 16px icons
|
||||
|
||||
|
||||
|
||||
Get them from [the goodies-page](http://www.kremalicious.com/goodies/) and have fun.
|
||||
|
||||
[download_button version=1.2]
|
||||
|
||||
And don't forget to read my article about [how to change the generic image icons in Mac OS X Leopard](http://www.kremalicious.com/2008/04/changing-the-image-icons-in-mac-os-x-leopard/).
|
||||
@ -0,0 +1,27 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-04 19:01:09+00:00
|
||||
layout: post
|
||||
slug: london-police-afraid-of-photographers
|
||||
title: London police afraid of photographers
|
||||
wordpress_id: 25
|
||||
categories:
|
||||
- photography
|
||||
---
|
||||
|
||||
> Thousands of people take photos every day. What if one of them seems odd? Terrorists use surveillance to help plan attacks, taking photos and making notes about security measures like the location of CCTV cameras. If you see someone doing that, we need to know. Let experienced officers decide what action to take.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
yeah, i'm guilty. i took several photos of cctv cameras:
|
||||
[At Agentur Ahron](http://www.agentur-ahron.de/bild_db/details.php?image_id=552)
|
||||
[At Panthermedia](http://www.panthermedia.net/index2.php?page=image_preview.php&image=441619)
|
||||
|
||||
And there are more in my photo archive... Guess you have no other choice than informing the London cops cause they just "need to know".
|
||||
|
||||
You can find the campaign website of the london police here:
|
||||
[Metropolitan Police 2008 Counter-Terrorism advertising campaign launched](http://www.met.police.uk/campaigns/campaign_ct_2008.htm)
|
||||
You will be surprised what other things they are afraid of...
|
||||
@ -0,0 +1,23 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-04 10:47:23+00:00
|
||||
layout: post
|
||||
slug: mac-os-x-leopard-designers-guide-to-icons-how-to-smashing-magazine
|
||||
title: 'Mac OS X Leopard: Designer’s Guide to Icons'
|
||||
wordpress_id: 22
|
||||
categories:
|
||||
- design
|
||||
post_format:
|
||||
- Link
|
||||
---
|
||||
|
||||
Nice article on Smashing Magazine by Kate England. It's the Human Interface Guidelines for icons in a nutshell: [Mac OS X Leopard: Designer’s Guide to Icons](http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-guide-to-icons/trackback):
|
||||
|
||||
|
||||
|
||||
> To get really beautiful icons, Apple recommends that you let a professional designer create your icons. Despite all the eye candy and realism that is possible to apply to icons, less is more. Strive for a simple solution using one easily recognisable object. The basic shape or silhouette of your icon can help users to quickly identify it. If you aim for an international market, your symbols need to also be internationally recognizable providing Worldwide Compatibility.
|
||||
|
||||
|
||||
|
||||
For reference you [can browse the Human Interface Guidelines (HIG) from Apple online](http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIntro/chapter_1_section_1.html) or [download it as a big pdf-file](http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/OSXHIGuidelines.pdf).
|
||||
@ -0,0 +1,21 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-05 14:01:51+00:00
|
||||
layout: post
|
||||
slug: first-principles-for-choosing-type
|
||||
title: First principles for choosing the right typeface
|
||||
wordpress_id: 26
|
||||
categories:
|
||||
- design
|
||||
post_format:
|
||||
- Link
|
||||
---
|
||||
|
||||
Nice article over at [i love typography](http://ilovetypography.com) about what to have in mind when choosing a typeface for your project, whether it's for web or print.
|
||||
|
||||
[On choosing type - First principles](http://ilovetypography.com/2008/04/04/on-choosing-type/trackback/):
|
||||
|
||||
|
||||
|
||||
> Before we get to the nitty-gritty of choosing type, let’s briefly talk about responsibility. Fundamentally, the responsibility we bear is two-fold: first we owe it to the reader not to hinder their reading pleasure, but to aid it; second, we owe a responsibility to the typeface or typefaces we employ. Good typefaces are designed for a good purpose, but not even the very best types are suited to every situation. Personally, I’m always a little nervous about using a newly acquired typeface. A new typeface is something like a newborn baby (though it doesn’t throw-up on you): don’t drop it, squeeze it too hard, hold it upside-down; in other words, don’t abuse it, treat it respectfully, carefully.
|
||||
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-06 21:21:22+00:00
|
||||
layout: post
|
||||
slug: 9-lesser-known-safari-features-worth-switching-for
|
||||
title: 9 Lesser Known Safari Features
|
||||
wordpress_id: 29
|
||||
categories:
|
||||
- design
|
||||
post_format:
|
||||
- Link
|
||||
---
|
||||
|
||||
> Inline Dictionary:
|
||||
Safari, being a Cocoa app (OS X), allows us to instantly define words we find. Simply highlight the word and hit the ctrl-cmd-d shortcut. So if I highlight the word ‘functionality’ in Safari and hit the shortcut, here’s what I get.
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-08 15:48:14+00:00
|
||||
layout: post
|
||||
slug: pulitzer-price-winners-2008-announced-various-photographers-awarded
|
||||
title: Pulitzer Price Winners 2008 announced, various photographers awarded
|
||||
wordpress_id: 31
|
||||
categories:
|
||||
- photography
|
||||
---
|
||||
|
||||
The Columbia University has announced the winners for 2008 of the 92nd annual Pulitzer Price. The Pulitzer Price itself is often cited as the highest honor for american journalists. Among the various categories there are two winning entries for [Breaking News Photography](http://www.pulitzer.org/year/2008/breaking-news-photography) and [Feature Photography](http://www.pulitzer.org/year/2008/feature-photography).
|
||||
|
||||
In the Breaking News Photography the price was won by Adrees Latif of Reuters [for his picture of the japanese videographer Kenji Nagai shot down during riots in Myanmar in 2007](http://www.pulitzer.org/year/2008/breaking-news-photography/works/).
|
||||
|
||||
In the Feature Photography category wins Preston Gannaway of the Concord (N.H.) Monitor "[for her intimate chronicle of a family coping with a parent's terminal illness.](http://www.pulitzer.org/year/2008/feature-photography/works/)"
|
||||
|
||||
Finally photographer Michel du Cille is a member of the Washington Post staff, which [was awarded in the Public Service category](http://www.pulitzer.org/year/2008/public-service/) for their work about "mistreatment of wounded veterans at Walter Reed Hospital, evoking a national outcry and producing reforms by federal officials."
|
||||
|
||||
You can also [have a look at the other winners on the website of the Pulitzer Board](http://www.pulitzer.org/2008/2008.html) or [grab the press-release](http://www.pulitzer.org/2008/Press%2520Release%2520-%25202008%2520Pulitzer%2520Prizes.pdf) where you'll also find [Bob Dylan awarded in the Special Citation](http://www.pulitzer.org/year/2008/special-citation) category.
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-09 13:13:42+00:00
|
||||
layout: post
|
||||
slug: changing-the-image-icons-in-mac-os-x-leopard
|
||||
title: 'HowTo: Changing the image icons in Mac OS X Leopard'
|
||||
wordpress_id: 32
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
[](/media/aperturefiletypes.png)After i released my [Aperture File Types icon set](http://www.kremalicious.com/goodies) many of you asked how they can really use these icons for displaying the icons of images on your Mac system. Sadly this isn't as easy as dropping them in [Candybar](http://www.panic.com/candybar) into a well for image icons cause there isn't any well for them. So using other icons as standard file type icons for images is a bit tricky. I discovered two ways of doing it, which involves overwriting resources of Preview.app and Photoshop. So before doing anything I mention in this post, you should make a backup copy of them.<!-- more -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Changing Preview.app icons
|
||||
|
||||
|
||||
|
||||
[](/media/openwithpreview.png)Image icons in Mac OS X doesn't really belong to the system icons. Instead they come from [Preview.app](http://www.apple.com/macosx/features/300.html%23preview) which is the factory default application for viewing images on Mac OS X.
|
||||
|
||||
And since Preview.app is used to show the icons we can find all file type icons for images in Preview.app > Contents > Resources. You get there by right clicking on Preview in your Applications folder and choosing Show Package Contents from the context menu. There you'll find icons in icns-format for bmp, dng, eps, fax, fpx, gif, icns, ico,jp2, jpeg, openexr, pdf, pict, png, pntg, ps, psd, qtif, radiance, raw, sgi, tga, tiff, xbm.
|
||||
|
||||
You can just rename the desired icons from my icon pack in icns-format and replace them in the contents > resources of Preview.app.
|
||||
|
||||
|
||||
|
||||
But, as you can see, Preview doesn’t have an unique icon for all RAW file types. Instead it uses just a generic RAW-icon named RAW.icns.
|
||||
|
||||
[](/media/raw.png)So here’s what you can do: Grab your desired RAW-file icon from my icon package in icns-format. Rename it as RAW.icns. Copy it over to Preview.app > Contents > Resources and overwrite the standard icon. Making a backup copy of Preview.app before doing that is a wise thing here.
|
||||
|
||||
The problem is that from now on every RAW-file is represented by this icon, which is ok if you just use one RAW-format. But it's a problem if you use more than one RAW format.
|
||||
|
||||
|
||||
|
||||
## Changing the file type icons of Photoshop
|
||||
|
||||
|
||||
|
||||
[](/media/PS_CR2FileIcon.png)A solution to this mess is Photoshop. So this solution just works if you have Photoshop installed. Photoshop does have a unique icon for every RAW-format out there. To confirm that you can choose Adobe Photoshop as Standard Application in the Get Info window and the icon of the file should change instantly.
|
||||
|
||||
So here's the trick: The icons from Photoshop are stored in Adobe Photoshop CS3.app > Contents > Resources. the icon e.g. for .cr2-icons is named PS_CR2FileIcon.icns. Just rename the icons in my pack in the naming scheme used in the Photoshop Resources and replace them.
|
||||
|
||||
|
||||
|
||||
Hope this helps you although it's very tricky. But changing icons for images in Mac OS X is a bit out of my control since i don't develop Mac OS X ;-)
|
||||
|
||||
By the way, this should also work in Tiger...
|
||||
|
||||
|
||||
30
_src/_posts/2008-04-09-measuring-the-color-of-light.markdown
Normal file
30
_src/_posts/2008-04-09-measuring-the-color-of-light.markdown
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-09 17:44:23+00:00
|
||||
layout: post
|
||||
slug: measuring-the-color-of-light
|
||||
title: Measuring the Color of Light
|
||||
wordpress_id: 33
|
||||
categories:
|
||||
- photography
|
||||
post_format:
|
||||
- Link
|
||||
---
|
||||
|
||||
Ever wondered what the heck 6500 Kelvin has to do with your photos? Here's an in-depth article from the blog of [James Duncan Davidson](http://duncandavidson.com/blog/) for better understanding of the whole color and white balance thing in photography.
|
||||
|
||||
|
||||
|
||||
[Measuring the Color of Light by James Duncan Davidson](http://duncandavidson.com/2008/04/kelvins-and-the-color-of-light.html):
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> Like all settings, the color of light has a unit associated with it. The unit, however, isn't unique to specifying the color of light. Instead, it's the same SI unit that is used for temperature: the Kelvin. I know that the first few times I delved into this subject matter, I thought it was a strange unit to use, mostly because light itself doesn't have a temperature. Since it's radiation, when it hits a surface it can cause that surface to heat up. But the light itself is neither hot nor cold. So, why the heck is a unit of temperature used to describe the color of it? ...
|
||||
|
||||
|
||||
|
||||
And another in-depth article from James which is a follow up of the above article:
|
||||
[Color Temperature and White Balance](http://duncandavidson.com/2008/04/color-temperature-and-sensors.html)
|
||||
@ -0,0 +1,24 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-10 13:16:47+00:00
|
||||
layout: post
|
||||
slug: the-story-behind-the-pulitzer-picture
|
||||
title: The story behind the Pulitzer picture
|
||||
wordpress_id: 34
|
||||
categories:
|
||||
- photography
|
||||
post_format:
|
||||
- Link
|
||||
---
|
||||
|
||||
Two days ago [I posted links to the winning photographers of the Pulitzer Price 2008](http://www.kremalicious.com/2008/04/pulitzer-price-winners-2008-announced-various-photographers-awarded/). Now Adrees Latif, who won in the category Breaking News Photography for his picture of the japanese videographer Kenji Nagai shot down during riots in Myanmar in 2007, [reveales the story behind the picture in the Reuters Blog](http://blogs.reuters.com/photo/2008/04/07/the-story-behind-the-pictures/):
|
||||
|
||||
|
||||
|
||||
> Within minutes, the crowd swelled from hundreds to a few thousand. The soldiers threw barbed wire coils across the roads.
|
||||
Knowing that hundreds of people were gunned down in similar circumstances in a 1988 uprising, I climbed an old crosswalk directly overhead, to get to one of the few spots offering a clear view...
|
||||
|
||||
|
||||
|
||||
[Read the whole story on the Reuters Blog](http://blogs.reuters.com/photo/2008/04/07/the-story-behind-the-pictures/)
|
||||
@ -0,0 +1,32 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-11 14:16:51+00:00
|
||||
layout: post
|
||||
slug: photographers-strike-back-in-uk
|
||||
title: Photographers strike back in UK
|
||||
wordpress_id: 36
|
||||
categories:
|
||||
- photography
|
||||
post_format:
|
||||
- Link
|
||||
---
|
||||
|
||||
[](/media/londonpolice.jpg)Remember [the campaign of the London police](http://www.kremalicious.com/2008/04/london-police-afraid-of-photographers/) calling all people to regard photographers as potential terrorists?
|
||||
|
||||
Now the [PressGazette reports](http://www.pressgazette.co.uk/story.asp?sectioncode=1&storycode=40875&c=1) that
|
||||
|
||||
|
||||
|
||||
>
|
||||
|
||||
>
|
||||
> Labour MP [Member of Parliament] Austin Mitchell is planning to take a delegation of photographers to the Home Office to protest about the growing number of cases in which police officers and others try to stop professional and amateur photographers taking pictures in public places.
|
||||
>
|
||||
>
|
||||
|
||||
|
||||
|
||||
|
||||
You can read the whole story here:
|
||||
[Photographers lobby parliament over police curbs](http://www.pressgazette.co.uk/story.asp?sectioncode=1&storycode=40875&c=1)
|
||||
@ -0,0 +1,19 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-14 13:51:39+00:00
|
||||
layout: post
|
||||
slug: new-automation-helper-for-apples-aperture-released
|
||||
title: New automation helper for Apple's Aperture released
|
||||
wordpress_id: 37
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Panoramic photographer [Ian Wood](http://www.ianjameswood.co.uk/) has released an automation helper for Apple's Aperture called [Aperture Assistant](http://aperture-assistant.com) as a first beta version (build 49). Aperture Assistent allows you to setup and automate complex tasks for Apple's Aperture beyond the Apple delivered Automator actions in Mac OS X. The setup of these workflows is as easy as dragging around visual flowcharts.
|
||||
|
||||
Although the interface looks and feels a bit buggy (dude, it's a beta!) it looks very promising.
|
||||
|
||||
[You can download it from the programs website](http://aperture-assistant.com/medias). The beta version will expire on 15th May 2008 but a new beta should be available before that says Ian Wood. While Mac OS X 10.5.2 and Aperture 2.1 are the recommended system requirements Aperture Assistant also works with Mac OS X 10.4 and/or Aperture 1.5.6 and above.
|
||||
@ -0,0 +1,46 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-15 17:36:34+00:00
|
||||
layout: post
|
||||
slug: webkit-team-introduced-css-based-gradients
|
||||
title: WebKit team introduces CSS-based gradients
|
||||
wordpress_id: 38
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
Writing right now on a longer article about text-shadow and it's implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin' Safari, the blog of the WebKit development team:
|
||||
|
||||
|
||||
|
||||
> WebKit now supports gradients specified in CSS. There are two types of gradients: linear gradients and radial gradients.
|
||||
|
||||
|
||||
|
||||
Take a look at [the entry on Surfin' Safari to learn how those css-based gradients work and how they can be coded](http://webkit.org/blog/175/introducing-css-gradients/):
|
||||
|
||||
|
||||
|
||||
> So what exactly is a gradient in CSS? It is an image, usable anywhere that image URLs were used before. That’s right… anywhere.
|
||||
>
|
||||
>
|
||||
|
||||
|
||||
>
|
||||
> You can use gradients in the following places:
|
||||
>
|
||||
>
|
||||
|
||||
|
||||
>
|
||||
> background-image
|
||||
border-image
|
||||
list-style-image
|
||||
content property
|
||||
|
||||
|
||||
|
||||
Although the WebKit team is saying it is supported "now" [a commenter on Surfin' Safari states](http://webkit.org/blog/175/introducing-css-gradients/#comment-24343) that it seems the whole function isn't included in the latest nightly builds of WebKit.
|
||||
|
||||
So it will take some time, 'til it's worth replacing the gradient images on my h3 and h4 headlines with just simple css code...
|
||||
@ -0,0 +1,595 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-17 01:32:13+00:00
|
||||
layout: post
|
||||
slug: make-cool-and-clever-text-effects-with-css-text-shadow
|
||||
title: 'Text-Shadow Exposed: Make cool and clever text effects with css text-shadow'
|
||||
wordpress_id: 39
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
|
||||
|
||||
The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it's not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image.
|
||||
|
||||
|
||||
|
||||
Because it's included in Safari since version 1.1(!) Mac users should be aware of various effects done by this property. In fact, most companys and persons with mac users as their main target audience use this effect on their websites.
|
||||
|
||||
This article describes how text-shadow works, what you can do with it and which browsers currently support it. At the end of this article I've made up some examples and provide a list of useful resources.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
Here's an overview of the headlines in this article. As you can see it's rather complex and long. Be sure to get a delicious fresh cup of coffee or tea before reading on:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1. What text-shadow is good for
|
||||
|
||||
|
||||
2. Which browsers support it
|
||||
|
||||
|
||||
3. Cross-browser compatibility
|
||||
|
||||
|
||||
4. How does it work and how to use it
|
||||
|
||||
|
||||
5. Examples with code & demos
|
||||
|
||||
|
||||
6. Hack: Safari Text Rendering
|
||||
|
||||
|
||||
7. More articles and resources
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1. What text-shadow is good for
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
subtle glow in my navigation
|
||||
|
||||
The main goal of this property is to give designers and css coders a tool to make text effects, which could only be done before by rendering text as images with all the side effects. Text rendered as an image isn't searchable and therefore very undelicious for search engines. Another side effect is the fact that images can be way more bigger as one small line of code in terms of file size. As you may know most css-files, which contain the whole layout of a website, are smaller than one image on most websites. So it's really clever to use a css function instead of images for reducing unnecessary traffic.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
text-shadow on Apple.com
|
||||
|
||||
Utilizing text-shadow to simulate engraved or stenciled text is widely used on websites. Apple did it everywhere in Mac OS X not just since Leopard (just look at the titlebars). So if you design a website for Mac users you can increase the sexyness of your website, because this particular usage of text-shadow integrates very well with the overall look of Mac OS X. I will explain how to achieve this engraved-text-on-metal effect later on in this article.
|
||||
|
||||
|
||||
|
||||
## 2. Which browsers support it?
|
||||
|
||||
|
||||
|
||||
 
|
||||
 In fact, text-shadow is not a new property since it was first defined with [CSS2 in 1998](http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props) but it was just implemented by the KHTML/WebKit-folks. But it's available in [Safari](http://www.apple.com/safari/) since version 1.1 (2003), in [Konqueror](http://www.konqueror.org/features/browser.php) since version 3.4 (I believe, not sure) and [Opera](http://www.opera.com/) 9.5. Furthermore it's also supported by [Firefox](http://www.mozilla.com/en-US/firefox/firefox.html) 3.1/3.5 and finally [Google Chrome](http://www.google.com/chrome) 2 adds full support for the text-shadow property after they had stripped this from the first version of Chrome.
|
||||
|
||||
On the Mac platform WebKit is also used in various other programs with a browser included like [Coda](http://www.panic.com/coda/) from Panic, [CSSedit](http://www.macrabbit.com/cssedit/) from MacRabbit or [NetNewsWire](http://www.newsgator.com/NetNewsWire.aspx) from NewsGator. Also every browser which is powered by the WebKit engine is able to render the text-shadow property, like [Shiira](http://shiira.jp/en.php), [OmniWeb](http://www.omnigroup.com/applications/omniweb/) or [Epiphany](http://www.gnome.org/projects/epiphany/) which are either for Mac or Linux.
|
||||
|
||||
But with Safari 3.1, the beta release of Opera 9.5, Firefox 3.1 and Google Chrome 2 the text-shadow property is finally finding it's way to the Windows desktop after 10 years of it's birth and Opera is the first non-WebKit browser which supports text-shadow.
|
||||
|
||||
Here's a list of some browsers and their compatibilty for the text-shadow property to give you an overview:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Safari 3.1 (Mac/Win)
|
||||
|
||||
|
||||
yes, but no multiple shadows
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Safari 4 (Mac/Win)
|
||||
|
||||
|
||||
yes, full support
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Opera 9.5 (Mac/Win/Lin)
|
||||
|
||||
|
||||
yes, full support
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Firefox 2/3 (Mac/Win/Lin)
|
||||
|
||||
|
||||
no
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Firefox 3.1/3.5 (Mac/Win/Lin)
|
||||
|
||||
|
||||
yes, full support
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Google Chrome 1 (Win)
|
||||
|
||||
|
||||
no
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Google Chrome 2 (Win)
|
||||
|
||||
|
||||
yes, full support
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
IE 7/8 (Win)
|
||||
|
||||
|
||||
no
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Shiira (Mac)
|
||||
|
||||
|
||||
yes, but no multiple shadows
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Konqueror (Lin/Mac/Win)
|
||||
|
||||
|
||||
yes, full support
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
iCab (Mac)
|
||||
|
||||
|
||||
yes, but no multiple shadows
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Epiphany (Lin)
|
||||
|
||||
|
||||
yes, since April 2008
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Safari on iPhone
|
||||
|
||||
|
||||
yes, but no multiple shadows
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Nokia Symbian-Smartphones (Series 60)
|
||||
|
||||
|
||||
yes
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Opera Mini 4.1
|
||||
|
||||
|
||||
yes, no blur radius
|
||||
|
||||
|
||||
|
||||
|
||||
But wait, regarding Safari on Mac OS X there's one more (bad) thing to remember. The Mac OS X 10.5.2 update [resulted in minor changes of the WebKit text-shadow rendering](http://www.islayer.com/blog/?p=255). It seems that with this update text-shadow is finally rendered correctly as WebKit added one extra pixel to the shadow offset on 10.4.11 and 10.5.1.
|
||||
|
||||
|
||||
|
||||
## 3. Any chance of cross-browser compatibility?
|
||||
|
||||
|
||||
|
||||
So the major browser Internet Explorer doesn't support it yet but just don't count on Internet Explorer. I guess they are happy with [coding their own non-standard version of CSS for IE9](http://blogs.msdn.com/ie/archive/2008/04/01/announcing-css-2012.aspx) and making shadows with those [DXImageTransform.Microsoft.Shadow-stuff](http://msdn2.microsoft.com/en-us/library/ms532985(VS.85).aspx) which in the end just [looks horrible](http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/). So even IE 9 won't have it included.
|
||||
|
||||
But with Firefox 3.1 including text-shadow all major browsers except Internet Explorer are now supporting it. So you can start using it all around your next projects just with a lot of other techniques which in the end aren't available in Internet Explorer.
|
||||
|
||||
One cross-browser trick would be to use conditional tags and serve Internet Explorer users different stylesheets with either a [cross-browser compatible hack](http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/) or via the old school way with text rendered as images. If you don't need the blur radius value for your desired effect than there's [a nice idea on Design Meme for this problem](http://www.designmeme.com/articles/dropshadows/) which includes producing a shadow with the css pseudo-element :before.
|
||||
|
||||
Now that you're aware of it's compatibility with the various browsers we can take a look at the syntax of the text-shadow property.
|
||||
|
||||
|
||||
|
||||
## 4. How does it work and how to use it
|
||||
|
||||
|
||||
|
||||
When defined in a css-stylesheet the property syntax should look like this:
|
||||
|
||||
[css]p { text-shadow: 1px 1px 1px #000; }[/css]
|
||||
|
||||
The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:
|
||||
|
||||
1. value = The X-ccordinate
|
||||
2. value = The Y-coordinate
|
||||
3. value = The blur radius
|
||||
4. value = The color of the shadow
|
||||
|
||||
Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontically (first value) and placing the shadow below the text vertically (second value).
|
||||
|
||||
The third value, the blur radius, is an optional value which can be specified but don't have to. It's the amount of pixels the text is stretched which causes a blur effect. If you don't use the third value it is threated as if you sepcified a blur radius of zero.
|
||||
|
||||
Alternatiely, for WebKit-based browsers, you can use rgba values instead of hex code colors as the fourth value. The last number stands for transparency and can be set between 0.0 and 1.0 so you can make the text-shadow more subtle:
|
||||
|
||||
[css]p { text-shadow: 1px 1px 1px rgba(255,255,255, .5); }[/css]
|
||||
|
||||
Of course the effects done by this property often depend on the colors of your text and your background, so let's take a look at what we can do with all those combinations.
|
||||
|
||||
|
||||
|
||||
|
||||
## 5. Examples with code & demos
|
||||
|
||||
|
||||
|
||||
I've made up some examples to show you the possibilities of this css property. Every example code follows a text example which is rendered by your browser. Below that you'll find a screenshot of the described effect rendered in Safari 3.1 on Mac OS X 10.5.2 so the n<del>on-WebKit and non-Opera</del> Internet Explorer users can see the effect.
|
||||
|
||||
|
||||
|
||||
## 5.1 Simple drop shadow
|
||||
|
||||
|
||||
|
||||
With the following lines of css code you get black text on white background with a smooth black drop shadow.The shadow is placed 2 pixels right and 2 pixels below the text and has a blur radius of 3:
|
||||
[css]color: #000;
|
||||
background: #fff;
|
||||
text-shadow: 2px 2px 3px #000;[/css]
|
||||
|
||||
|
||||
|
||||
I'm a text with a smooth shadow
|
||||
|
||||
|
||||
|
||||
|
||||
Or you can make it not so smooth but also good looking by ignoring the blur radius and setting a lighter color for the shadow:
|
||||
[css]color: #000;
|
||||
background: #fff;
|
||||
text-shadow: 2px 2px #000;[/css]
|
||||
|
||||
|
||||
I'm a text with no smooth shadow
|
||||
|
||||
|
||||
|
||||
|
||||
Using some negative values you can make the shadow look like it's lightsource is placed below the text:
|
||||
[css]color: #000;
|
||||
background: #fff;
|
||||
text-shadow: 2px -2px 3px #000;[/css]
|
||||
|
||||
|
||||
I'm a text with a smooth shadow
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Of course you can make it more funky and horrible to read:
|
||||
[css]color: #33cc33;
|
||||
background: #fff;
|
||||
text-shadow: 2px 2px 2px #ff3300;[/css]
|
||||
|
||||
|
||||
I'm funky colored text
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5.2 Apple style (engraved text on metal)
|
||||
|
||||
|
||||
|
||||
With those lines you get this engraved-text-on-metal effect often used by Apple. You should use a grey background and a very dark text color for this. It's nothing more than a white or light grey shadow which is placed 1px below the text. You can use a blur of 1 to make it look more round. I've used bold text to make the effect more visible:
|
||||
[css]color: #000;
|
||||
background: #666;
|
||||
text-shadow: 0px 1px 1px #fff;[/css]
|
||||
|
||||
|
||||
I'm engraved text
|
||||
|
||||
|
||||
|
||||
|
||||
This even works the other way around on a black background with grey text by adjusting only the color values:
|
||||
[css]color: #666;
|
||||
background: #000;
|
||||
text-shadow: 0px 1px 0px #ccc;[/css]
|
||||
|
||||
|
||||
I'm engraved text on black
|
||||
|
||||
|
||||
|
||||
|
||||
Or you can make this one which looks like the text stands out from the background:
|
||||
[css]color: #fff;
|
||||
background: #666;
|
||||
text-shadow: 0px 1px 1px #000;[/css]
|
||||
|
||||
|
||||
I'm on top of the background
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5.3 Make your text glow
|
||||
|
||||
|
||||
|
||||
By utilizing the blur radius we can achieve some interesting effects. Here's some subtle glowing white text on a black background:
|
||||
[css]color: #fff;
|
||||
background: #000;
|
||||
text-shadow: 1px 1px 6px #fff;[/css]
|
||||
|
||||
|
||||
I'm subtle glowing text
|
||||
|
||||
|
||||
|
||||
|
||||
You can also make the whole text blurry by using the same color for text and shadow with no offset:
|
||||
[css]color: #fff;
|
||||
background: #666;
|
||||
text-shadow: 0px 0px 3px #fff;[/css]
|
||||
|
||||
|
||||
I'm also glowing but more blurry
|
||||
|
||||
|
||||
|
||||
|
||||
We can make it quite mysterious by using the same color for text and background and make the text just visible through text-shadow. Remember that the same color for text and background can be bad for usability...:
|
||||
[css]color: #000;
|
||||
background: #000;
|
||||
text-shadow: 1px 1px 4px #fff;[/css]
|
||||
|
||||
|
||||
I'm pretty mysterious looking text
|
||||
|
||||
|
||||
|
||||
|
||||
Or the other way around to make it look light and... milky:
|
||||
[css]color: #fff;
|
||||
background: #fff;
|
||||
text-shadow: 1px 1px 4px#000;[/css]
|
||||
|
||||
|
||||
I'm pretty milky looking text
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5.4 Dublicate your text
|
||||
|
||||
|
||||
|
||||
With text-shadow you can make pixel-perfect dublicates of any text. Just add some pixels to your font-size and use it as a value for the vertical description of the shadow offset:
|
||||
[css]color: #000;
|
||||
background: #fff;
|
||||
text-shadow: 0px 20px #000;[/css]
|
||||
|
||||
|
||||
Which line is text, which is shadow?
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5.5 Multiple shadows
|
||||
|
||||
|
||||
|
||||
Sadly Safari 3 isn't able to render more than one shadow on one element. It just renders the first property description and will ignore all others. But using multiple shadows looks awesome. So currently the following will only work in Opera 9.5 beta or Konqueror. Just have a look at the screenshot below the example if you're not using these browsers. Due to the lack of support for this in Safari the screenshot below the example is rendered in Opera 9.5 beta on Mac OS X 10.5.2. For no reason Opera 9.5 beta doesn't render the background color:
|
||||
[css]color: #000;
|
||||
background: #000;
|
||||
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;[/css]
|
||||
|
||||
|
||||
Isn't this awesome?
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 6. Hack: Avoid jagged light-on-dark text rendering in Safari
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/text-shadow-hack.png)
|
||||
|
||||
sub-pixel rendering (click to zoom)
|
||||
|
||||
|
||||
More than a hack than an effect but it addresses the poor light-on-dark text rendering in Safari. This is caused by the [sub-pixel rendering](http://en.wikipedia.org/wiki/Subpixel_rendering) of OS X's Quartz 2D layer as a part of the Core Graphics framework. Also Safari 3.1 on Windows uses sub pixel rendering instead of plain anti-aliasing.
|
||||
|
||||
[](/media/text-shadow-hack.png)
|
||||
|
||||
anti-alias rendering through text-shadow (click to zoom)
|
||||
|
||||
In most situations this improves the legibility and smoothness of all 2D-text rendered throughout the Mac OS X interface which makes everything look so gorgeous. But it has some [rough problems with light text on dark backgrounds in Safari](http://equinox-of-insanity.com/2007/08/osx-text-rendering/) This problem doesn't exist when using anti-aliasing.
|
||||
|
||||
And since [24ways'](http://24ways.org/2006/knockout-type) and [Cameron's discovery](http://cameron.io/photo/id:1055) we know that Safari renders all text-shadow-styled text with plain anti-aliasing instead of sub-pixels. So we can add a text-shadow with an offset of 0px to the desired text style:
|
||||
|
||||
[css]text-shadow: 0 0 0 #000;[/css]
|
||||
|
||||
This causes Safari 3 to use anti-aliasing and make your text on dark backgrounds more legible with it.
|
||||
|
||||
But this won't work with the new Safari 4 (public beta) as [John pointed out in the comments](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-37029). To just cite him:
|
||||
|
||||
Apparently if your shadow has no blur, then the text will be sub-pixel rendered. But more than 1px blurred uses the anti-alias rendering like "usual."
|
||||
|
||||
But fear not. Rogie King already came up with a solution for this which you can read here:
|
||||
[Safari's text-shadow anti-aliasing CSS hack Revision](http://www.komodomedia.com/blog/2009/03/safari-text-shadow-anti-aliasing-css-hack/)
|
||||
|
||||
|
||||
|
||||
## 7. More articles and resources
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* [Description of the text-shadow property](http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows) in: [CSS3 W3C Candidate Recommendation from 14 May 2003](http://www.w3.org/TR/2003/CR-css3-text-20030514)
|
||||
text-shadow in-depth
|
||||
|
||||
|
||||
|
||||
* [Cross-browser text-shadow by Kilian Valkhof](http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/)
|
||||
Nice article about trying to make text-shadow cross-browser compatible
|
||||
|
||||
|
||||
|
||||
* [CSS Drop Shadows on Design Meme](http://www.designmeme.com/articles/dropshadows/)
|
||||
An easy css-hack for cross-browser compatibilty (but without a blur radius)
|
||||
|
||||
|
||||
|
||||
* [text-shadow hack for firefox on klog](http://verens.com/archives/2005/02/28/text-shadow/)
|
||||
Another hack just for Gecko-based browsers by utilizing javascript
|
||||
|
||||
|
||||
|
||||
* [Firefox plugin "A Text Shadow"](http://piro.sakura.ne.jp/xul/_textshadow.html.en)
|
||||
A xpi-plugin providing support for text-shadow in Firefox written by Shimoda Hiroshi
|
||||
|
||||
|
||||
|
||||
* [Animating css text-shadow with javascript](http://maettig.com/code/css/text-shadow.html)
|
||||
The author animates multiple text-shadows with javascript, really incredible. Also various nice examples on this page.
|
||||
|
||||
|
||||
|
||||
* [Text-Shadow in Safari 1.1](http://whatdoiknow.org/archives/001305.shtml)
|
||||
Propably the oldest text-shadow demo originally made for Safari 1.1 ;-)
|
||||
|
||||
|
||||
|
||||
* [10.5.2 brings WebKit text-shadow rendering changes](http://www.islayer.com/blog/?p=255)
|
||||
Blog entry on islayer.com about different text-shadow rendering across different Mac OS X versions
|
||||
|
||||
|
||||
|
||||
* [CSS3 preview on css3.info](http://www.css3.info/preview/)
|
||||
"Everything you need to know about CSS3" - get excited before CSS3 becomes final
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Article Updates
|
||||
|
||||
|
||||
|
||||
|
||||
04/04/2008 updated the browser table to include Safari 4 and Google Chrome, stripped some parts in the compatibility and cross browser description and included some words on the Safari text-rendering hack for Safari 4
|
||||
|
||||
|
||||
|
||||
|
||||
10/23/2008 updated the Browser support part to reflect the implementation of text-shadow in Firefox 3.1
|
||||
|
||||
|
||||
|
||||
|
||||
update 2 added a new paragraph "5.6 Avoid jagged light-on-dark text rendering in Safari" as another possible usage of text-shadow (tanks Armen!)
|
||||
|
||||
|
||||
|
||||
|
||||
update 1 added some lines in the "2. Which Browsers support it" part about different text-shadow rendering across different Mac OS X versions
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-22 05:58:41+00:00
|
||||
layout: post
|
||||
slug: apple-releases-sdk-for-aperture-21
|
||||
title: Apple releases plugin-SDK for Aperture 2.1
|
||||
wordpress_id: 42
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Just right after [Tiffen and Digital Film Tools announced](http://www.kremalicious.com/2008/04/first-aperture-adjustment-plugins-have-arrived/) their new image editing plugins for Aperture 2.1 Apple has released the Software Development Kit (SDK) for coding Aperture 2.1 plugins. It's available [from Apple's Developer Connection](https://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?bundleID=20044) for registered members (registering is free). You can grab the Aperture 2.1 plugin-SDK (3D9) as a 595KB download from there and start coding. If you want to know what exactly you can do with it as a programmer you should [read those lines from Apple](http://developer.apple.com/appleapplications/aperturesdk.html).
|
||||
|
||||
So it should be just a matter of time before we see another bunch of plugins popping out.
|
||||
@ -0,0 +1,25 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-04-28 12:53:18+00:00
|
||||
layout: post
|
||||
slug: more-awesomeness-from-the-webkit-team-css-masks
|
||||
title: 'More awesomeness from the WebKit team: CSS Masks'
|
||||
wordpress_id: 44
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
They won't stop with their cutting edge love. After having [text-shadow](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/) implemented since many years and having a bunch of other cool stuff implemented like CSS gradients or CSS box-shadow the WebKit team freshly announced a new cool feature: CSS alpha masks.
|
||||
|
||||
From the Surfin' Safari Blog:
|
||||
|
||||
|
||||
|
||||
> WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image.
|
||||
|
||||
|
||||
|
||||
It even can be applied to a video-element.
|
||||
|
||||
(Via [Surfin' Safari](http://webkit.org/blog/181/css-masks/))
|
||||
@ -0,0 +1,91 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-04 16:04:48+00:00
|
||||
layout: post
|
||||
slug: using-the-canoscan-lide-500f-with-mac-os-x-leopard
|
||||
title: Using the CanoScan LiDE 500F scanner with Mac OS X Leopard
|
||||
wordpress_id: 45
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
A while ago I [wrote about my problems](http://www.kremalicious.com/2007/06/finally-a-universal-scanner-driver-for-the-canon-canoscan-lide-500f-for-intel-macs/) finding a universal scanner driver from Canon for my CanoScan LiDE 500F to use it under Mac OS X. The solution was the Canon Asia website where a universal driver version was available.
|
||||
|
||||
But since then Apple released Mac OS X 10.5 Leopard in october 2007 and the Canon driver with the version 11.2.4.0X stopped working on this new operating system.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
## Finding and downloading the new driver 11.2.5.0X
|
||||
|
||||
|
||||
|
||||
But there's a new driver available. It was posted on the Canon USA website on 7 December 2007 and on the Canon Asia website on 28 January 2008. The new version number is 11.2.5.0X for Mac OS X and yes the driver remains a universal scanner driver running fine on both PowerPC- and Intel-Macs.
|
||||
|
||||
The changelog says:
|
||||
|
||||
|
||||
> Newly supports Mac OS X v10.5.
|
||||
ScanGear Starter is removed. (Because the operation problem occurs when the destination to save the scan file is changed in Mac OS X v10.5.)
|
||||
|
||||
|
||||
|
||||
So this sounds just right. You can download the new universal scanner driver from [Canon USA](http://www.usa.canon.com/consumer/controller?act=ModelInfoAct&tabact=SupportDetailTabAct&fcategoryid=235&modelid=11011#DownloadDetailAct) or [Canon Asia](http://support-asia.canon-asia.com/contents/ASIA/EN/0900321901.html). Following these links takes you right to the driver download page for this scanner.
|
||||
|
||||
[](/media/canondrivercontents.png)You will get a file named lide500fosx11250en.dmg in your downloads folder. Just mount it and double click the package installer inside of the image. If you have a previous version of the driver installed you should remove all parts of it from the system and make a restart to avoid any problems. You can follow my screenshot on the right which shows the contents of the installer package to find all components on your system.
|
||||
|
||||
After the installation is finished you have to restart your Mac (very Mac-unlike) because the package installed a new Kernel extention.
|
||||
|
||||
After a restart you should be able to use the scanner as a TWAIN device all over the system.
|
||||
|
||||
|
||||
|
||||
## Using the scanner in Mac OS X Leopard
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Preview / Image Capture
|
||||
|
||||
|
||||
|
||||
[](/media/scanwindow_preview.png)Leopard included a new version of Preview, the pdf and image-viewing application by Apple and also a new version of Image Capture. To use it with your scanner just plug in the scanner, open Preview and choose File > Import Image or just open the Image Capture application. A new scan window should open doing an automatic overview scan. In the scan window you have some minor options like resolution, scaling etc. You can even make simple but powerful image corrections down at the bottom (set it to manual).
|
||||
|
||||
But the best thing with the new Image Capture is the feature of setting the bit depth of the scanner to 16 bits. This was just possible before through the Canon software ScanGear in Photoshop.
|
||||
|
||||
|
||||
|
||||
## Scanning right into Apple Aperture?
|
||||
|
||||
|
||||
|
||||
[](/media/aperturescan.png) Wouldn't that be great? Although the scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. Maybe someone will code a generic scanning plugin for Aperture like VueScan for Aperture or something like that. But I guess this is something just Canon is able to do that and they won't.
|
||||
|
||||
But using Preview/Image Capture and Automator you can bypass this limitation. If you want to know how you can do that have a look at my article [Scan images directly into Apple Aperture](http://www.kremalicious.com/2008/05/scan-images-directly-into-apple-aperture/).
|
||||
|
||||
|
||||
|
||||
## Adobe Photoshop CS3
|
||||
|
||||
|
||||
|
||||
[](/media/scangearwindow.png)Just like with Creative Suite 2 you can use Photoshop to import images with your Scanner by using the Canon ScanGear software which indeed is just the scan window in Photoshop. Just chose File > Import > CanoScan LiDE 500F in Photoshop. If you have installed the driver for the first time the scan window in Photoshop defaults to Simple Mode. But if you want it simple you better chose a Preview/Image Capture workflow. So in Photoshop you should head over to Advanced Mode and check the preferences button down at the bottom first.
|
||||
|
||||
[](/media/scangear_color.png)Under the Color Settings tab you should set your preferred color management options.
|
||||
|
||||
Under the Scan tab you should enable 48/16 bit Output to enable scanning your images with a depth of 16 bit just like the RAW images from your dslr or digital camera. Click OK to save your preferences.
|
||||
|
||||
Another task you should do before scanning the first time with this driver is calibrating your scanner. You can find it in the image settings section where you'll have to click on the double triangle to reveal the options for calibrating. Just click Calibrate and wait until it's finished.
|
||||
|
||||
Now you can set your scanning preferences and start scanning into Photoshop. Don't forget to chose Color(48Bit) in the Color Mode dropdown menu for 16 bit scanning.
|
||||
|
||||
|
||||
|
||||
The advantage of this last workflow with Photoshop and ScanGear is more control over the scanner and therefore more control of the way your images will look right after the scan. If you want simplicity do it the OSX way by using Preview/Image Capture and simply automate it with Automator to serve your scanned images to your preferred application.
|
||||
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-05 04:15:11+00:00
|
||||
layout: post
|
||||
slug: scan-images-directly-into-apple-aperture
|
||||
title: Scan images directly into Apple Aperture
|
||||
wordpress_id: 46
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
- tutorial
|
||||
---
|
||||
|
||||
Wouldn't that be great? Hook up your scanner, fire up Aperture, click on Import and the images coming directly from your scanner plate? Although my scanner is shown as a source in the import dialogue you can't import images with it directly from Aperture. But using Preview/Image Capture and Automator you can bypass this limitation.
|
||||
|
||||
In the Image Capture scan window you can define an automatic task which will follow the scan process. It defaults to Preview meaning that the scanned image will open as a new Preview document after the scan. But we can make the images import to Aperture after the scan just with tools which are build into Mac OS X and come with every Mac (besides Aperture). So here's what you can do to scan directly into Aperture in 3 simple steps.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1. Make an Automator action
|
||||
|
||||
|
||||
|
||||
Open up Automator and click on the photos library item. Find the Aperture action "Import Photos" and drag and drop it on the workflow field. Then you can chose your desired project or a new project for the scanned images to appear. I have a project for all new images called @Review so I chose that one as my target project. You can set a referenced import or the deletion of your source images as well. If you want to chose the desired project or any of the other preferences every time you're scanning you have to activate "Show this action when the workflow runs" in the Options of this action.
|
||||
|
||||
To make it a bit cooler we can assign one or more keywords to our scanned images automatically. Just drag and drop the "Assign keywords to images" action and add a keyword like "Scan" or something like that. Finally we can set some usual IPTC-tags with the "Set IPTC Tags" action. In the end you should have something like this (click to zoom):
|
||||
|
||||
[](/media/apertureimport_automator.png)
|
||||
|
||||
|
||||
|
||||
## 2. Save it as a plug-in for Image Capture
|
||||
|
||||
|
||||
|
||||
[](/media/apertureimportplugin.png)Now we're going to save the whole workflow we clicked together. But instead of saving it as a general workflow chose File > Save as Plug-in. Type in a name like "Import to Aperture" and chose Image Capture from the dropdown menu and click save. Now your workflow has become a freshly new plug-in of the Image Capture application. If you ever want to delete, edit or just backup your Image Capture Plugins you can find them in your user folder library under /Workflows/Applications/Image Capture.
|
||||
|
||||
|
||||
|
||||
## 3. Scanning and have fun
|
||||
|
||||
|
||||
|
||||
[](/media/apertureimport_automatic.png)Plug in your scanner and open up Image Capture. A new scan window should open with your connected scanner as source. Now we have to define our freshly created plug-in as a task which will run after the image was scanned. Just chose your freshly created workflow from the Automatic Task dropdown menu and there you have it. So after you hit the scan button our freshly created workflow will run after the scan.
|
||||
|
||||
Just be creative with Automator. You can set up a lot of workflows for every thinkable scanning task and you can even backup your scanned images before or after importing them to Aperture by copying them into a new burn folder or make an archive from them which also could be automatically saved to a web server and so on...
|
||||
@ -0,0 +1,195 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-07 03:27:25+00:00
|
||||
layout: post
|
||||
slug: high-quality-watermarks-with-aperture
|
||||
title: 'HowTo: Use high-quality watermarks in your images with Aperture 2.1'
|
||||
wordpress_id: 48
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
- tutorial
|
||||
---
|
||||
|
||||
Since version 1.0 Aperture is able to render images on export with a graphic overlay on top of them called watermark. This feature of Apple's Aperture can give you a chance to make stealing your web-published pictures a bit harder.
|
||||
|
||||
So let's see how we can make Aperture automatically render watermarks on our images during export. In this article we will make a watermark with a transparent background and add some text on top of it. The steps for this magic involves 4 simple steps:
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1. Create a watermark image in Photoshop
|
||||
|
||||
|
||||
2. Render different sizes of the watermark image
|
||||
|
||||
|
||||
3. Define the watermark image inside an export preset in Aperture
|
||||
|
||||
|
||||
4. Make even more...
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1. Create a watermark image in Photoshop
|
||||
|
||||
|
||||
Open up Photoshop and load a photo taken with your camera in full size (pixel size of course, not file size). If you have photos with different pixel sizes you should use a photo with the biggest pixel size you're going to export from your Aperture library.
|
||||
|
||||
To illustrate the process I will use a picture taken by me. Create a new layer on top of the background layer and call it "watermark" or anything you like.
|
||||
|
||||
[](/media/watermark_1.png)
|
||||
|
||||
|
||||
|
||||
If you want it simple you can start with the Text tool right now but I prefer to add a background so our text is always readable no matter if the photo is dark or light. With the select tool draw a rectangle on the bottom of the image. Then select the Paintbucket tool, chose a foreground color of white and click on the selection in the image so the rectangle selection is filled with white.
|
||||
|
||||
|
||||
|
||||
[](/media/watermark_2.png)
|
||||
|
||||
|
||||
|
||||
Add some inner shadow by double clicking on the watermark layer and adjusting the values for inner shadow (just have a german speaking Photoshop version while writing this article but i guess you can identify the values visually):
|
||||
|
||||
|
||||
|
||||
[](/media/watermark_3.png)
|
||||
|
||||
|
||||
|
||||
Adjust the Fill of the layer to 40%. This will just make the fill color transparent while the opacity of the layer styles are preserved. You should end up with something like this:
|
||||
|
||||
|
||||
|
||||
[](/media/watermark_4.png)
|
||||
|
||||
|
||||
|
||||
Next select the Text tool, chose a black color in the tool preferences and click on the image. A new layer will be automatically created and you can type in the text you want to use in your watermark. For this tutorial I just used the copyright sign (opt + g) with a year and the word "Watermark". I used Helvetica Neue Ultra Light as font face.
|
||||
|
||||
|
||||
|
||||
Place the text at the bottom right and be sure to add some space to the right and to the bottom. Next set the layer mode of the text layer to "Overlay". Finally I've added a logo and set it's opacity to 80%. So now you should end up with something like this:
|
||||
|
||||
[](/media/watermark_5.png)
|
||||
|
||||
|
||||
|
||||
Now delete the Background layer. You should see the transparent grid. Next chose Image > Trim from the menu bar, select transparent pixels and click ok. The result should look like this:
|
||||
|
||||
|
||||
|
||||
[](/media/watermark_6.png)
|
||||
|
||||
|
||||
|
||||
Although Aperture is able to render all layers even with their layer styles correctly it has some problems with text layers and their styles. So to be on the save side you should flatten the layers by selecting them all (with command + click on the name of the layers) and pressing command + e which will merge all layers into one. After this step you won't be able to edit your layers so maybe you want to save your document BEFORE this step as an editable psd template file. Be sure that the background of your canvas remains transparent.
|
||||
|
||||
|
||||
|
||||
Now you're finished with your watermark image. Save it as a .psd file e.g. in your Pictures folder and name it watermark.psd.
|
||||
|
||||
Since version 2 Aperture can also handle other filetypes than psd as watermark images. So you can also use a jpg or png file. But remember that jpg can't handle transparency. But you can control the final opacity of the overlay image in Aperture so in the end you can have transparancy with a jpg file. More on that later on.
|
||||
|
||||
|
||||
|
||||
## 2. Render different sizes of the watermark image
|
||||
|
||||
|
||||
Before starting to create hundreds of watermark images remember that Aperture automatically can scale the watermark image down to fit the size of the exported image. So you could just use one watermark image and have Aperture scale it down to the correct size automatically. But it won't scale it up if your image is bigger, that's why we used a photo with the biggest pixel size you're going to export from Aperture. Just test it out with just one watermark image scaled down by Aperture and decide if the quality is enough for you. But even Apple recommends using different sizes.
|
||||
|
||||
If you want to have full control and the highest quality you should repeat the above steps for every pixel size you are going to export from Aperture. So if you have a email preset which resizes the exported image to 600px than you should use a canvas of 600x600px in Photoshop and draw your watermark at that size. You could save those files with the pixel size added in the file name to avoid confusion.
|
||||
|
||||
Now you can close Photoshop or let it open if you have enough RAM ;-)
|
||||
|
||||
|
||||
|
||||
## 3. Define the watermark image inside an export preset
|
||||
|
||||
|
||||
|
||||
Now we're going to make the watermark image part of an export preset inside Aperture. Open up Aperture and chose Aperture > Presets > Image Export from the menubar. In the Export Presets dialogue add a new preset by clicking on the little plus sign at the bottom left of the dialogue and give it a name:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Now adjust your desired values before the "Show Watermark" part at the right. After you've finished click on the checkbox beside "Show Watermark" to activate watermarks for this export preset. For our example we will set the position of the image to Lower Right. Either drag your freshly created watermark.psd onto the drop field or chose it via Aperture's file inspector by clicking on the Choose Image button. The watermark image is automatically copied over to the Library folder of the user under /Application Support/Aperture/WatermarkImages. Just keep that in mind when you want to update your watermark images.
|
||||
|
||||
|
||||
|
||||
As said before you can adjust the opacity of your watermark image but since we have included some different transparencies in our file we have to set it to an opacity of 1,0.
|
||||
|
||||
Finally you can activate the "Scale watermark" checkbox if you want to use your big sized watermark image once and let Aperture scale it down for you. If you have created different sized watermark images you want to leave this deactivated and create a unique export preset for every size you want to export to. In this example we end up with those values:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
If you're done just click OK and select an image you want to export. Select File > Export > Versions from the menubar or press shift + command + e. In the Aperture file dialogue chose your destination and select your freshly created preset from the Export Preset dropdown menu and click OK.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Your image is rendered in the background and you should end up with something like this. Click on it to zoom to the full sized version or open the link to the full image in a new browser window. (the full view image is scaled down with a 1024x1024px preset):
|
||||
|
||||
|
||||
|
||||
[](/media/watermarkexample_final.jpg)
|
||||
|
||||
|
||||
|
||||
You can also have a look at the psd file by downloading it here:
|
||||
|
||||
|
||||
[PSD-file Aperture Watermark example (zip-file, 557kb)](http://www.kremalicious.com/media/watermark_example_by_kremalicious.zip)
|
||||
|
||||
Needless to say that you can be very creative with your watermarks. If you think you have to showcase your watermark image used in Aperture feel free to leave it in the comments for this post.
|
||||
|
||||
Here are some quick examples by me:
|
||||
|
||||
You can be a bit more subtle:
|
||||
|
||||
[](/media/watermarkexample_v2.jpg)
|
||||
|
||||
|
||||
|
||||
Or use a subtle colorful spectrum:
|
||||
|
||||
|
||||
|
||||
[](/media/watermarkexample_v3.jpg)
|
||||
|
||||
|
||||
|
||||
## 4. Make even more...
|
||||
|
||||
|
||||
You can also use this feature to add borders or a whole new style to your images without the use of a plugin like [BorderFX](http://web.mac.com/reinharduebel/BorderFX/).
|
||||
|
||||
Just create a watermark image which has exactly the same size as your exported image in width and height. Draw your desired border around all sides or even add some virtual scratches or other things. Then include it in an export preset in Aperture like we did it before.
|
||||
|
||||
And maybe you end up with something like this grunge old look just done with the watermark feature of Aperture:
|
||||
|
||||
[](/media/watermarkexample_v4.jpg)
|
||||
|
||||
|
||||
|
||||
And that's it. Hope this article helped you mastering the watermark feature of Aperture.
|
||||
|
||||
|
||||
|
||||
Update: If you're curious about more ways to add watermarks to your images in an Aperture workflow be sure to check out my article [The Definite Guide To Watermarks In Apple Aperture](http://www.kremalicious.com/2008/10/the-definite-guide-to-watermarks-in-apple-aperture/) which gives you a brief overview about the various ways you can add watermarks to your images so you can easily choose the best one for your needs.
|
||||
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-07 19:21:34+00:00
|
||||
layout: post
|
||||
slug: nik-ships-viveza-as-the-first-available-aperture-editing-plugin
|
||||
title: Nik ships Viveza as an Aperture editing plugin
|
||||
wordpress_id: 49
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Today [Nik Software](http://www.niksoftware.com) announced the availability of it's U-point-technology based editing plugin for Apple's Aperture 2.1 called [Viveza](http://www.niksoftware.com/viveza).
|
||||
|
||||
With Viveza photographers are able to select areas from their images and adjust them separately from the rest of the picture by defining so called Color Control Points.
|
||||
|
||||
A 15 day trial is available from the website of the plugin. The whole plugin will cost you US$ 249.
|
||||
|
||||
[Nik Software Viveza Website](http://www.niksoftware.com/viveza)
|
||||
|
||||
Now it should be just a matter of days or weeks before [the other recently announced plugins](http://www.kremalicious.com/2008/04/first-aperture-adjustment-plugins-have-arrived/) will be available too.
|
||||
|
||||
Finally here's a first test of the plugin from photographer Jim Crotty:
|
||||
[Testing Viveza and Your Opinion](http://calmphotos.com/index.php/2008/05/07/testing-viveza-and-your-opinion/)
|
||||
@ -0,0 +1,204 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-07 19:22:49+00:00
|
||||
layout: post
|
||||
slug: the-15-best-new-features-of-aperture-2
|
||||
title: The 15 best new features of Aperture 2
|
||||
wordpress_id: 50
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
There are already some lists like this available on the web and they are always very subjective so I thought I should add my subjective list too. While Aperture was released I was coding this website and had not much time for writing about it. So although a bit late here is my absolutely biased list of my favorite 15 new features included in Apple's Aperture since version 2.0. It's in a nice countdown order ending with the best new feature (to me) at the bottom. Just click on the little screenshots to smoothly zoom to the full version of them.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
## 15. The "New" toolbar icon
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/aperture15_1.png)
|
||||
|
||||
A handy dropdown icon with the most common create tasks you can do in Aperture 2. This causes Aperture 2 to have a delightful clean toolbar by default.
|
||||
|
||||
|
||||
|
||||
## 14. Skimming through your projects
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/aperture15_2.png)
|
||||
|
||||
The Library item has a new child item: All Photos. Clicking on it displays all your projects like the Event view known from iPhoto 08. By hovering the mouse over the key photo (which you can define for yourself too) you "skim" through the project and quickly see all images contained in this project. Perfect for visually finding that non-keyworded photo you remember you've taken it but don't know where it is.
|
||||
|
||||
|
||||
|
||||
## 13. Search for adjustments
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/aperture15_3.png)
|
||||
|
||||
With Aperture 2 you can define a search query based on the adjustments you've made to an image in your library. So you can quickly identify all your images which have the monochrome mixer applied to them or maybe all your images which have _no_ edge sharpening applied and so on.
|
||||
|
||||
|
||||
|
||||
## 12. The Retouch tool
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/aperture15_4.png)
|
||||
|
||||
No more fiddling around with the poor results of the spot & patch tool when you just want to remove some sensor dust from your image. The repair mode of this tool is just perfect for that kind of task. The clone mode pretty much functions the same way as the clone tool in Photoshop. You define a clone source in your image by pressing option + click in your image and then pasting that source onto the imperfection by clicking on it.
|
||||
|
||||
|
||||
|
||||
## 11. Double click behavior
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/aperture15_5.png)
|
||||
|
||||
The behavior of double clicking on images can now be set in Aperture's preferences. Either you can make Aperture show or hide the Viewer or set it to enter full screen mode with the double clicked image in focus.
|
||||
|
||||
|
||||
|
||||
## 10. Book Layout
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/aperture15_6.png)
|
||||
|
||||
The photobook layout capabilities of Aperture became much powerful with version 2. Now you can create your own book templates where you have much freedom for lay-outing it. In fact you have a powerful Desktop Publishing Program built right into Aperture. Be sure to listen to the [Inside Aperture Podcast about the book layout tool in Aperture](http://digitalmedia.oreilly.com/2008/05/06/aperture-layout-application-schorr.html).
|
||||
|
||||
|
||||
|
||||
## 9. The V- and W-cycle
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/aperture15_8.png)
|
||||
|
||||
By pressing V on your keyboard you can quickly cycle through different viewer modes. In previous versions of Aperture the V-key just showed/hid the big viewer.
|
||||
|
||||
By pressing W on your keyboard you can cycle through the tabbed Inspector on the left and quickly access either your Projects, Metadata or the Adjustments.
|
||||
|
||||
|
||||
|
||||
## 8. The tabbed Inspector/HUD
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/aperture15_7.png)
|
||||
|
||||
An addition to the W-cycle: The overall inspector get polished by Apple which results in a completely new clean interface. But the best thing is you can access all those inspector tabs in full screen mode too by hitting the H-key. You can cycle through the tabs of the HUD in full screen mode just like you can do in the Aperture window by pressing the W-key. In fact the tabbed HUD will make you never want to leave full screen mode.
|
||||
|
||||
|
||||
|
||||
## 7. .Mac Web Gallery
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Create easy updatable password protected galleries for different clients in no time. Your clients are even able to download the master files from your good looking .Mac web gallery.
|
||||
|
||||
|
||||
|
||||
## 6. Definition adjustment slider
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/aperture15_11.png)
|
||||
|
||||
It's a bit hard to describe. In short the slider adds more detail to the midtones of your image. But you just have to see it in action. You can get crisp and sharp images without the need of any sharpening tool.
|
||||
|
||||
|
||||
|
||||
## 5. Recovery + Black Point sliders
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Although the Highlights & Shadow tool already produced reasonable results, the new Recovery and Black Point sliders are much more powerful and can reveal a lot of detail either in your blown out highlights or your underexposed shadows. Tip: While moving either the Recovery or the Black Point slider hold down the command key at the same time to see just an overlay of your hot & cold areas in your image.
|
||||
|
||||
|
||||
|
||||
## 4. Quick Preview
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Perfect for first selections of your images during import. Aperture uses either a preview embedded by your camera in the RAW-file, the corresponding jpg-file if you shoot RAW+JPG or it uses the previews rendered by Aperture itself.
|
||||
|
||||
|
||||
|
||||
## 3. Color Picker
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/aperture15_13.png)
|
||||
|
||||
Inside the Color adjustment brick you can now directly pick the color you want to alter from your image by selecting it with the little eye dropper. So you aren't bound to the standard colors when adjusting the colors of your image separately.
|
||||
|
||||
|
||||
|
||||
## 2. Spe(eeee)ed
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/aperture15_14.jpg)
|
||||
|
||||
Now you can "scroll like butter" (I bet you know who said that) through your whole library fro real. I don't know what exactly causes Aperture 2 to be so much more responsive and speedier than previous versions but the development team have done magic with this. In combination with the quick preview mode quickly browsing through thousands of photos even in full screen mode is now a snap.
|
||||
|
||||
|
||||
|
||||
## 1. RAW 2.0
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[](/media/raw20.png)
|
||||
|
||||
The best new feature to me just because the whole purpose of Aperture should be producing the best looking images from your RAW files. While the first RAW 1.0 often rendered terrible pictures, the RAW 1.1 algorithm did it a lot better. But now we have a massive improvement to the RAW 1.1 algorithm with crisp highlights and more details in dark areas with less chromatic aberration by default. To me Aperture is now close and sometimes better than the quality of PhaseOne or CameraRAW. Of course Aperture 2 leaves all your old adjustments made in previous versions of Aperture alone and you can optionally migrate them all at once or separately.
|
||||
|
||||
And you even get more adjustments for decoding the RAW file. The new Hue Boost slider only applies to the colors of your images rather than to the overall exposure like Boost do.
|
||||
|
||||
|
||||
These are my favorite new features of Aperture 2. I guess my next list in this style will be my wishlist of 15 features I would love to see in Aperture 2.5 or 3.
|
||||
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-08 15:47:48+00:00
|
||||
layout: post
|
||||
slug: the-iconfactory-presents-beautiful-indiana-jones-desktop-icons
|
||||
title: The Iconfactory presents beautiful Indiana Jones desktop icons
|
||||
wordpress_id: 51
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
[](http://iconfactory.com/indianajones/)If you enjoyed the Indiana Jones movies than this first of four desktop icon sets is a must have for you. Icon Designer [Anthony Piraino](http://onebuttonmouse.com/) crafted some beautiful items from Indiana Jones and The Raiders of the Lost Ark movie.
|
||||
|
||||
The icons are available from the [special Iconfactory site](http://iconfactory.com/indianajones/) as an icontainer or mac and windows icon files. If you download the iContainer for use in [Candybar](http://www.panic.com/candybar/) you also get a new Mac OS X dock created by [David Lanham](http://dlanham.com/). All icons are free for your personal use only and there are already some nice placeholders for more icon sets inspired by the other movies. All of them will be released during May.
|
||||
|
||||
[](/media/indianajones_dock.png)
|
||||
@ -0,0 +1,24 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-14 10:01:15+00:00
|
||||
layout: post
|
||||
slug: canon-updates-its-photographic-software-to-work-with-leopard
|
||||
title: Canon updates photographic software to work with Leopard
|
||||
wordpress_id: 53
|
||||
categories:
|
||||
- photography
|
||||
---
|
||||
|
||||
Canon has posted some updates for their photographic software on the Canon USA website:
|
||||
|
||||
**EOS Utility 2.4**
|
||||
According to the release notes EOS Utility now fully supports Mac OS X 10.5 so every Canon user with Leopard should grab this download. It now supports the EOS Kiss X2/EOS DIGITAL REBEL XSi/EOS DIGITAL 450D and it fixes a Remote Shooting problem too.
|
||||
|
||||
**Digital Photo Professional 3.4.1**
|
||||
Digital Photo Professional now fully supports Mac OS X 10.5 too. DPP now incorporates a new luminance noise reduction function for TIFF/JPEG image and it adds support for the aberration correction function on sixteen more lenses and also some extenders.
|
||||
|
||||
**Picture Style Editor 1.3**
|
||||
Was updated for compatibility to Mac OS X 10.5 too and now supports the EOS Kiss X2/EOS DIGITAL REBEL XSi/EOS DIGITAL 450D
|
||||
|
||||
You can find some more improvements and fixes in the release notes on the download pages of every file. To download these updates you can follow [this link](http://www.usa.canon.com/consumer/controller?act=ModelInfoAct&tabact=DownloadDetailTabAct&fcategoryid=314&modelid=11154) which will bring you to the driver downloads page of the Digital Rebel XT. You can grab the files from there regardless if you have a different EOS DSLR. Just select your OS from the dropdown menu and click on the updates.
|
||||
@ -0,0 +1,257 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-18 05:00:01+00:00
|
||||
layout: post
|
||||
slug: first-aperture-adjustment-plugins-have-arrived
|
||||
title: 'Update: First overview: Aperture 2.1 adjustment plugins have arrived'
|
||||
wordpress_id: 54
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
With the release of Aperture 2.1 Apple introduced a plugin architecture for adding third party image adjustment and export plugins. Now the first third party image adjustment plugins for Aperture 2.1 have arrived. And they can definitely make you stop roundtripping your pictures to Photoshop and back. For now a total of 14 plugins from 9 companys were announced which are waiting to help you with your Aperture 2 workflow.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
## Dfx digital filters plugin from Tiffen
|
||||
|
||||
|
||||
|
||||
The first one is the [Dfx digital filters plug-in from Tiffen](http://www.tiffen.com/products.html?tablename=dfx) which was already available as an image editing plugin for Photoshop on Windows and Mac. It's an award winning set of [94 individual filters](http://www.tiffen.com/dfx_filter_effects_ig.html) for adjusting and altering your images in Aperture 2.1 and above.
|
||||
|
||||
[](/media/tiffen_aperture.jpg)
|
||||
|
||||
|
||||
|
||||
Tiffen made the plugin available in May 2008. You can download a [free 15-day trial](http://www.tiffen.com/dfx_downloads.html) too or you can purchase it from the Tiffen-website for US$299. Also don't forget to have a look [at the user guide](http://www.tiffen.com/userimages/Dfx-v1-Photo-UserGuide.pdf) for this plugin.
|
||||
|
||||
|
||||
|
||||
A nice in-depth overview of this plugin [gives Dominique James over at Aperture Users Professional Network](http://www.apertureprofessional.com/showthread.php?t=15225).
|
||||
|
||||
|
||||
|
||||
## Digital Film Tools Aperture Plugins
|
||||
|
||||
|
||||
|
||||
Digital Film Tools [released three plugins](http://www.digitalfilmtools.com/apertureprods.htm) for Aperture 2.1 and above which were also already available for Photoshop:
|
||||
|
||||
[Power Stroke 1.0](http://www.digitalfilmtools.com/powerstroke/index.htm) is an image editing plugin for making targeted adjustments by intuitive handling with strokes. You can make multiple corrections and effects with one stroke such as color correction, recoloring or desaturation, colorization of black and white images, blur, fill light for dimly lit image areas and Diffusion/Glow.
|
||||
|
||||
[](/media/dft-powerstroke_uis.jpg)
|
||||
|
||||
|
||||
|
||||
[Light! 3.5](http://www.digitalfilmtools.com/light/) is a plugin for adding Light effects with defined patterns which are created by Gamproducts.
|
||||
|
||||
|
||||
|
||||
[](/media/dft-light_ui.jpg)
|
||||
|
||||
|
||||
|
||||
[Ozone 2.5](http://www.digitalfilmtools.com/ozone/) is an adjustment plugin for selective adjustments of colors. It' based on the Digital Zone System, which divides a picture into 11 discrete zones where you can adjust each zone separately.
|
||||
|
||||
|
||||
|
||||
[](/media/dft-ozone_ui.jpg)
|
||||
|
||||
|
||||
|
||||
|
||||
All plugins are available now and can be [purchased fom the Digital Film Tools website](http://www.digitalfilmtools.com/buy/home.php?cat=38) as a Super Bundle with all three plugins included for US$ 175 or separately for US$ 50 (Light and Ozone) or US$ 120 (Power Stroke). There are also trial versions for the [Power Stroke](http://www.digitalfilmtools.com/powerstroke/media.htm), [Light](http://www.digitalfilmtools.com/light/media.htm) and [Ozone](http://www.digitalfilmtools.com/ozone/media.htm) plugin available from DFT's website which will watermark the edited images in demo mode.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Nik Viveza
|
||||
|
||||
|
||||
|
||||
Nik Software [announced the availabilty of Viveza](http://www.niksoftware.com/viveza/usa/entry.php?view=intro/viveza_aperture_announcement.shtml), an image editing plugin based on the cool U-Point technology as known from [Nikon's Capture NX](http://imaging.nikon.com/products/imaging/lineup/software/capturenx/index.htm). You can select areas from your image and adjust them separately from the rest of the picture. It is long available as a plugin for Photoshop and is shipping in May for Aperture 2.1. It will cost US$249.95 but users who already purchased Viveza for Photoshop get it for free!
|
||||
|
||||
On May 7, 2008, Nik finally [shipped Viveza as the first availailabe plugin for Aperture 2.1](http://www.kremalicious.com/2008/05/nik-ships-viveza-as-the-first-available-aperture-editing-plugin/). You can grab a [15-day trial version](http://www.niksoftware.com/site/cont_index.php?nav_top=367&cms_child=__demo&productId=257) of the plugin too.
|
||||
|
||||
[](/media/viveza_aperture_ui.jpg)
|
||||
|
||||
|
||||
|
||||
## dvGarage dpMatte & HDR Toner
|
||||
|
||||
|
||||
|
||||
[DpMatte](http://www.dvgarage.com/prod/prod.php?prod=dpmatte) is a plugin for greenscreen keying for photographers. You can easily composite two images together, like adding another background for a portrait. It is available since April 22 and costs you US$ 69.
|
||||
|
||||
[](/media/dpmatte_index1.jpg)
|
||||
|
||||
|
||||
|
||||
The folks at dvGarage are also working on an Aperture plugin called HDRToner for high dynamic range images which will cost US$ 69 too and is expected to be available on June 15 2008.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Image Trends Aperture plugins
|
||||
|
||||
|
||||
|
||||
Image Trends announced three plugins coming for Aperture 2.1. First one is the the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) which can remap images taken with fisheye lenses. If you're using a Fisheye lens you will love this plugin. According to Image Trends' Michael K. Conley the plugin should be available on May 19, 2008 and will cost US$ 29.95. But if you already purchased the Photoshop version Image Trends will give you 50% discount.
|
||||
|
||||
[](/media/imagetrends_hemi_10.jpg)
|
||||
|
||||
|
||||
|
||||
The [PearlyWhites](http://www.imagetrendsinc.com/products/prodpage_pearly.asp) plugin, which is intended to automatically whiten and brighten teeth in your images should be available within the next 60 days.
|
||||
|
||||
|
||||
|
||||
[](/media/imagetrends_pearlywhite.png)
|
||||
|
||||
|
||||
|
||||
And the [ShineOff](http://www.imagetrendsinc.com/products/prodpage_shine.asp) plugin, which removes shine from faces and skin should be available within the next 60 days too.
|
||||
|
||||
|
||||
|
||||
[](/media/imagestrends_shieoff.jpg)
|
||||
|
||||
|
||||
|
||||
## Picturecode Noise Ninja
|
||||
|
||||
|
||||
|
||||
Well known for it's awesome noise reduction capabilities, Picturecode's [Noise Ninja](http://www.picturecode.com/nn_overview.htm) will be available as an Aperture 2.1 plugin too.
|
||||
|
||||
According to Picturecode we can expect the plugin "sometimes next month" (June) and maybe there will be a beta version available before the final release. Definitely there will be a trial version of the plugin available from Picturecode's website.
|
||||
|
||||
[](/media/noiseninja.png)
|
||||
|
||||
|
||||
|
||||
You can have a first look at an early alpha version of the plugin running in Aperture 2.1 in an [in-depth article by Rob Galbraith](http://www.robgalbraith.com/bins/content_page.asp?cid=7-9308-9356).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Creaceed Hydra + HDR Aperture Plugin
|
||||
|
||||
|
||||
|
||||
[Hydra](http://www.creaceed.com/hydra/) is a neat application for High Dynamic Range (HDR) image processing. With the release of Hydra 1.5, Creaceed made an Aperture plugin available with it too. It has a limited feature set compared to Photomatix or Photoshop but creating HDR images within Aperture is possible right now with this plugin. You can purchase Hydra for US$ 59.95 to get the included plugin or test it out by downloading the trial version (it will expire on July 1, 2008). But remember that the plugin is in beta stage at the moment.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Kekus LensFix CI
|
||||
|
||||
|
||||
|
||||
The [LensFix](http://www.kekus.com/software/plugin.html) product from Kekus will help you to correct lens distortion automatically along with it's database of over 500 combinations of camera and lenses. It is also capable of reducing chromatic aberration in your images. Along with a standalone version and a Photoshop plugin the latest version will deliver you a plugin for Aperture in beta stage. The LensFix CI product with the Aperture plugin included will cost you US$ 30.
|
||||
|
||||
You can read a first review of the beta plugin for Aperture [over at trick77.com](http://www.trick77.com/2008/05/18/review-lens-correction-plug-in-kekus-lensfix-for-aperture-2/).
|
||||
|
||||
|
||||
|
||||
## Human Software ApertureEdit
|
||||
|
||||
|
||||
|
||||
This plugin is a whole bundle of 11 different modules for more than 4000 effects like denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once. Just head over to the [product page](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) to see all effects and features this plugin bundle is capable of. The whole bundle will cost you US$ 299.95 or US$ 69.95 for each module.
|
||||
|
||||
[](/media/apertureedit_interface.jpg)
|
||||
|
||||
|
||||
|
||||
## More information
|
||||
|
||||
|
||||
|
||||
[Image editing plug-ins the centrepiece of Aperture 2.1 by Rob Galbraith](http://www.robgalbraith.com/bins/content_page.asp?cid=7-9308-9356): In-depth article about the plugin architecture of Aperture 2.1
|
||||
|
||||
Tiffen website
|
||||
[www.tiffen.com](http://www.tiffen.com)
|
||||
|
||||
Digital Film Tools website
|
||||
[www.digitalfilmtools.com ](http://www.digitalfilmtools.com)
|
||||
|
||||
Nik Software website
|
||||
[www.niksoftware.com](http://www.niksoftware.com)
|
||||
|
||||
dvGarage website
|
||||
[www.dvgarage.com](http://www.dvgarage.com)
|
||||
|
||||
Image Trends website
|
||||
[www.imagetrendsinc.com](http://www.imagetrendsinc.com/)
|
||||
|
||||
Picturecode website
|
||||
[www.picturecode.com](http://www.picturecode.com/)
|
||||
|
||||
Creaceed website
|
||||
[www.creaceed.com](http://www.creaceed.com)
|
||||
|
||||
Kekus website
|
||||
[www.kekus.com](http://www.kekus.com/)
|
||||
|
||||
Human Software website
|
||||
[www.humansoftware.com](http://www.humansoftware.com)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Article Updates
|
||||
|
||||
|
||||
|
||||
|
||||
Update 7 added Human Software's ApertureEdit plugin bundle
|
||||
|
||||
|
||||
|
||||
|
||||
Update 6 added Kekus' LensFix CI plugin
|
||||
|
||||
|
||||
|
||||
|
||||
Update 5 added Creaceed's Hydra plugin
|
||||
|
||||
|
||||
|
||||
|
||||
Update 4 added 2 more plugins from Image Trends and some more details about all of their Aperture plugins
|
||||
|
||||
|
||||
|
||||
|
||||
Update 3 added a new paragraph about Picturecode's rare documented Noise Ninja plugin for Aperture
|
||||
|
||||
|
||||
|
||||
|
||||
Update 2 added dvGarage's HDR Toner and the price for dvGarage's dpMatte
|
||||
|
||||
|
||||
|
||||
|
||||
Update 1 added some lines about the final shipment of Nik's Viveza
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-19 13:05:23+00:00
|
||||
layout: post
|
||||
slug: image-trends-releases-fisheye-hemi-plug-in-for-aperture
|
||||
title: Image Trends releases Fisheye-Hemi plug-in for Apple Aperture
|
||||
wordpress_id: 55
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
[](/media/imagetrends_hemi_10.jpg)Today Image Trends Inc. [announced](http://www.imagetrendsinc.com/news/Aperture%20Fisheye%20Hemi%20%20Final.pdf) the final availability of the anti-distortion plugin [Fisheye-Hemi](http://www.imagetrendsinc.com/products/prodpage_hemi.asp) as an editing plugin for Aperture 2.1. The plugin will remap your hemispheric images taken with a fisheye lens. So if you take pictures with a fisheye lens this plugin is a must have for you.
|
||||
|
||||
From the press release:
|
||||
|
||||
|
||||
> Photographers can now easily preserve a normal view of people by not distorting their faces and bodies, as the plug-in straightens vertical lines. Fisheye-Hemi Plug-In uses almost all of the pixel data in that view with no loss of image resolution while displaying the intended composition and framing better than other un-warping programs.
|
||||
|
||||
|
||||
|
||||
If you're interested in how the plugin works there's [a cool in-depth explanation from the guys at Image Trends on their website](http://www.imagetrendsinc.com/products/specpage_hemi.asp).
|
||||
|
||||
The Fisheye-Hemi plugin is the first plugin from Image Trends coming for Apple's Aperture. Image Trends' president and CEO Dan Sullivan says that the other plugins [PearlyWhite](http://www.imagetrendsinc.com/products/prodpage_pearly.asp) and [ShineOff](http://www.imagetrendsinc.com/products/prodpage_shine.asp) are expected to be released within the next 60 days while some mysterious "other products" will follow them too. The plugin costs US$ 29.95 and if you want the plugin for Aperture and Photoshop you get a 50% discount. There's also a free trial version of the plugin available.
|
||||
|
||||
|
||||
|
||||
* [Plugin website](http://www.imagetrendsinc.com/products/prodpage_hemi.asp)
|
||||
|
||||
|
||||
* [First overview: Aperture 2.1 adjustment plugins have arrived](http://www.kremalicious.com/2008/05/first-aperture-adjustment-plugins-have-arrived/)
|
||||
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-21 13:02:00+00:00
|
||||
layout: post
|
||||
slug: awesome-parallax-optical-illusion
|
||||
title: 'Awesome parallax optical illusion: Make a horse move'
|
||||
wordpress_id: 58
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
As you may know there's a nice parallax effect implemented on this website. Just resize your browser window and you can see the black polaroids in my header flying on different layers. As I stated in an [earlier post](http://www.kremalicious.com/2008/03/love-the-parallax/) there is already some usage for it around the web while this effect seems to be first used by the guys from [Silverback](http://www.silverbackapp.com/). If you don't know what this effect is about head over to [thinkvitamin](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/trackback/) to get to know what it is and how you can achieve it.
|
||||
|
||||
But now Marco Kuiper from [marcofolio.net](http://www.marcofolio.net) adds another usage for it. He created a cool optical illusion with just plain css/html and some pictures. You can see a [demo of this effect](http://demo.marcofolio.net/a_parallax_illusion_with_css/) in action on Marco's website. Head over to the demo and resize your browser window. You should articulate something like "whoooot!" now. Marco has written [some words about it](http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html) too and you can download the demo. He has also [done a nice tutorial](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html) how to achieve this optical illusion. Very cool!
|
||||
|
||||
(Via [CSS-Tricks](http://css-tricks.com/links-of-interest-31/))
|
||||
@ -0,0 +1,223 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-22 20:01:12+00:00
|
||||
layout: post
|
||||
slug: showcasing-the-css-parallax-effect-12-creative-usages
|
||||
title: 'Showcasing the CSS Parallax Effect: 12+1 Creative Usages'
|
||||
wordpress_id: 59
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
[](/media/parallax-visualization_big.png)
|
||||
|
||||
Been so in love with the parallax effect that I have to post another article about it. For the non-geeks: I don't mean [measuring distances between objects in space](http://en.wikipedia.org/wiki/Parallax), the [parallax error in photography](http://en.wikipedia.org/wiki/Parallax#Parallax_error_in_photography), any [StarTrek episode](http://www.startrek.com/startrek/view/series/VOY/episode/68824.html), the [movie Parallax View](http://www.imdb.com/title/tt0071970/) and definitely not [DC Comic's Parallax monster](http://scifipedia.scifi.com/index.php/Parallax_(DC)).
|
||||
|
||||
|
||||
|
||||
I mean [Parallax Scrolling](http://en.wikipedia.org/wiki/Parallax_scrolling) which is a technique often used in good ol' arcade and video games like [Moon Patrol](http://en.wikipedia.org/wiki/Moon_Patrol) or [Sonic the Hedgehog](http://en.wikipedia.org/wiki/Sonic_the_Hedgehog_%28video_game%29). In such 2D games parallax scrolling was used to create an illusion of three dimensional depth.
|
||||
|
||||
Since our operating systems are mainly 2D too we can use this pseudo 3D technique to create the same illusion in our web browsers. Of course this was first done by flash designers and it's a popular effect used in flash based websites or [parts of it](http://a.viary.com/).
|
||||
|
||||
But with the rise of CSS this technique can now be done without the use of flash as [Alex Walker](http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/) and [Paul Annett](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax) discovered. You see we are now very close to the [Atari](http://en.wikipedia.org/wiki/Atari) with Web-Design.
|
||||
|
||||
So it's time for a first showcase of websites using this effect. At the end of this article you'll find some tutorials for making this effect too. And as you can see there's a parallax effect in the header of this website too so I will not include myself in this showcase list ;-)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
So here are the examples. Just start clicking, resizing and goggling!
|
||||
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
|
||||
|
||||
[Clearleft's Silverback Teaser page](http://www.silverbackapp.com/)
|
||||
|
||||
The undeniable Kings of the Parallax, designed by Paul Annett. The Silverback guys made the effect so popular and inspired me too:
|
||||
|
||||
[](http://www.silverbackapp.com/)
|
||||
|
||||
|
||||
[Starry Night](http://css-tricks.com/examples/StarryNight/)
|
||||
|
||||
An example by Chris Coyier from css-tricks.com. This one works vertically too and he made a [tutorial out of it](http://css-tricks.com/3d-parralax-background-effect/):
|
||||
|
||||
[](http://css-tricks.com/examples/StarryNight/)
|
||||
|
||||
|
||||
[Percentage Backgrounds](http://www.sitepoint.com/examples/stretchy/test.php)
|
||||
|
||||
Probably the first css-based usage of this effect by Alex Walker over at Sitepoint. And probably the funniest one:
|
||||
|
||||
[](http://www.sitepoint.com/examples/stretchy/test.php)
|
||||
|
||||
|
||||
[The Horse in Motion](http://demo.marcofolio.net/a_parallax_illusion_with_css/)
|
||||
|
||||
Marco Kuiper created a cool optical illusion with just plain css/html and some pictures. Head over to the demo and resize your browser window. You should articulate something like "whoooot!" now. You can read [here how he made it](http://www.marcofolio.net/css/a_parallax_illusion_with_css_the_horse_in_motion.html).
|
||||
|
||||
[](http://demo.marcofolio.net/a_parallax_illusion_with_css/)
|
||||
|
||||
|
||||
[We all hate Quickbooks, Do You?](http://weallhatequickbooks.com/)
|
||||
|
||||
Nice fire parallax on this sort of aggregating website. It displays all Tweets with the word "quickbooks" in it:
|
||||
|
||||
[](http://weallhatequickbooks.com/)
|
||||
|
||||
|
||||
[Dumago](http://dumago.net/)
|
||||
|
||||
More mysterious (Oh my god, what is it??) than the Silverback app and with frosty stars instead of jungle leaves:
|
||||
|
||||
[](http://dumago.net/)
|
||||
|
||||
|
||||
[Dromaeo](http://dromaeo.com/)
|
||||
|
||||
Another funky name and a nice parallax too. This one uses little dinosaurs. Something like "Oh, so cute" or "How adorable!" should come to your mind:
|
||||
|
||||
[](http://dromaeo.com/)
|
||||
|
||||
|
||||
[cdev.ru](http://www.cdev.ru/)
|
||||
|
||||
A russian site with an awesome making-webdesign-in-jungle parallax (thanks [egot](http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-104)!). They even have different parallax headers on every page. Just click through the top menu:
|
||||
|
||||
[](http://www.cdev.ru/)
|
||||
|
||||
|
||||
|
||||
|
||||
## More Scripts and Interaction, please
|
||||
|
||||
|
||||
|
||||
All the showcased sites above need to be resized in the browser to see the effect. This fact makes those effects nice easter eggs but they are rather useless for most users. But with some JavaScript we can bypass this limitation.
|
||||
|
||||
[Parallax Backgrounds - a multi–layered javascript experiment](http://inner.geek.nz/javascript/parallax/)
|
||||
|
||||
Very cool cloud effect which becomes visible just by scrolling down the page. I think this is the future and next step of the parallax effect in Web-Design since scrolling is way more common than resizing the browser window:
|
||||
|
||||
[](http://inner.geek.nz/javascript/parallax/)
|
||||
|
||||
|
||||
[Fly + Parallax Scrolling Effect](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm)
|
||||
|
||||
Similar to the Starry Night example from css-tricks. But this example uses JavaScript to achieve this effect without resizing your browser window. It almost looks like it's done with Flash:
|
||||
|
||||
[](http://www.esqsoft.com/examples/fly_parallax/fly_parallax.htm)
|
||||
|
||||
|
||||
[40 Jaar Sire](http://www.umaghetzeggen.nl/)
|
||||
|
||||
Whatever this site is about (Help me dutch speaking folks! edit: [anna knows it!](http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-102)) it creates a shaky effect controlled by your mouse pointer:
|
||||
|
||||
[](http://www.umaghetzeggen.nl/)
|
||||
|
||||
|
||||
[CSS combined with Scriptaculous's Morph effect](http://offtheline.net/examples/parallax/)
|
||||
|
||||
Same graphics as on Silverback but with a Morph effect assembled with Scriptaculous. The parallax effect becomes visible by shrinking and unshrinking which is controlled by your mouse clicks:
|
||||
|
||||
[](http://offtheline.net/examples/parallax/)
|
||||
|
||||
|
||||
[WeblogR demo](http://www.weblogr.fr/demo/09052008/)
|
||||
|
||||
Same graphics as on Silverback too but this Parallax follows your mouse pointer. This is done with jQuery:
|
||||
|
||||
[](http://www.weblogr.fr/demo/09052008/)
|
||||
|
||||
|
||||
|
||||
|
||||
## How-Tos and Tutorials
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* [How to recreate Silverback's Parallax Effect](http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax)
|
||||
|
||||
|
||||
|
||||
* [In the Lab: Doing strange things to CSS Backgrounds](http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/)
|
||||
|
||||
|
||||
|
||||
* [Starry Night: Incredible 3D Background Effect with Parallax](http://css-tricks.com/3d-parralax-background-effect/)
|
||||
|
||||
|
||||
|
||||
* [Your own CSS parallax illusion 3d image](http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html)
|
||||
|
||||
|
||||
|
||||
* [Parallax Backgrounds - a multi–layered javascript experiment](http://inner.geek.nz/javascript/parallax/)
|
||||
|
||||
|
||||
|
||||
* [How to Make the Parallax Effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/)
|
||||
|
||||
|
||||
|
||||
|
||||
Hope you enjoyed this little showcase. Please share it on your favorite social website or vote for it. Your vote is always highly appreciated! And if you know any other websites using this effect (the non-flash versions) feel free to post them in the comments beneath this article.
|
||||
|
||||
**Update 05/29/2008:** [Dylan Bathurst](http://www.dylanbathurst.com/) wrote an article [How to make the Parallax effect](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/) which includes his own "Keep out of the Rain" example and a sticky, Hulk style Parallax footer:
|
||||
|
||||
[](http://www.dylanbathurst.com/2008/05/27/how-to-make-the-parallax-effect/)
|
||||
|
||||
And he has found another Parallax effect on the [website of the Rissington Podcast](http://therissingtonpodcast.co.uk/). Cool!
|
||||
|
||||
[](http://therissingtonpodcast.co.uk/)
|
||||
|
||||
|
||||
**Update 2 06/02/2008:** Nice commentators [routine](http://www.weaintplastic.com/) and [Jorge Epuñan](http://www.csslab.cl/) made some more interactive Parallax examples:
|
||||
|
||||
[Sonus:portals](http://www.sonus-game.com/)
|
||||
|
||||
A star parallax which follows your mouse pointer. Done with jQuery and with heavy CPU load ;-)
|
||||
|
||||
[](http://www.sonus-game.com/)
|
||||
|
||||
|
||||
[Parallax con Mootools](http://www.csslab.cl/ejemplos/parallax_mootools/)
|
||||
|
||||
My personal favorite for now in terms of usability. If you are able to understand spanish, [read his explanation](http://www.csslab.cl/2008/05/29/parallax-en-uso-real/).
|
||||
|
||||
[](http://www.csslab.cl/ejemplos/parallax_mootools/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-05-28 15:29:56+00:00
|
||||
layout: post
|
||||
slug: new-all-in-one-aperture-plug-in-released
|
||||
title: New all-in-one Aperture plug-in released
|
||||
wordpress_id: 60
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Today [Human Software](http://www.humansoftware.com) released an exciting image editing plug-in for Apple's Aperture. It's called [ApertureEdit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) and according to Human Software it offers more than 4000 professional effects which you can achieve right within Aperture.
|
||||
|
||||
The ApertureEdit plug-in is a bundle of 11 different modules for denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once. Just head over to the [product page](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) to see all effects and features this plugin bundle is capable of.
|
||||
|
||||
The whole bundle will cost you US$ 299.95 and it's available now [from Human Software's Online Shop](http://shareit1.element5.com/programs.html?productid=300256595&languageid=1&cart=1&cookies=1). But you can buy just one single plug-in too which will cost you US$ 69.95 for each. There's a [trial version](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit_trial.html) available too and if you don't want to mail Human Software for the trial version you can download it from [MacUpdate](http://www.macupdate.com/info.php/id/27639/apertureedit).
|
||||
|
||||
If you're interested in all the other Aperture 2.1 image editing plug-ins, feel free to have a look at my article [First overview: Aperture 2.1 adjustment plugins have arrived](http://www.kremalicious.com/2008/05/first-aperture-adjustment-plugins-have-arrived/).
|
||||
22
_src/_posts/2008-06-01-chives.markdown
Normal file
22
_src/_posts/2008-06-01-chives.markdown
Normal file
@ -0,0 +1,22 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-01 18:43:40+00:00
|
||||
layout: post
|
||||
slug: chives
|
||||
title: Chives
|
||||
wordpress_id: 64
|
||||
categories:
|
||||
- goodies
|
||||
- wallpaper
|
||||
---
|
||||
|
||||
I have added my first wallpaper to the Goodies section on this website. It's a shot of blooming chives which was altered with Aperture 2.1 and Photoshop CS3.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
You can get the wallpaper by browsing [my Goodies section](http://www.kremalicious.com/goodies/) and clicking on the download link for the wallpaper. The download package also includes a custom folder icon (512px as .icns, .png, .ico) with the Chives wallpaper on it.
|
||||
|
||||
[download_button version=1.0]
|
||||
|
||||
Beside that, this image is [available for print on deviantArt in various sizes](http://www.deviantart.com/print/3347544/).
|
||||
17
_src/_posts/2008-06-02-tweet-im-on-twitter-now.markdown
Normal file
17
_src/_posts/2008-06-02-tweet-im-on-twitter-now.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-02 18:26:37+00:00
|
||||
layout: post
|
||||
slug: tweet-im-on-twitter-now
|
||||
title: Tweet! I'm on Twitter now.
|
||||
wordpress_id: 65
|
||||
categories:
|
||||
- personal
|
||||
---
|
||||
|
||||
In a heavy venturesome step of unreasonable Web 2.0 love I've decided to get me on Twitter and [opened up an account](https://twitter.com/kremalicious).
|
||||
|
||||
If you like, you can follow me now on Twitter while I try to find some advantages of this curious Twitter thing. The plan for now is to post about background updates of this website and about whatever I will throw into the Cloud on other places. But damn, just 140 characters. Feels like writing like it's 1999.
|
||||
|
||||
[My Twitter-account](https://twitter.com/kremalicious)
|
||||
@ -0,0 +1,158 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-03 14:34:03+00:00
|
||||
layout: post
|
||||
slug: niepces-camera-obscura-and-the-history-of-the-first-photograph
|
||||
title: Niépce's Camera Obscura And The History Of The First Photograph
|
||||
wordpress_id: 67
|
||||
categories:
|
||||
- goodies
|
||||
- icon
|
||||
- photography
|
||||
---
|
||||
|
||||
These two desktop icons show the Camera Obscura as it was used by Nicéphore Niépce in an Aperture and iPhoto style and are intended as an homage to him. Nicéphore Niépce made it first possible to preserve an image taken with a camera obscura in 1826 or 1827 by using a special mixture of bitumen on a pewter plate, naming it Heliography. This first preserved photograph "View from the Window at Le Gras" is the one you can see in the iPhoto icon contained in this package. The third icon is the folder icon I have created for this icon package.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
Either just download the icons or read the exciting story about the First Photograph.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1. The story behind these icons: The First Photograph and References in the icons
|
||||
|
||||
|
||||
2. Download and enjoy!
|
||||
|
||||
|
||||
3. How to use these icons
|
||||
|
||||
|
||||
4. Final Words
|
||||
|
||||
|
||||
|
||||
|
||||
## The story behind these icons
|
||||
|
||||
|
||||
|
||||
There's a fascinating story behind these icons which is nothing more than the story of the invention of photography. Grab yourself a cup of coffee or tea and sit back while reading this story. Of course, if you're bored already just grab the download package further down this page ;-)
|
||||
|
||||
|
||||
|
||||
## Nicéphore Niépce and The First Photograph
|
||||
|
||||
|
||||
|
||||
|
||||
[caption id="attachment_2264" align="alignleft" width="150"][](/media/nicephore-niepce.jpg) Nicéphore Niépce, ca. 1795[/caption]Niépce was a multitasking French inventor who became famous for his experiments trying to preserve the projected image inside of the Camera Obscura. The Camera Obscura uses a well known optical phenomenon which is known to mankind for quite a long time.
|
||||
|
||||
But it was just used either for entertainment or as an aid for drawing and painting. Painters were able to just redraw the projected image of the Camera Obscura.
|
||||
|
||||
In 1816 Nicéphore Niépce was able to produce a negative image by putting sheets of silver salts coated paper into the back of the Camera Obscura. When these sheets get in contact with daylight they blacken. Niépce called this procedure and the final negative "Retinas". But these negatives didn't stop fading and he wasn't able to fix them and they just disappeared. The Maison Nicéphore Niépce team have a [nice little video showing the whole procedure on their website](http://www.nicephore-niepce.com/videos/video03.html).
|
||||
|
||||
In 1822 he created a first non-fading negative contact print by utilizing a bitumen of Judea-coated glass plate. But this glass negative was later destroyed during an attempt to produce a positive image.
|
||||
|
||||
After some more tries and combining other elements in his procedure he was able to produce the famous First Photograph "View from the Window at Le Gras" in 1826 or 1827 by utilizing a bitumen of Judea-coated pewter plate and improved lenses from the Paris optician, Charles Chevalier. He called this procedure Heliography and the bitumen-coated pewter plate needed an exposure of eight or more hours!
|
||||
|
||||
[caption id="attachment_2262" align="aligncenter" width="540"][](/media/View-from-the-Window-at-Le-Gras.png) View from the Window at Le Gras[/caption]
|
||||
|
||||
By the way, in 2002 another Picture made by Niépce was discovered which dates back to 1825. It was made in a process he called Heliogravure and it was an image of an (engraving) image (showing a man leading a horse). But since the scientific definition of the First Photograph is "the world's first permanent photograph from nature", "View from the Window at Le Gras" remains the First "real" photograph.
|
||||
|
||||
Because of his inventions he got in contact with the French artist, chemist and inventor Louis-Jacques-Mandé Daguerre and they became officially partners by the time of 1829 (14 December). At this time Daguerre already was famous for his impressive Dioramas. They were both experimenting a lot to produce preserved images in less time. In June 1832 both invented a process called the Physautotype. This process utilized a distillate of lavender oil as the photosensitive agent and produced images in fewer than 8 hours.
|
||||
|
||||
But Niépce died suddenly in 1833 and instead of him his partner Louis-Jacques-Mandé Daguerre became famous with his Daguerreotype process in 1839. Finally Daguerre was named and praised as the inventor of photography along with his competitor [William Fox Talbot](http://en.wikipedia.org/wiki/William_Henry_Fox_Talbot).
|
||||
|
||||
But in 1952 Niépce's lost image "View from the Window at Le Gras" was discovered and since then he has to be named along with Daguerre and Talbot when speaking of the invention of photography. And we can learn that the invention of photography wasn't an act of one particular genius but a decades long process with many smart people involved.
|
||||
|
||||
If you're interested in all the different processes and techniques used by Niépce and Daguerre you can browse the [Invention of Photography section on the website of Maison Nicéphore Niépce](http://www.nicephore-niepce.com/pagus/pagus-inv.html).
|
||||
|
||||
Finally let me say that this is just a brief description of Niépce's discoveries and photographic inventions in general. If you're interested I've provided some more resources for you to dive into this topic after the next paragraph.
|
||||
|
||||
Now switch back from historical learning to Icon Design ;-)
|
||||
|
||||
|
||||
|
||||
## References in the icons
|
||||
|
||||
|
||||
|
||||
The Camera Obscura seen in my icon set is a drawing of the replica of Niépce's Camera Obscura which you can find in Chalon-sur-Saône, France in Niépce's house. The Maison Nicéphore Niépce is a museum today, where they try to reproduce Niépce's procedures. And this isn't as easy as it seems with our shiny new 21st century technology.
|
||||
|
||||
The photography you can find in the iPhoto icon is the First Photograph "View from the Window at Le Gras", produced as a Heliography and dated to 1826 or 1827.
|
||||
|
||||
And finally, if you know the Aperture and iPhoto icons then you may have noticed the references to these applications too (just compare the lenses). ;-)
|
||||
|
||||
|
||||
|
||||
## Sources and more informations on Nicéphore Niépce
|
||||
|
||||
|
||||
|
||||
[Maison Nicéphore Niépce](http://www.niepce.com/)
|
||||
The home of Nicéphore Niépce in Saint-Loup-de-Varennes, France which is a museum today. It houses the replica of Niépce's Camera Obscura which was the inspiration for these icons and it was the view out of this house which became the First Photograph/Heliography.
|
||||
|
||||
[The First Photograph](http://www.hrc.utexas.edu/exhibitions/permanent/wfp/)
|
||||
In-Depth historical article about the First Photograph and Niépce's life in general by the University of Texas at Austin
|
||||
|
||||
[Musée Nicéphore Niépce](http://www.museeniepce.com/)
|
||||
When in France you have to visit this museum in Chalon sur Saône where they have a Niépce and a Daguerre room.
|
||||
|
||||
[Nicéphore Niépce on Wikipedia](http://en.wikipedia.org/wiki/Nicéphore_Niépce)
|
||||
If you're more into un-referenced facts (Citation needed) ;-)
|
||||
|
||||
[The Daguerreian Society: Daguerreian texts](http://daguerre.org/resource/texts.html)
|
||||
Massive 19th and 20th century text archive of The Daguerreian Society about the daguerreotype
|
||||
|
||||
[Daguerre and the Invention of Photography](http://www.metmuseum.org/toah/hd/dagu/hd_dagu.htm)
|
||||
Brief description of Daguerres role in the invention of photography process by The Metropolitan Museum of Art
|
||||
|
||||
|
||||
|
||||
## Download and enjoy
|
||||
|
||||
|
||||
|
||||
This icon package was exclusively announced first on [MacThemes](http://macthemes2.net) and you can download it from the [Goodies section on this website](http://www.kremalicious.com/goodies/) or directly via this link:
|
||||
|
||||
[download_button version=1.1]
|
||||
|
||||
In addition to these icons you can download the [associated wallpapers for your desktop or your iPhone](http://www.kremalicious.com/2008/06/new-goodie-niepces-camera-obscura-wallpaper-pack/).
|
||||
|
||||
|
||||
|
||||
## How to use these icons
|
||||
|
||||
|
||||
|
||||
These desktop icons are free for your personal and non-commercial use. They were intended to be replacement icons for Apple's Aperture and iPhoto applications. Of course, you can use it for every other application instead or use the folder icon for your picture collection.
|
||||
|
||||
The easiest way to change and apply icons in Mac OS X involves the awesome application [Candybar](http://www.panic.com/candybar) from [Panic Software](http://www.panic.com/). In case you don't have it you can change your icons by following these steps:
|
||||
|
||||
To replace the icon of either an application, file or folder on Mac OS X simply ctrl + click (or right-click) on the desired application, file or folder and click "Get Info". Leave the Get Info dialog open and browse to an icon from this package inside the Mac folder. There you have three folders with the different icons applied to them. Now simply ctrl + click (or right-click) on the desired folder with the icon applied to it and click "Get Info". Now click on the icon in the upper left corner so it has a subtle shine around it noticing you it's selected. Now copy the icon by hitting command + c or choose Edit > Copy from the menubar. Make the dialog active we have opened in the first step by clicking on it and select the image in the upper left corner and hit command + v or choose Edit > Paste from the menubar. Now the desired icon should have been applied to the new folder.
|
||||
|
||||
|
||||
|
||||
## Legal
|
||||
|
||||
|
||||
|
||||
These desktop icons are free for you personal and non-commercial use. All other usage of this copyrighted material [require my written permission](http://www.kremalicious.com/about/contact/).
|
||||
|
||||
|
||||
|
||||
## Final Words
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-](http://www.kremalicious.com/feed/) or [Atom-Feed](http://www.kremalicious.com/feed/atom), discuss this article or buy me my next coffee ;-)
|
||||
@ -0,0 +1,37 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-03 13:32:24+00:00
|
||||
layout: post
|
||||
slug: niepces-camera-obscura-wallpaper-pack
|
||||
title: Niépce's Camera Obscura Wallpaper Pack
|
||||
wordpress_id: 66
|
||||
categories:
|
||||
- goodies
|
||||
- wallpaper
|
||||
---
|
||||
|
||||
In addition to my Niépce's Camera Obscura icons for Aperture and iPhoto I have made some Wallpapers containing both icons.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
All Wallpapers are using a custom designed background which imitates the look of a metal plate like it was used in Niépce's experiments although it wasn't golden ;-) To make it more Mac style I have added a stenciled dots pattern (which is a commonly used reference to the front design of the MacPro). Here are the details:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* Aperture and iPhoto styled Camera Obscura as it was used by Nicéphore Niépce.
|
||||
|
||||
|
||||
* Including one desktop version with the Aperture styled Camera Obscura and one with the iPhoto styled. Both come in 1920x1200 for widescreen displays and 1600x1200 for normal displays
|
||||
|
||||
|
||||
* Including 2 different crops for the iPhone (480x320).
|
||||
|
||||
|
||||
|
||||
|
||||
Just grab them from the [Goodies page](/goodies/) and have fun.
|
||||
|
||||
[download_button version=1.0]
|
||||
15
_src/_posts/2008-06-04-helvetica-typewriter-keys.markdown
Normal file
15
_src/_posts/2008-06-04-helvetica-typewriter-keys.markdown
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-04 11:41:01+00:00
|
||||
layout: post
|
||||
slug: helvetica-typewriter-keys
|
||||
title: Helvetica Typewriter Keys
|
||||
wordpress_id: 1976
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
[Photo on 500px](http://500px.com/photo/5630073) [Photo on flickr](http://www.flickr.com/photos/krema/6965165687)
|
||||
47
_src/_posts/2008-06-11-safari-4-developer-preview.markdown
Normal file
47
_src/_posts/2008-06-11-safari-4-developer-preview.markdown
Normal file
@ -0,0 +1,47 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-11 10:37:07+00:00
|
||||
layout: post
|
||||
slug: safari-4-developer-preview
|
||||
title: Safari 4 Developer Preview - Better Performance, Overhauled Web Inspector,
|
||||
New CSS [Update]
|
||||
wordpress_id: 70
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
Apple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector.
|
||||
<!-- more -->
|
||||
|
||||
You can access Safari's Web Inspector through Develop > Show Web Inspector (you have to check the "Show Develop menu" box in the Preferences first to enable it). The Web Inspector, like the Firebug plug-in for Firefox, is a cool tool especially for Web Developers to inspect various elements of the website you're browsing.
|
||||
|
||||
The Navigation inside the Web Inspector is now moved from left to the top and there's a new "Databases" section and something like a browsing benchmarking "Profiles" section. All navigation tabs got new icons too.
|
||||
|
||||
|
||||
|
||||
The "Resources" section got a slight overhaul too. With it you can see in which time the elements on your website were loaded with a nice graphical timeline.
|
||||
|
||||
[](/media/webinspector_2.png)
|
||||
|
||||
|
||||
|
||||
Among the visible new features in the Safari 4 Developer Preview is the ability to save websites as desktop applications or site-specific browsers (SSB) called Web Applications (File > Save as Web Application) and some more options for new windows or tabs in the General Preferences:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
In terms of web standards and performance the Safari 4 Developer Preview passes the [Acid3 performance test](http://acid3.acidtests.org/) with 100/100 and is way more faster at rendering web pages.
|
||||
|
||||
Finally there seem to be a new css version implemented since Safari 4 now renders [this complicated text-shadow property described in a recent blog article (5.5 Multiple Shadows)](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/) correct. Beside that the text-rendering is a lot different causing the [light on dark text-shadow hack](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/) not to work on my website in Safari 4. Guess this is because all anti-alias rendering of text was replaced by sub-pixel rendering.
|
||||
|
||||
**update 06/11/2008:**Beside some more CSS3 stuff Safari 4 now includes all the cool recently announced WebKit features like [CSS gradients](http://webkit.org/blog/175/introducing-css-gradients/), [CSS masks](http://webkit.org/blog/181/css-masks/), [CSS reflection](http://webkit.org/blog/182/css-reflections/), [CSS transform](http://webkit.org/blog/130/css-transforms/) and [CSS animation](http://webkit.org/blog/138/css-animation/) too. (Did I miss something?)
|
||||
|
||||
Another new feature is the new full page zoom for zooming on web pages which was already implemented in the WebKit nightlies but [had to be manually activated](http://www.macosxhints.com/article.php?story=20080606045109546). In old Safari versions pressing Command + or - increased or decreased just the text size, sometimes destroying the whole layout of the page. The Safari 4 Developer Preview behaves just like the recent Firefox 3 RC1 and zooms out or zooms in the whole page layout and not just the text.
|
||||
|
||||
[](/media/safari4_zoom.png)
|
||||
|
||||
And while Apple just [states in their press release](http://www.apple.com/pr/library/2008/06/09snowleopard.html) that Safari 4 delivers "the fastest implementation of JavaScript ever, increasing performance by 53 percent", other sources like [MacRumors](http://www.macrumors.com/2008/06/10/apple-seeds-safari-4-to-developers/) or [Macworld UK](http://www.macworld.co.uk/macsoftware/news/index.cfm?newsid=21625&pagtype=allchandate) expect this increased JavaScript performance to be based on the implementation of the freshly new [SquirrelFish JavaScript engine](http://webkit.org/blog/189/announcing-squirrelfish/).
|
||||
|
||||
If you're a registered Developer you can access the Developer Preview via your downloads page on [Apple's Developer Connection site](http://developer.apple.com/). Safari 4 comes as an installation package and requires a previously installed Safari 3.1.1 and a restart after installation. The new Safari 4 Developer Preview will overwrite your current Safari application but an uninstall package is also provided within the download. And be aware that somehow the whole font rendering in all applications based on WebKit (like NetNewsWire or Coda) will be changed by this installation.
|
||||
@ -0,0 +1,25 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-17 15:21:57+00:00
|
||||
layout: post
|
||||
slug: quick-tip-borders-titles-plug-in-for-aperture
|
||||
title: 'Quick Tip: Borders & Titles Plug-In for Aperture'
|
||||
wordpress_id: 73
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Have you ever looked for a way to quickly add text to your images [without photoshopping a watermark image](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/) first?
|
||||
|
||||
There's a simple editing plug-in available for this task called [Borders & Titles](http://developer.apple.com/samplecode/BordersAndTitles/index.html) and as the name says you can add simple borders and text to your images within Aperture 2.1. It's a sample plug-in provided by Apple and it's fully functional. You can download it from Apple's Developer Connection website without registration:
|
||||
|
||||
[Aperture Edit Plugin - Borders & Titles](http://developer.apple.com/samplecode/BordersAndTitles/index.html)
|
||||
|
||||
[](/media/aperture_bt.png)
|
||||
|
||||
|
||||
|
||||
The downlaod package includes the source code too so you can adjust the plug-in if you're able to code Cocoa. After downloading put the BordersAndTitles.ApertureEdit plug-in into /Library/Application Support/Aperture/Plug-Ins and access the plug-in from Aperture.
|
||||
@ -0,0 +1,517 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-19 03:08:11+00:00
|
||||
layout: post
|
||||
slug: ubuntu-as-mac-file-server-and-time-machine-volume
|
||||
title: 'HowTo: Make Ubuntu A Perfect Mac File Server And Time Machine Volume [Update6]'
|
||||
wordpress_id: 75
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
For quite some time I use my Ubuntu machine as a file and backup server for all Macs in my network which is perfectly accessible from the Finder in Mac OS X. There are some instructions available in the web for this task but all failed in my case so I wrote my own tutorial with all the steps needed for it to work properly.
|
||||
|
||||
So here's my little Tutorial for connecting Mac OS X Leopard with Ubuntu and using your Ubuntu machine as a backup volume for Time Machine but all steps can be reproduced on every Linux box and they work with Mac OS X 10.4 Tiger too. At the end of this tutorial you will have a server which shows up in the Finder sidebar and behaves just like a Mac server when accessing it from your Macs. To be perfectly integrated with Mac OS X we're going to use [Apple's Filing Protocol (AFP)](http://en.wikipedia.org/wiki/Apple_Filing_Protocol) for network and file sharing.
|
||||
|
||||
Although this Tutorial involves using the Terminal in Ubuntu and looks a bit geeky it's very easy even for beginners. I have tried to explain all steps and Terminal commands so you may learn a bit about the Terminal too. At the end of the article you can download my Server Displays icon pack quickly made by me with custom icons for a Mac, Ubuntu and Windows server.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
Personally I use a fresh installation of Ubuntu 8.04 Hardy Heron Desktop version (32bit on one machine, 64bit on the other) and Mac OS X Leopard (10.5.3 and later) to connect to them. On my Ubuntu boxes there's no other file sharing protocol like samba (Windows sharing) or NFS activated.
|
||||
|
||||
**Update 12/07/2008:**
|
||||
[Rumors are](http://episteme.arstechnica.com/eve/forums/a/tpc/f/942005082731/m/370002065931?r=782005065931#782005065931) Apple will add some undocumented AFP commands with the Mac OS X 10.5.6 update which therefor won't be supported by the current Netatalk package (and maybe never will). So be sure to check the latest comments on this article when the 10.5.6 update is out to see if this rumor is true and if there are problems caused by that.
|
||||
|
||||
Here are the steps involved in setting up your Ubuntu box as a Mac file server:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1. Modify and install Netatalk (Open Source AFP implementation)
|
||||
|
||||
|
||||
2. Configure Netatalk
|
||||
|
||||
|
||||
3. Configure shared volumes (and Time Machine volume)
|
||||
|
||||
|
||||
4. Install Avahi (Open Source Bonjour implementation)
|
||||
|
||||
|
||||
5. Configure Avahi and advertise services
|
||||
|
||||
|
||||
6. Configure TimeMachine
|
||||
|
||||
|
||||
7. Conclusion, Problems and more informations
|
||||
|
||||
|
||||
8. Downloading and using the Server Display Icons
|
||||
|
||||
|
||||
9. Translations Of This Article
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1. Modify and install Netatalk
|
||||
|
||||
|
||||
|
||||
[Netatalk](http://netatalk.sourceforge.net/) is the Open Source implementation of AFP. Mac OS X requires encryption to work properly but the standard package of netatalk provided in the Ubuntu repositories doesn't include this feature. So we have to build our own netatalk package from the sources with the encryption feature enabled.
|
||||
|
||||
First you have to enable the Source Code repositories via System > Administration > Software Sources under the Ubuntu Software tab. Check the Source Code Box, click Close and choose Reload in the next dialogue.
|
||||
|
||||
|
||||
|
||||
**Update 09/28/2008:** Alessandro has built [a nice .deb package for i386 machines](http://dl.getdropbox.com/u/187424/netatalk_2.0.3-brando0_i386.deb). Although written in italian you can follow the necessary code snippets for installing this package [in his blog post.](http://gpz500.wordpress.com/2008/09/27/lairone-al-servizio-del-leopardo/) If the install package works for you just skip the following self compiling process and head over to the [Configure Netatalk section.](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#netatalk2)
|
||||
|
||||
Now fire up your Terminal under Applications > Accessories and execute the following lines (separately). You have to type Y for yes when Terminal asks you if it should continue:
|
||||
|
||||
`sudo apt-get build-dep netatalk
|
||||
sudo apt-get install cracklib2-dev fakeroot libssl-dev
|
||||
sudo apt-get source netatalk
|
||||
cd netatalk-2*`
|
||||
|
||||
Now you have downloaded the source code of Netatalk to your home folder, installed some required packages for building Netatalk and changed the directory to the downloaded folder.
|
||||
|
||||
Next you have to build the Netatalk package with the encryption option enabled:
|
||||
|
||||
`sudo DEB_BUILD_OPTIONS=ssl dpkg-buildpackage -rfakeroot`
|
||||
|
||||
Depending on your hardware this may take a while but you can enjoy the geeky build output in your Terminal:
|
||||
|
||||
[](/media/ubuntuserver2.png)
|
||||
|
||||
|
||||
|
||||
If everything went through without errors (except the signing warnings, can be ignored) you can install the recently created package:
|
||||
|
||||
|
||||
|
||||
`sudo dpkg -i ~/netatalk_2*.deb`
|
||||
|
||||
To stop Ubuntu from overwriting your custom Netatalk package you should set its state to hold. This will cause the Netatalk package being grayed out in the Software Update dialogue:
|
||||
|
||||
`echo "netatalk hold" | sudo dpkg --set-selections`
|
||||
|
||||
Now you have successfully build and installed your custom Netatalk package which now has support for encrypted logins. Now let's configure the whole thing.
|
||||
|
||||
|
||||
|
||||
## 2. Configure Netatalk
|
||||
|
||||
|
||||
|
||||
First you should deactivate services provided by Netatalk which are not needed if you just want to use your Ubuntu box for file sharing. This will speed up the response and startup time of Netatalk dramatically. For instance Netatalk starts the old AppleTalk protocol by default which is just needed for pre OS X systems. So we're going to use the graphical editor gedit for stopping unneeded services:
|
||||
|
||||
`sudo gedit /etc/default/netatalk`
|
||||
|
||||
gedit should pop up with the defined file loaded as superuser (needed for saving). Find the "#Set which daemons to run" part and replace the default values with these to enable just AFP and disable all unneeded services. Let the cnid_meta daemon run too and if you want to [share your Linux connected printer with your Mac](http://www.zaphu.com/2008/04/29/ubuntu-guide-configure-netatalk-to-share-a-usb-printer/) also enable the pap daemon (set to yes):
|
||||
|
||||
`ATALKD_RUN=no
|
||||
PAPD_RUN=no
|
||||
CNID_METAD_RUN=yes
|
||||
AFPD_RUN=yes
|
||||
TIMELORD_RUN=no
|
||||
A2BOOT_RUN=no`
|
||||
|
||||
Here it's very important to run the cnid_meta daemon because this service will handle all the metadata for us (namely the reosurce fork) which would get lost due to the fact that your Linux box isn't formatted as Apple's HFS+. If you're interested what the other services could do: atalkd is the AppleTalk daemon (pre-OSX file sharing, old printing), timelord can make your Linux box a network time server and please don't ask me for what a2boot is good for (If you know it, post it in the comments please / [Kelly suggests it's a netboot server for client Macs](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-7632)).
|
||||
|
||||
Press Ctrl + S to save the document or choose File > Save. Next we have to edit the main config file for AFP sharing called afpd.conf:
|
||||
|
||||
`sudo gedit /etc/netatalk/afpd.conf`
|
||||
|
||||
Scroll to the very bottom of the document and add this to the bottom (replace the whole line in case there's already one). This is one line so be sure that there's no line break in your afpd.conf file:
|
||||
|
||||
`- -transall -uamlist uams_randnum.so,uams_dhx.so -nosavepassword -advertise_ssh`
|
||||
|
||||
Press Ctrl + S to save the document or choose File > Save.
|
||||
|
||||
|
||||
|
||||
## 3. Configure shared Volumes
|
||||
|
||||
|
||||
|
||||
Now we have to tell the afpd daemon what Volumes to share. This is defined in the AppleVolumes.default file inside /etc/netatalk/. The following line will open this file in the gedit editor with superuser privileges (required for saving) where we can define our shared volumes:
|
||||
|
||||
`sudo gedit /etc/netatalk/AppleVolumes.default`
|
||||
|
||||
Scroll to the bottom of the document and define your Volume shares. By adding the following line you will share each users home directory with the user name as the Volume name. To make things more secure you can define all users who are allowed to connect to your Ubuntu box via AFP:
|
||||
|
||||
`~/ "$u" allow:username1,username2 cnidscheme:cdb`
|
||||
|
||||
Because we want to use the Ubuntu machine as a backup server for Time Machine you should define a second volume just for Time Machine. Create a new folder in your home directory first and name it TimeMachine (or anything you like). Then add the following line to your AppleVolumes.default. This is one line so be sure that there’s no line break in your AppleVolumes.default file:
|
||||
|
||||
`/home/username/TimeMachine TimeMachine allow:username1,username2 cnidscheme:cdb options:usedots,upriv`
|
||||
|
||||
Thanks to [tsanga](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-50) for pointing out the usedots and upriv options. The usedots option is required if you want to use invisible files and folders (those starting with a dot in the name). Otherwise afpd would encode them as :2e which is bad if you have to use invisible files (like .htaccess). If you're on Leopard **and have no Tiger installed Macs in your network or mixed OS X versions in your network** you should use the upriv option which adds support for AFP3 unix privileges. If you have Macs with Tiger installed just use options:usedots to avoid unexpected behavior:
|
||||
|
||||
`/home/username/TimeMachine TimeMachine allow:username1,username2 cnidscheme:cdb options:usedots`
|
||||
|
||||
Finally if you want more stability and can accept slower file transfers you can use the dbd cnidscheme (cnidscheme:dbd).
|
||||
|
||||
Press Ctrl + S to save the document or choose File > Save. Of course you can define every folder you like or even an attached USB disk. Just define the correct path. External drives in Ubuntu should be found under /media
|
||||
|
||||
Finally restart Netatalk to activate the changes:
|
||||
|
||||
`sudo /etc/init.d/netatalk restart`
|
||||
|
||||
|
||||
Although we now have a fully configured AFP file server it will not show up in the Finder sidebar on Mac OS X Leopard (but it's reachable via Go > Connect to Server... in the Finder). Macs use a service called [Bonjour](http://www.apple.com/macosx/technology/bonjour.html) for the sidebar thing (and for a lot of other cool stuff) and on the Linux side we can have this functionality with the Open Source implementation of Bonjour, called [Avahi](http://avahi.org/).
|
||||
|
||||
|
||||
|
||||
## 4. Install Avahi
|
||||
|
||||
|
||||
|
||||
So the Avahi daemon will advertise all defined services across your network just like Bonjour do. So let's install the avahi daemon and the mDNS library used for imitating the Bonjour service. When fully configured this will cause all Macs in your network to discover your Ubuntu box automatically:
|
||||
|
||||
`sudo apt-get install avahi-daemon
|
||||
sudo apt-get install libnss-mdns`
|
||||
|
||||
To make everything work properly you have to edit the nsswitch.conf file:
|
||||
|
||||
`sudo gedit /etc/nsswitch.conf`
|
||||
|
||||
Just add "mdns" at the end of the line that starts with "hosts:". Now the line should look like this:
|
||||
|
||||
`hosts: files mdns4_minimal [NOTFOUND=return] dns mdns4 mdns`
|
||||
|
||||
Press Ctrl + S to save the document or choose File > Save.
|
||||
|
||||
|
||||
|
||||
## 5. Configure Avahi and advertise services
|
||||
|
||||
|
||||
|
||||
Next we have to tell Avahi which services it should advertise across the network. In our case we just want to advertise AFP sharing. This is done by creating a xml-file for each service inside /etc/avahi/services/ following a special syntax. Let's create a xml-file for the afpd service with the following line:
|
||||
|
||||
`sudo gedit /etc/avahi/services/afpd.service`
|
||||
|
||||
A blank document should open in gedit. Now paste the following into the document and save the file by pressing Ctrl + S or by choosing File > Save:
|
||||
|
||||
`
|
||||
<?xml version="1.0" standalone='no'?><!--*-nxml-*-->
|
||||
<!DOCTYPE service-group SYSTEM "avahi-service.dtd">
|
||||
<service-group>
|
||||
<name replace-wildcards="yes">%h</name>
|
||||
<service>
|
||||
<type>_afpovertcp._tcp</type>
|
||||
<port>548</port>
|
||||
</service>
|
||||
<service>
|
||||
<type>_device-info._tcp</type>
|
||||
<port>0</port>
|
||||
<txt-record>model=Xserve</txt-record>
|
||||
</service>
|
||||
</service-group>
|
||||
`
|
||||
|
||||
update: The last part is used to assign a specific (Apple) hardware model to your Linux box. In this example your server will be advertised as an XServe and will be shown with this icon in the Finder sidebar. This will come in handy when you want to use your own icon for it or the one's made by me provided within this article. Thanks to [Simon Wheatley](http://www.simonwheatley.co.uk/2008/04/06/avahi-finder-icons/trackback/) for figuring this out. Additionally you can use these models in this file: RackMac (same as Xserve), PowerBook, PowerMac, Macmini, iMac, MacBook, MacBookPro, MacBookAir, MacPro, AppleTV1,1, AirPort
|
||||
|
||||
Finally restart the avahi daemon to activate all changes:
|
||||
|
||||
`sudo /etc/init.d/avahi-daemon restart`
|
||||
|
||||
Now you have configured the Avahi daemon to advertise AFP sharing across your network which will cause your Ubuntu box to show up in Finder's sidebar in Mac OS X Leopard. In Mac OS X 10.4 Tiger your Ubuntu server should now be visible under Network.
|
||||
|
||||
Now you're done with setting up AFP file sharing on your Ubuntu box and advertising it across the network for Finder's sidebar. Check if everything works as intended by clicking on your Ubuntu server in Finder and clicking on the "Connect As" button. Enter your username and password (the ones you're using on your Ubuntu machine) and you should see the Volumes we defined earlier with the AppleVolumes.default file:
|
||||
|
||||
|
||||
|
||||
Another side effect of using AFP is that your Ubuntu box will show up as a nice Apple Cinema Display icon instead of the BSOD windows icon. Here you see my Ubuntu server showing up in Finder as [Rockhopper](http://en.wikipedia.org/wiki/Southern_Rockhopper_Penguin):
|
||||
|
||||
|
||||
|
||||
update: If you've followed the revised version of this article your Linux box should now be represented by a Xserve icon in Finder:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 6. Configure Time Machine
|
||||
|
||||
|
||||
|
||||
**update 07/14/2008:** On the Mac side you have to enable the option to use network volumes as Time Machine drives first. Without it your freshly shared and advertised network volume won't show up in the disk selection dialogue in Time Machine. This is a hidden option not accessible via the graphical user interface so you have to copy & paste this in Terminal (it's one line):
|
||||
|
||||
`defaults write com.apple.systempreferences TMShowUnsupportedNetworkVolumes 1`
|
||||
|
||||
Thanks to [FoolsRun](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-345) and [tsanga](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-394) for pointing this out in the comments
|
||||
|
||||
Now just mount the "TimeMachine" Volume first and choose it as a backup disk in the Time Machine system preferences. Time Machine will create a sparsebundle disk image inside the volume and mounts that too. This is needed because the hard drive on your Ubuntu box is formatted as ext3 or Reiserfs and not the native Mac format HFS+. Because Time Machine backups everything to the disk image all metadata (like creation dates etc.) will be preserved.
|
||||
|
||||
When your first Time Machine backup is done you can remove all Volumes and the next time Time Machine starts it will automagically mount the disk image from your TimeMachine volume on your Ubuntu box without mounting the whole TimeMachine volume:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 7. Conclusion, Problems and more informations
|
||||
|
||||
|
||||
|
||||
You see that Linux and Ubuntu can be configured to behave like Macs in your network. But it's sad, that you have to fire up the Terminal to achieve this. I hope especially the Ubuntu team will simplify this in future versions. Another sad thing is that Ubuntu is missing a useful avahi/Bonjour and AFP implementation for Nautilus, the file manager. So there's no way to access your Mac from Ubuntu via AFP in the file manager. In my network I use SSH to access the Macs from Ubuntu or Linux by allowing Remote Login on the Macs in the Sharing preferences. But there's a command line based [AFP client available called afps-ng](http://alexthepuffin.googlepages.com/home) which uses the FUSE system.
|
||||
|
||||
Some other strategies of connecting Ubuntu/Linux and Mac OS X would involve sharing via [Samba](http://us6.samba.org/samba/) (Windows sharing) or [NFS](http://nfs.sourceforge.net/) but according to my experiences nothing beats the speed, stability and secureness of AFP.
|
||||
|
||||
But if you're interested you can have a look [at this post on the ubuntuforums](http://ubuntuforums.org/showthread.php?p=4387032#post4387032) to learn how to setup NFS for file sharing between Ubuntu and Mac OS X Leopard.
|
||||
|
||||
Although I have checked all log files while using file sharing and especially while Time Machine is running and found no errors or warnings I cannot guarantee it's working without errors or backup data loss on your system too. So I encourage you to check the system logs on Ubuntu AND on Mac OS X with the Console app in your Utilities folder. If you see no errors or warnings this configuration should be pretty bullet proof in terms of stability.
|
||||
|
||||
Finally the only problem remaining is that your Ubuntu or Linux box isn't formatted as journaled HFS+ so some scenarios would fail or make problems. This can include having your iTunes, iPhoto or Aperture library on your Ubuntu server. But the cnid_meta daemon will always try handle that for us. This will cause some hidden folders to show up in Ubuntu which are used to store all the metadata required to almost reproduce a HFS+ file system. But if you ever run into problems you can easily resolve these by creating sparse disk images on your server with the Disk Utility built into Mac OS X. Just create a new sparse disk image on your desktop, copy it to your mounted Ubuntu volume and mount the copied disk image by double clicking it. Now you can put all the files and libraries in it which depends on HFS+
|
||||
|
||||
**update 07/06/2008:**
|
||||
|
||||
|
||||
## Problems with creating the backup disk image
|
||||
|
||||
|
||||
|
||||
If time Machine says "The backup disk image could not be created" during the first backup attempt you can do the following to avoid this problem and some others (backup fail due to permissions):
|
||||
|
||||
In short, you have to create the backup disk image on your Desktop and copy it to your mounted Time Machine volume. But Time Machine creates a unique filename for the disk image and we can find out this name with a little trick:
|
||||
|
||||
First open up the Console from your Applications > Utilities folder and open the Time Machine preferences. In Time Machine preferences set your backup volume back to none. After that reselect your mounted Time Machine volume. The counter should start and Time Machine's big button will change to on. When the backup tries to start and fail have a look at your Console (Click All Messages in the sidepane). There should be a line tellung you the name of the disk image:
|
||||
|
||||
`Creating disk image /Volumes/TimeMachine/computername_0014e3856bd0.sparsebundle `
|
||||
|
||||
The computername should be the name you have assigned to your Mac. Now just click on that line and hit command + C to copy the message.
|
||||
|
||||
Now Open Disk Utility from your Applications > Utilities folder and click on New Image in the toolbar. Now just hit Command + V in the Save As field and remove everything before the name of the sparsebundle.
|
||||
|
||||
Update: The secret number Time Machine adds to your computer name is nothing more than the MAC address of the network device that your Mac uses to talk to your server, as [Simulacrum](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-4337) and [Todd](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-20613) found out in the comments. As he points out you can open up Network Utility and under the info tab you'll find a field called "Hardware Address". Just remove the colons and you have the number Time Machine adds to the disk image name.
|
||||
|
||||
In the field volume name write Backup of computername. Now FIRST chose sparse bundle disk image as the image format and THEN adjust the volume size to the size of your internal harddrive (minimum, choose more if you like) afterwards. Remember that Disk Utility won't let you make a bigger image file as you have physical hard drive space available if you don't chose sparse bundle disk image as the image format first. For reference have a look at this screenshot:
|
||||
|
||||
|
||||
|
||||
Select your Desktop as destination and click create. After the creation is finished drag the created disk image to your mounted Time Machine volume (you can delete the disk image on your desktop when copy is finished). Finally go to Time Machine preferences and start your backup again and everything should work as expected now. After the first backup (this can take a long time depending on your harddrive) you can unmount your Time Machine volume and the next time Time Machine starts it will grab and mount the sparse bundle disk image automatically (with "Backup of computername" as the volume name).
|
||||
|
||||
**update 09/21/2008:**
|
||||
|
||||
|
||||
|
||||
## Firewall Settings
|
||||
|
||||
|
||||
|
||||
As [Kevin points out in the comments](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6431) you would have to adjust any firewall you use. But the standard Ubuntu installation won't use any Firewall.
|
||||
|
||||
In short you have to allow communications over port 548 and 5353.
|
||||
|
||||
|
||||
|
||||
## "Connection Failed"
|
||||
|
||||
|
||||
|
||||
If you get one of those errors:
|
||||
|
||||
`"Connection Failed - There was an error connection to the server. Check the server name or IP address and try again"`
|
||||
|
||||
or
|
||||
|
||||
`"There was an error connecting to the server. Check the server name or IP address and try again. If you are unable to resolve the problem contact your system administrator."`
|
||||
|
||||
you should first be sure you have either no firewall on your Ubuntu box in use or have it configured to allow AFP communications as suggested in the above paragraph.
|
||||
|
||||
Remember that this error can be caused by a myriad of problems and just a lot of other configurations on your side. So you should try a minimal way: On my Ubuntu boxes I have no other file sharing protocol like samba or NFS enabled (even not installed) so the samba hostname and the AFP hostname can't interfere with each other. Also I've left the Workgroup field blank under System > Administration > Network > General tab.
|
||||
|
||||
If you still can't connect to your Ubuntu box you can edit your /etc/hosts file as [I've pointed out in the comments](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-417):
|
||||
|
||||
`sudo gedit /etc/hosts`
|
||||
|
||||
Add the following two lines at the very top of the file.
|
||||
|
||||
`127.0.0.1 localhost
|
||||
127.0.1.1 Rockhopper.local Rockhopper`
|
||||
|
||||
My server is named Rockhopper, adjust the name according to your server name. There should be some sort of name already but the important part here is the servername.local which is the AFP way of server names. If there are any other numbers at the beginning in your file leave them as they are.
|
||||
|
||||
If that won't solve the connection problems you can test out [Eric's solution as suggested in the comments](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6326) which would involve removing and reinstalling netatalk.
|
||||
|
||||
Sorry I can't give you any other solutions for that but in most cases it's some sort of network misconfiguration outside of netatalk or avahi and on Linux these can be a lot of configurations on your side I can't know of. And since I'm not able to reproduce these errors I can't investigate in them.
|
||||
|
||||
But for those people still having problems with these error messages: On Mac OS X have a look in the Console app inside your Utilities folder. Click on "All Messages" in the left sidebar, try to connect to your Ubuntu box in Finder and see the messages in Console. These are the "real" error messages which normally will lead you to a solution.
|
||||
|
||||
|
||||
|
||||
## -5014 error
|
||||
|
||||
|
||||
|
||||
Some people have problems when connecting to an AFP share and get a -5014 error. [As J5 pointed out in the comments](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-5021) you have to delete the hidden .AppleDB folders on your Ubuntu box and restart netatalk afterwards:
|
||||
|
||||
`sudo /etc/init.d/netatalk restart`
|
||||
|
||||
|
||||
|
||||
## Time Machine Full System Restore
|
||||
|
||||
|
||||
|
||||
In case of a full system restore you would have to boot your Mac from the Mac OS X installation DVD (the one delivered with your Mac) by pressing the c key during boot. Your Mac will start with a minimal UI where you have a Utilities section in the top menu bar. There you'll find "Restore from a Time Machine Backup" but it won't find your network share with your Time Machine backup. Luckily [Dmitry Nedospasov found a way to manage this](http://nedos.net/2008/03/29/restore-from-an-unsupported-time-machine-backup-with-the-leopard-dvd/) by simply mounting your Time Machine network share with the Terminal (which you can find under Utilities in the menu bar too) by utilizing the following syntax (shamelessly copied from [Dmitry](http://nedos.net/2008/03/29/restore-from-an-unsupported-time-machine-backup-with-the-leopard-dvd/)):
|
||||
|
||||
`mount -t afp afp://username:password@hostname/ShareName /Volumes/ShareMount`
|
||||
|
||||
Replace everything instead of /Volumes with your matching names. You can test if your network share was properly mounted by doing
|
||||
|
||||
`ls /Volumes`
|
||||
|
||||
which outputs the content of the Volumes folder and you should see your network share.
|
||||
|
||||
Now you can close the Terminal and select "Restore from Time Machine Backup" from the Utilities entry in the menu bar and select your mounted Time Machine backup and thats it. Oh, needless to say: a gigabit ethernet connection will speed things up dramatically even compared to (draft)n-WLAN.
|
||||
|
||||
**update 12/07/2008:**
|
||||
|
||||
|
||||
## Netatalk backup disk reaching maximum capacity
|
||||
|
||||
|
||||
|
||||
As [Seron](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-15122) pointed out in the comments, there is some discussion on the net regarding problems with Netatalk and TimeMachine when the backup disk reaches maximum capacity. This is due to missing support for the AFP commands FPSyncDir aka commands 78 and 78 in Netatalk. [As a commenter in an ArsTechnica forum says](http://episteme.arstechnica.com/eve/forums/a/tpc/f/942005082731/m/370002065931?r=782005065931#782005065931): "As soon as your backup volume will reach max capacity, it will self destruct because of it."
|
||||
|
||||
In the forum you'll also find some links to various patches to avoid problems with that. If you have tested such patch please post your experiences in the comments for this article.
|
||||
|
||||
|
||||
|
||||
## More Articles
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* In case you want to connect your iPhone via AFP: [An AFP Server on your iPhone](http://www.eecs.berkeley.edu/~job/afpd/AFP_File_Server_on_your_iPhone.html). This uses the Netatalk package too
|
||||
|
||||
|
||||
* [Netatalk 2.0 manual](http://netatalk.sourceforge.net/2.0/htmldocs/)
|
||||
|
||||
|
||||
* [All possible AppleVolumes.default options (part of the Netatalk manual)](http://netatalk.sourceforge.net/2.0/htmldocs/AppleVolumes.default.5.html)
|
||||
|
||||
|
||||
* [Overview and templates about services Avahi can advertise](http://holyarmy.org/2008/01/27/advertising-linux-services-via-avahibonjour)
|
||||
|
||||
|
||||
* [In-depth article about Sparse Bundle disk images](http://db.tidbits.com/article/9673)
|
||||
|
||||
|
||||
* [How-to: Get files off a Time Machine backup without using your Mac](http://carsonbaker.org/2008/06/23/time-machine-restore/): In case you have to access Time Machine backups from Ubuntu or any other Linux system
|
||||
|
||||
|
||||
* [Using NetBSD, with guest account](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143): [Johannes](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#comment-6143) laid down the steps to use NetBSD instead of Ubuntu.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 8. Downloading and using the Server Display Icons
|
||||
|
||||
|
||||
|
||||
I've quickly crafted a custom icon for your Ubuntu server. It's the Apple Cinema Display with the default wallpaper of Ubuntu 8.04 called Hardy Heron. Additionally I've included an icon with the default Leopard and the default Vista wallpaper to represent your Leopard and Windows server too (The default Mac server icon uses the old Tiger wallpaper).
|
||||
|
||||
Here you can see the icons included in the Server Displays icon pack:
|
||||
|
||||
|
||||
|
||||
Because I've just modified Apple's standard icons these icons are just available via this blog post and they will not show up in my Goodies section. Just download the whole package directly via this link:
|
||||
|
||||
[v1.0 | 4 icons | zip-file | 5.5MB](http://www.kremalicious.com/media/server_displays_by_kremalicious.zip)
|
||||
|
||||
|
||||
|
||||
## How to use the icons
|
||||
|
||||
|
||||
|
||||
In the avahi configuration part in this article you have assigned the Xserve device info to your afpd.service file. All you have to do is to replace the generic Xserve icon (or whatever model you have assigned in your afpd.service file) with an icon from this icon package. Just rename the Ubuntu Server.icns to com.apple.xserve.icns and navigate to
|
||||
|
||||
/System/Library/CoreServices/CoreTypes.bundle/Contents/Resources
|
||||
|
||||
Drag & drop the renamed file into this path and replace the generic icon (making a backup before doing that is a good idea) and after a logout all your avahi advertised Ubuntu servers should be displayed with the new icon (assuming that you assigned a device model in avahi).
|
||||
|
||||
If you've used another model in your afpd.service file, browse the Resources of CoreTypes.bundle to get to know the correct filename for the device icon and replace that file.
|
||||
|
||||
As for the Windows Vista server icon: Just rename the Windows Server.icns file to public.generic-pc.icns and navigate to
|
||||
|
||||
/System/Library/CoreServices/CoreTypes.bundle/Contents/Resources
|
||||
|
||||
Now drag & drop the renamed file into this path and replace the generic icon (making a backup before doing that is a good idea) and after a logout all your Windows servers should be displayed with the new icon.
|
||||
|
||||
update: A solution for the icon problem is here: [Simon Wheatley figured out](http://www.simonwheatley.co.uk/2008/04/06/avahi-finder-icons/trackback/) how to assign a different icon to your avahi advertised Linux box. All you have to do is assigning a device info part at the end of the avahi service file for AFP. I've updated this article to include this part. Please head back to the Configure Avahi and advertise services part in this article and edit your afpd.service file again if you've followed the first revision of this article.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Congratulations! You finally arrived at the end of my article. There's a good chance that your coffee or tea cup is now empty. But before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-](http://www.kremalicious.com/feed/) or [Atom-Feed](http://www.kremalicious.com/feed/atom), discuss this article or buy me my next coffee ;-)
|
||||
|
||||
|
||||
|
||||
## 9. Translations Of This Article
|
||||
|
||||
|
||||
|
||||
The following articles are direct translations of my article but some of them are slightly modified or simplified. Remember that the authors/translators are responsible for the content.
|
||||
|
||||
German: [Ubuntu + Apple Fileserver + TimeMachine](http://www.kde4.de/?page_id=389) on [kde4.de](http://www.kde4.de)
|
||||
French: [Tuto: Comment créer votre serveur Time Capsule sous Debian](http://blog.delacelle.com/post/2009/01/19/tuto-comment-creer-votre-serveur-timecapsule-sous-debian-ou-ubuntu/) on the [Blog of Pierre de la Celle](http://blog.delacelle.com/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Article Updates
|
||||
|
||||
|
||||
|
||||
|
||||
01/19/2009 added links to some translations of this article
|
||||
|
||||
|
||||
|
||||
|
||||
12/07/2008 added a warning regarding the new undocumented AFP commands which maybe will be added by Apple with the Mac OS X 10.5.6 update
|
||||
|
||||
|
||||
|
||||
|
||||
09/28/2008 [added a link](http://www.kremalicious.com/2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/#netatalk1) to the precompiled Netatalk .deb package from Alessandro
|
||||
|
||||
|
||||
|
||||
|
||||
07/14/2008 added the Time Machine network volume hack under 6. Configure Time Machine
|
||||
|
||||
|
||||
|
||||
|
||||
07/06/2008 added a new part Problems with creating the backup disk image
|
||||
|
||||
|
||||
|
||||
|
||||
06/21/2008 added instructions for changing the server icons in Mac OS X
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-25 15:29:22+00:00
|
||||
layout: post
|
||||
slug: apertureedit-is-edit-for-aperture-now-updated-to-12
|
||||
title: ApertureEdit is Edit for Aperture now, updated to 1.2
|
||||
wordpress_id: 77
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
The All-in-one Aperture adjustment plugin bundle from [Human Software](http://www.humansoftware.com) is now called Edit for Aperture or just [Edit](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html). The new version 1.2 can now apply multiple layers of curves correction at once and the interface gets a new split image view. Also "different compatibility issues for PowerPC users" were fixed according to the release notes.
|
||||
|
||||
The ApertureEdit plug-in is a bundle of 12 different modules for denoising, lens fixing, framing, light effects and many more. All effects can be applied to one image at a time or to a whole set of images at once and according to Human Software Edit offers more than 4000 professional effects. Just head over to the [product page](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit11.html) to see all effects and features this plugin bundle is capable of.
|
||||
|
||||
The whole bundle is priced at US$ 299.95 and it's available [from Human Software's Online Shop](http://shareit1.element5.com/programs.html?productid=300256595&languageid=1&cart=1&cookies=1). Or you can buy just one single plug-in too which will cost you US$ 69.95 for each. There's a [trial version](http://www.humansoftware.com/pages1200/ApertureEdit/HSapertureedit_trial.html) available too and if you don't want to mail Human Software for the trial version you can download it from [MacUpdate](http://www.macupdate.com/info.php/id/27639/apertureedit).
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-25 16:41:59+00:00
|
||||
layout: post
|
||||
slug: new-canon-stuff-xs-eos-1000-430ex-ii
|
||||
title: 'New Canon stuff: Digital Rebel XS/EOS 1000D/Kiss F And Speedlite 430EX II
|
||||
announced'
|
||||
wordpress_id: 78
|
||||
categories:
|
||||
- photography
|
||||
---
|
||||
|
||||
After the latest Digital Photo Professional update (DPP 3.4.1.1) [revealed some evidence about an upcoming Canon EOS Rebel XS/1000D](http://www.bobatkins.com/photography/digital/canon_xs_1000D_dpp34.html), Canon finally introduced this new entry-level DSLR this month. The [EOS Digital Rebel XS/1000D/Kiss F](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp) ([full product specifications](http://www.canon-europe.com/For_Home/Product_Finder/Cameras/Digital_SLR/EOS_1000D/index.asp?specs=1)) is technically a hybrid between hardware and features found in Canon's entry-level cameras from the past: the 7-point autofocus system comes from the XT/350D, the Digic III processor is the same as in the XSi/450D and the Live View feature is implemented with the same features as found in the XSi/450D.
|
||||
|
||||
With this DSLR Canon seems to open up a new class in their EOS system which is somehow below the former entry level cameras (XT/350D, XTi/400D) and the latest entry-level XSi/450D. It's priced 200$ below Canons current or former entry-level DSLR XSi/450D and you can find a nice first review of this new DSLR [over at Digital Photography Review](http://www.dpreview.com/previews/Canon_1000D/).
|
||||
|
||||
[](/media/speedlite430exii.jpg)Canon also introduced the new midrange Speedlite 430EX II, replacing the 430EX flash unit. This new Speedlite is now fully configurable with the Camera's LCD menu and it got now a metal shoe. According to [Canon](http://www.canon.co.uk/press_centre/press_releases/cameras_accessories/speedlite_430ex_ii_press_release.asp) the 430EX II also boasts 20% faster recycling times and is more silent while doing this. In Europe and in the USA the Speedlite should be available from the end of July.
|
||||
17
_src/_posts/2008-06-30-stone-head.markdown
Normal file
17
_src/_posts/2008-06-30-stone-head.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-06-30 11:26:14+00:00
|
||||
layout: post
|
||||
slug: stone-head
|
||||
title: Stone Head
|
||||
wordpress_id: 1961
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
A stone made head which can be twittled. Halle(Saale)/Germany. Heavy Color Adjustements in Aperture 2.1
|
||||
|
||||
[Photo on flickr](http://www.flickr.com/photos/krema/2664367058)
|
||||
@ -0,0 +1,44 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-07-01 16:39:02+00:00
|
||||
layout: post
|
||||
slug: everything-back-to-normal-on-kremaliciouscom-almost
|
||||
title: Everything Back To Normal On Kremalicious.com (Almost)
|
||||
wordpress_id: 80
|
||||
categories:
|
||||
- personal
|
||||
---
|
||||
|
||||
As you may have noticed, kremalicious.com was a bit screwed in the last week and some of you have asked me via mail and twitter what exactly was wrong. So to satisfy the curious geek in you I will provide some informations about it.
|
||||
|
||||
It all started with a move of my whole website to new and shiny servers with PHP 5 running by my host. I didn't heard of any incompatibilities between the latest Wordpress version running on PHP 5 and in fact Wordpress loves to use PHP 5. But somehow I wasn't able to update my site neither over http or ftp. Since I can contact my host admins directly ([thank you jpBerlin/Heinlein-Support!](http://www.jpberlin.de/)) this problem was addressed rather quickly. They just neglected to tell me that the server address for login also changed (I should have think of this too). So all my changes were applied to my Wordpress installation on the old server. Problem solved I thought.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
But more problems appeared. The display of the newest and latest posts and the next post/previous post links at the end of every article didn't work as they should. But not enough I wasn't able to moderate any comments. Sigh. Looked like any sort of database problem and I started a lot of things. First I manually scanned all database entries for any wrong things but I couldn't find anything suspicious. After that I dropped the whole database and imported my database dump but this didn't solve the problems. My final step was to re-install everything so that Wordpress creates the tables in the databse. And guess what: It didn't work too!
|
||||
|
||||
Now it's clear something with my code must be wrong, I thought. For displaying the latest posts in Wordpress I use a pretty standard way which is [described in the Wordpress Codex](http://codex.wordpress.org/Template_Tags/get_posts):
|
||||
|
||||
`<?php $postslist = get_posts('numberposts=5&order=DESC&orderby;=post_date');
|
||||
foreach ($postslist as $post) : setup_postdata($post); ?>
|
||||
<ul>
|
||||
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span><?php the_date(); ?></span></li>
|
||||
</ul>
|
||||
<?php endforeach; ?>`
|
||||
|
||||
This would get all recent posts sorted by their post_date entry in the (wp_posts) database table and style it as an unordered list with my preferred format. This code worked since the launch of kremalicious.com and I first used it to display the recent blog entries on my start page. But since i didn't change anything in the code this couldn't be caused by wrong code or something.
|
||||
|
||||
So finally I've decided to [post a question](http://wordpress.org/support/topic/185896) describing my problems in the Wordpress support forums and that finally didn't solve my problems but now it was clear what caused this bad behavior: [A bug in MySQL](http://bugs.mysql.com/bug.php?id=32202)!
|
||||
|
||||
Now this makes sense! Beside the new PHP 5 version my host new server also included a new MySQL version which was affected [by this bug](http://bugs.mysql.com/bug.php?id=32202). The bug in short: Every query with GROUP BY just ignores the subsequent ORDER BY clause. Yeah, I found it!
|
||||
|
||||
This bug affects all versions of MySQL since 5.0.50 and it seems there is no stable version available at the moment with the fix included (please correct me if I'm wrong!). So if you're running Wordpress on a server with one of these MySQL versions installed you should experience my problems as well if you're using get_posts/orderby stuff.
|
||||
|
||||
Thankfully [a commenter](http://wordpress.org/support/topic/185896#post-793417) in the Wordpress forums reminded me of a nice temporary solution to this mess until my host updates MySQL: using wp_get_archives for displaying the recent posts. But this won't let me display the dates anymore:
|
||||
|
||||
`<ul><?php wp_get_archives('type=postbypost&limit;=5'); ?></ul>`
|
||||
|
||||
Problem temporary solved!
|
||||
|
||||
The remaining problem is the wrong display of the next post/previous post links under every article (single.php). A commenter on my post in the Wordpress forum states that this could be caused by different loops interfering with each other. But I can't find anything wrong in my code with the loops and more important I didn't change the code and it worked fine before the server move. Now the only thing I can do is to wait for my host updating the MySQL installation. Then I will see if this remaining problem is caused by MySQL too. But as always, if you have any suggestions feel free to post them in the comments.
|
||||
@ -0,0 +1,48 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-07-08 19:19:54+00:00
|
||||
layout: post
|
||||
slug: new-aperture-plug-ins-jade-and-ptlens
|
||||
title: 'New Aperture Plug-Ins: Jade And PTLens'
|
||||
wordpress_id: 84
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Last week two new image editing plug-ins were announced for Aperture 2.1: The PTLens plug-in for correcting barrel distortion, vignetting, chromatic aberration, and perspective and the Jade plug-in for automatic correction of color, levels and exposure.
|
||||
|
||||
The [PTLens plug-in](http://epaperpress.com/ptlens/) from [ePaperPress](http://epaperpress.com/) was available as a Photoshop plug-in in the past and is well known for its lens pincushion, barrel distortion, vignetting, chromatic aberration, and perspective correction abilities based on a lens model database similiar to [Kekus' LensFix CI plug-in](http://www.kekus.com/software/plugin.html).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
While I love the plug-ins ability to correct perspectives the Aperture plug-in doesn't work with RAW files(!), just with tiff and jpeg files which is one more way to compromise the way Aperture works (In my opinion the whole plug-in architecture of Aperture does that). And while I would love to show you the plug-ins user interface in Aperture PTLens refused to open either JPEG or TIFF files. So here's just a screenshot of the standalone application:
|
||||
|
||||
[](/media/ptlens_ui.png)
|
||||
|
||||
|
||||
|
||||
So to me the PTLens plug-in for Aperture isn't finished yet. But you can download a [trial version from the plug-ins website](http://epaperpress.com/ptlens/media.html).
|
||||
|
||||
|
||||
|
||||
The second plug-in recently released is the [Jade plug-in](http://jade.datamind.biz/) from Datamind. Because of its speed also on consumer Macs, Aperture 2 became popular among amateur photographers too. [Datamind](http://datamind.biz) targets it's first Aperture plug-in [Jade](http://jade.datamind.biz/) at this group. The former standalone application for Mac and Windows is now an Aperture adjustment plug-in for correcting your pictures colors, levels and exposure automatically with Dataminds own algorithm. And its user interface is very clean and uncluttered:
|
||||
|
||||
[](/media/jade_ui.png)
|
||||
|
||||
|
||||
|
||||
While I have to say Jade produces very reasonable results it lacks a lot of controls and fails with complicated pictures where Aperture's adjustment controls wouldn't. So I would say this plug-in would be better as an iPhoto plug-in. Do you really want a blown up photoshop or tiff file for every photo you're going to correct in Aperture?
|
||||
|
||||
|
||||
|
||||
Nevertheless you can download a [trial version of the plug-in from Dataminds website](http://jade.datamind.biz/media/) and you would have to pay either 19.99€ for home use or 49.99€ for Pro use. You can have alook at [Dataminds very interesting explanation o the different license models](http://jade.datamind.biz/faq#licence).
|
||||
|
||||
Interested in more Aperture plug-ins? Just have a look at my article [First overview: Aperture 2.1 adjustment plugins have arrived](http://www.kremalicious.com/2008/05/first-aperture-adjustment-plugins-have-arrived/) to get an overview about what's available at the moment.
|
||||
98
_src/_posts/2008-07-11-enjoy-kremaliciousiphone.markdown
Normal file
98
_src/_posts/2008-07-11-enjoy-kremaliciousiphone.markdown
Normal file
@ -0,0 +1,98 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-07-11 00:20:22+00:00
|
||||
layout: post
|
||||
slug: enjoy-kremaliciousiphone
|
||||
title: Enjoy Kremalicious{iPhone}
|
||||
wordpress_id: 85
|
||||
categories:
|
||||
- personal
|
||||
---
|
||||
|
||||
I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets?
|
||||
|
||||
<!-- more -->
|
||||
|
||||
When the website detects an iPhone or iPod Touch it will automatically switch to another freshly created theme which is absolutely seamless to the user. This detection is done by the wonderful slim iPhone Wordpress plug-in from ContentRobot which was slightly modified by me.
|
||||
|
||||
The theme itself makes heavy use of the -webkit-border-radius css option to display all the round corners. That's why there are just four images at work in the whole theme which makes it load in no time even on EDGE connections. And because just the theme is switching all the content remain the same so you don't have just a shortened mobile version of this website.
|
||||
|
||||
|
||||
Beside that I've used some special html and css properties which are essential for the iPhone:
|
||||
|
||||
|
||||
|
||||
## The Viewport
|
||||
|
||||
|
||||
|
||||
While Safari on iPhone will display all websites just fine it can happen that the initial viewport is too big so the text is too small to read. By setting a viewport meta tag you can exactly define the viewable dimensions of your website. Apple has [some nice examples](http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/chapter_4_section_3.html#//apple_ref/doc/uid/TP40006509-SW33) for understanding the importance of setting the Viewport in iPhone optimized websites.
|
||||
|
||||
The viewport can be larger or smaller than the visible area but I wanted my content to exactly fit the width of the iPhone and the goal was to make the text legible on first load. So here's what I use for kremalicious{iPhone}:
|
||||
|
||||
`<meta name="Viewport" content="maximum-scale=1.6,width=device-width" >`
|
||||
|
||||
This code will let the user scale the content up to 1.6 times to the default view and the default width of the content is set to the width of the (iPhone) device.
|
||||
|
||||
|
||||
## Tap Color
|
||||
|
||||
|
||||
There's neither an active nor a hover state for links on the iPhone which makes sense on a touch interface although it would be much easier to just use a:active for the tap highlighting. Safari on the iPhone uses a special webkit property for that:
|
||||
|
||||
`-webkit-tap-highlight-color: rgba(234,234,234,0.5);`
|
||||
|
||||
|
||||
|
||||
## Home Screen Icon
|
||||
|
||||
|
||||
I've used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it's a 160dpi screen). You really should use a bigger size than [Apple's recommendation in their iPhone HIG](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/chapter_14_section_2.html). You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section:
|
||||
|
||||
`<link rel="apple-touch-icon" href="/i/apple-touch-icon.png" />`
|
||||
|
||||
And finally many thanks to [cschock](http://www.cschock.de) for continuously testing my code voodoo soup even at late hours.
|
||||
|
||||
|
||||
## Resources for you to do the same and even more
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* [iWPhone by ContentRobot](http://iwphone.contentrobot.com/): The plug-in I use for kremalicious{iPhone}. It detects an iPhone or iPod Touch and switches to another simple theme. You can easily adjust the plugin to point it to your own theme.
|
||||
|
||||
|
||||
* [WPTouch - Wordpress iPhonified](http://www.bravenewcode.com/wptouch/): If you don't want to digg into html, css and iPhone specific properties this plug-in will help you. Once activated it automatically switches to an iPhone like theme with lots of eyecandy. You can customize some colors and a lot of different icons all from the Wordpress admin panel
|
||||
|
||||
|
||||
* [Tutorial: Building a website for the iPhone](http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/): Amazing tutorial for changing content based on the orientation of the iPhone or iPod Touch. Just browse their website with your iPhone or iPod Touch to see it in action.
|
||||
|
||||
|
||||
* [iPhone Native Looking Skin](http://ajaxian.com/archives/iphone-native-looking-skin): Sort of a template based on css and javascript which simulates the iPhone UI. ([Final look](http://joehewitt.com/files/iphone/navigation.html))
|
||||
|
||||
|
||||
* [Touching and Gesturing on the iPhone](http://ajaxian.com/archives/iphone-native-looking-skin): Build your websites with some touch gesture features! Here's the javascript code for it.
|
||||
|
||||
|
||||
|
||||
|
||||
## THE Apple resources for iPhone & Web Content
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* [Safari Web Content Guide for iPhone](http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/Introduction/chapter_1_section_1.html)
|
||||
|
||||
|
||||
* [iPhone Human Interface Guidelines for Web Applications](http://developer.apple.com/documentation/iPhone/Conceptual/iPhoneHIG/Introduction/chapter_1_section_1.html)
|
||||
|
||||
|
||||
* [iPhone Human Interface Guidelines](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/chapter_1_section_1.html) (free developer account required)
|
||||
|
||||
|
||||
_
|
||||
@ -0,0 +1,21 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-07-11 19:13:16+00:00
|
||||
layout: post
|
||||
slug: new-aperture-plug-in-nik-announces-silver-efex-pro
|
||||
title: 'New Aperture Plug-In: Nik announces Silver Efex Pro'
|
||||
wordpress_id: 86
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Beside a new version of Color Efex Pro for Capture NX, Nik announced a brand new plug-in for Photoshop and Aperture. [Silver Efex Pro](http://www.niksoftware.com/silverefexpro/usa/entry.php) is a tool to create black & white images with the power and simplicity of the U-Point technology. You can easily fine tune portions of your black & white images. It's also capable of emulating film grain and 18 different types of film while also providing 20 one-click preset styles. But Silver Efex Pro is also capable of color toning the image.
|
||||
|
||||
[](/media/nik_silverefex.png)
|
||||
|
||||
|
||||
|
||||
You can get a [15-day trial from Nik's website](http://www.niksoftware.com/site/cont_index.php?nav_top=367&cms_child=__demo&productId=262). It can be purchased through Nik's online store for US$199.95.
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-07-15 14:04:46+00:00
|
||||
layout: post
|
||||
slug: wordpress-25-get-rid-of-that-sluggish-dashboard
|
||||
title: 'Wordpress 2.5+: Get Rid of That Sluggish Dashboard'
|
||||
wordpress_id: 87
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute.
|
||||
|
||||
I've searched for a simple way of disabling those feeds, plugins etc. stuff the Wordpress Dashboard tries to fill but it seems you can't disable these from the backend. But there's a quick way for doing this which involves editing your /wp-admin/index-extra.php and uncomment some lines there. This will leave your Dashboard intact while it stops Wordpress from connecting to various sources to screw your blog up when you just want to quickly write something.
|
||||
<!-- more -->So open your /wp-admin/index-extra.php file. It should look like this:
|
||||
|
||||
`<?php
|
||||
require_once('admin.php');
|
||||
require( 'includes/dashboard.php' );
|
||||
require_once (ABSPATH . WPINC . '/rss.php');
|
||||
@header('Content-Type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
|
||||
switch ( $_GET['jax'] ) {
|
||||
case 'incominglinks' :
|
||||
wp_dashboard_incoming_links_output();
|
||||
break;
|
||||
case 'devnews' :
|
||||
wp_dashboard_rss_output( 'dashboard_primary' );
|
||||
break;
|
||||
case 'planetnews' :
|
||||
wp_dashboard_secondary_output();
|
||||
break;
|
||||
case 'plugins' :
|
||||
wp_dashboard_plugins_output();
|
||||
break;
|
||||
}
|
||||
?>`
|
||||
|
||||
|
||||
Now just uncomment the lines so it looks like this (every line with two leading // is uncommented and therefore inactive):
|
||||
|
||||
`<?php
|
||||
require_once('admin.php');
|
||||
require( 'includes/dashboard.php' );
|
||||
// require_once (ABSPATH . WPINC . '/rss.php');
|
||||
@header('Content-Type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
|
||||
// switch ( $_GET['jax'] ) {
|
||||
//
|
||||
// case 'incominglinks' :
|
||||
// wp_dashboard_incoming_links_output();
|
||||
// break;
|
||||
//
|
||||
// case 'devnews' :
|
||||
// wp_dashboard_rss_output( 'dashboard_primary' );
|
||||
// break;
|
||||
//
|
||||
// case 'planetnews' :
|
||||
// wp_dashboard_secondary_output();
|
||||
// break;
|
||||
//
|
||||
// case 'plugins' :
|
||||
// wp_dashboard_plugins_output();
|
||||
// break;
|
||||
//
|
||||
// }
|
||||
?>`
|
||||
|
||||
And that's it. Save the file on your server, log in to your Wordpress backend and you should see your Dashboard with everything intact. It just won't search for incoming links and all those other RSS sources anymore.
|
||||
|
||||
Remember that every update of Wordpress will overwrite this file.
|
||||
|
||||
|
||||
17
_src/_posts/2008-07-23-leaf-life.markdown
Normal file
17
_src/_posts/2008-07-23-leaf-life.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-07-23 20:38:57+00:00
|
||||
layout: post
|
||||
slug: leaf-life
|
||||
title: Leaf Life
|
||||
wordpress_id: 1908
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
Having fun with Aperture and Silver Efex Pro.
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/2701886080)
|
||||
@ -0,0 +1,96 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-08-03 17:10:25+00:00
|
||||
layout: post
|
||||
slug: tips-for-journalists-reporting-from-china
|
||||
title: Tips for Journalists Reporting From China
|
||||
wordpress_id: 95
|
||||
categories:
|
||||
- photography
|
||||
---
|
||||
|
||||
|
||||
|
||||
Jingjing and Chacha are watching you
|
||||
|
||||
|
||||
|
||||
As you may know there's a huge Internet censorship going on in China. Contrary to promises made by chinese authorities and the International Olympic Committee (IOC) this Internet censorship is active during the Olympic Games [even in the international media centre](http://news.bbc.co.uk/2/hi/asia-pacific/7532338.stm). And the [IOC shares the current ideas of censorship in China](http://www.rsf.org/article.php3?id_article=26461).
|
||||
|
||||
And as in every political system with totalitarian elements there's a good chance you will meet some angry lackeys if you're going to report about topics the chinese authorities don't want you to report. But more important they will threat your sources if their identity gets revealed. So if you want to report about [the water shortage in the villages around Beijing](http://www.voanews.com/english/2008-06-27-voa10.cfm), the [massive air pollution in Beijing](http://english.chosun.com/w21data/html/news/200807/200807300031.html) or about all the forced resettlements going on in China you should consider some security precautions to protect you and your sources.
|
||||
|
||||
|
||||
<!-- more -->Especially there's two things to do here: First you have to use technologies to circumvent firewalls. Second is to secure your connections and your communication to protect you and your sources.
|
||||
|
||||
And remember that you have to protect your Computer _before_ arriving in China because websites like the [Tor project](http://www.torproject.org) are blocked in China.
|
||||
|
||||
|
||||
|
||||
## Circumvent China's great firewall and secure your connections
|
||||
|
||||
|
||||
|
||||
The easiest way to get around the firewall is to install [Tor](http://www.torproject.org), [Psiphon](http://psiphon.civisec.org/) or [Proxify](https://proxify.com/) to fog your IP address and your location. A better way would be using a VPN (Virtual Private Network) connection or an SSL tunnel. This way all of your internet connections are secure and encrypted. If you're working for a bigger news agency there's a good chance they have its own VPN and you can connect securely to that as well. Just ask your IT department for how to achieve this.
|
||||
|
||||
|
||||
|
||||
## Secure your Communication
|
||||
|
||||
|
||||
|
||||
After you have secured your connection data you have to make sure your communication is secure as well to protect you and your sources.
|
||||
|
||||
|
||||
|
||||
## E-Mail
|
||||
|
||||
|
||||
|
||||
If you use mails be sure to encrypt everything, your logins with SSL/TLS **and** the mails itself either with GPG/PGP or certificates.
|
||||
|
||||
|
||||
|
||||
## Skype
|
||||
|
||||
|
||||
|
||||
Just don't download Skype while being in China! If you want to use Skype be sure to download it outside of China. But remember that it's not possible to secure your Skype chats and calls because they can't be encrypted.
|
||||
|
||||
|
||||
|
||||
## Chat
|
||||
|
||||
|
||||
|
||||
Here you should use encryption as well. Members of .Mac/MobileMe can have encrypted chats with iChat. For all the others there's [Off-The-Record Messaging (OTR)](http://en.wikipedia.org/wiki/Off-the-Record_Messaging) which can be [used with every chat protocol out there](http://www.cypherpunks.ca/otr/).
|
||||
|
||||
|
||||
|
||||
## Phone/Mobile
|
||||
|
||||
|
||||
|
||||
Reporters Without Borders advise to use different SIM cards especially if you're going to contact "sensitive" people.
|
||||
|
||||
|
||||
|
||||
## Secure your Computer and physical data
|
||||
|
||||
|
||||
|
||||
Even without any data or other communication going on with your computer there are some critical things to remember in terms of security.
|
||||
|
||||
Especially encrypting sensible data on your computer is always a good thing to do. On the Mac you can just activate FileVault. On Windows Vista you can activate Bitlocker and on Linux you can use TrueCrypt (which can be used on Mac and Windows too). This way sensible data (your contact lists!) are encrypted and can only be recovered with the appropriate password.
|
||||
|
||||
Another good hint is to use an EFI or BIOS password which has to be entered when you start your computer. But this alone won't protect you that much because your hard drive can easily be removed and accessed. But if the hard drive is encrypted too you have relatively great security against chinese authorities.
|
||||
|
||||
|
||||
If you want to know more about how to protect you and your sources be sure to check out these great resources:
|
||||
|
||||
[Advice for foreign journalists covering human rights situation during Beijing Games (Reporters Without Borders)](http://www.rsf.org/article.php3?id_article=27991)
|
||||
|
||||
[Handbook for Bloggers and Cyber-Dissidents (Reporters Without Borders)](http://www.rsf.org./IMG/pdf/guide_gb_md.pdf)
|
||||
|
||||
[Reporters’ Guide to China (Foreign Correspondents Club of China)](http://www.rsf.org/IMG/pdf/Guide_FCCC.pdf)
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-08-22 18:50:31+00:00
|
||||
layout: post
|
||||
slug: howto-create-a-mobile-encrypted-aperture-vault
|
||||
title: 'HowTo: Create A Mobile Encrypted Aperture Vault'
|
||||
wordpress_id: 142
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
- tutorial
|
||||
---
|
||||
|
||||
When on the road I always take a little mobile hard drive with me where all my referenced Aperture Masters from the past years and my mobile Aperture Vault (backing up the un-referenced Masters from the current year) reside. But being little and mobile also means the external hard drive can easily be lost or stolen exposing all my pictures to the thief. To avoid that you can use encryption so in the case of a lost or theft the data is not accessible by the thief. This can easily be done with [sparse bundle disk images](http://db.tidbits.com/article/9673) so you won't have to encrypt the whole hard drive with additional software.
|
||||
|
||||
So in this quick tutorial I will show you how to create an encrypted Aperture Vault by using Sparse Bundle Disk Images and by utilizing tools built into Mac OS X. All this can be done in two simple steps.
|
||||
|
||||
|
||||
<!-- more -->
|
||||
|
||||
## 1. Create an encrypted disk image
|
||||
|
||||
|
||||
|
||||
First you have to create the encrypted disk image where the Aperture Vault will reside. So fire up Disk Utility from the Utilities folder inside your Applications folder or use Spotlight to open it.
|
||||
|
||||
Be sure there is no device or volume selected in the sidebar and click on the New Image icon in the toolbar. Set a file name of the disk image and the Volume Name (the name of the mounted disk image on your desktop). Change all the settings as seen in the following screenshot. Be sure to select sparse bundle disk image as the Image Format before changing the volume size. This way you can set a bigger volume size than your physical disk space available on your hard drive. After creation the disk image won't be as big as you have set it with volume size. It will grow as you write files to it. For maximum security (but slower performance) select 256-bit AES encryption in the Encryption drop down menu:
|
||||
|
||||
|
||||
|
||||
Finally set the destination where you want to have the disk image created. To make it all mobile choose your mobile hard drive as destination. After clicking Create you will be asked to provide a password for encrypting the disk image. Be sure to click on the little key icon to use Mac OS X built in password generator. Generate a new extra long password. Type in your new password manually in the Verify field and be sure to check "Remember password in my keychain". This is the only time you have to provide the password since it will be saved in your keychain after clicking OK.
|
||||
|
||||
Now your newly created sparse bundle disk image ahould be mounted on your desktop which is perfectly fine for the next step.
|
||||
|
||||
|
||||
|
||||
## 2. Create the Aperture Vault
|
||||
|
||||
|
||||
|
||||
Now go to Aperture, choose the Projects tab and click on the little gear wheel at the bottom of the sidebar and choose "Add Vault" from the opened menu.
|
||||
|
||||
|
||||
|
||||
In the opened dialogue select your mounted disk image under the devices section in your sidebar, give it a name and click Add.
|
||||
|
||||
|
||||
|
||||
The new Vault will be added to your Vault list and is now to ready to be updated.
|
||||
|
||||
|
||||
|
||||
Just click the little iSync-style arrow beside your Vault and the Vault be written to your encrypted disk image. When finished you can eject the disk image. It can now be mounted again just with the correct password which is stored in your keychain so won't even recognize the encryption. Of course, when you try to mount this disk image on another mac you have to type in the password or import the entry from your keychain.
|
||||
|
||||
|
||||
|
||||
## 3. Conclusion
|
||||
|
||||
|
||||
|
||||
You see it's pretty easy to use secure file encryption just for particular uses on a Mac. The disk image method also provides you with the ability to move the disk image file to another volume and mounting it from the new place without adding or changing the Aperture Vault inside Aperture.
|
||||
|
||||
Finally you can have more uses for encrypted disk images. As I've said in the introduction, my referenced Master images reside on my mobile hard drive too. And they are encrypted inside a sparse bundle disk image as well. So you get the idea that you can do a lot more with these encrypted disk images to quickly secure sensible data.
|
||||
@ -0,0 +1,21 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-08-22 14:51:02+00:00
|
||||
layout: post
|
||||
slug: noise-ninja-finally-available-for-apple-aperture
|
||||
title: Noise Ninja finally available for Apple Aperture
|
||||
wordpress_id: 120
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
Earlier this month [PictureCode](http://www.picturecode.com) finally released their noise reduction software [Noise Ninja](http://www.picturecode.com/media.htm) as an Aperture plug-in for Aperture 2.1 and above.
|
||||
|
||||
The results are just as amazing as they are with the Photoshop plug-in. But the Aperture plug-in uses a streamlined interface which differs from the photoshop version. But the functionality is the same.
|
||||
|
||||
You can [download a trial version of Noise Ninja for Aperture](http://www.picturecode.com/nn_aperture.htm) (images are watermarked with a grid pattern when you save them) and give it a try. The Noise Ninja plug-in for Aperture is available as a part of the [Pro Bundle (US$ 79.95)](http://www.picturecode.com/purchase.php) which includes the Photoshop and the Aperture plug-in. If you have an existing Pro Bundle license you can [upgrade it for US$ 20](http://www.picturecode.com/upgrade.php) to include the Aperture plug-in license.
|
||||
|
||||
Interested in more Aperture plug-ins? Just have a look at my article [First overview: Aperture 2.1 adjustment plugins have arrived](http://www.kremalicious.com/2008/05/first-aperture-adjustment-plugins-have-arrived/) to get an overview about what's available at the moment or [browse my blog by the Aperture plug-in tag](http://www.kremalicious.com/tag/aperture-plug-in/). Additionally you can have a look at the [brand new Apple website for all the Aperture plug-ins and ressources](http://www.apple.com/aperture/resources/plugins.html).
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-08-22 17:04:19+00:00
|
||||
layout: post
|
||||
slug: the-kremalicious-marsedit-style
|
||||
title: The Kremalicious MarsEdit Style
|
||||
wordpress_id: 122
|
||||
categories:
|
||||
- goodies
|
||||
- other
|
||||
---
|
||||
|
||||
Personally I blog everything with RedSweater's awesome application [MarsEdit](http://www.red-sweater.com/marsedit/). MarsEdit has a cool preview window included where you can see your writing live while you type. The formatting of this preview is based on simple HTML and CSS so the style is pretty customizable.
|
||||
|
||||
A while ago I've made a custom style for the blog on kremalicious.com and would like to share this style with you. The style is based on the colors used on kremalicious.com with a black background and light grey text on top of it. The links have the same blueish hover style as on my website:
|
||||
|
||||
<!-- more -->
|
||||
|
||||
[](/media/marsedit_kremalicious_big.png)
|
||||
|
||||
Here's how to apply the style for your blog preview in MarsEdit:
|
||||
|
||||
In MarsEdit main window right-click (or ctrl + click) in the sidebar on the blog where you want to have my style applied to and choose Edit Preview Template. The Preview Template editor should open where you can customize the style of the preview with the css instructions in the header.
|
||||
|
||||
Just copy and paste the following HTML and CSS into your Preview Template editor. If something goes wrong with the source formatting, I've also provided [a txt file with the code](http://www.kremalicious.com/media/marsedit_kremalicious.txt):
|
||||
|
||||
|
||||
|
||||
<code data-language="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>#weblogName#: #title#</title>
|
||||
<style>
|
||||
body {margin: 0; background-color: #000;}
|
||||
|
||||
a {color: #778caa; text-decoration: none;}
|
||||
|
||||
a:hover {background-color: #778caa; color: #000; text-shadow: 0px 1px 1px #ddd;}
|
||||
|
||||
#title { color: #778caa; background-color: #333; margin: 0; font: normal 2.1em "HelveticaNeue-UltraLight", Helvetica, sans-serif;}
|
||||
|
||||
#title a {display: block; position: relative; padding: 10px 20px;}
|
||||
|
||||
#title a:hover {text-shadow: 0px 1px 1px #B3B3B3;}
|
||||
|
||||
#content {font: 1em "Lucida Grande", Lucida, Verdana, sans-serif; color: #ddd; padding: 10px 20px;}
|
||||
|
||||
#meta {margin-top: 20px; padding: 5px; background-color: #333; -webkit-border-radius: 5px;}
|
||||
|
||||
#credit {font: italic 0.8em/12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-align: center; margin-top:20px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="title">
|
||||
<a href="#url#">#title#</a>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
#body#
|
||||
#extended#
|
||||
|
||||
<div id="meta">
|
||||
<b>url</b> : <a href="#url#">#url#</a><br />
|
||||
<b>tags</b> : #tags#
|
||||
</div>
|
||||
<div id="credit">
|
||||
The Kremalicious MarsEdit Style<br />
|
||||
<a href="http://www.kremalicious.com">www.kremalicious.com</a>
|
||||
</div>
|
||||
</div> <-- end content -->
|
||||
</body>
|
||||
</html></code>
|
||||
|
||||
|
||||
|
||||
Now click on Save Changes in the lower right corner of the window and there you have it.
|
||||
|
||||
Of course you are free to alter the style provided by me to fit your needs. If you have any additions to my provided code feel free to post them in the comments.
|
||||
42
_src/_posts/2008-08-26-icy-box-icons.markdown
Normal file
42
_src/_posts/2008-08-26-icy-box-icons.markdown
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-08-26 19:16:38+00:00
|
||||
layout: post
|
||||
slug: icy-box-icons
|
||||
title: Icy Box Icons
|
||||
wordpress_id: 146
|
||||
categories:
|
||||
- goodies
|
||||
- icon
|
||||
---
|
||||
|
||||
A friend of mine asked me to craft an icon for his external hard drive case and I would like to share those with you too. These desktop icons show the the silver and black Icy Box external aluminium case with USB interface and are intended as a replacement for the generic external hard disk icon in Mac OS X Leopard.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
As always these desktop icons are free for you personal and non-commercial use. All other usage of this copyrighted material [require my written permission](http://www.kremalicious.com/about/contact/).
|
||||
|
||||
The whole package includes 7 icons either packed in a nice tagged iContainer for use with Candybar or in Mac + Win + Linux compatible formats. If you have such an Icy Box case grab the icons [from my Goodies page.](http://www.kremalicious.com/goodies/#icons) Have fun!
|
||||
|
||||
[download_button version=1.0]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* Replacement icons for the silver and black Icy Box external aluminium case with USB interface
|
||||
|
||||
|
||||
* Mac + Win + Linux + iContainer
|
||||
|
||||
|
||||
* Leopard ready (512x512)
|
||||
|
||||
|
||||
* including 7 icons with 2 Time Machine versions
|
||||
|
||||
|
||||
|
||||
[](/media/icybox_teaser2.jpg)
|
||||
@ -0,0 +1,33 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-08-28 09:54:06+00:00
|
||||
layout: post
|
||||
slug: architect-and-facade-theming-for-leopard
|
||||
title: 'Architect and Façade: Theming For Leopard'
|
||||
wordpress_id: 156
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
There's good news for all you Mac OS X Leopard GUI Themer out there. While there's Panic's [Candybar](http://www.panic.com/candybar) for icon customization in OS X there is no application to alter all the user interface elements of Leopard. In Tiger there was an application called ShapeShifter but since the whole GUI in Leopard changed it stopped working. Architect and Façade to the rescue.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
[SlightlyPretentious](http://www.slightlypretentious.com/) announced its "Theming made easy"-application Architect is coming as a public beta <strike>next sunday (is it 08/31 or 09/07?)</strike> on Wednesday, September 3rd. Icon Designer Laurent Baumann already posted [a new sweet application icon](http://www.flickr.com/photos/avetenebrae/2669353476/) for this app a while ago and we can expect a nice and good looking solution for theming and customization in Leopard.
|
||||
|
||||
Head over to [the Screencast](http://www.slightlypretentious.com/) and see Architect and its UI in action.
|
||||
|
||||
[](/media/architect-ui.png)
|
||||
|
||||
While Architect will help you customizing Leopards UI and building themes out of your modifications, Façade ([Laurent's icon of it](http://www.flickr.com/photos/avetenebrae/2665823420/in/photostream/)) will help you switch (and manage?) the themes. But currently there's no word on the [SlightlyPretentious](http://www.slightlypretentious.com/) website about this application.
|
||||
|
||||
Slightly Pretentious made [Architect available as a public beta](http://www.slightlypretentious.com/) while claiming Façade will be coming in october. But Façade already [has its own nice website](http://facadeapp.com/).
|
||||
|
||||
Update 02/17/2009:
|
||||
Still no sight of Façade anywhere except the [note of a Lead Developer change](http://blog.slightlypretentious.com/2009/01/17/please-welcome-our-new-developer/) at Slightly Pretentious.
|
||||
|
||||
But meanwhile another theme manager was released: [Magnifique](http://magnifique.pcwizcomputer.com/), available as a free download.
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-08-28 11:28:33+00:00
|
||||
layout: post
|
||||
slug: canon-eos-50d-new-lens-announced
|
||||
title: Canon EOS 50D And New Lens Officially Announced
|
||||
wordpress_id: 168
|
||||
categories:
|
||||
- photography
|
||||
---
|
||||
|
||||
[](/media/eos_50D_front.png)The successor of the EOS 40D is (almost) here: Canon [officially announced](http://www.usa.canon.com/templatedata/pressrelease/20080826_eos50d.html) the Canon EOS 50D along with the new lens Canon EF-S 18-200/3.5-5.6IS. The EOS 50D and the new lens will be both available in October 2008, Canon says.
|
||||
|
||||
The EOS 50D comes with an CMOS APS-C sized sensor (crop factor 1.6) with 15.1 megapixels. Being Canons first DSLR with the new DIGIC 4 image processor the EOS 50D can burst 6.3 shots per second with improved image quality.
|
||||
|
||||
<!-- more -->The "EOS Integrated Cleaning Systems" gets a new fluorine layer and now works in three steps to clean the sensor. With 35 metering zones and 9 cross type Autofocus zones the Autofocus specifications are the same as found in the EOS 40D.
|
||||
|
||||
[](/media/eos_50D_back.png)The basic ISO range goes from 100 - 3200 while those values can be "boosted" to ISO 6400 and 12800. The integrated noise reduction can be adjusted in four grades. The LCD display is now 3 inches big with 920,000 pixels (VGA) with a Live View Mode.
|
||||
|
||||
The EOS 50D is prized at US$1399 (1299€) for just the body and it will be available as a kit with the EF 28-135 3.5-5.6 IS USM for US$1599.
|
||||
|
||||
If you're interested in all the details and specifications have a look at [Bob Atkins article about the official announcement of the EOS 50D](http://www.bobatkins.com/photography/digital/canon_eos_50D.html).
|
||||
|
||||
[](/media/efs_18-200.png)Along with the EOS 50D Canon announced the EF-S 18-200 3.5-5.6 IS as a new lens. The lens is intended for use with an APS-C sized sensor and insists of 16 elements (UD-glass and aspherical lenses) arranged in 12 groups. As the name says the EF-S 18-200 3.5-5.6 IS comes with an image stabilizer but somehow misses an USM ring motor which is quite strange for a lens of a prize of US$699 (599€).
|
||||
|
||||
All the specifications for this new lens are available in [an article by Bob Atkins](http://www.bobatkins.com/photography/reviews/canon_efs_18-200_is.html) too.
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-09-01 20:40:38+00:00
|
||||
layout: post
|
||||
slug: a-new-browser-is-coming-google-chrome
|
||||
title: 'A New Browser Is Coming: Google Chrome [Update]'
|
||||
wordpress_id: 197
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
Today some informations about Google's new open source browser called Google Chrome came up. First published as a comic on [Blogoscoped.com](http://blogoscoped.com/google-chrome/) and [confirmed by Kara Swisher](http://kara.allthingsd.com/20080901/google-ignites-a-new-browser-war-with-microsoft-by-unveiling-one-of-its-own/), Google Chrome will be a [WebKit](http://webkit.org/)-based browser with a new JavaScript Virtual Machine called V8 and with [Google Gears](http://gears.google.com/) included.
|
||||
|
||||
Google Chrome has a different UI-Design compared to other browsers especially regarding tabs. Google Chrome tabs will be on top of the address bar so every tab has its own address bar. Beside that every tab will run its own process to improve stability.
|
||||
|
||||
<!-- more -->Using WebKit as its rendering engine, Google Chrome will have all the cool WebKit stuff included like [CSS Gradients](http://www.kremalicious.com/2008/04/webkit-team-introduced-css-based-gradients/), [CSS Masks](http://www.kremalicious.com/2008/04/more-awesomeness-from-the-webkit-team-css-masks/) and the CSS3 property text-shadow, which [I've covered earlier in detail](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/).
|
||||
|
||||
Google Chrome will be optimized for use with web applications and, instead of using [WebKit's new core JavaScript engine Squirrelfish](http://webkit.org/blog/189/announcing-squirrelfish/), Google decided to use a new, multi-core processor optimized JavaScript virtual machine developed by the V8-team in Denmark.
|
||||
|
||||
More informations on the features leaked can be found in the [Google Blogoscoped article](http://blogoscoped.com/archive/2008-09-01-n47.html) or in the [corresponding scanned comic](http://blogoscoped.com/google-chrome/).
|
||||
|
||||
Update: Google's official blog was updated [with informations about the new browser project](http://googleblog.blogspot.com/2008/09/fresh-take-on-browser.html). They say the first beta of Google Chrome will be released tomorrow just for Windows while versions for Mac OS X and Linux will follow soon.
|
||||
|
||||
Update 2: Google Chrome can now be downloaded for Windows from [google.com/chrome](http://www.google.com/chrome). Google also posted [a feature page for Chrome](http://www.google.com/chrome/intl/en/features.html).
|
||||
|
||||
Update 3: Google Chrome seems to have problems with some of my transparent PNGs:
|
||||
|
||||
[](/media/chrome-ui.png)
|
||||
|
||||
|
||||
|
||||
Update 4: There are some nice articles about various aspects of Chrome available in the web:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* Matt Cutts tries to prevent paranoia and [explains when Google Chrome talk home](http://www.mattcutts.com/blog/google-chrome-communication/).
|
||||
|
||||
|
||||
* Gina from lifehacker.com dissects [Google Chrome's Full List of Special about: Pages](http://lifehacker.com/5045164/).
|
||||
|
||||
|
||||
* Google [explains their priorities regarding different Platforms](http://googlemac.blogspot.com/2008/09/platforms-and-priorities.html).
|
||||
|
||||
|
||||
* The [Chromium Developer Documentation](http://dev.chromium.org/Home) is available too.
|
||||
|
||||
|
||||
* And it seems Google [cut out some features of WebKit like text-shadow](http://www.flickr.com/photos/kurafire/2822606444/).
|
||||
|
||||
|
||||
|
||||
|
||||
21
_src/_posts/2008-09-23-a-long-time-ago.markdown
Normal file
21
_src/_posts/2008-09-23-a-long-time-ago.markdown
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-09-23 20:33:48+00:00
|
||||
layout: post
|
||||
slug: a-long-time-ago
|
||||
title: A Long Time Ago...
|
||||
wordpress_id: 1905
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
... this used to be a nice entry-level Apple monitor (Apple Multiple Scan 20). However, it took more than 10 years 'til it refused to display red and green.
|
||||
|
||||
TechSpecs:
|
||||
[support.apple.com/kb/SP409](http://support.apple.com/kb/SP409)
|
||||
[everymac.com/monitors/apple/multiple_scan/specs/multiple_...](http://everymac.com/monitors/apple/multiple_scan/specs/multiple_scan_20.html)
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/2885095747)
|
||||
@ -0,0 +1,20 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-09-23 23:22:16+00:00
|
||||
layout: post
|
||||
slug: futurama-mars-university-wallpaper
|
||||
title: Futurama Mars University Wallpaper
|
||||
wordpress_id: 256
|
||||
categories:
|
||||
- goodies
|
||||
- wallpaper
|
||||
---
|
||||
|
||||
Show your geeky love for extraterrestrial universities! This is a simple Futurama tribute wallpaper displaying the logo of the Mars University as seen in the first season (1ACV11/S02E02). But I've modified it a bit to get it out of the 2D. Including one high-resolution desktop version for widescreen displays (2560x1600) and one iPhone version (320x480).
|
||||
|
||||
<!-- more -->
|
||||
|
||||
As usual you can [grab the whole zip package from my Goodies page](http://www.kremalicious.com/goodies/#wall) and have fun.
|
||||
|
||||
[download_button version=1.0]
|
||||
44
_src/_posts/2008-10-23-coffee-cup-icon.markdown
Normal file
44
_src/_posts/2008-10-23-coffee-cup-icon.markdown
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-10-23 14:59:23+00:00
|
||||
layout: post
|
||||
slug: coffee-cup-icon
|
||||
title: Coffee Cup Icon
|
||||
wordpress_id: 1817
|
||||
categories:
|
||||
- goodies
|
||||
- icon
|
||||
---
|
||||
|
||||
I’ve just released my own coffee cup icon, enjoy:
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* Desktop icons showing the fuel of most designers. Originally I've made the coffee cup for the donations button on my website earlier this year and now decided to release it as an icon.
|
||||
|
||||
|
||||
* Mac + Win + Linux + iContainer
|
||||
|
||||
|
||||
* Leopard ready (512x512)
|
||||
|
||||
|
||||
* including 3 icons (Black + White version + obligatory folder icon)
|
||||
|
||||
|
||||
* [The Finest Coffee Cups - Most Incredible Coffee Icons On The Web](http://www.kremalicious.com/2008/10/the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Download
|
||||
|
||||
|
||||
|
||||
[download_button version=1.0]
|
||||
@ -0,0 +1,262 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-10-23 02:23:39+00:00
|
||||
layout: post
|
||||
slug: the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web
|
||||
title: The Finest Coffee Cups - Most Incredible Coffee Icons On The Web
|
||||
wordpress_id: 277
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
In this article I present you the finest icons of the fuel of a lot of designers and students (and other people too) available on the web. I've just released [my own coffee cup icon](/coffee-cup-icon) but this beverage seem to have inspired a lot of other beautiful icons especially for Mac OS X.
|
||||
|
||||
Now just get your next coffee, sit back and enjoy this little showcase. Just click on the images to get to the icon sources. At the end of the article you'll find links to some nice high quality coffee tutorials. And remember you will have more control over time itself if you [reach your 100th cup of coffee](http://en.wikipedia.org/wiki/Three_Hundred_Big_Boys).
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
|
||||
## The Finest Coffee Cups
|
||||
|
||||
|
||||
|
||||
Please note that these icons are the property of their respective owners and you should always consult their copyright notice first before using these icons.
|
||||
|
||||
|
||||
|
||||
## Coffee Cup icons by Susumu Yoshida
|
||||
|
||||
|
||||
A bunch of colorful cups of coffee.
|
||||
[](http://www.mcdodesign.com/?page_id=22)
|
||||
|
||||
|
||||
|
||||
## CoffeeCon icon by Vegrafik
|
||||
|
||||
|
||||
A hyperrealistic icon from Vegrafik
|
||||
[](http://macthemes2.net/forum/viewtopic.php?id=16789993)
|
||||
|
||||
|
||||
|
||||
## Coffee Cup Icon by kremalicious
|
||||
|
||||
|
||||
In a fit of megalomania I declared my icon as incredible and included it here. Originally I've made the coffee cup for the donations button on kremalicious.com.
|
||||
[](/coffee-cup-icon)
|
||||
|
||||
|
||||
|
||||
## Coffee folders from Agua Icons by David Lanham
|
||||
|
||||
|
||||
The one and only Mac OS X system replacement icon set has some coffee folders too.
|
||||
[](http://dlanham.com/art/agua/)
|
||||
|
||||
|
||||
|
||||
## Kaffe! icon from World of Aqua 3 icon set by Dave Brasgalla
|
||||
|
||||
|
||||
Coffee in a metal cup. Sadly Dave didn't updated his World of Aqua icon pack with bigger sizes so it's just 128px.
|
||||
[](http://iconfactory.com/freeware/preview/woa3)
|
||||
|
||||
|
||||
|
||||
## Starbucks coffee icon by Rok Benedik
|
||||
|
||||
|
||||
[](http://benedik.deviantart.com/art/Starbucks-coffee-icons-96173293)
|
||||
|
||||
|
||||
|
||||
## Coffee folders from the Maji sets by Jonas Rask
|
||||
|
||||
|
||||
Also Jonas used coffee as the metaphor for the work folder (supposedly) and made clear he likes very big coffee cups.
|
||||
[](http://www.jonasraskdesign.com/medias/medias.html)
|
||||
|
||||
|
||||
|
||||
## Espresso icon by MacRabbit
|
||||
|
||||
|
||||
Does this application need any introduction? Although not released yet the new web-coding application from MacRabbit drew a lot of attention. The icon is one of the reasons for that.
|
||||
[](http://macrabbit.com/espresso/)
|
||||
|
||||
|
||||
|
||||
## Coffee folders from the Pry system sets by Jonas Rask
|
||||
|
||||
|
||||
Another folder-combined-with-coffee icon by Jonas.
|
||||
[](http://www.jonasraskdesign.com/medias/medias.html)
|
||||
|
||||
|
||||
|
||||
## Coffee icons from Office Space icon set by VisualPharm
|
||||
|
||||
|
||||
A glass coffee cup which is [wildly used](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps) on the web. Created for Windows so the icons are just 256px in size.
|
||||
[](http://www.visualpharm.com/office_space.html)
|
||||
|
||||
|
||||
|
||||
## The Coffee Shop icon set by Alejandro Lopez & Sergio Ruiz
|
||||
|
||||
|
||||
An icon set made in collaboration between [Alejandro Lopez](http://www.dimensionofdeskmod.net/medias/) & [Sergio Ruiz](http://www.camtessadesign.com/descargas/ver/the_coffee_shop) with icons related to a coffee shop.
|
||||
[](http://RuizDesign.deviantart.com/art/The-Coffee-Shop-89457309)
|
||||
|
||||
|
||||
|
||||
## Espresso icon by Iiro Jäppinen
|
||||
|
||||
|
||||
[](http://iirojappinen.com/medias.html)
|
||||
|
||||
|
||||
|
||||
## Coffee Wallpaper by Michael Flarup
|
||||
|
||||
|
||||
Not an icon but the coffee cup drawn in this wallpaper from Michael Flarup would make a good one. The detail of the cup is stunning.
|
||||
[](http://pixelresort.com/wallpapers/)
|
||||
|
||||
|
||||
|
||||
## Bean icon by Laurent Baumann
|
||||
|
||||
|
||||
Bean is a free word processor for Mac OS X and Laurent Baumann included a nice coffee cup in the application icon for it.
|
||||
[](http://www.bean-osx.com/Bean.html)
|
||||
|
||||
|
||||
|
||||
## Have A Break icons by mat-u
|
||||
|
||||
|
||||
Nice shiny coffee cups with a lot of detail in the reflections. Sadly just in 128px size maximum. Maybe you can [persuade mat-u to update this icon with bigger sizes.](http://www.mat-u.com/)
|
||||
[](http://mat-u.deviantart.com/art/Have-A-Break-Icons-54326598)
|
||||
|
||||
|
||||
|
||||
## Java Application icons by Apple
|
||||
|
||||
|
||||
Apple uses a nice coffee cup in their Java applications which can be found in the Utilities folder. Thanks to [David](http://dlanham.com/) for pointing this out.
|
||||
|
||||
|
||||
|
||||
|
||||
## Caffeine icon by Trevor Kay
|
||||
|
||||
|
||||
Trevor Kay made the new icon for Caffeine. This application prevents your Mac from automatically going to sleep. Trevor also made [some additional icons for Caffeine](http://God-X.deviantart.com/art/Caffeine-Replacement-Icons-75619389) although the coffee cup looks pretty much the same as the one from Apple's Java application icons.
|
||||
[](http://lightheadsw.com/caffeine/)
|
||||
|
||||
|
||||
|
||||
## Coffee and Tea icons by Kate England
|
||||
|
||||
|
||||
Some comic style icons which deviate from the realism of all the other coffee icons. Sadly just available in 128px size.
|
||||
[](http://iconfactory.com/freeware/preview/cofe)
|
||||
|
||||
|
||||
|
||||
## Moon Coffee icon from Space: 1999 icon set by Dave Brasgalla
|
||||
|
||||
|
||||
Dave made an icon set for the Iconfactory inspired by the classic sci-fi television series of the 70's and included a Moon Coffee cup. Also just in 128px size.
|
||||
[](http://iconfactory.com/freeware/preview/1999)
|
||||
|
||||
|
||||
|
||||
## Times Application Icon by Mikio Inose
|
||||
|
||||
|
||||
Acrylic Software's "new type of newsreader for Mac OS X Leopard" called [Times](http://www.acrylicapps.com/times/) uses a gorgeous icon made by Mikio Inose.
|
||||
[](http://www.mikworks.com/clientwork/times/)
|
||||
|
||||
|
||||
|
||||
## Do you love Cappuccino? by Creative 9 Design
|
||||
|
||||
|
||||
One delicious full and one empty cappuccino cup re available in this icon set made by Creative 9 Design. Available just in 256px from their [blog](http://www.c9-d.com/blog/view/63).
|
||||
[](http://www.c9-d.com/blog/view/63)
|
||||
|
||||
|
||||
|
||||
## Cappuccino Framework Icon by Sofa
|
||||
|
||||
|
||||
Not a coffee cup but also very coffee related is this awesome Cappuccino machine icon (although it shows an Espresso machine) made by [Sofa](http://www.madebysofa.com) for the Cappuccino framework.
|
||||
[](http://cappuccino.org/)
|
||||
|
||||
|
||||
|
||||
|
||||
## Coffee Tutorials
|
||||
|
||||
|
||||
|
||||
Finally here're some nice high quality tutorials for you to help you build your own coffee cup.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* [Using Gradients to Make Light and Shadow - and a Coffee Cup!](http://psdtuts.com/tutorials-effects/using-gradients-to-make-light-and-shadow-and-a-coffee-cup/)
|
||||
Collis from [psdtuts](http://psdtuts.com) made a nice tutorial with a similar perspective as found in [my Coffee Cup Icon](http://www.kremalicious.com/goodies/).
|
||||
|
||||
|
||||
|
||||
* [Design A Coffee Mug Icon](http://www.myinkblog.com/2008/08/02/design-a-coffee-mug-icon/)
|
||||
Photoshop tutorial by Andrew Houle for creating a coffee cup icon.
|
||||
|
||||
|
||||
|
||||
* [Creating a Coffee Cup with Inkscape](http://vectortuts.com/illustration/creating-a-coffee-cup-with-inkscape/)
|
||||
Peter Anglea with a nice vector tutorial using the open source vector app Inkscape.
|
||||
|
||||
|
||||
|
||||
* [Amazing Photoshop Light Effect In 10 Steps](http://abduzeedo.com/amazing-photoshop-light-effect-10-steps)
|
||||
Not an icon tutorial but Fabio Sasso achieves some awesome light effects combined with the coffee cup from the [Office Space icon set](http://www.visualpharm.com/office_space.html).
|
||||
|
||||
|
||||
|
||||
|
||||
Did you made or found another incredible coffee icon I've not mentioned here? Feel free to post them in the comments. Also don't forget to spread the word about this article on [digg](http://digg.com/design/The_Finest_Coffee_Most_Incredible_Coffee_Icons_On_The_Web), [StumbleUpon](http://www.stumbleupon.com/url/www.kremalicious.com/2008/10/the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web/) or in any other form you like.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Article Updates
|
||||
|
||||
|
||||
|
||||
|
||||
01/14/2009 added three more icons
|
||||
|
||||
|
||||
|
||||
|
||||
10/24/2008 added Apple's Java application icons and included some tutorials
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,173 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-10-26 16:05:58+00:00
|
||||
layout: post
|
||||
slug: the-definite-guide-to-watermarks-in-apple-aperture
|
||||
title: The Definite Guide To Watermarks In Apple Aperture
|
||||
wordpress_id: 318
|
||||
categories:
|
||||
- photography
|
||||
tags:
|
||||
- aperture
|
||||
---
|
||||
|
||||
|
||||
|
||||
I received quite a few mails in the last days from Aperture users asking for the best way to add your copyright information or any other so called watermark to your images in an Aperture 2 workflow. Especially new users to Aperture find it quite confusing why there isn't something like a text brick in the Adjustments panel. So Aperture itself lacks the ability of quickly adding some lines of text to your images but nevertheless it has a watermarking feature.
|
||||
|
||||
|
||||
|
||||
In this article I will lay out every way I've found to add watermarks to your images in an Aperture 2 workflow and will discuss the advantages and disadvantages of each solution. The goal of this article is to give you a brief overview about the various ways you can add watermarks to your images so you can easily choose the best one for different needs. In short these are the possibilities:
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1. The Aperture Way
|
||||
|
||||
|
||||
2. The External Editor Way
|
||||
|
||||
|
||||
3. The Plug-In Way
|
||||
|
||||
|
||||
4. Conclusion
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1. The Aperture Way
|
||||
|
||||
|
||||
|
||||
Aperture has built-in support for watermarking your images on export. But you have to create a watermark image in a bitmap graphic editor like [Photoshop](http://www.adobe.com/products/photoshop/photoshop/), [Pixelmator](http://www.pixelmator.com/) or [Acorn](http://flyingmeat.com/acorn/) before you can start adding watermarks. But I've written a detailed article about how to use this feature of Aperture back in May 2008 named [HowTo: Use high-quality watermarks in your images with Aperture 2.1](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/). In short, you have to create your watermark image first and then define it in a new export preset. In the end all images exported with this preset will have your defined watermark image on them. If you want to watermark your images the Aperture way be sure to [check out my tutorial](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
This way is perfect if you want to watermark a lot of images at once or if your copyright info doesn't change often. And this works with Aperture's Web Journal or Web Page feature if you add a watermark image to the export presets for that. Also this works with any other export plug-in in Aperture which utilizes the export presets, like the [FlickrExport](http://connectedflow.com/flickrexport/aperture/) plug-in. You just have to create e.g. a flickr export preset, define your watermark image there and chose it inside of FlickrExport from the export preset dropdown list.
|
||||
|
||||
|
||||
|
||||
Update 10/31/2008: Another advantage is the system wide integration of this feature. E.g. you can use Aperture's built-in watermark feature in combination with an [Automator](http://support.apple.com/kb/HT2488?locale=de_DE) workflow. Just create your export preset with a watermark enabled in Aperture. In Automator you can drag the Export Versions action from the Photo section to your workflow and chose the export preset you've created.
|
||||
|
||||
But adding some lines of text to just one image or different text to different images can be rather complex cause you have to create lots of different watermark images and export presets.
|
||||
|
||||
|
||||
|
||||
## 1.1 MobileMe Albums
|
||||
|
||||
|
||||
|
||||
For whatever reason Apple decided to not use the export presets for [MobileMe](http://www.me.com/) Albums so you can't watermark your images published through MobileMe Albums with this built-in feature. The only way to achieve this is to add the watermark outside of Aperture and reimport this image or you use an edit plug-in for this where your watermark will be rendered on the image.
|
||||
|
||||
But you can still use the Web Export Presets with a watermark defined when publishing an Aperture Web Page or a Web Journal through MobilMe.
|
||||
|
||||
|
||||
|
||||
## 2. The External Editor Way
|
||||
|
||||
|
||||
|
||||
Because of Aperture's workflow design you're always free to open up your image in your favorite external editor from within Aperture and add your copyright information and more to your image. Just add your favorite image editor in the Aperture preferences under the Export tab and set the file format you want to have.
|
||||
|
||||
Now you can just right click or ctrl + click on every image to open the context menu and choose Edit With whereas the first entry will be your external editor set in the preferences. Aperture will automatically render your image creating a new file and opens that up. Just add a new text layer in your external editor, type in your preferred text and save the file from there. Aperture will update with the changes accordingly.
|
||||
|
||||
[](/media/watermark_5.png)
|
||||
|
||||
|
||||
|
||||
Using this method gives you the most flexibility since you can add everything to your image and come back with it in Aperture. And if you use Photoshop and choose to use psd as external editor file format you can easily add all your non-destructive layers in Photoshop an Aperture will live render those layers. Opening the psd file again from within Aperture will give you all the editable layers you created earlier.
|
||||
|
||||
|
||||
|
||||
But since Aperture always creates a psd or tiff file for that you will end up with rather large file sizes even if you just add two letters in your external editor.
|
||||
|
||||
|
||||
|
||||
## 3. The Plug-In Way
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 3.1 Aperture BorderFX
|
||||
|
||||
|
||||
|
||||
[Aperture BorderFX](http://web.mac.com/reinharduebel/BorderFX/) is an export plug-in for Aperture written by [Reinhard Uebel](http://web.mac.com/reinharduebel/) which was available long before Aperture 2. This plug-in allows you to add borders but also titles and even more to images as you export them. The plug-in is free but the author asks for donations. In short this plug-in gives you the ability to create your watermark (and also borders) inside of the Aperture environment. You set all your output preferences inside of the plug-in window so it doesn't use the Aperture export presets.
|
||||
|
||||
But it has some powerful features in terms of watermarking: It can read out some IPTC fields to use the text as your copyright text, it is capable of saving presets and you can open several images at once in the plug-in window. So it works similar to Aperture's built-in watermarking feature but gives you full control over the watermark look without leaving Aperture.
|
||||
|
||||
[](/media/aperture_borderfx.png)
|
||||
|
||||
|
||||
|
||||
This plug-in gives you a lot of flexibility about your watermark look without firing up a graphical editor like Photoshop. Also you're not leaving a non-destructive workflow with this plug-in since all the changes are just rendered on your exported images. With the combination of using the plug-in presets and the capability of opening several images at once with the plug-in you can have different watermarks on different images very quickly.
|
||||
|
||||
|
||||
|
||||
But you can't see your changes made in the plug-in on the images in your library. But Reinhard [stated in his blog](http://web.mac.com/reinharduebel/Site/Aperture_BorderFX_Blog/Entries/2008/8/26_BorderFX_Edit_Plug-in%2C_coming_soon..html) he's working on an edit plug-in based on the new Aperture 2.1 SDK where the changes will be rendered (destructively) in a psd file.
|
||||
|
||||
|
||||
|
||||
## 3.2 Apple's Borders & Titles Plug-In
|
||||
|
||||
|
||||
|
||||
With the release of Aperture 2.1 and its Edit Plug-In architecture Apple also released some sample plug-ins which aren't included in Aperture (just the Dodge & Burn plug-in is). But you can easily [download it from Apple’s Developer Connection website without registration](http://developer.apple.com/samplecode/BordersAndTitles/index.html) for free.
|
||||
|
||||
[](/media/aperture_bt.png)
|
||||
|
||||
|
||||
|
||||
This is also something I've covered earlier in my blog with a short article:
|
||||
[Quick Tip: Borders & Titles Plug-In for Aperture](http://www.kremalicious.com/2008/06/quick-tip-borders-titles-plug-in-for-aperture/).
|
||||
|
||||
|
||||
|
||||
The functionality of this plug-in is rather rudimentary but it's indeed the quickest way if you just want to add some lines of text to one particular image. But adding the same text on several images can be very frustrating since you can't open more than one image at a time inside the plug-in window.
|
||||
|
||||
As with every Edit Plug-In every time you fire up an image with this plug-in Aperture will create a psd file and after hitting save in the plug-in your changes will be rendered destructively on this psd file. So there's no way to go back here without creating a new psd file and starting again.
|
||||
|
||||
|
||||
|
||||
## 3.3 Impression For Aperture Plug-In
|
||||
|
||||
|
||||
|
||||
[Impression](http://www.bluecrowbar.com/software/impressionaperture/) is an Aperture Edit Plug-In from [Blue Crowbar Software](http://www.bluecrowbar.com) released in Sept. 2009. The developer claims it's mainly targeted for those people who want to have a copy of their watermarked image within Aperture. Also there's a nice blog post by the developer lining out [why he thinks this plug-in beats Aperture's builtin watermarks.](http://www.bluecrowbar.com/blog/posts/impression-for-aperture.html)
|
||||
|
||||
[](/media/aperture-impression.png)
|
||||
|
||||
|
||||
|
||||
This plug-in is pretty powerful and probably the best choice for watermarking your images in Aperture through an Edit Plug-In workflow. Watermarking multiple photos at once is also possible and you can use existing PSD or PNG images as a watermark image as well as from a RTF text file. Apart from the functionality it also has a quite beautiful UI with the controls laying over your image.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 4. Conclusion
|
||||
|
||||
|
||||
|
||||
So you see there are quite a few possibilities for adding watermarks in your Aperture workflow although the most comfortable solution, a brick in the adjustment panel for adding text or watermark images non-destructively isn't there (yet?).
|
||||
|
||||
And, except for the export plug-ins, you will leave a non-destructive workflow since all your changes to the image are rendered in a psd or tiff file and any further adjustments in Aperture will also affect your watermark. Also there's no way of going back with these solutions without creating a new psd file.
|
||||
|
||||
So to stay within a non-destructive workflow and to avoid unnecessary big file sizes you should try to use either [Aperture's built-in watermarking feature](http://www.kremalicious.com/2008/05/high-quality-watermarks-with-aperture/) or [Reinhard's BorderFX plug-in](http://web.mac.com/reinharduebel/BorderFX/) in your workflow.
|
||||
|
||||
But if you want e.g. different text on just a few images and want to have your watermarked image within Aperture you should try using the Edit plug-ins or your external editor. Also if you don't care about big file sizes for rather minor changes you can use the Edit plug-ins for watermarking although you'll slightly leave Aperture's non-destructive workflow design with this. This by the way is the case with all the Edit plug-ins. But that's another story...
|
||||
|
||||
And that's it folks. I hope this article helps you finding the right method for watermarking your images in an Aperture workflow. Feel free to post in the comments about your experiences or any additions you have. Also don't forget to spread the word about this article on your favorite social bookmarking site.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-12-11 22:59:06+00:00
|
||||
layout: post
|
||||
slug: how-to-set-a-custom-gravatar-image-in-wordpress-27
|
||||
title: 'HowTo: Set A Custom Gravatar Image In Wordpress 2.7+'
|
||||
wordpress_id: 344
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
|
||||
|
||||
Sure enough I've upgraded immediately when [Wordpress 2.7 was released](http://wordpress.org/development/2008/12/coltrane/). Among all the other things that changed in this new version the comments functions got a massive overhaul. But the [new comment loop](http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#The_Comments_Loop) with the [new function <?php wp_list_comments(); ?>](http://codex.wordpress.org/Template_Tags/wp_list_comments) lacks the ability to quickly set a custom default gravatar or avatar image. But with some help of the functions.php file we can set the default gravatar image in the Discussion settings in the Wordpress backend.
|
||||
|
||||
|
||||
|
||||
<!-- more -->
|
||||
|
||||
Before Wordpress 2.7 I achieved a custom gravatar image on kremalicious.com with this code placed in the comments.php template file:
|
||||
|
||||
|
||||
|
||||
<code data-language="php"><?php if(function_exists('get_avatar')) {
|
||||
echo get_avatar( $comment, $size = '70', $default = '<?php bloginfo('template_directory'); ?>/images/gravatar.png' );
|
||||
} ?></code>
|
||||
|
||||
|
||||
|
||||
So we were able to set a path to our image we wanted to use as the default gravatar image. But with Wordpress 2.7 we have the new function [<?php wp_list_comments(); ?>](http://codex.wordpress.org/Template_Tags/wp_list_comments) which pretty much simplifies writing comment template code. Although it has a parameter for the avatar size it doesn't have one for setting a custom image like before.
|
||||
|
||||
But we can use the functions.php file in your template directory and add some lines to it: (If you don't have a functions.php file just create one.)
|
||||
|
||||
|
||||
|
||||
<code data-language="php"><?php
|
||||
function my_own_gravatar( $avatar_defaults ) {
|
||||
$myavatar = get_bloginfo('template_directory') . '/images/gravatar.png';
|
||||
$avatar_defaults[$myavatar] = 'GRAVATAR NAME DISPLAYED IN WORDPRESS';
|
||||
return $avatar_defaults;
|
||||
}
|
||||
add_filter( 'avatar_defaults', 'my_own_gravatar' );
|
||||
?></code>
|
||||
|
||||
|
||||
|
||||
Just set a name for your custom Gravatar image to show up beside the image in the Wordpress back-end. The code above assumes you have your custom default gravatar image inside a folder called images inside your template directory. Change it to your environment if neccessary. After that a new entry in the Wordpress backend under Settings > Discussions will appear with the custom image specified:
|
||||
|
||||
|
||||
|
||||
And you can adjust the displayed size of the gravatar image by adding a parameter to <?php wp_list_comments(); ?> function in your comments.php file:
|
||||
|
||||
|
||||
|
||||
<code data-language="php"><?php wp_list_comments(array('avatar_size'=>70, )); ?></code>
|
||||
|
||||
|
||||
|
||||
And that's it. As you would guess I pretty much prefer this way to adjust the gravatar image. But you're free to [write your custom comment callback function](http://clarktech.no-ip.com/wordpress/wordpress-27-comment-callback-function) to exactly define the output of the comments. But it's definitely too much if you just want to change the gravatar stuff.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2008-12-13 16:47:43+00:00
|
||||
layout: post
|
||||
slug: howto-styling-author-comments-with-wordpress-27
|
||||
title: 'HowTo: Styling Author Comments With Wordpress 2.7+'
|
||||
wordpress_id: 360
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
|
||||
|
||||
Since my update to Wordpress 2.7 I'm pretty much into all the new comments stuff. As [I've written before](http://www.kremalicious.com/2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/), the comment functionality changed dramatically with Wordpress 2.7. This makes writing a comments template much easier but if you used Worpress prior to 2.7 you have to change some things to work again. Beside other things this includes [Gravatar styling](http://www.kremalicious.com/2008/12/how-to-set-a-custom-gravatar-image-in-wordpress-27/) and also adding different styling to comments from the author of an article. In this article I will show you how to realize the latter with Wordpress 2.7 and above.
|
||||
|
||||
|
||||
|
||||
<!-- more -->
|
||||
|
||||
Let's start by looking at the code to achieve styling of author comments prior to Wordpress 2.7. On kremalicious.com I've used this code:
|
||||
|
||||
|
||||
|
||||
|
||||
<code data-language="html"><li class="<?php if ($comment->comment_author_url == "http://www.kremalicious.com") echo 'author'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">
|
||||
<em>other comments code</em>
|
||||
</li></code>
|
||||
|
||||
|
||||
|
||||
So with some php stuff we were able to check for the author name or, as I did it, for the URL of the comment author. If one of these were detected Wordpress added a new class 'author' to the <li> tag which we were able to style by adding a li.author to our css file:
|
||||
|
||||
|
||||
|
||||
<code data-language="css">li.author { css comes in here }</code>
|
||||
|
||||
|
||||
|
||||
But with Wordpress 2.7 these steps are needless because of the [new function <?php wp_list_comments(); ?>](http://codex.wordpress.org/Template_Tags/wp_list_comments) which adds a class on author comments for itself!
|
||||
|
||||
If a comment from the author of an article is posted under this article, **Wordpress automatically adds the class 'bypostauthor' to the surrounding <li> tag.** So all you have to do is adding a css style of li.bypostauthior to your css file or just renaming your old li.author class or whatever you used for this:
|
||||
|
||||
|
||||
|
||||
<code data-language="css">li.bypostauthor { css comes in here }</code>
|
||||
|
||||
|
||||
|
||||
And that's it for adding a different style to comments from the article author. Just add some css and there you go. Wonderful!
|
||||
|
||||
|
||||
|
||||
## Even more
|
||||
|
||||
|
||||
|
||||
Wordpress also has a special class for registered users of your site so you're able to style their comments as well. For this just use the class 'byuser':
|
||||
|
||||
|
||||
|
||||
<code data-language="css">li.byuser { css comes in here }</code>
|
||||
|
||||
|
||||
|
||||
All the various classes Wordpress adds to comments are listed [in the Codex page for enhanced comments display](http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#CSS_Styling). And [here's a very nice grahical overview about everything Wordpress 2.7 adds to comments](http://www.wp-fun.co.uk/2008/12/10/27-comment-classes/).
|
||||
|
||||
|
||||
|
||||
|
||||
291
_src/_posts/2009-01-05-the-mac-in-futurama.markdown
Normal file
291
_src/_posts/2009-01-05-the-mac-in-futurama.markdown
Normal file
@ -0,0 +1,291 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2009-01-05 03:14:45+00:00
|
||||
layout: post
|
||||
slug: the-mac-in-futurama
|
||||
title: The Mac in Futurama
|
||||
wordpress_id: 440
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
|
||||
|
||||
Time for some Mac Futurama crossover geekiness! In a fun watching process I've compiled a list of all the references to Apple's Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running [System 6](http://en.wikipedia.org/wiki/Apple_System_Software_6), [System 7](http://en.wikipedia.org/wiki/System_7) or [OS 9](http://en.wikipedia.org/wiki/Mac_OS_9) ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999).
|
||||
|
||||
|
||||
|
||||
So the following screens from Futurama refer all to Macs available in or before 1999. Also you'll find some nice links to downloadable Futurama stuff for your Mac at the end of this article. And may the lawyers of Twentieth Century Fox now please stop reading.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
For orientation: I've followed the original four season production cycle and not Fox's five seasons splitting. The "real" Season 5 are the recently released DVD movies/Episodes on Comedy Central.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* Season 1
|
||||
|
||||
|
||||
* Season 2
|
||||
|
||||
|
||||
* Season 3
|
||||
|
||||
|
||||
* Season 4
|
||||
|
||||
|
||||
* Season 5
|
||||
|
||||
|
||||
* Futurama Stuff For Your Mac
|
||||
|
||||
|
||||
|
||||
|
||||
_All screens (C) 1999 by Twentieth Century Fox Film Corp._
|
||||
|
||||
|
||||
|
||||
## Season 1
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1ACV02 - The Series Has Landed
|
||||
|
||||
|
||||
|
||||
The moon farmer introduces his three robot daughters. One of them is named "Daisy May 128k" as a reference to the first [Macintosh 128k](http://en.wikipedia.org/wiki/Macintosh_128K).
|
||||
|
||||
|
||||
|
||||
|
||||
## 1ACV05 - Fear Of A Bot Planet
|
||||
|
||||
|
||||
|
||||
Indeed the episode with the most Mac references. The Planet Express crew have to deliver a package to a planet settled by separatist robots. And guess what their favorite OS is?
|
||||
|
||||
The sound to start the daily human hunt is the [Mac startup chime](http://musicthing.blogspot.com/2005/05/tiny-music-makers-pt-4-mac-startup.html) composed by [Jim Reekes ](http://en.wikipedia.org/wiki/Jim_Reekes) and first used in 1991 on the [Macintosh Quadra 700](http://en.wikipedia.org/wiki/Macintosh_Quadra_700). Maybe the [Chime of Death](http://en.wikipedia.org/wiki/Chimes_of_Death) would be more suitable for that.
|
||||
|
||||
|
||||
The judge is a not so friendly Macintosh 128k with a classic Mac OS Finder face. It uses Mac OS interface elements while judging and freezing at it.
|
||||
|
||||
|
||||
But the robots have some cool computer voodoo to get him back judging without the need of a restart.
|
||||
|
||||
|
||||
This one can be just coincidence or no Mac reference at all. The colors of the eyes and the mouths of the robot elders look pretty familiar to the [iMac G3 color flavors](http://www.apple.com/pr/photos/iMac/imaccolors.html) or the [original iBook colors](http://www.theapplecollection.com/iMac/iBook2.html) although there never was a yellow iMac (or iBook). 
|
||||
|
||||
|
||||
|
||||
## 1ACV10 A Flight to Remember
|
||||
|
||||
|
||||
|
||||
The robot guy on the bar mixes sad Bender a drink out of Jägermeister and some Pennzoil product. He is named iZac as a reference to the Apple iMac or more generally for the "i"-brand. Beside that iZac is written in kind of the same font (variant of [ITC Garamond](http://new.myfonts.com/fonts/itc/garamond/), thanks [Schoschie](http://www.kremalicious.com/2009/01/the-mac-in-futurama/#comment-48831)) as in [Apple's Think Different tagline and campaigns](http://web.archive.org/web/20010228171255/www.apple.com/thinkdifferent/). Furthermore (but non-Mac related) iZac is also a reference to Isaac the bartender from the TV series love boat from 1977, as ["yeah" pointed out in the comments](http://www.kremalicious.com/2009/01/the-mac-in-futurama/#comment-37416). Thanks yeah!
|
||||
|
||||
|
||||
|
||||
|
||||
## 1ACV11 Mars University
|
||||
|
||||
|
||||
|
||||
The Robot House fraternity is spying at a Macintosh 128k in the girls bed rooms. 
|
||||
|
||||
|
||||
|
||||
## 1ACV12 - When Aliens Attack
|
||||
|
||||
|
||||
|
||||
The crew searches the Internet on a Mac OS system for facts about the TV series Single Female Lawyer. 
|
||||
|
||||
|
||||
|
||||
## Season 2
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2ACV09 A Bicyclops Built For Two
|
||||
|
||||
|
||||
|
||||
Bender choses a disguise while being in the Internet. He does this with a Mac style menu. 
|
||||
|
||||
Alcasar submits Leela a video message which is played on Leelas display in a classic Mac OS styled window. 
|
||||
|
||||
|
||||
|
||||
## 2ACV15 The Problem With Popplers
|
||||
|
||||
|
||||
|
||||
Hermes finds the name Popplers while searching the Internet on an iBook G3 with a weird antenna on top of it. 
|
||||
|
||||
|
||||
|
||||
## 2ACV17 War Is The H-Word
|
||||
|
||||
|
||||
|
||||
Earth attacks the balls on Spheron 1 and a robot surgeon named iHawk operates the injured earthlings with a Martini in his hands. 
|
||||
|
||||
|
||||
|
||||
## Season 3
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 3ACV04 The Luck Of The Fryrish
|
||||
|
||||
|
||||
|
||||
Again the crew searches the Internet with a classic Mac OS interface. 
|
||||
|
||||
|
||||
|
||||
## 3ACV06 Bendless Love
|
||||
|
||||
|
||||
|
||||
The Bending School for robots seems to be running on Mac OS because it uses a Mac OS interface progress bar. 
|
||||
|
||||
|
||||
|
||||
## 3ACV15 I Dated A Robot
|
||||
|
||||
|
||||
|
||||
Sure enough, Prof. Farnsworth's blank robots are Mac formatted.
|
||||
|
||||
|
||||
Billy starring the propaganda movie "I dated a robot!" downloads his Monroe-Bot with a classic Macintosh 128k. 
|
||||
|
||||
|
||||
|
||||
## Futurama 3ACV21 Future Stock
|
||||
|
||||
|
||||
|
||||
Planet Express is under new management of "that guy" from the 1980s. He shows the crew a new ad which is a parody of [Apple's legendary 1984 ad](http://www.youtube.com/watch?v=R706isyDrqI). 
|
||||
|
||||
|
||||
|
||||
## Season 4
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 4ACV06 Bender Should Not Be Allowed On TV
|
||||
|
||||
|
||||
|
||||
The president of the TV network (who seems to be just a plain non-Mac laptop), has some sort of QuickTime Player running on him.
|
||||
|
||||
|
||||
|
||||
|
||||
## 4ACV08 Crimes Of The Hot
|
||||
|
||||
|
||||
|
||||
iZac again. 
|
||||
|
||||
|
||||
|
||||
## Season 5
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 5ACV01 Bender's Big Score Part 1
|
||||
|
||||
|
||||
|
||||
Bender is infected by the Scammers' obedience virus called iObey. 
|
||||
|
||||
|
||||
|
||||
## 5ACV15 Into The Wild Green Yonder Part 4
|
||||
|
||||
|
||||
|
||||
The audience in the violet dwarf star blowup or Encyclopod (or so) birth scene consists of many Futurama characters from all the Futurama series. If you look closely you can spot iZac again (upper left). In this screenshot there's also Matt Groening's head in the audience. 
|
||||
|
||||
|
||||
|
||||
|
||||
## Futurama Stuff For Your Mac
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[[Futurama Vol. 1-6](http://iconfactory.com/freeware/preview/fut1)
|
||||
Amazing icons made by Iconfactory's [Gedeon Maheux](http://gedblog.com/). The recent [Volume 6 release](http://iconfactory.com/freeware/preview/fut6) also comes with some nice wallpapers showing silhouettes of the Planet Express crew members. [Vol.2](http://iconfactory.com/freeware/preview/fut2), [Vol.3](http://iconfactory.com/freeware/preview/fut3), [Vol.4](http://iconfactory.com/freeware/preview/fut4), [Vol.5](http://iconfactory.com/freeware/preview/fut5), [Vol.6](http://iconfactory.com/freeware/preview/fut6)
|
||||
Also [a search for Futurama in the freeware section on Iconfactory.com](http://iconfactory.com/search/freeware/futurama) is always a good idea...
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[What If? Machine Terminal Icon](http://scartissuemark.deviantart.com/art/What-If-Machine-Terminal-Icon-71455726)
|
||||
A nice icon intended as a Terminal replacement icon made by [Mark Hawkins](http://scartissuemark.deviantart.com/).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Futurama: Trash Replacement](http://scartissuemark.deviantart.com/art/Futurama-Trash-Replacement-71612045)
|
||||
A nice icon showing a big bucket of Fishy Joe's Popplers. Made by [Mark Hawkins](http://scartissuemark.deviantart.com/) too.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Futurama Random Quote Generator](http://www.apple.com/medias/dashboard/movie_tv/futuramarandomquotegenerator.html)
|
||||
A Dashboard widget for Mac OS X giving you random quotes from Futurama. Made by [rawpixels](http://www.rawpixels.com/).
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Futurama Mars University Wallpaper](http://www.kremalicious.com/2008/09/new-goodie-futurama-mars-university-wallpaper/)
|
||||
And there's my Futurama Mars University Wallpaper for Desktop and iPhone available in the [Goodies section](http://www.kremalicious.com/goodies) on this website.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Futurama: Out Of Whale Oil Wallpaper Pack](http://www.kremalicious.com/2009/02/out-of-whale-oil/)
|
||||
And finally there's my Futurama: Out Of Whale Oil Wallpaper pack for Desktop and iPhone also available in the [Goodies section](http://www.kremalicious.com/goodies) on this website. Vivid green and pink Feminista versions included.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
And that's it folks. Hope you enjoyed this fun article. If you know of more Mac or Apple references in Futurama or links to nice Futurama icons, wallpapers or application resources feel free to post them in the comments.
|
||||
|
||||
As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee ;-)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
88
_src/_posts/2009-02-01-portal-thingy.markdown
Normal file
88
_src/_posts/2009-02-01-portal-thingy.markdown
Normal file
@ -0,0 +1,88 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2009-02-01 06:01:28+00:00
|
||||
layout: post
|
||||
slug: portal-thingy
|
||||
title: 'Portal Thingy: matthiaskretschmann.com'
|
||||
wordpress_id: 504
|
||||
categories:
|
||||
- personal
|
||||
---
|
||||
|
||||
Just some self reference here. I've launched a slick new site under [matthiaskretschmann.com](http://matthiaskretschmann.com) today which has an absolute simple concept. It's kind of a digital business card site for being digitally present under my name. Beside that it has Links to my social media stuff so it's easier for you to stalk me. In the 90's we probably would have called it a Portal.
|
||||
|
||||
[](http://matthiaskretschmann.com)
|
||||
|
||||
|
||||
<!-- more -->
|
||||
As you can read in the sliding Colophon at the bottom of the site, it is written in valid XHTML 1.1 and CSS3 code and makes heavy use of jQuery. But, of course, it is fully functional without JavaScript enabled. Even the tab interface remains intact in such a case which is done by some PHP magic. Just the print and text-size buttons in the lower right will be gone without JavaScript. But that's ok because their functionality can be implemented just with JavaScript anyway.
|
||||
|
||||
For your learning pleasure I've let my comments in my [jQuery file](http://matthiaskretschmann.com/js/effects.js) intact and you'll also find the sources for code-parts where I didn't wanted to invent the wheel again. Although slightly modified by me, this includes the code for the vCard popup bubble when hovering over the header ([by jqueryfordesigner.com](http://jqueryfordesigners.com/coda-popup-bubbles/)) and the text-resizing function ([from dev-tips.com](http://dev-tips.com/featured/jquery-tip-font-resizing-with-animation-effects)) .
|
||||
|
||||
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
|
||||
|
||||
But the sad thing I had to learn was that Internet Explorer 7 and Google Chrome have heavy problems with transparent images (PNG24 with alpha transparency to be exactly) which are faded in or out with JavaScript (or just jQuery?). They look great when just there but during fade they have a big bold border. Once the fade is done the border disappears. Weird!
|
||||
|
||||
That's why some eye candy will not be displayed to Internet Explorer users (no big light spot and no hover effect on the header) and I hope Google will fix this soon. And following my own tradition Internet Explorer 6 and below users will get a big warning banner on top of the site.
|
||||
|
||||
For all other modern browsers beside those mentioned above the site should work well but you'll get the best viewing experience with [Safari](http://www.apple.com/safari/), [Firefox 3.1](http://www.mozilla.com/en-US/firefox/all-beta.html) or [Opera](http://www.opera.com/) (because of their [text-shadow support](http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/)).
|
||||
|
||||
If you find a bug or have any additions feel free to [contact me](/contact), post them in the comments or [throw me a note on Twitter](https://twitter.com/kremalicious).
|
||||
|
||||
|
||||
|
||||
## Inspiration
|
||||
|
||||
|
||||
|
||||
With the concept of this little site I've kinda jumped on the bandwagon which obviously was started by [Tim van Damme's excellent small site under timvandamme.com](http://timvandamme.com/).
|
||||
|
||||
[](http://timvandamme.com)
|
||||
|
||||
I was just blown away by the smart concept when first seeing this site last year and immediately made some rough sketches and drafts for my own implementation of this concept. But sadly time was too short for a new personal side project so everything laid down until last week.
|
||||
|
||||
Another great version based on Tim's concept was crafted by [Mr. Foliage-O-Meter Rogie King](http://www.komodomedia.com/) under [rogieking.com](http://rogieking.com/) and there was also a nice little discussion about inspiration in [Rogie's blog](http://www.komodomedia.com/blog/2009/01/timvandammecom/) after he had launched his site.
|
||||
|
||||
[](http://rogieking.com)
|
||||
|
||||
Finally I find it very interesting to compare the jQuery code of the three sites afterwards. We all have some sort of tab interface with fancy stuff going on when the tabs change. But we wrote three completely different versions of code for that purpose but all with the same JavaScript library. Oh mighty flexible jQuery!
|
||||
|
||||
|
||||
|
||||
## More Business Card Style Sites
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Icon- and UI-Designer Laurent Baumann](http://lbaumann.com/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Interface-Designer Maximilian Schöning](http://www.maximilianschoening.com/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Consultant & Blogger Aref Jdey (Design & Code by yours truly)](http://www.arefjdey.com/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
If you run such a site or know of other business card style sites, feel free to post them in the comments.
|
||||
|
||||
|
||||
|
||||
|
||||
44
_src/_posts/2009-02-17-out-of-whale-oil.markdown
Normal file
44
_src/_posts/2009-02-17-out-of-whale-oil.markdown
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2009-02-17 20:11:55+00:00
|
||||
layout: post
|
||||
slug: out-of-whale-oil
|
||||
title: '"We Are Out Of Whale Oil"'
|
||||
wordpress_id: 533
|
||||
categories:
|
||||
- goodies
|
||||
- wallpaper
|
||||
---
|
||||
|
||||
Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest Futurama movie Into The Wild Green Yonder. This pack includes 4 versions of the Planet Express ship whale oil indicator in 2 different sizes for desktop and iPhone use. Vivid pink Feminista versions included too ;-)
|
||||
|
||||
<!-- more -->
|
||||
Here're the details for the whole pack:
|
||||
|
||||
|
||||
|
||||
|
||||
* 2 high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
|
||||
|
||||
|
||||
* 2 iPhone versions with empty and full whale oil indicator (320x480)
|
||||
|
||||
|
||||
* 2 Feminista versions high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
|
||||
|
||||
|
||||
* 2 Feminista iPhone versions with empty and full whale oil indicator (320x480)
|
||||
|
||||
|
||||
* Icon folder files for this wallpaper release
|
||||
|
||||
|
||||
|
||||
[](http://www.kremalicious.com/goodies/#wall)
|
||||
|
||||
Seriously, the pink versions are burning my eyes but the pink is a good reference to the events in the recent movie ;-)
|
||||
|
||||
The whole wallpaper pack can be downloaded [from the Goodies section on my website](http://www.kremalicious.com/goodies/) or via this button:
|
||||
|
||||
[download_button version=1.0]
|
||||
File diff suppressed because one or more lines are too long
28
_src/_posts/2009-06-04-twitter-crisp.markdown
Normal file
28
_src/_posts/2009-06-04-twitter-crisp.markdown
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2009-06-04 00:16:40+00:00
|
||||
layout: post
|
||||
slug: twitter-crisp
|
||||
title: Twitter Crisp
|
||||
wordpress_id: 794
|
||||
categories:
|
||||
- goodies
|
||||
- icon
|
||||
---
|
||||
|
||||
Here's a quick twitter icon for use on your websites which is kind of a by-product from one of my last projects. But I would consider it a waste to just bury this deep in my filesystem so I think it's best I'm throwing this out to you. ;-)
|
||||
|
||||
<!-- more -->
|
||||
|
||||
This icon comes in various formats (PNG, ICNS, iContainer) and in 4 different sizes (128px, 48px, 32px, 16px) with each icon size redrawn (of course). Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these icons while they're hot.
|
||||
|
||||
[download_button version=1.0]
|
||||
|
||||
Use them on any web project you like and/or [convert them into a send to twitter link](http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/). Have fun!
|
||||
|
||||
These icons are free for **all your personal and commercial projects** following the [Creative Commons Attribution-No Derivative Works 3.0 License](http://creativecommons.org/licenses/by-nd/3.0/). All I'm asking you is to link back to this URL if you use this twitter icon:
|
||||
|
||||
[http://www.kremalicious.com/2009/06/twitter-crisp/](http://www.kremalicious.com/2009/06/twitter-crisp/)
|
||||
|
||||
[](http://creativecommons.org/licenses/by-nd/3.0/)Twitter Crisp Icon by [Matthias Kretschmann](http://kremalicious.com) is licensed under a [Creative Commons Attribution-No Derivative Works 3.0 License](http://creativecommons.org/licenses/by-nd/3.0/).
|
||||
47
_src/_posts/2009-06-24-adiumeetie.markdown
Normal file
47
_src/_posts/2009-06-24-adiumeetie.markdown
Normal file
@ -0,0 +1,47 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2009-06-24 21:00:38+00:00
|
||||
layout: post
|
||||
slug: adiumeetie
|
||||
title: Adiumeetie. Tweetie Style Adium Icon
|
||||
wordpress_id: 844
|
||||
categories:
|
||||
- goodies
|
||||
- icon
|
||||
---
|
||||
|
||||
Here's a new desktop goodie for your pleasure. It's a replacement dock icon for the popular Mac IM client [Adium](http://adium.im/) following the style of atebit's excellent [Tweetie for Mac](http://www.atebits.com/tweetie-mac/) icon.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
While the Tweetie Mac icon (and it's UI) was discussed quite controversial (which caused some very nice Tweetie replacement icons to appear, like [here](http://jonasraskdesign.com/medias/medias.html), [here](http://iconblock.deviantart.com/art/Tweetie-Mix-120360482), [here](http://macthemes2.net/forum/viewtopic.php?id=16795744) or [here](http://www.flickr.com/photos/marcelomarfil/3611311439/)), I grew to like the style of it. But Adium beside Tweetie in the Dock just looked weird... (No offense, [Adam](http://www.artofadambetts.com/weblog/?p=108) ;-)) So I redrew the whole icon and used Adium's duck silhouette on it and made some obvious and subtle changes in comparison to the Tweetie icon. And thanks to [Loren](http://blog.atebits.com/) who kind of rubber-stamped this icon release.
|
||||
|
||||
The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16px and as an Adium dock icon package. This icon package uses some more icons (just 128px each) for the different states of Adium (online, offline, alert etc.) and includes the application icon too.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Download
|
||||
|
||||
|
||||
|
||||
Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab this icon while it's hot.
|
||||
|
||||
[download_button version=1.0]
|
||||
|
||||
|
||||
|
||||
## Adium Icon Usage
|
||||
|
||||
|
||||
|
||||
Just double click the Adiumeetie.AdiumIcon file and the dock icon gets installed automatically. Then you can select the icon in Adium's preferences under Appearance > Dock Icon from the drop-down menu. After this the icon should be ready as your new Adium icon both in the Dock and in your Applications folder.
|
||||
|
||||
The icon is free for your personal use and I hope you'll enjoy it. If you do, don't forget to [spread the word via Twitter](http://twitter.com/home?status=Adiumeetie%3A%20Tweetie%20Style%20Adium%20Dock%20Icon%20from%20%40kremalicious%20http://kremalicious.com/adiumeetie/) and all your other favorite social media sites.
|
||||
|
||||
Oh, and for best look and karma you should [buy a license for Tweetie](http://www.atebits.com/tweetie-mac/buy/) right away ;-)
|
||||
|
||||
60
_src/_posts/2009-09-05-delibar.markdown
Normal file
60
_src/_posts/2009-09-05-delibar.markdown
Normal file
@ -0,0 +1,60 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2009-09-05 19:07:31+00:00
|
||||
layout: post
|
||||
slug: delibar
|
||||
title: Delibar Interface Replacement Icons
|
||||
wordpress_id: 936
|
||||
categories:
|
||||
- goodies
|
||||
- icon
|
||||
---
|
||||
|
||||
[Delibar](http://www.shinyfrog.net/en/software/delibar/) from [Shiny Frog](http://www.shinyfrog.net) is a [delicious.com](http://delicious.com/) desktop client for OS X which sits in your menubar and gives you quick access to your bookmarks on delicious. But the default menubar icon and the other interface icons look quite disturbing so I've made these simple replacement icons for the [Delibar](http://www.shinyfrog.net/en/software/delibar/) interface.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
|
||||
Please Note: Shinyfrog released a [refreshed version of Delibar](http://www.delibarapp.com/) which sports a nice and completely different UI. So using these icons here along with this new version is probably no good idea ;-)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Download
|
||||
|
||||
|
||||
|
||||
Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these replacement icons.
|
||||
|
||||
[download_button version=1.0]
|
||||
|
||||
|
||||
|
||||
## Icon Usage
|
||||
|
||||
|
||||
|
||||
We're going to replace the default app resources so you should do a backup of the Delibar app or just download a [fresh copy from Shiny Frog](http://www.shinyfrog.net/en/software/delibar/) if anything goes wrong or looks weird.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1. Close Delibar if it's running
|
||||
|
||||
|
||||
2. Ctrl + click or right-click on the Delibar app in your Applications folder and choose _Show Package Contents_
|
||||
|
||||
|
||||
3. In the opened Finder window browse to Contents > Resources
|
||||
|
||||
|
||||
4. Drag the contents of the _Icon Resources_ folder from the download package into this place, replacing the current files
|
||||
|
||||
|
||||
5. Start Delibar and enjoy!
|
||||
|
||||
|
||||
175
_src/_posts/2009-12-17-wordpress-post-thumbnails.markdown
Normal file
175
_src/_posts/2009-12-17-wordpress-post-thumbnails.markdown
Normal file
@ -0,0 +1,175 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2009-12-17 04:00:21+00:00
|
||||
layout: post
|
||||
slug: wordpress-post-thumbnails
|
||||
title: Using The New Post Thumbnail Feature In WordPress 2.9
|
||||
wordpress_id: 959
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
WordPress 2.9 added a new feature which allows you to assign an image to an article to make it the post image like it's often used in magazine style themes. This new feature along with a new template tag makes all the custom field hacks usually used for this functionality in the past obsolete. So here's a quick walkthrough to make use of the new post thumbnail feature and of course how to make it backwards compatible.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
## 1. Activate The Feature
|
||||
|
||||
|
||||
For whatever reason you first have to activate the feature with an entry in your theme's _functions.php_ file in order to get the Post Thumbnail box in the Editor.
|
||||
|
||||
So just open up your theme's _functions.php_ file in your favorite editor or create it if there's no such file in your theme folder. Add this little code snippet to this file:
|
||||
[php]add_theme_support('post-thumbnails');[/php]
|
||||
For backwards compatibility you should wrap this inside a function check for the new add_theme_support:
|
||||
[php]if ( function_exists( 'add_theme_support' ) )
|
||||
add_theme_support( 'post-thumbnails' );[/php]
|
||||
This makes sure WordPress installation prior to 2.9 won't get screwed up when using a theme with this new feature.
|
||||
|
||||
|
||||
## 2. Add A Post Thumbnail To Your Post
|
||||
|
||||
|
||||
After you've added the above mentioned code into your _functions.php_ file there should be a new Post Thumbnail box in the WordPress editor view on the right side.
|
||||
|
||||
In this box click on the _Set Thumbnail link_ and the usual Add Media dialogue will pop up where you can choose an image from your Media Library. At the end of the dialogue for the selected image there's a new link beside the Insert into Post button called _Use as thumbnail_.
|
||||
|
||||
Click this and your chosen image will be assigned as the post thumbnail. (Unfortunately the _Use as thumbnail_ link is missing in the dialogue which appears after uploading an image, it's just there if you browse your Media Library.)
|
||||
|
||||
You can close the media dialogue now and you will see the image in the Post Thumbnail box:
|
||||
|
||||
|
||||
|
||||
|
||||
## 3. Display The Post Thumbnail In Your Theme
|
||||
|
||||
|
||||
Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file:
|
||||
[php]<?php the_post_thumbnail(); ?>[/php]
|
||||
This template tag will display the thumbnail sized post thumbnail by default and is essentially the same as:
|
||||
|
||||
[php]<?php the_post_thumbnail('thumbnail'); ?>[/php]
|
||||
|
||||
But of course you can grab the other sizes WordPress automatically creates when you upload an image:
|
||||
|
||||
[php]<?php
|
||||
the_post_thumbnail('medium');
|
||||
the_post_thumbnail('large');
|
||||
?>[/php]
|
||||
_(Note: Matt [left a comment on WP Engineer](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/#comment-3053) stating he wouldn't recommend using these named arguments but provided no explanation for it yet.)_
|
||||
|
||||
The code will output a generic `<img />` tag with a class of wp-post-image. Needless to say this is what you can select with css to style just the post thumbnails further:
|
||||
[css].wp-post-image { border: 2px solid #ccc; } [/css]
|
||||
|
||||
|
||||
### Custom Output
|
||||
|
||||
|
||||
If you want to adjust the generated output of the <img /> tag you can do this by using some array stuff. So let's say you want to have the post thumbnails to be 200x200px big and another class assigned to it, you can extend the template tag like so:
|
||||
[php]<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>[/php]
|
||||
|
||||
If you want to add more than one class you can do this like so:
|
||||
|
||||
[php]<?php the_post_thumbnail('medium', array('class' => 'alignleft another_class')); ?>[/php]
|
||||
|
||||
And you can add any attributes to the <img /> tag like a title, rel or an alt attribute. For accessibility reasons you should always add at least the alt-attribute:
|
||||
|
||||
[php]<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext')); ?>[/php]
|
||||
|
||||
As for the title attribute this will be grabbed automatically from the entry you've made in your Media Library during the upload process but you even could override this too:
|
||||
|
||||
[php]<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>[/php]
|
||||
|
||||
|
||||
|
||||
### Respect Media Settings
|
||||
|
||||
|
||||
Finally if you want to respect the custom sizes you or your users have set under Settings > Media you can first grab those sizes with [get_option function](http://codex.wordpress.org/Function_Reference/get_option) and then put it in the array:
|
||||
|
||||
[php]<?php
|
||||
$width = get_option('thumbnail_size_w'); // get the width of the thumbnail setting
|
||||
$height = get_option('thumbnail_size_h'); // get the height of the thumbnail setting
|
||||
the_post_thumbnail(array($width, $height), array('class' => 'alignleft'));
|
||||
?>[/php]
|
||||
|
||||
You can also detect the Media settings for the other sizes and whether the crop setting is active or not:
|
||||
|
||||
[php]<?php
|
||||
get_option('medium_size_w'); // Width of the medium size
|
||||
get_option('medium_size_h'); // Height of the medium size
|
||||
get_option('large_size_w'); // Width of the large size
|
||||
get_option('large_size_h'); // Height of the large size
|
||||
get_option('thumbnail_crop'); // Check for crop, On=1, Off=0
|
||||
?>[/php]
|
||||
|
||||
|
||||
|
||||
## 4. Make It Bulletproof (a.k.a. Backwards Compatible)
|
||||
|
||||
|
||||
With the check in your functions.php at the beginning there's already ensured old WordPress installations will just skip this feature. But there remains one problem and before you just go ahead and update your theme(s) think about it: the old content in your blog doesn't have a post thumbnail assigned to it through this new feature. You don't want to have you or your theme users update all their older articles, right? And if you already use some sort of post image hack there's probably a special function in your theme which does that.
|
||||
|
||||
So it's a pretty good idea to make this backwards compatible with some quick if else voodoo, code shamelessly [adapted from WP-Recipes](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility):
|
||||
|
||||
[php]if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {
|
||||
the_post_thumbnail();
|
||||
} else {
|
||||
$postimage = get_post_meta($post->ID, 'post-image', true);
|
||||
if ($postimage) {
|
||||
echo '<img src="'.$postimage.'" alt="" />';
|
||||
}
|
||||
}[/php]
|
||||
|
||||
This first checks if the feature exists and if a post thumbnail was addd with this new feature. If it was, it simply returns the post thumbnail. If not, it falls back to whatever you've used in your theme before, the usual way is to check for and get the value of a special custom field named e.g. post-image and output it. You can add whatever you've used before inside the else statement. Et voilà, it's nicely backwards compatible now, yay!
|
||||
|
||||
|
||||
## 5. Resources And More Information
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* WP Engineer: [About WordPress Post Thumbnail](http://wpengineer.com/about-wordpress-post-thumbnail/)
|
||||
|
||||
|
||||
* WP Engineer: [The Ultimative Guide For the_post_thumbnail In WordPress 2.9](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/)
|
||||
|
||||
|
||||
* WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility)
|
||||
|
||||
|
||||
* Justin Tadlock: [Everything you need to know about WordPress 2.9’s post image feature](http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature)
|
||||
|
||||
|
||||
* Chris Harrison: [Post Thumbnails in RSS Feeds](http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/)
|
||||
|
||||
|
||||
* Technosailor: [10 Things You Need to Know About WordPress 2.9](http://technosailor.com/2009/11/11/10-things-you-need-to-know-about-wordpress-2-9/)
|
||||
|
||||
|
||||
Well and that's it. I would love to link to some smart WordPress Codex pages for these new template tags but at the time of this writing there simply isn't anything in the Codex about this.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee ;-)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Article Updates
|
||||
|
||||
|
||||
12/20/2009 Added some resources and a note about the named arguments
|
||||
12/20/2009 function check for add_theme_support at the beginning
|
||||
12/20/2009 corrected the size array code under Custom Output
|
||||
12/17/2009 Added some code examples to respect the media settings
|
||||
|
||||
|
||||
42
_src/_posts/2010-02-04-ipixelpad.markdown
Normal file
42
_src/_posts/2010-02-04-ipixelpad.markdown
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2010-02-04 15:21:42+00:00
|
||||
layout: post
|
||||
slug: ipixelpad
|
||||
title: iPixelPad - Tongue Twisting But Crisp iPad Icons
|
||||
wordpress_id: 1092
|
||||
categories:
|
||||
- goodies
|
||||
- icon
|
||||
---
|
||||
|
||||
So, what to do when [everyone seem](http://www.littleboxofideas.com/blog/design-resources/5-very-useful-free-ipad-icon-sets-for-designers) [to release iPad icons](http://line25.com/articles/free-apple-ipad-icon-set-for-your-website-designs) but fail to include some crisp small size icons? Pushing the pixels for yourself of course. So here's my take on the smaller sizes of an [Apple iPad](http://www.apple.com/ipad/) icon, called iPixelPad in the sizes 48px, 32px and 16px. Everything drawn pixel-perfect from scratch. Heck, even the wallpaper.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
They also come in two different versions for each size: with a matte highlight shine and with a harder gloss.
|
||||
|
||||
And drawing the homescreen icons was quite funky and if you know the standard iPhone icons I bet you can guess what icons you can see here and in the icon files, at least in the 48px and 32px versions:
|
||||
|
||||
|
||||
|
||||
The homescreen icons pixels in the 16px version needed all more vivid colors to get them distinguishable from the wallpaper background so they're a bit different from the other sizes. These are the times I wish I could modify just half a pixel.
|
||||
|
||||
|
||||
|
||||
## Download
|
||||
|
||||
|
||||
The icons come in various formats: iContainer, ICNS, ICO and PNG files for each size. Just click the following download button to grab the whole pack:
|
||||
|
||||
[download_button version=1.0]
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
|
||||
|
||||
[](http://creativecommons.org/licenses/by-nc/3.0/de/)
|
||||
iPixelPad by [Matthias Kretschmann](http://kremalicious.com) is licensed under a [Creative Commons Attribution-Noncommercial 3.0 Germany License](http://creativecommons.org/licenses/by-nc/3.0/de/).
|
||||
17
_src/_posts/2010-03-27-office-desk.markdown
Normal file
17
_src/_posts/2010-03-27-office-desk.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2010-03-27 21:31:35+00:00
|
||||
layout: post
|
||||
slug: office-desk
|
||||
title: Office Desk
|
||||
wordpress_id: 1901
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
Lost in this gorgeous figure. East Indian Rosewood, FTW!
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/4482756484)
|
||||
32
_src/_posts/2010-07-03-momcorp.markdown
Normal file
32
_src/_posts/2010-07-03-momcorp.markdown
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2010-07-03 17:12:53+00:00
|
||||
layout: post
|
||||
slug: momcorp
|
||||
title: MomCorp Wallpaper
|
||||
wordpress_id: 1453
|
||||
categories:
|
||||
- goodies
|
||||
- wallpaper
|
||||
---
|
||||
|
||||
The recent Futurama episode "[Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App)" mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
The wallpaper comes in four versions with two color variations and two text variations with Mom's favorite tagline. Here's an overview:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Download
|
||||
|
||||
|
||||
|
||||
You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included:
|
||||
|
||||
[download_button version=1.0]
|
||||
|
||||
17
_src/_posts/2010-07-18-typeface-condoms.markdown
Normal file
17
_src/_posts/2010-07-18-typeface-condoms.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2010-07-18 20:28:33+00:00
|
||||
layout: post
|
||||
slug: typeface-condoms
|
||||
title: Typeface condoms
|
||||
wordpress_id: 1898
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
Burg Giebichenstein Hochschule für Kunst & Design Halle Jahresausstellung 2010, Campus Design
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/4806178714)
|
||||
17
_src/_posts/2010-08-07-bonsai.markdown
Normal file
17
_src/_posts/2010-08-07-bonsai.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2010-08-07 20:23:31+00:00
|
||||
layout: post
|
||||
slug: bonsai
|
||||
title: Bonsai
|
||||
wordpress_id: 1895
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
Still needs a cut
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/4894095148)
|
||||
17
_src/_posts/2010-09-01-gdr-helvetica.markdown
Normal file
17
_src/_posts/2010-09-01-gdr-helvetica.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2010-09-01 20:21:43+00:00
|
||||
layout: post
|
||||
slug: gdr-helvetica
|
||||
title: GDR Helvetica
|
||||
wordpress_id: 1892
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
Must be socialist Helvetica or something
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/4949302781)
|
||||
17
_src/_posts/2010-12-11-iphone-coasters.markdown
Normal file
17
_src/_posts/2010-12-11-iphone-coasters.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2010-12-11 21:19:29+00:00
|
||||
layout: post
|
||||
slug: iphone-coasters
|
||||
title: iPhone Coasters
|
||||
wordpress_id: 1889
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
Putting stuff under my coffee, iOS style. That's the "Home Set" from [iphoneappscoasters.com](http://iphoneappscoasters.com)
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/5252227652)
|
||||
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2010-12-29 15:47:12+00:00
|
||||
layout: post
|
||||
slug: basically-the-monolith-is-on-my-desk
|
||||
title: Basically, The Monolith Is On My Desk
|
||||
wordpress_id: 1873
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
Be careful: your mind will get blown when you stare at it for too long. TMA-1 Action Figure from [ThinkGeek](http://thinkgeek.com)
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/5342106230)
|
||||
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2010-12-29 21:16:55+00:00
|
||||
layout: post
|
||||
slug: free-monkey-breath-not-soylent-green
|
||||
title: Free Monkey Breath, Not Soylent Green
|
||||
wordpress_id: 1886
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
Don't know where to start outlining why this is an awesome geeky bag
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/5342064578)
|
||||
17
_src/_posts/2011-01-08-enjoying-paper.markdown
Normal file
17
_src/_posts/2011-01-08-enjoying-paper.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2011-01-08 15:43:14+00:00
|
||||
layout: post
|
||||
slug: enjoying-paper
|
||||
title: Enjoying Paper
|
||||
wordpress_id: 1867
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
Being a kid again and enjoying the package of a present (Thanks Dad!)
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/5364880917)
|
||||
17
_src/_posts/2011-01-08-glowing-star-inside.markdown
Normal file
17
_src/_posts/2011-01-08-glowing-star-inside.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2011-01-08 15:45:26+00:00
|
||||
layout: post
|
||||
slug: glowing-star-inside
|
||||
title: Glowing Star Inside
|
||||
wordpress_id: 1870
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
Thanks Dad!
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/5364875973)
|
||||
17
_src/_posts/2011-01-18-historic-flood-levels.markdown
Normal file
17
_src/_posts/2011-01-18-historic-flood-levels.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2011-01-18 15:40:12+00:00
|
||||
layout: post
|
||||
slug: historic-flood-levels
|
||||
title: Historic Flood Levels
|
||||
wordpress_id: 1864
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
dates ranging from 16th - 19th century
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/5369397812)
|
||||
17
_src/_posts/2011-10-11-broken-nexus-s-screen.markdown
Normal file
17
_src/_posts/2011-10-11-broken-nexus-s-screen.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2011-10-11 14:37:06+00:00
|
||||
layout: post
|
||||
slug: broken-nexus-s-screen
|
||||
title: Broken Nexus S Screen
|
||||
wordpress_id: 1861
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
The good thing is it looks really cool, the bad thing is I can't use the screen anymore.
|
||||
|
||||
[Photo on Flickr](http://www.flickr.com/photos/krema/6234862247/)
|
||||
134
_src/_posts/2011-12-15-badged.markdown
Normal file
134
_src/_posts/2011-12-15-badged.markdown
Normal file
@ -0,0 +1,134 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2011-12-15 07:56:46+00:00
|
||||
layout: post
|
||||
slug: badged
|
||||
title: Badged - iOS Style Notification Badges for WordPress
|
||||
wordpress_id: 1468
|
||||
categories:
|
||||
- goodies
|
||||
---
|
||||
|
||||
Made a quick WordPress plugin which transforms the standard WordPress update & comment notification badges into iOS-styled ones.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
The badges are CSS only (box shadows, gradients, pseudo elements, you name it) and were tested in current versions of Safari, Chrome & Firefox. It should degrade gracefully in older Browsers with some details missing like drop shadows or the highlight shine. If you care for how it's done exactly, you can peek around in the [css file on github](https://github.com/kremalicious/Badged/blob/master/css/badged-menu.css).
|
||||
|
||||
The plugin is localized in english & german, which is only important for the settings page.
|
||||
|
||||
|
||||
|
||||
## Download & Installation
|
||||
|
||||
|
||||
You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
|
||||
|
||||
|
||||
|
||||
|
||||
[Plugin Page](http://wordpress.org/extend/plugins/badged) [Github](https://github.com/kremalicious/Badged) [Donate](http://krlc.us/givecoffee)
|
||||
|
||||
|
||||
|
||||
|
||||
The plugin is hosted on github and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually:
|
||||
|
||||
|
||||
|
||||
|
||||
1. Upload the badged plugin folder to the `/wp-content/plugins/` directory
|
||||
|
||||
|
||||
2. Activate the plugin through the _Plugins_ menu in WordPress
|
||||
|
||||
|
||||
3. Enjoy
|
||||
|
||||
|
||||
4. (optional) Adjust options under _Settings > Badged_. Upon activation the plugin sets both options by default:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
If you find any problems you can [open an issue on Github](https://github.com/kremalicious/Badged/issues) or just drop me a line in the comments or on [Twitter](http://twitter.com/kremalicious).
|
||||
|
||||
|
||||
|
||||
## Version History
|
||||
|
||||
|
||||
**v0.3.6**
|
||||
|
||||
|
||||
|
||||
|
||||
* tested for WP 3.4
|
||||
|
||||
|
||||
* settings page: Retina ready icon for high dpi devices, css only submit button
|
||||
|
||||
|
||||
* updated german translation
|
||||
|
||||
|
||||
|
||||
**v0.3.5**
|
||||
|
||||
|
||||
|
||||
|
||||
* IE 8 improvements: box shadow, light gradient through DXImageTransform filters (but no rounded corners, sorry)
|
||||
|
||||
|
||||
* current versions of IE & Opera are now among the tested browsers
|
||||
|
||||
|
||||
* updated settings page links
|
||||
|
||||
|
||||
**v0.3.4**
|
||||
|
||||
|
||||
|
||||
|
||||
* more descriptive readme and settings footer with links to blog post & github page
|
||||
|
||||
|
||||
* updated translation
|
||||
|
||||
|
||||
**v0.3.2**
|
||||
|
||||
|
||||
|
||||
|
||||
* Make the plugin work if symlinked
|
||||
|
||||
|
||||
**v0.3**
|
||||
|
||||
|
||||
|
||||
|
||||
* initial beta release
|
||||
|
||||
|
||||
**v0.2**
|
||||
|
||||
|
||||
|
||||
|
||||
* added options to control whether the badges show up in admin menu or toolbar (default is both)
|
||||
|
||||
|
||||
**v0.1**
|
||||
|
||||
|
||||
|
||||
|
||||
* initial alpha release
|
||||
|
||||
|
||||
97
_src/_posts/2012-02-26-mk-v2.markdown
Normal file
97
_src/_posts/2012-02-26-mk-v2.markdown
Normal file
@ -0,0 +1,97 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2012-02-26 21:29:54+00:00
|
||||
layout: post
|
||||
slug: mk-v2
|
||||
title: Personal Site v2
|
||||
wordpress_id: 1506
|
||||
categories:
|
||||
- personal
|
||||
---
|
||||
|
||||
Today I finally launched v2 of my personal site, still following the concept of a business card web site but with a portfolio added to it. You should totally [have a look](http://matthiaskretschmann.com).
|
||||
|
||||
<!-- more -->
|
||||
|
||||
|
||||
## Who needs images anyway
|
||||
|
||||
|
||||
One goal was to use as less images as possible. Yes, it would have been easier to just use images instead of like 10 box-shadows on one element but this wouldn't have been any fun. And no matter what retina/high dpi devices come up next all interface elements will look just as sharp without any additional work.
|
||||
|
||||
|
||||
|
||||
Apart from the colored top background, the logo and the subtle background texture there're no background images in use. All the other visuals were created with a lot of CSS3 & pseudo elements. Pseudo elements were the perfect technology so the markup doesn't get cluttered with dozens of empty divs, spans etc. which would only serve a styling purpose.
|
||||
|
||||
All icons on the site are coming from an icon font (the wonderful [IcoMoon](http://keyamoon.com/icomoon)) embedded with @font-face.
|
||||
|
||||
|
||||
|
||||
|
||||
## Mobile & Modern First
|
||||
|
||||
|
||||
For the front-end development I've followed a mobile devices & modern browsers first approach. Therefore the site should look great on many different devices & screen sizes. As a starting point I used a combination of the [1140grid](http://cssgrid.net) and [320 and up](http://www.stuffandnonsense.co.uk/projects/320andup/).
|
||||
|
||||
|
||||
|
||||
That's of course all done by media queries with breakpoints at 600px, 768px and 992px. During my testing those rather weird values turned out to work best for this simple layout. The layout only changes at 600px & 768px, the 992px is just used for some different css animations. And yes, I'm aware of the irony targeting fixed values here although everything else uses relative values.
|
||||
|
||||
But it's interesting to see how different the rendering of the site is in some mobile browsers. Here're some unmodified screenshots of the site in various mobile browsers on iOS 5 & Android 4:
|
||||
|
||||
|
||||
|
||||
|
||||
* [iOS - Mobile Safari (iPhone 4S)](/media/mkv2-iphone.png)
|
||||
|
||||
|
||||
* [iOS - Mobile Safari (iPad)](/media/mkv2-ipad.png)
|
||||
|
||||
|
||||
* [Android - Android Browser (Nexus S)](/media/mkv2-android.png)
|
||||
|
||||
|
||||
* [Android - Chrome beta (Nexus S)](/media/mkv2-android-chrome.png)
|
||||
|
||||
|
||||
* [Android - Firefox (Nexus S)](/media/mkv2-android-firefox.png)
|
||||
|
||||
|
||||
Notice the weird banding of the gradients in Firefox. And Android either ignores the min-device-pixel-ratio media query altogether or has just problems with the background-size css property.
|
||||
|
||||
|
||||
## Animations
|
||||
|
||||
|
||||
All animations were written as CSS animations/transitions first. So in modern browsers you can disable JavaScript without losing most of the animations. And those animations are buttery smooth because they're hardware accelerated. You wouldn't notice the difference between a CSS- and jQuery-based animation on a desktop device (except if you're on a shitty netbook) but it makes a great difference on all those ARM devices. For not so cool browsers [Modernizr](http://www.modernizr.com/) & [jQuery](http://jquery.com/) are kicking in to compensate for the lack of css animation support.
|
||||
|
||||
Except for the standard Android browser. Although the current version supports css transitions & animations it just wasn't possible to animate something smoothly here. I suspect this is caused by all the portfolio images on one page. Many images on a site always let this Browser capitulate, even on Android 4.0. So I'm being totally bad here, sniff for that particular browser and disable the animations for it. Please address your anger towards Google for that. Or just use the [Chrome beta](https://market.android.com/details?id=com.android.chrome) which works perfectly fine with images on a website.
|
||||
|
||||
Interesting side note: while Webkit-based browsers are usually the best bet to fully render all the effects on the site, they still lack css-animating pseudo elements. That's why the shine animation of the top plate on start and the drop shadow change of the social network "balls" are only smoothly animated in Firefox.
|
||||
|
||||
If you're interested, here're the non-minified versions of the main [css file](http://matthiaskretschmann.com/style/css/style.css) & [javascript file](http://matthiaskretschmann.com/style/js/script.js).
|
||||
|
||||
|
||||
## The touch hover problem
|
||||
|
||||
|
||||
|
||||
|
||||
A common pattern for stuff which can be revealed by hovering over something on desktop devices is to just make everything visible by default on touch devices. But I didn't wanted to clutter the portfolio items by adding buttons/text links or whatever around them.
|
||||
|
||||
 So this led to a problem for touch users because it isn't immediately obvious how to reveal the overlays housing additional actions for each item. Approximately half of my beta testers found out about tapping a portfolio item to reveal the actions which is obviously not enough.
|
||||
|
||||
So I incorporated a visual hint for the other half: If a user on a touch device hasn't tapped on an item yet a subtle touch indicator starts pulsating over each item after 30 seconds.
|
||||
|
||||
|
||||
## One More Thing
|
||||
|
||||
|
||||
If you get bored, shake your Post-PC device. On Desktops, try entering Twitter's first prototype SMS shortcode on the keyboard. Nuff' said. (could be a bit rough at the moment, be warned)
|
||||
|
||||
Finally many thanks to all my beta testers, you greatly helped in finding all the small quirks so the site got more usable in the end.
|
||||
|
||||
If you're interested in all the other components used on the site just open up the Colophon at the end of the site. And did I mention you should have a look?
|
||||
|
||||
[http://matthiaskretschmann.com](http://matthiaskretschmann.com)
|
||||
17
_src/_posts/2012-03-04-relaxing-cat.markdown
Normal file
17
_src/_posts/2012-03-04-relaxing-cat.markdown
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2012-03-04 08:00:32+00:00
|
||||
layout: post
|
||||
slug: relaxing-cat
|
||||
title: Relaxing Cat
|
||||
wordpress_id: 1729
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
tags:
|
||||
- instagram
|
||||
---
|
||||
|
||||
|
||||
15
_src/_posts/2012-04-03-blaue-turme.markdown
Normal file
15
_src/_posts/2012-04-03-blaue-turme.markdown
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
author: Matthias Kretschmann
|
||||
comments: true
|
||||
date: 2012-04-03 12:41:01+00:00
|
||||
layout: post
|
||||
slug: blaue-turme
|
||||
title: Blaue Türme
|
||||
wordpress_id: 1753
|
||||
categories:
|
||||
- photos
|
||||
post_format:
|
||||
- Image
|
||||
---
|
||||
|
||||
[Photo on 500px](http://500px.com/photo/6350862) | [Photo on Flickr](http://www.flickr.com/photos/krema/6904523272/in/photostream)
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user